@stealthscale/component-navigation 0.1.0 → 0.3.0

package/dist/recipe-wIXGUbM7.js

@@ -0,0 +1,1541 @@
+import { HIGHLIGHTS, PALETTES, axis, below, controlSizes, cornerVariants, defineRecipe, defineSlotRecipe, dense, floating, gapSizes, highlightVariants, interactive, link, motion, onSlot, onSlots, paletteVariants, row, sizeVariants, textSizes, truncate } from "@stealthscale/theme/authoring";
+//#region src/breadcrumb/recipe.ts
+/**
+* Declares the breadcrumb slot recipe for an ordered list of links from the site root to the
+* current page, with a separator between each pair.
+*
+* @remarks
+*   The separator is a list row between two items, so a screen reader counts the crumbs without
+*   the separators. The size axis sets the text style on the root and the gap on the list, and
+*   every part inherits the text size. The axis stops at `xl`, because it reads the body text
+*   style. The links are muted and the current page is in the default ink. The recipe has no
+*   `palette` axis, because a trail has no color of its own. It has no `effect` axis, because it
+*   has no box.
+*/
+/**
+* Breadcrumb slot recipe, at the md size in the plain look by default.
+*/
+const recipe$5 = defineSlotRecipe({
+	base: {
+		currentLink: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: dense("{spacing.gap.xs}")
+		},
+		ellipsis: {
+			alignItems: "center",
+			color: "fg.muted",
+			display: "inline-flex"
+		},
+		item: {
+			alignItems: "center",
+			display: "inline-flex"
+		},
+		link: {
+			focusVisibleRing: "outside",
+			alignItems: "center",
+			borderRadius: "l1",
+			cursor: "button",
+			display: "inline-flex",
+			focusRingColor: "colorPalette.focusRing",
+			gap: dense("{spacing.gap.xs}"),
+			textDecoration: "none"
+		},
+		list: {
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			listStyle: "none",
+			margin: "0",
+			padding: "0",
+			wordBreak: "break-word"
+		},
+		separator: {
+			_rtl: { rotate: "180deg" },
+			color: "fg.muted"
+		}
+	},
+	className: "breadcrumb",
+	defaultVariants: {
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Breadcrumb(\.\w+)?$/u],
+	slots: [
+		"root",
+		"list",
+		"item",
+		"link",
+		"currentLink",
+		"ellipsis",
+		"separator"
+	],
+	variants: {
+		/**
+		* The text style of the root and the gap between list rows.
+		*/
+		size: onSlots({
+			list: gapSizes([
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			]),
+			root: textSizes("body")
+		}),
+		/**
+		* Whether the links show an underline at rest or only on hover.
+		*/
+		variant: {
+			plain: {
+				currentLink: { color: "fg" },
+				link: {
+					_hover: {
+						color: "fg",
+						textDecoration: "underline"
+					},
+					color: "fg.muted"
+				}
+			},
+			underline: {
+				currentLink: { color: "fg" },
+				link: {
+					_hover: { color: "fg" },
+					color: "fg.muted",
+					textDecoration: "underline"
+				}
+			}
+		}
+	}
+});
+//#endregion
+//#region src/link/recipe.ts
+/**
+* Declares the link recipe, which renders an inline anchor in the theme's link ink with an
+* underline at rest or on hover.
+*
+* @remarks
+*   The ink, the visited ink, the cursor and the focus ring come from `link()`, so a theme that
+*   restates `fg.link` restyles every link. The root is `inline-flex` with centred items, so an
+*   icon next to the text centres on the text instead of standing on the baseline. The recipe has
+*   no `effect` axis, because a link has no box for a glow or a pulse to surround. `staticCss`
+*   lists every palette, because `LinkPropsProvider` can set the value at run time.
+*/
+/**
+* Link recipe, underlined at rest by default.
+*/
+const recipe$4 = defineRecipe({
+	base: {
+		...link(),
+		alignItems: "center",
+		borderRadius: "l1",
+		display: "inline-flex",
+		gap: dense("{spacing.gap.xs}")
+	},
+	className: "link",
+	defaultVariants: { variant: "underline" },
+	jsx: [/^Link$/u],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Whether the link inherits the text color in place of the link ink.
+		*
+		* @remarks
+		*   Use it for a card title or a brand name, where the context already marks the text as a
+		*   link. The hover underline and the focus ring still apply. A `palette` set on the same link
+		*   takes precedence, because the compiler emits the palette axis after this one.
+		*/
+		inherit: { true: {
+			_visited: { color: "inherit" },
+			color: "inherit"
+		} },
+		/**
+		* The semantic palette the ink and the focus ring read from.
+		*
+		* @remarks
+		*   Each value sets `colorPalette` and writes the ink from the palette's `fg` role, visited
+		*   state included. Without a palette the link keeps `fg.link`, which a theme can restate
+		*   apart from `accent.fg`.
+		*/
+		palette: axis(PALETTES, (palette) => ({
+			_visited: { color: "colorPalette.fg" },
+			color: "colorPalette.fg",
+			colorPalette: palette
+		}))(),
+		/**
+		* Whether the underline shows at rest or only on hover.
+		*
+		* @remarks
+		*   `underline` is the default. Without an underline a link in running text differs from the
+		*   text only by ink, and the link ink measured 1.64:1 against body text on the ink theme,
+		*   under the 3:1 that WCAG technique G183 asks for. `plain` is for a link whose context marks
+		*   it: a card title, a navigation row, a brand name. `plain` restates the hover underline,
+		*   because its `none` is in the variants layer and overrides the base `_hover` rule.
+		*/
+		variant: {
+			plain: {
+				_hover: { textDecoration: "underline" },
+				textDecoration: "none"
+			},
+			underline: { textDecoration: "underline" }
+		}
+	}
+});
+//#endregion
+//#region src/nav-list/metrics.ts
+/**
+* Computes the geometry the navigation list's size axis is written from.
+*
+* @remarks
+*   The module covers the row, its leading icon, the end column and the nested list's margin. It is
+*   a separate module so the recipe is under the 300-line limit.
+*/
+/**
+* Maps each row size to the size token of its height: 24px, 32px and 40px at the foundation's
+* metrics.
+*
+* @remarks
+*   The `md` and `lg` rows read the control scale, so a sidebar's rows are as tall as its
+*   controls. The `sm` row reads the tag scale's `md` step, the WCAG 2.5.8 target size, for a
+*   dense list such as a catalogue's: with no gap between them its rows are 24px apart.
+*/
+const ROW = {
+	lg: "control.md",
+	md: "control.xs",
+	sm: "tag.md"
+};
+/**
+* Returns the width and height of a row's leading icon, one size smaller than the row on the icon
+* scale.
+*
+* @param size - The row's size.
+* @returns The icon's width and height.
+*/
+function glyph(size) {
+	return dense(`{sizes.icon.${below(size)}}`);
+}
+/**
+* Returns the scale step a row's label, inset and gap read: two steps below the row, and never
+* below `xs`.
+*
+* @remarks
+*   A middle row reads `xs`: a 12.6px label, an 8px inset and a 4px gap in a 32px row. A large row
+*   reads `sm`, and a small row reads `xs` like a middle one.
+* @param size - The row's size.
+* @returns The step.
+*/
+function lighter(size) {
+	return below(below(size));
+}
+/**
+* Returns the gap between a list's rows. An `sm` list sets none, so the rows of a dense list
+* touch, and an `md` or `lg` list sets the gap two sizes smaller than the row.
+*
+* @param size - The row's size.
+* @returns The gap, multiplied by the density.
+*/
+function between(size) {
+	return size === "sm" ? "0" : dense(`{spacing.gap.${lighter(size)}}`);
+}
+/**
+* Returns the inline inset of a row: the space before its icon and after its end column.
+*
+* @param size - The row's size.
+* @returns The inset, multiplied by the density.
+*/
+function inset(size) {
+	return dense(`{spacing.inset.${lighter(size)}}`);
+}
+/**
+* Returns the size styles of a link or a trigger.
+*
+* @remarks
+*   The label, the inset and the gap are two sizes smaller than the row, so a row is lighter than
+*   a button of the same height. The current row is semibold here and not in the base, because the
+*   label text style sets its own weight and the compiler emits variants after the base. The
+*   `highlight` axis sets the current row's ink, and the compiler emits `size` after `highlight`,
+*   so this function sets no ink. The row is at least `sizes.6` (24px) tall at any density, the
+*   WCAG 2.5.8 target size. The recipe sizes the icon, so the line down a nested list is aligned
+*   with the icon's centre.
+* @param size - The row's size.
+* @returns The styles of a link or a trigger at that size.
+*/
+function rowed(size) {
+	return {
+		textStyle: `label.${lighter(size)}`,
+		_currentPage: { fontWeight: "semibold" },
+		"& > svg": {
+			boxSize: glyph(size),
+			flexShrink: "0"
+		},
+		blockSize: `max({sizes.6}, ${dense(`{sizes.${ROW[size]}}`)})`,
+		gap: dense(`{spacing.gap.${lighter(size)}}`),
+		paddingInline: inset(size)
+	};
+}
+/**
+* Returns the side of the end column's square: the tag size one step below the row, and never
+* under `sizes.6`.
+*
+* @remarks
+*   The control is positioned over the row's link, so the WCAG 2.5.8 spacing exception does not
+*   apply and the control needs a 24px target. The square is at least 24px at every size and
+*   density.
+*/
+function square(size) {
+	return `max({sizes.6}, ${dense(`{sizes.tag.${below(size)}}`)})`;
+}
+/**
+* Returns the styles that make the end column a square with its content centred.
+*
+* @remarks
+*   The count, the control and the indicator share this square, so their centres are at one
+*   distance from the row's end. The square sets a minimum width, so a three-digit count extends
+*   it towards the row's start.
+* @param size - The row's size.
+* @returns The styles of the count, the control or the indicator at that size.
+*/
+function trailing(size) {
+	return {
+		alignItems: "center",
+		blockSize: square(size),
+		display: "flex",
+		justifyContent: "center",
+		minInlineSize: square(size)
+	};
+}
+/**
+* Returns the space between the end column and the row's edge, equal to the row's inset at the
+* start.
+*
+* @param size - The row's size.
+* @returns The end margin of the count or the control.
+*/
+function tucked(size) {
+	return { marginInlineEnd: inset(size) };
+}
+/**
+* Returns the end padding a row keeps for a part positioned over it: the inset, the gap and the
+* square.
+*
+* @remarks
+*   The count and the control are positioned over the row, and the padding keeps the row's text
+*   clear of them.
+* @param size - The row's size.
+* @returns The row's end padding.
+*/
+function reserved(size) {
+	return `calc(${inset(size)} + ${dense(`{spacing.gap.${lighter(size)}}`)} + ${square(size)})`;
+}
+/**
+* Returns the start margin that puts the line down a nested list on the centre of the trigger's
+* icon.
+*
+* @remarks
+*   The margin is the trigger's inset plus half the icon, less half the line. At the middle size
+*   the line is 16px from the list's start, on the centre of a 16px icon that starts at 8px. A
+*   trigger without a leading icon puts the line at its inset, under the start of its text.
+* @param size - The row's size.
+* @returns The nested list's start margin.
+*/
+function centred(size) {
+	return `calc(${inset(size)} + ${glyph(size)} / 2 - {borderWidths.hairline} / 2)`;
+}
+//#endregion
+//#region src/nav-list/recipe.ts
+/**
+* Declares the navigation list's slot recipe: rows of links, branches that expand a nested list,
+* and the count, control and indicator at the end of a row.
+*
+* @remarks
+*   A row reads the theme's `row` fragment and no second recipe, so one rule sets its height. A
+*   nested list reuses `Item` and `Link`, and `Content` sets the subtle ink the nested rows
+*   inherit. `Content` animates between the heights the collapsible machine measures, and the
+*   indicator rotates a quarter turn as the branch opens. `iconic` renders every row as a square
+*   containing its icon, with the text kept for screen readers, and removes the end padding, so a
+*   row with a control is as wide as a row without one. The count, the control and the indicator
+*   share one column at the end of a row.
+*/
+/**
+* The recipe's class name, used to build the selectors that reach from one part to another.
+*
+* @remarks
+*   The binding writes one class per part, such as `nav-list__action`, and no part attribute, so a
+*   selector across parts targets the class, built from this constant. The keyboard module reads
+*   the same constant to find the rows.
+*/
+const CLASS$1 = "nav-list";
+/**
+* Selects the control at the end of a row, from a rule on the row.
+*/
+const ACTION = `.${CLASS$1}__action`;
+/**
+* Selects either the count or the control at the end of a row.
+*/
+const TRAILED = `:is(${ACTION}, ${`.${CLASS$1}__badge`})`;
+/**
+* Styles a row of the iconic list: a square containing the icon, with the text hidden visually.
+*
+* @remarks
+*   The text remains in the accessibility tree through `srOnly`, because a link without a name is
+*   announced as `link` alone. `srOnly` also takes the text out of the flow, where clipping by
+*   overflow would leave it inside the square and squeeze the icon. Only an `svg` child and a mark
+*   remain visible. The square has no inline padding, so the icon is centred in it.
+*/
+const SQUARED = {
+	[`& > :not(svg, ${`.${CLASS$1}__mark`})`]: { srOnly: true },
+	aspectRatio: "square",
+	inlineSize: "auto",
+	justifyContent: "center",
+	paddingInline: "0"
+};
+/**
+* Styles every row a person presses: the theme's row fragment at the full width of the list, with
+* a minimum width of zero so the text can truncate.
+*
+* @remarks
+*   A row takes the list's muted ink, and the current row takes `fg`. The `highlight` axis writes
+*   the current row's ink again in a later layer, so the fill highlight's contrast ink applies over
+*   `fg`. The bar highlight writes no ink and keeps `fg`.
+*/
+const PRESSABLE = {
+	...row(),
+	...interactive(),
+	_currentPage: { color: "fg" },
+	_hover: { background: "colorPalette.subtle" },
+	cursor: "button",
+	inlineSize: "full",
+	justifyContent: "flex-start",
+	minInlineSize: "0"
+};
+/**
+* Positions a part at the end of a row: absolutely, over the row, centred on the block axis.
+*
+* @remarks
+*   The part is out of the flow so the highlight fill spans the whole row. In the flow, the fill
+*   would stop where the control begins and leave a notch at the end of the row.
+*/
+const BESIDE = {
+	insetInlineEnd: "0",
+	position: "absolute",
+	top: "50%",
+	translate: "0 -50%"
+};
+/**
+* Styles the control at the end of a row as an unfilled square button that fills on hover.
+*
+* @remarks
+*   The end column sizes the action, so it fits inside the row at every size. The hover fill is
+*   `emphasized`, two steps darker than the row's `subtle` hover and one step darker than the tint
+*   highlight, so a hovered control shows an edge on its hovered row.
+*/
+const ACTING = {
+	...BESIDE,
+	...interactive(),
+	_hover: {
+		background: "colorPalette.emphasized",
+		color: "fg"
+	},
+	appearance: "none",
+	background: "transparent",
+	borderRadius: "l1",
+	borderStyle: "none",
+	color: "fg.muted",
+	padding: "0"
+};
+/**
+* Selects the row a person presses, a link or a trigger, from a rule on the item.
+*/
+const PRESSED = `:is(.${CLASS$1}__link, .${CLASS$1}__trigger)`;
+/**
+* Selects the row for the current page by its `aria-current` attribute.
+*/
+const CURRENT = "[aria-current=\"page\"]";
+/**
+* Selects a branch's nested list whose trigger leads with an icon, from a rule on the branch.
+*/
+const UNDER_ICON = `&:has(> .${CLASS$1}__trigger > svg:first-child) > .${CLASS$1}__content`;
+/**
+* The glow the `effect` axis puts around the current row.
+*/
+const GLOWING = { _currentPage: { layerStyle: "glow.sm" } };
+/**
+* Styles a column of rows at the md size in muted ink, tinting the current row.
+*
+* @remarks
+*   The rows take `fg.muted` from the root, a nested list's rows take `fg.subtle`, and the current
+*   row takes `fg`. The count sets its own ink. The count is a sibling of the link, so it does not
+*   inherit the ink of the link's highlight, and the compound for the fill highlight sets the
+*   fill's contrast ink on it. `staticCss` lists every size and the iconic list, which a sidebar
+*   passes to its lists while it runs.
+*/
+const recipe$3 = defineSlotRecipe({
+	base: {
+		action: ACTING,
+		badge: {
+			...BESIDE,
+			color: "fg.muted",
+			pointerEvents: "none"
+		},
+		branch: {
+			listStyle: "none",
+			minInlineSize: "0"
+		},
+		content: {
+			_closed: { animationStyle: "collapse.out" },
+			_open: { animationStyle: "collapse.in" },
+			"&[hidden]": { display: "none" },
+			borderColor: "border",
+			borderInlineStartWidth: "hairline",
+			color: "fg.subtle",
+			display: "flex",
+			flexDirection: "column",
+			listStyle: "none",
+			margin: "0",
+			minInlineSize: "0",
+			overflow: "hidden",
+			padding: "0"
+		},
+		indicator: {
+			_motionReduce: { transitionDuration: "0s" },
+			_open: { rotate: "90deg" },
+			_rtl: {
+				_open: { rotate: "90deg" },
+				rotate: "180deg"
+			},
+			color: "fg.muted",
+			display: "flex",
+			flexShrink: "0",
+			marginInlineStart: "auto",
+			transitionDuration: "press",
+			transitionProperty: "rotate",
+			transitionTimingFunction: "press"
+		},
+		item: {
+			/**
+			* The row keeps its hover fill while the pointer is on its control. The control is a sibling
+			* of the link, so the link's own hover ends when the pointer moves onto the control.
+			*/
+			[`&:has(> ${ACTION}:hover) > ${PRESSED}`]: { background: "colorPalette.subtle" },
+			listStyle: "none",
+			minInlineSize: "0",
+			position: "relative"
+		},
+		link: PRESSABLE,
+		mark: {
+			alignItems: "center",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center"
+		},
+		root: {
+			color: "fg.muted",
+			display: "flex",
+			flexDirection: "column",
+			listStyle: "none",
+			margin: "0",
+			minInlineSize: "0",
+			padding: "0"
+		},
+		skeleton: {
+			alignItems: "center",
+			display: "flex"
+		},
+		trigger: {
+			...PRESSABLE,
+			appearance: "none",
+			background: "transparent",
+			borderStyle: "none",
+			color: "inherit"
+		}
+	},
+	className: CLASS$1,
+	compoundVariants: [{
+		css: {
+			action: { display: "none" },
+			badge: { srOnly: true },
+			content: { display: "none" },
+			indicator: { display: "none" },
+			item: { [`&:has(> ${TRAILED}) > ${PRESSED}`]: { paddingInlineEnd: "0" } },
+			link: { ...SQUARED },
+			trigger: { ...SQUARED }
+		},
+		iconic: true,
+		name: "squared",
+		variant: "list"
+	}, (
+	/**
+	* The count and the control next to the current row take the fill's contrast ink when the
+	* highlight is a fill.
+	*
+	* @remarks
+	*   The count is positioned over the filled row, where the muted ink is 3.1:1 against the
+	*   fill, under the 4.5:1 WCAG 1.4.3 requires for text. The control's icon is under the same
+	*   fill. The tint and bar highlights leave the row on the page surface, where the muted ink
+	*   meets the ratio. Both parts follow the link in the DOM, so the rule selects them as
+	*   following siblings of the current row. The control hovers to the fill's own hover role,
+	*   because `emphasized` is lighter than the solid fill.
+	*/
+	{
+		css: {
+			action: { [`${PRESSED}${CURRENT} ~ &`]: {
+				_hover: {
+					background: "colorPalette.solid.hover",
+					color: "colorPalette.contrast"
+				},
+				color: "colorPalette.contrast"
+			} },
+			badge: { [`${PRESSED}${CURRENT} ~ &`]: { color: "colorPalette.contrast" } }
+		},
+		highlight: "fill",
+		name: "inked",
+		variant: "list"
+	})],
+	defaultVariants: {
+		guide: "solid",
+		highlight: "tint",
+		radius: "l2",
+		reveal: "always",
+		size: "md",
+		variant: "list"
+	},
+	jsx: [/^NavList(\.\w+)?$/u],
+	slots: [
+		"root",
+		"item",
+		"link",
+		"mark",
+		"action",
+		"badge",
+		"branch",
+		"trigger",
+		"indicator",
+		"content",
+		"skeleton"
+	],
+	staticCss: [{
+		iconic: ["true"],
+		size: [
+			"sm",
+			"md",
+			"lg"
+		]
+	}],
+	variants: {
+		/**
+		* The halo around the current row, in the palette's solid at half opacity.
+		*/
+		effect: onSlots({
+			link: { glow: GLOWING },
+			trigger: { glow: GLOWING }
+		}),
+		/**
+		* The style of the line down the start of a nested list.
+		*
+		* @remarks
+		*   `none` removes the line and keeps the indent.
+		*/
+		guide: onSlot("content", {
+			dashed: { borderInlineStartStyle: "dashed" },
+			dotted: { borderInlineStartStyle: "dotted" },
+			none: { borderInlineStartStyle: "none" },
+			solid: { borderInlineStartStyle: "solid" }
+		}),
+		/**
+		* How the current row is marked.
+		*/
+		highlight: onSlots({
+			link: highlightVariants(HIGHLIGHTS, "_currentPage"),
+			trigger: highlightVariants(HIGHLIGHTS, "_currentPage")
+		}),
+		/**
+		* Whether the rows render as squares containing their icons, with the text kept for screen
+		* readers.
+		*
+		* @remarks
+		*   A sidebar that collapses to a rail sets it. The list measures nothing itself.
+		*/
+		iconic: { true: { root: { alignItems: "center" } } },
+		/**
+		* The palette the highlight, the hover fill and the branch rows read.
+		*
+		* @remarks
+		*   The palette is set on the root, and every part inherits the palette's custom properties.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		radius: onSlots({
+			link: cornerVariants([
+				"l1",
+				"l2",
+				"l3",
+				"full"
+			]),
+			trigger: cornerVariants([
+				"l1",
+				"l2",
+				"l3",
+				"full"
+			])
+		}),
+		/**
+		* When the control at the end of a row is visible.
+		*
+		* @remarks
+		*   With `hover`, the control is hidden until its row is hovered. It is visible on the current
+		*   row and under a coarse pointer, which cannot hover. It is also visible while any element in
+		*   its row has focus, so a keyboard user can operate it.
+		*/
+		reveal: {
+			always: { action: { opacity: "1" } },
+			hover: {
+				action: {
+					_touch: { opacity: "1" },
+					opacity: "0",
+					transitionDuration: "press",
+					transitionProperty: "common",
+					transitionTimingFunction: "press"
+				},
+				item: { [`&:focus-within ${ACTION}, &:hover ${ACTION}, &:has(> ${PRESSED}${CURRENT}) ${ACTION}`]: { opacity: "1" } }
+			}
+		},
+		size: onSlots({
+			action: sizeVariants((size) => ({
+				...trailing(size),
+				...tucked(size)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			/**
+			* The count's text style is the row label's.
+			*/
+			badge: sizeVariants((size) => ({
+				...trailing(size),
+				...tucked(size),
+				textStyle: `label.${lighter(size)}`
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			branch: sizeVariants((size) => ({ [UNDER_ICON]: { marginInlineStart: centred(size) } }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			/**
+			* A nested list's rows are as far apart as the list's own. Without an icon on the trigger,
+			* the line is at the trigger's inset, under the start of its text.
+			*/
+			content: sizeVariants((size) => ({
+				gap: between(size),
+				marginInlineStart: inset(size),
+				paddingBlock: "0.5",
+				paddingInlineStart: dense(`{spacing.inset.${below(size)}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			indicator: sizeVariants(trailing, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			/**
+			* The end padding a row keeps for the count or the control positioned over it.
+			*
+			* @remarks
+			*   The rule is on this axis, not in the item's base, because the compiler puts variants in a
+			*   layer over the base, and the row's own `paddingInline` comes from this axis. A later
+			*   layer applies over any specificity, so the same rule in the base, three classes deep,
+			*   would lose to a variant one class deep.
+			*/
+			item: sizeVariants((size) => ({ [`&:has(> ${TRAILED}) > ${PRESSED}`]: { paddingInlineEnd: reserved(size) } }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			link: sizeVariants(rowed, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			root: sizeVariants((size) => ({ gap: between(size) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			skeleton: sizeVariants((size) => ({
+				blockSize: dense(`{sizes.tag.${size}}`),
+				gap: dense(`{spacing.gap.${lighter(size)}}`),
+				paddingInline: inset(size)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			trigger: sizeVariants(rowed, [
+				"sm",
+				"md",
+				"lg"
+			])
+		}),
+		/**
+		* Whether the rows run down the side of a page or across the foot of a screen.
+		*
+		* @remarks
+		*   `dock` lays a few links out in equal columns, each an `icon.lg` icon over a `label.xs`
+		*   caption, and pads the root by the safe area a device reserves at the foot of the screen.
+		*   The current destination is marked by `fg` and the semibold weight, with no fill. It is
+		*   named `dock` because the `highlight` axis already offers `bar`, and two values with one
+		*   name on a slot compile to one class.
+		*/
+		variant: {
+			dock: {
+				item: {
+					flex: "1",
+					minInlineSize: "0"
+				},
+				link: {
+					textStyle: "label.xs",
+					_currentPage: {
+						background: "transparent",
+						color: "fg"
+					},
+					"& > svg": { boxSize: dense("{sizes.icon.lg}") },
+					blockSize: "auto",
+					flexDirection: "column",
+					gap: dense("{spacing.gap.xs}"),
+					justifyContent: "center",
+					paddingBlock: dense("{spacing.gap.sm}"),
+					paddingInline: dense("{spacing.gap.xs}")
+				},
+				root: {
+					alignItems: "stretch",
+					flexDirection: "row",
+					gap: dense("{spacing.gap.xs}"),
+					paddingBlockEnd: "safe.bottom"
+				}
+			},
+			list: {
+				link: truncate(),
+				trigger: truncate()
+			}
+		}
+	}
+});
+//#endregion
+//#region src/navigation-menu/metrics.ts
+/**
+* Writes the selectors and the size geometry the navigation menu's recipe is written from.
+*
+* @remarks
+*   The module covers the bar's controls, the place a panel opens at and a panel's links. It is a
+*   separate module so the recipe is under the 300-line limit.
+*/
+/**
+* Class name of the recipe, from which the binding writes each part's class.
+*/
+const CLASS = "navigation-menu";
+/**
+* Lists the sizes the menu offers, in reading order.
+*/
+const SIZES$1 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Selects a link in the bar, beside the triggers, from a rule on the link.
+*/
+const BARRED = `.${CLASS}__item > &`;
+/**
+* Fill and ink of a trigger or a link in the bar under the pointer.
+*/
+const HOVERED = {
+	background: "bg.subtle",
+	color: "fg"
+};
+/**
+* Selects a panel shown inside the viewport, from a rule on the panel.
+*/
+const VIEWED = `.${CLASS}__viewport > &`;
+/**
+* Selects a trigger in a vertical menu from its item, because the machine writes the orientation
+* on the item and not on the trigger.
+*/
+const UPRIGHT = "[data-orientation=vertical] > &";
+/**
+* Selects a list that renders an indicator.
+*/
+const INDICATED = `.${CLASS}__list:has(> .${CLASS}__indicator)`;
+/**
+* Selects an item in a list that renders an indicator, which is not positioned, because the machine
+* measures a trigger against its positioned ancestor and the indicator reads that place against
+* the list.
+*/
+const UNANCHORED = `${INDICATED} > &`;
+/**
+* Selects a panel in place in a list that renders an indicator, which reads its trigger's measured
+* place, because its item is not positioned.
+*/
+const MEASURED = `${INDICATED} &`;
+/**
+* Selects a panel in place in a horizontal list that renders an indicator, which reads its
+* trigger's measured inline place.
+*/
+const ACROSS = `.${CLASS}__list[data-orientation=horizontal]:has(> .${CLASS}__indicator) &`;
+/**
+* Selects a panel in place in a list that renders an indicator while another item is open, which
+* hides at once, because the measured place it reads is the open trigger's.
+*/
+const REPLACED = `${INDICATED}:has(> .${CLASS}__item[data-state=open]) &`;
+/**
+* Selects an element whose first element is an icon: a panel link with a leading icon, and the
+* control that `controlSizes` gives one step less inset at its start, which a trigger leaves out,
+* because its icon trails its words.
+*/
+const LEADING = "&:has(> svg:first-child)";
+/**
+* Moves an element back by one hairline.
+*/
+const HAIRLINE_BACK = "calc({borderWidths.hairline} * -1)";
+/**
+* Moves an element back by two hairlines.
+*/
+const HAIRLINES_BACK = "calc({borderWidths.hairline} * -2)";
+/**
+* Returns the viewport's correction for its two hairline edges, which the machine leaves out when
+* it aligns the panel's width to the open trigger.
+*
+* @remarks
+*   The viewport's content box is the panel's size, so its edges make it two hairlines wider and
+*   taller than the box the machine places. A centred viewport moves back by one hairline and an
+*   end-aligned one by two, along the bar's axis. The machine's place is physical, so the
+*   correction is too.
+*/
+function aligned() {
+	return {
+		"&[data-align=center]": {
+			_vertical: {
+				marginLeft: "0",
+				marginTop: HAIRLINE_BACK
+			},
+			marginLeft: HAIRLINE_BACK
+		},
+		"&[data-align=end]": {
+			_vertical: {
+				marginLeft: "0",
+				marginTop: HAIRLINES_BACK
+			},
+			marginLeft: HAIRLINES_BACK
+		}
+	};
+}
+/**
+* Returns what a trigger and a link in the bar share: a control in the muted ink, laid out in a
+* row, that fills under the pointer.
+*/
+function barred() {
+	return {
+		...interactive(),
+		_hover: HOVERED,
+		alignItems: "center",
+		borderRadius: "l2",
+		color: "fg.muted",
+		display: "inline-flex",
+		flexDirection: "row",
+		fontWeight: "medium",
+		textDecoration: "none",
+		whiteSpace: "nowrap"
+	};
+}
+/**
+* Returns a trigger's size: a control's height, text and insets, the end inset one step less
+* before a trailing icon, and the icon one step smaller on the icon scale.
+*
+* @param size - The size of the menu.
+*/
+function triggered(size) {
+	const { [LEADING]: _leading, ...control } = controlSizes()[size];
+	return {
+		...control,
+		"&:has(> svg:last-child)": { paddingInlineEnd: dense(`{spacing.inset.${below(size)}}`) },
+		"& > svg": { boxSize: dense(`{sizes.icon.${below(size)}}`) }
+	};
+}
+/**
+* Returns where a panel in place opens: one gap under its trigger, or one gap beside it in a
+* vertical menu.
+*
+* @remarks
+*   A panel is placed against its item. In a list that renders an indicator it reads the trigger's
+*   measured place against the list instead. Inside the viewport a panel is not positioned, so no
+*   offset here applies to it.
+* @param size - The size of the menu.
+*/
+function placed(size) {
+	const gap = dense(`{spacing.gap.${size}}`);
+	const beside = `calc(100% + ${gap})`;
+	return {
+		_vertical: {
+			insetBlockStart: "0",
+			insetInlineStart: beside
+		},
+		[ACROSS]: {
+			left: "var(--trigger-x, 0px)",
+			right: "auto"
+		},
+		insetBlockStart: beside,
+		[MEASURED]: {
+			_vertical: { insetBlockStart: "var(--trigger-y, 0px)" },
+			insetBlockStart: `calc(var(--trigger-y, 0px) + var(--trigger-height, 0px) + ${gap})`
+		}
+	};
+}
+/**
+* Returns a link's size: a row of the panel with its icon on the icon scale, or a trigger's size
+* for a link in the bar.
+*
+* @param size - The size of the menu.
+*/
+function linked(size) {
+	return {
+		textStyle: `body.${below(size)}`,
+		"& > svg": { boxSize: dense(`{sizes.icon.${size}}`) },
+		[BARRED]: {
+			...triggered(size),
+			paddingBlock: "0"
+		},
+		columnGap: dense(`{spacing.gap.${size}}`),
+		paddingBlock: dense(`{spacing.gap.${size}}`),
+		paddingInline: dense(`{spacing.inset.${below(size)}}`),
+		rowGap: dense("{spacing.gap.xs}")
+	};
+}
+//#endregion
+//#region src/navigation-menu/recipe.ts
+/**
+* Recipe for the navigation menu: a bar of triggers and links, the panel each trigger opens, the
+* links in a panel, the bar under the open trigger, and the viewport the panels share.
+*
+* @remarks
+*   A trigger and a link in the bar are controls of the size's height in the muted ink, and take
+*   `fg` under the pointer and while open. The bar wraps onto a second row when its items do not
+*   fit. A panel in place opens one gap under its trigger and is as wide as its content, at most
+*   `sizes.2xl` and 20px narrower than the window, because the machine keeps the viewport 10px
+*   inside it. The indicator is a bar along the open trigger's bottom edge, placed from the
+*   machine's `--trigger-x`, `--trigger-y`, `--trigger-width` and `--trigger-height`. Inside the
+*   viewport a panel drops its surface and every panel takes the viewport's one grid cell, so the
+*   panel that leaves fades over the panel that enters. The viewport is one floating surface that
+*   moves to `--viewport-x`, and its content box takes the open panel's `--viewport-width` and
+*   `--viewport-height`, so its hairline edge clips none of the panel. A panel link places a
+*   leading icon in a column of its own, beside every other child, and packs its rows at its top
+*   when a taller link beside it stretches it. The palette colors the indicator and a link to the
+*   current page.
+*/
+/**
+* Forced colors of a state that fills a control: the system highlight, which the browser keeps.
+*
+* @remarks
+*   The compiler emits the hover rule after the forced-colors rule, so an open trigger under the
+*   pointer restates these inside its hover rule, where the open state's selector raises the
+*   specificity over the hover fill's.
+*/
+const FORCED = { _highContrast: {
+	background: "Highlight",
+	color: "HighlightText",
+	forcedColorAdjust: "none"
+} };
+/**
+* Defines the navigation menu recipe, at size `md` in the primary palette by default.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		content: {
+			...floating(),
+			display: "flex",
+			flexDirection: "column",
+			inlineSize: "max-content",
+			insetInlineStart: "0",
+			maxInlineSize: "min({sizes.2xl}, calc(100vw - {spacing.5}))",
+			position: "absolute",
+			[REPLACED]: { _closed: { animation: "none" } },
+			[VIEWED]: {
+				...motion("fade.in", "fade.out"),
+				alignSelf: "start",
+				background: "transparent",
+				borderWidth: "0",
+				boxShadow: "none",
+				gridArea: "1 / 1 / 2 / 2",
+				position: "static"
+			}
+		},
+		indicator: {
+			...motion("fade.in", "fade.out"),
+			_highContrast: {
+				background: "CanvasText",
+				forcedColorAdjust: "none"
+			},
+			_motionReduce: { transitionDuration: "0s" },
+			_vertical: {
+				_rtl: {
+					left: "auto",
+					right: "0"
+				},
+				blockSize: "var(--trigger-height)",
+				inlineSize: "{borderWidths.indicator}",
+				translate: "0 var(--trigger-y)"
+			},
+			background: "colorPalette.solid",
+			blockSize: "{borderWidths.indicator}",
+			borderRadius: "full",
+			inlineSize: "var(--trigger-width)",
+			insetBlockStart: "0",
+			left: "0",
+			listStyle: "none",
+			pointerEvents: "none",
+			transitionDuration: "move",
+			transitionProperty: "translate, width, height",
+			transitionTimingFunction: "move",
+			translate: "var(--trigger-x) calc(var(--trigger-y) + var(--trigger-height) - {borderWidths.indicator})"
+		},
+		item: {
+			_vertical: { flexDirection: "column" },
+			display: "flex",
+			position: "relative",
+			[UNANCHORED]: { position: "static" }
+		},
+		link: {
+			...interactive(),
+			_currentPage: {
+				color: "colorPalette.fg",
+				fontWeight: "medium"
+			},
+			_hover: { background: "bg.subtle" },
+			"& > :not(svg)": { gridColumn: "-2" },
+			"& > svg": { color: "fg.muted" },
+			alignContent: "start",
+			alignItems: "center",
+			[BARRED]: {
+				...barred(),
+				_currentPage: { color: "colorPalette.fg" }
+			},
+			borderRadius: "l2",
+			color: "fg",
+			display: "grid",
+			gridTemplateColumns: "1fr",
+			[LEADING]: { gridTemplateColumns: "auto 1fr" },
+			textDecoration: "none"
+		},
+		list: {
+			_vertical: {
+				alignItems: "stretch",
+				flexDirection: "column",
+				flexWrap: "nowrap"
+			},
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			listStyle: "none",
+			margin: "0",
+			padding: "0",
+			position: "relative"
+		},
+		root: { position: "relative" },
+		trigger: {
+			...barred(),
+			_hover: {
+				...HOVERED,
+				_open: FORCED
+			},
+			_open: {
+				...FORCED,
+				"& > svg": { rotate: "180deg" },
+				background: "bg.muted",
+				color: "fg"
+			},
+			"& > svg": {
+				_motionReduce: { transitionDuration: "0s" },
+				flexShrink: "0",
+				transitionDuration: "press",
+				transitionProperty: "rotate"
+			},
+			appearance: "none",
+			background: "transparent",
+			borderWidth: "0",
+			[UPRIGHT]: {
+				_open: { "& > svg": { rotate: "0deg" } },
+				justifyContent: "space-between"
+			}
+		},
+		viewport: {
+			...floating(),
+			...aligned(),
+			_motionReduce: { transitionDuration: "0s" },
+			_vertical: { translate: "0 var(--viewport-y)" },
+			blockSize: "var(--viewport-height)",
+			boxSizing: "content-box",
+			display: "grid",
+			inlineSize: "var(--viewport-width)",
+			overflow: "hidden",
+			transitionDuration: "move",
+			transitionProperty: "translate, width, height",
+			transitionTimingFunction: "move",
+			translate: "var(--viewport-x) 0"
+		},
+		viewportPositioner: {
+			_vertical: {
+				_rtl: {
+					left: "auto",
+					right: "100%"
+				},
+				insetBlockStart: "0",
+				left: "100%"
+			},
+			insetBlockStart: "100%",
+			left: "0",
+			position: "absolute",
+			zIndex: "popover"
+		}
+	},
+	className: CLASS,
+	defaultVariants: {
+		palette: "primary",
+		size: "md"
+	},
+	jsx: [/^NavigationMenu(\.\w+)?$/u],
+	slots: [
+		"root",
+		"list",
+		"item",
+		"trigger",
+		"content",
+		"link",
+		"indicator",
+		"viewportPositioner",
+		"viewport"
+	],
+	variants: {
+		/**
+		* Palette of the indicator and of a link to the current page.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Height, insets and text of the bar's triggers and links, the gaps between them, the gap
+		* between the bar and a panel, and the padding, gaps and icons of a panel and its links.
+		*/
+		size: onSlots({
+			content: sizeVariants((size) => ({
+				...placed(size),
+				gap: dense(`{spacing.gap.${below(size)}}`),
+				padding: dense(`{spacing.inset.${below(size)}}`)
+			}), SIZES$1),
+			link: sizeVariants(linked, SIZES$1),
+			list: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(size)}}`) }), SIZES$1),
+			trigger: sizeVariants(triggered, SIZES$1),
+			viewportPositioner: sizeVariants((size) => ({
+				_vertical: {
+					paddingBlockStart: "0",
+					paddingInlineStart: dense(`{spacing.gap.${size}}`)
+				},
+				paddingBlockStart: dense(`{spacing.gap.${size}}`)
+			}), SIZES$1)
+		})
+	}
+});
+//#endregion
+//#region src/pagination/recipe.ts
+/**
+* Recipe for the pagination: a row of page buttons between the buttons that move a page back and
+* forward, the marks between distant pages, and the text that states the current page.
+*
+* @remarks
+*   Every page and every trigger is the actions package's square `Button`, at the pagination's size
+*   and in the look and palette the root passes it. The current page is the button with
+*   `aria-current="page"`, which the button's looks mark as on. The recipe lays the row out, sizes
+*   the gaps, the ellipsis and the page text, and sets the page numbers in figures of one width.
+*   While the root marks the row `data-crowded`, the pages and the marks are hidden and the summary
+*   in their place states the current page. The recipe has no palette or effect axis of its own,
+*   because the buttons take the palette from the root.
+*/
+/**
+* Sizes the recipe offers, the sizes it passes to the buttons.
+*/
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Selects a page, a mark or the summary inside a root whose pages do not fit its row.
+*/
+const CROWDED = "[data-crowded] > &";
+/**
+* Sets text that states the current page in muted figures of one width, on one line.
+*/
+const STATED = {
+	color: "fg.muted",
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap"
+};
+/**
+* Pads text that states the current page and sets its type, per size.
+*/
+const STATED_SIZES = sizeVariants((size) => ({
+	textStyle: `label.${size}`,
+	paddingInline: dense(`{spacing.gap.${size}}`)
+}), SIZES);
+/**
+* Defines the pagination recipe, at size `md` by default.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		ellipsis: {
+			alignItems: "center",
+			color: "fg.muted",
+			[CROWDED]: { display: "none" },
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			userSelect: "none"
+		},
+		item: {
+			[CROWDED]: { display: "none" },
+			fontVariantNumeric: "tabular-nums"
+		},
+		pageText: STATED,
+		root: {
+			alignItems: "center",
+			display: "flex",
+			minInlineSize: "0"
+		},
+		summary: {
+			...STATED,
+			[CROWDED]: { display: "block" },
+			display: "none"
+		}
+	},
+	className: "pagination",
+	defaultVariants: { size: "md" },
+	jsx: [/^Pagination(\.\w+)?$/u],
+	slots: [
+		"root",
+		"item",
+		"ellipsis",
+		"summary",
+		"trigger",
+		"pageText"
+	],
+	variants: { 
+	/**
+	* Size of the gaps, the ellipsis, the summary and the page text, beside the buttons' own size.
+	*
+	* @remarks
+	*   The gap between buttons is one step below the size, so a row of squares reads as one group.
+	*   The ellipsis is a square of the control's side, so the row keeps one rhythm.
+	*/
+size: onSlots({
+		ellipsis: sizeVariants((size) => ({
+			textStyle: `label.${size}`,
+			boxSize: dense(`{sizes.control.${size}}`)
+		}), SIZES),
+		pageText: STATED_SIZES,
+		root: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(size)}}`) }), SIZES),
+		summary: STATED_SIZES
+	}) }
+});
+//#endregion
+//#region src/toc/recipe.ts
+/**
+* Declares the table of contents slot recipe for a list of links to the headings on a page, with
+* an indicator next to the links whose headings are visible.
+*
+* @remarks
+*   The machine measures the active rows and writes their offset and height to the indicator as
+*   `--top` and `--height`, so the recipe sets only the indicator's width and color. Each item
+*   carries its heading's depth as `--depth`, and the recipe indents it by one gap per level below
+*   `h2`. Active links take the default ink at medium weight, and the others are muted. Links
+*   truncate to one line. The root is at least 11rem wide, so a page of short headings gets the
+*   same width as a page of long ones, and never wider than its container. The title and the
+*   links share their inline start padding, so the title text and the link text start at the same
+*   offset. Under forced colors the indicator paints `CanvasText`, because the browser replaces
+*   its background with Canvas. The recipe has no `effect` axis, because the rail has no box.
+*/
+/**
+* Custom property with the height of the pinned bars above the page, set by the application
+* shell.
+*
+* @remarks
+*   The aside placement adds it to its sticky offset, so the rail sticks below the bars. Without
+*   a shell the property is unset and the offset falls back to 0px.
+*/
+const STUCK = "--app-shell-sticky-top";
+/**
+* Sizes the recipe offers. Links read the body text style one size smaller, and the title reads
+* the label text style two sizes smaller.
+*/
+const STEPS = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Room a focus ring takes outside an element: its offset and its width.
+*/
+const RING_ROOM = "calc(var(--focus-ring-offset, 0px) + var(--focus-ring-width, 0px))";
+/**
+* Returns the gap between the title and the list at a size, one gap step smaller than the size.
+*
+* @param size - The recipe's size.
+*/
+function spaced(size) {
+	return { gap: dense(`{spacing.gap.${below(size)}}`) };
+}
+/**
+* Table of contents slot recipe, inline at the md size by default.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		/**
+		* The column of the title and the list inside the aside placement's scroll area, padded by
+		* the room a focus ring takes at its edges.
+		*/
+		content: {
+			display: "flex",
+			flexDirection: "column",
+			padding: RING_ROOM
+		},
+		indicator: {
+			_highContrast: {
+				background: "CanvasText",
+				forcedColorAdjust: "none"
+			},
+			_motionReduce: { transitionDuration: "0s" },
+			background: "colorPalette.solid",
+			blockSize: "var(--height)",
+			borderRadius: "full",
+			inlineSize: "{borderWidths.indicator}",
+			insetBlockStart: "var(--top)",
+			insetInlineStart: "0",
+			position: "absolute",
+			transitionDuration: "move",
+			transitionProperty: "top, height",
+			transitionTimingFunction: "move"
+		},
+		item: { paddingInlineStart: "calc((var(--depth) - 2) * {spacing.gap.md})" },
+		link: {
+			...truncate(),
+			focusVisibleRing: "outside",
+			_hover: { color: "fg" },
+			"&[data-active]": {
+				color: "fg",
+				fontWeight: "medium"
+			},
+			borderRadius: "l2",
+			color: "fg.muted",
+			cursor: "button",
+			display: "block",
+			focusRingColor: "colorPalette.focusRing",
+			textDecoration: "none",
+			transitionDuration: "press",
+			transitionProperty: "common"
+		},
+		list: {
+			display: "flex",
+			flexDirection: "column",
+			listStyle: "none",
+			margin: "0",
+			padding: "0",
+			position: "relative"
+		},
+		root: {
+			colorPalette: "primary",
+			display: "flex",
+			flexDirection: "column",
+			minInlineSize: "min({sizes.44}, 100%)"
+		},
+		/**
+		* The aside placement's scroll area, pulled out at its start edges by the room its content's
+		* padding takes, so the title and the links start where the root starts.
+		*
+		* @remarks
+		*   The end edges are inside the root, because a box past the root's end edges is overflow a
+		*   scrolling container around the root scrolls to.
+		*/
+		scroller: {
+			marginBlockStart: `calc(${RING_ROOM} * -1)`,
+			marginInlineStart: `calc(${RING_ROOM} * -1)`
+		},
+		title: {
+			color: "fg.muted",
+			fontWeight: "semibold",
+			letterSpacing: "wider",
+			textTransform: "uppercase"
+		}
+	},
+	className: "toc",
+	defaultVariants: {
+		placement: "inline",
+		size: "md"
+	},
+	jsx: [/^Toc(\.\w+)?$/u],
+	slots: [
+		"root",
+		"scroller",
+		"content",
+		"title",
+		"list",
+		"item",
+		"link",
+		"indicator"
+	],
+	variants: {
+		/**
+		* The semantic palette of the indicator and the focus ring. Without a value the root reads
+		* `primary`.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Whether the root sticks to the top of the viewport or stays in the document flow.
+		*
+		* @remarks
+		*   `aside` sets `position: sticky` with an offset below the application shell's pinned bars,
+		*   and caps the root at the viewport height. The root renders its title and list in the
+		*   primitives package's scroll area, which fills the root. `inline` is the default and leaves
+		*   placement to the container, such as a drawer or a column on a narrow screen.
+		*/
+		placement: onSlot("root", {
+			aside: {
+				alignSelf: "start",
+				insetBlockStart: `calc(var(${STUCK}, 0px) + ${dense("{spacing.gap.lg}")})`,
+				maxBlockSize: `calc(100dvh - var(${STUCK}, 0px) - ${dense("{spacing.gap.lg}")} * 2)`,
+				position: "sticky"
+			},
+			inline: { position: "static" }
+		}),
+		/**
+		* The text styles, the row padding and the gap between the title and the list.
+		*/
+		size: onSlots({
+			content: sizeVariants(spaced, STEPS),
+			link: sizeVariants((size) => ({
+				textStyle: `body.${below(size)}`,
+				paddingBlock: dense(`{spacing.gap.${below(below(size))}}`),
+				paddingInlineEnd: dense(`{spacing.inset.${below(size)}}`),
+				paddingInlineStart: dense(`{spacing.inset.${size}}`)
+			}), STEPS),
+			root: sizeVariants(spaced, STEPS),
+			title: sizeVariants((size) => ({
+				textStyle: `label.${below(below(size))}`,
+				paddingInlineEnd: dense(`{spacing.inset.${below(size)}}`),
+				paddingInlineStart: dense(`{spacing.inset.${size}}`)
+			}), STEPS)
+		})
+	}
+});
+//#endregion
+export { recipe$3 as a, CLASS$1 as i, recipe$1 as n, recipe$4 as o, recipe$2 as r, recipe$5 as s, recipe as t };