@stealthscale/component-collections 0.0.1 → 0.1.2

package/dist/recipe-C1oaF8pO.js

@@ -0,0 +1,2212 @@
+import { COUNTS, PALETTES, below, columnCounts, cornerVariants, defineSlotRecipe, dense, flatVariants, highlightVariants, interactive, onSlot, onSlots, paletteVariants, row, sizeVariants, surface, truncate } from "@stealthscale/theme/authoring";
+//#region src/data-list/recipe.ts
+/**
+* Declares the data list's slot recipe: pairs of a label and a value, down the list or across it.
+*
+* @remarks
+*   The root is a description list. Each item is a `div` that contains one term and its detail,
+*   which HTML allows inside `dl`. Down the list, the label is above its value. Across it, the root
+*   is a grid of two columns and each item is a subgrid row, so every value starts at the same
+*   inline position: the widest label's width, capped at 40% of the list. The value wraps at any
+*   character, so a long identifier never widens the list. The root sets the gap between items as
+*   `--data-list-gap`, which a divided list also pads each rule by. The list has no color and no
+*   box of its own, so it offers no `palette` and no `effect` axis.
+*/
+/**
+* Custom property the root sets to the gap between items, which a divided list pads each rule by.
+*/
+const GAP$2 = "--data-list-gap";
+/**
+* Class name of the recipe, which a selector across parts reads.
+*/
+const CLASS$4 = "data-list";
+/**
+* Maps each size to the gap between items and to the gap between the columns across the list.
+*
+* @remarks
+*   The gaps measure 8, 12 and 16px between items, and 12, 16 and 24px between the columns, at the
+*   foundation's metrics.
+*/
+const GAPS = {
+	lg: ["xl", "2xl"],
+	md: ["lg", "xl"],
+	sm: ["md", "lg"]
+};
+/**
+* Styles a data list down the page at the middle size, with a muted label.
+*/
+const recipe$8 = defineSlotRecipe({
+	base: {
+		item: { minInlineSize: "0" },
+		itemLabel: {
+			alignItems: "center",
+			display: "flex",
+			gap: "0.375em",
+			minInlineSize: "0"
+		},
+		itemValue: {
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "0.375em",
+			margin: "0",
+			minInlineSize: "0",
+			overflowWrap: "anywhere"
+		},
+		root: {
+			margin: "0",
+			minInlineSize: "0"
+		}
+	},
+	className: CLASS$4,
+	defaultVariants: {
+		orientation: "vertical",
+		size: "md",
+		variant: "subtle"
+	},
+	jsx: [/^DataList\.\w+$/u],
+	slots: [
+		"root",
+		"item",
+		"itemLabel",
+		"itemValue"
+	],
+	variants: {
+		/**
+		* Whether a hairline separates each item from the one before it.
+		*
+		* @remarks
+		*   The rule is as far from the item above it as from the item below it: the root's gap above
+		*   and the same gap as padding below.
+		*/
+		divided: { true: { item: { [`& + .${CLASS$4}__item`]: {
+			borderBlockStartWidth: "hairline",
+			borderColor: "border",
+			paddingBlockStart: `var(${GAP$2})`
+		} } } },
+		/**
+		* Which way a label and its value run: the label above the value, or beside it.
+		*/
+		orientation: {
+			horizontal: {
+				item: {
+					alignItems: "baseline",
+					display: "grid",
+					gridColumn: "1 / -1",
+					gridTemplateColumns: "subgrid"
+				},
+				root: {
+					display: "grid",
+					gridTemplateColumns: "fit-content(40%) minmax(0, 1fr)",
+					rowGap: `var(${GAP$2})`
+				}
+			},
+			vertical: {
+				item: {
+					display: "flex",
+					flexDirection: "column",
+					gap: dense("{spacing.gap.xs}")
+				},
+				root: {
+					display: "flex",
+					flexDirection: "column",
+					gap: `var(${GAP$2})`
+				}
+			}
+		},
+		/**
+		* The text style of the items, one size smaller than the list, and the gaps between them.
+		*/
+		size: onSlots({
+			item: sizeVariants((size) => ({ textStyle: `body.${below(size)}` }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			root: sizeVariants((size) => ({
+				columnGap: dense(`{spacing.gap.${GAPS[size][1]}}`),
+				[GAP$2]: dense(`{spacing.gap.${GAPS[size][0]}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			])
+		}),
+		/**
+		* Which of the pair is louder.
+		*
+		* @remarks
+		*   `subtle` mutes the label, so the value reads first, as in a summary. `bold` sets the label
+		*   in the label weight and mutes the value, as in a form of settled answers.
+		*/
+		variant: {
+			bold: {
+				itemLabel: { fontWeight: "medium" },
+				itemValue: { color: "fg.muted" }
+			},
+			subtle: { itemLabel: { color: "fg.muted" } }
+		}
+	}
+});
+//#endregion
+//#region src/listbox/metrics.ts
+/**
+* Returns the geometry the listbox recipe is written from: the list's padding, the insets that put
+* a band's and a label's text on the rows' text line, and one row's height.
+*/
+/**
+* Padding of the list around its rows, in every look.
+*
+* @remarks
+*   A row needs room around it for the highlight's corners, so the list keeps the padding on a
+*   plain look too.
+*/
+const PAD = "{spacing.gap.xs}";
+/**
+* Custom property the list sets to one row's height.
+*/
+const ROW_HEIGHT = "--listbox-row";
+/**
+* Returns one style per column count: the count's template and `display: grid`.
+*
+* @remarks
+*   The list is a flex column until a caller sets a count, so each value also sets the display.
+*/
+function tiled() {
+	const columned = columnCounts();
+	const entries = COUNTS.map((count) => [count, {
+		...columned[count],
+		display: "grid"
+	}]);
+	return Object.fromEntries(entries);
+}
+/**
+* Returns the inline padding of a band across the frame, so its text starts on the rows' text
+* line.
+*
+* @remarks
+*   The field and the select-all row render in the frame, outside the list, and span the frame's
+*   width. Each inset is the list's padding plus the row's own inset.
+* @param start - The row's start inset.
+* @param end - The row's end inset.
+* @returns The start and end padding.
+*/
+function banded(start, end) {
+	return {
+		paddingInlineEnd: `calc(${PAD} + ${end})`,
+		paddingInlineStart: `calc(${PAD} + ${start})`
+	};
+}
+/**
+* Returns the start padding of a part outside the frame, so its text starts on the rows' text
+* line.
+*
+* @remarks
+*   The label above the frame and the summary below it take the list's padding plus the row's
+*   start inset.
+* @param start - The row's start inset.
+* @returns The start padding.
+*/
+function aligned(start) {
+	return { paddingInlineStart: `calc(${PAD} + ${start})` };
+}
+/**
+* Returns the height of a one-line row at a size, as the value of `ROW_HEIGHT`.
+*
+* @remarks
+*   A window and a transfer read the height before any row renders. The height is the row's floor
+*   plus its block padding, the two values the row itself reads. A row with a description is taller
+*   than this value.
+* @param size - The list's size.
+* @returns The custom property and its value.
+*/
+function rowHeight(size) {
+	const floor = "{sizes.6}";
+	const padding = dense(`{spacing.gap.${below(size)}}`);
+	return { [ROW_HEIGHT]: `calc(${floor} + ${padding} + ${padding})` };
+}
+//#endregion
+//#region src/listbox/selected.ts
+/**
+* Selector of a selected row's description, written with the class the listbox binds on a row.
+*/
+const DESCRIBED = ".listbox__item[data-selected] &";
+/**
+* Fills a selected row with `Highlight` under forced colors.
+*/
+const FORCED$1 = { _highContrast: {
+	background: "Highlight",
+	color: "HighlightText",
+	forcedColorAdjust: "none"
+} };
+/**
+* Restates the forced colors on a selected row under a pointer.
+*
+* @remarks
+*   A look's hover fill on a selected row is as specific as the forced colors, and the compiler
+*   emits the `(hover: hover)` block after the `(forced-colors: active)` block, so the fill applies
+*   over the forced colors. The restatement repeats the selected state's selector, which makes it
+*   more specific than the fill.
+*/
+const FORCED_HOVER$1 = { _selected: FORCED$1 };
+/**
+* Draws the highlight's line on a selected row in `HighlightText` under forced colors. The line is
+* `Highlight` on every other row, the color of the selected row's fill.
+*/
+const FOUND = { _highContrast: { outlineColor: "HighlightText" } };
+/**
+* Writes a look that fills a selected row, with the forced inks of the row's checkbox and
+* description on the fill.
+*
+* @param selected - Styles of a selected row in the look.
+*/
+function filled(selected) {
+	return {
+		item: { _selected: {
+			...FORCED$1,
+			_highlighted: FOUND,
+			...selected
+		} },
+		itemCheckbox: { "[data-selected] > &": { _highContrast: {
+			background: "HighlightText",
+			borderColor: "HighlightText",
+			color: "Highlight"
+		} } },
+		itemDescription: { [DESCRIBED]: { _highContrast: { color: "HighlightText" } } }
+	};
+}
+/**
+* Fill of a selected row per look. The solid and subtle looks restate their hover, because a
+* variant applies over the base hover.
+*/
+const SELECTED$1 = {
+	none: { item: { _selected: { fontWeight: "inherit" } } },
+	plain: filled({ fontWeight: "medium" }),
+	solid: filled({
+		layerStyle: "flat.solid",
+		_hover: {
+			...FORCED_HOVER$1,
+			background: "colorPalette.solid.hover"
+		}
+	}),
+	subtle: filled({
+		layerStyle: "flat.subtle",
+		_hover: {
+			...FORCED_HOVER$1,
+			background: "colorPalette.muted"
+		}
+	})
+};
+//#endregion
+//#region src/listbox/recipe.ts
+/**
+* Recipe for the listbox: a label, a frame with an optional field and select-all row, the list of
+* rows, and a summary.
+*
+* @remarks
+*   A row reads the theme's `row` fragment. Focus rests on the list and the highlight moves over
+*   the rows, so a row has no focus ring and no pressed state of its own, and the `highlight` axis
+*   reads the three marks a menu reads. A row still fills under a pointer. A row's text reads the
+*   body role one size smaller than the list, the rule a menu's rows follow. A group spaces its
+*   rows with the list's own gap, and the room above a group's label is the label's padding. A row
+*   centres its parts vertically, so the checkbox, the icon and the end mark are at the middle of a
+*   row with a description. The content is the primitives package's scroll area, and the frame does
+*   not scroll, so the field and the select-all row remain in place while the rows move. The
+*   `viewport` and `rows` slots are the scroll area's viewport, the element with the listbox role,
+*   and its content: the rows take the list's padding, gap, columns and direction. The area's focus
+*   ring is inside its edge, because the frame clips it.
+*/
+/**
+* Class name of the recipe, which the selectors across parts are built from.
+*/
+const CLASS$3 = "listbox";
+/**
+* Custom property the scroll area's root reads for the offset of its focus ring.
+*/
+const RING_OFFSET = "--scroll-area-ring-offset";
+/**
+* Defines the listbox recipe: a plain list at size `md` that tints the highlighted row and fills a
+* selected row with the palette's subtle fill.
+*
+* @remarks
+*   The placeholder reads the tertiary ink. The control is the band the field renders in: it
+*   carries the block-end rule, the insets and the focus color, and the field renders no box of
+*   its own. The clear control renders at the band's end, in the column of the rows' marks. The
+*   label, the summary and the group labels take a row's inset, so every text starts on one line.
+*   A checkbox hides its mark with `color: transparent`, and Firefox paints a forced border in
+*   that color, so the checkbox opts out of forced colors: its edge is `CanvasText`, and a checked
+*   box fills with `CanvasText` around a `Canvas` mark.
+*/
+const recipe$7 = defineSlotRecipe({
+	base: {
+		clearTrigger: {
+			...interactive(),
+			_hover: { color: "fg" },
+			alignItems: "center",
+			borderRadius: "l1",
+			color: "fg.muted",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center"
+		},
+		content: {
+			[`&:has(.${CLASS$3}__rows:empty)`]: { display: "none" },
+			display: "flex",
+			flexDirection: "column",
+			minBlockSize: "0",
+			[RING_OFFSET]: "calc({borderWidths.ring} * -1)"
+		},
+		control: {
+			_focusWithin: { borderBlockEndColor: "colorPalette.solid" },
+			alignItems: "center",
+			borderBlockEndColor: "border",
+			borderBlockEndWidth: "hairline",
+			borderStyle: "solid",
+			borderWidth: "0",
+			display: "flex",
+			transitionDuration: "press",
+			transitionProperty: "common",
+			transitionTimingFunction: "press"
+		},
+		empty: {
+			color: "fg.muted",
+			padding: PAD,
+			textAlign: "start"
+		},
+		frame: {
+			display: "flex",
+			flexDirection: "column",
+			minBlockSize: "0",
+			minInlineSize: "0",
+			overflow: "hidden"
+		},
+		input: {
+			_disabled: { layerStyle: "disabled" },
+			_placeholder: { color: "fg.subtle" },
+			appearance: "none",
+			background: "transparent",
+			border: "none",
+			borderRadius: "0",
+			color: "fg",
+			flex: "1",
+			minInlineSize: "0",
+			outline: "none",
+			padding: "0"
+		},
+		item: {
+			...row(),
+			_hover: { background: "bg.muted" },
+			alignItems: "center",
+			justifyContent: "space-between"
+		},
+		itemCheckbox: {
+			_highContrast: {
+				borderColor: "CanvasText",
+				forcedColorAdjust: "none"
+			},
+			"[data-selected] > &, [data-state=checked] > &, [data-state=indeterminate] > &": {
+				_highContrast: {
+					background: "CanvasText",
+					borderColor: "CanvasText",
+					color: "Canvas"
+				},
+				background: "colorPalette.solid",
+				borderColor: "colorPalette.solid",
+				color: "colorPalette.contrast"
+			},
+			alignItems: "center",
+			borderColor: "border.emphasized",
+			borderRadius: "l1",
+			borderStyle: "solid",
+			borderWidth: "control",
+			color: "transparent",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			lineHeight: "tight"
+		},
+		itemDescription: {
+			...truncate(),
+			color: "fg.subtle",
+			display: "block",
+			textAlign: "start"
+		},
+		itemGroup: {
+			display: "flex",
+			flexDirection: "column",
+			minInlineSize: "0"
+		},
+		itemGroupLabel: {
+			color: "fg.subtle",
+			fontWeight: "medium"
+		},
+		itemIndicator: {
+			"&[data-state=checked]": { visibility: "visible" },
+			alignItems: "center",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			lineHeight: "tight",
+			visibility: "hidden"
+		},
+		itemLines: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			lineHeight: "tight",
+			minInlineSize: "0"
+		},
+		itemText: {
+			...truncate(),
+			display: "block",
+			flex: "1",
+			minInlineSize: "0",
+			textAlign: "start"
+		},
+		label: {
+			color: "fg",
+			fontWeight: "semibold"
+		},
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			minBlockSize: "0",
+			minInlineSize: "0"
+		},
+		rows: {
+			display: "flex",
+			flexDirection: "column",
+			padding: PAD
+		},
+		selectAll: {
+			...row(),
+			_hover: { background: "bg.muted" },
+			borderBlockEndColor: "border",
+			borderBlockEndWidth: "hairline",
+			borderRadius: "0",
+			cursor: "menuitem"
+		},
+		valueText: {
+			...truncate(),
+			color: "fg.muted"
+		},
+		viewport: { scrollPadding: PAD }
+	},
+	className: CLASS$3,
+	defaultVariants: {
+		highlight: "tint",
+		orientation: "vertical",
+		radius: "l1",
+		selected: "subtle",
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Listbox(\.\w+)?$/u],
+	slots: [
+		"root",
+		"label",
+		"control",
+		"input",
+		"clearTrigger",
+		"frame",
+		"content",
+		"viewport",
+		"rows",
+		"empty",
+		"selectAll",
+		"item",
+		"itemLines",
+		"itemText",
+		"itemDescription",
+		"itemCheckbox",
+		"itemIndicator",
+		"itemGroup",
+		"itemGroupLabel",
+		"valueText"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Number of columns of a tiled list.
+		*
+		* @remarks
+		*   The grid collection takes the same count, because the machine moves the highlight between
+		*   neighbours by the collection's count and the recipe places them by this one.
+		*/
+		columns: onSlot("rows", tiled()),
+		/**
+		* Glow around a selected row, in the palette's solid at half opacity.
+		*/
+		effect: onSlot("item", { glow: { _selected: { layerStyle: "glow.sm" } } }),
+		/**
+		* Mark on the row the highlight is on.
+		*/
+		highlight: onSlot("item", highlightVariants()),
+		/**
+		* Direction the rows run in, and the arrow keys that move the highlight.
+		*
+		* @remarks
+		*   The machine and the recipe read one prop, so the arrows always follow the layout. A row in
+		*   a horizontal list takes its own width, and its text does not truncate.
+		*/
+		orientation: {
+			horizontal: {
+				item: { inlineSize: "auto" },
+				itemText: { flex: "0 0 auto" },
+				rows: { flexDirection: "row" }
+			},
+			vertical: { rows: { flexDirection: "column" } }
+		},
+		/**
+		* Palette the highlight, the selected fill and the checkboxes read.
+		*
+		* @remarks
+		*   The palette is set on the root, and every part inherits the palette's custom properties.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Corner radius of a row.
+		*/
+		radius: onSlot("item", cornerVariants([
+			"l1",
+			"l2",
+			"l3"
+		])),
+		/**
+		* Fill of a selected row, beside the mark at its end.
+		*
+		* @remarks
+		*   The selected state and the highlight are separate axes, and a row can show both. The fills
+		*   are the flat looks, which do not change under a pointer, and each look restates its hover,
+		*   because a variant applies over the base hover. `plain` sets the text in medium weight and
+		*   relies on the mark. `none` sets nothing, for a list whose rows each have a checkbox. Under
+		*   forced colors a selected row fills with `Highlight` in every look but `none`, whose
+		*   checkboxes show the state.
+		*/
+		selected: SELECTED$1,
+		/**
+		* Row height, insets, text sizes and mark sizes. A row's text and a mark read one size smaller
+		* than the list, and a description two sizes smaller.
+		*
+		* @remarks
+		*   A row takes the inset scale at both ends. The label, the field, the select-all row, the
+		*   group labels, the empty text and the summary take the same start inset, so every text
+		*   starts on one line.
+		*/
+		size: onSlots({
+			clearTrigger: sizeVariants((size) => ({ boxSize: dense(`{sizes.icon.${below(size)}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			content: sizeVariants((size) => rowHeight(size), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			control: sizeVariants((size) => ({
+				...banded(dense(`{spacing.inset.${size}}`), dense(`{spacing.inset.${size}}`)),
+				columnGap: dense(`{spacing.gap.${below(size)}}`),
+				minBlockSize: dense(`{sizes.control.${size}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			empty: sizeVariants((size) => ({
+				...banded(dense(`{spacing.inset.${size}}`), dense(`{spacing.inset.${size}}`)),
+				textStyle: `body.${below(size)}`,
+				paddingBlock: dense(`{spacing.gap.${below(size)}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			input: sizeVariants((size) => ({ textStyle: `label.${size}` }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			item: sizeVariants((size) => ({
+				textStyle: `body.${below(size)}`,
+				columnGap: dense(`{spacing.gap.${size}}`),
+				minBlockSize: "6",
+				paddingBlock: dense(`{spacing.gap.${below(size)}}`),
+				paddingInline: dense(`{spacing.inset.${size}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			itemCheckbox: sizeVariants((size) => ({ boxSize: dense(`{sizes.icon.${below(size)}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			itemDescription: sizeVariants((size) => ({ textStyle: `body.${below(below(size))}` }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			itemGroup: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(below(size))}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			itemGroupLabel: sizeVariants((size) => ({
+				textStyle: `label.${below(below(size))}`,
+				paddingBlockStart: dense(`{spacing.gap.${size}}`),
+				paddingInline: dense(`{spacing.inset.${size}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			itemIndicator: sizeVariants((size) => ({ boxSize: dense(`{sizes.icon.${below(size)}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			label: sizeVariants((size) => ({
+				...aligned(dense(`{spacing.inset.${size}}`)),
+				textStyle: `label.${size}`
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			root: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${size}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			rows: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(below(size))}}`) }), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			selectAll: sizeVariants((size) => ({
+				...banded(dense(`{spacing.inset.${size}}`), dense(`{spacing.inset.${size}}`)),
+				textStyle: `body.${below(size)}`,
+				columnGap: dense(`{spacing.gap.${size}}`),
+				minBlockSize: "6",
+				paddingBlock: dense(`{spacing.gap.${below(size)}}`)
+			}), [
+				"sm",
+				"md",
+				"lg"
+			]),
+			valueText: sizeVariants((size) => ({
+				...aligned(dense(`{spacing.inset.${size}}`)),
+				textStyle: `label.${below(size)}`
+			}), [
+				"sm",
+				"md",
+				"lg"
+			])
+		}),
+		/**
+		* Background, edge and corners of the frame. `surface` raises the frame and `plain` leaves it
+		* transparent.
+		*
+		* @remarks
+		*   The frame contains the field, the select-all row and the rows, and clips its overflow to
+		*   its corners. The label and the summary render outside it, and the rows scroll inside the
+		*   content.
+		*/
+		variant: {
+			surface: { frame: surface() },
+			plain: { frame: { background: "transparent" } }
+		}
+	}
+});
+//#endregion
+//#region src/sortable/recipe.ts
+/**
+* Declares the sortable kit's slot recipe: rows a person drags into another order, in one list or
+* in the lists of a board.
+*
+* @remarks
+*   A row has its handle at the start and the caller's content after it, where a row's content part
+*   takes the rest of the row. The `card` look renders a row as a panel card with a hairline edge,
+*   and the `plain` look renders rows without a fill, a visible edge or block padding that touch
+*   each other, as tall as their handle, for a list inside a panel. A fixed row keeps an
+*   empty box of the handle's size, so its content starts where the other rows' does. The row a
+*   person drags is dnd-kit's own element in the top layer, raised by the large shadow, on the
+*   panel's fill in either look. The place it will take is dnd-kit's placeholder, a copy of the row
+*   the recipe renders as a dashed slot with its content hidden. A list takes at least one
+*   control's height, so an empty list is a place to drop on. A board lays its lists out in a row,
+*   each list a well from 15rem to 20rem wide that shares the board's width, and the row scrolls
+*   sideways once the lists are wider than the board. A list that refuses the dragged row dashes
+*   its edge in the error ink and dims its rows to the muted opacity.
+*/
+/**
+* Class name of the recipe, which a selector across parts reads.
+*/
+const CLASS$2 = "sortable";
+/**
+* Styles the row a person drags, raised by the large shadow, and the place it will take, a dashed
+* slot with its content hidden.
+*
+* @remarks
+*   Each look restates these states, because a look's rules apply over the base rules.
+*/
+const MOVING = {
+	"&[data-dnd-dragging]": {
+		boxShadow: "lg",
+		cursor: "dragging"
+	},
+	"&[data-dnd-placeholder]": {
+		"& > *": { visibility: "hidden" },
+		background: "transparent",
+		borderColor: "border.emphasized",
+		borderStyle: "dashed",
+		boxShadow: "none"
+	}
+};
+/**
+* Styles the kit's rows, lists and board.
+*/
+const recipe$6 = defineSlotRecipe({
+	base: {
+		board: { minInlineSize: "0" },
+		empty: {
+			textStyle: "body.sm",
+			color: "fg.muted",
+			paddingBlock: dense("{spacing.inset.sm}"),
+			paddingInline: dense("{spacing.inset.xs}"),
+			textAlign: "center"
+		},
+		fixed: {
+			blockSize: dense("{sizes.control.xs}"),
+			flexShrink: "0",
+			inlineSize: dense("{sizes.control.xs}")
+		},
+		handle: {
+			cursor: "drag",
+			flexShrink: "0",
+			touchAction: "none"
+		},
+		item: {
+			textStyle: "body.sm",
+			alignItems: "center",
+			display: "flex",
+			gap: dense("{spacing.gap.sm}"),
+			minInlineSize: "0",
+			paddingBlock: dense("{spacing.inset.xs}"),
+			paddingInlineEnd: dense("{spacing.inset.sm}"),
+			paddingInlineStart: dense("{spacing.inset.xs}")
+		},
+		itemContent: {
+			alignItems: "center",
+			display: "flex",
+			flex: "1",
+			gap: dense("{spacing.gap.sm}"),
+			minInlineSize: "0"
+		},
+		items: {
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.xs}"),
+			listStyle: "none",
+			margin: "0",
+			minBlockSize: dense("{sizes.control.md}"),
+			padding: "0"
+		},
+		lanes: {
+			alignItems: "flex-start",
+			display: "flex",
+			gap: dense("{spacing.gap.md}")
+		},
+		list: {
+			"&[data-refuses]": {
+				[`& .${CLASS$2}__item`]: { opacity: "muted" },
+				borderColor: "border.error",
+				borderStyle: "dashed"
+			},
+			background: "bg.subtle",
+			borderColor: "transparent",
+			borderRadius: "l2",
+			borderWidth: "hairline",
+			display: "flex",
+			flexBasis: "{sizes.60}",
+			flexDirection: "column",
+			flexGrow: "1",
+			flexShrink: "0",
+			gap: dense("{spacing.gap.sm}"),
+			maxInlineSize: "xs",
+			minInlineSize: "{sizes.60}",
+			padding: dense("{spacing.inset.sm}")
+		},
+		root: { minInlineSize: "0" }
+	},
+	className: CLASS$2,
+	defaultVariants: { variant: "card" },
+	jsx: [/^Sortable\.\w+$/u],
+	slots: [
+		"root",
+		"board",
+		"lanes",
+		"list",
+		"items",
+		"item",
+		"handle",
+		"fixed",
+		"itemContent",
+		"empty"
+	],
+	variants: { 
+	/**
+	* Look of a row: a panel card with a hairline edge, or a plain row without a fill or a visible
+	* edge, for rows inside a panel.
+	*/
+variant: {
+		card: { item: {
+			...surface("xs"),
+			...MOVING
+		} },
+		plain: {
+			item: {
+				...MOVING,
+				"&[data-dnd-dragging]": {
+					background: "bg.panel",
+					borderColor: "border",
+					boxShadow: "lg",
+					cursor: "dragging"
+				},
+				borderColor: "transparent",
+				borderRadius: "l2",
+				borderWidth: "hairline",
+				paddingBlock: "0"
+			},
+			items: { gap: "0" }
+		}
+	} }
+});
+//#endregion
+//#region src/status-matrix/recipe.ts
+/**
+* Recipe for the status matrix: the styles the matrix adds to the table's parts.
+*
+* @remarks
+*   The table's recipe styles the rules, the bands and the cell padding. The mark's tone is the
+*   data, so no cell takes a fill per state, and the crosshair fills with `bg.subtle` and no
+*   palette. The recipe has no `palette` axis for the same reason, and no `effect` axis, because a
+*   glow around a cell overlaps the rules beside it. The root takes the width of its content up to
+*   the full width, and the scroller scrolls a wider grid. A column's name renders in a block of
+*   its own, because the table's recipe sets the header cell's alignment.
+*/
+/**
+* Sizes the matrix offers, which are the table's.
+*/
+const SIZES$4 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Styles a cell or a header the crosshair fills.
+*
+* @remarks
+*   `bg.subtle` is one step under the panel. The table's stripe is `bg.muted`, so a lit row does
+*   not read as a striped one.
+*/
+const LIT = { "&[data-lit]": { background: "bg.subtle" } };
+/**
+* Maps each `data-tone` value to the palette the mark reads.
+*/
+const TONES = {
+	"&[data-tone=error]": { colorPalette: "error" },
+	"&[data-tone=info]": { colorPalette: "info" },
+	"&[data-tone=neutral]": { colorPalette: "neutral" },
+	"&[data-tone=success]": { colorPalette: "success" },
+	"&[data-tone=warning]": { colorPalette: "warning" }
+};
+/**
+* Defines the status matrix recipe at size `md` by default.
+*/
+const recipe$5 = defineSlotRecipe({
+	base: {
+		cell: { ...LIT },
+		columnHeading: { ...LIT },
+		columnLabel: {
+			display: "block",
+			textAlign: "center"
+		},
+		dot: {
+			background: "colorPalette.solid",
+			borderRadius: "full"
+		},
+		legend: {
+			alignItems: "center",
+			color: "fg.muted",
+			display: "flex",
+			flexWrap: "wrap",
+			listStyle: "none",
+			margin: "0",
+			padding: "0"
+		},
+		legendItem: {
+			alignItems: "center",
+			display: "flex"
+		},
+		mark: {
+			...TONES,
+			alignItems: "center",
+			color: "colorPalette.fg",
+			display: "flex",
+			justifyContent: "center"
+		},
+		name: { srOnly: true },
+		picker: {
+			...interactive(),
+			_focusVisible: { focusVisibleRing: "inside" },
+			appearance: "none",
+			background: "transparent",
+			borderStyle: "none",
+			color: "inherit",
+			display: "block",
+			font: "inherit",
+			inlineSize: "full",
+			padding: "0"
+		},
+		root: {
+			alignItems: "stretch",
+			display: "flex",
+			flexDirection: "column",
+			inlineSize: "fit-content",
+			maxInlineSize: "full"
+		},
+		rowHeading: {
+			...LIT,
+			whiteSpace: "nowrap"
+		}
+	},
+	className: "status-matrix",
+	defaultVariants: { size: "md" },
+	jsx: [/^StatusMatrix(\.\w+)?$/u],
+	slots: [
+		"root",
+		"columnHeading",
+		"columnLabel",
+		"rowHeading",
+		"cell",
+		"picker",
+		"mark",
+		"dot",
+		"name",
+		"legend",
+		"legendItem"
+	],
+	variants: { 
+	/**
+	* Size of the marks and the legend. A mark takes the icon size of the step, and the dot and
+	* the legend's text take one step smaller.
+	*/
+size: onSlots({
+		dot: sizeVariants((size) => ({ boxSize: dense(`{sizes.icon.${below(size)}}`) }), SIZES$4),
+		legend: sizeVariants((size) => ({
+			textStyle: `label.${below(size)}`,
+			gap: dense(`{spacing.gap.${size}}`),
+			paddingBlock: dense(`{spacing.gap.${size}}`),
+			paddingInline: dense(`{spacing.inset.${size}}`)
+		}), SIZES$4),
+		legendItem: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(size)}}`) }), SIZES$4),
+		mark: sizeVariants((size) => ({ "& > svg": { boxSize: dense(`{sizes.icon.${size}}`) } }), SIZES$4)
+	}) }
+});
+//#endregion
+//#region src/table/recipe.ts
+/**
+* Recipe for the table: a scroller, the table, and the elements a table is composed from.
+*
+* @remarks
+*   Every part binds the element with the table semantics, so the recipe adds styles only.
+*   The stripe and the hover are on the body and select its own rows, because `:nth-of-type` counts
+*   within a parent. Column names read the label role one size smaller, in the muted ink, above a
+*   rule heavier than the row rules. A sorted column's name takes the full ink. A row header that
+*   spans the table is a section heading and takes the column names' style. The caption renders
+*   below the table with a cell's inset. A cell of figures states `data-numeric`, because a slot
+*   recipe resolves its variants once at the root. Borders are separated, and every cell rules its
+*   end on each axis and never its start, so a sticky header cell keeps its own rule. The recipe
+*   has no `effect` axis, because a glow around a row overlaps the rules of the rows beside it. A
+*   row's stripe, hover and selected fills set `--table-row-fill`, which the row paints and a
+*   sticky row header paints over the panel. The stripe skips a selected row. The body's rules
+*   read their ink from `--table-rule` and their width from `--table-rule-width`, which a
+*   composing part sets on a row that ends a group of rows. Under forced colours a selected row
+*   fills with `Highlight`, and its cells' text and rules take `HighlightText`.
+*/
+/**
+* Sizes the table offers.
+*/
+const SIZES$3 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Custom property the scroll area's root reads for the style of its focus ring.
+*/
+const RING_STYLE = "--scroll-area-ring-style";
+/**
+* Attribute of a cell of figures, which the base aligns to the end in tabular figures.
+*/
+const NUMERIC = "data-numeric";
+/**
+* Custom property of a row's fill: transparent, the stripe, the hover fill or the selected fill.
+*
+* @remarks
+*   The row paints it, and a sticky cell paints it over the panel, so a sticky cell takes the fill
+*   of its row and hides the cells that scroll under it.
+*/
+const ROW_FILL = "--table-row-fill";
+/**
+* Custom property of the ink a row's cells rule their ends in: `border`, and `HighlightText` in a
+* selected row under forced colours.
+*/
+const RULE_INK = "--table-rule";
+/**
+* Custom property of the width of the rule at a row's cells' block end: `hairline`, and a heavier
+* width a composing part sets on a row that ends a group of rows.
+*/
+const RULE_WIDTH = "--table-rule-width";
+/**
+* Custom property of a cell's inline inset at the table's size, which a part laid over a cell reads
+* to start its text where the cell's text starts.
+*/
+const CELL_INSET = "--table-cell-inset";
+/**
+* Ink of a cell's rules: its row's rule ink, else `border` in a row outside the table's parts.
+*/
+const INK = `var(${RULE_INK}, {colors.border})`;
+/**
+* Styles the rule at a cell's block end, as wide as its row states.
+*/
+const RULE = {
+	borderBlockEndWidth: `var(${RULE_WIDTH}, {borderWidths.hairline})`,
+	borderColor: INK
+};
+/**
+* Styles the rule at the inline end of every cell but the last in its row.
+*
+* @remarks
+*   The selector counts children, not types, so a row that starts with a `th` still rules its
+*   first column.
+*/
+const BESIDE = { "&:not(:last-child)": {
+	borderColor: INK,
+	borderInlineEndWidth: "hairline"
+} };
+/**
+* Paints a sticky cell: the panel under its row's fill.
+*/
+const STUCK = {
+	backgroundColor: "bg.panel",
+	backgroundImage: `linear-gradient(var(${ROW_FILL}), var(${ROW_FILL}))`
+};
+/**
+* Restates a selected row's forced fill under a state that fills the row.
+*
+* @remarks
+*   The states are variants, and the compiler layers every variant over the base, where the
+*   selected fill is stated, so a hovered selected row would take the hover's fill.
+*/
+const HIGHLIGHTED = { _selected: { _highContrast: { [ROW_FILL]: "Highlight" } } };
+/**
+* Styles the rule under the header's last row, at the indicator width.
+*
+* @remarks
+*   Every rule uses one color, and the width sets the hierarchy.
+*/
+const UNDER = { "& > tr:last-of-type > th": {
+	borderBlockEndWidth: "indicator",
+	borderColor: "border"
+} };
+/**
+* Styles the rule over the footer's first row, at the indicator width.
+*/
+const OVER = { "& > tr:first-of-type > *": {
+	borderBlockStartWidth: "indicator",
+	borderColor: "border"
+} };
+/**
+* Removes the rule under a body's last row when a footer follows, because the footer rules its
+* own start.
+*/
+const LAST = { "&:has(+ tfoot) > tr:last-of-type > *": { borderBlockEndWidth: "0" } };
+/**
+* Returns a cell's padding: the gap scale on the block axis and the inset scale on the inline
+* axis, which the cell states in `--table-cell-inset`.
+*
+* @param size - The table's size.
+* @returns The inline inset and the block and inline padding.
+*/
+function inset(size) {
+	return {
+		[CELL_INSET]: dense(`{spacing.inset.${size}}`),
+		paddingBlock: dense(`{spacing.gap.${size}}`),
+		paddingInline: `var(${CELL_INSET})`
+	};
+}
+/**
+* Maps each `align` value to the cell's `vertical-align`.
+*/
+const VERTICAL = {
+	start: { verticalAlign: "top" },
+	center: { verticalAlign: "middle" },
+	end: { verticalAlign: "bottom" }
+};
+/**
+* Defines the table recipe: a plain table ruled between its rows at size `md` by default.
+*/
+const recipe$4 = defineSlotRecipe({
+	base: {
+		caption: {
+			captionSide: "bottom",
+			color: "fg.subtle",
+			textAlign: "start"
+		},
+		cell: {
+			[`&[${NUMERIC}]`]: {
+				fontVariantNumeric: "tabular-nums",
+				textAlign: "end"
+			},
+			textAlign: "start"
+		},
+		column: { borderColor: "border" },
+		columnGroup: { borderColor: "border" },
+		columnHeader: {
+			"&[aria-sort]:not([aria-sort=none])": { color: "fg" },
+			"&[colspan]": { textAlign: "center" },
+			[`&[${NUMERIC}]`]: { textAlign: "end" },
+			color: "fg.muted",
+			fontWeight: "medium",
+			textAlign: "start",
+			whiteSpace: "nowrap"
+		},
+		footer: { fontWeight: "medium" },
+		root: {
+			borderCollapse: "separate",
+			borderSpacing: "0",
+			inlineSize: "full",
+			textAlign: "start"
+		},
+		row: {
+			_selected: {
+				_highContrast: {
+					"& > *": { color: "HighlightText" },
+					color: "HighlightText",
+					forcedColorAdjust: "none",
+					[ROW_FILL]: "Highlight",
+					[RULE_INK]: "HighlightText"
+				},
+				[ROW_FILL]: "colors.colorPalette.subtle"
+			},
+			background: `var(${ROW_FILL})`,
+			[ROW_FILL]: "transparent",
+			[RULE_INK]: "colors.border",
+			[RULE_WIDTH]: "borderWidths.hairline"
+		},
+		rowHeader: {
+			"&[colspan]": { color: "fg.subtle" },
+			color: "fg",
+			fontWeight: "medium",
+			textAlign: "start"
+		},
+		/**
+		* The box around the scroll area, which draws the focus ring while the viewport has keyboard
+		* focus and hides the scroll area's own ring, because the box clips it.
+		*/
+		scroller: {
+			"&:has(.table__viewport:focus-visible)": {
+				outlineColor: "colorPalette.focusRing",
+				outlineOffset: "ring",
+				outlineStyle: "solid",
+				outlineWidth: "ring"
+			},
+			display: "flex",
+			flexDirection: "column",
+			inlineSize: "full",
+			[RING_STYLE]: "none"
+		},
+		sorter: {
+			...interactive(),
+			alignItems: "center",
+			appearance: "none",
+			background: "transparent",
+			borderStyle: "none",
+			color: "inherit",
+			display: "inline-flex",
+			font: "inherit",
+			gap: dense("{spacing.gap.xs}"),
+			padding: "0",
+			textAlign: "inherit"
+		}
+	},
+	className: "table",
+	compoundVariants: [{
+		css: { body: { "& > tr": { _hover: {
+			...HIGHLIGHTED,
+			[ROW_FILL]: "colors.colorPalette.muted"
+		} } } },
+		interactive: true,
+		name: "tracked",
+		striped: true
+	}, {
+		css: { columnHeader: { "&:first-child": { zIndex: "2" } } },
+		name: "cornered",
+		stickyColumn: true,
+		stickyHeader: true
+	}],
+	defaultVariants: {
+		align: "center",
+		layout: "auto",
+		radius: "l2",
+		rules: "rows",
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Table(\.\w+)?$/u],
+	slots: [
+		"scroller",
+		"viewport",
+		"root",
+		"columnGroup",
+		"column",
+		"caption",
+		"header",
+		"body",
+		"footer",
+		"row",
+		"columnHeader",
+		"sorter",
+		"rowHeader",
+		"cell"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Vertical alignment of a cell's content in a row taller than one line.
+		*/
+		align: onSlots({
+			cell: VERTICAL,
+			columnHeader: VERTICAL,
+			rowHeader: VERTICAL
+		}),
+		/**
+		* Whether a body row fills under the pointer and while a control inside it has focus.
+		*
+		* @remarks
+		*   A keyboard reaches the link inside a cell, so the row reads `:focus-within`. A `tr` takes
+		*   no focus of its own.
+		*/
+		interactive: { true: { body: { "& > tr": {
+			_focusWithin: {
+				...HIGHLIGHTED,
+				[ROW_FILL]: "colors.colorPalette.subtle"
+			},
+			_hover: {
+				...HIGHLIGHTED,
+				[ROW_FILL]: "colors.colorPalette.subtle"
+			}
+		} } } },
+		/**
+		* Column widths from the content, or from the column declarations and the first row.
+		*/
+		layout: {
+			auto: { root: { tableLayout: "auto" } },
+			fixed: { root: { tableLayout: "fixed" } }
+		},
+		/**
+		* Palette the selected row and the interactive row fill read.
+		*
+		* @remarks
+		*   The palette is set on the scroller, and every part inherits the palette's custom
+		*   properties.
+		*/
+		palette: onSlot("scroller", paletteVariants()),
+		/**
+		* Corner radius of the scroller, from the layer radii without the pill, which clips the first
+		* and last rows.
+		*/
+		radius: onSlot("scroller", cornerVariants([
+			"l1",
+			"l2",
+			"l3"
+		])),
+		/**
+		* Where the body rules run: `rows` between rows, `all` between rows and between columns, and
+		* `none` nowhere. The rule under the header and the rule over the footer render in every value.
+		*/
+		rules: {
+			all: {
+				body: LAST,
+				cell: {
+					...BESIDE,
+					...RULE
+				},
+				columnHeader: {
+					...BESIDE,
+					...RULE
+				},
+				footer: OVER,
+				header: UNDER,
+				rowHeader: {
+					...BESIDE,
+					...RULE
+				}
+			},
+			none: {
+				footer: OVER,
+				header: UNDER
+			},
+			rows: {
+				body: LAST,
+				cell: { ...RULE },
+				columnHeader: { ...RULE },
+				footer: OVER,
+				header: UNDER,
+				rowHeader: { ...RULE }
+			}
+		},
+		/**
+		* Text size and cell padding: cells read the body role at the size, and the column names and
+		* the caption read the label role one size smaller.
+		*/
+		size: onSlots({
+			caption: sizeVariants((size) => ({
+				textStyle: `label.${below(size)}`,
+				paddingBlock: dense(`{spacing.gap.${size}}`),
+				paddingInline: dense(`{spacing.inset.${size}}`)
+			}), SIZES$3),
+			cell: sizeVariants((size) => inset(size), SIZES$3),
+			columnHeader: sizeVariants((size) => ({
+				...inset(size),
+				textStyle: `label.${below(size)}`
+			}), SIZES$3),
+			root: sizeVariants((size) => ({ textStyle: `body.${size}` }), SIZES$3),
+			rowHeader: sizeVariants((size) => ({
+				...inset(size),
+				"&[colspan]": { textStyle: `label.${below(size)}` }
+			}), SIZES$3)
+		}),
+		/**
+		* Whether the header rows stick to the top of the scroll area's viewport.
+		*
+		* @remarks
+		*   The header cells take the panel fill, because the rows stick and the `thead` does not. The
+		*   header rows are raised over a sticky column, and a sticky column's first header cell over
+		*   both.
+		*/
+		stickyHeader: { true: {
+			columnHeader: { background: "bg.panel" },
+			header: { "& > tr": {
+				insetBlockStart: "0",
+				position: "sticky",
+				zIndex: "2"
+			} }
+		} },
+		/**
+		* Whether the row headers and the first column header stick to the start of the scroll area's
+		* viewport.
+		*/
+		stickyColumn: { true: {
+			columnHeader: { "&:first-child": {
+				background: "bg.panel",
+				insetInlineStart: "0",
+				position: "sticky",
+				zIndex: "1"
+			} },
+			rowHeader: {
+				...STUCK,
+				insetInlineStart: "0",
+				position: "sticky",
+				zIndex: "1"
+			}
+		} },
+		/**
+		* Whether the column names render on `bg.subtle`, in capitals, tracked out.
+		*
+		* @remarks
+		*   The fill is the stripe's well, so a banded and striped table uses one tone for both.
+		*/
+		banded: { true: { columnHeader: {
+			background: "bg.subtle",
+			letterSpacing: "wide",
+			textTransform: "uppercase"
+		} } },
+		/**
+		* Whether every odd body row renders on `bg.muted`.
+		*
+		* @remarks
+		*   The stripe skips a selected row, so a selected row keeps its selected fill.
+		*/
+		striped: { true: { body: { "& > tr:not([aria-selected=true], [data-selected])": { _odd: { [ROW_FILL]: "colors.bg.muted" } } } } },
+		/**
+		* Surface of the scroller: the panel inside a hairline edge, or transparent.
+		*
+		* @remarks
+		*   `surface` does not cast a shadow. After dark a height adds an inset rim under the
+		*   scroller's content, and a stripe, a filled row or a sticky cell at the edge covers the
+		*   rim.
+		*/
+		variant: {
+			surface: { scroller: {
+				...surface(),
+				boxShadow: "none",
+				overflow: "hidden"
+			} },
+			plain: { scroller: { background: "transparent" } }
+		}
+	}
+});
+//#endregion
+//#region src/swipe-actions/recipe.ts
+/**
+* Declares the swipe actions' slot recipe: a row whose content slides aside to reveal actions at
+* its inline end.
+*
+* @remarks
+*   The root clips its row. The content is a padded flex row that moves towards the inline start by
+*   the width the root states in `--swipe-reveal`, and the actions are clipped to that width at the
+*   inline end, so the actions take no room and show nothing at rest, whatever the row's
+*   background. Both move over the `move` duration and easing, with no transition while a finger
+*   drags the row or under reduced motion. The content takes `touch-action: pan-y`, so a vertical
+*   swipe scrolls the page and a horizontal one moves the row. An action is square, at least as
+*   tall as the row and `sizes.16` wide, with its glyph above its words. Its focus ring is inside
+*   it in the palette's contrast ink, because the row clips a ring drawn outside the action.
+*/
+/**
+* Class name of the recipe, which a selector across parts reads.
+*/
+const CLASS$1 = "swipe-actions";
+/**
+* Custom property the root sets to the revealed width of the actions, in pixels.
+*/
+const REVEAL = "--swipe-reveal";
+/**
+* Reads the revealed width.
+*/
+const REVEALED = `var(${REVEAL})`;
+/**
+* Turns a part's transition off while a finger or a trackpad drags the row.
+*/
+const STILL = { "[data-dragging] > &": { transitionDuration: "0s" } };
+/**
+* Styles the swipe actions' row, content and actions.
+*/
+const recipe$3 = defineSlotRecipe({
+	base: {
+		action: {
+			flexDirection: "column",
+			flexShrink: "0",
+			minBlockSize: "full",
+			minInlineSize: "{sizes.16}"
+		},
+		actions: {
+			...STILL,
+			_motionSafe: {
+				transitionDuration: "move",
+				transitionProperty: "clip-path",
+				transitionTimingFunction: "move"
+			},
+			_rtl: { clipPath: `inset(0 calc(100% - ${REVEALED}) 0 0)` },
+			[`& > .${CLASS$1}__action`]: {
+				focusVisibleRing: "inside",
+				_focusVisible: { outlineOffset: "calc({borderWidths.ring} * -2)" },
+				borderRadius: "none",
+				focusRingColor: "colorPalette.contrast"
+			},
+			alignItems: "stretch",
+			clipPath: `inset(0 0 0 calc(100% - ${REVEALED}))`,
+			display: "flex",
+			insetBlock: "0",
+			insetInlineEnd: "0",
+			position: "absolute"
+		},
+		content: {
+			...STILL,
+			_motionSafe: {
+				transitionDuration: "move",
+				transitionProperty: "translate",
+				transitionTimingFunction: "move"
+			},
+			_rtl: { translate: `${REVEALED} 0` },
+			alignItems: "center",
+			display: "flex",
+			gap: dense("{spacing.gap.md}"),
+			minBlockSize: dense("{sizes.control.lg}"),
+			paddingBlock: dense("{spacing.inset.sm}"),
+			paddingInline: dense("{spacing.inset.md}"),
+			position: "relative",
+			touchAction: "pan-y",
+			translate: `calc(${REVEALED} * -1) 0`
+		},
+		root: {
+			focusVisibleRing: "inside",
+			_focusVisible: { outlineOffset: "calc({borderWidths.ring} * -1)" },
+			overflow: "clip",
+			position: "relative"
+		}
+	},
+	className: CLASS$1,
+	jsx: [/^SwipeActions\.\w+$/u],
+	slots: [
+		"root",
+		"content",
+		"actions",
+		"action"
+	]
+});
+//#endregion
+//#region src/timeline/recipe.ts
+/**
+* Declares the timeline's slot recipe: entries in the order they happened, each an indicator on a
+* rail and the words beside it.
+*
+* @remarks
+*   The root is an ordered list laid out as a grid of three columns: the words before the rail,
+*   the rail, and the words after it. Each item is a subgrid row, so dates written before the rail
+*   line up down the list at the widest date's width. `rail` sets where the rail runs: at the start
+*   with the words before it sized to their content, in the centre with both sides taking an equal
+*   share, or at the end. The connector draws the rail down its item as a hairline, and the last
+*   item's rail stops at its indicator unless the timeline is `ongoing`. The indicator is a circle
+*   on the icon scale, 16, 20, 24 and 32px from `sm` to `xl`, opaque and ringed in `bg.panel`, so
+*   the rail never runs through it. A one-line title is as tall as the indicator and centred on it.
+*   The indicators are marks in a list rather than a box a reader acts on, so the timeline offers
+*   no `effect` axis.
+*/
+/**
+* Class name of the recipe, which a selector across parts reads.
+*/
+const CLASS = "timeline";
+/**
+* Custom property the root sets to the indicator's side, which the rail's column reads.
+*/
+const INDICATOR = "--timeline-indicator";
+/**
+* Custom property the root sets to the room between the rail and the words.
+*/
+const GAP$1 = "--timeline-gap";
+/**
+* Custom property the root sets to the room below each entry's words.
+*/
+const SPACE = "--timeline-space";
+/**
+* Sizes the timeline offers.
+*/
+const SIZES$2 = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+/**
+* Maps each size to its gaps on the gap scale and to the text styles of its parts.
+*
+* @remarks
+*   The words are 8, 12, 12 and 16px from the rail and the entries 12, 16, 24 and 24px apart at the
+*   foundation's metrics.
+*/
+const METRICS = {
+	lg: {
+		description: "body.sm",
+		gap: "lg",
+		mark: "label.sm",
+		space: "2xl",
+		title: "label.md"
+	},
+	md: {
+		description: "body.xs",
+		gap: "lg",
+		mark: "label.xs",
+		space: "xl",
+		title: "label.sm"
+	},
+	sm: {
+		description: "body.xs",
+		gap: "md",
+		mark: "label.xs",
+		space: "lg",
+		title: "label.xs"
+	},
+	xl: {
+		description: "body.md",
+		gap: "xl",
+		mark: "label.md",
+		space: "2xl",
+		title: "label.lg"
+	}
+};
+/**
+* Styles a neutral timeline with solid indicators at the middle size, the rail at the start.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		connector: {
+			"&::before": {
+				borderColor: "border",
+				borderInlineStartWidth: "hairline",
+				content: "\"\"",
+				insetBlock: "0",
+				insetInlineStart: "50%",
+				marginInlineStart: "calc({borderWidths.hairline} / -2)",
+				position: "absolute"
+			},
+			alignItems: "flex-start",
+			display: "flex",
+			gridColumn: "2",
+			justifyContent: "center",
+			position: "relative"
+		},
+		content: {
+			[`&:has(+ .${CLASS}__connector)`]: {
+				[`& > .${CLASS}__title`]: { justifyContent: "flex-end" },
+				alignItems: "flex-end",
+				paddingInlineEnd: `var(${GAP$1})`,
+				paddingInlineStart: "0",
+				textAlign: "end"
+			},
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.xs}"),
+			minInlineSize: "0",
+			paddingBlockEnd: `var(${SPACE})`,
+			paddingInlineStart: `var(${GAP$1})`
+		},
+		description: {
+			color: "fg.muted",
+			minInlineSize: "0"
+		},
+		indicator: {
+			"& > svg": {
+				blockSize: "60%",
+				inlineSize: "60%"
+			},
+			alignItems: "center",
+			backgroundColor: "bg.panel",
+			blockSize: `var(${INDICATOR})`,
+			borderRadius: "full",
+			display: "inline-flex",
+			flexShrink: "0",
+			fontVariantNumeric: "tabular-nums",
+			inlineSize: `var(${INDICATOR})`,
+			justifyContent: "center",
+			lineHeight: "1",
+			outlineColor: "bg.panel",
+			outlineStyle: "solid",
+			outlineWidth: "control",
+			position: "relative"
+		},
+		item: {
+			[`&:last-child > .${CLASS}__connector::before`]: { display: "none" },
+			[`&:last-child > .${CLASS}__content`]: { paddingBlockEnd: "0" },
+			display: "grid",
+			gridColumn: "1 / -1",
+			gridTemplateColumns: "subgrid"
+		},
+		root: {
+			display: "grid",
+			listStyle: "none",
+			margin: "0",
+			minInlineSize: "0",
+			padding: "0"
+		},
+		title: {
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "0.375em",
+			minBlockSize: `var(${INDICATOR})`
+		}
+	},
+	className: CLASS,
+	defaultVariants: {
+		palette: "neutral",
+		rail: "start",
+		size: "md",
+		variant: "solid"
+	},
+	jsx: [/^Timeline\.\w+$/u],
+	slots: [
+		"root",
+		"item",
+		"connector",
+		"indicator",
+		"content",
+		"title",
+		"description"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Whether the run is still going, which draws the rail past the last indicator.
+		*/
+		ongoing: { true: { item: {
+			[`&:last-child > .${CLASS}__connector::before`]: { display: "block" },
+			[`&:last-child > .${CLASS}__content`]: { paddingBlockEnd: `var(${SPACE})` }
+		} } },
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Where the rail runs, and how the words on either side of it share the width.
+		*/
+		rail: {
+			center: { root: { gridTemplateColumns: `minmax(0, 1fr) var(${INDICATOR}) minmax(0, 1fr)` } },
+			end: { root: { gridTemplateColumns: `minmax(0, 1fr) var(${INDICATOR}) auto` } },
+			start: { root: { gridTemplateColumns: `auto var(${INDICATOR}) minmax(0, 1fr)` } }
+		},
+		/**
+		* The indicator's side and the text styles of the words and the marks.
+		*/
+		size: onSlots({
+			description: sizeVariants((size) => ({ textStyle: METRICS[size].description }), SIZES$2),
+			indicator: sizeVariants((size) => ({ textStyle: METRICS[size].mark }), SIZES$2),
+			root: sizeVariants((size) => ({
+				[GAP$1]: dense(`{spacing.gap.${METRICS[size].gap}}`),
+				[INDICATOR]: dense(`{sizes.icon.${size}}`),
+				[SPACE]: dense(`{spacing.gap.${METRICS[size].space}}`)
+			}), SIZES$2),
+			title: sizeVariants((size) => ({ textStyle: METRICS[size].title }), SIZES$2)
+		}),
+		variant: onSlot("indicator", flatVariants([
+			"solid",
+			"subtle",
+			"outline",
+			"plain"
+		]))
+	}
+});
+//#endregion
+//#region src/transfer/recipe.ts
+/**
+* Recipe for the transfer: two lists side by side and the column of controls between them.
+*
+* @remarks
+*   Both sides take an equal share of the width, so the pair keeps its layout as rows move. Both
+*   take the height of the taller side, with a floor of every row's height, which the side reads
+*   from the list's `--listbox-row` and its own `--transfer-rows`, so an empty side is as tall as a
+*   full one. The controls centre on the pair's height. A control's square and its mark are each
+*   one size smaller than the transfer, on the control scale and the icon scale. The palette is
+*   set on the root, and both lists inherit it. The recipe has no `effect` axis, because a pick in
+*   a transfer lasts until the next press of a control, and the checkbox marks it.
+*/
+/**
+* Sizes the transfer offers.
+*/
+const SIZES$1 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Class name of the listbox recipe, whose frame and content a side sizes.
+*/
+const LISTBOX = "listbox";
+/**
+* Custom property a side sets to the number of rows it keeps room for.
+*/
+const ROWS$1 = "--transfer-rows";
+/**
+* Defines the transfer recipe at size `md` by default.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		control: {
+			...interactive(),
+			_disabled: { layerStyle: "disabled" },
+			alignItems: "center",
+			borderColor: "border",
+			borderRadius: "l2",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			color: "fg.muted",
+			display: "inline-flex",
+			justifyContent: "center"
+		},
+		controls: {
+			alignItems: "center",
+			alignSelf: "center",
+			display: "flex",
+			flexDirection: "column",
+			flexShrink: "0"
+		},
+		root: {
+			alignItems: "stretch",
+			display: "flex",
+			minInlineSize: "0"
+		},
+		side: {
+			[`& .${LISTBOX}__content`]: {
+				flex: "1",
+				minBlockSize: `calc(var(${ROW_HEIGHT}) * var(${ROWS$1}))`
+			},
+			[`& .${LISTBOX}__frame`]: { flex: "1" },
+			display: "grid",
+			flex: "1",
+			minInlineSize: "0"
+		}
+	},
+	className: "transfer",
+	defaultVariants: { size: "md" },
+	jsx: [/^Transfer(\.\w+)?$/u],
+	slots: [
+		"root",
+		"side",
+		"controls",
+		"control"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Palette the lists' checkboxes and fills read.
+		*
+		* @remarks
+		*   The palette is set on the root, and both lists inherit its custom properties.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Gap between the parts and the size of the controls and their marks.
+		*/
+		size: onSlots({
+			control: sizeVariants((size) => ({
+				"& > *": { boxSize: dense(`{sizes.icon.${below(size)}}`) },
+				boxSize: dense(`{sizes.control.${below(size)}}`)
+			}), SIZES$1),
+			controls: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(size)}}`) }), SIZES$1),
+			root: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${size}}`) }), SIZES$1)
+		})
+	}
+});
+//#endregion
+//#region src/tree-view/recipe.ts
+/**
+* Recipe for the tree view: a label, the tree, and its rows. A branch row opens the rows nested in
+* it, and an item row ends a path.
+*
+* @remarks
+*   A row reads the theme's `row` fragment and shows its focus ring inside its edge, because a row
+*   takes focus itself. The root writes the rows' inset, the gap between a row's parts and the side
+*   of its marks as custom properties per size. Every row indents one mark and one gap per level of
+*   the `--depth` the machine writes, so a child's indicator is under its parent's icon. An item
+*   reserves the column of a branch's indicator, so an item's text and a branch's text at one level
+*   start at one x. A guide is a border, so forced colors paint it in `CanvasText`. Under forced
+*   colors a selected row fills with `Highlight`, and its marks and checkbox read the row's
+*   `HighlightText`. `staticCss` lists every palette, and the `plain` look and the `sm` and `md`
+*   sizes, which the content package's JSON tree view sets at run time.
+*/
+/**
+* Sizes the recipe offers.
+*/
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Inline padding at each end of a row, which the root sets per size.
+*/
+const INSET = "var(--tree-view-inset)";
+/**
+* Gap between the parts of a row, which the root sets per size.
+*/
+const GAP = "var(--tree-view-gap)";
+/**
+* Side of a row's indicator, icons and checkbox, which the root sets per size.
+*/
+const MARK = "var(--tree-view-mark)";
+/**
+* Indent of one level: one mark and one gap.
+*/
+const LEVEL = `(${MARK} + ${GAP})`;
+/**
+* Height of a row per size, on the scale of the navigation list's rows.
+*/
+const ROWS = {
+	lg: "control.md",
+	md: "control.xs",
+	sm: "tag.md"
+};
+/**
+* Styles a focusable row: the theme's row with a focus ring inside its edge.
+*/
+const ROW = {
+	...row(),
+	focusVisibleRing: "inside",
+	_focusVisible: { outlineOffset: "calc({borderWidths.ring} * -1)" },
+	_hover: { background: "bg.muted" },
+	"& > svg": {
+		boxSize: MARK,
+		flexShrink: "0"
+	},
+	columnGap: GAP,
+	focusRingColor: "colorPalette.focusRing",
+	paddingInlineEnd: INSET
+};
+/**
+* Styles a row's text: one truncated line that takes the room left, hidden while the row is
+* renamed.
+*/
+const TEXT = {
+	...truncate(),
+	"[data-renaming] > &": { display: "none" },
+	flex: "1",
+	minInlineSize: "0"
+};
+/**
+* Styles a mark at a row's side: a square of the mark's side around the caller's glyph.
+*/
+const SQUARE = {
+	"& > svg": { boxSize: "full" },
+	alignItems: "center",
+	boxSize: MARK,
+	display: "inline-flex",
+	flexShrink: "0",
+	justifyContent: "center"
+};
+/**
+* Fills a selected row with `Highlight` under forced colors.
+*/
+const FORCED = { _highContrast: {
+	background: "Highlight",
+	color: "HighlightText",
+	forcedColorAdjust: "none"
+} };
+/**
+* Restates the forced colors on a selected row under a pointer.
+*
+* @remarks
+*   A look's hover fill on a selected row is as specific as the forced colors under a pointer, and
+*   the compiler emits the `(hover: hover)` block after the `(forced-colors: active)` block, so the
+*   fill applies over the forced colors. The restatement repeats the selected state's selector,
+*   which makes it more specific than the fill.
+*/
+const FORCED_HOVER = { _selected: FORCED };
+/**
+* Fill of a selected row per look.
+*/
+const SELECTED = {
+	plain: { _selected: {
+		...FORCED,
+		fontWeight: "medium"
+	} },
+	solid: { _selected: {
+		...FORCED,
+		layerStyle: "flat.solid",
+		_hover: {
+			...FORCED_HOVER,
+			background: "colorPalette.solid.hover"
+		}
+	} },
+	subtle: { _selected: {
+		...FORCED,
+		layerStyle: "flat.subtle",
+		_hover: {
+			...FORCED_HOVER,
+			background: "colorPalette.muted"
+		},
+		fontWeight: "medium"
+	} }
+};
+/**
+* Glow around a selected row.
+*/
+const GLOW = { glow: { _selected: { layerStyle: "glow.sm" } } };
+/**
+* Sets a row's height from the size.
+*/
+const ROW_SIZES = sizeVariants((size) => ({ minBlockSize: dense(`{sizes.${ROWS[size]}}`) }), SIZES);
+/**
+* Defines the tree view recipe: rows at size `md` that fill a selected row with the palette's
+* subtle fill, by default.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		branch: { minInlineSize: "0" },
+		branchContent: {
+			display: "flex",
+			flexDirection: "column",
+			position: "relative"
+		},
+		branchControl: {
+			...ROW,
+			paddingInlineStart: `calc(${INSET} + (var(--depth) - 1) * ${LEVEL})`
+		},
+		branchIndentGuide: {
+			borderColor: "border",
+			borderInlineStartStyle: "solid",
+			borderInlineStartWidth: "hairline",
+			insetBlock: "0",
+			insetInlineStart: `calc(${INSET} + (var(--depth) - 1) * ${LEVEL} + ${MARK} / 2 - {borderWidths.hairline} / 2)`,
+			pointerEvents: "none",
+			position: "absolute",
+			zIndex: "1"
+		},
+		branchIndicator: {
+			...SQUARE,
+			_highContrast: { color: "inherit" },
+			_motionReduce: { transitionDuration: "0s" },
+			_open: { rotate: "90deg" },
+			_rtl: {
+				_open: { rotate: "90deg" },
+				rotate: "180deg"
+			},
+			color: "fg.muted",
+			transitionDuration: "press",
+			transitionProperty: "rotate",
+			transitionTimingFunction: "press"
+		},
+		branchText: TEXT,
+		branchTrigger: {
+			cursor: "button",
+			display: "inline-flex",
+			flexShrink: "0"
+		},
+		item: {
+			...ROW,
+			paddingInlineStart: `calc(${INSET} + var(--depth) * ${LEVEL})`
+		},
+		itemIndicator: {
+			...SQUARE,
+			_highContrast: { color: "inherit" },
+			color: "colorPalette.fg",
+			marginInlineStart: "auto"
+		},
+		itemText: TEXT,
+		label: {
+			color: "fg",
+			fontWeight: "medium",
+			paddingInline: INSET
+		},
+		nodeCheckbox: {
+			...SQUARE,
+			_highContrast: {
+				borderColor: "CanvasText",
+				forcedColorAdjust: "none"
+			},
+			"[aria-selected=true] > &": {
+				_highContrast: { borderColor: "HighlightText" },
+				"&[data-state=checked], &[data-state=indeterminate]": { _highContrast: {
+					background: "HighlightText",
+					borderColor: "HighlightText",
+					color: "Highlight"
+				} }
+			},
+			"&[data-state=checked], &[data-state=indeterminate]": {
+				_highContrast: {
+					background: "CanvasText",
+					borderColor: "CanvasText",
+					color: "Canvas"
+				},
+				background: "colorPalette.solid",
+				borderColor: "colorPalette.solid",
+				color: "colorPalette.contrast"
+			},
+			borderColor: "border.emphasized",
+			borderRadius: "l1",
+			borderStyle: "solid",
+			borderWidth: "control",
+			color: "transparent",
+			cursor: "button"
+		},
+		nodeRenameInput: {
+			focusVisibleRing: "outside",
+			background: "bg.panel",
+			borderColor: "border.emphasized",
+			borderRadius: "l1",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			color: "fg",
+			flex: "1",
+			focusRingColor: "colorPalette.focusRing",
+			font: "inherit",
+			minInlineSize: "0",
+			paddingInline: GAP
+		},
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			inlineSize: "full",
+			minInlineSize: "0"
+		},
+		tree: {
+			display: "flex",
+			flexDirection: "column",
+			minInlineSize: "0"
+		}
+	},
+	className: "tree-view",
+	defaultVariants: {
+		selected: "subtle",
+		size: "md"
+	},
+	jsx: [/^TreeView(\.\w+)?$/u],
+	slots: [
+		"root",
+		"label",
+		"tree",
+		"branch",
+		"branchControl",
+		"branchTrigger",
+		"branchIndicator",
+		"branchText",
+		"branchContent",
+		"branchIndentGuide",
+		"item",
+		"itemIndicator",
+		"itemText",
+		"nodeCheckbox",
+		"nodeRenameInput"
+	],
+	staticCss: [
+		{ palette: [...PALETTES] },
+		{ selected: ["plain"] },
+		{ size: ["sm", "md"] }
+	],
+	variants: {
+		/**
+		* Glow around a selected row, in the palette's solid at half opacity.
+		*/
+		effect: onSlots({
+			branchControl: GLOW,
+			item: GLOW
+		}),
+		/**
+		* Palette the selected fill, the checkboxes and the focus ring read.
+		*
+		* @remarks
+		*   The palette is set on the root, and every part inherits the palette's custom properties.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Fill of a selected row.
+		*
+		* @remarks
+		*   The fills are the flat looks, and each look restates its hover, because a variant applies
+		*   over the base hover. The subtle fill measures 1.2:1 against a card in both color modes, so
+		*   `subtle` also sets the text in medium weight, as `plain` does alone. Under forced colors a
+		*   selected row fills with `Highlight` in every look.
+		*/
+		selected: onSlots({
+			branchControl: SELECTED,
+			item: SELECTED
+		}),
+		/**
+		* Sets rows of 24, 32 and 40px at `sm`, `md` and `lg`. The text reads the body role and the
+		* marks the icon scale one size smaller than the tree, and the inset two sizes smaller.
+		*/
+		size: onSlots({
+			branchControl: ROW_SIZES,
+			item: ROW_SIZES,
+			label: sizeVariants((size) => ({ textStyle: `label.${size}` }), SIZES),
+			root: sizeVariants((size) => ({
+				textStyle: `body.${below(size)}`,
+				"--tree-view-gap": dense(`{spacing.gap.${below(size)}}`),
+				"--tree-view-inset": dense(`{spacing.inset.${below(below(size))}}`),
+				"--tree-view-mark": dense(`{sizes.icon.${below(size)}}`),
+				gap: dense(`{spacing.gap.${size}}`)
+			}), SIZES)
+		})
+	}
+});
+//#endregion
+export { REVEAL as a, recipe$5 as c, ROW_HEIGHT as d, recipe$8 as f, recipe$2 as i, recipe$6 as l, ROWS$1 as n, recipe$3 as o, recipe$1 as r, recipe$4 as s, recipe as t, recipe$7 as u };