@schukai/monster 4.148.8 → 4.149.0

package/test/cases/components/style/theme-component-catalog.mjs

@@ -0,0 +1,853 @@
+import { strict as assert } from "node:assert";
+import { readFile, readdir } from "node:fs/promises";
+import { resolve } from "node:path";
+import {
+	catalogFixtureData,
+	componentFamilies,
+	componentFixtures,
+	componentTags,
+	fixtureTags,
+	integrationNotes,
+} from "../../../../development/playground/theme/component-catalog.mjs";
+import {
+	componentReviewStorageKey,
+	formatComponentReviewReport,
+	loadComponentReviewState,
+	saveComponentReviewState,
+	summarizeComponentReviews,
+} from "../../../../development/playground/theme/component-review.mjs";
+import {
+	archiveComponentReviewHistoryNotes,
+	componentReviewSnapshot,
+	createComponentReviewSeed,
+	getComponentReviewHistoryEntries,
+} from "../../../../development/playground/theme/component-review-history.mjs";
+import themeSelectRoutes from "../../../../development/mock/theme-selects.js";
+import { themeTokenPairFamilies } from "../../../../development/playground/theme/theme-token-pairs.mjs";
+
+const projectRoot = resolve(import.meta.dirname, "../../../..");
+const componentsRoot = resolve(projectRoot, "source/components");
+
+describe("Theme Lab component catalog", () => {
+	it("accounts for every registered Monster custom element", async () => {
+		const registeredTags = await readRegisteredComponentTags();
+
+		assert.equal(new Set(componentTags).size, componentTags.length);
+		assert.deepEqual(
+			[...componentTags].sort(),
+			registeredTags,
+			"component catalog and registered custom elements must stay synchronized",
+		);
+	});
+
+	it("keeps fixture and integration metadata within the public inventory", () => {
+		const tags = new Set(componentTags);
+
+		for (const fixtureTag of fixtureTags) {
+			assert.ok(tags.has(fixtureTag), `unknown fixture tag: ${fixtureTag}`);
+		}
+
+		for (const integrationTag of Object.keys(integrationNotes)) {
+			assert.ok(
+				tags.has(integrationTag),
+				`unknown integration tag: ${integrationTag}`,
+			);
+		}
+
+		assert.equal(
+			componentFamilies.reduce(
+				(count, family) => count + family.tags.length,
+				0,
+			),
+			componentTags.length,
+		);
+	});
+
+	it("keeps audited Theme Lab fixtures semantically named", async () => {
+		const [index, main, catalog, styles] = await Promise.all([
+			readFile(
+				resolve(projectRoot, "development/playground/theme/index.html"),
+				"utf8",
+			),
+			readFile(
+				resolve(projectRoot, "development/playground/theme/main.mjs"),
+				"utf8",
+			),
+			readFile(
+				resolve(
+					projectRoot,
+					"development/playground/theme/component-catalog.mjs",
+				),
+				"utf8",
+			),
+			readFile(
+				resolve(
+					projectRoot,
+					"development/playground/theme/style/main.pcss",
+				),
+				"utf8",
+			),
+		]);
+
+		assert.match(index, /<meta name="description" content="[^"]+">/u);
+		assert.doesNotMatch(index, /class="lab-brand"[^>]+aria-label=/u);
+		assert.doesNotMatch(
+			main,
+			/setAttribute\("aria-label", `\$\{tag\} controlled Theme Lab fixture`\)/u,
+		);
+		assert.match(
+			catalog,
+			/class="monster-spinner" role="status" aria-label="Loading"/u,
+		);
+		assert.match(
+			catalog,
+			/class="catalog-skeleton" role="status" aria-label="Loading preview"/u,
+		);
+		assert.doesNotMatch(
+			catalog,
+			/data-monster-option-aria-label="Save component fixture"/u,
+		);
+		assert.match(styles, /\.registry-action\s*\{[\s\S]*?font-size: 0\.875rem/u);
+		assert.match(
+			styles,
+			/\.component-fixture-stage p a\s*\{[\s\S]*?text-decoration: underline/u,
+		);
+	});
+
+	it("persists one review checkbox and note for every public component", () => {
+		const values = new Map();
+		const storage = {
+			getItem(key) {
+				return values.get(key) ?? null;
+			},
+			setItem(key, value) {
+				values.set(key, value);
+			},
+		};
+		const state = loadComponentReviewState(storage, componentTags);
+		const firstTag = componentTags[0];
+
+		assert.equal(Object.keys(state.reviews).length, componentTags.length);
+		assert.deepEqual(state.reviews[firstTag], {
+			checked: false,
+			note: "",
+		});
+
+		state.reviews[firstTag].checked = true;
+		state.reviews[firstTag].note = "Focus ring needs more contrast.";
+		saveComponentReviewState(storage, state);
+
+		const restoredState = loadComponentReviewState(storage, componentTags);
+		assert.deepEqual(restoredState.reviews[firstTag], {
+			checked: true,
+			note: "Focus ring needs more contrast.",
+		});
+		assert.deepEqual(summarizeComponentReviews(restoredState), {
+			total: componentTags.length,
+			reviewed: 1,
+			noted: 1,
+		});
+		assert.match(
+			formatComponentReviewReport(restoredState),
+			new RegExp(
+				`Progress: 1/${componentTags.length} reviewed[\\s\\S]*- \\[x\\] ${firstTag}[\\s\\S]*Focus ring needs more contrast`,
+				"u",
+			),
+		);
+		assert.ok(values.has(componentReviewStorageKey));
+	});
+
+	it("preserves the initial user review as versioned page history", () => {
+		const knownTags = new Set(componentTags);
+		const commentedTags = componentReviewSnapshot.comments.map(
+			({ tag }) => tag,
+		);
+		const reviewedTags = componentReviewSnapshot.reviewed;
+		const historyEntries = getComponentReviewHistoryEntries();
+
+		assert.equal(componentReviewSnapshot.comments.length, 46);
+		assert.equal(historyEntries.length, 59);
+		assert.equal(reviewedTags.length, 9);
+		assert.equal(new Set(commentedTags).size, commentedTags.length);
+		assert.equal(new Set(reviewedTags).size, reviewedTags.length);
+		assert.ok(commentedTags.every((tag) => knownTags.has(tag)));
+		assert.ok(reviewedTags.every((tag) => knownTags.has(tag)));
+		assert.deepEqual(
+			reviewedTags.filter((tag) => commentedTags.includes(tag)).sort(),
+			["monster-call-button", "monster-template"],
+		);
+
+		const seed = createComponentReviewSeed();
+		const emptyStorage = {
+			getItem() {
+				return null;
+			},
+		};
+		const restoredState = loadComponentReviewState(
+			emptyStorage,
+			componentTags,
+			seed,
+		);
+		assert.deepEqual(summarizeComponentReviews(restoredState), {
+			total: componentTags.length,
+			reviewed: 9,
+			noted: 0,
+		});
+		assert.equal(restoredState.reviews["monster-datatable-filter"].note, "");
+		assert.equal(restoredState.reviews["monster-iframe"].note, "");
+		assert.ok(
+			historyEntries.every(
+				({ resolution, status }) =>
+					resolution && ["accepted", "retest"].includes(status),
+			),
+		);
+		assert.equal(
+			historyEntries.filter(({ status }) => status === "accepted").length,
+			2,
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-button-bar" &&
+					text.includes("ganzen popper mit buttons"),
+			),
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-popper" && text.includes("nicht am button"),
+			),
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-table-of-content" &&
+					text.includes("nicht am control"),
+			),
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-toggle-button" && text.includes("ist ein link"),
+			),
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-repeat-field-set" &&
+					text.includes("noch immer nicht"),
+			),
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-form" &&
+					text.includes("border um das select (rolle)"),
+			),
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-form" &&
+					text.includes("button sieht auch viel höeher"),
+			),
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-control-bar" &&
+					text.includes("save button hat einen scharzen rand"),
+			),
+		);
+		assert.ok(
+			historyEntries.some(
+				({ tag, text }) =>
+					tag === "monster-state" && text.includes("fill=currencolor"),
+			),
+		);
+	});
+
+	it("archives known history notes without deleting newly written notes", () => {
+		const historicalText =
+			componentReviewSnapshot.comments.find(
+				({ tag }) => tag === "monster-datatable-filter",
+			)?.text || "";
+		const state = {
+			reviews: {
+				"monster-datatable-filter": {
+					checked: false,
+					note: historicalText,
+				},
+				"monster-iframe": {
+					checked: false,
+					note: "New issue after the retest.",
+				},
+				"monster-sheet": {
+					checked: false,
+					note: "das dropdrow hat keinen rand und die menues snid unterscheiedlich zu den danderen . siehe bei den buttons.",
+				},
+			},
+		};
+
+		assert.equal(archiveComponentReviewHistoryNotes(state), true);
+		assert.equal(state.reviews["monster-datatable-filter"].note, "");
+		assert.equal(state.reviews["monster-sheet"].note, "");
+		assert.equal(
+			state.reviews["monster-iframe"].note,
+			"New issue after the retest.",
+		);
+	});
+
+	it("opens all controlled defaults and exposes adjacent review fields", async () => {
+		const [themeLabMain, themeLabMarkup] = await Promise.all([
+			readFile(
+				resolve(projectRoot, "development/playground/theme/main.mjs"),
+				"utf8",
+			),
+			readFile(
+				resolve(projectRoot, "development/playground/theme/index.html"),
+				"utf8",
+			),
+		]);
+
+		assert.match(
+			themeLabMain,
+			/renderControlledComponentSandbox\(\)[\s\S]*?componentTags\.filter\(\(item\) => !fixtureTagSet\.has\(item\)\)/u,
+		);
+		assert.match(
+			themeLabMain,
+			/data-component-review-checked[\s\S]*?data-component-review-note/u,
+		);
+		assert.match(themeLabMain, /data-component-review-history-for/u);
+		assert.doesNotMatch(themeLabMain, /Mount default/u);
+		assert.match(themeLabMarkup, /id="component-review-progress"/u);
+		assert.match(themeLabMarkup, /data-copy-component-review/u);
+		assert.match(themeLabMarkup, /id="component-review-history-list"/u);
+		assert.match(themeLabMarkup, /All integration-safe defaults are open/u);
+	});
+
+	it("presents and tracks the modern theme as an automatic color scheme", async () => {
+		const [themeLabMain, themeLabMarkup] = await Promise.all([
+			readFile(
+				resolve(projectRoot, "development/playground/theme/main.mjs"),
+				"utf8",
+			),
+			readFile(
+				resolve(projectRoot, "development/playground/theme/index.html"),
+				"utf8",
+			),
+		]);
+
+		assert.match(themeLabMarkup, /Modern · Auto/u);
+		assert.match(themeLabMarkup, /data-current-scheme/u);
+		assert.match(themeLabMarkup, /Issues #519 \+ #523/u);
+		assert.match(
+			themeLabMain,
+			/const colorSchemeQuery = window\.matchMedia\("\(prefers-color-scheme: dark\)"\)/u,
+		);
+		assert.match(
+			themeLabMain,
+			/colorSchemeQuery\.addEventListener\("change",[\s\S]*?updateThemeSummary\(\)[\s\S]*?renderContrastReport\(\)[\s\S]*?syncDarkReviewChecklist\(\)/u,
+		);
+		assert.match(
+			themeLabMain,
+			/function updateThemeSummary[\s\S]*?Modern · \$\{scheme\}[\s\S]*?prefers-color-scheme: \$\{scheme\.toLowerCase\(\)\}/u,
+		);
+		assert.match(
+			themeLabMain,
+			/function syncDarkReviewChecklist[\s\S]*?item\?\.id === "dark"[\s\S]*?checked: colorSchemeQuery\.matches[\s\S]*?disabled: false/u,
+		);
+	});
+
+	it("mounts repeat-field data in a form backed by a DOM datasource", async () => {
+		const themeLabMain = await readFile(
+			resolve(projectRoot, "development/playground/theme/main.mjs"),
+			"utf8",
+		);
+
+		assert.match(
+			themeLabMain,
+			/tag === "monster-repeat-field-set"[\s\S]*?createElement\("monster-datasource-dom"\)[\s\S]*?script\.type = "application\/json"[\s\S]*?JSON\.stringify\(\[createRepeatFieldSetDemoData\(\)\]\)[\s\S]*?datasource: \{ selector: `#\$\{datasourceId\}` \}[\s\S]*?mapping: \{ data: "", index: 0 \}[\s\S]*?data: createRepeatFieldSetDemoData\(\)[\s\S]*?fixture\.append\(datasource, form\)/u,
+		);
+	});
+
+	it("configures the control-bar save action as an actual primary button", async () => {
+		const themeLabMain = await readFile(
+			resolve(projectRoot, "development/playground/theme/main.mjs"),
+			"utf8",
+		);
+
+		assert.match(
+			themeLabMain,
+			/function appendControlBarDemo[\s\S]*?primary\.setOption\("classes\.button", "monster-button-primary"\)/u,
+		);
+		assert.doesNotMatch(
+			themeLabMain,
+			/primary\.classList\.add\("monster-button-primary"\)/u,
+		);
+	});
+
+	it("provides representative local data for tables and selection controls", () => {
+		assert.ok(catalogFixtureData.reviewRows.length >= 5);
+		for (const row of catalogFixtureData.reviewRows) {
+			for (const key of [
+				"id",
+				"component",
+				"area",
+				"owner",
+				"status",
+				"updated",
+			]) {
+				assert.notEqual(row[key], undefined, `datatable row is missing ${key}`);
+				assert.notEqual(row[key], "", `datatable row has empty ${key}`);
+			}
+		}
+
+		for (const optionSet of [
+			catalogFixtureData.statusOptions,
+			catalogFixtureData.teamOptions,
+			catalogFixtureData.selectSearchOptions,
+			catalogFixtureData.treeOptions,
+		]) {
+			assert.ok(optionSet.length >= 3);
+			assert.equal(
+				new Set(optionSet.map(({ value }) => value)).size,
+				optionSet.length,
+				"selection fixture values must be unique",
+			);
+			assert.ok(optionSet.every(({ label }) => label.length > 0));
+		}
+
+		assert.ok(catalogFixtureData.variants.length >= 4);
+		assert.ok(catalogFixtureData.calendarAppointments.length >= 3);
+		assert.ok(
+			catalogFixtureData.calendarAppointments.every(
+				({ label, startDate, endDate }) => label && startDate && endDate,
+			),
+		);
+		for (const tag of [
+			"monster-datatable",
+			"monster-dataset",
+			"monster-filter-select",
+			"monster-filter-select-operator",
+			"monster-select",
+			"monster-select-link",
+			"monster-tree-select",
+			"monster-variant-select",
+		]) {
+			assert.ok(fixtureTags.includes(tag), `${tag} needs a populated fixture`);
+		}
+	});
+
+	it("uses accessible Bootstrap icon actions in the datatable fixture", () => {
+		const datatableFixture = componentFixtures.find(
+			({ id }) => id === "datatable",
+		);
+
+		assert.ok(datatableFixture);
+		assert.match(
+			datatableFixture.html,
+			/data-monster-option-aria-label="Open review record details"[\s\S]*?class="catalog-datatable-action"[\s\S]*?data-monster-option-aria-label="More actions for review record"/u,
+		);
+		assert.equal(
+			datatableFixture.html.match(/class="catalog-datatable-action"/gu)?.length,
+			2,
+		);
+		assert.equal(
+			datatableFixture.html.match(
+				/<svg[\s\S]*?aria-hidden="true"[\s\S]*?focusable="false"/gu,
+			)?.length,
+			2,
+		);
+		assert.match(datatableFixture.html, /class="bi bi-chevron-right"/u);
+		assert.match(datatableFixture.html, /class="bi bi-three-dots"/u);
+		assert.match(
+			datatableFixture.html,
+			/<monster-action-button[\s\S]*?data-monster-option-aria-label="More actions for review record"[\s\S]*?"label":"Inspect record"[\s\S]*?"label":"Duplicate record"[\s\S]*?"label":"Archive record"[\s\S]*?class="bi bi-three-dots"[\s\S]*?<\/monster-action-button>/u,
+		);
+		assert.doesNotMatch(
+			datatableFixture.html,
+			/<span class="visually-hidden">More actions for review record<\/span>/u,
+		);
+		assert.match(
+			datatableFixture.html,
+			/"popper":\{"adaptiveSize":false,"boundaryElement":null,"placement":"bottom-end","strategy":"fixed"\}/u,
+		);
+		assert.equal(
+			datatableFixture.html.match(/height="18"[\s\S]*?width="18"/gu)?.length,
+			2,
+		);
+		assert.match(
+			datatableFixture.html,
+			/<monster-button-bar[\s\S]*?style="--monster-control-bar-button-inline-size: 44px; --monster-control-bar-item-flex: 0 0 44px; --monster-control-padding-inline: var\(--monster-space-2\)"/u,
+		);
+		assert.doesNotMatch(
+			datatableFixture.html,
+			/>\s*(?:Open|More)\s*<\/monster-button>/u,
+		);
+	});
+
+	it("uses visible semantic dots for both metric headers", () => {
+		const metricFixture = componentFixtures.find(({ id }) => id === "data");
+
+		assert.ok(metricFixture);
+		assert.match(
+			metricFixture.html,
+			/<monster-metric[\s\S]*?data-monster-option-classes-dot="monster-theme-success-1"/u,
+		);
+		assert.match(
+			metricFixture.html,
+			/<monster-metric-graph[\s\S]*?data-monster-option-classes-dot="monster-theme-error-1"/u,
+		);
+	});
+
+	it("provides inline, popper, and paginated select search fixtures", async () => {
+		const selectionFixture = componentFixtures.find(
+			({ id }) => id === "selection-controls",
+		);
+
+		assert.ok(selectionFixture);
+		for (const id of [
+			"catalog-select-search-inline",
+			"catalog-select-search-popper",
+			"catalog-select-pagination",
+		]) {
+			assert.match(selectionFixture.html, new RegExp(`id="${id}"`, "u"));
+		}
+		assert.match(
+			selectionFixture.html,
+			/"filter":\{"mode":"options","position":"inline"\}/u,
+		);
+		assert.match(
+			selectionFixture.html,
+			/"filter":\{"mode":"options","position":"popper"\}/u,
+		);
+		assert.match(
+			selectionFixture.html,
+			/\/development\/mock\/theme-select-options\.json\?filter=\{filter\}&page=\{page\}&perPage=5/u,
+		);
+		assert.match(selectionFixture.html, /"total":"pagination\.total"/u);
+		assert.match(selectionFixture.html, /"currentPage":"pagination\.page"/u);
+		assert.match(
+			selectionFixture.html,
+			/"objectsPerPage":"pagination\.perPage"/u,
+		);
+
+		const route = themeSelectRoutes.find(
+			({ url }) => url === "/development/mock/theme-select-options.json",
+		);
+		assert.ok(route);
+
+		const requestPage = async (url) => {
+			let body = "";
+			await route.rawResponse(
+				{ url, headers: { host: "example.test" } },
+				{
+					statusCode: null,
+					setHeader() {},
+					end(value) {
+						body = value;
+					},
+				},
+			);
+			return JSON.parse(body);
+		};
+		const secondPage = await requestPage(
+			"/development/mock/theme-select-options.json?filter=&page=2&perPage=5",
+		);
+		assert.equal(secondPage.options.length, 5);
+		assert.deepEqual(secondPage.pagination, {
+			total: 18,
+			page: 2,
+			perPage: 5,
+		});
+
+		const filteredPage = await requestPage(
+			"/development/mock/theme-select-options.json?filter=tabs&page=1&perPage=5",
+		);
+		assert.deepEqual(
+			filteredPage.options.map(({ value }) => value),
+			["tabs", "vertical-tabs"],
+		);
+		assert.equal(filteredPage.pagination.total, 2);
+	});
+
+	it("centers deterministic status icons against their text groups", async () => {
+		const [themeLabMarkup, themeLabStyle] = await Promise.all([
+			readFile(
+				resolve(projectRoot, "development/playground/theme/index.html"),
+				"utf8",
+			),
+			readFile(
+				resolve(projectRoot, "development/playground/theme/style/main.pcss"),
+				"utf8",
+			),
+		]);
+
+		assert.equal(themeLabMarkup.match(/class="status-symbol"/gu)?.length, 4);
+		assert.equal(
+			themeLabMarkup.match(
+				/<span class="status-symbol"[\s\S]*?<svg viewBox="0 0 16 16"/gu,
+			)?.length,
+			4,
+		);
+		assert.match(themeLabStyle, /\.status-card\s*\{\s*align-items:\s*center;/u);
+		assert.match(
+			themeLabStyle,
+			/\.status-symbol svg\s*\{[\s\S]*?display:\s*block;/u,
+		);
+	});
+
+	it("shows every themed foreground and background pair as a text tile", async () => {
+		const [themeLabMarkup, themeLabScript] = await Promise.all([
+			readFile(
+				resolve(projectRoot, "development/playground/theme/index.html"),
+				"utf8",
+			),
+			readFile(
+				resolve(projectRoot, "development/playground/theme/main.mjs"),
+				"utf8",
+			),
+		]);
+		const expectedFamilies = [
+			"primary",
+			"primary-disabled",
+			"secondary",
+			"tertiary",
+			"destructive",
+			"danger",
+			"success",
+			"warning",
+			"error",
+			"selection",
+		];
+
+		assert.deepEqual(
+			themeTokenPairFamilies.map(({ id }) => id),
+			expectedFamilies,
+		);
+		assert.match(themeLabMarkup, /id="token-pair-catalog"/u);
+		assert.match(themeLabScript, /renderTokenPairCatalog\(\);/u);
+		assert.match(themeLabScript, /monster-theme-\$\{family\.id\}-\$\{index\}/u);
+		assert.match(
+			themeLabScript,
+			/--monster-bg-color-\$\{family\.id\}-\$\{index\}/u,
+		);
+		assert.equal(themeTokenPairFamilies.length * 4, 40);
+	});
+
+	it("keeps contrast color samples inside semantic table cells", async () => {
+		const themeLabMarkup = await readFile(
+			resolve(projectRoot, "development/playground/theme/index.html"),
+			"utf8",
+		);
+
+		assert.equal(
+			themeLabMarkup.match(/<td><span data-color-sample><\/span><\/td>/gu)
+				?.length,
+			6,
+		);
+		assert.doesNotMatch(themeLabMarkup, /<td data-color-sample/u);
+	});
+
+	it("keeps familiar bordered pills for table statuses", async () => {
+		const themeLabStyle = await readFile(
+			resolve(projectRoot, "development/playground/theme/style/main.pcss"),
+			"utf8",
+		);
+
+		assert.match(
+			themeLabStyle,
+			/\.status-pill\s*\{[\s\S]*?border:\s*1px solid currentColor;[\s\S]*?border-radius:\s*10rem;[\s\S]*?padding:\s*var\(--monster-space-1\) var\(--monster-space-2\);/u,
+		);
+		assert.doesNotMatch(
+			themeLabStyle,
+			/:root\[data-monster-theme-name="modern"\] \.status-pill/u,
+		);
+	});
+
+	it("keeps multiline display headings clear of adjacent selection rows", async () => {
+		const themeLabStyle = await readFile(
+			resolve(projectRoot, "development/playground/theme/style/main.pcss"),
+			"utf8",
+		);
+
+		assert.match(themeLabStyle, /\.hero h1\s*\{[\s\S]*?line-height:\s*1\.25;/u);
+		assert.match(
+			themeLabStyle,
+			/\.section-heading h2\s*\{[\s\S]*?line-height:\s*1\.25;/u,
+		);
+	});
+
+	it("renders six Nix-supplied Google Font proposal tiles", async () => {
+		const [
+			themeLabMarkup,
+			themeLabStyle,
+			themeLabFontStyle,
+			themeLabScript,
+			flakeSource,
+			commonPackagesSource,
+		] = await Promise.all([
+			readFile(
+				resolve(projectRoot, "development/playground/theme/index.html"),
+				"utf8",
+			),
+			readFile(
+				resolve(projectRoot, "development/playground/theme/style/main.pcss"),
+				"utf8",
+			),
+			readFile(
+				resolve(projectRoot, "development/playground/theme/style/fonts.pcss"),
+				"utf8",
+			),
+			readFile(
+				resolve(projectRoot, "development/playground/theme/main.mjs"),
+				"utf8",
+			),
+			readFile(resolve(projectRoot, "flake.nix"), "utf8"),
+			readFile(resolve(projectRoot, "nix/config/common-packages.nix"), "utf8"),
+		]);
+		const proposalFonts = [
+			["Atkinson Hyperlegible Next", "AtkinsonHyperlegibleNext-Regular"],
+			["Figtree", "Figtree-Regular"],
+			["IBM Plex Sans", "IBMPlexSans-Regular"],
+			["DM Sans", "DMSans-Regular"],
+			["Bricolage Grotesque", "BricolageGrotesque-Regular"],
+			["Lexend", "Lexend-Regular"],
+		];
+
+		assert.match(themeLabMarkup, /id="typography-proposals"/u);
+		assert.equal(
+			themeLabMarkup.match(/data-font-proposal(?:\s|>)/gu)?.length,
+			6,
+		);
+		for (const [family, localName] of proposalFonts) {
+			assert.match(
+				themeLabMarkup,
+				new RegExp(`data-font-family="${family}"`, "u"),
+			);
+			assert.ok(
+				themeLabFontStyle.includes(`local("${localName}")`),
+				`${family} must resolve from the local Nix font package`,
+			);
+		}
+		assert.equal(themeLabFontStyle.match(/@font-face/gu)?.length, 6);
+		assert.match(
+			themeLabMarkup,
+			/03 · Humanist[\s\S]*?<code>IBM Plex Sans<\/code>/u,
+		);
+		assert.doesNotMatch(themeLabMarkup, /fonts\.googleapis\.com/u);
+		assert.match(themeLabScript, /import "\.\/style\/fonts\.pcss";/u);
+		assert.match(commonPackagesSource, /\bgoogle-fonts\b/u);
+		assert.match(
+			flakeSource,
+			/FONTCONFIG_FILE = fontConfig;[\s\S]*FONTCONFIG_FILE = fontConfig;/u,
+		);
+		assert.match(
+			themeLabMarkup,
+			/data-font-proposal[\s\S]*?<h3>[\s\S]*?<h4>[\s\S]*?<p>[\s\S]*?<button/u,
+		);
+		assert.match(
+			themeLabStyle,
+			/\.font-proposal-grid\s*\{[\s\S]*?grid-template-columns:\s*repeat\(3,\s*minmax\(0,\s*1fr\)\);/u,
+		);
+		assert.match(
+			themeLabStyle,
+			/\.font-proposal-actions button\s*\{[\s\S]*?font-family:\s*var\(--font-proposal-family\);[\s\S]*?min-height:\s*3rem;/u,
+		);
+	});
+
+	it("gives the date-range sandbox enough room for its popper", async () => {
+		const themeLabStyle = await readFile(
+			resolve(projectRoot, "development/playground/theme/style/main.pcss"),
+			"utf8",
+		);
+
+		assert.match(
+			themeLabStyle,
+			/\.sandbox-specimen\[data-sandbox-tag="monster-filter-date-range"\][\s\S]*?min-height:\s*34rem;/u,
+		);
+	});
+
+	it("bounds the controlled iframe fixture without viewport-height feedback", async () => {
+		const themeLabStyle = await readFile(
+			resolve(projectRoot, "development/playground/theme/style/main.pcss"),
+			"utf8",
+		);
+
+		assert.match(
+			themeLabStyle,
+			/\.sandbox-specimen\[data-sandbox-tag="monster-iframe"\][\s\S]*?block-size:\s*18rem;[\s\S]*?min-height:\s*0;/u,
+		);
+	});
+
+	it("uses an editorial hierarchy instead of repeated rounded cards", async () => {
+		const themeLabStyle = await readFile(
+			resolve(projectRoot, "development/playground/theme/style/main.pcss"),
+			"utf8",
+		);
+
+		assert.match(
+			themeLabStyle,
+			/:root\[data-monster-theme-name="modern"\] \.lab-header\s*\{[\s\S]*?border-radius:\s*0;[\s\S]*?box-shadow:\s*none;/u,
+		);
+		assert.match(
+			themeLabStyle,
+			/:root\[data-monster-theme-name="modern"\] \.token-pair-card\s*\{[\s\S]*?border-top:\s*3px solid currentColor;[\s\S]*?box-shadow:\s*none;/u,
+		);
+		assert.match(
+			themeLabStyle,
+			/:root\[data-monster-theme-name="modern"\] \.component-family-navigation a\s*\{[\s\S]*?border-bottom:\s*1px solid/u,
+		);
+	});
+
+	it("uses semantic state and focus tokens in audited component styles", async () => {
+		const metricStyle = await readFile(
+			resolve(componentsRoot, "data/style/metric.pcss"),
+			"utf8",
+		);
+		const buttonStyle = await readFile(
+			resolve(componentsRoot, "style/button.pcss"),
+			"utf8",
+		);
+		const treeMenuStyle = await readFile(
+			resolve(componentsRoot, "tree-menu/style/tree-menu.pcss"),
+			"utf8",
+		);
+
+		assert.match(buttonStyle, /\.monster-button-destructive/u);
+		assert.match(buttonStyle, /--monster-bg-color-destructive-1/u);
+		assert.match(metricStyle, /--monster-theme-success/u);
+		assert.match(metricStyle, /--monster-theme-error/u);
+		assert.doesNotMatch(metricStyle, /\.positive[\s\S]*--monster-color-red/u);
+		assert.match(treeMenuStyle, /:focus-visible/u);
+		assert.match(treeMenuStyle, /--monster-focus-ring-color/u);
+		assert.doesNotMatch(treeMenuStyle, /prefers-color-scheme/u);
+	});
+});
+
+async function readRegisteredComponentTags() {
+	const entries = await readdir(componentsRoot, {
+		recursive: true,
+		withFileTypes: true,
+	});
+	const tags = new Set();
+
+	for (const entry of entries) {
+		if (!entry.isFile() || !entry.name.endsWith(".mjs")) {
+			continue;
+		}
+
+		const filename = resolve(entry.parentPath, entry.name);
+		const source = await readFile(filename, "utf8");
+		if (!/^\s*registerCustomElement\(/mu.test(source)) {
+			continue;
+		}
+
+		const match = source.match(/return\s+"(monster-[^"]+)"/u);
+		assert.ok(match, `registered component has no static tag in ${filename}`);
+		tags.add(match[1]);
+	}
+
+	return [...tags].sort();
+}