@mortenbrudvik/waveui 0.15.0 → 0.16.0

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

@@ -7,24 +7,26 @@ 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 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 { useId as f } from "../../hooks/useId.mjs";
+import { getArrowIntent as ne, 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 oe } from "react/jsx-runtime";
+import { ownsArrowKeys as re, useRovingTabIndex as ie } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as ae } from "../../hooks/useMergedRefs.mjs";
+import { focusableDisabledProps as oe } from "../../lib/aria.mjs";
+import { focusRingInset as se, forcedColors as ce } from "../../lib/styles.mjs";
+import { CheckIcon as le } from "../../lib/icons.mjs";
+import { INTERACTIVE_SELECTOR as g, isForeignEvent as _ } from "../../lib/events.mjs";
+import { ListRegistry as v } from "./List.registry.mjs";
+import * as y from "react";
+import { jsx as b, jsxs as ue } from "react/jsx-runtime";
 //#region src/components/data-display/List.tsx
-var w = S.createContext(null);
-w.displayName = "ListContext";
-var T = null;
-function E() {
-	return T ??= {
+var x = y.createContext(null);
+x.displayName = "ListContext";
+var de = y.createContext(null);
+de.displayName = "ListItemIndexContext";
+var S = null;
+function fe() {
+	return S ??= {
 		mode: "list",
 		navigable: !1,
 		selection: !1,
@@ -32,14 +34,15 @@ function E() {
 		selectedValues: /* @__PURE__ */ new Set(),
 		toggleItem: () => {},
 		getTabIndex: () => -1,
-		registry: new x()
-	}, T;
+		registry: new v(),
+		listWindow: null
+	}, S;
 }
-function D(e) {
-	return S.useContext(w) || (r(e, "a List"), E());
+function C(e) {
+	return y.useContext(x) || (r(e, "a List"), fe());
 }
-var O = [];
-function k(e, t, n) {
+var pe = [];
+function w(e, t, n) {
 	return n === "composite" || e && t ? {
 		mode: "grid",
 		navigation: "composite"
@@ -51,26 +54,26 @@ function k(e, t, n) {
 		navigation: n === "items" ? "items" : "none"
 	};
 }
-function se(e) {
+function T(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 A(e) {
-	return t(e).some(({ node: e }) => n(e, G) && c(e.props.action));
+function me(e) {
+	return t(e).some(({ node: e }) => n(e, J) && c(e.props.action));
 }
-var j = { interactive: `${y}, [data-list-action]` };
-function M(e) {
-	return b(e, j);
+var E = { interactive: `${g}, [data-list-action]` };
+function D(e) {
+	return _(e, E);
 }
-function N(e) {
+function O(e) {
 	return e.ctrlKey || e.altKey || e.metaKey ? !1 : e.key === "Enter" || e.key === " ";
 }
-var P = /* @__PURE__ */ new Set([
+var k = /* @__PURE__ */ new Set([
 	"textbox",
 	"searchbox",
 	"combobox",
 	"spinbutton",
 	"slider"
-]), F = /* @__PURE__ */ new Set([
+]), A = /* @__PURE__ */ new Set([
 	"button",
 	"checkbox",
 	"color",
@@ -81,279 +84,462 @@ var P = /* @__PURE__ */ new Set([
 	"reset",
 	"submit"
 ]);
-function I(e) {
+function j(e) {
 	let t = e.getAttribute("role");
-	if (t !== null && P.has(t)) return !0;
+	if (t !== null && k.has(t)) return !0;
 	let n = e.localName;
-	return n === "textarea" || n === "select" ? !0 : n === "input" ? !F.has(e.type) : e.matches("[contenteditable]:not([contenteditable=\"false\"])");
+	return n === "textarea" || n === "select" ? !0 : n === "input" ? !A.has(e.type) : e.matches("[contenteditable]:not([contenteditable=\"false\"])");
 }
-function L(e) {
+function M(e) {
 	return Array.from(e.querySelectorAll(m)).filter((e) => h(e));
 }
-function R(e) {
+function N(e) {
 	if (!e.parentElement) return -1;
 	let t = 0;
 	for (let n = e.previousElementSibling; n; n = n.previousElementSibling) t++;
 	return t;
 }
+function P(e) {
+	return e.hasAttribute("tabindex") ? e : M(e)[0] ?? null;
+}
+function F(e, t, n) {
+	let r = null, i = null, a = null, o = 0;
+	for (let s = e.firstElementChild; s; s = s.nextElementSibling, o++) {
+		let e = n ? R(s) : o;
+		if (e !== null) {
+			if (t.value !== void 0 && s.getAttribute("data-roving-value") === t.value) {
+				r = s;
+				break;
+			}
+			e === t.index && (i = s), a = s;
+		}
+	}
+	let s = r ?? i ?? (t.index >= 0 ? a : null);
+	return s ? P(s) : null;
+}
+function I(e) {
+	return e !== void 0 && Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0;
+}
+function L(...e) {
+	return e.filter((e) => e !== null);
+}
+function R(e) {
+	let t = e.getAttribute("data-index");
+	return t !== null && /^\d+$/.test(t) ? Number(t) : null;
+}
 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) {
-			n = o;
-			break;
+	let n = t instanceof Element ? t : null;
+	for (; n && n.parentElement !== e;) n = n.parentElement;
+	return n ? R(n) : null;
+}
+function B(e, t) {
+	for (let n = e.firstElementChild; n; n = n.nextElementSibling) if (R(n) === t) return n;
+	return null;
+}
+var V = 10;
+function he(e, t, n) {
+	let r = n - 1, i = t === null ? null : Math.min(t, r);
+	switch (e) {
+		case "ArrowDown": return i === null || i === r ? 0 : i + 1;
+		case "ArrowUp": return i === null || i === 0 ? r : i - 1;
+		case "PageDown": return i === null ? 0 : Math.min(i + V, r);
+		case "PageUp": return i === null ? r : Math.max(i - V, 0);
+		case "Home": return 0;
+		case "End": return r;
+		default: return;
+	}
+}
+var H = {
+	focused: null,
+	pending: null
+}, U = class {
+	state = H;
+	listeners = /* @__PURE__ */ new Set();
+	subscribe = (e) => (this.listeners.add(e), () => {
+		this.listeners.delete(e);
+	});
+	getSnapshot = () => this.state;
+	getServerSnapshot = () => H;
+	update(e) {
+		let t = {
+			...this.state,
+			...e
+		};
+		if (t.focused !== this.state.focused || t.pending !== this.state.pending) {
+			this.state = t;
+			for (let e of this.listeners) e();
 		}
-		a === t.index && (r = o), i = o;
 	}
-	let o = n ?? r ?? (t.index >= 0 ? i : null);
-	return o ? o.hasAttribute("tabindex") ? o : L(o)[0] ?? null : null;
+};
+function W({ grid: e, size: t }) {
+	return /* @__PURE__ */ b(e ? "div" : "li", {
+		"aria-hidden": "true",
+		role: "presentation",
+		"data-virtual-spacer": "",
+		className: ee.spacer,
+		style: { height: t }
+	});
 }
-function B(e) {
+W.displayName = "ListSpacer";
+function ge(e) {
 	for (let t = e.firstElementChild; t; t = t.nextElementSibling) if (t.hasAttribute("data-list-action")) return t;
 	return null;
 }
-function V(e) {
+function _e(e) {
 	let t = [];
-	for (let n of L(e)) {
-		let r = I(n) ? e : n;
+	for (let n of M(e)) {
+		let r = j(n) ? e : n;
 		t.includes(r) || t.push(r);
 	}
 	return 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;
+var G = (t) => {
+	let { selectable: n = !1, selectionMode: r, selectedItems: o, defaultSelectedItems: s, onSelectionChange: c, selectedItem: u, defaultSelectedItem: f, onSelectedItemChange: ne, navigationMode: p, checkmark: m = !1, virtualWindow: h, count: oe, className: se, children: ce, ref: le, onKeyDown: g, onKeyDownCapture: _, onFocus: ue, onBlur: S, ...fe } = t, C = typeof ce == "function" ? ce : null, E = h !== void 0 && oe !== void 0 && C ? h : null, D = E !== null, O = !D && (h !== void 0 || oe !== void 0 || C !== null), k = D ? I(oe) : 0, A = E?.itemSize, j = y.useMemo(() => A === void 0 ? null : {
+		count: k,
+		itemSize: A
+	}, [k, A]);
 	r === "multi" && i("List", "selectionMode=\"multi\"", "selectionMode=\"multiple\"");
-	let b = r === "multiple" || r === "multi", oe = S.useMemo(() => !b && u !== void 0 ? u === null ? O : [u] : o, [
-		b,
+	let N = r === "multiple" || r === "multi", R = y.useMemo(() => !N && u !== void 0 ? u === null ? pe : [u] : o, [
+		N,
 		u,
 		o
-	]), T = S.useMemo(() => !b && d != null ? [d] : s ?? O, [
-		b,
-		d,
+	]), V = y.useMemo(() => !N && f != null ? [f] : s ?? pe, [
+		N,
+		f,
 		s
-	]), [E, D] = te(oe, T, (e) => {
+	]), [ge, _e] = te(R, V, (e) => {
 		let t = [...e];
-		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(() => {
-		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,
+		c?.(t), N || ne?.(t[0] ?? null);
+	}), [G] = y.useState(() => new v()), K = y.useSyncExternalStore(G.subscribe, G.getSnapshot, G.getServerSnapshot), q = y.useMemo(() => K && !D ? ge.filter((e) => K.valueSet.has(e)) : ge, [
+		K,
+		ge,
+		D
+	]), ve = y.useMemo(() => new Set(q), [q]), [J] = y.useState(() => new U()), { focused: Y, pending: ye } = y.useSyncExternalStore(J.subscribe, J.getSnapshot, J.getServerSnapshot), be = y.useMemo(() => L(Y, ye), [Y, ye]), X = E && C ? E.layout(k, { keep: be }).map((e) => e.kind === "item" ? {
+		...e,
+		node: C(e.index)
+	} : e) : null, xe = C ? null : ce, Se = n && p !== "composite" && (K ? K.hasActions : me(X ? X.map((e) => e.kind === "item" ? e.node : null) : xe)), Ce = Se && !D, we = Se && D, { mode: Z, navigation: Te } = w(n, Ce, p), Q = Te !== "none", Ee = n && m;
+	y.useLayoutEffect(() => {
+		G.setActive(Q);
+	}, [G, Q]);
+	let De = K ? K.values.find((e) => ve.has(e)) ?? null : q[0] ?? null, Oe = d((e, t) => {
+		let n = t.currentTarget, r = n.ownerDocument.activeElement, i = r ? z(n, r) : null;
+		i !== null && E?.scrollToIndex(i, { align: "auto" });
+	}), { containerProps: ke, getTabIndex: Ae } = ie({
+		activeValue: n ? De : null,
 		orientation: "vertical",
-		typeahead: (M?.count ?? 0) > 7,
-		tabStop: n ? "active" : "last-focused",
+		onFocusMove: D ? Oe : void 0,
+		typeahead: (D ? k : K?.count ?? 0) > 7,
+		tabStop: n && !(D && Y !== null) ? "active" : "last-focused",
 		itemSelector: ":scope > [data-roving-value]"
-	}), { ref: ce, onKeyDown: G, onKeyDownCapture: K, onFocus: q } = U, J = S.useRef(null), le = ie(ae, B ? ce : null, J);
-	S.useLayoutEffect(() => {
-		let e = j.takeFocusLoss(), t = J.current;
+	}), { ref: je, onKeyDown: Me, onKeyDownCapture: Ne, onFocus: Pe } = ke, $ = y.useRef(null), Fe = ae(le, Q ? je : null, $, E?.scrollRef), Ie = y.useRef(!1), Le = d((e) => {
+		Q && Pe(e);
+		let t = e.currentTarget;
+		Ie.current = !t.contains(e.target);
+		let n = z(t, e.target);
+		n !== null && J.update({
+			focused: n,
+			pending: null
+		});
+	}), Re = D ? Le : Q ? Pe : void 0, ze = d((e) => {
+		let t = e.currentTarget, n = e.relatedTarget;
+		n && t.contains(n) || (Ie.current = !1, queueMicrotask(() => {
+			if (!t.isConnected || Ie.current) return;
+			let e = t.ownerDocument.activeElement;
+			e && t.contains(e) || J.update(H);
+		}));
+	}), Be = d((e) => {
+		if (!E || e.defaultPrevented || k === 0 || e.ctrlKey || e.altKey || e.metaKey) return;
+		let t = e.currentTarget;
+		if (!t.contains(e.target) || re(e.target)) return;
+		let n = z(t, e.target), r = he(e.key, J.getSnapshot().pending ?? n, k);
+		if (r === void 0) return;
+		if (e.preventDefault(), r === n) {
+			J.update({ pending: null }), E.scrollToIndex(r, { align: "auto" });
+			return;
+		}
+		let i = B(t, r);
+		if (i) {
+			J.update({ pending: null }), i.scrollIntoView?.({ block: "nearest" }), P(i)?.focus();
+			return;
+		}
+		let a = J.getSnapshot().pending;
+		J.update({ pending: r }), a !== r && E.scrollToIndex(r, { align: "auto" });
+	}), Ve = d((e) => {
+		D && Be(e), Me(e);
+	});
+	y.useLayoutEffect(() => {
+		let e = G.takeFocusLoss(), t = $.current;
 		if (!e || !t) return;
 		let n = t.ownerDocument, r = n.activeElement;
-		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);
+		r && r !== n.body && r.isConnected || F(t, e, D)?.focus();
+	}, [
+		Z,
+		G,
+		D
+	]), y.useLayoutEffect(() => {
+		let e = $.current;
+		if (!D || !e) {
+			J.update(H);
+			return;
+		}
+		let t = e.ownerDocument, n = t.activeElement, r = !n || n === t.body || !n.isConnected || n === e, { pending: i } = J.getSnapshot();
+		if (i !== null) {
+			J.update({ pending: null });
+			let t = i < k ? B(e, i) : null;
+			t && (r || e.contains(n)) && P(t)?.focus();
+		}
+		let { focused: a } = J.getSnapshot();
+		if (!(a === null || a < k)) {
+			if (r && k > 0) {
+				let t = B(e, k - 1);
+				if (t) P(t)?.focus();
+				else {
+					J.update({
+						focused: null,
+						pending: k - 1
+					}), E?.scrollToIndex(k - 1, { align: "auto" });
+					return;
+				}
+			}
+			J.getSnapshot().focused === a && J.update({ focused: null });
+		}
+	}), y.useLayoutEffect(() => {
+		if (Q) return;
+		let e = $.current, t = e?.ownerDocument.activeElement;
+		t && t.parentElement === e && !t.hasAttribute("tabindex") && M(t)[0]?.focus();
+	}, [Q]), y.useLayoutEffect(() => {
+		G.syncOrder($.current);
 	});
-	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];
+	let He = y.useCallback((e) => {
+		_e((t) => {
+			let n = D ? t : G.prune(t), r = n.includes(e);
+			return N ? r ? n.filter((t) => t !== e) : [...n, e] : r ? [] : [e];
 		});
 	}, [
-		b,
-		j,
+		N,
+		G,
+		_e,
 		D
-	]), X = M?.duplicates ?? O;
-	S.useEffect(() => {
-		for (let e of X) se(e);
-	}, [X]);
-	let Z = N.length;
-	S.useEffect(() => {
-		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".`);
+	]), Ue = K?.duplicates ?? pe;
+	y.useEffect(() => {
+		for (let e of Ue) T(e);
+	}, [Ue]);
+	let We = q.length;
+	y.useEffect(() => {
+		n && !N && We > 1 && a("List:single-several-selected", `List: a single-selection list (selectionMode "single") received ${We} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`);
 	}, [
 		n,
-		b,
-		Z
+		N,
+		We
 	]);
-	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,
+	let Ge = n && p === "items" && Ce, Ke = n && p === "none";
+	y.useEffect(() => {
+		Ge && 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\"."), Ke && 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\".");
+	}, [Ge, Ke]), y.useEffect(() => {
+		O && a("List:virtual-window-children", "List: a windowed list needs `virtualWindow`, `count` and a function child that returns the `List.Item` at an index; without one of them the window is ignored (a function child then renders nothing, and element children are all rendered).");
+	}, [O]), y.useEffect(() => {
+		we && a("List:virtual-window-actions", "List: a selectable windowed list keeps its listbox structure whatever items are rendered, so an item action sits inside an option, which cannot hold interactive content. Set navigationMode=\"composite\" to render a grid whose rows hold the actions.");
+	}, [we]);
+	let qe = y.useMemo(() => ({
+		mode: Z,
+		navigable: Q,
 		selection: n,
-		checkmark: V,
-		selectedValues: P,
-		toggleItem: Y,
-		getTabIndex: W,
-		registry: j
+		checkmark: Ee,
+		selectedValues: ve,
+		toggleItem: He,
+		getTabIndex: Ae,
+		registry: G,
+		listWindow: j
 	}), [
-		I,
-		B,
+		Z,
+		Q,
 		n,
-		V,
-		P,
-		Y,
-		W,
+		Ee,
+		ve,
+		He,
+		Ae,
+		G,
 		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
+	]), Je = Z === "grid" ? "div" : "ul", Ye = Z === "grid" ? "grid" : Z === "listbox" ? "listbox" : "list", Xe = X ? X.map((e) => e.kind === "item" ? /* @__PURE__ */ b(de.Provider, {
+		value: e.index,
+		children: e.node
+	}, e.index) : /* @__PURE__ */ b(W, {
+		grid: Z === "grid",
+		size: e.size
+	}, e.key)) : xe;
+	return /* @__PURE__ */ b(x.Provider, {
+		value: qe,
+		children: /* @__PURE__ */ b(Je, {
+			role: Ye,
+			"aria-multiselectable": n && N ? !0 : void 0,
+			"aria-rowcount": D && Z === "grid" ? k : void 0,
+			"data-navigation-mode": Te,
+			"data-checkmark": Ee ? "" : void 0,
+			tabIndex: D && Q ? -1 : void 0,
+			className: e(ee.root, "m-0 list-none p-0", D && "overflow-y-auto [overflow-anchor:none]", se),
+			...fe,
+			ref: Fe,
+			"data-roving-container": Q ? "" : void 0,
+			onKeyDown: Q ? l(g, Ve) : g,
+			onKeyDownCapture: Q ? l(_, Ne) : _,
+			onFocus: Re ? l(ue, Re, { checkDefaultPrevented: !1 }) : ue,
+			onBlur: D ? l(S, ze, { checkDefaultPrevented: !1 }) : S,
+			children: Xe
 		})
 	});
 };
-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", {
+G.displayName = "List";
+var K = "forced-colors:text-[Highlight] forced-colors:forced-color-adjust-none", q = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none";
+function ve(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", q] : ["text-primary", K], !n && "invisible");
+	return t === void 0 ? /* @__PURE__ */ b("span", {
 		"aria-hidden": "true",
 		className: i,
-		children: /* @__PURE__ */ C(v, {})
+		children: /* @__PURE__ */ b(le, {})
 	}) : 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(() => {
-		k.set(F, {
+var J = ({ value: t, action: n, onAction: r, disabledSelection: i = !1, checkmark: s, className: ee, style: te, children: m, onClick: h, onKeyDown: re, ref: ie, ...le }) => {
+	let { mode: g, navigable: _, selection: v, checkmark: x, selectedValues: S, toggleItem: fe, getTabIndex: pe, registry: w, listWindow: T } = C("ListItem"), me = y.useContext(de), E = T ? me : null, k = f("list-item"), A = t || void 0, P = A ?? k, F = c(n), [I] = y.useState(() => ({})), L = y.useRef(null), R = ae(ie, L);
+	y.useLayoutEffect(() => {
+		w.set(I, {
 			value: A,
-			hasAction: P,
-			element: z
+			hasAction: F,
+			element: L,
+			index: E ?? void 0
 		});
 	}, [
-		k,
-		F,
+		w,
+		I,
 		A,
-		P
-	]), S.useLayoutEffect(() => () => k.delete(F), [k, F]);
-	let U = d((e) => {
+		F,
+		E
+	]), y.useLayoutEffect(() => () => w.delete(I), [w, I]);
+	let z = d((e) => {
 		let t = e.parentElement;
-		k.recordFocusLoss({
+		w.recordFocusLoss({
 			value: A,
-			index: t ? R(t) : -1
+			index: E ?? (t ? N(t) : -1)
 		});
 	});
-	S.useLayoutEffect(() => {
-		let e = z.current;
+	y.useLayoutEffect(() => {
+		let e = L.current;
 		return () => {
 			if (!e) return;
 			let t = e.ownerDocument.activeElement;
-			t && e.contains(t) && k.recordFocusLoss({
+			t && e.contains(t) && w.recordFocusLoss({
 				value: A,
-				index: R(e)
+				index: E ?? N(e)
 			});
 		};
-	}, [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();
+	}, [
+		w,
+		A,
+		E
+	]);
+	let B = r !== void 0 && !_;
+	y.useEffect(() => {
+		B && 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.");
+	}, [B]);
+	let V = v && A !== void 0 && S.has(A), he = v && A !== void 0, H = v && i, U = H && r === void 0, W = () => {
+		v && !i && A !== void 0 && fe(A);
+	}, G = (e) => {
+		r?.(e), e.isDefaultPrevented() || W();
+	}, K = (e) => {
+		D(e) || G(e);
+	}, q = (e) => {
+		if (e.key === " " && he) {
+			e.preventDefault(), W();
 			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);
+		(v || r !== void 0) && (G(e), e.preventDefault());
+	}, J = (e) => {
+		D(e) || O(e) && q(e);
+	}, Y = (e) => {
+		let t = e.currentTarget, n = e.target, r = ge(t);
 		if (!r || !r.contains(n)) {
 			if (n !== t) return;
-			if (N(e)) {
-				Q(e);
+			if (O(e)) {
+				q(e);
 				return;
 			}
-			let i = f(e.key, {
+			let i = ne(e.key, {
 				orientation: "horizontal",
 				dir: p(t)
-			}) === "next" && r ? V(r)[0] : void 0;
+			}) === "next" && r ? _e(r)[0] : void 0;
 			i && (e.preventDefault(), i.focus());
 			return;
 		}
-		if (n !== r && I(n)) {
+		if (n !== r && j(n)) {
 			e.key === "Escape" && (e.preventDefault(), r.focus());
 			return;
 		}
 		if (n === r && (e.key === "Enter" || e.key === "F2")) {
-			let t = L(r).find((e) => I(e));
+			let t = M(r).find((e) => j(e));
 			t && (e.preventDefault(), t.focus());
 			return;
 		}
-		let i = f(e.key, {
+		let i = ne(e.key, {
 			orientation: "horizontal",
 			dir: p(t)
 		});
 		if (!i) return;
 		e.preventDefault();
-		let a = V(r), o = a.indexOf(n);
+		let a = _e(r), o = a.indexOf(n);
 		i === "next" ? a[o + 1]?.focus() : o > 0 ? a[o - 1].focus() : t.focus();
-	}, 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 : $)
+	}, ye = g === "grid" ? "div" : "li", be = g === "grid" ? "div" : "span", xe = g === "grid" ? "row" : g === "listbox" ? "option" : "listitem", Se = _ ? {
+		"aria-selected": v ? V : void 0,
+		tabIndex: pe(P),
+		"data-roving-value": P,
+		"data-selected": V ? "" : void 0,
+		...oe(U, { reachable: !0 }),
+		onClick: l(h, K),
+		onKeyDown: l(re, g === "grid" ? Y : J)
 	} : {
-		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 ? [
+		onClick: r ? l(h, K) : h,
+		onKeyDown: re
+	}, Ce = v ? U ? "cursor-default" : "cursor-pointer" : r && "cursor-pointer", we = v ? !U : r !== void 0, Z = s != null && c(s), Te = v && (s == null ? x : Z), Q = T && E !== null ? {
+		"data-index": E,
+		...g === "grid" ? { "aria-rowindex": E + 1 } : {
+			"aria-setsize": T.count,
+			"aria-posinset": E + 1
+		}
+	} : {};
+	return /* @__PURE__ */ ue(ye, {
+		role: xe,
+		"data-disabled-selection": H ? "" : void 0,
+		className: e(u.root, "flex items-center border-b border-border px-4 py-2 text-body-1", E !== null && "box-border", _ ? [
 			"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,
+			Ce,
+			se
+		] : Ce, V ? ["bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary", ce.selectedContainer] : we && "hover:bg-subtle-hover", ee),
+		style: T && E !== null ? {
+			...te,
+			height: T.itemSize
+		} : te,
+		...le,
+		ref: R,
+		...Se,
+		...Q,
 		children: [
-			/* @__PURE__ */ C(fe, {
-				role: y === "grid" ? "gridcell" : void 0,
+			/* @__PURE__ */ b(be, {
+				role: g === "grid" ? "gridcell" : void 0,
 				className: e(u.content, "min-w-0 flex-1"),
-				children: te
+				children: m
 			}),
-			P && /* @__PURE__ */ C(le, {
-				grid: y === "grid",
-				onRemovedWithFocus: U,
+			F && /* @__PURE__ */ b(X, {
+				grid: g === "grid",
+				onRemovedWithFocus: z,
 				children: o(n)
 			}),
-			ve && ce(_e ? s : void 0, {
-				selected: G,
-				disabled: q
+			Te && ve(Z ? s : void 0, {
+				selected: V,
+				disabled: H
 			})
 		]
 	});
 };
-G.displayName = "ListItem";
-var K = ["[data-roving-container]", ...[
+J.displayName = "ListItem";
+var Y = ["[data-roving-container]", ...[
 	"toolbar",
 	"radiogroup",
 	"listbox",
@@ -363,19 +549,19 @@ var K = ["[data-roving-container]", ...[
 	"menu",
 	"menubar",
 	"tree"
-].map((e) => `[role="${e}"]`)].join(", "), q = [
+].map((e) => `[role="${e}"]`)].join(", "), ye = [
 	"tabindex",
 	"href",
 	"contenteditable",
 	"controls"
 ];
-function J(e) {
+function be(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(m)) {
 			let i = r.getAttribute("tabindex");
 			if (i === "-1" || n.has(r)) continue;
-			let a = r.closest(K);
+			let a = r.closest(Y);
 			a && e.contains(a) || (t.set(r, i), r.setAttribute("tabindex", "-1"));
 		}
 	};
@@ -396,26 +582,26 @@ function J(e) {
 		subtree: !0,
 		childList: !0,
 		attributes: !0,
-		attributeFilter: q
+		attributeFilter: ye
 	}), () => {
 		i.disconnect();
 		for (let [e, n] of t) n === null ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", n);
 		t.clear();
 	};
 }
-function le({ grid: t, onRemovedWithFocus: n, children: r }) {
-	let i = S.useRef(null);
-	return S.useLayoutEffect(() => {
+function X({ grid: t, onRemovedWithFocus: n, children: r }) {
+	let i = y.useRef(null);
+	return y.useLayoutEffect(() => {
 		let e = i.current;
 		return () => {
 			if (!e) return;
 			let t = e.ownerDocument.activeElement;
 			t && e.contains(t) && n(e);
 		};
-	}, [n, t]), S.useLayoutEffect(() => {
+	}, [n, t]), y.useLayoutEffect(() => {
 		let e = i.current;
-		return t && e ? J(e) : void 0;
-	}, [t]), /* @__PURE__ */ C(t ? "div" : "span", {
+		return t && e ? be(e) : void 0;
+	}, [t]), /* @__PURE__ */ b(t ? "div" : "span", {
 		ref: i,
 		role: t ? "gridcell" : void 0,
 		tabIndex: t ? -1 : void 0,
@@ -424,9 +610,9 @@ function le({ grid: t, onRemovedWithFocus: n, children: r }) {
 		children: r
 	});
 }
-le.displayName = "ListActionCell";
-var Y = /* @__PURE__ */ Object.assign(H, { Item: G });
+X.displayName = "ListActionCell";
+var xe = /* @__PURE__ */ Object.assign(G, { Item: J });
 //#endregion
-export { Y as List, G as ListItem };
+export { xe as List, J as ListItem };
 
 //# sourceMappingURL=List.mjs.map