@diwacopilot/components 1.0.0

package/dist/esm/diwa-select.entry.js

@@ -0,0 +1,558 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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();
+    }
+    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();
+    }
+    // ──────────────────────────────────────────────────────────────
+    // 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();
+    }
+    // ──────────────────────────────────────────────────────────────
+    // 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);
+            }
+        }
+    }
+    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: '6ac13f8139797b9a4802dbb2ca5c0f2efef83b03', "data-theme": this.theme }, h("style", { key: 'f686db5aa753249a2d4f9b5b315dd47e3ddc26a8', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: 'cdf62e4a62423bb2a36d009e9ad9b3c6269b3e12', class: "label", id: labelId, part: "label" }, h("slot", { key: '3e935b34db20515e579b493fbf59530f7c696756', name: "label" }, this.label), this.required && h("span", { key: 'd85f9b81784e63695460dc80c8569363fb35ef98', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: '48858e2fdb26f2e4004f4e0a6e269a672e4b195b', class: "description", part: "description" }, h("slot", { key: '0ccb1b9edf46c77d66d216a543807c21cd44496d', name: "description" }, this.description))), h("div", { key: '0a937903a8ddafc0a56fb6ccf727a5f802c77580', 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: '48a00505d9cd62e4f3a4070655917c706b4ee2e3', class: `trigger__value${!displayLabel ? ' trigger__placeholder' : ''}`, part: "value" }, displayLabel !== null && displayLabel !== void 0 ? displayLabel : (this.label || 'Select an option')), h("span", { key: '4d5c0157792d93dffe4473bbb5adc7c5982fc996', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '802726305d35207d83d2c6ee3d0dd087dd6a33ee', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '658cb6b58e2505e6859b631541aa1b5bd2e76449', points: "6 9 12 15 18 9" })))), h("div", { key: 'b5f575565ed95ecf1a6111f527b1d6d0841e5076', class: this.dropdownClass, role: "listbox", id: listboxId, "aria-multiselectable": "false", "aria-labelledby": this.label ? labelId : undefined, part: "dropdown" }, h("div", { key: 'b51dc6327202a6d0113e03529fe76c52273b3023', class: "filter", part: "filter" }, h("input", { key: '1ad613a67c9c29086688016be3ccce2b260024d8', 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: 'abf099e79d273e293cc554cb50b139181af2da8b', class: "options", part: "options" }, !this.hasFilterResults && (h("div", { key: '9f7ffcd99df289bd35549fb548aa835bffbd4af1', class: "no-results", "aria-live": "polite" }, "No options found")), h("slot", { key: '1a56431405d701e4a89d66eb7918ba85245b189b' }))), hasMessage && (h("span", { key: '0a361efb6406ec19bf8ad8e94c4397c78cf5b32c', class: "message", id: hintId, role: "status", part: "message" }, h("slot", { key: 'f114d282d9785713e489a3f3b0fa96480569e184', name: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "theme": ["onThemeChange"],
+        "value": ["onValueChange"],
+        "isOpen": ["onIsOpenChange"]
+    }; }
+};
+
+export { DiwaSelect as diwa_select };
+
+//# sourceMappingURL=diwa-select.entry.js.map