@easemate/web-kit 0.2.0 → 0.3.0

package/build/elements/dropdown/index.js

@@ -1,871 +0,0 @@
-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
-        }));
-    }
-}