@greypan/web-ui 3.0.1 → 5.0.0

package/dist/components/autocomplete/index.js

@@ -1,26 +1,59 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import "../option/index.js";
 import t from "../../assets/glass.js";
 import n from "../../assets/overlay-motion.js";
-import { normalizeLiteral as r } from "../../shared/normalize/index.js";
-import { defineAnchoredPanel as i } from "../../shared/overlay/anchored-panel.js";
-import { defineOverlayPortal as a } from "../../shared/overlay/portal.js";
-import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
-import s from "./style.js";
-import { LitElement as c, html as l, nothing as u, unsafeCSS as d } from "lit";
-import { customElement as f, property as p, state as m } from "lit/decorators.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
+import { FormAssociationController as r, defineFormAssociation as i } from "../../shared/form-association/index.js";
+import { normalizeLiteral as a } from "../../shared/normalize/index.js";
+import { defineOptionPortal as o } from "../../shared/option-portal/index.js";
+import { defineAnchoredPanel as s } from "../../shared/overlay/anchored-panel.js";
+import { applyOverlayVariables as c, defineOverlayPortal as l } from "../../shared/overlay/portal.js";
+import { defineScrollLockLease as u } from "../../shared/scroll-lock/scroll-lock.js";
+import d from "./style.js";
+import { LitElement as f, html as p, nothing as m, unsafeCSS as h } from "lit";
+import { customElement as g, property as _, state as v } from "lit/decorators.js";
+import { ifDefined as y } from "lit/directives/if-defined.js";
 //#region src/components/autocomplete/index.ts
-var g, _ = [
+var b, x = [
 	"none",
 	"prefix",
 	"contains"
-], v = class extends c {
+];
+function S(e) {
+	return e instanceof Element && e.getAttribute("slot") === "empty";
+}
+var C = class extends f {
 	static {
-		g = this;
+		b = this;
 	}
 	constructor(...e) {
-		super(...e), this._formDisabled = !1, this.placeholder = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.portal = !1, this.noScrollLock = !1, this.name = "", this.ariaLabel = null, this._filter = "contains", this._value = "", this._selectedValue = "", this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._idPrefix = `web-ui-autocomplete-${++g._nextInstanceId}`, this._optionIds = /* @__PURE__ */ new WeakMap(), this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextOptionId = 0, this._nextA11yOptionId = 0, this._options = [], this._pendingUnregisteredOptions = /* @__PURE__ */ new Set(), this._scrollLock = o().make(), this._panel = i().make({
+		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({
+			host: this,
+			initialize: () => {
+				let e = this.getAttribute("value");
+				e !== null && (this._value = e);
+			},
+			getState: () => this._value,
+			setState: (e) => {
+				this.value = e;
+			},
+			getFormValue: () => this._value,
+			getFormState: () => this._value,
+			restoreState: (e) => {
+				typeof e == "string" && (this.value = e);
+			},
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new r(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._idPrefix = `web-ui-autocomplete-${++b._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._scrollLock = u().make(), this._optionPortal = o().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) => !S(e)),
+			hasUpdated: () => this.hasUpdated,
+			requestUpdate: () => this.requestUpdate(),
+			bindOption: (e) => this._bindOption(e),
+			unbindOption: (e) => this._unbindOption(e)
+		}), this._panel = s().make({
 			getAnchor: () => this.shadowRoot?.querySelector(".input-wrapper") ?? null,
 			getLocalPanel: () => this.shadowRoot?.querySelector(".autocomplete-overlay") ?? null,
 			getPositioning: () => ({
@@ -42,25 +75,21 @@ var g, _ = [
 		}, this._handlePanelPointerDown = (e) => {
 			e.preventDefault();
 		}, this._bindOption = (e) => {
-			e.addEventListener("click", this._handleOptionClick), e.addEventListener("pointerover", this._handleOptionPointerOver), e.addEventListener("pointerdown", this._handleOptionPointerDown), e.addEventListener("option-update", this._onOptionUpdate), e.addEventListener("option-unregister", this._onOptionUnregister);
+			e.addEventListener("click", this._handleOptionClick), e.addEventListener("pointerover", this._handleOptionPointerOver), e.addEventListener("pointerdown", this._handleOptionPointerDown), e.addEventListener("option-update", this._onOptionUpdate);
 		}, this._unbindOption = (e) => {
-			e.removeEventListener("click", this._handleOptionClick), e.removeEventListener("pointerover", this._handleOptionPointerOver), e.removeEventListener("pointerdown", this._handleOptionPointerDown), e.removeEventListener("option-update", this._onOptionUpdate), e.removeEventListener("option-unregister", this._onOptionUnregister);
-		}, this._onOptionRegister = () => {
-			this._scheduleOptionsRefresh();
-		}, this._onOptionUnregister = (e) => {
-			e.target instanceof HTMLElement && e.target.localName === "web-ui-option" && this._pendingUnregisteredOptions.add(e.target), this._scheduleOptionsRefresh();
-		}, this._onSlotChange = () => {
-			this._scheduleOptionsRefresh();
+			e.removeEventListener("click", this._handleOptionClick), e.removeEventListener("pointerover", this._handleOptionPointerOver), e.removeEventListener("pointerdown", this._handleOptionPointerDown), e.removeEventListener("option-update", this._onOptionUpdate);
 		}, this._handleOptionClick = (e) => {
 			if (!(e.currentTarget instanceof HTMLElement)) return;
 			let t = e.currentTarget;
 			t.disabled || this._selectOption(t);
 		}, this._onOptionUpdate = () => {
-			this._scheduleOptionsRefresh();
+			this._optionPortal.scheduleRefresh();
 		}, this._handleOptionPointerOver = (e) => {
 			e.pointerType !== "touch" && (!this._isOpen || !(e.currentTarget instanceof HTMLElement) || (this._activeIndex = -1, this._syncActiveOption()));
 		}, this._handleOptionPointerDown = (e) => {
 			e.preventDefault();
+		}, this._onSlotChange = () => {
+			this._optionPortal.scheduleRefresh();
 		}, this._onKeydown = (e) => {
 			if (!(this._isDisabled || this.readonly)) switch (e.key) {
 				case "Escape":
@@ -72,13 +101,20 @@ var g, _ = [
 				case "ArrowUp":
 					e.preventDefault(), this._isOpen ? this._navigateActive(-1) : this._open(!0);
 					break;
-				case "Enter":
-					if (this._isOpen) {
-						e.preventDefault();
-						let t = this._options[this._activeIndex];
-						t && !t.disabled && !t.hasAttribute("data-filtered") && this._selectOption(t);
+				case "Enter": if (this._isOpen) {
+					e.preventDefault();
+					let t = this._options[this._activeIndex];
+					if (t && !t.disabled && !t.hasAttribute("data-filtered")) {
+						this._selectOption(t);
+						return;
 					}
-					break;
+					let n = this._findExactOption(this._value);
+					if (n) {
+						this._selectOption(n);
+						return;
+					}
+					this.allowCustomValue && this._value && !this._hasExactOption(this._value) && this._selectCustomValue();
+				}
 			}
 		}, this._onInput = (e) => {
 			if (this._isDisabled || this.readonly) return;
@@ -87,16 +123,18 @@ var g, _ = [
 		}, this._onInnerChange = (e) => {
 			e.stopPropagation();
 		}, this._onFocus = () => {
-			this._isDisabled || (this._focused = !0, !this.readonly && this._options.length > 0 && this._open());
+			this._isDisabled || (this._focused = !0);
+		}, this._onInputClick = () => {
+			this._isDisabled || this.readonly || this._options.length > 0 && this._open();
 		}, this._onBlur = () => {
 			this._focused = !1;
 		};
 	}
 	static {
 		this.styles = [
-			d(t),
-			d(n),
-			d(s)
+			h(t),
+			h(n),
+			h(d)
 		];
 	}
 	static {
@@ -107,14 +145,14 @@ var g, _ = [
 	}
 	set filter(e) {
 		let t = this._filter;
-		this._filter = r(e, _, "contains"), this.requestUpdate("filter", t);
+		this._filter = a(e, x, "contains"), this.requestUpdate("filter", t);
 	}
 	get value() {
 		return this._value;
 	}
 	set value(e) {
 		let t = this._value;
-		this._value = e, this._internals?.setFormValue?.(e), this.requestUpdate("value", t);
+		this._value = e, this._formAssociation.sync(), this.requestUpdate("value", t);
 	}
 	get selectedValue() {
 		return this._selectedValue;
@@ -124,7 +162,7 @@ var g, _ = [
 		(t !== e || this.getAttribute("selected-value") !== e) && (this._selectedValue = e, this.setAttribute("selected-value", e), t !== e && this.requestUpdate("selectedValue", t));
 	}
 	get _isDisabled() {
-		return this.disabled || this._formDisabled;
+		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	static {
 		this._nextInstanceId = 0;
@@ -136,9 +174,7 @@ var g, _ = [
 		return this._isOpen;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._internals ||= this.attachInternals();
-		let e = this.getAttribute("value");
-		e !== null && (this._value = e, this._internals?.setFormValue?.(e)), this.addEventListener("option-register", this._onOptionRegister), this.addEventListener("option-unregister", this._onOptionUnregister), 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);
 	}
 	attributeChangedCallback(e, t, n) {
 		super.attributeChangedCallback(e, t, n), e === "selected-value" && this.isConnected && n !== this._selectedValue && queueMicrotask(() => {
@@ -146,41 +182,38 @@ var g, _ = [
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("option-register", this._onOptionRegister), this.removeEventListener("option-unregister", this._onOptionUnregister), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._pendingUnregisteredOptions.clear(), this._close(), this._portal = void 0, this._portalContent = void 0, 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._close(), this._portal = void 0, this._portalContent = void 0, this._panel.dispose(), this._scrollLock.release();
 	}
 	firstUpdated() {
 		requestAnimationFrame(() => {
-			this.isConnected && this._onSlotChange();
+			this.isConnected && this._optionPortal.scheduleRefresh();
 		});
 	}
-	_queryOptions() {
-		let e = this.portal ? this._panel.getPanel() : null, t = e ? [...e.querySelectorAll("web-ui-option")] : [];
-		return t.length > 0 ? t : [...this.querySelectorAll("web-ui-option")];
-	}
 	willUpdate() {
-		this._refreshOptions(), this._ensureOptionIds(), this._syncSelectedValue(), this._applyFilter(), this._syncOptionA11y(), this._syncActiveOption();
+		this._refreshOptions(), this._optionPortal.ensureOptionIds(this._options), this._syncSelectedValue(), this._applyFilter(), this._syncOptionA11y(), this._syncActiveOption();
 	}
 	updated(e) {
 		let t = this.shadowRoot?.querySelector(".autocomplete-input");
 		t && t.value !== this._value && (t.value = this._value), (e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this.toggleAttribute("focused", this._focused), this._syncOpenAttribute(), this._syncValidity(), this._syncEmptyState();
 	}
 	formResetCallback() {
-		this.value = this.getAttribute("value") || "";
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e, e && this._isOpen && this._close();
+		this._formAssociation.setDisabled(e), e && this._isOpen && this._close();
 	}
 	formStateRestoreCallback(e) {
-		typeof e == "string" && (this.value = e);
+		this._formAssociation.restore(e);
 	}
 	_syncValidity() {
-		!this._internals || typeof this._internals.setValidity != "function" || (this._isDisabled || this.readonly || !this.required || this._value ? this._internals.setValidity({}) : this._internals.setValidity({ valueMissing: !0 }, "请输入内容"));
+		let e = this._formAssociation.getInternals();
+		!e || typeof e.setValidity != "function" || (this._isDisabled || this.readonly || !this.required || this._value ? e.setValidity({}) : e.setValidity({ valueMissing: !0 }, "请输入内容"));
 	}
 	_syncOpenAttribute() {
 		this.toggleAttribute("open", this._isOpen);
 	}
 	_syncSelectedValue() {
-		let e = this._value.trim().toLowerCase(), t = e ? this._options.find((t) => t.label.trim().toLowerCase() === e)?.value ?? "" : "";
+		let e = this._value.trim().toLowerCase(), t = e ? this._options.find((t) => !t.disabled && t.label.trim().toLowerCase() === e)?.value ?? "" : "";
 		this._setSelectedValue(t);
 	}
 	_syncOptionA11y() {
@@ -188,20 +221,6 @@ var g, _ = [
 			e.setAttribute("role", "option"), e.setAttribute("aria-selected", e.value === this._selectedValue ? "true" : "false"), e.setAttribute("aria-hidden", "true");
 		});
 	}
-	_ensureOptionIds() {
-		let e = new Set(this._options.map((e) => e.id).filter(Boolean));
-		this._options.forEach((t) => {
-			if (t.id) return;
-			let n = this._optionIds.get(t);
-			if (!n || e.has(n)) {
-				do
-					n = `${this._idPrefix}-option-${++this._nextOptionId}`;
-				while (e.has(n));
-				this._optionIds.set(t, n);
-			}
-			t.id = n, e.add(n);
-		});
-	}
 	_getA11yOptionId(e) {
 		let t = this._a11yOptionIds.get(e);
 		return t || (t = `${this._idPrefix}-a11y-option-${++this._nextA11yOptionId}`, this._a11yOptionIds.set(e, t)), t;
@@ -216,28 +235,14 @@ var g, _ = [
 		this._activeIndex >= 0 && (!n || n.hasAttribute("data-filtered") || n.disabled) && (this._activeIndex = -1, this._syncActiveOption());
 	}
 	_syncEmptyState() {
-		let e = this._panel.getPanel();
-		if (!e) return;
-		let t = e.querySelector(".autocomplete-empty");
-		if (!t) return;
-		let n = this._options.filter((e) => !e.hasAttribute("data-filtered"));
-		t.hidden = !(this._options.length > 0 && n.length === 0);
+		let e = this._panel.getPanel()?.querySelector(".autocomplete-empty"), t = this._options.filter((e) => !e.hasAttribute("data-filtered")), n = this._isOpen && this._options.length > 0 && t.length === 0;
+		e && (e.hidden = !n);
+		let r = (this.shadowRoot?.querySelector("slot[name=\"empty\"]"))?.assignedElements().map((e) => e.textContent?.trim()).filter(Boolean).join(" ").trim() || e?.dataset.wuiA11yEmpty || "无匹配选项", i = this.shadowRoot?.querySelector(".autocomplete-empty-a11y");
+		i && (i.textContent = r, i.hidden = !n);
 	}
 	_refreshOptions() {
-		let e = this._options[this._activeIndex], t = this._queryOptions();
-		this._options.filter((e) => !t.includes(e)).forEach(this._unbindOption), t.forEach(this._bindOption), this._options = t, this._activeIndex = e && t.includes(e) ? t.indexOf(e) : -1;
-	}
-	_syncPortalContent() {
-		if (!this._portal || !this._portalContent) return;
-		for (let e of this._pendingUnregisteredOptions) !this._portalContent.contains(e) && !this.contains(e) && this._portal.removeContent([e]);
-		if (this._pendingUnregisteredOptions.clear(), !this._isOpen) return;
-		let e = Array.from(this.childNodes);
-		e.length && this._portal.appendContent(e, this._portalContent);
-	}
-	_scheduleOptionsRefresh() {
-		queueMicrotask(() => {
-			this.isConnected && (this._syncPortalContent(), this.requestUpdate());
-		});
+		let e = this._options[this._activeIndex], t = this._optionPortal.refresh(this._options, e);
+		this._options = t.options, this._activeIndex = t.activeIndex;
 	}
 	_navigateActive(e) {
 		let t = this._options.filter((e) => !e.disabled && !e.hasAttribute("data-filtered"));
@@ -261,13 +266,30 @@ var g, _ = [
 			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);
+	}
+	_selectCustomValue() {
+		this._close(), this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
 	_open(e = !1) {
 		this._isDisabled || this.readonly || this._isOpen || (this._isOpen = !0, this._dispatchOpenChange(), e ? this._setInitialActiveOption() : this._syncActiveOption(), this._syncScrollLock(), this.portal ? requestAnimationFrame(() => {
 			this._isOpen && this._openOverlay(e);
 		}) : this._openOverlay(e));
 	}
 	_close() {
-		this._isOpen && (this._syncPortalContent(), this._isOpen = !1, this._dispatchOpenChange(), this._activeIndex = -1, this._options.forEach((e) => e.removeAttribute("active")), this._syncScrollLock(!1), this._closeOverlay());
+		this._isOpen && (this._optionPortal.syncPortalContent(), this._isOpen = !1, this._dispatchOpenChange(), this._activeIndex = -1, this._options.forEach((e) => e.removeAttribute("active")), this._syncScrollLock(!1), this._closeOverlay());
 	}
 	_dispatchOpenChange() {
 		this.dispatchEvent(new CustomEvent("open-change", {
@@ -289,19 +311,34 @@ var g, _ = [
 		this._scrollLock.sync(e && !this.noScrollLock);
 	}
 	_createPortal() {
-		let e = a().make({
+		let e = l().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${n}\n${s}`,
-			className: "wui-glass autocomplete-overlay portal wui-floating-panel"
+			style: `${t}\n${n}\n${d}`,
+			className: "wui-glass autocomplete-overlay portal wui-floating-panel",
+			onContentChange: (e) => {
+				this._optionPortal.scheduleRefresh();
+				let t = e.flatMap((e) => [...e.removedNodes]).filter(S);
+				if (t.length) {
+					this._portal?.removeContent(t);
+					let e = this._portal?.panel.querySelector(".autocomplete-empty");
+					e && (e.textContent = "无匹配选项", e.dataset.wuiA11yEmpty = "无匹配选项");
+				}
+			}
 		});
-		this._portal = e, e.panel.setAttribute("aria-hidden", "true"), e.panel.addEventListener("pointerdown", this._handlePanelPointerDown);
+		this._portal = e, c(e.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 r = document.createElement("div");
 		r.className = "autocomplete-scroll";
 		let i = document.createElement("div");
 		i.className = "autocomplete-content", this._portalContent = i;
-		let o = document.createElement("div");
-		return o.className = "autocomplete-empty", o.hidden = !0, o.textContent = "无匹配选项", r.append(i), i.append(o), e.panel.append(r), e.moveContent(Array.from(this.children), i), e;
+		let a = document.createElement("div");
+		a.className = "autocomplete-empty", a.hidden = !0, a.dataset.wuiA11yEmpty = this._getEmptySlotText(), r.append(i), i.append(a), e.panel.append(r);
+		for (let t of Array.from(this.childNodes)) S(t) ? e.appendContent([t], a) : e.appendContent([t], i);
+		return e;
 	}
 	_getLabelledbyText() {
 		if (!this.ariaLabelledby) return "";
@@ -311,11 +348,14 @@ var g, _ = [
 			return e.querySelector(`#${n}`)?.textContent?.trim() ?? "";
 		}).filter(Boolean).join(" ") : "";
 	}
+	_getEmptySlotText() {
+		return (this.shadowRoot?.querySelector("slot[name=\"empty\"]"))?.assignedElements().map((e) => e.textContent?.trim()).filter(Boolean).join(" ").trim() || "无匹配选项";
+	}
 	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) : u;
-		return l`
+		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) : m;
+		return p`
       <div class="wui-autocomplete-inner">
-        ${n ? l`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : u}
+        ${n ? p`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : m}
         <div class="wui-glass input-wrapper">
           <input
             class="autocomplete-input"
@@ -323,8 +363,8 @@ var g, _ = [
             placeholder=${this.placeholder}
             name=${this.name}
             .value=${this._value}
-            aria-label=${h(this.ariaLabel)}
-            aria-labelledby=${n ? t : u}
+            aria-label=${y(this.ariaLabel)}
+            aria-labelledby=${n ? t : m}
             ?disabled=${this._isDisabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
@@ -334,10 +374,11 @@ var g, _ = [
             aria-autocomplete="list"
             aria-controls=${e}
             aria-disabled=${String(this._isDisabled)}
-            aria-readonly=${this.readonly ? "true" : u}
+            aria-readonly=${this.readonly ? "true" : m}
             aria-activedescendant=${a}
             @input=${this._onInput}
             @change=${this._onInnerChange}
+            @click=${this._onInputClick}
             @focus=${this._onFocus}
             @blur=${this._onBlur}
           />
@@ -349,7 +390,7 @@ var g, _ = [
           ?hidden=${!this._isOpen}
           aria-hidden=${String(!this._isOpen)}
         >
-          ${r.map((e) => l`<div
+          ${r.map((e) => p`<div
                 id=${this._getA11yOptionId(e)}
                 role="option"
                 aria-selected=${e.value === this._selectedValue ? "true" : "false"}
@@ -359,6 +400,7 @@ var g, _ = [
                 ${e.label}
               </div>`)}
         </div>
+        <div class="autocomplete-a11y-only autocomplete-empty-a11y" role="status" hidden></div>
         <div
           class="wui-glass autocomplete-overlay wui-floating-panel"
           hidden
@@ -368,7 +410,9 @@ var g, _ = [
           <div class="autocomplete-scroll">
             <div class="autocomplete-content">
               <slot @slotchange=${this._onSlotChange}></slot>
-              <div class="autocomplete-empty" hidden>无匹配选项</div>
+              <div class="autocomplete-empty" hidden>
+                <slot name="empty">无匹配选项</slot>
+              </div>
             </div>
           </div>
         </div>
@@ -376,39 +420,46 @@ var g, _ = [
     `;
 	}
 };
-e([m()], v.prototype, "_formDisabled", void 0), e([p({
+e([_({
 	type: String,
 	reflect: !0
-})], v.prototype, "placeholder", void 0), e([p({
+})], C.prototype, "placeholder", void 0), e([_({
+	type: Boolean,
+	reflect: !0
+})], C.prototype, "borderless", void 0), e([_({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "disabled", void 0), e([p({
+})], C.prototype, "disabled", void 0), e([_({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "readonly", void 0), e([p({
+})], C.prototype, "readonly", void 0), e([_({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "required", void 0), e([p({
+})], C.prototype, "required", void 0), e([_({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "portal", void 0), e([p({
+})], C.prototype, "portal", void 0), e([_({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], v.prototype, "noScrollLock", void 0), e([p({ attribute: !1 })], v.prototype, "overlayContainer", void 0), e([p({
+})], C.prototype, "noScrollLock", void 0), e([_({
+	type: Boolean,
+	reflect: !0,
+	attribute: "allow-custom-value"
+})], C.prototype, "allowCustomValue", void 0), e([_({ attribute: !1 })], C.prototype, "overlayContainer", void 0), e([_({
 	type: String,
 	reflect: !0
-})], v.prototype, "name", void 0), e([p({
+})], C.prototype, "name", void 0), e([_({
 	type: String,
 	attribute: "aria-label"
-})], v.prototype, "ariaLabel", void 0), e([p({
+})], C.prototype, "ariaLabel", void 0), e([_({
 	type: String,
 	attribute: "aria-labelledby"
-})], v.prototype, "ariaLabelledby", void 0), e([p({
+})], C.prototype, "ariaLabelledby", void 0), e([_({
 	type: String,
 	reflect: !0
-})], v.prototype, "filter", null), e([m()], v.prototype, "_value", void 0), e([m()], v.prototype, "_selectedValue", void 0), e([m()], v.prototype, "_isOpen", void 0), e([m()], v.prototype, "_activeIndex", void 0), e([m()], v.prototype, "_focused", void 0), v = g = e([f("web-ui-autocomplete")], v);
+})], C.prototype, "filter", null), e([v()], C.prototype, "_value", void 0), e([v()], C.prototype, "_selectedValue", void 0), e([v()], C.prototype, "_isOpen", void 0), e([v()], C.prototype, "_activeIndex", void 0), e([v()], C.prototype, "_focused", void 0), C = b = e([g("web-ui-autocomplete")], C);
 //#endregion
-export { v as WebUiAutocomplete };
+export { C as WebUiAutocomplete };
 
 //# sourceMappingURL=index.js.map