@universal-material/web 3.6.11 → 3.6.13

package/select/option.styles.js

@@ -1,14 +1,14 @@
 import { css } from 'lit';
 export const styles = css `
-  :host(.selected) {
+  .selected {
     background-color: var(--u-select-option-selected-bg-color, color-mix(in srgb, var(--u-color-primary, rgb(103, 80, 164)) 12%, transparent));
   }
-  :host(.selected) .icon,
-  :host(.selected) .content {
+  .selected .icon,
+  .selected .content {
     color: var(--u-select-option-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));
   }
 
-  :host(:not(.selected):not([has-trailing-icon])) .trailing {
+  .container:not(.selected):not(.trailing-icon) .trailing {
     display: none;
   }
 `;

package/select/option.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;CAYzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host(.selected) {\n    background-color: var(--u-select-option-selected-bg-color, color-mix(in srgb, var(--u-color-primary, rgb(103, 80, 164)) 12%, transparent));\n  }\n  :host(.selected) .icon,\n  :host(.selected) .content {\n    color: var(--u-select-option-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host(:not(.selected):not([has-trailing-icon])) .trailing {\n    display: none;\n  }\n`;\n"]}
+{"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;CAYzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  .selected {\n    background-color: var(--u-select-option-selected-bg-color, color-mix(in srgb, var(--u-color-primary, rgb(103, 80, 164)) 12%, transparent));\n  }\n  .selected .icon,\n  .selected .content {\n    color: var(--u-select-option-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  .container:not(.selected):not(.trailing-icon) .trailing {\n    display: none;\n  }\n`;\n"]}

package/select/select-navigation-controller.js

@@ -9,7 +9,7 @@ const getCleanTypeaheadStatus = () => ({
 export class SelectNavigationController extends MenuFieldNavigationController {
     #typeaheadStatus = getCleanTypeaheadStatus();
     handleKeyDown(event) {
-        if (this.host._menu.open) {
+        if (this.getHost()._menu.open) {
             const handled = super.handleKeyDown(event);
             return handled || this.handleType(event);
         }
@@ -19,32 +19,32 @@ export class SelectNavigationController extends MenuFieldNavigationController {
             return this.handleType(event);
         }
         event.preventDefault();
-        this.host._menu.show();
-        if (!this.host.selectedOptions.length) {
+        this.getHost()._menu.show();
+        if (!this.getHost().selectedOptions.length) {
             return true;
         }
-        const option = this.host.selectedOptions[0];
-        this.navigateTo(event, option, this.host._menuItems.indexOf(option));
+        const option = this.getHost().selectedOptions[0];
+        this.navigateTo(event, option, this.getHost()._menuItems.indexOf(option));
         return true;
     }
     attach(element) {
         super.attach(element);
-        this.host._menu.addEventListener('menu-item-mouseenter', this.#handleMouseFocus);
+        this.getHost()._menu.addEventListener('menu-item-mouseenter', this.#handleMouseFocus);
     }
     detach() {
         super.detach();
-        this.host._menu.removeEventListener('menu-item-mouseenter', this.#handleMouseFocus);
+        this.getHost()._menu.removeEventListener('menu-item-mouseenter', this.#handleMouseFocus);
     }
     #handleMouseFocus = (e) => {
         this.blurMenu();
         const option = e.target;
-        this.focusMenu(option, this.host._menuItems.indexOf(option), false, false);
+        this.focusMenu(option, this.getHost()._menuItems.indexOf(option), false, false);
     };
     afterFocus(_, index) {
-        this.host._button.setAttribute('aria-activedescendant', `item-${index + 1}`);
+        this.getHost()._button.setAttribute('aria-activedescendant', `item-${index + 1}`);
     }
     afterBlur() {
-        this.host._button.removeAttribute('aria-activedescendant');
+        this.getHost()._button.removeAttribute('aria-activedescendant');
     }
     handleType(event) {
         if (event.key.length > 1) {
@@ -61,9 +61,9 @@ export class SelectNavigationController extends MenuFieldNavigationController {
         return true;
     }
     findNextElementByTerm(term, lastFocusedMenu) {
-        const options = this.host._options;
+        const options = this.getHost()._options;
         const lastFocusedMenuIndex = lastFocusedMenu ? options.indexOf(lastFocusedMenu) : -1;
-        let nextMenu = lastFocusedMenuIndex > -1 ? this.host._options[lastFocusedMenuIndex + 1] : null;
+        let nextMenu = lastFocusedMenuIndex > -1 ? this.getHost()._options[lastFocusedMenuIndex + 1] : null;
         if (!nextMenu || !normalizedStartsWith(nextMenu.textContent, term)) {
             nextMenu = options.find(o => normalizedStartsWith(o.textContent, term));
         }
@@ -71,12 +71,12 @@ export class SelectNavigationController extends MenuFieldNavigationController {
             return;
         }
         const nextMenuIndex = options.indexOf(nextMenu);
-        if (this.host._menu.open) {
+        if (this.getHost()._menu.open) {
             this.blurMenu();
             this.focusMenu(nextMenu, nextMenuIndex);
             return;
         }
-        nextMenu.setSelectedByUser();
+        nextMenu._setSelectedByUser();
     }
 }
 //# sourceMappingURL=select-navigation-controller.js.map

package/select/select-navigation-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-navigation-controller.js","sourceRoot":"","sources":["../../src/select/select-navigation-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { normalizedStartsWith } from '../shared/compare-text.js';\nimport { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';\nimport { UmOption } from './option.js';\nimport { UmSelect } from './select.js';\n\nconst getCleanTypeaheadStatus = () => ({\n  typing: false,\n  repeating: false,\n  buffer: '',\n  timeoutId: 0,\n});\n\nexport class SelectNavigationController extends MenuFieldNavigationController<UmSelect, UmOption> {\n  #typeaheadStatus = getCleanTypeaheadStatus();\n\n  protected override handleKeyDown(event: KeyboardEvent): boolean {\n    if (this.host._menu.open) {\n      const handled = super.handleKeyDown(event);\n\n      return handled || this.handleType(event);\n    }\n\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n\n    if (!isDown && !isUp) {\n      return this.handleType(event);\n    }\n\n    event.preventDefault();\n    this.host._menu.show();\n\n    if (!this.host.selectedOptions.length) {\n      return true;\n    }\n\n    const option = this.host.selectedOptions[0];\n    this.navigateTo(event, option, this.host._menuItems.indexOf(option));\n    return true;\n  }\n\n  override attach(element: HTMLElement) {\n    super.attach(element);\n    this.host._menu.addEventListener('menu-item-mouseenter', this.#handleMouseFocus);\n  }\n\n  override detach() {\n    super.detach();\n    this.host._menu.removeEventListener('menu-item-mouseenter', this.#handleMouseFocus);\n  }\n\n  readonly #handleMouseFocus = (e: Event) => {\n    this.blurMenu();\n    const option = e.target as UmOption;\n    this.focusMenu(option, this.host._menuItems.indexOf(option), false, false);\n  };\n\n  protected override afterFocus(_: UmOption, index: number) {\n    this.host._button.setAttribute('aria-activedescendant', `item-${index + 1}`);\n  }\n\n  protected override afterBlur() {\n    this.host._button.removeAttribute('aria-activedescendant');\n  }\n\n  private handleType(event: KeyboardEvent) {\n    if (event.key.length > 1) {\n      return false;\n    }\n\n    if (this.#typeaheadStatus.timeoutId) {\n      clearTimeout(this.#typeaheadStatus.timeoutId);\n    }\n\n    const lastFocusedMenu = this.focusedMenu;\n\n    this.#typeaheadStatus.buffer += event.key;\n\n    this.#typeaheadStatus.timeoutId = setTimeout(() => this.#typeaheadStatus = getCleanTypeaheadStatus(), 1000);\n\n    const term =\n      this.#typeaheadStatus.buffer.replaceAll(event.key, '') === '' ? event.key : this.#typeaheadStatus.buffer;\n    this.findNextElementByTerm(term, lastFocusedMenu);\n\n    return true;\n  }\n\n  private findNextElementByTerm(term: string, lastFocusedMenu: UmOption | null): void {\n    const options = this.host._options;\n    const lastFocusedMenuIndex = lastFocusedMenu ? options.indexOf(lastFocusedMenu) : -1;\n\n    let nextMenu =\n      lastFocusedMenuIndex > -1 ? this.host._options[lastFocusedMenuIndex + 1] as UmOption | undefined : null;\n\n    if (!nextMenu || !normalizedStartsWith(nextMenu.textContent, term)) {\n      nextMenu = options.find(o => normalizedStartsWith(o.textContent, term));\n    }\n\n    if (!nextMenu) {\n      return;\n    }\n\n    const nextMenuIndex = options.indexOf(nextMenu);\n\n    if (this.host._menu.open) {\n      this.blurMenu();\n      this.focusMenu(nextMenu, nextMenuIndex);\n      return;\n    }\n\n    nextMenu.setSelectedByUser();\n  }\n}\n"]}
+{"version":3,"file":"select-navigation-controller.js","sourceRoot":"","sources":["../../src/select/select-navigation-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { normalizedStartsWith } from '../shared/compare-text.js';\nimport { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';\nimport { UmOption } from './option.js';\nimport { UmSelect } from './select.js';\n\nconst getCleanTypeaheadStatus = () => ({\n  typing: false,\n  repeating: false,\n  buffer: '',\n  timeoutId: 0,\n});\n\nexport class SelectNavigationController extends MenuFieldNavigationController<UmSelect, UmOption> {\n  #typeaheadStatus = getCleanTypeaheadStatus();\n\n  protected override handleKeyDown(event: KeyboardEvent): boolean {\n    if (this.getHost()._menu.open) {\n      const handled = super.handleKeyDown(event);\n\n      return handled || this.handleType(event);\n    }\n\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n\n    if (!isDown && !isUp) {\n      return this.handleType(event);\n    }\n\n    event.preventDefault();\n    this.getHost()._menu.show();\n\n    if (!this.getHost().selectedOptions.length) {\n      return true;\n    }\n\n    const option = this.getHost().selectedOptions[0];\n    this.navigateTo(event, option, this.getHost()._menuItems.indexOf(option));\n    return true;\n  }\n\n  override attach(element: HTMLElement) {\n    super.attach(element);\n    this.getHost()._menu.addEventListener('menu-item-mouseenter', this.#handleMouseFocus);\n  }\n\n  override detach() {\n    super.detach();\n    this.getHost()._menu.removeEventListener('menu-item-mouseenter', this.#handleMouseFocus);\n  }\n\n  readonly #handleMouseFocus = (e: Event) => {\n    this.blurMenu();\n    const option = e.target as UmOption;\n    this.focusMenu(option, this.getHost()._menuItems.indexOf(option), false, false);\n  };\n\n  protected override afterFocus(_: UmOption, index: number) {\n    this.getHost()._button.setAttribute('aria-activedescendant', `item-${index + 1}`);\n  }\n\n  protected override afterBlur() {\n    this.getHost()._button.removeAttribute('aria-activedescendant');\n  }\n\n  private handleType(event: KeyboardEvent) {\n    if (event.key.length > 1) {\n      return false;\n    }\n\n    if (this.#typeaheadStatus.timeoutId) {\n      clearTimeout(this.#typeaheadStatus.timeoutId);\n    }\n\n    const lastFocusedMenu = this.focusedMenu;\n\n    this.#typeaheadStatus.buffer += event.key;\n\n    this.#typeaheadStatus.timeoutId = setTimeout(() => this.#typeaheadStatus = getCleanTypeaheadStatus(), 1000);\n\n    const term =\n      this.#typeaheadStatus.buffer.replaceAll(event.key, '') === '' ? event.key : this.#typeaheadStatus.buffer;\n    this.findNextElementByTerm(term, lastFocusedMenu);\n\n    return true;\n  }\n\n  private findNextElementByTerm(term: string, lastFocusedMenu: UmOption | null): void {\n    const options = this.getHost()._options;\n    const lastFocusedMenuIndex = lastFocusedMenu ? options.indexOf(lastFocusedMenu) : -1;\n\n    let nextMenu =\n      lastFocusedMenuIndex > -1 ? this.getHost()._options[lastFocusedMenuIndex + 1] as UmOption | undefined : null;\n\n    if (!nextMenu || !normalizedStartsWith(nextMenu.textContent, term)) {\n      nextMenu = options.find(o => normalizedStartsWith(o.textContent, term));\n    }\n\n    if (!nextMenu) {\n      return;\n    }\n\n    const nextMenuIndex = options.indexOf(nextMenu);\n\n    if (this.getHost()._menu.open) {\n      this.blurMenu();\n      this.focusMenu(nextMenu, nextMenuIndex);\n      return;\n    }\n\n    nextMenu._setSelectedByUser();\n  }\n}\n"]}

package/select/select.d.ts

@@ -3,13 +3,12 @@ import { TemplateResult } from 'lit';
 import { UmMenu } from '../menu/menu.js';
 import { UmMenuField } from '../shared/menu-field/menu-field.js';
 import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
-import { ExtendedSelect } from './extended-select.js';
 import { UmOption } from './option.js';
 import './option.js';
 export declare class UmSelect extends UmTextFieldBase implements UmMenuField {
     #private;
     static styles: import("lit").CSSResultGroup[];
-    _nativeSelect: ExtendedSelect;
+    _nativeSelect: HTMLSelectElement;
     /**
      * The `value` of the selected option
      */
@@ -30,7 +29,6 @@ export declare class UmSelect extends UmTextFieldBase implements UmMenuField {
     get selectedOptions(): UmOption[];
     get _options(): UmOption[];
     constructor();
-    _updateOptions(): void;
     protected renderControl(): TemplateResult;
     protected renderAfterContent(): TemplateResult;
     protected renderDefaultTrailingIcon(): TemplateResult;
@@ -38,7 +36,9 @@ export declare class UmSelect extends UmTextFieldBase implements UmMenuField {
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    _updateEmpty(): void;
     get _menuItems(): UmOption[];
+    _syncSelectedOptions(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,eAAgB,YAAW,WAAW;;IAClE,OAAgB,MAAM,iCAAoC;IAE1D,aAAa,EAAE,cAAc,CAMxB;IAgBL;;OAEG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAEsB,KAAK,EAAG,MAAM,CAAC;IACd,OAAO,EAAG,iBAAiB,CAAC;IAC7B,MAAM,EAAG,WAAW,CAAC;IAEgB,eAAe,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/G;;OAEG;IACH,IACI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAE9B;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,QAAQ,EAAE,CAEhC;IAED,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAIzB;;IAoBD,cAAc;cAsGK,aAAa,IAAI,cAAc;cAW/B,kBAAkB,IAAI,cAAc;cAQpC,yBAAyB,IAAI,cAAc;cAO3C,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAMnD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhF,iBAAiB;IAOjB,oBAAoB;IAyE7B,IAAI,UAAU,IAAI,QAAQ,EAAE,CAE3B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAqB,cAAc,EAAE,MAAM,KAAK,CAAC;AAKxD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,eAAgB,YAAW,WAAW;;IAClE,OAAgB,MAAM,iCAAoC;IAE1D,aAAa,oBAAoC;IAejD;;OAEG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAEsB,KAAK,EAAG,MAAM,CAAC;IACd,OAAO,EAAG,iBAAiB,CAAC;IAC7B,MAAM,EAAG,WAAW,CAAC;IAEgB,eAAe,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/G;;OAEG;IACH,IACI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAE9B;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,QAAQ,EAAE,CAIhC;IAED,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAIzB;;cAakB,aAAa,IAAI,cAAc;cAW/B,kBAAkB,IAAI,cAAc;cAQpC,yBAAyB,IAAI,cAAc;cAO3C,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAMnD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhF,iBAAiB;IAOjB,oBAAoB;IA+E7B,YAAY,IAAI,IAAI;IAIpB,IAAI,UAAU,IAAI,QAAQ,EAAE,CAE3B;IAoBD,oBAAoB;CASrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/select/select.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
-import { html, svg } from 'lit';
+import { html, render, svg } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
 import { UmOption } from './option.js';
@@ -12,7 +13,6 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
     #list;
     #navigationController;
     #resizeObserver;
-    #mutationObserver;
     #connected;
     /**
      * The `value` of the selected option
@@ -40,7 +40,9 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
      * An `Array` containing the selected `UmOption` or empty if there's no selected option. Multiple selection is not supported.
      */
     get selectedOptions() {
-        return this._nativeSelect.selectedOptions.length ? [this._nativeSelect.selectedOptions[0]._parent] : [];
+        return this._nativeSelect.selectedOptions.length
+            ? [this._options[this._nativeSelect.selectedIndex]]
+            : [];
     }
     get _options() {
         const options = Array.from(this.querySelectorAll('u-option'));
@@ -48,12 +50,7 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
     }
     constructor() {
         super();
-        this._nativeSelect = (() => {
-            const select = document.createElement('select');
-            select.setAttribute('tabindex', '-1');
-            select.setAttribute('part', 'select');
-            return select;
-        })();
+        this._nativeSelect = document.createElement('select');
         this.#list = (() => {
             const list = document.createElement('div');
             list.role = 'listbox';
@@ -62,6 +59,7 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
             return list;
         })();
         this.#navigationController = new SelectNavigationController(this);
+        this.#resizeObserver = new ResizeObserver(() => this.#setMenuWidthProperty());
         this.#connected = false;
         this.menuPositioning = 'relative';
         this.#handleClick = (e) => {
@@ -73,7 +71,6 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
         };
         this.#handleMenuOpen = () => {
             this._button.setAttribute('aria-expanded', 'true');
-            this.#setSelectedOption();
         };
         this.#handleMenuOpened = () => {
             if (!this.selectedOptions.length) {
@@ -86,92 +83,12 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
             this._button.setAttribute('aria-expanded', 'false');
             this.#navigationController.blurMenu();
         };
-        this.#resizeObserver = new ResizeObserver(() => this.#setMenuWidthProperty());
-        this.#resizeObserver.observe(this);
-        this.#mutationObserver = new MutationObserver(() => this._updateOptions());
-        this.#mutationObserver.observe(this, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-        });
+        this._nativeSelect.setAttribute('tabindex', '-1');
+        this._nativeSelect.setAttribute('part', 'select');
     }
     #setMenuWidthProperty() {
         this.style.setProperty('--_menu-width', `${this.clientWidth}px`);
     }
-    _updateOptions() {
-        const options = this._options;
-        for (const option of options) {
-            option._select = this;
-        }
-        this.#updateOptions(options);
-        this.#updateAccessibilityList(options);
-        const selectedOption = this.selectedOptions[0];
-        if (!selectedOption) {
-            return;
-        }
-        selectedOption.selected = selectedOption.selected;
-        this.empty = !selectedOption.textContent?.trim();
-        // this._button.setAttribute('aria-labelledby', selectedOption._listItem.id);
-    }
-    #updateOptions(options) {
-        const maxLength = Math.max(options.length, this._nativeSelect.children.length);
-        for (let i = 0; i < maxLength; i++) {
-            const option = options[i];
-            const nativeOption = this._nativeSelect.children[i];
-            if (!option) {
-                nativeOption?.remove();
-                continue;
-            }
-            option._nativeOption.textContent = option.textContent;
-            if (!nativeOption) {
-                this._nativeSelect.appendChild(option._nativeOption);
-                continue;
-            }
-            nativeOption.insertAdjacentElement('beforebegin', option._nativeOption);
-        }
-    }
-    #updateAccessibilityList(options) {
-        const maxLength = Math.max(options.length, this.#list.children.length);
-        for (let i = 0; i < maxLength; i++) {
-            const option = options[i];
-            let item = this.#list.children[i];
-            if (!option) {
-                item?.remove();
-                continue;
-            }
-            if (!item) {
-                item = this.#createListItem(`item-${i + 1}`);
-                this.#list.appendChild(item);
-            }
-            item.textContent = option.textContent;
-        }
-    }
-    #createListItem(id) {
-        const item = document.createElement('div');
-        item.role = 'option';
-        item.id = id;
-        item.textContent = this.textContent;
-        return item;
-    }
-    #setSelectedOption() {
-        const options = this._options;
-        const selectedClassOptions = options.filter(o => o.classList.contains('selected'));
-        let found = false;
-        for (const option of selectedClassOptions) {
-            if (option.selected) {
-                found = true;
-                continue;
-            }
-            option.classList.remove('selected');
-        }
-        if (found) {
-            return;
-        }
-        const selectedOption = this.selectedOptions[0];
-        if (selectedOption) {
-            selectedOption.classList.add('selected');
-        }
-    }
     renderControl() {
         return staticHtml `
       <button 
@@ -185,7 +102,7 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
     renderAfterContent() {
         return html `
       <u-menu positioning="${this.menuPositioning}">
-        <slot></slot>
+        <slot @slotchange=${this.#renderOptionRelatedElements}></slot>
       </u-menu>
     `;
     }
@@ -224,13 +141,12 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
     #handleMenuOpened;
     #handleMenuClose;
     async #attach() {
+        this.#resizeObserver.observe(this);
+        this.#renderOptionRelatedElements();
         await this.updateComplete;
         this._nativeSelect.disabled = this.hasAttribute('disabled');
         this.#navigationController.attach(this);
-        this._updateOptions();
-        if (this._nativeSelect.parentElement !== this._input) {
-            this._input.appendChild(this._nativeSelect);
-        }
+        this._input.appendChild(this._nativeSelect);
         this._input.appendChild(this.#list);
         this._button.addEventListener('click', this.#handleClick);
         this._menu.anchorElement = this._container;
@@ -239,8 +155,10 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
         this._menu.addEventListener('opened', this.#handleMenuOpened);
         this._menu.addEventListener('close', this.#handleMenuClose);
     }
-    async #detach() {
-        await this.updateComplete;
+    #detach() {
+        this.#resizeObserver.disconnect();
+        this._nativeSelect.remove();
+        this.#list.remove();
         this.#navigationController.detach();
         this.#connected = false;
         this._button.removeEventListener('click', this.#handleClick);
@@ -249,9 +167,32 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
         this._menu.removeEventListener('opened', this.#handleMenuOpened);
         this._menu.removeEventListener('close', this.#handleMenuClose);
     }
+    #renderOptionRelatedElements() {
+        this.#renderNativeOptions();
+        this.#renderAccessibilityList();
+        this._updateEmpty();
+        this._syncSelectedOptions();
+    }
+    _updateEmpty() {
+        this.empty = !this.selectedOptions[0]?.textContent?.trim();
+    }
     get _menuItems() {
         return this._options;
     }
+    #renderNativeOptions() {
+        render(map(this._options, option => html `<option value=${option.value} ?selected=${option.selected}>${option.textContent}</option>`), this._nativeSelect);
+    }
+    #renderAccessibilityList() {
+        render(map(this._options, (option, index) => html `<div role="option" id="${`item-${index + 1}`}">${option.textContent}</div>`), this.#list);
+    }
+    _syncSelectedOptions() {
+        for (let i = 0; i < this._options.length; i++) {
+            const option = this._options[i];
+            const nativeOption = this._nativeSelect.children[i];
+            option.selected = nativeOption.selected;
+            option._nativeOption = nativeOption;
+        }
+    }
 };
 __decorate([
     state()

package/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, svg, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { UmMenuField } from '../shared/menu-field/menu-field.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { ExtendedSelect } from './extended-select.js';\nimport { UmOption } from './option.js';\nimport { SelectNavigationController } from './select-navigation-controller.js';\nimport { styles } from './select.styles.js';\n\nimport './option.js';\n\n@customElement('u-select')\nexport class UmSelect extends UmTextFieldBase implements UmMenuField {\n  static override styles = [UmTextFieldBase.styles, styles];\n\n  _nativeSelect: ExtendedSelect = (() => {\n    const select = document.createElement('select') as ExtendedSelect;\n    select.setAttribute('tabindex', '-1');\n    select.setAttribute('part', 'select');\n\n    return select;\n  })();\n\n  readonly #list: HTMLElement = (() => {\n    const list = document.createElement('div');\n    list.role = 'listbox';\n    list.id = 'list';\n    list.className = 'list';\n\n    return list;\n  })();\n\n  readonly #navigationController = new SelectNavigationController(this);\n  readonly #resizeObserver: ResizeObserver;\n  readonly #mutationObserver: MutationObserver;\n  #connected = false;\n\n  /**\n   * The `value` of the selected option\n   */\n  @state()\n  get value(): string {\n    return this._nativeSelect.value;\n  }\n\n  set value(value: string) {\n    this._nativeSelect.value = value;\n\n    if (!this.#connected) {\n      return;\n    }\n\n    this.elementInternals.setFormValue(value);\n  }\n\n  @query('u-menu', true) _menu!: UmMenu;\n  @query('.button', true) _button!: HTMLButtonElement;\n  @query('.input', true) _input!: HTMLElement;\n\n  @property({ reflect: true, attribute: 'menu-positioning' }) menuPositioning: 'relative' | 'fixed' = 'relative';\n\n  /**\n   * The index of the selected option. When there's no selected option the value is `-1`.\n   */\n  @state()\n  get selectedIndex(): number {\n    return this._nativeSelect.selectedIndex;\n  }\n\n  set selectedIndex(index: number) {\n    this._nativeSelect.selectedIndex = index;\n  }\n\n  /**\n   * An `Array` containing the selected `UmOption` or empty if there's no selected option. Multiple selection is not supported.\n   */\n  get selectedOptions(): UmOption[] {\n    return this._nativeSelect.selectedOptions.length ? [this._nativeSelect.selectedOptions[0]._parent] : [];\n  }\n\n  get _options(): UmOption[] {\n    const options = Array.from(this.querySelectorAll<HTMLElement>('u-option'));\n\n    return options.filter(o => o instanceof UmOption);\n  }\n\n  constructor() {\n    super();\n\n    this.#resizeObserver = new ResizeObserver(() => this.#setMenuWidthProperty());\n    this.#resizeObserver.observe(this);\n\n    this.#mutationObserver = new MutationObserver(() => this._updateOptions());\n    this.#mutationObserver.observe(this, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  #setMenuWidthProperty(): void {\n    this.style.setProperty('--_menu-width', `${this.clientWidth}px`);\n  }\n\n  _updateOptions() {\n    const options = this._options;\n\n    for (const option of options) {\n      option._select = this;\n    }\n\n    this.#updateOptions(options);\n    this.#updateAccessibilityList(options);\n\n    const selectedOption = this.selectedOptions[0];\n\n    if (!selectedOption) {\n      return;\n    }\n\n    selectedOption.selected = selectedOption.selected;\n    this.empty = !selectedOption.textContent?.trim();\n    // this._button.setAttribute('aria-labelledby', selectedOption._listItem.id);\n  }\n\n  #updateOptions(options: UmOption[]) {\n    const maxLength = Math.max(options.length, this._nativeSelect.children.length);\n\n    for (let i = 0; i < maxLength; i++) {\n      const option = options[i];\n      const nativeOption = this._nativeSelect.children[i];\n\n      if (!option) {\n        nativeOption?.remove();\n        continue;\n      }\n\n      option._nativeOption.textContent = option.textContent;\n\n      if (!nativeOption) {\n        this._nativeSelect.appendChild(option._nativeOption);\n        continue;\n      }\n\n      nativeOption.insertAdjacentElement('beforebegin', option._nativeOption);\n    }\n  }\n\n  #updateAccessibilityList(options: UmOption[]) {\n    const maxLength = Math.max(options.length, this.#list.children.length);\n\n    for (let i = 0; i < maxLength; i++) {\n      const option = options[i];\n      let item = this.#list.children[i];\n\n      if (!option) {\n        item?.remove();\n        continue;\n      }\n\n      if (!item) {\n        item = this.#createListItem(`item-${i + 1}`);\n        this.#list.appendChild(item);\n      }\n\n      item.textContent = option.textContent;\n    }\n  }\n\n  #createListItem(id: string): HTMLElement {\n    const item = document.createElement('div');\n    item.role = 'option';\n    item.id = id;\n\n    item.textContent = this.textContent;\n\n    return item;\n  }\n\n  #setSelectedOption() {\n    const options = this._options;\n\n    const selectedClassOptions = options.filter(o => o.classList.contains('selected'));\n\n    let found = false;\n\n    for (const option of selectedClassOptions) {\n      if (option.selected) {\n        found = true;\n        continue;\n      }\n\n      option.classList.remove('selected');\n    }\n\n    if (found) {\n      return;\n    }\n\n    const selectedOption = this.selectedOptions[0];\n\n    if (selectedOption) {\n      selectedOption.classList.add('selected');\n    }\n  }\n\n  protected override renderControl(): TemplateResult {\n    return staticHtml`\n      <button \n         class=\"button\"\n         role=\"combobox\"\n         aria-expanded=\"false\"\n         aria-owns=\"select\"\n         ?disabled=${this.disabled}></button>\n      <div class=\"input\"></div>`;\n  }\n\n  protected override renderAfterContent(): TemplateResult {\n    return html`\n      <u-menu positioning=\"${this.menuPositioning}\">\n        <slot></slot>\n      </u-menu>\n    `;\n  }\n\n  protected override renderDefaultTrailingIcon(): TemplateResult {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n        <path d=\"M480-360 280-560h400L480-360Z\"/>\n      </svg>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    this.empty = !this.selectedOptions[0]?.textContent?.trim();\n    this.elementInternals.setFormValue(this._nativeSelect.value || null);\n  }\n\n  override attributeChangedCallback(name: string, _old: string | null, value: string | null) {\n    super.attributeChangedCallback(name, _old, value);\n\n    if (name !== 'disabled') {\n      return;\n    }\n\n    this._nativeSelect.disabled = value === null;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#connected = true;\n    this.#attach();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.#detach();\n  }\n\n  readonly #handleClick = (e: MouseEvent) => {\n    this._menu.toggle();\n\n    if (!this._menu.open || !this.selectedOptions.length) {\n      return;\n    }\n\n    this.#navigationController.focusMenu(this.selectedOptions[0], 0, e.detail === 0, false);\n  };\n\n  #handleMenuClick(e: Event) {\n    e.stopPropagation();\n  }\n\n  readonly #handleMenuOpen = () => {\n    this._button.setAttribute('aria-expanded', 'true');\n    this.#setSelectedOption();\n  };\n\n  readonly #handleMenuOpened = () => {\n    if (!this.selectedOptions.length) {\n      return;\n    }\n\n    const option = this.selectedOptions[0];\n    option.scrollIntoView({ block: 'nearest' });\n  };\n\n  readonly #handleMenuClose = () => {\n    this._button.setAttribute('aria-expanded', 'false');\n    this.#navigationController.blurMenu();\n  };\n\n  async #attach(): Promise<void> {\n    await this.updateComplete;\n\n    this._nativeSelect.disabled = this.hasAttribute('disabled');\n\n    this.#navigationController.attach(this);\n    this._updateOptions();\n\n    if (this._nativeSelect.parentElement !== this._input) {\n      this._input.appendChild(this._nativeSelect);\n    }\n\n    this._input.appendChild(this.#list);\n    this._button.addEventListener('click', this.#handleClick);\n\n    this._menu.anchorElement = this._container;\n    this._menu.addEventListener('click', this.#handleMenuClick);\n    this._menu.addEventListener('open', this.#handleMenuOpen);\n    this._menu.addEventListener('opened', this.#handleMenuOpened);\n    this._menu.addEventListener('close', this.#handleMenuClose);\n  }\n\n  async #detach(): Promise<void> {\n    await this.updateComplete;\n\n    this.#navigationController.detach();\n    this.#connected = false;\n    this._button.removeEventListener('click', this.#handleClick);\n    this._menu.removeEventListener('click', this.#handleMenuClick);\n    this._menu.removeEventListener('open', this.#handleMenuOpen);\n    this._menu.removeEventListener('opened', this.#handleMenuOpened);\n    this._menu.removeEventListener('close', this.#handleMenuClose);\n  }\n\n  get _menuItems(): UmOption[] {\n    return this._options;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-select': UmSelect;\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, render, svg, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { UmMenuField } from '../shared/menu-field/menu-field.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { UmOption } from './option.js';\nimport { SelectNavigationController } from './select-navigation-controller.js';\nimport { styles } from './select.styles.js';\n\nimport './option.js';\n\n@customElement('u-select')\nexport class UmSelect extends UmTextFieldBase implements UmMenuField {\n  static override styles = [UmTextFieldBase.styles, styles];\n\n  _nativeSelect = document.createElement('select');\n\n  readonly #list: HTMLElement = (() => {\n    const list = document.createElement('div');\n    list.role = 'listbox';\n    list.id = 'list';\n    list.className = 'list';\n\n    return list;\n  })();\n\n  readonly #navigationController = new SelectNavigationController(this);\n  readonly #resizeObserver = new ResizeObserver(() => this.#setMenuWidthProperty());\n  #connected = false;\n\n  /**\n   * The `value` of the selected option\n   */\n  @state()\n  get value(): string {\n    return this._nativeSelect.value;\n  }\n\n  set value(value: string) {\n    this._nativeSelect.value = value;\n\n    if (!this.#connected) {\n      return;\n    }\n\n    this.elementInternals.setFormValue(value);\n  }\n\n  @query('u-menu', true) _menu!: UmMenu;\n  @query('.button', true) _button!: HTMLButtonElement;\n  @query('.input', true) _input!: HTMLElement;\n\n  @property({ reflect: true, attribute: 'menu-positioning' }) menuPositioning: 'relative' | 'fixed' = 'relative';\n\n  /**\n   * The index of the selected option. When there's no selected option the value is `-1`.\n   */\n  @state()\n  get selectedIndex(): number {\n    return this._nativeSelect.selectedIndex;\n  }\n\n  set selectedIndex(index: number) {\n    this._nativeSelect.selectedIndex = index;\n  }\n\n  /**\n   * An `Array` containing the selected `UmOption` or empty if there's no selected option. Multiple selection is not supported.\n   */\n  get selectedOptions(): UmOption[] {\n    return this._nativeSelect.selectedOptions.length\n      ? [this._options[this._nativeSelect.selectedIndex]]\n      : [];\n  }\n\n  get _options(): UmOption[] {\n    const options = Array.from(this.querySelectorAll<HTMLElement>('u-option'));\n\n    return options.filter(o => o instanceof UmOption);\n  }\n\n  constructor() {\n    super();\n\n    this._nativeSelect.setAttribute('tabindex', '-1');\n    this._nativeSelect.setAttribute('part', 'select');\n  }\n\n  #setMenuWidthProperty(): void {\n    this.style.setProperty('--_menu-width', `${this.clientWidth}px`);\n  }\n\n  protected override renderControl(): TemplateResult {\n    return staticHtml`\n      <button \n         class=\"button\"\n         role=\"combobox\"\n         aria-expanded=\"false\"\n         aria-owns=\"select\"\n         ?disabled=${this.disabled}></button>\n      <div class=\"input\"></div>`;\n  }\n\n  protected override renderAfterContent(): TemplateResult {\n    return html`\n      <u-menu positioning=\"${this.menuPositioning}\">\n        <slot @slotchange=${this.#renderOptionRelatedElements}></slot>\n      </u-menu>\n    `;\n  }\n\n  protected override renderDefaultTrailingIcon(): TemplateResult {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n        <path d=\"M480-360 280-560h400L480-360Z\"/>\n      </svg>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    this.empty = !this.selectedOptions[0]?.textContent?.trim();\n    this.elementInternals.setFormValue(this._nativeSelect.value || null);\n  }\n\n  override attributeChangedCallback(name: string, _old: string | null, value: string | null) {\n    super.attributeChangedCallback(name, _old, value);\n\n    if (name !== 'disabled') {\n      return;\n    }\n\n    this._nativeSelect.disabled = value === null;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#connected = true;\n    this.#attach();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.#detach();\n  }\n\n  readonly #handleClick = (e: MouseEvent) => {\n    this._menu.toggle();\n\n    if (!this._menu.open || !this.selectedOptions.length) {\n      return;\n    }\n\n    this.#navigationController.focusMenu(this.selectedOptions[0], 0, e.detail === 0, false);\n  };\n\n  #handleMenuClick(e: Event) {\n    e.stopPropagation();\n  }\n\n  readonly #handleMenuOpen = () => {\n    this._button.setAttribute('aria-expanded', 'true');\n  };\n\n  readonly #handleMenuOpened = () => {\n    if (!this.selectedOptions.length) {\n      return;\n    }\n\n    const option = this.selectedOptions[0];\n    option.scrollIntoView({ block: 'nearest' });\n  };\n\n  readonly #handleMenuClose = () => {\n    this._button.setAttribute('aria-expanded', 'false');\n    this.#navigationController.blurMenu();\n  };\n\n  async #attach(): Promise<void> {\n    this.#resizeObserver.observe(this);\n    this.#renderOptionRelatedElements();\n\n    await this.updateComplete;\n\n    this._nativeSelect.disabled = this.hasAttribute('disabled');\n\n    this.#navigationController.attach(this);\n\n    this._input.appendChild(this._nativeSelect);\n    this._input.appendChild(this.#list);\n    this._button.addEventListener('click', this.#handleClick);\n\n    this._menu.anchorElement = this._container;\n    this._menu.addEventListener('click', this.#handleMenuClick);\n    this._menu.addEventListener('open', this.#handleMenuOpen);\n    this._menu.addEventListener('opened', this.#handleMenuOpened);\n    this._menu.addEventListener('close', this.#handleMenuClose);\n  }\n\n  #detach(): void {\n    this.#resizeObserver.disconnect();\n    this._nativeSelect.remove();\n    this.#list.remove();\n    this.#navigationController.detach();\n    this.#connected = false;\n    this._button.removeEventListener('click', this.#handleClick);\n    this._menu.removeEventListener('click', this.#handleMenuClick);\n    this._menu.removeEventListener('open', this.#handleMenuOpen);\n    this._menu.removeEventListener('opened', this.#handleMenuOpened);\n    this._menu.removeEventListener('close', this.#handleMenuClose);\n  }\n\n  #renderOptionRelatedElements() {\n    this.#renderNativeOptions();\n    this.#renderAccessibilityList();\n    this._updateEmpty();\n    this._syncSelectedOptions();\n  }\n\n  _updateEmpty(): void {\n    this.empty = !this.selectedOptions[0]?.textContent?.trim();\n  }\n\n  get _menuItems(): UmOption[] {\n    return this._options;\n  }\n\n  #renderNativeOptions() {\n    render(\n      map(\n        this._options,\n        option =>\n          html`<option value=${option.value} ?selected=${option.selected}>${option.textContent}</option>`),\n      this._nativeSelect);\n  }\n\n  #renderAccessibilityList() {\n    render(\n      map(\n        this._options,\n        (option, index) =>\n          html`<div role=\"option\" id=\"${`item-${index + 1}`}\">${option.textContent}</div>`),\n      this.#list);\n  }\n\n  _syncSelectedOptions() {\n\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i];\n      const nativeOption = this._nativeSelect.children[i] as HTMLOptionElement;\n      option.selected = nativeOption.selected;\n      option._nativeOption = nativeOption;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-select': UmSelect;\n  }\n}\n"]}

package/shared/button-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AASpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAE7B,8BAAsB,eAAgB,SAAQ,UAAU;;IACtD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D;;OAEG;IACyC,QAAQ,UAAS;IAEpD,YAAY,UAAQ;IAE7B;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,QAAQ,CAAC,aAAa,EAAG,WAAW,CAAC;IACpC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAY;IAEvD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAU/C,SAAS,CAAC,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAyCzD,SAAS,CAAC,QAAQ,CAAC,cAAc,IAAI,kBAAkB;IAE9C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAIb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI;IAiCvC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAEzC"}
+{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AASpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAE7B,8BAAsB,eAAgB,SAAQ,UAAU;;IACtD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D;;OAEG;IACyC,QAAQ,UAAS;IAEpD,YAAY,UAAQ;IAE7B;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,QAAQ,CAAC,aAAa,EAAG,WAAW,CAAC;IACpC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAY;IAEvD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAW/C,SAAS,CAAC,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAyCzD,SAAS,CAAC,QAAQ,CAAC,cAAc,IAAI,kBAAkB;IAE9C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAIb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI;IAiCvC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAEzC"}

package/shared/button-wrapper.js

@@ -3,7 +3,7 @@ import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles as baseStyles } from './base.styles.js';
-import { styles } from './button-wrapper.styles';
+import { styles } from './button-wrapper.styles.js';
 import { redispatchEvent } from './events/redispatch-event.js';
 import '../elevation/elevation.js';
 import '../ripple/ripple.js';

package/shared/button-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { styles as baseStyles } from './base.styles.js';\nimport { styles } from './button-wrapper.styles';\nimport { redispatchEvent } from './events/redispatch-event.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  /**\n   * Whether the button is disabled or not.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() renderRipple = true;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href: string | undefined;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: string | undefined;\n\n  @property() name: string | undefined;\n\n  @query('.button') readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly _ripple!: UmRipple;\n\n  protected innerRole: string | null = null;\n\n  get pathname(): string {\n    return (this.buttonElement as HTMLAnchorElement)?.pathname;\n  }\n\n  protected override render(): HTMLTemplateResult {\n    const contents = typeof this.href === 'string'\n      ? this.#renderLink()\n      : this.#renderButton();\n\n    const containerClasses = classMap(this._getContainerClasses());\n\n    return html`<div class=\"container ${containerClasses}\" part=\"container\"> ${contents}</div>`;\n  }\n\n  protected _getContainerClasses(): Record<string, boolean> {\n    return { disabled: this.disabled };\n  }\n\n  #renderButton() {\n    return html`\n      <div class=\"content\">${this._renderContent()}</div>\n      <button\n        id=\"button\"\n        class=\"button focus-ring\"\n        ?disabled=${this.disabled}\n        aria-label=${this.getAriaLabel() || nothing}\n        aria-labelledby=\"${this.getAriaLabel() ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        type=\"button\"\n        @click=${this.#innerClickHandler}>\n        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n        <u-elevation></u-elevation>\n      </button>\n    `;\n  }\n\n  #renderLink() {\n    return html`\n      <div class=\"content\">${this._renderContent()}</div>\n      <a\n        id=\"link\"\n        class=\"button\"\n        href=${this.disabled ? nothing : this.href}\n        aria-disabled=${this.disabled || nothing}\n        aria-label=${this.ariaLabel || nothing}\n        aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        target=${this.target || nothing}\n        @click=${this.#innerClickHandler}>\n        <u-elevation></u-elevation>\n        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n      </a>\n    `;\n  }\n\n  protected abstract _renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this.#innerFocusHandler);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this.#innerFocusHandler);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null {\n    return this.ariaLabel;\n  }\n\n  #innerFocusHandler(): void {\n    const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n    if (tabIndexAttributeValue !== '0') {\n      return;\n    }\n\n    this.removeAttribute('tabindex');\n    setTimeout(() => this.buttonElement?.focus());\n  }\n\n  #innerClickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const preventDefault = !redispatchEvent(this, event);\n\n    if (preventDefault) {\n      return;\n    }\n\n    if (!(event as PointerEvent).pointerType) {\n      this._ripple.createRipple();\n    }\n\n    this._handleClick(event);\n  }\n\n  protected _handleClick(_: UIEvent): void {\n  }\n}\n"]}
+{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { styles as baseStyles } from './base.styles.js';\nimport { styles } from './button-wrapper.styles.js';\nimport { redispatchEvent } from './events/redispatch-event.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  /**\n   * Whether the button is disabled or not.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() renderRipple = true;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href: string | undefined;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: string | undefined;\n\n  @property() name: string | undefined;\n\n  @query('.button') readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly _ripple!: UmRipple;\n\n  protected innerRole: string | null = null;\n\n  get pathname(): string {\n    return (this.buttonElement as HTMLAnchorElement)?.pathname;\n  }\n\n  protected override render(): HTMLTemplateResult {\n\n    const contents = typeof this.href === 'string'\n      ? this.#renderLink()\n      : this.#renderButton();\n\n    const containerClasses = classMap(this._getContainerClasses());\n\n    return html`<div class=\"container ${containerClasses}\" part=\"container\"> ${contents}</div>`;\n  }\n\n  protected _getContainerClasses(): Record<string, boolean> {\n    return { disabled: this.disabled };\n  }\n\n  #renderButton() {\n    return html`\n      <div class=\"content\">${this._renderContent()}</div>\n      <button\n        id=\"button\"\n        class=\"button focus-ring\"\n        ?disabled=${this.disabled}\n        aria-label=${this.getAriaLabel() || nothing}\n        aria-labelledby=\"${this.getAriaLabel() ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        type=\"button\"\n        @click=${this.#innerClickHandler}>\n        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n        <u-elevation></u-elevation>\n      </button>\n    `;\n  }\n\n  #renderLink() {\n    return html`\n      <div class=\"content\">${this._renderContent()}</div>\n      <a\n        id=\"link\"\n        class=\"button\"\n        href=${this.disabled ? nothing : this.href}\n        aria-disabled=${this.disabled || nothing}\n        aria-label=${this.ariaLabel || nothing}\n        aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        target=${this.target || nothing}\n        @click=${this.#innerClickHandler}>\n        <u-elevation></u-elevation>\n        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n      </a>\n    `;\n  }\n\n  protected abstract _renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this.#innerFocusHandler);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this.#innerFocusHandler);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null {\n    return this.ariaLabel;\n  }\n\n  #innerFocusHandler(): void {\n    const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n    if (tabIndexAttributeValue !== '0') {\n      return;\n    }\n\n    this.removeAttribute('tabindex');\n    setTimeout(() => this.buttonElement?.focus());\n  }\n\n  #innerClickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const preventDefault = !redispatchEvent(this, event);\n\n    if (preventDefault) {\n      return;\n    }\n\n    if (!(event as PointerEvent).pointerType) {\n      this._ripple.createRipple();\n    }\n\n    this._handleClick(event);\n  }\n\n  protected _handleClick(_: UIEvent): void {\n  }\n}\n"]}

package/shared/menu-field/menu-field-navigation-controller.d.ts

@@ -3,7 +3,7 @@ import { UmMenuField } from './menu-field.js';
 export declare class MenuFieldNavigationController<TField extends UmMenuField, TMenuItem extends UmMenuItem> {
     #private;
     protected focusedMenu: TMenuItem | null;
-    protected readonly host: TField;
+    protected readonly getHost: () => TField;
     private readonly _bindHandleKeyDown;
     constructor(host: TField);
     attach(element: HTMLElement): void;

package/shared/menu-field/menu-field-navigation-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-field-navigation-controller.d.ts","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field-navigation-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,qBAAa,6BAA6B,CAAC,MAAM,SAAS,WAAW,EAAE,SAAS,SAAS,UAAU;;IAEjG,SAAS,CAAC,WAAW,EAAE,SAAS,GAAG,IAAI,CAAQ;IAC/C,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEhC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiC;gBAExD,IAAI,EAAE,MAAM;IAKxB,MAAM,CAAC,OAAO,EAAE,WAAW;IAQ3B,MAAM;IAQN,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA4CtD,OAAO,CAAC,QAAQ;IAwBhB,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM;IAYrF,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,UAAO,EAAE,MAAM,UAAO;IAetE,QAAQ;IAUR,OAAO,CAAC,gBAAgB;IAUxB,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM;IAG7C,SAAS,CAAC,SAAS;CAEpB"}
+{"version":3,"file":"menu-field-navigation-controller.d.ts","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field-navigation-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,qBAAa,6BAA6B,CAAC,MAAM,SAAS,WAAW,EAAE,SAAS,SAAS,UAAU;;IAEjG,SAAS,CAAC,WAAW,EAAE,SAAS,GAAG,IAAI,CAAQ;IAC/C,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,MAAM,CAAC;IAEzC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiC;gBAExD,IAAI,EAAE,MAAM;IAKxB,MAAM,CAAC,OAAO,EAAE,WAAW;IAQ3B,MAAM;IAQN,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA4CtD,OAAO,CAAC,QAAQ;IAwBhB,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM;IAYrF,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,UAAO,EAAE,MAAM,UAAO;IAetE,QAAQ;IAUR,OAAO,CAAC,gBAAgB;IAUxB,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM;IAG7C,SAAS,CAAC,SAAS;CAEpB"}

package/shared/menu-field/menu-field-navigation-controller.js

@@ -4,35 +4,35 @@ export class MenuFieldNavigationController {
         this.#element = null;
         this.focusedMenu = null;
         this.#handleMenuClose = () => this.blurMenu();
-        this.host = host;
+        this.getHost = () => host;
         this._bindHandleKeyDown = this.handleKeyDown.bind(this);
     }
     attach(element) {
         this.detach();
         element?.addEventListener('keydown', this._bindHandleKeyDown, { capture: true });
-        this.host._menu?.addEventListener('close', this.#handleMenuClose);
+        this.getHost()._menu?.addEventListener('close', this.#handleMenuClose);
         this.#element = element;
     }
     detach() {
         this.#element?.removeEventListener('keydown', this._bindHandleKeyDown);
-        this.host._menu?.removeEventListener('close', this.#handleMenuClose);
+        this.getHost()._menu?.removeEventListener('close', this.#handleMenuClose);
         this.#element = null;
     }
     #handleMenuClose;
     handleKeyDown(event) {
-        if (this.host._menu?.open !== true) {
+        if (this.getHost()._menu?.open !== true) {
             return false;
         }
         const isEscape = event.key === 'Escape';
         if (isEscape) {
-            this.host._menu.close();
+            this.getHost()._menu.close();
         }
         if (event.key === 'Home') {
-            this.navigateTo(event, this.host._menuItems[0], 0);
+            this.navigateTo(event, this.getHost()._menuItems[0], 0);
             return true;
         }
         if (event.key === 'End') {
-            this.navigateTo(event, this.host._menuItems[this.host._menuItems.length - 1], this.host._menuItems.length - 1);
+            this.navigateTo(event, this.getHost()._menuItems[this.getHost()._menuItems.length - 1], this.getHost()._menuItems.length - 1);
             return true;
         }
         const isDown = event.key === 'ArrowDown';
@@ -50,7 +50,7 @@ export class MenuFieldNavigationController {
         return false;
     }
     navigate(event, forwards) {
-        const menuItems = this.host._menuItems;
+        const menuItems = this.getHost()._menuItems;
         if (!menuItems.length) {
             return;
         }
@@ -98,7 +98,7 @@ export class MenuFieldNavigationController {
         }
         event.preventDefault();
         this.focusedMenu.click();
-        this.host._menu.open = false;
+        this.getHost()._menu.open = false;
     }
     afterFocus(_, __) {
     }