@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/list/List.js

@@ -0,0 +1,1386 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { useM3Interaction } from "../../primitives/use-m3-interaction.js";
+import { TouchTarget } from "../../primitives/TouchTarget.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { warnOnce } from "../../utils/warn-once.js";
+import { DomDirectionLocale } from "../../primitives/DomDirectionLocale.js";
+import { FOCUSABLE_DISABLED_OPTIONS } from "../../utils/focusable-disabled.js";
+import { assertCollectionChildren } from "../../utils/assert-collection-children.js";
+import { useNearestReveal } from "../../utils/nearest-reveal.js";
+import { splitRootProps } from "../../utils/root-props.js";
+import { preventHiddenInputScroll } from "../../primitives/hidden-input-focus.js";
+import { CheckboxBox } from "../checkbox/checkbox-box.js";
+import { RadioRing } from "../radio/radio-ring.js";
+import { switchStyles } from "../switch/switch-styles.js";
+import { CheckIcon, CloseIcon, SwitchThumb, thumbGeometry } from "../switch/switch-thumb.js";
+import { useKeepPressedInPlace } from "../../utils/keep-pressed-in-place.js";
+import { listStyles } from "./list-styles.js";
+import { ListMediaContext } from "./ListMedia.js";
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden, mergeProps, mergeRefs, useButton, useCheckbox, useFocusRing, useGridList, useGridListItem, useGridListSection, useHover, useLink, useListBox, useListBoxSection, useObjectRef, useOption, useRadio, useRadioGroup, useTree, useTreeItem } from "react-aria";
+import { useListState, useRadioGroupState, useToggleState, useTreeState } from "react-stately";
+//#region src/components/list/List.tsx
+/**
+* A `ListItem` renders itself only in a plain or radio list, which hand it its place through
+* context. Interactive lists read its props through `getCollectionNode` and never render it.
+*/
+function ListItemElement(props) {
+	const entry = useContext(ListEntryContext);
+	const radio = useContext(RadioListContext);
+	const plain = useContext(StaticListContext);
+	if (!entry) return null;
+	if (radio) return /* @__PURE__ */ jsx(RadioListItem, {
+		item: props,
+		radio,
+		position: entry.position
+	});
+	if (plain) return /* @__PURE__ */ jsx(StaticListItem, {
+		item: props,
+		list: plain,
+		entry
+	});
+	return null;
+}
+/**
+* Describes the item to React Stately's collection builder, as its `Item` does: the
+* headline is the item's content, and `childItems` are its nested items.
+*/
+ListItemElement.getCollectionNode = function* getCollectionNode(props) {
+	const rendered = props.children;
+	const textValue = props.textValue || (typeof rendered === "string" ? rendered : "") || props["aria-label"] || "";
+	if (!textValue) warnOnce("list-item-text-value", "[@windmorph/react] A ListItem whose headline is not plain text needs a textValue for type-ahead.");
+	const children = listItems(props.childItems);
+	yield {
+		type: "item",
+		props,
+		rendered,
+		textValue,
+		"aria-label": props["aria-label"],
+		hasChildNodes: children.length > 0,
+		*childNodes() {
+			for (const element of children) yield {
+				type: "item",
+				element
+			};
+		}
+	};
+};
+/**
+* An item of a {@link List}. Like React Stately's collection `Item`, the list reads its
+* props; identify it with a React `key`.
+*/
+const ListItem = ListItemElement;
+/**
+* A `ListSection` renders itself only in a plain list: its subheader, and its items, each
+* told through context that it sits in this section and where. Interactive lists read it
+* through `getCollectionNode`. It never needs its type compared, so a section created in a
+* Server Component (whose type reaches the client as a lazy client reference) renders the
+* same as one created in the browser.
+*/
+function ListSectionElement(props) {
+	const entry = useContext(ListEntryContext);
+	const plain = useContext(StaticListContext);
+	if (useContext(RadioListContext)) throw new Error("[@windmorph/react] List: a radio list can't hold ListSections. Use one radio list per group, or a list with selectionMode=\"single\".");
+	const register = plain?.registerSection;
+	const index = entry?.index;
+	useLayoutEffect(() => {
+		if (register == null || index == null || entry?.inSection) return void 0;
+		return register(index);
+	}, [
+		register,
+		index,
+		entry?.inSection
+	]);
+	if (!plain || !entry) return null;
+	const items = listItems(props.children);
+	return /* @__PURE__ */ jsx(StaticSection, {
+		section: props,
+		variant: plain.variant,
+		classNames: plain.classNames,
+		children: items.map((item, itemIndex) => /* @__PURE__ */ jsx(ListEntryContext, {
+			value: {
+				index: itemIndex,
+				position: position(itemIndex, items.length),
+				inSection: true,
+				disabled: plain.isKeyDisabled(item.key)
+			},
+			children: item
+		}, item.key ?? itemIndex))
+	});
+}
+/** Describes the section to React Stately's collection builder, as its `Section` does. */
+ListSectionElement.getCollectionNode = function* getCollectionNode(props) {
+	const children = listItems(props.children);
+	yield {
+		type: "section",
+		props,
+		rendered: props.title,
+		"aria-label": props["aria-label"],
+		hasChildNodes: true,
+		*childNodes() {
+			for (const element of children) yield {
+				type: "item",
+				element
+			};
+		}
+	};
+};
+/**
+* A labelled group of items in a {@link List}, under a subheader (`title`). Identify it with
+* a React `key`, like its items. Arrow keys move across sections as through one list.
+* Sections go in static, action (grid) and selection (list box) lists, not in radio lists
+* or lists with `childItems`.
+*
+* @example
+* <List aria-label="Settings" onAction={open}>
+*   <ListSection key="network" title="Network">
+*     <ListItem key="wifi">Wi‑Fi</ListItem>
+*   </ListSection>
+* </List>
+*/
+const ListSection = ListSectionElement;
+const ListOptionsContext = createContext({});
+/**
+* M3 Expressive list: items with a headline, optional overline and supporting text, and
+* leading and trailing content, flush (standard) or segmented into rounded groups.
+*
+* With `selectionMode` it is a list box of options (`listbox` / `option`), and selected items
+* show a check. With `onAction` or links it is an interactive grid list, where ← / → reach
+* trailing controls. Items with `childItems` expand and collapse (a tree grid). Interactive
+* items get state layers and morph their corners on hover, focus, press and selection, and
+* ↑ / ↓ move between them, wrapping at the ends. Otherwise it is a plain `ul`.
+*
+* Items can lead with M3's image or video thumbnail (`ListItemImage`, `ListItemVideo`),
+* limit their lines (`headlineLines`, `supportingTextLines`), and standard lists can draw
+* `dividers`.
+*
+* @example
+* <List variant="segmented" aria-label="Settings" onAction={open}>
+*   <ListItem key="wifi" leading={<WifiIcon />} supportingText="Connected">Wi‑Fi</ListItem>
+*   <ListItem key="bluetooth" leading={<BluetoothIcon />}>Bluetooth</ListItem>
+* </List>
+*/
+function List({ density, ...props }) {
+	const { headlineLines, supportingTextLines, dividers, selectionIndicator, classNames } = props;
+	if (dividers != null && props.variant === "segmented") throw new Error("[@windmorph/react] List: dividers are for standard lists; segmented items are already apart.");
+	return /* @__PURE__ */ jsx(ListOptionsContext, {
+		value: {
+			headlineLines,
+			supportingTextLines,
+			dividers,
+			selectionIndicator
+		},
+		children: /* @__PURE__ */ jsx(ListMediaContext, {
+			value: classNames?.media,
+			children: /* @__PURE__ */ jsx(ListBody, {
+				...props,
+				...densityAttribute(density)
+			})
+		})
+	});
+}
+const RADIO_ITEM_ERROR = "[@windmorph/react] List: every item of a radio list (one with value, defaultValue or onChange) needs a value, and none can have a control or an href.";
+const CONTROL_ERROR = "[@windmorph/react] List: switch and checkbox items (control) can't be in a list with onAction, links, selectionMode or childItems. Put them in their own list, or put a Switch in an item's trailing content.";
+const EXPANDABLE_SECTIONS_ERROR = "[@windmorph/react] List: a list with childItems can't hold ListSections; nest the groups as expandable items instead.";
+/**
+* Picks the list's kind from its own props and its top-level entries' props; it never looks
+* at an entry's element type. A plain or radio list renders its entries, which place
+* themselves through context (`ListEntryContext`); an interactive list hands them to React
+* Stately's collection builder, which reads each through its `getCollectionNode`.
+*/
+function ListBody(props) {
+	const entries = listItems(props.children);
+	if (props.value !== void 0 || props.defaultValue !== void 0 || props.onChange !== void 0) return /* @__PURE__ */ jsx(RadioList, {
+		...props,
+		entries
+	});
+	const selectable = props.selectionMode != null && props.selectionMode !== "none";
+	const expandable = entries.some((entry) => listItems(entry.props.childItems).length > 0);
+	if (!(props.onAction != null || selectable || expandable)) return /* @__PURE__ */ jsx(StaticList, {
+		...props,
+		entries
+	});
+	return /* @__PURE__ */ jsx(InteractiveList, {
+		...props,
+		expandable
+	});
+}
+function itemLines(item) {
+	const extra = Number(item.overline != null) + Number(item.supportingText != null);
+	return extra === 2 ? 3 : extra === 1 ? 2 : 1;
+}
+function itemStylesOptions(item, variant, interactive, options) {
+	const headlineLines = item.headlineLines ?? options.headlineLines;
+	const supportingTextLines = item.supportingTextLines ?? options.supportingTextLines;
+	return {
+		variant,
+		interactive,
+		lines: itemLines(item),
+		...item.verticalAlignment && { align: item.verticalAlignment },
+		...options.dividers && { dividers: options.dividers },
+		...headlineLines && { headlineLines },
+		...supportingTextLines && { supportingTextLines }
+	};
+}
+function itemStyles(item, variant, interactive, options) {
+	return listStyles(itemStylesOptions(item, variant, interactive, options));
+}
+/**
+* The component tokens' hooks (`list-tokens.ts`), on a list's root and on each item, so an
+* item's own state (`data-selected`) picks its colours. On the root, any set the app passed
+* (`props`) follows the list's own.
+*/
+function tokenAttributes(variant, props) {
+	return {
+		"data-tokens": mergeDataTokens("md-comp-list", props),
+		"data-variant": variant ?? "standard"
+	};
+}
+/** An item's token hooks and its `data-slot`. */
+function itemAttributes(variant) {
+	return {
+		...tokenAttributes(variant),
+		"data-slot": "item"
+	};
+}
+function position(index, count) {
+	if (count === 1) return "only";
+	if (index === 0) return "first";
+	return index === count - 1 ? "last" : "middle";
+}
+function ItemContent({ item, styles, classNames, ids, control, controlPlacement, headline, sideClassName, end, textHidden }) {
+	const leading = controlPlacement === "start" ? control : null;
+	const trailing = controlPlacement === "end" ? control : end;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		(item.leading != null || leading != null) && /* @__PURE__ */ jsxs("span", {
+			ref: (cell) => hideDecorativeIcons(cell),
+			"data-slot": "leading",
+			className: styles.leading({ class: cn(sideClassName, classNames?.leading) }),
+			children: [leading, item.leading]
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": textHidden || void 0,
+			className: styles.text({ class: classNames?.text }),
+			children: [
+				item.overline != null && /* @__PURE__ */ jsx("span", {
+					id: ids?.overline,
+					"data-slot": "overline",
+					className: styles.overline({ class: classNames?.overline }),
+					children: item.overline
+				}),
+				/* @__PURE__ */ jsx("span", {
+					id: ids?.headline,
+					"data-slot": "headline",
+					className: styles.headline({ class: classNames?.headline }),
+					children: headline ? headline(item.children) : item.children
+				}),
+				item.supportingText != null && /* @__PURE__ */ jsx("span", {
+					id: ids?.supporting,
+					"data-slot": "supporting",
+					className: styles.supporting({ class: classNames?.supportingText }),
+					children: item.supportingText
+				})
+			]
+		}),
+		(item.trailing != null || trailing != null) && /* @__PURE__ */ jsxs("span", {
+			ref: (cell) => hideDecorativeIcons(cell),
+			"data-slot": "trailing",
+			className: styles.trailing({ class: cn(sideClassName, classNames?.trailing) }),
+			children: [item.trailing, trailing]
+		})
+	] });
+}
+/**
+* Hides the bare icons of an item's leading or trailing content from assistive tech: an
+* `<svg>` child with no name of its own (`aria-label`, `aria-labelledby`, `role`, `<title>`)
+* is decorative, since the item's text names the item, and would otherwise be listed as an
+* unnamed image. A ref callback, so it also reaches icons that components render; it runs
+* on every render (no layout reads), so a replaced icon is hidden too.
+*/
+function hideDecorativeIcons(cell) {
+	if (!cell) return;
+	for (const svg of cell.querySelectorAll(":scope > svg")) {
+		if (svg.hasAttribute("aria-label") || svg.hasAttribute("aria-labelledby") || svg.hasAttribute("role") || svg.querySelector(":scope > title")) continue;
+		svg.setAttribute("aria-hidden", "true");
+	}
+}
+const StaticListContext = createContext(null);
+const ListEntryContext = createContext(null);
+/**
+* The positions of a plain list's top-level entries: each run of items between sections is
+* its own group. Sections are known once they've told the list (`registerSection`); before
+* that (the server render and the first client render) every entry counts as an item.
+*/
+function entryPositions(count, sections) {
+	const positions = [];
+	let start = 0;
+	for (let index = 0; index <= count; index += 1) {
+		if (index < count && !sections.has(index)) continue;
+		for (let item = start; item < index; item += 1) positions[item] = position(item - start, index - start);
+		if (index < count) positions[index] = "only";
+		start = index + 1;
+	}
+	return positions;
+}
+function StaticList({ variant, disabled, classNames, className, style, ref, entries, ...rest }) {
+	const { root: data } = splitRootProps(rest);
+	const rootTokens = tokenAttributes(variant, data);
+	const { "aria-label": label, "aria-labelledby": labelledBy } = rest;
+	const root = listStyles({ variant }).root({ class: cn(classNames?.root, className) });
+	const [sections, setSections] = useState(() => /* @__PURE__ */ new Set());
+	const registerSection = useCallback((index) => {
+		setSections((current) => current.has(index) ? current : new Set(current).add(index));
+		return () => setSections((current) => {
+			const next = new Set(current);
+			next.delete(index);
+			return next;
+		});
+	}, []);
+	const disabledKeys = rest.disabledKeys;
+	const list = useMemo(() => {
+		const keys = new Set(disabledKeys ?? []);
+		return {
+			variant,
+			classNames,
+			isKeyDisabled: (key) => Boolean(disabled) || key != null && keys.has(key),
+			registerSection
+		};
+	}, [
+		variant,
+		classNames,
+		disabled,
+		disabledKeys,
+		registerSection
+	]);
+	const positions = entryPositions(entries.length, sections);
+	return /* @__PURE__ */ jsx("ul", {
+		...data,
+		...rootTokens,
+		id: rest.id,
+		ref,
+		style,
+		"aria-label": label,
+		"aria-labelledby": labelledBy,
+		onKeyDown: onLinkArrowKeys,
+		className: root,
+		children: /* @__PURE__ */ jsx(StaticListContext, {
+			value: list,
+			children: entries.map((entry, index) => /* @__PURE__ */ jsx(ListEntryContext, {
+				value: {
+					index,
+					position: positions[index],
+					inSection: false,
+					disabled: list.isKeyDisabled(entry.key)
+				},
+				children: entry
+			}, entry.key ?? index))
+		})
+	});
+}
+/** An item of a plain list: a link, a switch or checkbox, or a plain row. */
+function StaticListItem({ item, list, entry }) {
+	const options = useContext(ListOptionsContext);
+	if (entry.inSection && listItems(item.childItems).length > 0) throw new Error(EXPANDABLE_SECTIONS_ERROR);
+	const { variant, classNames } = list;
+	const isDisabled = Boolean(entry.disabled || item.disabled);
+	if (item.href != null) return /* @__PURE__ */ jsx(LinkItem, {
+		item,
+		variant,
+		classNames,
+		position: entry.position,
+		isDisabled
+	});
+	if (item.control != null) return /* @__PURE__ */ jsx("li", {
+		"data-list-entry": "",
+		children: /* @__PURE__ */ jsx(ToggleItem, {
+			item,
+			control: item.control,
+			variant,
+			classNames,
+			position: entry.position,
+			listDisabled: isDisabled
+		})
+	});
+	const styles = itemStyles(item, variant, false, options);
+	return /* @__PURE__ */ jsx("li", {
+		"data-list-entry": "",
+		"data-shape": "rest",
+		"data-position": entry.position,
+		...itemAttributes(variant),
+		className: styles.item({ class: cn(classNames?.item, item.className) }),
+		children: /* @__PURE__ */ jsx("span", {
+			className: styles.cell(),
+			children: /* @__PURE__ */ jsx(ItemContent, {
+				item,
+				styles,
+				classNames
+			})
+		})
+	});
+}
+/**
+* Arrow keys between a list's links (M3: "navigate within the list using arrow keys"):
+* ↑ / ↓ move focus to the previous or next link, wrapping at the ends, and Home / End to
+* the first and last. Each link stays a real anchor and a Tab stop; disabled items have no
+* link and are skipped.
+*/
+function onLinkArrowKeys(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+	if (![
+		"ArrowUp",
+		"ArrowDown",
+		"Home",
+		"End"
+	].includes(event.key)) return;
+	const links = [...event.currentTarget.querySelectorAll("a[href][data-list-link]")];
+	const index = links.indexOf(event.target);
+	if (index === -1) return;
+	const last = links.length - 1;
+	const target = event.key === "Home" ? 0 : event.key === "End" ? last : event.key === "ArrowDown" ? index === last ? 0 : index + 1 : index === 0 ? last : index - 1;
+	event.preventDefault();
+	links[target].focus();
+}
+/** The collection's top-level nodes as groups: each section, and each run of items. */
+function groupNodes(collection) {
+	const groups = [];
+	for (const node of collection) {
+		if (node.type === "section") {
+			const items = [...collection.getChildren(node.key)].filter((child) => child.type === "item");
+			groups.push({
+				section: node,
+				items
+			});
+			continue;
+		}
+		const last = groups.at(-1);
+		if (last?.section === null) last.items.push(node);
+		else groups.push({
+			section: null,
+			items: [node]
+		});
+	}
+	return groups;
+}
+/** The name of a section's group: its `aria-label`, else its subheader. */
+function sectionNaming(section, headingId) {
+	return section["aria-label"] != null ? { "aria-label": section["aria-label"] } : { "aria-labelledby": headingId };
+}
+/** A section of a plain list: a subheader and a nested list named by it. */
+function StaticSection({ section, variant, classNames, children }) {
+	const headingId = useId();
+	const styles = listStyles({
+		variant,
+		titled: section.title != null
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "section",
+		className: styles.section({ class: cn(classNames?.section, section.className) }),
+		children: [section.title != null && /* @__PURE__ */ jsx("div", {
+			id: headingId,
+			className: styles.subheader({ class: classNames?.subheader }),
+			children: section.title
+		}), /* @__PURE__ */ jsx("ul", {
+			...sectionNaming(section, headingId),
+			className: styles.group(),
+			children
+		})]
+	});
+}
+function InteractiveList(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(CollectionList, {
+		...props,
+		directionRef
+	}) });
+}
+/** Material Symbols "check" and "expand_more" (Apache-2.0). */
+function CheckIcon20() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsx("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
+	});
+}
+function ExpandMoreIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsx("path", { d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })
+	});
+}
+/**
+* A grid list (`onAction`, links), a list box (selection) or a tree grid (`childItems`),
+* from React Aria's collection hooks. Arrow keys wrap at the ends, as M3 asks.
+*/
+function CollectionList({ expandable, variant, disabled, deselectable = true, classNames, className, style, ref, directionRef, ...rest }) {
+	const { root: data, rest: ariaProps } = splitRootProps(rest);
+	assertCollectionChildren(rest.children, "List", "ListItem elements");
+	const scan = useCollectionScan(rest.children);
+	if (scan.items.some((item) => item.control != null)) throw new Error(CONTROL_ERROR);
+	if (expandable && scan.sectioned) throw new Error(EXPANDABLE_SECTIONS_ERROR);
+	const selectable = rest.selectionMode != null && rest.selectionMode !== "none";
+	const kind = expandable ? "tree" : selectable && rest.onAction == null && !scan.items.some((item) => item.href != null) ? "listbox" : "grid";
+	const disabledKeys = new Set(rest.disabledKeys ?? []);
+	for (const [key, item] of scan.entries) if (disabled || item.disabled) disabledKeys.add(key);
+	const root = {
+		options: {
+			...ariaProps,
+			disabledKeys: disabledKeys.size > 0 ? disabledKeys : rest.disabledKeys,
+			disallowEmptySelection: !deselectable,
+			...FOCUSABLE_DISABLED_OPTIONS,
+			shouldFocusWrap: true
+		},
+		listRef: ref,
+		directionRef,
+		data: {
+			...data,
+			...tokenAttributes(variant, data)
+		},
+		style,
+		className: listStyles({ variant }).root({ class: cn(classNames?.root, className) }),
+		variant,
+		classNames
+	};
+	if (kind === "tree") return /* @__PURE__ */ jsx(TreeList, { ...root });
+	if (kind === "listbox") return /* @__PURE__ */ jsx(ListBoxList, { ...root });
+	return /* @__PURE__ */ jsx(GridList, { ...root });
+}
+function GridList({ options, listRef, directionRef, data, style, className, variant, classNames }) {
+	const rootRef = useObjectRef(listRef);
+	const state = useListState(options);
+	const { gridProps } = useGridList(options, state, rootRef);
+	useNearestReveal(rootRef);
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(data, gridProps),
+		ref: (element) => {
+			rootRef.current = element;
+			directionRef(element);
+		},
+		style,
+		className,
+		children: groupNodes(state.collection).map((group) => {
+			const rows = group.items.map((node, index) => /* @__PURE__ */ jsx(GridListRow, {
+				node,
+				state,
+				variant,
+				classNames,
+				position: position(index, group.items.length)
+			}, node.key));
+			return group.section ? /* @__PURE__ */ jsx(GridListSection, {
+				node: group.section,
+				state,
+				variant,
+				classNames,
+				children: rows
+			}, group.section.key) : rows;
+		})
+	});
+}
+/**
+* A section of a grid list: a row group named by its subheader, a header row holding a row
+* header (React Aria's `GridListSection` structure), then the items' rows.
+*/
+function GridListSection({ node, state, variant, classNames, children }) {
+	const ref = useRef(null);
+	const section = node.props;
+	const { rowProps, rowHeaderProps, rowGroupProps } = useGridListSection({ "aria-label": section["aria-label"] }, state, ref);
+	const styles = listStyles({
+		variant,
+		titled: section.title != null
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...rowGroupProps,
+		...section["aria-label"] != null && { "aria-labelledby": void 0 },
+		ref,
+		className: styles.section({ class: cn(classNames?.section, section.className) }),
+		children: [section.title != null && /* @__PURE__ */ jsx("div", {
+			...rowProps,
+			children: /* @__PURE__ */ jsx("div", {
+				...rowHeaderProps,
+				className: styles.subheader({ class: classNames?.subheader }),
+				children: section.title
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: styles.group(),
+			children
+		})]
+	});
+}
+/** Compose's shape precedence: pressed, then selected or focused (16px), then hovered (12px). */
+function shapeOf(state) {
+	if (state.isPressed && !state.isDisabled || state.isSelected || state.isFocusVisible) return "active";
+	return state.isHovered && !state.isDisabled ? "hovered" : "rest";
+}
+/** The check a selected item shows at its end, when the list selects and shows it. */
+function useSelectionCheck(styles, selectable, className) {
+	const { selectionIndicator = true } = useContext(ListOptionsContext);
+	if (!selectable || !selectionIndicator) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-selection-indicator": "",
+		className: styles.selectionIndicator({ class: className }),
+		children: /* @__PURE__ */ jsx(CheckIcon20, {})
+	});
+}
+function GridListRow({ node, state, variant, classNames, position: itemPosition }) {
+	const item = node.props;
+	const ref = useRef(null);
+	const { rowProps: ownRowProps, gridCellProps, descriptionProps, isPressed, isSelected } = useGridListItem({ node }, state, ref);
+	const isDisabled = state.disabledKeys.has(node.key);
+	const rowProps = isDisabled ? focusOnly(ownRowProps) : ownRowProps;
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled,
+		isPressed
+	}, ref);
+	const shape = shapeOf({
+		isPressed,
+		isSelected,
+		isFocusVisible: dataAttributes["data-focus-visible"] != null,
+		isHovered,
+		isDisabled
+	});
+	const styles = itemStyles(item, variant, true, useContext(ListOptionsContext));
+	const check = useSelectionCheck(styles, state.selectionManager.selectionMode !== "none", classNames?.selectionIndicator);
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(rowProps, hoverProps, interactionProps),
+		...dataAttributes,
+		"aria-disabled": isDisabled || void 0,
+		ref,
+		"data-selected": isSelected || void 0,
+		"data-shape": shape,
+		"data-position": itemPosition,
+		...itemAttributes(variant),
+		className: styles.item({ class: cn(classNames?.item, item.className) }),
+		children: /* @__PURE__ */ jsx("div", {
+			...gridCellProps,
+			className: styles.cell(),
+			children: /* @__PURE__ */ jsx(ItemContent, {
+				item,
+				styles,
+				classNames,
+				ids: { supporting: descriptionProps.id },
+				end: check
+			})
+		})
+	});
+}
+const FOCUSABLE = "a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+/**
+* A disabled item's props: its role, ARIA, id, tab index and focus handlers, but no press, key
+* or pointer handlers, so it takes focus (APG) and does nothing else.
+*/
+function focusOnly(props) {
+	return Object.fromEntries(Object.entries(props).filter(([name]) => !/^on[A-Z]/.test(name) || name === "onFocus" || name === "onBlur"));
+}
+/** A list box of options: M3's single- and multi-select lists on the web. */
+function ListBoxList({ options, listRef, directionRef, data, style, className, variant, classNames }) {
+	const rootRef = useObjectRef(listRef);
+	const listBoxOptions = options;
+	const state = useListState(listBoxOptions);
+	const { listBoxProps } = useListBox(listBoxOptions, state, rootRef);
+	useNearestReveal(rootRef);
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(data, listBoxProps),
+		ref: (element) => {
+			rootRef.current = element;
+			directionRef(element);
+		},
+		style,
+		className,
+		children: groupNodes(state.collection).map((group) => {
+			const rows = group.items.map((node, index) => /* @__PURE__ */ jsx(OptionRow, {
+				node,
+				state,
+				variant,
+				classNames,
+				position: position(index, group.items.length)
+			}, node.key));
+			return group.section ? /* @__PURE__ */ jsx(ListBoxSection, {
+				node: group.section,
+				variant,
+				classNames,
+				children: rows
+			}, group.section.key) : rows;
+		})
+	});
+}
+/** A section of a list box: a subheader and a group of options named by it. */
+function ListBoxSection({ node, variant, classNames, children }) {
+	const section = node.props;
+	const { itemProps, headingProps, groupProps } = useListBoxSection({
+		heading: section.title,
+		"aria-label": section["aria-label"]
+	});
+	const styles = listStyles({
+		variant,
+		titled: section.title != null
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...itemProps,
+		className: styles.section({ class: cn(classNames?.section, section.className) }),
+		children: [section.title != null && /* @__PURE__ */ jsx("div", {
+			...headingProps,
+			className: styles.subheader({ class: classNames?.subheader }),
+			children: section.title
+		}), /* @__PURE__ */ jsx("div", {
+			...groupProps,
+			...section["aria-label"] != null && { "aria-labelledby": void 0 },
+			className: styles.group(),
+			children
+		})]
+	});
+}
+function OptionRow({ node, state, variant, classNames, position: itemPosition }) {
+	const item = node.props;
+	const ref = useRef(null);
+	const { optionProps: ownOptionProps, isPressed, isSelected } = useOption({ key: node.key }, state, ref);
+	const isDisabled = state.disabledKeys.has(node.key);
+	const optionProps = isDisabled ? {
+		...focusOnly(ownOptionProps),
+		"aria-disabled": true
+	} : ownOptionProps;
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled,
+		isPressed
+	}, ref);
+	const shape = shapeOf({
+		isPressed,
+		isSelected,
+		isFocusVisible: dataAttributes["data-focus-visible"] != null,
+		isHovered,
+		isDisabled
+	});
+	const styles = itemStyles(item, variant, true, useContext(ListOptionsContext));
+	const check = useSelectionCheck(styles, true, classNames?.selectionIndicator);
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		const nested = ref.current?.querySelector(FOCUSABLE);
+		if (nested) console.warn("[@windmorph/react] List: an item of a selection list is one option and must not hold buttons, links or fields. Give the list onAction to keep separate trailing actions.", nested);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(optionProps, hoverProps, interactionProps),
+		...dataAttributes,
+		"aria-labelledby": void 0,
+		"aria-describedby": void 0,
+		ref,
+		"data-selected": isSelected || void 0,
+		"data-shape": shape,
+		"data-position": itemPosition,
+		...itemAttributes(variant),
+		className: styles.item({ class: cn(classNames?.item, item.className) }),
+		children: /* @__PURE__ */ jsx("span", {
+			className: styles.cell(),
+			children: /* @__PURE__ */ jsx(ItemContent, {
+				item,
+				styles,
+				classNames,
+				end: check
+			})
+		})
+	});
+}
+/** A tree grid: items with `childItems` expand and collapse to show their nested items. */
+function TreeList({ options, listRef, directionRef, data, style, className, variant, classNames }) {
+	const rootRef = useObjectRef(listRef);
+	const treeOptions = options;
+	const state = useTreeState(treeOptions);
+	const { gridProps } = useTree(treeOptions, state, rootRef);
+	const { shown, onExited, version } = useRowPresence([...state.collection.getKeys()].map((key) => state.collection.getItem(key)).filter((node) => node?.type === "item"));
+	const { capture, release } = useKeepPressedInPlace("[role=row]", version, shown.some((row) => row.exiting));
+	const reveal = listStyles({ variant });
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(data, gridProps, {
+			onPointerDownCapture: capture,
+			onKeyDownCapture: capture,
+			onPointerUpCapture: release,
+			onKeyUpCapture: release,
+			onClickCapture: (event) => {
+				if (event.detail === 0) capture(event);
+				release();
+			}
+		}),
+		ref: (element) => {
+			rootRef.current = element;
+			directionRef(element);
+		},
+		style,
+		className,
+		children: shown.map((row) => /* @__PURE__ */ jsx(TreeRowReveal, {
+			row,
+			onExited,
+			className: reveal.reveal(),
+			clipClassName: reveal.revealClip(),
+			children: row.exiting ? /* @__PURE__ */ jsx(TreeRowGhost, {
+				node: row.node,
+				selectable: state.selectionManager.selectionMode !== "none",
+				variant,
+				classNames,
+				position: row.position
+			}) : /* @__PURE__ */ jsx(TreeRow, {
+				node: row.node,
+				state,
+				variant,
+				classNames,
+				position: row.position
+			})
+		}, row.node.key))
+	});
+}
+/** Whether the reader asks for reduced motion (read on a change, never on the server). */
+const prefersReducedMotion = () => typeof window !== "undefined" && (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false);
+/**
+* The rows to render: the tree's visible rows, plus rows that just left it (a collapsed
+* item's nested rows) in their old place until their closing transition ends. Rows added
+* after the first render are marked to open in.
+*/
+function useRowPresence(rows) {
+	const live = (node, index, appear) => ({
+		node,
+		position: position(index, rows.length),
+		appear,
+		exiting: false
+	});
+	const keys = rows.map((node) => node.key);
+	const [presence, setPresence] = useState(() => ({
+		keys,
+		shown: rows.map((node, index) => live(node, index, false))
+	}));
+	let { shown } = presence;
+	if (keys.length !== presence.keys.length || keys.some((key, i) => key !== presence.keys[i])) {
+		const indexOf = new Map(rows.map((node, index) => [node.key, index]));
+		const before = new Map(shown.map((row) => [row.node.key, row]));
+		const next = [];
+		let cursor = 0;
+		const takeUpTo = (end) => {
+			for (; cursor <= end; cursor += 1) {
+				const node = rows[cursor];
+				const previous = before.get(node.key);
+				next.push(live(node, cursor, previous ? previous.appear : true));
+			}
+		};
+		for (const row of shown) {
+			const index = indexOf.get(row.node.key);
+			if (index === void 0) next.push({
+				...row,
+				exiting: true
+			});
+			else if (index >= cursor) takeUpTo(index);
+		}
+		takeUpTo(rows.length - 1);
+		shown = next.some((row) => !row.exiting && !before.has(row.node.key)) && next.some((row) => row.exiting) && prefersReducedMotion() ? next.filter((row) => !row.exiting) : next;
+		setPresence({
+			keys,
+			shown
+		});
+	}
+	const onExited = useCallback((key) => setPresence((current) => ({
+		...current,
+		shown: current.shown.filter((row) => !(row.exiting && row.node.key === key))
+	})), []);
+	const current = new Map(rows.map((node) => [node.key, node]));
+	return {
+		shown: shown.map((row) => row.exiting ? row : {
+			...row,
+			node: current.get(row.node.key)
+		}),
+		onExited,
+		/** Changes whenever the rows shown change. */
+		version: presence
+	};
+}
+/**
+* A tree row's wrapper, which opens its height and fades it in when the row appears, and
+* closes it when the row leaves, then lets it go. Nothing in a leaving row can be focused
+* or read.
+*/
+function TreeRowReveal({ row, onExited, className, clipClassName, children }) {
+	const ref = useRef(null);
+	const { exiting, node } = row;
+	useEffect(() => {
+		if (!exiting) return;
+		const transitions = ref.current?.getAnimations?.() ?? [];
+		if (transitions.length === 0) {
+			onExited(node.key);
+			return;
+		}
+		let current = true;
+		Promise.allSettled(transitions.map((transition) => transition.finished)).then(() => {
+			if (current) onExited(node.key);
+		});
+		return () => {
+			current = false;
+		};
+	}, [
+		exiting,
+		node.key,
+		onExited
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-appear": row.appear || void 0,
+		"data-exiting": exiting || void 0,
+		inert: exiting || void 0,
+		className,
+		children: /* @__PURE__ */ jsx("div", {
+			className: clipClassName,
+			children
+		})
+	});
+}
+/** A leaving row's picture while it closes: the row at rest, hidden from assistive tech. */
+function TreeRowGhost({ node, selectable, variant, classNames, position: itemPosition }) {
+	const item = node.props;
+	const options = useContext(ListOptionsContext);
+	const styles = listStyles({
+		...itemStylesOptions(item, variant, true, options),
+		nested: node.level > 0
+	});
+	const check = useSelectionCheck(styles, selectable, classNames?.selectionIndicator);
+	const chevron = node.hasChildNodes && /* @__PURE__ */ jsx("span", {
+		className: styles.expand({ class: classNames?.expandButton }),
+		children: /* @__PURE__ */ jsx(ExpandMoreIcon, {})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		style: { "--m3-list-level": node.level },
+		"data-shape": "rest",
+		"data-position": itemPosition,
+		...itemAttributes(variant),
+		className: styles.item({ class: cn(classNames?.item, item.className) }),
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles.cell(),
+			children: /* @__PURE__ */ jsx(ItemContent, {
+				item,
+				styles,
+				classNames,
+				end: check || chevron ? /* @__PURE__ */ jsxs(Fragment$1, { children: [check, chevron] }) : null
+			})
+		})
+	});
+}
+/**
+* React Aria's tree item reads a row's siblings (for `aria-posinset` and `aria-setsize`)
+* through `collection.getChildren` and each sibling's `nextKey`, which React Stately's
+* `TreeCollection` doesn't provide: its `nextKey` and `index` follow the visible rows, as
+* keyboard navigation needs. While the row's hook runs, this gives the collection the
+* nested items' own order, and the returned function restores it. React Aria keys its
+* per-list data by the state object, so the state itself has to be the one patched.
+*/
+function withSiblingOrder(state, node) {
+	const collection = state.collection;
+	const visibleItem = collection.getItem.bind(collection);
+	const siblingsOf = (parentKey) => (parentKey == null ? [...collection] : [...visibleItem(parentKey)?.childNodes ?? []]).filter((sibling) => sibling.type === "item");
+	const inSiblingOrder = (item) => {
+		const siblings = siblingsOf(item.parentKey);
+		const index = siblings.findIndex((sibling) => sibling.key === item.key);
+		return {
+			...item,
+			index,
+			nextKey: siblings[index + 1]?.key ?? null
+		};
+	};
+	collection.getItem = (key) => {
+		const item = visibleItem(key);
+		return item ? inSiblingOrder(item) : null;
+	};
+	collection.getChildren = (key) => siblingsOf(key).map(inSiblingOrder);
+	return {
+		node: inSiblingOrder(node),
+		restore: () => {
+			delete collection.getItem;
+			delete collection.getChildren;
+		}
+	};
+}
+function ExpandButton({ props, className }) {
+	const ref = useRef(null);
+	const { buttonProps, isPressed } = useButton(props, ref);
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled: props.isDisabled,
+		isPressed
+	}, ref);
+	return /* @__PURE__ */ jsxs("button", {
+		...mergeProps(buttonProps, interactionProps),
+		...dataAttributes,
+		ref,
+		className,
+		children: [/* @__PURE__ */ jsx(TouchTarget, { className: "h-[min(48px,calc(56px+var(--md-sys-density,0)*4px))]" }), /* @__PURE__ */ jsx(ExpandMoreIcon, {})]
+	});
+}
+function TreeRow({ node, state, variant, classNames, position: itemPosition }) {
+	const item = node.props;
+	const ref = useRef(null);
+	const siblingOrder = withSiblingOrder(state, node);
+	const { rowProps, gridCellProps, descriptionProps, expandButtonProps, isPressed, isSelected } = useTreeItem({
+		node: siblingOrder.node,
+		hasChildItems: node.hasChildNodes
+	}, state, ref);
+	siblingOrder.restore();
+	const isDisabled = state.disabledKeys.has(node.key);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled,
+		isPressed
+	}, ref);
+	const shape = shapeOf({
+		isPressed,
+		isSelected,
+		isFocusVisible: dataAttributes["data-focus-visible"] != null,
+		isHovered,
+		isDisabled
+	});
+	const options = useContext(ListOptionsContext);
+	const styles = listStyles({
+		...itemStylesOptions(item, variant, true, options),
+		nested: node.level > 0
+	});
+	const check = useSelectionCheck(styles, state.selectionManager.selectionMode !== "none", classNames?.selectionIndicator);
+	const end = check != null || node.hasChildNodes ? /* @__PURE__ */ jsxs(Fragment$1, { children: [check, node.hasChildNodes && /* @__PURE__ */ jsx(ExpandButton, {
+		props: {
+			...expandButtonProps,
+			isDisabled
+		},
+		className: styles.expand({ class: classNames?.expandButton })
+	})] }) : null;
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(isDisabled ? focusOnly(rowProps) : rowProps, hoverProps, interactionProps),
+		...dataAttributes,
+		"aria-disabled": isDisabled || void 0,
+		ref,
+		style: { "--m3-list-level": node.level },
+		"data-selected": isSelected || void 0,
+		"data-shape": shape,
+		"data-position": itemPosition,
+		...itemAttributes(variant),
+		className: styles.item({ class: cn(classNames?.item, item.className) }),
+		children: /* @__PURE__ */ jsx("div", {
+			...gridCellProps,
+			className: styles.cell(),
+			children: /* @__PURE__ */ jsx(ItemContent, {
+				item,
+				styles,
+				classNames,
+				ids: { supporting: descriptionProps.id },
+				end
+			})
+		})
+	});
+}
+/**
+* The items of an interactive list's collection, as React Stately's collection builder reads
+* them (each entry describes itself through `getCollectionNode`), top-level and in sections,
+* and whether it has sections. The list picks its kind and its disabled keys from these.
+*/
+function useCollectionScan(children) {
+	const { collection } = useListState({ children });
+	return useMemo(() => {
+		const entries = [];
+		let sectioned = false;
+		for (const node of collection) if (node.type === "section") {
+			sectioned = true;
+			for (const child of collection.getChildren(node.key)) if (child.type === "item") entries.push([child.key, child.props]);
+		} else if (node.type === "item") entries.push([node.key, node.props]);
+		return {
+			entries,
+			items: entries.map(([, item]) => item),
+			sectioned
+		};
+	}, [collection]);
+}
+/** Ids that name an item that is a control (its headline) and describe it (the rest). */
+function useItemIds(item) {
+	const id = useId();
+	const ids = {
+		headline: `${id}-headline`,
+		...item.overline != null && { overline: `${id}-overline` },
+		...item.supportingText != null && { supporting: `${id}-supporting` }
+	};
+	const described = [ids.overline, ids.supporting].filter(Boolean).join(" ");
+	return {
+		ids,
+		naming: {
+			...item["aria-label"] != null ? { "aria-label": item["aria-label"] } : { "aria-labelledby": ids.headline },
+			...described && { "aria-describedby": described }
+		}
+	};
+}
+/** A switch or checkbox item: a visually hidden native input, the item as its label. */
+function ToggleItem({ item, control, listDisabled, ...view }) {
+	const inputRef = useRef(null);
+	const { ids, naming } = useItemIds(item);
+	const isDisabled = Boolean(listDisabled || item.disabled);
+	const options = {
+		...naming,
+		children: item.children,
+		isSelected: item.checked,
+		defaultSelected: item.defaultChecked,
+		onChange: item.onCheckedChange,
+		isDisabled,
+		name: item.name,
+		value: item.value
+	};
+	const state = useToggleState(options);
+	const { inputProps, labelProps, isSelected, isPressed } = useCheckbox(options, state, inputRef);
+	return /* @__PURE__ */ jsx(ControlItem, {
+		...view,
+		item,
+		ids,
+		kind: control,
+		inputProps: control === "switch" ? {
+			...inputProps,
+			role: "switch"
+		} : inputProps,
+		inputRef,
+		labelProps,
+		isSelected,
+		isDisabled,
+		isPressed,
+		placement: item.controlPlacement ?? (control === "switch" ? "end" : "start")
+	});
+}
+function RadioList({ variant, classNames, className, style, ref, value, defaultValue, onChange, name, required, disabled, controlPlacement = "start", entries, ...rest }) {
+	const { root: data } = splitRootProps(rest);
+	const { "aria-label": label, "aria-labelledby": labelledBy } = rest;
+	const options = {
+		id: rest.id,
+		"aria-label": label,
+		"aria-labelledby": labelledBy,
+		value,
+		defaultValue,
+		onChange,
+		name,
+		isRequired: required,
+		isDisabled: disabled
+	};
+	const state = useRadioGroupState(options);
+	const { radioGroupProps } = useRadioGroup(options, state);
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(data, radioGroupProps),
+		...tokenAttributes(variant, data),
+		ref,
+		style,
+		className: listStyles({ variant }).root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(RadioListContext, {
+			value: {
+				state,
+				variant,
+				classNames,
+				controlPlacement
+			},
+			children: entries.map((entry, index) => /* @__PURE__ */ jsx(ListEntryContext, {
+				value: {
+					index,
+					position: position(index, entries.length),
+					inSection: false,
+					disabled: false
+				},
+				children: entry
+			}, entry.key ?? index))
+		})
+	});
+}
+const RadioListContext = createContext(null);
+/** An item of a radio list: a radio button with the item's `value`. */
+function RadioListItem({ item, radio, position: itemPosition }) {
+	if (item.value == null || item.control != null || item.href != null) throw new Error(RADIO_ITEM_ERROR);
+	return /* @__PURE__ */ jsx(RadioItem, {
+		item,
+		state: radio.state,
+		variant: radio.variant,
+		classNames: radio.classNames,
+		position: itemPosition,
+		placement: item.controlPlacement ?? radio.controlPlacement
+	});
+}
+function RadioItem({ item, state, placement, ...view }) {
+	const inputRef = useRef(null);
+	const { ids, naming } = useItemIds(item);
+	const { inputProps, labelProps, isSelected, isDisabled, isPressed } = useRadio({
+		...naming,
+		children: item.children,
+		value: item.value ?? "",
+		isDisabled: item.disabled
+	}, state, inputRef);
+	return /* @__PURE__ */ jsx(ControlItem, {
+		...view,
+		item,
+		ids,
+		kind: "radio",
+		inputProps,
+		inputRef,
+		labelProps,
+		isSelected,
+		isDisabled,
+		isPressed,
+		placement
+	});
+}
+/**
+* An item that is a switch, checkbox or radio button (Compose's toggleable and selectable
+* `ListItem`s): the item is the input's `<label>`, so pressing anywhere on it changes it,
+* with the list item's state layer, shapes and selected colours. The drawn control only
+* shows the state.
+*/
+function ControlItem({ item, ids, kind, inputProps, inputRef, labelProps, isSelected, isDisabled, isPressed, placement, variant, classNames, position: itemPosition }) {
+	const ref = useRef(null);
+	const hiddenInputRef = useMemo(() => mergeRefs(inputRef, preventHiddenInputScroll), [inputRef]);
+	const { interactionProps, dataAttributes, state } = useM3Interaction({
+		isDisabled,
+		isPressed,
+		isSelected,
+		within: true
+	}, ref);
+	const shape = isPressed && !isDisabled || isSelected || state.isFocusVisible ? "active" : state.isHovered && !isDisabled ? "hovered" : "rest";
+	const styles = itemStyles(item, variant, true, useContext(ListOptionsContext));
+	const controlState = {
+		"data-checked": isSelected || void 0,
+		"data-disabled": isDisabled || void 0
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		...mergeProps(labelProps, interactionProps),
+		...dataAttributes,
+		ref,
+		"data-shape": shape,
+		"data-position": itemPosition,
+		...itemAttributes(variant),
+		className: styles.item({ class: cn(classNames?.item, item.className) }),
+		children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+			elementType: "span",
+			children: /* @__PURE__ */ jsx("input", {
+				...inputProps,
+				ref: hiddenInputRef
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: styles.cell(),
+			children: /* @__PURE__ */ jsx(ItemContent, {
+				item,
+				styles,
+				classNames,
+				ids,
+				controlPlacement: placement,
+				textHidden: true,
+				control: /* @__PURE__ */ jsxs("span", {
+					...controlState,
+					"aria-hidden": "true",
+					className: styles.control({ class: classNames?.control }),
+					children: [
+						kind === "radio" && /* @__PURE__ */ jsx(RadioRing, {}),
+						kind === "checkbox" && /* @__PURE__ */ jsx(CheckboxBox, {}),
+						kind === "switch" && /* @__PURE__ */ jsx(SwitchTrack, {
+							selected: isSelected,
+							icons: item.switchIcons
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+/** A switch's track and thumb, at rest (the item, not the switch, takes the interaction). */
+function SwitchTrack({ selected, icons }) {
+	const styles = switchStyles();
+	const icon = icons ? selected ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CloseIcon, {}) : null;
+	const { size, center } = thumbGeometry(selected, false, Boolean(icon));
+	return /* @__PURE__ */ jsx("span", {
+		"data-tokens": "md-comp-switch",
+		"data-slot": "track",
+		className: styles.control(),
+		style: {
+			"--m3-thumb-size": `${size}px`,
+			"--m3-thumb-center": `${center}px`
+		},
+		children: /* @__PURE__ */ jsx(SwitchThumb, {
+			styles,
+			icon
+		})
+	});
+}
+/**
+* The `ListItem` elements, flattened from arrays, with the keys they were given. `Children`
+* also unwraps lazy elements, which a server component's items can arrive as (Next's dev
+* server sends some that way), so they're never dropped from the server render.
+*/
+function listItems(children) {
+	const items = [];
+	Children.forEach(children, (node) => {
+		if (isValidElement(node)) items.push(node);
+	});
+	return items;
+}
+/**
+* A link item: the item holds a real `<a>` on its headline, whose overlay covers the whole
+* item, so the item is the link (the browser's link menu and modified clicks included)
+* while buttons in its leading or trailing content stay separate controls, never nested in
+* the link. The link is named by the headline and described by the overline and supporting
+* text. React Aria's `useLink` routes a plain click through the `RouterProvider`; a disabled
+* item has no `href`.
+*/
+function LinkItem({ item, variant, classNames, position: itemPosition, isDisabled }) {
+	const itemRef = useRef(null);
+	const linkRef = useRef(null);
+	const { ids, naming } = useItemIds(item);
+	const href = isDisabled ? void 0 : item.href;
+	const { linkProps, isPressed } = useLink({
+		href,
+		target: item.target,
+		isDisabled,
+		elementType: "a"
+	}, linkRef);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const current = Boolean(item.current);
+	const { interactionProps, dataAttributes, state } = useM3Interaction({
+		isDisabled,
+		isPressed,
+		isSelected: current
+	}, itemRef);
+	const shape = isPressed && !isDisabled || current || isFocusVisible ? "active" : state.isHovered && !isDisabled ? "hovered" : "rest";
+	const styles = itemStyles(item, variant, true, useContext(ListOptionsContext));
+	const rel = item.rel ?? (item.target === "_blank" ? "noopener noreferrer" : void 0);
+	return /* @__PURE__ */ jsx("li", {
+		...interactionProps,
+		...dataAttributes,
+		"data-focused": isFocusVisible || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		ref: itemRef,
+		"data-list-entry": "",
+		"data-shape": shape,
+		"data-position": itemPosition,
+		...itemAttributes(variant),
+		className: styles.item({ class: cn("relative", classNames?.item, item.className) }),
+		children: /* @__PURE__ */ jsx("span", {
+			className: styles.cell(),
+			children: /* @__PURE__ */ jsx(ItemContent, {
+				item,
+				styles,
+				classNames,
+				ids,
+				sideClassName: styles.raised(),
+				headline: (children) => /* @__PURE__ */ jsx("a", {
+					...mergeProps(linkProps, focusProps),
+					...naming,
+					ref: linkRef,
+					href,
+					target: item.target,
+					rel,
+					download: item.download,
+					"aria-current": current ? "page" : void 0,
+					"data-list-link": "",
+					className: styles.link(),
+					children
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { List, ListItem, ListSection };
+
+//# sourceMappingURL=List.js.map