@universal-material/web 3.6.10 → 3.6.12

package/select/option.js

@@ -1,49 +1,48 @@
 import { __decorate } from "tslib";
 import { svg } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { UmMenuItem } from '../menu/menu-item.js';
 import { styles } from './option.styles.js';
-import { UmSelect } from './select.js';
 import './select.js';
 let UmOption = class UmOption extends UmMenuItem {
     constructor() {
         super(...arguments);
-        this._nativeOption = (() => {
-            const option = document.createElement('option');
-            option._parent = this;
-            if (this.hasAttribute('selected')) {
-                option.setAttribute('selected', '');
-            }
-            option.textContent = this.textContent;
-            return option;
-        })();
+        this.#mutationObserver = new MutationObserver(() => this.#updateContent());
+        this.#value = '';
+        this.#selected = false;
+        this._nativeOption = null;
     }
     static { this.styles = [UmMenuItem.styles, styles]; }
+    #mutationObserver;
+    #value;
+    #selected;
     get value() {
-        return this._nativeOption.value;
+        return this.#value;
     }
     set value(value) {
-        this._nativeOption.value = value;
+        this.#value = value;
+        if (this._nativeOption) {
+            this._nativeOption.value = value;
+        }
     }
     get selected() {
-        return this._nativeOption.selected;
+        return this.#selected;
     }
     set selected(selected) {
-        if (this.selected === selected) {
+        if (this.#selected === selected) {
             return;
         }
-        this._nativeOption.selected = selected;
-        if (selected) {
-            this.classList.add('selected');
-        }
-        else {
-            this.classList.remove('selected');
-        }
-        if (!this._select) {
-            return;
+        this.#selected = selected;
+        if (this._nativeOption) {
+            this._nativeOption.selected = selected;
         }
-        // this._select._button.setAttribute('aria-labelledby', this._listItem.id);
-        this._select.empty = !this._nativeOption.textContent?.trim();
+        this._select?._updateEmpty();
+    }
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            selected: this.selected,
+        };
     }
     _renderDefaultTrailingIcon() {
         return svg `
@@ -51,80 +50,58 @@ let UmOption = class UmOption extends UmMenuItem {
         <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
       </svg>`;
     }
-    get _selectedAttribute() {
-        return this._nativeOption.hasAttribute('selected');
-    }
-    // @ts-ignore
-    set _selectedAttribute(selected) {
-        if (selected) {
-            this._nativeOption.setAttribute('selected', '');
-            return;
-        }
-        this._nativeOption.removeAttribute('selected');
+    get _select() {
+        return this.parentElement?.tagName === 'U-SELECT'
+            ? this.parentElement
+            : null;
     }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.#handleClick);
         this.setAttribute('tabindex', '-1');
-        this.#attach();
+        this.#mutationObserver.observe(this, {
+            subtree: true,
+            characterData: true,
+            childList: true,
+        });
+        this.#updateContent();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('click', this.#handleClick);
-        if (this._select === this.parentElement) {
-            return;
-        }
-        this._nativeOption.remove();
-        if (!this._select) {
-            return;
-        }
-        this._select.value = this._select.value;
-        this._select = null;
-    }
-    async #attach() {
-        if (this._select === this.parentElement) {
-            return;
-        }
-        this._select = this.parentElement instanceof UmSelect ? this.parentElement : null;
-        await this.#setNativeOption();
+        this.#mutationObserver.disconnect();
     }
     #handleClick(e) {
         if (!this._select) {
             return;
         }
         e.stopPropagation();
-        this.setSelectedByUser();
+        this._setSelectedByUser();
     }
-    setSelectedByUser() {
+    _setSelectedByUser() {
+        this.selected = true;
         if (!this._select) {
             return;
         }
-        this._select.selectedOptions[0]?.classList.remove('selected');
-        this.selected = true;
-        this._select.value = this._select.value;
         this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
         this._select.dispatchEvent(new Event('change', { bubbles: true }));
+        this._select._updateEmpty();
+        this._select._syncSelectedOptions();
         this._select._menu?.close();
     }
     #updateContent() {
-        this._nativeOption.textContent = this.textContent;
-    }
-    async #setNativeOption() {
-        await this.updateComplete;
-        this.#updateContent();
-        this._select?._updateOptions();
+        if (this._nativeOption) {
+            this._nativeOption.textContent = this.textContent;
+        }
+        this._select?._updateEmpty();
     }
 };
 __decorate([
     property({ reflect: true })
 ], UmOption.prototype, "value", null);
 __decorate([
-    state()
+    property({ type: Boolean })
 ], UmOption.prototype, "selected", null);
-__decorate([
-    property({ type: Boolean, attribute: 'selected' })
-    // @ts-ignore
-], UmOption.prototype, "_selectedAttribute", null);
 UmOption = __decorate([
     customElement('u-option')
 ], UmOption);

package/select/option.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"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","sourcesContent":["import { svg, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { ExtendedOption } from './extended-option.js';\nimport { styles } from './option.styles.js';\nimport { UmSelect } from './select.js';\n\nimport './select.js';\n\n@customElement('u-option')\nexport class UmOption extends UmMenuItem {\n  static override styles = [UmMenuItem.styles, styles];\n\n  _nativeOption: ExtendedOption = (() => {\n    const option = document.createElement('option') as ExtendedOption;\n    option._parent = this;\n\n    if (this.hasAttribute('selected')) {\n      option.setAttribute('selected', '');\n    }\n\n    option.textContent = this.textContent;\n\n    return option;\n  })();\n\n  @property({ reflect: true })\n  get value(): string {\n    return this._nativeOption.value;\n  }\n\n  set value(value: string) {\n    this._nativeOption.value = value;\n  }\n\n  @state()\n  get selected(): boolean {\n    return this._nativeOption.selected;\n  }\n\n  set selected(selected: boolean) {\n    if (this.selected === selected) {\n      return;\n    }\n\n    this._nativeOption.selected = selected;\n\n    if (selected) {\n      this.classList.add('selected');\n    } else {\n      this.classList.remove('selected');\n    }\n\n    if (!this._select) {\n      return;\n    }\n\n    // this._select._button.setAttribute('aria-labelledby', this._listItem.id);\n    this._select.empty = !this._nativeOption.textContent?.trim();\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=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\"/>\n      </svg>`;\n  }\n\n  @property({ type: Boolean, attribute: 'selected' })\n  // @ts-ignore\n  private get _selectedAttribute(): boolean {\n    return this._nativeOption.hasAttribute('selected');\n  }\n\n  // @ts-ignore\n  private set _selectedAttribute(selected: boolean) {\n    if (selected) {\n      this._nativeOption.setAttribute('selected', '');\n      return;\n    }\n\n    this._nativeOption.removeAttribute('selected');\n  }\n\n  _select!: UmSelect | null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#handleClick);\n    this.setAttribute('tabindex', '-1');\n\n    this.#attach();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#handleClick);\n\n    if (this._select === this.parentElement) {\n      return;\n    }\n\n    this._nativeOption.remove();\n\n    if (!this._select) {\n      return;\n    }\n\n    this._select.value = this._select.value;\n    this._select = null;\n  }\n\n  async #attach(): Promise<void> {\n    if (this._select === this.parentElement) {\n      return;\n    }\n\n    this._select = this.parentElement instanceof UmSelect ? this.parentElement : null;\n\n    await this.#setNativeOption();\n  }\n\n  #handleClick(e: Event) {\n    if (!this._select) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    this.setSelectedByUser();\n  }\n\n  setSelectedByUser() {\n    if (!this._select) {\n      return;\n    }\n\n    this._select.selectedOptions[0]?.classList.remove('selected');\n    this.selected = true;\n\n    this._select.value = this._select.value;\n    this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n    this._select.dispatchEvent(new Event('change', { bubbles: true }));\n\n    this._select._menu?.close();\n  }\n\n  #updateContent() {\n    this._nativeOption.textContent = this.textContent;\n  }\n\n  async #setNativeOption(): Promise<void> {\n    await this.updateComplete;\n    this.#updateContent();\n\n    this._select?._updateOptions();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-option': UmOption;\n  }\n}\n"]}
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"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","sourcesContent":["import { svg, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { styles } from './option.styles.js';\nimport { UmSelect } from './select.js';\n\nimport './select.js';\n\n@customElement('u-option')\nexport class UmOption extends UmMenuItem {\n  static override styles = [UmMenuItem.styles, styles];\n\n  readonly #mutationObserver = new MutationObserver(() => this.#updateContent());\n\n  #value = '';\n  #selected = false;\n  _nativeOption: HTMLOptionElement | null = null;\n\n  @property({ reflect: true })\n  get value(): string {\n    return this.#value;\n  }\n\n  set value(value: string) {\n    this.#value = value;\n\n    if (this._nativeOption) {\n      this._nativeOption.value = value;\n    }\n  }\n\n  @property({ type: Boolean })\n  get selected(): boolean {\n    return this.#selected;\n  }\n\n  set selected(selected: boolean) {\n    if (this.#selected === selected) {\n      return;\n    }\n\n    this.#selected = selected;\n\n    if (this._nativeOption) {\n      this._nativeOption.selected = selected;\n    }\n\n    this._select?._updateEmpty();\n  }\n\n  protected override _getContainerClasses() {\n    return {\n      ...super._getContainerClasses(),\n      selected: this.selected,\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=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\"/>\n      </svg>`;\n  }\n\n  get _select(): UmSelect | null {\n    return this.parentElement?.tagName === 'U-SELECT'\n      ? this.parentElement as UmSelect\n      : null;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#handleClick);\n    this.setAttribute('tabindex', '-1');\n\n    this.#mutationObserver.observe(this, {\n      subtree: true,\n      characterData: true,\n      childList: true,\n    });\n\n    this.#updateContent();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#handleClick);\n    this.#mutationObserver.disconnect();\n  }\n\n  #handleClick(e: Event) {\n    if (!this._select) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    this._setSelectedByUser();\n  }\n\n  _setSelectedByUser() {\n\n    this.selected = true;\n\n    if (!this._select) {\n      return;\n    }\n\n    this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n    this._select.dispatchEvent(new Event('change', { bubbles: true }));\n\n    this._select._updateEmpty();\n    this._select._syncSelectedOptions();\n    this._select._menu?.close();\n  }\n\n  #updateContent() {\n\n    if (this._nativeOption) {\n      this._nativeOption.textContent = this.textContent;\n    }\n\n    this._select?._updateEmpty();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-option': UmOption;\n  }\n}\n"]}

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":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,6BAA6B,EAAE,MAAM,0DAA0D,CAAC;AAIzG,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CAAC;IACrC,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,CAAC;CACb,CAAC,CAAC;AAEH,MAAM,OAAO,0BAA2B,SAAQ,6BAAiD;IAC/F,gBAAgB,GAAG,uBAAuB,EAAE,CAAC;IAE1B,aAAa,CAAC,KAAoB;QACnD,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACzB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAE3C,OAAO,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;QACzC,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC;QAErC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QAC5C,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;QACrE,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,MAAM,CAAC,OAAoB;QAClC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACnF,CAAC;IAEQ,MAAM;QACb,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACtF,CAAC;IAEQ,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACxC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAkB,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7E,CAAC,CAAC;IAEiB,UAAU,CAAC,CAAW,EAAE,KAAa;QACtD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,uBAAuB,EAAE,QAAQ,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/E,CAAC;IAEkB,SAAS;QAC1B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;IAC7D,CAAC;IAEO,UAAU,CAAC,KAAoB;QACrC,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC;YACpC,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAChD,CAAC;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;QAEzC,IAAI,CAAC,gBAAgB,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC;QAE1C,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,GAAG,uBAAuB,EAAE,EAAE,IAAI,CAAC,CAAC;QAE5G,MAAM,IAAI,GACR,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;QAC3G,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;QAElD,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,qBAAqB,CAAC,IAAY,EAAE,eAAgC;QAC1E,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACnC,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAErF,IAAI,QAAQ,GACV,oBAAoB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,GAAG,CAAC,CAAyB,CAAC,CAAC,CAAC,IAAI,CAAC;QAE1G,IAAI,CAAC,QAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC;YACnE,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;QAC1E,CAAC;QAED,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;QAED,QAAQ,CAAC,iBAAiB,EAAE,CAAC;IAC/B,CAAC;CACF","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()