@greypan/web-ui 11.2.0 → 12.0.0

package/dist/components/select/index.js

@@ -1,161 +1,230 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../classes/glass.js";
-import n from "../../icons/generated/lucide-chevron-down.js";
-import { installPointerFocusSuppression as r } from "../../shared/focus/pointer-focus.js";
-import { FormAssociated as i, FormAssociationController as a, defineFormAssociation as o } from "../../shared/form-association/index.js";
-import s from "../../assets/overlay-motion.js";
-import c from "../../scrollbars/internal.js";
-import { dispatchOpenChangeEvent as l } from "../../shared/open-state/index.js";
-import { createComboboxOpenController as u, createOptionListenerBinding as d, handleComboboxFocusOut as f, nextWrappingIndex as p } from "../../shared/option-portal/combobox-shell.js";
-import { defineOptionPortal as m } from "../../shared/option-portal/index.js";
-import { defineAnchoredPanel as h } from "../../shared/overlay/anchored-panel.js";
-import { defineOpenOverlay as g } from "../../shared/overlay/open-overlay.js";
-import { applyOverlayVariables as _, defineOverlayPortal as v } from "../../shared/overlay/portal.js";
-import { defineScrollLockLease as y } from "../../shared/scroll-lock/scroll-lock.js";
-import b from "./style.js";
-import { LitElement as x, html as S, nothing as C, unsafeCSS as w } from "lit";
-import { customElement as T, property as E, state as D } from "lit/decorators.js";
-import { ifDefined as O } from "lit/directives/if-defined.js";
-//#region src/components/select/index.ts
-var k;
-r();
-var A = class extends i(x) {
+import glass_default from "../../classes/glass.js";
+import lucide_chevron_down_default from "../../icons/generated/lucide-chevron-down.js";
+import { installPointerFocusSuppression } from "../../shared/focus/pointer-focus.js";
+import { FormAssociated, FormAssociationController, defineFormAssociation } from "../../shared/form-association/index.js";
+import overlay_motion_default from "../../assets/overlay-motion.js";
+import scrollbar_default from "../../assets/scrollbar.js";
+import { dispatchOpenChangeEvent } from "../../shared/open-state/index.js";
+import { createComboboxOpenController, createOptionListenerBinding, handleComboboxFocusOut, nextWrappingIndex } from "../../shared/option-portal/combobox-shell.js";
+import { defineOptionPortal } from "../../shared/option-portal/index.js";
+import { defineAnchoredPanel } from "../../shared/overlay/anchored-panel.js";
+import { defineOpenOverlay } from "../../shared/overlay/open-overlay.js";
+import { applyOverlayVariables, defineOverlayPortal } from "../../shared/overlay/portal.js";
+import { defineScrollLockLease } from "../../shared/scroll-lock/scroll-lock.js";
+import style_default from "./style.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+// src/components/select/index.ts
+var _WebUiSelect;
+installPointerFocusSuppression();
+let WebUiSelect = class WebUiSelect extends FormAssociated(LitElement) {
 	static {
-		k = this;
-	}
-	constructor(...e) {
-		super(...e), this.placeholder = "", this.disabled = !1, this.required = !1, this.portal = !1, this.noScrollLock = !1, this.name = "", this.ariaLabel = null, this._value = "", this._formAssociation = o({
+		_WebUiSelect = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.placeholder = "";
+		this.disabled = false;
+		this.required = false;
+		this.portal = false;
+		this.noScrollLock = false;
+		this.name = "";
+		this.ariaLabel = null;
+		this._value = "";
+		this._formAssociation = defineFormAssociation({
 			host: this,
 			initialize: () => {
-				let e = this.getAttribute("value");
-				e !== null && (this._value = e, this.toggleAttribute("data-has-value", !!e));
+				const attrValue = this.getAttribute("value");
+				if (attrValue !== null) {
+					this._value = attrValue;
+					this.toggleAttribute("data-has-value", !!attrValue);
+				}
 			},
 			getState: () => this._value,
-			setState: (e) => {
-				this.value = e;
+			setState: (value) => {
+				this.value = value;
 			},
 			getFormValue: () => this._value,
 			getFormState: () => this._value,
-			restoreState: (e) => {
-				typeof e == "string" && (this.value = e);
+			restoreState: (state) => {
+				if (typeof state === "string") this.value = state;
 			},
 			syncValidity: () => this._syncValidity()
-		}).make(), this._formAssociationController = new a(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._selectedLabel = "", this._hasTriggerSlot = !1, this._typeaheadBuffer = "", this._typeaheadLastInputAt = 0, this._options = [], this._scrollLock = y().make(), this._optionPortal = m().make({
+		}).make();
+		this._formAssociationController = new FormAssociationController(this, this._formAssociation);
+		this._isOpen = false;
+		this._activeIndex = -1;
+		this._selectedLabel = "";
+		this._hasTriggerSlot = false;
+		this._typeaheadBuffer = "";
+		this._typeaheadLastInputAt = 0;
+		this._options = [];
+		this._scrollLock = defineScrollLockLease().make();
+		this._optionPortal = defineOptionPortal().make({
 			element: this,
-			idPrefix: `web-ui-select-${++k._nextInstanceId}`,
+			idPrefix: `web-ui-select-${++_WebUiSelect._nextInstanceId}`,
 			getPortal: () => this._portal,
 			getPortalContent: () => this._portalContent,
 			isOpen: () => this.portal && this._isOpen,
 			getMigratableNodes: () => [...this.querySelectorAll("web-ui-option")],
 			hasUpdated: () => this.hasUpdated,
 			requestUpdate: () => this.requestUpdate(),
-			bindOption: (e) => this._bindOption(e),
-			unbindOption: (e) => this._unbindOption(e),
+			bindOption: (option) => this._bindOption(option),
+			unbindOption: (option) => this._unbindOption(option),
 			onImmediateSync: () => {
-				this._refreshOptions(), this._syncSelected(), this._syncActiveOption();
+				this._refreshOptions();
+				this._syncSelected();
+				this._syncActiveOption();
 			}
-		}), this._overlay = g().make({
+		});
+		this._overlay = defineOpenOverlay().make({
 			requestClose: () => this._close(),
 			isConnected: () => this.isConnected
-		}), this._panel = h().make({
+		});
+		this._panel = defineAnchoredPanel().make({
 			getAnchor: () => this.shadowRoot?.querySelector(".select-trigger") ?? null,
 			getLocalPanel: () => this.shadowRoot?.querySelector(".select-overlay") ?? null,
 			getPositioning: () => ({
 				placement: "bottom-start",
 				offset: 4,
-				minAnchorWidth: !0,
+				minAnchorWidth: true,
 				strategy: this.portal ? "fixed" : "absolute"
 			}),
 			isPortal: () => this.portal,
 			createPortal: () => this._createPortal(),
 			openOverlay: this._overlay
-		}), this._onClickOutside = (e) => {
-			let t = e.composedPath().includes(this) || !!this._panel.getHandle()?.containsEvent(e);
-			this._isOpen && !t && this._close();
-		}, this._onFocusOut = () => {
-			f(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
-		}, this._onTriggerSlotChange = (e) => {
-			let t = e.target.assignedElements().length > 0;
-			this._hasTriggerSlot !== t && (this._hasTriggerSlot = t, this._reconfigureOverlay());
-		}, this._optionListeners = d({
-			onClick: (e) => this._handleOptionClick(e),
-			onPointerOver: (e) => this._handleOptionPointerOver(e),
-			onPointerDown: (e) => this._handleOptionPointerDown(e),
+		});
+		this._onClickOutside = (e) => {
+			const isInside = e.composedPath().includes(this) || !!this._panel.getHandle()?.containsEvent(e);
+			if (this._isOpen && !isInside) this._close();
+		};
+		this._onFocusOut = () => {
+			handleComboboxFocusOut(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
+		};
+		this._onTriggerSlotChange = (e) => {
+			const hasContent = e.target.assignedElements().length > 0;
+			if (this._hasTriggerSlot === hasContent) return;
+			this._hasTriggerSlot = hasContent;
+			this._reconfigureOverlay();
+		};
+		this._optionListeners = createOptionListenerBinding({
+			onClick: (event) => this._handleOptionClick(event),
+			onPointerOver: (event) => this._handleOptionPointerOver(event),
+			onPointerDown: (event) => this._handleOptionPointerDown(event),
 			onUpdate: () => this._onOptionUpdate()
-		}), this._bindOption = (e) => this._optionListeners.bind(e), this._unbindOption = (e) => this._optionListeners.unbind(e), this._handleOptionClick = (e) => {
+		});
+		this._bindOption = (option) => this._optionListeners.bind(option);
+		this._unbindOption = (option) => this._optionListeners.unbind(option);
+		this._handleOptionClick = (e) => {
 			if (!(e.currentTarget instanceof HTMLElement)) return;
-			let t = e.currentTarget;
-			!t.disabled && this._isLive(t) && (this.value = t.value, this._close(), this._notifyValueChange());
-		}, this._onOptionUpdate = () => {
-			this._syncSelected(), this._syncActiveOption();
-		}, this._handleOptionPointerOver = (e) => {
-			e.pointerType !== "touch" && (!this._isOpen || this._activeIndex < 0 || !(e.currentTarget instanceof HTMLElement) || (this._activeIndex = -1, this._resetTypeahead(), this._syncActiveOption()));
-		}, this._handleOptionPointerDown = (e) => {
+			const option = e.currentTarget;
+			if (option.disabled || !this._isLive(option)) return;
+			this.value = option.value;
+			this._close();
+			this._notifyValueChange();
+		};
+		this._onOptionUpdate = () => {
+			this._syncSelected();
+			this._syncActiveOption();
+		};
+		this._handleOptionPointerOver = (e) => {
+			if (e.pointerType === "touch") return;
+			if (!this._isOpen || this._activeIndex < 0 || !(e.currentTarget instanceof HTMLElement)) return;
+			this._activeIndex = -1;
+			this._resetTypeahead();
+			this._syncActiveOption();
+		};
+		this._handleOptionPointerDown = (e) => {
 			e.preventDefault();
-		}, this._onSlotChange = () => {
+		};
+		this._onSlotChange = () => {
 			this._optionPortal.scheduleRefresh();
-		}, this._onKeydown = (e) => {
-			if (!(this._isDisabled || e.isComposing)) switch (e.key) {
+		};
+		this._onKeydown = (e) => {
+			if (this._isDisabled || e.isComposing) return;
+			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), this._isOpen ? this._navigateActive(1) : this._open(!0);
+					e.preventDefault();
+					if (!this._isOpen) this._open(true);
+					else this._navigateActive(1);
 					break;
 				case "ArrowUp":
-					e.preventDefault(), this._isOpen ? this._navigateActive(-1) : this._open(!0);
+					e.preventDefault();
+					if (!this._isOpen) this._open(true);
+					else this._navigateActive(-1);
 					break;
 				case "Home":
 					if (!this._isOpen) break;
-					e.preventDefault(), this._moveActiveToBoundary(!0);
+					e.preventDefault();
+					this._moveActiveToBoundary(true);
 					break;
 				case "End":
 					if (!this._isOpen) break;
-					e.preventDefault(), this._moveActiveToBoundary(!1);
+					e.preventDefault();
+					this._moveActiveToBoundary(false);
 					break;
 				case "Enter":
-					if (e.preventDefault(), e.repeat) break;
-					this._isOpen ? this._activeIndex >= 0 && this._selectActiveOption() : this._open(!0);
+					e.preventDefault();
+					if (e.repeat) break;
+					if (!this._isOpen) this._open(true);
+					else if (this._activeIndex >= 0) this._selectActiveOption();
 					break;
 				case " ":
 				case "Space":
 				case "Spacebar":
-					if (e.preventDefault(), e.repeat) break;
-					this._isOpen ? this._activeIndex >= 0 && this._selectActiveOption() : this._open(!0);
+					e.preventDefault();
+					if (e.repeat) break;
+					if (!this._isOpen) this._open(true);
+					else if (this._activeIndex >= 0) this._selectActiveOption();
 					break;
-				default: this._isOpen && !e.isComposing && !e.ctrlKey && !e.metaKey && !e.altKey && Array.from(e.key).length === 1 && (e.preventDefault(), this._typeahead(e.key));
+				default: if (this._isOpen && !e.isComposing && !e.ctrlKey && !e.metaKey && !e.altKey && Array.from(e.key).length === 1) {
+					e.preventDefault();
+					this._typeahead(e.key);
+				}
 			}
-		}, this._openController = u({
+		};
+		this._openController = createComboboxOpenController({
 			canOpen: () => !this._isDisabled,
 			getIsOpen: () => this._isOpen,
-			setIsOpen: (e) => {
-				this._isOpen = e;
+			setIsOpen: (open) => {
+				this._isOpen = open;
 			},
 			dispatchOpenChange: () => this._dispatchOpenChange(),
-			syncScrollLock: (e) => this._syncScrollLock(e),
+			syncScrollLock: (open) => this._syncScrollLock(open),
 			isPortal: () => this.portal,
-			openOverlay: (e) => this._openOverlay(e),
+			openOverlay: (isKeyboardNavigation) => this._openOverlay(isKeyboardNavigation),
 			closeOverlay: () => void this._closeOverlay(),
-			onOpen: (e) => {
-				this._syncSelected(), e ? this._setInitialActiveOption() : this._syncActiveOption();
+			onOpen: (isKeyboardNavigation) => {
+				this._syncSelected();
+				if (isKeyboardNavigation) this._setInitialActiveOption();
+				else this._syncActiveOption();
 			},
 			onAfterClose: () => {
-				this._activeIndex = -1, this._options.forEach((e) => e.removeAttribute("active"));
+				this._activeIndex = -1;
+				this._options.forEach((o) => o.removeAttribute("active"));
 			}
 		});
 	}
 	static {
 		this.styles = [
-			w(t),
-			w(s),
-			w(c),
-			w(b)
+			unsafeCSS(glass_default),
+			unsafeCSS(overlay_motion_default),
+			unsafeCSS(scrollbar_default),
+			unsafeCSS(style_default)
 		];
 	}
 	get value() {
 		return this._value;
 	}
-	set value(e) {
-		let t = this._value;
-		this._value = e, this._formAssociation.sync(), this.toggleAttribute("data-has-value", !!e), this.requestUpdate("value", t);
+	set value(v) {
+		const old = this._value;
+		this._value = v;
+		this._formAssociation.sync();
+		this.toggleAttribute("data-has-value", !!v);
+		this.requestUpdate("value", old);
 	}
 	get _isDisabled() {
 		return this.disabled || this._formAssociation.isFormDisabled();
@@ -170,25 +239,47 @@ var A = class extends i(x) {
 		return this._isOpen;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._optionPortal.bindHost(), this.addEventListener("keydown", this._onKeydown), this.addEventListener("focusout", this._onFocusOut), document.addEventListener("click", this._onClickOutside);
+		super.connectedCallback();
+		this._optionPortal.bindHost();
+		this.addEventListener("keydown", this._onKeydown);
+		this.addEventListener("focusout", this._onFocusOut);
+		document.addEventListener("click", this._onClickOutside);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._optionPortal.dispose(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._options = [], this._portal = void 0, this._portalContent = void 0, this._close(), this._panel.dispose(), this._scrollLock.release();
+		super.disconnectedCallback();
+		this._optionPortal.dispose();
+		this.removeEventListener("keydown", this._onKeydown);
+		this.removeEventListener("focusout", this._onFocusOut);
+		document.removeEventListener("click", this._onClickOutside);
+		this._options.forEach(this._unbindOption);
+		this._options = [];
+		this._portal = void 0;
+		this._portalContent = void 0;
+		this._close();
+		this._panel.dispose();
+		this._scrollLock.release();
 	}
 	firstUpdated() {
 		requestAnimationFrame(() => {
-			this.isConnected && this._optionPortal.scheduleRefresh();
+			if (this.isConnected) this._optionPortal.scheduleRefresh();
 		});
 	}
 	willUpdate() {
-		this._refreshOptions(), this._syncSelected();
+		this._refreshOptions();
+		this._syncSelected();
 	}
-	updated(e) {
-		(e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this._syncOpenAttribute(), this._syncOverlayInert(), this._syncValidity();
+	updated(changed) {
+		if (changed.has("portal") || changed.has("overlayContainer")) requestAnimationFrame(() => this._reconfigureOverlay());
+		if (changed.has("noScrollLock")) this._syncScrollLock();
+		this._syncOpenAttribute();
+		this._syncOverlayInert();
+		this._syncValidity();
 	}
 	_syncValidity() {
-		let e = this._formAssociation.getInternals();
-		e && typeof e.setValidity == "function" && (this._isDisabled || !this.required || this.value ? e.setValidity({}) : e.setValidity({ valueMissing: !0 }, "Select an option"));
+		const internals = this._formAssociation.getInternals();
+		if (!internals || typeof internals.setValidity !== "function") return;
+		if (this._isDisabled || !this.required || this.value) internals.setValidity({});
+		else internals.setValidity({ valueMissing: true }, "Select an option");
 	}
 	_syncOpenAttribute() {
 		this.toggleAttribute("open", this._isOpen);
@@ -197,121 +288,171 @@ var A = class extends i(x) {
 		this._panel.getHandle()?.setInert(this._isDisabled);
 	}
 	_syncSelected() {
-		if (this._options.forEach((e) => {
-			let t = this.value !== "" && e.value === this.value;
-			e.selected = t, e.setAttribute("role", "option"), e.setAttribute("aria-selected", String(t)), e.setAttribute("aria-disabled", String(e.disabled));
-		}), !this.value) {
+		this._options.forEach((o) => {
+			const selected = this.value !== "" && o.value === this.value;
+			o.selected = selected;
+			o.setAttribute("role", "option");
+			o.setAttribute("aria-selected", String(selected));
+			o.setAttribute("aria-disabled", String(o.disabled));
+		});
+		if (!this.value) {
 			this._selectedLabel = this.placeholder;
 			return;
 		}
-		let e = this._options.find((e) => e.value === this.value);
-		this._selectedLabel = e?.label || this.placeholder;
+		const option = this._options.find((o) => o.value === this.value);
+		this._selectedLabel = option?.label || this.placeholder;
 	}
 	_refreshOptions() {
-		let e = this._options[this._activeIndex], t = this._optionPortal.refresh(this._options, e);
-		this._options = t.options, this._activeIndex = t.activeIndex, this._optionPortal.ensureOptionIds(this._options);
+		const activeOption = this._options[this._activeIndex];
+		const next = this._optionPortal.refresh(this._options, activeOption);
+		this._options = next.options;
+		this._activeIndex = next.activeIndex;
+		this._optionPortal.ensureOptionIds(this._options);
 	}
-	_isLive(e) {
-		let t = this.portal ? this._panel.getPanel() : null;
-		return e.isConnected && (this.contains(e) || !!t && t.contains(e));
+	_isLive(option) {
+		const panel = this.portal ? this._panel.getPanel() : null;
+		return option.isConnected && (this.contains(option) || !!panel && panel.contains(option));
 	}
 	_selectActiveOption() {
-		let e = this._options[this._activeIndex];
-		e && this._isLive(e) && !e.disabled && (this.value = e.value, this._notifyValueChange()), this._close();
+		const option = this._options[this._activeIndex];
+		if (option && this._isLive(option) && !option.disabled) {
+			this.value = option.value;
+			this._notifyValueChange();
+		}
+		this._close();
 	}
-	_moveActiveToBoundary(e) {
+	_moveActiveToBoundary(toStart) {
 		this._resetTypeahead();
-		let t = this._options.filter((e) => !e.disabled && this._isLive(e)), n = e ? t[0] : t.at(-1);
-		n && (this._activeIndex = this._options.indexOf(n), this._syncActiveOption());
-	}
-	_typeahead(e) {
-		let t = this._options.filter((e) => !e.disabled && this._isLive(e));
-		if (!t.length) return;
-		let n = Date.now(), r = n - this._typeaheadLastInputAt <= 500, i = r && Array.from(this._typeaheadBuffer).length === 1 && this._normalizeTypeaheadText(this._typeaheadBuffer) === this._normalizeTypeaheadText(e) ? e : r ? `${this._typeaheadBuffer}${e}` : e;
-		this._typeaheadBuffer = i, this._typeaheadLastInputAt = n;
-		let a = this._options[this._activeIndex], o = a ? t.indexOf(a) : -1, s = (e) => {
-			let n = this._normalizeTypeaheadText(e);
-			for (let e = 1; e <= t.length; e++) {
-				let r = t[(o + e + t.length) % t.length];
-				if (this._normalizeTypeaheadText(r.label.trimStart()).startsWith(n)) return r;
+		const enabled = this._options.filter((option) => !option.disabled && this._isLive(option));
+		const option = toStart ? enabled[0] : enabled.at(-1);
+		if (!option) return;
+		this._activeIndex = this._options.indexOf(option);
+		this._syncActiveOption();
+	}
+	_typeahead(key) {
+		const enabled = this._options.filter((option) => !option.disabled && this._isLive(option));
+		if (!enabled.length) return;
+		const now = Date.now();
+		const withinSequence = now - this._typeaheadLastInputAt <= 500;
+		const query = withinSequence && Array.from(this._typeaheadBuffer).length === 1 && this._normalizeTypeaheadText(this._typeaheadBuffer) === this._normalizeTypeaheadText(key) ? key : withinSequence ? `${this._typeaheadBuffer}${key}` : key;
+		this._typeaheadBuffer = query;
+		this._typeaheadLastInputAt = now;
+		const activeOption = this._options[this._activeIndex];
+		const activeIndex = activeOption ? enabled.indexOf(activeOption) : -1;
+		const findMatch = (prefix) => {
+			const normalizedPrefix = this._normalizeTypeaheadText(prefix);
+			for (let offset = 1; offset <= enabled.length; offset++) {
+				const option = enabled[(activeIndex + offset + enabled.length) % enabled.length];
+				if (this._normalizeTypeaheadText(option.label.trimStart()).startsWith(normalizedPrefix)) return option;
 			}
-		}, c = (i !== e && o >= 0 && a && this._normalizeTypeaheadText(a.label.trimStart()).startsWith(this._normalizeTypeaheadText(i)) ? a : void 0) ?? s(i), l = c ?? (i === e ? void 0 : s(e));
-		!c && i !== e && (this._typeaheadBuffer = e), l && (this._activeIndex = this._options.indexOf(l), this._syncActiveOption());
-	}
-	_normalizeTypeaheadText(e) {
-		return e.toLocaleLowerCase().normalize("NFD").replace(/\p{M}/gu, "");
-	}
-	_navigateActive(e) {
+		};
+		const queryMatch = (query !== key && activeIndex >= 0 && activeOption && this._normalizeTypeaheadText(activeOption.label.trimStart()).startsWith(this._normalizeTypeaheadText(query)) ? activeOption : void 0) ?? findMatch(query);
+		const option = queryMatch ?? (query === key ? void 0 : findMatch(key));
+		if (!queryMatch && query !== key) this._typeaheadBuffer = key;
+		if (!option) return;
+		this._activeIndex = this._options.indexOf(option);
+		this._syncActiveOption();
+	}
+	_normalizeTypeaheadText(value) {
+		return value.toLocaleLowerCase().normalize("NFD").replace(/\p{M}/gu, "");
+	}
+	_navigateActive(delta) {
 		this._resetTypeahead();
-		let t = this._options.filter((e) => !e.disabled && this._isLive(e));
-		if (!t.length) return;
-		let n = this._options.find((e) => e.value === this.value && !e.disabled && this._isLive(e)), r = this._activeIndex >= 0 && this._isLive(this._options[this._activeIndex]) ? t.indexOf(this._options[this._activeIndex]) : n ? t.indexOf(n) : e > 0 ? -1 : 0, i = t[p(t.length, r, e)];
-		this._activeIndex = this._options.indexOf(i), this._syncActiveOption();
-	}
-	_open(e = !1) {
-		this._resetTypeahead(), this._openController.open(e);
+		const enabled = this._options.filter((o) => !o.disabled && this._isLive(o));
+		if (!enabled.length) return;
+		const selectedOption = this._options.find((option) => option.value === this.value && !option.disabled && this._isLive(option));
+		const currentIdx = this._activeIndex >= 0 && this._isLive(this._options[this._activeIndex]) ? enabled.indexOf(this._options[this._activeIndex]) : selectedOption ? enabled.indexOf(selectedOption) : delta > 0 ? -1 : 0;
+		const nextOption = enabled[nextWrappingIndex(enabled.length, currentIdx, delta)];
+		this._activeIndex = this._options.indexOf(nextOption);
+		this._syncActiveOption();
+	}
+	_open(isKeyboardNavigation = false) {
+		this._resetTypeahead();
+		this._openController.open(isKeyboardNavigation);
 	}
 	_close() {
-		this._resetTypeahead(), this._openController.close();
+		this._resetTypeahead();
+		this._openController.close();
 	}
 	_resetTypeahead() {
-		this._typeaheadBuffer = "", this._typeaheadLastInputAt = 0;
+		this._typeaheadBuffer = "";
+		this._typeaheadLastInputAt = 0;
 	}
 	_dispatchOpenChange() {
-		l(this, this._isOpen);
+		dispatchOpenChangeEvent(this, this._isOpen);
 	}
 	_setInitialActiveOption() {
-		let e = this._options.findIndex((e) => e.value === this.value && !e.disabled && this._isLive(e)), t = this._options.findIndex((e) => !e.disabled && this._isLive(e));
-		this._activeIndex = e >= 0 ? e : t, this._syncActiveOption();
+		const selectedIndex = this._options.findIndex((option) => option.value === this.value && !option.disabled && this._isLive(option));
+		const firstEnabledIndex = this._options.findIndex((option) => !option.disabled && this._isLive(option));
+		this._activeIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
+		this._syncActiveOption();
 	}
 	_syncActiveOption() {
-		this._options.forEach((e, t) => e.toggleAttribute("active", t === this._activeIndex && this._isLive(e)));
+		this._options.forEach((option, index) => option.toggleAttribute("active", index === this._activeIndex && this._isLive(option)));
 	}
 	_notifyValueChange() {
 		this.dispatchEvent(new Event("input", {
-			bubbles: !0,
-			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
 		}));
 	}
-	_syncScrollLock(e = this._isOpen) {
-		this._scrollLock.sync(e && !this.noScrollLock);
+	_syncScrollLock(isOpen = this._isOpen) {
+		this._scrollLock.sync(isOpen && !this.noScrollLock);
 	}
 	_togglePopup() {
-		this._isDisabled || (this._isOpen ? this._close() : this._open());
+		if (this._isDisabled) return;
+		if (this._isOpen) this._close();
+		else this._open();
 	}
-	_openOverlay(e = !1) {
-		this._panel.open(e), this._syncOverlayInert();
+	_openOverlay(isKeyboardNavigation = false) {
+		this._panel.open(isKeyboardNavigation);
+		this._syncOverlayInert();
 	}
 	_createPortal() {
-		let e = v().make({
+		const portal = defineOverlayPortal().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${s}\n${c}\n${b}`,
+			style: `${glass_default}\n${overlay_motion_default}\n${scrollbar_default}\n${style_default}`,
 			className: "wui-glass select-overlay portal wui-floating-panel",
 			onContentChange: () => this._optionPortal.scheduleRefresh()
 		});
-		this._portal = e, _(e.panel, this, [
+		this._portal = portal;
+		applyOverlayVariables(portal.panel, this, [
 			"--wui-overlay-min-width",
 			"--wui-select-max-width",
 			"--wui-select-max-height"
-		]), e.panel.setAttribute("role", "listbox");
-		let n = document.createElement("div");
-		n.className = "select-scroll wui-scroll";
-		let r = document.createElement("div");
-		return r.className = "select-content", this._portalContent = r, n.append(r), e.panel.append(n), e.moveContent(Array.from(this.children).filter((e) => e.slot !== "trigger"), r), e;
+		]);
+		portal.panel.setAttribute("role", "listbox");
+		const scroll = document.createElement("div");
+		scroll.className = "select-scroll wui-scroll";
+		const content = document.createElement("div");
+		content.className = "select-content";
+		this._portalContent = content;
+		scroll.append(content);
+		portal.panel.append(scroll);
+		portal.moveContent(Array.from(this.children).filter((child) => child.slot !== "trigger"), content);
+		return portal;
 	}
 	_reconfigureOverlay() {
-		this._portal = void 0, this._portalContent = void 0, this._panel.reconfigure(this._isOpen), this._syncOverlayInert();
+		this._portal = void 0;
+		this._portalContent = void 0;
+		this._panel.reconfigure(this._isOpen);
+		this._syncOverlayInert();
 	}
 	async _closeOverlay() {
-		await this._panel.close(() => this._isOpen) && (this._portal = void 0, this._portalContent = void 0);
+		if (await this._panel.close(() => this._isOpen)) {
+			this._portal = void 0;
+			this._portalContent = void 0;
+		}
 	}
 	render() {
-		let e = `${this.localName}-listbox`, t = !this.portal && this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex]?.id ?? C : C;
-		return S`
+		const listboxId = `${this.localName}-listbox`;
+		const activeDescendant = !this.portal && this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex]?.id ?? nothing : nothing;
+		return html`
       <div class="wui-select-inner">
         <div
           class="wui-glass select-trigger"
@@ -321,16 +462,16 @@ var A = class extends i(x) {
           role="combobox"
           aria-expanded=${this._isOpen}
           aria-haspopup="listbox"
-          aria-controls=${this.portal ? C : e}
+          aria-controls=${this.portal ? nothing : listboxId}
           aria-disabled=${String(this._isDisabled)}
-          aria-activedescendant=${t}
-          aria-label=${O(this.ariaLabel)}
+          aria-activedescendant=${activeDescendant}
+          aria-label=${ifDefined(this.ariaLabel)}
         >
           <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
-          ${this._hasTriggerSlot ? C : S`<span class="label">${this._selectedLabel}</span>`}
-          <web-ui-icon class="arrow" .icon=${n}></web-ui-icon>
+          ${!this._hasTriggerSlot ? html`<span class="label">${this._selectedLabel}</span>` : nothing}
+          <web-ui-icon class="arrow" .icon=${lucide_chevron_down_default}></web-ui-icon>
         </div>
-        <div class="select-overlay wui-floating-panel wui-glass" hidden role="listbox" id=${e}>
+        <div class="select-overlay wui-floating-panel wui-glass" hidden role="listbox" id=${listboxId}>
           <div class="select-scroll wui-scroll">
             <div class="select-content">
               <slot @slotchange=${this._onSlotChange}></slot>
@@ -341,33 +482,46 @@ var A = class extends i(x) {
     `;
 	}
 };
-e([E({
+__decorate([property({
 	type: String,
-	reflect: !0
-})], A.prototype, "placeholder", void 0), e([E({
+	reflect: true
+})], WebUiSelect.prototype, "placeholder", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], A.prototype, "disabled", void 0), e([E({
+	reflect: true
+})], WebUiSelect.prototype, "disabled", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], A.prototype, "required", void 0), e([E({
+	reflect: true
+})], WebUiSelect.prototype, "required", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], A.prototype, "portal", void 0), e([E({
+	reflect: true
+})], WebUiSelect.prototype, "portal", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "no-scroll-lock"
-})], A.prototype, "noScrollLock", void 0), e([E({ attribute: !1 })], A.prototype, "overlayContainer", void 0), e([E({
+})], WebUiSelect.prototype, "noScrollLock", void 0);
+__decorate([property({ attribute: false })], WebUiSelect.prototype, "overlayContainer", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], A.prototype, "name", void 0), e([E({
+	reflect: true
+})], WebUiSelect.prototype, "name", void 0);
+__decorate([property({
 	type: String,
 	attribute: "aria-label"
-})], A.prototype, "ariaLabel", void 0), e([D()], A.prototype, "_value", void 0), e([E({
+})], WebUiSelect.prototype, "ariaLabel", void 0);
+__decorate([state()], WebUiSelect.prototype, "_value", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], A.prototype, "value", null), e([D()], A.prototype, "_isOpen", void 0), e([D()], A.prototype, "_activeIndex", void 0), e([D()], A.prototype, "_selectedLabel", void 0), e([D()], A.prototype, "_hasTriggerSlot", void 0), A = k = e([T("web-ui-select")], A);
-//#endregion
-export { A as WebUiSelect };
+	reflect: true
+})], WebUiSelect.prototype, "value", null);
+__decorate([state()], WebUiSelect.prototype, "_isOpen", void 0);
+__decorate([state()], WebUiSelect.prototype, "_activeIndex", void 0);
+__decorate([state()], WebUiSelect.prototype, "_selectedLabel", void 0);
+__decorate([state()], WebUiSelect.prototype, "_hasTriggerSlot", void 0);
+WebUiSelect = _WebUiSelect = __decorate([customElement("web-ui-select")], WebUiSelect);
+export { WebUiSelect };
 
 //# sourceMappingURL=index.js.map