@vmz/ui 0.3.6 → 0.3.8

package/src/components/Select.vmz

@@ -1,533 +1,620 @@
-<template>
-    <div data-vmz-ui="select" :data-mode="mode" :data-searchable="searchableAttr" :data-invalid="invalidAttr" :class='"vmz-ui-select" + (open ? " is-opened" : "") + (isMultiple ? " is-multiple" : "")'>
-        <label v-if="label" :for="controlId" class="vmz-ui-select__label">
-            {{ label }}
-        </label>
-        <button type="button" :id="controlId" role="combobox" :disabled="disabled" aria-haspopup="listbox" :aria-expanded="open ? 'true' : 'false'" :aria-controls="listId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :aria-multiselectable="isMultiple ? 'true' : 'false'" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-select__control">
-            <span class="vmz-ui-select__value">
-                {{ displayLabel }}
-            </span>
-            <span aria-hidden="true" class="vmz-ui-select__chev" />
-        </button>
-        <div v-if="open" :id="listId" data-vmz-overlay="select" data-vmz-overlay-owner="select" data-vmz-focus="enter" class="vmz-ui-select__panel">
-            <div v-if="searchable" class="vmz-ui-select__search">
-                <input type="search" data-vmz-select="search" :value="searchQuery" :placeholder="searchPlaceholder" :aria-label="searchPlaceholder" @input="onSearchInput" :onKeyDown="onSearchKeyDown" class="vmz-ui-select__search-input" />
-            </div>
-            <ul role="listbox" :aria-multiselectable="isMultiple ? 'true' : 'false'" tabindex="-1" :onKeyDown="onListKeyDown" class="vmz-ui-select__list">
-                <li v-if="showEmpty" role="presentation" class="vmz-ui-select__empty">
-                    {{ emptyText }}
-                </li>
-                <li v-for="opt in visibleOptions" :key="opt.value" role="presentation">
-                    <button type="button" role="option" :data-vmz-option="opt.value" :aria-selected="opt.selected ? 'true' : 'false'" @click="onOptionClick" :class='"vmz-ui-select__option" + (opt.selected ? " is-on" : "")'>
-                        {{ opt.label }}
-                    </button>
-                </li>
-            </ul>
-            <div v-if="isMultiple" class="vmz-ui-select__footer">
-                <button type="button" data-vmz-select="done" @click="close" class="vmz-ui-select__done">
-                    Done
-                </button>
-            </div>
-        </div>
-        <p v-if="description" :id="descriptionId" class="vmz-ui-select__description">
-            {{ description }}
-        </p>
-        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-select__error">
-            {{ error }}
-        </p>
-    </div>
-</template>
-<style>
-.vmz-ui-select {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    max-width: 28rem;
-}
-
-.vmz-ui-select__label {
-    font: inherit;
-    font-weight: 500;
-    font-size: 0.875rem;
-}
-
-.vmz-ui-select__control {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    width: 100%;
-    min-height: var(--vmz-control-height, 2rem);
-    box-sizing: border-box;
-    font: inherit;
-    font-size: 0.875rem;
-    text-align: left;
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-    border: 1px solid var(--vmz-line-default, #d9d9d9);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper, #fff);
-    color: inherit;
-    outline: none;
-    cursor: pointer;
-    transition:
-        border-color var(--vmz-motion-control-duration, 120ms)
-            var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        box-shadow var(--vmz-motion-control-duration, 120ms)
-            var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
-}
-
-.vmz-ui-select[data-invalid="true"] .vmz-ui-select__control {
-    border-color: var(--vmz-status-danger-accent);
-}
-
-.vmz-ui-select__control:hover:not(:disabled) {
-    border-color: var(--vmz-action-primary-background);
-}
-
-.vmz-ui-select__control:focus-visible,
-.vmz-ui-select.is-opened .vmz-ui-select__control {
-    border-color: var(--vmz-action-primary-background);
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-select__control:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.vmz-ui-select__value {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.vmz-ui-select__chev {
-    flex: 0 0 auto;
-    width: 0.45rem;
-    height: 0.45rem;
-    border-right: 1.5px solid currentColor;
-    border-bottom: 1.5px solid currentColor;
-    transform: rotate(45deg) translate(-1px, -2px);
-    opacity: 0.7;
-}
-
-.vmz-ui-select.is-opened .vmz-ui-select__chev {
-    transform: rotate(225deg) translate(-1px, -1px);
-}
-
-.vmz-ui-select__panel {
-    position: absolute;
-    z-index: 40;
-    top: calc(100% + 0.25rem);
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid var(--vmz-line-default, #d9d9d9);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper, #fff);
-    color: inherit;
-    box-shadow: var(
-        --vmz-shadow-popup,
-        0 6px 16px 0 rgba(0, 0, 0, 0.08),
-        0 3px 6px -4px rgba(0, 0, 0, 0.12)
-    );
-    outline: none;
-}
-
-.vmz-ui-select__search {
-    padding: 0.375rem 0.5rem 0.125rem;
-}
-
-.vmz-ui-select__search-input {
-    width: 100%;
-    box-sizing: border-box;
-    font: inherit;
-    font-size: 0.875rem;
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--vmz-line-default, #d9d9d9);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper, #fff);
-    color: inherit;
-    outline: none;
-}
-
-.vmz-ui-select__search-input:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-select__list {
-    margin: 0;
-    padding: 0.25rem;
-    list-style: none;
-    max-height: 16rem;
-    overflow: auto;
-    outline: none;
-}
-
-.vmz-ui-select__empty {
-    padding: 0.5rem 0.625rem;
-    opacity: 0.7;
-    font-size: 0.92em;
-}
-
-.vmz-ui-select__option {
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    text-align: left;
-    font: inherit;
-    padding: 0.375rem 0.625rem;
-    border: 0;
-    border-radius: var(--vmz-radius-md, 6px);
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-select__option:hover,
-.vmz-ui-select__option:focus-visible {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
-}
-
-.vmz-ui-select__option.is-on {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 28%, transparent);
-    font-weight: 600;
-}
-
-.vmz-ui-select__footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: 0.375rem 0.5rem 0.5rem;
-    border-top: 1px solid var(--vmz-line-default, #d9dee3);
-}
-
-.vmz-ui-select__done {
-    font: inherit;
-    font-weight: 600;
-    padding: 0.25rem 0.7rem;
-    border: 1px solid var(--vmz-line-default, #d9dee3);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper, #fff);
-    color: inherit;
-    cursor: pointer;
-}
-
-.vmz-ui-select__description {
-    margin: 0;
-    opacity: 0.75;
-    font-size: 0.9em;
-}
-
-.vmz-ui-select__error {
-    margin: 0;
-    color: var(--vmz-status-danger-foreground);
-    font-size: 0.9em;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Select.
- * Owned listbox (trigger + panel + role=option). Never native <select> popup.
- * Parent owns value (single) or values (multiple) + options.
- * mode=multiple keeps panel open until Done/Escape; searchable filters visible options.
- */
-export default class Select {
-    public label: string = "";
-    public description: string = "";
-    public error: string = "";
-    /** single mode */
-    public value: string = "";
-    /** multiple mode — parent owns array */
-    public values: string[] = [];
-    public options: Array<{
-        value: string;
-        label: string;
-    }> = [];
-    /** "single" | "multiple" */
-    public mode: string = "single";
-    public searchable: boolean = false;
-    public searchPlaceholder: string = "Search";
-    public emptyText: string = "No matches";
-    public disabled: boolean = false;
-    public invalidAttr: string = "false";
-    public controlId: string = "vmz-select";
-    public listId: string = "vmz-select-list";
-    public descriptionId: string = "vmz-select-desc";
-    public errorId: string = "vmz-select-err";
-    public describedBy: string = "";
-    public onChange:
-        | ((e: {
-              target: {
-                  value: string;
-                  values: string[];
-              };
-          }) => void)
-        | null = null;
-    open = false;
-    displayLabel = "";
-    searchQuery = "";
-    isMultiple = false;
-    searchableAttr = "false";
-    showEmpty = false;
-    visibleOptions: Array<{
-        value: string;
-        label: string;
-        selected: boolean;
-    }> = [];
-    _docKeyHandler = null;
-    _docPointerHandler = null;
-    _observer = null;
-    onMount() {
-        this.listId = `${this.controlId}-list`;
-        this._syncMode();
-        this._rebuildVisible();
-        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
-        const root = this.__vmzDomRoot;
-        if (!root || typeof root.querySelector !== "function") return;
-        this._observer = new MutationObserver(() => this._syncOverlay());
-        this._observer.observe(root, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    onDestroy() {
-        if (this._observer) {
-            this._observer.disconnect();
-            this._observer = null;
-        }
-        this._teardownDoc();
-    }
-    _syncMode() {
-        this.isMultiple = String(this.mode || "single") === "multiple";
-        this.searchableAttr = this.searchable ? "true" : "false";
-    }
-    _selectedSet() {
-        if (this.isMultiple) {
-            return new Set((this.values || []).map((v) => String(v)));
-        }
-        return new Set(this.value ? [String(this.value)] : []);
-    }
-    _rebuildVisible() {
-        this._syncMode();
-        const q = String(this.searchQuery || "")
-            .trim()
-            .toLowerCase();
-        const selected = this._selectedSet();
-        const all = this.options || [];
-        const filtered = !q
-            ? all
-            : all.filter((o) => {
-                  const label = String(o.label || "").toLowerCase();
-                  const value = String(o.value || "").toLowerCase();
-                  return label.includes(q) || value.includes(q);
-              });
-        this.visibleOptions = filtered.map((o) => ({
-            value: String(o.value),
-            label: String(o.label),
-            selected: selected.has(String(o.value)),
-        }));
-        this.showEmpty = this.visibleOptions.length === 0;
-        this._syncLabel();
-    }
-    _syncLabel() {
-        const opts = this.options || [];
-        if (this.isMultiple) {
-            const selected = this._selectedSet();
-            const labels = opts.filter((o) => selected.has(String(o.value))).map((o) => o.label);
-            if (!labels.length) this.displayLabel = "—";
-            else if (labels.length <= 2) this.displayLabel = labels.join(", ");
-            else this.displayLabel = `${labels[0]}, ${labels[1]} +${labels.length - 2}`;
-            return;
-        }
-        const hit = opts.find((o) => String(o.value) === String(this.value));
-        this.displayLabel = hit ? hit.label : this.value || "—";
-    }
-    toggle() {
-        if (this.disabled) return;
-        if (this.open) this.close();
-        else this.openPanel();
-    }
-    openPanel() {
-        this.searchQuery = "";
-        this._rebuildVisible();
-        this.open = true;
-    }
-    close() {
-        this.open = false;
-        this.searchQuery = "";
-        this._rebuildVisible();
-    }
-    _emit(nextValue: string, nextValues: string[]) {
-        const payload = {
-            target: {
-                value: nextValue,
-                values: nextValues,
-            },
-        };
-        this.emit("change", payload);
-        if (typeof this.onChange === "function") {
-            this.onChange(payload);
-        }
-    }
-    /** Parent-owned prop writes (bindComponentProp) — keep derived label/options in sync. */
-    __vmzOnParentProp(name: string) {
-        if (name === "value" || name === "values" || name === "options") this._rebuildVisible();
-    }
-    choose(next: string) {
-        if (!next && next !== "") return;
-        if (this.isMultiple) {
-            const cur = [...(this.values || [])].map(String);
-            const idx = cur.indexOf(String(next));
-            if (idx >= 0) cur.splice(idx, 1);
-            else cur.push(String(next));
-            this.values = cur;
-            this._rebuildVisible();
-            this._emit(cur.join(","), cur);
-            return;
-        }
-        const nextStr = String(next);
-        if (nextStr === String(this.value)) {
-            this.close();
-            return;
-        }
-        this.value = nextStr;
-        this._rebuildVisible();
-        this._emit(nextStr, nextStr ? [nextStr] : []);
-        this.close();
-    }
-    onSearchInput(ev: Event) {
-        const t = ev?.target as HTMLInputElement | null;
-        this.searchQuery = t ? String(t.value || "") : "";
-        this._rebuildVisible();
-    }
-    onSearchKeyDown(ev: KeyboardEvent) {
-        if (!ev) return;
-        if (ev.key === "Escape") {
-            ev.preventDefault();
-            this.close();
-        } else if (ev.key === "ArrowDown") {
-            ev.preventDefault();
-            const root = this.__vmzDomRoot;
-            const first =
-                root && typeof root.querySelector === "function"
-                    ? root.querySelector('[data-vmz-overlay="select"] [role="option"]')
-                    : null;
-            if (first instanceof HTMLElement) first.focus();
-        }
-    }
-    onOptionClick(ev: Event) {
-        const t = ev?.target as Element | null;
-        const el =
-            (t && typeof (t as HTMLElement).closest === "function"
-                ? ((t as HTMLElement).closest("[data-vmz-option]") as HTMLElement | null)
-                : null) || (ev?.currentTarget as HTMLElement | null);
-        const id =
-            el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-option") : null;
-        if (id != null) this.choose(id);
-    }
-    onTriggerKeyDown(ev: KeyboardEvent) {
-        if (!ev || this.disabled) return;
-        if ((ev.key === "ArrowDown" || ev.key === "Enter" || ev.key === " ") && !this.open) {
-            ev.preventDefault();
-            this.openPanel();
-        } else if (ev.key === "Escape" && this.open) {
-            ev.preventDefault();
-            this.close();
-        }
-    }
-    onListKeyDown(ev: KeyboardEvent) {
-        if (!ev) return;
-        if (ev.key === "Escape") {
-            ev.preventDefault();
-            this.close();
-            return;
-        }
-        const root = this.__vmzDomRoot;
-        const list =
-            root && typeof root.querySelector === "function"
-                ? root.querySelector(`[data-vmz-overlay="select"] [role="listbox"]`)
-                : null;
-        if (!list) return;
-        const nodes = [...list.querySelectorAll('[role="option"]')].filter(
-            (n) => n instanceof HTMLElement && n.offsetParent !== null,
-        );
-        if (!nodes.length) return;
-        const idx = nodes.indexOf(document.activeElement as Element);
-        if (ev.key === "ArrowDown") {
-            ev.preventDefault();
-            (nodes[(idx + 1 + nodes.length) % nodes.length] as HTMLElement).focus();
-        } else if (ev.key === "ArrowUp") {
-            ev.preventDefault();
-            (nodes[(idx - 1 + nodes.length) % nodes.length] as HTMLElement).focus();
-        } else if (ev.key === "Home") {
-            ev.preventDefault();
-            (nodes[0] as HTMLElement).focus();
-        } else if (ev.key === "End") {
-            ev.preventDefault();
-            (nodes[nodes.length - 1] as HTMLElement).focus();
-        } else if (ev.key === "Enter" || ev.key === " ") {
-            const active = document.activeElement as HTMLElement | null;
-            const id = active?.getAttribute?.("data-vmz-option");
-            if (id) {
-                ev.preventDefault();
-                this.choose(id);
-            }
-        }
-    }
-    _syncOverlay() {
-        const root = this.__vmzDomRoot;
-        const panel =
-            root && typeof root.querySelector === "function"
-                ? root.querySelector('[data-vmz-overlay="select"][data-vmz-focus="enter"]')
-                : null;
-        if (panel && this.open) this._bindDoc(panel as HTMLElement);
-        else if (!panel) this._teardownDoc();
-        this._rebuildVisible();
-    }
-    _bindDoc(panel: HTMLElement) {
-        if (typeof document === "undefined") return;
-        if (!this._docKeyHandler) {
-            this._docKeyHandler = (ev: KeyboardEvent) => {
-                if (ev.key === "Escape") {
-                    ev.preventDefault();
-                    this.close();
-                }
-            };
-            document.addEventListener("keydown", this._docKeyHandler);
-        }
-        if (!this._docPointerHandler) {
-            const root = this.__vmzDomRoot;
-            this._docPointerHandler = (ev: Event) => {
-                const t = ev.target;
-                if (!(t instanceof Node)) return;
-                if (root && typeof root.contains === "function" && root.contains(t)) return;
-                this.close();
-            };
-            document.addEventListener("pointerdown", this._docPointerHandler, true);
-        }
-        const search = panel.querySelector('[data-vmz-select="search"]');
-        if (search instanceof HTMLElement) {
-            search.focus();
-            return;
-        }
-        const first = panel.querySelector('[role="option"]');
-        if (first instanceof HTMLElement) first.focus();
-        else panel.focus();
-    }
-    _teardownDoc() {
-        if (typeof document !== "undefined") {
-            if (this._docKeyHandler) document.removeEventListener("keydown", this._docKeyHandler);
-            if (this._docPointerHandler) {
-                document.removeEventListener("pointerdown", this._docPointerHandler, true);
-            }
-        }
-        this._docKeyHandler = null;
-        this._docPointerHandler = null;
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="select" :data-mode="mode" :data-searchable="searchableAttr" :data-invalid="invalidAttr" :class='"vmz-ui-select" + (open ? " is-opened" : "") + (isMultiple ? " is-multiple" : "")'>
+        <label v-if="label" :for="controlId" class="vmz-ui-select__label">
+            {{ label }}
+        </label>
+        <div class="vmz-ui-select__field">
+            <button type="button" :id="controlId" role="combobox" :disabled="disabled" aria-haspopup="listbox" :aria-expanded="open ? 'true' : 'false'" :aria-controls="listId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :aria-multiselectable="isMultiple ? 'true' : 'false'" @click="toggle" :onKeyDown="onTriggerKeyDown" :class='"vmz-ui-select__control" + (displayLabel ? "" : " is-placeholder")'>
+                <span class="vmz-ui-select__value">
+                    {{ displayLabel }}
+                </span>
+                <Icon name="action.chevron-down" size="md" decorative class="vmz-ui-select__chev" />
+            </button>
+            <div v-if="open" :id="listId" data-vmz-overlay="select" data-vmz-overlay-owner="select" data-vmz-focus="enter" class="vmz-ui-select__panel">
+                <div v-if="searchable" class="vmz-ui-select__search">
+                    <input type="search" data-vmz-select="search" :value="searchQuery" :placeholder="searchPlaceholder" :aria-label="searchLabel()" @input="onSearchInput" :onKeyDown="onSearchKeyDown" class="vmz-ui-select__search-input" />
+                </div>
+                <ul role="listbox" :aria-multiselectable="isMultiple ? 'true' : 'false'" tabindex="-1" :onKeyDown="onListKeyDown" class="vmz-ui-select__list">
+                    <li v-if="showEmpty && emptyText" role="presentation" class="vmz-ui-select__empty">
+                        {{ emptyText }}
+                    </li>
+                    <li v-for="opt in visibleOptions" :key="opt.value" role="presentation">
+                        <button type="button" role="option" :data-vmz-option="opt.value" :aria-selected="opt.selected ? 'true' : 'false'" @click="onOptionClick" :class='"vmz-ui-select__option" + (opt.selected ? " is-on" : "")'>
+                            <span class="vmz-ui-select__option-label">
+                                {{ opt.label }}
+                            </span>
+                            <Icon v-if="opt.selected" name="action.check" size="md" decorative class="vmz-ui-select__option-check" />
+                        </button>
+                    </li>
+                </ul>
+                <div v-if="isMultiple && doneLabel" class="vmz-ui-select__footer">
+                    <button type="button" data-vmz-select="done" @click="close" class="vmz-ui-select__done">
+                        {{ doneLabel }}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-select__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-select__error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+<style>
+.vmz-ui-select {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-2);
+    width: 100%;
+    max-width: 28rem;
+}
+
+.vmz-ui-select__field {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.vmz-ui-select__label {
+    font: inherit;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-select__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--vmz-space-2);
+    width: 100%;
+    box-sizing: border-box;
+    min-height: var(--vmz-control-height);
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    text-align: left;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    outline: none;
+    cursor: pointer;
+    transition:
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-select__control.is-placeholder .vmz-ui-select__value {
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-select[data-invalid="true"] .vmz-ui-select__control {
+    border-color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-select[data-invalid="true"] .vmz-ui-select__control:hover:not(:disabled),
+.vmz-ui-select[data-invalid="true"] .vmz-ui-select__control:focus-visible,
+.vmz-ui-select[data-invalid="true"].is-opened .vmz-ui-select__control {
+    border-color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-select__control:hover:not(:disabled):not(:focus-visible) {
+    border-color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-select__control:focus-visible,
+.vmz-ui-select.is-opened .vmz-ui-select__control {
+    border-color: var(--vmz-action-primary-background);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-select__control:disabled {
+    opacity: 0.6;
+    color: var(--vmz-text-muted);
+    cursor: not-allowed;
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-select__value {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vmz-ui-select__chev {
+    flex: 0 0 auto;
+    color: var(--vmz-text-tertiary);
+    transition: transform var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-select.is-opened .vmz-ui-select__chev {
+    transform: rotate(180deg);
+}
+
+.vmz-ui-select__panel {
+    position: absolute;
+    z-index: 40;
+    top: calc(100% + var(--vmz-space-1));
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    padding: var(--vmz-space-1);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    box-shadow: var(--vmz-shadow-popup);
+    outline: none;
+}
+
+.vmz-ui-select__search {
+    padding: var(--vmz-space-1) var(--vmz-space-1) 0;
+}
+
+.vmz-ui-select__search-input {
+    width: 100%;
+    box-sizing: border-box;
+    min-height: var(--vmz-control-height);
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    appearance: none;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    outline: none;
+    transition:
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-select__search-input::placeholder {
+    color: var(--vmz-text-tertiary);
+    opacity: 1;
+}
+
+.vmz-ui-select__search-input:focus-visible {
+    border-color: var(--vmz-action-primary-background);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-select__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    max-height: 16rem;
+    overflow: auto;
+    outline: none;
+}
+
+.vmz-ui-select__empty {
+    padding: var(--vmz-space-2) var(--vmz-density-control-padding-x);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+}
+
+.vmz-ui-select__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--vmz-space-2);
+    width: 100%;
+    box-sizing: border-box;
+    min-height: var(--vmz-control-height);
+    text-align: left;
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    padding: 0 var(--vmz-density-control-padding-x);
+    border: 0;
+    border-radius: var(--vmz-radius-md);
+    background: transparent;
+    color: var(--vmz-text-ink);
+    cursor: pointer;
+    outline: none;
+    transition: background-color var(--vmz-motion-control-duration)
+        var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-select__option-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vmz-ui-select__option-check {
+    flex: 0 0 auto;
+    color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-select__option:hover,
+.vmz-ui-select__option:focus-visible {
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-select__option:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-select__option.is-on {
+    background: var(--vmz-action-primary-soft);
+    color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-select__footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--vmz-space-1) var(--vmz-space-1) 0;
+    border-top: 1px solid var(--vmz-line-subtle);
+}
+
+.vmz-ui-select__done {
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.5715;
+    min-height: var(--vmz-control-height-sm);
+    padding: 0 var(--vmz-space-3);
+    border: 1px solid var(--vmz-action-secondary-border);
+    border-radius: var(--vmz-radius-md);
+    background: var(--vmz-action-secondary-background);
+    color: var(--vmz-action-secondary-foreground);
+    cursor: pointer;
+    outline: none;
+    transition:
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-select__done:hover {
+    background: var(--vmz-action-secondary-hover);
+    border-color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-select__done:active {
+    background: var(--vmz-action-secondary-active);
+}
+
+.vmz-ui-select__done:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-select__description {
+    margin: 0;
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+}
+
+.vmz-ui-select__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Select.
+ * Owned listbox (trigger + panel + role=option). Never native <select> popup.
+ * Parent owns value (single) or values (multiple) + options.
+ * mode=multiple keeps panel open until Done/Escape; searchable filters visible options.
+ */
+export default class Select {
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public placeholder: string = "";
+    /** single mode */
+    public value: string = "";
+    /** multiple mode — parent owns array */
+    public values: string[] = [];
+    public options: Array<{
+        value: string;
+        label: string;
+    }> = [];
+    /** "single" | "multiple" */
+    public mode: string = "single";
+    public searchable: boolean = false;
+    public searchPlaceholder: string = "";
+    public emptyText: string = "";
+    public doneLabel: string = "";
+    public disabled: boolean = false;
+    public invalidAttr: string = "false";
+    public controlId: string = "vmz-select";
+    public listId: string = "vmz-select-list";
+    public descriptionId: string = "vmz-select-desc";
+    public errorId: string = "vmz-select-err";
+    public describedBy: string = "";
+    public onChange:
+        | ((e: {
+              target: {
+                  value: string;
+                  values: string[];
+              };
+          }) => void)
+        | null = null;
+    open = false;
+    displayLabel = "";
+    searchQuery = "";
+    isMultiple = false;
+    searchableAttr = "false";
+    showEmpty = false;
+    visibleOptions: Array<{
+        value: string;
+        label: string;
+        selected: boolean;
+    }> = [];
+    _docKeyHandler = null;
+    _docPointerHandler = null;
+    _observer = null;
+    onMount() {
+        this.listId = `${this.controlId}-list`;
+        this._syncMode();
+        this._rebuildVisible();
+        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
+        const root = this.__vmzDomRoot;
+        if (!root || typeof root.querySelector !== "function") return;
+        this._observer = new MutationObserver(() => this._syncOverlay());
+        this._observer.observe(root, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    onDestroy() {
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = null;
+        }
+        this._teardownDoc();
+    }
+    _syncMode() {
+        this.isMultiple = String(this.mode || "single") === "multiple";
+        this.searchableAttr = this.searchable ? "true" : "false";
+    }
+    _selectedSet() {
+        if (this.isMultiple) {
+            return new Set((this.values || []).map((v) => String(v)));
+        }
+        return new Set(this.value ? [String(this.value)] : []);
+    }
+    _rebuildVisible() {
+        this._syncMode();
+        const q = String(this.searchQuery || "")
+            .trim()
+            .toLowerCase();
+        const selected = this._selectedSet();
+        const all = this.options || [];
+        const filtered = !q
+            ? all
+            : all.filter((o) => {
+                  const label = String(o.label || "").toLowerCase();
+                  const value = String(o.value || "").toLowerCase();
+                  return label.includes(q) || value.includes(q);
+              });
+        this.visibleOptions = filtered.map((o) => ({
+            value: String(o.value),
+            label: String(o.label),
+            selected: selected.has(String(o.value)),
+        }));
+        this.showEmpty = this.visibleOptions.length === 0;
+        this._syncLabel();
+    }
+    _syncLabel() {
+        const opts = this.options || [];
+        if (this.isMultiple) {
+            const selected = this._selectedSet();
+            const labels = opts.filter((o) => selected.has(String(o.value))).map((o) => o.label);
+            if (!labels.length) this.displayLabel = this.placeholder || "";
+            else if (labels.length <= 2) this.displayLabel = labels.join(", ");
+            else this.displayLabel = `${labels[0]}, ${labels[1]} +${labels.length - 2}`;
+            return;
+        }
+        const hit = opts.find((o) => String(o.value) === String(this.value));
+        this.displayLabel = hit ? hit.label : this.value || this.placeholder || "";
+    }
+    searchLabel() {
+        return this.searchPlaceholder || this.label || "";
+    }
+    toggle() {
+        if (this.disabled) return;
+        if (this.open) this.close();
+        else this.openPanel();
+    }
+    openPanel() {
+        this.searchQuery = "";
+        this._rebuildVisible();
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+        this.searchQuery = "";
+        this._rebuildVisible();
+    }
+    _emit(nextValue: string, nextValues: string[]) {
+        const payload = {
+            target: {
+                value: nextValue,
+                values: nextValues,
+            },
+        };
+        this.emit("change", payload);
+        if (typeof this.onChange === "function") {
+            this.onChange(payload);
+        }
+    }
+    /** Parent-owned prop writes (bindComponentProp) — keep derived label/options in sync. */
+    __vmzOnParentProp(name: string) {
+        if (name === "value" || name === "values" || name === "options" || name === "placeholder") {
+            this._rebuildVisible();
+        }
+    }
+    choose(next: string) {
+        if (!next && next !== "") return;
+        if (this.isMultiple) {
+            const cur = [...(this.values || [])].map(String);
+            const idx = cur.indexOf(String(next));
+            if (idx >= 0) cur.splice(idx, 1);
+            else cur.push(String(next));
+            this.values = cur;
+            this._rebuildVisible();
+            this._emit(cur.join(","), cur);
+            return;
+        }
+        const nextStr = String(next);
+        if (nextStr === String(this.value)) {
+            this.close();
+            return;
+        }
+        this.value = nextStr;
+        this._rebuildVisible();
+        this._emit(nextStr, nextStr ? [nextStr] : []);
+        this.close();
+    }
+    onSearchInput(ev: Event) {
+        const t = ev?.target as HTMLInputElement | null;
+        this.searchQuery = t ? String(t.value || "") : "";
+        this._rebuildVisible();
+    }
+    onSearchKeyDown(ev: KeyboardEvent) {
+        if (!ev) return;
+        if (ev.key === "Escape") {
+            ev.preventDefault();
+            this.close();
+        } else if (ev.key === "ArrowDown") {
+            ev.preventDefault();
+            const root = this.__vmzDomRoot;
+            const first =
+                root && typeof root.querySelector === "function"
+                    ? root.querySelector('[data-vmz-overlay="select"] [role="option"]')
+                    : null;
+            if (first instanceof HTMLElement) first.focus();
+        }
+    }
+    onOptionClick(ev: Event) {
+        const t = ev?.target as Element | null;
+        const el =
+            (t && typeof (t as HTMLElement).closest === "function"
+                ? ((t as HTMLElement).closest("[data-vmz-option]") as HTMLElement | null)
+                : null) || (ev?.currentTarget as HTMLElement | null);
+        const id =
+            el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-option") : null;
+        if (id != null) this.choose(id);
+    }
+    onTriggerKeyDown(ev: KeyboardEvent) {
+        if (!ev || this.disabled) return;
+        if ((ev.key === "ArrowDown" || ev.key === "Enter" || ev.key === " ") && !this.open) {
+            ev.preventDefault();
+            this.openPanel();
+        } else if (ev.key === "Escape" && this.open) {
+            ev.preventDefault();
+            this.close();
+        }
+    }
+    onListKeyDown(ev: KeyboardEvent) {
+        if (!ev) return;
+        if (ev.key === "Escape") {
+            ev.preventDefault();
+            this.close();
+            return;
+        }
+        const root = this.__vmzDomRoot;
+        const list =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector(`[data-vmz-overlay="select"] [role="listbox"]`)
+                : null;
+        if (!list) return;
+        const nodes = [...list.querySelectorAll('[role="option"]')].filter(
+            (n) => n instanceof HTMLElement && n.offsetParent !== null,
+        );
+        if (!nodes.length) return;
+        const idx = nodes.indexOf(document.activeElement as Element);
+        if (ev.key === "ArrowDown") {
+            ev.preventDefault();
+            (nodes[(idx + 1 + nodes.length) % nodes.length] as HTMLElement).focus();
+        } else if (ev.key === "ArrowUp") {
+            ev.preventDefault();
+            (nodes[(idx - 1 + nodes.length) % nodes.length] as HTMLElement).focus();
+        } else if (ev.key === "Home") {
+            ev.preventDefault();
+            (nodes[0] as HTMLElement).focus();
+        } else if (ev.key === "End") {
+            ev.preventDefault();
+            (nodes[nodes.length - 1] as HTMLElement).focus();
+        } else if (ev.key === "Enter" || ev.key === " ") {
+            const active = document.activeElement as HTMLElement | null;
+            const id = active?.getAttribute?.("data-vmz-option");
+            if (id) {
+                ev.preventDefault();
+                this.choose(id);
+            }
+        }
+    }
+    _syncOverlay() {
+        const root = this.__vmzDomRoot;
+        const panel =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-overlay="select"][data-vmz-focus="enter"]')
+                : null;
+        if (panel && this.open) this._bindDoc(panel as HTMLElement);
+        else if (!panel) this._teardownDoc();
+        this._rebuildVisible();
+    }
+    _bindDoc(panel: HTMLElement) {
+        if (typeof document === "undefined") return;
+        if (!this._docKeyHandler) {
+            this._docKeyHandler = (ev: KeyboardEvent) => {
+                if (ev.key === "Escape") {
+                    ev.preventDefault();
+                    this.close();
+                }
+            };
+            document.addEventListener("keydown", this._docKeyHandler);
+        }
+        if (!this._docPointerHandler) {
+            const root = this.__vmzDomRoot;
+            this._docPointerHandler = (ev: Event) => {
+                const t = ev.target;
+                if (!(t instanceof Node)) return;
+                if (root && typeof root.contains === "function" && root.contains(t)) return;
+                this.close();
+            };
+            document.addEventListener("pointerdown", this._docPointerHandler, true);
+        }
+        const search = panel.querySelector('[data-vmz-select="search"]');
+        if (search instanceof HTMLElement) {
+            search.focus();
+            return;
+        }
+        const first = panel.querySelector('[role="option"]');
+        if (first instanceof HTMLElement) first.focus();
+        else panel.focus();
+    }
+    _teardownDoc() {
+        if (typeof document !== "undefined") {
+            if (this._docKeyHandler) document.removeEventListener("keydown", this._docKeyHandler);
+            if (this._docPointerHandler) {
+                document.removeEventListener("pointerdown", this._docPointerHandler, true);
+            }
+        }
+        this._docKeyHandler = null;
+        this._docPointerHandler = null;
+    }
+}
+</script>