diff --git a/.changeset/nice-games-press.md b/.changeset/nice-games-press.md new file mode 100644 index 0000000000..d384dec9c2 --- /dev/null +++ b/.changeset/nice-games-press.md @@ -0,0 +1,7 @@ +--- +'@sl-design-system/listbox': patch +--- + +Various improvements: +- Support `` elements in addition to `` and `` inside `` +- Override `textContent` in `` to return only the text directly inside the element diff --git a/.changeset/thirty-kings-happen.md b/.changeset/thirty-kings-happen.md new file mode 100644 index 0000000000..56ee845e31 --- /dev/null +++ b/.changeset/thirty-kings-happen.md @@ -0,0 +1,8 @@ +--- +'@sl-design-system/combobox': patch +--- + +Various improvements: +- For improved performance, also support `` +- Scroll to the selected option when opening the popover in single mode +- Actually toggle the popover when clicking the button diff --git a/packages/components/listbox/src/listbox.ts b/packages/components/listbox/src/listbox.ts index 718d097bda..473dfe2f9c 100644 --- a/packages/components/listbox/src/listbox.ts +++ b/packages/components/listbox/src/listbox.ts @@ -1,5 +1,3 @@ -import { type IconLibrary } from '@sl-design-system/icon'; -import { Config } from '@sl-design-system/shared'; import { type CSSResultGroup, LitElement, type TemplateResult, html } from 'lit'; import styles from './listbox.scss.js'; @@ -15,13 +13,13 @@ export class Listbox extends LitElement { #lightStyles?: HTMLStyleElement; - override async connectedCallback(): Promise { + override connectedCallback(): void { super.connectedCallback(); this.setAttribute('role', 'listbox'); if (!this.#lightStyles) { - const { check } = await Config.getConfigSetting('icons'); + const { check } = window.SLDS.icons; this.#lightStyles = document.createElement('style'); this.#lightStyles.textContent = ` diff --git a/packages/themes/bingel-dc/index.ts b/packages/themes/bingel-dc/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/bingel-dc/index.ts +++ b/packages/themes/bingel-dc/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/bingel-int/index.ts b/packages/themes/bingel-int/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/bingel-int/index.ts +++ b/packages/themes/bingel-int/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/clickedu/index.ts b/packages/themes/clickedu/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/clickedu/index.ts +++ b/packages/themes/clickedu/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/editorial-suite/index.ts b/packages/themes/editorial-suite/index.ts index ddd1dad154..222ef2a2f5 100644 --- a/packages/themes/editorial-suite/index.ts +++ b/packages/themes/editorial-suite/index.ts @@ -1,28 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; -import type { ConfigSettings } from '@sl-design-system/shared'; -import { Config } from '@sl-design-system/shared'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -// export const setup = (): void => { -// 1. Add typekit url to `` -// 2. Add theme icons -// 3. Load the base stylesheet/css variables -// 4. Start using the SLDS in your application -// }; - -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { - const config: ConfigSettings = { - avatar: { - shape: 'circle', - badgeGapWidth: 2 - } - }; - Icon.register(icons as IconLibrary); - Config.setConfig(config); }; diff --git a/packages/themes/itslearning/index.ts b/packages/themes/itslearning/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/itslearning/index.ts +++ b/packages/themes/itslearning/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/kampus/index.ts b/packages/themes/kampus/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/kampus/index.ts +++ b/packages/themes/kampus/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/magister/index.ts b/packages/themes/magister/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/magister/index.ts +++ b/packages/themes/magister/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/max/index.ts b/packages/themes/max/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/max/index.ts +++ b/packages/themes/max/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/my-digital-book/index.ts b/packages/themes/my-digital-book/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/my-digital-book/index.ts +++ b/packages/themes/my-digital-book/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/myvanin_onhold/index.ts b/packages/themes/myvanin_onhold/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/myvanin_onhold/index.ts +++ b/packages/themes/myvanin_onhold/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/neon/index.ts b/packages/themes/neon/index.ts index 02f130cda8..222ef2a2f5 100644 --- a/packages/themes/neon/index.ts +++ b/packages/themes/neon/index.ts @@ -1,11 +1,7 @@ -import type { IconLibrary } from '@sl-design-system/icon'; -import { Icon } from '@sl-design-system/icon'; +import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/sanoma-learning/index.ts b/packages/themes/sanoma-learning/index.ts index 47fc384458..222ef2a2f5 100644 --- a/packages/themes/sanoma-learning/index.ts +++ b/packages/themes/sanoma-learning/index.ts @@ -1,27 +1,7 @@ import { Icon, type IconLibrary } from '@sl-design-system/icon'; -import { Config, type ConfigSettings } from '@sl-design-system/shared'; import { icons } from './icons.js'; -// export const setup = (): void => { -// 1. Add typekit url to `` -// 2. Add theme icons -// 3. Load the base stylesheet/css variables -// 4. Start using the SLDS in your application -// }; - -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { - const config: ConfigSettings = { - avatar: { - shape: 'circle', - badgeGapWidth: 2 - }, - icons - }; - Icon.register(icons as IconLibrary); - Config.setConfig(config); }; diff --git a/packages/themes/sanoma-utbildning_onhold/index.ts b/packages/themes/sanoma-utbildning_onhold/index.ts index fc87d7c212..222ef2a2f5 100644 --- a/packages/themes/sanoma-utbildning_onhold/index.ts +++ b/packages/themes/sanoma-utbildning_onhold/index.ts @@ -1,11 +1,7 @@ import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { - console.log('register Icons'); Icon.register(icons as IconLibrary); }; diff --git a/packages/themes/teas/index.ts b/packages/themes/teas/index.ts index b4f9b55f80..222ef2a2f5 100644 --- a/packages/themes/teas/index.ts +++ b/packages/themes/teas/index.ts @@ -1,17 +1,7 @@ import { Icon, type IconLibrary } from '@sl-design-system/icon'; import { icons } from './icons.js'; -// export const setup = (): void => { -// 1. Add typekit url to `` -// 2. Add theme icons -// 3. Load the base stylesheet/css variables -// 4. Start using the SLDS in your application -// }; - -/** - * initializes all necessary things to load your theme, - * like icons, ... - */ +/** Setup the theme. */ export const setup = (): void => { Icon.register(icons as IconLibrary); };