@stealthscale/component-a11y 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipe-BKojQp6r.js";
+import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipe-BM8WGKWH.js";
 import { c } from "react/compiler-runtime";
 import { createContext, use, useEffect, useId, useRef, useState } from "react";
 import { useCallbackRef, useControllableState } from "@stealthscale/hooks";
@@ -7,62 +7,62 @@ import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/them
 import { jsx } from "react/jsx-runtime";
 //#region src/roving-focus/context.ts
 /**
-* Binds the group's recipe to the parts that draw it.
+* Binds the roving-focus slot recipe to React.
 *
 * @remarks
-*   Apart from the recipe, because an application's compiler reads the recipe at build time and
-*   the binding needs the runtime. The root carries the orientation, and every item below it reads
-*   its classes from the root through a context.
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime. The root resolves the variants, and each
+*   item reads its slot class from the root's context.
 */
 /**
-* Binds the recipe once: the root takes the orientation, and each item draws its slot in it.
+* Creates the roving-focus recipe's `withProvider` binding for the root and `withContext` for the
+* items.
 */
 const { withContext: withContext$1, withProvider: withProvider$1 } = createSlotRecipeContext(recipe);
 //#endregion
 //#region src/roving-focus/use-roving-focus.ts
 /**
-* Moves one tab stop through a set of controls, so a reader reaches the set with Tab and moves
-* inside it with the arrows.
+* Implements a roving tabindex: Tab enters the group once, and the arrow keys move focus inside it.
 *
 * @remarks
-*   A toolbar, a row of tabs and a menu bar are all one stop in the tab order, and the arrows move
-*   which control that stop is on. The items register themselves rather than being counted by the
-*   root, because a root cannot see through whatever composes its children. Registration order is
-*   the order the effects ran, which is source order until something is conditional, so the list
-*   is sorted by where the items sit in the document: what the arrows follow is what the reader
-*   sees.
+*   A toolbar, a tab list and a menu bar each take one stop in the page's tab order. Items register
+*   themselves, because the root cannot see through the components its children are composed
+*   from. Registration follows effect order, which differs from source order once an item renders
+*   conditionally, so the registry sorts by document position and the arrows follow the order on
+*   screen.
 */
 /**
-* Maps the arrows that run down the page to the step each takes.
+* Maps each block-axis arrow key to its step.
 */
 const DOWN_THE_PAGE = {
 	ArrowDown: 1,
 	ArrowUp: -1
 };
 /**
-* Maps the arrows that run along a line to the step each takes.
+* Maps each inline-axis arrow key to its step in a left-to-right group.
 */
 const ALONG_THE_LINE = {
 	ArrowLeft: -1,
 	ArrowRight: 1
 };
 /**
-* Carries the group down to its items.
+* Context that a root publishes its group on and every item below it reads.
 */
 const RovingFocusContext = createContext(void 0);
 /**
-* Orders two items by where they sit in the document.
+* Compares two registrations by document position, for sorting in on-screen order.
 */
 function byDocumentPosition(first, second) {
 	return (first.element.compareDocumentPosition(second.element) & Node.DOCUMENT_POSITION_FOLLOWING) === 0 ? 1 : -1;
 }
 /**
-* Reads what a key asks for, given the arrows the group binds and which way the line runs.
+* Translates a key press into the movement it requests.
 *
-* @param key - The key pressed.
-* @param orientation - Which arrows the group moves on.
-* @param forward - One where the line runs left to right, minus one where it runs the other way.
-* @returns The step or the edge to move to, or nothing where the group does not claim the key.
+* @param key - The `key` value of the keyboard event.
+* @param orientation - The axes the group responds to.
+* @param forward - 1 in a left-to-right group and -1 in a right-to-left one, applied to the
+*   inline arrows only.
+* @returns The requested step or end, or undefined when the group does not handle the key.
 */
 function intentOf(key, orientation, forward) {
 	if (key === "Home") return "start";
@@ -73,17 +73,17 @@ function intentOf(key, orientation, forward) {
 	if (inline !== void 0) return orientation === "vertical" ? void 0 : inline * forward;
 }
 /**
-* Marks out the one item the group moves to, as a slice of the list it is in.
+* Returns the destination item as the bounds of a one-item slice of the registration list.
 *
 * @remarks
-*   A slice rather than an index, because the list is read at an index that is always inside it
-*   and a lookup would still be typed as possibly absent. A slice of one is the item, and a slice
-*   of an empty list is empty, so the caller writes no test for a case that cannot arise.
-* @param list - The items, in the order the reader sees them.
-* @param intent - The edge or the step the key asked for.
-* @param from - The item that holds the tab stop.
-* @param wrap - Whether the ends join up.
-* @returns The first and last index of the slice holding the item to move to.
+*   Slice bounds keep the caller free of a branch. An index is typed as possibly undefined even
+*   when it is in range, and slicing an empty list returns an empty list, so a group with no items
+*   needs no special case.
+* @param list - The registrations in document order.
+* @param intent - The step or end the key requested.
+* @param from - The identifier of the item with the tab stop.
+* @param wrap - Whether a step past one end continues at the other.
+* @returns The start and end bounds of a slice that contains the destination item.
 */
 function spanOf(list, intent, from, wrap) {
 	const last = list.length - 1;
@@ -93,141 +93,129 @@ function spanOf(list, intent, from, wrap) {
 	return [to, to + 1];
 }
 /**
-* Keeps the items in a ref rather than in state.
+* Creates a registry backed by a ref.
 *
 * @remarks
-*   Nothing drawn depends on the list, only on which item holds the stop, so putting it in state
-*   would draw the whole group again every time one item mounted, for a change nobody could see.
+*   Rendering depends on the active identifier and not on the list, so a list in state would
+*   re-render the whole group each time an item mounted, with no visible change.
 */
 function useRegistry() {
-	const $ = c(6);
-	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
-		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
-	}
+	const $ = c(5);
 	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = [];
-		$[1] = t0;
-	} else t0 = $[1];
+		$[0] = t0;
+	} else t0 = $[0];
 	const items = useRef(t0);
 	let t1;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = (registration) => {
 			items.current = [...items.current, registration];
 		};
-		$[2] = t1;
-	} else t1 = $[2];
+		$[1] = t1;
+	} else t1 = $[1];
 	const add = t1;
 	let t2;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = (node) => items.current.some((item) => item.element.contains(node));
-		$[3] = t2;
-	} else t2 = $[3];
-	const holds = t2;
+		$[2] = t2;
+	} else t2 = $[2];
+	const contains = t2;
 	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = () => items.current.toSorted(byDocumentPosition);
-		$[4] = t3;
-	} else t3 = $[4];
+		$[3] = t3;
+	} else t3 = $[3];
 	const ordered = t3;
 	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		const remove = (id) => {
 			items.current = items.current.filter((item_0) => item_0.id !== id);
 		};
 		t4 = {
 			add,
-			holds,
+			contains,
 			ordered,
 			remove
 		};
-		$[5] = t4;
-	} else t4 = $[5];
+		$[4] = t4;
+	} else t4 = $[4];
 	return t4;
 }
 /**
-* Keeps which item holds the tab stop, driven from above where a caller drives it.
+* Tracks which item has the tab stop, and defers to the caller when the group is controlled.
 */
 function useTabStop(props) {
-	const $ = c(13);
-	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
-	}
+	const $ = c(12);
 	const { activeId: driven, defaultActiveId, onActiveIdChange } = props;
 	let t0;
-	if ($[1] !== defaultActiveId || $[2] !== driven || $[3] !== onActiveIdChange) {
+	if ($[0] !== defaultActiveId || $[1] !== driven || $[2] !== onActiveIdChange) {
 		t0 = {
 			defaultValue: defaultActiveId,
 			onChange: onActiveIdChange,
 			value: driven
 		};
-		$[1] = defaultActiveId;
-		$[2] = driven;
-		$[3] = onActiveIdChange;
-		$[4] = t0;
-	} else t0 = $[4];
+		$[0] = defaultActiveId;
+		$[1] = driven;
+		$[2] = onActiveIdChange;
+		$[3] = t0;
+	} else t0 = $[3];
 	const [activeId, setActiveId] = useControllableState(t0);
 	const stop = useRef(activeId);
 	let t1;
 	let t2;
-	if ($[5] !== activeId) {
+	if ($[4] !== activeId) {
 		t1 = () => {
 			stop.current = activeId;
 		};
 		t2 = [activeId];
-		$[5] = activeId;
-		$[6] = t1;
-		$[7] = t2;
+		$[4] = activeId;
+		$[5] = t1;
+		$[6] = t2;
 	} else {
-		t1 = $[6];
-		t2 = $[7];
+		t1 = $[5];
+		t2 = $[6];
 	}
 	useEffect(t1, t2);
 	let t3;
-	if ($[8] !== setActiveId) {
+	if ($[7] !== setActiveId) {
 		t3 = (next) => {
 			stop.current = next;
 			setActiveId(next);
 		};
-		$[8] = setActiveId;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[7] = setActiveId;
+		$[8] = t3;
+	} else t3 = $[8];
 	const claim = useCallbackRef(t3);
 	let t4;
-	if ($[10] !== activeId || $[11] !== claim) {
+	if ($[9] !== activeId || $[10] !== claim) {
 		t4 = {
 			activeId,
 			claim,
 			stop
 		};
-		$[10] = activeId;
-		$[11] = claim;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[9] = activeId;
+		$[10] = claim;
+		$[11] = t4;
+	} else t4 = $[11];
 	return t4;
 }
 /**
-* Moves one tab stop through the items that register with it.
+* Moves one tab stop across the items that register with the group.
 *
 * @remarks
-*   The first item to register takes the stop, so a group is reachable by Tab from its first
-*   render. An item that leaves while it holds the stop hands it to whatever is first, so the
-*   group never drops out of the tab order.
-* @returns The group the items read, and the handler the root binds.
+*   The first item to register takes the stop, so Tab reaches the group from its first render.
+*   When the item with the stop unmounts, the stop passes to the first remaining item in document
+*   order, so the group stays in the tab order.
+* @returns The context value for the items and the key handler for the root.
 */
 function useRovingFocus(props) {
-	const $ = c(23);
-	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
-		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
-	}
+	const $ = c(22);
 	const { orientation, wrap } = props;
-	const { add, holds, ordered, remove } = useRegistry();
+	const { add, contains, ordered, remove } = useRegistry();
 	const { activeId, claim, stop } = useTabStop(props);
 	let t0;
-	if ($[1] !== add || $[2] !== claim || $[3] !== ordered || $[4] !== remove || $[5] !== stop.current) {
+	if ($[0] !== add || $[1] !== claim || $[2] !== ordered || $[3] !== remove || $[4] !== stop.current) {
 		t0 = (registration) => {
 			add(registration);
 			if (stop.current === void 0) claim(registration.id);
@@ -236,20 +224,20 @@ function useRovingFocus(props) {
 				if (stop.current === registration.id) claim(ordered()[0]?.id);
 			};
 		};
-		$[1] = add;
-		$[2] = claim;
-		$[3] = ordered;
-		$[4] = remove;
-		$[5] = stop.current;
-		$[6] = t0;
-	} else t0 = $[6];
+		$[0] = add;
+		$[1] = claim;
+		$[2] = ordered;
+		$[3] = remove;
+		$[4] = stop.current;
+		$[5] = t0;
+	} else t0 = $[5];
 	const register = useCallbackRef(t0);
 	let t1;
-	if ($[7] !== claim || $[8] !== holds || $[9] !== ordered || $[10] !== orientation || $[11] !== stop.current || $[12] !== wrap) {
+	if ($[6] !== claim || $[7] !== contains || $[8] !== ordered || $[9] !== orientation || $[10] !== stop.current || $[11] !== wrap) {
 		t1 = (event) => {
 			if (event.ctrlKey || event.metaKey || event.altKey) return;
 			const { target } = event;
-			if (!(target instanceof Node) || !holds(target)) return;
+			if (!(target instanceof Node) || !contains(target)) return;
 			const rightToLeft = globalThis.getComputedStyle(event.currentTarget).direction === "rtl";
 			const intent = intentOf(event.key, orientation, rightToLeft ? -1 : 1);
 			if (intent === void 0) return;
@@ -259,126 +247,125 @@ function useRovingFocus(props) {
 			}
 			event.preventDefault();
 		};
-		$[7] = claim;
-		$[8] = holds;
-		$[9] = ordered;
-		$[10] = orientation;
-		$[11] = stop.current;
-		$[12] = wrap;
-		$[13] = t1;
-	} else t1 = $[13];
+		$[6] = claim;
+		$[7] = contains;
+		$[8] = ordered;
+		$[9] = orientation;
+		$[10] = stop.current;
+		$[11] = wrap;
+		$[12] = t1;
+	} else t1 = $[12];
 	const onKeyDown = useCallbackRef(t1);
 	let t2;
-	if ($[14] !== claim) {
+	if ($[13] !== claim) {
 		t2 = (id) => {
 			claim(id);
 		};
-		$[14] = claim;
-		$[15] = t2;
-	} else t2 = $[15];
+		$[13] = claim;
+		$[14] = t2;
+	} else t2 = $[14];
 	const onFocus = useCallbackRef(t2);
 	let t3;
-	if ($[16] !== activeId || $[17] !== onFocus || $[18] !== register) {
+	if ($[15] !== activeId || $[16] !== onFocus || $[17] !== register) {
 		t3 = {
 			activeId,
 			onFocus,
 			register
 		};
-		$[16] = activeId;
-		$[17] = onFocus;
-		$[18] = register;
-		$[19] = t3;
-	} else t3 = $[19];
+		$[15] = activeId;
+		$[16] = onFocus;
+		$[17] = register;
+		$[18] = t3;
+	} else t3 = $[18];
 	const t4 = t3;
 	let t5;
-	if ($[20] !== onKeyDown || $[21] !== t4) {
+	if ($[19] !== onKeyDown || $[20] !== t4) {
 		t5 = {
 			group: t4,
 			onKeyDown
 		};
-		$[20] = onKeyDown;
-		$[21] = t4;
-		$[22] = t5;
-	} else t5 = $[22];
+		$[19] = onKeyDown;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
 	return t5;
 }
 //#endregion
 //#region src/roving-focus/item.tsx
 /**
-* Draws one item of the group, which holds the tab stop when the arrows reach it.
+* Renders one item of a roving focus group.
 *
 * @remarks
-*   Exactly one item is reachable by Tab and every other is at minus one, which is what makes the
-*   whole group one stop in the tab order. A disabled item registers with nothing, so the arrows
-*   pass over it, and it does not claim the stop when a pointer focuses it: an item that claimed
-*   the stop without registering would leave the stop pointing at nothing and take the group out
-*   of the tab order. The element is kept in state rather than in a ref, because the effect that
-*   registers it has to run again once the element is there, and a ref changing starts no effect.
+*   One item has `tabIndex` 0 and every other has -1, so the group is one stop in the tab order. A
+*   disabled item does not register, so the arrows step past it. It also refuses the stop when a
+*   pointer focuses it, because a stop on an unregistered item is unreachable by the arrows and
+*   removes the group from the tab order. The element is in state and not in a ref, so the
+*   registering effect runs again once the node exists. The group keys on the registration, so
+*   the item writes the DOM `id` only when the caller passes one, and a control rendered as an item
+*   keeps an id it needs, such as the one a menu trigger references. The item with the stop has
+*   `data-stop` and not `data-active`, because the theme styles `[data-active]` as a pressed
+*   control.
 */
 /**
-* Draws the element an item is laid out on.
+* Renders a `div` element with the item slot's classes.
 */
 const Shell$1 = withContext$1("div", "item");
 /**
-* Takes the tab stop when the arrows reach it, and leaves the tab order otherwise.
+* Renders an item with `tabIndex` 0 while it has the tab stop and -1 otherwise.
 *
-* @throws {@link Error} When it is drawn outside a group.
+* @throws {@link Error} When rendered outside a root.
 */
 function Item(props) {
-	const $ = c(27);
-	if ($[0] !== "906ba9f383c3499089f80a6d094880677f9a2e49a204ba65b1f93dfa19d6065b") {
-		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "906ba9f383c3499089f80a6d094880677f9a2e49a204ba65b1f93dfa19d6065b";
-	}
+	const $ = c(26);
 	let handed;
 	let named;
 	let rest;
 	let t0;
-	if ($[1] !== props) {
+	if ($[0] !== props) {
 		({disabled: t0, id: named, ref: handed, ...rest} = props);
-		$[1] = props;
-		$[2] = handed;
-		$[3] = named;
-		$[4] = rest;
-		$[5] = t0;
+		$[0] = props;
+		$[1] = handed;
+		$[2] = named;
+		$[3] = rest;
+		$[4] = t0;
 	} else {
-		handed = $[2];
-		named = $[3];
-		rest = $[4];
-		t0 = $[5];
+		handed = $[1];
+		named = $[2];
+		rest = $[3];
+		t0 = $[4];
 	}
 	const disabled = t0 === void 0 ? false : t0;
 	const group = use(RovingFocusContext);
-	if (group === void 0) throw new Error("RovingFocus.Item is drawn inside RovingFocus.Root and nowhere else.");
+	if (group === void 0) throw new Error("RovingFocus.Item must be rendered inside RovingFocus.Root.");
 	const generated = useId();
 	const id = named ?? generated;
 	const { activeId, onFocus, register } = group;
 	const [element, setElement] = useState(null);
 	let t1;
-	if ($[6] !== handed) {
+	if ($[5] !== handed) {
 		t1 = (node) => {
 			setElement(node);
 			if (typeof handed === "function") handed(node);
 			else if (handed !== null && handed !== void 0) handed.current = node;
 		};
-		$[6] = handed;
-		$[7] = t1;
-	} else t1 = $[7];
+		$[5] = handed;
+		$[6] = t1;
+	} else t1 = $[6];
 	const attach = useCallbackRef(t1);
 	let t2;
-	if ($[8] !== disabled || $[9] !== id || $[10] !== onFocus) {
+	if ($[7] !== disabled || $[8] !== id || $[9] !== onFocus) {
 		t2 = () => {
 			if (!disabled) onFocus(id);
 		};
-		$[8] = disabled;
-		$[9] = id;
-		$[10] = onFocus;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[7] = disabled;
+		$[8] = id;
+		$[9] = onFocus;
+		$[10] = t2;
+	} else t2 = $[10];
 	const claim = useCallbackRef(t2);
 	let t3;
 	let t4;
-	if ($[12] !== disabled || $[13] !== element || $[14] !== id || $[15] !== register) {
+	if ($[11] !== disabled || $[12] !== element || $[13] !== id || $[14] !== register) {
 		t3 = () => {
 			if (element === null || disabled) return;
 			return register({
@@ -392,60 +379,56 @@ function Item(props) {
 			id,
 			register
 		];
-		$[12] = disabled;
-		$[13] = element;
-		$[14] = id;
-		$[15] = register;
-		$[16] = t3;
-		$[17] = t4;
+		$[11] = disabled;
+		$[12] = element;
+		$[13] = id;
+		$[14] = register;
+		$[15] = t3;
+		$[16] = t4;
 	} else {
-		t3 = $[16];
-		t4 = $[17];
+		t3 = $[15];
+		t4 = $[16];
 	}
 	useEffect(t3, t4);
 	const t5 = disabled || void 0;
-	const t6 = activeId === id ? "" : void 0;
-	const t7 = disabled ? "" : void 0;
+	const t6 = disabled ? "" : void 0;
+	const t7 = activeId === id ? "" : void 0;
 	const t8 = !disabled && activeId === id ? 0 : -1;
 	let t9;
-	if ($[18] !== attach || $[19] !== claim || $[20] !== id || $[21] !== rest || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8) {
+	if ($[17] !== attach || $[18] !== claim || $[19] !== named || $[20] !== rest || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8) {
 		t9 = /* @__PURE__ */ jsx(Shell$1, {
 			"aria-disabled": t5,
-			"data-active": t6,
-			"data-disabled": t7,
-			id,
+			"data-disabled": t6,
+			"data-stop": t7,
+			id: named,
 			onFocus: claim,
 			ref: attach,
 			tabIndex: t8,
 			...rest
 		});
-		$[18] = attach;
-		$[19] = claim;
-		$[20] = id;
-		$[21] = rest;
-		$[22] = t5;
-		$[23] = t6;
-		$[24] = t7;
-		$[25] = t8;
-		$[26] = t9;
-	} else t9 = $[26];
+		$[17] = attach;
+		$[18] = claim;
+		$[19] = named;
+		$[20] = rest;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
 	return t9;
 }
 //#endregion
 //#region src/roving-focus/root.tsx
 /**
-* Draws the element the group is laid out on.
+* Renders a `div` element with the root slot's classes.
 */
 const Shell = withProvider$1("div", "root");
 /**
-* Keeps one tab stop for the items inside it, and moves it under the arrow keys.
+* Keeps one tab stop for the items below it and moves the stop on the arrow keys.
 */
 function Root(props) {
-	const $ = c(27);
-	if ($[0] !== "16a674b835753bf9fd806b5c17b8426cf42995a3c3e2732778987a1e4a0700e7") {
-		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "16a674b835753bf9fd806b5c17b8426cf42995a3c3e2732778987a1e4a0700e7";
-	}
+	const $ = c(26);
 	let activeId;
 	let children;
 	let defaultActiveId;
@@ -453,29 +436,29 @@ function Root(props) {
 	let rest;
 	let t0;
 	let t1;
-	if ($[1] !== props) {
+	if ($[0] !== props) {
 		({activeId, children, defaultActiveId, onActiveIdChange, orientation: t0, wrap: t1, ...rest} = props);
-		$[1] = props;
-		$[2] = activeId;
-		$[3] = children;
-		$[4] = defaultActiveId;
-		$[5] = onActiveIdChange;
-		$[6] = rest;
-		$[7] = t0;
-		$[8] = t1;
+		$[0] = props;
+		$[1] = activeId;
+		$[2] = children;
+		$[3] = defaultActiveId;
+		$[4] = onActiveIdChange;
+		$[5] = rest;
+		$[6] = t0;
+		$[7] = t1;
 	} else {
-		activeId = $[2];
-		children = $[3];
-		defaultActiveId = $[4];
-		onActiveIdChange = $[5];
-		rest = $[6];
-		t0 = $[7];
-		t1 = $[8];
+		activeId = $[1];
+		children = $[2];
+		defaultActiveId = $[3];
+		onActiveIdChange = $[4];
+		rest = $[5];
+		t0 = $[6];
+		t1 = $[7];
 	}
 	const orientation = t0 === void 0 ? "horizontal" : t0;
 	const wrap = t1 === void 0 ? false : t1;
 	let t2;
-	if ($[9] !== activeId || $[10] !== defaultActiveId || $[11] !== onActiveIdChange || $[12] !== orientation || $[13] !== wrap) {
+	if ($[8] !== activeId || $[9] !== defaultActiveId || $[10] !== onActiveIdChange || $[11] !== orientation || $[12] !== wrap) {
 		t2 = {
 			activeId,
 			defaultActiveId,
@@ -483,24 +466,24 @@ function Root(props) {
 			orientation,
 			wrap
 		};
-		$[9] = activeId;
-		$[10] = defaultActiveId;
-		$[11] = onActiveIdChange;
-		$[12] = orientation;
-		$[13] = wrap;
-		$[14] = t2;
-	} else t2 = $[14];
+		$[8] = activeId;
+		$[9] = defaultActiveId;
+		$[10] = onActiveIdChange;
+		$[11] = orientation;
+		$[12] = wrap;
+		$[13] = t2;
+	} else t2 = $[13];
 	const { group, onKeyDown } = useRovingFocus(t2);
 	let t3;
-	if ($[15] !== orientation || $[16] !== rest.role) {
+	if ($[14] !== orientation || $[15] !== rest.role) {
 		t3 = rest.role !== void 0 && orientation !== "both" ? { "aria-orientation": orientation } : void 0;
-		$[15] = orientation;
-		$[16] = rest.role;
-		$[17] = t3;
-	} else t3 = $[17];
+		$[14] = orientation;
+		$[15] = rest.role;
+		$[16] = t3;
+	} else t3 = $[16];
 	const told = t3;
 	let t4;
-	if ($[18] !== children || $[19] !== onKeyDown || $[20] !== orientation || $[21] !== rest || $[22] !== told) {
+	if ($[17] !== children || $[18] !== onKeyDown || $[19] !== orientation || $[20] !== rest || $[21] !== told) {
 		t4 = /* @__PURE__ */ jsx(Shell, {
 			onKeyDown,
 			orientation,
@@ -508,23 +491,23 @@ function Root(props) {
 			...rest,
 			children
 		});
-		$[18] = children;
-		$[19] = onKeyDown;
-		$[20] = orientation;
-		$[21] = rest;
-		$[22] = told;
-		$[23] = t4;
-	} else t4 = $[23];
+		$[17] = children;
+		$[18] = onKeyDown;
+		$[19] = orientation;
+		$[20] = rest;
+		$[21] = told;
+		$[22] = t4;
+	} else t4 = $[22];
 	let t5;
-	if ($[24] !== group || $[25] !== t4) {
+	if ($[23] !== group || $[24] !== t4) {
 		t5 = /* @__PURE__ */ jsx(RovingFocusContext, {
 			value: group,
 			children: t4
 		});
-		$[24] = group;
-		$[25] = t4;
-		$[26] = t5;
-	} else t5 = $[26];
+		$[23] = group;
+		$[24] = t4;
+		$[25] = t5;
+	} else t5 = $[25];
 	return t5;
 }
 //#endregion
@@ -536,32 +519,32 @@ var roving_focus_exports = /* @__PURE__ */ __exportAll({
 //#endregion
 //#region src/skip-nav/context.ts
 /**
-* Binds the skip link's recipe to the parts that draw it.
+* Binds the skip-nav slot recipe to React.
 *
 * @remarks
-*   Apart from the recipe, because an application's compiler reads the recipe at build time and
-*   the binding needs the runtime. Neither part takes a variant, so each is bound on its own
-*   rather than one providing for the other: a page puts the link at the top and the target
-*   further down, and the two are never nested.
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime. The link and the target each use
+*   `withProvider`, because neither is rendered inside the other.
 */
 /**
-* Binds the recipe once, for the link and for the target it jumps to.
+* Creates the skip-nav recipe's `withProvider` binding.
 */
 const { withProvider } = createSlotRecipeContext(recipe$1);
 //#endregion
 //#region src/skip-nav/link.ts
 /**
-* The fragment the link points at and the target answers to, where neither states one.
+* Fragment identifier that the link's `href` and the target's `id` default to.
 */
 const SKIP_NAV_TARGET = "content";
 /**
-* Jumps a keyboard past the navigation to the page's content.
+* Renders an `a` element with the link slot's classes, pointing at `#content` by default.
 */
 const Link = withProvider("a", "link", { defaultProps: { href: `#${SKIP_NAV_TARGET}` } });
 //#endregion
 //#region src/skip-nav/target.ts
 /**
-* Takes the focus the skip link sends, and draws nothing.
+* Renders a `div` element with the target slot's classes, `id="content"` and `tabIndex` -1 by
+* default.
 */
 const Target = withProvider("div", "target", { defaultProps: {
 	id: SKIP_NAV_TARGET,
@@ -577,21 +560,24 @@ var skip_nav_exports = /* @__PURE__ */ __exportAll({
 //#endregion
 //#region src/visually-hidden/context.ts
 /**
-* Binds the hidden text's recipe to the element that draws it.
+* Binds the visually-hidden recipe to React.
 *
 * @remarks
-*   Apart from the recipe, because an application's compiler reads the recipe at build time and
-*   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
-*   every compiler configuration that reads it.
+*   The binding is a separate module from the recipe, because the theme compiler imports the recipe
+*   at build time and must not load the React runtime.
 */
 /**
-* Binds the recipe once, for the hidden text and for whatever sets its variants from above.
+* Creates the visually-hidden recipe's `withContext` binding and its `PropsProvider`.
+*
+* @remarks
+*   `PropsProvider` sets variants on every element bound below it. The package exports it as
+*   `VisuallyHiddenPropsProvider`.
 */
 const { PropsProvider, withContext } = createRecipeContext(recipe$2);
 //#endregion
 //#region src/visually-hidden/visually-hidden.ts
 /**
-* Reads its words to a screen reader and draws them nowhere.
+* Renders a `span` element with the classes of the visually-hidden recipe.
 */
 const VisuallyHidden = withContext("span");
 //#endregion