@schukai/monster 4.148.8 → 4.149.0

package/test/cases/components/host/toggle-button.mjs

@@ -0,0 +1,50 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+
+describe("ToggleButton", function () {
+	before(async function () {
+		await initJSDOM({});
+		await import("../../../../source/components/host/toggle-button.mjs");
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should expose a native button trigger and toggle the referenced target", async function () {
+		const mocks = document.getElementById("mocks");
+		const target = document.createElement("div");
+		const toggleButton = document.createElement("monster-toggle-button");
+		let toggleCount = 0;
+
+		target.className = "toggle-target";
+		target.toggle = () => {
+			toggleCount++;
+		};
+		toggleButton.setOptions({
+			references: {
+				callableSelector: [".toggle-target"],
+			},
+			labels: {
+				button: "Toggle details",
+			},
+		});
+		mocks.append(target, toggleButton);
+
+		await new Promise((resolve) => setTimeout(resolve, 0));
+
+		const trigger = toggleButton.shadowRoot.querySelector(
+			'[data-monster-role="call-button"]',
+		);
+
+		expect(trigger).to.be.instanceof(HTMLButtonElement);
+		expect(trigger.type).to.equal("button");
+		expect(trigger.hasAttribute("href")).to.equal(false);
+
+		trigger.click();
+
+		expect(toggleCount).to.equal(1);
+	});
+});

package/test/cases/components/layout/full-screen.mjs

@@ -0,0 +1,60 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const componentSource = readFileSync(
+	new URL(
+		"../../../../source/components/layout/full-screen.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+const styleSource = readFileSync(
+	new URL(
+		"../../../../source/components/layout/style/full-screen.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const generatedStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/layout/stylesheet/full-screen.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("FullScreen", () => {
+	it("exposes the fullscreen control as a named toggle button", () => {
+		expect(componentSource).to.include(
+			'<button type="button" data-monster-role="control" part="control"',
+		);
+		expect(componentSource).to.include('aria-label="Enter full screen"');
+		expect(componentSource).to.include('aria-pressed="false"');
+		expect(componentSource).to.include(
+			'isFullScreen ? "Exit full screen" : "Enter full screen"',
+		);
+		expect(componentSource).to.include(
+			'element.setAttribute("aria-pressed", isFullScreen ? "true" : "false")',
+		);
+		expect(componentSource).to.include(
+			"rootNode?.fullscreenElement || document.fullscreenElement",
+		);
+	});
+
+	it("uses theme-aware control states and a visible keyboard focus ring", () => {
+		for (const token of [
+			"--monster-full-screen-control-size",
+			"--monster-full-screen-control-background-color",
+			"--monster-full-screen-control-hover-background-color",
+			"--monster-full-screen-control-active-background-color",
+			"--monster-full-screen-control-border-radius",
+			"--monster-focus-ring-color",
+		]) {
+			expect(styleSource, token).to.include(token);
+			expect(generatedStyleSheet, token).to.include(token);
+		}
+
+		expect(styleSource).to.include(":focus-visible");
+		expect(styleSource).to.include("prefers-reduced-motion: reduce");
+	});
+});

package/test/cases/components/layout/iframe-accessibility.mjs

@@ -0,0 +1,44 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const { expect } = chai;
+const nextTask = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe("Iframe accessibility", function () {
+	before(async () => {
+		await initJSDOM();
+		globalThis.ResizeObserver ??= ResizeObserverMock;
+		await import("../../../../source/components/layout/iframe.mjs");
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("should provide and update a configurable native iframe title", async function () {
+		const component = document.createElement("monster-iframe");
+		document.getElementById("mocks").append(component);
+		await nextTask();
+		const iframe = component.shadowRoot.querySelector("iframe");
+
+		expect(iframe.getAttribute("title")).to.equal("Embedded content");
+		component.setOption("labels.title", "Account preview");
+		await nextTask();
+		expect(iframe.getAttribute("title")).to.equal("Account preview");
+	});
+
+	it("should accept its title through the public option attribute", async function () {
+		const component = document.createElement("monster-iframe");
+		component.setAttribute(
+			"data-monster-option-labels-title",
+			"Theme Lab fixture",
+		);
+		document.getElementById("mocks").append(component);
+		await nextTask();
+
+		expect(
+			component.shadowRoot.querySelector("iframe").getAttribute("title"),
+		).to.equal("Theme Lab fixture");
+	});
+});

package/test/cases/components/layout/popper.mjs

@@ -0,0 +1,128 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+
+describe("Popper", function () {
+	this.timeout(10000);
+
+	before(async function () {
+		await initJSDOM({});
+		await import("../../../../source/components/layout/popper.mjs");
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should position against the assigned button instead of the full-width control", async function () {
+		const mocks = document.getElementById("mocks");
+		const host = document.createElement("monster-popper");
+		const button = document.createElement("button");
+
+		button.slot = "button";
+		button.textContent = "Open";
+		host.setOptions({
+			mode: "manual",
+			content: "<p>Actions</p>",
+			popper: {
+				placement: "bottom",
+				middleware: [],
+			},
+		});
+		host.appendChild(button);
+		mocks.appendChild(host);
+
+		await waitForTimeout();
+
+		const control = host.shadowRoot.querySelector(
+			'[data-monster-role="control"]',
+		);
+		const popper = host.shadowRoot.querySelector(
+			'[data-monster-role="popper"]',
+		);
+
+		setElementRect(control, {
+			x: 100,
+			y: 100,
+			width: 500,
+			height: 40,
+		});
+		setElementRect(button, {
+			x: 100,
+			y: 100,
+			width: 120,
+			height: 40,
+		});
+		setElementRect(popper, {
+			x: 0,
+			y: 0,
+			width: 200,
+			height: 80,
+		});
+
+		host.showDialog();
+
+		await waitForCondition(() => popper.style.transform !== "");
+
+		expect(popper.style.transform).to.contain("translate(60px,140px)");
+		host.hideDialog();
+	});
+});
+
+function setElementRect(element, { x, y, width, height }) {
+	const rect = {
+		x,
+		y,
+		width,
+		height,
+		top: y,
+		left: x,
+		right: x + width,
+		bottom: y + height,
+	};
+
+	element.getBoundingClientRect = () => rect;
+	for (const [property, value] of Object.entries({
+		offsetWidth: width,
+		offsetHeight: height,
+		clientWidth: width,
+		clientHeight: height,
+	})) {
+		Object.defineProperty(element, property, {
+			configurable: true,
+			value,
+		});
+	}
+}
+
+function waitForTimeout(timeout = 0) {
+	return new Promise((resolve) => setTimeout(resolve, timeout));
+}
+
+function waitForCondition(check, { timeout = 1000, interval = 10 } = {}) {
+	const deadline = Date.now() + timeout;
+
+	return new Promise((resolve, reject) => {
+		const tick = () => {
+			try {
+				if (check()) {
+					resolve();
+					return;
+				}
+			} catch (error) {
+				reject(error);
+				return;
+			}
+
+			if (Date.now() >= deadline) {
+				reject(new Error("Timed out waiting for condition."));
+				return;
+			}
+
+			setTimeout(tick, interval);
+		};
+
+		tick();
+	});
+}

package/test/cases/components/layout/slit-panel.mjs

@@ -7,6 +7,7 @@ const expect = chai.expect;
 chai.use(chaiDom);
 
 const global = getGlobal();
+let SplitPanel;
 
 // language=html
 const html1 = `
@@ -32,7 +33,11 @@ describe("SplitScreen", () => {
 			}
 
 			promises.push(
-				import("../../../../source/components/layout/split-panel.mjs"),
+				import("../../../../source/components/layout/split-panel.mjs").then(
+					(module) => {
+						SplitPanel = module.SplitPanel;
+					},
+				),
 			);
 
 			Promise.all(promises)
@@ -69,6 +74,30 @@ describe("SplitScreen", () => {
 			}, 0);
 		});
 
+		it("should expose a visible theme-aware drag handle", () => {
+			const cssText = SplitPanel.getCSSStyleSheet()
+				.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+				.map((rule) => rule.cssText)
+				.join("\n");
+
+			expect(cssText).to.contain(
+				"--monster-split-panel-dragger-background-color",
+			);
+			expect(cssText).to.contain(
+				"--monster-split-panel-dragger-hover-background-color",
+			);
+			expect(cssText).to.contain(
+				"--monster-split-panel-handle-background-color",
+			);
+			expect(cssText).to.contain(
+				"--monster-split-panel-handle-hover-background-color",
+			);
+			expect(cssText).to.contain("--monster-split-panel-transition-duration");
+			expect(cssText).to.contain("--monster-split-panel-handle-active-scale");
+			expect(cssText).to.contain("cursor: inherit");
+			expect(cssText).to.contain("prefers-reduced-motion");
+		});
+
 		it("should use the configured dragger width for vertical panel dimensions", (done) => {
 			const mocks = document.getElementById("mocks");
 			mocks.innerHTML = html1;

package/test/cases/components/layout/tabs.mjs

@@ -342,6 +342,46 @@ describe("Tabs", function () {
 			mocks.innerHTML = "";
 		});
 
+		it("should expose an accessible theme-aware appearance", function () {
+			const cssText = Tabs.getCSSStyleSheet()
+				.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+				.map((rule) => rule.cssText)
+				.join("\n");
+
+			expect(cssText).to.contain("--monster-tabs-nav-background-color");
+			expect(cssText).to.contain("--monster-tabs-nav-align-items");
+			expect(cssText).to.contain("--monster-tabs-button-color");
+			expect(cssText).to.contain(
+				"--monster-tabs-button-active-background-color",
+			);
+			expect(cssText).to.contain("--monster-tabs-indicator-inline-size");
+			expect(cssText).to.contain("--monster-tabs-indicator-active-opacity");
+			expect(cssText).to.contain("button:before");
+			expect(cssText).to.contain("prefers-reduced-motion");
+			expect(cssText).to.contain(":focus-visible");
+			expect(cssText).to.contain(
+				"min-height: var(--monster-tabs-button-min-block-size",
+			);
+		});
+
+		it("should expose a readable theme-aware vertical layout", function () {
+			const cssText = VerticalTabs.getCSSStyleSheet()
+				.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+				.map((rule) => rule.cssText)
+				.join("\n");
+
+			expect(cssText).to.contain("--monster-vertical-tabs-control-gap");
+			expect(cssText).to.contain(
+				"--monster-vertical-tabs-control-min-block-size",
+			);
+			expect(cssText).to.contain("--monster-vertical-tabs-nav-block-size");
+			expect(cssText).to.contain("--monster-vertical-tabs-nav-min-block-size");
+			expect(cssText).to.contain("--monster-vertical-tabs-nav-min-inline-size");
+			expect(cssText).to.contain("--monster-vertical-tabs-nav-max-block-size");
+			expect(cssText).to.contain("--monster-vertical-tabs-label-writing-mode");
+			expect(cssText).to.contain("horizontal-tb");
+		});
+
 		it("should have buttons and tabs", function (done) {
 			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = html1;
@@ -475,6 +515,59 @@ describe("Tabs", function () {
 			}, 0);
 		});
 
+		it("should name overflow switches and expose their expanded state", async function () {
+			const mocks = document.getElementById("mocks");
+			mocks.innerHTML = `${html1}${htmlVerticalIconModes}`;
+
+			const tabs = document.getElementById("mytabs");
+			const verticalTabs = document.getElementById("vertical-icon-mode-tabs");
+			await waitForCondition(() => {
+				return Boolean(
+					tabs.shadowRoot?.querySelector('[data-monster-role="switch"]') &&
+						verticalTabs.shadowRoot?.querySelector(
+							'[data-monster-role="switch"]',
+						),
+				);
+			});
+
+			for (const element of [tabs, verticalTabs]) {
+				const switchButton = element.shadowRoot.querySelector(
+					'[data-monster-role="switch"]',
+				);
+				const popper = element.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(switchButton.type).to.equal("button");
+				expect(switchButton.getAttribute("aria-label")).to.equal("More tabs");
+				expect(switchButton.getAttribute("aria-controls")).to.equal(popper.id);
+				expect(switchButton.getAttribute("aria-expanded")).to.equal("false");
+			}
+
+			tabs.setOption("labels.moreActions", "Additional sections");
+			await waitForCondition(() => {
+				return (
+					tabs.shadowRoot
+						.querySelector('[data-monster-role="switch"]')
+						.getAttribute("aria-label") === "Additional sections"
+				);
+			});
+
+			const switchButton = tabs.shadowRoot.querySelector(
+				'[data-monster-role="switch"]',
+			);
+			switchButton.click();
+			expect(switchButton.getAttribute("aria-expanded")).to.equal("true");
+			switchButton.dispatchEvent(
+				new KeyboardEvent("keydown", {
+					key: "Escape",
+					bubbles: true,
+					composed: true,
+				}),
+			);
+			expect(switchButton.getAttribute("aria-expanded")).to.equal("false");
+			expect(tabs.shadowRoot.activeElement).to.equal(switchButton);
+		});
+
 		it("should move overflowing tabs into the popper without losing them", function (done) {
 			this.timeout(15000);
 

package/test/cases/components/navigation/table-of-content.mjs

@@ -159,6 +159,24 @@ describe('TableOfContent', function () {
 		expect(navigation.style.top).to.equal('');
 	});
 
+	it('should position the navigation popper against the fixed trigger without an ancestor clipping boundary', async function () {
+		const target = document.getElementById('target');
+		const tableOfContent = document.createElement('monster-table-of-content');
+		const heading = document.createElement('h2');
+
+		heading.textContent = 'Introduction';
+		tableOfContent.appendChild(heading);
+		target.appendChild(tableOfContent);
+
+		const popper = tableOfContent.shadowRoot.querySelector('monster-popper');
+
+		await waitForCondition(() => {
+			return popper.getOption('popper.boundaryElement') === null;
+		});
+
+		expect(popper.getOption('popper.boundaryElement')).to.equal(null);
+	});
+
 	it('should enable scroll following at runtime', async function () {
 		const target = document.getElementById('target');
 		const outerScroller = document.createElement('div');

package/test/cases/components/state/state-style.mjs

@@ -0,0 +1,31 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const stateStyleSource = readFileSync(
+	new URL(
+		"../../../../source/components/state/style/state.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const generatedStateStyle = readFileSync(
+	new URL(
+		"../../../../source/components/state/stylesheet/state.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("State visual styles", () => {
+	it("inherits the current text color for slotted SVG fills", () => {
+		expect(stateStyleSource).to.include("::slotted([slot=visual])");
+		expect(stateStyleSource).to.include("::slotted([part=visual])");
+		expect(stateStyleSource).to.include("fill: currentColor");
+	});
+
+	it("keeps the generated state stylesheet in sync", () => {
+		expect(generatedStateStyle).to.include(
+			"::slotted([part=visual]),::slotted([slot=visual]){fill:currentColor}",
+		);
+	});
+});

package/test/cases/components/style/action-menu.mjs

@@ -0,0 +1,74 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const sources = new Map(
+	[
+		["button bar", "form/style/button-bar.pcss"],
+		["action button", "form/style/action-button.pcss"],
+		["sheet context menu", "form/style/sheet.pcss"],
+		["tab overflow", "layout/style/tabs.pcss"],
+	].map(([name, path]) => [
+		name,
+		readFileSync(
+			new URL(`../../../../source/components/${path}`, import.meta.url),
+			"utf8",
+		),
+	]),
+);
+
+const generatedSources = new Map(
+	[
+		["button bar", "form/stylesheet/button-bar.mjs"],
+		["action button", "form/stylesheet/action-button.mjs"],
+		["sheet context menu", "form/stylesheet/sheet.mjs"],
+		["tab overflow", "layout/stylesheet/tabs.mjs"],
+	].map(([name, path]) => [
+		name,
+		readFileSync(
+			new URL(`../../../../source/components/${path}`, import.meta.url),
+			"utf8",
+		),
+	]),
+);
+
+describe("Shared action menu styles", () => {
+	it("uses the same popper frame tokens in every action menu", () => {
+		for (const [name, source] of sources) {
+			for (const token of [
+				"--monster-action-menu-padding",
+				"--monster-action-menu-border-width",
+				"--monster-action-menu-border-style",
+				"--monster-action-menu-border-color",
+				"--monster-action-menu-border-radius",
+				"--monster-action-menu-box-shadow",
+			]) {
+				expect(source, `${name}: ${token}`).to.include(token);
+			}
+		}
+	});
+
+	it("uses the same padding and border contract for every menu item", () => {
+		for (const [name, source] of sources) {
+			for (const token of [
+				"--monster-action-menu-item-min-block-size",
+				"--monster-action-menu-item-padding",
+				"--monster-action-menu-item-border-width",
+				"--monster-action-menu-item-border-radius",
+				"--monster-action-menu-item-hover-background-color",
+			]) {
+				expect(source, `${name}: ${token}`).to.include(token);
+			}
+		}
+	});
+
+	it("keeps generated component styles in sync", () => {
+		for (const [name, source] of generatedSources) {
+			expect(source, `${name}: frame`).to.include(
+				"--monster-action-menu-padding",
+			);
+			expect(source, `${name}: item`).to.include(
+				"--monster-action-menu-item-padding",
+			);
+		}
+	});
+});

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

@@ -0,0 +1,37 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const formSource = readFileSync(
+	new URL("../../../../source/components/style/form.pcss", import.meta.url),
+	"utf8",
+);
+const generatedStyleSheet = readFileSync(
+	new URL("../../../../source/components/stylesheet/form.mjs", import.meta.url),
+	"utf8",
+);
+
+describe("Global form controls", () => {
+	it("keeps native choice controls separate from text-control sizing", () => {
+		expect(formSource).to.include(
+			'input:not([type="checkbox"]):not([type="radio"]),',
+		);
+		expect(formSource).to.include(
+			'input:is([type="checkbox"], [type="radio"])',
+		);
+		expect(formSource).to.match(
+			/input:is\(\[type="checkbox"\], \[type="radio"\]\) \{[^}]*block-size: 1rem;[^}]*inline-size: 1rem;[^}]*min-height: 0;[^}]*padding: 0;[^}]*vertical-align: middle;/s,
+		);
+	});
+
+	it("keeps the generated stylesheet synchronized", () => {
+		expect(generatedStyleSheet).to.include(
+			'input:not([type=checkbox]):not([type=radio])',
+		);
+		expect(generatedStyleSheet).to.include(
+			'input:is([type=checkbox],[type=radio])',
+		);
+		expect(generatedStyleSheet).to.include(
+			"block-size:1rem;inline-size:1rem;min-height:0;padding:0;vertical-align:middle",
+		);
+	});
+});

package/test/cases/components/style/kpi-tile.mjs

@@ -0,0 +1,60 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const kpiTileSource = readFileSync(
+	new URL(
+		"../../../../source/components/data/style/kpi-tile.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const kpiTileStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/data/stylesheet/kpi-tile.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("KpiTile styles", () => {
+	it("keeps long headings intact and uses normal title casing", () => {
+		for (const declaration of [
+			"hyphens: none",
+			"overflow-wrap: normal",
+			"text-transform: none",
+			"word-break: normal",
+		]) {
+			expect(kpiTileSource).to.include(declaration);
+			expect(kpiTileStyleSheet).to.include(declaration.replace(": ", ":"));
+		}
+	});
+
+	it("aligns the default tile with the metric card hierarchy", () => {
+		for (const token of [
+			"--monster-theme-surface",
+			"--monster-theme-text",
+			"--monster-theme-border",
+			"--monster-theme-accent",
+		]) {
+			expect(kpiTileSource).to.include(token);
+			expect(kpiTileStyleSheet).to.include(token);
+		}
+
+		expect(kpiTileSource).to.include("width: 15rem");
+		expect(kpiTileSource).to.include("height: 12rem");
+		expect(kpiTileSource).to.include(
+			"grid-template-rows: 2.75rem 2.5rem minmax(0, 1fr)",
+		);
+		expect(kpiTileSource).to.include("align-items: flex-start");
+		expect(kpiTileSource).to.include("text-align: left");
+	});
+
+	it("preserves the unboxed compact variant", () => {
+		expect(kpiTileSource).to.match(
+			/:host\(\.small\) \[data-monster-role="control"\]\s*\{[\s\S]*?background:\s*transparent;[\s\S]*?border:\s*0;[\s\S]*?box-shadow:\s*none;[\s\S]*?height:\s*auto;[\s\S]*?width:\s*fit-content;/u,
+		);
+		expect(kpiTileStyleSheet).to.include(
+			":host(.small) [data-monster-role=control]{background:transparent;border:0;border-radius:0;box-shadow:none",
+		);
+	});
+});