tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/select.js

@@ -1,2115 +1,1634 @@
-/**
- * TySelect Web Component
- *
- * The select control — replaces ty-dropdown and ty-multiselect.
- *
- * Cardinality (native <select> semantics):
- * - default: SINGLE select — scalar value, picking an option closes the popup
- * - `multiple`: multi select — comma value / repeated FormData entries,
- *   options toggle and the popup stays open
- *
- * Skins:
- * - default: form FIELD — full width, --ty-input-* tokens, matches ty-input;
- *   shows the selected label(s) inline
- * - `compact`: content-hugging trigger for toolbars/filter bars; single shows
- *   the selected label, multiple shows placeholder + count badge (pair with
- *   <ty-selected-options>)
- * - slot="trigger": consumer skin — replaces field/compact chrome entirely,
- *   behavior/ARIA/form participation unchanged
- *
- * - ty-option children (ty-tag also accepted)
- * - Desktop popup with smart positioning, mobile full-screen modal
- * - Search / external-search / debounce, keyboard navigation
- * - Form association: single submits one entry, multiple submits repeated
- *   `name=` entries (HTMX-ready)
- * - change event detail: { value, values, items: [{value, label, flavor}], action, item }
- *   (`value` is a scalar for single, array for multiple)
- *
- * @example
- * ```html
- * <!-- Single select, field skin -->
- * <ty-select label="Robot" name="robot">
- *   <ty-option value="bobo">Bobo Robot</ty-option>
- *   <ty-option value="eywa">EYWA Dataset Example</ty-option>
- * </ty-select>
- *
- * <!-- Multi select, compact skin + out-of-band chips -->
- * <ty-select multiple compact label="Robots" name="robots" id="robots">...</ty-select>
- * <ty-selected-options for="robots"></ty-selected-options>
- * ```
- */
+import { DEFAULT_SIZE } from "../types/common.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { selectBaseStyles, selectCustomFlavorCss } from "../styles/select-base.js";
 import { selectStyles } from "../styles/select.js";
 import { getLoaderSvg } from "../utils/loader-registry.js";
 import { lockScroll, unlockScroll } from "../utils/scroll-lock.js";
-import { computeAnchoredPosition } from "../utils/positioning.js";
+import { computeAnchoredPosition, placementToAnchored } from "../utils/positioning.js";
 import { isMobileTouch } from "../utils/mobile.js";
 import { TyComponent } from "../base/ty-component.js";
 import { CustomScrollbar, isCustomScrollbarEnabled, } from "../utils/custom-scrollbar.js";
-// ============================================================================
-// Element Hash Utility (for consistent scroll lock IDs)
-// ============================================================================
-/**
- * Counter for generating unique element IDs
- */
 let elementIdCounter = 0;
-/**
- * WeakMap to store consistent element hashes
- * Automatically garbage collects when element is destroyed
- */
 const elementIds = new WeakMap();
-/**
- * Get a consistent unique ID for an element
- * Returns the same ID for the same element across multiple calls
- *
- * @param element - The element to hash
- * @returns A consistent numeric hash for the element
- */
 function getElementHash(element) {
-    let id = elementIds.get(element);
-    if (id === undefined) {
-        id = ++elementIdCounter;
-        elementIds.set(element, id);
-    }
-    return id;
-}
-// ============================================================================
-// SVG Icons
-// ============================================================================
+let id = elementIds.get(element);
+if (id === undefined) {
+id = ++elementIdCounter;
+elementIds.set(element, id);
+}
+return id;
+}
 import { REQUIRED_ICON_SVG } from "../utils/icons.js";
-/**
- * Chevron down icon SVG
- */
+const SEARCH_AUTO_THRESHOLD = 7;
 const CHEVRON_DOWN_SVG = `<svg viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 </svg>`;
-/**
- * 'auto' searchable mode: option count above which the search row appears.
- * Short lists scan faster than they search — native <select> has no search.
- */
-const SEARCH_AUTO_THRESHOLD = 7;
-/**
- * create-transform="slug": lowercase, spaces → '_', strip anything else
- * non-alphanumeric, collapse/trim stray underscores.
- */
 function slugify(text) {
-    return text
-        .trim()
-        .toLowerCase()
-        .replace(/\s+/g, "_")
-        .replace(/[^a-z0-9_]/g, "")
-        .replace(/_+/g, "_")
-        .replace(/^_|_$/g, "");
-}
-/**
- * Search (magnifier) icon SVG — popup search input adornment (from Lucide)
- */
+return text
+.trim()
+.toLowerCase()
+.replace(/\s+/g, "_")
+.replace(/[^a-z0-9_]/g, "")
+.replace(/_+/g, "_")
+.replace(/^_|_$/g, "");
+}
 const SEARCH_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
 </svg>`;
-/**
- * Clear (X) icon SVG — .select-clear button, shown in the trigger's fallback
- * chrome (default/compact skins) when clearable and something is selected.
- */
 const CLEAR_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <line x1="18" y1="6" x2="6" y2="18"></line>
-  <line x1="6" y1="6" x2="18" y2="18"></line>
+<line x1="18" y1="6" x2="6" y2="18"></line>
+<line x1="6" y1="6" x2="18" y2="18"></line>
 </svg>`;
-/**
- * Ty Select Component
- */
 export class TySelect extends TyComponent {
-    constructor() {
-        super(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE
-        // ============================================================================
-        this._name = "";
-        this._multiple = false;
-        this._compact = false;
-        this._placeholder = "Select...";
-        this._label = "";
-        this._disabled = false;
-        this._readonly = false;
-        this._required = false;
-        this._clearable = true;
-        this._externalSearch = false;
-        this._allowCreate = false;
-        this._createTransform = "none";
-        this._searchable = "auto";
-        this._loading = false;
-        this._scrollLockId = null;
-        this._size = "md";
-        this._availableLabel = "Available";
-        this._noOptionsMessage = "No options available";
-        // Component state
-        this._state = {
-            open: false,
-            search: "",
-            highlightedIndex: -1,
-            filteredTags: [],
-            selectedValues: [],
-            mode: "desktop", // Updated dynamically on render via syncMode()
-        };
-        // Event handler references for cleanup
-        this._stubClickHandler = null;
-        this._tagClickHandler = null;
-        this._searchInputHandler = null;
-        this._blockSearchClick = null;
-        this._keyboardHandler = null;
-        // Debounce properties for search event
-        this._debounce = 0;
-        this._searchDebounceTimer = null;
-        // Custom scrollbar for options list
-        this._optionsScrollbar = null;
-        // MutationObserver for light-DOM children — re-syncs selected tags' visual
-        // state when consumers swap tag children (external-search refresh pattern).
-        this._childObserver = null;
-        // Last single-select display clone — survives external-search option swaps
-        // that remove the matching option (and often the clone itself) from the DOM.
-        this._selectedClone = null;
-        this._customFlavorSheet = null;
-        const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: selectBaseStyles, id: "ty-select-base" });
-        ensureStyles(shadow, { css: selectStyles, id: "ty-select" });
-        // DON'T render here - wait for onConnect() to initialize values first
-        // This matches dropdown.ts pattern and prevents showing empty state
-    }
-    /**
-     * Called when component is connected to DOM
-     * TyComponent handles property capture automatically
-     */
-    onConnect() {
-        // SAFETY: Close any open dialogs to prevent scroll locking
-        const shadow = this.shadowRoot;
-        const dialogs = shadow.querySelectorAll("dialog");
-        dialogs.forEach((dialog) => {
-            if (dialog.open) {
-                console.warn("⚠️ Found open dialog on connect, closing it");
-                dialog.close();
-            }
-        });
-        // Render FIRST to create DOM structure
-        this.render();
-        // THEN initialize and sync tags (after DOM exists)
-        requestAnimationFrame(() => {
-            this.initializeState();
-            // Visual updates happen automatically via onPropertiesChanged
-        });
-        // Observe light-DOM children — re-sync selected state when consumers swap
-        // tag children (external-search refresh). syncSelectedTags is idempotent
-        // (only acts on tags whose desired-vs-actual selected state differs), so
-        // spurious firings caused by our own re-slot work are no-ops.
-        this._childObserver = new MutationObserver(() => {
-            this.ensureOptionRoles();
-            if (this._state.selectedValues.length > 0) {
-                this.syncSelectedTags(this._state.selectedValues);
-            }
-            // Option count may have crossed the 'auto' searchable threshold
-            this.updateSearchVisibility();
-            // External-search consumers replace ALL ty-option children — often
-            // including our display clone. Rebuild the selection display (idempotent:
-            // a clone that already matches is left alone, so no observer loop).
-            this.updateSelectionDisplay();
-            // Mobile's "Available (N)" count and empty-state come from
-            // updateMobileSelectedState(), which internal search filtering already
-            // triggers — but external-search bypasses internal filtering entirely
-            // (handleSearchInput returns early for it), so this was the only place
-            // left that could catch a child-list change and it didn't. Without
-            // this, .mobile-available-section[data-empty="true"] slot { display:
-            // none } stays stuck hidden after a consumer replaces the options —
-            // the new options are correctly in the DOM, just invisible.
-            this.updateMobileSelectedState();
-        });
-        this._childObserver.observe(this, { childList: true });
-        // MutationObserver only fires on FUTURE mutations — cover the initial
-        // set of options too (the common case: none selected yet at connect).
-        this.ensureOptionRoles();
-        this._syncCustomFlavor();
-    }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
-    _syncCustomFlavor() {
-        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getProperty("flavor"), ({ base }) => selectCustomFlavorCss(base));
-    }
-    /**
-     * Called when component is disconnected from DOM
-     * Clean up event listeners and timers
-     */
-    onDisconnect() {
-        // CRITICAL: Close all dialogs to prevent scroll locking
-        const shadow = this.shadowRoot;
-        const dialogs = shadow.querySelectorAll("dialog");
-        dialogs.forEach((dialog) => {
-            if (dialog.open) {
-                dialog.close();
-            }
-        });
-        // Clean up document-level listeners
-        if (this._keyboardHandler) {
-            document.removeEventListener("keydown", this._keyboardHandler);
-            this._keyboardHandler = null;
-        }
-        // Clear any pending debounce timer
-        if (this._searchDebounceTimer !== null) {
-            clearTimeout(this._searchDebounceTimer);
-            this._searchDebounceTimer = null;
-        }
-        // Cleanup custom scrollbar
-        this._destroyOptionsScrollbar();
-        // Disconnect children observer
-        if (this._childObserver) {
-            this._childObserver.disconnect();
-            this._childObserver = null;
-        }
-    }
-    /**
-     * Called when properties change
-     * Handle state synchronization BEFORE render
-     */
-    onPropertiesChanged(changes) {
-        for (const { name, newValue } of changes) {
-            switch (name) {
-                case "value":
-                    const selectedValues = this.parseValue(newValue);
-                    this._state.selectedValues = selectedValues;
-                    // CRITICAL: Only sync tags if we're connected and tags exist
-                    // During initial property setup (before onConnect), tags don't exist yet
-                    if (this.isConnected && this.shadowRoot) {
-                        this.syncSelectedTags(selectedValues);
-                        this.updateSelectionDisplay();
-                        this.updateMobileSelectedState();
-                    }
-                    // (not-yet-connected: sync deferred to initializeState)
-                    break;
-                case "name":
-                    this._name = newValue || "";
-                    break;
-                case "flavor":
-                    this._syncCustomFlavor();
-                    break;
-                case "multiple":
-                    this._multiple = newValue;
-                    // Dropping to single with a multi selection: keep only the first
-                    if (!newValue && this._state.selectedValues.length > 1) {
-                        this.updateComponentValue([this._state.selectedValues[0]], false, "set", null);
-                    }
-                    break;
-                case "compact":
-                    this._compact = newValue;
-                    break;
-                case "placeholder":
-                    this._placeholder = newValue || "Select...";
-                    if (this.isConnected && this.shadowRoot)
-                        this.updateSelectionDisplay();
-                    break;
-                case "label":
-                    this._label = newValue || "";
-                    break;
-                case "disabled":
-                    this._disabled = newValue;
-                    break;
-                case "readonly":
-                    this._readonly = newValue;
-                    break;
-                case "required":
-                    this._required = newValue;
-                    break;
-                case "clearable":
-                    this._clearable = newValue;
-                    if (this.isConnected && this.shadowRoot)
-                        this.updateSelectionDisplay();
-                    break;
-                case "externalSearch":
-                    this._externalSearch = newValue;
-                    break;
-                case "searchable":
-                    this._searchable = newValue;
-                    if (this.isConnected && this.shadowRoot)
-                        this.updateSearchVisibility();
-                    break;
-                case "allowCreate":
-                    this._allowCreate = newValue;
-                    if (this.isConnected && this.shadowRoot)
-                        this.updateSearchVisibility();
-                    break;
-                case "createTransform":
-                    this._createTransform = newValue;
-                    break;
-                case "size":
-                    this._size = newValue;
-                    break;
-                case "debounce":
-                    this._debounce = newValue;
-                    break;
-                case "available-label":
-                    this._availableLabel = newValue || "Available";
-                    break;
-                case "no-options-message":
-                    this._noOptionsMessage = newValue || "No options available";
-                    break;
-                case "loading":
-                    this._loading = newValue;
-                    this.applyLoadingState();
-                    break;
-            }
-        }
-    }
-    /**
-     * Toggle the loading visual state on the open popup.
-     * Replaces the available-options area with a centered spinner; search input stays usable.
-     * Pulls the latest registered loader SVG on each call so registry changes
-     * take effect on the next loading toggle.
-     */
-    applyLoadingState() {
-        const shadow = this.shadowRoot;
-        if (!shadow)
-            return;
-        const svg = this._loading ? getLoaderSvg() : null;
-        shadow.querySelectorAll(".dropdown-options-wrapper").forEach((wrapper) => {
-            wrapper.classList.toggle("loading", this._loading);
-            if (this._loading) {
-                wrapper.setAttribute("aria-busy", "true");
-                const spinner = wrapper.querySelector(".dropdown-loading-spinner");
-                if (spinner && svg)
-                    spinner.innerHTML = svg;
-            }
-            else {
-                wrapper.removeAttribute("aria-busy");
-            }
-        });
-    }
-    /**
-     * Get the form value for this component
-     * Returns FormData with multiple entries (HTMX standard)
-     */
-    getFormValue() {
-        const selectedValues = this._state.selectedValues;
-        if (this._name && selectedValues.length > 0) {
-            // Single select submits one plain entry
-            if (!this._multiple)
-                return selectedValues[0];
-            // Multiple submits repeated `name=` entries (HTMX standard)
-            const formData = new FormData();
-            selectedValues.forEach((value) => {
-                formData.append(this._name, value);
-            });
-            return formData;
-        }
-        return null;
-    }
-    /**
-     * Parse select value (comma-separated string to array)
-     */
-    parseValue(value) {
-        // Defensive check: ensure value is actually a string before calling .trim()
-        if (!value || typeof value !== "string" || value.trim() === "")
-            return [];
-        return value
-            .split(",")
-            .map((v) => v.trim())
-            .filter((v) => v !== "");
-    }
-    /**
-     * Initialize component state from attributes
-     * Reads from both property and attribute (like ClojureScript version)
-     */
-    initializeState() {
-        const initialValue = this.getProperty("value") || "";
-        if (initialValue) {
-            // Explicit value provided - sync tags directly
-            // DON'T use updateComponentValue() because the property is already set!
-            const selectedValues = this.parseValue(initialValue);
-            // Update internal state
-            this._state.selectedValues = selectedValues;
-            // Sync the tags to match the property value
-            this.syncSelectedTags(selectedValues);
-            // Update the visual display
-            this.updateSelectionDisplay();
-            this.updateMobileSelectedState();
-        }
-        else {
-            // No explicit value - check for pre-selected tags
-            const allTags = this.getTagElements();
-            const preSelectedTags = allTags
-                .filter((tag) => tag.hasAttribute("selected"))
-                .map((tag) => this.getTagData(tag).value);
-            if (preSelectedTags.length > 0) {
-                // Set the property value and sync (updateComponentValue handles everything)
-                this.updateComponentValue(preSelectedTags, false);
-            }
-        }
-    }
-    // ============================================================================
-    // TAG MANAGEMENT METHODS (Phase 2)
-    // ============================================================================
-    /**
-     * Get all option elements from the component (ty-option preferred, ty-tag accepted)
-     */
-    getTagElements() {
-        // :not([cloned]) — the single-select display clone (slot="selected")
-        // lives in our light DOM too and must never count as an option
-        return Array.from(this.querySelectorAll("ty-option:not([cloned]), ty-tag:not([cloned])"));
-    }
-    /**
-     * Extract value and text from a ty-tag element
-     */
-    getTagData(element) {
-        // Get value from either property or attribute
-        const value = element.value ||
-            element.getAttribute("value") ||
-            element.textContent ||
-            "";
-        // Display label: explicit label attribute wins over textContent —
-        // native <option label> semantics; lets rich options declare clean text
-        const text = element.getAttribute("label") || element.textContent || "";
-        return { value, text, element };
-    }
-    /**
-     * Select an option - attribute only. The option stays in the list with
-     * selected styling; chips are rendered out-of-band (ty-selected-options).
-     */
-    selectTag(tag) {
-        tag.setAttribute("selected", "");
-    }
-    /**
-     * Deselect an option - attribute only.
-     */
-    deselectTag(tag) {
-        tag.removeAttribute("selected");
-    }
-    /**
-     * Get array of currently selected values from tags (ALWAYS reads from DOM)
-     */
-    getSelectedValues() {
-        return this.getTagElements()
-            .filter((tag) => tag.hasAttribute("selected"))
-            .map((tag) => this.getTagData(tag).value)
-            .filter((value) => value !== "");
-    }
-    /**
-     * Sync tag selection states with desired values
-     */
-    syncSelectedTags(selectedValues) {
-        const selectedSet = new Set(selectedValues);
-        const tags = this.getTagElements();
-        tags.forEach((tag) => {
-            const tagValue = this.getTagData(tag).value;
-            const shouldBeSelected = selectedSet.has(tagValue);
-            const isSelected = tag.hasAttribute("selected");
-            if (shouldBeSelected && !isSelected) {
-                this.selectTag(tag);
-            }
-            else if (!shouldBeSelected && isSelected) {
-                this.deselectTag(tag);
-            }
-            // ARIA listbox pattern: every option reports its live selected state,
-            // not just ones that changed this pass — cheap (idempotent setAttribute).
-            tag.setAttribute("aria-selected", String(shouldBeSelected));
-        });
-    }
-    /**
-     * role="option" for every current option/tag — separate from
-     * syncSelectedTags (which only runs when the `value` property changes)
-     * so it also covers the "nothing selected yet, value never touched"
-     * startup case. Idempotent; cheap to call from the child MutationObserver
-     * on every light-DOM change.
-     */
-    ensureOptionRoles() {
-        this.getTagElements().forEach((tag) => {
-            if (!tag.hasAttribute("role"))
-                tag.setAttribute("role", "option");
-            if (!tag.hasAttribute("aria-selected"))
-                tag.setAttribute("aria-selected", "false");
-        });
-    }
-    /**
-     * Central update function - synchronizes everything
-     * Uses TyComponent's property system for proper lifecycle
-     */
-    updateComponentValue(newValues, dispatchChange = false, action = "set", item = null) {
-        const oldValues = this.getSelectedValues();
-        const valueStr = newValues.join(",");
-        // Only update if changed
-        if (JSON.stringify(newValues.sort()) !== JSON.stringify(oldValues.sort())) {
-            // Use TyComponent's property system - this will trigger:
-            // 1. onPropertiesChanged() → syncs tags via syncSelectedTags()
-            // 2. onPropertiesChanged() → updates placeholder via updateSelectionDisplay()
-            // 3. updateFormValue() → automatic (formValue: true in config)
-            // 4. render() → automatic if visual properties changed
-            this.setProperty("value", valueStr);
-            // Explicit call, not just relying on render()'s cascade — `value` may
-            // not always be flagged as a "visual" property requiring a full
-            // re-render, and validity must update the moment selection changes.
-            this.updateValidity();
-            // Dispatch change event (with rich items for out-of-band chip rendering)
-            if (dispatchChange) {
-                this.dispatchChangeEvent({
-                    // Scalar for single select, array for multiple
-                    value: this._multiple ? [...newValues] : (newValues[0] ?? null),
-                    values: newValues,
-                    items: this.getSelectedItems(newValues),
-                    action,
-                    item,
-                });
-            }
-        }
-    }
-    /**
-     * Build rich item info for values, read off the matching option elements
-     */
-    getSelectedItems(values) {
-        const byValue = new Map(this.getTagElements().map((el) => [this.getTagData(el).value, el]));
-        return values.map((value) => {
-            const el = byValue.get(value);
-            return {
-                value,
-                // label attribute wins (native <option label> semantics)
-                label: el?.getAttribute("label") || el?.textContent?.trim() || value,
-                flavor: el?.getAttribute("flavor") ?? null,
-            };
-        });
-    }
-    // ============================================================================
-    // DROPDOWN METHODS (Phase 3 & 4)
-    // ============================================================================
-    /**
-     * Calculate and set dropdown position with smart direction detection
-     */
-    calculatePosition() {
-        const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".select-stub");
-        const dialog = shadow.querySelector(".dropdown-dialog");
-        if (!stub || !dialog)
-            return;
-        const stubRect = stub.getBoundingClientRect();
-        // Get dialog dimensions (it's already shown with showModal).
-        // Cap the estimate: with hundreds of options the raw measurement can be
-        // the uncapped content height, which made "fits below?" always false.
-        // 440px ≈ options max-height (24rem) + search header.
-        const MAX_POPUP_ESTIMATE = 440;
-        const dialogRect = dialog.getBoundingClientRect();
-        const estimatedHeight = Math.min(dialogRect.height || 200, MAX_POPUP_ESTIMATE);
-        const wrapPadding = 20;
-        // Popup width is independent of the trigger — a small button trigger still
-        // gets a usable list. Overridable via --ty-select-popup-width.
-        const cssWidth = parseFloat(getComputedStyle(this).getPropertyValue("--ty-select-popup-width"));
-        const popupWidth = !isNaN(cssWidth)
-            ? cssWidth
-            : Math.max(stubRect.width, 320);
-        const pos = computeAnchoredPosition({
-            anchorRect: stubRect,
-            popupWidth,
-            popupHeight: estimatedHeight,
-            align: this.getProperty("align"),
-        });
-        const positionBelow = pos.below;
-        // Shift by the dialog's transparent wrap (room for shadows)
-        const x = pos.x - wrapPadding;
-        const y = (positionBelow ? pos.topY : pos.bottomY) - wrapPadding;
-        const width = popupWidth + wrapPadding + wrapPadding;
-        // Set CSS variables for positioning
-        this.style.setProperty("--dropdown-x", `${x}px`);
-        this.style.setProperty("--dropdown-y", `${y}px`);
-        this.style.setProperty("--dropdown-width", `${width}px`);
-        this.style.setProperty("--dropdown-offset-x", "0px");
-        this.style.setProperty("--dropdown-offset-y", "0px");
-        this.style.setProperty("--dropdown-padding", `${wrapPadding}px`);
-        // Set direction classes for CSS styling
-        if (positionBelow) {
-            dialog.classList.add("position-below");
-            dialog.classList.remove("position-above");
-        }
-        else {
-            dialog.classList.add("position-above");
-            dialog.classList.remove("position-below");
-        }
-        // Optional: Store direction for debugging
-        this.style.setProperty("--dropdown-direction", positionBelow ? "below" : "above");
-    }
-    // ============================================================================
-    // CUSTOM SCROLLBAR FOR OPTIONS
-    // ============================================================================
-    _setupOptionsScrollbar() {
-        if (!isCustomScrollbarEnabled())
-            return;
-        const shadow = this.shadowRoot;
-        const optionsDiv = shadow.querySelector(".dropdown-options");
-        const optionsWrapper = shadow.querySelector(".dropdown-options-wrapper");
-        if (!optionsDiv || !optionsWrapper)
-            return;
-        this._destroyOptionsScrollbar();
-        optionsDiv.classList.add("ty-custom-scroll");
-        this._optionsScrollbar = new CustomScrollbar(optionsDiv, {
-            vertical: true,
-        });
-        if (this._optionsScrollbar.trackY) {
-            optionsWrapper.appendChild(this._optionsScrollbar.trackY);
-        }
-    }
-    _destroyOptionsScrollbar() {
-        if (this._optionsScrollbar) {
-            this._optionsScrollbar.trackY?.remove();
-            this._optionsScrollbar.destroy();
-            this._optionsScrollbar = null;
-        }
-    }
-    /**
-     * Open dropdown dialog (desktop mode)
-     *
-     * `<dialog>.showModal()` puts the dialog in the top layer with a backdrop, but
-     * does NOT prevent the page behind it from scrolling. We use the shared scroll
-     * lock utility (overflow:hidden on <html>) to keep wheel/touch scrolling from
-     * leaking through to the body — same behavior <ty-dropdown> and <ty-modal>
-     * implement.
-     */
-    openDropdown() {
-        const shadow = this.shadowRoot;
-        const dialog = shadow.querySelector(".dropdown-dialog");
-        if (!dialog)
-            return;
-        const stubEl = shadow.querySelector(".select-stub");
-        if (stubEl)
-            stubEl.setAttribute("aria-expanded", "true");
-        // Lock body scroll while dropdown is open
-        const lockId = `select-${this.id || "anon"}-${getElementHash(this)}`;
-        this._scrollLockId = lockId;
-        lockScroll(lockId);
-        // Show modal
-        dialog.showModal();
-        dialog.classList.add("open");
-        // Position dropdown AFTER showing modal
-        this.calculatePosition();
-        // Update component state
-        this._state.open = true;
-        // Update visual states
-        const chevron = shadow.querySelector(".dropdown-chevron");
-        if (chevron)
-            chevron.classList.add("open");
-        const searchChevron = shadow.querySelector(".dropdown-search-chevron");
-        if (searchChevron)
-            searchChevron.classList.add("open");
-        // Initialize options state
-        const tags = this.getTagElements().map((el) => this.getTagData(el));
-        this._state.filteredTags = tags;
-        this._state.highlightedIndex = -1;
-        // Ensure options area is visible (may have been hidden from previous search)
-        this.updateOptionsVisibility(true);
-        // Setup custom scrollbar on options
-        this._setupOptionsScrollbar();
-        // Focus search input (when the search row is shown)
-        const searchInput = shadow.querySelector(".dropdown-search-input");
-        if (searchInput && this.shouldShowSearch()) {
-            setTimeout(() => searchInput.focus(), 100);
-        }
-        // Lifecycle event (also fires empty search if external-search)
-        this.fireOpenEvent();
-    }
-    /**
-     * Close dropdown dialog (desktop mode)
-     */
-    closeDropdown() {
-        const shadow = this.shadowRoot;
-        const dialog = shadow.querySelector(".dropdown-dialog");
-        if (!dialog)
-            return;
-        const stubEl = shadow.querySelector(".select-stub");
-        if (stubEl)
-            stubEl.setAttribute("aria-expanded", "false");
-        // Destroy custom scrollbar
-        this._destroyOptionsScrollbar();
-        // Close dialog
-        dialog.classList.remove("open");
-        dialog.classList.remove("position-above");
-        dialog.classList.remove("position-below");
-        dialog.close();
-        // Unlock body scroll (paired with the lock in openDropdown)
-        if (this._scrollLockId) {
-            unlockScroll(this._scrollLockId);
-            this._scrollLockId = null;
-        }
-        // Update state
-        this._state.open = false;
-        this._state.highlightedIndex = -1;
-        // Update visual states
-        const chevron = shadow.querySelector(".dropdown-chevron");
-        if (chevron)
-            chevron.classList.remove("open");
-        const searchChevron = shadow.querySelector(".dropdown-search-chevron");
-        if (searchChevron)
-            searchChevron.classList.remove("open");
-        // Reset search and restore all tags
-        const hadQuery = this._state.search !== "";
-        this._state.search = "";
-        const searchInput = shadow.querySelector(".dropdown-search-input");
-        if (searchInput) {
-            searchInput.value = "";
-        }
-        if (this._externalSearch) {
-            // External mode — notify consumer so it can reset its own filtered state.
-            // Bypass the debounce timer (which would delay the clear by `debounce` ms);
-            // close-time should be immediate so the consumer's filtered state syncs
-            // before the dropdown reopens. Only fire if there was actually a query.
-            if (hadQuery) {
-                if (this._searchDebounceTimer !== null) {
-                    clearTimeout(this._searchDebounceTimer);
-                    this._searchDebounceTimer = null;
-                }
-                this.fireSearchEvent("");
-            }
-        }
-        else {
-            // Internal mode — restore visibility of all tags ourselves
-            const allTags = this.getTagElements().map((el) => this.getTagData(el));
-            this._state.filteredTags = allTags;
-            this.updateTagVisibility(allTags, allTags);
-            this.clearHighlights(allTags);
-        }
-        // Lifecycle event
-        this.fireCloseEvent();
-    }
-    /**
-     * Open mobile modal (mobile mode)
-     * Now using <dialog> element for native z-index management
-     */
-    openMobileModal() {
-        const shadow = this.shadowRoot;
-        const dialog = shadow.querySelector(".mobile-dialog");
-        if (!dialog)
-            return;
-        const stubEl = shadow.querySelector(".select-stub");
-        if (stubEl)
-            stubEl.setAttribute("aria-expanded", "true");
-        // Lock body scroll while mobile modal is open
-        const lockId = `select-${this.id || "anon"}-${getElementHash(this)}`;
-        this._scrollLockId = lockId;
-        lockScroll(lockId);
-        // Show dialog using native API (handles z-index automatically)
-        dialog.showModal();
-        dialog.classList.add("open");
-        // Update component state
-        this._state.open = true;
-        // Initialize options state. Also ensure nothing stays hidden from a
-        // previous search — mirrors openDropdown()'s updateOptionsVisibility(true)
-        // ("may have been hidden from previous search"), which openMobileModal()
-        // never had a mobile-appropriate equivalent for: desktop hides the whole
-        // options container (a single display:none toggle, harmless to reset
-        // unconditionally), mobile hides individual options via their `hidden`
-        // attribute (updateTagVisibility), so the reset has to happen here.
-        const tags = this.getTagElements().map((el) => this.getTagData(el));
-        this._state.filteredTags = tags;
-        this.updateTagVisibility(tags, tags);
-        // Focus the search input: the `autofocus` attribute on
-        // .mobile-search-input (see render template) handles this — showModal()
-        // itself runs the spec'd "dialog focusing steps" on every call, which
-        // look for an autofocus descendant and focus it natively, skipping it
-        // automatically if it's hidden (search disabled) in favor of the next
-        // focusable element. A manual searchInput.focus() call here, AFTER
-        // showModal() already ran its own focusing steps in the same task, was
-        // racing that native behavior — document.activeElement ended up back on
-        // the host element, not the input, which is why typing did nothing:
-        // keystrokes weren't reaching the search box at all despite it visually
-        // looking focused (cursor showing from the browser's own caret paint,
-        // not actual DOM focus).
-        // Update state after slots are ready
-        requestAnimationFrame(() => {
-            this.updateMobileSelectedState();
-        });
-        // Lifecycle event (also fires empty search if external-search)
-        this.fireOpenEvent();
-    }
-    /**
-     * Close mobile modal (mobile mode)
-     * Now using <dialog> element for native management
-     */
-    closeMobileModal() {
-        const shadow = this.shadowRoot;
-        const dialog = shadow.querySelector(".mobile-dialog");
-        if (!dialog)
-            return;
-        const stubEl = shadow.querySelector(".select-stub");
-        if (stubEl)
-            stubEl.setAttribute("aria-expanded", "false");
-        // Close immediately — ::backdrop doesn't support transitions
-        dialog.classList.remove("open");
-        dialog.close();
-        // Unlock body scroll (paired with the lock in openMobileModal)
-        if (this._scrollLockId) {
-            unlockScroll(this._scrollLockId);
-            this._scrollLockId = null;
-        }
-        // Update state
-        this._state.open = false;
-        this._state.highlightedIndex = -1;
-        // Reset search
-        const hadQuery = this._state.search !== "";
-        this._state.search = "";
-        const searchInput = shadow.querySelector(".mobile-search-input");
-        if (searchInput) {
-            searchInput.value = "";
-        }
-        if (this._externalSearch) {
-            // External mode — notify consumer that the search was cleared on close
-            // (bypass debounce, see desktop close path for rationale).
-            if (hadQuery) {
-                if (this._searchDebounceTimer !== null) {
-                    clearTimeout(this._searchDebounceTimer);
-                    this._searchDebounceTimer = null;
-                }
-                this.fireSearchEvent("");
-            }
-        }
-        else {
-            // Internal mode — unhide all tags ourselves
-            const allTags = this.getTagElements();
-            allTags.forEach((el) => el.removeAttribute("hidden"));
-        }
-        // Lifecycle event
-        this.fireCloseEvent();
-    }
-    // ============================================================================
-    // EVENT HANDLERS (Phase 5 & 6)
-    // ============================================================================
-    handleStubClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (this._disabled || this._readonly) {
-            return;
-        }
-        this.openDropdown();
-    }
-    /**
-     * .select-clear click — must stop propagation before it bubbles to the
-     * stub's own click handler (which would otherwise also open the dropdown).
-     */
-    handleClearClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (this._disabled || this._readonly) {
-            return;
-        }
-        this.clear();
-    }
-    /**
-     * Keyboard-open the (closed) stub. The stub is a plain div with
-     * tabindex="0", not a native <button> — Enter/Space don't turn into
-     * click events on their own the way they do for real form controls, and
-     * without this a keyboard-only user could Tab to the field but never
-     * open it. document-level handleKeyboard() only runs once already open
-     * (it early-returns on !this._state.open), so this is the other half.
-     */
-    handleStubKeydown(e) {
-        if (this._disabled || this._readonly || this._state.open)
-            return;
-        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
-            e.preventDefault();
-            this.openDropdown();
-        }
-    }
-    handleTagClick(e) {
-        const target = e.target;
-        // Find the option element (ty-option or ty-tag)
-        const tag = target.closest("ty-option, ty-tag");
-        if (!tag || tag.hasAttribute("disabled"))
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        this.selectByTag(tag);
-    }
-    /**
-     * Select/toggle a tag by element — the part of handleTagClick that has no
-     * dependency on a real DOM event, so keyboard/programmatic callers (Enter
-     * on a highlighted option, allow-create's exact-match dedup) can call it
-     * directly instead of faking an Event object just to satisfy
-     * preventDefault()/stopPropagation().
-     */
-    selectByTag(tag) {
-        const tagValue = this.getTagData(tag).value;
-        const currentValues = this.getSelectedValues();
-        // Single select: picking replaces the selection and closes the popup
-        // (native <select> semantics — re-picking the same option just closes)
-        if (!this._multiple) {
-            this.updateComponentValue([tagValue], true, "set", tagValue);
-            if (this._state.mode === "mobile") {
-                this.closeMobileModal();
-            }
-            else {
-                this.closeDropdown();
-            }
-            return;
-        }
-        // Multiple: toggle — clicking a selected option deselects it
-        if (tag.hasAttribute("selected")) {
-            const newValues = currentValues.filter((v) => v !== tagValue);
-            this.updateComponentValue(newValues, true, "remove", tagValue);
-        }
-        else {
-            this.updateComponentValue([...currentValues, tagValue], true, "add", tagValue);
-        }
-    }
-    /**
-     * allow-create: Enter with unmatched search text mints a new option.
-     * Returns true if it handled the key (created, or selected an existing
-     * exact match instead of duplicating) — false if there's nothing to do
-     * (blank query, or allow-create is off), so the caller's normal Enter
-     * handling (select highlighted, or no-op) proceeds.
-     */
-    tryCreateFromSearch() {
-        if (!this._allowCreate)
-            return false;
-        const query = (this._state.search || "").trim();
-        if (!query)
-            return false;
-        const queryLower = query.toLowerCase();
-        const allTags = this.getTagElements().map((el) => this.getTagData(el));
-        // Dedup: typed text exactly matches an existing option (by value or
-        // display text) — select it instead of minting a duplicate.
-        const existing = allTags.find((t) => t.value.toLowerCase() === queryLower ||
-            t.text.toLowerCase() === queryLower);
-        if (existing) {
-            this.selectByTag(existing.element);
-            return true;
-        }
-        const rawLabel = query;
-        const defaultValue = this._createTransform === "slug" ? slugify(rawLabel) : rawLabel;
-        if (!defaultValue)
-            return true; // slugified to nothing — handled no-op
-        const detail = { value: defaultValue, label: rawLabel };
-        const event = new CustomEvent("create", {
-            detail,
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-        });
-        this.dispatchEvent(event);
-        if (event.defaultPrevented)
-            return true; // consumer takes over entirely
-        const finalValue = detail.value;
-        const option = document.createElement("ty-option");
-        option.setAttribute("value", finalValue);
-        option.textContent = rawLabel;
-        this.appendChild(option);
-        if (!this._multiple) {
-            this.updateComponentValue([finalValue], true, "create", finalValue);
-            if (this._state.mode === "mobile") {
-                this.closeMobileModal();
-            }
-            else {
-                this.closeDropdown();
-            }
-            return true;
-        }
-        const currentValues = this.getSelectedValues();
-        this.updateComponentValue([...currentValues, finalValue], true, "create", finalValue);
-        this.clearSearchAfterCreate();
-        return true;
-    }
-    /**
-     * Multiple + allow-create: clear the search box and re-show the full
-     * (now-longer) option list so the next tag can be typed immediately —
-     * the tags-input pattern.
-     */
-    clearSearchAfterCreate() {
-        this._state.search = "";
-        this._state.highlightedIndex = -1;
-        const shadow = this.shadowRoot;
-        if (!shadow)
-            return;
-        const desktopInput = shadow.querySelector(".dropdown-search-input");
-        const mobileInput = shadow.querySelector(".mobile-search-input");
-        if (desktopInput)
-            desktopInput.value = "";
-        if (mobileInput)
-            mobileInput.value = "";
-        const allTags = this.getTagElements().map((el) => this.getTagData(el));
-        this._state.filteredTags = allTags;
-        this.updateTagVisibility(allTags, allTags);
-        this.updateOptionsVisibility(true);
-        this.clearHighlights(allTags);
-        this.updateMobileSelectedState();
-        (desktopInput ?? mobileInput)?.focus();
-    }
-    blockSearchClick(e) {
-        e.stopPropagation();
-        e.preventDefault();
-    }
-    handleSearchInput(e) {
-        const target = e.target;
-        const query = target.value;
-        // Update search state
-        this._state.search = query;
-        if (this._externalSearch) {
-            // External (remote) search: parent owns filtering — delegate via event.
-            // Tag visibility is left untouched; consumer is expected to update children.
-            this.dispatchSearchEvent(query);
-            return;
-        }
-        // Internal search: filter ALL options locally — selected ones stay visible
-        // (with selected styling) so they can be toggled off while searching
-        const allTags = this.getTagElements().map((el) => this.getTagData(el));
-        const filtered = this.filterTags(allTags, query);
-        // Update state
-        this._state.filteredTags = filtered;
-        this._state.highlightedIndex = -1;
-        // Update visibility
-        this.updateTagVisibility(filtered, allTags);
-        // Hide options area if no results (desktop)
-        this.updateOptionsVisibility(filtered.length > 0);
-        // Refresh mobile count + empty-state to reflect filtered visibility
-        this.updateMobileSelectedState();
-        // Clear highlights
-        this.clearHighlights(allTags);
-    }
-    handleKeyboard(e) {
-        if (!this._state.open)
-            return;
-        const shadow = this.shadowRoot;
-        const searchInput = shadow.querySelector(".dropdown-search-input");
-        const target = e.target;
-        // Only handle navigation keys when dropdown is open and either:
-        // 1. Event comes from search input, OR
-        // 2. Event comes from document but search input is not focused
-        const shouldHandle = target === searchInput || document.activeElement !== searchInput;
-        if (!shouldHandle)
-            return;
-        // Get current state values
-        const filteredTags = this._state.filteredTags;
-        const tagsCount = filteredTags.length;
-        const currentHighlightedIndex = this._state.highlightedIndex;
-        switch (e.key) {
-            case "Escape":
-                e.preventDefault();
-                e.stopPropagation();
-                this.closeDropdown();
-                break;
-            case "Enter":
-                e.preventDefault();
-                e.stopPropagation();
-                // A highlighted (arrowed-to) option always wins — the user picked
-                // it explicitly, so allow-create must not shadow it with a new one.
-                if (currentHighlightedIndex >= 0 &&
-                    currentHighlightedIndex < tagsCount) {
-                    this.selectByTag(filteredTags[currentHighlightedIndex].element);
-                }
-                else {
-                    this.tryCreateFromSearch();
-                }
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                e.stopPropagation();
-                let newIndexUp;
-                if (tagsCount === 0) {
-                    newIndexUp = -1;
-                }
-                else if (currentHighlightedIndex === -1) {
-                    // Nothing highlighted, go to last tag
-                    newIndexUp = tagsCount - 1;
-                }
-                else if (currentHighlightedIndex === 0) {
-                    // At first tag, wrap to last
-                    newIndexUp = tagsCount - 1;
-                }
-                else {
-                    // Move up one
-                    newIndexUp = currentHighlightedIndex - 1;
-                }
-                this._state.highlightedIndex = newIndexUp;
-                this.highlightTag(filteredTags, newIndexUp);
-                break;
-            case "ArrowDown":
-                e.preventDefault();
-                e.stopPropagation();
-                let newIndexDown;
-                if (tagsCount === 0) {
-                    newIndexDown = -1;
-                }
-                else if (currentHighlightedIndex === -1) {
-                    // Nothing highlighted, go to first tag
-                    newIndexDown = 0;
-                }
-                else if (currentHighlightedIndex === tagsCount - 1) {
-                    // At last tag, wrap to first
-                    newIndexDown = 0;
-                }
-                else {
-                    // Move down one
-                    newIndexDown = currentHighlightedIndex + 1;
-                }
-                this._state.highlightedIndex = newIndexDown;
-                this.highlightTag(filteredTags, newIndexDown);
-                break;
-        }
-    }
-    // ============================================================================
-    // SEARCH & FILTERING HELPERS (Phase 6)
-    // ============================================================================
-    /**
-     * Filter tags based on search query
-     */
-    filterTags(tags, query) {
-        if (!query || query.trim() === "") {
-            return tags;
-        }
-        const searchLower = query.toLowerCase();
-        return tags.filter(({ text }) => text.toLowerCase().includes(searchLower));
-    }
-    /**
-     * Update visibility of tags based on filtered list
-     */
-    updateTagVisibility(filteredTags, allTags) {
-        const visibleValues = new Set(filteredTags.map((tag) => tag.value));
-        allTags.forEach(({ value, element }) => {
-            if (visibleValues.has(value)) {
-                element.removeAttribute("hidden");
-            }
-            else {
-                element.setAttribute("hidden", "");
-            }
-        });
-    }
-    /**
-     * Show/hide the dropdown options area
-     */
-    updateOptionsVisibility(hasOptions) {
-        const shadow = this.shadowRoot;
-        const options = shadow.querySelector(".dropdown-options");
-        if (options) {
-            options.style.display = hasOptions ? "" : "none";
-        }
-    }
-    /**
-     * Clear all tag highlights
-     */
-    clearHighlights(tags) {
-        tags.forEach(({ element }) => {
-            element.removeAttribute("highlighted");
-        });
-    }
-    /**
-     * Highlight tag at specific index
-     */
-    highlightTag(tags, index) {
-        this.clearHighlights(tags);
-        if (index >= 0 && index < tags.length) {
-            const { element } = tags[index];
-            element.setAttribute("highlighted", "");
-            // Scroll into view
-            element.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-                inline: "nearest",
-            });
-        }
-    }
-    /**
-     * Dispatch search event for external search handling
-     * With optional debounce support
-     */
-    dispatchSearchEvent(query) {
-        // Clear existing timer
-        if (this._searchDebounceTimer !== null) {
-            clearTimeout(this._searchDebounceTimer);
-            this._searchDebounceTimer = null;
-        }
-        // If debounce is set, debounce the event
-        if (this._debounce > 0) {
-            this._searchDebounceTimer = window.setTimeout(() => {
-                this.fireSearchEvent(query);
-                this._searchDebounceTimer = null;
-            }, this._debounce);
-        }
-        else {
-            // Fire immediately if no debounce
-            this.fireSearchEvent(query);
-        }
-    }
-    /**
-     * Fire the actual search event
-     */
-    fireSearchEvent(query) {
-        this.dispatchEvent(new CustomEvent("search", {
-            detail: {
-                query,
-                element: this,
-            },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    /**
-     * Dispatch lifecycle events for popup open/close.
-     * On open with external-search, also fire a `search` event with an empty
-     * query so consumers have a clean hook to reset/refetch the option list.
-     */
-    fireOpenEvent() {
-        this.dispatchEvent(new CustomEvent("open", {
-            detail: { mode: this._state.mode, element: this },
-            bubbles: true,
-            composed: true,
-        }));
-        if (this._externalSearch) {
-            this.fireSearchEvent("");
-        }
-    }
-    fireCloseEvent() {
-        this.dispatchEvent(new CustomEvent("close", {
-            detail: { mode: this._state.mode, element: this },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    // ============================================================================
-    // CHANGE EVENT DISPATCHING (Phase 5)
-    // ============================================================================
-    /**
-     * Dispatch custom change event
-     */
-    dispatchChangeEvent(detail) {
-        this.dispatchEvent(new CustomEvent("change", {
-            detail,
-            bubbles: true,
-            cancelable: true,
-        }));
-    }
-    // ============================================================================
-    // RENDERING
-    // ============================================================================
-    /**
-     * Main render method (required by TyComponent)
-     * Delegates to mode-specific renderer
-     */
-    render() {
-        // Sync mode on every render so rotation/resize is picked up
-        this._state.mode = isMobileTouch() ? "mobile" : "desktop";
-        if (this._state.mode === "mobile") {
-            this.renderMobile();
-        }
-        else {
-            this.renderDesktop();
-        }
-        this.updateSearchVisibility();
-        // Loading wrapper is rendered dynamically — re-apply each render
-        this.applyLoadingState();
-        // Reflect constraint validation (required) to the owning <form>.
-        this.updateValidity();
-    }
-    /**
-     * Reflect constraint validation to the owning <form> via ElementInternals.
-     * Without this `required` is only cosmetic — form.checkValidity() (and a
-     * real submit) never actually blocks on an empty required select. Mirrors
-     * ty-input's updateValidity(): empty + required => valueMissing; disabled
-     * fields are barred from constraint validation.
-     */
-    updateValidity() {
-        if (this.disabled) {
-            this._internals.setValidity({});
-            return;
-        }
-        if (this.required && this.getSelectedValues().length === 0) {
-            const stub = this.shadowRoot?.querySelector(".select-stub");
-            this._internals.setValidity({ valueMissing: true }, "Please select a value", stub ?? undefined);
-        }
-        else {
-            this._internals.setValidity({});
-        }
-    }
-    /**
-     * When a consumer slots their own trigger (slot="trigger"), strip the
-     * default field chrome so the trigger is styled entirely by the consumer.
-     */
-    setupTriggerSlot() {
-        const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".select-stub");
-        const slot = shadow.querySelector('slot[name="trigger"]');
-        if (!stub || !slot)
-            return;
-        const sync = () => stub.classList.toggle("custom-trigger", slot.assignedElements().length > 0);
-        slot.addEventListener("slotchange", sync);
-        sync();
-    }
-    /**
-     * Setup event listeners
-     */
-    setupEventListeners() {
-        const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".select-stub");
-        const optionsSlot = shadow.querySelector("#options-slot");
-        const searchInput = shadow.querySelector(".dropdown-search-input");
-        if (stub) {
-            this._stubClickHandler = this.handleStubClick.bind(this);
-            stub.addEventListener("click", this._stubClickHandler);
-            stub.addEventListener("keydown", this.handleStubKeydown.bind(this));
-        }
-        const clearBtn = shadow.querySelector(".select-clear");
-        clearBtn?.addEventListener("click", this.handleClearClick.bind(this));
-        this.setupTriggerSlot();
-        // Add tag click handler to slot
-        if (optionsSlot) {
-            this._tagClickHandler = this.handleTagClick.bind(this);
-            optionsSlot.addEventListener("click", this._tagClickHandler);
-        }
-        // Add search input handlers
-        if (searchInput) {
-            this._searchInputHandler = this.handleSearchInput.bind(this);
-            this._blockSearchClick = this.blockSearchClick.bind(this);
-            searchInput.addEventListener("input", this._searchInputHandler);
-            searchInput.addEventListener("click", this._blockSearchClick);
-            // searchInput.addEventListener('blur', this._searchBlurHandler)
-        }
-        // Setup dialog backdrop click handler
-        const dialog = shadow.querySelector(".dropdown-dialog");
-        if (dialog) {
-            dialog.addEventListener("click", (e) => {
-                // Only close if clicking directly on the dialog (backdrop), not its children
-                if (e.target === dialog) {
-                    this.closeDropdown();
-                }
-            });
-        }
-        // Setup keyboard handler
-        this._keyboardHandler = this.handleKeyboard.bind(this);
-        document.addEventListener("keydown", this._keyboardHandler);
-    }
-    /**
-     * Build CSS class list for stub
-     */
-    buildStubClasses() {
-        const classes = [this._size];
-        if (this._disabled)
-            classes.push("disabled");
-        if (this._compact)
-            classes.push("compact");
-        return classes.join(" ");
-    }
-    /**
-     * Render desktop mode with dialog
-     */
-    renderDesktop() {
-        const shadow = this.shadowRoot;
-        // Only set innerHTML and setup listeners if container doesn't exist
-        if (!shadow.querySelector(".select-container")) {
-            const stubClasses = this.buildStubClasses();
-            const listboxId = `select-listbox-${getElementHash(this)}`;
-            const labelId = `select-label-${getElementHash(this)}`;
-            const labelHtml = this._label
-                ? `
-        <label class="ty-field-label" id="${labelId}">
-          ${this._label}
-          ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}
-        </label>
-      `
-                : "";
-            const searchPlaceholder = "Search...";
-            shadow.innerHTML = `
-        <div class="select-container dropdown-mode-desktop">
-          ${labelHtml}
-          <div class="dropdown-wrapper">
-            <div class="dropdown-stub select-stub ${stubClasses}"
-                 role="combobox"
-                 aria-haspopup="listbox"
-                 aria-expanded="false"
-                 aria-controls="${listboxId}"
-                 ${this._label ? `aria-labelledby="${labelId}"` : ""}
-                 tabindex="${this._disabled ? "-1" : "0"}"
-                 ${this._disabled ? 'disabled aria-disabled="true"' : ""}>
-              <slot name="trigger">
-                <slot name="start"></slot>
-                <slot name="selected"></slot>
-                <span class="dropdown-placeholder">${this._placeholder}</span>
-                <span class="select-count" hidden></span>
-                <slot name="end"></slot>
-                <button class="select-clear" type="button" aria-label="Clear selection" hidden>
-                  ${CLEAR_ICON_SVG}
-                </button>
-                <div class="dropdown-chevron">
-                  ${CHEVRON_DOWN_SVG}
-                </div>
-              </slot>
-            </div>
-            <dialog class="dropdown-dialog">
-              <div class="dropdown-header">
-                <div class="dropdown-search-icon" aria-hidden="true">
-                  ${SEARCH_ICON_SVG}
-                </div>
-                <input
-                  class="dropdown-search-input ${this._size}"
-                  type="text"
-                  placeholder="${searchPlaceholder}"
-                  ${this._disabled ? "disabled" : ""}
-                />
-                <div class="dropdown-search-chevron">
-                  ${CHEVRON_DOWN_SVG}
-                </div>
-              </div>
-              <div class="dropdown-options-wrapper">
-                <div class="dropdown-options" id="${listboxId}" role="listbox" ${this._multiple ? 'aria-multiselectable="true"' : ""}>
-                  <slot id="options-slot"></slot>
-                </div>
-                <div class="dropdown-loading" aria-hidden="true">
-                  <slot name="loading">
-                    <span class="dropdown-loading-spinner"></span>
-                    <span class="dropdown-loading-text">Searching…</span>
-                  </slot>
-                </div>
-              </div>
-            </dialog>
-          </div>
-        </div>
-      `;
-            // Setup event listeners ONCE
-            this.setupEventListeners();
-            // Don't initialize here - will be done in connectedCallback
-            // after properties are set and children are available
-        }
-        // Always update placeholder visibility on re-render
-        this.updateSelectionDisplay();
-    }
-    /**
-     * Render mobile mode with full-screen modal
-     * Following dropdown.ts mobile structure
-     */
-    renderMobile() {
-        const shadow = this.shadowRoot;
-        // Only set innerHTML and setup listeners if container doesn't exist
-        if (!shadow.querySelector(".select-container")) {
-            const stubClasses = this.buildStubClasses();
-            const listboxId = `select-listbox-${getElementHash(this)}`;
-            const labelId = `select-label-${getElementHash(this)}`;
-            const labelHtml = this._label
-                ? `
-        <label class="ty-field-label" id="${labelId}">
-          ${this._label}
-          ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}
-        </label>
-      `
-                : "";
-            // Close button SVG (X icon)
-            const closeButtonSvg = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <line x1="18" y1="6" x2="6" y2="18"></line>
-        <line x1="6" y1="6" x2="18" y2="18"></line>
-      </svg>`;
-            // Search placeholder: "Search <label>..." or just "Search..."
-            const searchPlaceholder = this._label
-                ? `Search ${this._label}...`
-                : "Search...";
-            // Search is always available — only the mode (internal vs external) varies.
-            const searchHeaderHtml = `
-        <div class="mobile-search-header">
-          ${this._label ? `<span class="mobile-header-label">${this._label}</span>` : ""}
-          <div class="mobile-header-content">
-            <div class="dropdown-search-icon" aria-hidden="true">
-              ${SEARCH_ICON_SVG}
-            </div>
-            <input
-              class="mobile-search-input ${this._size}"
-              type="text"
-              placeholder="${searchPlaceholder}"
-              autofocus
-              ${this._disabled ? "disabled" : ""}
-            />
-            <button class="mobile-close-button" type="button" aria-label="Close">
-              ${closeButtonSvg}
-            </button>
-          </div>
-        </div>
-      `;
-            shadow.innerHTML = `
-        <div class="select-container dropdown-mode-mobile">
-          ${labelHtml}
-          <div class="dropdown-wrapper">
-            <div class="dropdown-stub select-stub ${stubClasses}"
-                 role="combobox"
-                 aria-haspopup="listbox"
-                 aria-expanded="false"
-                 aria-controls="${listboxId}"
-                 ${this._label ? `aria-labelledby="${labelId}"` : ""}
-                 tabindex="${this._disabled ? "-1" : "0"}"
-                 ${this._disabled ? 'disabled aria-disabled="true"' : ""}>
-              <slot name="trigger">
-                <slot name="start"></slot>
-                <slot name="selected"></slot>
-                <span class="dropdown-placeholder">${this._placeholder}</span>
-                <span class="select-count" hidden></span>
-                <slot name="end"></slot>
-                <button class="select-clear" type="button" aria-label="Clear selection" hidden>
-                  ${CLEAR_ICON_SVG}
-                </button>
-                <div class="dropdown-chevron">
-                  ${CHEVRON_DOWN_SVG}
-                </div>
-              </slot>
-            </div>
-
-            <dialog class="mobile-dialog">
-              <div class="mobile-dialog-content">
-
-                <!-- HEADER (matches dropdown.ts) -->
-                ${searchHeaderHtml}
-
-                <!-- BODY: options list with toggleable selected state -->
-                <div class="mobile-body">
-
-                  <!-- AVAILABLE LIST (always visible, takes remaining space) -->
-                  <div class="mobile-available-section" data-empty="false">
-                    <div class="section-header">
-                      <span class="section-title">${this._availableLabel}</span>
-                    </div>
-                    <div class="section-content dropdown-options-wrapper" id="${listboxId}" role="listbox" ${this._multiple ? 'aria-multiselectable="true"' : ""}>
-                      <slot id="options-slot"></slot>
-                      <div class="empty-state">${this._noOptionsMessage}</div>
-                      <div class="dropdown-loading" aria-hidden="true">
-                        <slot name="loading">
-                          <span class="dropdown-loading-spinner"></span>
-                          <span class="dropdown-loading-text">Searching…</span>
-                        </slot>
-                      </div>
-                    </div>
-                  </div>
-
-                </div>
-              </div>
-            </dialog>
-          </div>
-        </div>
-      `;
-            // Setup event listeners ONCE
-            this.setupMobileEventListeners();
-        }
-        // Always update placeholder visibility
-        this.updateSelectionDisplay();
-    }
-    /**
-     * Setup event listeners for mobile mode
-     * Using <dialog> element - backdrop clicks handled natively
-     */
-    setupMobileEventListeners() {
-        const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".select-stub");
-        const optionsSlot = shadow.querySelector("#options-slot");
-        const searchInput = shadow.querySelector(".mobile-search-input");
-        const closeButton = shadow.querySelector(".mobile-close-button");
-        const dialog = shadow.querySelector(".mobile-dialog");
-        if (stub) {
-            stub.addEventListener("click", (e) => this.handleMobileStubClick(e));
-            stub.addEventListener("keydown", (e) => this.handleMobileStubKeydown(e));
-        }
-        const clearBtn = shadow.querySelector(".select-clear");
-        clearBtn?.addEventListener("click", this.handleClearClick.bind(this));
-        this.setupTriggerSlot();
-        // Add tag click handler to slot
-        if (optionsSlot) {
-            optionsSlot.addEventListener("click", (e) => this.handleMobileTagClick(e));
-        }
-        // Add search input handlers (if searchable)
-        if (searchInput) {
-            searchInput.addEventListener("input", (e) => this.handleSearchInput(e));
-        }
-        // Close button click
-        if (closeButton) {
-            closeButton.addEventListener("click", () => this.closeMobileModal());
-        }
-        // Backdrop click to close (native dialog behavior)
-        if (dialog) {
-            dialog.addEventListener("click", (e) => {
-                // Only close if clicking directly on the dialog element (backdrop)
-                // Not if clicking on its children (dialog-content)
-                if (e.target === dialog) {
-                    this.closeMobileModal();
-                }
-            });
-            // Also handle Escape key via cancel event
-            dialog.addEventListener("cancel", (e) => {
-                e.preventDefault(); // Prevent default to handle it our way
-                this.closeMobileModal();
-            });
-        }
-    }
-    /**
-     * Handle mobile stub click - open modal
-     */
-    handleMobileStubClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (this._disabled || this._readonly) {
-            return;
-        }
-        this.openMobileModal();
-    }
-    /** Keyboard-open the (closed) mobile stub — see handleStubKeydown for why this is needed. */
-    handleMobileStubKeydown(e) {
-        if (this._disabled || this._readonly || this._state.open)
-            return;
-        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
-            e.preventDefault();
-            this.openMobileModal();
-        }
-    }
-    /**
-     * Handle mobile tag click - select and potentially close
-     */
-    handleMobileTagClick(e) {
-        // Use the same tag click handler as desktop
-        // It already handles mobile mode for auto-close
-        this.handleTagClick(e);
-    }
-    /**
-     * Update mobile options section state (count, empty state)
-     */
-    updateMobileSelectedState() {
-        if (this._state.mode !== "mobile")
-            return;
-        const shadow = this.shadowRoot;
-        const availableSection = shadow.querySelector(".mobile-available-section");
-        if (availableSection) {
-            // Count *visible* options — options hidden by search filtering count as 0
-            const visibleAvailable = this.getTagElements().filter((tag) => !tag.hasAttribute("hidden")).length;
-            availableSection.setAttribute("data-empty", String(visibleAvailable === 0));
-            // Update available header count
-            const availableTitleSpan = shadow.querySelector(".mobile-available-section .section-title");
-            if (availableTitleSpan) {
-                availableTitleSpan.textContent = `${this._availableLabel} (${visibleAvailable})`;
-            }
-        }
-    }
-    /**
-     * Update selection display: count badge next to the placeholder
-     */
-    /**
-     * Should the popup show a search row? external-search always (the input is
-     * the mechanism); searchable always/never wins otherwise; 'auto' shows it
-     * only when the option list is long enough to need filtering.
-     */
-    shouldShowSearch() {
-        if (this._externalSearch)
-            return true;
-        // allow-create's only input mechanism IS the search box.
-        if (this._allowCreate)
-            return true;
-        if (this._searchable === "always")
-            return true;
-        if (this._searchable === "never")
-            return false;
-        return this.getTagElements().length > SEARCH_AUTO_THRESHOLD;
-    }
-    /**
-     * Toggle the search row (desktop header / mobile input) per shouldShowSearch.
-     */
-    updateSearchVisibility() {
-        const shadow = this.shadowRoot;
-        if (!shadow)
-            return;
-        const show = this.shouldShowSearch();
-        const header = shadow.querySelector(".dropdown-header");
-        if (header)
-            header.hidden = !show;
-        // Mobile keeps its header (label + close button); only the input+icon hide
-        const mobileInput = shadow.querySelector(".mobile-search-input");
-        if (mobileInput)
-            mobileInput.hidden = !show;
-        const mobileIcon = shadow.querySelector(".mobile-header-content .dropdown-search-icon");
-        if (mobileIcon)
-            mobileIcon.hidden = !show;
-    }
-    /**
-     * Selection summary appropriate to cardinality × skin:
-     * - single (field or compact): the selected OPTION itself — cloned into
-     *   slot="selected" so rich HTML options display intact (dropdown parity);
-     *   placeholder when empty
-     * - multiple + field: joined labels (ellipsis via CSS), or placeholder
-     * - multiple + compact: placeholder + count badge
-     */
-    updateSelectionDisplay() {
-        const shadow = this.shadowRoot;
-        const stub = shadow.querySelector(".select-stub");
-        if (!stub)
-            return;
-        // Selection comes from STATE, not from scanning option elements —
-        // external search replaces the option children, and the selection must
-        // survive even when the current results don't include the selected value.
-        const values = this._state.selectedValues;
-        const count = values.length;
-        stub.classList.toggle("has-selection", count > 0);
-        stub.classList.toggle("compact", this._compact);
-        const badge = stub.querySelector(".select-count");
-        if (badge) {
-            badge.textContent = String(count);
-            badge.hidden = count === 0 || !this._multiple || !this._compact;
-        }
-        const clearBtn = stub.querySelector(".select-clear");
-        if (clearBtn) {
-            clearBtn.hidden = !(count > 0 && this._clearable && !this._disabled && !this._readonly);
-        }
-        // Single select: project the selected option into the stub as a clone
-        // (rich HTML content survives — same mechanism as ty-dropdown).
-        const wantClone = !this._multiple && count > 0 ? values[0] : null;
-        this.syncSelectedClone(wantClone);
-        stub.classList.toggle("has-clone", wantClone !== null);
-        const textEl = stub.querySelector(".dropdown-placeholder");
-        if (textEl) {
-            // The clone replaces the text display entirely in single mode
-            textEl.hidden = wantClone !== null;
-            const showLabels = count > 0 && this._multiple && !this._compact;
-            if (showLabels) {
-                textEl.textContent = this.getSelectedItems(values)
-                    .map((i) => i.label)
-                    .join(", ");
-                textEl.classList.remove("placeholder-shown");
-            }
-            else {
-                textEl.textContent = this._placeholder;
-                textEl.classList.add("placeholder-shown");
-            }
-        }
-    }
-    /**
-     * Keep exactly one display clone (slot="selected", marked `cloned`) in our
-     * light DOM matching the given value — or none. The clone never counts as
-     * an option (getTagElements filters [cloned]) and ty-option's own
-     * :host([cloned]) styling strips its list-row chrome.
-     */
-    syncSelectedClone(value) {
-        const existing = this.querySelector(':scope > [cloned][slot="selected"]');
-        if (existing?.getAttribute("value") === value) {
-            this._selectedClone = existing;
-            return; // already right
-        }
-        existing?.remove();
-        if (value === null) {
-            this._selectedClone = null;
-            return;
-        }
-        const option = this.getTagElements().find((el) => this.getTagData(el).value === value);
-        if (option) {
-            const clone = option.cloneNode(true);
-            clone.removeAttribute("selected"); // no tick/selected styling in the stub
-            clone.setAttribute("slot", "selected");
-            clone.setAttribute("cloned", "true");
-            this.appendChild(clone);
-            this._selectedClone = clone;
-        }
-        else if (this._selectedClone?.getAttribute("value") === value) {
-            // The option list no longer contains the selection (external search
-            // swapped the children — possibly wiping our clone with them). Restore
-            // the saved display clone so the selection stays visible.
-            const restored = this._selectedClone.cloneNode(true);
-            this.appendChild(restored);
-            this._selectedClone = restored;
-        }
-    }
-    // ============================================================================
-    // PUBLIC API - Getters/Setters
-    // ============================================================================
-    /**
-     * Deselect a value programmatically WITH a change event.
-     * Used by out-of-band chip displays (ty-selected-options) so dismissing a chip
-     * fires change like any in-popup interaction (HTMX hx-trigger="change" etc.).
-     */
-    deselectValue(value) {
-        const current = this.getSelectedValues();
-        if (!current.includes(value))
-            return;
-        this.updateComponentValue(current.filter((v) => v !== value), true, "remove", value);
-    }
-    /**
-     * Clear the entire selection programmatically WITH a change event
-     * (action: 'clear'). No-op if nothing is selected. Exists so slot="trigger"
-     * consumers (custom chrome, built-in clear UI hidden by design) can wire
-     * their own clear icon's click handler to it.
-     */
-    clear() {
-        this.updateComponentValue([], true, "clear", null);
-    }
-    get value() {
-        // Always read from DOM - tags with 'selected' attribute are source of truth
-        return this.getSelectedValues().join(",");
-    }
-    set value(val) {
-        this.setProperty("value", val);
-    }
-    get name() {
-        return this.getProperty("name");
-    }
-    set name(val) {
-        this.setProperty("name", val);
-    }
-    get multiple() {
-        return this.getProperty("multiple");
-    }
-    set multiple(value) {
-        this.setProperty("multiple", value);
-    }
-    get compact() {
-        return this.getProperty("compact");
-    }
-    set compact(value) {
-        this.setProperty("compact", value);
-    }
-    get placeholder() {
-        return this.getProperty("placeholder");
-    }
-    set placeholder(val) {
-        this.setProperty("placeholder", val);
-    }
-    get label() {
-        return this.getProperty("label");
-    }
-    set label(val) {
-        this.setProperty("label", val);
-    }
-    get disabled() {
-        return this.getProperty("disabled");
-    }
-    set disabled(value) {
-        this.setProperty("disabled", value);
-    }
-    get loading() {
-        return this.getProperty("loading");
-    }
-    set loading(value) {
-        this.setProperty("loading", value);
-    }
-    get readonly() {
-        return this.getProperty("readonly");
-    }
-    set readonly(value) {
-        this.setProperty("readonly", value);
-    }
-    get clearable() {
-        return this.getProperty("clearable");
-    }
-    set clearable(value) {
-        this.setProperty("clearable", value);
-    }
-    get required() {
-        return this.getProperty("required");
-    }
-    set required(value) {
-        this.setProperty("required", value);
-    }
-    get searchable() {
-        return this.getProperty("searchable");
-    }
-    set searchable(value) {
-        this.setProperty("searchable", value);
-    }
-    get externalSearch() {
-        return this.getProperty("externalSearch");
-    }
-    set externalSearch(value) {
-        this.setProperty("externalSearch", value);
-    }
-    get debounce() {
-        return this.getProperty("debounce");
-    }
-    set debounce(value) {
-        const numValue = typeof value === "string" ? parseInt(value, 10) : value;
-        this.setProperty("debounce", numValue);
-    }
-    get size() {
-        return this.getProperty("size");
-    }
-    set size(value) {
-        this.setProperty("size", value);
-    }
-    get align() {
-        return this.getProperty("align");
-    }
-    set align(value) {
-        this.setProperty("align", value);
-    }
-    get flavor() {
-        return this.getProperty("flavor");
-    }
-    set flavor(value) {
-        this.setProperty("flavor", value);
-    }
-    get form() {
-        return this._internals.form;
-    }
-}
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
+constructor() {
+super();
+this._name = "";
+this._multiple = false;
+this._compact = false;
+this._placeholder = "Select...";
+this._label = "";
+this._disabled = false;
+this._readonly = false;
+this._required = false;
+this._clearable = true;
+this._externalSearch = false;
+this._allowCreate = false;
+this._createTransform = "none";
+this._notSearchable = false;
+this._loading = false;
+this._scrollLockId = null;
+this._size = DEFAULT_SIZE;
+this._availableLabel = "Available";
+this._selectedLabel = "Selected";
+this._noOptionsMessage = "No options available";
+this._state = {
+open: false,
+search: "",
+highlightedIndex: -1,
+filteredTags: [],
+selectedValues: [],
+mode: "desktop",
+};
+this._stubClickHandler = null;
+this._tagClickHandler = null;
+this._searchInputHandler = null;
+this._blockSearchClick = null;
+this._keyboardHandler = null;
+this._debounce = 0;
+this._searchDebounceTimer = null;
+this._optionsScrollbar = null;
+this._childObserver = null;
+this._selectedClone = null;
+this._customFlavorSheet = null;
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: selectBaseStyles, id: "ty-select-base" });
+ensureStyles(shadow, { css: selectStyles, id: "ty-select" });
+}
+onConnect() {
+const shadow = this.shadowRoot;
+const dialogs = shadow.querySelectorAll("dialog");
+dialogs.forEach((dialog) => {
+if (dialog.open) {
+console.warn("⚠️ Found open dialog on connect, closing it");
+dialog.close();
+}
+});
+this.render();
+this.initializeState();
+this._childObserver = new MutationObserver(() => {
+this.ensureOptionRoles();
+if (this._state.selectedValues.length > 0) {
+this.syncSelectedTags(this._state.selectedValues);
+}
+this.updateSearchVisibility();
+this.updateSelectionDisplay();
+this.updateMobileSelectedState();
+});
+this._childObserver.observe(this, { childList: true });
+this.ensureOptionRoles();
+this._syncCustomFlavor();
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getProperty("flavor"), ({ base }) => selectCustomFlavorCss(base));
+}
+onDisconnect() {
+const shadow = this.shadowRoot;
+const dialogs = shadow.querySelectorAll("dialog");
+dialogs.forEach((dialog) => {
+if (dialog.open) {
+dialog.close();
+}
+});
+if (this._keyboardHandler) {
+document.removeEventListener("keydown", this._keyboardHandler);
+this._keyboardHandler = null;
+}
+if (this._searchDebounceTimer !== null) {
+clearTimeout(this._searchDebounceTimer);
+this._searchDebounceTimer = null;
+}
+this._destroyOptionsScrollbar();
+if (this._childObserver) {
+this._childObserver.disconnect();
+this._childObserver = null;
+}
+}
+onPropertiesChanged(changes) {
+for (const { name, newValue } of changes) {
+switch (name) {
+case "value":
+const selectedValues = this.parseValue(newValue);
+this._state.selectedValues = selectedValues;
+if (this.isConnected && this.shadowRoot) {
+this.syncSelectedTags(selectedValues);
+this.updateSelectionDisplay();
+this.updateMobileSelectedState();
+}
+break;
+case "name":
+this._name = newValue || "";
+break;
+case "flavor":
+this._syncCustomFlavor();
+break;
+case "multiple":
+this._multiple = newValue;
+if (!newValue && this._state.selectedValues.length > 1) {
+this.updateComponentValue([this._state.selectedValues[0]], false, "set", null);
+}
+break;
+case "compact":
+this._compact = newValue;
+break;
+case "placeholder":
+this._placeholder = newValue || "Select...";
+if (this.isConnected && this.shadowRoot)
+this.updateSelectionDisplay();
+break;
+case "label":
+this._label = newValue || "";
+break;
+case "disabled":
+this._disabled = newValue;
+break;
+case "readonly":
+this._readonly = newValue;
+break;
+case "required":
+this._required = newValue;
+break;
+case "clearable":
+this._clearable = newValue;
+if (this.isConnected && this.shadowRoot)
+this.updateSelectionDisplay();
+break;
+case "externalSearch":
+this._externalSearch = newValue;
+break;
+case "notSearchable":
+this._notSearchable = newValue;
+if (this.isConnected && this.shadowRoot)
+this.updateSearchVisibility();
+break;
+case "allowCreate":
+this._allowCreate = newValue;
+if (this.isConnected && this.shadowRoot)
+this.updateSearchVisibility();
+break;
+case "createTransform":
+this._createTransform = newValue;
+break;
+case "size":
+this._size = newValue;
+break;
+case "debounce":
+this._debounce = newValue;
+break;
+case "available-label":
+this._availableLabel = newValue || "Available";
+break;
+case "selected-label":
+this._selectedLabel = newValue || "Selected";
+break;
+case "no-options-message":
+this._noOptionsMessage = newValue || "No options available";
+break;
+case "loading":
+this._loading = newValue;
+this.applyLoadingState();
+break;
+}
+}
+}
+applyLoadingState() {
+const shadow = this.shadowRoot;
+if (!shadow)
+return;
+const svg = this._loading ? getLoaderSvg() : null;
+shadow.querySelectorAll(".dropdown-options-wrapper").forEach((wrapper) => {
+wrapper.classList.toggle("loading", this._loading);
+if (this._loading) {
+wrapper.setAttribute("aria-busy", "true");
+const spinner = wrapper.querySelector(".dropdown-loading-spinner");
+if (spinner && svg)
+spinner.innerHTML = svg;
+}
+else {
+wrapper.removeAttribute("aria-busy");
+}
+});
+}
+getFormValue() {
+const selectedValues = this._state.selectedValues;
+if (this._name && selectedValues.length > 0) {
+if (!this._multiple)
+return selectedValues[0];
+const formData = new FormData();
+selectedValues.forEach((value) => {
+formData.append(this._name, value);
+});
+return formData;
+}
+return null;
+}
+parseValue(value) {
+if (!value || typeof value !== "string" || value.trim() === "")
+return [];
+return value
+.split(",")
+.map((v) => v.trim())
+.filter((v) => v !== "");
+}
+initializeState() {
+const initialValue = this.getProperty("value") || "";
+if (initialValue) {
+const selectedValues = this.parseValue(initialValue);
+this._state.selectedValues = selectedValues;
+this.syncSelectedTags(selectedValues);
+this.updateSelectionDisplay();
+this.updateMobileSelectedState();
+}
+else {
+this.resolveDeclarativeSelection();
+}
+}
+resolveDeclarativeSelection() {
+if (this.getAttribute("value") || this._state.selectedValues.length > 0) {
+return;
+}
+const preSelectedTags = this.getTagElements()
+.filter((tag) => tag.hasAttribute("selected"))
+.map((tag) => this.getTagData(tag).value);
+if (preSelectedTags.length > 0) {
+this.updateComponentValue(preSelectedTags, false);
+return;
+}
+if (document.readyState === "loading") {
+document.addEventListener("DOMContentLoaded", () => { if (this.isConnected)
+this.resolveDeclarativeSelection(); }, { once: true });
+}
+}
+getTagElements() {
+return Array.from(this.querySelectorAll("ty-option:not([cloned]), ty-tag:not([cloned])"));
+}
+getTagData(element) {
+const value = element.value ||
+element.getAttribute("value") ||
+element.textContent ||
+"";
+const text = element.getAttribute("label") || element.textContent || "";
+return { value, text, element };
+}
+selectTag(tag) {
+tag.setAttribute("selected", "");
+}
+deselectTag(tag) {
+tag.removeAttribute("selected");
+}
+getSelectedValues() {
+return [...this._state.selectedValues];
+}
+syncSelectedTags(selectedValues) {
+const selectedSet = new Set(selectedValues);
+const tags = this.getTagElements();
+tags.forEach((tag) => {
+const tagValue = this.getTagData(tag).value;
+const shouldBeSelected = selectedSet.has(tagValue);
+const isSelected = tag.hasAttribute("selected");
+if (shouldBeSelected && !isSelected) {
+this.selectTag(tag);
+}
+else if (!shouldBeSelected && isSelected) {
+this.deselectTag(tag);
+}
+tag.setAttribute("aria-selected", String(shouldBeSelected));
+});
+}
+ensureOptionRoles() {
+this.getTagElements().forEach((tag) => {
+if (!tag.hasAttribute("role"))
+tag.setAttribute("role", "option");
+if (!tag.hasAttribute("aria-selected"))
+tag.setAttribute("aria-selected", "false");
+});
+}
+updateComponentValue(newValues, dispatchChange = false, action = "set", item = null) {
+const oldValues = this.getSelectedValues();
+const valueStr = newValues.join(",");
+if (JSON.stringify(newValues.sort()) !== JSON.stringify(oldValues.sort())) {
+this.setProperty("value", valueStr);
+this.updateValidity();
+if (dispatchChange) {
+this.dispatchChangeEvent({
+value: this._multiple ? [...newValues] : (newValues[0] ?? null),
+values: newValues,
+items: this.getSelectedItems(newValues),
+action,
+item,
+});
+}
+}
+}
+getSelectedItems(values) {
+const byValue = new Map(this.getTagElements().map((el) => [this.getTagData(el).value, el]));
+return values.map((value) => {
+const el = byValue.get(value);
+return {
+value,
+label: el?.getAttribute("label") || el?.textContent?.trim() || value,
+flavor: el?.getAttribute("flavor") ?? null,
+};
+});
+}
+calculatePosition() {
+const shadow = this.shadowRoot;
+const stub = shadow.querySelector(".select-stub");
+const dialog = shadow.querySelector(".dropdown-dialog");
+if (!stub || !dialog)
+return;
+const stubRect = stub.getBoundingClientRect();
+const MAX_POPUP_ESTIMATE = 440;
+const dialogRect = dialog.getBoundingClientRect();
+const estimatedHeight = Math.min(dialogRect.height || 200, MAX_POPUP_ESTIMATE);
+const wrapPadding = 20;
+const cssWidth = parseFloat(getComputedStyle(this).getPropertyValue("--ty-select-popup-width"));
+const popupWidth = !isNaN(cssWidth)
+? cssWidth
+: Math.max(stubRect.width, 320);
+const requested = this.getProperty("placement");
+const anchored = requested
+? placementToAnchored(requested)
+: {
+side: "auto",
+align: this.getProperty("align"),
+};
+const pos = computeAnchoredPosition({
+anchorRect: stubRect,
+popupWidth,
+popupHeight: estimatedHeight,
+align: anchored.align,
+side: anchored.side,
+gap: 8,
+});
+const positionBelow = pos.below;
+const x = pos.x - wrapPadding;
+const y = (positionBelow ? pos.topY : pos.bottomY) - wrapPadding;
+const width = popupWidth + wrapPadding + wrapPadding;
+this.style.setProperty("--dropdown-x", `${x}px`);
+this.style.setProperty("--dropdown-y", `${y}px`);
+this.style.setProperty("--dropdown-width", `${width}px`);
+this.style.setProperty("--dropdown-offset-x", "0px");
+this.style.setProperty("--dropdown-offset-y", "0px");
+this.style.setProperty("--dropdown-padding", `${wrapPadding}px`);
+if (positionBelow) {
+dialog.classList.add("position-below");
+dialog.classList.remove("position-above");
+}
+else {
+dialog.classList.add("position-above");
+dialog.classList.remove("position-below");
+}
+this.style.setProperty("--dropdown-direction", positionBelow ? "below" : "above");
+}
+_setupOptionsScrollbar() {
+if (!isCustomScrollbarEnabled())
+return;
+const shadow = this.shadowRoot;
+const optionsDiv = shadow.querySelector(".dropdown-options");
+const optionsWrapper = shadow.querySelector(".dropdown-options-wrapper");
+if (!optionsDiv || !optionsWrapper)
+return;
+this._destroyOptionsScrollbar();
+optionsDiv.classList.add("ty-custom-scroll");
+this._optionsScrollbar = new CustomScrollbar(optionsDiv, {
+vertical: true,
+});
+if (this._optionsScrollbar.trackY) {
+optionsWrapper.appendChild(this._optionsScrollbar.trackY);
+}
+}
+_destroyOptionsScrollbar() {
+if (this._optionsScrollbar) {
+this._optionsScrollbar.trackY?.remove();
+this._optionsScrollbar.destroy();
+this._optionsScrollbar = null;
+}
+}
+openDropdown() {
+const shadow = this.shadowRoot;
+const dialog = shadow.querySelector(".dropdown-dialog");
+if (!dialog)
+return;
+const stubEl = shadow.querySelector(".select-stub");
+if (stubEl)
+stubEl.setAttribute("aria-expanded", "true");
+const lockId = `select-${this.id || "anon"}-${getElementHash(this)}`;
+this._scrollLockId = lockId;
+lockScroll(lockId);
+dialog.showModal();
+this.calculatePosition();
+dialog.classList.add("open");
+this._state.open = true;
+const chevron = shadow.querySelector(".dropdown-chevron");
+if (chevron)
+chevron.classList.add("open");
+const searchChevron = shadow.querySelector(".dropdown-search-chevron");
+if (searchChevron)
+searchChevron.classList.add("open");
+const tags = this.getTagElements().map((el) => this.getTagData(el));
+this._state.filteredTags = tags;
+this._state.highlightedIndex = -1;
+this.updateOptionsVisibility(true);
+this._setupOptionsScrollbar();
+const searchInput = shadow.querySelector(".dropdown-search-input");
+if (searchInput && this.shouldShowSearch()) {
+setTimeout(() => searchInput.focus(), 100);
+}
+this.fireOpenEvent();
+}
+closeDropdown() {
+const shadow = this.shadowRoot;
+const dialog = shadow.querySelector(".dropdown-dialog");
+if (!dialog)
+return;
+const stubEl = shadow.querySelector(".select-stub");
+if (stubEl)
+stubEl.setAttribute("aria-expanded", "false");
+this._destroyOptionsScrollbar();
+dialog.classList.remove("open");
+dialog.classList.remove("position-above");
+dialog.classList.remove("position-below");
+dialog.close();
+if (this._scrollLockId) {
+unlockScroll(this._scrollLockId);
+this._scrollLockId = null;
+}
+this._state.open = false;
+this._state.highlightedIndex = -1;
+const chevron = shadow.querySelector(".dropdown-chevron");
+if (chevron)
+chevron.classList.remove("open");
+const searchChevron = shadow.querySelector(".dropdown-search-chevron");
+if (searchChevron)
+searchChevron.classList.remove("open");
+const hadQuery = this._state.search !== "";
+this._state.search = "";
+const searchInput = shadow.querySelector(".dropdown-search-input");
+if (searchInput) {
+searchInput.value = "";
+}
+if (this._externalSearch) {
+if (hadQuery) {
+if (this._searchDebounceTimer !== null) {
+clearTimeout(this._searchDebounceTimer);
+this._searchDebounceTimer = null;
+}
+this.fireSearchEvent("");
+}
+}
+else {
+const allTags = this.getTagElements().map((el) => this.getTagData(el));
+this._state.filteredTags = allTags;
+this.updateTagVisibility(allTags, allTags);
+this.clearHighlights(allTags);
+}
+this.fireCloseEvent();
+}
+openMobileModal() {
+const shadow = this.shadowRoot;
+const dialog = shadow.querySelector(".mobile-dialog");
+if (!dialog)
+return;
+const stubEl = shadow.querySelector(".select-stub");
+if (stubEl)
+stubEl.setAttribute("aria-expanded", "true");
+const lockId = `select-${this.id || "anon"}-${getElementHash(this)}`;
+this._scrollLockId = lockId;
+lockScroll(lockId);
+dialog.showModal();
+dialog.getBoundingClientRect();
+dialog.classList.add("open");
+this._state.open = true;
+const tags = this.getTagElements().map((el) => this.getTagData(el));
+this._state.filteredTags = tags;
+this.updateTagVisibility(tags, tags);
+requestAnimationFrame(() => {
+this.updateMobileSelectedState();
+});
+this.fireOpenEvent();
+}
+closeMobileModal() {
+const shadow = this.shadowRoot;
+const dialog = shadow.querySelector(".mobile-dialog");
+if (!dialog)
+return;
+const stubEl = shadow.querySelector(".select-stub");
+if (stubEl)
+stubEl.setAttribute("aria-expanded", "false");
+dialog.classList.remove("open");
+dialog.close();
+if (this._scrollLockId) {
+unlockScroll(this._scrollLockId);
+this._scrollLockId = null;
+}
+this._state.open = false;
+this._state.highlightedIndex = -1;
+const hadQuery = this._state.search !== "";
+this._state.search = "";
+const searchInput = shadow.querySelector(".mobile-search-input");
+if (searchInput) {
+searchInput.value = "";
+}
+if (this._externalSearch) {
+if (hadQuery) {
+if (this._searchDebounceTimer !== null) {
+clearTimeout(this._searchDebounceTimer);
+this._searchDebounceTimer = null;
+}
+this.fireSearchEvent("");
+}
+}
+else {
+const allTags = this.getTagElements();
+allTags.forEach((el) => el.removeAttribute("hidden"));
+}
+this.fireCloseEvent();
+}
+handleStubClick(e) {
+e.preventDefault();
+e.stopPropagation();
+if (this._disabled || this._readonly) {
+return;
+}
+this.openDropdown();
+}
+handleClearClick(e) {
+e.preventDefault();
+e.stopPropagation();
+if (this._disabled || this._readonly) {
+return;
+}
+this.clear();
+}
+handleStubKeydown(e) {
+if (this._disabled || this._readonly || this._state.open)
+return;
+if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+e.preventDefault();
+this.openDropdown();
+}
+}
+handleTagClick(e) {
+const target = e.target;
+const tag = target.closest("ty-option, ty-tag");
+if (!tag || tag.hasAttribute("disabled"))
+return;
+e.preventDefault();
+e.stopPropagation();
+this.selectByTag(tag);
+}
+selectByTag(tag) {
+const tagValue = this.getTagData(tag).value;
+const currentValues = this.getSelectedValues();
+if (!this._multiple) {
+this.updateComponentValue([tagValue], true, "set", tagValue);
+if (this._state.mode === "mobile") {
+this.closeMobileModal();
+}
+else {
+this.closeDropdown();
+}
+return;
+}
+if (currentValues.includes(tagValue)) {
+const newValues = currentValues.filter((v) => v !== tagValue);
+this.updateComponentValue(newValues, true, "remove", tagValue);
+}
+else {
+this.updateComponentValue([...currentValues, tagValue], true, "add", tagValue);
+}
+}
+tryCreateFromSearch() {
+if (!this._allowCreate)
+return false;
+const query = (this._state.search || "").trim();
+if (!query)
+return false;
+const queryLower = query.toLowerCase();
+const allTags = this.getTagElements().map((el) => this.getTagData(el));
+const existing = allTags.find((t) => t.value.toLowerCase() === queryLower ||
+t.text.toLowerCase() === queryLower);
+if (existing) {
+this.selectByTag(existing.element);
+return true;
+}
+const rawLabel = query;
+const defaultValue = this._createTransform === "slug" ? slugify(rawLabel) : rawLabel;
+if (!defaultValue)
+return true;
+const detail = { value: defaultValue, label: rawLabel };
+const event = new CustomEvent("create", {
+detail,
+bubbles: true,
+composed: true,
+cancelable: true,
+});
+this.dispatchEvent(event);
+if (event.defaultPrevented)
+return true;
+const finalValue = detail.value;
+const option = document.createElement("ty-option");
+option.setAttribute("value", finalValue);
+option.textContent = rawLabel;
+this.appendChild(option);
+if (!this._multiple) {
+this.updateComponentValue([finalValue], true, "create", finalValue);
+if (this._state.mode === "mobile") {
+this.closeMobileModal();
+}
+else {
+this.closeDropdown();
+}
+return true;
+}
+const currentValues = this.getSelectedValues();
+this.updateComponentValue([...currentValues, finalValue], true, "create", finalValue);
+this.clearSearchAfterCreate();
+return true;
+}
+clearSearchAfterCreate() {
+this._state.search = "";
+this._state.highlightedIndex = -1;
+const shadow = this.shadowRoot;
+if (!shadow)
+return;
+const desktopInput = shadow.querySelector(".dropdown-search-input");
+const mobileInput = shadow.querySelector(".mobile-search-input");
+if (desktopInput)
+desktopInput.value = "";
+if (mobileInput)
+mobileInput.value = "";
+const allTags = this.getTagElements().map((el) => this.getTagData(el));
+this._state.filteredTags = allTags;
+this.updateTagVisibility(allTags, allTags);
+this.updateOptionsVisibility(true);
+this.clearHighlights(allTags);
+this.updateMobileSelectedState();
+(desktopInput ?? mobileInput)?.focus();
+}
+blockSearchClick(e) {
+e.stopPropagation();
+e.preventDefault();
+}
+handleSearchInput(e) {
+if (this._state.mode === "mobile")
+this.expandMobileSection("available");
+const target = e.target;
+const query = target.value;
+this._state.search = query;
+if (this._externalSearch) {
+this.dispatchSearchEvent(query);
+return;
+}
+const allTags = this.getTagElements().map((el) => this.getTagData(el));
+const filtered = this.filterTags(allTags, query);
+this._state.filteredTags = filtered;
+this._state.highlightedIndex = -1;
+this.updateTagVisibility(filtered, allTags);
+this.updateOptionsVisibility(filtered.length > 0);
+this.updateMobileSelectedState();
+this.clearHighlights(allTags);
+}
+handleKeyboard(e) {
+if (!this._state.open)
+return;
+const shadow = this.shadowRoot;
+const searchInput = shadow.querySelector(".dropdown-search-input");
+const target = e.target;
+const shouldHandle = target === searchInput || document.activeElement !== searchInput;
+if (!shouldHandle)
+return;
+const filteredTags = this._state.filteredTags;
+const tagsCount = filteredTags.length;
+const currentHighlightedIndex = this._state.highlightedIndex;
+switch (e.key) {
+case "Escape":
+e.preventDefault();
+e.stopPropagation();
+if (this._state.mode === "mobile") {
+this.closeMobileModal();
+}
+else {
+this.closeDropdown();
+}
+break;
+case "Enter":
+e.preventDefault();
+e.stopPropagation();
+if (currentHighlightedIndex >= 0 &&
+currentHighlightedIndex < tagsCount) {
+this.selectByTag(filteredTags[currentHighlightedIndex].element);
+}
+else {
+this.tryCreateFromSearch();
+}
+break;
+case "ArrowUp":
+e.preventDefault();
+e.stopPropagation();
+const newIndexUp = this.nextEnabledTagIndex(filteredTags, currentHighlightedIndex, -1);
+this._state.highlightedIndex = newIndexUp;
+this.highlightTag(filteredTags, newIndexUp);
+break;
+case "ArrowDown":
+e.preventDefault();
+e.stopPropagation();
+const newIndexDown = this.nextEnabledTagIndex(filteredTags, currentHighlightedIndex, 1);
+this._state.highlightedIndex = newIndexDown;
+this.highlightTag(filteredTags, newIndexDown);
+break;
+}
+}
+nextEnabledTagIndex(tags, fromIndex, direction) {
+const count = tags.length;
+if (count === 0)
+return -1;
+let index = fromIndex === -1
+? (direction === 1 ? 0 : count - 1)
+: (fromIndex + direction + count) % count;
+for (let i = 0; i < count; i++) {
+if (!tags[index].element.hasAttribute("disabled"))
+return index;
+index = (index + direction + count) % count;
+}
+return -1;
+}
+filterTags(tags, query) {
+if (!query || query.trim() === "") {
+return tags;
+}
+const searchLower = query.toLowerCase();
+return tags.filter(({ text }) => text.toLowerCase().includes(searchLower));
+}
+updateTagVisibility(filteredTags, allTags) {
+const visibleValues = new Set(filteredTags.map((tag) => tag.value));
+allTags.forEach(({ value, element }) => {
+if (visibleValues.has(value)) {
+element.removeAttribute("hidden");
+}
+else {
+element.setAttribute("hidden", "");
+}
+});
+}
+updateOptionsVisibility(hasOptions) {
+const shadow = this.shadowRoot;
+const options = shadow.querySelector(".dropdown-options");
+if (options) {
+options.style.display = hasOptions ? "" : "none";
+}
+}
+clearHighlights(tags) {
+tags.forEach(({ element }) => {
+element.removeAttribute("highlighted");
+});
+}
+highlightTag(tags, index) {
+this.clearHighlights(tags);
+if (index >= 0 && index < tags.length) {
+const { element } = tags[index];
+element.setAttribute("highlighted", "");
+element.scrollIntoView({
+behavior: "smooth",
+block: "nearest",
+inline: "nearest",
+});
+}
+}
+dispatchSearchEvent(query) {
+if (this._searchDebounceTimer !== null) {
+clearTimeout(this._searchDebounceTimer);
+this._searchDebounceTimer = null;
+}
+if (this._debounce > 0) {
+this._searchDebounceTimer = window.setTimeout(() => {
+this.fireSearchEvent(query);
+this._searchDebounceTimer = null;
+}, this._debounce);
+}
+else {
+this.fireSearchEvent(query);
+}
+}
+fireSearchEvent(query) {
+this.dispatchEvent(new CustomEvent("search", {
+detail: {
+query,
+element: this,
+},
+bubbles: true,
+composed: true,
+}));
+}
+fireOpenEvent() {
+this.dispatchEvent(new CustomEvent("open", {
+detail: { mode: this._state.mode, element: this },
+}));
+if (this._externalSearch) {
+this.fireSearchEvent("");
+}
+}
+fireCloseEvent() {
+this.dispatchEvent(new CustomEvent("close", {
+detail: { mode: this._state.mode, element: this },
+}));
+}
+dispatchChangeEvent(detail) {
+this.dispatchEvent(new CustomEvent("change", {
+detail,
+bubbles: true,
+cancelable: true,
+}));
+}
+render() {
+this._state.mode = isMobileTouch() ? "mobile" : "desktop";
+if (this._state.mode === "mobile") {
+this.renderMobile();
+}
+else {
+this.renderDesktop();
+}
+this.updateSearchVisibility();
+this.applyLoadingState();
+this.updateValidity();
+}
+updateValidity() {
+if (this.disabled) {
+this._internals.setValidity({});
+return;
+}
+if (this.required && this.getSelectedValues().length === 0) {
+const stub = this.shadowRoot?.querySelector(".select-stub");
+this._internals.setValidity({ valueMissing: true }, "Please select a value", stub ?? undefined);
+}
+else {
+this._internals.setValidity({});
+}
+}
+setupTriggerSlot() {
+const shadow = this.shadowRoot;
+const stub = shadow.querySelector(".select-stub");
+const slot = shadow.querySelector('slot[name="trigger"]');
+if (!stub || !slot)
+return;
+const sync = () => {
+const hasTrigger = slot.assignedElements().length > 0;
+stub.classList.toggle("custom-trigger", hasTrigger);
+this.toggleAttribute("has-trigger", hasTrigger);
+};
+slot.addEventListener("slotchange", sync);
+sync();
+}
+setupEventListeners() {
+const shadow = this.shadowRoot;
+const stub = shadow.querySelector(".select-stub");
+const optionsSlot = shadow.querySelector("#options-slot");
+const searchInput = shadow.querySelector(".dropdown-search-input");
+if (stub) {
+this._stubClickHandler = this.handleStubClick.bind(this);
+stub.addEventListener("click", this._stubClickHandler);
+stub.addEventListener("keydown", this.handleStubKeydown.bind(this));
+}
+const clearBtn = shadow.querySelector(".select-clear");
+clearBtn?.addEventListener("click", this.handleClearClick.bind(this));
+this.setupTriggerSlot();
+if (optionsSlot) {
+this._tagClickHandler = this.handleTagClick.bind(this);
+optionsSlot.addEventListener("click", this._tagClickHandler);
+}
+if (searchInput) {
+this._searchInputHandler = this.handleSearchInput.bind(this);
+this._blockSearchClick = this.blockSearchClick.bind(this);
+searchInput.addEventListener("input", this._searchInputHandler);
+searchInput.addEventListener("click", this._blockSearchClick);
+}
+const dialog = shadow.querySelector(".dropdown-dialog");
+if (dialog) {
+dialog.addEventListener("click", (e) => {
+if (e.target === dialog) {
+this.closeDropdown();
+}
+});
+}
+this._keyboardHandler = this.handleKeyboard.bind(this);
+document.addEventListener("keydown", this._keyboardHandler);
+}
+buildStubClasses() {
+const classes = [];
+if (this._disabled)
+classes.push("disabled");
+if (this._compact)
+classes.push("compact");
+return classes.join(" ");
+}
+renderDesktop() {
+const shadow = this.shadowRoot;
+if (!shadow.querySelector(".select-container")) {
+const stubClasses = this.buildStubClasses();
+const listboxId = `select-listbox-${getElementHash(this)}`;
+const labelId = `select-label-${getElementHash(this)}`;
+const labelHtml = this._label
+? `
+<label class="ty-field-label" id="${labelId}">
+${this._label}
+${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}
+</label>
+`
+: "";
+const searchPlaceholder = "Search...";
+shadow.innerHTML = `
+<div class="select-container dropdown-mode-desktop">
+${labelHtml}
+<div class="dropdown-wrapper">
+<div class="dropdown-stub select-stub ${stubClasses}"
+role="combobox"
+aria-haspopup="listbox"
+aria-expanded="false"
+aria-controls="${listboxId}"
+${this._label ? `aria-labelledby="${labelId}"` : ""}
+tabindex="${this._disabled ? "-1" : "0"}"
+${this._disabled ? 'disabled aria-disabled="true"' : ""}>
+<slot name="trigger">
+<slot name="start"></slot>
+<slot name="selected"></slot>
+<span class="dropdown-placeholder">${this._placeholder}</span>
+<span class="select-count" hidden></span>
+<slot name="end"></slot>
+<button class="select-clear" type="button" aria-label="Clear selection" hidden>
+${CLEAR_ICON_SVG}
+</button>
+<div class="dropdown-chevron">
+${CHEVRON_DOWN_SVG}
+</div>
+</slot>
+</div>
+<dialog class="dropdown-dialog">
+<div class="dropdown-header">
+<div class="dropdown-search-icon" aria-hidden="true">
+${SEARCH_ICON_SVG}
+</div>
+<input
+class="dropdown-search-input"
+type="text"
+placeholder="${searchPlaceholder}"
+${this._disabled ? "disabled" : ""}
+/>
+<div class="dropdown-search-chevron">
+${CHEVRON_DOWN_SVG}
+</div>
+</div>
+<div class="dropdown-options-wrapper">
+<div class="dropdown-options" id="${listboxId}" role="listbox" ${this._multiple ? 'aria-multiselectable="true"' : ""}>
+<slot id="options-slot"></slot>
+</div>
+<div class="dropdown-loading" aria-hidden="true">
+<slot name="loading">
+<span class="dropdown-loading-spinner"></span>
+<span class="dropdown-loading-text">Searching…</span>
+</slot>
+</div>
+</div>
+</dialog>
+</div>
+</div>
+`;
+this.setupEventListeners();
+}
+this.updateSelectionDisplay();
+}
+renderMobile() {
+const shadow = this.shadowRoot;
+if (!shadow.querySelector(".select-container")) {
+const stubClasses = this.buildStubClasses();
+const listboxId = `select-listbox-${getElementHash(this)}`;
+const labelId = `select-label-${getElementHash(this)}`;
+const labelHtml = this._label
+? `
+<label class="ty-field-label" id="${labelId}">
+${this._label}
+${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}
+</label>
+`
+: "";
+const closeButtonSvg = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<line x1="18" y1="6" x2="6" y2="18"></line>
+<line x1="6" y1="6" x2="18" y2="18"></line>
+</svg>`;
+const searchPlaceholder = this._label
+? `Search ${this._label}...`
+: "Search...";
+const searchHeaderHtml = `
+<div class="mobile-search-header">
+${this._label ? `<span class="mobile-header-label">${this._label}</span>` : ""}
+<div class="mobile-header-content">
+<div class="dropdown-search-icon" aria-hidden="true">
+${SEARCH_ICON_SVG}
+</div>
+<input
+class="mobile-search-input"
+type="text"
+placeholder="${searchPlaceholder}"
+autofocus
+${this._disabled ? "disabled" : ""}
+/>
+<button class="mobile-close-button" type="button" aria-label="Close">
+${closeButtonSvg}
+</button>
+</div>
+</div>
+`;
+shadow.innerHTML = `
+<div class="select-container dropdown-mode-mobile">
+${labelHtml}
+<div class="dropdown-wrapper">
+<div class="dropdown-stub select-stub ${stubClasses}"
+role="combobox"
+aria-haspopup="listbox"
+aria-expanded="false"
+aria-controls="${listboxId}"
+${this._label ? `aria-labelledby="${labelId}"` : ""}
+tabindex="${this._disabled ? "-1" : "0"}"
+${this._disabled ? 'disabled aria-disabled="true"' : ""}>
+<slot name="trigger">
+<slot name="start"></slot>
+<slot name="selected"></slot>
+<span class="dropdown-placeholder">${this._placeholder}</span>
+<span class="select-count" hidden></span>
+<slot name="end"></slot>
+<button class="select-clear" type="button" aria-label="Clear selection" hidden>
+${CLEAR_ICON_SVG}
+</button>
+<div class="dropdown-chevron">
+${CHEVRON_DOWN_SVG}
+</div>
+</slot>
+</div>
+<dialog class="mobile-dialog">
+<div class="mobile-dialog-content">
+<!-- HEADER (matches dropdown.ts) -->
+${searchHeaderHtml}
+<!-- BODY: options list with toggleable selected state -->
+<div class="mobile-body" data-expanded="available">
+<!-- SELECTED STRIP (pinned above the list, collapses when empty) -->
+<div class="mobile-selected-section" data-empty="true">
+<button class="section-header" type="button" data-section="selected" aria-expanded="false">
+<span class="section-title">${this._selectedLabel} <span class="section-count">(0)</span></span>
+${CHEVRON_DOWN_SVG}
+</button>
+<div class="section-content mobile-selected-chips"></div>
+</div>
+<!-- AVAILABLE LIST (always visible, takes remaining space) -->
+<div class="mobile-available-section" data-empty="false">
+<button class="section-header" type="button" data-section="available" aria-expanded="true">
+<span class="section-title">${this._availableLabel}</span>
+${CHEVRON_DOWN_SVG}
+</button>
+<div class="section-content dropdown-options-wrapper" id="${listboxId}" role="listbox" ${this._multiple ? 'aria-multiselectable="true"' : ""}>
+<slot id="options-slot"></slot>
+<div class="empty-state">${this._noOptionsMessage}</div>
+<div class="dropdown-loading" aria-hidden="true">
+<slot name="loading">
+<span class="dropdown-loading-spinner"></span>
+<span class="dropdown-loading-text">Searching…</span>
+</slot>
+</div>
+</div>
+</div>
+</div>
+</div>
+</dialog>
+</div>
+</div>
+`;
+this.setupMobileEventListeners();
+}
+this.updateSelectionDisplay();
+}
+setupMobileEventListeners() {
+if (!this._keyboardHandler) {
+this._keyboardHandler = this.handleKeyboard.bind(this);
+document.addEventListener("keydown", this._keyboardHandler);
+}
+const shadow = this.shadowRoot;
+const stub = shadow.querySelector(".select-stub");
+const optionsSlot = shadow.querySelector("#options-slot");
+const searchInput = shadow.querySelector(".mobile-search-input");
+const closeButton = shadow.querySelector(".mobile-close-button");
+const dialog = shadow.querySelector(".mobile-dialog");
+if (stub) {
+stub.addEventListener("click", (e) => this.handleMobileStubClick(e));
+stub.addEventListener("keydown", (e) => this.handleMobileStubKeydown(e));
+}
+const clearBtn = shadow.querySelector(".select-clear");
+clearBtn?.addEventListener("click", this.handleClearClick.bind(this));
+this.setupTriggerSlot();
+if (optionsSlot) {
+optionsSlot.addEventListener("click", (e) => this.handleMobileTagClick(e));
+}
+if (searchInput) {
+searchInput.addEventListener("input", (e) => this.handleSearchInput(e));
+}
+shadow.querySelectorAll(".mobile-body .section-header").forEach((header) => {
+header.addEventListener("click", () => this.expandMobileSection(header.dataset.section === "selected" ? "selected" : "available"));
+});
+if (closeButton) {
+closeButton.addEventListener("click", () => this.closeMobileModal());
+}
+if (dialog) {
+dialog.addEventListener("click", (e) => {
+if (e.target === dialog) {
+this.closeMobileModal();
+}
+});
+dialog.addEventListener("cancel", (e) => {
+e.preventDefault();
+this.closeMobileModal();
+});
+}
+}
+handleMobileStubClick(e) {
+e.preventDefault();
+e.stopPropagation();
+if (this._disabled || this._readonly) {
+return;
+}
+this.openMobileModal();
+}
+handleMobileStubKeydown(e) {
+if (this._disabled || this._readonly || this._state.open)
+return;
+if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+e.preventDefault();
+this.openMobileModal();
+}
+}
+handleMobileTagClick(e) {
+this.handleTagClick(e);
+}
+updateMobileSelectedState() {
+if (this._state.mode !== "mobile")
+return;
+const shadow = this.shadowRoot;
+this.renderMobileSelectedChips();
+const availableSection = shadow.querySelector(".mobile-available-section");
+if (availableSection) {
+const visibleAvailable = this.getTagElements().filter((tag) => !tag.hasAttribute("hidden") && !tag.hasAttribute("selected")).length;
+availableSection.setAttribute("data-empty", String(visibleAvailable === 0));
+const availableTitleSpan = shadow.querySelector(".mobile-available-section .section-title");
+if (availableTitleSpan) {
+availableTitleSpan.textContent = `${this._availableLabel} (${visibleAvailable})`;
+}
+}
+}
+expandMobileSection(section) {
+const shadow = this.shadowRoot;
+const body = shadow?.querySelector(".mobile-body");
+if (!body)
+return;
+if (section === "selected" && this._state.selectedValues.length === 0)
+return;
+body.dataset.expanded = section;
+shadow.querySelectorAll(".mobile-body .section-header").forEach((header) => {
+const owns = header.dataset.section === section;
+header.setAttribute("aria-expanded", String(owns));
+});
+}
+renderMobileSelectedChips() {
+const shadow = this.shadowRoot;
+const section = shadow.querySelector(".mobile-selected-section");
+const host = shadow.querySelector(".mobile-selected-chips");
+if (!section || !host)
+return;
+const selected = this._state.selectedValues;
+section.setAttribute("data-empty", String(selected.length === 0));
+const count = section.querySelector(".section-count");
+if (count)
+count.textContent = `(${selected.length})`;
+if (selected.length === 0)
+this.expandMobileSection("available");
+const labelFor = (value) => {
+const option = this.getTagElements().find((tag) => this.getTagData(tag).value === value);
+return option ? this.getTagData(option).text : value;
+};
+host.textContent = "";
+for (const value of selected) {
+const chip = document.createElement("button");
+chip.type = "button";
+chip.className = "mobile-selected-chip";
+chip.dataset.value = value;
+chip.setAttribute("aria-label", `Remove ${labelFor(value)}`);
+chip.innerHTML = `<span class="chip-label"></span>${CLEAR_ICON_SVG}`;
+chip.querySelector(".chip-label").textContent = labelFor(value);
+chip.addEventListener("click", (e) => {
+e.preventDefault();
+e.stopPropagation();
+this.deselectValue(value);
+});
+host.appendChild(chip);
+}
+}
+shouldShowSearch() {
+if (this._externalSearch)
+return true;
+if (this._allowCreate)
+return true;
+if (this._notSearchable)
+return false;
+return this.getTagElements().length > SEARCH_AUTO_THRESHOLD;
+}
+updateSearchVisibility() {
+const shadow = this.shadowRoot;
+if (!shadow)
+return;
+const show = this.shouldShowSearch();
+const header = shadow.querySelector(".dropdown-header");
+if (header)
+header.hidden = !show;
+const mobileInput = shadow.querySelector(".mobile-search-input");
+if (mobileInput)
+mobileInput.hidden = !show;
+const mobileIcon = shadow.querySelector(".mobile-header-content .dropdown-search-icon");
+if (mobileIcon)
+mobileIcon.hidden = !show;
+}
+updateSelectionDisplay() {
+const shadow = this.shadowRoot;
+const stub = shadow.querySelector(".select-stub");
+if (!stub)
+return;
+const values = this._state.selectedValues;
+const count = values.length;
+stub.classList.toggle("has-selection", count > 0);
+stub.classList.toggle("compact", this._compact);
+const badge = stub.querySelector(".select-count");
+if (badge) {
+badge.textContent = String(count);
+badge.hidden = count === 0 || !this._multiple || !this._compact;
+}
+const clearBtn = stub.querySelector(".select-clear");
+if (clearBtn) {
+clearBtn.hidden = !(count > 0 && this._clearable && !this._disabled && !this._readonly);
+}
+const wantClone = !this._multiple && count > 0 ? values[0] : null;
+this.syncSelectedClone(wantClone);
+const hasClone = this._selectedClone !== null;
+stub.classList.toggle("has-clone", hasClone);
+const textEl = stub.querySelector(".dropdown-placeholder");
+if (textEl) {
+textEl.hidden = hasClone;
+const showLabels = count > 0 && this._multiple && !this._compact;
+if (showLabels) {
+textEl.textContent = this.getSelectedItems(values)
+.map((i) => i.label)
+.join(", ");
+textEl.classList.remove("placeholder-shown");
+}
+else if (wantClone !== null) {
+textEl.textContent = values.join(", ");
+textEl.classList.remove("placeholder-shown");
+}
+else {
+textEl.textContent = this._placeholder;
+textEl.classList.add("placeholder-shown");
+}
+}
+}
+syncSelectedClone(value) {
+const existing = this.querySelector(':scope > [cloned][slot="selected"]');
+if (existing?.getAttribute("value") === value) {
+const stale = value !== null &&
+existing.childNodes.length === 0 &&
+(this.getTagElements().find((el) => this.getTagData(el).value === value)?.childNodes.length ?? 0) > 0;
+if (!stale) {
+this._selectedClone = existing;
+return;
+}
+}
+existing?.remove();
+if (value === null) {
+this._selectedClone = null;
+return;
+}
+const option = this.getTagElements().find((el) => this.getTagData(el).value === value);
+if (option) {
+const clone = option.cloneNode(true);
+clone.removeAttribute("selected");
+clone.setAttribute("slot", "selected");
+clone.setAttribute("cloned", "true");
+this.appendChild(clone);
+this._selectedClone = clone;
+if (option.childNodes.length === 0 && document.readyState === "loading") {
+document.addEventListener("DOMContentLoaded", () => { if (this.isConnected)
+this.updateSelectionDisplay(); }, { once: true });
+}
+}
+else if (this._selectedClone?.getAttribute("value") === value) {
+const restored = this._selectedClone.cloneNode(true);
+this.appendChild(restored);
+this._selectedClone = restored;
+}
+}
+deselectValue(value) {
+const current = this.getSelectedValues();
+if (!current.includes(value))
+return;
+this.updateComponentValue(current.filter((v) => v !== value), true, "remove", value);
+}
+clear() {
+this.updateComponentValue([], true, "clear", null);
+}
+get value() {
+return this.getSelectedValues().join(",");
+}
+set value(val) {
+this.setProperty("value", val);
+}
+get name() {
+return this.getProperty("name");
+}
+set name(val) {
+this.setProperty("name", val);
+}
+get multiple() {
+return this.getProperty("multiple");
+}
+set multiple(value) {
+this.setProperty("multiple", value);
+}
+get compact() {
+return this.getProperty("compact");
+}
+set compact(value) {
+this.setProperty("compact", value);
+}
+get placeholder() {
+return this.getProperty("placeholder");
+}
+set placeholder(val) {
+this.setProperty("placeholder", val);
+}
+get label() {
+return this.getProperty("label");
+}
+set label(val) {
+this.setProperty("label", val);
+}
+get disabled() {
+return this.getProperty("disabled");
+}
+set disabled(value) {
+this.setProperty("disabled", value);
+}
+get loading() {
+return this.getProperty("loading");
+}
+set loading(value) {
+this.setProperty("loading", value);
+}
+get readonly() {
+return this.getProperty("readonly");
+}
+set readonly(value) {
+this.setProperty("readonly", value);
+}
+get clearable() {
+return this.getProperty("clearable");
+}
+set clearable(value) {
+this.setProperty("clearable", value);
+}
+get required() {
+return this.getProperty("required");
+}
+set required(value) {
+this.setProperty("required", value);
+}
+get notSearchable() {
+return this.getProperty("notSearchable");
+}
+set notSearchable(value) {
+this.setProperty("notSearchable", value);
+}
+get externalSearch() {
+return this.getProperty("externalSearch");
+}
+set externalSearch(value) {
+this.setProperty("externalSearch", value);
+}
+get debounce() {
+return this.getProperty("debounce");
+}
+set debounce(value) {
+const numValue = typeof value === "string" ? parseInt(value, 10) : value;
+this.setProperty("debounce", numValue);
+}
+get size() {
+return this.getProperty("size");
+}
+set size(value) {
+this.setProperty("size", value);
+}
+get align() {
+return this.getProperty("align");
+}
+set align(value) {
+this.setProperty("align", value);
+}
+get placement() {
+return this.getProperty("placement");
+}
+set placement(value) {
+this.setProperty("placement", value);
+}
+get flavor() {
+return this.getProperty("flavor");
+}
+set flavor(value) {
+this.setProperty("flavor", value);
+}
+get form() {
+return this._internals.form;
+}
+}
 TySelect.properties = {
-    value: {
-        type: "string",
-        visual: true,
-        formValue: true,
-        emitChange: false,
-        default: "",
-        coerce: (v) => {
-            // Handle array input (from React, Reagent, etc.)
-            if (Array.isArray(v)) {
-                return v.join(",");
-            }
-            // Handle null/undefined
-            if (v === null || v === undefined) {
-                return "";
-            }
-            // String already
-            return String(v);
-        },
-    },
-    name: {
-        type: "string",
-        default: "",
-    },
-    // Cardinality — native <select> semantics: absent = single select
-    multiple: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    // Skin — absent = form field (matches ty-input); present = compact
-    // content-hugging trigger (toolbars, filter bars)
-    compact: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    placeholder: {
-        type: "string",
-        visual: true,
-        default: "Select...",
-    },
-    label: {
-        type: "string",
-        visual: true,
-        default: "",
-    },
-    disabled: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    readonly: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    required: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    // Built-in × clear button in the default/compact trigger, shown once
-    // something is selected. Automatically absent under slot="trigger" —
-    // it lives in the slot's fallback content, same mechanism that already
-    // hides the chevron there. Default true matches ty-date-picker.
-    clearable: {
-        type: "boolean",
-        visual: true,
-        default: true,
-        aliases: { "not-clearable": false },
-    },
-    externalSearch: {
-        type: "boolean",
-        visual: true,
-        default: false,
-        aliases: { "external-search": true },
-    },
-    // Enter on unmatched search text mints a new <ty-option> — forces the
-    // search row on (same as external-search: the input IS the mechanism).
-    allowCreate: {
-        type: "boolean",
-        visual: true,
-        default: false,
-        aliases: { "allow-create": true },
-    },
-    // Opt-in normalizer for the value minted by allow-create (label/display
-    // text is always kept verbatim). 'none' (default): value === typed text.
-    // 'slug': lowercase, spaces → '_', strips anything else non-alphanumeric.
-    createTransform: {
-        type: "string",
-        visual: false,
-        default: "none",
-        aliases: { "create-transform": true },
-        coerce: (v) => (v === "slug" ? "slug" : "none"),
-    },
-    // Search row visibility: 'auto' (default) shows it only for long option
-    // lists; searchable / searchable="true" forces it on, searchable="false"
-    // off. external-search always shows it (the input IS the mechanism).
-    searchable: {
-        type: "string",
-        visual: true,
-        default: "auto",
-        coerce: (v) => {
-            if (v === true || v === "" || v === "true")
-                return "always";
-            if (v === false || v === "false")
-                return "never";
-            return "auto";
-        },
-    },
-    // Horizontal anchor for the popup: "start" (default) matches the
-    // trigger's left edge, "end" matches its right edge — either way
-    // clamped into the viewport. Useful with slot="trigger" custom
-    // triggers whose own position makes left-anchoring look wrong (e.g.
-    // an icon button at the right edge of a toolbar).
-    align: {
-        type: "string",
-        visual: true,
-        default: "start",
-        validate: (v) => ["start", "end"].includes(v),
-        coerce: (v) => (v === "end" ? "end" : "start"),
-    },
-    size: {
-        type: "string",
-        visual: true,
-        default: "md",
-        // Fields come in exactly three sizes; legacy xs/xl map to sm/lg.
-        validate: (v) => ["sm", "md", "lg"].includes(v),
-        coerce: (v) => {
-            if (v === "xs")
-                return "sm";
-            if (v === "xl")
-                return "lg";
-            if (!["sm", "md", "lg"].includes(v)) {
-                console.warn(`[ty-select] Invalid size. Using md.`);
-                return "md";
-            }
-            return v;
-        },
-    },
-    debounce: {
-        type: "number",
-        default: 0,
-        validate: (v) => v >= 0 && v <= 5000,
-        coerce: (v) => {
-            const num = Number(v);
-            if (isNaN(num))
-                return 0;
-            return Math.max(0, Math.min(5000, num));
-        },
-    },
-    "available-label": {
-        type: "string",
-        visual: true,
-        default: "Available",
-    },
-    "no-options-message": {
-        type: "string",
-        visual: true,
-        default: "No options available",
-    },
-    loading: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    // Any string is accepted: built-ins get static CSS, other identifiers
-    // become custom flavors (see _syncCustomFlavor), garbage degrades to
-    // the default look.
-    flavor: {
-        type: "string",
-        visual: true,
-        default: "neutral",
-    },
+value: {
+type: "string",
+visual: true,
+formValue: true,
+emitChange: false,
+default: "",
+coerce: (v) => {
+if (Array.isArray(v)) {
+return v.join(",");
+}
+if (v === null || v === undefined) {
+return "";
+}
+return String(v);
+},
+},
+name: {
+type: "string",
+default: "",
+},
+multiple: {
+type: "boolean",
+visual: true,
+default: false,
+},
+compact: {
+type: "boolean",
+visual: true,
+default: false,
+},
+placeholder: {
+type: "string",
+visual: true,
+default: "Select...",
+},
+label: {
+type: "string",
+visual: true,
+default: "",
+},
+disabled: {
+type: "boolean",
+visual: true,
+default: false,
+},
+readonly: {
+type: "boolean",
+visual: true,
+default: false,
+},
+required: {
+type: "boolean",
+visual: true,
+default: false,
+},
+clearable: {
+type: "boolean",
+visual: true,
+default: true,
+aliases: { "not-clearable": false },
+},
+externalSearch: {
+type: "boolean",
+visual: true,
+default: false,
+aliases: { "external-search": true },
+},
+allowCreate: {
+type: "boolean",
+visual: true,
+default: false,
+aliases: { "allow-create": true },
+},
+createTransform: {
+type: "string",
+visual: false,
+default: "none",
+aliases: { "create-transform": true },
+coerce: (v) => (v === "slug" ? "slug" : "none"),
+},
+notSearchable: {
+type: "boolean",
+visual: true,
+default: false,
+},
+align: {
+type: "string",
+visual: true,
+default: "start",
+validate: (v) => ["start", "center", "end"].includes(v),
+coerce: (v) => v === "end" ? "end" : v === "center" ? "center" : "start",
+},
+placement: {
+type: "string",
+visual: true,
+default: "",
+},
+size: {
+type: "string",
+visual: true,
+default: DEFAULT_SIZE,
+validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
+coerce: (v) => {
+if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
+console.warn(`[ty-select] Invalid size. Using ${DEFAULT_SIZE}.`);
+return DEFAULT_SIZE;
+}
+return v;
+},
+},
+debounce: {
+type: "number",
+default: 0,
+validate: (v) => v >= 0 && v <= 5000,
+coerce: (v) => {
+const num = Number(v);
+if (isNaN(num))
+return 0;
+return Math.max(0, Math.min(5000, num));
+},
+},
+"available-label": {
+type: "string",
+visual: true,
+default: "Available",
+},
+"selected-label": {
+type: "string",
+visual: true,
+default: "Selected",
+},
+"no-options-message": {
+type: "string",
+visual: true,
+default: "No options available",
+},
+loading: {
+type: "boolean",
+visual: true,
+default: false,
+},
+flavor: {
+type: "string",
+visual: true,
+default: "neutral",
+},
 };
-// Register the custom element
 if (!customElements.get("ty-select")) {
-    customElements.define("ty-select", TySelect);
+customElements.define("ty-select", TySelect);
 }
-//# sourceMappingURL=select.js.map