@stealthscale/component-navigation 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,56 +1,72 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { n as recipe, t as recipe$1 } from "./recipe-TfPpeGkM.js";
-import "react";
+import { a as recipe$2, i as CLASS, n as recipe$4, o as recipe$1, r as recipe$3, s as recipe, t as recipe$5 } from "./recipe-wIXGUbM7.js";
 import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
+import { c } from "react/compiler-runtime";
+import { createRequiredContext, omitUndefined, splitEnumerable, useControllableState, useCrowded, useFilterActive, useFilteredRow, usePresence } from "@stealthscale/hooks";
+import { createContext, use, useContext, useEffect, useId, useState } from "react";
+import * as collapsible from "@zag-js/collapsible";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@stealthscale/component-disclosure";
+import { Portal, ScrollArea } from "@stealthscale/component-primitives";
+import * as navigationMenu from "@zag-js/navigation-menu";
+import * as pagination from "@zag-js/pagination";
+import { Button, ButtonPropsProvider } from "@stealthscale/component-actions";
+import * as toc from "@zag-js/toc";
 //#region src/breadcrumb/context.ts
 /**
-* Binds the breadcrumb's recipe to the elements that draw its parts.
+* Binds the breadcrumb 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 binding is a separate module from the recipe, because an application's compiler imports the
+*   recipe at build time and the binding needs the React runtime.
 */
 /**
-* Binds the recipe once. The root provides the variants and every other part reads them.
+* Factories for the parts. The root resolves the variants once and the other parts read them.
 */
-const { withContext: withContext$1, withProvider } = createSlotRecipeContext(recipe);
+const { withContext: withContext$5, withProvider: withProvider$4 } = createSlotRecipeContext(recipe);
 //#endregion
 //#region src/breadcrumb/current-link.ts
 /**
-* Draws the name of the page itself, at full strength against the muted crumbs above it.
+* Renders a span with `aria-current="page"` in the default ink.
+*/
+const CurrentLink = withContext$5("span", "currentLink", { defaultProps: { "aria-current": "page" } });
+//#endregion
+//#region src/breadcrumb/ellipsis.ts
+/**
+* Renders a list item in the muted ink.
 */
-const CurrentLink = withContext$1("span", "currentLink", { defaultProps: { "aria-current": "page" } });
+const Ellipsis$1 = withContext$5("li", "ellipsis");
 //#endregion
 //#region src/breadcrumb/item.ts
 /**
-* Draws one row of the trail, carrying either a link to somewhere above or the name of the page
-* itself.
+* Renders a list item that holds a `Breadcrumb.Link` or the `Breadcrumb.CurrentLink`.
 */
-const Item = withContext$1("li", "item");
+const Item$4 = withContext$5("li", "item");
 //#endregion
 //#region src/breadcrumb/link.ts
 /**
-* Draws a link to somewhere above the page.
+* Renders an anchor in the muted ink that darkens on hover.
 */
-const Link$1 = withContext$1("a", "link");
+const Link$4 = withContext$5("a", "link");
 //#endregion
 //#region src/breadcrumb/list.ts
 /**
-* Draws the crumbs in order, at the gap its size states.
+* Renders an ordered list with `role="list"` and the gap of the size axis.
 */
-const List = withContext$1("ol", "list", { defaultProps: { role: "list" } });
+const List$2 = withContext$5("ol", "list", { defaultProps: { role: "list" } });
 //#endregion
 //#region src/breadcrumb/root.ts
 /**
-* Draws the landmark and sets the size and look every part below it reads.
+* Renders a `nav` and provides the size and variant to every part inside it.
 */
-const Root = withProvider("nav", "root", { defaultProps: { "aria-label": "Breadcrumb" } });
+const Root$4 = withProvider$4("nav", "root", { defaultProps: { "aria-label": "Breadcrumb" } });
 //#endregion
 //#region src/breadcrumb/separator.ts
 /**
-* Draws the mark between two crumbs, saying nothing to a screen reader.
+* Renders a list item hidden from the accessibility tree.
 */
-const Separator = withContext$1("li", "separator", { defaultProps: {
+const Separator = withContext$5("li", "separator", { defaultProps: {
 	"aria-hidden": true,
 	role: "presentation"
 } });
@@ -58,30 +74,2232 @@ const Separator = withContext$1("li", "separator", { defaultProps: {
 //#region src/breadcrumb/index.ts
 var breadcrumb_exports = /* @__PURE__ */ __exportAll({
 	CurrentLink: () => CurrentLink,
-	Item: () => Item,
-	Link: () => Link$1,
-	List: () => List,
-	Root: () => Root,
+	Ellipsis: () => Ellipsis$1,
+	Item: () => Item$4,
+	Link: () => Link$4,
+	List: () => List$2,
+	Root: () => Root$4,
 	Separator: () => Separator
 });
 //#endregion
 //#region src/link/context.ts
 /**
-* Binds the link's recipe to the element that draws it.
+* Binds the link 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 binding is a separate module from the recipe, because an application's compiler imports the
+*   recipe at build time and the binding needs the React runtime.
 */
 /**
-* Binds the recipe once, for the link and for whatever sets its variants from above.
+* Factory for the link element and the provider that sets its variants for descendants.
 */
-const { PropsProvider, withContext } = createRecipeContext(recipe$1);
+const { PropsProvider, withContext: withContext$4 } = createRecipeContext(recipe$1);
 //#endregion
 //#region src/link/link.ts
 /**
-* Draws words a person follows to somewhere else.
+* Renders an anchor with the link recipe's classes.
+*/
+const Link = withContext$4("a");
+//#endregion
+//#region src/nav-list/context.ts
+/**
+* Binds the navigation list recipe to the elements that render its parts.
+*
+* @remarks
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
+*/
+/**
+* Supplies the root's factory, which receives the variants, and the part factory every other part
+* reads them through.
+*/
+const { withContext: withContext$3, withProvider: withProvider$3 } = createSlotRecipeContext(recipe$2);
+//#endregion
+//#region src/nav-list/action.ts
+/**
+* Renders the action `button` with the list's variants and `type` defaulting to `button`.
+*/
+const Action = withContext$3("button", "action", { defaultProps: { type: "button" } });
+//#endregion
+//#region src/nav-list/badge.ts
+/**
+* Renders the count `span` with the list's variants.
+*/
+const Badge = withContext$3("span", "badge");
+//#endregion
+//#region src/nav-list/machine.ts
+/**
+* Connects the collapsible machine for a branch and provides its api to the branch's parts.
+*
+* @remarks
+*   A branch uses the collapsible machine because the machine measures the nested list, writes its
+*   height to a custom property that the collapse animation reads, and keeps the list mounted
+*   until that animation ends. The branch takes the machine and not the collapsible recipe. The
+*   collapsible trigger's control sizing would conflict with the row height the nav-list recipe
+*   sets. The branch starts one machine, and its trigger, indicator and content read the api from
+*   context.
+*/
+/**
+* Creates the context through which a branch provides the connected api to its parts.
+*
+* @remarks
+*   `useBranch` throws when no `NavList.Branch` is mounted above the calling part.
+*/
+const [BranchProvider, useBranch] = createRequiredContext("NavList.Branch");
+/**
+* Starts the collapsible machine for a branch and returns its connected api.
+*
+* @param options - Machine settings split from the branch's props. A generated id is used when
+*   `id` is absent.
+*/
+function useBranchMachine(options) {
+	const $ = c(5);
+	const generated = useId();
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = options.id ?? generated;
+	let t2;
+	if ($[2] !== t0 || $[3] !== t1) {
+		t2 = {
+			...t0,
+			id: t1
+		};
+		$[2] = t0;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return collapsible.connect(useMachine(collapsible.machine, t2), normalizeProps);
+}
+/**
+* Splits a branch's props into machine settings and element props.
+*
+* @remarks
+*   The key list comes from the machine's own `splitProps`, so it follows the installed version.
+*/
+const splitBranchProps = splitEnumerable(collapsible.splitProps);
+//#endregion
+//#region src/nav-list/branch.tsx
+/**
+* Renders the branch `li` with the list's variants.
+*/
+const Held$1 = withContext$3("li", "branch");
+/**
+* Renders the branch and provides the running machine to its trigger, indicator and content.
+*
+* @remarks
+*   Inside a search's scope, the branch registers the words it renders, its nested rows' words
+*   among them, and is hidden while the scope's query is not in them. While the scope has a query
+*   the branch is open, so a nested row that matches is visible, and a press on its trigger
+*   changes nothing. The branch keeps its own open state and passes the machine a boolean `open`
+*   at all times, so a cleared query returns the branch to the state it had before the query.
+*/
+function Branch(props) {
+	const $ = c(25);
+	let t0;
+	if ($[0] !== props) {
+		t0 = splitBranchProps(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [options, rest] = t0;
+	const searching = useFilterActive();
+	const { hidden, ref } = useFilteredRow();
+	const t1 = options.defaultOpen ?? false;
+	let t2;
+	if ($[2] !== options) {
+		t2 = (next) => {
+			options.onOpenChange?.({ open: next });
+		};
+		$[2] = options;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== options.open || $[5] !== t1 || $[6] !== t2) {
+		t3 = {
+			defaultValue: t1,
+			onChange: t2,
+			value: options.open
+		};
+		$[4] = options.open;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	const [open, setOpen] = useControllableState(t3);
+	let t4;
+	if ($[8] !== searching || $[9] !== setOpen) {
+		t4 = (details) => {
+			if (!searching) setOpen(details.open);
+		};
+		$[8] = searching;
+		$[9] = setOpen;
+		$[10] = t4;
+	} else t4 = $[10];
+	const t5 = searching || open;
+	let t6;
+	if ($[11] !== options || $[12] !== t4 || $[13] !== t5) {
+		t6 = {
+			...options,
+			onOpenChange: t4,
+			open: t5
+		};
+		$[11] = options;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	const api = useBranchMachine(t6);
+	let t7;
+	if ($[15] !== api) {
+		t7 = api.getRootProps();
+		$[15] = api;
+		$[16] = t7;
+	} else t7 = $[16];
+	const t8 = hidden || rest.hidden === true;
+	let t9;
+	if ($[17] !== ref || $[18] !== rest || $[19] !== t7 || $[20] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Held$1, {
+			...rest,
+			...t7,
+			hidden: t8,
+			ref
+		});
+		$[17] = ref;
+		$[18] = rest;
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== api || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(BranchProvider, {
+			value: api,
+			children: t9
+		});
+		$[22] = api;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
+}
+//#endregion
+//#region src/nav-list/content.tsx
+/**
+* Renders the nested `ul` with the list's variants.
+*/
+const Shown$1 = withContext$3("ul", "content");
+/**
+* Renders the nested list with the machine's content props merged under the caller's.
+*/
+function Content$1(props) {
+	const $ = c(5);
+	const api = useBranch();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getContentProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Shown$1, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/nav-list/indicator.tsx
+/**
+* Renders the indicator `span`, hidden from assistive technology.
+*/
+const Turned = withContext$3("span", "indicator", { defaultProps: { "aria-hidden": true } });
+/**
+* Renders the indicator with the machine's indicator props merged under the caller's.
+*/
+function Indicator$2(props) {
+	const $ = c(5);
+	const api = useBranch();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getIndicatorProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Turned, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/nav-list/item.tsx
+/**
+* Renders the row `li` with the list's variants.
+*/
+const Row = withContext$3("li", "item");
+/**
+* Renders the row, hidden while a search's query leaves it out.
+*
+* @param props - The `li` element's props.
+* @returns The `li` element.
+*/
+function Item$3(props) {
+	const $ = c(4);
+	const { hidden, ref } = useFilteredRow();
+	const t0 = hidden || props.hidden === true;
+	let t1;
+	if ($[0] !== props || $[1] !== ref || $[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Row, {
+			...props,
+			hidden: t0,
+			ref
+		});
+		$[0] = props;
+		$[1] = ref;
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+//#endregion
+//#region src/nav-list/state.ts
+/**
+* Provides the defaults a list below a provider starts from, and the state a list gives its rows.
+*
+* @remarks
+*   A sidebar collapsed to a rail sets `iconic` once through the provider, and every list in it
+*   renders its rows as icons. A list's own prop overrides the provider. A row reads whether its
+*   list is iconic to decide whether it shows its tooltip.
+*/
+/**
+* Context through which a provider sets the defaults of the lists below it.
+*/
+const DefaultsContext = createContext({});
+/**
+* Reads the defaults the nearest provider sets, or none outside a provider.
+*/
+function useDefaults() {
+	return use(DefaultsContext);
+}
+/**
+* Creates the context through which a list provides its state to its rows.
+*/
+const [ListProvider, useList] = createRequiredContext("NavList");
+//#endregion
+//#region src/nav-list/tip.tsx
+/**
+* Renders an `a` element with the tooltip's trigger props.
+*
+* @param props - The props of an anchor.
+* @returns The `a` element.
+*/
+function Tip(props) {
+	const $ = c(2);
+	const t0 = props;
+	let t1;
+	if ($[0] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			as: "a",
+			...t0
+		});
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+//#endregion
+//#region src/nav-list/link.tsx
+/**
+* Renders the link `a` with the list's variants.
+*/
+const Anchored = withContext$3("a", "link");
+/**
+* Placement of the tooltip: beside the icon, towards the page.
+*/
+const BESIDE = { placement: "right" };
+/**
+* Renders the link, as the trigger of its tooltip while the list is iconic.
+*
+* @param props - The tooltip and the props of an anchor.
+* @returns The `a` element, inside the tooltip's root on an iconic list.
+*/
+function Link$3(t0) {
+	const $ = c(12);
+	let rest;
+	let tooltip;
+	if ($[0] !== t0) {
+		({tooltip, ...rest} = t0);
+		$[0] = t0;
+		$[1] = rest;
+		$[2] = tooltip;
+	} else {
+		rest = $[1];
+		tooltip = $[2];
+	}
+	const { iconic } = useList();
+	if (!iconic || tooltip === void 0) {
+		let t1;
+		if ($[3] !== rest) {
+			t1 = /* @__PURE__ */ jsx(Anchored, { ...rest });
+			$[3] = rest;
+			$[4] = t1;
+		} else t1 = $[4];
+		return t1;
+	}
+	let t1;
+	if ($[5] !== rest) {
+		t1 = /* @__PURE__ */ jsx(Anchored, {
+			as: Tip,
+			...rest
+		});
+		$[5] = rest;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== tooltip) {
+		t2 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: tooltip }) }) });
+		$[7] = tooltip;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Tooltip.Root, {
+			positioning: BESIDE,
+			children: [t1, t2]
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+//#endregion
+//#region src/nav-list/mark.ts
+/**
+* Renders the mark `span` with the list's variants, hidden from assistive technology.
+*/
+const Mark = withContext$3("span", "mark", { defaultProps: { "aria-hidden": true } });
+//#endregion
+//#region src/nav-list/props-provider.tsx
+/**
+* Renders the tree with the defaults in context.
+*
+* @param props - The defaults and the tree.
+* @returns The tree inside the context.
+*/
+function PropsProvider$1(t0) {
+	const $ = c(3);
+	const { children, value } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(DefaultsContext, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+//#endregion
+//#region src/nav-list/keys.ts
+/**
+* Selects the rows the arrow keys step through: links and branch triggers.
+*
+* @remarks
+*   The control beside a row is excluded. It acts on the row, and including it would add a second
+*   stop for every row that has one.
+*/
+const ROWS = `.${CLASS}__link, .${CLASS}__trigger`;
+/**
+* Maps each arrow key to its step, before the writing direction is applied to the inline pair.
+*/
+const STEPS = {
+	ArrowDown: 1,
+	ArrowLeft: -1,
+	ArrowRight: 1,
+	ArrowUp: -1
+};
+/**
+* The arrow keys on the inline axis.
+*/
+const ALONG_THE_LINE = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+/**
+* Returns where a key moves focus, or `undefined` when the list does not handle the key.
+*
+* @param key - The `key` value of the keyboard event.
+* @param along - Whether the rows run along the inline axis, as in the dock.
+* @param forward - 1 in a left-to-right list and -1 in a right-to-left list.
+*/
+function intentOf(key, along, forward) {
+	if (key === "Home") return "start";
+	if (key === "End") return "end";
+	const step = STEPS[key];
+	if (step === void 0 || ALONG_THE_LINE.has(key) !== along) return void 0;
+	return along ? step * forward : step;
+}
+/**
+* Returns whether a row is visible.
+*
+* @remarks
+*   A row is hidden in two ways. A closed branch sets `hidden` on its nested list, an attribute on
+*   an ancestor. The iconic list removes nested lists from the layout, a computed style that no
+*   attribute reports.
+*/
+function shown(row) {
+	return row.closest("[hidden]") === null && row.checkVisibility();
+}
+/**
+* Returns the visible rows in document order.
+*/
+function rowsOf(root) {
+	return [...root.querySelectorAll(ROWS)].filter((row) => shown(row));
+}
+/**
+* Returns the row focus moves to, stopping at the first and last rows instead of wrapping.
+*
+* @remarks
+*   A person holding the down arrow to reach the end of a list does not expect to arrive back at
+*   the top.
+*/
+function nextOf(rows, from, intent) {
+	if (intent === "start") return rows[0];
+	if (intent === "end") return rows.at(-1);
+	return rows[Math.min(rows.length - 1, Math.max(0, from + intent))];
+}
+/**
+* Returns the list's key handler.
+*
+* @remarks
+*   The handler finds the current row from the focused element, not from the event target, because
+*   a key press can bubble up from an icon or a count inside the row.
+* @param along - Whether the rows run along the inline axis, as in the `dock` variant.
+* @returns The handler, which ignores every key the list does not handle.
+*/
+function useRowKeys(along) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== along) {
+		t0 = (event) => {
+			if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return;
+			const root = event.currentTarget;
+			const direction = globalThis.getComputedStyle(root).direction;
+			const intent = intentOf(event.key, along, direction === "rtl" ? -1 : 1);
+			if (intent === void 0) return;
+			const rows = rowsOf(root);
+			const at = rows.findIndex((row) => row.contains(root.ownerDocument.activeElement));
+			if (at === -1) return;
+			nextOf(rows, at, intent)?.focus();
+			event.preventDefault();
+		};
+		$[0] = along;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+//#endregion
+//#region src/nav-list/root.tsx
+/**
+* Renders the list `ul` and provides the variants to every part below it.
+*/
+const Listed$1 = withProvider$3("ul", "root");
+/**
+* The variant whose rows run along the inline axis.
+*/
+const DOCK = "dock";
+/**
+* Renders the list and handles the arrow keys that move focus between rows.
+*
+* @param props - The recipe's variants and the `ul` element's props.
+* @returns The list.
+*/
+function Root$3(t0) {
+	const $ = c(13);
+	const { iconic, size, ...rest } = t0;
+	const defaults = useDefaults();
+	const drawn = iconic ?? defaults.iconic ?? false;
+	const onKeyDown = useRowKeys(rest.variant === DOCK);
+	let t1;
+	if ($[0] !== drawn) {
+		t1 = { iconic: drawn };
+		$[0] = drawn;
+		$[1] = t1;
+	} else t1 = $[1];
+	const state = t1;
+	const T0 = ListProvider;
+	const T1 = Listed$1;
+	const t2 = mergeProps({ onKeyDown }, rest);
+	const t3 = size ?? defaults.size;
+	let t4;
+	if ($[2] !== t3) {
+		t4 = omitUndefined({ size: t3 });
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== T1 || $[5] !== drawn || $[6] !== t2 || $[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T1, {
+			...t2,
+			...t4,
+			iconic: drawn
+		});
+		$[4] = T1;
+		$[5] = drawn;
+		$[6] = t2;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== T0 || $[10] !== state || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			value: state,
+			children: t5
+		});
+		$[9] = T0;
+		$[10] = state;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+//#endregion
+//#region src/nav-list/skeleton.ts
+/**
+* Renders the placeholder row `li` with the list's variants.
+*/
+const Skeleton = withContext$3("li", "skeleton");
+//#endregion
+//#region src/nav-list/trigger.tsx
+/**
+* Renders the trigger `button` with the list's variants.
+*/
+const Opened = withContext$3("button", "trigger");
+/**
+* Renders the trigger with the machine's trigger props merged under the caller's.
+*/
+function Trigger$1(props) {
+	const $ = c(5);
+	const api = useBranch();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getTriggerProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Opened, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/nav-list/index.ts
+var nav_list_exports = /* @__PURE__ */ __exportAll({
+	Action: () => Action,
+	Badge: () => Badge,
+	Branch: () => Branch,
+	Content: () => Content$1,
+	Indicator: () => Indicator$2,
+	Item: () => Item$3,
+	Link: () => Link$3,
+	Mark: () => Mark,
+	PropsProvider: () => PropsProvider$1,
+	Root: () => Root$3,
+	Skeleton: () => Skeleton,
+	Trigger: () => Trigger$1
+});
+//#endregion
+//#region src/navigation-menu/context.ts
+/**
+* Binds the navigation menu recipe to React.
+*
+* @remarks
+*   The binding is a separate module because an application's compiler reads `recipe.ts` at build
+*   time and the binding needs the runtime. The behaviour is in `machine.ts`.
+*/
+/**
+* Binds the recipe once. The root receives the variants and every other part reads them.
+*/
+const { withContext: withContext$2, withProvider: withProvider$2 } = createSlotRecipeContext(recipe$3);
+//#endregion
+//#region src/navigation-menu/machine.ts
+/**
+* Connects the navigation menu machine and provides its api to the parts.
+*
+* @remarks
+*   The root starts one machine and every part reads the api from context, so the triggers, the
+*   panels, the indicator and the viewport report one open item. The machine derives every
+*   element's ID from `id` and an item's `value`.
+*/
+/**
+* Provides the connected api to the parts, and reads it back.
+*
+* @remarks
+*   `useNavigationMenu` throws for a part rendered outside `NavigationMenu.Root`.
+*/
+const [ApiProvider$1, useNavigationMenu] = createRequiredContext("NavigationMenu");
+/**
+* Starts the navigation menu machine and returns its connected api.
+*
+* @remarks
+*   The machine measures the open trigger and tracks Escape and presses outside the open panel
+*   when its value changes after mount, and never for the value it mounts with. The hook keeps the
+*   value, from `value` or `defaultValue`, and hands the machine an item open at mount from the
+*   render after the first commit, so the machine sees that item open as a change. `onValueChange`
+*   receives each change the machine makes, and never the value the menu mounts with.
+* @param options - The machine options split from the root's props. React generates `id` when the
+*   caller states none.
+* @returns The connected api.
+*/
+function useNavigationMenuMachine(options) {
+	const $ = c(17);
+	const { defaultValue, onValueChange, value: stated, ...rest } = options;
+	const generated = useId();
+	const t0 = defaultValue ?? "";
+	let t1;
+	if ($[0] !== onValueChange) {
+		t1 = (next) => onValueChange?.({ value: next });
+		$[0] = onValueChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== stated || $[3] !== t0 || $[4] !== t1) {
+		t2 = {
+			defaultValue: t0,
+			onChange: t1,
+			value: stated
+		};
+		$[2] = stated;
+		$[3] = t0;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	const [value, setValue] = useControllableState(t2);
+	const [committed, setCommitted] = useState(value === "");
+	let t3;
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			setCommitted(true);
+		};
+		t4 = [];
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	useEffect(t3, t4);
+	const t5 = omitUndefined(rest);
+	const t6 = rest.id ?? generated;
+	let t7;
+	if ($[8] !== setValue) {
+		t7 = (details) => {
+			setValue(details.value);
+		};
+		$[8] = setValue;
+		$[9] = t7;
+	} else t7 = $[9];
+	const t8 = committed ? value : "";
+	let t9;
+	if ($[10] !== t5 || $[11] !== t6 || $[12] !== t7 || $[13] !== t8) {
+		t9 = {
+			...t5,
+			id: t6,
+			onValueChange: t7,
+			value: t8
+		};
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	const service = useMachine(navigationMenu.machine, t9);
+	let t10;
+	if ($[15] !== service) {
+		t10 = navigationMenu.connect(service, normalizeProps);
+		$[15] = service;
+		$[16] = t10;
+	} else t10 = $[16];
+	return t10;
+}
+/**
+* Splits the root's props into the machine's options and the element's props, without
+* `translations`.
+*
+* @remarks
+*   The key list comes from the machine's own `splitProps`, so it follows the installed machine.
+* @typeParam Props - Type of the root's props.
+* @param props - The root's props.
+* @returns The machine options and the element props.
+*/
+function splitNavigationMenuProps(props) {
+	const [options, rest] = splitEnumerable(navigationMenu.splitProps)(props);
+	const { translations: _translations, ...kept } = options;
+	return [kept, rest];
+}
+//#endregion
+//#region src/navigation-menu/scopes.ts
+/**
+* Provides the item a part renders in, the viewport's alignment, and whether a panel closes once
+* the pointer leaves it, to the parts that read them.
+*
+* @remarks
+*   A trigger, a panel and a link read the value of the item they belong to, and the viewport reads
+*   the alignment its positioner states. `useItem` throws for a part rendered outside an item.
+*/
+/**
+* Provides the item to the parts inside `NavigationMenu.Item`, and reads it back.
+*/
+const [ItemProvider, useItem] = createRequiredContext("NavigationMenu.Item");
+/**
+* Carries the alignment `NavigationMenu.ViewportPositioner` states to the viewport inside it.
+*/
+const Aligned = createContext(void 0);
+/**
+* Provides the positioner's alignment to the viewport.
+*/
+const AlignProvider = Aligned.Provider;
+/**
+* Returns the alignment of the positioner around the calling part.
+*
+* @returns The alignment, or nothing outside a positioner.
+*/
+function useAlign() {
+	return useContext(Aligned);
+}
+/**
+* Carries whether a panel closes once the pointer leaves it.
+*/
+const Leaving = createContext(true);
+/**
+* Provides whether a panel closes once the pointer leaves it to the panels, which the root sets
+* from `disablePointerLeaveClose`.
+*/
+const LeavingProvider = Leaving.Provider;
+/**
+* Returns whether a panel closes once the pointer leaves it.
+*
+* @returns False under a root with `disablePointerLeaveClose`, and true otherwise.
+*/
+function useClosesOnLeave() {
+	return useContext(Leaving);
+}
+//#endregion
+//#region src/navigation-menu/content.tsx
+/**
+* Renders the `div` with the navigation menu's content class.
+*/
+const Drawn = withContext$2("div", "content");
+/**
+* Renders the panel with the machine's content props and the presence props merged over the
+* caller's, inside the viewport while the menu renders one.
+*
+* @param props - The links and the props of a `div`.
+* @returns The `div` element, or the two elements of the machine's beside a portal to the viewport.
+*/
+function Content(props) {
+	const $ = c(32);
+	const api = useNavigationMenu();
+	const { value } = useItem();
+	const t0 = api.value === value;
+	let t1;
+	if ($[0] !== t0) {
+		t1 = { present: t0 };
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { props: presented, setNode } = usePresence(t1);
+	const closes = useClosesOnLeave();
+	let T0;
+	let t2;
+	if ($[2] !== api || $[3] !== closes || $[4] !== presented || $[5] !== props || $[6] !== value) {
+		const machine = api.getContentProps({ value });
+		const { onPointerLeave: _leave, ...kept } = machine;
+		T0 = Drawn;
+		t2 = mergeProps(closes ? machine : kept, presented, props);
+		$[2] = api;
+		$[3] = closes;
+		$[4] = presented;
+		$[5] = props;
+		$[6] = value;
+		$[7] = T0;
+		$[8] = t2;
+	} else {
+		T0 = $[7];
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== T0 || $[10] !== setNode || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t2,
+			ref: setNode
+		});
+		$[9] = T0;
+		$[10] = setNode;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	const panel = t3;
+	let t4;
+	if ($[13] !== api) {
+		t4 = api.getViewportNode();
+		$[13] = api;
+		$[14] = t4;
+	} else t4 = $[14];
+	const viewport = t4;
+	if (!api.isViewportRendered || viewport === null) return panel;
+	let t5;
+	if ($[15] !== api || $[16] !== value) {
+		t5 = api.getViewportProxyProps({ value });
+		$[15] = api;
+		$[16] = value;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", { ...t5 });
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== api || $[21] !== value) {
+		t7 = api.getTriggerProxyProps({ value });
+		$[20] = api;
+		$[21] = value;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== t7) {
+		t8 = /* @__PURE__ */ jsx("div", { ...t7 });
+		$[23] = t7;
+		$[24] = t8;
+	} else t8 = $[24];
+	let t9;
+	if ($[25] !== panel || $[26] !== viewport) {
+		t9 = /* @__PURE__ */ jsx(Portal, {
+			container: viewport,
+			children: panel
+		});
+		$[25] = panel;
+		$[26] = viewport;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== t6 || $[29] !== t8 || $[30] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t6,
+			t8,
+			t9
+		] });
+		$[28] = t6;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t10;
+	} else t10 = $[31];
+	return t10;
+}
+//#endregion
+//#region src/navigation-menu/indicator.tsx
+/**
+* Renders the `li` with the navigation menu's indicator class.
+*/
+const Marked = withContext$2("li", "indicator");
+/**
+* Renders the indicator with the machine's indicator props and the presence props merged over the
+* caller's.
+*
+* @param props - The props of an `li`.
+* @returns The `li` element.
+*/
+function Indicator$1(props) {
+	const $ = c(9);
+	const api = useNavigationMenu();
+	let t0;
+	if ($[0] !== api.open) {
+		t0 = { present: api.open };
+		$[0] = api.open;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { props: presented, setNode } = usePresence(t0);
+	let t1;
+	if ($[2] !== api || $[3] !== presented || $[4] !== props) {
+		t1 = mergeProps(api.getIndicatorProps(), presented, props);
+		$[2] = api;
+		$[3] = presented;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== setNode || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Marked, {
+			...t1,
+			ref: setNode
+		});
+		$[6] = setNode;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+//#endregion
+//#region src/navigation-menu/item.tsx
+/**
+* Renders the `li` with the navigation menu's item class.
+*/
+const Held = withContext$2("li", "item");
+/**
+* Renders the item with the machine's item props, and provides the item to its parts.
+*
+* @param props - The value, the disabled state, the trigger and panel or the link, and the props of
+*   an `li`.
+* @returns The `li` element.
+*/
+function Item$2(t0) {
+	const $ = c(3);
+	const { disabled, value, ...props } = t0;
+	const api = useNavigationMenu();
+	const item = {
+		...omitUndefined({ disabled }),
+		value
+	};
+	const T0 = Held;
+	const t1 = mergeProps(api.getItemProps(item), props);
+	let t2;
+	if ($[0] !== T0 || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, { ...t1 });
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return /* @__PURE__ */ jsx(ItemProvider, {
+		value: item,
+		children: t2
+	});
+}
+//#endregion
+//#region src/navigation-menu/link.tsx
+/**
+* Renders the `a` with the navigation menu's link class.
+*/
+const Linked = withContext$2("a", "link");
+/**
+* Runs on a press of a link whose caller passes no `onSelect`, so the machine registers a function
+* as the press's listener in every environment.
+*/
+function selected() {}
+/**
+* Renders the link with the machine's link props for its item.
+*
+* @param props - Whether it is current, whether a press closes the menu, the press handler, the
+*   words and the props of an `a`.
+* @returns The `a` element.
+*/
+function Link$2(t0) {
+	const $ = c(3);
+	const { closeOnClick, current, onSelect: t1, ...props } = t0;
+	const onSelect = t1 === void 0 ? selected : t1;
+	const api = useNavigationMenu();
+	const { value } = useItem();
+	const T0 = Linked;
+	const t2 = mergeProps(api.getLinkProps({
+		...omitUndefined({
+			closeOnClick,
+			current
+		}),
+		onSelect,
+		value
+	}), props);
+	let t3;
+	if ($[0] !== T0 || $[1] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, { ...t2 });
+		$[0] = T0;
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	return t3;
+}
+//#endregion
+//#region src/navigation-menu/list.tsx
+/**
+* Renders the `ul` with the navigation menu's list class.
 */
-const Link = withContext("a");
+const Listed = withContext$2("ul", "list");
+/**
+* Renders the list with the machine's list props merged under the caller's.
+*
+* @param props - The items and the props of a `ul`.
+* @returns The `ul` element.
+*/
+function List$1(props) {
+	const $ = c(5);
+	const t0 = useNavigationMenu();
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = mergeProps(t0.getListProps(), props);
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Listed, { ...t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+//#endregion
+//#region src/navigation-menu/root.tsx
+/**
+* Renders the `nav` that provides the recipe's variants.
+*/
+const Framed$1 = withProvider$2("nav", "root");
+/**
+* Renders the root and provides the machine's api to the parts.
+*
+* @param props - The machine's options, the recipe's variants and the props of a `nav`.
+* @returns The `nav` element inside the providers.
+*/
+function Root$2(t0) {
+	const $ = c(15);
+	const { palette, size, ...props } = t0;
+	const [options, rest] = splitNavigationMenuProps(props);
+	const api = useNavigationMenuMachine(options);
+	const T0 = ApiProvider$1;
+	const T1 = LeavingProvider;
+	const t1 = options.disablePointerLeaveClose !== true;
+	const T2 = Framed$1;
+	const t2 = mergeProps(api.getRootProps(), rest);
+	let t3;
+	if ($[0] !== palette || $[1] !== size) {
+		t3 = omitUndefined({
+			palette,
+			size
+		});
+		$[0] = palette;
+		$[1] = size;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== T2 || $[4] !== t2 || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T2, {
+			...t2,
+			...t3
+		});
+		$[3] = T2;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== T1 || $[8] !== t1 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T1, {
+			value: t1,
+			children: t4
+		});
+		$[7] = T1;
+		$[8] = t1;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== T0 || $[12] !== api || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			value: api,
+			children: t5
+		});
+		$[11] = T0;
+		$[12] = api;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+//#endregion
+//#region src/navigation-menu/trigger.tsx
+/**
+* Renders the `button` with the navigation menu's trigger class.
+*/
+const Pressed = withContext$2("button", "trigger");
+/**
+* Renders the trigger with the machine's props for its item.
+*
+* @param props - The words, the glyph and the props of a `button`.
+* @returns The `button` element.
+*/
+function Trigger(props) {
+	const $ = c(2);
+	const api = useNavigationMenu();
+	const t0 = mergeProps(api.getTriggerProps(useItem()), props);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Pressed, { ...t0 });
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+//#endregion
+//#region src/navigation-menu/viewport-positioner.tsx
+/**
+* Renders the `div` with the navigation menu's viewport positioner class.
+*/
+const Placed = withContext$2("div", "viewportPositioner");
+/**
+* Renders the positioner with the machine's props, and provides the alignment to the viewport.
+*
+* @param props - The alignment, the viewport and the props of a `div`.
+* @returns The `div` element.
+*/
+function ViewportPositioner(t0) {
+	const $ = c(7);
+	const { align, ...props } = t0;
+	const api = useNavigationMenu();
+	const T0 = AlignProvider;
+	const T1 = Placed;
+	const t1 = mergeProps(api.getViewportPositionerProps(omitUndefined({ align })), props);
+	let t2;
+	if ($[0] !== T1 || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T1, { ...t1 });
+		$[0] = T1;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== T0 || $[4] !== align || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			value: align,
+			children: t2
+		});
+		$[3] = T0;
+		$[4] = align;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+//#endregion
+//#region src/navigation-menu/viewport.tsx
+/**
+* Renders the `div` with the navigation menu's viewport class.
+*/
+const Shown = withContext$2("div", "viewport");
+/**
+* Renders the viewport with the machine's viewport props and the presence props merged over the
+* caller's.
+*
+* @param props - The props of a `div`.
+* @returns The `div` element.
+*/
+function Viewport(props) {
+	const $ = c(5);
+	const api = useNavigationMenu();
+	let t0;
+	if ($[0] !== api.open) {
+		t0 = { present: api.open };
+		$[0] = api.open;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { props: presented, setNode } = usePresence(t0);
+	const t1 = mergeProps(api.getViewportProps(omitUndefined({ align: useAlign() })), presented, props);
+	let t2;
+	if ($[2] !== setNode || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Shown, {
+			...t1,
+			ref: setNode
+		});
+		$[2] = setNode;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+//#endregion
+//#region src/navigation-menu/index.ts
+var navigation_menu_exports = /* @__PURE__ */ __exportAll({
+	Content: () => Content,
+	Indicator: () => Indicator$1,
+	Item: () => Item$2,
+	Link: () => Link$2,
+	List: () => List$1,
+	Root: () => Root$2,
+	Trigger: () => Trigger,
+	Viewport: () => Viewport,
+	ViewportPositioner: () => ViewportPositioner
+});
+//#endregion
+//#region src/pagination/context.ts
+/**
+* Binds the pagination's recipe to its parts.
+*
+* @remarks
+*   The binding is apart from the recipe, because a compiler reads the recipe at build time and the
+*   binding imports the runtime. It is apart from the machine, because the recipe styles a part and
+*   the machine sets its behaviour.
+*/
+/**
+* Binds the recipe once. The root provides the variants and every other part reads them.
+*/
+const { withContext: withContext$1, withProvider: withProvider$1 } = createSlotRecipeContext(recipe$4);
+//#endregion
+//#region src/pagination/machine.ts
+/**
+* Connects the pagination machine and provides its api to the parts.
+*
+* @remarks
+*   The root starts one machine and every part reads its api from context, so the pages, the
+*   triggers and the page text report the same page. The machine counts pages from one.
+*/
+/**
+* Creates the context through which the root provides the running machine to its parts.
+*
+* @remarks
+*   `usePagination` throws when no `Pagination.Root` is mounted above the calling part.
+*/
+const [MachineProvider, usePagination] = createRequiredContext("Pagination");
+/**
+* Starts the pagination machine and returns its connected api and the kind of its pages.
+*
+* @param options - Machine settings split from the root's props. React generates `id` when the
+*   caller states none.
+*/
+function usePaginationMachine(options) {
+	const $ = c(10);
+	const generated = useId();
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = options.id ?? generated;
+	let t2;
+	if ($[2] !== t0 || $[3] !== t1) {
+		t2 = {
+			...t0,
+			id: t1
+		};
+		$[2] = t0;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const service = useMachine(pagination.machine, t2);
+	let t3;
+	if ($[5] !== service) {
+		t3 = pagination.connect(service, normalizeProps);
+		$[5] = service;
+		$[6] = t3;
+	} else t3 = $[6];
+	const t4 = options.type ?? "button";
+	let t5;
+	if ($[7] !== t3 || $[8] !== t4) {
+		t5 = {
+			api: t3,
+			type: t4
+		};
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+/**
+* Splits the root's props into machine settings and element props, without `translations`.
+*
+* @remarks
+*   The key list comes from the machine's own `splitProps`, so it follows the installed version.
+* @typeParam Props - Type of the root's props.
+* @param props - The root's props.
+* @returns The machine settings and the element props.
+*/
+function splitPaginationProps(props) {
+	const [options, rest] = splitEnumerable(pagination.splitProps)(props);
+	const { translations: _translations, ...kept } = options;
+	return [kept, rest];
+}
+//#endregion
+//#region src/pagination/ellipsis.tsx
+/**
+* Renders the `span` with the pagination's ellipsis class.
+*/
+const Gap = withContext$1("span", "ellipsis");
+/**
+* Renders the ellipsis with the machine's props merged over the caller's.
+*
+* @param props - The mark's index and the props of a `span`.
+* @returns The `span` element.
+*/
+function Ellipsis(t0) {
+	const $ = c(4);
+	const { children, index, ...rest } = t0;
+	const { api } = usePagination();
+	const T0 = Gap;
+	const t1 = mergeProps(api.getEllipsisProps({ index }), { "aria-hidden": true }, rest);
+	const t2 = children ?? "…";
+	let t3;
+	if ($[0] !== T0 || $[1] !== t1 || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			children: t2
+		});
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/pagination/anchor.tsx
+/**
+* Renders the button as an `a` without a `type`.
+*
+* @param props - The props of a `Button` and the address the link opens.
+* @returns The `a` element with the button's classes.
+*/
+function Anchor(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Button, {
+			...props,
+			as: "a"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+//#endregion
+//#region src/pagination/bound.ts
+/**
+* Renders a page as the library's `Button` with the pagination's item class.
+*/
+const PageButton = withContext$1(Button, "item");
+/**
+* Renders a page as the button's `a` with the pagination's item class.
+*/
+const PageLink = withContext$1(Anchor, "item");
+/**
+* Renders a trigger as the library's `Button` with the pagination's trigger class.
+*/
+const TriggerButton = withContext$1(Button, "trigger");
+/**
+* Renders a trigger as the button's `a` with the pagination's trigger class.
+*/
+const TriggerLink = withContext$1(Anchor, "trigger");
+//#endregion
+//#region src/pagination/linked.ts
+/**
+* Returns a part's props as a link, without the machine's click handler.
+*
+* @remarks
+*   A trigger at an end opens no page, so it keeps no address. It takes the link role and a tab
+*   stop, because an `a` without `href` has neither, and the browser moves focus from an element it
+*   cannot focus to the page's body.
+* @param props - The props the machine gives the part.
+* @param end - Whether the part is a trigger with no page to open.
+* @returns The part's props.
+*/
+function linked({ href, onClick: _onClick, ...props }, end = false) {
+	return end ? {
+		...props,
+		role: "link",
+		tabIndex: 0
+	} : {
+		...props,
+		href
+	};
+}
+//#endregion
+//#region src/pagination/ended.ts
+/**
+* Returns a trigger's props with `aria-disabled` in place of `disabled` at an end, as a link when
+* the machine's pages are links.
+*
+* @param props - The props the machine gives the trigger.
+* @param end - Whether the trigger has no page to move to.
+* @param type - Whether the machine's pages are buttons or links.
+* @returns The trigger's props.
+*/
+function ended(props, end, type) {
+	const marked = {
+		...props,
+		"aria-disabled": end ? true : void 0,
+		disabled: void 0
+	};
+	return type === "link" ? linked(marked, end) : marked;
+}
+//#endregion
+//#region src/pagination/first-trigger.tsx
+/**
+* Renders the first trigger with the machine's props merged over the caller's.
+*
+* @param props - The trigger's name and the props of a `Button`.
+* @returns The `button` element, or an `a` for links.
+*/
+function FirstTrigger(t0) {
+	const $ = c(4);
+	const { label: t1, ...rest } = t0;
+	const label = t1 === void 0 ? "First page" : t1;
+	const { api, type } = usePagination();
+	const Pressed = type === "link" ? TriggerLink : TriggerButton;
+	const props = ended(api.getFirstTriggerProps(), api.page <= 1, type);
+	const t2 = mergeProps(props, rest);
+	let t3;
+	if ($[0] !== Pressed || $[1] !== label || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Pressed, {
+			...t2,
+			"aria-label": label,
+			shape: "square"
+		});
+		$[0] = Pressed;
+		$[1] = label;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/pagination/item.tsx
+/**
+* Renders a page with the machine's item props merged over the caller's.
+*
+* @param props - The page's number and name and the props of a `Button`.
+* @returns The `button` element, or an `a` for links.
+*/
+function Item$1(t0) {
+	const $ = c(5);
+	const { children, label, value, ...rest } = t0;
+	const { api, type } = usePagination();
+	const Paged = type === "link" ? PageLink : PageButton;
+	const item = api.getItemProps({
+		type: "page",
+		value
+	});
+	const t1 = mergeProps(type === "link" ? linked(item) : item, rest);
+	const t2 = label ?? `Page ${value}`;
+	const t3 = children ?? value;
+	let t4;
+	if ($[0] !== Paged || $[1] !== t1 || $[2] !== t2 || $[3] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Paged, {
+			...t1,
+			"aria-label": t2,
+			shape: "square",
+			children: t3
+		});
+		$[0] = Paged;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	return t4;
+}
+//#endregion
+//#region src/pagination/wording.ts
+/**
+* Returns the text for the current page in the format given.
+*
+* @remarks
+*   `compact` gives "Page 12 of 24", `short` "12 / 24" and `long` the range of items, "111–120 of
+*   240". A count of zero has no pages, which the formats word as "Page 0 of 0", "0 / 0" and "0–0
+*   of 0". A function receives the four details alone, whatever else the object passed in contains,
+*   and returns the words in any language.
+* @param details - Where the reader is among the pages, such as the machine's api.
+* @param format - The format, or the function that words the details.
+* @returns The text.
+*/
+function worded({ count, page, pageRange, totalPages }, format) {
+	if (typeof format === "function") return format({
+		count,
+		page,
+		pageRange,
+		totalPages
+	});
+	const shown = Math.min(page, totalPages);
+	const first = count === 0 ? 0 : pageRange.start + 1;
+	return {
+		compact: `Page ${shown} of ${totalPages}`,
+		long: `${first}–${pageRange.end} of ${count}`,
+		short: `${shown} / ${totalPages}`
+	}[format];
+}
+//#endregion
+//#region src/pagination/items.tsx
+/**
+* Renders the `output` with the pagination's summary class.
+*/
+const Summary = withContext$1("output", "summary");
+/**
+* Pairs every entry of the machine's list with a key: the page's number, or for a mark the number
+* of the page before it, because the list always opens on a page.
+*
+* @param pages - The machine's list of pages and marks.
+* @returns Each entry with its key, in order.
+*/
+function keyed(pages) {
+	let before = 0;
+	return pages.map((page) => {
+		if (page.type === "ellipsis") return [`after-${before}`, page];
+		before = page.value;
+		return [`page-${page.value}`, page];
+	});
+}
+/**
+* Renders the pages, the marks between them and the summary.
+*
+* @param props - The function that names a page and the summary's format.
+* @returns The items in the machine's order, then the summary.
+*/
+function Items(t0) {
+	const $ = c(13);
+	const { label, summary: t1 } = t0;
+	const summary = t1 === void 0 ? "compact" : t1;
+	const { api } = usePagination();
+	let t2;
+	if ($[0] !== api.pages || $[1] !== label) {
+		let t3;
+		if ($[3] !== label) {
+			t3 = (t4, index) => {
+				const [key, page] = t4;
+				return page.type === "page" ? /* @__PURE__ */ jsx(Item$1, {
+					label: label?.(page.value),
+					value: page.value
+				}, key) : /* @__PURE__ */ jsx(Ellipsis, { index }, key);
+			};
+			$[3] = label;
+			$[4] = t3;
+		} else t3 = $[4];
+		t2 = keyed(api.pages).map(t3);
+		$[0] = api.pages;
+		$[1] = label;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[5] !== api || $[6] !== summary) {
+		t3 = worded(api, summary);
+		$[5] = api;
+		$[6] = summary;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Summary, { children: t3 });
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t4] });
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+//#endregion
+//#region src/pagination/last-trigger.tsx
+/**
+* Renders the last trigger with the machine's props merged over the caller's.
+*
+* @param props - The trigger's name and the props of a `Button`.
+* @returns The `button` element, or an `a` for links.
+*/
+function LastTrigger(t0) {
+	const $ = c(4);
+	const { label: t1, ...rest } = t0;
+	const label = t1 === void 0 ? "Last page" : t1;
+	const { api, type } = usePagination();
+	const Pressed = type === "link" ? TriggerLink : TriggerButton;
+	const props = ended(api.getLastTriggerProps(), api.page >= api.totalPages, type);
+	const t2 = mergeProps(props, rest);
+	let t3;
+	if ($[0] !== Pressed || $[1] !== label || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Pressed, {
+			...t2,
+			"aria-label": label,
+			shape: "square"
+		});
+		$[0] = Pressed;
+		$[1] = label;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/pagination/next-trigger.tsx
+/**
+* Renders the next trigger with the machine's props merged over the caller's.
+*
+* @param props - The trigger's name and the props of a `Button`.
+* @returns The `button` element, or an `a` for links.
+*/
+function NextTrigger(t0) {
+	const $ = c(4);
+	const { label: t1, ...rest } = t0;
+	const label = t1 === void 0 ? "Next page" : t1;
+	const { api, type } = usePagination();
+	const Pressed = type === "link" ? TriggerLink : TriggerButton;
+	const props = ended(api.getNextTriggerProps(), api.page >= api.totalPages, type);
+	const t2 = mergeProps(props, rest);
+	let t3;
+	if ($[0] !== Pressed || $[1] !== label || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Pressed, {
+			...t2,
+			"aria-label": label,
+			shape: "square"
+		});
+		$[0] = Pressed;
+		$[1] = label;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/pagination/page-text.tsx
+/**
+* Renders the `output` with the pagination's page text class.
+*/
+const Stated = withContext$1("output", "pageText");
+/**
+* Renders the text for the current page.
+*
+* @param props - The format and the props of an `output`.
+* @returns The `output` element.
+*/
+function PageText(t0) {
+	const $ = c(9);
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({format: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = rest;
+		$[2] = t1;
+	} else {
+		rest = $[1];
+		t1 = $[2];
+	}
+	const format = t1 === void 0 ? "compact" : t1;
+	const { api } = usePagination();
+	let t2;
+	if ($[3] !== api || $[4] !== format) {
+		t2 = worded(api, format);
+		$[3] = api;
+		$[4] = format;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== rest || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stated, {
+			...rest,
+			children: t2
+		});
+		$[6] = rest;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+//#endregion
+//#region src/pagination/prev-trigger.tsx
+/**
+* Renders the previous trigger with the machine's props merged over the caller's.
+*
+* @param props - The trigger's name and the props of a `Button`.
+* @returns The `button` element, or an `a` for links.
+*/
+function PrevTrigger(t0) {
+	const $ = c(4);
+	const { label: t1, ...rest } = t0;
+	const label = t1 === void 0 ? "Previous page" : t1;
+	const { api, type } = usePagination();
+	const Pressed = type === "link" ? TriggerLink : TriggerButton;
+	const props = ended(api.getPrevTriggerProps(), api.page <= 1, type);
+	const t2 = mergeProps(props, rest);
+	let t3;
+	if ($[0] !== Pressed || $[1] !== label || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Pressed, {
+			...t2,
+			"aria-label": label,
+			shape: "square"
+		});
+		$[0] = Pressed;
+		$[1] = label;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+//#endregion
+//#region src/pagination/root.tsx
+/**
+* Renders the `nav` that provides the recipe's variants.
+*/
+const Framed = withProvider$1("nav", "root");
+/**
+* Renders the root, passes the buttons' variants down, and provides the running machine to the
+* parts.
+*
+* @param props - The machine's options, the buttons' look and palette, the recipe's variants and
+*   the props of a `nav`.
+* @returns The `nav` element inside the providers.
+*/
+function Root$1(t0) {
+	const $ = c(21);
+	const { "aria-label": t1, palette, size, variant: t2, ...props } = t0;
+	const label = t1 === void 0 ? "Pagination" : t1;
+	const variant = t2 === void 0 ? "ghost" : t2;
+	const [options, rest] = splitPaginationProps(props);
+	const machine = usePaginationMachine(options);
+	const [crowded, ref] = useCrowded();
+	const T0 = MachineProvider;
+	const T1 = ButtonPropsProvider;
+	let t3;
+	if ($[0] !== palette || $[1] !== size || $[2] !== variant) {
+		t3 = omitUndefined({
+			palette,
+			size,
+			variant
+		});
+		$[0] = palette;
+		$[1] = size;
+		$[2] = variant;
+		$[3] = t3;
+	} else t3 = $[3];
+	const T2 = Framed;
+	const t4 = mergeProps(machine.api.getRootProps(), rest);
+	const t5 = crowded ? "" : void 0;
+	let t6;
+	if ($[4] !== size) {
+		t6 = omitUndefined({ size });
+		$[4] = size;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== T2 || $[7] !== label || $[8] !== ref || $[9] !== t4 || $[10] !== t5 || $[11] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T2, {
+			...t4,
+			"aria-label": label,
+			"data-crowded": t5,
+			ref,
+			...t6
+		});
+		$[6] = T2;
+		$[7] = label;
+		$[8] = ref;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== T1 || $[14] !== t3 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T1, {
+			value: t3,
+			children: t7
+		});
+		$[13] = T1;
+		$[14] = t3;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== T0 || $[18] !== machine || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			value: machine,
+			children: t8
+		});
+		$[17] = T0;
+		$[18] = machine;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
+}
+//#endregion
+//#region src/pagination/index.ts
+var pagination_exports = /* @__PURE__ */ __exportAll({
+	Ellipsis: () => Ellipsis,
+	FirstTrigger: () => FirstTrigger,
+	Item: () => Item$1,
+	Items: () => Items,
+	LastTrigger: () => LastTrigger,
+	NextTrigger: () => NextTrigger,
+	PageText: () => PageText,
+	PrevTrigger: () => PrevTrigger,
+	Root: () => Root$1
+});
+//#endregion
+//#region src/toc/context.ts
+/**
+* Binds the table of contents slot recipe to React.
+*
+* @remarks
+*   The binding is a separate module from the recipe, because an application's compiler imports the
+*   recipe at build time and the binding needs the React runtime. It is separate from the machine,
+*   because the recipe sets the styles and the machine sets the state.
+*/
+/**
+* Factories for the parts. The root resolves the variants once and the other parts read them.
+*/
+const { withContext, withProvider } = createSlotRecipeContext(recipe$5);
+//#endregion
+//#region src/toc/reveal.ts
+/**
+* Scrolls the scroller a table of contents is in until its active row is in view, and leaves the
+* page that contains the headings where the reader put it.
+*/
+/**
+* Lists the values of `overflow-y` under which an element scrolls.
+*/
+const SCROLLING = /* @__PURE__ */ new Set(["auto", "scroll"]);
+/**
+* Returns the nearest ancestor of an element that scrolls vertically, or null where none does.
+*
+* @param element - The element inside the scroller.
+*/
+function scrollerOf(element) {
+	for (let at = element.parentElement; at !== null; at = at.parentElement) if (at.scrollHeight > at.clientHeight && SCROLLING.has(getComputedStyle(at).overflowY)) return at;
+	return null;
+}
+/**
+* Scrolls the nearest scroller around a row until the row is inside it, by the least distance.
+*
+* @remarks
+*   A scroller that also contains the heading the row names is the page's, which the reader moves,
+*   and the function leaves it alone. A list under the page's body would otherwise pull the page
+*   down to itself whenever the reader passed a heading. A list in a sticky aside scrolls on its
+*   own, and the row is revealed there. The row's own `scrollIntoView` scrolls every scroller
+*   around it, the page's included.
+* @param row - The active row.
+* @param heading - The heading the row names, or null where the document has none.
+* @param behavior - How the scroller moves, as `scrollBehavior` states it. The browser's default
+*   where it is left out.
+*/
+function revealRow(row, heading, behavior) {
+	const view = scrollerOf(row);
+	if (view === null || view.contains(heading)) return;
+	const at = row.getBoundingClientRect();
+	const box = view.getBoundingClientRect();
+	view.scrollBy({
+		...omitUndefined({ behavior }),
+		top: Math.max(0, at.bottom - box.bottom) - Math.max(0, box.top - at.top)
+	});
+}
+//#endregion
+//#region src/toc/machine.ts
+/**
+* Connects the table of contents machine and provides its api to the parts.
+*
+* @remarks
+*   The machine observes the listed headings with an `IntersectionObserver`, tracks the ids of the
+*   visible ones, and measures their items to position the indicator. The root starts one machine
+*   and every part reads its api from context. The machine derives the title's id from `id`, and
+*   the landmark references that id.
+*/
+/**
+* Creates the context through which the root provides the connected api to its parts.
+*
+* @remarks
+*   `useToc` throws when no `Toc.Root` is mounted above the calling part.
+*/
+const [ApiProvider, useToc] = createRequiredContext("Toc");
+/**
+* Splits the root's props into machine settings and element props.
+*
+* @remarks
+*   The key list comes from the machine's own `splitProps`, so it follows the installed version.
+*/
+const splitTocProps = splitEnumerable(toc.splitProps);
+/**
+* Runs the table of contents machine with a reveal that scrolls the list's own scroller alone.
+*
+* @remarks
+*   The machine reveals the active row with the row's own `scrollIntoView`, which also scrolls the
+*   page, and a list stacked under the page's body would pull the page down to itself whenever a
+*   heading becomes active. The override finds the row by the id the machine gives it, the
+*   caller's `ids.item` or `toc:<id>:item-<value>`, and `revealRow` scrolls the nearest scroller
+*   that does not also contain the headings.
+*/
+const MACHINE = {
+	...toc.machine,
+	implementations: {
+		...toc.machine.implementations,
+		actions: {
+			...toc.machine.implementations?.actions,
+			autoScrollToc: ({ context, prop, scope }) => {
+				const [active] = context.get("activeIds");
+				if (active === void 0 || !prop("autoScroll")) return;
+				const row = scope.getById(prop("ids")?.item?.(active) ?? `toc:${prop("id")}:item-${active}`);
+				if (row !== null) revealRow(row, scope.getById(active), prop("scrollBehavior"));
+			}
+		}
+	}
+};
+/**
+* Starts the table of contents machine and returns its connected api.
+*
+* @param options - Machine settings split from the root's props. A generated id is used when `id`
+*   is absent.
+*/
+function useTocMachine(options) {
+	const $ = c(5);
+	const generated = useId();
+	let t0;
+	if ($[0] !== options) {
+		t0 = omitUndefined(options);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	const t1 = options.id ?? generated;
+	let t2;
+	if ($[2] !== t0 || $[3] !== t1) {
+		t2 = {
+			...t0,
+			id: t1
+		};
+		$[2] = t0;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return toc.connect(useMachine(MACHINE, t2), normalizeProps);
+}
+//#endregion
+//#region src/toc/indicator.tsx
+/**
+* List item with the indicator slot classes.
+*/
+const Styled$4 = withContext("li", "indicator");
+/**
+* Renders a list item positioned over the active rows, hidden from the accessibility tree.
+*/
+function Indicator(props) {
+	const $ = c(5);
+	const api = useToc();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps({ "aria-hidden": true }, api.getIndicatorProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Styled$4, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/toc/item.tsx
+/**
+* List item with the item slot classes.
+*/
+const Styled$3 = withContext("li", "item");
+/**
+* Renders a list item with the depth and active state of its heading.
+*/
+function Item(t0) {
+	const $ = c(3);
+	const { item, ...rest } = t0;
+	const api = useToc();
+	const T0 = Styled$3;
+	const t1 = mergeProps(api.getItemProps({ item }), rest);
+	let t2;
+	if ($[0] !== T0 || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, { ...t1 });
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+//#endregion
+//#region src/toc/link.tsx
+/**
+* Anchor with the link slot classes.
+*/
+const Styled$2 = withContext("a", "link");
+/**
+* Renders an anchor that sets `aria-current` while its heading is visible.
+*/
+function Link$1(t0) {
+	const $ = c(3);
+	const { item, ...rest } = t0;
+	const api = useToc();
+	const T0 = Styled$2;
+	const t1 = mergeProps(api.getLinkProps({ item }), rest);
+	let t2;
+	if ($[0] !== T0 || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, { ...t1 });
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+//#endregion
+//#region src/toc/list.tsx
+/**
+* Unordered list with the list slot classes.
+*/
+const Styled$1 = withContext("ul", "list");
+/**
+* Renders an unordered list with the ID the machine measures the rows against.
+*/
+function List(props) {
+	const $ = c(5);
+	const api = useToc();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getListProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Styled$1, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/toc/root.tsx
+/**
+* Nav element that provides the recipe's variants to the parts.
+*/
+const Landmark = withProvider("nav", "root");
+/**
+* Renders the scroll area's root with the recipe's class, which leaves the focus ring room.
+*/
+const Scroller = withContext(ScrollArea.Root, "scroller");
+/**
+* Renders the scroll area's content with the recipe's class, a padded column of the children.
+*/
+const Column = withContext(ScrollArea.Content, "content");
+/**
+* Renders a `nav` that runs the machine and provides its api to the parts, around a scroll area
+* in the aside placement.
+*/
+function Root(props) {
+	const $ = c(17);
+	let t0;
+	if ($[0] !== props) {
+		t0 = splitTocProps(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [options, t1] = t0;
+	let children;
+	let rest;
+	if ($[2] !== t1) {
+		({children, ...rest} = t1);
+		$[2] = t1;
+		$[3] = children;
+		$[4] = rest;
+	} else {
+		children = $[3];
+		rest = $[4];
+	}
+	const api = useTocMachine(options);
+	let t2;
+	if ($[5] !== api) {
+		t2 = api.getRootProps();
+		$[5] = api;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children || $[8] !== rest.placement) {
+		t3 = rest.placement === "aside" ? /* @__PURE__ */ jsxs(Scroller, { children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			focusable: false,
+			children: /* @__PURE__ */ jsx(Column, { children })
+		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {})] }) : children;
+		$[7] = children;
+		$[8] = rest.placement;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== rest || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Landmark, {
+			...rest,
+			...t2,
+			children: t3
+		});
+		$[10] = rest;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== api || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ApiProvider, {
+			value: api,
+			children: t4
+		});
+		$[14] = api;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+//#endregion
+//#region src/toc/title.tsx
+/**
+* Div with the title slot classes.
+*/
+const Styled = withContext("div", "title");
+/**
+* Renders a div with the ID the root's `aria-labelledby` references.
+*/
+function Title(props) {
+	const $ = c(5);
+	const api = useToc();
+	let t0;
+	if ($[0] !== api || $[1] !== props) {
+		t0 = mergeProps(api.getTitleProps(), props);
+		$[0] = api;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Styled, { ...t0 });
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+//#endregion
+//#region src/toc/index.ts
+var toc_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => Indicator,
+	Item: () => Item,
+	Link: () => Link$1,
+	List: () => List,
+	Root: () => Root,
+	Title: () => Title
+});
 //#endregion
-export { breadcrumb_exports as Breadcrumb, Link, PropsProvider as LinkPropsProvider };
+export { breadcrumb_exports as Breadcrumb, Link, PropsProvider as LinkPropsProvider, nav_list_exports as NavList, navigation_menu_exports as NavigationMenu, pagination_exports as Pagination, toc_exports as Toc };