@schukai/monster 4.149.0 → 4.150.0

package/test/cases/components/style/form-controls.mjs

@@ -11,6 +11,19 @@ const generatedStyleSheet = readFileSync(
 );
 
 describe("Global form controls", () => {
+	it("preserves native readonly styling across shadow tree scopes", () => {
+		expect(formSource).to.match(
+			/input\[readonly\]:not\(\[type="checkbox"\]\):not\(\[type="radio"\]\),\s*textarea\[readonly\] \{[^}]*background-color: var\(--monster-bg-color-primary-2\);[^}]*color: var\(--monster-color-primary-2\);[^}]*cursor: default;/s,
+		);
+		expect(formSource).to.include(":not([readonly]):not([disabled])");
+		expect(generatedStyleSheet).to.include(
+			"input[readonly]:not([type=checkbox]):not([type=radio]),textarea[readonly]",
+		);
+		expect(generatedStyleSheet).to.include(
+			"background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default",
+		);
+	});
+
 	it("keeps native choice controls separate from text-control sizing", () => {
 		expect(formSource).to.include(
 			'input:not([type="checkbox"]):not([type="radio"]),',

package/test/cases/components/style/theme-accent.mjs

@@ -0,0 +1,137 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { join, relative, resolve } from "node:path";
+import { expect } from "chai";
+
+const projectRoot = resolve(import.meta.dirname, "../../../..");
+const componentRoot = join(projectRoot, "source/components");
+
+const sourceFiles = {
+	tabs: "layout/style/tabs.pcss",
+	verticalTabs: "layout/style/vertical-tabs.pcss",
+	choiceCards: "form/style/choice-cards.pcss",
+	select: "form/style/select.pcss",
+	variantSelect: "form/style/variant-select.pcss",
+	datatable: "datatable/style/datatable.pcss",
+	treeMenu: "tree-menu/style/tree-menu.pcss",
+	themeModern: "style/theme-modern.pcss",
+};
+
+const generatedFiles = {
+	tabs: "layout/stylesheet/tabs.mjs",
+	verticalTabs: "layout/stylesheet/vertical-tabs.mjs",
+	choiceCards: "form/stylesheet/choice-cards.mjs",
+	select: "form/stylesheet/select.mjs",
+	variantSelect: "form/stylesheet/variant-select.mjs",
+	datatable: "datatable/stylesheet/datatable.mjs",
+	treeMenu: "tree-menu/stylesheet/tree-menu.mjs",
+	toggleSwitch: "form/stylesheet/toggle-switch.mjs",
+	themeModern: "stylesheet/theme-modern.mjs",
+};
+
+describe("Theme accent contract", () => {
+	it("gives every native accent-color declaration a legacy fallback", () => {
+		const declarations = [];
+
+		for (const file of walkPcssFiles(componentRoot)) {
+			const source = readFileSync(file, "utf8");
+			for (const match of source.matchAll(/accent-color:\s*([^;]+);/gu)) {
+				declarations.push({
+					file: relative(componentRoot, file),
+					value: match[1],
+				});
+			}
+		}
+
+		expect(declarations).to.have.length.greaterThan(0);
+		for (const { file, value } of declarations) {
+			expect(value, file).to.include("--monster-theme-accent");
+			expect(value, file).to.match(
+				/var\(\s*--monster-theme-accent,\s*var\(\s*--monster-/u,
+			);
+		}
+	});
+
+	it("uses the accent pair for active and selected controls", () => {
+		const sources = Object.fromEntries(
+			Object.entries(sourceFiles).map(([name, file]) => [
+				name,
+				readFileSync(join(componentRoot, file), "utf8"),
+			]),
+		);
+
+		for (const name of [
+			"tabs",
+			"verticalTabs",
+			"choiceCards",
+			"select",
+			"variantSelect",
+			"datatable",
+			"treeMenu",
+		]) {
+			expect(sources[name], name).to.include("--monster-theme-accent");
+		}
+
+		for (const name of ["select", "variantSelect", "datatable", "treeMenu"]) {
+			expect(sources[name], name).to.include("--monster-theme-accent-subtle");
+		}
+
+		expect(sources.choiceCards).to.include("--monster-theme-on-accent");
+		const toggleSwitch = readFileSync(
+			join(componentRoot, "form/style/toggle-switch.pcss"),
+			"utf8",
+		);
+		expect(toggleSwitch).to.match(
+			/\.switch\[data-monster-state="on"\] \.switch-slider[\s\S]*?--monster-theme-accent[\s\S]*?--monster-theme-on-accent/u,
+		);
+		expect(sources.themeModern).to.include(
+			"--monster-tabs-button-active-color: var(--monster-theme-accent)",
+		);
+		expect(sources.themeModern).to.include(
+			"--monster-tabs-button-active-border-color: var(--monster-theme-accent)",
+		);
+		expect(sources.themeModern).to.include(
+			"--monster-theme-on-bg-color: var(--monster-theme-accent)",
+		);
+	});
+
+	it("ships the accent contract in generated component styles", () => {
+		for (const [name, file] of Object.entries(generatedFiles)) {
+			const generated = readFileSync(join(componentRoot, file), "utf8");
+			expect(generated, name).to.include("--monster-theme-accent");
+		}
+
+		const generatedTheme = readFileSync(
+			join(componentRoot, generatedFiles.themeModern),
+			"utf8",
+		);
+		expect(generatedTheme).to.include(
+			"--monster-tabs-button-active-color:var(--monster-theme-accent)",
+		);
+		expect(generatedTheme).to.include(
+			"--monster-theme-on-bg-color:var(--monster-theme-accent)",
+		);
+	});
+
+	it("keeps generated stylesheet imports independent of the checkout path", () => {
+		for (const file of walkFiles(componentRoot, ".mjs")) {
+			const source = readFileSync(file, "utf8");
+			expect(source, relative(componentRoot, file)).not.to.match(
+				/from\s+"[^"]*monster\/source\//u,
+			);
+		}
+	});
+});
+
+function walkPcssFiles(directory) {
+	return walkFiles(directory, ".pcss");
+}
+
+function walkFiles(directory, extension) {
+	return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+		const path = join(directory, entry.name);
+		if (entry.isDirectory()) {
+			return walkFiles(path, extension);
+		}
+		return entry.isFile() && entry.name.endsWith(extension) ? [path] : [];
+	});
+}

package/test/cases/components/style/theme-modern.mjs

@@ -85,6 +85,9 @@ const requiredCompatibilityTokens = [
 ];
 
 const contrastPairs = [
+	["theme-accent", "theme-surface-canvas", 4.5],
+	["theme-accent", "theme-surface", 4.5],
+	["theme-accent", "theme-accent-subtle", 4.5],
 	["theme-text", "theme-surface-canvas", 4.5],
 	["theme-text", "theme-surface", 4.5],
 	["theme-text-secondary", "theme-surface", 4.5],
@@ -227,7 +230,13 @@ describe("Modern theme stylesheet", () => {
 			"--monster-split-panel-handle-border-radius:999px",
 		);
 		expect(generatedCss).to.include(
-			"--monster-tabs-button-active-border-color:var(--monster-theme-tertiary)",
+			"--monster-tabs-button-active-border-color:var(--monster-theme-accent)",
+		);
+		expect(generatedCss).to.include(
+			"--monster-tabs-button-active-color:var(--monster-theme-accent)",
+		);
+		expect(generatedCss).to.include(
+			"--monster-theme-on-bg-color:var(--monster-theme-accent)",
 		);
 		expect(generatedCss).to.include(
 			"--monster-tabs-indicator-active-opacity:0",