@diwacopilot/components 1.2.0 → 1.2.1

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

@@ -1,683 +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 button ─────────────────────────────────────────────────── */
-
-  .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 (not when a shadow descendant is focused) ─ */
-
-  ${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);
-  }
-
-  /* ── Reset button ───────────────────────────────────────────────────── */
-
-  .trigger__reset {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--diwa-touch-target-min-size, 44px);
-    height: var(--diwa-touch-target-min-size, 44px);
-    padding: 0;
-    border: none;
-    background: none;
-    color: var(--diwa-text-secondary);
-    cursor: pointer;
-    border-radius: var(--diwa-radius-sm);
-    line-height: 0;
-    font-size: var(--diwa-font-size-base);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .trigger__reset:hover {
-      color: var(--diwa-text-primary);
-    }
-  }
-
-  .trigger__reset:focus-visible {
-    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);
-    outline-offset: -2px;
-  }
-
-  .trigger__reset:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  /* ── 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 multiSelectIdCounter = 0;
-const DiwaMultiSelect$1 = /*@__PURE__*/ proxyCustomElement(class DiwaMultiSelect 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 = '';
-        /** Currently selected values. Mutable — updated on user interaction. */
-        this.value = [];
-        /** 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.filterText = '';
-        this.hasFilterResults = true;
-        this.dropdownClass = 'dropdown';
-        // ──────────────────────────────────────────────────────────────
-        // Private refs / tracking
-        // ──────────────────────────────────────────────────────────────
-        this.internalId = `diwa-ms-${++multiSelectIdCounter}`;
-        this.options = [];
-        this.highlightedIndex = -1;
-        this.hasCustomFilterSlot = false;
-        this.hasCustomSelectedSlot = false;
-        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();
-            this.filterText = term;
-            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;
-            // Reset highlight to first visible
-            this.highlightedIndex = 0;
-            this.applyHighlight();
-        };
-        this.onResetClick = (e) => {
-            e.stopPropagation();
-            this.value = [];
-            this.syncSelectionFromValue();
-            this.change.emit({ name: this.name, value: [] });
-            forceUpdate(this.host);
-            this.triggerEl.focus();
-        };
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Watchers
-    // ──────────────────────────────────────────────────────────────
-    onThemeChange() {
-        this.syncChildThemes();
-    }
-    onCompactChange() {
-        this.syncChildCompact();
-    }
-    onValueChange() {
-        this.syncSelectionFromValue();
-    }
-    onIsOpenChange(open) {
-        this.toggle.emit({ open });
-        if (open) {
-            this.updateDropdownDirection();
-            // Move highlight to first selected option, or first option
-            this.highlightedIndex = this.getFirstHighlightIndex();
-            this.applyHighlight();
-            // Focus filter when opening
-            requestAnimationFrame(() => {
-                var _a;
-                if (!this.hasCustomFilterSlot) {
-                    (_a = this.filterInputEl) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            });
-        }
-        else {
-            this.clearHighlight();
-            this.highlightedIndex = -1;
-            if (!this.hasCustomFilterSlot) {
-                this.resetFilter();
-            }
-        }
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Lifecycle
-    // ──────────────────────────────────────────────────────────────
-    connectedCallback() {
-        document.addEventListener('mousedown', this.onClickOutside, true);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.onClickOutside, true);
-    }
-    componentWillLoad() {
-        this.hasCustomFilterSlot = this.host.querySelector('[slot="filter"]') !== null;
-        this.hasCustomSelectedSlot = this.host.querySelector('[slot="selected"]') !== null;
-    }
-    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) {
-        e.stopPropagation();
-        const { value, selected } = e.detail;
-        if (selected) {
-            if (!this.value.includes(value)) {
-                this.value = [...this.value, value];
-            }
-        }
-        else {
-            this.value = this.value.filter((v) => v !== value);
-        }
-        this.syncSelectionFromValue();
-        this.change.emit({ name: this.name, value: this.value });
-        forceUpdate(this.host);
-    }
-    onSlotChange() {
-        this.collectOptions();
-        this.syncSelectionFromValue();
-        this.syncChildThemes();
-        this.syncChildCompact();
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Private helpers
-    // ──────────────────────────────────────────────────────────────
-    collectOptions() {
-        this.options = Array.from(this.host.querySelectorAll('diwa-multi-select-option'));
-    }
-    syncSelectionFromValue() {
-        const valueSet = new Set(this.value);
-        for (const opt of this.options) {
-            const shouldBeSelected = valueSet.has(opt.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() {
-        this.filterText = '';
-        if (this.filterInputEl)
-            this.filterInputEl.value = '';
-        this.hasFilterResults = true;
-        for (const opt of this.options) {
-            opt.style.display = '';
-        }
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Computed display values
-    // ──────────────────────────────────────────────────────────────
-    get selectedLabels() {
-        return this.options
-            .filter((o) => this.value.includes(o.value))
-            .map((o) => { var _a; return ((_a = o.textContent) !== null && _a !== void 0 ? _a : '').trim(); })
-            .filter(Boolean)
-            .join(', ');
-    }
-    // ──────────────────────────────────────────────────────────────
-    // 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.length > 0;
-        return (h(Host, { key: 'f20b6581c9e60236f375f1b79139815b4f5d9c9e', "data-theme": this.theme }, h("style", { key: 'a2ddb28813ba51cf7ee030263c1b5cd260ff28ad', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: '737abd1e95d14587d6000db252939db616505466', class: "label", id: labelId, part: "label" }, h("slot", { key: '02d2e507ad802c161fa794b29bfb2e3a89bba333', name: "label" }, this.label), this.required && h("span", { key: '3293ad8f9c7979a4214bc0eef9d781941819d270', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: 'fd82e469c37a3044d913a06958a864f2419c65b3', class: "description", part: "description" }, h("slot", { key: 'b5871b765b1c4893d6b00955ccc6bd7a6def3fc5', name: "description" }, this.description))), h("div", { key: '069e8360136e98b0896daabcaa20872eddb9177e', 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: '259bdbc4cbd76e47b4cefade89ca80e09aa4a0d4', class: `trigger__value${!hasValue ? ' trigger__placeholder' : ''}`, part: "value" }, this.hasCustomSelectedSlot ? (h("slot", { name: "selected" })) : hasValue ? (this.selectedLabels) : (this.label || 'Select options')), hasValue && (h("button", { key: '36defe25675609a09f59d11a658414e473c553af', class: "trigger__reset", type: "button", "aria-label": "Reset selection", onClick: this.onResetClick, onKeyDown: (e) => {
-                if (e.key === 'Tab')
-                    this.isOpen = false;
-            }, part: "reset" }, "\u2715")), h("span", { key: '6b3ae84ccdb3f695eeeedfea33ba395451f91719', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '64e93f928b7b8ae56f95fba89496bc2550cd3302', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a698a050291d0350a672aa60f7a08213b8ee7864', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '96a03b0f283c201eba568b353e33f99c18cd29fa', class: this.dropdownClass, role: "dialog", "aria-label": this.label, "aria-hidden": this.isOpen ? undefined : 'true', part: "dropdown" }, this.hasCustomFilterSlot ? (h("div", { class: "filter" }, h("slot", { name: "filter" }))) : (h("div", { class: "filter" }, h("input", { class: "filter__input", type: "text", placeholder: "Filter options\u2026", "aria-label": "Filter options", autocomplete: "off", value: this.filterText, onInput: this.onFilterInput, onKeyDown: this.onTriggerKeyDown, ref: (el) => (this.filterInputEl = el), part: "filter-input" }))), h("div", { key: '342b37e5cf35be1bc35c26373a8458accd429a52', class: "options", id: listboxId, role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", part: "options" }, !this.hasFilterResults && (h("div", { key: 'ce2ebd9f6f471ae6a4dd9516115a0abe84c20ec7', class: "no-results", role: "alert", "aria-live": "polite" }, "No results found")), h("slot", { key: 'c29c766c84889a205a3b292acd5e4f0e55a99917', name: "options-status" }), h("slot", { key: '32521900a8bc0423c1f7501517763a1af9b99c1b', onSlotchange: () => this.onSlotChange() }))), hasMessage && (h("span", { key: '74a68d28b638f54752d798137ce96c8c551c8857', id: hintId, class: "message", part: "message", "aria-live": this.state === 'error' ? 'polite' : undefined }, h("slot", { key: 'ff4dfbd3a7f9af3ef920d1986f41bd14076247dc', 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-multi-select", {
-        "theme": [513],
-        "label": [1],
-        "description": [1],
-        "name": [1],
-        "value": [1040],
-        "state": [513],
-        "message": [1],
-        "hideLabel": [516, "hide-label"],
-        "disabled": [516],
-        "required": [4],
-        "compact": [516],
-        "dropdownDirection": [1, "dropdown-direction"],
-        "isOpen": [32],
-        "filterText": [32],
-        "hasFilterResults": [32],
-        "dropdownClass": [32],
-        "open": [64],
-        "close": [64]
-    }, [[0, "diwaMultiSelectOptionUpdate", "onOptionUpdate"], [0, "slotchange", "onSlotChange"]], {
-        "theme": ["onThemeChange"],
-        "compact": ["onCompactChange"],
-        "value": ["onValueChange"],
-        "isOpen": ["onIsOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-multi-select"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-multi-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaMultiSelect$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaMultiSelect = DiwaMultiSelect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaMultiSelect, defineCustomElement };
-
-//# sourceMappingURL=diwa-multi-select.js.map
+import{t as i,p as n,H as t,c as e,f as a,h as r,a as s}from"./index.js";import{b as o,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 button ─────────────────────────────────────────────────── */\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 (not when a shadow descendant is focused) ─ */\n\n  ${o(".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  /* ── Reset button ───────────────────────────────────────────────────── */\n\n  .trigger__reset {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-touch-target-min-size, 44px);\n    height: var(--diwa-touch-target-min-size, 44px);\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--diwa-text-secondary);\n    cursor: pointer;\n    border-radius: var(--diwa-radius-sm);\n    line-height: 0;\n    font-size: var(--diwa-font-size-base);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .trigger__reset:hover {\n      color: var(--diwa-text-primary);\n    }\n  }\n\n  .trigger__reset:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: -2px;\n  }\n\n  .trigger__reset:focus:not(:focus-visible) {\n    outline: none;\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 l=0;const c=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.value=[],this.state="none",this.hideLabel=!1,this.disabled=!1,this.required=!1,this.compact=!1,this.dropdownDirection="auto",this.isOpen=!1,this.filterText="",this.hasFilterResults=!0,this.dropdownClass="dropdown",this.internalId="diwa-ms-"+ ++l,this.options=[],this.highlightedIndex=-1,this.hasCustomFilterSlot=!1,this.hasCustomSelectedSlot=!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();this.filterText=t;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()},this.onResetClick=i=>{i.stopPropagation(),this.value=[],this.syncSelectionFromValue(),this.change.emit({name:this.name,value:[]}),a(this.host),this.triggerEl.focus()}}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;this.hasCustomFilterSlot||null===(i=this.filterInputEl)||void 0===i||i.focus()}))):(this.clearHighlight(),this.highlightedIndex=-1,this.hasCustomFilterSlot||this.resetFilter())}connectedCallback(){document.addEventListener("mousedown",this.onClickOutside,!0)}disconnectedCallback(){document.removeEventListener("mousedown",this.onClickOutside,!0)}componentWillLoad(){this.hasCustomFilterSlot=null!==this.host.querySelector('[slot="filter"]'),this.hasCustomSelectedSlot=null!==this.host.querySelector('[slot="selected"]')}componentDidLoad(){this.collectOptions(),this.syncSelectionFromValue(),this.syncChildThemes(),this.syncChildCompact()}async open(){this.isOpen=!0}async close(){this.isOpen=!1}onOptionUpdate(i){i.stopPropagation();const{value:n,selected:t}=i.detail;t?this.value.includes(n)||(this.value=[...this.value,n]):this.value=this.value.filter((i=>i!==n)),this.syncSelectionFromValue(),this.change.emit({name:this.name,value:this.value}),a(this.host)}onSlotChange(){this.collectOptions(),this.syncSelectionFromValue(),this.syncChildThemes(),this.syncChildCompact()}collectOptions(){this.options=Array.from(this.host.querySelectorAll("diwa-multi-select-option"))}syncSelectionFromValue(){const i=new Set(this.value);for(const n of this.options){const t=i.has(n.value);n.selected!==t&&(n.selected=t,a(n))}}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.filterText="",this.filterInputEl&&(this.filterInputEl.value=""),this.hasFilterResults=!0;for(const i of this.options)i.style.display=""}get selectedLabels(){return this.options.filter((i=>this.value.includes(i.value))).map((i=>{var n;return(null!==(n=i.textContent)&&void 0!==n?n:"").trim()})).filter(Boolean).join(", ")}render(){const i=this.internalId+"-label",n=this.internalId+"-listbox",t=this.internalId+"-hint",e=!!this.message&&"none"!==this.state,a=this.value.length>0;return r(s,{key:"f20b6581c9e60236f375f1b79139815b4f5d9c9e","data-theme":this.theme},r("style",{key:"a2ddb28813ba51cf7ee030263c1b5cd260ff28ad",innerHTML:h(this.isOpen,0,0,0,this.dropdownClass.includes("--up"))}),(this.label||this.host.querySelector('[slot="label"]'))&&r("span",{key:"737abd1e95d14587d6000db252939db616505466",class:"label",id:i,part:"label"},r("slot",{key:"02d2e507ad802c161fa794b29bfb2e3a89bba333",name:"label"},this.label),this.required&&r("span",{key:"3293ad8f9c7979a4214bc0eef9d781941819d270",class:"label__required","aria-hidden":"true"},"*")),(this.description||this.host.querySelector('[slot="description"]'))&&r("span",{key:"fd82e469c37a3044d913a06958a864f2419c65b3",class:"description",part:"description"},r("slot",{key:"b5871b765b1c4893d6b00955ccc6bd7a6def3fc5",name:"description"},this.description)),r("div",{key:"069e8360136e98b0896daabcaa20872eddb9177e",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:"259bdbc4cbd76e47b4cefade89ca80e09aa4a0d4",class:"trigger__value"+(a?"":" trigger__placeholder"),part:"value"},this.hasCustomSelectedSlot?r("slot",{name:"selected"}):a?this.selectedLabels:this.label||"Select options"),a&&r("button",{key:"36defe25675609a09f59d11a658414e473c553af",class:"trigger__reset",type:"button","aria-label":"Reset selection",onClick:this.onResetClick,onKeyDown:i=>{"Tab"===i.key&&(this.isOpen=!1)},part:"reset"},"✕"),r("span",{key:"6b3ae84ccdb3f695eeeedfea33ba395451f91719",class:"trigger__chevron","aria-hidden":"true",part:"chevron"},r("svg",{key:"64e93f928b7b8ae56f95fba89496bc2550cd3302",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r("path",{key:"a698a050291d0350a672aa60f7a08213b8ee7864",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})))),r("div",{key:"96a03b0f283c201eba568b353e33f99c18cd29fa",class:this.dropdownClass,role:"dialog","aria-label":this.label,"aria-hidden":this.isOpen?void 0:"true",part:"dropdown"},r("div",{class:"filter"},this.hasCustomFilterSlot?r("slot",{name:"filter"}):r("input",{class:"filter__input",type:"text",placeholder:"Filter options…","aria-label":"Filter options",autocomplete:"off",value:this.filterText,onInput:this.onFilterInput,onKeyDown:this.onTriggerKeyDown,ref:i=>this.filterInputEl=i,part:"filter-input"})),r("div",{key:"342b37e5cf35be1bc35c26373a8458accd429a52",class:"options",id:n,role:"listbox","aria-label":this.label,"aria-multiselectable":"true",part:"options"},!this.hasFilterResults&&r("div",{key:"ce2ebd9f6f471ae6a4dd9516115a0abe84c20ec7",class:"no-results",role:"alert","aria-live":"polite"},"No results found"),r("slot",{key:"c29c766c84889a205a3b292acd5e4f0e55a99917",name:"options-status"}),r("slot",{key:"32521900a8bc0423c1f7501517763a1af9b99c1b",onSlotchange:()=>this.onSlotChange()}))),e&&r("span",{key:"74a68d28b638f54752d798137ce96c8c551c8857",id:t,class:"message",part:"message","aria-live":"error"===this.state?"polite":void 0},r("slot",{key:"ff4dfbd3a7f9af3ef920d1986f41bd14076247dc",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-multi-select",{theme:[513],label:[1],description:[1],name:[1],value:[1040],state:[513],message:[1],hideLabel:[516,"hide-label"],disabled:[516],required:[4],compact:[516],dropdownDirection:[1,"dropdown-direction"],isOpen:[32],filterText:[32],hasFilterResults:[32],dropdownClass:[32],open:[64],close:[64]},[[0,"diwaMultiSelectOptionUpdate","onOptionUpdate"],[0,"slotchange","onSlotChange"]],{theme:[{onThemeChange:0}],compact:[{onCompactChange:0}],value:[{onValueChange:0}],isOpen:[{onIsOpenChange:0}]}]);function p(){"undefined"!=typeof customElements&&["diwa-multi-select"].forEach((n=>{"diwa-multi-select"===n&&(customElements.get(i(n))||customElements.define(i(n),c))}))}p();const b=c,u=p;export{b as DiwaMultiSelect,u as defineCustomElement}