@unpunnyfuns/swatchbook-blocks 0.57.1 → 0.58.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import './style.css';
 import Color from "colorjs.io";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { buildResolveAt } from "@unpunnyfuns/swatchbook-core/resolve-at";
 import { makeCssVar } from "@unpunnyfuns/swatchbook-core/css-var";
@@ -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
@@ -867,10 +881,13 @@ function fixedPrefixLength(filter) {
 	return fixed;
 }
 function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
 	const groups = useMemo(() => {
+		const projectFields = {
+			listing,
+			cssVarPrefix
+		};
 		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "color") return false;
 			return matchPath(path, filter);
@@ -886,11 +903,11 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 			const groupKey = segments.slice(0, effectiveGroupBy).join(".");
 			const leaf = segments.slice(effectiveGroupBy).join(".") || segments.at(-1) || path;
 			const list = bucket.get(groupKey) ?? [];
-			const formatted = resolveColorValue(path, token.$value, colorFormat, project);
+			const formatted = resolveColorValue(path, token.$value, colorFormat, projectFields);
 			list.push({
 				path,
 				leaf,
-				cssVar: resolveCssVar(path, project),
+				cssVar: resolveCssVar(path, projectFields),
 				value: formatted.value,
 				outOfGamut: formatted.outOfGamut
 			});
@@ -899,9 +916,10 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 		return [...bucket.entries()].toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true }));
 	}, [
 		resolved,
+		listing,
+		cssVarPrefix,
 		filter,
 		groupBy,
-		project,
 		colorFormat,
 		sortBy,
 		sortDir
@@ -909,14 +927,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 +998,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,21 +1013,30 @@ 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
 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, listing } = useProject();
 	const colorFormat = useColorFormat();
 	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
 	const [selectedByBase, setSelectedByBase] = useState({});
 	const [expandedByBase, setExpandedByBase] = useState(() => /* @__PURE__ */ new Set());
 	const defs = useMemo(() => buildVariantDefs(variants), [variants]);
 	const groups = useMemo(() => {
+		const projectFields = {
+			listing,
+			cssVarPrefix
+		};
 		const sorted = sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "color") return false;
 			return matchPath(path, filter);
@@ -1020,7 +1047,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		const groupMap = /* @__PURE__ */ new Map();
 		for (const [path, token] of sorted) {
 			const raw = token.$value;
-			const hex = resolveColorValue(path, raw, "hex", project);
+			const hex = resolveColorValue(path, raw, "hex", projectFields);
 			const hsl = formatColor(raw, "hsl");
 			const oklch = formatColor(raw, "oklch");
 			const active = pickActiveFormat(raw, colorFormat, hex, hsl, oklch);
@@ -1028,7 +1055,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			const variant = {
 				label: match?.label ?? BASE_LABEL,
 				path,
-				cssVar: resolveCssVar(path, project),
+				cssVar: resolveCssVar(path, projectFields),
 				value: active.value,
 				outOfGamut: active.outOfGamut,
 				hex: hex.value,
@@ -1059,19 +1086,20 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		return out;
 	}, [
 		resolved,
+		listing,
+		cssVarPrefix,
 		filter,
-		project,
 		sortBy,
 		sortDir,
 		defs,
 		colorFormat
 	]);
 	const visibleGroups = useMemo(() => {
-		if (!searchable || query.trim() === "") return groups;
-		return fuzzyFilter(groups, query, (g) => g.searchText);
+		if (!searchable || deferredQuery.trim() === "") return groups;
+		return fuzzyFilter(groups, deferredQuery, (g) => g.searchText);
 	}, [
 		groups,
-		query,
+		deferredQuery,
 		searchable
 	]);
 	const totalTokens = useMemo(() => groups.reduce((n, g) => n + g.variants.length, 0), [groups]);
@@ -1092,14 +1120,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", {
@@ -1173,7 +1201,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		})]
 	});
 }
-function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVariant, onSelect }) {
+const GroupRow = memo(function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVariant, onSelect }) {
 	const multi = group.variants.length > 1;
 	const active = group.variants.find((v) => v.label === selectedLabel) ?? group.variants[0];
 	const nameText = multi ? group.base : active.path;
@@ -1192,6 +1220,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,
@@ -1271,7 +1300,7 @@ function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVari
 			})
 		})
 	})] });
-}
+});
 function ExpandedDetail({ group, active }) {
 	const hasDescription = active.description !== void 0 && active.description.length > 0;
 	const chain = active.aliasChain && active.aliasChain.length > 0 ? active.aliasChain : void 0;
@@ -1487,29 +1516,32 @@ const severityLabel = {
 	warn: "WARN",
 	info: "INFO"
 };
-function summaryText(diagnostics) {
-	if (diagnostics.length === 0) return "✔ OK · no diagnostics";
-	const counts = {
-		error: 0,
-		warn: 0,
-		info: 0
+function summarize(diagnostics) {
+	if (diagnostics.length === 0) return {
+		text: "✔ OK · no diagnostics",
+		variant: "ok",
+		hasErrorsOrWarnings: false
 	};
-	for (const d of diagnostics) counts[d.severity] += 1;
+	let errors = 0;
+	let warnings = 0;
+	let infos = 0;
+	for (const d of diagnostics) if (d.severity === "error") errors += 1;
+	else if (d.severity === "warn") warnings += 1;
+	else infos += 1;
 	const parts = [];
-	if (counts.error > 0) parts.push(`✖ ${counts.error} error${counts.error === 1 ? "" : "s"}`);
-	if (counts.warn > 0) parts.push(`⚠ ${counts.warn} warning${counts.warn === 1 ? "" : "s"}`);
-	if (counts.info > 0) parts.push(`${counts.info} info`);
-	return parts.join(" · ");
+	if (errors > 0) parts.push(`✖ ${errors} error${errors === 1 ? "" : "s"}`);
+	if (warnings > 0) parts.push(`⚠ ${warnings} warning${warnings === 1 ? "" : "s"}`);
+	if (infos > 0) parts.push(`${infos} info`);
+	const variant = errors > 0 ? "error" : warnings > 0 ? "warn" : null;
+	return {
+		text: parts.join(" · "),
+		variant,
+		hasErrorsOrWarnings: errors > 0 || warnings > 0
+	};
 }
 function diagnosticKey(d, i) {
 	return `${d.severity}:${d.group}:${d.filename ?? ""}:${d.line ?? ""}:${d.message}:${i}`;
 }
-function summaryVariant(diagnostics) {
-	if (diagnostics.length === 0) return "ok";
-	if (diagnostics.some((d) => d.severity === "error")) return "error";
-	if (diagnostics.some((d) => d.severity === "warn")) return "warn";
-	return null;
-}
 /**
 * Render the project's load diagnostics — parser errors, resolver warnings,
 * disabled-axes validation issues, etc. — as a collapsible list. Auto-opens
@@ -1521,24 +1553,26 @@ function summaryVariant(diagnostics) {
 * on their own MDX pages.
 */
 function Diagnostics({ caption } = {}) {
-	const { activeTheme, cssVarPrefix, diagnostics } = useProject();
-	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
-	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
-	const variant = summaryVariant(diagnostics);
+	const { activeAxes, cssVarPrefix, diagnostics } = useProject();
+	const summary = useMemo(() => summarize(diagnostics), [diagnostics]);
+	const headingText = caption ?? `Diagnostics · ${summary.text}`;
 	return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activeAxes),
 		"data-testid": "diagnostics",
 		children: /* @__PURE__ */ jsxs("details", {
-			open: hasErrorsOrWarnings,
+			open: summary.hasErrorsOrWarnings,
 			children: [/* @__PURE__ */ jsx("summary", {
-				className: cx("sb-diagnostics__summary", variant && `sb-diagnostics__summary--${variant}`),
+				className: cx("sb-diagnostics__summary", summary.variant && `sb-diagnostics__summary--${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 +1777,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 +1804,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 +1859,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 +1881,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 +1945,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 +1968,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 +2025,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 +2048,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 +2259,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 +2296,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 +2333,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 +2414,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 +2443,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 +2451,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 +2559,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 +2582,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 +2672,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 +2695,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 +2739,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 +2750,7 @@ function useTokenDetailData(path) {
 		resolved: typedResolved,
 		cssVarPrefix,
 		varianceByPath,
-		resolveAt,
-		themeNameForTuple
+		resolveAt
 	};
 }
 //#endregion
@@ -2838,7 +2875,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 +2894,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 +2941,7 @@ function AxisVariance({ path }) {
 			};
 			return {
 				ctx,
-				themeName: themeNameForTuple(target) ?? "",
+				target,
 				value: formatFn(resolveAt(target)[path])
 			};
 		});
@@ -2923,10 +2961,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 +3013,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 +3601,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 +3686,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 +3766,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 +3887,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]);
@@ -3846,14 +3908,15 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 	}, [initialExpanded]);
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
 	const { visibleTree, searchExpanded } = useMemo(() => {
-		if (!searchable || query.trim() === "") return {
+		if (!searchable || deferredQuery.trim() === "") return {
 			visibleTree: tree,
 			searchExpanded: null
 		};
 		const leafPaths = [];
 		collectLeafPaths(tree, leafPaths);
-		const matches = new Set(fuzzyFilter(leafPaths, query, (p) => p));
+		const matches = new Set(fuzzyFilter(leafPaths, deferredQuery, (p) => p));
 		const expandOut = /* @__PURE__ */ new Set();
 		return {
 			visibleTree: matches.size === 0 ? [] : pruneTreeForMatches(tree, matches, expandOut),
@@ -3861,7 +3924,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		};
 	}, [
 		tree,
-		query,
+		deferredQuery,
 		searchable
 	]);
 	const effectiveExpanded = useMemo(() => {
@@ -3882,7 +3945,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
 	}, [onSelect]);
-	const [focusedPath, setFocusedPath] = useState(null);
+	const [storedFocus, setStoredFocus] = useState(null);
 	const treeItemRefs = useRef(/* @__PURE__ */ new Map());
 	const registerTreeItem = useCallback((path) => (el) => {
 		if (el) treeItemRefs.current.set(path, el);
@@ -3893,22 +3956,15 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		flattenVisible(visibleTree, effectiveExpanded, null, out);
 		return out;
 	}, [visibleTree, effectiveExpanded]);
-	useEffect(() => {
-		if (flatVisible.length === 0) {
-			setFocusedPath(null);
-			return;
-		}
-		setFocusedPath((prev) => {
-			if (prev && flatVisible.some((entry) => entry.path === prev)) return prev;
-			return flatVisible[0]?.path ?? null;
-		});
-	}, [flatVisible]);
+	const focusedPath = useMemo(() => {
+		if (flatVisible.length === 0) return null;
+		if (storedFocus && flatVisible.some((entry) => entry.path === storedFocus)) return storedFocus;
+		return flatVisible[0]?.path ?? null;
+	}, [flatVisible, storedFocus]);
 	const focusByPath = useCallback((path) => {
 		const node = treeItemRefs.current.get(path);
-		if (node) {
-			node.focus();
-			setFocusedPath(path);
-		} else setFocusedPath(path);
+		if (node) node.focus();
+		setStoredFocus(path);
 	}, []);
 	useEffect(() => {
 		if (focusedPath === null) return;
@@ -4010,11 +4066,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 +4094,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 +4112,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
+					onFocusPath: setStoredFocus,
+					onLeafClick: handleLeafClick,
+					level: 1,
+					setsize: visibleTree.length,
+					posinset: i + 1
 				}, node.path || node.segment))
 			}),
 			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
@@ -4068,13 +4133,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,
+		isFocused: focusedPath === node.path,
 		registerTreeItem,
 		onFocusPath,
-		onLeafClick
+		onLeafClick,
+		level,
+		setsize,
+		posinset
 	});
 	const isOpen = expanded.has(node.path);
 	const isFocused = focusedPath === node.path;
@@ -4082,6 +4150,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 +4179,29 @@ 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 }) {
+const LeafRow = memo(function LeafRow({ node, isFocused, 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,
@@ -4158,8 +4234,8 @@ function LeafRow({ node, focusedPath, registerTreeItem, onFocusPath, onLeafClick
 			]
 		})
 	});
-}
-function LeafPreview({ path, token }) {
+});
+const LeafPreview = memo(function LeafPreview({ path, token }) {
 	const project = useProject();
 	const colorFormat = useColorFormat();
 	const type = token.$type;
@@ -4218,16 +4294,20 @@ function LeafPreview({ path, token }) {
 			children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
 		})
 	});
-}
+});
 //#endregion
 //#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, listing } = useProject();
 	const colorFormat = useColorFormat();
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
 	const rows = useMemo(() => {
+		const projectFields = {
+			listing,
+			cssVarPrefix
+		};
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (!matchPath(path, filter)) return false;
 			if (type && token.$type !== type) return false;
@@ -4237,31 +4317,32 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 			dir: sortDir
 		}).map(([path, token]) => {
 			const isColor = token.$type === "color";
-			const color = isColor ? resolveColorValue(path, token.$value, colorFormat, project) : null;
+			const color = isColor ? resolveColorValue(path, token.$value, colorFormat, projectFields) : null;
 			return {
 				path,
 				type: token.$type ?? "",
-				value: formatTokenValue(token.$value, token.$type, colorFormat, project.listing[path]),
+				value: formatTokenValue(token.$value, token.$type, colorFormat, listing[path]),
 				outOfGamut: color?.outOfGamut ?? false,
-				cssVar: resolveCssVar(path, project),
+				cssVar: resolveCssVar(path, projectFields),
 				isColor
 			};
 		});
 	}, [
 		resolved,
+		listing,
+		cssVarPrefix,
 		filter,
 		type,
-		project,
 		colorFormat,
 		sortBy,
 		sortDir
 	]);
 	const visibleRows = useMemo(() => {
-		if (!searchable || query.trim() === "") return rows;
-		return fuzzyFilter(rows, query, (row) => `${row.path} ${row.type} ${row.value}`);
+		if (!searchable || deferredQuery.trim() === "") return rows;
+		return fuzzyFilter(rows, deferredQuery, (row) => `${row.path} ${row.type} ${row.value}`);
 	}, [
 		rows,
-		query,
+		deferredQuery,
 		searchable
 	]);
 	const handleRowClick = useCallback((path) => {
@@ -4271,14 +4352,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 +4373,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 +4411,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 +4506,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 +4531,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