@stealthscale/component-feedback 0.1.0 → 0.2.2

package/dist/recipe-CX1gSsN7.js

@@ -0,0 +1,1290 @@
+import { PALETTES, SERIES, axis, below, cornerVariants, defineRecipe, defineSlotRecipe, dense, flatVariants, iconSizes, interactive, motionVariants, onSlot, onSlots, paletteVariants, sizeVariants, statusEmitted, statusVariants, touchTarget } from "@stealthscale/theme/authoring";
+//#region src/alert/recipe.ts
+/**
+* Declares the alert slot recipe for a notice with an icon, a title, a description, trailing
+* controls and a close trigger.
+*
+* @remarks
+*   `status` sets `colorPalette` and nothing else, so it combines freely with `variant` and `size`
+*   and a theme retints every alert through the palettes. The title states the severity in words,
+*   because WCAG 1.4.1 rejects a status told by color alone. `variant` reads the `flat.*` layer
+*   styles, whose fill and ink are the pairs the contrast gate measures. The indicator and the
+*   close trigger inherit the root's ink, so a solid alert draws both in the contrast ink. The
+*   recipe has no `effect` axis, because `motion` already animates the root.
+*/
+/**
+* Sizes of the icon box and the root's gap, inset and text style.
+*/
+const SIZES$3 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Maps each edge to the border that draws it, in the palette's solid at the indicator width.
+*/
+const EDGES = {
+	bottom: {
+		borderBlockEndColor: "colorPalette.solid",
+		borderBlockEndWidth: "indicator"
+	},
+	end: {
+		borderInlineEndColor: "colorPalette.solid",
+		borderInlineEndWidth: "indicator"
+	},
+	top: {
+		borderBlockStartColor: "colorPalette.solid",
+		borderBlockStartWidth: "indicator"
+	}
+};
+/**
+* Looks whose layer style sets the `border-width` and `border-color` shorthands.
+*/
+const BORDERED = ["outline", "surface"];
+/**
+* Alert slot recipe, a subtle info notice at the md size by default.
+*
+* @remarks
+*   The indicator, the content and the trailing controls are centred on the notice's full height,
+*   so the icon aligns with the middle of a text block of any length.
+*/
+const recipe$8 = defineSlotRecipe({
+	base: {
+		aside: {
+			alignItems: "center",
+			display: "flex",
+			flex: "0 0 auto"
+		},
+		/**
+		* The close trigger is a square of 1.5em, at least 24px, with a 1em glyph. A negative end
+		* margin of half the box less the glyph puts the glyph on the padding edge, level with the
+		* indicator at the start: 12, 16 and 20px from the edge at `sm`, `md` and `lg`. Its focus ring
+		* is drawn inside, because a ring outside it falls on the alert's fill.
+		*/
+		closeTrigger: {
+			...interactive(),
+			...touchTarget(),
+			focusVisibleRing: "inside",
+			_hover: { background: "colorPalette.emphasized" },
+			"& > svg": { boxSize: "1em" },
+			alignItems: "center",
+			appearance: "none",
+			background: "transparent",
+			borderRadius: "l1",
+			borderStyle: "none",
+			boxSize: "max({sizes.6}, 1.5em)",
+			color: "currentcolor",
+			display: "inline-flex",
+			flex: "0 0 auto",
+			justifyContent: "center",
+			marginInlineEnd: "calc((1em - max({sizes.6}, 1.5em)) / 2)",
+			padding: "0"
+		},
+		content: {
+			display: "flex",
+			flex: "1",
+			minInlineSize: "0"
+		},
+		description: { color: "inherit" },
+		indicator: {
+			"& > svg": { boxSize: "100%" },
+			alignItems: "center",
+			display: "inline-flex",
+			flex: "0 0 auto"
+		},
+		/**
+		* The root draws a hairline outline in forced colors, where the browser replaces the fill and
+		* the solid, subtle and plain looks have no border to mark the box.
+		*/
+		root: {
+			_highContrast: {
+				outlineColor: "CanvasText",
+				outlineOffset: "calc({borderWidths.hairline} * -1)",
+				outlineStyle: "solid",
+				outlineWidth: "hairline"
+			},
+			alignItems: "center",
+			display: "flex",
+			inlineSize: "full"
+		},
+		title: { fontWeight: "medium" }
+	},
+	className: "alert",
+	compoundVariants: [
+		(
+		/**
+		* The close trigger on a solid alert hovers to a tint of the contrast ink and draws its focus
+		* ring in the contrast ink. The `emphasized` role is lighter than the solid fill, and the
+		* `focusRing` role is as dark as it.
+		*/
+		{
+			css: { closeTrigger: {
+				_hover: { background: "colorPalette.contrast/20" },
+				focusRingColor: "colorPalette.contrast"
+			} },
+			name: "contrasted",
+			variant: "solid"
+		}),
+		(
+		/**
+		* The outline and surface looks restate the edge. Their layer style sets the border shorthands
+		* in the `variant` axis, which the compiler emits after `edge` and which reset the edge's
+		* width and color.
+		*/
+		{
+			css: { root: EDGES.top },
+			edge: "top",
+			name: "edged-top",
+			variant: BORDERED
+		}),
+		{
+			css: { root: EDGES.bottom },
+			edge: "bottom",
+			name: "edged-bottom",
+			variant: BORDERED
+		},
+		{
+			css: { root: EDGES.end },
+			edge: "end",
+			name: "edged-end",
+			variant: BORDERED
+		}
+	],
+	defaultVariants: {
+		layout: "stacked",
+		radius: "l3",
+		size: "md",
+		status: "info",
+		variant: "subtle"
+	},
+	jsx: [/^Alert(\.\w+)?$/u],
+	slots: [
+		"root",
+		"indicator",
+		"content",
+		"title",
+		"description",
+		"aside",
+		"closeTrigger"
+	],
+	staticCss: [statusEmitted(), { status: ["neutral"] }],
+	variants: {
+		/**
+		* The edge with a rule in the palette's solid color. Unset by default.
+		*
+		* @remarks
+		*   The rule is a border on the root, so it follows the root's rounded corners, tapers into
+		*   the side border and shows under forced colors. The theme's `indicator.*` layer styles are
+		*   not used, because their bar is a 2px pseudo-element whose corner radius the browser scales
+		*   down to fit. `end` is logical: the right edge in a left-to-right document and the left edge
+		*   in a right-to-left one.
+		*/
+		edge: {
+			top: { root: EDGES.top },
+			bottom: { root: EDGES.bottom },
+			end: { root: EDGES.end }
+		},
+		/**
+		* Whether the title is above the description or on the same line with it.
+		*/
+		layout: {
+			inline: { content: {
+				alignItems: "baseline",
+				columnGap: dense("{spacing.gap.xs}"),
+				flexWrap: "wrap"
+			} },
+			stacked: { content: {
+				flexDirection: "column",
+				rowGap: dense("{spacing.gap.xs}")
+			} }
+		},
+		motion: onSlot("root", motionVariants([
+			"fade",
+			"rise",
+			"reveal"
+		])),
+		radius: onSlot("root", cornerVariants()),
+		size: onSlots({
+			indicator: iconSizes(SIZES$3),
+			root: sizeVariants((size) => ({
+				textStyle: `body.${size}`,
+				gap: dense(`{spacing.gap.${size}}`),
+				padding: dense(`{spacing.inset.${size}}`)
+			}), SIZES$3)
+		}),
+		/**
+		* The severity of the alert. It sets `colorPalette` and nothing else.
+		*/
+		status: {
+			...onSlot("root", statusVariants()),
+			neutral: { root: { colorPalette: "neutral" } }
+		},
+		/**
+		* The fill and edge of the alert, from the `flat.*` layer styles.
+		*/
+		variant: onSlot("root", flatVariants())
+	}
+});
+//#endregion
+//#region src/empty-state/recipe.ts
+/**
+* Declares the empty state slot recipe for the panel a surface renders when it has no content.
+*
+* @remarks
+*   `size` sets the panel's inset, the column's gap, the mark's box and the title's text style
+*   together. The mark is 32, 40 and 50px at `sm`, `md` and `lg`, above a 16, 18 and 20px title, so
+*   the mark is always larger than the title's line. The mark has twice the column's gap below it,
+*   so the title and the description read as one group. The description stays at `body.sm` at every
+*   size. The recipe has no `palette` axis, because the panel is muted, and no `effect` axis,
+*   because it has no fill or border.
+*/
+/**
+* Sizes the recipe offers.
+*/
+const SIZES$2 = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Maps each size to the gap step one size larger: 8, 12 and 16px.
+*/
+const GAPS = {
+	lg: "xl",
+	md: "lg",
+	sm: "md"
+};
+/**
+* Maps each size to the icon and inset step of the mark and the panel: 32, 40 and 50px marks in
+* 24, 32 and 40px of inset.
+*/
+const MARKS = {
+	lg: "3xl",
+	md: "2xl",
+	sm: "xl"
+};
+/**
+* Empty state slot recipe, at the md size by default.
+*/
+const recipe$7 = defineSlotRecipe({
+	base: {
+		content: {
+			alignItems: "center",
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			textAlign: "center"
+		},
+		description: {
+			textStyle: "body.sm",
+			color: "fg.muted"
+		},
+		indicator: {
+			"& svg": { boxSize: "100%" },
+			alignItems: "center",
+			color: "fg.muted",
+			display: "flex",
+			justifyContent: "center"
+		},
+		root: {
+			alignItems: "center",
+			display: "flex",
+			justifyContent: "center",
+			width: "full"
+		},
+		title: { fontWeight: "semibold" }
+	},
+	className: "empty-state",
+	defaultVariants: { size: "md" },
+	jsx: [/^EmptyState(\.\w+)?$/u],
+	slots: [
+		"root",
+		"content",
+		"indicator",
+		"title",
+		"description"
+	],
+	variants: { 
+	/**
+	* The inset of the panel, the gap in the column, the box of the mark and the title's text
+	* style.
+	*/
+size: onSlots({
+		content: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${GAPS[size]}}`) }), SIZES$2),
+		indicator: sizeVariants((size) => ({
+			boxSize: dense(`{sizes.icon.${MARKS[size]}}`),
+			marginBlockEnd: dense(`{spacing.gap.${GAPS[size]}}`)
+		}), SIZES$2),
+		root: sizeVariants((size) => ({ padding: dense(`{spacing.inset.${MARKS[size]}}`) }), SIZES$2),
+		title: sizeVariants((size) => ({ textStyle: `heading.${below(size)}` }), SIZES$2)
+	}) }
+});
+//#endregion
+//#region src/loader/recipe.ts
+/**
+* Declares the loader's slot recipe: a spinner beside its words, a spinner over content it hides,
+* and the overlay that covers a positioned container while it loads.
+*
+* @remarks
+*   With words, the root is an inline flex row, so the spinner and the words render on one line in
+*   any container. Over content, the root is an inline grid, and the hidden content and the
+*   spinner share its single cell. The spinner is centred on the content and the box has the
+*   content's size. The hidden content leaves the accessibility tree, so a visually hidden label
+*   replaces it. The loader has no box of its own and offers no `effect` axis. A caller who needs
+*   one passes a spinner with its own `effect`.
+*/
+/**
+* The recipe's class name, used to build the selector from the root to the content.
+*/
+const CLASS = "loader";
+/**
+* Writes the `palette` axis of the indicator: the palette's `solid` as the spinner's ink.
+*
+* @remarks
+*   The spinner inside is at `current`, so it draws in the indicator's ink. Without a palette the
+*   indicator inherits the surrounding ink, which keeps the spinner readable on a solid button.
+*/
+const tinted = axis(PALETTES, (palette) => ({
+	color: "colorPalette.solid",
+	colorPalette: palette
+}));
+/**
+* Styles the loader and its overlay, with a veiled overlay by default.
+*/
+const recipe$6 = defineSlotRecipe({
+	base: {
+		content: {
+			gridArea: "1 / 1",
+			visibility: "hidden"
+		},
+		indicator: {
+			alignItems: "center",
+			display: "inline-flex",
+			gridArea: "1 / 1"
+		},
+		label: { srOnly: true },
+		overlay: {
+			alignItems: "center",
+			borderRadius: "inherit",
+			display: "flex",
+			gap: "gap.sm",
+			inset: "0",
+			justifyContent: "center",
+			position: "absolute"
+		},
+		root: {
+			[`&:has(> .${CLASS}__content)`]: {
+				display: "inline-grid",
+				placeItems: "center"
+			},
+			alignItems: "center",
+			display: "inline-flex",
+			gap: "0.5em",
+			verticalAlign: "middle"
+		}
+	},
+	className: CLASS,
+	defaultVariants: { scrim: "veil" },
+	jsx: [/^Loader(Overlay)?$/u],
+	slots: [
+		"root",
+		"indicator",
+		"content",
+		"label",
+		"overlay"
+	],
+	variants: {
+		/**
+		* The spinner's ink, as a palette's `solid` role.
+		*/
+		palette: onSlot("indicator", tinted()),
+		/**
+		* The fill of the overlay over the content it covers.
+		*
+		* @remarks
+		*   `veil` fills the overlay with the panel color at 80% opacity. The covered content shows
+		*   through it faintly, and the spinner and its words have contrast against it. `glass` blurs
+		*   the content behind a 70% panel fill. `none` sets no fill.
+		*/
+		scrim: onSlot("overlay", {
+			glass: { layerStyle: "glass" },
+			none: { background: "transparent" },
+			veil: { background: "bg.panel/80" }
+		})
+	}
+});
+//#endregion
+//#region src/spinner/recipe.ts
+/**
+* Declares the spinner recipe, a ring whose arc turns while work of unknown length runs.
+*
+* @remarks
+*   The block start and inline end borders draw the arc and the other two draw the track, so the
+*   stroke is a border width and keeps its weight at every size. The turn is the foundation's
+*   `spin` animation style, which a theme retimes and which stops under reduced motion. Each border
+*   side is a longhand, so the compiled rule contains no shorthand that overrides a side. In forced
+*   colors the browser paints all four sides in `CanvasText`, transparent ones included, so
+*   `_highContrast` sets `forcedColorAdjust: none` and draws the arc in `CanvasText` itself.
+*/
+/**
+* Styles a spinner, defaulting to the medium icon size and the indicator stroke in the current
+* ink.
+*/
+const recipe$5 = defineRecipe({
+	base: {
+		animationStyle: "spin",
+		_highContrast: {
+			borderBlockEndColor: "transparent",
+			borderBlockStartColor: "CanvasText",
+			borderInlineEndColor: "CanvasText",
+			borderInlineStartColor: "transparent",
+			forcedColorAdjust: "none"
+		},
+		borderBlockEndColor: "transparent",
+		borderBlockStartColor: "currentcolor",
+		borderInlineEndColor: "currentcolor",
+		borderInlineStartColor: "transparent",
+		borderRadius: "full",
+		borderStyle: "solid",
+		color: "colorPalette.solid",
+		display: "inline-block",
+		flexShrink: "0",
+		position: "relative",
+		verticalAlign: "middle"
+	},
+	className: "spinner",
+	defaultVariants: {
+		palette: "current",
+		size: "md",
+		stroke: "indicator"
+	},
+	jsx: [/Spinner$/u],
+	variants: {
+		/**
+		* The halo drawn around the ring, in the palette's solid at half opacity.
+		*
+		* @remarks
+		*   `pulse` runs on `::after`, because its keyframe animates `box-shadow` through the
+		*   `animation` property, which the element already uses for the spin. Both effects stop
+		*   animating when the reader prefers reduced motion.
+		*/
+		effect: {
+			glow: { layerStyle: "glow.md" },
+			pulse: { _after: {
+				animationStyle: "pulse-glow",
+				borderRadius: "inherit",
+				boxShadowColor: "colorPalette.solid/50",
+				content: "\"\"",
+				inset: "0",
+				position: "absolute"
+			} }
+		},
+		/**
+		* The palette the arc is drawn in, as its `solid` role.
+		*
+		* @remarks
+		*   `current` draws the arc in the surrounding ink instead, so a spinner inside a solid button
+		*   takes the button's label ink.
+		*/
+		palette: {
+			...paletteVariants(),
+			current: { color: "currentcolor" }
+		},
+		size: {
+			...iconSizes(),
+			inherit: { boxSize: "1em" }
+		},
+		/**
+		* Border width of the ring. `hairline`, `control` and `indicator` read the theme's stroke
+		* tokens, and `heavy` reads the 4px `lg` width.
+		*/
+		stroke: {
+			control: { borderWidth: "control" },
+			hairline: { borderWidth: "hairline" },
+			heavy: { borderWidth: "lg" },
+			indicator: { borderWidth: "indicator" }
+		},
+		/**
+		* Whether the two track sides draw the ring behind the arc, in the palette's `muted` role.
+		*/
+		track: { true: {
+			_highContrast: {
+				borderBlockEndColor: "GrayText",
+				borderInlineStartColor: "GrayText"
+			},
+			borderBlockEndColor: "colorPalette.muted",
+			borderInlineStartColor: "colorPalette.muted"
+		} }
+	}
+});
+//#endregion
+//#region src/bar.ts
+/**
+* Styles a bar that fills a track to a value, which the progress recipe renders for the progress
+* bar and the meter.
+*
+* @remarks
+*   The root is a grid. The label starts the first row and the value ends it, and the track spans
+*   the row below, so a bar without words is the track alone. The `inline` layout puts the three on
+*   one row, with the track taking the room the words leave. The size is the track's thickness on
+*   the gap scale, 4, 6, 8, 12 and 16px from `xs` to `xl`, and the words keep the label style at
+*   every size. The range fills in the palette's solid. Under forced colors the range fills with
+*   `Highlight` and the track keeps a hairline `CanvasText` outline. Segments fill the track in the
+*   order they render, each in the theme's series color at its place unless it states a series
+*   color or a palette, and keep their colors under forced colors. A marker crosses the track at a
+*   value, 150% of its thickness, in the ink with a panel-colored edge.
+*/
+/**
+* Sizes the track offers.
+*/
+const SIZES$1 = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+/**
+* Custom property of a marker's place along the track, a percentage from the track's start.
+*/
+const MARKER = "--progress-marker";
+/**
+* Custom property of a segment's share of the track, a percentage.
+*/
+const SHARE = "--progress-share";
+/**
+* Attribute a segment writes the color it states to.
+*/
+const TINT = "data-color";
+/**
+* Width of a marker: the width of a line that indicates a state.
+*/
+const TICK = "{borderWidths.indicator}";
+/**
+* Styles each segment in the series color at its place: the first in `series.1`, the ninth in
+* `series.1` again.
+*
+* @remarks
+*   The rules are inside `:where()`, which counts nothing towards specificity, so a stated color
+*   applies over them whatever order the rules are written in.
+*/
+const PLACES = Object.fromEntries(SERIES.map((step) => [`&:where(:nth-of-type(${String(SERIES.length)}n + ${step}))`, { backgroundColor: `series.${step}` }]));
+/**
+* Styles a segment in the series color or the palette's solid it states.
+*/
+const STATED = Object.fromEntries([...SERIES.map((step) => [`&[${TINT}="series.${step}"]`, { backgroundColor: `series.${step}` }]), ...PALETTES.map((palette) => [`&[${TINT}=${palette}]`, {
+	backgroundColor: "colorPalette.solid",
+	colorPalette: palette
+}])]);
+/**
+* Styles the track in each look: the palette's muted role, or a muted ground with an inset line.
+*/
+const TRACKS$1 = {
+	outline: {
+		backgroundColor: "bg.muted",
+		boxShadow: "inset"
+	},
+	subtle: { backgroundColor: "colorPalette.muted" }
+};
+/**
+* Lists the looks in the order of the shared set of looks, loudest first.
+*/
+const LOOKS$1 = axis(["subtle", "outline"], (look) => TRACKS$1[look]);
+/**
+* Styles the root, the label, the value, the track, the range, the segments and the marker of a
+* bar.
+*/
+const BASE = {
+	label: {
+		textStyle: "label.sm",
+		color: "fg",
+		gridColumn: "1",
+		minInlineSize: "0",
+		overflowX: "clip",
+		overflowY: "visible",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	marker: {
+		_highContrast: {
+			backgroundColor: "CanvasText",
+			boxShadow: "0 0 0 {borderWidths.hairline} Canvas",
+			forcedColorAdjust: "none"
+		},
+		backgroundColor: "fg",
+		boxShadow: "0 0 0 {borderWidths.hairline} {colors.bg.panel}",
+		inlineSize: TICK,
+		insetBlock: "-25%",
+		insetInlineStart: `clamp(0%, calc(var(${MARKER}) - ${TICK} / 2), calc(100% - ${TICK}))`,
+		pointerEvents: "none",
+		position: "absolute"
+	},
+	range: {
+		_highContrast: {
+			backgroundColor: "Highlight",
+			color: "HighlightText",
+			forcedColorAdjust: "none"
+		},
+		_motionReduce: { transitionDuration: "0s" },
+		backgroundColor: "colorPalette.solid",
+		blockSize: "full",
+		borderRadius: "inherit",
+		position: "relative",
+		transitionDuration: "move",
+		transitionProperty: "width",
+		transitionTimingFunction: "move"
+	},
+	root: {
+		alignItems: "center",
+		columnGap: dense("{spacing.gap.sm}"),
+		display: "grid",
+		gridAutoFlow: "dense",
+		rowGap: dense("{spacing.gap.xs}")
+	},
+	segment: {
+		...PLACES,
+		...STATED,
+		_highContrast: { forcedColorAdjust: "none" },
+		_motionReduce: { transitionDuration: "0s" },
+		"&:first-of-type": {
+			borderEndStartRadius: "inherit",
+			borderStartStartRadius: "inherit"
+		},
+		"&:last-of-type": {
+			borderEndEndRadius: "inherit",
+			borderStartEndRadius: "inherit"
+		},
+		"& + &": { _highContrast: {
+			borderInlineStartColor: "Canvas",
+			borderInlineStartStyle: "solid",
+			borderInlineStartWidth: "hairline"
+		} },
+		blockSize: "full",
+		inlineSize: `var(${SHARE})`,
+		minInlineSize: "0",
+		transitionDuration: "move",
+		transitionProperty: "inline-size",
+		transitionTimingFunction: "move"
+	},
+	track: {
+		_highContrast: {
+			outlineColor: "CanvasText",
+			outlineOffset: "calc({borderWidths.hairline} * -1)",
+			outlineStyle: "solid",
+			outlineWidth: "hairline"
+		},
+		display: "flex",
+		minInlineSize: "0",
+		position: "relative"
+	},
+	valueText: {
+		textStyle: "label.sm",
+		color: "fg.muted",
+		fontVariantNumeric: "tabular-nums",
+		gridColumn: "-2 / -1",
+		justifySelf: "end",
+		whiteSpace: "nowrap"
+	}
+};
+/**
+* Offers the axes every bar takes: where the words go, the palette, the ends, the thickness and
+* the look of the track.
+*/
+const VARIANTS = {
+	/**
+	* Where the words go: above the track, or on its row at either end.
+	*/
+	layout: {
+		inline: {
+			root: { gridTemplateColumns: "auto minmax(0, 1fr) auto" },
+			track: { gridColumn: "2" }
+		},
+		stacked: {
+			root: { gridTemplateColumns: "minmax(0, 1fr) auto" },
+			track: { gridColumn: "1 / -1" }
+		}
+	},
+	palette: onSlot("root", paletteVariants()),
+	/**
+	* The ends of the track, which the range takes too.
+	*/
+	shape: onSlot("track", {
+		full: { borderRadius: "full" },
+		rounded: { borderRadius: "l1" },
+		square: { borderRadius: "none" }
+	}),
+	/**
+	* The thickness of the track.
+	*/
+	size: onSlot("track", sizeVariants((size) => ({ blockSize: dense(`{spacing.gap.${size}}`) }), SIZES$1)),
+	/**
+	* Fills the track with the palette's muted role, or with a muted ground and an inset line.
+	*/
+	variant: onSlot("track", LOOKS$1())
+};
+//#endregion
+//#region src/progress/recipe.ts
+/**
+* Styles a track, a range that fills it to the value, a label and the value in words, for the
+* progress bar and the meter.
+*
+* @remarks
+*   The bar's grid, its words, its track and its range come from `bar.ts`. The meter renders the
+*   same parts, so it takes the same classes and offers every axis but the stripes, their movement
+*   and the effect. Stripes are a band in the palette's contrast ink at a quarter strength over the
+*   range, and move at 40px a second. For a value the machine does not know, a segment of the range
+*   crosses the track once per 1.2s. For a reader who asked for less motion both stop, and the
+*   segment spreads over the whole track, so the bar never reads as a value it does not have.
+*/
+/**
+* Styles the stripes: a band at 45 degrees in the range's ink, repeated on a square tile.
+*/
+const STRIPES = {
+	backgroundImage: "linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 50%, currentColor 50%, currentColor 75%, transparent 75%, transparent)",
+	backgroundSize: "{sizes.4} {sizes.4}",
+	color: "colorPalette.contrast/25"
+};
+/**
+* Moves the stripes three tiles towards the start per 1.2s loop, 40px a second, and the loop has
+* no seam because it moves whole tiles.
+*
+* @remarks
+*   The `shimmer` motion moves a background and stops under reduced motion. Its pace is the slow
+*   ambient one, 5s. The stripes state the ambient pace where motion is allowed, because a pace
+*   stated beside the motion does not apply over it.
+*/
+const MOVING = {
+	animationStyle: "shimmer",
+	_motionSafe: { animationDuration: "ambient" },
+	"--animate-from": "calc({sizes.4} * 3)",
+	"--animate-to": "0"
+};
+/**
+* Moves a segment half the track's width from beyond its start to beyond its end once per 1.2s.
+*
+* @remarks
+*   The segment is a gradient in the palette's solid that fades out at both ends. Its position runs
+*   from -100% to 200% of the room it leaves, which puts it wholly outside the track at both ends
+*   of the loop.
+*/
+const SWEEP = {
+	animationStyle: "shimmer",
+	_highContrast: { color: "Highlight" },
+	_motionReduce: { backgroundSize: "100% 100%" },
+	_motionSafe: {
+		animationDuration: "ambient",
+		animationTimingFunction: "in-out"
+	},
+	_rtl: {
+		"--animate-from": "200%",
+		"--animate-to": "-100%"
+	},
+	"--animate-from": "-100%",
+	"--animate-to": "200%",
+	backgroundColor: "transparent",
+	backgroundImage: "linear-gradient(to right, transparent, currentColor, transparent)",
+	backgroundRepeat: "no-repeat",
+	backgroundSize: "50% 100%",
+	color: "colorPalette.solid",
+	inlineSize: "full"
+};
+/**
+* Styles a bar in the primary palette, in the outline look, at the middle size, with round ends.
+*/
+const recipe$4 = defineSlotRecipe({
+	base: {
+		...BASE,
+		range: {
+			...BASE.range,
+			"&[data-state=indeterminate]": SWEEP
+		}
+	},
+	className: "progress",
+	defaultVariants: {
+		layout: "stacked",
+		palette: "primary",
+		shape: "full",
+		size: "md",
+		variant: "outline"
+	},
+	jsx: [/^Progress\.\w+$/u, /^Meter\.\w+$/u],
+	slots: [
+		"root",
+		"label",
+		"valueText",
+		"track",
+		"range",
+		"segment",
+		"marker"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Moves the stripes, adding them where `striped` is not set.
+		*/
+		animated: { true: { range: {
+			...STRIPES,
+			...MOVING
+		} } },
+		/**
+		* The halo around the range, in the palette's solid.
+		*
+		* @remarks
+		*   `pulse` animates the halo on a layer over the range, because the range's own animation
+		*   moves its stripes. Both stop under reduced motion.
+		*/
+		effect: onSlot("range", {
+			glow: { layerStyle: "glow.sm" },
+			pulse: { _after: {
+				animationStyle: "pulse-glow",
+				borderRadius: "inherit",
+				boxShadowColor: "colorPalette.solid/50",
+				content: "\"\"",
+				inset: "0",
+				position: "absolute"
+			} }
+		}),
+		layout: VARIANTS.layout,
+		palette: VARIANTS.palette,
+		shape: VARIANTS.shape,
+		size: VARIANTS.size,
+		striped: { true: { range: STRIPES } },
+		variant: VARIANTS.variant
+	}
+});
+//#endregion
+//#region src/progress-circle/recipe.ts
+/**
+* Styles a ring whose range fills to the value, with the value in its middle and a label.
+*
+* @remarks
+*   The root is a grid as wide as its content, so the ring's column is as wide as the ring in any
+*   parent. The ring and the value text share one cell. The label takes the row below it or,
+*   inline, the column beside it. The size sets the `--size` and `--thickness` properties the
+*   machine's circles read: 24, 32, 40, 48 and 64px wide, and 4, 4, 4, 6 and 8px thick. From `md`
+*   up the value text takes the largest text style whose "100%" fits inside the ring. The recipe
+*   hides it at `xs` and `sm`. For a value the machine does not know, a quarter arc turns once per
+*   1.2s. Under reduced motion the ring stops and the range is a dashed line around the whole ring.
+*   Under forced colors the range strokes in `Highlight` and the track is a hairline `CanvasText`
+*   circle at the ring's outer edge.
+*/
+/**
+* Sizes the ring offers.
+*/
+const SIZES = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+/**
+* Maps each size to the sizes token the ring is as wide as: 24, 32, 40, 48 and 64px.
+*/
+const WIDTHS = {
+	lg: "12",
+	md: "10",
+	sm: "8",
+	xl: "16",
+	xs: "6"
+};
+/**
+* Maps each size to the gap token the ring is as thick as: 4, 4, 4, 6 and 8px.
+*/
+const THICKNESSES = {
+	lg: "sm",
+	md: "xs",
+	sm: "xs",
+	xl: "md",
+	xs: "xs"
+};
+/**
+* Maps each size to the value text's styles. `xs` and `sm` hide it. From `md` up it takes the
+* largest text style whose "100%" fits inside the hole: 32, 36 and 48px.
+*/
+const FIGURES = {
+	lg: { textStyle: "label.xs" },
+	md: { textStyle: "2xs" },
+	sm: { display: "none" },
+	xl: { textStyle: "label.md" },
+	xs: { display: "none" }
+};
+/**
+* Styles the track under forced colors as a hairline `CanvasText` circle at the ring's outer edge.
+*
+* @remarks
+*   The range is a thick `Highlight` arc, so the two differ in weight whatever the system colors
+*   are. The track's own `--thickness` sets both its stroke and its radius. Chromium's `Highlight`
+*   is translucent, so a track as thick as the arc would show through it.
+*/
+const FORCED = {
+	"--thickness": "{borderWidths.hairline}",
+	stroke: "CanvasText"
+};
+/**
+* Strokes the track in each look: the palette's muted role, or the muted ground. Each look states
+* the forced track, because a look applies over the base.
+*/
+const TRACKS = {
+	outline: {
+		_highContrast: FORCED,
+		stroke: "bg.muted"
+	},
+	subtle: {
+		_highContrast: FORCED,
+		stroke: "colorPalette.muted"
+	}
+};
+/**
+* Lists the looks in the order of the shared set of looks, loudest first.
+*/
+const LOOKS = axis(["subtle", "outline"], (look) => TRACKS[look]);
+/**
+* Defines the progress circle recipe, which defaults to the outline look at the middle size in the
+* primary palette, with round ends.
+*/
+const recipe$3 = defineSlotRecipe({
+	base: {
+		circle: {
+			_highContrast: { forcedColorAdjust: "none" },
+			"&[data-state=indeterminate]": { animationStyle: "spin" },
+			display: "block",
+			gridArea: "ring"
+		},
+		label: {
+			textStyle: "label.sm",
+			color: "fg",
+			gridArea: "label"
+		},
+		range: {
+			_highContrast: { stroke: "Highlight" },
+			_motionReduce: { transitionDuration: "0s" },
+			"&[data-state=indeterminate]": {
+				_motionReduce: { strokeDasharray: "var(--thickness) calc(var(--thickness) * 2)" },
+				strokeDasharray: "calc(var(--circumference) / 4) var(--circumference)"
+			},
+			stroke: "colorPalette.solid",
+			transitionDuration: "move",
+			transitionProperty: "stroke-dashoffset",
+			transitionTimingFunction: "move"
+		},
+		root: {
+			alignItems: "center",
+			columnGap: dense("{spacing.gap.sm}"),
+			display: "inline-grid",
+			inlineSize: "fit",
+			rowGap: dense("{spacing.gap.xs}")
+		},
+		track: { stroke: "bg.muted" },
+		valueText: {
+			alignSelf: "center",
+			color: "fg",
+			fontVariantNumeric: "tabular-nums",
+			fontWeight: "medium",
+			gridArea: "ring",
+			justifySelf: "center",
+			whiteSpace: "nowrap"
+		}
+	},
+	className: "progress-circle",
+	defaultVariants: {
+		layout: "stacked",
+		palette: "primary",
+		shape: "full",
+		size: "md",
+		variant: "outline"
+	},
+	jsx: [/^ProgressCircle\.\w+$/u],
+	slots: [
+		"root",
+		"label",
+		"circle",
+		"track",
+		"range",
+		"valueText"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* Where the label goes: under the ring, or beside it.
+		*/
+		layout: {
+			inline: { root: {
+				gridTemplateAreas: "\"ring label\"",
+				justifyItems: "start"
+			} },
+			stacked: { root: {
+				gridTemplateAreas: "\"ring\" \"label\"",
+				justifyItems: "center"
+			} }
+		},
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* The ends of the range.
+		*/
+		shape: onSlot("range", {
+			full: { strokeLinecap: "round" },
+			square: { strokeLinecap: "butt" }
+		}),
+		/**
+		* The ring's width and thickness, and the value text's style.
+		*/
+		size: onSlots({
+			root: sizeVariants((size) => ({
+				"--size": dense(`{sizes.${WIDTHS[size]}}`),
+				"--thickness": dense(`{spacing.gap.${THICKNESSES[size]}}`)
+			}), SIZES),
+			valueText: sizeVariants((size) => FIGURES[size], SIZES)
+		}),
+		/**
+		* Strokes the track in the palette's muted role, or in the muted ground.
+		*/
+		variant: onSlot("track", LOOKS())
+	}
+});
+//#endregion
+//#region src/skeleton-text/recipe.ts
+/**
+* Declares the recipe of the skeleton text column: one bar per line, spaced by half a line.
+*
+* @remarks
+*   Every length is in `lh`, the line height of the text the bars replace, so the placeholder
+*   takes the size of the text around it without an absolute length. Each bar is `1lh` tall and
+*   the column's gap is `0.5lh`. The gap is on the column and not a clipped inset on the bar,
+*   because the skeleton's `loading` variant sets `background` and `background-clip: padding-box`
+*   in the variants layer, which overrides any clip this base sets on a bar. With two or more bars
+*   the last is capped at 80% width, so the stack reads as a paragraph and not as a table.
+*/
+/**
+* Skeleton text recipe: a full-width flex column of line-height bars.
+*/
+const recipe$2 = defineRecipe({
+	base: {
+		"& > *": { blockSize: "1lh" },
+		"& > *:last-child:not(:only-child)": { maxWidth: "80%" },
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5lh",
+		width: "full"
+	},
+	className: "skeleton-text",
+	jsx: [/^SkeletonText$/u]
+});
+//#endregion
+//#region src/skeleton/recipe.ts
+/**
+* Declares the skeleton recipe, which paints a placeholder over content that is still loading.
+*
+* @remarks
+*   A skeleton wraps the content it covers, so a caller writes one tree and toggles `loading`.
+*   While loading, the element keeps the box of its content and hides everything inside it, so the
+*   placeholder has the content's size without a declared width. The fade-in is in the base,
+*   because the compiler emits no class for the `false` value of a boolean axis. Each motion is
+*   nested under the loading class, so a finished skeleton runs no animation. Every motion is a
+*   theme animation style, so the theme applies the reduced-motion preference once. The fill is the
+*   neutral palette's `muted` role, which is lighter than a dark page. Under forced colors the
+*   browser replaces the fill with Canvas, so a loading skeleton draws a `GrayText` hairline
+*   outline inside its box. An outline leaves the layout unchanged. The recipe has no `palette`
+*   axis, because a placeholder signals loading and not a category. It has no `effect` axis,
+*   because `motion` already animates it.
+*/
+/**
+* Selector for a skeleton that is loading, under which each motion nests its rules.
+*
+* @remarks
+*   The selector uses the compiler's variant class name, the axis and the value joined by `_`, so
+*   the naming plugin rewrites it together with the class.
+*/
+const WHILE_LOADING = "&.skeleton--loading_true";
+/**
+* Skeleton recipe, loading with the pulse motion at the l2 radius by default.
+*/
+const recipe$1 = defineRecipe({
+	base: { animationStyle: "fade.in" },
+	className: "skeleton",
+	defaultVariants: {
+		loading: true,
+		motion: "pulse",
+		radius: "l2"
+	},
+	jsx: [/^Skeleton$/u],
+	variants: {
+		/**
+		* Whether the content is still loading. `true` paints the placeholder and hides the content.
+		*/
+		loading: { true: {
+			_highContrast: {
+				outlineColor: "GrayText",
+				outlineOffset: "calc(-1 * {borderWidths.hairline})",
+				outlineStyle: "solid",
+				outlineWidth: "hairline"
+			},
+			"&::before, &::after, *": { visibility: "hidden" },
+			background: "colorPalette.muted",
+			backgroundClip: "padding-box",
+			boxShadow: "none",
+			color: "transparent",
+			colorPalette: "neutral",
+			flexShrink: "0",
+			pointerEvents: "none",
+			userSelect: "none"
+		} },
+		/**
+		* Animation of the placeholder while loading.
+		*/
+		motion: {
+			none: { [WHILE_LOADING]: { animation: "none" } },
+			pulse: { [WHILE_LOADING]: { animationStyle: "pulse" } },
+			shimmer: { [WHILE_LOADING]: {
+				animationStyle: "shimmer",
+				backgroundImage: "linear-gradient(270deg, var(--colors-color-palette-muted), var(--colors-color-palette-emphasized))",
+				backgroundSize: "400% 100%"
+			} }
+		},
+		radius: cornerVariants()
+	}
+});
+//#endregion
+//#region src/toast/recipe.ts
+/**
+* Recipe for the toast: a card raised into a corner of the window, with a mark, a title, a
+* description, an action and a close button.
+*
+* @remarks
+*   The machine places each toast in its region and writes the toast's motion as custom
+*   properties: `--x`, `--y`, `--scale`, `--opacity`, `--height` and `--z-index`. The root reads
+*   them and moves between them on the theme's `move` pace, and on the `leave` pace once it is
+*   dismissed. The toast's type sets `colorPalette`, `neutral` for `loading`, and the indicator
+*   renders the caller's glyph in the palette's solid. A focused toast shows the theme's focus
+*   ring outside its edge, in the palette's `focusRing` color. The root is at most `sizes.sm` wide
+*   and never wider than the window less the region's offsets. The recipe has no axes, because a
+*   toast has one look. A theme restyles it by extending the recipe.
+*/
+/**
+* Maps each type the machine writes on a toast to the palette the toast reads.
+*/
+const TYPES = {
+	error: "error",
+	info: "info",
+	loading: "neutral",
+	success: "success",
+	warning: "warning"
+};
+/**
+* Size of the close trigger's box: 1.5em, and never less than the 24px a target needs.
+*/
+const CLOSE = "max({sizes.6}, 1.5em)";
+/**
+* Defines the toast recipe.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		actionTrigger: {
+			...interactive(),
+			textStyle: "label.sm",
+			_hover: { background: "bg.muted" },
+			alignItems: "center",
+			alignSelf: "center",
+			background: "transparent",
+			borderColor: "border",
+			borderRadius: "l2",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			color: "fg",
+			display: "inline-flex",
+			flexShrink: "0",
+			fontWeight: "medium",
+			height: dense("{sizes.control.xs}"),
+			paddingInline: dense("{spacing.inset.sm}")
+		},
+		/**
+		* The close trigger centres on the first line of the title, and a negative end margin puts
+		* its glyph on the root's padding edge.
+		*/
+		closeTrigger: {
+			...interactive(),
+			...touchTarget(),
+			_hover: {
+				background: "bg.muted",
+				color: "fg"
+			},
+			"& > svg": { boxSize: "1em" },
+			alignItems: "center",
+			background: "transparent",
+			borderRadius: "l1",
+			borderStyle: "none",
+			boxSize: CLOSE,
+			color: "fg.muted",
+			display: "inline-flex",
+			flexShrink: "0",
+			justifyContent: "center",
+			marginBlock: `calc((1lh - ${CLOSE}) / 2)`,
+			marginInlineEnd: `calc((1em - ${CLOSE}) / 2)`,
+			padding: "0"
+		},
+		content: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.xs}"),
+			minInlineSize: "0"
+		},
+		description: { color: "fg.muted" },
+		indicator: {
+			"& > svg": { boxSize: "{sizes.icon.sm}" },
+			alignItems: "center",
+			blockSize: "1lh",
+			color: "colorPalette.solid",
+			display: "inline-flex",
+			flexShrink: "0"
+		},
+		region: {},
+		root: {
+			...Object.fromEntries(Object.entries(TYPES).map(([type, palette]) => [`&[data-type=${type}]`, { colorPalette: palette }])),
+			focusVisibleRing: "outside",
+			textStyle: "body.sm",
+			_closed: {
+				transitionDuration: "leave",
+				transitionTimingFunction: "leave"
+			},
+			_motionReduce: { transitionDuration: "0s" },
+			alignItems: "flex-start",
+			background: "bg.panel",
+			borderColor: "border",
+			borderRadius: "l3",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			boxShadow: "lg",
+			color: "fg",
+			display: "flex",
+			focusRingColor: "colorPalette.focusRing",
+			gap: dense("{spacing.gap.md}"),
+			height: "var(--height)",
+			inlineSize: "min({sizes.sm}, calc(100vw - var(--viewport-offset-left) - var(--viewport-offset-right)))",
+			opacity: "var(--opacity)",
+			padding: dense("{spacing.inset.md}"),
+			scale: "var(--scale)",
+			transitionDuration: "move",
+			transitionProperty: "translate, scale, opacity, height, box-shadow",
+			transitionTimingFunction: "move",
+			translate: "var(--x) var(--y)",
+			willChange: "translate, opacity, scale",
+			zIndex: "var(--z-index)"
+		},
+		title: { fontWeight: "medium" }
+	},
+	className: "toast",
+	jsx: [/^Toast(\.\w+)?$/u],
+	slots: [
+		"region",
+		"root",
+		"indicator",
+		"content",
+		"title",
+		"description",
+		"actionTrigger",
+		"closeTrigger"
+	]
+});
+//#endregion
+export { recipe$4 as a, TINT as c, recipe$7 as d, recipe$8 as f, recipe$3 as i, recipe$5 as l, recipe$1 as n, MARKER as o, recipe$2 as r, SHARE as s, recipe as t, recipe$6 as u };