@stealthscale/component-disclosure 0.1.0 → 0.2.2

package/dist/recipe-95yCB2V3.js

@@ -0,0 +1,2130 @@
+import { PALETTES, below, controlSizes, defineRecipe, defineSlotRecipe, dense, divider, highlightVariants, iconSizes, insetSizes, interactive, justifyVariants, link, motion, onSlot, onSlots, paletteVariants, row, sizeVariants, surface, textSizes, truncate } from "@stealthscale/theme/authoring";
+//#region src/accordion/recipe.ts
+/**
+* Recipe for the accordion: a column of items, each a heading whose trigger shows and hides the
+* content under it.
+*
+* @remarks
+*   The trigger fills its heading, sets its title in the label style and puts the indicator at its
+*   end, so an icon or an avatar before the title leaves the indicators in one column. The trigger
+*   is at least a control's height and grows with a title that wraps. A heading with a second child
+*   after the trigger, such as an action button, places that child at the end of the row, outside
+*   the button. The content animates to the height the collapsible machine measures, and the body
+*   inside it has the padding, so the animation runs down to zero height. The subtle, surface
+*   and outline looks inset the trigger and the body from the box's edges. The flushed and plain
+*   looks align both with the text around the accordion. The recipe has no `effect` axis, because
+*   the box contains content as well as the triggers, and a glow marks a control.
+*/
+/**
+* Sizes the recipe offers.
+*/
+const SIZES$4 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Selects a heading that contains a second child after its trigger.
+*/
+const FOLLOWED = "&:has(> :nth-child(2))";
+/**
+* Places the focus ring one ring width inside the trigger's edge, for the looks whose root clips
+* what falls outside it.
+*/
+const INSIDE = { _focusVisible: { outlineOffset: "calc({borderWidths.ring} * -1)" } };
+/**
+* Removes the inline inset of the trigger and the body, for the looks that align their text with
+* the text around the accordion.
+*/
+const FLUSH = { paddingInline: "0" };
+/**
+* Removes the end inset a heading gives the child after its trigger, for the same looks.
+*/
+const FLUSH_END = { [FOLLOWED]: { paddingInlineEnd: "0" } };
+/**
+* Rules a hairline under every item but the last.
+*/
+const DIVIDED = {
+	_last: { borderBlockEndWidth: "0" },
+	borderBlockEndWidth: "hairline"
+};
+/**
+* Defines the accordion recipe: flushed items at size `md` in the neutral palette, sliding open,
+* by default.
+*/
+const recipe$11 = defineSlotRecipe({
+	base: {
+		item: { overflowAnchor: "none" },
+		itemContent: { overflow: "hidden" },
+		itemHeading: {
+			alignItems: "center",
+			display: "flex"
+		},
+		itemIndicator: {
+			_motionReduce: { transitionDuration: "none" },
+			_open: { rotate: "180deg" },
+			alignItems: "center",
+			color: "fg.muted",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			marginInlineStart: "auto",
+			transitionDuration: "press",
+			transitionProperty: "rotate, color",
+			transitionTimingFunction: "press"
+		},
+		itemTrigger: {
+			...interactive(),
+			_hover: { "& .accordion__itemIndicator": { color: "fg" } },
+			"& > svg": { flexShrink: "0" },
+			alignItems: "center",
+			display: "flex",
+			flex: "1",
+			minInlineSize: "0",
+			textAlign: "start"
+		},
+		root: { inlineSize: "full" }
+	},
+	className: "accordion",
+	defaultVariants: {
+		motion: "slide",
+		palette: "neutral",
+		size: "md",
+		variant: "flushed"
+	},
+	jsx: [/^Accordion(\.\w+)?$/u],
+	slots: [
+		"root",
+		"item",
+		"itemHeading",
+		"itemTrigger",
+		"itemIndicator",
+		"itemContent",
+		"itemBody"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Animation of the content as it opens and closes.
+		*/
+		motion: {
+			fade: { itemContent: {
+				_closed: { animationStyle: "fade.out" },
+				_open: { animationStyle: "fade.in" }
+			} },
+			none: { itemContent: { animation: "none" } },
+			slide: { itemContent: {
+				_closed: { animationStyle: "collapse.out" },
+				_open: { animationStyle: "collapse.in" }
+			} }
+		},
+		/**
+		* Palette the looks read, set on the root.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Size of the trigger on the control scale, the indicator on the icon scale, and the body's
+		* padding and text.
+		*
+		* @remarks
+		*   A trigger is at least a control's height. Its block padding is the gap one step below, so a
+		*   one-line title centres in that height and a title that wraps adds its lines. A leading icon
+		*   is on the icon scale one step below the indicator. The body starts one gap below the
+		*   trigger and ends one inset above the next item.
+		*/
+		size: onSlots({
+			itemBody: sizeVariants((size) => ({
+				textStyle: `body.${size}`,
+				paddingBlockEnd: dense(`{spacing.inset.${size}}`),
+				paddingBlockStart: dense(`{spacing.gap.${below(size)}}`),
+				paddingInline: dense(`{spacing.inset.${size}}`)
+			}), SIZES$4),
+			itemHeading: sizeVariants((size) => ({
+				[FOLLOWED]: { paddingInlineEnd: dense(`{spacing.inset.${below(size)}}`) },
+				gap: dense(`{spacing.gap.${size}}`)
+			}), SIZES$4),
+			itemIndicator: iconSizes(SIZES$4),
+			itemTrigger: sizeVariants((size) => ({
+				textStyle: `label.${size}`,
+				"&:not(:last-child)": { paddingInlineEnd: "0" },
+				"& > svg": { boxSize: dense(`{sizes.icon.${below(size)}}`) },
+				gap: dense(`{spacing.gap.${size}}`),
+				minBlockSize: dense(`{sizes.control.${size}}`),
+				paddingBlock: dense(`{spacing.gap.${below(size)}}`),
+				paddingInline: dense(`{spacing.inset.${size}}`)
+			}), SIZES$4)
+		}),
+		/**
+		* Look of the items and the box around them.
+		*
+		* @remarks
+		*   `subtle` fills the open item from the palette and fills a trigger under the pointer.
+		*   `surface` is the theme's panel, with its shadow, and `outline` a hairline box, both with a
+		*   hairline between items. `flushed` rules a hairline under every item and renders no box.
+		*   `plain` renders no line. The boxed looks clip their content to the box's corners and place
+		*   the focus ring inside the trigger. The rules and the outline read the palette's muted role,
+		*   and the surface's rules read the panel's edge color.
+		*/
+		variant: {
+			subtle: {
+				item: {
+					_open: { background: "colorPalette.subtle" },
+					borderRadius: "l2"
+				},
+				itemTrigger: {
+					...INSIDE,
+					_hover: { background: "colorPalette.subtle" },
+					_open: {
+						_hover: { background: "colorPalette.muted" },
+						borderEndEndRadius: "0",
+						borderEndStartRadius: "0"
+					},
+					borderRadius: "l2"
+				}
+			},
+			surface: {
+				item: {
+					...DIVIDED,
+					borderBlockEndColor: "border"
+				},
+				itemTrigger: {
+					...INSIDE,
+					_hover: { background: "colorPalette.subtle" }
+				},
+				root: {
+					...surface(),
+					overflow: "clip"
+				}
+			},
+			outline: {
+				item: {
+					...DIVIDED,
+					borderBlockEndColor: "colorPalette.muted"
+				},
+				itemTrigger: {
+					...INSIDE,
+					_hover: { background: "colorPalette.subtle" }
+				},
+				root: {
+					borderColor: "colorPalette.muted",
+					borderRadius: "l2",
+					borderWidth: "hairline",
+					overflow: "clip"
+				}
+			},
+			flushed: {
+				item: {
+					borderBlockEndColor: "colorPalette.muted",
+					borderBlockEndWidth: "hairline"
+				},
+				itemBody: FLUSH,
+				itemHeading: FLUSH_END,
+				itemTrigger: FLUSH
+			},
+			plain: {
+				itemBody: FLUSH,
+				itemHeading: FLUSH_END,
+				itemTrigger: FLUSH
+			}
+		}
+	}
+});
+//#endregion
+//#region src/collapsible/recipe.ts
+/**
+* Recipe for the collapsible: a trigger that shows and hides the content beneath it, and an
+* indicator that turns as it does.
+*
+* @remarks
+*   The trigger takes the full width and places the indicator at its end, and reads the control
+*   scale, so its height matches a button of the same size. The content animates to the height the
+*   machine measures, with the theme's animation styles, so the theme settles reduced motion. The
+*   palette axis offers the eight palettes. The recipe has no `effect` axis, because the box holds
+*   content as well as the trigger, and a glow marks a control.
+*/
+/**
+* Defines the collapsible recipe: a plain collapsible at size `md` in the neutral palette, sliding
+* open, by default.
+*/
+const recipe$10 = defineSlotRecipe({
+	base: {
+		content: { overflow: "hidden" },
+		indicator: {
+			_motionReduce: { transitionDuration: "none" },
+			_open: { rotate: "180deg" },
+			alignItems: "center",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			transitionDuration: "press",
+			transitionProperty: "rotate",
+			transitionTimingFunction: "press"
+		},
+		root: { width: "full" },
+		trigger: {
+			...interactive(),
+			alignItems: "center",
+			display: "flex",
+			justifyContent: "space-between",
+			textAlign: "start",
+			width: "full"
+		}
+	},
+	className: "collapsible",
+	defaultVariants: {
+		motion: "slide",
+		palette: "neutral",
+		size: "md",
+		variant: "plain"
+	},
+	jsx: [/^Collapsible(\.\w+)?$/u],
+	slots: [
+		"root",
+		"trigger",
+		"content",
+		"indicator"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Animation of the content as it opens and closes.
+		*/
+		motion: {
+			fade: { content: {
+				_closed: { animationStyle: "fade.out" },
+				_open: { animationStyle: "fade.in" }
+			} },
+			none: { content: { animation: "none" } },
+			slide: { content: {
+				_closed: { animationStyle: "collapse.out" },
+				_open: { animationStyle: "collapse.in" }
+			} }
+		},
+		/**
+		* Palette the looks read, set on the root.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Size of the trigger on the control scale, the indicator on the icon scale and the content's
+		* padding on the inset scale.
+		*/
+		size: onSlots({
+			content: insetSizes(),
+			indicator: iconSizes(),
+			trigger: controlSizes()
+		}),
+		/**
+		* Look of the box around the trigger and the content.
+		*
+		* @remarks
+		*   `surface` uses the theme's `surface()` fragment, with its shadow. Every look reads the
+		*   palette, so the palette tints the fill and the edge. The subtle trigger takes the root's
+		*   radius, so its hover fill follows the root's corners, and its end corners are square while
+		*   the content is open under it. Under forced colors the subtle box, which the browser's fill
+		*   replaces, takes a `CanvasText` hairline outline.
+		*/
+		variant: {
+			subtle: {
+				root: {
+					_highContrast: {
+						outlineColor: "CanvasText",
+						outlineOffset: "calc({borderWidths.hairline} * -1)",
+						outlineStyle: "solid",
+						outlineWidth: "hairline"
+					},
+					background: "colorPalette.subtle",
+					borderRadius: "l2"
+				},
+				trigger: {
+					_hover: { background: "colorPalette.muted" },
+					_open: {
+						borderEndEndRadius: "0",
+						borderEndStartRadius: "0"
+					},
+					borderRadius: "l2"
+				}
+			},
+			surface: {
+				root: surface(),
+				trigger: { _open: {
+					borderBlockEndColor: "colorPalette.muted",
+					borderBlockEndWidth: "hairline"
+				} }
+			},
+			outline: {
+				root: {
+					borderColor: "colorPalette.muted",
+					borderRadius: "l2",
+					borderWidth: "hairline"
+				},
+				trigger: { _open: {
+					borderBlockEndColor: "colorPalette.muted",
+					borderBlockEndWidth: "hairline"
+				} }
+			},
+			plain: { root: { borderWidth: "0" } }
+		}
+	}
+});
+//#endregion
+//#region src/details/recipe.ts
+/**
+* Recipe for the details: a native `details` element whose summary shows and hides the content
+* under it, and an indicator that turns a quarter as it opens.
+*
+* @remarks
+*   The browser opens and closes the element, so every open style keys on the root's `open`
+*   attribute. The summary drops the browser's marker and is a control's height for one line, and
+*   a summary that wraps grows. The indicator goes before the words and turns a quarter
+*   clockwise, and a quarter the other way under `dir="rtl"`, for a chevron that points to the
+*   end. The looks and the palette are the collapsible's, so a details beside a collapsible looks
+*   the same.
+*/
+/**
+* Selects the summary of an open details.
+*/
+const OPENED = ".details__root[open] > &";
+/**
+* Defines the details recipe: an outlined details at size `md` in the neutral palette by default.
+*/
+const recipe$9 = defineSlotRecipe({
+	base: {
+		indicator: {
+			_motionReduce: { transitionDuration: "none" },
+			"& svg": { boxSize: "full" },
+			alignItems: "center",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			[".details__root[open] > .details__summary > &"]: {
+				_rtl: { rotate: "-90deg" },
+				rotate: "90deg"
+			},
+			transitionDuration: "press",
+			transitionProperty: "rotate",
+			transitionTimingFunction: "press"
+		},
+		root: { width: "full" },
+		summary: {
+			...interactive(),
+			"&::-webkit-details-marker": { display: "none" },
+			alignItems: "center",
+			display: "flex",
+			fontWeight: "medium",
+			listStyle: "none",
+			textAlign: "start"
+		}
+	},
+	className: "details",
+	defaultVariants: {
+		palette: "neutral",
+		size: "md",
+		variant: "outline"
+	},
+	jsx: [/^Details(\.\w+)?$/u],
+	slots: [
+		"root",
+		"summary",
+		"indicator",
+		"content"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Palette the looks read, set on the root.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Size of the summary, the indicator on the icon scale and the content's padding on the inset
+		* scale.
+		*
+		* @remarks
+		*   The summary pads its ends by half of a control's height less its tallest line, one line of
+		*   text or the indicator, and is at least a control's height. A one-line summary is then a
+		*   collapsible trigger's height at the same size, and a longer one grows by its lines. It pads
+		*   its sides on the inset scale.
+		*/
+		size: onSlots({
+			content: insetSizes(),
+			indicator: iconSizes(),
+			summary: sizeVariants((size) => ({
+				textStyle: `label.${size}`,
+				gap: dense(`{spacing.gap.${size}}`),
+				minBlockSize: dense(`{sizes.control.${size}}`),
+				paddingBlock: `calc((${dense(`{sizes.control.${size}}`)} - max(1lh, ${dense(`{sizes.icon.${size}}`)})) / 2)`,
+				paddingInline: dense(`{spacing.inset.${size}}`)
+			}))
+		}),
+		/**
+		* Look of the box around the summary and the content.
+		*
+		* @remarks
+		*   The looks are the collapsible's. The subtle summary takes the root's radius, so its hover
+		*   fill follows the root's corners, and its end corners are square while the content is open
+		*   under it. Under forced colors the subtle box, which the browser's fill replaces, takes a
+		*   `CanvasText` hairline outline. The plain look draws no box and pads no side, so its summary
+		*   and content line up with the text around them.
+		*/
+		variant: {
+			subtle: {
+				root: {
+					_highContrast: {
+						outlineColor: "CanvasText",
+						outlineOffset: "calc({borderWidths.hairline} * -1)",
+						outlineStyle: "solid",
+						outlineWidth: "hairline"
+					},
+					background: "colorPalette.subtle",
+					borderRadius: "l2"
+				},
+				summary: {
+					_hover: { background: "colorPalette.muted" },
+					borderRadius: "l2",
+					[OPENED]: {
+						borderEndEndRadius: "0",
+						borderEndStartRadius: "0"
+					}
+				}
+			},
+			surface: {
+				root: surface(),
+				summary: { [OPENED]: {
+					borderBlockEndColor: "colorPalette.muted",
+					borderBlockEndWidth: "hairline"
+				} }
+			},
+			outline: {
+				root: {
+					borderColor: "colorPalette.muted",
+					borderRadius: "l2",
+					borderWidth: "hairline"
+				},
+				summary: { [OPENED]: {
+					borderBlockEndColor: "colorPalette.muted",
+					borderBlockEndWidth: "hairline"
+				} }
+			},
+			plain: {
+				content: { paddingInline: "0" },
+				root: { borderWidth: "0" },
+				summary: { paddingInline: "0" }
+			}
+		}
+	}
+});
+//#endregion
+//#region src/hover-card/recipe.ts
+/**
+* Recipe for the hover card: a panel beside a link that previews what the link leads to, with an
+* arrow.
+*
+* @remarks
+*   The machine has no root part. The recipe adds a root with `display: contents`, because the
+*   trigger and the positioner are siblings and a slot recipe passes its variants from an element
+*   above both. The machine writes the positioner's position inline, so the recipe sets no
+*   position. The trigger reads `link()` and is underlined at rest, because the link ink alone
+*   measures 1.64:1 against body text in light mode and 1.38:1 in dark mode on the ink theme, under
+*   the 3:1 that WCAG technique G183 asks for. The panel slides in from the trigger's side, which
+*   it reads from `data-placement`. It is at most `sizes.xs` wide, or as wide as the room the
+*   machine measures on its side of the trigger, `--available-width`, where that is less. The
+*   recipe has no `palette` axis, because every look uses a neutral surface, and no `effect` axis,
+*   because a panel is not a control.
+*/
+/**
+* Steps of the size axis.
+*/
+const SIZES$3 = [
+	"xs",
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Defines the hover card recipe: the surface look at size `md` by default.
+*/
+const recipe$8 = defineSlotRecipe({
+	base: {
+		arrow: {
+			"--arrow-background": "var(--hover-card-surface)",
+			"--arrow-size": "sizes.icon.sm"
+		},
+		arrowTip: {
+			borderInlineStartWidth: "hairline",
+			borderTopWidth: "hairline"
+		},
+		content: {
+			...motion("slide-fade.in", "slide-fade.out"),
+			display: "flex",
+			flexDirection: "column",
+			maxInlineSize: "min({sizes.xs}, var(--available-width, {sizes.xs}))",
+			position: "relative",
+			zIndex: "popover"
+		},
+		positioner: { position: "relative" },
+		root: { display: "contents" },
+		trigger: {
+			...link(),
+			borderRadius: "l1",
+			textDecoration: "underline"
+		}
+	},
+	className: "hover-card",
+	defaultVariants: {
+		size: "md",
+		variant: "surface"
+	},
+	jsx: [/^HoverCard(\.\w+)?$/u],
+	slots: [
+		"root",
+		"trigger",
+		"positioner",
+		"content",
+		"arrow",
+		"arrowTip"
+	],
+	variants: {
+		/**
+		* Padding of the panel on the inset scale and its text on the body role.
+		*/
+		size: onSlot("content", sizeVariants((size) => ({
+			textStyle: `body.${size}`,
+			padding: dense(`{spacing.inset.${size}}`)
+		}), SIZES$3)),
+		/**
+		* Surface of the panel: the popover surface inside a hairline edge, the panel surface with a
+		* large shadow, or the glass layer style.
+		*
+		* @remarks
+		*   The elevated panel has a transparent hairline edge, which forced colors paint in
+		*   `CanvasText`, so the panel keeps its outline where the shadow is not drawn.
+		*/
+		variant: {
+			elevated: {
+				arrowTip: { borderColor: "var(--hover-card-surface)" },
+				content: {
+					"--hover-card-surface": "colors.bg.panel",
+					background: "var(--hover-card-surface)",
+					borderColor: "transparent",
+					borderRadius: "l3",
+					borderStyle: "solid",
+					borderWidth: "hairline",
+					boxShadow: "xl"
+				}
+			},
+			glass: {
+				arrowTip: { borderColor: "border" },
+				content: {
+					layerStyle: "glass",
+					"--hover-card-surface": "colors.bg.popover",
+					borderRadius: "l3"
+				}
+			},
+			surface: {
+				arrowTip: { borderColor: "border" },
+				content: {
+					"--hover-card-surface": "colors.bg.popover",
+					background: "var(--hover-card-surface)",
+					borderColor: "border",
+					borderRadius: "l3",
+					borderWidth: "hairline",
+					boxShadow: "lg"
+				}
+			}
+		}
+	}
+});
+//#endregion
+//#region src/menu/recipe.ts
+/**
+* Recipe for the menu: a trigger, a panel of rows and groups, and submenus opened from a row.
+*
+* @remarks
+*   The machine has no root part. The recipe adds a root with `display: contents`, because the
+*   trigger and the positioner are siblings and a slot recipe passes its variants from an element
+*   above both. A submenu's root is a child of the parent menu's panel. The machine writes the
+*   positioner's position inline and `--available-height`, which caps the panel, so a menu near the
+*   window's edge scrolls its rows in the primitives package's scroll area inside the panel. The
+*   `viewport` and `rows` slots are that scroll area's viewport, the element with the menu role,
+*   and its content: the rows take the panel's padding, and the viewport's scroll padding keeps a
+*   revealed row that padding from the edge. The panel is at least `sizes.44` wide and grows to its
+*   widest row. The panel takes the `popover` z-index plus its depth in the nest, because the
+*   machine writes `z-index: var(--z-index)` inline on the positioner from the panel's value. The
+*   `popover` level is above a page's sticky bands and the app shell's bars, so a menu opened from
+*   a bar is above the bands under it. Neither the panel nor its scroll area renders a focus ring,
+*   because the machine focuses the menu on opening and the highlight marks the row. A row reads
+*   the body role one size smaller, truncates, and sizes a leading icon to the icon size one size
+*   smaller. A row's mark renders its initial or glyph without a fill, in the muted ink. `inset`
+*   pads a row without a leading icon or mark by the gutter a leading icon takes, so its text
+*   starts where an icon row's text starts. The indicator mirrors in a right-to-left menu, so a
+*   submenu row's chevron points to the side the submenu opens on. The panel sets the palette, and
+*   the rows and the highlight inherit it. A critical row reads `error`. The recipe has no `effect`
+*   axis, because the highlight moves with the pointer and the arrow keys, and a glow would move
+*   with it.
+*/
+/**
+* Sizes the menu offers.
+*/
+const SIZES$2 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* The recipe's class name, which the selectors across parts are built from.
+*
+* @remarks
+*   The binding writes one class per part and no part attribute. A selector names a part by the
+*   compiler's class, such as `menu__itemMark`, and the naming step renames it to the class the
+*   element carries, `menu__item-mark`.
+*/
+const CLASS$2 = "menu";
+/**
+* Custom property a panel sets to its depth in the nest, which the panel adds to its z-index.
+*
+* @remarks
+*   When a caller portals a menu and its submenu to the document, neither is an ancestor of the
+*   other. Without the depth, mount order decides the stacking, and a submenu renders under its
+*   parent.
+*/
+const MENU_DEPTH = "--menu-depth";
+/**
+* Attribute a panel sets when it opened from a row of another menu.
+*
+* @remarks
+*   A selector cannot compare a custom property's number, so the attribute marks a nested panel.
+*/
+const NESTED = "data-nested";
+/**
+* Custom property the size axis sets to the gutter a leading icon takes, which `inset` reads.
+*/
+const GUTTER$1 = "--menu-gutter";
+/**
+* Custom property the scroll area's root reads for the style of its focus ring.
+*/
+const RING_STYLE = "--scroll-area-ring-style";
+/**
+* Selects a row whose first element is neither an icon nor a mark.
+*
+* @remarks
+*   The selector matches element children only, so the text before an icon does not count.
+*/
+const UNMARKED = `&:not(:has(> svg:first-child, > .${CLASS$2}__itemMark:first-child))`;
+/**
+* Custom property each look sets to the panel's fill, which the arrow reads.
+*/
+const SURFACE = "var(--menu-surface)";
+/**
+* Returns the side of a row's leading icon at a size: the icon size one size smaller.
+*/
+function icon(size) {
+	return dense(`{sizes.icon.${below(size)}}`);
+}
+/**
+* Returns the gutter a leading icon takes at a size: the row's inline padding, the icon and the
+* gap, each multiplied by the density as the row multiplies them.
+*/
+function gutter(size) {
+	return `calc(${dense(`{spacing.inset.${below(size)}}`)} + ${icon(size)} + ${dense(`{spacing.gap.${size}}`)})`;
+}
+/**
+* Returns the margin that moves a submenu off its parent's panel, on the side it opened towards.
+*
+* @remarks
+*   The machine places a submenu against the row that opened it, and the row stops one padding
+*   short of the panel's edge, so the margin moves the submenu off its parent by that padding. The
+*   machine reports the side as left or right, and the margin is logical, so each side sets both
+*   inline margins and swaps them under `_rtl`.
+* @param room - The rows' padding at the size.
+*/
+function cleared(room) {
+	return {
+		[`&[${NESTED}][data-placement^=left]`]: {
+			_rtl: {
+				marginInlineEnd: "0",
+				marginInlineStart: room
+			},
+			marginInlineEnd: room,
+			marginInlineStart: "0"
+		},
+		[`&[${NESTED}][data-placement^=right]`]: {
+			_rtl: {
+				marginInlineEnd: room,
+				marginInlineStart: "0"
+			},
+			marginInlineEnd: "0",
+			marginInlineStart: room
+		}
+	};
+}
+/**
+* Returns a row's styles at a size: its padding, the leading icon, the gap after a mark, the gutter
+* and the body role one size smaller.
+*/
+function rowOf(size) {
+	return {
+		textStyle: `body.${below(size)}`,
+		"& > svg": {
+			boxSize: icon(size),
+			flexShrink: "0"
+		},
+		gap: dense(`{spacing.gap.${size}}`),
+		[GUTTER$1]: gutter(size),
+		paddingBlock: dense(`{spacing.gap.${below(size)}}`),
+		paddingInline: dense(`{spacing.inset.${below(size)}}`)
+	};
+}
+/**
+* Defines the menu recipe: the surface look at size `md` in the neutral palette, with the tint
+* highlight, by default.
+*/
+const recipe$7 = defineSlotRecipe({
+	base: {
+		arrow: {
+			"--arrow-background": SURFACE,
+			"--arrow-size": "sizes.icon.sm"
+		},
+		arrowTip: {
+			borderInlineStartWidth: "hairline",
+			borderTopWidth: "hairline"
+		},
+		content: {
+			...motion("slide-fade.in", "slide-fade.out"),
+			display: "flex",
+			flexDirection: "column",
+			maxBlockSize: "var(--available-height)",
+			minInlineSize: "44",
+			outline: "0",
+			[RING_STYLE]: "none",
+			zIndex: `calc({zIndex.popover} + var(${MENU_DEPTH}, 0))`
+		},
+		contextTrigger: { cursor: "menuitem" },
+		indicator: {
+			_rtl: { scale: "-1 1" },
+			"& > svg": { boxSize: "100%" },
+			alignItems: "center",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			marginInlineStart: "auto"
+		},
+		item: {
+			...row(),
+			"&[data-tone=critical]": {
+				color: "colorPalette.fg",
+				colorPalette: "error"
+			},
+			borderRadius: "l1"
+		},
+		itemCommand: {
+			color: "fg.muted",
+			flexShrink: "0",
+			fontFamily: "inherit",
+			letterSpacing: "wide",
+			marginInlineStart: "auto"
+		},
+		itemDescription: {
+			...truncate(),
+			textStyle: "caption",
+			color: "fg.subtle",
+			display: "block"
+		},
+		itemGroup: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		itemGroupLabel: {
+			color: "fg.subtle",
+			fontWeight: "medium"
+		},
+		itemIndicator: {
+			"&[data-state=checked]": { visibility: "visible" },
+			alignItems: "center",
+			boxSizing: "content-box",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			marginInlineStart: "auto",
+			order: "1",
+			visibility: "hidden"
+		},
+		itemLines: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			minInlineSize: "0"
+		},
+		itemMark: {
+			alignItems: "center",
+			color: "fg.muted",
+			display: "inline-flex",
+			flexShrink: "0",
+			fontWeight: "semibold",
+			justifyContent: "center",
+			lineHeight: "tight",
+			overflow: "clip"
+		},
+		itemText: {
+			...truncate(),
+			flex: "1"
+		},
+		positioner: { position: "relative" },
+		root: { display: "contents" },
+		rows: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		separator: {
+			...divider(),
+			borderColor: "border.muted",
+			inlineSize: "auto"
+		},
+		trigger: { ...interactive() },
+		triggerItem: {
+			...row(),
+			borderRadius: "l1"
+		},
+		viewport: { overscrollBehavior: "contain" }
+	},
+	className: CLASS$2,
+	defaultVariants: {
+		highlight: "tint",
+		palette: "neutral",
+		size: "md",
+		variant: "surface"
+	},
+	jsx: [/^Menu(\.\w+)?$/u],
+	slots: [
+		"root",
+		"trigger",
+		"contextTrigger",
+		"triggerItem",
+		"indicator",
+		"positioner",
+		"content",
+		"viewport",
+		"rows",
+		"itemGroup",
+		"itemGroupLabel",
+		"item",
+		"itemMark",
+		"itemLines",
+		"itemText",
+		"itemDescription",
+		"itemIndicator",
+		"itemCommand",
+		"separator",
+		"arrow",
+		"arrowTip"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Look of the highlighted row.
+		*/
+		highlight: onSlots({
+			item: highlightVariants(),
+			triggerItem: highlightVariants()
+		}),
+		/**
+		* Whether a row without a leading icon or mark starts its text after the gutter an icon takes,
+		* for a menu where some rows lead with an icon.
+		*/
+		inset: { true: {
+			item: { [UNMARKED]: { paddingInlineStart: `var(${GUTTER$1})` } },
+			triggerItem: { [UNMARKED]: { paddingInlineStart: `var(${GUTTER$1})` } }
+		} },
+		/**
+		* Palette of the rows and the highlight, set on the panel, which a portalled panel keeps.
+		*/
+		palette: onSlot("content", paletteVariants()),
+		/**
+		* Size of the panel's padding, the rows, the marks and the keys.
+		*/
+		size: onSlots({
+			/**
+			* The margin that moves a submenu off its parent's panel.
+			*/
+			content: sizeVariants((size) => cleared(dense(`{spacing.gap.${below(size)}}`)), SIZES$2),
+			/**
+			* The indicator at the icon size one size smaller, the same square as a checked row's mark.
+			*/
+			indicator: sizeVariants((size) => ({ boxSize: dense(`{sizes.icon.${below(size)}}`) }), SIZES$2),
+			item: sizeVariants((size) => rowOf(size), SIZES$2),
+			itemCommand: sizeVariants((size) => ({
+				textStyle: `body.${below(below(size))}`,
+				paddingInlineStart: dense(`{spacing.inset.${size}}`)
+			}), SIZES$2),
+			itemGroupLabel: sizeVariants((size) => ({
+				textStyle: `body.${below(below(size))}`,
+				paddingBlock: dense(`{spacing.gap.${below(below(size))}}`),
+				paddingInline: dense(`{spacing.inset.${below(size)}}`)
+			}), SIZES$2),
+			itemIndicator: sizeVariants((size) => ({
+				boxSize: dense(`{sizes.icon.${below(size)}}`),
+				paddingInlineStart: dense(`{spacing.gap.${size}}`)
+			}), SIZES$2),
+			itemMark: sizeVariants((size) => ({
+				boxSize: dense(`{sizes.tag.${size}}`),
+				fontSize: below(below(size))
+			}), SIZES$2),
+			/**
+			* The rows' padding inside the scroll area, which the separators' negative margins cross.
+			*/
+			rows: sizeVariants((size) => ({ padding: dense(`{spacing.gap.${below(size)}}`) }), SIZES$2),
+			separator: sizeVariants((size) => ({
+				marginBlock: dense(`{spacing.gap.${below(size)}}`),
+				marginInline: `calc(-1 * ${dense(`{spacing.gap.${below(size)}}`)})`
+			}), SIZES$2),
+			triggerItem: sizeVariants((size) => rowOf(size), SIZES$2),
+			/**
+			* The scroll padding that keeps a revealed row the rows' padding from the edge.
+			*/
+			viewport: sizeVariants((size) => ({ scrollPadding: dense(`{spacing.gap.${below(size)}}`) }), SIZES$2)
+		}),
+		/**
+		* Surface of the panel: the popover surface inside a hairline edge, the panel surface with a
+		* large shadow, or the glass layer style.
+		*
+		* @remarks
+		*   The elevated panel has a transparent hairline edge, which forced colors paint in
+		*   `CanvasText`, so the panel keeps its outline where the shadow is not drawn.
+		*/
+		variant: {
+			elevated: {
+				arrowTip: { borderColor: SURFACE },
+				content: {
+					"--menu-surface": "colors.bg.panel",
+					background: SURFACE,
+					borderColor: "transparent",
+					borderRadius: "l2",
+					borderStyle: "solid",
+					borderWidth: "hairline",
+					boxShadow: "lg"
+				}
+			},
+			glass: {
+				arrowTip: { borderColor: "border" },
+				content: {
+					layerStyle: "glass",
+					"--menu-surface": "colors.bg.popover",
+					borderRadius: "l2"
+				}
+			},
+			surface: {
+				arrowTip: { borderColor: "border" },
+				content: {
+					"--menu-surface": "colors.bg.popover",
+					background: SURFACE,
+					borderColor: "border",
+					borderRadius: "l2",
+					borderWidth: "hairline",
+					boxShadow: "md"
+				}
+			}
+		}
+	}
+});
+//#endregion
+//#region src/menubar/recipe.ts
+/**
+* Styles the menubar's root, which measures its row, its bar of names, a name, and the trigger a
+* crowded bar folds into.
+*
+* @remarks
+*   A name is drawn as a menu's row: no fill at rest, the palette's subtle role under the pointer,
+*   and its muted role while its menu is open, the fill a highlighted row takes, with a row's
+*   padding and text at the bar's size, so the names read as the rows they open. The root sets the
+*   palette the names read, which the root passes to its menus as well. While the root marks its
+*   row `data-crowded`, the bar is hidden and the fold trigger shows in its place. The panels are
+*   the menu recipe's, so the bar states no panel. Under forced colors an open name fills with
+*   `Highlight`, under the pointer too.
+*/
+/**
+* Class name of the recipe, from which the binding writes each part's class.
+*/
+const CLASS$1 = "menubar";
+/**
+* Sizes the bar offers, which its menus take too.
+*/
+const SIZES$1 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Selects the bar of a root that marks its row crowded.
+*/
+const CROWDED = "[data-crowded] > &";
+/**
+* Selects the fold trigger of a root that marks its row crowded.
+*
+* @remarks
+*   The fold trigger is a child of its menu's root, a `div` with `display: contents`, so the
+*   crowded root is its grandparent.
+*/
+const FOLDED = "[data-crowded] > * > &";
+/**
+* Forced colors of an open name: the system highlight, which the browser keeps.
+*/
+const FORCED = { _highContrast: {
+	background: "Highlight",
+	color: "HighlightText",
+	forcedColorAdjust: "none"
+} };
+/**
+* Returns the styles a name shares with the fold trigger, which draw it as a menu's row that fills
+* under the pointer and while its menu is open.
+*
+* @remarks
+*   The compiler emits the hover rule after the forced-colors rule, so the open state's forced
+*   colors are restated inside the hover rule, where the open selector raises their specificity.
+*/
+function named() {
+	return {
+		...interactive(),
+		_hover: {
+			_open: FORCED,
+			background: "colorPalette.subtle"
+		},
+		_open: {
+			...FORCED,
+			background: "colorPalette.muted"
+		},
+		alignItems: "center",
+		appearance: "none",
+		background: "transparent",
+		borderRadius: "l1",
+		borderWidth: "0",
+		color: "fg",
+		display: "inline-flex",
+		flexShrink: "0",
+		fontWeight: "medium",
+		whiteSpace: "nowrap"
+	};
+}
+/**
+* Returns the padding, gap and text of a menu's row at a size, and a leading icon one size smaller
+* on the icon scale, which a name and the fold trigger take.
+*
+* @param size - The size of the bar.
+*/
+function sized(size) {
+	return {
+		textStyle: `body.${below(size)}`,
+		"& > svg": {
+			boxSize: dense(`{sizes.icon.${below(size)}}`),
+			flexShrink: "0"
+		},
+		gap: dense(`{spacing.gap.${size}}`),
+		paddingBlock: dense(`{spacing.gap.${below(size)}}`),
+		paddingInline: dense(`{spacing.inset.${below(size)}}`)
+	};
+}
+/**
+* Defines the menubar recipe, in the neutral palette at size `md` by default.
+*/
+const recipe$6 = defineSlotRecipe({
+	base: {
+		bar: {
+			alignItems: "center",
+			[CROWDED]: { display: "none" }
+		},
+		fold: {
+			...named(),
+			display: "none",
+			[FOLDED]: { display: "inline-flex" }
+		},
+		root: {
+			display: "flex",
+			maxInlineSize: "full",
+			minInlineSize: "0"
+		},
+		trigger: named()
+	},
+	className: CLASS$1,
+	defaultVariants: {
+		palette: "neutral",
+		size: "md"
+	},
+	jsx: [/^Menubar(\.\w+)?$/u],
+	slots: [
+		"root",
+		"bar",
+		"trigger",
+		"fold"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Palette the names fill in under the pointer and while their menu is open, set on the root.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Padding and text of the names and the fold trigger, and the gap between the names.
+		*/
+		size: onSlots({
+			bar: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${below(size)}}`) }), SIZES$1),
+			fold: sizeVariants(sized, SIZES$1),
+			trigger: sizeVariants(sized, SIZES$1)
+		})
+	}
+});
+//#endregion
+//#region src/popover/recipe.ts
+/**
+* Recipe for the popover: a panel beside its trigger, with a heading, a description, a close
+* button and an arrow.
+*
+* @remarks
+*   The machine has no root part. The recipe adds a root with `display: contents`, because the
+*   trigger and the positioner are siblings and a slot recipe passes its variants from an element
+*   above both. The machine writes the positioner's position inline, so the recipe sets no
+*   position. The panel scales from the machine's `--transform-origin` and is at least as wide as
+*   the trigger, `--reference-width`. The title and the description read the body role at the
+*   panel's size, the title in the semibold weight, because a panel beside a control does not
+*   start a section of the page. The weight is a compound over every size, because the size's
+*   text style states the role's weight in the variants layer, which applies over the base.
+*   The trigger takes a control's cursor, focus ring and disabled look, and no fill, edge or
+*   padding, so a caller passes a button through `as`. The recipe has no `palette` axis, because
+*   every look uses a neutral surface, and no `effect` axis, because a panel is not a control.
+*/
+/**
+* Custom property the size axis sets to the room the title leaves for the close trigger.
+*
+* @remarks
+*   The close trigger is positioned absolutely, so a long title ran under it. The size axis sets
+*   the room once, and the title reads it as its inline-end padding.
+*/
+const CLOSED = "--popover-closed";
+/**
+* Defines the popover recipe: the surface look at size `md` by default.
+*/
+const recipe$5 = defineSlotRecipe({
+	base: {
+		arrow: {
+			"--arrow-background": "var(--popover-surface)",
+			"--arrow-size": "sizes.icon.sm"
+		},
+		arrowTip: {
+			borderInlineStartWidth: "hairline",
+			borderTopWidth: "hairline"
+		},
+		closeTrigger: {
+			...interactive(),
+			_hover: { color: "fg" },
+			alignItems: "center",
+			borderRadius: "l1",
+			color: "fg.muted",
+			display: "inline-flex",
+			insetBlockStart: "0",
+			insetInlineEnd: "0",
+			justifyContent: "center",
+			position: "absolute"
+		},
+		content: {
+			...motion("scale-fade.in", "scale-fade.out"),
+			_focusVisible: { focusVisibleRing: "outside" },
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.sm}"),
+			minInlineSize: "var(--reference-width)",
+			position: "relative",
+			transformOrigin: "var(--transform-origin)",
+			zIndex: "popover"
+		},
+		description: { color: "fg.muted" },
+		indicator: {
+			_motionReduce: { transitionDuration: "0s" },
+			_open: { rotate: "180deg" },
+			transitionDuration: "press"
+		},
+		positioner: { position: "relative" },
+		root: { display: "contents" },
+		title: { paddingInlineEnd: `var(${CLOSED})` },
+		trigger: {
+			...interactive(),
+			alignItems: "center",
+			display: "inline-flex",
+			gap: dense("{spacing.gap.xs}")
+		}
+	},
+	className: "popover",
+	compoundVariants: [{
+		css: { title: { fontWeight: "semibold" } },
+		name: "titled",
+		size: [
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl"
+		]
+	}],
+	defaultVariants: {
+		size: "md",
+		variant: "surface"
+	},
+	jsx: [/^Popover(\.\w+)?$/u],
+	slots: [
+		"root",
+		"anchor",
+		"trigger",
+		"indicator",
+		"positioner",
+		"content",
+		"title",
+		"description",
+		"closeTrigger",
+		"arrow",
+		"arrowTip"
+	],
+	variants: {
+		/**
+		* Padding of the panel, text of the title and the description, and size of the close trigger.
+		*/
+		size: onSlots({
+			/**
+			* Close trigger: a square two sizes smaller on the control scale, with a mark one size
+			* smaller on the icon scale, inset from the panel's corner by the panel's padding.
+			*/
+			closeTrigger: sizeVariants((size) => ({
+				"& > svg": { boxSize: dense(`{sizes.icon.${below(size)}}`) },
+				boxSize: dense(`{sizes.control.${below(below(size))}}`),
+				insetBlockStart: dense(`{spacing.inset.${size}}`),
+				insetInlineEnd: dense(`{spacing.inset.${size}}`)
+			})),
+			content: sizeVariants((size) => ({
+				[CLOSED]: `calc(${dense(`{sizes.control.${below(below(size))}}`)} + ${dense(`{spacing.gap.${size}}`)})`,
+				padding: dense(`{spacing.inset.${size}}`)
+			})),
+			description: textSizes("body"),
+			title: textSizes("body")
+		}),
+		/**
+		* Surface of the panel: the popover surface inside a hairline edge, the panel surface with a
+		* large shadow, or the glass layer style.
+		*
+		* @remarks
+		*   The elevated panel has a transparent hairline edge, which forced colors paint in
+		*   `CanvasText`, so the panel keeps its outline where the shadow is not drawn.
+		*/
+		variant: {
+			elevated: {
+				arrowTip: { borderColor: "var(--popover-surface)" },
+				content: {
+					"--popover-surface": "colors.bg.panel",
+					background: "var(--popover-surface)",
+					borderColor: "transparent",
+					borderRadius: "l3",
+					borderStyle: "solid",
+					borderWidth: "hairline",
+					boxShadow: "xl"
+				}
+			},
+			glass: {
+				arrowTip: { borderColor: "border" },
+				content: {
+					layerStyle: "glass",
+					"--popover-surface": "colors.bg.popover",
+					borderRadius: "l3"
+				}
+			},
+			surface: {
+				arrowTip: { borderColor: "border" },
+				content: {
+					"--popover-surface": "colors.bg.popover",
+					background: "var(--popover-surface)",
+					borderColor: "border",
+					borderRadius: "l3",
+					borderWidth: "hairline",
+					boxShadow: "lg"
+				}
+			}
+		}
+	}
+});
+//#endregion
+//#region src/steps/recipe.ts
+/**
+* Recipe for the steps: a list of numbered discs with a title, the rules between them, the content
+* of the current step and the buttons that move between steps.
+*
+* @remarks
+*   The machine writes `data-orientation` on the root, the list, the items, the triggers and the
+*   rules, so a vertical flow is a column of steps beside the content and a horizontal flow is a
+*   row above it. The machine marks a disc and a rule with `data-complete`, `data-current` or
+*   `data-incomplete`, and the looks read those. The size writes the disc's side and the gap around
+*   it as custom properties on the root, which the rules read to meet the discs. A rule is a
+*   border, so forced colors paint it in `CanvasText`. The recipe has no `effect` axis, because
+*   the discs change on every step and an effect would move with them.
+*/
+/**
+* Sizes the recipe offers.
+*/
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Side of a disc, which the root sets per size.
+*/
+const DISC = "var(--steps-disc)";
+/**
+* Room between a disc and the rule beside it, which the root sets per size.
+*/
+const GUTTER = "var(--steps-gutter)";
+/**
+* Thickness of a rule and of an outlined disc's edge.
+*/
+const THICKNESS = "{borderWidths.indicator}";
+/**
+* Selects an item of a list that is too narrow for its steps with the titles beside the discs.
+*/
+const CROWDED_ITEM = "[data-crowded] > &";
+/**
+* Selects a trigger or a rule inside such a list.
+*/
+const CROWDED_PART = "[data-crowded] &";
+/**
+* Selects an item while the list measures its steps at their natural width.
+*/
+const MEASURED_ITEM = "[data-measuring] > &";
+/**
+* Lays an item out as a centred column of its disc over its words, for titles below the discs.
+*/
+const BELOW_ITEM = {
+	_last: { flex: "1 0 0" },
+	flexDirection: "column",
+	textAlign: "center"
+};
+/**
+* Runs a rule from the centre line of one disc to the next, one gutter clear of both, for titles
+* below the discs.
+*/
+const BELOW_SEPARATOR = {
+	insetBlockStart: `calc(${DISC} / 2 - ${THICKNESS} / 2)`,
+	insetInlineEnd: `calc(-50% + ${DISC} / 2 + ${GUTTER})`,
+	insetInlineStart: `calc(50% + ${DISC} / 2 + ${GUTTER})`,
+	marginInlineEnd: "0",
+	position: "absolute"
+};
+/**
+* Stacks a trigger's disc over its words, for titles below the discs.
+*/
+const BELOW_TRIGGER = {
+	flexDirection: "column",
+	textAlign: "center"
+};
+/**
+* Fills a completed disc with `Highlight` under forced colors, so it is distinct from the outlined
+* discs around it.
+*/
+const FORCED_COMPLETE = { _highContrast: {
+	background: "Highlight",
+	borderColor: "Highlight",
+	color: "HighlightText",
+	forcedColorAdjust: "none"
+} };
+/**
+* Rings the current disc with `Highlight` on `Canvas` under forced colors, so it is distinct from
+* the outlined discs of the later steps.
+*/
+const FORCED_CURRENT = { _highContrast: {
+	background: "Canvas",
+	borderColor: "Highlight",
+	borderStyle: "solid",
+	borderWidth: THICKNESS,
+	color: "CanvasText",
+	forcedColorAdjust: "none"
+} };
+/**
+* Defines the steps recipe: solid discs at size `md` in the neutral palette with the titles beside
+* them, by default.
+*/
+const recipe$4 = defineSlotRecipe({
+	base: {
+		content: {
+			_vertical: { flex: "1" },
+			minInlineSize: "0"
+		},
+		description: { color: "fg.muted" },
+		indicator: {
+			_highContrast: {
+				borderColor: "CanvasText",
+				borderStyle: "solid",
+				borderWidth: "hairline"
+			},
+			alignItems: "center",
+			blockSize: DISC,
+			borderRadius: "full",
+			display: "inline-flex",
+			flexShrink: "0",
+			fontVariantNumeric: "tabular-nums",
+			fontWeight: "medium",
+			inlineSize: DISC,
+			justifyContent: "center",
+			transitionDuration: "press",
+			transitionProperty: "common",
+			transitionTimingFunction: "press"
+		},
+		item: {
+			_horizontal: {
+				_last: { flex: "0 0 auto" },
+				alignItems: "center",
+				flex: "1 0 0",
+				[MEASURED_ITEM]: { flex: "0 0 auto" }
+			},
+			_vertical: { alignItems: "flex-start" },
+			display: "flex",
+			gap: GUTTER,
+			minInlineSize: "0",
+			position: "relative"
+		},
+		list: {
+			_horizontal: {
+				alignItems: "center",
+				flexDirection: "row"
+			},
+			_vertical: { flexDirection: "column" },
+			display: "flex",
+			listStyle: "none",
+			margin: "0",
+			padding: "0"
+		},
+		root: {
+			_horizontal: { flexDirection: "column" },
+			_vertical: { flexDirection: "row" },
+			display: "flex",
+			inlineSize: "full"
+		},
+		separator: {
+			_horizontal: {
+				borderBlockStartWidth: THICKNESS,
+				flex: "1",
+				marginInlineEnd: GUTTER,
+				minInlineSize: GUTTER
+			},
+			_vertical: {
+				borderInlineStartWidth: THICKNESS,
+				insetBlockEnd: GUTTER,
+				insetBlockStart: `calc(${DISC} + ${GUTTER})`,
+				insetInlineStart: `calc(${DISC} / 2 - ${THICKNESS} / 2)`,
+				position: "absolute"
+			},
+			borderColor: "border",
+			borderRadius: "full"
+		},
+		status: { srOnly: true },
+		title: {
+			"&[data-incomplete]": { color: "fg.muted" },
+			color: "fg",
+			fontWeight: "medium"
+		},
+		trigger: {
+			focusVisibleRing: "outside",
+			_disabled: { cursor: "disabled" },
+			alignItems: "center",
+			borderRadius: "l2",
+			cursor: "button",
+			display: "flex",
+			focusRingColor: "colorPalette.focusRing",
+			gap: GUTTER,
+			minInlineSize: "0",
+			textAlign: "start",
+			userSelect: "none"
+		}
+	},
+	className: "steps",
+	defaultVariants: {
+		labelPlacement: "beside",
+		palette: "neutral",
+		size: "md",
+		variant: "solid"
+	},
+	jsx: [/^Steps(\.\w+)?$/u],
+	slots: [
+		"root",
+		"list",
+		"item",
+		"trigger",
+		"indicator",
+		"title",
+		"status",
+		"description",
+		"separator",
+		"content",
+		"nextTrigger",
+		"prevTrigger"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Place of the titles in a horizontal flow: beside each disc, or centred below it.
+		*
+		* @remarks
+		*   Below, every item takes an equal share of the row and stacks its disc over its words in a
+		*   centred column, with a trigger or without one, and each rule runs from one disc to the next
+		*   across the gap between the items, one gutter clear of both. Beside falls back to below
+		*   while the list is too narrow for its steps at their natural width, which the list measures
+		*   and marks with `data-crowded`. A vertical flow keeps the titles beside the discs either
+		*   way.
+		*/
+		labelPlacement: {
+			below: {
+				item: { _horizontal: BELOW_ITEM },
+				separator: { _horizontal: BELOW_SEPARATOR },
+				trigger: { _horizontal: BELOW_TRIGGER }
+			},
+			beside: {
+				item: { _horizontal: { [CROWDED_ITEM]: BELOW_ITEM } },
+				separator: { _horizontal: { [CROWDED_PART]: BELOW_SEPARATOR } },
+				trigger: { _horizontal: { [CROWDED_PART]: BELOW_TRIGGER } }
+			}
+		},
+		/**
+		* Palette the discs and the completed rules read, set on the root.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Size of the discs on the control scale, the titles, the descriptions and the room around
+		* them.
+		*
+		* @remarks
+		*   The discs measure 36, 40 and 44px. An icon in a disc is on the icon scale one step below
+		*   the size. In a vertical flow every item but the last leaves two insets below its trigger,
+		*   so the rule under a disc with a title and a description is 21px long at `md`.
+		*/
+		size: onSlots({
+			description: sizeVariants((size) => ({ textStyle: `body.${below(size)}` }), SIZES),
+			indicator: sizeVariants((size) => ({
+				textStyle: `label.${size}`,
+				"& > svg": { boxSize: dense(`{sizes.icon.${below(size)}}`) }
+			}), SIZES),
+			item: sizeVariants((size) => ({ _vertical: {
+				_last: { paddingBlockEnd: "0" },
+				paddingBlockEnd: dense(`calc({spacing.inset.${size}} * 2)`)
+			} }), SIZES),
+			root: sizeVariants((size) => ({
+				"--steps-disc": dense(`{sizes.control.${size}}`),
+				"--steps-gutter": dense(`{spacing.gap.${size}}`),
+				gap: dense(`{spacing.inset.${size}}`)
+			}), SIZES),
+			title: sizeVariants((size) => ({ textStyle: `label.${size}` }), SIZES)
+		}),
+		/**
+		* Look of the discs and of the rules between completed steps.
+		*
+		* @remarks
+		*   `solid` outlines a later step's disc, rings the current disc and fills a completed one with
+		*   the palette's solid color. `subtle` fills every disc from the palette: its subtle role for
+		*   a later step, its muted role for a completed one and its emphasized role for the current
+		*   one. The three roles step away from the page in both color modes, so the current disc is
+		*   the strongest by day and after dark.
+		*/
+		variant: {
+			solid: {
+				indicator: {
+					"&[data-complete]": {
+						...FORCED_COMPLETE,
+						background: "colorPalette.solid",
+						borderColor: "colorPalette.solid",
+						borderStyle: "solid",
+						borderWidth: THICKNESS,
+						color: "colorPalette.contrast"
+					},
+					"&[data-current]": {
+						...FORCED_CURRENT,
+						background: "colorPalette.subtle",
+						borderColor: "colorPalette.solid",
+						borderStyle: "solid",
+						borderWidth: THICKNESS,
+						color: "colorPalette.fg"
+					},
+					"&[data-incomplete]": {
+						borderColor: "border",
+						borderStyle: "solid",
+						borderWidth: THICKNESS,
+						color: "fg.muted"
+					}
+				},
+				separator: { "&[data-complete]": {
+					_highContrast: {
+						borderColor: "Highlight",
+						forcedColorAdjust: "none"
+					},
+					borderColor: "colorPalette.solid"
+				} }
+			},
+			subtle: {
+				indicator: {
+					"&[data-complete]": {
+						...FORCED_COMPLETE,
+						background: "colorPalette.muted",
+						color: "colorPalette.fg"
+					},
+					"&[data-current]": {
+						...FORCED_CURRENT,
+						background: "colorPalette.emphasized",
+						color: "colorPalette.fg"
+					},
+					"&[data-incomplete]": {
+						background: "colorPalette.subtle",
+						color: "fg.muted"
+					}
+				},
+				separator: { "&[data-complete]": {
+					_highContrast: {
+						borderColor: "Highlight",
+						forcedColorAdjust: "none"
+					},
+					borderColor: "colorPalette.emphasized"
+				} }
+			}
+		}
+	}
+});
+//#endregion
+//#region src/tabs/recipe.ts
+/**
+* Recipe for the tabs: a list of tabs, the panel of each, and the indicator under the selected
+* tab.
+*
+* @remarks
+*   The orientation is the machine's option, not an axis. The machine sets `data-orientation` on
+*   every part, so the list turns into a column and the line indicator moves to the inline edge
+*   without a second prop. The machine measures the selected tab into `--width` and `--height` and
+*   positions the indicator, so the recipe sets its size and fill and never its position. Every
+*   tab sits over the indicator, so a filled indicator does not cover the tab's text. The palette
+*   is set on the root, and the line and subtle looks read it. The recipe has no `effect` axis,
+*   because the indicator moves on every selection, and a glow would move with it.
+*/
+/**
+* Sizes an indicator that fills the selected tab to the tab's measured width and height.
+*
+* @remarks
+*   A line indicator takes one of the two and its own stroke for the other. A filled indicator
+*   takes both. Without them it collapsed to nothing and left the selected tab unmarked.
+*/
+const FILLED = {
+	height: "var(--height)",
+	width: "var(--width)"
+};
+/**
+* Places a line indicator under the selected tab, or at its inline start in a vertical list.
+*/
+const BAR = {
+	_horizontal: {
+		bottom: "0",
+		height: "{borderWidths.indicator}",
+		width: "var(--width)"
+	},
+	_vertical: {
+		height: "var(--height)",
+		insetInlineStart: "0",
+		width: "{borderWidths.indicator}"
+	}
+};
+/**
+* Paints a bar in the system's selection colour under forced colors.
+*
+* @remarks
+*   Forced colors replace every author background with `Canvas`, so a filled bar vanishes and the
+*   selected tab keeps no mark. A system colour with `forcedColorAdjust: none` keeps the bar.
+*/
+const FORCED_BAR = {
+	background: "Highlight",
+	forcedColorAdjust: "none"
+};
+/**
+* Defines the tabs recipe: a line of tabs at size `md` by default.
+*/
+const recipe$3 = defineSlotRecipe({
+	base: {
+		closeTrigger: {
+			_hover: {
+				background: "colorPalette.muted",
+				color: "fg"
+			},
+			"& > svg": {
+				blockSize: "1em",
+				inlineSize: "1em"
+			},
+			alignItems: "center",
+			borderRadius: "l1",
+			color: "fg.muted",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			marginInline: "calc((1em - {sizes.6}) / 2)",
+			minBlockSize: "6",
+			minInlineSize: "6"
+		},
+		content: {
+			_focusVisible: { focusVisibleRing: "outside" },
+			outline: "none"
+		},
+		indicator: {
+			borderRadius: "l1",
+			pointerEvents: "none",
+			zIndex: "0"
+		},
+		list: {
+			_horizontal: { flexDirection: "row" },
+			_vertical: { flexDirection: "column" },
+			display: "flex",
+			position: "relative"
+		},
+		root: {
+			_horizontal: { flexDirection: "column" },
+			_vertical: { flexDirection: "row" },
+			display: "flex",
+			width: "full"
+		},
+		trigger: {
+			...interactive(),
+			_disabled: { cursor: "disabled" },
+			_vertical: { justifyContent: "flex-start" },
+			"& > svg": {
+				blockSize: "1em",
+				flexShrink: "0",
+				inlineSize: "1em"
+			},
+			alignItems: "center",
+			display: "inline-flex",
+			justifyContent: "center",
+			position: "relative",
+			whiteSpace: "nowrap",
+			zIndex: "1"
+		}
+	},
+	className: "tabs",
+	defaultVariants: {
+		size: "md",
+		variant: "line"
+	},
+	jsx: [/^Tabs(\.\w+)?$/u],
+	slots: [
+		"root",
+		"list",
+		"trigger",
+		"closeTrigger",
+		"content",
+		"indicator"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Whether the tabs share the list's width equally.
+		*/
+		fitted: { true: { trigger: { flex: "1" } } },
+		/**
+		* Distribution of the tabs in a list wider than they are.
+		*/
+		justify: onSlot("list", justifyVariants()),
+		/**
+		* Palette of the line indicator, the subtle indicator and the selected tab's text, set on the
+		* root.
+		*/
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* Size of the tabs on the control scale and the panel's padding on the inset scale.
+		*/
+		size: onSlots({
+			content: insetSizes(),
+			trigger: controlSizes()
+		}),
+		/**
+		* Look of the list and the indicator of the selected tab.
+		*/
+		variant: {
+			enclosed: {
+				indicator: {
+					...FILLED,
+					background: "bg.panel",
+					borderColor: "border",
+					borderWidth: "hairline"
+				},
+				list: {
+					background: "bg.muted",
+					borderRadius: "l2",
+					padding: dense("{spacing.inset.xs}")
+				},
+				trigger: {
+					_selected: { color: "fg" },
+					borderRadius: "l1",
+					color: "fg.muted"
+				}
+			},
+			line: {
+				indicator: {
+					...BAR,
+					_highContrast: FORCED_BAR,
+					background: "colorPalette.solid"
+				},
+				list: {
+					_horizontal: {
+						borderBlockEndColor: "border",
+						borderBlockEndWidth: "hairline"
+					},
+					_vertical: {
+						borderInlineEndColor: "border",
+						borderInlineEndWidth: "hairline"
+					}
+				},
+				trigger: {
+					_hover: { color: "fg" },
+					_selected: { color: "colorPalette.fg" },
+					color: "fg.muted"
+				}
+			},
+			plain: {
+				indicator: {
+					...BAR,
+					_highContrast: {
+						...FORCED_BAR,
+						display: "block"
+					},
+					display: "none"
+				},
+				trigger: {
+					_selected: { color: "fg" },
+					color: "fg.muted"
+				}
+			},
+			subtle: {
+				indicator: {
+					...FILLED,
+					_highContrast: {
+						outlineColor: "Highlight",
+						outlineOffset: "calc({borderWidths.indicator} * -1)",
+						outlineStyle: "solid",
+						outlineWidth: "{borderWidths.indicator}"
+					},
+					background: "colorPalette.subtle",
+					borderRadius: "l1"
+				},
+				trigger: {
+					_selected: { color: "colorPalette.fg" },
+					color: "fg.muted"
+				}
+			}
+		}
+	}
+});
+//#endregion
+//#region src/toggle-tip/recipe.ts
+/**
+* Recipe for the toggle tip: a short note that a press opens beside its trigger, with an arrow.
+*
+* @remarks
+*   The toggle tip looks like the tooltip and opens like the popover, so the recipe repeats the
+*   tooltip's looks and sizes and gives the trigger a control's cursor, focus ring and disabled
+*   look. The machine has no root part. The recipe adds a root with `display: contents`, because
+*   the trigger and the positioner are siblings and a slot recipe passes its variants from an
+*   element above both. The machine writes the positioner's position inline, so the recipe sets no
+*   position. The content takes the `tooltip` z-index, so a tip opened inside a popover renders
+*   above it, and reads the label role. It wraps at 20rem, or at the room the machine measures on
+*   its side of the trigger, `--available-width`, where that is less. A link inside the content
+*   takes the content's ink and an underline, because the link ink measures 1.71:1 in light mode
+*   and 1.38:1 in dark mode on the inverted surface of the ink theme. Each look sets
+*   `--toggle-tip-surface` once, and the arrow tip reads it. The inverted look has a transparent
+*   hairline edge, which forced colors paint in `CanvasText`. The recipe has no `palette` axis,
+*   because both looks use neutral surfaces, and no `effect` axis, because a note is not a
+*   control.
+*/
+/**
+* Defines the toggle tip recipe: an inverted tip at size `md` by default.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		arrow: {
+			"--arrow-background": "var(--toggle-tip-surface)",
+			"--arrow-size": "sizes.icon.xs"
+		},
+		arrowTip: {
+			borderInlineStartWidth: "hairline",
+			borderTopWidth: "hairline"
+		},
+		content: {
+			...motion("scale-fade.in", "scale-fade.out"),
+			"& a": {
+				color: "inherit",
+				textDecoration: "underline"
+			},
+			background: "var(--toggle-tip-surface)",
+			borderRadius: "l2",
+			boxShadow: "md",
+			fontWeight: "medium",
+			maxInlineSize: "min({sizes.xs}, var(--available-width, {sizes.xs}))",
+			textWrap: "pretty",
+			transformOrigin: "var(--transform-origin)",
+			zIndex: "tooltip"
+		},
+		positioner: { position: "relative" },
+		root: { display: "contents" },
+		trigger: {
+			...interactive(),
+			alignItems: "center",
+			display: "inline-flex"
+		}
+	},
+	className: "toggle-tip",
+	defaultVariants: {
+		size: "md",
+		variant: "inverted"
+	},
+	jsx: [/^ToggleTip(\.\w+)?$/u],
+	slots: [
+		"root",
+		"trigger",
+		"positioner",
+		"content",
+		"arrow",
+		"arrowTip"
+	],
+	variants: {
+		/**
+		* Padding of the content on the inset scale and its text on the label role.
+		*/
+		size: onSlot("content", sizeVariants((size) => ({
+			textStyle: `label.${size}`,
+			padding: dense(`{spacing.inset.${size}}`)
+		}))),
+		/**
+		* Surface of the content: the inverted surface, or the popover surface inside a hairline edge.
+		*/
+		variant: {
+			inverted: {
+				arrowTip: { borderColor: "var(--toggle-tip-surface)" },
+				content: {
+					"--toggle-tip-surface": "colors.bg.inverted",
+					borderColor: "transparent",
+					borderStyle: "solid",
+					borderWidth: "hairline",
+					color: "fg.inverted"
+				}
+			},
+			surface: {
+				arrowTip: { borderColor: "border" },
+				content: {
+					"--toggle-tip-surface": "colors.bg.popover",
+					borderColor: "border",
+					borderWidth: "hairline",
+					color: "fg"
+				}
+			}
+		}
+	}
+});
+//#endregion
+//#region src/tooltip/recipe.ts
+/**
+* Recipe for the tooltip: a short label beside its trigger, with an arrow.
+*
+* @remarks
+*   The machine has no root part. The recipe adds a root with `display: contents`, because the
+*   trigger and the positioner are siblings and a slot recipe passes its variants from an element
+*   above both. The machine measures the trigger and writes the positioner's position inline, so
+*   the recipe sets no position. The content scales from the `--transform-origin` the machine sets.
+*   The content takes the `tooltip` z-index. The machine writes `z-index: var(--z-index)` inline on
+*   the positioner from the content's computed value, so a z-index on the positioner has no effect.
+*   Each look sets `--tooltip-surface` once, and the arrow tip reads it. The content reads the
+*   label role and wraps at `maxWidth: xs`. The trigger has no styles, because the caller passes
+*   the control through `as`. The recipe has no `palette` axis, because both looks use neutral
+*   surfaces, and no `effect` axis, because a tooltip is not a control.
+*/
+/**
+* Defines the tooltip recipe: an inverted tooltip at size `md` by default.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		arrow: {
+			"--arrow-background": "var(--tooltip-surface)",
+			"--arrow-size": "sizes.icon.xs"
+		},
+		arrowTip: {
+			borderInlineStartWidth: "hairline",
+			borderTopWidth: "hairline"
+		},
+		content: {
+			...motion("scale-fade.in", "scale-fade.out"),
+			background: "var(--tooltip-surface)",
+			borderRadius: "l2",
+			boxShadow: "md",
+			fontWeight: "medium",
+			maxWidth: "xs",
+			textWrap: "pretty",
+			transformOrigin: "var(--transform-origin)",
+			zIndex: "tooltip"
+		},
+		positioner: { position: "relative" },
+		root: { display: "contents" }
+	},
+	className: "tooltip",
+	defaultVariants: {
+		size: "md",
+		variant: "inverted"
+	},
+	jsx: [/^Tooltip(\.\w+)?$/u],
+	slots: [
+		"root",
+		"trigger",
+		"positioner",
+		"content",
+		"arrow",
+		"arrowTip"
+	],
+	variants: {
+		/**
+		* Padding of the content on the inset scale and its text on the label role.
+		*/
+		size: onSlot("content", sizeVariants((size) => ({
+			textStyle: `label.${size}`,
+			padding: dense(`{spacing.inset.${size}}`)
+		}))),
+		/**
+		* Surface of the content: the inverted surface, or the popover surface inside a hairline edge.
+		*
+		* @remarks
+		*   The inverted content has a transparent hairline edge, which forced colors paint in
+		*   `CanvasText`, so the content keeps its outline where its fill turns into the page's.
+		*/
+		variant: {
+			inverted: {
+				arrowTip: { borderColor: "var(--tooltip-surface)" },
+				content: {
+					"--tooltip-surface": "colors.bg.inverted",
+					borderColor: "transparent",
+					borderStyle: "solid",
+					borderWidth: "hairline",
+					color: "fg.inverted"
+				}
+			},
+			surface: {
+				arrowTip: { borderColor: "border" },
+				content: {
+					"--tooltip-surface": "colors.bg.popover",
+					borderColor: "border",
+					borderWidth: "hairline",
+					color: "fg"
+				}
+			}
+		}
+	}
+});
+/**
+* Defines the truncate recipe.
+*/
+const recipe = defineRecipe({
+	base: {
+		focusVisibleRing: "outside",
+		lineClamp: "var(--truncate-lines, 1)",
+		minInlineSize: "0",
+		overflowWrap: "anywhere"
+	},
+	className: "truncate",
+	jsx: ["Truncate"]
+});
+//#endregion
+export { recipe$4 as a, MENU_DEPTH as c, recipe$8 as d, recipe$9 as f, recipe$3 as i, NESTED as l, recipe$11 as m, recipe$1 as n, recipe$5 as o, recipe$10 as p, recipe$2 as r, recipe$6 as s, recipe as t, recipe$7 as u };