@diwacopilot/components 1.2.0 → 1.2.2

package/dist-custom-elements/diwa-select.js

@@ -1,614 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-5eacc7d0.js';
-import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
-
-const getComponentCss = (isOpen, _disabled, _state, _compact, isUp = false) => `
-  /* ── Host ──────────────────────────────────────────────────────────── */
-
-  :host {
-    display: block;
-    position: relative;
-    width: 100%;
-    min-width: 0;
-    font-family: var(--diwa-font-family-base);
-    outline: none;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* ── Label ──────────────────────────────────────────────────────────── */
-
-  .label {
-    display: block;
-    margin-bottom: var(--diwa-space-1);
-    font-size: var(--diwa-font-size-sm);
-    font-weight: var(--diwa-font-weight-semibold);
-    color: var(--diwa-text-secondary);
-    line-height: var(--diwa-line-height-normal);
-    cursor: default;
-  }
-
-  :host([hide-label]) .label {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  .label__required {
-    color: var(--diwa-notification-error);
-    font-weight: var(--diwa-font-weight-semibold);
-    margin-left: var(--diwa-space-1);
-  }
-
-  /* ── Description ────────────────────────────────────────────────────── */
-
-  .description {
-    display: block;
-    margin-bottom: var(--diwa-space-2);
-    font-size: var(--diwa-font-size-sm);
-    color: var(--diwa-text-secondary);
-    line-height: var(--diwa-line-height-normal);
-  }
-
-  /* ── Trigger ────────────────────────────────────────────────────────── */
-
-  .trigger {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));
-    padding: 0 var(--diwa-space-3);
-    box-sizing: border-box;
-    gap: var(--diwa-space-2);
-
-    background: var(--diwa-input-bg, var(--diwa-bg-input));
-    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);
-    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));
-
-    font-size: var(--diwa-font-size-base);
-    font-weight: var(--diwa-font-weight-normal);
-    font-family: inherit;
-    color: var(--diwa-text-primary);
-    text-align: left;
-    line-height: 1;
-
-    cursor: pointer;
-    user-select: none;
-    -webkit-font-smoothing: antialiased;
-
-    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast);
-    appearance: none;
-    -webkit-appearance: none;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    :host(:not([disabled])) .trigger:hover {
-      border-color: var(--diwa-border-hover);
-    }
-  }
-
-  ${isOpen && !isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0; }' : ''}
-  ${isOpen && isUp ? '.trigger { border-color: var(--diwa-border-focus); border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)); }' : ''}
-
-  /* ── Focus ring on trigger itself ───────────────────────────────────── */
-
-  ${getFocusStyle('.trigger')}
-
-  /* ── Selected text ──────────────────────────────────────────────────── */
-
-  .trigger__value {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .trigger__placeholder {
-    color: var(--diwa-text-secondary);
-  }
-
-  /* ── Chevron icon ───────────────────────────────────────────────────── */
-
-  .trigger__chevron {
-    flex-shrink: 0;
-    width: var(--diwa-icon-size-md);
-    height: var(--diwa-icon-size-md);
-    color: var(--diwa-text-secondary);
-    transition: transform var(--diwa-transition-fast);
-    ${isOpen ? 'transform: rotate(180deg);' : ''}
-  }
-
-  .trigger__chevron svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* ── Dropdown panel ─────────────────────────────────────────────────── */
-
-  .dropdown {
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: var(--diwa-z-dropdown);
-    background-color: var(--diwa-bg-elevated);
-    border: var(--diwa-border-width-thin) solid var(--diwa-border-focus);
-    border-top: none;
-    border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md));
-    overflow: hidden;
-    box-shadow: var(--diwa-shadow-lg);
-    display: ${isOpen ? 'block' : 'none'};
-  }
-
-  .dropdown--up {
-    top: auto;
-    bottom: 100%;
-    border-top: var(--diwa-border-width-thin) solid var(--diwa-border-focus);
-    border-bottom: none;
-    border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0;
-    margin-bottom: -1px;
-  }
-
-  /* ── Filter input ───────────────────────────────────────────────────── */
-
-  .filter {
-    padding: var(--diwa-space-2) var(--diwa-space-2) var(--diwa-space-1);
-    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-input-border);
-  }
-
-  .filter__input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: var(--diwa-space-2) var(--diwa-space-3);
-    background: var(--diwa-input-bg, var(--diwa-bg-input));
-    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);
-    border-radius: var(--diwa-radius-sm);
-    color: var(--diwa-text-primary);
-    font-size: var(--diwa-font-size-sm);
-    font-family: inherit;
-    outline: none;
-    transition: border-color var(--diwa-transition-fast);
-  }
-
-  .filter__input::placeholder {
-    color: var(--diwa-text-secondary);
-  }
-
-  .filter__input:focus-visible {
-    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);
-    outline-offset: var(--diwa-focus-ring-offset);
-  }
-
-  .filter__input:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  /* ── Options list ───────────────────────────────────────────────────── */
-
-  .options {
-    max-height: var(--diwa-select-dropdown-max-height);
-    overflow-y: auto;
-    padding: var(--diwa-space-1);
-  }
-
-  .options::-webkit-scrollbar {
-    width: var(--diwa-scrollbar-width);
-  }
-
-  .options::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .options::-webkit-scrollbar-thumb {
-    background-color: var(--diwa-border);
-    border-radius: var(--diwa-radius-sm);
-  }
-
-  /* ── Compact ────────────────────────────────────────────────────────── */
-
-  :host([compact]) .trigger {
-    min-height: var(--diwa-touch-target-min-size-compact, 32px);
-    font-size: var(--diwa-font-size-md);
-    padding: 0 var(--diwa-space-2);
-  }
-
-  /* ── States: error / success ────────────────────────────────────────── */
-
-  :host([state="error"]) .trigger {
-    border-color: var(--diwa-notification-error);
-  }
-
-  :host([state="success"]) .trigger {
-    border-color: var(--diwa-notification-success);
-  }
-
-  /* ── Message ────────────────────────────────────────────────────────── */
-
-  .message {
-    display: block;
-    margin-top: var(--diwa-space-1);
-    font-size: var(--diwa-font-size-sm);
-    line-height: var(--diwa-line-height-normal);
-    color: var(--diwa-text-secondary);
-  }
-
-  :host([state="error"]) .message {
-    color: var(--diwa-notification-error);
-  }
-
-  :host([state="success"]) .message {
-    color: var(--diwa-notification-success);
-  }
-
-  /* ── Disabled ───────────────────────────────────────────────────────── */
-
-  :host([disabled]) .trigger {
-    opacity: var(--diwa-opacity-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  :host([disabled]) .label {
-    opacity: var(--diwa-opacity-disabled);
-  }
-
-  /* ── Reduced motion ─────────────────────────────────────────────────── */
-
-  ${getReducedMotionStyle('.trigger', '.trigger__chevron', '.filter__input')}
-`;
-
-/** Module-level counter for unique IDs. */
-let selectIdCounter = 0;
-const DiwaSelect$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelect extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.change = createEvent(this, "change", 7);
-        this.toggle = createEvent(this, "toggle", 3);
-        this.blur = createEvent(this, "blur", 3);
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Theme — cascades down to child options. */
-        this.theme = 'dark';
-        /** HTML name attribute — identifies the field in form submissions. */
-        this.name = '';
-        /** Validation state. */
-        this.state = 'none';
-        /** Hides the label visually while keeping it accessible. */
-        this.hideLabel = false;
-        /** Disables interaction. */
-        this.disabled = false;
-        /** Marks the field as required. */
-        this.required = false;
-        /** Compact variant — reduces the trigger height. */
-        this.compact = false;
-        /**
-         * Preferred direction for the dropdown panel.
-         * `'auto'` detects viewport space and flips upward if needed.
-         */
-        this.dropdownDirection = 'auto';
-        // ──────────────────────────────────────────────────────────────
-        // Internal state
-        // ──────────────────────────────────────────────────────────────
-        this.isOpen = false;
-        this.hasFilterResults = true;
-        this.dropdownClass = 'dropdown';
-        // ──────────────────────────────────────────────────────────────
-        // Private refs / tracking
-        // ──────────────────────────────────────────────────────────────
-        this.internalId = `diwa-s-${++selectIdCounter}`;
-        this.options = [];
-        this.highlightedIndex = -1;
-        this.onClickOutside = (e) => {
-            if (!this.isOpen)
-                return;
-            const path = e.composedPath();
-            if (!path.includes(this.host)) {
-                this.isOpen = false;
-                this.blur.emit();
-            }
-        };
-        this.onTriggerClick = () => {
-            if (this.disabled)
-                return;
-            this.isOpen = !this.isOpen;
-        };
-        this.onTriggerKeyDown = (e) => {
-            if (this.disabled)
-                return;
-            if (!this.isOpen) {
-                if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this.isOpen = true;
-                }
-                return;
-            }
-            switch (e.key) {
-                case 'Escape':
-                case 'Tab': {
-                    e.preventDefault();
-                    this.isOpen = false;
-                    this.triggerEl.focus();
-                    break;
-                }
-                case 'ArrowDown': {
-                    e.preventDefault();
-                    const visible = this.getVisibleOptions();
-                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, visible.length - 1);
-                    this.applyHighlight();
-                    break;
-                }
-                case 'ArrowUp': {
-                    e.preventDefault();
-                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
-                    this.applyHighlight();
-                    break;
-                }
-                case 'Home': {
-                    e.preventDefault();
-                    this.highlightedIndex = 0;
-                    this.applyHighlight();
-                    break;
-                }
-                case 'End': {
-                    e.preventDefault();
-                    const vis = this.getVisibleOptions();
-                    this.highlightedIndex = vis.length - 1;
-                    this.applyHighlight();
-                    break;
-                }
-                case 'Enter':
-                case ' ': {
-                    e.preventDefault();
-                    const current = this.getVisibleOptions()[this.highlightedIndex];
-                    if (current && !current.disabled) {
-                        current.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
-                    }
-                    break;
-                }
-            }
-        };
-        this.onFilterInput = (e) => {
-            var _a;
-            const term = e.target.value.toLowerCase();
-            let anyVisible = false;
-            for (const opt of this.options) {
-                const text = ((_a = opt.textContent) !== null && _a !== void 0 ? _a : '').toLowerCase();
-                const match = text.includes(term);
-                opt.style.display = match ? '' : 'none';
-                if (match)
-                    anyVisible = true;
-            }
-            this.hasFilterResults = anyVisible;
-            this.highlightedIndex = 0;
-            this.applyHighlight();
-        };
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Watchers
-    // ──────────────────────────────────────────────────────────────
-    onThemeChange() {
-        this.syncChildThemes();
-    }
-    onCompactChange() {
-        this.syncChildCompact();
-    }
-    onValueChange() {
-        this.syncSelectionFromValue();
-    }
-    onIsOpenChange(open) {
-        this.toggle.emit({ open });
-        if (open) {
-            this.updateDropdownDirection();
-            this.highlightedIndex = this.getFirstHighlightIndex();
-            this.applyHighlight();
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = this.filterInputEl) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-        }
-        else {
-            this.clearHighlight();
-            this.highlightedIndex = -1;
-            this.resetFilter();
-        }
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Lifecycle
-    // ──────────────────────────────────────────────────────────────
-    connectedCallback() {
-        document.addEventListener('mousedown', this.onClickOutside, true);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.onClickOutside, true);
-    }
-    componentDidLoad() {
-        this.collectOptions();
-        this.syncSelectionFromValue();
-        this.syncChildThemes();
-        this.syncChildCompact();
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Public methods
-    // ──────────────────────────────────────────────────────────────
-    /** Programmatically opens the dropdown. */
-    async open() {
-        this.isOpen = true;
-    }
-    /** Programmatically closes the dropdown. */
-    async close() {
-        this.isOpen = false;
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Event listeners
-    // ──────────────────────────────────────────────────────────────
-    onOptionUpdate(e) {
-        var _a;
-        e.stopPropagation();
-        this.value = e.detail.value;
-        this.syncSelectionFromValue();
-        this.change.emit({ name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' });
-        this.isOpen = false;
-        forceUpdate(this.host);
-        requestAnimationFrame(() => {
-            this.triggerEl.focus();
-        });
-    }
-    onSlotChange() {
-        this.collectOptions();
-        this.syncSelectionFromValue();
-        this.syncChildThemes();
-        this.syncChildCompact();
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Private helpers
-    // ──────────────────────────────────────────────────────────────
-    collectOptions() {
-        this.options = Array.from(this.host.querySelectorAll('diwa-select-option'));
-    }
-    syncSelectionFromValue() {
-        for (const opt of this.options) {
-            const shouldBeSelected = opt.value !== undefined && opt.value === this.value;
-            if (opt.selected !== shouldBeSelected) {
-                opt.selected = shouldBeSelected;
-                forceUpdate(opt);
-            }
-        }
-    }
-    syncChildThemes() {
-        for (const opt of this.options) {
-            if (opt.theme !== this.theme) {
-                opt.theme = this.theme;
-                forceUpdate(opt);
-            }
-        }
-    }
-    syncChildCompact() {
-        for (const opt of this.options) {
-            if (opt.compact !== this.compact) {
-                opt.compact = this.compact;
-                forceUpdate(opt);
-            }
-        }
-    }
-    getVisibleOptions() {
-        return this.options.filter((o) => !o.disabled && o.style.display !== 'none');
-    }
-    getFirstHighlightIndex() {
-        const visible = this.getVisibleOptions();
-        const firstSelected = visible.findIndex((o) => o.selected);
-        return firstSelected >= 0 ? firstSelected : 0;
-    }
-    applyHighlight() {
-        const visible = this.getVisibleOptions();
-        visible.forEach((opt, i) => {
-            opt.highlighted = i === this.highlightedIndex;
-        });
-    }
-    clearHighlight() {
-        for (const opt of this.options) {
-            if (opt.highlighted)
-                opt.highlighted = false;
-        }
-        this.highlightedIndex = -1;
-    }
-    updateDropdownDirection() {
-        if (this.dropdownDirection !== 'auto') {
-            this.dropdownClass = this.dropdownDirection === 'up' ? 'dropdown dropdown--up' : 'dropdown';
-            return;
-        }
-        const rect = this.triggerEl.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom;
-        this.dropdownClass = spaceBelow < 260 ? 'dropdown dropdown--up' : 'dropdown';
-    }
-    resetFilter() {
-        if (this.filterInputEl)
-            this.filterInputEl.value = '';
-        this.hasFilterResults = true;
-        for (const opt of this.options) {
-            opt.style.display = '';
-        }
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Computed display values
-    // ──────────────────────────────────────────────────────────────
-    get selectedLabel() {
-        var _a;
-        const selected = this.options.find((o) => o.value !== undefined && o.value === this.value);
-        return ((_a = selected === null || selected === void 0 ? void 0 : selected.textContent) !== null && _a !== void 0 ? _a : '').trim();
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        const labelId = `${this.internalId}-label`;
-        const listboxId = `${this.internalId}-listbox`;
-        const hintId = `${this.internalId}-hint`;
-        const hasMessage = !!this.message && this.state !== 'none';
-        const hasValue = this.value !== undefined && this.value !== '';
-        const displayLabel = hasValue ? this.selectedLabel : undefined;
-        return (h(Host, { key: '3ddf86c6e8e2cf807768ca8b209aad8a5c8da5fc', "data-theme": this.theme }, h("style", { key: 'c0244dc80bc55386fbb8b5a87c5130f94b287008', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: '8ba197493fd4514a3f53b7e8d7f64da5adc4ef39', class: "label", id: labelId, part: "label" }, h("slot", { key: '994d35d52e2dbb6c402a0a0bea42032367aa31b9', name: "label" }, this.label), this.required && h("span", { key: '5c5c38c33bd4452270378f556204dece249b48eb', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: 'addd8e741c169b88210f9b7ac93acd4450a02279', class: "description", part: "description" }, h("slot", { key: 'a36853c06f747e2d1e67b633ffc749881261f697', name: "description" }, this.description))), h("div", { key: '8f281c76cb95f7908c258e4c268199e98bb26702', class: "trigger", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId, "aria-labelledby": this.label ? labelId : undefined, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-describedby": hasMessage ? hintId : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown, ref: (el) => (this.triggerEl = el), part: "trigger" }, h("span", { key: 'fbf9388b481d492ae2c1a9dceca6e0144d99f7a7', class: `trigger__value${!displayLabel ? ' trigger__placeholder' : ''}`, part: "value" }, displayLabel !== null && displayLabel !== void 0 ? displayLabel : (this.label || 'Select an option')), h("span", { key: 'df535dcb6ad2ab76f910fd5c04ac6138e7f3759d', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: 'd21f5ea814c41c59ab2b3d2abc1c14f839619f4e', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '08b69903e085e0ec9379bfb552dd058b293924f1', points: "6 9 12 15 18 9" })))), h("div", { key: '89f3400afb3e4ab984e42f413b0f34434155b0ff', class: this.dropdownClass, role: "listbox", id: listboxId, "aria-multiselectable": "false", "aria-labelledby": this.label ? labelId : undefined, part: "dropdown" }, h("div", { key: 'a4242becefb0417a2c70c39bcd7cd4c523961046', class: "filter", part: "filter" }, h("input", { key: '79b965331aed2dd3d7607fe00dfc329c88aa6edd', class: "filter__input", type: "text", placeholder: "Filter options\u2026", "aria-label": "Filter options", onInput: this.onFilterInput, ref: (el) => (this.filterInputEl = el), part: "filter-input" })), h("div", { key: '06e022229e36d9214590809c201b2665e9a36152', class: "options", part: "options" }, !this.hasFilterResults && (h("div", { key: '67b8e26c137b2abbe03dde407d784e6caa915245', class: "no-results", "aria-live": "polite" }, "No options found")), h("slot", { key: 'a6cfe5c0249767c1b3537d4413760a2d66b63e5f' }))), hasMessage && (h("span", { key: 'e3093360156dab2d6f9a04cb9209d969f43dacd0', class: "message", id: hintId, role: "status", part: "message" }, h("slot", { key: 'dd9b2b269840618318506de2e6b85496faa167a3', name: "message" }, this.message)))));
-    }
-    static get delegatesFocus() { return true; }
-    get host() { return this; }
-    static get watchers() { return {
-        "theme": ["onThemeChange"],
-        "compact": ["onCompactChange"],
-        "value": ["onValueChange"],
-        "isOpen": ["onIsOpenChange"]
-    }; }
-}, [17, "diwa-select", {
-        "theme": [513],
-        "label": [1],
-        "description": [1],
-        "name": [1],
-        "value": [1025],
-        "state": [513],
-        "message": [1],
-        "hideLabel": [516, "hide-label"],
-        "disabled": [516],
-        "required": [4],
-        "compact": [516],
-        "dropdownDirection": [1, "dropdown-direction"],
-        "isOpen": [32],
-        "hasFilterResults": [32],
-        "dropdownClass": [32],
-        "open": [64],
-        "close": [64]
-    }, [[0, "diwaSelectOptionUpdate", "onOptionUpdate"], [0, "slotchange", "onSlotChange"]], {
-        "theme": ["onThemeChange"],
-        "compact": ["onCompactChange"],
-        "value": ["onValueChange"],
-        "isOpen": ["onIsOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-select"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaSelect$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaSelect = DiwaSelect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaSelect, defineCustomElement };
-
-//# sourceMappingURL=diwa-select.js.map
+import{t as i,p as n,H as t,c as e,f as a,h as r,a as o}from"./index.js";import{b as s,a as d}from"./p-C8h0Vfqp.js";const h=(i,n,t,e,a=!1)=>`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    min-width: 0;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Label ──────────────────────────────────────────────────────────── */\n\n  .label {\n    display: block;\n    margin-bottom: var(--diwa-space-1);\n    font-size: var(--diwa-font-size-sm);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n    cursor: default;\n  }\n\n  :host([hide-label]) .label {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  .label__required {\n    color: var(--diwa-notification-error);\n    font-weight: var(--diwa-font-weight-semibold);\n    margin-left: var(--diwa-space-1);\n  }\n\n  /* ── Description ────────────────────────────────────────────────────── */\n\n  .description {\n    display: block;\n    margin-bottom: var(--diwa-space-2);\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Trigger ────────────────────────────────────────────────────────── */\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-height: var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px));\n    padding: 0 var(--diwa-space-3);\n    box-sizing: border-box;\n    gap: var(--diwa-space-2);\n\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\n\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-normal);\n    font-family: inherit;\n    color: var(--diwa-text-primary);\n    text-align: left;\n    line-height: 1;\n\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast);\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    :host(:not([disabled])) .trigger:hover {\n      border-color: var(--diwa-border-hover);\n    }\n  }\n\n  ${i&&!a?".trigger { border-color: var(--diwa-border-focus); border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0; }":""}\n  ${i&&a?".trigger { border-color: var(--diwa-border-focus); border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)); }":""}\n\n  /* ── Focus ring on trigger itself ───────────────────────────────────── */\n\n  ${s(".trigger")}\n\n  /* ── Selected text ──────────────────────────────────────────────────── */\n\n  .trigger__value {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .trigger__placeholder {\n    color: var(--diwa-text-secondary);\n  }\n\n  /* ── Chevron icon ───────────────────────────────────────────────────── */\n\n  .trigger__chevron {\n    flex-shrink: 0;\n    width: var(--diwa-icon-size-md);\n    height: var(--diwa-icon-size-md);\n    color: var(--diwa-text-secondary);\n    transition: transform var(--diwa-transition-fast);\n    ${i?"transform: rotate(180deg);":""}\n  }\n\n  .trigger__chevron svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  /* ── Dropdown panel ─────────────────────────────────────────────────── */\n\n  .dropdown {\n    position: absolute;\n    left: 0;\n    right: 0;\n    z-index: var(--diwa-z-dropdown);\n    background-color: var(--diwa-bg-elevated);\n    border: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\n    border-top: none;\n    border-radius: 0 0 var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md));\n    overflow: hidden;\n    box-shadow: var(--diwa-shadow-lg);\n    display: ${i?"block":"none"};\n  }\n\n  .dropdown--up {\n    top: auto;\n    bottom: 100%;\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border-focus);\n    border-bottom: none;\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md)) var(--diwa-input-radius, var(--diwa-radius-md)) 0 0;\n    margin-bottom: -1px;\n  }\n\n  /* ── Filter input ───────────────────────────────────────────────────── */\n\n  .filter {\n    padding: var(--diwa-space-2) var(--diwa-space-2) var(--diwa-space-1);\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-input-border);\n  }\n\n  .filter__input {\n    width: 100%;\n    box-sizing: border-box;\n    padding: var(--diwa-space-2) var(--diwa-space-3);\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid var(--diwa-input-border);\n    border-radius: var(--diwa-radius-sm);\n    color: var(--diwa-text-primary);\n    font-size: var(--diwa-font-size-sm);\n    font-family: inherit;\n    outline: none;\n    transition: border-color var(--diwa-transition-fast);\n  }\n\n  .filter__input::placeholder {\n    color: var(--diwa-text-secondary);\n  }\n\n  .filter__input:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: var(--diwa-focus-ring-offset);\n  }\n\n  .filter__input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  /* ── Options list ───────────────────────────────────────────────────── */\n\n  .options {\n    max-height: var(--diwa-select-dropdown-max-height);\n    overflow-y: auto;\n    padding: var(--diwa-space-1);\n  }\n\n  .options::-webkit-scrollbar {\n    width: var(--diwa-scrollbar-width);\n  }\n\n  .options::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .options::-webkit-scrollbar-thumb {\n    background-color: var(--diwa-border);\n    border-radius: var(--diwa-radius-sm);\n  }\n\n  /* ── Compact ────────────────────────────────────────────────────────── */\n\n  :host([compact]) .trigger {\n    min-height: var(--diwa-touch-target-min-size-compact, 32px);\n    font-size: var(--diwa-font-size-md);\n    padding: 0 var(--diwa-space-2);\n  }\n\n  /* ── States: error / success ────────────────────────────────────────── */\n\n  :host([state="error"]) .trigger {\n    border-color: var(--diwa-notification-error);\n  }\n\n  :host([state="success"]) .trigger {\n    border-color: var(--diwa-notification-success);\n  }\n\n  /* ── Message ────────────────────────────────────────────────────────── */\n\n  .message {\n    display: block;\n    margin-top: var(--diwa-space-1);\n    font-size: var(--diwa-font-size-sm);\n    line-height: var(--diwa-line-height-normal);\n    color: var(--diwa-text-secondary);\n  }\n\n  :host([state="error"]) .message {\n    color: var(--diwa-notification-error);\n  }\n\n  :host([state="success"]) .message {\n    color: var(--diwa-notification-success);\n  }\n\n  /* ── Disabled ───────────────────────────────────────────────────────── */\n\n  :host([disabled]) .trigger {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .label {\n    opacity: var(--diwa-opacity-disabled);\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${d(".trigger",".trigger__chevron",".filter__input")}\n`;let c=0;const l=n(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.change=e(this,"change",7),this.toggle=e(this,"toggle",3),this.blur=e(this,"blur",3),this.theme="dark",this.name="",this.state="none",this.hideLabel=!1,this.disabled=!1,this.required=!1,this.compact=!1,this.dropdownDirection="auto",this.isOpen=!1,this.hasFilterResults=!0,this.dropdownClass="dropdown",this.internalId="diwa-s-"+ ++c,this.options=[],this.highlightedIndex=-1,this.onClickOutside=i=>{this.isOpen&&(i.composedPath().includes(this.host)||(this.isOpen=!1,this.blur.emit()))},this.onTriggerClick=()=>{this.disabled||(this.isOpen=!this.isOpen)},this.onTriggerKeyDown=i=>{if(!this.disabled)if(this.isOpen)switch(i.key){case"Escape":case"Tab":i.preventDefault(),this.isOpen=!1,this.triggerEl.focus();break;case"ArrowDown":{i.preventDefault();const n=this.getVisibleOptions();this.highlightedIndex=Math.min(this.highlightedIndex+1,n.length-1),this.applyHighlight();break}case"ArrowUp":i.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0),this.applyHighlight();break;case"Home":i.preventDefault(),this.highlightedIndex=0,this.applyHighlight();break;case"End":{i.preventDefault();const n=this.getVisibleOptions();this.highlightedIndex=n.length-1,this.applyHighlight();break}case"Enter":case" ":{i.preventDefault();const n=this.getVisibleOptions()[this.highlightedIndex];n&&!n.disabled&&n.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}));break}}else"ArrowDown"!==i.key&&"ArrowUp"!==i.key&&"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),this.isOpen=!0)},this.onFilterInput=i=>{var n;const t=i.target.value.toLowerCase();let e=!1;for(const i of this.options){const a=(null!==(n=i.textContent)&&void 0!==n?n:"").toLowerCase().includes(t);i.style.display=a?"":"none",a&&(e=!0)}this.hasFilterResults=e,this.highlightedIndex=0,this.applyHighlight()}}onThemeChange(){this.syncChildThemes()}onCompactChange(){this.syncChildCompact()}onValueChange(){this.syncSelectionFromValue()}onIsOpenChange(i){this.toggle.emit({open:i}),i?(this.updateDropdownDirection(),this.highlightedIndex=this.getFirstHighlightIndex(),this.applyHighlight(),requestAnimationFrame((()=>{var i;null===(i=this.filterInputEl)||void 0===i||i.focus()}))):(this.clearHighlight(),this.highlightedIndex=-1,this.resetFilter())}connectedCallback(){document.addEventListener("mousedown",this.onClickOutside,!0)}disconnectedCallback(){document.removeEventListener("mousedown",this.onClickOutside,!0)}componentDidLoad(){this.collectOptions(),this.syncSelectionFromValue(),this.syncChildThemes(),this.syncChildCompact()}async open(){this.isOpen=!0}async close(){this.isOpen=!1}onOptionUpdate(i){var n;i.stopPropagation(),this.value=i.detail.value,this.syncSelectionFromValue(),this.change.emit({name:this.name,value:null!==(n=this.value)&&void 0!==n?n:""}),this.isOpen=!1,a(this.host),requestAnimationFrame((()=>{this.triggerEl.focus()}))}onSlotChange(){this.collectOptions(),this.syncSelectionFromValue(),this.syncChildThemes(),this.syncChildCompact()}collectOptions(){this.options=Array.from(this.host.querySelectorAll("diwa-select-option"))}syncSelectionFromValue(){for(const i of this.options){const n=void 0!==i.value&&i.value===this.value;i.selected!==n&&(i.selected=n,a(i))}}syncChildThemes(){for(const i of this.options)i.theme!==this.theme&&(i.theme=this.theme,a(i))}syncChildCompact(){for(const i of this.options)i.compact!==this.compact&&(i.compact=this.compact,a(i))}getVisibleOptions(){return this.options.filter((i=>!i.disabled&&"none"!==i.style.display))}getFirstHighlightIndex(){const i=this.getVisibleOptions().findIndex((i=>i.selected));return i>=0?i:0}applyHighlight(){this.getVisibleOptions().forEach(((i,n)=>{i.highlighted=n===this.highlightedIndex}))}clearHighlight(){for(const i of this.options)i.highlighted&&(i.highlighted=!1);this.highlightedIndex=-1}updateDropdownDirection(){if("auto"!==this.dropdownDirection)return void(this.dropdownClass="up"===this.dropdownDirection?"dropdown dropdown--up":"dropdown");const i=this.triggerEl.getBoundingClientRect(),n=window.innerHeight-i.bottom;this.dropdownClass=n<260?"dropdown dropdown--up":"dropdown"}resetFilter(){this.filterInputEl&&(this.filterInputEl.value=""),this.hasFilterResults=!0;for(const i of this.options)i.style.display=""}get selectedLabel(){var i;const n=this.options.find((i=>void 0!==i.value&&i.value===this.value));return(null!==(i=null==n?void 0:n.textContent)&&void 0!==i?i:"").trim()}render(){const i=this.internalId+"-label",n=this.internalId+"-listbox",t=this.internalId+"-hint",e=!!this.message&&"none"!==this.state,a=void 0!==this.value&&""!==this.value?this.selectedLabel:void 0;return r(o,{key:"3ddf86c6e8e2cf807768ca8b209aad8a5c8da5fc","data-theme":this.theme},r("style",{key:"c0244dc80bc55386fbb8b5a87c5130f94b287008",innerHTML:h(this.isOpen,0,0,0,this.dropdownClass.includes("--up"))}),(this.label||this.host.querySelector('[slot="label"]'))&&r("span",{key:"8ba197493fd4514a3f53b7e8d7f64da5adc4ef39",class:"label",id:i,part:"label"},r("slot",{key:"994d35d52e2dbb6c402a0a0bea42032367aa31b9",name:"label"},this.label),this.required&&r("span",{key:"5c5c38c33bd4452270378f556204dece249b48eb",class:"label__required","aria-hidden":"true"},"*")),(this.description||this.host.querySelector('[slot="description"]'))&&r("span",{key:"addd8e741c169b88210f9b7ac93acd4450a02279",class:"description",part:"description"},r("slot",{key:"a36853c06f747e2d1e67b633ffc749881261f697",name:"description"},this.description)),r("div",{key:"8f281c76cb95f7908c258e4c268199e98bb26702",class:"trigger",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-controls":n,"aria-labelledby":this.label?i:void 0,"aria-required":this.required?"true":void 0,"aria-invalid":"error"===this.state?"true":void 0,"aria-describedby":e?t:void 0,tabIndex:this.disabled?-1:0,onClick:this.onTriggerClick,onKeyDown:this.onTriggerKeyDown,ref:i=>this.triggerEl=i,part:"trigger"},r("span",{key:"fbf9388b481d492ae2c1a9dceca6e0144d99f7a7",class:"trigger__value"+(a?"":" trigger__placeholder"),part:"value"},null!=a?a:this.label||"Select an option"),r("span",{key:"df535dcb6ad2ab76f910fd5c04ac6138e7f3759d",class:"trigger__chevron","aria-hidden":"true",part:"chevron"},r("svg",{key:"d21f5ea814c41c59ab2b3d2abc1c14f839619f4e",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("polyline",{key:"08b69903e085e0ec9379bfb552dd058b293924f1",points:"6 9 12 15 18 9"})))),r("div",{key:"89f3400afb3e4ab984e42f413b0f34434155b0ff",class:this.dropdownClass,role:"listbox",id:n,"aria-multiselectable":"false","aria-labelledby":this.label?i:void 0,part:"dropdown"},r("div",{key:"a4242becefb0417a2c70c39bcd7cd4c523961046",class:"filter",part:"filter"},r("input",{key:"79b965331aed2dd3d7607fe00dfc329c88aa6edd",class:"filter__input",type:"text",placeholder:"Filter options…","aria-label":"Filter options",onInput:this.onFilterInput,ref:i=>this.filterInputEl=i,part:"filter-input"})),r("div",{key:"06e022229e36d9214590809c201b2665e9a36152",class:"options",part:"options"},!this.hasFilterResults&&r("div",{key:"67b8e26c137b2abbe03dde407d784e6caa915245",class:"no-results","aria-live":"polite"},"No options found"),r("slot",{key:"a6cfe5c0249767c1b3537d4413760a2d66b63e5f"}))),e&&r("span",{key:"e3093360156dab2d6f9a04cb9209d969f43dacd0",class:"message",id:t,role:"status",part:"message"},r("slot",{key:"dd9b2b269840618318506de2e6b85496faa167a3",name:"message"},this.message)))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{theme:[{onThemeChange:0}],compact:[{onCompactChange:0}],value:[{onValueChange:0}],isOpen:[{onIsOpenChange:0}]}}},[273,"diwa-select",{theme:[513],label:[1],description:[1],name:[1],value:[1025],state:[513],message:[1],hideLabel:[516,"hide-label"],disabled:[516],required:[4],compact:[516],dropdownDirection:[1,"dropdown-direction"],isOpen:[32],hasFilterResults:[32],dropdownClass:[32],open:[64],close:[64]},[[0,"diwaSelectOptionUpdate","onOptionUpdate"],[0,"slotchange","onSlotChange"]],{theme:[{onThemeChange:0}],compact:[{onCompactChange:0}],value:[{onValueChange:0}],isOpen:[{onIsOpenChange:0}]}]);function p(){"undefined"!=typeof customElements&&["diwa-select"].forEach((n=>{"diwa-select"===n&&(customElements.get(i(n))||customElements.define(i(n),l))}))}p();const b=l,w=p;export{b as DiwaSelect,w as defineCustomElement}