@nonoun/native-ui 0.2.6 → 0.2.8

package/dist/ui-icon-element.js

@@ -1,8 +1,8 @@
 import { t as e } from "./uid.js";
 import { i as t, n, r } from "./define.js";
-import { a as i, n as a, o, r as s, t as c } from "./ui-element.js";
-import { a as l, c as u, n as d, o as f, r as p, s as m, t as h } from "./dialog-controller.js";
-function g(e, t, n, r) {
+import { a as i, c as a, n as o, o as s, p as c, r as l, s as u, t as d } from "./dialog-controller.js";
+import { a as f, i as p, n as m, o as h, r as g, t as _ } from "./ui-element.js";
+function v(e, t, n, r) {
 	let i;
 	return () => {
 		let n = t.value;
@@ -13,7 +13,7 @@ function g(e, t, n, r) {
 		})), i = n;
 	};
 }
-function _(e, n, r) {
+function y(e, n, r) {
 	let i = r.attribute ?? n;
 	if (r.type === "boolean") {
 		let n = t(!1);
@@ -78,7 +78,7 @@ function _(e, n, r) {
 * }
 * ```
 */
-function v(e, t, n) {
+function b(e, t, n) {
 	let r = e[t];
 	return r ? (r.fromAttribute(n), !0) : !1;
 }
@@ -88,20 +88,20 @@ function v(e, t, n) {
 * - `static formAssociated = true`
 * - `formDisabledCallback` → calls `onFormDisabled(disabled)`
 * - `formResetCallback` → calls `onFormReset()`
-*
-* Subclasses override `onFormDisabled` and `onFormReset` with their own logic.
+* - `formStateRestoreCallback` → calls `onFormStateRestore(state)`
 *
 * Must remain a mixin (not a controller) because the Web Components spec
 * requires `static formAssociated = true` on the class constructor.
 *
 * ```ts
 * class UIInput extends FormAssociable(UIElement) {
+*   #internals = this.attachInternals();
 *   onFormDisabled(disabled: boolean) { this.#disabled.value = disabled; }
 *   onFormReset() { this.textContent = ''; }
 * }
 * ```
 */
-function y(e) {
+function x(e) {
 	return class extends e {
 		static formAssociated = !0;
 		/** Override to handle form-initiated disabled state changes. */
@@ -122,10 +122,10 @@ function y(e) {
 		formAssociatedCallback(e) {}
 	};
 }
-function b(e, t) {
+function S(e, t) {
 	return e.label.toLowerCase().includes(t.toLowerCase());
 }
-var x = class {
+var C = class {
 	data;
 	query;
 	#e;
@@ -140,7 +140,7 @@ var x = class {
 	selectedItem;
 	empty;
 	constructor(e = {}) {
-		this.data = t([]), this.query = t(""), this.#e = t(e.filterFn ?? b), this.#t = t(e.sortFn ?? null), this.#n = t(e.multiple ?? !1), this.activeIndex = t(e.initialActiveIndex ?? -1), this.value = t(null), this.selected = t(/* @__PURE__ */ new Set()), this.filtered = r(() => {
+		this.data = t([]), this.query = t(""), this.#e = t(e.filterFn ?? S), this.#t = t(e.sortFn ?? null), this.#n = t(e.multiple ?? !1), this.activeIndex = t(e.initialActiveIndex ?? -1), this.value = t(null), this.selected = t(/* @__PURE__ */ new Set()), this.filtered = r(() => {
 			let e = this.data.value, t = this.query.value, n = this.#e.value;
 			return t ? e.filter((e) => n(e, t)) : e;
 		}), this.sorted = r(() => {
@@ -224,14 +224,14 @@ var x = class {
 		this.#t.value = e;
 	}
 };
-function S(e) {
-	return new x(e);
+function ee(e) {
+	return new C(e);
 }
 /**
 * Validates a JSON string → typed option array.
 * Filters out entries missing `value` or `label` strings.
 */
-function C(e, t) {
+function w(e, t) {
 	try {
 		let t = JSON.parse(e);
 		return Array.isArray(t) ? t.filter((e) => typeof e == "object" && !!e && typeof e.value == "string" && typeof e.label == "string") : [];
@@ -244,7 +244,7 @@ function C(e, t) {
 * Aborts any in-flight request before starting a new one.
 * Returns the new AbortController for the caller to store.
 */
-async function w(e, t, n, r) {
+async function T(e, t, n, r) {
 	t?.abort();
 	let i = new AbortController();
 	try {
@@ -265,14 +265,14 @@ async function w(e, t, n, r) {
 * @attr {string} type - Form button type: "button" | "submit" | "reset"
 * @fires ui-press - Fired on activation (click, Enter, Space)
 */
-var ee = class extends y(c) {
+var te = class extends x(_) {
 	static observedAttributes = ["disabled", "type"];
 	#e;
 	#t;
 	#n;
 	#r;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "button", this.#t = _(this, "disabled", { type: "boolean" }), this.#n = _(this, "type", {
+		super(), this.#e = this.attachInternals(), this.#e.role = "button", this.#t = y(this, "disabled", { type: "boolean" }), this.#n = y(this, "type", {
 			type: "string",
 			initial: "button"
 		});
@@ -290,13 +290,13 @@ var ee = class extends y(c) {
 		this.#n.set(e);
 	}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (v({
+		t !== n && (b({
 			disabled: this.#t,
 			type: this.#n
 		}, e, n), super.attributeChangedCallback?.(e, t, n));
 	}
 	setup() {
-		super.setup(), this.#r = new f(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(g(this, this.#t.signal, this.#e, { manageTabindex: !0 })), this.addEventListener("ui-press", this.#i);
+		super.setup(), this.#r = new s(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(v(this, this.#t.signal, this.#e, { manageTabindex: !0 })), this.addEventListener("ui-press", this.#i);
 	}
 	teardown() {
 		this.removeEventListener("ui-press", this.#i), this.#r.destroy(), super.teardown();
@@ -314,35 +314,37 @@ var ee = class extends y(c) {
 	onFormReset() {
 		this.#t.signal.value = this.hasAttribute("disabled");
 	}
-}, te = class extends y(c) {
+}, ne = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"placeholder",
 		"disabled",
 		"readonly",
 		"required",
-		"name"
+		"pattern"
 	];
 	#e;
 	#t = t(!1);
 	#n = t(!1);
 	#r = t("");
-	#i = [];
+	#i = "";
+	#a = null;
+	#o = [];
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "textbox";
 	}
 	get value() {
-		return this.#a();
+		return this.#s();
 	}
 	set value(e) {
-		this.#o(e), this.#r.value = e, this.#e.setFormValue(e), this.#s();
+		this.#c(e), this.#r.value = e, this.#e.setFormValue(e), this.#l();
 	}
-	#a() {
+	#s() {
 		let e = "";
 		for (let t of this.childNodes) t.nodeType === Node.TEXT_NODE && (e += t.textContent);
 		return e;
 	}
-	#o(e) {
+	#c(e) {
 		for (let e of [...this.childNodes]) e.nodeType === Node.TEXT_NODE && e.remove();
 		e && this.append(e);
 	}
@@ -380,7 +382,7 @@ var ee = class extends y(c) {
 		if (t !== n) {
 			switch (e) {
 				case "value":
-					this.#o(n ?? ""), this.#r.value = n ?? "", this.#e.setFormValue(n ?? ""), this.#s();
+					this.#c(n ?? ""), this.#r.value = n ?? "", this.#e.setFormValue(n ?? ""), this.#l();
 					break;
 				case "disabled":
 					this.#t.value = n !== null, this.setAttribute("contenteditable", n !== null || this.hasAttribute("readonly") ? "false" : "plaintext-only");
@@ -391,19 +393,23 @@ var ee = class extends y(c) {
 				case "required":
 					this.#n.value = n !== null;
 					break;
+				case "pattern":
+					this.#a = n;
+					break;
 			}
 			super.attributeChangedCallback?.(e, t, n);
 		}
 	}
 	setup() {
-		super.setup(), this.hasAttribute("contenteditable") || this.setAttribute("contenteditable", "plaintext-only"), this.#i = [...this.querySelectorAll(":scope > [slot]")];
-		for (let e of this.#i) e.setAttribute("contenteditable", "false");
-		this.#n.value = this.hasAttribute("required"), this.#r.value = this.#a(), this.#s(), this.addEffect(g(this, this.#t, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
-			this.#n.value && this.#r.value === "" ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : this.#e.setValidity({});
-		}), this.addEventListener("input", this.#c), this.addEventListener("blur", this.#l);
+		super.setup(), this.hasAttribute("contenteditable") || this.setAttribute("contenteditable", "plaintext-only"), this.#o = [...this.querySelectorAll(":scope > [slot]")];
+		for (let e of this.#o) e.setAttribute("contenteditable", "false");
+		this.#n.value = this.hasAttribute("required"), this.#a = this.getAttribute("pattern"), this.#i = this.getAttribute("value") ?? this.#s(), this.#r.value = this.#s(), this.#l(), this.addEffect(v(this, this.#t, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
+			let e = this.#r.value;
+			this.#n.value && e === "" ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : this.#a !== null && e !== "" && !RegExp(`^(?:${this.#a})$`).test(e) ? this.#e.setValidity({ patternMismatch: !0 }, "Please match the requested format.", this) : this.#e.setValidity({});
+		}), this.addEventListener("input", this.#u), this.addEventListener("blur", this.#d);
 	}
 	teardown() {
-		this.removeEventListener("input", this.#c), this.removeEventListener("blur", this.#l), super.teardown();
+		this.removeEventListener("input", this.#u), this.removeEventListener("blur", this.#d), super.teardown();
 	}
 	select() {
 		let e = document.createRange();
@@ -415,28 +421,31 @@ var ee = class extends y(c) {
 		this.#t.value = e, this.setAttribute("contenteditable", e || this.hasAttribute("readonly") ? "false" : "plaintext-only");
 	}
 	onFormReset() {
-		this.#o(""), this.#r.value = "", this.#e.setFormValue(""), this.#s(), this.#t.value = this.hasAttribute("disabled");
+		this.#c(this.#i), this.#r.value = this.#i, this.#e.setFormValue(this.#i), this.#l(), this.#t.value = this.hasAttribute("disabled"), this.setAttribute("contenteditable", this.#t.value || this.hasAttribute("readonly") ? "false" : "plaintext-only");
 	}
-	#s() {
-		this.#a().trim() === "" ? this.#e.states.add("empty") : this.#e.states.delete("empty");
+	onFormStateRestore(e) {
+		this.value = typeof e == "string" ? e : "";
 	}
-	#c = () => {
-		for (let e of this.#i) e.parentNode || this.appendChild(e);
-		let e = this.#a();
-		this.#r.value = e, this.#e.setFormValue(e), this.#s(), this.dispatchEvent(new CustomEvent("ui-input", {
+	#l() {
+		this.#s().trim() === "" ? this.#e.states.add("empty") : this.#e.states.delete("empty");
+	}
+	#u = () => {
+		for (let e of this.#o) e.parentNode || this.appendChild(e);
+		let e = this.#s();
+		this.#r.value = e, this.#e.setFormValue(e), this.#l(), this.dispatchEvent(new CustomEvent("ui-input", {
 			bubbles: !0,
 			composed: !0,
 			detail: { value: e }
 		}));
 	};
-	#l = () => {
+	#d = () => {
 		this.dispatchEvent(new CustomEvent("ui-change", {
 			bubbles: !0,
 			composed: !0,
-			detail: { value: this.#a() }
+			detail: { value: this.#s() }
 		}));
 	};
-}, ne = class extends c {
+}, re = class extends _ {
 	static observedAttributes = [
 		"disabled",
 		"multiple",
@@ -445,10 +454,10 @@ var ee = class extends y(c) {
 	#e;
 	#t;
 	#n = t(!1);
-	#r = new x();
+	#r = new C();
 	#i;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "listbox", this.#t = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "listbox", this.#t = y(this, "disabled", { type: "boolean" });
 	}
 	get virtualFocus() {
 		return this.hasAttribute("virtual-focus");
@@ -479,7 +488,7 @@ var ee = class extends y(c) {
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
-			if (v({ disabled: this.#t }, e, n)) {
+			if (b({ disabled: this.#t }, e, n)) {
 				super.attributeChangedCallback?.(e, t, n);
 				return;
 			}
@@ -495,7 +504,7 @@ var ee = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.#i = new d(this, {
+		super.setup(), this.#i = new o(this, {
 			itemSelector: ":scope ui-option:not([disabled])",
 			autoSync: !1,
 			orientation: "vertical",
@@ -510,7 +519,7 @@ var ee = class extends y(c) {
 			},
 			addEffect: (e) => this.addEffect(e),
 			deferChildren: (e) => this.deferChildren(e)
-		}), this.addEffect(g(this, this.#t.signal, this.#e)), this.deferChildren(() => {
+		}), this.addEffect(v(this, this.#t.signal, this.#e)), this.deferChildren(() => {
 			this.addEffect(() => {
 				let e = this.#r.value.value, t = this.#r.selected.value, n = this.#n.value, r = this.querySelectorAll(":scope ui-option");
 				for (let i of r) {
@@ -518,8 +527,12 @@ var ee = class extends y(c) {
 					i.setAttribute("aria-selected", a ? "true" : "false");
 				}
 			}), this.addEffect(() => {
-				let e = this.#r.activeIndex.value, t = this.querySelectorAll(":scope ui-option:not([disabled])");
-				for (let n = 0; n < t.length; n++) t[n].toggleAttribute("active", n === e);
+				let t = this.#r.activeIndex.value, n = this.querySelectorAll(":scope ui-option:not([disabled])");
+				for (let r = 0; r < n.length; r++) {
+					let i = n[r], a = r === t;
+					i.toggleAttribute("active", a), a && (i.id ||= e("opt"), this.setAttribute("aria-activedescendant", i.id));
+				}
+				(t < 0 || t >= n.length) && this.removeAttribute("aria-activedescendant");
 			});
 		});
 	}
@@ -530,7 +543,7 @@ var ee = class extends y(c) {
 		let e = this.#r.activeIndex.value;
 		return this.querySelectorAll(":scope ui-option:not([disabled])")[e] ?? null;
 	}
-}, re = class extends c {
+}, ie = class extends _ {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -541,7 +554,7 @@ var ee = class extends y(c) {
 	#n;
 	#r = t("");
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "option", this.#n = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "option", this.#n = y(this, "disabled", { type: "boolean" });
 	}
 	get value() {
 		return this.#t.value;
@@ -563,7 +576,7 @@ var ee = class extends y(c) {
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
-			if (v({ disabled: this.#n }, e, n)) {
+			if (b({ disabled: this.#n }, e, n)) {
 				super.attributeChangedCallback?.(e, t, n);
 				return;
 			}
@@ -579,7 +592,7 @@ var ee = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(g(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
+		super.setup(), this.addEffect(v(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
 	}
 	teardown() {
 		this.removeEventListener("click", this.#i), super.teardown();
@@ -594,7 +607,7 @@ var ee = class extends y(c) {
 			}
 		}));
 	};
-}, ie = class extends c {
+}, ae = class extends _ {
 	constructor() {
 		super();
 		let e = this.attachInternals();
@@ -605,19 +618,19 @@ var ee = class extends y(c) {
 		let t = this.closest("ui-option-group");
 		t && t.setAttribute("aria-labelledby", this.id);
 	}
-}, ae = class extends c {
+}, oe = class extends _ {
 	constructor() {
 		super();
 		let e = this.attachInternals();
 		e.role = "group";
 	}
-}, oe = class extends c {
+}, se = class extends _ {
 	static observedAttributes = ["disabled"];
 	#e;
-	#t = new x({ initialActiveIndex: 0 });
+	#t = new C({ initialActiveIndex: 0 });
 	#n = t(!1);
 	constructor() {
-		super(), this.#e = this.attachInternals();
+		super(), this.#e = this.attachInternals(), this.#e.role = "search";
 	}
 	get store() {
 		return this.#t;
@@ -632,7 +645,7 @@ var ee = class extends y(c) {
 		t !== n && (e === "disabled" && (this.#n.value = n !== null), super.attributeChangedCallback?.(e, t, n));
 	}
 	setup() {
-		super.setup(), this.addEffect(g(this, this.#n, this.#e)), this.addEventListener("ui-input", this.#i), this.addEventListener("ui-select", this.#a), this.addEventListener("keydown", this.#o), this.deferChildren(() => {
+		super.setup(), this.addEffect(v(this, this.#n, this.#e)), this.addEventListener("ui-input", this.#i), this.addEventListener("ui-select", this.#a), this.addEventListener("keydown", this.#o), this.deferChildren(() => {
 			this.addEffect(() => {
 				let e = this.#t.query.value.toLowerCase().trim(), t = this.querySelectorAll("ui-command-item");
 				for (let n of t) {
@@ -641,10 +654,10 @@ var ee = class extends y(c) {
 				}
 			}), this.addEffect(() => {
 				this.#t.query.value;
-				let e = this.#t.activeIndex.value, t = this.#r();
-				for (let n = 0; n < t.length; n++) t[n].toggleAttribute("active", n === e);
-				let n = t[e];
-				n && n.scrollIntoView({ block: "nearest" });
+				let t = this.#t.activeIndex.value, n = this.#r(), r = this.querySelector("ui-command-list");
+				for (let e = 0; e < n.length; e++) n[e].toggleAttribute("active", e === t);
+				let i = n[t];
+				i && r ? (i.id ||= e("cmd"), r.setAttribute("aria-activedescendant", i.id), i.scrollIntoView({ block: "nearest" })) : r?.removeAttribute("aria-activedescendant");
 			}), this.addEffect(() => {
 				this.#t.query.value;
 				let e = this.#r(), t = this.querySelector("ui-command-empty");
@@ -702,7 +715,7 @@ var ee = class extends y(c) {
 				break;
 		}
 	};
-}, se = class extends c {
+}, ce = class extends _ {
 	#e = null;
 	setup() {
 		super.setup(), this.deferChildren(() => {
@@ -729,13 +742,13 @@ var ee = class extends y(c) {
 			detail: { value: e }
 		}));
 	};
-}, ce = class extends c {
+}, le = class extends _ {
 	constructor() {
 		super();
 		let e = this.attachInternals();
 		e.role = "listbox";
 	}
-}, le = class extends c {
+}, ue = class extends _ {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -789,7 +802,7 @@ var ee = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(g(this, this.#n, this.#e)), this.addEventListener("click", this.#i);
+		super.setup(), this.addEffect(v(this, this.#n, this.#e)), this.addEventListener("click", this.#i);
 	}
 	teardown() {
 		this.removeEventListener("click", this.#i), super.teardown();
@@ -804,13 +817,18 @@ var ee = class extends y(c) {
 			}
 		}));
 	};
-}, T = class extends c {
+}, E = class extends _ {
 	constructor() {
 		super();
 		let e = this.attachInternals();
 		e.role = "group";
 	}
-}, E = class extends c {}, D = class extends y(c) {
+	setup() {
+		super.setup();
+		let t = this.querySelector("[slot=\"heading\"]");
+		t && (t.id ||= e("cg"), this.setAttribute("aria-labelledby", t.id));
+	}
+}, D = class extends _ {}, O = class extends x(_) {
 	static observedAttributes = [
 		"checked",
 		"indeterminate",
@@ -827,7 +845,7 @@ var ee = class extends y(c) {
 	#a = !1;
 	#o;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "checkbox", this.#t = _(this, "checked", { type: "boolean" }), this.#n = _(this, "indeterminate", { type: "boolean" }), this.#r = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "checkbox", this.#t = y(this, "checked", { type: "boolean" }), this.#n = y(this, "indeterminate", { type: "boolean" }), this.#r = y(this, "disabled", { type: "boolean" });
 	}
 	get checked() {
 		return this.#t.value;
@@ -867,7 +885,7 @@ var ee = class extends y(c) {
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
-			if (v({
+			if (b({
 				checked: this.#t,
 				indeterminate: this.#n,
 				disabled: this.#r
@@ -879,12 +897,11 @@ var ee = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.#o = new f(this, { disabled: () => this.disabled }), this.#a = this.hasAttribute("checked"), this.#i.value = this.hasAttribute("required"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(g(this, this.#r.signal, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
+		super.setup(), this.#o = new s(this, { disabled: () => this.disabled }), this.#a = this.hasAttribute("checked"), this.#i.value = this.hasAttribute("required"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(v(this, this.#r.signal, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
 			let e = this.#t.value, t = this.#n.value ? "mixed" : e ? "true" : "false";
 			this.setAttribute("aria-checked", t), this.#e.setFormValue(e ? this.value : null);
 		}), this.addEffect(() => {
-			let e = this.#i.value;
-			this.#e.ariaRequired = e ? "true" : null;
+			this.#i.value ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
 		}), this.addEffect(() => {
 			this.#i.value && !this.#t.value ? this.#e.setValidity({ valueMissing: !0 }, "Please check this box if you want to proceed.", this) : this.#e.setValidity({});
 		}), this.addEventListener("ui-press", this.#s);
@@ -898,6 +915,9 @@ var ee = class extends y(c) {
 	onFormReset() {
 		this.#t.set(this.#a), this.#n.set(!1);
 	}
+	onFormStateRestore(e) {
+		this.checked = typeof e == "string" && e === this.value;
+	}
 	#s = () => {
 		this.#r.value || (this.#n.value ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.#t.value, this.dispatchEvent(new CustomEvent("ui-change", {
 			bubbles: !0,
@@ -908,20 +928,22 @@ var ee = class extends y(c) {
 			}
 		})));
 	};
-}, O = class extends y(c) {
+}, k = class extends x(_) {
 	static observedAttributes = [
 		"checked",
 		"disabled",
 		"name",
-		"value"
+		"value",
+		"required"
 	];
 	#e;
 	#t;
 	#n;
-	#r = !1;
-	#i;
+	#r;
+	#i = !1;
+	#a;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "switch", this.#t = _(this, "checked", { type: "boolean" }), this.#n = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "switch", this.#t = y(this, "checked", { type: "boolean" }), this.#n = y(this, "disabled", { type: "boolean" }), this.#r = y(this, "required", { type: "boolean" });
 	}
 	get checked() {
 		return this.#t.value;
@@ -947,28 +969,40 @@ var ee = class extends y(c) {
 	set value(e) {
 		this.setAttribute("value", e);
 	}
+	get required() {
+		return this.#r.value;
+	}
+	set required(e) {
+		this.#r.set(e);
+	}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (v({
+		t !== n && (b({
 			checked: this.#t,
-			disabled: this.#n
+			disabled: this.#n,
+			required: this.#r
 		}, e, n), super.attributeChangedCallback?.(e, t, n));
 	}
 	setup() {
-		super.setup(), this.#i = new f(this, { disabled: () => this.disabled }), this.#r = this.hasAttribute("checked"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(g(this, this.#n.signal, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
+		super.setup(), this.#a = new s(this, { disabled: () => this.disabled }), this.#i = this.hasAttribute("checked"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(v(this, this.#n.signal, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
 			let e = this.#t.value;
 			this.setAttribute("aria-checked", e ? "true" : "false"), this.#e.setFormValue(e ? this.value : null);
-		}), this.addEventListener("ui-press", this.#a);
+		}), this.addEffect(() => {
+			this.#r.value && !this.#t.value ? this.#e.setValidity({ valueMissing: !0 }, "Please toggle this switch.", this) : this.#e.setValidity({});
+		}), this.addEventListener("ui-press", this.#o);
 	}
 	teardown() {
-		this.removeEventListener("ui-press", this.#a), this.#i.destroy(), super.teardown();
+		this.removeEventListener("ui-press", this.#o), this.#a.destroy(), super.teardown();
 	}
 	onFormDisabled(e) {
 		this.#n.signal.value = e;
 	}
 	onFormReset() {
-		this.#t.set(this.#r);
+		this.#t.set(this.#i);
+	}
+	onFormStateRestore(e) {
+		this.checked = typeof e == "string" && e === this.value;
 	}
-	#a = () => {
+	#o = () => {
 		this.#n.value || (this.checked = !this.#t.value, this.dispatchEvent(new CustomEvent("ui-change", {
 			bubbles: !0,
 			composed: !0,
@@ -978,13 +1012,13 @@ var ee = class extends y(c) {
 			}
 		})));
 	};
-}, k = class extends c {
-	static observedAttributes = ["value", "disabled"];
+}, A = class extends _ {
+	static observedAttributes = ["disabled"];
 	#e;
 	#t;
 	#n;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "radio", this.#t = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "radio", this.#t = y(this, "disabled", { type: "boolean" });
 	}
 	get value() {
 		return this.getAttribute("value") ?? "";
@@ -1002,10 +1036,10 @@ var ee = class extends y(c) {
 		return this.getAttribute("label") ?? this.textContent?.trim() ?? "";
 	}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (v({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
+		t !== n && (b({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
 	}
 	setup() {
-		super.setup(), this.setAttribute("aria-checked", "false"), this.#n = new f(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(g(this, this.#t.signal, this.#e)), this.addEventListener("click", this.#r), this.addEventListener("keydown", this.#i);
+		super.setup(), this.setAttribute("aria-checked", "false"), this.#n = new s(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(v(this, this.#t.signal, this.#e)), this.addEventListener("click", this.#r), this.addEventListener("keydown", this.#i);
 	}
 	teardown() {
 		this.removeEventListener("click", this.#r), this.removeEventListener("keydown", this.#i), this.#n.destroy(), super.teardown();
@@ -1030,7 +1064,7 @@ var ee = class extends y(c) {
 			}
 		})));
 	};
-}, A = class extends y(c) {
+}, j = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -1090,7 +1124,7 @@ var ee = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.#r = this.getAttribute("value"), this.#n.value = this.hasAttribute("required"), this.#i = new d(this, {
+		super.setup(), this.#r = this.getAttribute("value"), this.#n.value = this.hasAttribute("required"), this.#i = new o(this, {
 			itemSelector: ":scope ui-radio:not([disabled])",
 			ariaAttr: "aria-checked",
 			orientation: "vertical",
@@ -1105,9 +1139,11 @@ var ee = class extends y(c) {
 			deferChildren: (e) => this.deferChildren(e)
 		});
 		let e = this.getAttribute("value");
-		e !== null && (this.#i.listValue.value = e), this.addEffect(g(this, this.#t, this.#e)), this.addEffect(() => {
-			let e = this.#n.value;
-			this.#e.ariaRequired = e ? "true" : null;
+		e !== null && (this.#i.listValue.value = e), this.addEffect(v(this, this.#t, this.#e)), this.addEffect(() => {
+			let e = this.#t.value, t = this.querySelectorAll("ui-radio");
+			for (let n of t) n.toggleAttribute("disabled", e);
+		}), this.addEffect(() => {
+			this.#n.value ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
 		}), this.addEffect(() => {
 			let e = this.#i.listValue.value;
 			this.#e.setFormValue(e);
@@ -1125,7 +1161,10 @@ var ee = class extends y(c) {
 	onFormReset() {
 		this.#i && (this.#i.listValue.value = this.#r), this.#r === null ? this.removeAttribute("value") : this.setAttribute("value", this.#r);
 	}
-}, j = class extends y(c) {
+	onFormStateRestore(e) {
+		typeof e == "string" && e && (this.value = e);
+	}
+}, M = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -1181,7 +1220,7 @@ var ee = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.#r = this.getAttribute("value"), this.#i = new d(this, {
+		super.setup(), this.#r = this.getAttribute("value"), this.#i = new o(this, {
 			itemSelector: ":scope > ui-segment:not([disabled])",
 			ariaAttr: "aria-checked",
 			orientation: "horizontal",
@@ -1196,7 +1235,7 @@ var ee = class extends y(c) {
 			deferChildren: (e) => this.deferChildren(e)
 		});
 		let e = this.getAttribute("value");
-		e !== null && (this.#i.listValue.value = e), this.addEffect(g(this, this.#t, this.#e)), this.#n.value = this.hasAttribute("required"), this.addEffect(() => {
+		e !== null && (this.#i.listValue.value = e), this.addEffect(v(this, this.#t, this.#e)), this.#n.value = this.hasAttribute("required"), this.addEffect(() => {
 			let e = this.#i.listValue.value;
 			this.#n.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select one of these options.", this) : this.#e.setValidity({});
 		}), this.addEffect(() => {
@@ -1219,6 +1258,9 @@ var ee = class extends y(c) {
 	onFormReset() {
 		this.#i && (this.#i.listValue.value = this.#r), this.#r === null ? this.removeAttribute("value") : this.setAttribute("value", this.#r);
 	}
+	onFormStateRestore(e) {
+		typeof e == "string" && e && (this.value = e);
+	}
 	#a(e, t) {
 		if (e < 0) {
 			this.#e.states.delete("ready");
@@ -1226,13 +1268,13 @@ var ee = class extends y(c) {
 		}
 		this.style.setProperty("--_indicator-index", `${e}`), this.style.setProperty("--_segment-count", `${t}`), this.#e.states.add("ready");
 	}
-}, M = class extends c {
-	static observedAttributes = ["value", "disabled"];
+}, N = class extends _ {
+	static observedAttributes = ["disabled"];
 	#e;
 	#t;
 	#n;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "radio", this.#t = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "radio", this.#t = y(this, "disabled", { type: "boolean" }), this.setAttribute("aria-checked", "false");
 	}
 	get value() {
 		return this.getAttribute("value") ?? "";
@@ -1250,10 +1292,10 @@ var ee = class extends y(c) {
 		return this.getAttribute("label") ?? this.textContent?.trim() ?? "";
 	}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (v({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
+		t !== n && (b({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
 	}
 	setup() {
-		super.setup(), this.#n = new f(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(g(this, this.#t.signal, this.#e)), this.addEventListener("ui-press", this.#r);
+		super.setup(), this.#n = new s(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(v(this, this.#t.signal, this.#e)), this.addEventListener("ui-press", this.#r);
 	}
 	teardown() {
 		this.removeEventListener("ui-press", this.#r), this.#n.destroy(), super.teardown();
@@ -1268,7 +1310,7 @@ var ee = class extends y(c) {
 			}
 		}));
 	};
-}, N = class extends c {
+}, P = class extends _ {
 	static observedAttributes = [
 		"placement",
 		"delay",
@@ -1305,7 +1347,7 @@ var ee = class extends y(c) {
 		t !== n && (e === "disabled" && (this.#n.value = n !== null), super.attributeChangedCallback?.(e, t, n));
 	}
 	setup() {
-		super.setup(), this.addEffect(g(this, this.#n, this.#e)), this.#i = this.parentElement, this.#i && (this.#a = e("tip"), this.#i.style.setProperty("anchor-name", `--${this.#a}`), this.style.setProperty("position-anchor", `--${this.#a}`), this.hasAttribute("popover") || this.setAttribute("popover", "manual"), this.id ||= e("tooltip"), this.#i.setAttribute("aria-describedby", this.id), this.#i.addEventListener("mouseenter", this.#o), this.#i.addEventListener("mouseleave", this.#s), this.#i.addEventListener("focusin", this.#o), this.#i.addEventListener("focusout", this.#s), this.#i.addEventListener("keydown", this.#c), this.addEffect(() => {
+		super.setup(), this.addEffect(v(this, this.#n, this.#e)), this.#i = this.parentElement, this.#i && (this.#a = e("tip"), this.#i.style.setProperty("anchor-name", `--${this.#a}`), this.style.setProperty("position-anchor", `--${this.#a}`), this.hasAttribute("popover") || this.setAttribute("popover", "manual"), this.id ||= e("tooltip"), this.#i.setAttribute("aria-describedby", this.id), this.#i.addEventListener("mouseenter", this.#o), this.#i.addEventListener("mouseleave", this.#s), this.#i.addEventListener("focusin", this.#o), this.#i.addEventListener("focusout", this.#s), this.#i.addEventListener("keydown", this.#c), this.addEffect(() => {
 			this.#n.value && this.#t.value && (this.#l(), this.#t.value = !1);
 		}), this.addEffect(() => {
 			if (this.#t.value) try {
@@ -1333,7 +1375,7 @@ var ee = class extends y(c) {
 	#l() {
 		this.#r !== null && (clearTimeout(this.#r), this.#r = null);
 	}
-}, P = class extends c {
+}, F = class extends _ {
 	static observedAttributes = ["multiple", "disabled"];
 	#e = t(!1);
 	get multiple() {
@@ -1349,10 +1391,23 @@ var ee = class extends y(c) {
 		this.#e.value = e, this.toggleAttribute("disabled", e);
 	}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (e === "disabled" && (this.#e.value = n !== null), super.attributeChangedCallback?.(e, t, n));
+		if (t !== n) {
+			switch (e) {
+				case "disabled":
+					this.#e.value = n !== null;
+					break;
+				case "multiple":
+					if (n === null && this.isConnected) {
+						let e = [...this.querySelectorAll(":scope > ui-accordion-item[open]")];
+						for (let t = 1; t < e.length; t++) e[t].open = !1;
+					}
+					break;
+			}
+			super.attributeChangedCallback?.(e, t, n);
+		}
 	}
 	setup() {
-		super.setup(), this.addEffect(g(this, this.#e)), this.addEventListener("toggle", this.#t, !0);
+		super.setup(), this.addEffect(v(this, this.#e)), this.addEventListener("toggle", this.#t, !0);
 	}
 	teardown() {
 		this.removeEventListener("toggle", this.#t, !0), super.teardown();
@@ -1366,7 +1421,7 @@ var ee = class extends y(c) {
 		let r = this.querySelectorAll(":scope > ui-accordion-item[open]");
 		for (let e of r) e !== n && (e.open = !1);
 	};
-}, F = class extends c {
+}, I = class extends _ {
 	static observedAttributes = ["open", "disabled"];
 	#e = t(!1);
 	#t = t(!1);
@@ -1405,7 +1460,7 @@ var ee = class extends y(c) {
 		e.appendChild(t), e.appendChild(r), this.appendChild(e), this.#n = e, this.addEffect(() => {
 			let e = this.#e.value;
 			this.#n && (this.#n.open = e);
-		}), this.addEffect(g(this, this.#t)), e.addEventListener("toggle", this.#r);
+		}), this.addEffect(v(this, this.#t)), e.addEventListener("toggle", this.#r);
 	}
 	teardown() {
 		this.#n?.removeEventListener("toggle", this.#r), this.#n = null, super.teardown();
@@ -1415,8 +1470,7 @@ var ee = class extends y(c) {
 		let e = this.#n.open;
 		this.#e.value = e, this.toggleAttribute("open", e);
 	};
-}, I = class extends c {
-	static observedAttributes = ["no-close-on-escape", "no-close-on-backdrop"];
+}, L = class extends _ {
 	#e;
 	get open() {
 		return this.#e.open;
@@ -1428,12 +1482,12 @@ var ee = class extends y(c) {
 		this.#e.close();
 	}
 	setup() {
-		super.setup(), this.#e = new h(this);
+		super.setup(), this.#e = new d(this);
 	}
 	teardown() {
 		this.#e.destroy(), super.teardown();
 	}
-}, L = class extends c {
+}, R = class extends _ {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -1474,7 +1528,7 @@ var ee = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.#n = new d(this, {
+		super.setup(), this.#n = new o(this, {
 			itemSelector: ":scope > ui-tab:not([disabled])",
 			orientation: "horizontal",
 			autoSync: !0,
@@ -1489,7 +1543,10 @@ var ee = class extends y(c) {
 			deferChildren: (e) => this.deferChildren(e)
 		});
 		let e = this.getAttribute("value");
-		e !== null && (this.#n.listValue.value = e), this.addEffect(g(this, this.#t, this.#e)), this.deferChildren(() => {
+		e !== null && (this.#n.listValue.value = e), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Tabs"), this.addEffect(v(this, this.#t, this.#e)), this.addEffect(() => {
+			let e = this.#t.value, t = this.querySelectorAll(":scope > ui-tab");
+			for (let n of t) n.toggleAttribute("disabled", e);
+		}), this.deferChildren(() => {
 			this.#r(), this.addEffect(() => {
 				let e = this.#n.listValue.value, t = this.querySelectorAll(":scope > ui-tab"), n = this.querySelectorAll(":scope > ui-tab-panels > ui-tab-panel"), r = -1, i = 0;
 				for (let n of t) (n.getAttribute("value") ?? "") === e && (r = i), i++;
@@ -1520,13 +1577,13 @@ var ee = class extends y(c) {
 		}
 		this.style.setProperty("--_indicator-index", `${e}`), this.style.setProperty("--_tab-count", `${t}`), this.#e.states.add("ready");
 	}
-}, R = class extends c {
-	static observedAttributes = ["value", "disabled"];
+}, z = class extends _ {
+	static observedAttributes = ["disabled"];
 	#e;
 	#t;
 	#n;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "tab", this.#t = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "tab", this.#t = y(this, "disabled", { type: "boolean" });
 	}
 	get value() {
 		return this.getAttribute("value") ?? "";
@@ -1544,10 +1601,10 @@ var ee = class extends y(c) {
 		return this.getAttribute("label") ?? this.textContent?.trim() ?? "";
 	}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (v({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
+		t !== n && (b({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
 	}
 	setup() {
-		super.setup(), this.#n = new f(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(g(this, this.#t.signal, this.#e)), this.addEventListener("ui-press", this.#r);
+		super.setup(), this.#n = new s(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(v(this, this.#t.signal, this.#e)), this.addEventListener("ui-press", this.#r);
 	}
 	teardown() {
 		this.removeEventListener("ui-press", this.#r), this.#n.destroy(), super.teardown();
@@ -1562,7 +1619,7 @@ var ee = class extends y(c) {
 			}
 		}));
 	};
-}, z = class extends c {
+}, B = class extends _ {
 	static observedAttributes = ["value"];
 	#e;
 	constructor() {
@@ -1577,12 +1634,12 @@ var ee = class extends y(c) {
 	attributeChangedCallback(e, t, n) {
 		t !== n && super.attributeChangedCallback?.(e, t, n);
 	}
-}, B = class extends c {
+}, V = class extends _ {
 	#e;
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "presentation";
 	}
-}, V = class {
+}, H = class {
 	sortColumn;
 	sortDirection;
 	selected;
@@ -1591,10 +1648,12 @@ var ee = class extends y(c) {
 		this.sortColumn = t(e.sortColumn ?? null), this.sortDirection = t(e.sortDirection ?? "none"), this.selected = t(/* @__PURE__ */ new Set()), this.columnWidths = t([]);
 	}
 	toggleSort(e) {
-		if (this.sortColumn.value === e) {
-			let e = this.sortDirection.value;
-			this.sortDirection.value = e === "asc" ? "desc" : e === "desc" ? "none" : "asc", this.sortDirection.value === "none" && (this.sortColumn.value = null);
-		} else this.sortColumn.value = e, this.sortDirection.value = "asc";
+		n(() => {
+			if (this.sortColumn.value === e) {
+				let e = this.sortDirection.value;
+				this.sortDirection.value = e === "asc" ? "desc" : e === "desc" ? "none" : "asc", this.sortDirection.value === "none" && (this.sortColumn.value = null);
+			} else this.sortColumn.value = e, this.sortDirection.value = "asc";
+		});
 	}
 	select(e) {
 		let t = new Set(this.selected.value);
@@ -1617,10 +1676,10 @@ var ee = class extends y(c) {
 		return this.selected.value.has(e);
 	}
 };
-function H(e = {}) {
-	return new V(e);
+function U(e = {}) {
+	return new H(e);
 }
-var U = class {
+var W = class {
 	table;
 	#e = [];
 	#t = -1;
@@ -1697,13 +1756,13 @@ var U = class {
 	#m() {
 		this.#i = !1, this.#t = -1, this.table.removeAttribute("resizing"), document.removeEventListener("pointermove", this.#u), document.removeEventListener("pointerup", this.#d), document.removeEventListener("pointercancel", this.#f), document.removeEventListener("keydown", this.#p);
 	}
-}, W = class {
+}, de = class {
 	#e;
 	#t;
 	#n;
 	#r = !1;
 	constructor(e, t) {
-		this.#t = t, this.#n = e, this.#e = new u(e, {
+		this.#t = t, this.#n = e, this.#e = new a(e, {
 			selector: "ui-table-row:not([colspan])",
 			axis: "vertical",
 			mode: "slot"
@@ -1733,14 +1792,14 @@ var U = class {
 	destroy() {
 		this.#n.removeEventListener("ui-drag-start", this.#i), this.#n.removeEventListener("ui-drop", this.#a), this.#n.removeEventListener("click", this.#o, { capture: !0 }), this.#e.destroy();
 	}
-}, ue = class extends c {
+}, fe = class extends _ {
 	static observedAttributes = [
 		"selectable",
 		"resizable",
 		"reorderable"
 	];
 	#e;
-	#t = new V();
+	#t = new H();
 	#n = null;
 	#r = null;
 	#i = null;
@@ -1759,6 +1818,19 @@ var U = class {
 	set selectable(e) {
 		this.toggleAttribute("selectable", e);
 	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "resizable":
+					n !== null && !this.#n ? this.#a() : n === null && this.#n && (this.#n.destroy(), this.#n = null);
+					break;
+				case "reorderable":
+					n !== null && !this.#i ? this.#s() : n === null && this.#i && (this.#i.destroy(), this.#i = null);
+					break;
+			}
+			super.attributeChangedCallback?.(e, t, n);
+		}
+	}
 	setup() {
 		super.setup(), this.addEventListener("ui-sort", this.#c), this.addEventListener("ui-row-select", this.#l), this.deferChildren(() => {
 			this.addEffect(() => {
@@ -1785,7 +1857,7 @@ var U = class {
 			let e = document.createElement("div");
 			e.className = "table-resize-handle", e.setAttribute("aria-hidden", "true"), e.addEventListener("click", (e) => e.stopPropagation()), t.appendChild(e);
 		}
-		this.#n = new U(this), this.#n.init();
+		this.#n = new W(this), this.#n.init();
 	}
 	#o() {
 		let e = this.querySelector(":scope > ui-table-head > ui-table-row");
@@ -1798,7 +1870,7 @@ var U = class {
 	}
 	#s() {
 		let e = this.querySelector(":scope > ui-table-body");
-		e && (this.#i = new W(e, this));
+		e && (this.#i = new de(e, this));
 	}
 	#c = (e) => {
 		let t = e.detail;
@@ -1824,17 +1896,17 @@ var U = class {
 			}
 		}));
 	};
-}, de = class extends c {
+}, pe = class extends _ {
 	#e;
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "rowgroup";
 	}
-}, fe = class extends c {
+}, me = class extends _ {
 	#e;
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "rowgroup";
 	}
-}, pe = class extends c {
+}, he = class extends _ {
 	static observedAttributes = ["value", "selected"];
 	#e;
 	constructor() {
@@ -1865,12 +1937,12 @@ var U = class {
 			detail: { value: this.value }
 		}));
 	};
-}, me = class extends c {
+}, ge = class extends _ {
 	#e;
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "cell";
 	}
-}, he = class extends c {
+}, _e = class extends _ {
 	static observedAttributes = ["sort", "sortable"];
 	#e;
 	constructor() {
@@ -1888,6 +1960,16 @@ var U = class {
 	set sort(e) {
 		this.setAttribute("sort", e);
 	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			switch (e) {
+				case "sortable":
+					n === null ? (this.removeAttribute("tabindex"), this.removeEventListener("click", this.#t), this.removeEventListener("keydown", this.#n)) : (this.setAttribute("tabindex", "0"), this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#n));
+					break;
+			}
+			super.attributeChangedCallback?.(e, t, n);
+		}
+	}
 	setup() {
 		super.setup(), this.sortable && (this.setAttribute("tabindex", "0"), this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#n));
 	}
@@ -1910,7 +1992,7 @@ function G(e) {
 	let t = /* @__PURE__ */ new Date(e + "T00:00:00");
 	return isNaN(t.getTime()) ? null : t;
 }
-function ge(e) {
+function ve(e) {
 	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
 function K(e, t) {
@@ -1959,13 +2041,19 @@ var q = class {
 		this.value.value = e;
 	}
 	selectMonth(e) {
-		this.focusedMonth.value = e, this.view.value = "day";
+		n(() => {
+			this.focusedMonth.value = e, this.view.value = "day";
+		});
 	}
 	selectYear(e) {
-		this.focusedYear.value = e, this.view.value = "month";
+		n(() => {
+			this.focusedYear.value = e, this.view.value = "month";
+		});
 	}
 	setRange(e, t) {
-		this.rangeStart.value = e, this.rangeEnd.value = t;
+		n(() => {
+			this.rangeStart.value = e, this.rangeEnd.value = t;
+		});
 	}
 	isDateDisabled(e) {
 		let t = G(this.min.value), n = G(this.max.value), r = G(e);
@@ -1974,7 +2062,7 @@ var q = class {
 	#e() {
 		let e = this.focusedYear.value, t = this.focusedMonth.value, n = G(this.value.value), r = /* @__PURE__ */ new Date(), i = G(this.rangeStart.value), a = G(this.rangeEnd.value), o = new Date(e, t, 1).getDay(), s = new Date(e, t, 1 - o), c = [];
 		for (let e = 0; e < 42; e++) {
-			let o = new Date(s.getFullYear(), s.getMonth(), s.getDate() + e), l = ge(o), u = o.getMonth() === t, d = K(o, r), f = n ? K(o, n) : !1, p = this.isDateDisabled(l), m = !1, h = !1, g = !1;
+			let o = new Date(s.getFullYear(), s.getMonth(), s.getDate() + e), l = ve(o), u = o.getMonth() === t, d = K(o, r), f = n ? K(o, n) : !1, p = this.isDateDisabled(l), m = !1, h = !1, g = !1;
 			if (i && a) {
 				let e = i <= a ? i : a, t = i <= a ? a : i;
 				m = o >= e && o <= t, h = K(o, e), g = K(o, t);
@@ -2050,7 +2138,7 @@ var q = class {
 		}
 	}
 };
-function _e(e = {}) {
+function ye(e = {}) {
 	return new q(e);
 }
 /**
@@ -2064,7 +2152,7 @@ function _e(e = {}) {
 * @fires ui-change - Fired on single date selection with `{ value }` detail
 * @fires ui-range-select - Fired on range commit with `{ start, end }` detail
 */
-var ve = class extends y(c) {
+var be = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"min",
@@ -2082,7 +2170,7 @@ var ve = class extends y(c) {
 	#a = t(0);
 	#o = "idle";
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "group", this.setAttribute("tabindex", "0");
+		super(), this.#e = this.attachInternals(), this.#e.role = "group";
 	}
 	get store() {
 		return this.#t;
@@ -2126,18 +2214,24 @@ var ve = class extends y(c) {
 				case "required":
 					this.#r.value = n !== null;
 					break;
+				case "range":
+					this.#o = "idle", this.#t.setRange(null, null);
+					break;
+				case "name": break;
 			}
 			super.attributeChangedCallback?.(e, t, n);
 		}
 	}
 	setup() {
-		super.setup(), this.#i = this.getAttribute("value");
+		super.setup(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.#i = this.getAttribute("value");
 		let e = this.getAttribute("value"), t = this.getAttribute("min"), r = this.getAttribute("max");
 		n(() => {
 			e && (this.#t.value.value = e), t && (this.#t.min.value = t), r && (this.#t.max.value = r);
 		}), this.#s(), this.addEventListener("keydown", this.#b), this.addEffect(() => this.#c()), this.addEffect(() => {
 			this.#e.setFormValue(this.#t.value.value);
-		}), this.addEffect(g(this, this.#n, this.#e, { manageTabindex: !0 })), this.#r.value = this.hasAttribute("required"), this.addEffect(() => {
+		}), this.addEffect(() => {
+			this.setAttribute("aria-label", this.#t.title.value);
+		}), this.addEffect(v(this, this.#n, this.#e, { manageTabindex: !0 })), this.#r.value = this.hasAttribute("required"), this.addEffect(() => {
 			let e = this.#t.value.value;
 			this.#r.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select a date.", this) : this.#e.setValidity({});
 		});
@@ -2153,6 +2247,9 @@ var ve = class extends y(c) {
 	onFormReset() {
 		this.#t.value.value = this.#i, this.#i ? this.setAttribute("value", this.#i) : this.removeAttribute("value");
 	}
+	onFormStateRestore(e) {
+		typeof e == "string" && e && (this.value = e);
+	}
 	#s() {
 		this.innerHTML = "\n      <div class=\"cal-header\">\n        <button type=\"button\" class=\"cal-prev\" aria-label=\"Previous\" tabindex=\"-1\"></button>\n        <button type=\"button\" class=\"cal-title\" tabindex=\"-1\"></button>\n        <button type=\"button\" class=\"cal-next\" aria-label=\"Next\" tabindex=\"-1\"></button>\n      </div>\n      <div class=\"cal-weekdays\"></div>\n      <div class=\"cal-grid\" role=\"grid\"></div>\n    ";
 		let e = this.querySelector(".cal-prev"), t = this.querySelector(".cal-next"), n = this.querySelector(".cal-title");
@@ -2216,7 +2313,9 @@ var ve = class extends y(c) {
 		n ? this.#v(n) : r === void 0 ? i !== void 0 && this.#t.selectYear(Number(i)) : this.#t.selectMonth(Number(r));
 	}
 	#v(e) {
-		if (this.range) if (this.#o === "idle") this.#t.selectDate(e), this.#t.setRange(e, null), this.setAttribute("value", e), this.#o = "selecting";
+		if (this.range) if (this.#o === "idle") n(() => {
+			this.#t.selectDate(e), this.#t.setRange(e, null);
+		}), this.setAttribute("value", e), this.#o = "selecting";
 		else if (this.#o === "selecting") {
 			let t = this.#t.rangeStart.value;
 			if (!t) return;
@@ -2228,7 +2327,9 @@ var ve = class extends y(c) {
 					end: this.#t.rangeEnd.value
 				}
 			}));
-		} else this.#t.value.value = null, this.#t.setRange(null, null), this.removeAttribute("value"), this.#o = "idle";
+		} else n(() => {
+			this.#t.value.value = null, this.#t.setRange(null, null);
+		}), this.removeAttribute("value"), this.#o = "idle";
 		else this.#t.selectDate(e), this.setAttribute("value", e), this.dispatchEvent(new CustomEvent("ui-change", {
 			bubbles: !0,
 			composed: !0,
@@ -2305,7 +2406,7 @@ var ve = class extends y(c) {
 			this.open.value = !1, this.value.value = null, this.label.value = "";
 		});
 	}
-}, ye = class extends y(c) {
+}, xe = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -2327,6 +2428,8 @@ var ve = class extends y(c) {
 	#l = null;
 	#u = null;
 	#d = null;
+	#f = null;
+	#p = "";
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -2380,13 +2483,13 @@ var ve = class extends y(c) {
 	set placeholder(e) {
 		this.#s.value = e, e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder");
 	}
-	#f(e) {
-		return C(e, "ui-select");
+	#m(e) {
+		return w(e, "ui-select");
 	}
-	async #p(e) {
-		this.#l = await w(e, this.#l, this.#a, "ui-select");
+	async #h(e) {
+		this.#l = await T(e, this.#l, this.#a, "ui-select");
 	}
-	#m() {
+	#g() {
 		let e = document.createElement("ui-button");
 		e.setAttribute("justify", "spread");
 		let t = document.createElement("span");
@@ -2396,7 +2499,7 @@ var ve = class extends y(c) {
 		let r = document.createElement("ui-listbox");
 		r.setAttribute("popover", "manual"), this.appendChild(e), this.appendChild(r);
 	}
-	#h(e) {
+	#_(e) {
 		let t = this.#u;
 		if (t) {
 			for (; t.firstChild;) t.removeChild(t.firstChild);
@@ -2409,6 +2512,12 @@ var ve = class extends y(c) {
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			switch (e) {
+				case "value":
+					if (n !== null) {
+						let e = this.querySelector(`ui-option[value="${CSS.escape(n)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? n;
+						this.#t.select(n, t);
+					} else this.#t.reset();
+					break;
 				case "disabled":
 					this.#n.value = n !== null;
 					break;
@@ -2416,7 +2525,7 @@ var ve = class extends y(c) {
 					this.#r.value = n !== null;
 					break;
 				case "options":
-					n ? this.#a.value = this.#f(n) : this.#a.value = [];
+					n ? this.#a.value = this.#m(n) : this.#a.value = [];
 					break;
 				case "src":
 					this.#o.value = n;
@@ -2429,59 +2538,59 @@ var ve = class extends y(c) {
 		}
 	}
 	setup() {
-		if (super.setup(), this.#i = new p(this), this.#c = this.hasAttribute("options") || this.hasAttribute("src"), this.#c) {
+		if (super.setup(), this.#i = new l(this), this.#c = this.hasAttribute("options") || this.hasAttribute("src"), this.#c) {
 			let e = this.getAttribute("options");
-			e && (this.#a.value = this.#f(e)), this.#o.value = this.getAttribute("src"), this.#s.value = this.getAttribute("placeholder") ?? "", this.#m();
+			e && (this.#a.value = this.#m(e)), this.#o.value = this.getAttribute("src"), this.#s.value = this.getAttribute("placeholder") ?? "", this.#g();
 		}
-		let e = this.querySelector(":scope > ui-button");
-		this.#d = e;
-		let t = this.querySelector(":scope > ui-listbox[popover]");
-		this.#u = t, t?.setAttribute("popover", "manual"), e && t && this.#i.wirePopover(e, t), e?.setAttribute("aria-haspopup", "listbox"), this.deferChildren(() => {
-			let n = this.getAttribute("value");
-			if (n) {
-				let e = this.querySelector(`ui-option[value="${CSS.escape(n)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? n;
-				this.#t.value.value = n, this.#t.label.value = t;
+		let t = this.querySelector(":scope > ui-button");
+		this.#d = t;
+		let n = this.querySelector(":scope > ui-listbox[popover]");
+		this.#u = n, n?.setAttribute("popover", "manual"), t && n && this.#i.wirePopover(t, n), t?.setAttribute("aria-haspopup", "listbox"), t && n && (n.id ||= e("lb"), t.setAttribute("aria-controls", n.id)), this.#c && (this.addEffect(() => {
+			let e = this.#a.value;
+			this.#_(e);
+		}), this.addEffect(() => {
+			let e = this.#o.value;
+			e && this.#h(e);
+		}), this.addEffect(() => {
+			let e = this.#s.value, n = this.#t.label.value, r = t?.querySelector("[slot=\"label\"]");
+			r && !n && (r.textContent = e || "\xA0");
+		})), this.deferChildren(() => {
+			let e = this.getAttribute("value");
+			if (e) {
+				let t = this.querySelector(`ui-option[value="${CSS.escape(e)}"]`), n = t?.getAttribute("label") ?? t?.textContent?.trim() ?? e;
+				this.#t.value.value = e, this.#t.label.value = n, this.#f = e, this.#p = n;
 			}
 			this.addEffect(() => {
-				let t = this.#t.label.value, n = e?.querySelector("[slot=\"label\"]");
-				n && (n.textContent = t || (this.#c ? this.#s.value || "\xA0" : n.textContent ?? ""));
+				let e = this.#t.label.value, n = t?.querySelector("[slot=\"label\"]");
+				n && (n.textContent = e || (this.#c ? this.#s.value || "\xA0" : n.textContent ?? ""));
 			}), this.addEffect(() => {
-				let e = this.#t.value.value, n = t?.querySelectorAll("ui-option") ?? [];
-				for (let t of n) {
-					let n = t.getAttribute("value") === e;
-					t.setAttribute("aria-selected", String(n));
+				let e = this.#t.value.value, t = n?.querySelectorAll("ui-option") ?? [];
+				for (let n of t) {
+					let t = n.getAttribute("value") === e;
+					n.setAttribute("aria-selected", String(t));
 				}
-			}), this.#c && (this.addEffect(() => {
-				let e = this.#a.value;
-				this.#h(e);
-			}), this.addEffect(() => {
-				let e = this.#o.value;
-				e && this.#p(e);
-			}), this.addEffect(() => {
-				let t = this.#s.value, n = this.#t.label.value, r = e?.querySelector("[slot=\"label\"]");
-				r && !n && (r.textContent = t || "\xA0");
-			}));
-		}), this.addEffect(g(this, this.#n, this.#e)), this.addEffect(() => {
-			let t = this.#n.value;
-			e && e.toggleAttribute("disabled", t), t && this.#t.open.value && this.#t.hide();
+			});
+		}), this.addEffect(v(this, this.#n, this.#e)), this.addEffect(() => {
+			let e = this.#n.value;
+			t && t.toggleAttribute("disabled", e), e && this.#t.open.peek() && this.#t.hide();
 		}), this.#r.value = this.hasAttribute("required"), this.addEffect(() => {
 			let e = this.#t.value.value;
 			this.#r.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select an option.", this) : this.#e.setValidity({});
 		}), this.addEffect(() => {
-			let t = this.#t.open.value;
-			this.#i.syncPopover(t), e?.setAttribute("aria-expanded", String(t));
+			let e = this.#t.open.value;
+			this.#i.syncPopover(e), t?.setAttribute("aria-expanded", String(e));
 		}), this.addEffect(() => {
 			let e = this.#t.value.value;
 			this.#e.setFormValue(e ?? ""), e == null ? this.removeAttribute("value") : this.setAttribute("value", e);
-		}), e?.addEventListener("ui-press", this.#g), this.addEventListener("ui-change", this.#_), this.addEventListener("ui-select", this.#v), this.addEventListener("ui-dismiss", this.#y), e?.addEventListener("keydown", this.#b);
+		}), t?.addEventListener("ui-press", this.#v), this.addEventListener("ui-change", this.#y), this.addEventListener("ui-select", this.#b), this.addEventListener("ui-dismiss", this.#x), t?.addEventListener("keydown", this.#S);
 	}
-	#g = () => {
+	#v = () => {
 		this.#n.value || this.#t.toggle();
 	};
-	#_ = (e) => {
+	#y = (e) => {
 		e.target !== this && e.stopImmediatePropagation();
 	};
-	#v = (e) => {
+	#b = (e) => {
 		let t = e.detail;
 		this.#t.select(t.value, t.label), this.dispatchEvent(new CustomEvent("ui-change", {
 			bubbles: !0,
@@ -2489,10 +2598,10 @@ var ve = class extends y(c) {
 			detail: t
 		}));
 	};
-	#y = () => {
+	#x = () => {
 		this.#t.hide();
 	};
-	#b = (e) => {
+	#S = (e) => {
 		if (this.#n.value) return;
 		let t = this.#u;
 		switch (e.key) {
@@ -2501,7 +2610,7 @@ var ve = class extends y(c) {
 				e.preventDefault();
 				let n = t?.controller;
 				if (this.#t.open.value || this.#t.show(), n) {
-					let r = t?.querySelectorAll(":scope > ui-option:not([disabled])")?.length ?? 0;
+					let r = t?.querySelectorAll(":scope ui-option:not([disabled])")?.length ?? 0;
 					n.moveActive(e.key === "ArrowDown" ? 1 : -1, r);
 				}
 				break;
@@ -2526,7 +2635,7 @@ var ve = class extends y(c) {
 				e.preventDefault();
 				let n = t?.controller;
 				if (n) {
-					let e = t?.querySelectorAll(":scope > ui-option:not([disabled])");
+					let e = t?.querySelectorAll(":scope ui-option:not([disabled])");
 					n.activeIndex.value = Math.max(0, (e?.length ?? 1) - 1);
 				}
 				break;
@@ -2534,15 +2643,18 @@ var ve = class extends y(c) {
 		}
 	};
 	teardown() {
-		this.#d?.removeEventListener("ui-press", this.#g), this.#d?.removeEventListener("keydown", this.#b), this.removeEventListener("ui-change", this.#_), this.removeEventListener("ui-select", this.#v), this.removeEventListener("ui-dismiss", this.#y), this.#d = null, this.#l?.abort(), this.#l = null, this.#u = null, this.#i.destroy(), super.teardown();
+		this.#d?.removeEventListener("ui-press", this.#v), this.#d?.removeEventListener("keydown", this.#S), this.removeEventListener("ui-change", this.#y), this.removeEventListener("ui-select", this.#b), this.removeEventListener("ui-dismiss", this.#x), this.#d = null, this.#l?.abort(), this.#l = null, this.#u = null, this.#i.destroy(), super.teardown();
 	}
 	onFormReset() {
-		this.#t.reset();
+		this.#f === null ? this.#t.reset() : this.#t.select(this.#f, this.#p);
+	}
+	onFormStateRestore(e) {
+		typeof e == "string" && e && (this.value = e);
 	}
 	onFormDisabled(e) {
 		this.#n.value = e;
 	}
-}, be = class extends y(c) {
+}, Se = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -2553,7 +2665,7 @@ var ve = class extends y(c) {
 		"required"
 	];
 	#e;
-	#t = new x();
+	#t = new C();
 	#n = t(!1);
 	#r = t(!1);
 	#i = t(!1);
@@ -2566,6 +2678,8 @@ var ve = class extends y(c) {
 	#d = !1;
 	#f = null;
 	#p = null;
+	#m = null;
+	#h = "";
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -2620,13 +2734,13 @@ var ve = class extends y(c) {
 	set placeholder(e) {
 		this.#u.value = e, e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder");
 	}
-	#m(e) {
-		return C(e, "ui-combobox");
+	#g(e) {
+		return w(e, "ui-combobox");
 	}
-	async #h(e) {
-		this.#f = await w(e, this.#f, this.#c, "ui-combobox");
+	async #_(e) {
+		this.#f = await T(e, this.#f, this.#c, "ui-combobox");
 	}
-	#g() {
+	#v() {
 		let e = document.createElement("ui-input"), t = this.#u.value;
 		t && e.setAttribute("placeholder", t);
 		let n = this.getAttribute("size");
@@ -2634,7 +2748,7 @@ var ve = class extends y(c) {
 		let r = document.createElement("ui-listbox");
 		r.setAttribute("popover", "manual"), this.appendChild(e), this.appendChild(r);
 	}
-	#_(e) {
+	#y(e) {
 		let t = this.#p;
 		if (t) {
 			for (; t.firstChild;) t.removeChild(t.firstChild);
@@ -2645,37 +2759,54 @@ var ve = class extends y(c) {
 			this.#t.data.value = e;
 		}
 	}
-	attributeChangedCallback(e, t, n) {
-		if (t !== n) {
+	attributeChangedCallback(e, t, r) {
+		if (t !== r) {
 			switch (e) {
+				case "value":
+					if (r !== null) {
+						let e = this.querySelector(`ui-option[value="${CSS.escape(r)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? r;
+						this.#t.select(r), this.#t.query.value = t, this.#s && "value" in this.#s && (this.#s.value = t);
+					} else n(() => {
+						this.#t.clearSelection(), this.#t.query.value = "";
+					}), this.#s && "value" in this.#s && (this.#s.value = "");
+					break;
 				case "disabled":
-					this.#r.value = n !== null;
+					this.#r.value = r !== null;
 					break;
 				case "required":
-					this.#i.value = n !== null;
+					this.#i.value = r !== null;
 					break;
 				case "options":
-					n ? this.#c.value = this.#m(n) : this.#c.value = [];
+					r ? this.#c.value = this.#g(r) : this.#c.value = [];
 					break;
 				case "src":
-					this.#l.value = n;
+					this.#l.value = r;
 					break;
 				case "placeholder":
-					this.#u.value = n ?? "";
+					this.#u.value = r ?? "";
 					break;
 			}
-			super.attributeChangedCallback?.(e, t, n);
+			super.attributeChangedCallback?.(e, t, r);
 		}
 	}
 	setup() {
-		if (super.setup(), this.#a = new p(this), this.#d = this.hasAttribute("options") || this.hasAttribute("src"), this.#d) {
+		if (super.setup(), this.#a = new l(this), this.#d = this.hasAttribute("options") || this.hasAttribute("src"), this.#d) {
 			let e = this.getAttribute("options");
-			e && (this.#c.value = this.#m(e)), this.#l.value = this.getAttribute("src"), this.#u.value = this.getAttribute("placeholder") ?? "", this.#g();
+			e && (this.#c.value = this.#g(e)), this.#l.value = this.getAttribute("src"), this.#u.value = this.getAttribute("placeholder") ?? "", this.#v();
 		}
 		let t = this.querySelector(":scope > ui-input");
 		this.#s = t;
 		let n = this.querySelector(":scope > ui-listbox[popover]");
-		this.#p = n, n?.setAttribute("popover", "manual"), n?.setAttribute("virtual-focus", ""), t && n && (this.#a.wirePopover(t, n), n.id ||= this.#o), t?.setAttribute("role", "combobox"), t?.setAttribute("aria-autocomplete", "list"), t?.setAttribute("aria-controls", n?.id ?? ""), t?.setAttribute("aria-expanded", "false"), this.deferChildren(() => {
+		this.#p = n, n?.setAttribute("popover", "manual"), n?.setAttribute("virtual-focus", ""), t && n && (this.#a.wirePopover(t, n), n.id ||= this.#o), t?.setAttribute("role", "combobox"), t?.setAttribute("aria-autocomplete", "list"), t?.setAttribute("aria-controls", n?.id ?? ""), t?.setAttribute("aria-expanded", "false"), this.#d && (this.addEffect(() => {
+			let e = this.#c.value;
+			this.#y(e);
+		}), this.addEffect(() => {
+			let e = this.#l.value;
+			e && this.#_(e);
+		}), this.addEffect(() => {
+			let e = this.#u.value;
+			t && (e ? t.setAttribute("placeholder", e) : t.removeAttribute("placeholder"));
+		})), this.deferChildren(() => {
 			if (!this.#d) {
 				let e = n?.querySelectorAll("ui-option") ?? [];
 				this.#t.data.value = [...e].map((e) => ({
@@ -2686,7 +2817,7 @@ var ve = class extends y(c) {
 			let r = this.getAttribute("value");
 			if (r) {
 				let e = this.querySelector(`ui-option[value="${CSS.escape(r)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? r;
-				this.#t.value.value = r, this.#t.query.value = t;
+				this.#t.value.value = r, this.#t.query.value = t, this.#m = r, this.#h = t;
 			}
 			this.addEffect(() => {
 				let e = this.#t.view.value, t = new Set(e.map((e) => e.value)), r = n?.querySelectorAll("ui-option") ?? [];
@@ -2703,19 +2834,10 @@ var ve = class extends y(c) {
 					let t = n.getAttribute("value") === e;
 					n.setAttribute("aria-selected", String(t));
 				}
-			}), this.#d && (this.addEffect(() => {
-				let e = this.#c.value;
-				this.#_(e);
-			}), this.addEffect(() => {
-				let e = this.#l.value;
-				e && this.#h(e);
-			}), this.addEffect(() => {
-				let e = this.#u.value;
-				t && (e ? t.setAttribute("placeholder", e) : t.removeAttribute("placeholder"));
-			}));
-		}), this.addEffect(g(this, this.#r, this.#e)), this.addEffect(() => {
+			});
+		}), this.addEffect(v(this, this.#r, this.#e)), this.addEffect(() => {
 			let e = this.#r.value;
-			t && t.toggleAttribute("disabled", e), e && this.#n.value && (this.#n.value = !1);
+			t && t.toggleAttribute("disabled", e), e && this.#n.peek() && (this.#n.value = !1);
 		}), this.#i.value = this.hasAttribute("required"), this.addEffect(() => {
 			let e = this.#t.value.value;
 			this.#i.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select an option.", this) : this.#e.setValidity({});
@@ -2725,18 +2847,18 @@ var ve = class extends y(c) {
 		}), this.addEffect(() => {
 			let e = this.#t.value.value;
 			this.#e.setFormValue(e ?? ""), e == null ? this.removeAttribute("value") : this.setAttribute("value", e);
-		}), t?.addEventListener("focus", this.#v), this.addEventListener("ui-input", this.#y), this.addEventListener("ui-change", this.#b), this.addEventListener("ui-select", this.#x), this.addEventListener("ui-dismiss", this.#S), t?.addEventListener("keydown", this.#C);
+		}), t?.addEventListener("focus", this.#b), this.addEventListener("ui-input", this.#x), this.addEventListener("ui-change", this.#S), this.addEventListener("ui-select", this.#C), this.addEventListener("ui-dismiss", this.#w), t?.addEventListener("keydown", this.#T);
 	}
-	#v = () => {
+	#b = () => {
 		!this.#r.value && !this.#n.value && (this.#n.value = !0);
 	};
-	#y = (e) => {
+	#x = (e) => {
 		this.#t.setQuery(e.detail.value), this.#n.value = !0;
 	};
-	#b = (e) => {
+	#S = (e) => {
 		e.target !== this && e.stopImmediatePropagation();
 	};
-	#x = (e) => {
+	#C = (e) => {
 		let t = e.detail;
 		n(() => {
 			this.#t.select(t.value), this.#t.query.value = t.label, this.#t.activeIndex.value = -1, this.#n.value = !1;
@@ -2748,10 +2870,10 @@ var ve = class extends y(c) {
 			detail: t
 		}));
 	};
-	#S = () => {
+	#w = () => {
 		this.#n.value = !1;
 	};
-	#C = (e) => {
+	#T = (e) => {
 		if (this.#r.value) return;
 		let t = this.#s;
 		switch (e.key) {
@@ -2784,19 +2906,22 @@ var ve = class extends y(c) {
 		}
 	};
 	teardown() {
-		this.#s?.removeEventListener("focus", this.#v), this.#s?.removeEventListener("keydown", this.#C), this.removeEventListener("ui-input", this.#y), this.removeEventListener("ui-change", this.#b), this.removeEventListener("ui-select", this.#x), this.removeEventListener("ui-dismiss", this.#S), this.#s = null, this.#p = null, this.#f?.abort(), this.#f = null, this.#a.destroy(), super.teardown();
+		this.#s?.removeEventListener("focus", this.#b), this.#s?.removeEventListener("keydown", this.#T), this.removeEventListener("ui-input", this.#x), this.removeEventListener("ui-change", this.#S), this.removeEventListener("ui-select", this.#C), this.removeEventListener("ui-dismiss", this.#w), this.#s = null, this.#p = null, this.#f?.abort(), this.#f = null, this.#a.destroy(), super.teardown();
 	}
 	onFormReset() {
 		n(() => {
-			this.#t.clearSelection(), this.#t.query.value = "", this.#t.activeIndex.value = -1, this.#n.value = !1;
+			this.#m === null ? (this.#t.clearSelection(), this.#t.query.value = "") : (this.#t.select(this.#m), this.#t.query.value = this.#h), this.#t.activeIndex.value = -1, this.#n.value = !1;
 		});
 		let e = this.querySelector(":scope > ui-input");
-		e && (e.value = "");
+		e && (e.value = this.#h);
+	}
+	onFormStateRestore(e) {
+		typeof e == "string" && e && (this.value = e);
 	}
 	onFormDisabled(e) {
 		this.#r.value = e;
 	}
-}, xe = class extends c {
+}, Ce = class extends _ {
 	static observedAttributes = ["disabled", "required"];
 	#e = e("field-label");
 	#t = e("field-desc");
@@ -2836,13 +2961,12 @@ var ve = class extends y(c) {
 	}
 	#o() {
 		if (!this.#r) return;
-		let e = this.querySelector("[slot=\"label\"]"), t = this.querySelector("[slot=\"description\"]"), n = this.querySelector("[slot=\"error\"]");
-		e && this.#r.setAttribute("aria-labelledby", e.id);
-		let r = [];
-		t && r.push(t.id), n && r.push(n.id), r.length && this.#r.setAttribute("aria-describedby", r.join(" "));
+		let e = this.querySelector("[slot=\"label\"]"), t = this.querySelector("[slot=\"description\"]");
+		e && this.#r.setAttribute("aria-labelledby", e.id), t && this.#r.setAttribute("aria-describedby", t.id);
 	}
 	#s() {
-		this.#r && (this.hasAttribute("disabled") ? this.#r.setAttribute("disabled", "") : this.#r.removeAttribute("disabled"));
+		let e = this.hasAttribute("disabled");
+		e ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), this.#r && (e ? this.#r.setAttribute("disabled", "") : this.#r.removeAttribute("disabled"));
 	}
 	#c() {
 		this.#r && (this.hasAttribute("required") ? this.#r.setAttribute("required", "") : this.#r.removeAttribute("required"));
@@ -2851,36 +2975,44 @@ var ve = class extends y(c) {
 		let t = e;
 		this.setAttribute("invalid", "");
 		let n = this.querySelector("[slot=\"error\"]");
-		n && t.detail?.message && (n.textContent = t.detail.message);
+		n && t.detail?.message && (n.textContent = t.detail.message), this.#d(!0);
 	};
 	#u = () => {
-		this.removeAttribute("invalid");
+		this.removeAttribute("invalid"), this.#d(!1);
 	};
-}, Se = class extends y(c) {
+	#d(e) {
+		if (!this.#r) return;
+		let t = this.querySelector("[slot=\"description\"]"), n = this.querySelector("[slot=\"error\"]"), r = [];
+		t && r.push(t.id), e && n && r.push(n.id), r.length ? this.#r.setAttribute("aria-describedby", r.join(" ")) : this.#r.removeAttribute("aria-describedby");
+	}
+}, we = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"placeholder",
 		"disabled",
 		"readonly",
 		"required",
-		"name",
 		"rows",
 		"maxlength",
-		"autogrow"
+		"autogrow",
+		"pattern"
 	];
 	#e;
 	#t = t(!1);
 	#n = t(!1);
-	#r = t("");
-	#i = 0;
+	#r = t(NaN);
+	#i = t("");
+	#a = "";
+	#o = 0;
+	#s = null;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "textbox", this.#e.ariaMultiLine = "true", this.setAttribute("aria-multiline", "true");
+		super(), this.#e = this.attachInternals(), this.#e.role = "textbox", this.#e.ariaMultiLine = "true";
 	}
 	get value() {
 		return this.textContent ?? "";
 	}
 	set value(e) {
-		this.textContent = e, this.#r.value = e, this.#e.setFormValue(e), this.#a(), this.#o();
+		this.textContent = e, this.#i.value = e, this.#e.setFormValue(e), this.#c(), this.#l();
 	}
 	get placeholder() {
 		return this.getAttribute("placeholder") ?? "";
@@ -2916,7 +3048,7 @@ var ve = class extends y(c) {
 		if (t !== n) {
 			switch (e) {
 				case "value":
-					this.textContent = n ?? "", this.#r.value = n ?? "", this.#e.setFormValue(n ?? ""), this.#a(), this.#o();
+					this.textContent = n ?? "", this.#i.value = n ?? "", this.#e.setFormValue(n ?? ""), this.#c(), this.#l();
 					break;
 				case "disabled":
 					this.#t.value = n !== null, this.setAttribute("contenteditable", n !== null || this.hasAttribute("readonly") ? "false" : "plaintext-only");
@@ -2927,103 +3059,108 @@ var ve = class extends y(c) {
 				case "required":
 					this.#n.value = n !== null;
 					break;
+				case "maxlength":
+					this.#r.value = n === null ? NaN : parseInt(n, 10);
+					break;
 				case "autogrow":
-					this.#o();
+					this.#l();
+					break;
+				case "pattern":
+					this.#s = n;
 					break;
 			}
 			super.attributeChangedCallback?.(e, t, n);
 		}
 	}
 	setup() {
-		super.setup(), this.hasAttribute("contenteditable") || this.setAttribute("contenteditable", "plaintext-only"), this.#n.value = this.hasAttribute("required"), this.#r.value = this.textContent ?? "", this.#a(), this.#o(), this.addEffect(g(this, this.#t, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
-			this.#n.value && this.#r.value === "" ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : this.#e.setValidity({});
-		}), this.addEventListener("input", this.#s), this.addEventListener("blur", this.#c);
+		super.setup(), this.setAttribute("aria-multiline", "true"), this.hasAttribute("contenteditable") || this.setAttribute("contenteditable", "plaintext-only"), this.#n.value = this.hasAttribute("required");
+		let e = this.getAttribute("maxlength");
+		this.#r.value = e === null ? NaN : parseInt(e, 10), this.#s = this.getAttribute("pattern"), this.#a = this.getAttribute("value") ?? this.textContent ?? "", this.#i.value = this.textContent ?? "", this.#c(), this.#l(), this.addEffect(v(this, this.#t, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
+			let e = this.#i.value, t = this.#r.value;
+			this.#n.value && e === "" ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : !isNaN(t) && e.length > t ? this.#e.setValidity({ tooLong: !0 }, `Please shorten this text to ${t} characters or less.`, this) : this.#s !== null && e !== "" && !RegExp(`^(?:${this.#s})$`).test(e) ? this.#e.setValidity({ patternMismatch: !0 }, "Please match the requested format.", this) : this.#e.setValidity({});
+		}), this.addEventListener("input", this.#u), this.addEventListener("blur", this.#d);
 	}
 	teardown() {
-		cancelAnimationFrame(this.#i), this.removeEventListener("input", this.#s), this.removeEventListener("blur", this.#c), super.teardown();
+		cancelAnimationFrame(this.#o), this.removeEventListener("input", this.#u), this.removeEventListener("blur", this.#d), super.teardown();
 	}
 	onFormDisabled(e) {
 		this.#t.value = e, this.setAttribute("contenteditable", e || this.hasAttribute("readonly") ? "false" : "plaintext-only");
 	}
 	onFormReset() {
-		this.textContent = "", this.#r.value = "", this.#e.setFormValue(""), this.#a(), this.#t.value = this.hasAttribute("disabled");
+		this.textContent = this.#a, this.#i.value = this.#a, this.#e.setFormValue(this.#a), this.#c(), this.#l(), this.#t.value = this.hasAttribute("disabled"), this.setAttribute("contenteditable", this.#t.value || this.hasAttribute("readonly") ? "false" : "plaintext-only");
 	}
-	#a() {
+	onFormStateRestore(e) {
+		this.value = typeof e == "string" ? e : "";
+	}
+	#c() {
 		(this.textContent ?? "").trim() === "" ? this.#e.states.add("empty") : this.#e.states.delete("empty");
 	}
-	#o() {
-		!this.hasAttribute("autogrow") || !this.isConnected || (this.style.setProperty("--_autogrow-height", "auto"), cancelAnimationFrame(this.#i), this.#i = requestAnimationFrame(() => {
+	#l() {
+		!this.hasAttribute("autogrow") || !this.isConnected || (this.style.setProperty("--_autogrow-height", "auto"), cancelAnimationFrame(this.#o), this.#o = requestAnimationFrame(() => {
 			this.style.setProperty("--_autogrow-height", `${this.scrollHeight}px`);
 		}));
 	}
-	#s = () => {
-		let e = this.textContent ?? "", t = this.getAttribute("maxlength");
-		if (t !== null) {
-			let n = parseInt(t, 10);
-			if (!isNaN(n) && e.length > n) {
-				this.textContent = e.slice(0, n);
-				let t = window.getSelection();
-				t && (t.selectAllChildren(this), t.collapseToEnd());
-			}
-		}
-		let n = this.textContent ?? "";
-		this.#r.value = n, this.#e.setFormValue(n), this.#a(), this.#o(), this.dispatchEvent(new CustomEvent("ui-input", {
+	#u = () => {
+		let e = this.textContent ?? "";
+		this.#i.value = e, this.#e.setFormValue(e), this.#c(), this.#l(), this.dispatchEvent(new CustomEvent("ui-input", {
 			bubbles: !0,
 			composed: !0,
-			detail: { value: n }
+			detail: { value: e }
 		}));
 	};
-	#c = () => {
+	#d = () => {
 		this.dispatchEvent(new CustomEvent("ui-change", {
 			bubbles: !0,
 			composed: !0,
 			detail: { value: this.textContent ?? "" }
 		}));
 	};
-}, Ce = class extends y(c) {
+}, Te = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"min",
 		"max",
 		"step",
 		"disabled",
-		"name"
+		"name",
+		"required"
 	];
 	#e;
 	#t = t(!1);
-	#n = t(50);
-	#r = 50;
-	#i = t(0);
-	#a = t(100);
-	#o = t(1);
-	#s = null;
-	#c = !1;
+	#n = t(!1);
+	#r = t(50);
+	#i = 50;
+	#a = t(0);
+	#o = t(100);
+	#s = t(1);
+	#c = null;
+	#l = !1;
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "slider";
 	}
 	get value() {
-		return this.#n.value;
+		return this.#r.value;
 	}
 	set value(e) {
-		this.#n.value = this.#l(e), this.#d();
+		this.#r.value = this.#u(e);
 	}
 	get min() {
-		return this.#i.value;
+		return this.#a.value;
 	}
 	set min(e) {
-		this.#i.value = e;
+		this.#a.value = e, this.setAttribute("min", String(e));
 	}
 	get max() {
-		return this.#a.value;
+		return this.#o.value;
 	}
 	set max(e) {
-		this.#a.value = e;
+		this.#o.value = e, this.setAttribute("max", String(e));
 	}
 	get step() {
-		return this.#o.value;
+		return this.#s.value;
 	}
 	set step(e) {
-		this.#o.value = e;
+		this.#s.value = e, this.setAttribute("step", String(e));
 	}
 	get disabled() {
 		return this.#t.value;
@@ -3031,6 +3168,12 @@ var ve = class extends y(c) {
 	set disabled(e) {
 		this.#t.value = e, this.toggleAttribute("disabled", e);
 	}
+	get required() {
+		return this.#n.value;
+	}
+	set required(e) {
+		this.#n.value = e, this.toggleAttribute("required", e);
+	}
 	get name() {
 		return this.getAttribute("name") ?? "";
 	}
@@ -3041,76 +3184,82 @@ var ve = class extends y(c) {
 		if (t !== n) {
 			switch (e) {
 				case "value":
-					this.#n.value = this.#l(parseFloat(n ?? "50") || 50);
+					this.#r.value = this.#u(parseFloat(n ?? "50") || 50);
 					break;
 				case "min":
-					this.#i.value = parseFloat(n ?? "0") || 0;
+					this.#a.value = parseFloat(n ?? "0") || 0;
 					break;
 				case "max":
-					this.#a.value = parseFloat(n ?? "100") || 100;
+					this.#o.value = parseFloat(n ?? "100") || 100;
 					break;
 				case "step":
-					this.#o.value = parseFloat(n ?? "1") || 1;
+					this.#s.value = parseFloat(n ?? "1") || 1;
 					break;
 				case "disabled":
 					this.#t.value = n !== null;
 					break;
+				case "required":
+					this.#n.value = n !== null;
+					break;
 			}
 			super.attributeChangedCallback(e, t, n);
 		}
 	}
 	setup() {
-		super.setup(), this.#r = this.#n.value, this.#s = document.createElement("div"), this.#s.classList.add("ui-range-thumb"), this.appendChild(this.#s), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(g(this, this.#t, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
-			let e = this.#u();
-			this.style.setProperty("--_progress", String(e)), this.#e.ariaValueNow = String(this.#n.value), this.#e.ariaValueMin = String(this.#i.value), this.#e.ariaValueMax = String(this.#a.value);
-		}), this.#d(), this.addEventListener("pointerdown", this.#p), this.addEventListener("keydown", this.#_);
+		super.setup(), this.#i = this.#r.value, this.#c = document.createElement("div"), this.#c.classList.add("ui-range-thumb"), this.appendChild(this.#c), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(v(this, this.#t, this.#e, { manageTabindex: !0 })), this.#n.value = this.hasAttribute("required"), this.addEffect(() => {
+			let e = this.#r.value, t = this.#d();
+			this.style.setProperty("--_progress", String(t)), this.setAttribute("aria-valuenow", String(e)), this.setAttribute("aria-valuemin", String(this.#a.value)), this.setAttribute("aria-valuemax", String(this.#o.value)), this.#e.setFormValue(String(e));
+		}), this.addEventListener("pointerdown", this.#p), this.addEventListener("keydown", this.#_);
 	}
 	teardown() {
-		this.removeEventListener("pointerdown", this.#p), this.removeEventListener("keydown", this.#_), this.#s &&= (this.#s.remove(), null), super.teardown();
+		this.removeEventListener("pointerdown", this.#p), this.removeEventListener("keydown", this.#_), this.#c &&= (this.#c.remove(), null), super.teardown();
 	}
 	onFormDisabled(e) {
 		this.#t.value = e;
 	}
 	onFormReset() {
-		this.#n.value = this.#r, this.#d();
+		this.#r.value = this.#i;
 	}
-	#l(e) {
-		let t = this.#i.value, n = this.#a.value, r = this.#o.value, i = Math.round((e - t) / r) * r + t;
-		return Math.min(n, Math.max(t, i));
+	onFormStateRestore(e) {
+		if (typeof e == "string") {
+			let t = parseFloat(e);
+			isNaN(t) || (this.value = t);
+		}
 	}
-	#u() {
-		let e = this.#a.value - this.#i.value;
-		return e === 0 ? 0 : (this.#n.value - this.#i.value) / e;
+	#u(e) {
+		let t = this.#a.value, n = this.#o.value, r = this.#s.value, i = Math.round((e - t) / r) * r + t;
+		return Math.min(n, Math.max(t, i));
 	}
 	#d() {
-		this.#e.setFormValue(String(this.#n.value));
+		let e = this.#o.value - this.#a.value;
+		return e === 0 ? 0 : (this.#r.value - this.#a.value) / e;
 	}
 	#f(e) {
-		let t = this.getBoundingClientRect(), n = this.#s?.offsetWidth ?? 0, r = n / 2, i = t.width - n;
-		if (i <= 0) return this.#i.value;
+		let t = this.getBoundingClientRect(), n = this.#c?.offsetWidth ?? 0, r = n / 2, i = t.width - n;
+		if (i <= 0) return this.#a.value;
 		let a = e.clientX - t.left - r, o = Math.min(1, Math.max(0, a / i));
-		return this.#i.value + o * (this.#a.value - this.#i.value);
+		return this.#a.value + o * (this.#o.value - this.#a.value);
 	}
 	#p = (e) => {
 		if (e.button !== 0 || this.#t.value) return;
-		this.setPointerCapture(e.pointerId), this.#c = !0, this.toggleAttribute("pressed", !0);
-		let t = this.#l(this.#f(e));
-		this.#n.value = t, this.#d(), this.#v(), this.addEventListener("pointermove", this.#m), this.addEventListener("pointerup", this.#h), this.addEventListener("pointercancel", this.#g);
+		this.setPointerCapture(e.pointerId), this.#l = !0, this.toggleAttribute("pressed", !0);
+		let t = this.#u(this.#f(e));
+		this.#r.value = t, this.#v(), this.addEventListener("pointermove", this.#m), this.addEventListener("pointerup", this.#h), this.addEventListener("pointercancel", this.#g);
 	};
 	#m = (e) => {
-		if (!this.#c || this.#t.value) return;
-		let t = this.#l(this.#f(e));
-		t !== this.#n.value && (this.#n.value = t, this.#d(), this.#v());
+		if (!this.#l || this.#t.value) return;
+		let t = this.#u(this.#f(e));
+		t !== this.#r.value && (this.#r.value = t, this.#v());
 	};
 	#h = () => {
-		this.#c = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g), this.#y();
+		this.#l = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g), this.#y();
 	};
 	#g = () => {
-		this.#c = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g);
+		this.#l = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g);
 	};
 	#_ = (e) => {
 		if (this.#t.value) return;
-		let t = this.#o.value, n = t * 10, r = this.#n.value;
+		let t = this.#s.value, n = t * 10, r = this.#r.value;
 		switch (e.key) {
 			case "ArrowRight":
 			case "ArrowUp":
@@ -3127,30 +3276,30 @@ var ve = class extends y(c) {
 				r -= n;
 				break;
 			case "Home":
-				r = this.#i.value;
+				r = this.#a.value;
 				break;
 			case "End":
-				r = this.#a.value;
+				r = this.#o.value;
 				break;
 			default: return;
 		}
-		e.preventDefault(), r = this.#l(r), r !== this.#n.value && (this.#n.value = r, this.#d(), this.#v(), this.#y());
+		e.preventDefault(), r = this.#u(r), r !== this.#r.value && (this.#r.value = r, this.#v(), this.#y());
 	};
 	#v() {
 		this.dispatchEvent(new CustomEvent("ui-input", {
 			bubbles: !0,
 			composed: !0,
-			detail: { value: this.#n.value }
+			detail: { value: this.#r.value }
 		}));
 	}
 	#y() {
 		this.dispatchEvent(new CustomEvent("ui-change", {
 			bubbles: !0,
 			composed: !0,
-			detail: { value: this.#n.value }
+			detail: { value: this.#r.value }
 		}));
 	}
-}, we = class extends y(c) {
+}, Ee = class extends x(_) {
 	static observedAttributes = [
 		"value",
 		"length",
@@ -3167,14 +3316,16 @@ var ve = class extends y(c) {
 	#i = [];
 	#a = 6;
 	#o = /[0-9]/;
+	#s = null;
+	#c = "";
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "group", this.#n = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "group", this.#n = y(this, "disabled", { type: "boolean" });
 	}
 	get value() {
 		return this.#i.join("");
 	}
 	set value(e) {
-		this.#i = e.split("").slice(0, this.#a), this.#c(), this.#l();
+		this.#i = e.split("").slice(0, this.#a), this.#u(), this.#d();
 	}
 	get name() {
 		return this.getAttribute("name") ?? "";
@@ -3196,7 +3347,7 @@ var ve = class extends y(c) {
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
-			if (v({ disabled: this.#n }, e, n)) {
+			if (b({ disabled: this.#n }, e, n)) {
 				super.attributeChangedCallback(e, t, n);
 				return;
 			}
@@ -3206,7 +3357,7 @@ var ve = class extends y(c) {
 					break;
 				case "length": {
 					let e = parseInt(n ?? "6", 10);
-					!isNaN(e) && e >= 1 && e <= 12 && (this.#a = e, this.isConnected && this.#s());
+					!isNaN(e) && e >= 1 && e <= 12 && (this.#a = e, this.isConnected && this.#l());
 					break;
 				}
 				case "pattern":
@@ -3214,8 +3365,11 @@ var ve = class extends y(c) {
 						this.#o = new RegExp(n ?? "[0-9]");
 					} catch {}
 					break;
+				case "mask":
+					this.#s = n, this.isConnected && this.#u();
+					break;
 				case "required":
-					this.#t.value = n !== null, this.isConnected && this.#l();
+					this.#t.value = n !== null, this.isConnected && this.#d();
 					break;
 			}
 			super.attributeChangedCallback(e, t, n);
@@ -3232,35 +3386,38 @@ var ve = class extends y(c) {
 		if (t) try {
 			this.#o = new RegExp(t);
 		} catch {}
-		this.#s(), this.addEffect(g(this, this.#n.signal, this.#e, { manageTabindex: !1 })), this.#t.value = this.hasAttribute("required");
+		this.#s = this.getAttribute("mask"), this.#l(), this.addEffect(v(this, this.#n.signal, this.#e, { manageTabindex: !1 })), this.addEffect(() => {
+			let e = this.#n.value;
+			for (let t of this.#r) t.setAttribute("contenteditable", e ? "false" : "plaintext-only");
+		}), this.#t.value = this.hasAttribute("required");
 		let n = this.getAttribute("value");
-		n && (this.value = n), this.addEventListener("paste", this.#m);
+		this.#c = n ?? "", n && (this.value = n), this.addEventListener("paste", this.#g);
 	}
 	teardown() {
-		for (let e of this.#r) e.removeEventListener("input", this.#d), e.removeEventListener("keydown", this.#f), e.removeEventListener("focus", this.#p);
-		this.removeEventListener("paste", this.#m), super.teardown();
+		for (let e of this.#r) e.removeEventListener("input", this.#p), e.removeEventListener("keydown", this.#m), e.removeEventListener("focus", this.#h);
+		this.removeEventListener("paste", this.#g), super.teardown();
 	}
-	#s() {
-		for (let e of this.#r) e.removeEventListener("input", this.#d), e.removeEventListener("keydown", this.#f), e.removeEventListener("focus", this.#p), e.remove();
+	#l() {
+		for (let e of this.#r) e.removeEventListener("input", this.#p), e.removeEventListener("keydown", this.#m), e.removeEventListener("focus", this.#h), e.remove();
 		this.#r = [], this.#i = [];
 		for (let e = 0; e < this.#a; e++) {
 			let e = document.createElement("div");
-			e.classList.add("ui-otp-cell"), e.setAttribute("data-empty", ""), e.setAttribute("contenteditable", "plaintext-only"), e.setAttribute("inputmode", "numeric"), e.addEventListener("input", this.#d), e.addEventListener("keydown", this.#f), e.addEventListener("focus", this.#p), this.appendChild(e), this.#r.push(e), this.#i.push("");
+			e.classList.add("ui-otp-cell"), e.setAttribute("data-empty", ""), e.setAttribute("contenteditable", "plaintext-only"), e.setAttribute("inputmode", "numeric"), e.addEventListener("input", this.#p), e.addEventListener("keydown", this.#m), e.addEventListener("focus", this.#h), this.appendChild(e), this.#r.push(e), this.#i.push("");
 		}
 	}
-	#c() {
+	#u() {
 		for (let e = 0; e < this.#a; e++) {
 			let t = this.#r[e];
 			if (!t) continue;
 			let n = this.#i[e] ?? "";
-			t.textContent = n, n ? t.removeAttribute("data-empty") : t.setAttribute("data-empty", "");
+			t.textContent = n ? this.#s ?? n : "", n ? t.removeAttribute("data-empty") : t.setAttribute("data-empty", "");
 		}
 	}
-	#l() {
+	#d() {
 		let e = this.value;
-		this.#e.setFormValue(e), this.#t.value && e.length < this.#a ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : this.#e.setValidity({});
+		this.#e.setFormValue(e), this.#t.value && e.length === 0 ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : this.#t.value && e.length < this.#a ? this.#e.setValidity({ tooShort: !0 }, `Please enter ${this.#a} characters.`, this) : this.#e.setValidity({});
 	}
-	#u(e) {
+	#f(e) {
 		let t = this.#r[e];
 		if (t) {
 			t.focus();
@@ -3268,26 +3425,30 @@ var ve = class extends y(c) {
 			e && (e.selectAllChildren(t), e.collapseToEnd());
 		}
 	}
-	#d = (e) => {
+	#p = (e) => {
 		if (this.disabled) return;
 		let t = e.target, n = this.#r.indexOf(t);
 		if (n === -1) return;
 		let r = t.textContent ?? "";
 		if (r.length > 0) {
 			let e = r[r.length - 1];
-			this.#o.test(e) ? (this.#i[n] = e, t.textContent = e, t.removeAttribute("data-empty"), this.#l(), this.#h(), n < this.#a - 1 && this.#u(n + 1), this.value.length === this.#a && this.#g()) : t.textContent = this.#i[n] || "";
-		} else this.#i[n] = "", t.setAttribute("data-empty", ""), this.#l(), this.#h();
+			if (this.#o.test(e)) this.#i[n] = e, t.textContent = this.#s ?? e, t.removeAttribute("data-empty"), this.#d(), this.#_(), n < this.#a - 1 && this.#f(n + 1), this.value.length === this.#a && this.#v();
+			else {
+				let e = this.#i[n] || "";
+				t.textContent = e ? this.#s ?? e : "";
+			}
+		} else this.#i[n] = "", t.setAttribute("data-empty", ""), this.#d(), this.#_();
 	};
-	#f = (e) => {
+	#m = (e) => {
 		if (this.disabled) return;
 		let t = e.target, n = this.#r.indexOf(t);
-		n !== -1 && (e.key === "Backspace" ? (this.#i[n] ? (this.#i[n] = "", t.textContent = "", t.setAttribute("data-empty", ""), this.#l(), this.#h()) : n > 0 && this.#u(n - 1), e.preventDefault()) : e.key === "ArrowLeft" && n > 0 ? (this.#u(n - 1), e.preventDefault()) : e.key === "ArrowRight" && n < this.#a - 1 ? (this.#u(n + 1), e.preventDefault()) : e.key === "Delete" && (this.#i[n] = "", t.textContent = "", t.setAttribute("data-empty", ""), this.#l(), this.#h(), e.preventDefault()));
+		n !== -1 && (e.key === "Backspace" ? (this.#i[n] ? (this.#i[n] = "", t.textContent = "", t.setAttribute("data-empty", ""), this.#d(), this.#_()) : n > 0 && this.#f(n - 1), e.preventDefault()) : e.key === "ArrowLeft" && n > 0 ? (this.#f(n - 1), e.preventDefault()) : e.key === "ArrowRight" && n < this.#a - 1 ? (this.#f(n + 1), e.preventDefault()) : e.key === "Delete" && (this.#i[n] = "", t.textContent = "", t.setAttribute("data-empty", ""), this.#d(), this.#_(), e.preventDefault()));
 	};
-	#p = (e) => {
+	#h = (e) => {
 		let t = e.target, n = window.getSelection();
 		n && (n.selectAllChildren(t), n.collapseToEnd());
 	};
-	#m = (e) => {
+	#g = (e) => {
 		if (this.disabled) {
 			e.preventDefault();
 			return;
@@ -3295,32 +3456,35 @@ var ve = class extends y(c) {
 		e.preventDefault();
 		let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => this.#o.test(e)).slice(0, this.#a);
 		for (let e = 0; e < this.#a; e++) this.#i[e] = t[e] ?? "";
-		this.#c(), this.#l(), this.#h();
+		this.#u(), this.#d(), this.#_();
 		let n = this.#i.findIndex((e) => !e);
-		this.#u(n >= 0 ? n : this.#a - 1), t.length === this.#a && this.#g();
+		this.#f(n >= 0 ? n : this.#a - 1), t.length === this.#a && this.#v();
 	};
 	onFormDisabled(e) {
 		this.#n.signal.value = e;
 		for (let t of this.#r) t.setAttribute("contenteditable", e ? "false" : "plaintext-only");
 	}
 	onFormReset() {
-		this.value = "", this.#n.signal.value = this.hasAttribute("disabled");
+		this.value = this.#c, this.#n.signal.value = this.hasAttribute("disabled");
 	}
-	#h() {
+	onFormStateRestore(e) {
+		this.value = typeof e == "string" ? e : "";
+	}
+	#_() {
 		this.dispatchEvent(new CustomEvent("ui-input", {
 			bubbles: !0,
 			composed: !0,
 			detail: { value: this.value }
 		}));
 	}
-	#g() {
+	#v() {
 		this.dispatchEvent(new CustomEvent("ui-change", {
 			bubbles: !0,
 			composed: !0,
 			detail: { value: this.value }
 		}));
 	}
-}, Te = class extends c {
+}, De = class extends _ {
 	static observedAttributes = [
 		"src",
 		"name",
@@ -3343,6 +3507,12 @@ var ve = class extends y(c) {
 	set name(e) {
 		this.setAttribute("name", e);
 	}
+	get alt() {
+		return this.getAttribute("alt") ?? "";
+	}
+	set alt(e) {
+		this.setAttribute("alt", e);
+	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && (this.isConnected && this.#n(), super.attributeChangedCallback(e, t, n));
 	}
@@ -3366,7 +3536,7 @@ var ve = class extends y(c) {
 		let e = this.getAttribute("name");
 		e ? this.textContent = this.#r(e) : this.textContent = "?";
 	};
-}, Ee = class extends c {
+}, Oe = class extends _ {
 	static observedAttributes = ["max"];
 	#e;
 	#t = "";
@@ -3387,7 +3557,7 @@ var ve = class extends y(c) {
 		let n = parseInt(this.#t, 10);
 		isNaN(n) || (n > t ? this.textContent = `${t}+` : this.textContent = this.#t);
 	}
-}, De = class extends c {
+}, ke = class extends _ {}, Ae = class extends _ {
 	#e;
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "navigation";
@@ -3397,7 +3567,7 @@ var ve = class extends y(c) {
 		let e = this.getAttribute("aria-label") ?? "Breadcrumb";
 		this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e);
 	}
-}, Oe = class extends c {
+}, je = class extends _ {
 	static observedAttributes = ["href", "current"];
 	#e;
 	constructor() {
@@ -3423,7 +3593,7 @@ var ve = class extends y(c) {
 	#r = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#n());
 	};
-}, ke = class extends c {
+}, Me = class extends _ {
 	static observedAttributes = [
 		"total",
 		"value",
@@ -3488,15 +3658,21 @@ var ve = class extends y(c) {
 				break;
 			case "disabled":
 				this.#a.value = n !== null;
-				return;
+				break;
 		}
 		super.attributeChangedCallback(e, t, n);
 	}
 	setup() {
 		super.setup();
 		let e = this.getAttribute("aria-label") ?? "Pagination";
-		this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e), this.addEffect(g(this, this.#a, this.#e)), this.addEffect(() => {
+		this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e), this.addEffect(v(this, this.#a, this.#e)), this.addEffect(() => {
 			this.#l();
+		}), this.addEffect(() => {
+			let e = this.#a.value, t = c(() => this.#n.value), n = c(() => this.#t.value);
+			for (let r of this.querySelectorAll("ui-button")) {
+				let i = r.getAttribute("aria-label") ?? "";
+				i === "Previous page" ? r.toggleAttribute("disabled", e || t <= 1) : i === "Next page" ? r.toggleAttribute("disabled", e || t >= n) : r.toggleAttribute("disabled", e);
+			}
 		});
 	}
 	teardown() {
@@ -3526,16 +3702,16 @@ var ve = class extends y(c) {
 		return a.setAttribute("name", e), i.appendChild(a), i.addEventListener("ui-press", r), i;
 	}
 	#l() {
-		let e = this.#t.value, t = this.#n.value, n = this.#o();
-		this.textContent = "", this.appendChild(this.#c("caret-left", "Previous page", t <= 1, () => this.#u(t - 1)));
-		for (let e of n) if (e === "ellipsis") {
+		let e = this.#t.value, t = this.#n.value, n = c(() => this.#a.value), r = this.#o();
+		this.textContent = "", this.appendChild(this.#c("caret-left", "Previous page", n || t <= 1, () => this.#u(t - 1)));
+		for (let e of r) if (e === "ellipsis") {
 			let e = document.createElement("span");
 			e.classList.add("ui-pagination-ellipsis"), e.textContent = "…", this.appendChild(e);
 		} else {
-			let n = this.#s(String(e), `Page ${e}`, !1, () => this.#u(e));
-			e === t && n.setAttribute("aria-current", "page"), this.appendChild(n);
+			let r = this.#s(String(e), `Page ${e}`, n, () => this.#u(e));
+			e === t && r.setAttribute("aria-current", "page"), this.appendChild(r);
 		}
-		this.appendChild(this.#c("caret-right", "Next page", t >= e, () => this.#u(t + 1)));
+		this.appendChild(this.#c("caret-right", "Next page", n || t >= e, () => this.#u(t + 1)));
 	}
 	#u(e) {
 		if (this.#a.value) return;
@@ -3546,12 +3722,7 @@ var ve = class extends y(c) {
 			detail: { value: t }
 		})));
 	}
-}, Ae = class extends c {
-	static observedAttributes = [
-		"side",
-		"no-close-on-escape",
-		"no-close-on-backdrop"
-	];
+}, Ne = class extends _ {
 	#e;
 	get open() {
 		return this.#e.open;
@@ -3563,12 +3734,12 @@ var ve = class extends y(c) {
 		this.#e.close();
 	}
 	setup() {
-		super.setup(), this.#e = new h(this, { contentTarget: () => document.createElement("ui-drawer-panel") });
+		super.setup(), this.#e = new d(this, { contentTarget: () => document.createElement("ui-drawer-panel") });
 	}
 	teardown() {
 		this.#e.destroy(), super.teardown();
 	}
-}, je = class extends c {
+}, Pe = class extends _ {
 	static observedAttributes = ["disabled"];
 	#e;
 	#t = t(!1);
@@ -3586,17 +3757,17 @@ var ve = class extends y(c) {
 		t !== n && (e === "disabled" && (this.#t.value = n !== null), super.attributeChangedCallback?.(e, t, n));
 	}
 	setup() {
-		super.setup(), this.#n = new l(this, {
+		super.setup(), this.#n = new i(this, {
 			selector: ":scope ui-tree-item > [slot=\"label\"]",
 			orientation: "vertical"
 		});
 		let e = this.getAttribute("aria-label") ?? "Tree";
-		this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e), this.addEffect(g(this, this.#t, this.#e));
+		this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e), this.addEffect(v(this, this.#t, this.#e));
 	}
 	teardown() {
 		this.#n.destroy(), super.teardown();
 	}
-}, Me = class extends c {
+}, Fe = class extends _ {
 	static observedAttributes = [
 		"expanded",
 		"selected",
@@ -3609,6 +3780,18 @@ var ve = class extends y(c) {
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "treeitem";
 	}
+	get expanded() {
+		return this.hasAttribute("expanded");
+	}
+	set expanded(e) {
+		this.toggleAttribute("expanded", e), this.isConnected && this.#a();
+	}
+	get selected() {
+		return this.hasAttribute("selected");
+	}
+	set selected(e) {
+		this.toggleAttribute("selected", e), this.isConnected && this.#a();
+	}
 	get disabled() {
 		return this.#r.value;
 	}
@@ -3616,7 +3799,7 @@ var ve = class extends y(c) {
 		this.#r.value = e, this.toggleAttribute("disabled", e);
 	}
 	setup() {
-		super.setup(), this.addEffect(g(this, this.#r, this.#e)), this.deferChildren(() => {
+		super.setup(), this.addEffect(v(this, this.#r, this.#e)), this.deferChildren(() => {
 			this.#i(), this.#a();
 		}), this.addEventListener("click", this.#o), this.addEventListener("keydown", this.#s);
 	}
@@ -3678,7 +3861,7 @@ var ve = class extends y(c) {
 				break;
 		}
 	};
-}, Ne = class extends c {
+}, Ie = class extends _ {
 	static observedAttributes = [
 		"direction",
 		"controls",
@@ -3746,6 +3929,12 @@ var ve = class extends y(c) {
 				case "autoplay":
 					n === null ? this.#E() : this.#T();
 					break;
+				case "interval":
+					this.hasAttribute("autoplay") && (this.#E(), this.#T());
+					break;
+				case "loop":
+					this.#w(this.#a.value, this.#o.value);
+					break;
 			}
 			super.attributeChangedCallback?.(e, t, n);
 		}
@@ -3772,7 +3961,7 @@ var ve = class extends y(c) {
 		s.id = e("ss-live"), s.setAttribute("aria-live", "polite"), s.setAttribute("aria-atomic", "true"), s.setAttribute("data-visually-hidden", ""), this.appendChild(s), this.#i = s, this.setAttribute("aria-roledescription", "carousel"), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Slideshow"), this.#v(this.getAttribute("per-view")), this.#o.value = n.length, this.#y(n), this.#b(n.length), this.#S(n), n.length > 0 && n[0].toggleAttribute("active", !0), this.addEffect(() => {
 			let e = this.#a.value, t = this.#o.value;
 			this.#C(e), this.#w(e, t), this.#i && (this.#i.textContent = `Slide ${e + 1} of ${t}`);
-		}), this.addEffect(g(this, this.#s, this.#_)), i.addEventListener("click", this.#D), a.addEventListener("click", this.#O), t.addEventListener("keydown", this.#P), t.addEventListener("pointerdown", this.#j), this.addEventListener("mouseenter", this.#k), this.addEventListener("mouseleave", this.#A), this.addEventListener("focusin", this.#k), this.addEventListener("focusout", this.#A), this.hasAttribute("autoplay") && this.#T();
+		}), this.addEffect(v(this, this.#s, this.#_)), i.addEventListener("click", this.#D), a.addEventListener("click", this.#O), t.addEventListener("keydown", this.#P), t.addEventListener("pointerdown", this.#j), this.addEventListener("mouseenter", this.#k), this.addEventListener("mouseleave", this.#A), this.addEventListener("focusin", this.#k), this.addEventListener("focusout", this.#A), this.hasAttribute("autoplay") && this.#T();
 	}
 	teardown() {
 		this.#E(), this.#u?.disconnect(), this.#u = null, this.#n?.removeEventListener("click", this.#D), this.#r?.removeEventListener("click", this.#O), this.#e?.removeEventListener("keydown", this.#P), this.#e?.removeEventListener("pointerdown", this.#j), this.removeEventListener("mouseenter", this.#k), this.removeEventListener("mouseleave", this.#A), this.removeEventListener("focusin", this.#k), this.removeEventListener("focusout", this.#A), this.#e = null, this.#t?.removeEventListener("click", this.#x), this.#t && (this.#t.innerHTML = ""), this.#t = null, this.#n = null, this.#r = null, this.#i = null, this.#d = [], super.teardown();
@@ -3891,17 +4080,17 @@ var ve = class extends y(c) {
 				break;
 		}
 	};
-}, Pe = class extends c {
+}, Le = class extends _ {
 	setup() {
 		super.setup(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
 	}
-}, Fe = class extends c {
+}, Re = class extends _ {
 	static observedAttributes = ["value", "disabled"];
 	#e;
 	#t;
 	#n;
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "navigation", this.#t = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "navigation", this.#t = y(this, "disabled", { type: "boolean" });
 	}
 	get value() {
 		return this.#n?.listValue.value ?? null;
@@ -3917,7 +4106,7 @@ var ve = class extends y(c) {
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
-			if (v({ disabled: this.#t }, e, n)) {
+			if (b({ disabled: this.#t }, e, n)) {
 				super.attributeChangedCallback?.(e, t, n);
 				return;
 			}
@@ -3925,7 +4114,7 @@ var ve = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.#n = new d(this, {
+		super.setup(), this.#n = new o(this, {
 			itemSelector: ":scope ui-nav-item:not([disabled])",
 			orientation: "vertical",
 			ariaAttr: "aria-current",
@@ -3941,12 +4130,12 @@ var ve = class extends y(c) {
 			deferChildren: (e) => this.deferChildren(e)
 		});
 		let e = this.getAttribute("value");
-		e !== null && (this.#n.listValue.value = e), this.addEffect(g(this, this.#t.signal, this.#e));
+		e !== null && (this.#n.listValue.value = e), this.addEffect(v(this, this.#t.signal, this.#e));
 	}
 	teardown() {
 		this.#n.destroy(), super.teardown();
 	}
-}, Ie = class extends c {
+}, ze = class extends _ {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -3957,7 +4146,7 @@ var ve = class extends y(c) {
 	#n;
 	#r = t("");
 	constructor() {
-		super(), this.#e = this.attachInternals(), this.#e.role = "option", this.#n = _(this, "disabled", { type: "boolean" });
+		super(), this.#e = this.attachInternals(), this.#e.role = "link", this.#n = y(this, "disabled", { type: "boolean" });
 	}
 	get value() {
 		return this.#t.value;
@@ -3979,7 +4168,7 @@ var ve = class extends y(c) {
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
-			if (v({ disabled: this.#n }, e, n)) {
+			if (b({ disabled: this.#n }, e, n)) {
 				super.attributeChangedCallback?.(e, t, n);
 				return;
 			}
@@ -3995,7 +4184,7 @@ var ve = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(g(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
+		super.setup(), this.addEffect(v(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
 	}
 	teardown() {
 		this.removeEventListener("click", this.#i), super.teardown();
@@ -4010,9 +4199,9 @@ var ve = class extends y(c) {
 			}
 		}));
 	};
-}, Le = class extends c {
+}, Be = class extends _ {
 	static observedAttributes = ["open"];
-	#e = t(!0);
+	#e = t(!1);
 	#t = null;
 	#n;
 	#r = null;
@@ -4048,7 +4237,7 @@ var ve = class extends y(c) {
 			attributeFilter: ["aria-current"]
 		}), this.#s();
 		let r = document.createElement("ui-listbox");
-		r.setAttribute("popover", "manual"), r.className = "nav-group-flyout", this.appendChild(r), this.#i = r, this.#a = new p(this), this.#a.wirePopover(this, r), r.addEventListener("ui-select", this.#u), r.addEventListener("ui-change", this.#d), this.addEventListener("ui-dismiss", this.#l);
+		r.setAttribute("popover", "manual"), r.className = "nav-group-flyout", this.appendChild(r), this.#i = r, this.#a = new l(this), this.#a.wirePopover(this, r), r.addEventListener("ui-select", this.#u), r.addEventListener("ui-change", this.#d), this.addEventListener("ui-dismiss", this.#l);
 	}
 	teardown() {
 		this.closeFlyout(), this.#a?.destroy(), this.#a = null, this.#i?.remove(), this.#i = null, this.#r?.disconnect(), this.#r = null, this.#t?.removeEventListener("toggle", this.#c), this.#t = null, super.teardown();
@@ -4097,7 +4286,7 @@ var ve = class extends y(c) {
 	#d = (e) => {
 		e.stopPropagation();
 	};
-}, Re = class extends c {
+}, Ve = class extends _ {
 	constructor() {
 		super();
 		let e = this.attachInternals();
@@ -4113,7 +4302,7 @@ var ve = class extends y(c) {
 			e.className = "icon-well", this.insertBefore(e, n), e.appendChild(n);
 		}
 	}
-}, Y = class extends c {
+}, He = class extends _ {
 	static observedAttributes = [
 		"traits",
 		"for",
@@ -4121,109 +4310,133 @@ var ve = class extends y(c) {
 	];
 	/** Per-target controller instances: target → Map<traitName, instance> */
 	#e = /* @__PURE__ */ new Map();
-	/** Watches for child additions/removals in selector mode */
+	/** Watches for child additions/removals in selector mode, or first-child changes in wrapper mode */
 	#t = null;
 	/** Watches for trait option attribute changes on this element */
 	#n = null;
 	/** Traits requested but not yet registered — retried on registration */
 	#r = /* @__PURE__ */ new Set();
 	#i = null;
+	#a = !1;
 	connectedCallback() {
-		this.setup();
+		this.#a || (this.#a = !0, this.setup());
+	}
+	disconnectedCallback() {
+		this.#a = !1, super.disconnectedCallback();
 	}
 	setup() {
-		super.setup(), this.#a(), this.#p();
+		super.setup(), this.#o(), this.#m();
 	}
 	teardown() {
-		this.#f(), this.#t?.disconnect(), this.#t = null, this.#n?.disconnect(), this.#n = null, this.#i?.(), this.#i = null, this.#r.clear(), super.teardown();
+		this.#p(), this.#t?.disconnect(), this.#t = null, this.#n?.disconnect(), this.#n = null, this.#i?.(), this.#i = null, this.#r.clear(), super.teardown();
 	}
 	attributeChangedCallback(e, t, n) {
-		super.attributeChangedCallback(e, t, n), this.isConnected && (e === "traits" || e === "for" || e === "provides") && (this.#f(), this.#t?.disconnect(), this.#t = null, this.#a());
+		super.attributeChangedCallback(e, t, n), this.isConnected && (e === "traits" || e === "for" || e === "provides") && (this.#p(), this.#t?.disconnect(), this.#t = null, this.#o());
 	}
-	#a() {
+	#o() {
 		if (this.getAttribute("provides") !== null) return;
 		let e = this.getAttribute("traits");
 		if (!e) return;
 		let t = this.getAttribute("for");
-		t === null ? this.#o(e) : this.#s(e, t), this.#r.size > 0 && !this.#i && (this.#i = o((e) => {
-			this.#r.has(e) && (this.#r.delete(e), this.#a(), this.#r.size === 0 && (this.#i?.(), this.#i = null));
+		t === null ? this.#s(e) : this.#c(e, t), this.#r.size > 0 && !this.#i && (this.#i = h((e) => {
+			this.#r.has(e) && (this.#r.delete(e), this.#o(), this.#r.size === 0 && (this.#i?.(), this.#i = null));
 		}));
 	}
-	#o(e) {
-		let t = this.#u();
-		t && this.#l(t, e);
+	#s(e) {
+		let t = this.#d();
+		t && this.#u(t, e), this.#t = new MutationObserver((t) => {
+			for (let n of t) {
+				if (n.type !== "childList") continue;
+				for (let e of n.removedNodes) if (e instanceof HTMLElement) {
+					let t = this.#e.get(e);
+					t && (this.#f(e, t), this.#e.delete(e));
+				}
+				let t = this.#d();
+				t && !this.#e.has(t) && this.#u(t, e);
+			}
+		}), this.#t.observe(this, { childList: !0 });
 	}
-	#s(e, t) {
+	#c(e, t) {
 		let n = this.querySelectorAll(t);
-		for (let t of n) this.#l(t, e);
+		for (let t of n) this.#u(t, e);
 		this.#t = new MutationObserver(() => {
-			this.#c(e, t);
+			this.#l(e, t);
 		}), this.#t.observe(this, {
 			childList: !0,
 			subtree: !0
 		});
 	}
-	#c(e, t) {
+	#l(e, t) {
 		let n = new Set(this.querySelectorAll(t));
-		for (let [e, t] of this.#e) n.has(e) || (this.#d(e, t), this.#e.delete(e));
-		for (let t of n) this.#e.has(t) || this.#l(t, e);
+		for (let [e, t] of this.#e) n.has(e) || (this.#f(e, t), this.#e.delete(e));
+		for (let t of n) this.#e.has(t) || this.#u(t, e);
 	}
-	#l(e, t) {
+	#u(e, t) {
 		let n = t.split(/\s+/).filter(Boolean), r = this.#e.get(e) ?? /* @__PURE__ */ new Map();
 		for (let t of n) {
 			if (r.has(t)) continue;
-			let n = i(t);
+			let n = f(t);
 			if (!n) {
 				this.#r.add(t);
 				continue;
 			}
-			for (let [e] of r) if (i(e)?.conflicts?.includes(t) || n.conflicts?.includes(e)) {
+			for (let [e] of r) if (f(e)?.conflicts?.includes(t) || n.conflicts?.includes(e)) {
 				let n = `[native-ui] Trait conflict: "${t}" and "${e}" are incompatible.`;
 				console.warn(n);
 			}
-			let o = a(this, t), s = n.create(e, o);
-			r.set(t, s);
+			let i = m(this, t), a = n.create(e, i);
+			r.set(t, a);
 		}
 		this.#e.set(e, r);
 	}
-	#u() {
+	#d() {
 		for (let e of this.children) if (e instanceof HTMLElement) return e;
 		return null;
 	}
-	#d(e, t) {
+	#f(e, t) {
 		for (let [e, n] of t) {
-			let t = i(e);
+			let t = f(e);
 			t && t.destroy(n);
 		}
 		t.clear();
 	}
-	#f() {
-		for (let [e, t] of this.#e) this.#d(e, t);
+	#p() {
+		for (let [e, t] of this.#e) this.#f(e, t);
 		this.#e.clear();
 	}
 	/** Watch trait option attributes (e.g. draggable-axis) on this element */
-	#p() {
+	#m() {
 		this.#n = new MutationObserver((e) => {
 			for (let t of e) {
-				if (!t.attributeName || t.attributeName === "traits" || t.attributeName === "for" || t.attributeName === "provides") continue;
-				let e = s(t.attributeName);
+				if (!t.attributeName) continue;
+				let e = g(t.attributeName);
 				if (!e) continue;
-				let n = i(e.trait);
+				let n = f(e.trait);
 				if (!n?.update) continue;
-				let r = a(this, e.trait);
+				let r = m(this, e.trait);
 				for (let [, t] of this.#e) {
 					let i = t.get(e.trait);
 					i && n.update(i, r);
 				}
 			}
-		}), this.#n.observe(this, { attributes: !0 });
+		});
+		let e = this.#h();
+		e.length > 0 ? this.#n.observe(this, {
+			attributes: !0,
+			attributeFilter: e
+		}) : this.#n.observe(this, { attributes: !0 });
 	}
-}, ze = class extends c {
-	static observedAttributes = [
-		"disabled",
-		"no-enter-submit",
-		"no-auto-clear"
-	];
+	/** Collect all attributes on this element that match any registered trait prefix. */
+	#h() {
+		let e = p(), t = [];
+		for (let n of this.attributes) for (let r of e) if (n.name.startsWith(r + "-")) {
+			t.push(n.name);
+			break;
+		}
+		return t;
+	}
+}, Ue = class extends _ {
+	static observedAttributes = ["disabled"];
 	#e;
 	#t = t(!1);
 	#n = null;
@@ -4254,7 +4467,7 @@ var ve = class extends y(c) {
 		}
 	}
 	setup() {
-		super.setup(), this.addEffect(g(this, this.#t, this.#e)), this.deferChildren(() => {
+		super.setup(), this.addEffect(v(this, this.#t, this.#e)), this.deferChildren(() => {
 			this.#i(), this.addEffect(() => {
 				let e = this.#t.value;
 				this.#n && this.#n.toggleAttribute("disabled", e), this.#r && (e ? this.#r.setAttribute("disabled", "") : this.#o());
@@ -4298,7 +4511,7 @@ var ve = class extends y(c) {
 			detail: { value: e }
 		})) && !this.hasAttribute("no-auto-clear") && (this.value = "", this.#r?.setAttribute("disabled", ""));
 	}
-}, Be = class extends c {
+}, We = class extends _ {
 	static observedAttributes = ["interactive", "href"];
 	setup() {
 		super.setup(), this.hasAttribute("interactive") && (this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEventListener("click", this.#e), this.addEventListener("keydown", this.#t));
@@ -4313,7 +4526,7 @@ var ve = class extends y(c) {
 	#t = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#e());
 	};
-}, Ve = class extends c {
+}, Ge = class extends _ {
 	static observedAttributes = [
 		"collapsible",
 		"collapsed",
@@ -4332,14 +4545,14 @@ var ve = class extends y(c) {
 	#e = () => {
 		this.hasAttribute("collapsible") && this.toggleAttribute("collapsed");
 	};
-}, He = class extends c {
+}, Y = class extends _ {
 	#e;
 	#t;
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "toolbar";
 	}
 	setup() {
-		super.setup(), this.#t = new l(this, {
+		super.setup(), this.#t = new i(this, {
 			selector: ":scope > ui-button:not([disabled]), :scope > button:not([disabled])",
 			orientation: "horizontal"
 		}), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Toolbar");
@@ -4347,7 +4560,7 @@ var ve = class extends y(c) {
 	teardown() {
 		this.#t.destroy(), super.teardown();
 	}
-}, Ue = class extends c {
+}, Ke = class extends _ {
 	static observedAttributes = ["collapsed"];
 	#e = null;
 	#t = null;
@@ -4359,7 +4572,7 @@ var ve = class extends y(c) {
 	setup() {
 		super.setup();
 		let e = this.querySelector(":scope > [slot=\"sidebar\"]");
-		e?.querySelector(".layout-resize-handle") && (this.#e = new m(e, {
+		e?.querySelector(".layout-resize-handle") && (this.#e = new u(e, {
 			handleSelector: ".layout-resize-handle",
 			axis: "horizontal",
 			min: 160,
@@ -4415,13 +4628,13 @@ var ve = class extends y(c) {
 			for (let e of a) this.#t.observe(e);
 		}
 	}
-}, We = class extends c {
+}, qe = class extends _ {
 	#e = null;
 	#t = !1;
 	setup() {
 		super.setup();
 		let e = this.querySelector(":scope > ui-listbox[popover]");
-		e && (this.#e = new p(this), this.#e.wirePopover(this, e), this.addEventListener("click", this.#n), this.addEventListener("ui-dismiss", this.#r));
+		e && (this.#e = new l(this), this.#e.wirePopover(this, e), this.addEventListener("click", this.#n), this.addEventListener("ui-dismiss", this.#r));
 	}
 	teardown() {
 		this.removeEventListener("click", this.#n), this.removeEventListener("ui-dismiss", this.#r), this.#e?.destroy(), this.#e = null, this.#t = !1, super.teardown();
@@ -4432,7 +4645,7 @@ var ve = class extends y(c) {
 	#r = () => {
 		this.#t = !1, this.#e?.syncPopover(!1);
 	};
-}, Ge = class extends c {
+}, Je = class extends _ {
 	#e = null;
 	get open() {
 		return this.hasAttribute("open");
@@ -4444,7 +4657,30 @@ var ve = class extends y(c) {
 		this.open = !this.open;
 	}
 	setup() {
-		super.setup(), this.querySelector(".layout-resize-handle") && (this.#e = new m(this, {
+		super.setup(), this.querySelector(".layout-resize-handle") && (this.#e = new u(this, {
+			handleSelector: ".layout-resize-handle",
+			axis: "horizontal",
+			min: 280,
+			max: 480,
+			reverse: !0
+		}));
+	}
+	teardown() {
+		this.#e?.destroy(), this.#e = null, super.teardown();
+	}
+}, Ye = class extends _ {
+	#e = null;
+	get open() {
+		return this.hasAttribute("open");
+	}
+	set open(e) {
+		this.toggleAttribute("open", e);
+	}
+	toggle() {
+		this.open = !this.open;
+	}
+	setup() {
+		super.setup(), this.querySelector(".layout-resize-handle") && (this.#e = new u(this, {
 			handleSelector: ".layout-resize-handle",
 			axis: "horizontal",
 			min: 280,
@@ -4456,7 +4692,7 @@ var ve = class extends y(c) {
 		this.#e?.destroy(), this.#e = null, super.teardown();
 	}
 }, X = /* @__PURE__ */ new Map(), Z = /* @__PURE__ */ new Set();
-function Ke(e, t) {
+function Xe(e, t) {
 	X.set(e, t), Z.forEach((t) => t(e));
 }
 function Q(e) {
@@ -4468,21 +4704,23 @@ function $(e) {
 /**
 * Icon component rendering SVG from the global icon registry.
 * @attr {string} name - Icon name from the Phosphor icon set
+* @attr {string} weight - Icon weight: "regular" (default) or "fill"
 * @attr {string} size - Icon size override
 * @attr {string} aria-label - Accessible label (sets role="img" when present)
 */
-var qe = class extends c {
+var Ze = class extends _ {
 	static observedAttributes = [
 		"name",
+		"weight",
 		"size",
 		"aria-label"
 	];
 	#e = null;
 	setup() {
-		super.setup(), this.#t(), this.#n();
+		super.setup(), this.#t(), this.#r();
 	}
 	attributeChangedCallback(e, t, n) {
-		super.attributeChangedCallback(e, t, n), e === "name" && this.#n(), e === "aria-label" && this.#t();
+		super.attributeChangedCallback(e, t, n), (e === "name" || e === "weight") && this.#r(), e === "aria-label" && this.#t();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.#e?.(), this.#e = null;
@@ -4490,16 +4728,21 @@ var qe = class extends c {
 	#t() {
 		this.hasAttribute("aria-label") ? (this.setAttribute("role", "img"), this.removeAttribute("aria-hidden")) : (this.setAttribute("aria-hidden", "true"), this.removeAttribute("role"));
 	}
+	/** Compute the effective registry key from name + weight attributes. */
 	#n() {
 		let e = this.getAttribute("name");
+		return e ? this.getAttribute("weight") === "fill" && !e.endsWith("-fill") ? `${e}-fill` : e : null;
+	}
+	#r() {
+		let e = this.#n();
 		if (!e) {
 			this.innerHTML = "", this.#e?.(), this.#e = null;
 			return;
 		}
 		let t = Q(e);
 		t ? (this.innerHTML = t, this.#e?.(), this.#e = null) : (this.innerHTML = "", this.#e ||= $((e) => {
-			e === this.getAttribute("name") && this.#n();
+			e === this.#n() && this.#r();
 		}));
 	}
 };
-export { N as $, xe as A, fe as B, Oe as C, _ as Ct, we as D, Te as E, q as F, H as G, ue as H, _e as I, R as J, B as K, he as L, ye as M, J as N, Ce as O, ve as P, P as Q, me as R, ke as S, y as St, Ee as T, g as Tt, U, de as V, V as W, I as X, L as Y, F as Z, Pe as _, ee as _t, Ge as a, D as at, je as b, x as bt, He as c, le as ct, ze as d, oe as dt, M as et, Y as f, ae as ft, Fe as g, te as gt, Ie as h, ne as ht, Ke as i, O as it, be as j, Se as k, Ve as l, ce as lt, Le as m, re as mt, Q as n, A as nt, We as o, E as ot, Re as p, ie as pt, z as q, $ as r, k as rt, Ue as s, T as st, qe as t, j as tt, Be as u, se as ut, Ne as v, w as vt, De as w, v as wt, Ae as x, S as xt, Me as y, C as yt, pe as z };
+export { I as $, Te as A, ge as B, Me as C, ee as Ct, Oe as D, v as Dt, ke as E, b as Et, J as F, W as G, me as H, be as I, V as J, H as K, q as L, Ce as M, Se as N, De as O, xe as P, L as Q, ye as R, Ne as S, C as St, Ae as T, y as Tt, pe as U, he as V, fe as W, z as X, B as Y, R as Z, Re as _, re as _t, Ye as a, A as at, Fe as b, T as bt, Ke as c, D as ct, We as d, le as dt, F as et, Ue as f, ce as ft, ze as g, ie as gt, Be as h, ae as ht, Xe as i, j as it, we as j, Ee as k, Y as l, E as lt, Ve as m, oe as mt, Q as n, N as nt, Je as o, k as ot, He as p, se as pt, U as q, $ as r, M as rt, qe as s, O as st, Ze as t, P as tt, Ge as u, ue as ut, Le as v, ne as vt, je as w, x as wt, Pe as x, w as xt, Ie as y, te as yt, _e as z };