@easemate/web-kit 0.1.0

package/build/elements/dropdown/index.js

@@ -0,0 +1,871 @@
+import "../popover/index.js";
+import "../icons/animation/chevron.js";
+import { html } from 'lit-html';
+import { dispatchControlEvent, setBooleanAttribute } from "../shared.js";
+import { Component } from '~/decorators/Component';
+import { OutsideClick, requestOutsideClickUpdate } from '~/decorators/OutsideClick';
+import { Prop } from '~/decorators/Prop';
+import { Query } from '~/decorators/Query';
+const nextOptionId = (() => {
+    let counter = 0;
+    return () => {
+        counter += 1;
+        return `ease-dropdown-option-${counter}`;
+    };
+})();
+const nextPanelId = (() => {
+    let counter = 0;
+    return () => {
+        counter += 1;
+        return `ease-dropdown-content-${counter}`;
+    };
+})();
+@Component({
+    tag: 'ease-dropdown',
+    styles: `
+    :host {
+      display: grid;
+      width: 100%;
+    }
+
+    ease-popover {
+      --ease-popover-content-min-width: var(--ease-dropdown-panel-min-width, anchor-size(width));
+      --ease-popover-content-width: var(--ease-dropdown-panel-width, max-content);
+      --ease-popover-content-max-width: var(--ease-dropdown-panel-max-width, none);
+    }
+
+    [part="trigger"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: 8px;
+      padding: var(--ease-dropdown-trigger-padding, 8px 8px 8px 12px);
+      border-radius: var(--ease-dropdown-radius, var(--radii-md));
+      background-color: var(--ease-dropdown-background, var(--color-gray-850));
+      cursor: pointer;
+      box-shadow: var(
+        --ease-dropdown-shadow,
+        inset 0 1px 0.25px 0 var(--color-white-4),
+        0 1px 2.5px 0 var(--color-black-8)
+      );
+      font-family: var(--ease-font-family, inherit);
+      font-optical-sizing: auto;
+      box-sizing: border-box;
+      font-size: var(--ease-dropdown-font-size, var(--ease-font-size, 13px));
+      font-weight: var(--ease-dropdown-font-weight, 500);
+      color: var(--ease-dropdown-color, var(--color-foreground));
+      min-width: 0;
+      border: none;
+      outline: none;
+      margin: 0;
+      line-height: var(--ease-dropdown-line-height, 14px);
+      transition: color 0.2s, background-color 0.2s;
+      text-align: left;
+
+      &:hover,
+      &:focus-within {
+        background-color: var(--ease-dropdown-background-hover, var(--color-gray-825));
+      }
+
+      [part="trigger-icon"] {
+        display: block;
+        margin: -1px 0 -1px -2px;
+      }
+
+      &[data-pill="true"] {
+        border-radius: 999px;
+      }
+
+      &[data-block="small"] {
+        padding: 4px 8px 4px 4px;
+      }
+
+      &[data-headless="true"] {
+        background: transparent;
+        box-shadow: none;
+        padding: 0;
+        border-radius: 0;
+        gap: 4px;
+
+        &:hover,
+        &:focus-within {
+          background: transparent;
+        }
+      }
+    }
+
+    input[part="trigger-input"] {
+      background: transparent;
+      border: none;
+      outline: none;
+      color: inherit;
+      font: inherit;
+      width: fit-content;
+      min-width: 0;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      field-sizing: var(--ease-dropdown-field-sizing, fixed);
+    }
+    
+    :host([open]) input[part="trigger-input"] {
+      cursor: text;
+    }
+
+    [part="trigger"][data-placeholder="true"],
+    [part="trigger"] [part="trigger-label"][data-placeholder="true"],
+    input[part="trigger-input"]::placeholder {
+      color: var(--ease-dropdown-placeholder-color, var(--color-gray-600));
+    }
+
+    [part="trigger"] [part="trigger-label"] {
+      flex-grow: 1;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    [part="content"] {
+      border-radius: var(--ease-dropdown-panel-radius, var(--ease-dropdown-radius, var(--radii-md)));
+      background: var(--ease-dropdown-panel-background, var(--color-gray-875));
+      border: none;
+      outline: none;
+      box-shadow: var(
+        --ease-dropdown-panel-shadow,
+        0 5px 20px 0 var(--color-black-15),
+        0 1px 4px 0 var(--color-black-15),
+        0 0 0 1px var(--color-white-4) inset,
+        0 1px 0 0 var(--color-white-4) inset
+      );
+      background-clip: padding-box;
+      border: 1px solid var(--ease-dropdown-panel-border-color, var(--color-gray-825));
+      box-sizing: border-box;
+      padding: var(--ease-dropdown-panel-padding, 4px);
+    }
+    
+    [part="content"] ::slotted(hr) {
+      margin: 4px 0;
+      height: 1px;
+      background-color: var(--color-white-4);
+      border: none;
+
+      &:first-child,
+      &:last-child {
+        display: none;
+      }
+    }
+
+    [part="content"] ::slotted(h4) {
+      margin: 4px 0 8px 0 !important;
+      font-size: var(--ease-dropdown-group-label-font-size, 11px);
+      line-height: 1;
+      padding: var(--ease-dropdown-group-label-padding, 0 8px);
+      font-family: var(--ease-font-family, inherit);
+      font-weight: 450;
+      color: var(--ease-dropdown-group-label-color, var(--color-gray-700));
+      display: block;
+
+      &:first-child,
+      &:last-child {
+        display: none;
+      }
+    }
+
+    [part="section"] {
+      flex-grow: 1;
+      min-width: max(100%, var(--ease-dropdown-min-width, 140px));
+      display: grid;
+      grid-gap: 3px;
+      max-height: var(--ease-dropdown-max-height, auto);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      container-type: inline-size;
+      container-name: scroll-area;
+      mask: linear-gradient(to bottom,
+        #0000,
+        #ffff var(--top-fade) calc(100% - var(--bottom-fade)),
+        #0000
+      );
+      animation: scroll;
+      animation-timeline: --scroll;
+      scroll-timeline: --scroll y;
+      scroll-snap-type: y mandatory;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      box-sizing: border-box;
+    }
+
+    [part="section"]::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
+    }
+
+    @property --top-fade {
+      syntax: '<length>';
+      inherits: false;
+      initial-value: 0;
+    }
+
+    @property --bottom-fade {
+      syntax: '<length>';
+      inherits: false;
+      initial-value: 0;
+    }
+
+    @keyframes scroll {
+      0% {
+        --bottom-fade: 16px;
+        --top-fade: 0;
+      }
+      10%,
+      100% {
+        --top-fade: 16px;
+      }
+      90% {
+        --bottom-fade: 16px;
+      }
+      100% {
+        --bottom-fade: 0;
+      }
+    }
+
+    ::slotted(button[slot="content"]) {
+      appearance: none;
+      font-family: var(--ease-font-family, inherit);
+      font-optical-sizing: auto;
+      font-size: var(--ease-dropdown-option-font-size, var(--ease-font-size-sm, 12px));
+      font-weight: var(--ease-dropdown-option-font-weight, 400);
+      color: var(--ease-dropdown-option-color, var(--color-blue-100));
+      min-width: 0;
+      padding: var(--ease-dropdown-option-padding, 7px 8px);
+      display: block;
+      border-radius: var(--ease-dropdown-option-radius, 5px);
+      background-color: var(--ease-dropdown-option-background, var(--color-gray-875));
+      border: none;
+      outline: none;
+      margin: 0;
+      line-height: var(--ease-dropdown-option-line-height, 14px);
+      transition: color 0.2s, background-color 0.2s;
+      cursor: pointer;
+      width: 100%;
+      text-align: left;
+    }
+
+    ::slotted(button[slot="content"]:hover),
+    ::slotted(button[slot="content"]:focus-visible),
+    ::slotted(button[slot="content"][data-active="true"]),
+    ::slotted(button[slot="content"][aria-selected="true"]) {
+      background-color: var(--ease-dropdown-option-background-active, var(--color-gray-825));
+      color: var(--ease-dropdown-option-color-active, var(--color-white));
+    }
+  `
+})
+export class Dropdown extends HTMLElement {
+    @Prop({
+        type: Boolean,
+        reflect: true,
+        onChange(next, previous) {
+            this.handleOpenChange(next, previous);
+        }
+    })
+    accessor open = false;
+    @Prop({ type: Boolean, reflect: true })
+    accessor disabled = false;
+    @Prop({ type: Boolean, reflect: true })
+    accessor pill = false;
+    @Prop({ type: Boolean, reflect: true })
+    accessor headless = false;
+    @Prop({ type: Boolean, reflect: true })
+    accessor searchable = false;
+    @Prop({
+        type: String,
+        reflect: true,
+        defaultValue: 'medium',
+        onAttributeChange() {
+            this.requestRender?.();
+        }
+    })
+    accessor block = 'medium';
+    @Prop({
+        reflect: true,
+        defaultValue: 'auto',
+        onChange(next) {
+            this.style.setProperty('--ease-dropdown-max-height', next ?? 'auto');
+        }
+    })
+    accessor maxHeight = 'auto';
+    @Prop({ reflect: true, defaultValue: null })
+    accessor name = null;
+    @Prop({ reflect: true, defaultValue: null })
+    accessor value = null;
+    @Prop({
+        reflect: true,
+        attribute: 'placeholder',
+        defaultValue: 'Select an option'
+    })
+    accessor placeholder = 'Select an option';
+    @Prop({ reflect: true, defaultValue: 'bottom-start' })
+    accessor placement = 'bottom-start';
+    @Query('[part="trigger"]')
+    accessor trigger;
+    @Query('input[part="trigger-input"]')
+    accessor searchInput;
+    @Query('[part="content"]')
+    accessor panelContent;
+    @Query('slot[name="content"]')
+    accessor contentSlot;
+    #options = [];
+    #selectedLabel = null;
+    #currentSlot = null;
+    #pendingFocus = null;
+    #optionsInitialized = false;
+    #lastToggleOrigin = null;
+    #handleSlotChange = () => {
+        this.#syncOptions();
+    };
+    connectedCallback() {
+        this.#ensureSlotListener();
+    }
+    disconnectedCallback() {
+        this.#removeSlotListener();
+        this.#teardownOptions();
+        this.#lastToggleOrigin = null;
+    }
+    afterRender() {
+        const trigger = this.trigger;
+        const ariaLabel = this.getAttribute('aria-label');
+        if (trigger) {
+            if (trigger instanceof HTMLButtonElement) {
+                trigger.disabled = Boolean(this.disabled);
+            }
+            trigger.setAttribute('aria-expanded', this.open && !this.disabled ? 'true' : 'false');
+            trigger.setAttribute('aria-haspopup', 'listbox');
+            if (trigger instanceof HTMLButtonElement) {
+                if (ariaLabel && ariaLabel.trim().length > 0) {
+                    trigger.setAttribute('aria-label', ariaLabel.trim());
+                }
+                else {
+                    trigger.removeAttribute('aria-label');
+                }
+            }
+        }
+        if (this.searchInput) {
+            this.searchInput.disabled = Boolean(this.disabled);
+            if (ariaLabel && ariaLabel.trim().length > 0) {
+                this.searchInput.setAttribute('aria-label', ariaLabel.trim());
+            }
+            else {
+                this.searchInput.removeAttribute('aria-label');
+            }
+        }
+        const panel = this.panelContent;
+        const isInteractive = this.open && !this.disabled;
+        if (panel) {
+            if (!panel.id) {
+                panel.id = nextPanelId();
+            }
+            panel.tabIndex = -1;
+            panel.setAttribute('role', 'listbox');
+            panel.setAttribute('aria-hidden', isInteractive ? 'false' : 'true');
+            if (trigger) {
+                trigger.setAttribute('aria-controls', panel.id);
+            }
+        }
+        else if (trigger) {
+            trigger.removeAttribute('aria-controls');
+        }
+        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
+        this.#ensureSlotListener();
+        if (!this.#optionsInitialized) {
+            queueMicrotask(() => {
+                this.#syncOptions();
+            });
+        }
+        else {
+            this.#updateOptionSelectionState();
+        }
+        if (this.disabled && this.open) {
+            this.#lastToggleOrigin = null;
+            this.open = false;
+        }
+    }
+    render() {
+        const placeholderActive = this.#isPlaceholderActive();
+        return html `
+      <ease-popover
+        .placement=${this.placement}
+        .open=${this.open && !this.disabled}
+      >
+        ${this.searchable ? this.#renderSearchTrigger(placeholderActive) : this.#renderButtonTrigger(placeholderActive)}
+        <div
+          part="content"
+          role="listbox"
+          tabindex="-1"
+          data-open=${this.open && !this.disabled ? 'true' : 'false'}
+          ?hidden=${!this.open || this.disabled}
+          @keydown=${this.#handlePanelKeydown}
+        >
+          <div part="section">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </ease-popover>
+    `;
+    }
+    #renderButtonTrigger(placeholderActive) {
+        return html `
+        <button
+          part="trigger"
+          slot="trigger"
+          type="button"
+          data-placeholder=${placeholderActive ? 'true' : 'false'}
+          data-headless=${this.headless}
+          @keydown=${this.#handleTriggerKeydown}
+          @click=${this.#handleTriggerClick}
+          data-pill=${this.pill}
+        >
+          <slot name="trigger">
+            <span part="trigger-label" data-placeholder=${placeholderActive ? 'true' : 'false'}>
+              ${this.#getTriggerLabel()}
+            </span>
+
+            <ease-icon-chevron part="trigger-icon" state=${this.open ? 'up' : 'down'} />
+          </slot>
+        </button>
+      `;
+    }
+    #renderSearchTrigger(placeholderActive) {
+        return html `
+        <div
+          part="trigger"
+          slot="trigger"
+          data-placeholder=${placeholderActive ? 'true' : 'false'}
+          data-headless=${this.headless}
+          @click=${this.#handleSearchTriggerClick}
+          data-pill=${this.pill}
+        >
+          <slot name="trigger">
+             <input 
+                part="trigger-input"
+                type="text"
+                .value=${this.open ? (this.searchInput?.value ?? '') : this.#getTriggerLabel()}
+                placeholder=${this.placeholder ?? ''}
+                ?readonly=${!this.open}
+                @input=${this.#handleSearchInput}
+                @keydown=${this.#handleTriggerKeydown}
+             />
+            <ease-icon-chevron part="trigger-icon" state=${this.open ? 'up' : 'down'} />
+          </slot>
+        </div>
+      `;
+    }
+    #handleSearchTriggerClick = (event) => {
+        if (this.disabled) {
+            return;
+        }
+        if (!this.open) {
+            this.toggle(true, event);
+            if (this.searchInput) {
+                this.searchInput.value = '';
+                this.#filterOptions('');
+                this.searchInput.focus();
+            }
+        }
+        else {
+            if (event.target !== this.searchInput) {
+                this.toggle(false, event);
+            }
+        }
+    };
+    #handleSearchInput = (event) => {
+        const input = event.target;
+        this.#filterOptions(input.value);
+        if (!this.open) {
+            this.toggle(true, event);
+        }
+    };
+    #filterOptions(query) {
+        const lowerQuery = query.toLowerCase();
+        this.#options.forEach((option) => {
+            const match = option.label.toLowerCase().includes(lowerQuery);
+            if (match) {
+                option.element.style.display = '';
+            }
+            else {
+                option.element.style.display = 'none';
+            }
+        });
+    }
+    toggle(force, originEvent) {
+        if (this.disabled) {
+            return;
+        }
+        const current = this.open;
+        const next = force ?? !current;
+        if (current === next) {
+            return;
+        }
+        this.#lastToggleOrigin = originEvent ?? null;
+        this.open = next;
+        if (!next) {
+            this.#pendingFocus = null;
+            // Reset filter when closing
+            this.#filterOptions('');
+            // Restore label in input if searchable
+            if (this.searchable && this.searchInput) {
+                this.searchInput.value = this.#getTriggerLabel();
+                this.searchInput.blur(); // Blur to look like static text
+            }
+        }
+    }
+    handleOpenChange(next, previous) {
+        if (next === previous) {
+            return;
+        }
+        if (!next) {
+            this.#pendingFocus = null;
+        }
+        const origin = this.#lastToggleOrigin ?? new Event(next ? 'open' : 'close');
+        this.#lastToggleOrigin = null;
+        if (next) {
+            if (this.searchable && this.searchInput) {
+                this.searchInput.focus();
+            }
+            else {
+                queueMicrotask(() => this.#focusActiveOption());
+            }
+        }
+        dispatchControlEvent(this, 'toggle', { value: next, event: origin });
+        requestOutsideClickUpdate(this);
+    }
+    @OutsideClick({
+        content: (host) => host.panelContent,
+        triggers: (host) => [host.trigger, host.panelContent],
+        disabled: (host) => host.disabled || !host.open
+    })
+    handleOutsideDismiss(event) {
+        if (!this.open) {
+            return;
+        }
+        this.toggle(false, event);
+    }
+    #handleTriggerKeydown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.#pendingFocus = 'first';
+                this.toggle(true, event);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.#pendingFocus = 'last';
+                this.toggle(true, event);
+                break;
+            case 'Enter':
+                if (!this.searchable) {
+                    event.preventDefault();
+                    this.toggle(true, event);
+                }
+                break;
+            case ' ': // Space
+                if (!this.searchable) {
+                    event.preventDefault();
+                    this.toggle(true, event);
+                }
+                break;
+            case 'Escape':
+                if (this.open) {
+                    event.preventDefault();
+                    this.toggle(false, event);
+                }
+                break;
+            default:
+                break;
+        }
+    };
+    #ensureSlotListener() {
+        const slot = this.contentSlot;
+        if (slot === this.#currentSlot) {
+            return;
+        }
+        if (this.#currentSlot) {
+            this.#currentSlot.removeEventListener('slotchange', this.#handleSlotChange);
+        }
+        if (slot) {
+            slot.addEventListener('slotchange', this.#handleSlotChange);
+        }
+        this.#currentSlot = slot ?? null;
+    }
+    #removeSlotListener() {
+        if (!this.#currentSlot) {
+            return;
+        }
+        this.#currentSlot.removeEventListener('slotchange', this.#handleSlotChange);
+        this.#currentSlot = null;
+    }
+    #handleTriggerClick = (event) => {
+        this.toggle(!this.open, event);
+    };
+    #syncOptions() {
+        const assigned = this.contentSlot?.assignedElements({ flatten: true }) ?? [];
+        const elements = assigned.filter((node) => node instanceof HTMLElement);
+        this.#removeOptionListeners(this.#options);
+        const options = [];
+        elements.forEach((element) => {
+            if (element.hasAttribute('data-select-ignore') || element.getAttribute('role') === 'separator') {
+                return;
+            }
+            const value = this.#resolveOptionValue(element);
+            const label = this.#resolveOptionLabel(element, value);
+            const id = element.id && element.id.trim().length > 0 ? element.id : nextOptionId();
+            if (!element.id) {
+                element.id = id;
+            }
+            element.setAttribute('role', 'option');
+            element.setAttribute('aria-selected', 'false');
+            element.dataset.active = 'false';
+            element.tabIndex = -1;
+            const handlers = {
+                click: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.#selectOption(value, label, event);
+                },
+                keydown: (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        this.#selectOption(value, label, event);
+                    }
+                }
+            };
+            element.addEventListener('click', handlers.click, { passive: false });
+            element.addEventListener('keydown', handlers.keydown);
+            options.push({ element, value, label, id, handlers });
+        });
+        this.#options = options;
+        this.#optionsInitialized = options.length > 0;
+        if (this.value === null && options.length > 0) {
+            const preselected = options.find((option) => option.element.hasAttribute('selected') ||
+                option.element.dataset.selected === 'true' ||
+                option.element.getAttribute('aria-selected') === 'true');
+            if (preselected) {
+                this.value = preselected.value;
+            }
+        }
+        this.#updateOptionSelectionState();
+    }
+    #teardownOptions() {
+        this.#removeOptionListeners(this.#options);
+        this.#options = [];
+        this.#optionsInitialized = false;
+        this.#selectedLabel = null;
+    }
+    #removeOptionListeners(options) {
+        options.forEach((option) => {
+            option.element.removeEventListener('click', option.handlers.click);
+            option.element.removeEventListener('keydown', option.handlers.keydown);
+            option.element.dataset.active = 'false';
+            option.element.setAttribute('aria-selected', 'false');
+            option.element.tabIndex = -1;
+        });
+    }
+    #updateOptionSelectionState() {
+        if (!this.#optionsInitialized) {
+            this.toggleAttribute('data-has-value', false);
+            return;
+        }
+        let selectedLabel = null;
+        const previousLabel = this.#selectedLabel;
+        const options = this.#options;
+        options.forEach((option) => {
+            const isSelected = this.value !== null && option.value === this.value;
+            option.element.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+            option.element.dataset.active = isSelected ? 'true' : 'false';
+            option.element.tabIndex = isSelected ? 0 : -1;
+            if (isSelected) {
+                selectedLabel = option.label;
+            }
+        });
+        if (!selectedLabel) {
+            const fallback = options[0];
+            if (fallback) {
+                fallback.element.tabIndex = 0;
+            }
+        }
+        this.#selectedLabel = selectedLabel;
+        const hasValue = Boolean(this.value && this.#selectedLabel);
+        this.toggleAttribute('data-has-value', hasValue);
+        if (previousLabel !== this.#selectedLabel && typeof this.requestRender === 'function') {
+            this.requestRender();
+        }
+    }
+    #isPlaceholderActive() {
+        return !this.value || !this.#selectedLabel;
+    }
+    #getTriggerLabel() {
+        if (this.#selectedLabel) {
+            return this.#selectedLabel;
+        }
+        if (typeof this.placeholder === 'string' && this.placeholder.trim().length > 0) {
+            return this.placeholder.trim();
+        }
+        return 'Select';
+    }
+    #focusActiveOption() {
+        if (!this.open) {
+            return;
+        }
+        const options = this.#options.filter((o) => o.element.style.display !== 'none');
+        if (options.length === 0) {
+            this.panelContent?.focus();
+            return;
+        }
+        let target = options[0];
+        if (this.#pendingFocus === 'first') {
+            target = options[0];
+        }
+        else if (this.#pendingFocus === 'last') {
+            target = options[options.length - 1];
+        }
+        else if (this.#pendingFocus === null && this.value !== null) {
+            const match = this.#findOptionByValue(this.value);
+            if (match && match.element.style.display !== 'none') {
+                target = match;
+            }
+        }
+        if (target) {
+            this.#focusOption(target);
+        }
+        this.#pendingFocus = null;
+    }
+    #focusOption(option) {
+        this.#options.forEach((entry) => {
+            entry.element.tabIndex = entry === option ? 0 : -1;
+        });
+        option.element.focus({ preventScroll: true });
+    }
+    #focusOptionByIndex(index) {
+        const options = this.#options.filter((o) => o.element.style.display !== 'none');
+        if (options.length === 0) {
+            this.panelContent?.focus();
+            return;
+        }
+        const normalized = Math.max(0, Math.min(index, options.length - 1));
+        const option = options[normalized];
+        if (option) {
+            this.#focusOption(option);
+        }
+    }
+    #findOptionByValue(value) {
+        if (value === null) {
+            return undefined;
+        }
+        return this.#options.find((option) => option.value === value);
+    }
+    #moveFocus(step) {
+        const options = this.#options.filter((o) => o.element.style.display !== 'none');
+        if (options.length === 0) {
+            this.panelContent?.focus();
+            return;
+        }
+        const activeElement = document.activeElement;
+        const currentIndex = options.findIndex((option) => option.element === activeElement);
+        if (currentIndex === -1) {
+            this.#focusOptionByIndex(step > 0 ? 0 : options.length - 1);
+            return;
+        }
+        const nextIndex = (currentIndex + step + options.length) % options.length;
+        this.#focusOptionByIndex(nextIndex);
+    }
+    #handlePanelKeydown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.#moveFocus(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.#moveFocus(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.#focusOptionByIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.#focusOptionByIndex(this.#options.length - 1);
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                this.#activateFocusedOption(event);
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.toggle(false, event);
+                this.trigger?.focus();
+                break;
+            default:
+                break;
+        }
+    };
+    #activateFocusedOption(event) {
+        const active = this.#options.find((option) => option.element === document.activeElement);
+        if (active) {
+            this.#selectOption(active.value, active.label, event);
+        }
+    }
+    #selectOption(value, label, originEvent) {
+        if (this.disabled) {
+            return;
+        }
+        originEvent.preventDefault();
+        originEvent.stopPropagation();
+        const previousValue = this.value;
+        this.value = value;
+        this.#selectedLabel = label;
+        this.#updateOptionSelectionState();
+        this.toggle(false, originEvent);
+        if (previousValue !== value) {
+            this.#dispatchValueChange(value, label, originEvent);
+        }
+        if (!this.searchable) {
+            queueMicrotask(() => this.trigger?.focus());
+        }
+    }
+    #resolveOptionValue(element) {
+        const explicitValue = element.getAttribute('value') ?? element.getAttribute('data-value') ?? element.dataset.value;
+        if (explicitValue && explicitValue.trim().length > 0) {
+            return explicitValue.trim();
+        }
+        const text = element.textContent?.trim();
+        if (text && text.length > 0) {
+            return text;
+        }
+        const fallback = nextOptionId();
+        element.dataset.value = fallback;
+        return fallback;
+    }
+    #resolveOptionLabel(element, fallback) {
+        const explicitLabel = element.getAttribute('data-label') ?? element.getAttribute('aria-label');
+        if (explicitLabel && explicitLabel.trim().length > 0) {
+            return explicitLabel.trim();
+        }
+        const text = element.textContent?.trim();
+        if (text && text.length > 0) {
+            return text;
+        }
+        return fallback;
+    }
+    #dispatchValueChange(value, label, event) {
+        dispatchControlEvent(this, 'change', { value, event });
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value, label, event },
+            bubbles: true,
+            composed: true
+        }));
+    }
+}