inclusive-elements 0.6.1 → 0.7.0-beta.1

package/dist/index.js

@@ -30,7 +30,8 @@ function i(e, t) {
 	let n = e.style;
 	for (let e of Object.keys(t)) n[e] = t[e] ?? "";
 }
-var a = /* @__PURE__ */ new WeakMap(), o = [
+var a = /* @__PURE__ */ new WeakMap();
+var o = [
 	"margin",
 	"marginTop",
 	"marginRight",
@@ -42,7 +43,8 @@ var a = /* @__PURE__ */ new WeakMap(), o = [
 	"marginInline",
 	"marginInlineStart",
 	"marginInlineEnd"
-], s = {};
+];
+var s = {};
 for (let e of o) s[e] = "0px";
 async function c(r, i, o = {}) {
 	let s = e(o) + i + "-", c = Symbol(s), u = o.detachFromLayout ?? !1, f = u ? g(r) : void 0, p = u ? d(r, f) : void 0, m = i === "leave" ? _(r) : void 0, h = {
@@ -137,7 +139,9 @@ function _(e) {
 		e.inert = t;
 	};
 }
-var v = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap();
+var v = /* @__PURE__ */ new WeakMap();
+var y = /* @__PURE__ */ new WeakMap();
+var b = /* @__PURE__ */ new WeakMap();
 function x(t, n, r = {}) {
 	let i = [];
 	for (let e of Array.from(t)) getComputedStyle(e).display !== "none" && i.push({
@@ -148,20 +152,20 @@ function x(t, n, r = {}) {
 	let a = e(r) + "move", o = [];
 	for (let { el: e, before: t } of i) {
 		if (u(e)) continue;
-		let n = e.getBoundingClientRect(), r = t.left - n.left, i = t.top - n.top, s = ne(e);
-		w(e, v, !1), !(!r && !i) && o.push(ee(e, {
+		let n = e.getBoundingClientRect(), r = t.left - n.left, i = t.top - n.top, s = j(e);
+		D(e, v, !1), !(!r && !i) && o.push(w(e, {
 			store: v,
 			className: a,
-			startStyles: { transform: D(`translate(${r}px, ${i}px)`, s) },
+			startStyles: { transform: M(`translate(${r}px, ${i}px)`, s) },
 			endStyles: { transform: e.style.transform }
 		}));
 	}
 	return Promise.all(o).then(() => void 0);
 }
-function S(e) {
-	w(e, y, !1), w(e, v, !1);
+function C(e) {
+	D(e, y, !1), D(e, v, !1);
 }
-function ee(e, a) {
+function w(e, a) {
 	let o = Symbol(a.className), s = {
 		transitionDuration: "0s",
 		...a.startStyles
@@ -171,7 +175,7 @@ function ee(e, a) {
 	}, l = Object.keys({
 		...s,
 		...c
-	}), u = te(e), d, f = new Promise((e) => {
+	}), u = T(e), d, f = new Promise((e) => {
 		d = e;
 	}), p = {
 		className: a.className,
@@ -180,12 +184,12 @@ function ee(e, a) {
 		resolve: d
 	};
 	return "transitionDuration" in p.styles && (p.styles.transitionDuration = u), a.store.set(e, p), e.classList.add(a.className), i(e, s), e.getBoundingClientRect(), t().then(async () => {
-		C(e), a.store.get(e)?.token === o && (await n(e, () => {
+		E(e), a.store.get(e)?.token === o && (await n(e, () => {
 			i(e, c);
-		}), a.store.get(e)?.token === o && T(e, a.store, p, !0));
+		}), a.store.get(e)?.token === o && O(e, a.store, p, !0));
 	}), f;
 }
-function te(e) {
+function T(e) {
 	let t = b.get(e);
 	if (t) return t.count += 1, t.value;
 	let n = e.style.transitionDuration;
@@ -194,73 +198,90 @@ function te(e) {
 		count: 1
 	}), n;
 }
-function C(e) {
+function E(e) {
 	let t = b.get(e);
 	t && (--t.count, t.count <= 0 && b.delete(e));
 }
-function w(e, t, n) {
+function D(e, t, n) {
 	let r = t.get(e);
-	r && T(e, t, r, n);
+	r && O(e, t, r, n);
 }
-function T(e, t, n, r) {
-	E(e, n), t.delete(e), n.resolve(r);
+function O(e, t, n, r) {
+	k(e, n), t.delete(e), n.resolve(r);
 }
-function E(e, t) {
+function k(e, t) {
 	e.classList.remove(t.className), i(e, t.styles);
 }
-function ne(e) {
+function j(e) {
 	let t = getComputedStyle(e).transform;
 	return t === "none" ? "" : t;
 }
-function D(...e) {
+function M(...e) {
 	return e.filter((e) => !!e && e !== "none").join(" ");
 }
-function O(e, t, n = {}) {
-	return A(e), c(e, t, n);
+function N(e, t, n = {}) {
+	return I(e), c(e, t, n);
 }
-function re(e, t = {}) {
-	return O(e, "enter", t);
+function P(e, t = {}) {
+	return N(e, "enter", t);
 }
-function k(e, t = {}) {
-	return O(e, "leave", {
+function F(e, t = {}) {
+	return N(e, "leave", {
 		...t,
 		detachFromLayout: t.detachFromLayout ?? !0
 	});
 }
-function A(e) {
-	l(e), S(e);
+function I(e) {
+	l(e), C(e);
 }
 //#endregion
 //#region src/alerts/alerts.ts
-var j = class e extends HTMLElement {
+var AlertsElement = class AlertsElement extends HTMLElement {
 	static duration = 1e4;
 	static politeness = "polite";
 	timeouts = /* @__PURE__ */ new WeakMap();
 	index = 0;
 	connectedCallback() {
-		this.addEventListener("focusin", this.pauseOnInteraction), this.addEventListener("focusout", this.resumeOnInteraction), this.addEventListener("mouseover", this.pauseOnInteraction), this.addEventListener("mouseout", this.resumeOnInteraction);
-		for (let e of this.getAlerts()) e.remove(), this.show(e);
+		this.addEventListener("focusin", this.pauseOnInteraction);
+		this.addEventListener("focusout", this.resumeOnInteraction);
+		this.addEventListener("mouseover", this.pauseOnInteraction);
+		this.addEventListener("mouseout", this.resumeOnInteraction);
+		for (const alert of this.getAlerts()) {
+			alert.remove();
+			this.show(alert);
+		}
 	}
 	disconnectedCallback() {
-		this.removeEventListener("focusin", this.pauseOnInteraction), this.removeEventListener("focusout", this.resumeOnInteraction), this.removeEventListener("mouseover", this.pauseOnInteraction), this.removeEventListener("mouseout", this.resumeOnInteraction), this.getAlerts().forEach((e) => this.clearTimeout(e));
-	}
-	show(e, t = {}) {
-		let n = t.key || e.dataset.key || String(this.index++);
-		e.dataset.key = n, this.syncAlertPoliteness(e, t.politeness), t.duration !== void 0 && (e.dataset.duration = String(t.duration));
-		let r = this.getAlerts().filter((t) => t !== e);
-		return x(r, () => {
-			r.filter((e) => e.dataset.key === n).forEach((e) => this.leaveAlert(e)), A(e), this.append(e), re(e);
-		}), this.startTimeout(e), n;
+		this.removeEventListener("focusin", this.pauseOnInteraction);
+		this.removeEventListener("focusout", this.resumeOnInteraction);
+		this.removeEventListener("mouseover", this.pauseOnInteraction);
+		this.removeEventListener("mouseout", this.resumeOnInteraction);
+		this.getAlerts().forEach((alert) => this.clearTimeout(alert));
+	}
+	show(el, options = {}) {
+		const key = options.key || el.dataset.key || String(this.index++);
+		el.dataset.key = key;
+		this.syncAlertPoliteness(el, options.politeness);
+		if (options.duration !== void 0) el.dataset.duration = String(options.duration);
+		const alerts = this.getAlerts().filter((alert) => alert !== el);
+		x(alerts, () => {
+			alerts.filter((alert) => alert.dataset.key === key).forEach((alert) => this.leaveAlert(alert));
+			I(el);
+			this.append(el);
+			P(el);
+		});
+		this.startTimeout(el);
+		return key;
 	}
-	dismiss(e) {
-		(typeof e == "string" ? this.getAlerts().filter((t) => t.dataset.key === e) : [e]).forEach((e) => this.dismissAlert(e));
+	dismiss(elOrKey) {
+		(typeof elOrKey === "string" ? this.getAlerts().filter((alert) => alert.dataset.key === elOrKey) : [elOrKey]).forEach((alert) => this.dismissAlert(alert));
 	}
 	clear() {
-		this.getAlerts().forEach((e) => this.dismissAlert(e));
+		this.getAlerts().forEach((alert) => this.dismissAlert(alert));
 	}
-	speak(e, t = {}) {
-		let n = document.createElement("div");
-		Object.assign(n.style, {
+	speak(message, options = {}) {
+		const el = document.createElement("div");
+		Object.assign(el.style, {
 			clip: "rect(0 0 0 0)",
 			clipPath: "inset(50%)",
 			height: "1px",
@@ -268,300 +289,1033 @@ var j = class e extends HTMLElement {
 			position: "absolute",
 			whiteSpace: "nowrap",
 			width: "1px"
-		}), n.textContent = e, this.show(n, t);
+		});
+		el.textContent = message;
+		this.show(el, options);
 	}
-	dismissAlert(e) {
-		x(this.getAlerts().filter((t) => t !== e), () => this.leaveAlert(e));
+	dismissAlert(el) {
+		x(this.getAlerts().filter((alert) => alert !== el), () => this.leaveAlert(el));
 	}
-	leaveAlert(e) {
-		this.clearTimeout(e), k(e).then((t) => {
-			t && e.parentElement === this && e.remove();
+	leaveAlert(el) {
+		this.clearTimeout(el);
+		F(el).then((complete) => {
+			if (complete && el.parentElement === this) el.remove();
 		});
 	}
-	startTimeout(t) {
-		this.clearTimeout(t);
-		let n = Number(t.dataset.duration || e.duration);
-		n > 0 && this.timeouts.set(t, window.setTimeout(() => this.dismiss(t), n));
+	startTimeout(el) {
+		this.clearTimeout(el);
+		const duration = Number(el.dataset.duration || AlertsElement.duration);
+		if (duration > 0) this.timeouts.set(el, window.setTimeout(() => this.dismiss(el), duration));
 	}
-	clearTimeout(e) {
-		let t = this.timeouts.get(e);
-		t !== void 0 && (clearTimeout(t), this.timeouts.delete(e));
+	clearTimeout(el) {
+		const timeout = this.timeouts.get(el);
+		if (timeout !== void 0) {
+			clearTimeout(timeout);
+			this.timeouts.delete(el);
+		}
 	}
-	pauseOnInteraction = (e) => {
-		this.handleInteraction(e, (e) => this.clearTimeout(e));
+	pauseOnInteraction = (event) => {
+		this.handleInteraction(event, (alert) => this.clearTimeout(alert));
 	};
-	resumeOnInteraction = (e) => {
-		this.handleInteraction(e, (e) => this.startTimeout(e));
+	resumeOnInteraction = (event) => {
+		this.handleInteraction(event, (alert) => this.startTimeout(alert));
 	};
-	handleInteraction(e, t) {
-		let n = this.getAlertFromTarget(e.target);
-		n && (e.relatedTarget instanceof Node && n.contains(e.relatedTarget) || t(n));
+	handleInteraction(event, action) {
+		const alert = this.getAlertFromTarget(event.target);
+		if (!alert) return;
+		if (event.relatedTarget instanceof Node && alert.contains(event.relatedTarget)) return;
+		action(alert);
 	}
 	getAlerts() {
-		return Array.from(this.children, (e) => e);
+		return Array.from(this.children, (child) => child);
 	}
-	syncAlertPoliteness(t, n) {
-		if ((n || this.getAuthoredPoliteness(t) || e.politeness) === "assertive") {
-			t.setAttribute("role", "alert"), t.setAttribute("aria-live", "assertive");
+	syncAlertPoliteness(el, politeness) {
+		if ((politeness || this.getAuthoredPoliteness(el) || AlertsElement.politeness) === "assertive") {
+			el.setAttribute("role", "alert");
+			el.setAttribute("aria-live", "assertive");
 			return;
 		}
-		t.setAttribute("role", "status"), t.setAttribute("aria-live", "polite");
+		el.setAttribute("role", "status");
+		el.setAttribute("aria-live", "polite");
 	}
-	getAuthoredPoliteness(e) {
-		if (e.getAttribute("role") === "alert" || e.getAttribute("aria-live") === "assertive") return "assertive";
-		if (e.getAttribute("role") === "status" || e.getAttribute("aria-live") === "polite") return "polite";
+	getAuthoredPoliteness(el) {
+		if (el.getAttribute("role") === "alert" || el.getAttribute("aria-live") === "assertive") return "assertive";
+		if (el.getAttribute("role") === "status" || el.getAttribute("aria-live") === "polite") return "polite";
 	}
-	getAlertFromTarget(e) {
-		return e instanceof Node && Array.from(this.children).find((t) => t instanceof HTMLElement && t.contains(e)) || null;
+	getAlertFromTarget(target) {
+		if (!(target instanceof Node)) return null;
+		return Array.from(this.children).find((child) => child instanceof HTMLElement && child.contains(target)) || null;
 	}
 };
 //#endregion
 //#region src/utils.ts
-function M(e, t) {
-	let n = !1;
+function createQueuedSync(element, sync) {
+	let queued = false;
+	const queue = () => {
+		if (queued) return;
+		queued = true;
+		queueMicrotask(() => {
+			queued = false;
+			if (element.isConnected) sync();
+		});
+	};
 	return {
-		queue: () => {
-			n || (n = !0, queueMicrotask(() => {
-				n = !1, e.isConnected && t();
-			}));
-		},
+		queue,
 		disconnect() {
-			n = !1;
+			queued = false;
 		}
 	};
 }
-function N(e, t, n) {
-	let r = M(e, n), i = new MutationObserver(r.queue);
+function createQueuedElementSync(element, options, sync) {
+	const queuedSync = createQueuedSync(element, sync);
+	const observer = new MutationObserver(queuedSync.queue);
 	return {
 		observe() {
-			i.observe(e, t);
+			observer.observe(element, options);
 		},
 		disconnect() {
-			i.disconnect(), r.disconnect();
+			observer.disconnect();
+			queuedSync.disconnect();
 		},
-		queue: r.queue
+		queue: queuedSync.queue
 	};
 }
-function P(e) {
-	let t = e.getRootNode();
-	return t instanceof ShadowRoot ? t : e.ownerDocument;
+function getLookupRoot(element) {
+	const root = element.getRootNode();
+	return root instanceof ShadowRoot ? root : element.ownerDocument;
 }
-function F(e, t) {
-	let { currentIndex: n, length: r, vertical: i } = t;
-	if (!(r === 0 || n < 0 || n >= r)) {
-		if (e === (i ? "ArrowUp" : "ArrowLeft")) return (n - 1 + r) % r;
-		if (e === (i ? "ArrowDown" : "ArrowRight")) return (n + 1) % r;
-		if (e === "Home") return 0;
-		if (e === "End") return r - 1;
-	}
+function getRovingIndexForKey(key, options) {
+	const { currentIndex, length, vertical } = options;
+	if (length === 0 || currentIndex < 0 || currentIndex >= length) return;
+	if (key === (vertical ? "ArrowUp" : "ArrowLeft")) return (currentIndex - 1 + length) % length;
+	if (key === (vertical ? "ArrowDown" : "ArrowRight")) return (currentIndex + 1) % length;
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
 }
 //#endregion
+//#region src/combobox/combobox.ts
+let idCounter$1 = 0;
+const internalSourceEvents = /* @__PURE__ */ new WeakSet();
+const transferredAttributes = [
+	"title",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-errormessage"
+];
+var ComboboxElement = class extends HTMLElement {
+	idPrefix = "combobox" + ++idCounter$1;
+	suppressedListId = this.idPrefix + "_suppressed_list";
+	sync = createQueuedSync(this, () => this.sourceState ? this.render() : this.enhance());
+	observer = new MutationObserver(this.sync.queue);
+	listeners;
+	sourceState;
+	control;
+	tokens;
+	input;
+	listbox;
+	activeIndex = -1;
+	labelledBy = "";
+	generatedLabelIds = [];
+	connectedCallback() {
+		this.sync.queue();
+	}
+	disconnectedCallback() {
+		this.sync.disconnect();
+		this.teardownSource();
+	}
+	refresh() {
+		const transferFocus = this.input?.matches(":focus");
+		this.teardownSource();
+		if (this.isConnected) this.enhance(transferFocus);
+	}
+	enhance(transferFocus) {
+		if (typeof HTMLElement.prototype.showPopover !== "function" || typeof HTMLElement.prototype.hidePopover !== "function") return;
+		const source = this.discoverSource();
+		if (!source) return;
+		transferFocus ??= source.matches(":focus");
+		this.setupSource(source);
+		this.render();
+		if (transferFocus) this.input?.focus();
+	}
+	setupSource(source) {
+		const signal = (this.listeners = new AbortController()).signal;
+		if (source instanceof HTMLSelectElement) {
+			const container = document.createElement("div");
+			this.sourceState = {
+				source,
+				cssHidden: source.style.display === "none" || !source.hidden && getComputedStyle(source).display === "none",
+				container
+			};
+			container.hidden = true;
+			container.inert = true;
+			source.before(container);
+			container.append(source);
+			this.createGeneratedInput(source, signal);
+		} else {
+			this.sourceState = this.createInputState(source);
+			this.input = source;
+			this.addInputListeners(source, signal);
+			source.addEventListener("keydown", this.onWidgetKeyDown, { signal });
+			source.addEventListener("focusout", this.onFocusOut, { signal });
+			source.setAttribute("list", this.suppressedListId);
+			this.observeDatalist();
+		}
+		const listbox = this.createListbox(signal);
+		this.setInputAttribute("role", "combobox");
+		this.setInputAttribute("aria-autocomplete", "list");
+		this.setInputAttribute("aria-haspopup", "listbox");
+		this.setInputAttribute("aria-controls", listbox.id);
+		if (this.multiple) listbox.setAttribute("aria-multiselectable", "true");
+		source.addEventListener("input", this.onSourceUpdate, { signal });
+		source.addEventListener("change", this.onSourceUpdate, { signal });
+		source.addEventListener("invalid", () => this.syncValidityState(), { signal });
+		this.ownerDocument.addEventListener("pointerdown", this.onDocumentPointerDown, {
+			capture: true,
+			signal
+		});
+		this.observeSource(source);
+		source.form?.addEventListener("reset", this.onFormReset, { signal });
+		if (source instanceof HTMLSelectElement) {
+			const labels = Array.from(source.labels);
+			this.labelledBy = labels.map((label, index) => {
+				if (label.id) return label.id;
+				const id = `${this.idPrefix}_label_${index}`;
+				label.id = id;
+				this.generatedLabelIds.push([label, id]);
+				return id;
+			}).join(" ");
+			labels.forEach((label) => {
+				label.addEventListener("click", this.onLabelClick, { signal });
+			});
+		}
+	}
+	observeSource(source) {
+		this.observer.observe(source, {
+			subtree: source instanceof HTMLSelectElement,
+			childList: source instanceof HTMLSelectElement,
+			characterData: source instanceof HTMLSelectElement,
+			attributes: true,
+			attributeFilter: [
+				"disabled",
+				"hidden",
+				"label",
+				"readonly",
+				"required",
+				"selected",
+				"tabindex",
+				"value",
+				"aria-invalid",
+				...transferredAttributes
+			]
+		});
+		for (let ancestor = source.parentElement; ancestor; ancestor = ancestor.parentElement) if (ancestor instanceof HTMLFieldSetElement) this.observer.observe(ancestor, {
+			attributes: true,
+			attributeFilter: ["disabled"]
+		});
+	}
+	teardownSource() {
+		const state = this.sourceState;
+		if (!state) return;
+		this.listeners?.abort();
+		this.listeners = void 0;
+		this.observer.disconnect();
+		this.generatedLabelIds.forEach(([label, id]) => {
+			if (label.id === id) label.removeAttribute("id");
+		});
+		this.generatedLabelIds = [];
+		this.labelledBy = "";
+		if (!("cssHidden" in state)) {
+			const list = state.source.getAttribute("list");
+			if (list !== this.suppressedListId) state.list = list;
+			this.restoreInputAttributes(state.source, state.inputAttributes);
+			if (state.list !== null) state.source.setAttribute("list", state.list);
+			else state.source.removeAttribute("list");
+		} else state.container.replaceWith(...state.container.childNodes);
+		this.control?.remove();
+		this.listbox?.remove();
+		this.sourceState = void 0;
+		this.control = void 0;
+		this.tokens = void 0;
+		this.input = void 0;
+		this.listbox = void 0;
+		this.activeIndex = -1;
+	}
+	render() {
+		const state = this.sourceState;
+		if (!state) return;
+		if ("cssHidden" in state && this.control) this.control.hidden = this.sourceHidden;
+		this.syncInputState();
+		if (state.source instanceof HTMLSelectElement) {
+			this.syncInputDisplay();
+			this.renderTokens();
+		}
+		this.renderOptions();
+	}
+	createGeneratedInput(source, signal) {
+		this.control = document.createElement("div");
+		this.control.setAttribute("data-combobox-control", "");
+		this.control.addEventListener("focusout", this.onFocusOut, { signal });
+		this.control.addEventListener("mousedown", this.onControlMouseDown, { signal });
+		this.control.addEventListener("click", this.onControlClick, { signal });
+		this.control.addEventListener("keydown", this.onWidgetKeyDown, { signal });
+		this.append(this.control);
+		if (this.multiple) {
+			this.tokens = document.createElement("div");
+			this.tokens.setAttribute("data-combobox-tokens", "");
+			this.control.append(this.tokens);
+		}
+		this.input = document.createElement("input");
+		this.input.type = "text";
+		const form = source.getAttribute("form");
+		if (form !== null) this.input.setAttribute("form", form);
+		this.addInputListeners(this.input, signal);
+		this.control.append(this.input);
+	}
+	createListbox(signal) {
+		this.listbox = document.createElement("div");
+		this.listbox.id = this.idPrefix + "_listbox";
+		this.listbox.setAttribute("role", "listbox");
+		this.listbox.setAttribute("popover", "manual");
+		this.listbox.addEventListener("mousedown", (e) => {
+			if (e.target?.closest("[role=\"option\"]")) e.preventDefault();
+		}, { signal });
+		this.listbox.addEventListener("click", this.onListboxClick, { signal });
+		this.append(this.listbox);
+		return this.listbox;
+	}
+	syncInputState() {
+		const state = this.sourceState;
+		const input = this.input;
+		if (!state || !input) return;
+		this.setInputAttribute("aria-expanded", String(this.isOpen()));
+		if (state.source instanceof HTMLSelectElement) {
+			transferredAttributes.forEach((attribute) => {
+				this.setInputAttribute(attribute, state.source.getAttribute(attribute));
+			});
+			if (!state.source.hasAttribute("aria-label") && !state.source.hasAttribute("aria-labelledby") && this.labelledBy) input.setAttribute("aria-labelledby", this.labelledBy);
+			input.disabled = state.source.disabled;
+			input.tabIndex = state.source.tabIndex;
+			this.setInputAttribute("aria-required", state.source.required ? "true" : null);
+		}
+		this.syncValidityState();
+		if (!this.editable) this.close();
+	}
+	syncValidityState() {
+		const source = this.sourceState?.source;
+		if (!(source instanceof HTMLSelectElement) || !this.input) return;
+		this.input.setCustomValidity(source.validity.valid ? "" : source.validationMessage);
+		const invalid = source.getAttribute("aria-invalid") ?? (!source.validity.valid ? "true" : null);
+		this.setInputAttribute("aria-invalid", invalid);
+	}
+	addInputListeners(input, signal) {
+		input.addEventListener("input", this.onInput, { signal });
+		input.addEventListener("keydown", this.onKeyDown, { signal });
+		input.addEventListener("focus", this.onInputFocus, { signal });
+		input.addEventListener("click", this.onInputClick, { signal });
+	}
+	restoreInputAttributes(input, attributes) {
+		attributes.forEach(({ original, managed }, name) => {
+			if (input.getAttribute(name) !== managed) return;
+			if (original === null) input.removeAttribute(name);
+			else input.setAttribute(name, original);
+		});
+	}
+	setInputAttribute(name, value) {
+		const input = this.input;
+		const state = this.sourceState;
+		if (!input || !state) return;
+		if (!("cssHidden" in state)) {
+			const attribute = state.inputAttributes.get(name);
+			if (attribute) attribute.managed = value;
+		}
+		if (value === null) input.removeAttribute(name);
+		else input.setAttribute(name, value);
+	}
+	renderTokens() {
+		const source = this.sourceState?.source;
+		if (!this.tokens || !(source instanceof HTMLSelectElement)) return;
+		const selectedOptions = Array.from(source.selectedOptions).filter((option) => option.value !== "");
+		this.tokens.replaceChildren(...selectedOptions.map((option) => {
+			const token = document.createElement("span");
+			token.setAttribute("data-combobox-token", "");
+			const label = this.optionLabel(option);
+			token.textContent = label + " ";
+			const remove = document.createElement("button");
+			remove.type = "button";
+			remove.setAttribute("data-combobox-token-remove", "");
+			remove.dataset.optionIndex = String(option.index);
+			remove.setAttribute("aria-label", `Remove ${label}`);
+			remove.disabled = source.disabled || this.isOptionDisabled(option);
+			remove.tabIndex = -1;
+			remove.textContent = "×";
+			token.append(remove);
+			return token;
+		}));
+	}
+	renderOptions() {
+		if (!this.listbox) return;
+		const options = this.filteredOptions();
+		if (this.activeIndex >= options.length) this.activeIndex = this.firstEnabledIndex(options);
+		const children = [];
+		const groups = /* @__PURE__ */ new Map();
+		options.forEach((option, index) => {
+			const el = document.createElement("div");
+			el.id = this.idPrefix + "_option_" + index;
+			el.dataset.index = String(index);
+			el.setAttribute("role", "option");
+			el.setAttribute("aria-selected", String(this.isSelected(option)));
+			el.textContent = this.optionLabel(option);
+			if (!this.multiple && option.value === "") el.setAttribute("data-placeholder", "");
+			if (this.isOptionDisabled(option)) el.setAttribute("aria-disabled", "true");
+			if (index === this.activeIndex) el.setAttribute("data-active", "");
+			const parent = option.parentElement;
+			if (parent instanceof HTMLOptGroupElement) {
+				let group = groups.get(parent);
+				if (!group) {
+					group = document.createElement("div");
+					group.setAttribute("role", "group");
+					group.setAttribute("aria-label", parent.label);
+					groups.set(parent, group);
+					children.push(group);
+				}
+				group.append(el);
+			} else children.push(el);
+		});
+		this.listbox.replaceChildren(...children);
+		if (!options.length) {
+			this.close();
+			return;
+		}
+		this.syncActiveDescendant();
+	}
+	syncInputDisplay() {
+		const state = this.sourceState;
+		if (!this.input || !(state?.source instanceof HTMLSelectElement)) return;
+		if (this.input.matches(":focus") && (this.multiple || this.isOpen())) return;
+		this.restoreCommittedText();
+	}
+	onInput = () => {
+		if (!this.editable) return;
+		this.activeIndex = this.firstEnabledIndex(this.filteredOptions());
+		this.renderOptions();
+		this.open();
+	};
+	onInputFocus = () => {
+		this.syncValidityState();
+		this.showSuggestions();
+	};
+	onInputClick = () => {
+		if (!this.isOpen()) this.showSuggestions();
+	};
+	onKeyDown = (e) => {
+		if (e.isComposing || !this.input || !this.editable) return;
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			e.preventDefault();
+			if (!this.isOpen() && this.sourceState?.source instanceof HTMLSelectElement) this.showSuggestions();
+			this.moveActive(e.key === "ArrowDown" ? 1 : -1);
+			this.open();
+			return;
+		}
+		if (e.key === "Enter" && this.isOpen()) {
+			e.preventDefault();
+			this.chooseOption(this.filteredOptions()[this.activeIndex]);
+			return;
+		}
+		if (this.multiple && this.input.selectionStart === 0 && this.input.selectionEnd === 0 && (e.key === "ArrowLeft" || e.key === "Backspace" && this.input.value === "")) {
+			const lastToken = this.enabledTokenButtons().at(-1);
+			if (lastToken) {
+				e.preventDefault();
+				lastToken.focus();
+			}
+		}
+	};
+	onControlMouseDown = (e) => {
+		if (e.target?.closest("[data-combobox-token]")) e.preventDefault();
+	};
+	onControlClick = (e) => {
+		const target = e.target;
+		const remove = target?.closest("[data-combobox-token-remove]");
+		if (remove) {
+			const option = this.optionForToken(remove);
+			if (option) this.toggleOption(option);
+			this.input?.focus();
+			return;
+		}
+		const token = target?.closest("[data-combobox-token]");
+		if (token) {
+			token.querySelector("[data-combobox-token-remove]")?.focus();
+			return;
+		}
+		this.input?.focus();
+		if (!this.isOpen()) this.showSuggestions();
+	};
+	onWidgetKeyDown = (e) => {
+		if (e.isComposing) return;
+		if (e.key === "Escape" && this.isOpen()) {
+			e.preventDefault();
+			e.stopPropagation();
+			this.dismiss();
+			return;
+		}
+		const target = e.target;
+		const tokenFocused = target instanceof HTMLButtonElement && target.hasAttribute("data-combobox-token-remove");
+		if (e.key === "Tab") {
+			if (tokenFocused) this.input?.focus();
+			this.close();
+			return;
+		}
+		if (!tokenFocused) return;
+		const tokens = this.enabledTokenButtons();
+		const index = tokens.indexOf(target);
+		if (e.key === "ArrowLeft" && index > 0) {
+			e.preventDefault();
+			tokens[index - 1].focus();
+			return;
+		}
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			(tokens[index + 1] ?? this.input)?.focus();
+			return;
+		}
+		if (e.key === "Backspace" || e.key === "Delete") {
+			e.preventDefault();
+			const option = this.optionForToken(target);
+			if (!option) return;
+			this.toggleOption(option);
+			const remaining = this.enabledTokenButtons();
+			(remaining[e.key === "Backspace" ? index - 1 : Math.min(index, remaining.length - 1)] ?? this.input)?.focus();
+		}
+	};
+	onListboxClick = (e) => {
+		const optionEl = e.target?.closest("[role=\"option\"]");
+		if (!optionEl) return;
+		if (this.chooseOption(this.filteredOptions()[Number(optionEl.dataset.index)])) this.input?.focus();
+	};
+	onFocusOut = (e) => {
+		const next = e.relatedTarget;
+		if (next instanceof Node && this.contains(next)) return;
+		this.dismiss();
+	};
+	onDocumentPointerDown = (e) => {
+		if (!this.isOpen() || e.composedPath().includes(this)) return;
+		this.dismiss();
+	};
+	onLabelClick = (e) => {
+		if (e.defaultPrevented || e.target instanceof Element && !!e.target.closest("a[href], button, input, select, textarea, summary, [contenteditable]")) return;
+		e.preventDefault();
+		if (!(e.target instanceof Node && this.contains(e.target))) this.input?.focus();
+	};
+	onSourceUpdate = (event) => {
+		if (!internalSourceEvents.has(event)) this.sync.queue();
+	};
+	onFormReset = () => {
+		queueMicrotask(() => {
+			this.close();
+			this.sync.queue();
+		});
+	};
+	moveActive(delta) {
+		const options = this.filteredOptions();
+		if (!options.length) {
+			this.activeIndex = -1;
+			this.syncActiveDescendant();
+			return;
+		}
+		let index = this.activeIndex === -1 && delta === -1 ? options.length : this.activeIndex;
+		for (let i = 0; i < options.length; i++) {
+			index = (index + delta + options.length) % options.length;
+			if (!this.isOptionDisabled(options[index])) {
+				this.activeIndex = index;
+				this.renderOptions();
+				return;
+			}
+		}
+	}
+	showSuggestions() {
+		const state = this.sourceState;
+		if (!state || !this.input || !this.editable) return;
+		if (state.source instanceof HTMLSelectElement) this.input.value = "";
+		const options = this.filteredOptions();
+		const selectedIndex = options.findIndex((option) => this.isSelected(option) && !this.isOptionDisabled(option));
+		this.activeIndex = state.source instanceof HTMLSelectElement && selectedIndex !== -1 ? selectedIndex : this.firstEnabledIndex(options);
+		this.renderOptions();
+		this.open();
+	}
+	chooseOption(option) {
+		const state = this.sourceState;
+		if (!state || !option || !this.editable || this.isOptionDisabled(option)) return false;
+		if (this.multiple) {
+			this.toggleOption(option);
+			return true;
+		}
+		if (state.source instanceof HTMLSelectElement) {
+			if (!option.selected) {
+				option.selected = true;
+				this.emitSourceUpdate(state.source);
+			}
+		} else {
+			if (state.source.value !== option.value) state.source.value = option.value;
+			this.emitSourceUpdate(state.source);
+		}
+		this.syncValidityState();
+		this.dismiss();
+		return true;
+	}
+	toggleOption(option) {
+		const state = this.sourceState;
+		if (!(state?.source instanceof HTMLSelectElement) || !this.editable || this.isOptionDisabled(option)) return;
+		option.selected = !option.selected;
+		this.emitSourceUpdate(state.source);
+		this.syncValidityState();
+		if (this.input) this.input.value = "";
+		this.activeIndex = this.firstEnabledIndex(this.filteredOptions());
+		this.renderTokens();
+		this.renderOptions();
+	}
+	emitSourceUpdate(source) {
+		for (const type of ["input", "change"]) {
+			const event = new Event(type, {
+				bubbles: true,
+				composed: type === "input"
+			});
+			internalSourceEvents.add(event);
+			source.dispatchEvent(event);
+		}
+	}
+	restoreCommittedText() {
+		const state = this.sourceState;
+		if (!this.input || !(state?.source instanceof HTMLSelectElement)) return;
+		if (this.multiple) {
+			this.input.value = "";
+			return;
+		}
+		const selected = state.source.options.item(state.source.selectedIndex);
+		const label = selected ? this.optionLabel(selected) : "";
+		this.input.placeholder = label;
+		this.input.value = selected?.value ? label : "";
+	}
+	open() {
+		if (!this.listbox || !this.input) return;
+		if (!this.listbox.childElementCount) {
+			this.close();
+			return;
+		}
+		const wasOpen = this.isOpen();
+		this.setInputAttribute("aria-expanded", "true");
+		if (!wasOpen) {
+			const source = this.control ?? this.input;
+			this.listbox.showPopover({ source });
+		}
+		this.syncActiveDescendant();
+		if (wasOpen) this.scrollActiveOptionIntoView();
+		else requestAnimationFrame(() => this.scrollActiveOptionIntoView());
+	}
+	close() {
+		if (!this.listbox || !this.input) return;
+		if (this.isOpen()) this.listbox.hidePopover();
+		this.setInputAttribute("aria-expanded", "false");
+		this.activeIndex = -1;
+		this.syncActiveDescendant();
+	}
+	dismiss() {
+		this.close();
+		this.restoreCommittedText();
+	}
+	isOpen() {
+		return this.listbox?.matches(":popover-open") ?? false;
+	}
+	get activeOption() {
+		return this.listbox?.querySelector(`[role="option"][data-index="${this.activeIndex}"]`) ?? void 0;
+	}
+	syncActiveDescendant() {
+		if (!this.input) return;
+		const option = this.activeOption;
+		if (this.isOpen() && option) this.setInputAttribute("aria-activedescendant", option.id);
+		else this.setInputAttribute("aria-activedescendant", null);
+	}
+	scrollActiveOptionIntoView() {
+		const listbox = this.listbox;
+		const option = this.activeOption;
+		if (!listbox || !option || !this.isOpen() || !listbox.clientHeight) return;
+		const listboxRect = listbox.getBoundingClientRect();
+		const optionRect = option.getBoundingClientRect();
+		const visibleTop = listboxRect.top + listbox.clientTop;
+		const visibleBottom = visibleTop + listbox.clientHeight;
+		if (optionRect.top < visibleTop) listbox.scrollTop -= visibleTop - optionRect.top;
+		else if (optionRect.bottom > visibleBottom) listbox.scrollTop += optionRect.bottom - visibleBottom;
+	}
+	enabledTokenButtons() {
+		return this.tokens ? Array.from(this.tokens.querySelectorAll("[data-combobox-token-remove]:not(:disabled)")) : [];
+	}
+	optionForToken(token) {
+		const source = this.sourceState?.source;
+		return source instanceof HTMLSelectElement ? source.options.item(Number(token.dataset.optionIndex)) : null;
+	}
+	filteredOptions() {
+		const query = this.input?.value.trim().toLowerCase() ?? "";
+		return this.options().filter((option) => {
+			if (!query) return true;
+			return this.optionLabel(option).toLowerCase().includes(query) || option.value.toLowerCase().includes(query);
+		});
+	}
+	options() {
+		const state = this.sourceState;
+		if (!state) return [];
+		if (state.source instanceof HTMLSelectElement) return Array.from(state.source.options).filter((option) => (!this.multiple || option.value !== "" && !option.selected) && !!this.optionLabel(option).trim() && !option.hidden && !(option.parentElement instanceof HTMLOptGroupElement && option.parentElement.hidden));
+		const datalist = "datalist" in state ? state.datalist : null;
+		return datalist ? Array.from(datalist.options).filter((option) => !option.hidden) : [];
+	}
+	firstEnabledIndex(options) {
+		return options.findIndex((option) => !this.isOptionDisabled(option));
+	}
+	isOptionDisabled(option) {
+		return option.disabled || option.parentElement instanceof HTMLOptGroupElement && option.parentElement.disabled;
+	}
+	optionLabel(option) {
+		return this.sourceState?.source instanceof HTMLInputElement ? option.label || option.value || option.textContent || "" : option.label || option.textContent || option.value;
+	}
+	isSelected(option) {
+		const source = this.sourceState?.source;
+		return source instanceof HTMLInputElement ? source.value === option.value : option.selected;
+	}
+	observeDatalist() {
+		const state = this.sourceState;
+		const datalist = state && "datalist" in state ? state.datalist : null;
+		if (!datalist) return;
+		this.observer.observe(datalist, {
+			subtree: true,
+			childList: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: [
+				"disabled",
+				"hidden",
+				"label",
+				"value"
+			]
+		});
+	}
+	discoverSource() {
+		const candidates = Array.from(this.children).filter((child) => this.isSupportedSource(child));
+		return candidates.length === 1 ? candidates[0] : void 0;
+	}
+	isSupportedSource(element) {
+		if (element instanceof HTMLSelectElement) return true;
+		return element instanceof HTMLInputElement && [
+			"text",
+			"search",
+			"email",
+			"url",
+			"tel"
+		].includes(element.type) && !(element.type === "email" && element.multiple) && !!element.getAttribute("list");
+	}
+	get multiple() {
+		const source = this.sourceState?.source;
+		return source instanceof HTMLSelectElement && source.multiple;
+	}
+	get editable() {
+		const source = this.sourceState?.source;
+		return !!(source && !this.sourceHidden && !source.matches(":disabled") && !(source instanceof HTMLInputElement && source.readOnly));
+	}
+	get sourceHidden() {
+		const state = this.sourceState;
+		return !!(state && (state.source.hidden || "cssHidden" in state && state.cssHidden));
+	}
+	snapshotInputAttributes(input) {
+		return new Map([
+			"role",
+			"aria-autocomplete",
+			"aria-haspopup",
+			"aria-expanded",
+			"aria-controls",
+			"aria-activedescendant"
+		].map((name) => {
+			const value = input.getAttribute(name);
+			return [name, {
+				original: value,
+				managed: value
+			}];
+		}));
+	}
+	createInputState(source) {
+		const list = source.getAttribute("list");
+		const datalist = getLookupRoot(this).querySelector(`#${CSS.escape(list)}`);
+		return {
+			source,
+			list,
+			datalist: datalist instanceof HTMLDataListElement ? datalist : null,
+			inputAttributes: this.snapshotInputAttributes(source)
+		};
+	}
+};
+//#endregion
 //#region src/menu/menu.ts
-var I = class e extends HTMLElement {
+var MenuElement = class MenuElement extends HTMLElement {
 	static searchDelay = 800;
 	static observedAttributes = ["id", "popover"];
 	itemSync;
 	search = "";
 	searchTimeout;
 	connectedCallback() {
-		this.hasAttribute("role") || this.setAttribute("role", "menu"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("click", this.onClick), this.addEventListener("mouseenter", this.onMouseEnter, !0), this.itemSync ??= N(this, {
-			subtree: !0,
-			childList: !0,
-			attributes: !0,
+		if (!this.hasAttribute("role")) this.setAttribute("role", "menu");
+		if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+		this.addEventListener("keydown", this.onKeyDown);
+		this.addEventListener("click", this.onClick);
+		this.addEventListener("mouseenter", this.onMouseEnter, true);
+		this.itemSync ??= createQueuedElementSync(this, {
+			subtree: true,
+			childList: true,
+			attributes: true,
 			attributeFilter: ["role", "tabindex"]
-		}, () => this.syncItems()), this.itemSync.observe(), this.itemSync.queue(), this.syncDocumentListeners();
+		}, () => this.syncItems());
+		this.itemSync.observe();
+		this.itemSync.queue();
+		this.syncDocumentListeners();
 	}
 	disconnectedCallback() {
-		this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("click", this.onClick), this.removeEventListener("mouseenter", this.onMouseEnter, !0), this.removeDocumentListeners(), this.itemSync?.disconnect(), this.closeSelfAndDescendants(), clearTimeout(this.searchTimeout);
+		this.removeEventListener("keydown", this.onKeyDown);
+		this.removeEventListener("click", this.onClick);
+		this.removeEventListener("mouseenter", this.onMouseEnter, true);
+		this.removeDocumentListeners();
+		this.itemSync?.disconnect();
+		this.closeSelfAndDescendants();
+		clearTimeout(this.searchTimeout);
 	}
-	attributeChangedCallback(e, t, n) {
-		t !== n && (e !== "id" && e !== "popover" || this.syncDocumentListeners());
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		if (name !== "id" && name !== "popover") return;
+		this.syncDocumentListeners();
 	}
 	get horizontal() {
 		return this.getAttribute("aria-orientation") === "horizontal";
 	}
 	syncDocumentListeners() {
 		if (this.isConnected && this.hasAttribute("popover") && !this.getParentMenuTrigger()) {
-			this.ownerDocument.addEventListener("click", this.onDocumentClick), this.ownerDocument.addEventListener("keydown", this.onDocumentKeyDown);
+			this.ownerDocument.addEventListener("click", this.onDocumentClick);
+			this.ownerDocument.addEventListener("keydown", this.onDocumentKeyDown);
 			return;
 		}
 		this.removeDocumentListeners();
 	}
 	removeDocumentListeners() {
-		this.ownerDocument.removeEventListener("click", this.onDocumentClick), this.ownerDocument.removeEventListener("keydown", this.onDocumentKeyDown);
+		this.ownerDocument.removeEventListener("click", this.onDocumentClick);
+		this.ownerDocument.removeEventListener("keydown", this.onDocumentKeyDown);
 	}
 	onDocumentClick = (e) => {
-		this.getRootTriggerForEvent(e) && requestAnimationFrame(() => {
-			this.isActive() && (e.detail === 0 ? this.getEnabledItems()[0]?.focus() : this.focus({ preventScroll: !0 }));
+		if (!this.getRootTriggerForEvent(e)) return;
+		requestAnimationFrame(() => {
+			if (!this.isActive()) return;
+			if (e.detail === 0) this.getEnabledItems()[0]?.focus();
+			else this.focus({ preventScroll: true });
 		});
 	};
 	onDocumentKeyDown = (e) => {
-		let t = this.getRootTriggerForEvent(e);
-		if (!t || e.key !== "ArrowDown" && e.key !== "ArrowUp" || this.hidden) return;
-		e.preventDefault(), this.isActive() || this.showPopoverWithSource(t);
-		let n = this.getEnabledItems();
-		e.key === "ArrowDown" ? n[0]?.focus() : n[n.length - 1]?.focus();
+		const trigger = this.getRootTriggerForEvent(e);
+		if (!trigger) return;
+		if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+		if (this.hidden) return;
+		e.preventDefault();
+		if (!this.isActive()) this.showPopoverWithSource(trigger);
+		const items = this.getEnabledItems();
+		if (e.key === "ArrowDown") items[0]?.focus();
+		else items[items.length - 1]?.focus();
 	};
 	onKeyDown = (e) => {
 		if (!this.isActive()) return;
 		if (e.key === "Tab") {
-			this.closeMenuTree(), this.focusRootMenuTrigger();
+			this.closeMenuTree();
+			this.focusRootMenuTrigger();
 			return;
 		}
 		if (e.key === "Escape") {
-			e.preventDefault(), this.closeMenuTree(), this.focusRootMenuTrigger();
+			e.preventDefault();
+			this.closeMenuTree();
+			this.focusRootMenuTrigger();
 			return;
 		}
-		let t = this.getEnabledItems(), n = this.getActiveItem(t), r = n ? t.indexOf(n) : -1;
-		if (r === -1) {
+		const items = this.getEnabledItems();
+		const activeItem = this.getActiveItem(items);
+		const activeIndex = activeItem ? items.indexOf(activeItem) : -1;
+		if (activeIndex === -1) {
 			if (!this.horizontal && e.key === "ArrowDown" || this.horizontal && e.key === "ArrowRight") {
-				t[0]?.focus(), e.preventDefault();
+				items[0]?.focus();
+				e.preventDefault();
 				return;
 			}
 			if (!this.horizontal && e.key === "ArrowUp" || this.horizontal && e.key === "ArrowLeft") {
-				t[t.length - 1]?.focus(), e.preventDefault();
+				items[items.length - 1]?.focus();
+				e.preventDefault();
 				return;
 			}
 		}
-		let i = n ? this.getSubmenu(n) : null;
-		if (n && i) {
+		const activeSubmenu = activeItem ? this.getSubmenu(activeItem) : null;
+		if (activeItem && activeSubmenu) {
 			if (!this.horizontal && e.key === "ArrowRight" || this.horizontal && e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-				this.openSubmenu(n), i.getItems()[0]?.focus();
+				this.openSubmenu(activeItem);
+				activeSubmenu.getItems()[0]?.focus();
 				return;
 			}
 			if (this.horizontal && e.key === "ArrowUp") {
-				this.openSubmenu(n), i.getItems().at(-1)?.focus();
+				this.openSubmenu(activeItem);
+				activeSubmenu.getItems().at(-1)?.focus();
 				return;
 			}
 		}
-		let a = this.getParentMenuTrigger(), o = a?.closest("ui-menu");
-		if (o && e.key === (o.horizontal ? "ArrowUp" : "ArrowLeft")) {
-			this.closeSelfAndDescendants(), a?.focus({ preventScroll: !0 });
+		const parentMenuTrigger = this.getParentMenuTrigger();
+		const parentMenu = parentMenuTrigger?.closest("ui-menu");
+		if (parentMenu && e.key === (parentMenu.horizontal ? "ArrowUp" : "ArrowLeft")) {
+			this.closeSelfAndDescendants();
+			parentMenuTrigger?.focus({ preventScroll: true });
 			return;
 		}
-		let s = F(e.key, {
-			currentIndex: r,
-			length: t.length,
+		const nextIndex = getRovingIndexForKey(e.key, {
+			currentIndex: activeIndex,
+			length: items.length,
 			vertical: !this.horizontal
 		});
-		if (s !== void 0) {
-			t[s]?.focus(), e.preventDefault();
+		if (nextIndex !== void 0) {
+			items[nextIndex]?.focus();
+			e.preventDefault();
 			return;
 		}
-		this.handleTypeahead(e, t, n);
+		this.handleTypeahead(e, items, activeItem);
 	};
 	onClick = (e) => {
-		let t = this.getItemForEvent(e);
-		if (!t) return;
-		let n = this.getSubmenu(t);
-		if (n) {
-			e.preventDefault(), n.isActive() || (this.openSubmenu(t), n.getItems()[0]?.focus());
+		const item = this.getItemForEvent(e);
+		if (!item) return;
+		const submenu = this.getSubmenu(item);
+		if (submenu) {
+			e.preventDefault();
+			if (!submenu.isActive()) {
+				this.openSubmenu(item);
+				submenu.getItems()[0]?.focus();
+			}
 			return;
 		}
 		this.closeMenuTree();
 	};
 	onMouseEnter = (e) => {
 		if (!this.isActive()) return;
-		let t = this.getItemForEvent(e);
-		if (t) {
-			if (t.focus(), this.getSubmenu(t)) {
-				this.openSubmenu(t);
-				return;
-			}
-			this.closeSubmenus();
+		const item = this.getItemForEvent(e);
+		if (!item) return;
+		item.focus();
+		if (this.getSubmenu(item)) {
+			this.openSubmenu(item);
+			return;
 		}
+		this.closeSubmenus();
 	};
 	isActive() {
-		return this.hidden ? !1 : !this.hasAttribute("popover") || this.matches(":popover-open");
+		if (this.hidden) return false;
+		return !this.hasAttribute("popover") || this.matches(":popover-open");
 	}
 	syncItems() {
-		this.getItems().forEach((e) => {
-			e.getAttribute("tabindex") !== "-1" && e.setAttribute("tabindex", "-1");
+		this.getItems().forEach((item) => {
+			if (item.getAttribute("tabindex") !== "-1") item.setAttribute("tabindex", "-1");
 		});
 	}
 	getItems() {
-		return Array.from(this.querySelectorAll("[role^=menuitem]")).filter((e) => this.belongsToThisMenu(e));
+		return Array.from(this.querySelectorAll("[role^=menuitem]")).filter((item) => this.belongsToThisMenu(item));
 	}
 	getEnabledItems() {
-		return this.getItems().filter((e) => this.isItemEnabled(e));
+		return this.getItems().filter((item) => this.isItemEnabled(item));
 	}
-	isItemEnabled(e) {
-		return !e.hidden && !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true";
+	isItemEnabled(item) {
+		return !item.hidden && !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true";
 	}
-	belongsToThisMenu(e) {
-		return e.closest("ui-menu") === this;
+	belongsToThisMenu(item) {
+		return item.closest("ui-menu") === this;
 	}
-	getActiveItem(e) {
-		let t = P(this).activeElement;
-		return e.find((e) => e === t);
+	getActiveItem(items) {
+		const activeElement = getLookupRoot(this).activeElement;
+		return items.find((item) => item === activeElement);
 	}
-	getItemForEvent(e) {
-		let t = e.target;
-		if (!(t instanceof Element)) return null;
-		let n = t.closest("[role^=menuitem]");
-		return n && this.belongsToThisMenu(n) && this.isItemEnabled(n) ? n : null;
+	getItemForEvent(event) {
+		const target = event.target;
+		if (!(target instanceof Element)) return null;
+		const item = target.closest("[role^=menuitem]");
+		return item && this.belongsToThisMenu(item) && this.isItemEnabled(item) ? item : null;
 	}
-	getRootTriggerForEvent(e) {
-		for (let t of e.composedPath()) if (t instanceof HTMLElement && !t.closest("ui-menu") && t.getAttribute("popovertarget") === this.id) return t;
+	getRootTriggerForEvent(event) {
+		for (const candidate of event.composedPath()) if (candidate instanceof HTMLElement && !candidate.closest("ui-menu") && candidate.getAttribute("popovertarget") === this.id) return candidate;
 		return null;
 	}
 	getTriggers() {
-		return this.id ? Array.from(P(this).querySelectorAll(`[popovertarget="${CSS.escape(this.id)}"]`)) : [];
+		if (!this.id) return [];
+		return Array.from(getLookupRoot(this).querySelectorAll(`[popovertarget="${CSS.escape(this.id)}"]`));
 	}
 	getParentMenuTrigger() {
-		return this.getTriggers().find((e) => e.closest("ui-menu")) || null;
+		return this.getTriggers().find((trigger) => trigger.closest("ui-menu")) || null;
 	}
 	getParentMenu() {
 		return this.getParentMenuTrigger()?.closest("ui-menu") || null;
 	}
-	getSubmenu(e) {
-		let t = e.getAttribute("popovertarget");
-		return t ? P(this).querySelector(`ui-menu#${CSS.escape(t)}`) : null;
+	getSubmenu(item) {
+		const id = item.getAttribute("popovertarget");
+		if (!id) return null;
+		return getLookupRoot(this).querySelector(`ui-menu#${CSS.escape(id)}`);
 	}
-	openSubmenu(e) {
-		let t = this.getSubmenu(e);
-		t && (this.closeSubmenus(), t.showPopoverWithSource(e));
+	openSubmenu(item) {
+		const submenu = this.getSubmenu(item);
+		if (!submenu) return;
+		this.closeSubmenus();
+		submenu.showPopoverWithSource(item);
 	}
 	closeSubmenus() {
-		this.getItems().forEach((e) => this.getSubmenu(e)?.closeSelfAndDescendants());
+		this.getItems().forEach((item) => this.getSubmenu(item)?.closeSelfAndDescendants());
 	}
 	closeSelfAndDescendants() {
-		this.closeSubmenus(), this.hasAttribute("popover") && this.matches(":popover-open") && this.hidePopover();
+		this.closeSubmenus();
+		if (this.hasAttribute("popover") && this.matches(":popover-open")) this.hidePopover();
 	}
 	closeMenuTree() {
-		this.closeSelfAndDescendants(), this.getParentMenu()?.closeMenuTree();
+		this.closeSelfAndDescendants();
+		this.getParentMenu()?.closeMenuTree();
 	}
 	focusRootMenuTrigger() {
-		this.getRootMenuTrigger()?.focus({ preventScroll: !0 });
+		this.getRootMenuTrigger()?.focus({ preventScroll: true });
 	}
 	getRootMenuTrigger() {
-		let e = this.getParentMenu();
-		return e ? e.getRootMenuTrigger() : this.getTriggers()[0] || null;
+		const parentMenu = this.getParentMenu();
+		return parentMenu ? parentMenu.getRootMenuTrigger() : this.getTriggers()[0] || null;
 	}
-	handleTypeahead(e, t, n) {
-		if (e.key === " " || e.key.length > 1 || e.ctrlKey || e.metaKey || e.altKey || !t.length) return;
+	handleTypeahead(e, items, activeItem) {
+		if (e.key === " ") return;
+		if (e.key.length > 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+		if (!items.length) return;
 		e.preventDefault();
-		let r = this.updateTypeaheadSearch(e.key), i = n ? t.indexOf(n) : -1;
-		this.findTypeaheadMatch(t, r, i)?.focus();
-	}
-	updateTypeaheadSearch(t) {
-		return this.search += t.toLowerCase(), clearTimeout(this.searchTimeout), this.searchTimeout = window.setTimeout(() => {
+		const search = this.updateTypeaheadSearch(e.key);
+		const startIndex = activeItem ? items.indexOf(activeItem) : -1;
+		this.findTypeaheadMatch(items, search, startIndex)?.focus();
+	}
+	updateTypeaheadSearch(key) {
+		this.search += key.toLowerCase();
+		clearTimeout(this.searchTimeout);
+		this.searchTimeout = window.setTimeout(() => {
 			this.search = "";
-		}, e.searchDelay), this.search.length > 1 && this.search.split("").every((e) => e === this.search[0]) ? this.search[0] : this.search;
-	}
-	findTypeaheadMatch(e, t, n) {
-		for (let r = 1; r <= e.length; r += 1) {
-			let i = e[(n + r + e.length) % e.length];
-			if (this.getItemLabel(i).startsWith(t)) return i;
+		}, MenuElement.searchDelay);
+		if (this.search.length > 1 && this.search.split("").every((character) => character === this.search[0])) return this.search[0];
+		return this.search;
+	}
+	findTypeaheadMatch(items, search, startIndex) {
+		for (let offset = 1; offset <= items.length; offset += 1) {
+			const item = items[(startIndex + offset + items.length) % items.length];
+			if (this.getItemLabel(item).startsWith(search)) return item;
 		}
 	}
-	getItemLabel(e) {
-		return (e.getAttribute("aria-label") || e.textContent || "").trim().toLowerCase();
+	getItemLabel(item) {
+		return (item.getAttribute("aria-label") || item.textContent || "").trim().toLowerCase();
 	}
-	showPopoverWithSource(e) {
-		this.showPopover?.({ source: e });
+	showPopoverWithSource(source) {
+		this.showPopover?.({ source });
 	}
-}, L = /* @__PURE__ */ [
+};
+/*!
+* tabbable 6.4.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+var candidateSelector = /* #__PURE__ */ [
 	"input:not([inert]):not([inert] *)",
 	"select:not([inert]):not([inert] *)",
 	"textarea:not([inert]):not([inert] *)",
@@ -573,305 +1327,514 @@ var I = class e extends HTMLElement {
 	"[contenteditable]:not([contenteditable=\"false\"]):not([inert]):not([inert] *)",
 	"details>summary:first-of-type:not([inert]):not([inert] *)",
 	"details:not([inert]):not([inert] *)"
-].join(","), R = typeof Element > "u", z = R ? function() {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector, B = !R && Element.prototype.getRootNode ? function(e) {
-	return e?.getRootNode?.call(e);
-} : function(e) {
-	return e?.ownerDocument;
-}, V = function(e, t) {
-	t === void 0 && (t = !0);
-	var n = e?.getAttribute?.call(e, "inert");
-	return n === "" || n === "true" || t && e && (typeof e.closest == "function" ? e.closest("[inert]") : V(e.parentNode));
-}, H = function(e) {
-	var t = e?.getAttribute?.call(e, "contenteditable");
-	return t === "" || t === "true";
-}, U = function(e, t, n) {
-	if (V(e)) return [];
-	var r = Array.prototype.slice.apply(e.querySelectorAll(L));
-	return t && z.call(e, L) && r.unshift(e), r = r.filter(n), r;
-}, W = function(e, t, n) {
-	for (var r = [], i = Array.from(e); i.length;) {
-		var a = i.shift();
-		if (!V(a, !1)) if (a.tagName === "SLOT") {
-			var o = a.assignedElements(), s = W(o.length ? o : a.children, !0, n);
-			n.flatten ? r.push.apply(r, s) : r.push({
-				scopeParent: a,
-				candidates: s
+].join(",");
+var NoElement = typeof Element === "undefined";
+var matches = NoElement ? function() {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+var getRootNode = !NoElement && Element.prototype.getRootNode ? function(element) {
+	var _element$getRootNode;
+	return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
+} : function(element) {
+	return element === null || element === void 0 ? void 0 : element.ownerDocument;
+};
+/**
+* Determines if a node is inert or in an inert ancestor.
+* @param {Node} [node]
+* @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
+*  see if any of them are inert. If false, only `node` itself is considered.
+* @returns {boolean} True if inert itself or by way of being in an inert ancestor.
+*  False if `node` is falsy.
+*/
+var _isInert = function isInert(node, lookUp) {
+	var _node$getAttribute;
+	if (lookUp === void 0) lookUp = true;
+	var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, "inert");
+	return inertAtt === "" || inertAtt === "true" || lookUp && node && (typeof node.closest === "function" ? node.closest("[inert]") : _isInert(node.parentNode));
+};
+/**
+* Determines if a node's content is editable.
+* @param {Element} [node]
+* @returns True if it's content-editable; false if it's not or `node` is falsy.
+*/
+var isContentEditable = function isContentEditable(node) {
+	var _node$getAttribute2;
+	var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, "contenteditable");
+	return attValue === "" || attValue === "true";
+};
+/**
+* @param {Element} el container to check in
+* @param {boolean} includeContainer add container to check
+* @param {(node: Element) => boolean} filter filter candidates
+* @returns {Element[]}
+*/
+var getCandidates = function getCandidates(el, includeContainer, filter) {
+	if (_isInert(el)) return [];
+	var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
+	if (includeContainer && matches.call(el, candidateSelector)) candidates.unshift(el);
+	candidates = candidates.filter(filter);
+	return candidates;
+};
+/**
+* @callback GetShadowRoot
+* @param {Element} element to check for shadow root
+* @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
+*/
+/**
+* @callback ShadowRootFilter
+* @param {Element} shadowHostNode the element which contains shadow content
+* @returns {boolean} true if a shadow root could potentially contain valid candidates.
+*/
+/**
+* @typedef {Object} CandidateScope
+* @property {Element} scopeParent contains inner candidates
+* @property {Element[]} candidates list of candidates found in the scope parent
+*/
+/**
+* @typedef {Object} IterativeOptions
+* @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;
+*  if a function, implies shadow support is enabled and either returns the shadow root of an element
+*  or a boolean stating if it has an undisclosed shadow root
+* @property {(node: Element) => boolean} filter filter candidates
+* @property {boolean} flatten if true then result will flatten any CandidateScope into the returned list
+* @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
+*/
+/**
+* @param {Element[]} elements list of element containers to match candidates from
+* @param {boolean} includeContainer add container list to check
+* @param {IterativeOptions} options
+* @returns {Array.<Element|CandidateScope>}
+*/
+var _getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
+	var candidates = [];
+	var elementsToCheck = Array.from(elements);
+	while (elementsToCheck.length) {
+		var element = elementsToCheck.shift();
+		if (_isInert(element, false)) continue;
+		if (element.tagName === "SLOT") {
+			var assigned = element.assignedElements();
+			var nestedCandidates = _getCandidatesIteratively(assigned.length ? assigned : element.children, true, options);
+			if (options.flatten) candidates.push.apply(candidates, nestedCandidates);
+			else candidates.push({
+				scopeParent: element,
+				candidates: nestedCandidates
 			});
 		} else {
-			z.call(a, L) && n.filter(a) && (t || !e.includes(a)) && r.push(a);
-			var c = a.shadowRoot || typeof n.getShadowRoot == "function" && n.getShadowRoot(a), l = !V(c, !1) && (!n.shadowRootFilter || n.shadowRootFilter(a));
-			if (c && l) {
-				var u = W(c === !0 ? a.children : c.children, !0, n);
-				n.flatten ? r.push.apply(r, u) : r.push({
-					scopeParent: a,
-					candidates: u
+			if (matches.call(element, candidateSelector) && options.filter(element) && (includeContainer || !elements.includes(element))) candidates.push(element);
+			var shadowRoot = element.shadowRoot || typeof options.getShadowRoot === "function" && options.getShadowRoot(element);
+			var validShadowRoot = !_isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
+			if (shadowRoot && validShadowRoot) {
+				var _nestedCandidates = _getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
+				if (options.flatten) candidates.push.apply(candidates, _nestedCandidates);
+				else candidates.push({
+					scopeParent: element,
+					candidates: _nestedCandidates
 				});
-			} else i.unshift.apply(i, a.children);
+			} else elementsToCheck.unshift.apply(elementsToCheck, element.children);
 		}
 	}
-	return r;
-}, G = function(e) {
-	return !isNaN(parseInt(e.getAttribute("tabindex"), 10));
-}, K = function(e) {
-	if (!e) throw Error("No node provided");
-	return e.tabIndex < 0 && (/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName) || H(e)) && !G(e) ? 0 : e.tabIndex;
-}, q = function(e, t) {
-	var n = K(e);
-	return n < 0 && t && !G(e) ? 0 : n;
-}, J = function(e, t) {
-	return e.tabIndex === t.tabIndex ? e.documentOrder - t.documentOrder : e.tabIndex - t.tabIndex;
-}, Y = function(e) {
-	return e.tagName === "INPUT";
-}, ie = function(e) {
-	return Y(e) && e.type === "hidden";
-}, ae = function(e) {
-	return e.tagName === "DETAILS" && Array.prototype.slice.apply(e.children).some(function(e) {
-		return e.tagName === "SUMMARY";
+	return candidates;
+};
+/**
+* @private
+* Determines if the node has an explicitly specified `tabindex` attribute.
+* @param {HTMLElement} node
+* @returns {boolean} True if so; false if not.
+*/
+var hasTabIndex = function hasTabIndex(node) {
+	return !isNaN(parseInt(node.getAttribute("tabindex"), 10));
+};
+/**
+* Determine the tab index of a given node.
+* @param {HTMLElement} node
+* @returns {number} Tab order (negative, 0, or positive number).
+* @throws {Error} If `node` is falsy.
+*/
+var getTabIndex = function getTabIndex(node) {
+	if (!node) throw new Error("No node provided");
+	if (node.tabIndex < 0) {
+		if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) return 0;
+	}
+	return node.tabIndex;
+};
+/**
+* Determine the tab index of a given node __for sort order purposes__.
+* @param {HTMLElement} node
+* @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,
+*  has tabIndex -1, but needs to be sorted by document order in order for its content to be
+*  inserted into the correct sort position.
+* @returns {number} Tab order (negative, 0, or positive number).
+*/
+var getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {
+	var tabIndex = getTabIndex(node);
+	if (tabIndex < 0 && isScope && !hasTabIndex(node)) return 0;
+	return tabIndex;
+};
+var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
+	return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
+};
+var isInput = function isInput(node) {
+	return node.tagName === "INPUT";
+};
+var isHiddenInput = function isHiddenInput(node) {
+	return isInput(node) && node.type === "hidden";
+};
+var isDetailsWithSummary = function isDetailsWithSummary(node) {
+	return node.tagName === "DETAILS" && Array.prototype.slice.apply(node.children).some(function(child) {
+		return child.tagName === "SUMMARY";
 	});
-}, oe = function(e, t) {
-	for (var n = 0; n < e.length; n++) if (e[n].checked && e[n].form === t) return e[n];
-}, se = function(e) {
-	if (!e.name) return !0;
-	var t = e.form || B(e), n = function(e) {
-		return t.querySelectorAll("input[type=\"radio\"][name=\"" + e + "\"]");
-	}, r;
-	if (typeof window < "u" && window.CSS !== void 0 && typeof window.CSS.escape == "function") r = n(window.CSS.escape(e.name));
+};
+var getCheckedRadio = function getCheckedRadio(nodes, form) {
+	for (var i = 0; i < nodes.length; i++) if (nodes[i].checked && nodes[i].form === form) return nodes[i];
+};
+var isTabbableRadio = function isTabbableRadio(node) {
+	if (!node.name) return true;
+	var radioScope = node.form || getRootNode(node);
+	var queryRadios = function queryRadios(name) {
+		return radioScope.querySelectorAll("input[type=\"radio\"][name=\"" + name + "\"]");
+	};
+	var radioSet;
+	if (typeof window !== "undefined" && typeof window.CSS !== "undefined" && typeof window.CSS.escape === "function") radioSet = queryRadios(window.CSS.escape(node.name));
 	else try {
-		r = n(e.name);
-	} catch (e) {
-		return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", e.message), !1;
-	}
-	var i = oe(r, e.form);
-	return !i || i === e;
-}, ce = function(e) {
-	return Y(e) && e.type === "radio";
-}, le = function(e) {
-	return ce(e) && !se(e);
-}, ue = function(e) {
-	var t = e && B(e), n = t?.host, r = !1;
-	if (t && t !== e) {
-		var i, a, o;
-		for (r = !!((i = n) != null && (a = i.ownerDocument) != null && a.contains(n) || e != null && (o = e.ownerDocument) != null && o.contains(e)); !r && n;) {
-			var s, c;
-			t = B(n), n = t?.host, r = !!((s = n) != null && (c = s.ownerDocument) != null && c.contains(n));
+		radioSet = queryRadios(node.name);
+	} catch (err) {
+		console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", err.message);
+		return false;
+	}
+	var checked = getCheckedRadio(radioSet, node.form);
+	return !checked || checked === node;
+};
+var isRadio = function isRadio(node) {
+	return isInput(node) && node.type === "radio";
+};
+var isNonTabbableRadio = function isNonTabbableRadio(node) {
+	return isRadio(node) && !isTabbableRadio(node);
+};
+var isNodeAttached = function isNodeAttached(node) {
+	var _nodeRoot;
+	var nodeRoot = node && getRootNode(node);
+	var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
+	var attached = false;
+	if (nodeRoot && nodeRoot !== node) {
+		var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
+		attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
+		while (!attached && nodeRootHost) {
+			var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
+			nodeRoot = getRootNode(nodeRootHost);
+			nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
+			attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
 		}
 	}
-	return r;
-}, X = function(e) {
-	var t = e.getBoundingClientRect(), n = t.width, r = t.height;
-	return n === 0 && r === 0;
-}, de = function(e, t) {
-	var n = t.displayCheck, r = t.getShadowRoot;
-	if (n === "full-native" && "checkVisibility" in e) return !e.checkVisibility({
-		checkOpacity: !1,
-		opacityProperty: !1,
-		contentVisibilityAuto: !0,
-		visibilityProperty: !0,
-		checkVisibilityCSS: !0
-	});
-	if (getComputedStyle(e).visibility === "hidden") return !0;
-	var i = z.call(e, "details>summary:first-of-type") ? e.parentElement : e;
-	if (z.call(i, "details:not([open]) *")) return !0;
-	if (!n || n === "full" || n === "full-native" || n === "legacy-full") {
-		if (typeof r == "function") {
-			for (var a = e; e;) {
-				var o = e.parentElement, s = B(e);
-				if (o && !o.shadowRoot && r(o) === !0) return X(e);
-				e = e.assignedSlot ? e.assignedSlot : !o && s !== e.ownerDocument ? s.host : o;
+	return attached;
+};
+var isZeroArea = function isZeroArea(node) {
+	var _node$getBoundingClie = node.getBoundingClientRect(), width = _node$getBoundingClie.width, height = _node$getBoundingClie.height;
+	return width === 0 && height === 0;
+};
+var isHidden = function isHidden(node, _ref) {
+	var displayCheck = _ref.displayCheck, getShadowRoot = _ref.getShadowRoot;
+	if (displayCheck === "full-native") {
+		if ("checkVisibility" in node) return !node.checkVisibility({
+			checkOpacity: false,
+			opacityProperty: false,
+			contentVisibilityAuto: true,
+			visibilityProperty: true,
+			checkVisibilityCSS: true
+		});
+	}
+	if (getComputedStyle(node).visibility === "hidden") return true;
+	var nodeUnderDetails = matches.call(node, "details>summary:first-of-type") ? node.parentElement : node;
+	if (matches.call(nodeUnderDetails, "details:not([open]) *")) return true;
+	if (!displayCheck || displayCheck === "full" || displayCheck === "full-native" || displayCheck === "legacy-full") {
+		if (typeof getShadowRoot === "function") {
+			var originalNode = node;
+			while (node) {
+				var parentElement = node.parentElement;
+				var rootNode = getRootNode(node);
+				if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true) return isZeroArea(node);
+				else if (node.assignedSlot) node = node.assignedSlot;
+				else if (!parentElement && rootNode !== node.ownerDocument) node = rootNode.host;
+				else node = parentElement;
 			}
-			e = a;
-		}
-		if (ue(e)) return !e.getClientRects().length;
-		if (n !== "legacy-full") return !0;
-	} else if (n === "non-zero-area") return X(e);
-	return !1;
-}, fe = function(e) {
-	if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName)) for (var t = e.parentElement; t;) {
-		if (t.tagName === "FIELDSET" && t.disabled) {
-			for (var n = 0; n < t.children.length; n++) {
-				var r = t.children.item(n);
-				if (r.tagName === "LEGEND") return z.call(t, "fieldset[disabled] *") ? !0 : !r.contains(e);
+			node = originalNode;
+		}
+		if (isNodeAttached(node)) return !node.getClientRects().length;
+		if (displayCheck !== "legacy-full") return true;
+	} else if (displayCheck === "non-zero-area") return isZeroArea(node);
+	return false;
+};
+var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
+	if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
+		var parentNode = node.parentElement;
+		while (parentNode) {
+			if (parentNode.tagName === "FIELDSET" && parentNode.disabled) {
+				for (var i = 0; i < parentNode.children.length; i++) {
+					var child = parentNode.children.item(i);
+					if (child.tagName === "LEGEND") return matches.call(parentNode, "fieldset[disabled] *") ? true : !child.contains(node);
+				}
+				return true;
 			}
-			return !0;
-		}
-		t = t.parentElement;
-	}
-	return !1;
-}, Z = function(e, t) {
-	return !(t.disabled || ie(t) || de(t, e) || ae(t) || fe(t));
-}, Q = function(e, t) {
-	return !(le(t) || K(t) < 0 || !Z(e, t));
-}, pe = function(e) {
-	var t = parseInt(e.getAttribute("tabindex"), 10);
-	return !!(isNaN(t) || t >= 0);
-}, $ = function(e) {
-	var t = [], n = [];
-	return e.forEach(function(e, r) {
-		var i = !!e.scopeParent, a = i ? e.scopeParent : e, o = q(a, i), s = i ? $(e.candidates) : a;
-		o === 0 ? i ? t.push.apply(t, s) : t.push(a) : n.push({
-			documentOrder: r,
-			tabIndex: o,
-			item: e,
-			isScope: i,
-			content: s
+			parentNode = parentNode.parentElement;
+		}
+	}
+	return false;
+};
+var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
+	if (node.disabled || isHiddenInput(node) || isHidden(node, options) || isDetailsWithSummary(node) || isDisabledFromFieldset(node)) return false;
+	return true;
+};
+var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
+	if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) return false;
+	return true;
+};
+var isShadowRootTabbable = function isShadowRootTabbable(shadowHostNode) {
+	var tabIndex = parseInt(shadowHostNode.getAttribute("tabindex"), 10);
+	if (isNaN(tabIndex) || tabIndex >= 0) return true;
+	return false;
+};
+/**
+* @param {Array.<Element|CandidateScope>} candidates
+* @returns Element[]
+*/
+var _sortByOrder = function sortByOrder(candidates) {
+	var regularTabbables = [];
+	var orderedTabbables = [];
+	candidates.forEach(function(item, i) {
+		var isScope = !!item.scopeParent;
+		var element = isScope ? item.scopeParent : item;
+		var candidateTabindex = getSortOrderTabIndex(element, isScope);
+		var elements = isScope ? _sortByOrder(item.candidates) : element;
+		if (candidateTabindex === 0) isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
+		else orderedTabbables.push({
+			documentOrder: i,
+			tabIndex: candidateTabindex,
+			item,
+			isScope,
+			content: elements
 		});
-	}), n.sort(J).reduce(function(e, t) {
-		return t.isScope ? e.push.apply(e, t.content) : e.push(t.content), e;
-	}, []).concat(t);
-}, me = function(e, t) {
-	return t ||= {}, $(t.getShadowRoot ? W([e], t.includeContainer, {
-		filter: Q.bind(null, t),
-		flatten: !1,
-		getShadowRoot: t.getShadowRoot,
-		shadowRootFilter: pe
-	}) : U(e, t.includeContainer, Q.bind(null, t)));
-}, he = function(e, t) {
-	return t ||= {}, t.getShadowRoot ? W([e], t.includeContainer, {
-		filter: Z.bind(null, t),
-		flatten: !0,
-		getShadowRoot: t.getShadowRoot
-	}) : U(e, t.includeContainer, Z.bind(null, t));
-}, ge = 0, _e = class extends HTMLElement {
-	idPrefix = "tabs" + ++ge;
+	});
+	return orderedTabbables.sort(sortOrderedTabbables).reduce(function(acc, sortable) {
+		sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
+		return acc;
+	}, []).concat(regularTabbables);
+};
+var tabbable = function tabbable(container, options) {
+	options = options || {};
+	var candidates;
+	if (options.getShadowRoot) candidates = _getCandidatesIteratively([container], options.includeContainer, {
+		filter: isNodeMatchingSelectorTabbable.bind(null, options),
+		flatten: false,
+		getShadowRoot: options.getShadowRoot,
+		shadowRootFilter: isShadowRootTabbable
+	});
+	else candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+	return _sortByOrder(candidates);
+};
+var focusable = function focusable(container, options) {
+	options = options || {};
+	var candidates;
+	if (options.getShadowRoot) candidates = _getCandidatesIteratively([container], options.includeContainer, {
+		filter: isNodeMatchingSelectorFocusable.bind(null, options),
+		flatten: true,
+		getShadowRoot: options.getShadowRoot
+	});
+	else candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
+	return candidates;
+};
+//#endregion
+//#region src/tabs/tabs.ts
+let idCounter = 0;
+var TabsElement = class extends HTMLElement {
+	idPrefix = "tabs" + ++idCounter;
 	structureSync;
 	managedPanelTabindex = /* @__PURE__ */ new WeakSet();
 	connectedCallback() {
-		this.addEventListener("keydown", this.onKeyDown), this.addEventListener("click", this.onClick), this.structureSync ||= N(this, {
-			subtree: !0,
-			childList: !0,
-			attributes: !0,
+		this.addEventListener("keydown", this.onKeyDown);
+		this.addEventListener("click", this.onClick);
+		if (!this.structureSync) this.structureSync = createQueuedElementSync(this, {
+			subtree: true,
+			childList: true,
+			attributes: true,
 			attributeFilter: ["role", "aria-selected"]
-		}, () => this.syncStructure()), this.structureSync.observe(), this.structureSync.queue();
+		}, () => this.syncStructure());
+		this.structureSync.observe();
+		this.structureSync.queue();
 	}
 	disconnectedCallback() {
-		this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("click", this.onClick), this.structureSync?.disconnect();
+		this.removeEventListener("keydown", this.onKeyDown);
+		this.removeEventListener("click", this.onClick);
+		this.structureSync?.disconnect();
 	}
-	selectTab(e, t = {}) {
-		return this.applySelection(this.tabPairs(), e, t);
+	selectTab(index, options = {}) {
+		return this.applySelection(this.tabPairs(), index, options);
 	}
 	onKeyDown = (e) => {
-		let t = this.tabPairs();
-		if (!t.length) return;
-		let n = F(e.key, {
-			currentIndex: this.getEventTabIndex(e.target, t),
-			length: t.length,
+		const pairs = this.tabPairs();
+		if (!pairs.length) return;
+		const nextIndex = getRovingIndexForKey(e.key, {
+			currentIndex: this.getEventTabIndex(e.target, pairs),
+			length: pairs.length,
 			vertical: this.vertical
 		});
-		n !== void 0 && (this.applySelection(t, n, { focus: !0 }), e.stopPropagation(), e.preventDefault());
+		if (nextIndex !== void 0) {
+			this.applySelection(pairs, nextIndex, { focus: true });
+			e.stopPropagation();
+			e.preventDefault();
+		}
 	};
 	onClick = (e) => {
-		let t = this.tabPairs();
-		this.applySelection(t, this.getEventTabIndex(e.target, t), { focus: !0 });
+		const pairs = this.tabPairs();
+		this.applySelection(pairs, this.getEventTabIndex(e.target, pairs), { focus: true });
 	};
 	syncStructure() {
-		let e = this.tabPairs();
-		e.length && this.applySelection(e, this.getSelectedIndex(e, 0), { emit: !1 });
+		const pairs = this.tabPairs();
+		if (!pairs.length) return;
+		this.applySelection(pairs, this.getSelectedIndex(pairs, 0), { emit: false });
 	}
 	get vertical() {
 		return this.tablist?.getAttribute("aria-orientation") === "vertical";
 	}
 	get tablist() {
-		return Array.from(this.querySelectorAll("[role=tablist]")).find((e) => e.closest("ui-tabs") === this);
+		return Array.from(this.querySelectorAll("[role=tablist]")).find((el) => el.closest("ui-tabs") === this);
 	}
 	tabPairs() {
-		let e = this.tablist;
-		if (!e) return [];
-		let t = Array.from(e.querySelectorAll("[role=tab]")), n = Array.from(this.querySelectorAll("[role=tabpanel]")).filter((e) => e.closest("ui-tabs") === this);
-		t.forEach((e, t) => {
-			e.id ||= this.idPrefix + "_tab_" + t;
-		}), n.forEach((e, t) => {
-			e.id ||= this.idPrefix + "_panel_" + t;
+		const tablist = this.tablist;
+		if (!tablist) return [];
+		const tabs = Array.from(tablist.querySelectorAll("[role=tab]"));
+		const panels = Array.from(this.querySelectorAll("[role=tabpanel]")).filter((el) => el.closest("ui-tabs") === this);
+		tabs.forEach((tab, index) => {
+			if (!tab.id) tab.id = this.idPrefix + "_tab_" + index;
 		});
-		let r = t.slice(0, Math.min(t.length, n.length)).map((e, t) => ({
-			tab: e,
-			panel: n[t]
+		panels.forEach((panel, index) => {
+			if (!panel.id) panel.id = this.idPrefix + "_panel_" + index;
+		});
+		const pairs = tabs.slice(0, Math.min(tabs.length, panels.length)).map((tab, index) => ({
+			tab,
+			panel: panels[index]
 		}));
-		return r.forEach(({ tab: e, panel: t }) => {
-			e.setAttribute("aria-controls", t.id), t.setAttribute("aria-labelledby", e.id);
-		}), r;
-	}
-	getSelectedIndex(e, t = -1) {
-		let n = e.findIndex(({ tab: e }) => e.getAttribute("aria-selected") === "true");
-		return n === -1 ? t : n;
-	}
-	getEventTabIndex(e, t) {
-		if (!(e instanceof Element)) return -1;
-		let n = e.closest("[role=tab]");
-		return n ? t.findIndex((e) => e.tab === n) : -1;
-	}
-	applySelection(e, t, n = {}) {
-		let { focus: r = !1, emit: i = !0 } = n;
-		if (t < 0 || t >= e.length) return !1;
-		let a = this.getSelectedIndex(e);
-		return e.forEach(({ tab: e, panel: n }, i) => {
-			let a = i === t;
-			e.getAttribute("aria-selected") !== String(a) && e.setAttribute("aria-selected", String(a)), a ? (e.removeAttribute("tabindex"), n.hidden = !1, r && e.focus()) : (e.setAttribute("tabindex", "-1"), n.hidden = !0), this.syncPanelTabindex(n, a);
-		}), i && a !== t && this.dispatchEvent(new Event("change")), a !== t;
-	}
-	syncPanelTabindex(e, t) {
-		let n = me(e).filter((t) => t !== e);
-		if (t && !this.hasAuthorManagedTabindex(e) && n.length === 0) {
-			e.setAttribute("tabindex", "0"), this.managedPanelTabindex.add(e);
+		pairs.forEach(({ tab, panel }) => {
+			tab.setAttribute("aria-controls", panel.id);
+			panel.setAttribute("aria-labelledby", tab.id);
+		});
+		return pairs;
+	}
+	getSelectedIndex(pairs, fallback = -1) {
+		const index = pairs.findIndex(({ tab }) => tab.getAttribute("aria-selected") === "true");
+		return index === -1 ? fallback : index;
+	}
+	getEventTabIndex(target, pairs) {
+		if (!(target instanceof Element)) return -1;
+		const tab = target.closest("[role=tab]");
+		return tab ? pairs.findIndex((pair) => pair.tab === tab) : -1;
+	}
+	applySelection(pairs, index, options = {}) {
+		const { focus = false, emit = true } = options;
+		if (index < 0 || index >= pairs.length) return false;
+		const previousIndex = this.getSelectedIndex(pairs);
+		pairs.forEach(({ tab, panel }, i) => {
+			const selected = i === index;
+			if (tab.getAttribute("aria-selected") !== String(selected)) tab.setAttribute("aria-selected", String(selected));
+			if (selected) {
+				tab.removeAttribute("tabindex");
+				panel.hidden = false;
+				if (focus) tab.focus();
+			} else {
+				tab.setAttribute("tabindex", "-1");
+				panel.hidden = true;
+			}
+			this.syncPanelTabindex(panel, selected);
+		});
+		if (emit && previousIndex !== index) this.dispatchEvent(new Event("change"));
+		return previousIndex !== index;
+	}
+	syncPanelTabindex(panel, selected) {
+		const tabbableDescendants = tabbable(panel).filter((el) => el !== panel);
+		if (selected && !this.hasAuthorManagedTabindex(panel) && tabbableDescendants.length === 0) {
+			panel.setAttribute("tabindex", "0");
+			this.managedPanelTabindex.add(panel);
 			return;
 		}
-		this.managedPanelTabindex.has(e) && (e.removeAttribute("tabindex"), this.managedPanelTabindex.delete(e));
+		if (this.managedPanelTabindex.has(panel)) {
+			panel.removeAttribute("tabindex");
+			this.managedPanelTabindex.delete(panel);
+		}
 	}
-	hasAuthorManagedTabindex(e) {
-		return e.hasAttribute("tabindex") && !this.managedPanelTabindex.has(e);
+	hasAuthorManagedTabindex(panel) {
+		return panel.hasAttribute("tabindex") && !this.managedPanelTabindex.has(panel);
 	}
-}, ve = class extends HTMLElement {
+};
+//#endregion
+//#region src/toolbar/toolbar.ts
+var ToolbarElement = class extends HTMLElement {
 	structureSync;
 	connectedCallback() {
-		this.hasAttribute("role") || this.setAttribute("role", "toolbar"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEventListener("focus", this.onFocus), this.addEventListener("keydown", this.onKeyDown), this.structureSync ||= N(this, {
-			subtree: !0,
-			childList: !0,
-			attributes: !0,
+		if (!this.hasAttribute("role")) this.setAttribute("role", "toolbar");
+		if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+		this.addEventListener("focus", this.onFocus);
+		this.addEventListener("keydown", this.onKeyDown);
+		if (!this.structureSync) this.structureSync = createQueuedElementSync(this, {
+			subtree: true,
+			childList: true,
+			attributes: true,
 			attributeFilter: [
 				"disabled",
 				"hidden",
 				"aria-disabled"
 			]
-		}, () => this.syncControls()), this.structureSync.observe(), this.structureSync.queue();
+		}, () => this.syncControls());
+		this.structureSync.observe();
+		this.structureSync.queue();
 	}
 	disconnectedCallback() {
-		this.removeEventListener("focus", this.onFocus), this.removeEventListener("keydown", this.onKeyDown), this.structureSync?.disconnect();
-	}
-	onFocus = (e) => {
-		e.target === this && (this.removeAttribute("tabindex"), this.syncControls()?.focus());
+		this.removeEventListener("focus", this.onFocus);
+		this.removeEventListener("keydown", this.onKeyDown);
+		this.structureSync?.disconnect();
+	}
+	onFocus = (event) => {
+		if (event.target !== this) return;
+		this.removeAttribute("tabindex");
+		this.syncControls()?.focus();
 	};
 	onKeyDown = (e) => {
-		let t = this.controls, n = t.indexOf(e.target);
-		if (n === -1) return;
-		let r = F(e.key, {
-			currentIndex: n,
-			length: t.length,
+		const controls = this.controls;
+		const index = controls.indexOf(e.target);
+		if (index === -1) return;
+		const nextIndex = getRovingIndexForKey(e.key, {
+			currentIndex: index,
+			length: controls.length,
 			vertical: this.vertical
 		});
-		if (r === void 0) return;
-		let i = t[r];
-		this.syncCurrentControl(t, i), i?.focus(), e.preventDefault();
+		if (nextIndex === void 0) return;
+		const current = controls[nextIndex];
+		this.syncCurrentControl(controls, current);
+		current?.focus();
+		e.preventDefault();
 	};
 	syncControls() {
-		let e = this.controls;
-		if (!e.length) {
+		const controls = this.controls;
+		if (!controls.length) {
 			this.setAttribute("tabindex", "0");
 			return;
 		}
-		let t = P(this).activeElement, n = this.hasAttribute("tabindex") ? e[0] : e.find((e) => e === t) || e.find((e) => e.getAttribute("tabindex") === "0") || e[0];
-		return this.syncCurrentControl(e, n), n;
-	}
-	syncCurrentControl(e, t) {
-		e.forEach((e) => {
-			e.setAttribute("tabindex", e === t ? "0" : "-1");
+		const activeElement = getLookupRoot(this).activeElement;
+		const current = this.hasAttribute("tabindex") ? controls[0] : controls.find((control) => control === activeElement) || controls.find((control) => control.getAttribute("tabindex") === "0") || controls[0];
+		this.syncCurrentControl(controls, current);
+		return current;
+	}
+	syncCurrentControl(controls, current) {
+		controls.forEach((control) => {
+			control.setAttribute("tabindex", control === current ? "0" : "-1");
 		});
 	}
 	get vertical() {
 		return this.getAttribute("aria-orientation") === "vertical";
 	}
 	get controls() {
-		return he(this);
+		return focusable(this);
 	}
-}, ye = 0, be = class e extends HTMLElement {
+};
+//#endregion
+//#region src/tooltip/tooltip.ts
+let tooltipIdCounter = 0;
+var TooltipElement = class TooltipElement extends HTMLElement {
 	static delay = 100;
 	static observedAttributes = [
 		"disabled",
@@ -880,124 +1843,182 @@ var I = class e extends HTMLElement {
 	];
 	owner;
 	timeout;
-	sync = M(this, () => this.syncOwner());
+	sync = createQueuedSync(this, () => this.syncOwner());
 	ownerObserver;
 	siblingObserver;
 	managedDescription;
 	connectedCallback() {
-		this.hasAttribute("popover") || this.setAttribute("popover", "hint"), this.hasAttribute("role") || this.setAttribute("role", "tooltip"), this.ensureTooltipId(), this.addEventListener("toggle", this.onToggle), this.addEventListener("pointerenter", this.onTooltipPointerEnter), this.addEventListener("pointerleave", this.onInteractivePointerLeave), this.syncOwner();
+		if (!this.hasAttribute("popover")) this.setAttribute("popover", "hint");
+		if (!this.hasAttribute("role")) this.setAttribute("role", "tooltip");
+		this.ensureTooltipId();
+		this.addEventListener("toggle", this.onToggle);
+		this.addEventListener("pointerenter", this.onTooltipPointerEnter);
+		this.addEventListener("pointerleave", this.onInteractivePointerLeave);
+		this.syncOwner();
 	}
 	disconnectedCallback() {
-		this.removeEventListener("toggle", this.onToggle), this.removeEventListener("pointerenter", this.onTooltipPointerEnter), this.removeEventListener("pointerleave", this.onInteractivePointerLeave), this.ownerDocument.removeEventListener("keydown", this.onDocumentKeyDown), this.siblingObserver?.disconnect(), this.sync.disconnect(), this.setOwner(void 0), clearTimeout(this.timeout);
+		this.removeEventListener("toggle", this.onToggle);
+		this.removeEventListener("pointerenter", this.onTooltipPointerEnter);
+		this.removeEventListener("pointerleave", this.onInteractivePointerLeave);
+		this.ownerDocument.removeEventListener("keydown", this.onDocumentKeyDown);
+		this.siblingObserver?.disconnect();
+		this.sync.disconnect();
+		this.setOwner(void 0);
+		clearTimeout(this.timeout);
 	}
-	attributeChangedCallback(e, t, n) {
-		!this.isConnected || t === n || (e === "id" && !n && this.ensureTooltipId(), this.syncOwner());
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (!this.isConnected || oldValue === newValue) return;
+		if (name === "id" && !newValue) this.ensureTooltipId();
+		this.syncOwner();
 	}
 	get disabled() {
 		return this.hasAttribute("disabled");
 	}
-	set disabled(e) {
-		e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+	set disabled(val) {
+		if (val) this.setAttribute("disabled", "");
+		else this.removeAttribute("disabled");
 	}
-	show(e = this.resolveOwner()) {
-		clearTimeout(this.timeout), this.syncOwner(e);
-		let t = this.owner;
-		!t || this.matches(":popover-open") || this.showPopover?.({ source: t });
+	show(owner = this.resolveOwner()) {
+		clearTimeout(this.timeout);
+		this.syncOwner(owner);
+		const resolvedOwner = this.owner;
+		if (!resolvedOwner || this.matches(":popover-open")) return;
+		this.showPopover?.({ source: resolvedOwner });
 	}
 	hide() {
-		clearTimeout(this.timeout), this.matches(":popover-open") && this.hidePopover();
+		clearTimeout(this.timeout);
+		if (this.matches(":popover-open")) this.hidePopover();
 	}
 	onToggle = (e) => {
-		if (e.target === this) {
-			if (e.newState === "open") {
-				this.ownerDocument.addEventListener("keydown", this.onDocumentKeyDown);
-				return;
-			}
-			this.ownerDocument.removeEventListener("keydown", this.onDocumentKeyDown);
+		if (e.target !== this) return;
+		if (e.newState === "open") {
+			this.ownerDocument.addEventListener("keydown", this.onDocumentKeyDown);
+			return;
 		}
+		this.ownerDocument.removeEventListener("keydown", this.onDocumentKeyDown);
 	};
 	onDocumentKeyDown = (e) => {
-		e.key === "Escape" && this.hide();
+		if (e.key === "Escape") this.hide();
 	};
-	syncOwner(e = this.resolveOwner()) {
-		if (this.siblingObserver ??= new MutationObserver(this.sync.queue), this.siblingObserver.disconnect(), !this.hasAttribute("for") && this.parentElement && this.siblingObserver.observe(this.parentElement, { childList: !0 }), !e) {
-			this.hide(), this.setOwner(void 0);
+	syncOwner(owner = this.resolveOwner()) {
+		this.siblingObserver ??= new MutationObserver(this.sync.queue);
+		this.siblingObserver.disconnect();
+		if (!this.hasAttribute("for") && this.parentElement) this.siblingObserver.observe(this.parentElement, { childList: true });
+		if (!owner) {
+			this.hide();
+			this.setOwner(void 0);
 			return;
 		}
-		this.owner && this.owner !== e && this.matches(":popover-open") && this.hide(), this.setOwner(e);
+		if (this.owner && this.owner !== owner && this.matches(":popover-open")) this.hide();
+		this.setOwner(owner);
 	}
-	resolveOwner(e) {
-		let t = e ?? (this.hasAttribute("for") ? this.resolveExplicitOwner() : this.previousElementSibling instanceof HTMLElement ? this.previousElementSibling : void 0);
-		if (!(this.disabled || !t || !t.isConnected || t === this || this.isOwnerDisabled(t))) return t;
+	resolveOwner(owner) {
+		const candidate = owner ?? (this.hasAttribute("for") ? this.resolveExplicitOwner() : this.previousElementSibling instanceof HTMLElement ? this.previousElementSibling : void 0);
+		if (this.disabled || !candidate || !candidate.isConnected || candidate === this || this.isOwnerDisabled(candidate)) return;
+		return candidate;
 	}
 	resolveExplicitOwner() {
-		let e = this.getAttribute("for");
-		if (!e) return;
-		let t = this.getRootNode(), n = t instanceof ShadowRoot && t.querySelector(`#${CSS.escape(e)}`) || this.ownerDocument.getElementById(e);
-		return n instanceof HTMLElement ? n : void 0;
-	}
-	setOwner(e) {
-		let t = this.owner !== e;
-		t && this.owner && (this.owner.removeEventListener("focusin", this.onOwnerFocusIn), this.owner.removeEventListener("focusout", this.onOwnerFocusOut), this.owner.removeEventListener("pointerenter", this.onOwnerPointerEnter), this.owner.removeEventListener("pointerleave", this.onInteractivePointerLeave), this.owner.removeEventListener("click", this.onOwnerClick)), this.owner = e, this.updateManagedDescription(e), this.ownerObserver?.disconnect(), e && (this.ownerObserver ??= new MutationObserver(this.sync.queue), this.ownerObserver.observe(e, {
-			attributes: !0,
+		const ownerId = this.getAttribute("for");
+		if (!ownerId) return void 0;
+		const root = this.getRootNode();
+		const owner = root instanceof ShadowRoot && root.querySelector(`#${CSS.escape(ownerId)}`) || this.ownerDocument.getElementById(ownerId);
+		return owner instanceof HTMLElement ? owner : void 0;
+	}
+	setOwner(owner) {
+		const ownerChanged = this.owner !== owner;
+		if (ownerChanged && this.owner) {
+			this.owner.removeEventListener("focusin", this.onOwnerFocusIn);
+			this.owner.removeEventListener("focusout", this.onOwnerFocusOut);
+			this.owner.removeEventListener("pointerenter", this.onOwnerPointerEnter);
+			this.owner.removeEventListener("pointerleave", this.onInteractivePointerLeave);
+			this.owner.removeEventListener("click", this.onOwnerClick);
+		}
+		this.owner = owner;
+		this.updateManagedDescription(owner);
+		this.ownerObserver?.disconnect();
+		if (!owner) return;
+		this.ownerObserver ??= new MutationObserver(this.sync.queue);
+		this.ownerObserver.observe(owner, {
+			attributes: true,
 			attributeFilter: [
 				"aria-describedby",
 				"aria-disabled",
 				"disabled"
 			]
-		}), t && (e.addEventListener("focusin", this.onOwnerFocusIn), e.addEventListener("focusout", this.onOwnerFocusOut), e.addEventListener("pointerenter", this.onOwnerPointerEnter), e.addEventListener("pointerleave", this.onInteractivePointerLeave), e.addEventListener("click", this.onOwnerClick)));
+		});
+		if (ownerChanged) {
+			owner.addEventListener("focusin", this.onOwnerFocusIn);
+			owner.addEventListener("focusout", this.onOwnerFocusOut);
+			owner.addEventListener("pointerenter", this.onOwnerPointerEnter);
+			owner.addEventListener("pointerleave", this.onInteractivePointerLeave);
+			owner.addEventListener("click", this.onOwnerClick);
+		}
 	}
 	onOwnerFocusIn = () => {
-		!this.owner || !this.owner.matches(":focus-visible") || this.show(this.owner);
+		if (!this.owner || !this.owner.matches(":focus-visible")) return;
+		this.show(this.owner);
 	};
 	onOwnerFocusOut = (e) => {
-		this.containsInteractiveTarget(e.relatedTarget) || this.hide();
+		if (this.containsInteractiveTarget(e.relatedTarget)) return;
+		this.hide();
 	};
 	onOwnerPointerEnter = (e) => {
-		this.supportsHoverInteraction(e) && this.owner && (this.containsInteractiveTarget(e.relatedTarget) || this.afterDelay(() => this.show(this.owner)));
+		if (!this.supportsHoverInteraction(e)) return;
+		if (!this.owner) return;
+		if (this.containsInteractiveTarget(e.relatedTarget)) return;
+		this.afterDelay(() => this.show(this.owner));
 	};
 	onTooltipPointerEnter = (e) => {
-		this.supportsHoverInteraction(e) && (this.containsInteractiveTarget(e.relatedTarget) || clearTimeout(this.timeout));
+		if (!this.supportsHoverInteraction(e)) return;
+		if (!this.containsInteractiveTarget(e.relatedTarget)) clearTimeout(this.timeout);
 	};
 	onInteractivePointerLeave = (e) => {
-		e.pointerType && e.pointerType !== "mouse" || this.containsInteractiveTarget(e.relatedTarget) || this.afterDelay(this.hide);
+		if (e.pointerType && e.pointerType !== "mouse") return;
+		if (this.containsInteractiveTarget(e.relatedTarget)) return;
+		this.afterDelay(() => this.hide());
 	};
 	onOwnerClick = () => {
 		this.hide();
 	};
-	afterDelay(t) {
+	afterDelay(callback) {
 		clearTimeout(this.timeout);
-		let n = parseInt(this.getAttribute("delay") || "");
-		this.timeout = window.setTimeout(t, isNaN(n) ? e.delay : n);
-	}
-	containsInteractiveTarget(e) {
-		return e instanceof Node && (this.contains(e) || !!this.owner && this.owner.contains(e));
-	}
-	updateManagedDescription(e) {
-		let t = e ? this.ensureTooltipId() : void 0;
-		if (this.managedDescription && (this.managedDescription.owner !== e || this.managedDescription.id !== t)) {
-			let e = this.managedDescription, t = this.getDescriptionTokens(e.owner).filter((t) => t !== e.id);
-			t.length ? e.owner.setAttribute("aria-describedby", t.join(" ")) : e.owner.removeAttribute("aria-describedby"), this.managedDescription = void 0;
-		}
-		if (!e || !t || this.managedDescription) return;
-		let n = this.getDescriptionTokens(e);
-		n.includes(t) || (e.setAttribute("aria-describedby", [...n, t].join(" ")), this.managedDescription = {
-			owner: e,
-			id: t
-		});
+		const delay = parseInt(this.getAttribute("delay") || "");
+		this.timeout = window.setTimeout(callback, isNaN(delay) ? TooltipElement.delay : delay);
+	}
+	containsInteractiveTarget(target) {
+		return target instanceof Node && (this.contains(target) || !!this.owner && this.owner.contains(target));
+	}
+	updateManagedDescription(owner) {
+		const tooltipId = owner ? this.ensureTooltipId() : void 0;
+		if (this.managedDescription && (this.managedDescription.owner !== owner || this.managedDescription.id !== tooltipId)) {
+			const managedDescription = this.managedDescription;
+			const tokens = this.getDescriptionTokens(managedDescription.owner).filter((token) => token !== managedDescription.id);
+			if (tokens.length) managedDescription.owner.setAttribute("aria-describedby", tokens.join(" "));
+			else managedDescription.owner.removeAttribute("aria-describedby");
+			this.managedDescription = void 0;
+		}
+		if (!owner || !tooltipId || this.managedDescription) return;
+		const tokens = this.getDescriptionTokens(owner);
+		if (tokens.includes(tooltipId)) return;
+		owner.setAttribute("aria-describedby", [...tokens, tooltipId].join(" "));
+		this.managedDescription = {
+			owner,
+			id: tooltipId
+		};
 	}
-	getDescriptionTokens(e) {
-		return (e.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean);
+	getDescriptionTokens(owner) {
+		return (owner.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean);
 	}
 	ensureTooltipId() {
-		return this.id ||= `ui-tooltip-${++ye}`, this.id;
+		if (!this.id) this.id = `ui-tooltip-${++tooltipIdCounter}`;
+		return this.id;
 	}
-	supportsHoverInteraction(e) {
-		return (!e.pointerType || e.pointerType === "mouse") && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+	supportsHoverInteraction(event) {
+		return (!event.pointerType || event.pointerType === "mouse") && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
 	}
-	isOwnerDisabled(e) {
-		return e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true";
+	isOwnerDisabled(owner) {
+		return owner.hasAttribute("disabled") || owner.getAttribute("aria-disabled") === "true";
 	}
 };
 //#endregion
-export { j as AlertsElement, I as MenuElement, _e as TabsElement, ve as ToolbarElement, be as TooltipElement };
+export { AlertsElement, ComboboxElement, MenuElement, TabsElement, ToolbarElement, TooltipElement };