@unpunnyfuns/swatchbook-blocks 0.57.1 → 0.58.0

package/dist/index.mjs

@@ -466,8 +466,7 @@ function useProject() {
 			cssVarPrefix: cssVarPrefix ?? "",
 			listing: listing ?? {},
 			varianceByPath: varianceByPath ?? {},
-			resolveAt,
-			themeNameForTuple: (tuple) => tupleToName(axes, tuple)
+			resolveAt
 		};
 	}, [
 		snapshot,
@@ -530,8 +529,7 @@ function useVirtualModuleFallback(enabled) {
 		cssVarPrefix: tokens.cssVarPrefix,
 		listing: tokens.listing,
 		varianceByPath: tokens.varianceByPath,
-		resolveAt,
-		themeNameForTuple: (tuple) => tupleToName(tokens.axes, tuple)
+		resolveAt
 	}), [
 		activeTheme,
 		activeAxes,
@@ -615,22 +613,38 @@ const BLOCK_ATTR = "data-swatchbook-block";
 const WRAPPER_CLASSES = "sb-unstyled sb-block";
 /**
 * Spread helper for the common block wrapper. Returns:
-* - `data-<prefix>-theme="<composed theme name>"` — so theme-keyed CSS
-*   emitted by `@unpunnyfuns/swatchbook-core` resolves against this
-*   subtree.
+* - One `data-<prefix>-<axisName>="<contextName>"` per axis in the tuple.
+*   These are what the smart CSS emitter actually targets — single-axis
+*   cell selectors (`[data-<prefix>-mode="Dark"]`) and joint compounds
+*   (`[data-<prefix>-mode="Dark"][data-<prefix>-brand="Brand A"]`).
+*   Wrapping a block subtree in these attrs lets the cascade resolve
+*   per-tuple values inside the block independently of the document
+*   root — `AxisVariance`'s grid uses this to render real per-cell
+*   swatches.
 * - `data-swatchbook-block` — stable consumer hook for targeting block
 *   chrome from outside.
 * - `className="sb-unstyled sb-block"` — Storybook's opt-out class so
 *   MDX docs house styles self-exclude the subtree, plus `sb-block`
 *   which carries the shared chrome from `internal/styles.css`.
 */
-function themeAttrs(prefix, themeName) {
+function themeAttrs(prefix, tuple) {
 	return {
-		[dataAttr(prefix, "theme")]: themeName,
+		...perAxisAttrs(prefix, tuple),
 		[BLOCK_ATTR]: "",
 		className: WRAPPER_CLASSES
 	};
 }
+/**
+* Spread helper for any element that wants per-axis cell semantics
+* without the block-wrapper chrome — `AxisVariance`'s grid uses this
+* on each swatch so the swatch's CSS vars resolve at the cell's own
+* tuple, not the document root's active tuple.
+*/
+function perAxisAttrs(prefix, tuple) {
+	const out = {};
+	for (const [axisName, contextName] of Object.entries(tuple)) out[dataAttr(prefix, axisName)] = contextName;
+	return out;
+}
 //#endregion
 //#region src/internal/sort-tokens.ts
 const NUMERIC_TYPES = new Set([
@@ -775,7 +789,7 @@ function formatSubColor$1(raw, format) {
 }
 function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -798,14 +812,14 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	]);
 	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No border tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -868,7 +882,7 @@ function fixedPrefixLength(filter) {
 }
 function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const groups = useMemo(() => {
 		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -909,14 +923,14 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 	const totalCount = groups.reduce((acc, [, swatches]) => acc + swatches.length, 0);
 	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (totalCount === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -980,7 +994,7 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 	const classes = ["sb-copy-button", `sb-copy-button--${variant}`];
 	if (copied) classes.push("sb-copy-button--copied");
 	if (className) classes.push(className);
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		type: "button",
 		className: classes.join(" "),
 		onClick: handleClick,
@@ -995,7 +1009,12 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 			"aria-hidden": true,
 			children: copied ? "✓" : "⧉"
 		})
-	});
+	}), /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-live": "polite",
+		className: "sb-copy-button__sr-status",
+		children: copied ? "Copied" : ""
+	})] });
 }
 //#endregion
 //#region src/ColorTable.tsx
@@ -1003,7 +1022,7 @@ const BASE_LABEL = "base";
 const COLUMN_COUNT = 6;
 function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [query, setQuery] = useState("");
 	const [selectedByBase, setSelectedByBase] = useState({});
@@ -1092,14 +1111,14 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleGroups.length} matching "${query.trim()}"` : "";
 	const captionText = caption ?? `${totalTokens} color${totalTokens === 1 ? "" : "s"} across ${groups.length} group${groups.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activeTheme}`;
 	if (groups.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [searchable && /* @__PURE__ */ jsx("div", {
 			className: "sb-color-table__search",
 			children: /* @__PURE__ */ jsx("input", {
@@ -1192,6 +1211,7 @@ function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVari
 		},
 		tabIndex: 0,
 		"aria-label": onSelect ? `Inspect ${active.path}` : expanded ? `Collapse ${group.base}` : `Expand ${group.base}`,
+		...onSelect ? { "aria-haspopup": "dialog" } : {},
 		"data-testid": "color-table-row",
 		"data-path": active.path,
 		"data-base": group.base,
@@ -1521,12 +1541,12 @@ function summaryVariant(diagnostics) {
 * on their own MDX pages.
 */
 function Diagnostics({ caption } = {}) {
-	const { activeTheme, cssVarPrefix, diagnostics } = useProject();
+	const { activeAxes, cssVarPrefix, diagnostics } = useProject();
 	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
 	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
 	const variant = summaryVariant(diagnostics);
 	return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		"data-testid": "diagnostics",
 		children: /* @__PURE__ */ jsxs("details", {
 			open: hasErrorsOrWarnings,
@@ -1534,11 +1554,14 @@ function Diagnostics({ caption } = {}) {
 				className: cx("sb-diagnostics__summary", variant && `sb-diagnostics__summary--${variant}`),
 				children: headingText
 			}), diagnostics.length > 0 && /* @__PURE__ */ jsx("ul", {
+				role: "list",
 				className: "sb-diagnostics__list",
 				children: diagnostics.map((d, i) => /* @__PURE__ */ jsxs("li", {
 					className: "sb-diagnostics__row",
+					"aria-label": `${severityLabel[d.severity]}: ${d.message}`,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: cx("sb-diagnostics__label", { [`sb-diagnostics__label--${d.severity}`]: d.severity !== "info" }),
+						"aria-hidden": true,
 						children: severityLabel[d.severity]
 					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: d.message }), (d.group || d.filename) && /* @__PURE__ */ jsx("div", {
 						className: "sb-diagnostics__meta",
@@ -1743,7 +1766,7 @@ function toPixels(raw) {
 }
 function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "dimension") return false;
@@ -1770,14 +1793,14 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 	]);
 	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No dimension tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1825,7 +1848,7 @@ function stackString(raw) {
 }
 function FontFamilySample({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontFamily") return false;
@@ -1847,14 +1870,14 @@ function FontFamilySample({ filter, sample = "The quick brown fox jumps over the
 	]);
 	const captionText = caption ?? `${rows.length} fontFamily token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontFamily" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No fontFamily tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1911,7 +1934,7 @@ function toWeight(raw) {
 }
 function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontWeight") return false;
@@ -1934,14 +1957,14 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 	]);
 	const captionText = caption ?? `${rows.length} fontWeight token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontWeight" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No fontWeight tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1991,7 +2014,7 @@ function stopKey(path, stop, fallback) {
 }
 function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -2014,14 +2037,14 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 	]);
 	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No gradient tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2225,9 +2248,13 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		runKey,
 		reducedMotion
 	]);
-	if (reducedMotion) return /* @__PURE__ */ jsx("div", {
+	if (reducedMotion) return /* @__PURE__ */ jsxs("div", {
 		style: styles.reducedMotion,
-		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
+		children: [
+			"Animation suppressed by ",
+			/* @__PURE__ */ jsx("code", { children: "prefers-reduced-motion: reduce" }),
+			"."
+		]
 	});
 	return /* @__PURE__ */ jsx("div", {
 		style: styles.track,
@@ -2258,7 +2285,7 @@ function formatSpec(row) {
 }
 function MotionPreview({ filter, caption }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const [speed, setSpeed] = useState(1);
 	const [run, setRun] = useState(0);
 	const reducedMotion = usePrefersReducedMotion();
@@ -2295,14 +2322,14 @@ function MotionPreview({ filter, caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No motion tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "sb-block__caption",
@@ -2376,7 +2403,7 @@ function toOpacity(raw) {
 */
 function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== type) return false;
@@ -2405,7 +2432,7 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 	]);
 	const captionText = caption ?? `${rows.length} opacity token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No opacity tokens match this filter."
@@ -2413,7 +2440,7 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 	});
 	const sampleColorVar = resolveCssVar(sampleColor, project);
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2521,7 +2548,7 @@ function layerKey(path, layer, fallback) {
 }
 function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -2544,14 +2571,14 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	]);
 	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No shadow tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2634,7 +2661,7 @@ function extractCssStyle(value) {
 }
 function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "strokeStyle") return false;
@@ -2657,14 +2684,14 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 	]);
 	const captionText = caption ?? `${rows.length} strokeStyle token${rows.length === 1 ? "" : "s"}${filter && filter !== "strokeStyle" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No strokeStyle tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2701,7 +2728,7 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 //#region src/token-detail/internal.ts
 function useTokenDetailData(path) {
 	const project = useProject();
-	const { activeTheme, activeAxes, axes, resolved, cssVarPrefix, varianceByPath, resolveAt, themeNameForTuple } = project;
+	const { activeTheme, activeAxes, axes, resolved, cssVarPrefix, varianceByPath, resolveAt } = project;
 	const typedResolved = resolved;
 	return {
 		token: typedResolved[path],
@@ -2712,8 +2739,7 @@ function useTokenDetailData(path) {
 		resolved: typedResolved,
 		cssVarPrefix,
 		varianceByPath,
-		resolveAt,
-		themeNameForTuple
+		resolveAt
 	};
 }
 //#endregion
@@ -2838,7 +2864,7 @@ function treeHasTruncation(nodes) {
 //#endregion
 //#region src/token-detail/AxisVariance.tsx
 function AxisVariance({ path }) {
-	const { token, cssVar, axes, activeAxes, cssVarPrefix, varianceByPath, resolveAt, themeNameForTuple } = useTokenDetailData(path);
+	const { token, cssVar, axes, activeAxes, cssVarPrefix, varianceByPath, resolveAt } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
 	const tokenType = token?.$type;
 	const isColor = tokenType === "color";
@@ -2857,6 +2883,7 @@ function AxisVariance({ path }) {
 				kind: "multi-axis",
 				varyingAxes: result.varyingAxes
 			};
+			default: throw new Error(`unhandled AxisVarianceResult kind: ${JSON.stringify(result)}`);
 		}
 	}, [path, varianceByPath]);
 	if (axes.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
@@ -2903,7 +2930,7 @@ function AxisVariance({ path }) {
 			};
 			return {
 				ctx,
-				themeName: themeNameForTuple(target) ?? "",
+				target,
 				value: formatFn(resolveAt(target)[path])
 			};
 		});
@@ -2923,10 +2950,10 @@ function AxisVariance({ path }) {
 					children: row.ctx
 				}), /* @__PURE__ */ jsxs("td", {
 					className: "sb-token-detail__theme-cell",
-					children: [isColor && row.themeName && /* @__PURE__ */ jsx("span", {
+					children: [isColor && /* @__PURE__ */ jsx("span", {
 						className: "sb-token-detail__swatch",
 						style: { background: cssVar },
-						[dataAttr(cssVarPrefix, "theme")]: row.themeName,
+						...perAxisAttrs(cssVarPrefix, row.target),
 						"aria-hidden": true
 					}), row.value]
 				})]
@@ -2975,16 +3002,15 @@ function AxisVariance({ path }) {
 						[rowAxis.name]: row,
 						[colAxis.name]: col
 					};
-					const name = themeNameForTuple(target);
 					const value = formatFn(resolveAt(target)[path]);
 					return /* @__PURE__ */ jsxs("td", {
 						className: "sb-token-detail__theme-cell",
 						"data-row": row,
 						"data-col": col,
-						children: [isColor && name && /* @__PURE__ */ jsx("span", {
+						children: [isColor && /* @__PURE__ */ jsx("span", {
 							className: "sb-token-detail__swatch",
 							style: { background: cssVar },
-							[dataAttr(cssVarPrefix, "theme")]: name,
+							...perAxisAttrs(cssVarPrefix, target),
 							"aria-hidden": true
 						}), value]
 					}, col);
@@ -3564,9 +3590,9 @@ function TokenUsageSnippet({ path }) {
 //#endregion
 //#region src/TokenDetail.tsx
 function TokenDetail({ path, heading }) {
-	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
+	const { token, cssVar, activeTheme, activeAxes, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
-	const theme = themeAttrs(cssVarPrefix, activeTheme);
+	const theme = themeAttrs(cssVarPrefix, activeAxes);
 	if (!token) return /* @__PURE__ */ jsx("div", {
 		...theme,
 		className: cx(theme["className"], "sb-token-detail"),
@@ -3649,9 +3675,23 @@ function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 	const panelRef = useRef(null);
 	const openerRef = useRef(null);
 	useEffect(() => {
+		const panel = panelRef.current;
+		if (!panel) return;
 		openerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		panelRef.current?.focus();
+		panel.focus();
+		const overlayBranch = findBodyChildContaining(panel);
+		const restorers = [];
+		if (overlayBranch) for (const sibling of Array.from(document.body.children)) {
+			if (sibling === overlayBranch) continue;
+			if (!(sibling instanceof HTMLElement)) continue;
+			const hadInert = sibling.inert;
+			sibling.inert = true;
+			restorers.push(() => {
+				sibling.inert = hadInert;
+			});
+		}
 		return () => {
+			for (const restore of restorers) restore();
 			openerRef.current?.focus();
 		};
 	}, []);
@@ -3715,6 +3755,17 @@ function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 		})
 	});
 }
+/**
+* Walk up from `node` to the direct child of `<body>` that contains it.
+* Returns `null` when the node isn't attached to the document (mid-mount,
+* post-unmount). Used to identify which top-level branch to *not* mark
+* inert when the overlay opens.
+*/
+function findBodyChildContaining(node) {
+	let cursor = node;
+	while (cursor && cursor.parentElement !== document.body) cursor = cursor.parentElement;
+	return cursor;
+}
 //#endregion
 //#region src/TokenNavigator.tsx
 function buildTree(resolved, root, typeFilter) {
@@ -3825,7 +3876,7 @@ function pruneTreeForMatches(nodes, matches, expandOut) {
 	return out;
 }
 function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
 	const typeFilter = useMemo(() => {
 		if (type === void 0) return void 0;
 		return new Set(Array.isArray(type) ? type : [type]);
@@ -4010,11 +4061,11 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		return n;
 	}, [visibleTree, searchExpanded]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx(EmptyState, { children: root ? `No tokens under "${root}"${typeFilter ? ` matching ${typeLabel.slice(3)}` : ""}.` : typeFilter ? `No tokens matching ${typeLabel.slice(3)} in the active theme.` : "No tokens in the active theme." })
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [
 			searchable && /* @__PURE__ */ jsx("div", {
 				className: "sb-token-navigator__search",
@@ -4038,6 +4089,12 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 					activeTheme
 				]
 			}),
+			searchable && /* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sb-token-navigator__sr-status",
+				children: trimmedQuery !== "" ? `${matchCount} tokens matching "${trimmedQuery}"` : ""
+			}),
 			visibleTree.length === 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "sb-block__empty",
 				children: [
@@ -4050,14 +4107,17 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 				role: "tree",
 				"aria-label": "Token graph",
 				onKeyDown: handleTreeKeyDown,
-				children: visibleTree.map((node) => /* @__PURE__ */ jsx(TreeNodeRow, {
+				children: visibleTree.map((node, i) => /* @__PURE__ */ jsx(TreeNodeRow, {
 					node,
 					expanded: effectiveExpanded,
 					focusedPath,
 					registerTreeItem,
 					onToggle: toggle,
 					onFocusPath: setFocusedPath,
-					onLeafClick: handleLeafClick
+					onLeafClick: handleLeafClick,
+					level: 1,
+					setsize: visibleTree.length,
+					posinset: i + 1
 				}, node.path || node.segment))
 			}),
 			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
@@ -4068,13 +4128,16 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		]
 	});
 }
-function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick }) {
+function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick, level, setsize, posinset }) {
 	if (node.kind === "leaf") return /* @__PURE__ */ jsx(LeafRow, {
 		node,
 		focusedPath,
 		registerTreeItem,
 		onFocusPath,
-		onLeafClick
+		onLeafClick,
+		level,
+		setsize,
+		posinset
 	});
 	const isOpen = expanded.has(node.path);
 	const isFocused = focusedPath === node.path;
@@ -4082,6 +4145,9 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 		ref: registerTreeItem(node.path),
 		role: "treeitem",
 		"aria-expanded": isOpen,
+		"aria-level": level,
+		"aria-setsize": setsize,
+		"aria-posinset": posinset,
 		tabIndex: isFocused ? 0 : -1,
 		onFocus: () => onFocusPath(node.path),
 		"data-path": node.path,
@@ -4108,24 +4174,30 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 		}), isOpen && /* @__PURE__ */ jsx("ul", {
 			className: "sb-token-navigator__nested",
 			role: "group",
-			children: node.children.map((c) => /* @__PURE__ */ jsx(TreeNodeRow, {
+			children: node.children.map((c, i) => /* @__PURE__ */ jsx(TreeNodeRow, {
 				node: c,
 				expanded,
 				focusedPath,
 				registerTreeItem,
 				onToggle,
 				onFocusPath,
-				onLeafClick
+				onLeafClick,
+				level: level + 1,
+				setsize: node.children.length,
+				posinset: i + 1
 			}, c.path || c.segment))
 		})]
 	});
 }
-function LeafRow({ node, focusedPath, registerTreeItem, onFocusPath, onLeafClick }) {
+function LeafRow({ node, focusedPath, registerTreeItem, onFocusPath, onLeafClick, level, setsize, posinset }) {
 	const type = node.token.$type ?? "";
 	const isFocused = focusedPath === node.path;
 	return /* @__PURE__ */ jsx("li", {
 		ref: registerTreeItem(node.path),
 		role: "treeitem",
+		"aria-level": level,
+		"aria-setsize": setsize,
+		"aria-posinset": posinset,
 		tabIndex: isFocused ? 0 : -1,
 		onFocus: () => onFocusPath(node.path),
 		"data-path": node.path,
@@ -4223,7 +4295,7 @@ function LeafPreview({ path, token }) {
 //#region src/TokenTable.tsx
 function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
@@ -4271,14 +4343,14 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleRows.length} matching "${query.trim()}"` : "";
 	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""}${matchSuffix} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [
 			searchable && /* @__PURE__ */ jsx("div", {
 				className: "sb-token-table__search",
@@ -4292,6 +4364,12 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 					"data-testid": "token-table-search"
 				})
 			}),
+			searchable && /* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sb-token-table__sr-status",
+				children: query.trim() !== "" ? `${visibleRows.length} of ${rows.length} tokens match "${query.trim()}"` : ""
+			}),
 			/* @__PURE__ */ jsxs("table", {
 				className: "sb-token-table__table",
 				children: [
@@ -4324,6 +4402,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 							}
 						},
 						tabIndex: 0,
+						"aria-haspopup": "dialog",
 						"aria-label": `Inspect ${row.path}`,
 						"data-testid": "token-table-row",
 						"data-path": row.path,
@@ -4418,7 +4497,7 @@ function buildRow(path, composite) {
 	};
 }
 function TypographyScale({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "typography") return false;
@@ -4443,14 +4522,14 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	]);
 	const captionText = caption ?? `${rows.length} typography token${rows.length === 1 ? "" : "s"}${filter && filter !== "typography" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No typography tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText