@diwacopilot/components 1.0.0

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

@@ -0,0 +1,683 @@
+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: 'b64a8c41ae771f58d8ca8778ddb3f943f1e2cac4', "data-theme": this.theme }, h("style", { key: 'd8cc4112b8378f11e5a91874adc6ae3f1e422fa4', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: '53f49aa986fd9f05e73314cc650995afa8b97bb2', class: "label", id: labelId, part: "label" }, h("slot", { key: '7c2f4c19f4d25ca64bfa28f4a4a3f5234594c763', name: "label" }, this.label), this.required && h("span", { key: 'bbd11f3b58d7821ca7ab7ebc8eb0a05e3618a5e9', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: '92a55e0597c3802a2f986d0b9ba10d41ed33356a', class: "description", part: "description" }, h("slot", { key: '0365a7975834cb125e1b65ce482874d99f69af2a', name: "description" }, this.description))), h("div", { key: '293c6bd35a70f57a7e2b0efa930fa61578ab3752', 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: '146365e26a7513974361dfa9dc26410e5e174fd8', 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: 'b1a5018fb507d2d4d4d822af191bef24c6fa558e', 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: '4dbbf50468fc96323e3bd9c92b25e3f34e2ad344', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '0b4f50afe6b0cd6d1ffccb3a8acf5709a8734477', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1c582d3bcf18af529b1d8b2a581f9ef7ad13858e', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'f98fd7dd9d6325a2eafb21880d10d12f4517dc4e', 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: 'edd1c19900c332574d972424a62d117d10cbcda6', class: "options", id: listboxId, role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", part: "options" }, !this.hasFilterResults && (h("div", { key: 'e03ac0ea8790a73bcc15f71fee27c773a1e323f9', class: "no-results", role: "alert", "aria-live": "polite" }, "No results found")), h("slot", { key: '71bd34a1ca8e20245f7bf87bf4cd7be8c5814556', name: "options-status" }), h("slot", { key: 'a7c8ebb35860740c3c19b5f8910b18bf923bc7ff', onSlotchange: () => this.onSlotChange() }))), hasMessage && (h("span", { key: '671515ab8d44ac2fef5cd5f5a398c945de4b2b6e', id: hintId, class: "message", part: "message", "aria-live": this.state === 'error' ? 'polite' : undefined }, h("slot", { key: 'f93922457797ae8cfeb378b3338b537907267c93', 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