@greypan/web-ui 11.2.0 → 12.0.0

package/dist/components/autocomplete/index.js

@@ -1,211 +1,296 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import t from "../../classes/glass.js";
-import { FormAssociated as n, FormAssociationController as r, defineFormAssociation as i } from "../../shared/form-association/index.js";
-import { normalizeLiteral as a } from "../../shared/normalize/index.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import glass_default from "../../classes/glass.js";
+import { FormAssociated, FormAssociationController, defineFormAssociation } from "../../shared/form-association/index.js";
+import { normalizeLiteral } from "../../shared/normalize/index.js";
 import "../input/index.js";
-import o from "../../assets/overlay-motion.js";
-import s from "../../scrollbars/internal.js";
-import { dispatchOpenChangeEvent as c } from "../../shared/open-state/index.js";
-import { createComboboxOpenController as l, createOptionListenerBinding as u, defineComboboxTrigger 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/autocomplete/index.ts
-var k, A = [
+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, defineComboboxTrigger, 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/autocomplete/index.ts
+var _WebUiAutocomplete;
+const FILTER_MODES = [
 	"none",
 	"prefix",
 	"contains"
 ];
-function j(e) {
-	return e instanceof Element && e.slot === "trigger";
+function isTriggerSlotNode(node) {
+	return node instanceof Element && node.slot === "trigger";
 }
-function M(e) {
-	return e instanceof Element && e.slot === "empty";
+function isEmptySlotNode(node) {
+	return node instanceof Element && node.slot === "empty";
 }
-var N = class extends n(x) {
+let WebUiAutocomplete = class WebUiAutocomplete extends FormAssociated(LitElement) {
 	static {
-		k = this;
-	}
-	constructor(...e) {
-		super(...e), this.placeholder = "", this.borderless = !1, this.disabled = !1, this.readonly = !1, this.required = !1, this.portal = !1, this.noScrollLock = !1, this.allowCustomValue = !1, this.name = "", this.ariaLabel = null, this._filter = "contains", this._value = "", this._selectedValue = "", this._formAssociation = i({
+		_WebUiAutocomplete = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.placeholder = "";
+		this.borderless = false;
+		this.disabled = false;
+		this.readonly = false;
+		this.required = false;
+		this.portal = false;
+		this.noScrollLock = false;
+		this.allowCustomValue = false;
+		this.name = "";
+		this.ariaLabel = null;
+		this._filter = "contains";
+		this._value = "";
+		this._selectedValue = "";
+		this._formAssociation = defineFormAssociation({
 			host: this,
 			initialize: () => {
-				let e = this.getAttribute("value");
-				e !== null && (this._value = e);
+				const attrValue = this.getAttribute("value");
+				if (attrValue !== null) this._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 r(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._hasTriggerSlot = !1, this._idPrefix = `web-ui-autocomplete-${++k._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._keyboardNavigationActive = !1, this._scrollLock = y().make(), this._optionPortal = m().make({
+		}).make();
+		this._formAssociationController = new FormAssociationController(this, this._formAssociation);
+		this._isOpen = false;
+		this._activeIndex = -1;
+		this._focused = false;
+		this._hasTriggerSlot = false;
+		this._idPrefix = `web-ui-autocomplete-${++_WebUiAutocomplete._nextInstanceId}`;
+		this._a11yOptionIds = /* @__PURE__ */ new WeakMap();
+		this._nextA11yOptionId = 0;
+		this._options = [];
+		this._keyboardNavigationActive = false;
+		this._scrollLock = defineScrollLockLease().make();
+		this._optionPortal = defineOptionPortal().make({
 			element: this,
 			idPrefix: `${this._idPrefix}-option`,
 			getPortal: () => this._portal,
 			getPortalContent: () => this._portalContent,
 			isOpen: () => this.portal && this._isOpen,
-			getMigratableNodes: () => Array.from(this.childNodes).filter((e) => !j(e) && !M(e)),
+			getMigratableNodes: () => Array.from(this.childNodes).filter((node) => !isTriggerSlotNode(node) && !isEmptySlotNode(node)),
 			hasUpdated: () => this.hasUpdated,
 			requestUpdate: () => this.requestUpdate(),
-			bindOption: (e) => this._bindOption(e),
-			unbindOption: (e) => this._unbindOption(e)
-		}), this._trigger = d().make({
+			bindOption: (option) => this._bindOption(option),
+			unbindOption: (option) => this._unbindOption(option)
+		});
+		this._trigger = defineComboboxTrigger().make({
 			getWrapper: () => this.shadowRoot?.querySelector(".autocomplete-trigger") ?? null,
 			getCustomTrigger: () => {
-				let e = this.shadowRoot?.querySelector("slot[name=\"trigger\"]")?.assignedElements()[0];
-				return e instanceof HTMLElement ? e : null;
+				const assigned = this.shadowRoot?.querySelector("slot[name=\"trigger\"]")?.assignedElements()[0];
+				return assigned instanceof HTMLElement ? assigned : null;
 			},
 			getFallbackTrigger: () => this.shadowRoot?.querySelector(".autocomplete-input") ?? null,
-			onInput: (e) => this._onTriggerInput(e),
+			onInput: (value) => this._onTriggerInput(value),
 			onClick: () => this._onTriggerClick(),
-			onFocusIn: (e) => this._onTriggerFocusIn(e),
-			onFocusOut: (e) => this._onTriggerFocusOut(e)
-		}), this._overlay = g().make({
+			onFocusIn: (event) => this._onTriggerFocusIn(event),
+			onFocusOut: (event) => this._onTriggerFocusOut(event)
+		});
+		this._overlay = defineOpenOverlay().make({
 			requestClose: () => this._close(),
 			isConnected: () => this.isConnected
-		}), this._panel = h().make({
+		});
+		this._panel = defineAnchoredPanel().make({
 			getAnchor: () => this._trigger.getTrigger() ?? this.shadowRoot?.querySelector(".autocomplete-trigger") ?? null,
 			getLocalPanel: () => this.shadowRoot?.querySelector(".autocomplete-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) => {
-			this._isOpen && (e.composedPath().includes(this) || this._panel.getHandle()?.containsEvent(e) || this._close());
-		}, this._onFocusOut = () => {
-			f(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
-		}, this._handlePanelPointerDown = (e) => {
+		});
+		this._onClickOutside = (e) => {
+			if (!this._isOpen) return;
+			if (!(e.composedPath().includes(this) || !!this._panel.getHandle()?.containsEvent(e))) this._close();
+		};
+		this._onFocusOut = () => {
+			handleComboboxFocusOut(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
+		};
+		this._handlePanelPointerDown = (e) => {
 			e.preventDefault();
-		}, this._onTriggerSlotChange = () => {
+		};
+		this._onTriggerSlotChange = () => {
 			this._syncTriggerSlot();
-		}, this._optionListeners = u({
-			onClick: (e) => this._handleOptionClick(e),
-			onPointerOver: (e) => this._handleOptionPointerOver(e),
-			onPointerDown: (e) => this._handleOptionPointerDown(e),
+		};
+		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._selectOption(t);
-		}, this._onOptionUpdate = () => {
+			const option = e.currentTarget;
+			if (option.disabled) return;
+			this._selectOption(option);
+		};
+		this._onOptionUpdate = () => {
 			this._optionPortal.scheduleRefresh();
-		}, this._handleOptionPointerOver = (e) => {
-			e.pointerType !== "touch" && this._isOpen && e.currentTarget instanceof HTMLElement && (this._keyboardNavigationActive || (this._activeIndex = -1, this._syncActiveOption()));
-		}, this._handleListPointerMove = () => {
-			this._isOpen && this._clearKeyboardNavigation();
-		}, this._handleListWheel = () => {
-			this._isOpen && this._clearKeyboardNavigation();
-		}, this._handleOptionPointerDown = (e) => {
+		};
+		this._handleOptionPointerOver = (e) => {
+			if (e.pointerType === "touch") return;
+			if (!this._isOpen || !(e.currentTarget instanceof HTMLElement)) return;
+			if (this._keyboardNavigationActive) return;
+			this._activeIndex = -1;
+			this._syncActiveOption();
+		};
+		this._handleListPointerMove = () => {
+			if (!this._isOpen) return;
+			this._clearKeyboardNavigation();
+		};
+		this._handleListWheel = () => {
+			if (!this._isOpen) return;
+			this._clearKeyboardNavigation();
+		};
+		this._handleOptionPointerDown = (e) => {
 			e.preventDefault();
-		}, this._onSlotChange = () => {
+		};
+		this._onSlotChange = () => {
 			this._optionPortal.scheduleRefresh();
-		}, this._onKeydown = (e) => {
-			if (!(this._isDisabled || this.readonly)) switch (this._applyFilter(), this._syncOpenWithMatches(), e.key) {
+		};
+		this._onKeydown = (e) => {
+			if (this._isDisabled || this.readonly) return;
+			this._applyFilter();
+			this._syncOpenWithMatches();
+			switch (e.key) {
 				case "ArrowDown":
 				case "ArrowUp":
 					if (this._isOpen && this._trigger.isMultilineEdit(e)) break;
-					e.preventDefault(), this._isOpen ? this._navigateActive(e.key === "ArrowDown" ? 1 : -1) : this._open(!0);
+					e.preventDefault();
+					if (!this._isOpen) this._open(true);
+					else this._navigateActive(e.key === "ArrowDown" ? 1 : -1);
 					break;
 				case "Enter": {
-					let t = this._canSubmitCustomValue();
-					if (!this._trigger.isMultilineEdit(e) && (this._isOpen || !this._hasMatchingOptions() && t)) {
-						if (e.preventDefault(), this._isOpen) {
-							let e = this._options[this._activeIndex];
-							if (e && !e.disabled && !e.hasAttribute("data-filtered")) {
-								this._selectOption(e);
+					const canSubmitCustomValue = this._canSubmitCustomValue();
+					if (!this._trigger.isMultilineEdit(e) && (this._isOpen || !this._hasMatchingOptions() && canSubmitCustomValue)) {
+						e.preventDefault();
+						if (this._isOpen) {
+							const option = this._options[this._activeIndex];
+							if (option && !option.disabled && !option.hasAttribute("data-filtered")) {
+								this._selectOption(option);
 								return;
 							}
-							let t = this._findExactOption(this._value);
-							if (t) {
-								this._selectOption(t);
+							const exactOption = this._findExactOption(this._value);
+							if (exactOption) {
+								this._selectOption(exactOption);
 								return;
 							}
 						}
-						t && this._selectCustomValue();
+						if (canSubmitCustomValue) this._selectCustomValue();
 					}
 					break;
 				}
 			}
-		}, this._onTriggerInput = (e) => {
-			this._isDisabled || this.readonly || e !== this._value && (this.value = e, this._keyboardNavigationActive = !1, this._activeIndex = -1, this._syncActiveOption(), this._open());
-		}, this._onTriggerClick = () => {
-			this._isDisabled || this.readonly || this._open();
-		}, this._onTriggerFocusIn = (e) => {
-			this._isDisabled || (this._focused = !0, this._isSlottedFocus(e) && this.dispatchEvent(new FocusEvent("focus", {
-				composed: !0,
-				relatedTarget: e.relatedTarget
-			})));
-		}, this._onTriggerFocusOut = (e) => {
-			this._focused = !1, this._isSlottedFocus(e) && this.dispatchEvent(new FocusEvent("blur", {
-				composed: !0,
-				relatedTarget: e.relatedTarget
+		};
+		this._onTriggerInput = (value) => {
+			if (this._isDisabled || this.readonly) return;
+			if (value === this._value) return;
+			this.value = value;
+			this._keyboardNavigationActive = false;
+			this._activeIndex = -1;
+			this._syncActiveOption();
+			this._open();
+		};
+		this._onTriggerClick = () => {
+			if (this._isDisabled || this.readonly) return;
+			this._open();
+		};
+		this._onTriggerFocusIn = (event) => {
+			if (this._isDisabled) return;
+			this._focused = true;
+			if (this._isSlottedFocus(event)) this.dispatchEvent(new FocusEvent("focus", {
+				composed: true,
+				relatedTarget: event.relatedTarget
+			}));
+		};
+		this._onTriggerFocusOut = (event) => {
+			this._focused = false;
+			if (this._isSlottedFocus(event)) this.dispatchEvent(new FocusEvent("blur", {
+				composed: true,
+				relatedTarget: event.relatedTarget
 			}));
-		}, this._openController = l({
+		};
+		this._openController = createComboboxOpenController({
 			canOpen: () => !this._isDisabled && !this.readonly,
 			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._keyboardNavigationActive = e, e ? this._setInitialActiveOption() : this._syncActiveOption();
+			onOpen: (isKeyboardNavigation) => {
+				this._keyboardNavigationActive = isKeyboardNavigation;
+				if (isKeyboardNavigation) this._setInitialActiveOption();
+				else this._syncActiveOption();
 			},
 			onBeforeClose: () => {
 				this._optionPortal.syncPortalContent();
 			},
 			onAfterClose: () => {
-				this._keyboardNavigationActive = !1, this._activeIndex = -1, this._options.forEach((e) => e.removeAttribute("active")), this._syncScrollInteractionListeners();
+				this._keyboardNavigationActive = false;
+				this._activeIndex = -1;
+				this._options.forEach((o) => o.removeAttribute("active"));
+				this._syncScrollInteractionListeners();
 			}
 		});
 	}
 	static {
 		this.styles = [
-			w(t),
-			w(o),
-			w(s),
-			w(b)
+			unsafeCSS(glass_default),
+			unsafeCSS(overlay_motion_default),
+			unsafeCSS(scrollbar_default),
+			unsafeCSS(style_default)
 		];
 	}
 	get filter() {
 		return this._filter;
 	}
-	set filter(e) {
-		let t = this._filter;
-		this._filter = a(e, A, "contains"), this.requestUpdate("filter", t);
+	set filter(v) {
+		const old = this._filter;
+		this._filter = normalizeLiteral(v, FILTER_MODES, "contains");
+		this.requestUpdate("filter", old);
 	}
 	get value() {
 		return this._value;
 	}
-	set value(e) {
-		let t = this._value;
-		this._value = e, this._formAssociation.sync(), this.requestUpdate("value", t);
+	set value(v) {
+		const old = this._value;
+		this._value = v;
+		this._formAssociation.sync();
+		this.requestUpdate("value", old);
 	}
 	get selectedValue() {
 		return this._selectedValue;
 	}
-	_setSelectedValue(e) {
-		let t = this._selectedValue;
-		(t !== e || this.getAttribute("selected-value") !== e) && (this._selectedValue = e, this.setAttribute("selected-value", e), t !== e && this.requestUpdate("selectedValue", t));
+	_setSelectedValue(value) {
+		const old = this._selectedValue;
+		if (old === value && this.getAttribute("selected-value") === value) return;
+		this._selectedValue = value;
+		this.setAttribute("selected-value", value);
+		if (old !== value) this.requestUpdate("selectedValue", old);
 	}
 	get _isDisabled() {
 		return this.disabled || this._formAssociation.isFormDisabled();
@@ -219,44 +304,81 @@ var N = class extends n(x) {
 	get open() {
 		return this._isOpen;
 	}
-	focus(e) {
-		this._trigger.focusTrigger(e);
+	focus(options) {
+		this._trigger.focusTrigger(options);
 	}
 	blur() {
 		this._trigger.blurTrigger();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._optionPortal.bindHost(), this._trigger.bind(), this.addEventListener("keydown", this._onKeydown), this.addEventListener("focusout", this._onFocusOut), document.addEventListener("click", this._onClickOutside);
+		super.connectedCallback();
+		this._optionPortal.bindHost();
+		this._trigger.bind();
+		this.addEventListener("keydown", this._onKeydown);
+		this.addEventListener("focusout", this._onFocusOut);
+		document.addEventListener("click", this._onClickOutside);
 	}
 	_syncTriggerSlot() {
-		let e = Array.from(this.children).some(j);
-		this._hasTriggerSlot !== e && (this._hasTriggerSlot = e, this.hasUpdated && this._reconfigureOverlay());
-	}
-	attributeChangedCallback(e, t, n) {
-		super.attributeChangedCallback(e, t, n), e === "selected-value" && this.isConnected && n !== this._selectedValue && queueMicrotask(() => {
-			this.isConnected && this._syncSelectedValue();
+		const hasTriggerSlot = Array.from(this.children).some(isTriggerSlotNode);
+		if (this._hasTriggerSlot === hasTriggerSlot) return;
+		this._hasTriggerSlot = hasTriggerSlot;
+		if (this.hasUpdated) this._reconfigureOverlay();
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		super.attributeChangedCallback(name, oldValue, newValue);
+		if (name === "selected-value" && this.isConnected && newValue !== this._selectedValue) queueMicrotask(() => {
+			if (this.isConnected) this._syncSelectedValue();
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._optionPortal.dispose(), this._trigger.dispose(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._close(), this._syncScrollInteractionListeners(), this._portal = void 0, this._portalContent = void 0, this._panel.dispose(), this._scrollLock.release();
+		super.disconnectedCallback();
+		this._optionPortal.dispose();
+		this._trigger.dispose();
+		this.removeEventListener("keydown", this._onKeydown);
+		this.removeEventListener("focusout", this._onFocusOut);
+		document.removeEventListener("click", this._onClickOutside);
+		this._options.forEach(this._unbindOption);
+		this._close();
+		this._syncScrollInteractionListeners();
+		this._portal = void 0;
+		this._portalContent = void 0;
+		this._panel.dispose();
+		this._scrollLock.release();
 	}
 	firstUpdated() {
-		this._trigger.bind(), requestAnimationFrame(() => {
-			this.isConnected && this._optionPortal.scheduleRefresh();
+		this._trigger.bind();
+		requestAnimationFrame(() => {
+			if (this.isConnected) this._optionPortal.scheduleRefresh();
 		});
 	}
 	willUpdate() {
-		this._syncTriggerSlot(), this._refreshOptions(), this._optionPortal.ensureOptionIds(this._options), this._syncSelectedValue(), this._applyFilter(), this._syncOptionA11y(), this._syncActiveOption();
-	}
-	updated(e) {
-		this._trigger.setValue(this._value), (e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this.toggleAttribute("focused", this._focused), this._syncOpenAttribute(), this._syncOverlayInert(), this._syncValidity(), this._syncOpenWithMatches();
-	}
-	formDisabledCallback(e) {
-		this._formAssociation.setDisabled(e), e && this._isOpen && this._close();
+		this._syncTriggerSlot();
+		this._refreshOptions();
+		this._optionPortal.ensureOptionIds(this._options);
+		this._syncSelectedValue();
+		this._applyFilter();
+		this._syncOptionA11y();
+		this._syncActiveOption();
+	}
+	updated(changed) {
+		this._trigger.setValue(this._value);
+		if (changed.has("portal") || changed.has("overlayContainer")) requestAnimationFrame(() => this._reconfigureOverlay());
+		if (changed.has("noScrollLock")) this._syncScrollLock();
+		this.toggleAttribute("focused", this._focused);
+		this._syncOpenAttribute();
+		this._syncOverlayInert();
+		this._syncValidity();
+		this._syncOpenWithMatches();
+	}
+	formDisabledCallback(disabled) {
+		this._formAssociation.setDisabled(disabled);
+		if (disabled && this._isOpen) this._close();
 	}
 	_syncValidity() {
-		let e = this._formAssociation.getInternals();
-		e && typeof e.setValidity == "function" && (this._isDisabled || this.readonly || !this.required || this._value ? e.setValidity({}) : e.setValidity({ valueMissing: !0 }, "Enter a value"));
+		const internals = this._formAssociation.getInternals();
+		if (!internals || typeof internals.setValidity !== "function") return;
+		if (this._isDisabled || this.readonly || !this.required || this._value) internals.setValidity({});
+		else internals.setValidity({ valueMissing: true }, "Enter a value");
 	}
 	_syncOpenAttribute() {
 		this.toggleAttribute("open", this._isOpen);
@@ -265,159 +387,227 @@ var N = class extends n(x) {
 		this._panel.getHandle()?.setInert(this._isDisabled || this.readonly);
 	}
 	_syncSelectedValue() {
-		let e = this._value.trim().toLowerCase(), t = e ? this._options.find((t) => !t.disabled && t.label.trim().toLowerCase() === e)?.value ?? "" : "";
-		this._setSelectedValue(t);
+		const query = this._value.trim().toLowerCase();
+		const next = query ? this._options.find((o) => !o.disabled && o.label.trim().toLowerCase() === query)?.value ?? "" : "";
+		this._setSelectedValue(next);
 	}
 	_syncOptionA11y() {
-		this._options.forEach((e) => {
-			e.setAttribute("role", "option"), e.setAttribute("aria-selected", e.value === this._selectedValue ? "true" : "false"), e.setAttribute("aria-hidden", "true");
+		this._options.forEach((o) => {
+			o.setAttribute("role", "option");
+			o.setAttribute("aria-selected", o.value === this._selectedValue ? "true" : "false");
+			o.setAttribute("aria-hidden", "true");
 		});
 	}
-	_getA11yOptionId(e) {
-		let t = this._a11yOptionIds.get(e);
-		return t || (t = `${this._idPrefix}-a11y-option-${++this._nextA11yOptionId}`, this._a11yOptionIds.set(e, t)), t;
+	_getA11yOptionId(option) {
+		let id = this._a11yOptionIds.get(option);
+		if (!id) {
+			id = `${this._idPrefix}-a11y-option-${++this._nextA11yOptionId}`;
+			this._a11yOptionIds.set(option, id);
+		}
+		return id;
 	}
 	_applyFilter() {
-		let e = this._value.trim().toLowerCase(), t = this._filter;
-		this._options.forEach((n) => {
-			let r = n.label.trim().toLowerCase(), i = t === "none" || !e || (t === "prefix" ? r.startsWith(e) : r.includes(e));
-			n.toggleAttribute("data-filtered", !i);
+		const query = this._value.trim().toLowerCase();
+		const mode = this._filter;
+		this._options.forEach((o) => {
+			const label = o.label.trim().toLowerCase();
+			const match = mode === "none" || !query || (mode === "prefix" ? label.startsWith(query) : label.includes(query));
+			o.toggleAttribute("data-filtered", !match);
 		});
-		let n = this._options[this._activeIndex];
-		this._activeIndex >= 0 && (!n || n.hasAttribute("data-filtered") || n.disabled) && (this._activeIndex = -1, this._syncActiveOption());
+		const active = this._options[this._activeIndex];
+		if (this._activeIndex >= 0 && (!active || active.hasAttribute("data-filtered") || active.disabled)) {
+			this._activeIndex = -1;
+			this._syncActiveOption();
+		}
 	}
 	_hasMatchingOptions() {
-		return this._options.some((e) => !e.hasAttribute("data-filtered"));
+		return this._options.some((option) => !option.hasAttribute("data-filtered"));
 	}
 	_syncOpenWithMatches() {
-		this._isOpen && !this._hasMatchingOptions() && this._close();
+		if (this._isOpen && !this._hasMatchingOptions()) this._close();
 	}
 	_refreshOptions() {
-		let e = this._options[this._activeIndex], t = this._optionPortal.refresh(this._options, e);
-		this._options = t.options, this._activeIndex = t.activeIndex;
+		const activeOption = this._options[this._activeIndex];
+		const next = this._optionPortal.refresh(this._options, activeOption);
+		this._options = next.options;
+		this._activeIndex = next.activeIndex;
 	}
 	_syncScrollInteractionListeners() {
-		let e = this._isOpen ? this._panel.getPanel()?.querySelector(".autocomplete-scroll") : void 0;
-		e !== this._scrollInteractionElement && (this._scrollInteractionElement?.removeEventListener("pointermove", this._handleListPointerMove), this._scrollInteractionElement?.removeEventListener("wheel", this._handleListWheel), this._scrollInteractionElement = e ?? void 0, this._scrollInteractionElement?.addEventListener("pointermove", this._handleListPointerMove), this._scrollInteractionElement?.addEventListener("wheel", this._handleListWheel));
+		const next = this._isOpen ? this._panel.getPanel()?.querySelector(".autocomplete-scroll") : void 0;
+		if (next === this._scrollInteractionElement) return;
+		this._scrollInteractionElement?.removeEventListener("pointermove", this._handleListPointerMove);
+		this._scrollInteractionElement?.removeEventListener("wheel", this._handleListWheel);
+		this._scrollInteractionElement = next ?? void 0;
+		this._scrollInteractionElement?.addEventListener("pointermove", this._handleListPointerMove);
+		this._scrollInteractionElement?.addEventListener("wheel", this._handleListWheel);
 	}
 	_clearKeyboardNavigation() {
-		this._keyboardNavigationActive && (this._keyboardNavigationActive = !1, this._activeIndex = -1, this._syncActiveOption());
-	}
-	_navigateActive(e) {
-		let t = this._options.filter((e) => !e.disabled && !e.hasAttribute("data-filtered"));
-		if (!t.length) return;
-		this._keyboardNavigationActive = !0;
-		let n = this._activeIndex >= 0 ? t.indexOf(this._options[this._activeIndex]) : e > 0 ? -1 : 0;
-		this._activeIndex = this._options.indexOf(t[p(t.length, n, e)]), this._syncActiveOption();
+		if (!this._keyboardNavigationActive) return;
+		this._keyboardNavigationActive = false;
+		this._activeIndex = -1;
+		this._syncActiveOption();
+	}
+	_navigateActive(delta) {
+		const enabled = this._options.filter((o) => !o.disabled && !o.hasAttribute("data-filtered"));
+		if (!enabled.length) return;
+		this._keyboardNavigationActive = true;
+		const currentIdx = this._activeIndex >= 0 ? enabled.indexOf(this._options[this._activeIndex]) : delta > 0 ? -1 : 0;
+		this._activeIndex = this._options.indexOf(enabled[nextWrappingIndex(enabled.length, currentIdx, delta)]);
+		this._syncActiveOption();
 	}
 	_setInitialActiveOption() {
-		let e = this._options.findIndex((e) => !e.disabled && !e.hasAttribute("data-filtered"));
-		this._keyboardNavigationActive = !0, this._activeIndex = e, this._syncActiveOption();
+		const firstEnabled = this._options.findIndex((o) => !o.disabled && !o.hasAttribute("data-filtered"));
+		this._keyboardNavigationActive = true;
+		this._activeIndex = firstEnabled;
+		this._syncActiveOption();
 	}
 	_syncActiveOption() {
-		this._options.forEach((e, t) => e.toggleAttribute("active", t === this._activeIndex)), this._isOpen && this._scrollActiveOptionIntoView();
+		this._options.forEach((option, index) => option.toggleAttribute("active", index === this._activeIndex));
+		if (this._isOpen) this._scrollActiveOptionIntoView();
 	}
 	_scrollActiveOptionIntoView() {
-		let e = this._options[this._activeIndex], t = this._panel.getPanel()?.querySelector(".autocomplete-scroll");
-		if (!e || !t?.clientHeight) return;
-		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = t.offsetHeight ? r.height / t.offsetHeight : 1;
-		if (!i) return;
-		let a = r.top + t.clientTop * i, o = a + t.clientHeight * i;
-		n.top < a ? t.scrollTop -= (a - n.top) / i : n.bottom > o && (t.scrollTop += (n.bottom - o) / i);
-	}
-	_selectOption(e) {
-		this.readonly || (this.value = e.label, this._setSelectedValue(e.value), this._close(), this.dispatchEvent(new Event("input", {
-			bubbles: !0,
-			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
-		})));
-	}
-	_findExactOption(e) {
-		let t = e.trim().toLowerCase();
-		if (t) return this._options.find((e) => !e.disabled && e.label.trim().toLowerCase() === t);
-	}
-	_hasExactOption(e) {
-		let t = e.trim().toLowerCase();
-		return this._options.some((e) => e.label.trim().toLowerCase() === t);
+		const activeOption = this._options[this._activeIndex];
+		const scroll = this._panel.getPanel()?.querySelector(".autocomplete-scroll");
+		if (!activeOption || !scroll?.clientHeight) return;
+		const optionRect = activeOption.getBoundingClientRect();
+		const scrollRect = scroll.getBoundingClientRect();
+		const scaleY = scroll.offsetHeight ? scrollRect.height / scroll.offsetHeight : 1;
+		if (!scaleY) return;
+		const visibleTop = scrollRect.top + scroll.clientTop * scaleY;
+		const visibleBottom = visibleTop + scroll.clientHeight * scaleY;
+		if (optionRect.top < visibleTop) scroll.scrollTop -= (visibleTop - optionRect.top) / scaleY;
+		else if (optionRect.bottom > visibleBottom) scroll.scrollTop += (optionRect.bottom - visibleBottom) / scaleY;
+	}
+	_selectOption(option) {
+		if (this.readonly) return;
+		this.value = option.label;
+		this._setSelectedValue(option.value);
+		this._close();
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_findExactOption(value) {
+		const query = value.trim().toLowerCase();
+		if (!query) return void 0;
+		return this._options.find((option) => !option.disabled && option.label.trim().toLowerCase() === query);
+	}
+	_hasExactOption(value) {
+		const query = value.trim().toLowerCase();
+		return this._options.some((option) => option.label.trim().toLowerCase() === query);
 	}
 	_canSubmitCustomValue() {
 		return this.allowCustomValue && !!this._value && !this._hasExactOption(this._value);
 	}
 	_selectCustomValue() {
-		this._close(), this.dispatchEvent(new Event("input", {
-			bubbles: !0,
-			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
+		this._close();
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
 		}));
 	}
-	_isSlottedFocus(e) {
-		let t = e.target;
-		return t instanceof Node && !!this.shadowRoot && !this.shadowRoot.contains(t);
+	_isSlottedFocus(event) {
+		const target = event.target;
+		return target instanceof Node && !!this.shadowRoot && !this.shadowRoot.contains(target);
 	}
-	_open(e = !1) {
-		if (this._applyFilter(), !this._hasMatchingOptions()) {
-			this._isOpen && this._close();
+	_open(isKeyboardNavigation = false) {
+		this._applyFilter();
+		if (!this._hasMatchingOptions()) {
+			if (this._isOpen) this._close();
 			return;
 		}
-		this._openController.open(e);
+		this._openController.open(isKeyboardNavigation);
 	}
 	_close() {
 		this._openController.close();
 	}
 	_dispatchOpenChange() {
-		c(this, this._isOpen);
+		dispatchOpenChangeEvent(this, this._isOpen);
 	}
-	_openOverlay(e = !1) {
-		this._panel.open(e), this._syncScrollInteractionListeners(), this._syncActiveOption(), this._syncOverlayInert();
+	_openOverlay(isKeyboardNavigation = false) {
+		this._panel.open(isKeyboardNavigation);
+		this._syncScrollInteractionListeners();
+		this._syncActiveOption();
+		this._syncOverlayInert();
 	}
 	async _closeOverlay() {
-		await this._panel.close(() => this._isOpen) && (this._syncScrollInteractionListeners(), this._portal = void 0, this._portalContent = void 0);
+		if (await this._panel.close(() => this._isOpen)) {
+			this._syncScrollInteractionListeners();
+			this._portal = void 0;
+			this._portalContent = void 0;
+		}
 	}
 	_reconfigureOverlay() {
-		this._portal = void 0, this._portalContent = void 0, this._panel.reconfigure(this._isOpen), this._syncScrollInteractionListeners(), this._syncOverlayInert();
+		this._portal = void 0;
+		this._portalContent = void 0;
+		this._panel.reconfigure(this._isOpen);
+		this._syncScrollInteractionListeners();
+		this._syncOverlayInert();
 	}
-	_syncScrollLock(e = this._isOpen) {
-		this._scrollLock.sync(e && !this.noScrollLock);
+	_syncScrollLock(isOpen = this._isOpen) {
+		this._scrollLock.sync(isOpen && !this.noScrollLock);
 	}
 	_createPortal() {
-		let e = v().make({
+		const portal = defineOverlayPortal().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${o}\n${s}\n${b}`,
+			style: `${glass_default}\n${overlay_motion_default}\n${scrollbar_default}\n${style_default}`,
 			className: "wui-glass autocomplete-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-autocomplete-max-width",
 			"--wui-autocomplete-max-height"
-		]), e.panel.setAttribute("aria-hidden", "true"), e.panel.addEventListener("pointerdown", this._handlePanelPointerDown);
-		let n = document.createElement("div");
-		n.className = "autocomplete-scroll wui-scroll";
-		let r = document.createElement("div");
-		r.className = "autocomplete-content", this._portalContent = r, n.append(r), e.panel.append(n);
-		for (let t of Array.from(this.childNodes)) t instanceof Comment || j(t) || M(t) || e.appendContent([t], r);
-		return e;
+		]);
+		portal.panel.setAttribute("aria-hidden", "true");
+		portal.panel.addEventListener("pointerdown", this._handlePanelPointerDown);
+		const scroll = document.createElement("div");
+		scroll.className = "autocomplete-scroll wui-scroll";
+		const content = document.createElement("div");
+		content.className = "autocomplete-content";
+		this._portalContent = content;
+		scroll.append(content);
+		portal.panel.append(scroll);
+		for (const node of Array.from(this.childNodes)) {
+			if (node instanceof Comment) continue;
+			if (isTriggerSlotNode(node)) continue;
+			if (isEmptySlotNode(node)) continue;
+			portal.appendContent([node], content);
+		}
+		return portal;
 	}
 	_getLabelledbyText() {
 		if (!this.ariaLabelledby) return "";
-		let e = this.getRootNode();
-		return e instanceof Document || e instanceof ShadowRoot ? this.ariaLabelledby.trim().split(/\s+/).map((t) => {
-			let n = typeof CSS < "u" && CSS.escape ? CSS.escape(t) : t;
-			return e.querySelector(`#${n}`)?.textContent?.trim() ?? "";
-		}).filter(Boolean).join(" ") : "";
+		const root = this.getRootNode();
+		if (!(root instanceof Document || root instanceof ShadowRoot)) return "";
+		return this.ariaLabelledby.trim().split(/\s+/).map((id) => {
+			const escapedId = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(id) : id;
+			return root.querySelector(`#${escapedId}`)?.textContent?.trim() ?? "";
+		}).filter(Boolean).join(" ");
 	}
 	render() {
-		let e = `${this._idPrefix}-listbox`, t = `${this._idPrefix}-label`, n = this._getLabelledbyText(), r = this._options.filter((e) => !e.hasAttribute("data-filtered")), i = this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex] : void 0, a = i ? this._getA11yOptionId(i) : C;
-		return S`
+		const listboxId = `${this._idPrefix}-listbox`;
+		const labelId = `${this._idPrefix}-label`;
+		const labelledbyText = this._getLabelledbyText();
+		const visibleOptions = this._options.filter((option) => !option.hasAttribute("data-filtered"));
+		const activeOption = this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex] : void 0;
+		const activeDescendant = activeOption ? this._getA11yOptionId(activeOption) : nothing;
+		return html`
       <div class="wui-autocomplete-inner">
-        ${n ? S`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : C}
+        ${labelledbyText ? html`<span class="autocomplete-a11y-only" id=${labelId}>${labelledbyText}</span>` : nothing}
         <div
           class="autocomplete-trigger"
           ?data-custom-trigger=${this._hasTriggerSlot}
@@ -425,16 +615,16 @@ var N = class extends n(x) {
           aria-expanded=${this._isOpen}
           aria-haspopup="listbox"
           aria-autocomplete="list"
-          aria-controls=${e}
+          aria-controls=${listboxId}
           aria-disabled=${String(this._isDisabled)}
-          aria-readonly=${this.readonly ? "true" : C}
-          aria-label=${O(this.ariaLabel)}
-          aria-labelledby=${n ? t : C}
-          aria-activedescendant=${a}
+          aria-readonly=${this.readonly ? "true" : nothing}
+          aria-label=${ifDefined(this.ariaLabel)}
+          aria-labelledby=${labelledbyText ? labelId : nothing}
+          aria-activedescendant=${activeDescendant}
           tabindex="-1"
         >
           <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
-          ${this._hasTriggerSlot ? C : S`<web-ui-input
+          ${!this._hasTriggerSlot ? html`<web-ui-input
                   class="autocomplete-input"
                   .value=${this._value}
                   placeholder=${this.placeholder}
@@ -443,24 +633,24 @@ var N = class extends n(x) {
                   ?disabled=${this._isDisabled}
                   ?readonly=${this.readonly}
                   ?required=${this.required}
-                  aria-label=${O(this.ariaLabel || n || void 0)}
-                ></web-ui-input>`}
+                  aria-label=${ifDefined(this.ariaLabel || labelledbyText || void 0)}
+                ></web-ui-input>` : nothing}
         </div>
         <div
           class="autocomplete-a11y-listbox"
-          id=${e}
+          id=${listboxId}
           role="listbox"
           ?hidden=${!this._isOpen}
           aria-hidden=${String(!this._isOpen)}
         >
-          ${r.map((e) => S`<div
-                id=${this._getA11yOptionId(e)}
+          ${visibleOptions.map((option) => html`<div
+                id=${this._getA11yOptionId(option)}
                 role="option"
-                aria-selected=${e.value === this._selectedValue ? "true" : "false"}
+                aria-selected=${option.value === this._selectedValue ? "true" : "false"}
                 aria-hidden=${String(!this._isOpen)}
-                aria-disabled=${String(e.disabled)}
+                aria-disabled=${String(option.disabled)}
               >
-                ${e.label}
+                ${option.label}
               </div>`)}
         </div>
         <div
@@ -479,46 +669,64 @@ var N = class extends n(x) {
     `;
 	}
 };
-e([E({
+__decorate([property({
 	type: String,
-	reflect: !0
-})], N.prototype, "placeholder", void 0), e([E({
+	reflect: true
+})], WebUiAutocomplete.prototype, "placeholder", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], N.prototype, "borderless", void 0), e([E({
+	reflect: true
+})], WebUiAutocomplete.prototype, "borderless", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], N.prototype, "disabled", void 0), e([E({
+	reflect: true
+})], WebUiAutocomplete.prototype, "disabled", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], N.prototype, "readonly", void 0), e([E({
+	reflect: true
+})], WebUiAutocomplete.prototype, "readonly", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], N.prototype, "required", void 0), e([E({
+	reflect: true
+})], WebUiAutocomplete.prototype, "required", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], N.prototype, "portal", void 0), e([E({
+	reflect: true
+})], WebUiAutocomplete.prototype, "portal", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "no-scroll-lock"
-})], N.prototype, "noScrollLock", void 0), e([E({
+})], WebUiAutocomplete.prototype, "noScrollLock", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "allow-custom-value"
-})], N.prototype, "allowCustomValue", void 0), e([E({ attribute: !1 })], N.prototype, "overlayContainer", void 0), e([E({
+})], WebUiAutocomplete.prototype, "allowCustomValue", void 0);
+__decorate([property({ attribute: false })], WebUiAutocomplete.prototype, "overlayContainer", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], N.prototype, "name", void 0), e([E({
+	reflect: true
+})], WebUiAutocomplete.prototype, "name", void 0);
+__decorate([property({
 	type: String,
 	attribute: "aria-label"
-})], N.prototype, "ariaLabel", void 0), e([E({
+})], WebUiAutocomplete.prototype, "ariaLabel", void 0);
+__decorate([property({
 	type: String,
 	attribute: "aria-labelledby"
-})], N.prototype, "ariaLabelledby", void 0), e([E({
+})], WebUiAutocomplete.prototype, "ariaLabelledby", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], N.prototype, "filter", null), e([D()], N.prototype, "_value", void 0), e([D()], N.prototype, "_selectedValue", void 0), e([D()], N.prototype, "_isOpen", void 0), e([D()], N.prototype, "_activeIndex", void 0), e([D()], N.prototype, "_focused", void 0), e([D()], N.prototype, "_hasTriggerSlot", void 0), N = k = e([T("web-ui-autocomplete")], N);
-//#endregion
-export { N as WebUiAutocomplete };
+	reflect: true
+})], WebUiAutocomplete.prototype, "filter", null);
+__decorate([state()], WebUiAutocomplete.prototype, "_value", void 0);
+__decorate([state()], WebUiAutocomplete.prototype, "_selectedValue", void 0);
+__decorate([state()], WebUiAutocomplete.prototype, "_isOpen", void 0);
+__decorate([state()], WebUiAutocomplete.prototype, "_activeIndex", void 0);
+__decorate([state()], WebUiAutocomplete.prototype, "_focused", void 0);
+__decorate([state()], WebUiAutocomplete.prototype, "_hasTriggerSlot", void 0);
+WebUiAutocomplete = _WebUiAutocomplete = __decorate([customElement("web-ui-autocomplete")], WebUiAutocomplete);
+export { WebUiAutocomplete };
 
 //# sourceMappingURL=index.js.map