@stealthscale/component-charts 0.1.0

package/dist/recipe-ZKqGhtpf.js

@@ -0,0 +1,1054 @@
+import { below, defineRecipe, defineSlotRecipe, dense, onSlots, ratioVariants, sizeVariants } from "@stealthscale/theme/authoring";
+//#region src/chart/placed.ts
+/**
+* Styles the lines, words and marks a chart places over its plot: a quadrant chart's dividing lines
+* and names, the words beside a scatter's points, a timeline's markers, an annotation's words and
+* the crosshair, and sizes a plot by its rows.
+*
+* @remarks
+*   The chart recipe spreads `PLACED` into its plot's styles and takes `ROWS_TALL` as its `rows`
+*   ratio. Each selector names the class its part renders with, so no rule applies to another
+*   chart's marks. The dividing lines are in the emphasized border ink and the quadrants' names in
+*   the label ink. A point's words are the ink inside a halo in the panel's color, and a marker's
+*   count is the black or white `contrast-color()` finds against the marker's color. An
+*   annotation's words are the label ink inside the same halo, and the crosshair takes the
+*   cursor's border ink.
+*/
+/**
+* Class a quadrant chart's two dividing lines take.
+*/
+const DIVISION = "chart-division";
+/**
+* Selects the line of each of a quadrant chart's dividing lines.
+*/
+const DIVISIONS = "& .chart-division .recharts-reference-line-line";
+/**
+* Class the name of a quadrant takes, written in its corner of the plot.
+*/
+const QUADRANT = "chart-quadrant";
+/**
+* Selects the names of a quadrant chart's quadrants.
+*/
+const QUADRANT_NAMES = "& .recharts-text.chart-quadrant";
+/**
+* Class the words beside a point take, such as a vendor's name on a quadrant chart.
+*/
+const POINT_LABEL = "chart-point-label";
+/**
+* Selects the words beside the points of a scatter.
+*/
+const POINT_LABELS = "& .recharts-text.chart-point-label";
+/**
+* Class a timeline's marker takes: a dot for one moment, or a pill with the count of a cluster.
+*/
+const MARKER = "chart-marker";
+/**
+* Custom property of a timeline marker's color, which fills the dot or the pill and which the
+* count's ink contrasts with.
+*/
+const MARKER_FILL = "--chart-marker";
+/**
+* Selects the dot or the pill of every timeline marker.
+*/
+const MARKER_SHAPES = "& .chart-marker > :is(circle, rect)";
+/**
+* Selects the count a timeline marker writes on its pill.
+*/
+const MARKER_COUNTS = "& .chart-marker > text";
+/**
+* Selects a timeline marker the chart selects on a press.
+*/
+const MARKER_PRESSES = "& .chart-marker[data-press]";
+/**
+* Class an annotation's mark takes: a moment's rule, a period's wash or a point's ring.
+*/
+const ANNOTATION = "chart-annotation";
+/**
+* Class the words of an annotation take.
+*/
+const ANNOTATION_LABEL = "chart-annotation-label";
+/**
+* Selects the words of every annotation.
+*/
+const ANNOTATION_LABELS = "& .recharts-text.chart-annotation-label";
+/**
+* Class the crosshair's guide takes.
+*/
+const CROSSHAIR = "chart-crosshair";
+/**
+* Selects the line of the crosshair's guide.
+*/
+const CROSSHAIR_LINE = "& .chart-crosshair .recharts-reference-line-line";
+/**
+* Custom property of the number of rows a plot at the `rows` ratio is tall, such as a timeline's
+* lanes.
+*/
+const ROWS = "--chart-rows";
+/**
+* Sizes a plot by its rows: a row of `sizes.10` per row and `sizes.12` for the axis under them.
+*/
+const ROWS_TALL = {
+	aspectRatio: "auto",
+	blockSize: "calc(var(--chart-rows, 1) * {sizes.10} + {sizes.12})"
+};
+/**
+* Styles of the lines, words and marks a chart places over its plot, which the plot spreads.
+*/
+const PLACED = {
+	[ANNOTATION_LABELS]: {
+		_highContrast: {
+			fill: "CanvasText",
+			stroke: "Canvas"
+		},
+		fill: "fg.muted",
+		paintOrder: "stroke",
+		pointerEvents: "none",
+		stroke: "bg.panel",
+		strokeLinejoin: "round",
+		strokeWidth: "ring",
+		textStyle: "body.xs"
+	},
+	[CROSSHAIR_LINE]: {
+		_highContrast: { stroke: "CanvasText" },
+		stroke: "border"
+	},
+	[DIVISIONS]: {
+		_highContrast: { stroke: "CanvasText" },
+		stroke: "border.emphasized"
+	},
+	[MARKER_COUNTS]: {
+		fill: "contrast-color(var(--chart-marker))",
+		fontWeight: "semibold",
+		pointerEvents: "none",
+		textStyle: "body.xs"
+	},
+	[MARKER_PRESSES]: { cursor: "button" },
+	[MARKER_SHAPES]: {
+		_highContrast: { stroke: "Canvas" },
+		fill: "var(--chart-marker)",
+		stroke: "bg.panel",
+		strokeWidth: "ring"
+	},
+	[POINT_LABELS]: {
+		_highContrast: {
+			fill: "CanvasText",
+			stroke: "Canvas"
+		},
+		fill: "fg",
+		paintOrder: "stroke",
+		pointerEvents: "none",
+		stroke: "bg.panel",
+		strokeLinejoin: "round",
+		strokeWidth: "ring",
+		textStyle: "body.xs"
+	},
+	[QUADRANT_NAMES]: {
+		_highContrast: { fill: "CanvasText" },
+		fill: "fg.muted",
+		fontWeight: "medium",
+		pointerEvents: "none",
+		textStyle: "body.xs"
+	}
+};
+//#endregion
+//#region src/chart/recipe.ts
+/**
+* Styles a chart's figure and parts, and restyles the classes recharts writes on its SVG with the
+* theme's tokens.
+*
+* @remarks
+*   Recharts writes its inks as presentation attributes: `#666` on tick labels, axis lines and tick
+*   marks, `#ccc` on grid lines, a polar radius axis and the cursor, `#fff` on dots, sectors and a
+*   funnel's trapezoids, `#808080` on a `Label`'s text. A CSS property applies over a presentation
+*   attribute, so the plot sets each from a role, and a `fill` or `stroke` a caller passes to an
+*   axis or a `Label` loses to it. Under forced colors neither Firefox nor Chromium replaces an SVG
+*   `fill` or `stroke`, so the series keep their colors, and the plot sets the ticks, the labels
+*   and the axis lines in `CanvasText` and the grid in `GrayText`. A bar's hairline edge in the
+*   panel's color parts the segments of a stack. A series the legend does not point at fades to the
+*   plot's `--chart-faded`. The band under the pointer and a hovered legend button fill with the
+*   neutral palette's `subtle`, which steps towards the ink in both modes, where a well such as
+*   `bg.muted` sinks below a dark panel. A pie's shares and a funnel's counts render in `fg` inside
+*   a halo in the panel's color, so they read on a mark of any color, and the pointer passes
+*   through them to the mark under them, which opens the tooltip. A treemap's tile hides a line of
+*   words it marks as wider than the tile, and a sunburst's gap takes no pointer and no edge. A
+*   flow, a sankey's band or a chord diagram's ribbon, rests at the backdrop opacity, lifts to the
+*   muted opacity while the tooltip is at the flow or at one of its nodes, and fades while the
+*   tooltip is at another mark, and so does the bar or the arc of a node the tooltip is not at. The
+*   tooltip's panel is transparent while it is empty, so a readout outside recharts' wrapper, such
+*   as a chord diagram's, shows only while it is at a mark and remains in the accessibility tree as
+*   a live region before it fills. A bar's target tick is the ink inside a halo in the panel's
+*   color, and the part of a bar's zones no zone covers fills like a track. A quadrant chart's
+*   dividing lines are in the emphasized border ink and its quadrants' names in the label ink. A
+*   point's words are the ink inside a halo in the panel's color, and a timeline marker's count is
+*   the black or white `contrast-color()` finds against the marker's color. The `rows` ratio sizes
+*   a plot by its rows, such as a timeline's lanes. The recipe has no `palette` or `effect` axis,
+*   because each series takes its own color and a chart is not a control.
+*/
+/**
+* Selects the tick labels of every cartesian and polar axis.
+*/
+const TICKS = "& .recharts-text:is(.recharts-cartesian-axis-tick-value, .recharts-polar-angle-axis-tick-value, .recharts-polar-radius-axis-tick-value)";
+/**
+* Selects the tick labels of a polar radius axis, which recharts writes on the ring they label,
+* over the rings and the polygons.
+*/
+const RADII = "& .recharts-text.recharts-polar-radius-axis-tick-value";
+/**
+* Class a sector takes as a track: the rest of a gauge's dial past the reading, and the part of
+* its range no zone covers.
+*/
+const TRACK = "chart-track";
+/**
+* Selects a track: the rest of a radial bar's full turn behind its ring, and a gauge's track.
+*
+* @remarks
+*   The selector names the sector's class and the track's class. Its specificity of three classes
+*   applies its forced edge over the panel-colored edge of every sector, whose `:is()` counts a
+*   class and a type.
+*/
+const TRACKS = "& .recharts-sector:is(.recharts-radial-bar-background-sector, .chart-track)";
+/**
+* Selects the line of every cartesian and polar axis and the tick marks along it.
+*/
+const AXES = "& :is(.recharts-cartesian-axis-line, .recharts-cartesian-axis-tick-line, .recharts-polar-angle-axis-line, .recharts-polar-angle-axis-tick-line, .recharts-polar-radius-axis-line)";
+/**
+* Selects the text of recharts' `Label`, which a reference line or an axis renders.
+*/
+const LABELS = "& .recharts-text.recharts-label";
+/**
+* Selects the lines of a cartesian grid, and the spokes and the ring paths of a polar one.
+*/
+const GRID = "& :is(.recharts-cartesian-grid line, .recharts-polar-grid line, .recharts-polar-grid path)";
+/**
+* Selects the band a bar chart renders behind the hovered category.
+*/
+const BAND = "& .recharts-rectangle.recharts-tooltip-cursor";
+/**
+* Selects the cursor line a line or area chart renders at the hovered category, and the cross a
+* scatter renders at the hovered point.
+*/
+const CURSOR = "& :is(.recharts-curve, .recharts-cross).recharts-tooltip-cursor";
+/**
+* Selects the white edges recharts renders around a dot, between a pie's sectors and between a
+* funnel's stages, and a scatter's points, whose edge keeps overlapping points apart.
+*
+* @remarks
+*   A reference dot is left out, because recharts edges it in its own `stroke`, such as an
+*   annotation's ring in its palette's chart color. The exclusion is inside `:where()`, so the rule
+*   keeps the specificity the chart's other edge rules are written against.
+*/
+const SEPARATED = "& :is(.recharts-active-dot circle, .recharts-dot:not(:where(.recharts-reference-dot-dot)), .recharts-sector, .recharts-symbols, .recharts-trapezoid)";
+/**
+* Selects every bar, whose edge parts the segments of a stack.
+*/
+const BARS = "& .recharts-bar-rectangle path";
+/**
+* Class a trend line takes, whose line fades with the series it summarises.
+*/
+const TREND = "chart-trend";
+/**
+* Class a treemap's tile takes, whose group takes its family's opacity.
+*/
+const TILE = "chart-tile";
+/**
+* Class a sunburst's gap takes: the arc a ring leaves where a leaf ends above it.
+*/
+const GAP = "chart-gap";
+/**
+* Selects a sunburst's gap, whose specificity applies over the panel-colored edge of every sector.
+*/
+const GAPS = "& .recharts-sector.chart-gap";
+/**
+* Class a flow takes at the backdrop opacity: a sankey's band, a stroke without a fill, or a chord
+* diagram's ribbon, a fill without a stroke.
+*/
+const FLOW = "chart-flow";
+/**
+* Class a node takes: a sankey's bar or a chord diagram's arc, with its words.
+*/
+const NODE = "chart-node";
+/**
+* Selects every flow of a sankey or a chord diagram.
+*/
+const FLOWS = "& .chart-flow";
+/**
+* Selects the flow the tooltip is at, and every flow of the node it is at.
+*/
+const LIT$1 = "& .chart-flow[data-trace=lit]";
+/**
+* Selects every other flow while the tooltip is at a mark.
+*/
+const DIMMED = "& .chart-flow[data-trace=dimmed]";
+/**
+* Selects the bar of every node of a sankey.
+*/
+const BARS_OF_NODES = "& .chart-node .recharts-rectangle";
+/**
+* Selects the bar or the arc of every node the tooltip is not at while it is at a mark.
+*/
+const IDLE = "& .chart-node[data-trace=dimmed] :is(.recharts-rectangle, .recharts-sector)";
+/**
+* Attribute a treemap's tile writes on a line of words wider than the tile, and a node on a line
+* of words that meets another node's, which the plot hides.
+*/
+const OVERFLOW$1 = "data-overflow";
+/**
+* Selects a line of words a treemap's tile or a node marks as not fitting.
+*/
+const OVERFLOWED = "& :is(.chart-tile, .chart-node) [data-overflow]";
+/**
+* Selects the painted paths of every line, area, bar, sector, polygon, point and trend line, and
+* every treemap tile, which take a series' opacity.
+*/
+const MARKS = "& :is(.recharts-line-curve, .recharts-area-area, .recharts-area-curve, .recharts-bar-rectangle path, .recharts-sector, .recharts-polygon, .recharts-symbols, .chart-trend .recharts-reference-line-line, .chart-tile)";
+/**
+* Class a `LabelList` gives each value it writes on a mark, a pie's share or a funnel's count,
+* which recharts writes on the `text` in place of `recharts-label`.
+*/
+const SHARE = "chart-share";
+/**
+* Selects the shares a pie writes on its slices and the counts a funnel writes on its stages.
+*/
+const SHARES = "& .recharts-text.chart-share";
+/**
+* Class a waterfall's connectors take: the dashed lines from each bar to the next at the running
+* total.
+*/
+const CONNECTOR = "chart-connector";
+/**
+* Selects the line of every connector.
+*/
+const CONNECTORS = "& .chart-connector .recharts-reference-line-line";
+/**
+* Class a box's whiskers and their caps take, in the chart and in its key.
+*/
+const WHISKER = "chart-whisker";
+/**
+* Class a box's median line and a violin's median point take, in the chart and in its key.
+*/
+const MEDIAN = "chart-median";
+/**
+* Class a violin's quartile bar takes, in the chart and in its key.
+*/
+const QUARTILES = "chart-quartiles";
+/**
+* Class an outlier's point takes, in the chart and in its key.
+*/
+const OUTLIER = "chart-outlier";
+/**
+* Class a bar's target tick takes, in the chart and in its key.
+*/
+const TARGET = "chart-target";
+/**
+* Selects the part of a bar's zones no zone covers, a rectangle with the track's class.
+*/
+const BAND_TRACKS = "& rect.chart-track";
+/**
+* Custom property of the opacity a series' marks take while the legend points at another series.
+*/
+const FADED = "--chart-faded";
+/**
+* Defines the chart recipe: a figure whose plot is as wide as the figure and as tall as its ratio,
+* by default the video ratio.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		caption: {
+			color: "fg.muted",
+			textStyle: "body.sm"
+		},
+		center: {
+			alignItems: "center",
+			display: "flex",
+			flexDirection: "column",
+			inset: "0",
+			justifyContent: "center",
+			pointerEvents: "none",
+			position: "absolute",
+			textAlign: "center"
+		},
+		centerLabel: {
+			color: "fg.muted",
+			textStyle: "body.xs"
+		},
+		centerValue: {
+			color: "fg",
+			fontVariantNumeric: "tabular-nums",
+			fontWeight: "semibold",
+			textStyle: "heading.md"
+		},
+		empty: {
+			alignItems: "center",
+			borderColor: "border",
+			borderRadius: "l2",
+			borderStyle: "dashed",
+			borderWidth: "hairline",
+			color: "fg.muted",
+			display: "flex",
+			inlineSize: "full",
+			justifyContent: "center",
+			padding: dense("{spacing.inset.md}"),
+			textAlign: "center",
+			textStyle: "body.sm"
+		},
+		glyph: {
+			"& > svg": {
+				blockSize: "full",
+				inlineSize: "full",
+				overflow: "visible"
+			},
+			boxSize: "icon.xs",
+			display: "inline-flex",
+			flexShrink: "0"
+		},
+		heading: {
+			color: "fg",
+			fontWeight: "medium"
+		},
+		item: {
+			_highContrast: { _hover: {
+				outlineColor: "CanvasText",
+				outlineStyle: "solid"
+			} },
+			_hover: { background: "neutral.subtle" },
+			"&[aria-pressed=false]": {
+				color: "fg.muted",
+				textDecorationLine: "line-through"
+			},
+			alignItems: "center",
+			background: "transparent",
+			borderRadius: "l1",
+			color: "fg",
+			cursor: "button",
+			display: "inline-flex",
+			focusRingColor: "border.focus",
+			focusVisibleRing: "outside",
+			gap: dense("{spacing.gap.sm}"),
+			["&[aria-pressed=false] .color-swatch"]: { opacity: "0.4" },
+			minBlockSize: "6",
+			paddingInline: dense("{spacing.inset.xs}"),
+			textStyle: "body.sm"
+		},
+		key: {
+			alignItems: "center",
+			color: "fg.muted",
+			columnGap: dense("{spacing.gap.md}"),
+			display: "flex",
+			flexWrap: "wrap",
+			listStyle: "none",
+			margin: "0",
+			padding: "0",
+			rowGap: dense("{spacing.gap.xs}"),
+			textStyle: "body.sm"
+		},
+		keyItem: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: dense("{spacing.gap.sm}")
+		},
+		legend: {
+			alignItems: "center",
+			borderWidth: "0",
+			columnGap: dense("{spacing.gap.md}"),
+			display: "flex",
+			flexWrap: "wrap",
+			margin: "0",
+			minInlineSize: "0",
+			padding: "0",
+			rowGap: dense("{spacing.gap.xs}")
+		},
+		name: {
+			color: "fg.muted",
+			flex: "1"
+		},
+		plot: {
+			...PLACED,
+			"& .recharts-surface": {
+				focusRingColor: "border.focus",
+				focusVisibleRing: "outside",
+				overflow: "visible"
+			},
+			[AXES]: {
+				_highContrast: { stroke: "CanvasText" },
+				stroke: "border"
+			},
+			[BAND]: { fill: "neutral.subtle" },
+			[BAND_TRACKS]: {
+				_highContrast: {
+					fill: "Canvas",
+					stroke: "GrayText"
+				},
+				fill: "neutral.subtle"
+			},
+			[BARS]: {
+				stroke: "bg.panel",
+				strokeWidth: "hairline"
+			},
+			[BARS_OF_NODES]: { transition: "opacity {durations.fast} {easings.out}" },
+			[CONNECTORS]: {
+				_highContrast: { stroke: "GrayText" },
+				stroke: "border.emphasized"
+			},
+			[CURSOR]: { stroke: "border" },
+			[DIMMED]: { opacity: "backdrop" },
+			[FADED]: "{opacity.backdrop}",
+			[FLOWS]: {
+				fillOpacity: "{opacity.backdrop}",
+				strokeOpacity: "{opacity.backdrop}",
+				transition: "fill-opacity {durations.fast} {easings.out}, stroke-opacity {durations.fast} {easings.out}, opacity {durations.fast} {easings.out}"
+			},
+			[GAPS]: {
+				pointerEvents: "none",
+				stroke: "none"
+			},
+			[GRID]: {
+				_highContrast: { stroke: "GrayText" },
+				stroke: "border.muted"
+			},
+			[IDLE]: { opacity: "muted" },
+			inlineSize: "full",
+			[LABELS]: {
+				_highContrast: { fill: "CanvasText" },
+				fill: "fg.muted",
+				textStyle: "body.xs"
+			},
+			[LIT$1]: {
+				fillOpacity: "{opacity.muted}",
+				strokeOpacity: "{opacity.muted}"
+			},
+			[MARKS]: { transition: "opacity {durations.fast} {easings.out}" },
+			minInlineSize: "0",
+			[OVERFLOWED]: { visibility: "hidden" },
+			position: "relative",
+			[RADII]: {
+				_highContrast: { stroke: "Canvas" },
+				dominantBaseline: "text-before-edge",
+				paintOrder: "stroke",
+				stroke: "bg.panel",
+				strokeLinejoin: "round",
+				strokeWidth: "ring"
+			},
+			[SEPARATED]: { stroke: "bg.panel" },
+			[SHARES]: {
+				_highContrast: {
+					fill: "CanvasText",
+					stroke: "Canvas"
+				},
+				fill: "fg",
+				fontWeight: "semibold",
+				paintOrder: "stroke",
+				pointerEvents: "none",
+				stroke: "bg.panel",
+				strokeLinejoin: "round",
+				strokeWidth: "ring",
+				textStyle: "body.xs"
+			},
+			[TICKS]: {
+				_highContrast: { fill: "CanvasText" },
+				fill: "fg.muted",
+				textStyle: "body.xs"
+			},
+			[TRACKS]: {
+				_highContrast: {
+					fill: "Canvas",
+					stroke: "GrayText"
+				},
+				fill: "neutral.subtle"
+			}
+		},
+		root: {
+			"& .chart-median": {
+				_highContrast: {
+					fill: "Canvas",
+					stroke: "CanvasText"
+				},
+				fill: "bg.panel",
+				stroke: "fg"
+			},
+			"& .chart-outlier": {
+				_highContrast: { fill: "Canvas" },
+				fill: "bg.panel"
+			},
+			"& .chart-quartiles": {
+				_highContrast: { fill: "CanvasText" },
+				fill: "fg"
+			},
+			"& .chart-target": {
+				_highContrast: {
+					fill: "CanvasText",
+					stroke: "Canvas"
+				},
+				fill: "fg",
+				paintOrder: "stroke",
+				stroke: "bg.panel",
+				strokeWidth: "ring"
+			},
+			"& .chart-whisker": {
+				_highContrast: { stroke: "CanvasText" },
+				stroke: "fg.muted"
+			},
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.md}"),
+			inlineSize: "full",
+			minInlineSize: "0"
+		},
+		row: {
+			alignItems: "center",
+			display: "flex",
+			gap: dense("{spacing.gap.sm}")
+		},
+		tooltip: {
+			_empty: { opacity: "0" },
+			background: "bg.popover",
+			borderColor: "border",
+			borderRadius: "l2",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			boxShadow: "lg",
+			color: "fg",
+			display: "grid",
+			gap: dense("{spacing.gap.xs}"),
+			minInlineSize: "40",
+			padding: dense("{spacing.inset.sm}"),
+			textAlign: "start",
+			textStyle: "body.sm"
+		},
+		value: {
+			color: "fg",
+			fontVariantNumeric: "tabular-nums",
+			fontWeight: "medium"
+		}
+	},
+	className: "chart",
+	defaultVariants: { ratio: "video" },
+	jsx: [/^Chart(\.\w+)?$/u],
+	slots: [
+		"root",
+		"plot",
+		"center",
+		"centerValue",
+		"centerLabel",
+		"empty",
+		"caption",
+		"legend",
+		"item",
+		"key",
+		"keyItem",
+		"glyph",
+		"tooltip",
+		"heading",
+		"row",
+		"name",
+		"value"
+	],
+	variants: { 
+	/**
+	* Aspect ratio of the plot and of the empty state in its place, one of the theme's ratios, or
+	* `rows` for a plot as tall as its rows.
+	*
+	* @remarks
+	*   Recharts measures the plot's box after the first render and renders nothing in a box 0
+	*   pixels high. The ratio gives the box its height before that measurement. At `rows` the box
+	*   is a row of `sizes.10` per row of `--chart-rows`, one unless stated, and `sizes.12` for the
+	*   axis, so a timeline of four lanes is 208px tall at any width.
+	*/
+ratio: onSlots({
+		empty: {
+			...ratioVariants(),
+			rows: ROWS_TALL
+		},
+		plot: {
+			...ratioVariants(),
+			rows: ROWS_TALL
+		}
+	}) }
+});
+//#endregion
+//#region src/heat/recipe.ts
+/**
+* Styles a heat grid, a table whose cells take a color from their values: the frame, the grid, its
+* headings and cells, the readout over a cell, and the key under the grid.
+*
+* @remarks
+*   The cells are 2px apart on the panel, so each reads as one block of color. A cell takes its
+*   fill from `--heat-fill`, which the component sets from the value, and keeps it under forced
+*   colors, where neither engine would otherwise keep a background color. A value printed in a
+*   cell is black or white, whichever `contrast-color()` picks against the fill, which measured at
+*   least 4.56:1 on every fill of the ten themes in both modes and both engines. A cell without a
+*   value has no fill and a dashed edge, and a cell without a reading in a sparse grid has neither.
+*   The cell the readout shows takes an outline in the ink, inside its edge, and a cell with focus
+*   takes the focus ring outside it, over the gap. The headings of the row and the column the
+*   readout shows fill with the neutral palette's `subtle`. The row headings are sticky at the
+*   grid's start while it scrolls sideways, and their words and the corner's align to their end,
+*   beside the cells. Next to squares the row headings take no height of their own, so the rows are
+*   as far apart as the columns. A group's words start at its first column and are placed out of
+*   the table's layout, so a group never widens its columns, and they are transparent with
+*   `data-overflow`. The readout is placed above its cell at `--heat-x` and `--heat-y`, or below it
+*   with `data-side="bottom"`, and takes no pointer. The key aligns to the grid's end, and its bar
+*   runs the scale's colors from `--heat-ramp` from the reading start. The recipe has no `palette`
+*   or `effect` axis, because the values set the colors and a grid is not a control.
+*/
+/**
+* Sizes the grid offers.
+*/
+const SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Attribute the cell the readout shows writes, which the recipe outlines.
+*/
+const SHOWN = "data-readout";
+/**
+* Custom property of a cell's fill.
+*/
+const FILL = "--heat-fill";
+/**
+* Custom property of the colors of the key's bar, from its start to its end.
+*/
+const RAMP = "--heat-ramp";
+/**
+* Custom property of the readout's horizontal middle, from the frame's start.
+*/
+const READOUT_X = "--heat-x";
+/**
+* Custom property of the edge of the cell the readout is placed against, from the frame's top.
+*/
+const READOUT_Y = "--heat-y";
+/**
+* Attribute a heading writes while the readout shows a cell in its row or its column.
+*/
+const LIT = "data-lit";
+/**
+* Attribute the readout writes while its cell is out of the scroll area's view, which hides it.
+*/
+const CLIPPED = "data-clipped";
+/**
+* Attribute a group's words write while they are wider than the group, which hides them from sight.
+*/
+const OVERFLOW = "data-overflow";
+/**
+* Room between two cells, which the table also leaves around its outer cells.
+*/
+const SPACING = "{spacing.0.5}";
+/**
+* Custom property of a block cell's height and least width, which the size sets.
+*/
+const BLOCK = "--heat-block";
+/**
+* Custom property of a square cell's side, which the size sets.
+*/
+const SQUARE = "--heat-square";
+/**
+* Maps each size to the grid step of a block cell's height and least width.
+*/
+const BLOCKS = {
+	lg: "11",
+	md: "8",
+	sm: "6"
+};
+/**
+* Maps each size to the grid step of a square cell's side.
+*/
+const SQUARES = {
+	lg: "6",
+	md: "3.5",
+	sm: "2.5"
+};
+/**
+* Styles every cell: a fill from the value, a transparent edge a missing value dashes, the outline
+* of the cell the readout shows and the focus ring.
+*/
+const CELL = {
+	_focusVisible: { outlineOffset: "0" },
+	_highContrast: {
+		"&[data-state=missing]": { borderColor: "GrayText" },
+		[`&[${SHOWN}]`]: { outlineColor: "CanvasText" },
+		focusRingColor: "Highlight"
+	},
+	"&[data-state=missing]": {
+		borderColor: "border",
+		borderStyle: "dashed"
+	},
+	[`&[${SHOWN}]:not(:focus-visible)`]: {
+		outlineColor: "fg",
+		outlineOffset: "calc({borderWidths.indicator} * -1)",
+		outlineStyle: "solid",
+		outlineWidth: "indicator"
+	},
+	backgroundColor: `var(${FILL}, transparent)`,
+	borderColor: "transparent",
+	borderStyle: "solid",
+	borderWidth: "hairline",
+	focusRingColor: "border.focus",
+	focusVisibleRing: "outside",
+	forcedColorAdjust: "none",
+	padding: "0"
+};
+/**
+* Styles a heading the readout lights: the neutral palette's `subtle` fill and the full ink.
+*/
+const LIGHT = { [`&[${LIT}]`]: {
+	_highContrast: {
+		background: "Highlight",
+		color: "HighlightText",
+		forcedColorAdjust: "none"
+	},
+	background: "neutral.subtle",
+	color: "fg"
+} };
+/**
+* Defines the heat recipe: a grid of block cells 2px apart at size `md` by default.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		bar: {
+			_rtl: { backgroundImage: `linear-gradient(to left, var(${RAMP}))` },
+			backgroundImage: `linear-gradient(to right, var(${RAMP}))`,
+			blockSize: "2",
+			borderColor: "border",
+			borderRadius: "l1",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			forcedColorAdjust: "none"
+		},
+		cell: {
+			...CELL,
+			textAlign: "center",
+			verticalAlign: "middle",
+			whiteSpace: "nowrap"
+		},
+		columnHeading: {
+			...LIGHT,
+			"&:first-child": {
+				background: "bg.panel",
+				insetInlineStart: "0",
+				position: "sticky",
+				textAlign: "end",
+				zIndex: "1"
+			},
+			color: "fg.muted",
+			fontWeight: "normal",
+			paddingBlock: "0",
+			paddingInline: dense("{spacing.gap.xs}"),
+			textAlign: "center",
+			verticalAlign: "bottom",
+			whiteSpace: "nowrap"
+		},
+		frame: {
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.sm}"),
+			inlineSize: "fit",
+			maxInlineSize: "full",
+			minInlineSize: "0",
+			position: "relative"
+		},
+		grid: {
+			borderCollapse: "separate",
+			borderSpacing: SPACING
+		},
+		group: {
+			blockSize: "1lh",
+			color: "fg.muted",
+			fontWeight: "normal",
+			padding: "0",
+			position: "relative",
+			verticalAlign: "bottom"
+		},
+		groupLabel: {
+			[`&[${OVERFLOW}]`]: { opacity: "0" },
+			insetBlockEnd: "0",
+			insetInlineStart: "0",
+			pointerEvents: "none",
+			position: "absolute",
+			whiteSpace: "nowrap"
+		},
+		key: {
+			alignItems: "center",
+			alignSelf: "end",
+			color: "fg.muted",
+			columnGap: dense("{spacing.gap.sm}"),
+			display: "grid",
+			fontVariantNumeric: "tabular-nums",
+			gridTemplateColumns: "auto auto {sizes.40} auto",
+			inlineSize: "fit",
+			marginInlineEnd: SPACING,
+			rowGap: dense("{spacing.gap.xs}"),
+			textStyle: "body.xs"
+		},
+		keyLabel: {
+			color: "fg",
+			paddingInlineEnd: dense("{spacing.gap.xs}")
+		},
+		midpoint: {
+			gridColumn: "3",
+			gridRow: "2",
+			justifySelf: "center"
+		},
+		name: { srOnly: true },
+		readout: {
+			"&[data-side=bottom]": { translate: "-50% {spacing.gap.xs}" },
+			[`&[${CLIPPED}]`]: { visibility: "hidden" },
+			left: `var(${READOUT_X})`,
+			maxInlineSize: "full",
+			pointerEvents: "none",
+			position: "absolute",
+			top: `var(${READOUT_Y})`,
+			translate: "-50% calc(-100% - {spacing.gap.xs})",
+			zIndex: "docked"
+		},
+		rowHeading: {
+			...LIGHT,
+			background: "bg.panel",
+			color: "fg.muted",
+			fontWeight: "normal",
+			insetInlineStart: "0",
+			paddingBlock: "0",
+			paddingInline: dense("{spacing.gap.xs}"),
+			position: "sticky",
+			textAlign: "end",
+			whiteSpace: "nowrap",
+			zIndex: "1"
+		},
+		value: {
+			color: `contrast-color(var(${FILL}))`,
+			fontVariantNumeric: "tabular-nums",
+			paddingInline: dense("{spacing.gap.xs}")
+		}
+	},
+	className: "heat",
+	compoundVariants: [{
+		css: { rowHeading: { lineHeight: "0" } },
+		name: "squared",
+		shape: "square"
+	}],
+	defaultVariants: {
+		shape: "block",
+		size: "md"
+	},
+	jsx: [/^Heatmap$/u],
+	slots: [
+		"frame",
+		"grid",
+		"group",
+		"groupLabel",
+		"columnHeading",
+		"rowHeading",
+		"cell",
+		"value",
+		"name",
+		"readout",
+		"key",
+		"keyLabel",
+		"bar",
+		"midpoint"
+	],
+	variants: {
+		/**
+		* Shape of the cells: a block at least as wide as it is tall, which widens to a printed value,
+		* or a square with a 2px corner in every theme.
+		*/
+		shape: {
+			block: { cell: {
+				blockSize: `var(${BLOCK})`,
+				minInlineSize: `var(${BLOCK})`
+			} },
+			square: { cell: {
+				borderRadius: "xs",
+				boxSize: `var(${SQUARE})`,
+				minInlineSize: `var(${SQUARE})`
+			} }
+		},
+		/**
+		* Size of the cells and of the words in the grid: a block 24, 32 or 44px tall, a square 10, 14
+		* or 24px, and the headings and values one text size smaller than the size. A large square is a
+		* pointer target of the 24px WCAG 2.5.8 asks for.
+		*/
+		size: onSlots({
+			cell: sizeVariants((size) => ({
+				[BLOCK]: dense(`{sizes.${BLOCKS[size]}}`),
+				[SQUARE]: dense(`{sizes.${SQUARES[size]}}`)
+			}), SIZES),
+			columnHeading: sizeVariants((size) => ({ textStyle: `label.${below(size)}` }), SIZES),
+			group: sizeVariants((size) => ({ textStyle: `label.${below(size)}` }), SIZES),
+			rowHeading: sizeVariants((size) => ({ textStyle: `label.${below(size)}` }), SIZES),
+			value: sizeVariants((size) => ({ textStyle: `body.${below(size)}` }), SIZES)
+		})
+	}
+});
+//#endregion
+//#region src/spark/recipe.ts
+/**
+* Styles a spark, a run of values the size of a word: the box recharts renders the run in, and the
+* baseline across it.
+*
+* @remarks
+*   The box takes its size from the grid, four times as wide as it is tall: 64 by 16 pixels at
+*   `sm`, 96 by 24 at `md` and 128 by 32 at `lg`, times the density. `stretch` fills the
+*   container's width at the size's height. A baseline renders in the subtle ink, and in
+*   `CanvasText` under forced colors, where the run keeps its color because neither Firefox nor
+*   Chromium replaces an SVG `fill` or `stroke`. The recipe has no `palette` axis, because the run
+*   takes a palette through the component's `color`.
+*/
+/**
+* Selects the line of a baseline recharts renders across the run.
+*/
+const BASELINE = "& .recharts-reference-line line";
+/**
+* Maps each size to the grid step of its height.
+*/
+const HEIGHTS = {
+	lg: "8",
+	md: "6",
+	sm: "4"
+};
+/**
+* Maps each size to the grid step of its width.
+*/
+const WIDTHS = {
+	lg: "32",
+	md: "24",
+	sm: "16"
+};
+/**
+* Defines the spark recipe: an inline box at the middle size.
+*/
+const recipe = defineRecipe({
+	base: {
+		[BASELINE]: {
+			_highContrast: { stroke: "CanvasText" },
+			stroke: "fg.subtle"
+		},
+		display: "inline-flex",
+		flexShrink: "0",
+		verticalAlign: "middle"
+	},
+	className: "spark",
+	defaultVariants: { size: "md" },
+	jsx: [/^Spark(bar|line)$/u],
+	variants: {
+		/**
+		* Box on the grid, four times as wide as it is tall.
+		*/
+		size: sizeVariants((size) => ({
+			blockSize: dense(`{sizes.${HEIGHTS[size]}}`),
+			inlineSize: dense(`{sizes.${WIDTHS[size]}}`)
+		}), [
+			"sm",
+			"md",
+			"lg"
+		]),
+		/**
+		* Whether the box fills its container's width at the size's height.
+		*/
+		stretch: { true: {
+			display: "flex",
+			inlineSize: "full"
+		} }
+	}
+});
+//#endregion
+export { DIVISION as A, TRACK as C, ANNOTATION as D, recipe$2 as E, ROWS as F, MARKER_FILL as M, POINT_LABEL as N, ANNOTATION_LABEL as O, QUADRANT as P, TILE as S, WHISKER as T, OUTLIER as _, OVERFLOW as a, SHARE as b, READOUT_Y as c, CONNECTOR as d, FADED as f, NODE as g, MEDIAN as h, LIT as i, MARKER as j, CROSSHAIR as k, SHOWN as l, GAP as m, CLIPPED as n, RAMP as o, FLOW as p, FILL as r, READOUT_X as s, recipe as t, recipe$1 as u, OVERFLOW$1 as v, TREND as w, TARGET as x, QUARTILES as y };