@mortenbrudvik/waveui 0.12.0 → 0.14.0

package/dist/components/data-display/List.mjs

@@ -2,75 +2,75 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { flattenChildren as t, isElementOfType as n } from "../../lib/children.mjs";
 import { reportMissingContext as r, warnDeprecated as i, warnOnce as a } from "../../lib/dev.mjs";
-import { materialiseSlotContent as o, slotRendersContent as s } from "../../lib/slot.mjs";
-import { composeEventHandlers as c } from "../../lib/composeEventHandlers.mjs";
-import { listClassNames as l, listItemClassNames as u } from "../../lib/classNames.mjs";
+import { materialiseSlotContent as o, renderSlot as s, slotRendersContent as c } from "../../lib/slot.mjs";
+import { composeEventHandlers as l } from "../../lib/composeEventHandlers.mjs";
+import { listClassNames as ee, listItemClassNames as u } from "../../lib/classNames.mjs";
 import { useEventCallback as d } from "../../hooks/useEventCallback.mjs";
-import { useControllable as f } from "../../hooks/useControllable.mjs";
-import { useId as p } from "../../hooks/useId.mjs";
-import { getArrowIntent as m, getDirection as h } from "../../lib/direction.mjs";
-import { FOCUSABLE_SELECTOR as g, isFocusable as _ } from "../../lib/focus.mjs";
-import { useRovingTabIndex as v } from "../../hooks/useRovingTabIndex.mjs";
-import { useMergedRefs as y } from "../../hooks/useMergedRefs.mjs";
-import { forcedColors as b } from "../../lib/styles.mjs";
+import { useControllable as te } from "../../hooks/useControllable.mjs";
+import { useId as ne } from "../../hooks/useId.mjs";
+import { getArrowIntent as f, getDirection as p } from "../../lib/direction.mjs";
+import { FOCUSABLE_SELECTOR as m, isFocusable as h } from "../../lib/focus.mjs";
+import { useRovingTabIndex as re } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as ie } from "../../hooks/useMergedRefs.mjs";
+import { focusableDisabledProps as ae } from "../../lib/aria.mjs";
+import { focusRingInset as g, forcedColors as _ } from "../../lib/styles.mjs";
+import { CheckIcon as v } from "../../lib/icons.mjs";
+import { INTERACTIVE_SELECTOR as y, isForeignEvent as b } from "../../lib/events.mjs";
 import { ListRegistry as x } from "./List.registry.mjs";
 import * as S from "react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { jsx as C, jsxs as oe } from "react/jsx-runtime";
 //#region src/components/data-display/List.tsx
-var T = S.createContext(null);
-T.displayName = "ListContext";
-var E = null;
-function D() {
-	return E ??= {
+var w = S.createContext(null);
+w.displayName = "ListContext";
+var T = null;
+function E() {
+	return T ??= {
 		mode: "list",
+		navigable: !1,
+		selection: !1,
+		checkmark: !1,
 		selectedValues: /* @__PURE__ */ new Set(),
 		toggleItem: () => {},
 		getTabIndex: () => -1,
 		registry: new x()
-	}, E;
+	}, T;
 }
-function O(e) {
-	return S.useContext(T) || (r(e, "a List"), D());
+function D(e) {
+	return S.useContext(w) || (r(e, "a List"), E());
 }
-var k = [];
-function A(e) {
+var O = [];
+function k(e, t, n) {
+	return n === "composite" || e && t ? {
+		mode: "grid",
+		navigation: "composite"
+	} : e ? {
+		mode: "listbox",
+		navigation: "items"
+	} : {
+		mode: "list",
+		navigation: n === "items" ? "items" : "none"
+	};
+}
+function se(e) {
 	a(`List:duplicate:${e}`, `List: several items share the value "${e}". Item values must be unique within a List; items with the same value are selected (and tab stops) together.`);
 }
-function j(e) {
-	return t(e).some(({ node: e }) => n(e, W) && s(e.props.action));
+function A(e) {
+	return t(e).some(({ node: e }) => n(e, G) && c(e.props.action));
 }
-var M = [
-	g,
-	"[data-list-action]",
-	"label",
-	"[role=\"button\"]",
-	"[role=\"link\"]",
-	"[role=\"checkbox\"]",
-	"[role=\"switch\"]",
-	"[role=\"radio\"]",
-	"[role=\"menuitem\"]",
-	"[role=\"textbox\"]",
-	"[role=\"combobox\"]",
-	"[role=\"slider\"]",
-	"[role=\"spinbutton\"]"
-].join(", ");
-function N(e) {
-	let t = e.currentTarget, n = e.target;
-	if (!n || typeof n.nodeType != "number" || !t.contains(n)) return !0;
-	let r = n.nodeType === Node.ELEMENT_NODE ? n : n.parentElement ?? null;
-	for (; r && r !== t; r = r.parentElement) if (r.matches(M)) return !0;
-	return !1;
+var j = { interactive: `${y}, [data-list-action]` };
+function M(e) {
+	return b(e, j);
 }
-function P(e) {
+function N(e) {
 	return e.ctrlKey || e.altKey || e.metaKey ? !1 : e.key === "Enter" || e.key === " ";
 }
-var F = /* @__PURE__ */ new Set([
+var P = /* @__PURE__ */ new Set([
 	"textbox",
 	"searchbox",
 	"combobox",
 	"spinbutton",
 	"slider"
-]), I = /* @__PURE__ */ new Set([
+]), F = /* @__PURE__ */ new Set([
 	"button",
 	"checkbox",
 	"color",
@@ -81,22 +81,22 @@ var F = /* @__PURE__ */ new Set([
 	"reset",
 	"submit"
 ]);
-function L(e) {
+function I(e) {
 	let t = e.getAttribute("role");
-	if (t !== null && F.has(t)) return !0;
+	if (t !== null && P.has(t)) return !0;
 	let n = e.localName;
-	return n === "textarea" || n === "select" ? !0 : n === "input" ? !I.has(e.type) : e.matches("[contenteditable]:not([contenteditable=\"false\"])");
+	return n === "textarea" || n === "select" ? !0 : n === "input" ? !F.has(e.type) : e.matches("[contenteditable]:not([contenteditable=\"false\"])");
 }
-function R(e) {
-	return Array.from(e.querySelectorAll(g)).filter((e) => _(e));
+function L(e) {
+	return Array.from(e.querySelectorAll(m)).filter((e) => h(e));
 }
-function z(e) {
+function R(e) {
 	if (!e.parentElement) return -1;
 	let t = 0;
 	for (let n = e.previousElementSibling; n; n = n.previousElementSibling) t++;
 	return t;
 }
-function B(e, t) {
+function z(e, t) {
 	let n = null, r = null, i = null, a = 0;
 	for (let o = e.firstElementChild; o; o = o.nextElementSibling, a++) {
 		if (t.value !== void 0 && o.getAttribute("data-roving-value") === t.value) {
@@ -106,204 +106,254 @@ function B(e, t) {
 		a === t.index && (r = o), i = o;
 	}
 	let o = n ?? r ?? (t.index >= 0 ? i : null);
-	return o ? o.hasAttribute("tabindex") ? o : R(o)[0] ?? null : null;
+	return o ? o.hasAttribute("tabindex") ? o : L(o)[0] ?? null : null;
 }
-function V(e) {
+function B(e) {
 	for (let t = e.firstElementChild; t; t = t.nextElementSibling) if (t.hasAttribute("data-list-action")) return t;
 	return null;
 }
-function H(e) {
+function V(e) {
 	let t = [];
-	for (let n of R(e)) {
-		let r = L(n) ? e : n;
+	for (let n of L(e)) {
+		let r = I(n) ? e : n;
 		t.includes(r) || t.push(r);
 	}
 	return t;
 }
-var U = (t) => {
-	let { selectable: n = !1, selectionMode: r, selectedItems: o, defaultSelectedItems: s, onSelectionChange: u, selectedItem: d, defaultSelectedItem: p, onSelectedItemChange: m, className: h, children: g, ref: _, onKeyDown: b, onKeyDownCapture: w, onFocus: E, ...D } = t;
+var H = (t) => {
+	let { selectable: n = !1, selectionMode: r, selectedItems: o, defaultSelectedItems: s, onSelectionChange: c, selectedItem: u, defaultSelectedItem: d, onSelectedItemChange: ne, navigationMode: f, checkmark: p = !1, className: m, children: h, ref: ae, onKeyDown: g, onKeyDownCapture: _, onFocus: v, ...y } = t;
 	r === "multi" && i("List", "selectionMode=\"multi\"", "selectionMode=\"multiple\"");
-	let O = r === "multiple" || r === "multi", M = S.useMemo(() => !O && d !== void 0 ? d === null ? k : [d] : o, [
-		O,
-		d,
+	let b = r === "multiple" || r === "multi", oe = S.useMemo(() => !b && u !== void 0 ? u === null ? O : [u] : o, [
+		b,
+		u,
 		o
-	]), N = S.useMemo(() => !O && p != null ? [p] : s ?? k, [
-		O,
-		p,
+	]), T = S.useMemo(() => !b && d != null ? [d] : s ?? O, [
+		b,
+		d,
 		s
-	]), [P, F] = f(M, N, (e) => {
+	]), [E, D] = te(oe, T, (e) => {
 		let t = [...e];
-		u?.(t), O || m?.(t[0] ?? null);
-	}), [I] = S.useState(() => new x());
+		c?.(t), b || ne?.(t[0] ?? null);
+	}), [j] = S.useState(() => new x()), M = S.useSyncExternalStore(j.subscribe, j.getSnapshot, j.getServerSnapshot), N = S.useMemo(() => M ? E.filter((e) => M.valueSet.has(e)) : E, [M, E]), P = S.useMemo(() => new Set(N), [N]), F = n && f !== "composite" && (M ? M.hasActions : A(h)), { mode: I, navigation: R } = k(n, F, f), B = R !== "none", V = n && p;
 	S.useLayoutEffect(() => {
-		I.setActive(n);
-	}, [I, n]);
-	let L = S.useSyncExternalStore(I.subscribe, I.getSnapshot, I.getServerSnapshot), R = S.useMemo(() => L ? P.filter((e) => L.valueSet.has(e)) : P, [L, P]), z = S.useMemo(() => new Set(R), [R]), V = n && (L ? L.hasActions : j(g)), H = n ? V ? "grid" : "listbox" : "list", U = L ? L.values.find((e) => z.has(e)) ?? null : R[0] ?? null, { containerProps: W, getTabIndex: G } = v({
-		activeValue: U,
+		j.setActive(B);
+	}, [j, B]);
+	let H = M ? M.values.find((e) => P.has(e)) ?? null : N[0] ?? null, { containerProps: U, getTabIndex: W } = re({
+		activeValue: n ? H : null,
 		orientation: "vertical",
-		typeahead: (L?.count ?? 0) > 7,
-		tabStop: "active",
+		typeahead: (M?.count ?? 0) > 7,
+		tabStop: n ? "active" : "last-focused",
 		itemSelector: ":scope > [data-roving-value]"
-	}), { ref: K, onKeyDown: q, onKeyDownCapture: J, onFocus: Y } = W, X = S.useRef(null), ee = y(_, n ? K : null, X);
+	}), { ref: ce, onKeyDown: G, onKeyDownCapture: K, onFocus: q } = U, J = S.useRef(null), le = ie(ae, B ? ce : null, J);
 	S.useLayoutEffect(() => {
-		let e = I.takeFocusLoss(), t = X.current;
+		let e = j.takeFocusLoss(), t = J.current;
 		if (!e || !t) return;
 		let n = t.ownerDocument, r = n.activeElement;
-		r && r !== n.body && r.isConnected || B(t, e)?.focus();
-	}, [H, I]), S.useLayoutEffect(() => {
-		I.syncOrder(X.current);
+		r && r !== n.body && r.isConnected || z(t, e)?.focus();
+	}, [I, j]), S.useLayoutEffect(() => {
+		if (B) return;
+		let e = J.current, t = e?.ownerDocument.activeElement;
+		t && t.parentElement === e && !t.hasAttribute("tabindex") && L(t)[0]?.focus();
+	}, [B]), S.useLayoutEffect(() => {
+		j.syncOrder(J.current);
 	});
-	let Z = S.useCallback((e) => {
-		F((t) => {
-			let n = I.prune(t), r = n.includes(e);
-			return O ? r ? n.filter((t) => t !== e) : [...n, e] : r ? [] : [e];
+	let Y = S.useCallback((e) => {
+		D((t) => {
+			let n = j.prune(t), r = n.includes(e);
+			return b ? r ? n.filter((t) => t !== e) : [...n, e] : r ? [] : [e];
 		});
 	}, [
-		O,
-		I,
-		F
-	]), Q = L?.duplicates ?? k;
+		b,
+		j,
+		D
+	]), X = M?.duplicates ?? O;
 	S.useEffect(() => {
-		for (let e of Q) A(e);
-	}, [Q]);
-	let $ = R.length;
+		for (let e of X) se(e);
+	}, [X]);
+	let Z = N.length;
 	S.useEffect(() => {
-		n && !O && $ > 1 && a("List:single-several-selected", `List: a single-selection list (selectionMode "single") received ${$} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`);
+		n && !b && Z > 1 && a("List:single-several-selected", `List: a single-selection list (selectionMode "single") received ${Z} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`);
 	}, [
 		n,
-		O,
-		$
+		b,
+		Z
 	]);
-	let te = S.useMemo(() => ({
-		mode: H,
-		selectedValues: z,
-		toggleItem: Z,
-		getTabIndex: G,
-		registry: I
+	let Q = n && f === "items" && F, $ = n && f === "none";
+	S.useEffect(() => {
+		Q && a("List:items-with-actions", "List: a selectable list whose items have actions is a grid (an option cannot hold interactive content), so navigationMode=\"items\" acts as \"composite\". Set navigationMode=\"composite\"."), $ && a("List:none-selectable", "List: navigationMode=\"none\" has no effect on a selectable list, whose items are always reached with the arrow keys. Remove it, or use \"items\" or \"composite\".");
+	}, [Q, $]);
+	let ue = S.useMemo(() => ({
+		mode: I,
+		navigable: B,
+		selection: n,
+		checkmark: V,
+		selectedValues: P,
+		toggleItem: Y,
+		getTabIndex: W,
+		registry: j
 	}), [
-		H,
-		z,
-		Z,
-		G,
-		I
-	]), ne = H === "grid" ? "div" : "ul", re = H === "grid" ? "grid" : H === "listbox" ? "listbox" : "list";
-	return /* @__PURE__ */ C(T.Provider, {
-		value: te,
-		children: /* @__PURE__ */ C(ne, {
-			role: re,
-			"aria-multiselectable": n && O ? !0 : void 0,
-			className: e(l.root, "m-0 list-none p-0", h),
-			...D,
-			ref: ee,
-			"data-roving-container": n ? "" : void 0,
-			onKeyDown: n ? c(b, q) : b,
-			onKeyDownCapture: n ? c(w, J) : w,
-			onFocus: n ? c(E, Y, { checkDefaultPrevented: !1 }) : E,
-			children: g
+		I,
+		B,
+		n,
+		V,
+		P,
+		Y,
+		W,
+		j
+	]), de = I === "grid" ? "div" : "ul", fe = I === "grid" ? "grid" : I === "listbox" ? "listbox" : "list";
+	return /* @__PURE__ */ C(w.Provider, {
+		value: ue,
+		children: /* @__PURE__ */ C(de, {
+			role: fe,
+			"aria-multiselectable": n && b ? !0 : void 0,
+			"data-navigation-mode": R,
+			"data-checkmark": V ? "" : void 0,
+			className: e(ee.root, "m-0 list-none p-0", m),
+			...y,
+			ref: le,
+			"data-roving-container": B ? "" : void 0,
+			onKeyDown: B ? l(g, G) : g,
+			onKeyDownCapture: B ? l(_, K) : _,
+			onFocus: B ? l(v, q, { checkDefaultPrevented: !1 }) : v,
+			children: h
 		})
 	});
 };
-U.displayName = "List";
-var W = ({ value: t, action: n, className: r, children: i, onClick: a, onKeyDown: l, ref: f, ...g }) => {
-	let { mode: _, selectedValues: v, toggleItem: x, getTabIndex: T, registry: E } = O("ListItem"), D = p("list-item"), k = t || void 0, A = k ?? D, j = s(n), [M] = S.useState(() => ({})), F = S.useRef(null), I = y(f, F);
+H.displayName = "List";
+var U = "forced-colors:text-[Highlight] forced-colors:forced-color-adjust-none", W = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none";
+function ce(t, { selected: n, disabled: r }) {
+	let i = e(u.checkmark, "order-first me-2 inline-flex shrink-0 items-center justify-center", r ? ["text-muted-foreground", W] : ["text-primary", U], !n && "invisible");
+	return t === void 0 ? /* @__PURE__ */ C("span", {
+		"aria-hidden": "true",
+		className: i,
+		children: /* @__PURE__ */ C(v, {})
+	}) : s(t, "span", i, { "aria-hidden": !0 });
+}
+var G = ({ value: t, action: n, onAction: r, disabledSelection: i = !1, checkmark: s, className: ee, children: te, onClick: m, onKeyDown: h, ref: re, ...v }) => {
+	let { mode: y, navigable: b, selection: x, checkmark: w, selectedValues: T, toggleItem: E, getTabIndex: O, registry: k } = D("ListItem"), se = ne("list-item"), A = t || void 0, j = A ?? se, P = c(n), [F] = S.useState(() => ({})), z = S.useRef(null), H = ie(re, z);
 	S.useLayoutEffect(() => {
-		E.set(M, {
-			value: k,
-			hasAction: j,
-			element: F
+		k.set(F, {
+			value: A,
+			hasAction: P,
+			element: z
 		});
 	}, [
-		E,
-		M,
 		k,
-		j
-	]), S.useLayoutEffect(() => () => E.delete(M), [E, M]);
-	let B = d((e) => {
+		F,
+		A,
+		P
+	]), S.useLayoutEffect(() => () => k.delete(F), [k, F]);
+	let U = d((e) => {
 		let t = e.parentElement;
-		E.recordFocusLoss({
-			value: k,
-			index: t ? z(t) : -1
+		k.recordFocusLoss({
+			value: A,
+			index: t ? R(t) : -1
 		});
 	});
 	S.useLayoutEffect(() => {
-		let e = F.current;
+		let e = z.current;
 		return () => {
 			if (!e) return;
 			let t = e.ownerDocument.activeElement;
-			t && e.contains(t) && E.recordFocusLoss({
-				value: k,
-				index: z(e)
+			t && e.contains(t) && k.recordFocusLoss({
+				value: A,
+				index: R(e)
 			});
 		};
-	}, [E, k]);
-	let U = k !== void 0 && v.has(k), W = _ !== "list", G = () => {
-		k !== void 0 && x(k);
-	}, K = (e) => {
-		N(e) || G();
-	}, q = (e) => {
-		N(e) || P(e) && (e.preventDefault(), G());
-	}, Y = (e) => {
-		let t = e.currentTarget, n = e.target, r = V(t);
+	}, [k, A]);
+	let W = r !== void 0 && !b;
+	S.useEffect(() => {
+		W && a("List.Item:action-not-navigable", "List.Item: `onAction` runs only on clicks here: the List does not navigate its items, so keyboard users cannot reach them. Set navigationMode=\"items\" (or \"composite\") on the List, or make it selectable.");
+	}, [W]);
+	let G = x && A !== void 0 && T.has(A), K = x && A !== void 0, q = x && i, J = q && r === void 0, Y = () => {
+		x && !i && A !== void 0 && E(A);
+	}, X = (e) => {
+		r?.(e), e.isDefaultPrevented() || Y();
+	}, Z = (e) => {
+		M(e) || X(e);
+	}, Q = (e) => {
+		if (e.key === " " && K) {
+			e.preventDefault(), Y();
+			return;
+		}
+		(x || r !== void 0) && (X(e), e.preventDefault());
+	}, $ = (e) => {
+		M(e) || N(e) && Q(e);
+	}, ue = (e) => {
+		let t = e.currentTarget, n = e.target, r = B(t);
 		if (!r || !r.contains(n)) {
 			if (n !== t) return;
-			if (P(e)) {
-				e.preventDefault(), G();
+			if (N(e)) {
+				Q(e);
 				return;
 			}
-			let i = m(e.key, {
+			let i = f(e.key, {
 				orientation: "horizontal",
-				dir: h(t)
-			}) === "next" && r ? H(r)[0] : void 0;
+				dir: p(t)
+			}) === "next" && r ? V(r)[0] : void 0;
 			i && (e.preventDefault(), i.focus());
 			return;
 		}
-		if (n !== r && L(n)) {
+		if (n !== r && I(n)) {
 			e.key === "Escape" && (e.preventDefault(), r.focus());
 			return;
 		}
 		if (n === r && (e.key === "Enter" || e.key === "F2")) {
-			let t = R(r).find((e) => L(e));
+			let t = L(r).find((e) => I(e));
 			t && (e.preventDefault(), t.focus());
 			return;
 		}
-		let i = m(e.key, {
+		let i = f(e.key, {
 			orientation: "horizontal",
-			dir: h(t)
+			dir: p(t)
 		});
 		if (!i) return;
 		e.preventDefault();
-		let a = H(r), o = a.indexOf(n);
+		let a = V(r), o = a.indexOf(n);
 		i === "next" ? a[o + 1]?.focus() : o > 0 ? a[o - 1].focus() : t.focus();
-	}, X = _ === "grid" ? "div" : "li", ee = _ === "grid" ? "div" : "span", Z = _ === "grid" ? "row" : _ === "listbox" ? "option" : "listitem", Q = W ? {
-		"aria-selected": U,
-		tabIndex: T(A),
-		"data-roving-value": A,
-		"data-selected": U ? "" : void 0,
-		onClick: c(a, K),
-		onKeyDown: c(l, _ === "grid" ? Y : q)
+	}, de = y === "grid" ? "div" : "li", fe = y === "grid" ? "div" : "span", pe = y === "grid" ? "row" : y === "listbox" ? "option" : "listitem", me = b ? {
+		"aria-selected": x ? G : void 0,
+		tabIndex: O(j),
+		"data-roving-value": j,
+		"data-selected": G ? "" : void 0,
+		...ae(J, { reachable: !0 }),
+		onClick: l(m, Z),
+		onKeyDown: l(h, y === "grid" ? ue : $)
 	} : {
-		onClick: a,
-		onKeyDown: l
-	};
-	return /* @__PURE__ */ w(X, {
-		role: Z,
-		className: e(u.root, "flex items-center border-b border-border px-4 py-2 text-body-1", W && ["relative cursor-pointer", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"], W && (U ? ["bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary", b.selectedContainer] : "hover:bg-subtle-hover"), r),
-		...g,
-		ref: I,
-		...Q,
-		children: [/* @__PURE__ */ C(ee, {
-			role: _ === "grid" ? "gridcell" : void 0,
-			className: e(u.content, "min-w-0 flex-1"),
-			children: i
-		}), j && /* @__PURE__ */ C(J, {
-			grid: _ === "grid",
-			onRemovedWithFocus: B,
-			children: o(n)
-		})]
+		onClick: r ? l(m, Z) : m,
+		onKeyDown: h
+	}, he = x ? J ? "cursor-default" : "cursor-pointer" : r && "cursor-pointer", ge = x ? !J : r !== void 0, _e = s != null && c(s), ve = x && (s == null ? w : _e);
+	return /* @__PURE__ */ oe(de, {
+		role: pe,
+		"data-disabled-selection": q ? "" : void 0,
+		className: e(u.root, "flex items-center border-b border-border px-4 py-2 text-body-1", b ? [
+			"relative",
+			he,
+			g
+		] : he, G ? ["bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary", _.selectedContainer] : ge && "hover:bg-subtle-hover", ee),
+		...v,
+		ref: H,
+		...me,
+		children: [
+			/* @__PURE__ */ C(fe, {
+				role: y === "grid" ? "gridcell" : void 0,
+				className: e(u.content, "min-w-0 flex-1"),
+				children: te
+			}),
+			P && /* @__PURE__ */ C(le, {
+				grid: y === "grid",
+				onRemovedWithFocus: U,
+				children: o(n)
+			}),
+			ve && ce(_e ? s : void 0, {
+				selected: G,
+				disabled: q
+			})
+		]
 	});
 };
-W.displayName = "ListItem";
-var G = ["[data-roving-container]", ...[
+G.displayName = "ListItem";
+var K = ["[data-roving-container]", ...[
 	"toolbar",
 	"radiogroup",
 	"listbox",
@@ -313,19 +363,19 @@ var G = ["[data-roving-container]", ...[
 	"menu",
 	"menubar",
 	"tree"
-].map((e) => `[role="${e}"]`)].join(", "), K = [
+].map((e) => `[role="${e}"]`)].join(", "), q = [
 	"tabindex",
 	"href",
 	"contenteditable",
 	"controls"
 ];
-function q(e) {
+function J(e) {
 	let t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new WeakSet(), r = () => {
 		for (let n of t.keys()) e.contains(n) || t.delete(n);
-		for (let r of e.querySelectorAll(g)) {
+		for (let r of e.querySelectorAll(m)) {
 			let i = r.getAttribute("tabindex");
 			if (i === "-1" || n.has(r)) continue;
-			let a = r.closest(G);
+			let a = r.closest(K);
 			a && e.contains(a) || (t.set(r, i), r.setAttribute("tabindex", "-1"));
 		}
 	};
@@ -346,14 +396,14 @@ function q(e) {
 		subtree: !0,
 		childList: !0,
 		attributes: !0,
-		attributeFilter: K
+		attributeFilter: q
 	}), () => {
 		i.disconnect();
 		for (let [e, n] of t) n === null ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", n);
 		t.clear();
 	};
 }
-function J({ grid: t, onRemovedWithFocus: n, children: r }) {
+function le({ grid: t, onRemovedWithFocus: n, children: r }) {
 	let i = S.useRef(null);
 	return S.useLayoutEffect(() => {
 		let e = i.current;
@@ -364,7 +414,7 @@ function J({ grid: t, onRemovedWithFocus: n, children: r }) {
 		};
 	}, [n, t]), S.useLayoutEffect(() => {
 		let e = i.current;
-		return t && e ? q(e) : void 0;
+		return t && e ? J(e) : void 0;
 	}, [t]), /* @__PURE__ */ C(t ? "div" : "span", {
 		ref: i,
 		role: t ? "gridcell" : void 0,
@@ -374,9 +424,9 @@ function J({ grid: t, onRemovedWithFocus: n, children: r }) {
 		children: r
 	});
 }
-J.displayName = "ListActionCell";
-var Y = /* @__PURE__ */ Object.assign(U, { Item: W });
+le.displayName = "ListActionCell";
+var Y = /* @__PURE__ */ Object.assign(H, { Item: G });
 //#endregion
-export { Y as List, W as ListItem };
+export { Y as List, G as ListItem };
 
 //# sourceMappingURL=List.mjs.map