@vmz/ui 0.2.3 → 0.2.5

package/src/components/Select.vmz

@@ -1,143 +1,110 @@
 <template>
-  <div
-      :class="'vmz-ui-select' + (open ? ' is-opened' : '') + (isMultiple ? ' is-multiple' : '')"
-      data-vmz-ui="select"
-      :data-mode="mode"
-      :data-searchable="searchableAttr"
-      :data-invalid="invalidAttr"
-    >
-      <label v-if="label" class="vmz-ui-select__label" :for="controlId">{{ label }}</label>
-      <button
-        type="button"
-        :id="controlId"
-        class="vmz-ui-select__control"
-        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"
-      >
-        <span class="vmz-ui-select__value">{{ displayLabel }}</span>
-        <span class="vmz-ui-select__chev" aria-hidden="true"></span>
-      </button>
-      <div
-        v-if="open"
-        :id="listId"
-        class="vmz-ui-select__panel"
-        data-vmz-overlay="select"
-        data-vmz-overlay-owner="select"
-        data-vmz-focus="enter"
-      >
-        <div v-if="searchable" class="vmz-ui-select__search">
-          <input
-            type="search"
-            class="vmz-ui-select__search-input"
-            data-vmz-select="search"
-            :value="searchQuery"
-            :placeholder="searchPlaceholder"
-            :aria-label="searchPlaceholder"
-            @input="onSearchInput"
-            :onKeyDown="onSearchKeyDown"
-          />
+    <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>
-        <ul
-          class="vmz-ui-select__list"
-          role="listbox"
-          :aria-multiselectable="isMultiple ? 'true' : 'false'"
-          tabindex="-1"
-          :onKeyDown="onListKeyDown"
-        >
-          <li v-if="showEmpty" class="vmz-ui-select__empty" role="presentation">{{ emptyText }}</li>
-          <li v-for="opt in visibleOptions" :key="opt.value" role="presentation">
-            <button
-              type="button"
-              :class="'vmz-ui-select__option' + (opt.selected ? ' is-on' : '')"
-              role="option"
-              :data-vmz-option="opt.value"
-              :aria-selected="opt.selected ? 'true' : 'false'"
-              @click="onOptionClick"
-            >{{ opt.label }}</button>
-          </li>
-        </ul>
-        <div v-if="isMultiple" class="vmz-ui-select__footer">
-          <button type="button" class="vmz-ui-select__done" data-vmz-select="done" @click="close">Done</button>
-        </div>
-      </div>
-      <p v-if="description" :id="descriptionId" class="vmz-ui-select__description">{{ description }}</p>
-      <p v-if="error" :id="errorId" class="vmz-ui-select__error" role="alert">{{ error }}</p>
+        <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 {
+.vmz-ui-select {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
     max-width: 28rem;
-  }
+}
 
 .vmz-ui-select__label {
-  font: inherit;
-  font-weight: 500;
-  font-size: 0.875rem;
+    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.55rem;
-  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, linear),
-    box-shadow var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, linear);
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.55rem;
+    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, linear),
+        box-shadow var(--vmz-motion-control-duration, 120ms)
+            var(--vmz-motion-control-easing, linear);
 }
 
-.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 {
+    border-color: var(--vmz-status-danger-accent);
 }
 
 .vmz-ui-select__control:hover:not(:disabled) {
-  border-color: var(--vmz-action-primary-background);
+    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 2px var(--vmz-focus-ring);
+    border-color: var(--vmz-action-primary-background);
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
 }
 
-  .vmz-ui-select__control:disabled {
+.vmz-ui-select__control:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 
-  .vmz-ui-select__value {
+.vmz-ui-select__value {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }
+}
 
-  .vmz-ui-select__chev {
+.vmz-ui-select__chev {
     flex: 0 0 auto;
     width: 0.45rem;
     height: 0.45rem;
@@ -145,13 +112,13 @@
     border-bottom: 1.5px solid currentColor;
     transform: rotate(45deg) translate(-1px, -2px);
     opacity: 0.7;
-  }
+}
 
-  .vmz-ui-select.is-opened .vmz-ui-select__chev {
+.vmz-ui-select.is-opened .vmz-ui-select__chev {
     transform: rotate(225deg) translate(-1px, -1px);
-  }
+}
 
-  .vmz-ui-select__panel {
+.vmz-ui-select__panel {
     position: absolute;
     z-index: 40;
     top: calc(100% + 0.25rem);
@@ -163,15 +130,19 @@
     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,.08), 0 3px 6px -4px rgba(0,0,0,.12));
+    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 {
+.vmz-ui-select__search {
     padding: 0.4rem 0.45rem 0.15rem;
-  }
+}
 
-  .vmz-ui-select__search-input {
+.vmz-ui-select__search-input {
     width: 100%;
     box-sizing: border-box;
     font: inherit;
@@ -182,28 +153,28 @@
     background: var(--vmz-surface-paper, #fff);
     color: inherit;
     outline: none;
-  }
+}
 
-  .vmz-ui-select__search-input:focus-visible {
+.vmz-ui-select__search-input:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-select__list {
+.vmz-ui-select__list {
     margin: 0;
     padding: 0.25rem;
     list-style: none;
     max-height: 16rem;
     overflow: auto;
     outline: none;
-  }
+}
 
-  .vmz-ui-select__empty {
+.vmz-ui-select__empty {
     padding: 0.55rem 0.65rem;
     opacity: 0.7;
     font-size: 0.92em;
-  }
+}
 
-  .vmz-ui-select__option {
+.vmz-ui-select__option {
     display: block;
     width: 100%;
     box-sizing: border-box;
@@ -216,26 +187,26 @@
     color: inherit;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-select__option:hover,
-  .vmz-ui-select__option:focus-visible {
+.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 {
+.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 {
+.vmz-ui-select__footer {
     display: flex;
     justify-content: flex-end;
     padding: 0.35rem 0.45rem 0.45rem;
     border-top: 1px solid var(--vmz-line-default, #d9dee3);
-  }
+}
 
-  .vmz-ui-select__done {
+.vmz-ui-select__done {
     font: inherit;
     font-weight: 600;
     padding: 0.3rem 0.7rem;
@@ -244,297 +215,319 @@
     background: var(--vmz-surface-paper, #fff);
     color: inherit;
     cursor: pointer;
-  }
+}
 
-  .vmz-ui-select__description {
+.vmz-ui-select__description {
     margin: 0;
     opacity: 0.75;
     font-size: 0.9em;
-  }
+}
 
-  .vmz-ui-select__error {
+.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.
-*/
+ * 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;
-	}
+    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>