@schukai/monster 4.149.1 → 4.150.1

package/source/i18n/time-ago.mjs

@@ -439,6 +439,135 @@ const translations = {
 		},
 	},
 
+	bn: {
+		template: {
+			on: (value) => `${value}-এ`,
+			past: (value) => `${value} আগে`,
+			future: (value) => `${value} পরে`,
+			justNow: () => `এইমাত্র`,
+		},
+		units: {
+			day: {
+				zero: "দিন",
+				one: "দিন",
+				two: "দিন",
+				few: "দিন",
+				many: "দিন",
+				other: "দিন",
+			},
+			hour: {
+				zero: "ঘণ্টা",
+				one: "ঘণ্টা",
+				two: "ঘণ্টা",
+				few: "ঘণ্টা",
+				many: "ঘণ্টা",
+				other: "ঘণ্টা",
+			},
+			minute: {
+				zero: "মিনিট",
+				one: "মিনিট",
+				two: "মিনিট",
+				few: "মিনিট",
+				many: "মিনিট",
+				other: "মিনিট",
+			},
+			second: {
+				zero: "সেকেন্ড",
+				one: "সেকেন্ড",
+				two: "সেকেন্ড",
+				few: "সেকেন্ড",
+				many: "সেকেন্ড",
+				other: "সেকেন্ড",
+			},
+		},
+	},
+
+	pa: {
+		template: {
+			on: (value) => `${value} ਨੂੰ`,
+			past: (value) => `${value} ਪਹਿਲਾਂ`,
+			future: (value) => `${value} ਬਾਅਦ`,
+			justNow: () => `ਹੁਣੇ`,
+		},
+		units: {
+			day: {
+				zero: "ਦਿਨ",
+				one: "ਦਿਨ",
+				two: "ਦਿਨ",
+				few: "ਦਿਨ",
+				many: "ਦਿਨ",
+				other: "ਦਿਨ",
+			},
+			hour: {
+				zero: "ਘੰਟੇ",
+				one: "ਘੰਟਾ",
+				two: "ਘੰਟੇ",
+				few: "ਘੰਟੇ",
+				many: "ਘੰਟੇ",
+				other: "ਘੰਟੇ",
+			},
+			minute: {
+				zero: "ਮਿੰਟ",
+				one: "ਮਿੰਟ",
+				two: "ਮਿੰਟ",
+				few: "ਮਿੰਟ",
+				many: "ਮਿੰਟ",
+				other: "ਮਿੰਟ",
+			},
+			second: {
+				zero: "ਸਕਿੰਟ",
+				one: "ਸਕਿੰਟ",
+				two: "ਸਕਿੰਟ",
+				few: "ਸਕਿੰਟ",
+				many: "ਸਕਿੰਟ",
+				other: "ਸਕਿੰਟ",
+			},
+		},
+	},
+
+	mr: {
+		template: {
+			on: (value) => `${value} रोजी`,
+			past: (value) => `${value} पूर्वी`,
+			future: (value) => `${value} नंतर`,
+			justNow: () => `आत्ताच`,
+		},
+		units: {
+			day: {
+				zero: "दिवस",
+				one: "दिवस",
+				two: "दिवस",
+				few: "दिवस",
+				many: "दिवस",
+				other: "दिवस",
+			},
+			hour: {
+				zero: "तास",
+				one: "तास",
+				two: "तास",
+				few: "तास",
+				many: "तास",
+				other: "तास",
+			},
+			minute: {
+				zero: "मिनिटे",
+				one: "मिनिट",
+				two: "मिनिटे",
+				few: "मिनिटे",
+				many: "मिनिटे",
+				other: "मिनिटे",
+			},
+			second: {
+				zero: "सेकंद",
+				one: "सेकंद",
+				two: "सेकंद",
+				few: "सेकंद",
+				many: "सेकंद",
+				other: "सेकंद",
+			},
+		},
+	},
+
 	pt: {
 		template: {
 			on: (value) => `em ${value}`,

package/test/cases/components/datatable/datasource-rest-lifecycle.mjs

@@ -335,7 +335,7 @@ describe("REST datasource lifecycle", function () {
 		expectNoPendingChanges(second);
 	});
 
-	it("preserves a read baseline when the save write finishes later", async function () {
+	it("preserves the exact read baseline when the save write finishes later", async function () {
 		const datasource = createDatasource("read-first-datasource");
 		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
 		const written = { data: [{ id: "area-1", name: "Written change" }] };
@@ -373,6 +373,14 @@ describe("REST datasource lifecycle", function () {
 		writeResult.resolve({ ok: true });
 		await waitForUpdates();
 		expectPendingChanges(button);
+
+		datasource.data = refreshed;
+		await waitForUpdates();
+		expectNoPendingChanges(button);
+
+		datasource.data = written;
+		await waitForUpdates();
+		expectPendingChanges(button);
 	});
 
 	it("establishes the read baseline when the save write finishes first", async function () {

package/test/cases/components/form/locale-defaults.mjs

@@ -0,0 +1,58 @@
+import { strict as assert } from "node:assert";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+describe("localized form defaults", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		global.ResizeObserver ??= ResizeObserverMock;
+
+		await Promise.all([
+			import("../../../../source/components/form/buy-box.mjs"),
+			import("../../../../source/components/form/cart-control.mjs"),
+			import("../../../../source/components/form/login.mjs"),
+			import("../../../../source/components/form/select.mjs"),
+			import("../../../../source/components/form/variant-select.mjs"),
+			import("../../../../source/components/form/wizard.mjs"),
+		]);
+	});
+
+	afterEach(() => {
+		document.documentElement.lang = "en";
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("uses native text for localized component options", () => {
+		for (const [tag, locale, option, expected] of [
+			[
+				"monster-buy-box",
+				"de",
+				"labels.selectVariant",
+				"Bitte eine Variante wählen.",
+			],
+			["monster-buy-box", "ru", "labels.addToCart", "В корзину"],
+			["monster-cart-control", "cs", "labels.items", "Položky"],
+			["monster-login", "hi", "labels.username", "उपयोगकर्ता नाम या ई-मेल"],
+			["monster-login", "bn", "labels.password", "পাসওয়ার্ড"],
+			["monster-login", "pa", "labels.login", "ਲਾਗ ਇਨ ਕਰੋ"],
+			["monster-login", "mr", "labels.mailAddress", "ई-मेल पत्ता"],
+			["monster-login", "fi", "labels.login", "Kirjaudu sisään"],
+			["monster-variant-select", "pt", "messages.valid", "A seleção é válida."],
+			[
+				"monster-select",
+				"fr",
+				"labels.no-options-available",
+				"Aucune option disponible.",
+			],
+			["monster-wizard", "sv", "labels.submit", "Slutför"],
+		]) {
+			document.documentElement.lang = locale;
+			const element = document.createElement(tag);
+			assert.equal(element.getOption(option), expected, `${tag}:${locale}`);
+		}
+	});
+});

package/test/cases/components/form/popper-button.mjs

@@ -48,6 +48,18 @@ describe("PopperButton", function () {
 		expect(cssText).to.contain("textarea{resize:vertical;min-height:6rem");
 	});
 
+	it("should preserve focus indicator space inside clipped popper content", function () {
+		const cssText = PopperButton.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+			.map((rule) => rule.cssText)
+			.join("\n")
+			.replaceAll(/\s+/g, "");
+
+		expect(cssText).to.contain(
+			"[part=content]:not([data-monster-overflow-mode=visible]){padding:var(--monster-popper-focus-bleed,max(0px,calc(var(--monster-focus-ring-width,2px)+var(--monster-focus-ring-offset,2px))))",
+		);
+	});
+
 	it("should apply content overflow mode to the rendered content wrapper", function (done) {
 		let mocks = document.getElementById("mocks");
 		const button = document.createElement("monster-popper-button");

package/test/cases/components/form/register-wizard.mjs

@@ -18,6 +18,21 @@ describe("RegisterWizard", () => {
 
 	afterEach(() => {
 		document.getElementById("mocks").replaceChildren();
+		document.documentElement.lang = "en";
+	});
+
+	it("uses native localized defaults", () => {
+		for (const [locale, option, expected] of [
+			["de", "labels.street", "Straße"],
+			["hi", "labels.successTitle", "पंजीकरण पूरा हुआ"],
+			["ru", "labels.stepAccount", "Учётная запись"],
+			["ja", "labels.successTitle", "登録完了"],
+			["fi", "labels.email", "Sähköposti"],
+		]) {
+			document.documentElement.lang = locale;
+			const element = document.createElement("monster-register-wizard");
+			assert.equal(element.getOption(option), expected, `${locale}:${option}`);
+		}
 	});
 
 	it("keeps explicit labels inside nested field sets", async () => {

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",

package/test/cases/i18n/built-in-locales.mjs

@@ -0,0 +1,151 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { expect } from "chai";
+import * as espree from "espree";
+import { globSync } from "glob";
+import { currentSupportedLanguages } from "../../../source/i18n/map/languages.mjs";
+
+const repositoryRoot = resolve(
+	dirname(fileURLToPath(import.meta.url)),
+	"../../..",
+);
+const sourceFiles = globSync("source/**/*.mjs", {
+	cwd: repositoryRoot,
+	absolute: true,
+});
+
+function walk(node, callback) {
+	if (!node || typeof node !== "object") {
+		return;
+	}
+
+	if (typeof node.type === "string") {
+		callback(node);
+	}
+
+	for (const [key, value] of Object.entries(node)) {
+		if (["comments", "loc", "range", "tokens"].includes(key)) {
+			continue;
+		}
+		if (Array.isArray(value)) {
+			for (const child of value) {
+				walk(child, callback);
+			}
+		} else {
+			walk(value, callback);
+		}
+	}
+}
+
+function getPropertyKey(property) {
+	if (property.computed || property.type !== "Property") {
+		return null;
+	}
+	return property.key.name ?? property.key.value ?? null;
+}
+
+function inspectLocaleTables() {
+	const localeSwitches = [];
+	const localeObjects = [];
+
+	for (const filename of sourceFiles) {
+		const source = readFileSync(filename, "utf8");
+		const ast = espree.parse(source, {
+			ecmaVersion: "latest",
+			loc: true,
+			range: true,
+			sourceType: "module",
+		});
+
+		walk(ast, (node) => {
+			if (node.type === "SwitchStatement") {
+				const discriminant = source.slice(
+					node.discriminant.start,
+					node.discriminant.end,
+				);
+				if (!/\.language\b/.test(discriminant)) {
+					return;
+				}
+
+				localeSwitches.push({
+					filename,
+					line: node.loc.start.line,
+					codes: node.cases
+						.map((entry) => entry.test?.value)
+						.filter((entry) => typeof entry === "string"),
+					hasDefault: node.cases.some((entry) => entry.test === null),
+				});
+			}
+
+			if (node.type === "ObjectExpression") {
+				const keys = node.properties
+					.map((property) => getPropertyKey(property))
+					.filter((key) => typeof key === "string");
+				const supportedKeys = keys.filter((key) =>
+					currentSupportedLanguages.includes(key),
+				);
+				if (supportedKeys.length >= 5) {
+					localeObjects.push({
+						filename,
+						line: node.loc.start.line,
+						keys,
+					});
+				}
+			}
+		});
+	}
+
+	return { localeSwitches, localeObjects };
+}
+
+describe("built-in locale coverage", () => {
+	const { localeSwitches, localeObjects } = inspectLocaleTables();
+
+	it("keeps the supported locale list unique", () => {
+		expect(new Set(currentSupportedLanguages).size).to.equal(
+			currentSupportedLanguages.length,
+		);
+	});
+
+	it("covers every supported locale in language switches", () => {
+		expect(localeSwitches.length).to.be.greaterThan(30);
+
+		for (const table of localeSwitches) {
+			const location = `${table.filename}:${table.line}`;
+			for (const language of currentSupportedLanguages) {
+				if (language === "en" && table.hasDefault) {
+					continue;
+				}
+				expect(table.codes, `${location} is missing ${language}`).to.include(
+					language,
+				);
+			}
+			expect(
+				table.codes,
+				`${location} uses an obsolete Spanish code`,
+			).not.to.include("sp");
+			expect(
+				table.codes,
+				`${location} uses an obsolete Danish code`,
+			).not.to.include("dk");
+			expect(
+				table.codes,
+				`${location} uses an obsolete Swedish code`,
+			).not.to.include("sw");
+		}
+	});
+
+	it("covers every supported locale in language maps", () => {
+		expect(localeObjects.length).to.be.greaterThan(3);
+
+		for (const table of localeObjects) {
+			const location = `${table.filename}:${table.line}`;
+			for (const language of currentSupportedLanguages) {
+				expect(table.keys, `${location} is missing ${language}`).to.include(
+					language,
+				);
+			}
+		}
+	});
+});

package/test/cases/i18n/time-ago.mjs

@@ -1,33 +1,53 @@
-
-
-import {expect} from "chai"
-import {formatTimeAgo} from "../../../source/i18n/time-ago.mjs";
-
-describe('formatTimeAgo', () => {
-    it('returns "just now" for times less than a second ago', () => {
-        const now = new Date();
-        expect(formatTimeAgo(now, 'en')).to.equal('just now');
-    });
-
-    it('returns "in 1 second" for one second in the future', () => {
-        const oneSecondFuture = new Date(Date.now() + 1000);
-        expect(formatTimeAgo(oneSecondFuture, 'en')).to.equal('in 1 second');
-    });
-
-    it('returns "1 second ago" for one second in the past', () => {
-        const oneSecondPast = new Date(Date.now() - 1000);
-        expect(formatTimeAgo(oneSecondPast, 'en')).to.equal('1 second ago');
-    });
-
-    it('returns "in 1 minute, 30 seconds" for 90 seconds in the future', () => {
-        const ninetySecondsFuture = new Date(Date.now() + 90000);
-        expect(formatTimeAgo(ninetySecondsFuture, 'en')).to.equal('in 1 minute and 30 seconds');
-    });
-
-    it('returns "1 minute, 30 seconds ago" for 90 seconds in the past', () => {
-        const ninetySecondsPast = new Date(Date.now() - 90000);
-        expect(formatTimeAgo(ninetySecondsPast, 'en')).to.equal('1 minute and 30 seconds ago');
-    });
-
-    // Weitere Tests können hinzugefügt werden
+import { expect } from "chai";
+import { currentSupportedLanguages } from "../../../source/i18n/map/languages.mjs";
+import { formatTimeAgo } from "../../../source/i18n/time-ago.mjs";
+
+describe("formatTimeAgo", () => {
+	it('returns "just now" for times less than a second ago', () => {
+		const now = new Date();
+		expect(formatTimeAgo(now, "en")).to.equal("just now");
+	});
+
+	it('returns "in 1 second" for one second in the future', () => {
+		const oneSecondFuture = new Date(Date.now() + 1000);
+		expect(formatTimeAgo(oneSecondFuture, "en")).to.equal("in 1 second");
+	});
+
+	it('returns "1 second ago" for one second in the past', () => {
+		const oneSecondPast = new Date(Date.now() - 1000);
+		expect(formatTimeAgo(oneSecondPast, "en")).to.equal("1 second ago");
+	});
+
+	it('returns "in 1 minute, 30 seconds" for 90 seconds in the future', () => {
+		const ninetySecondsFuture = new Date(Date.now() + 90000);
+		expect(formatTimeAgo(ninetySecondsFuture, "en")).to.equal(
+			"in 1 minute and 30 seconds",
+		);
+	});
+
+	it('returns "1 minute, 30 seconds ago" for 90 seconds in the past', () => {
+		const ninetySecondsPast = new Date(Date.now() - 90000);
+		expect(formatTimeAgo(ninetySecondsPast, "en")).to.equal(
+			"1 minute and 30 seconds ago",
+		);
+	});
+
+	it("formats relative times for every supported South Asian locale", () => {
+		const oneHourFuture = new Date(Date.now() + 3600000);
+
+		expect(formatTimeAgo(oneHourFuture, "bn")).to.equal("1 ঘণ্টা পরে");
+		expect(formatTimeAgo(oneHourFuture, "pa")).to.equal("1 ਘੰਟਾ ਬਾਅਦ");
+		expect(formatTimeAgo(oneHourFuture, "mr")).to.equal("1 तास नंतर");
+	});
+
+	it("formats every supported locale without falling back to a missing table", () => {
+		const oneHourFuture = new Date(Date.now() + 3600000);
+
+		for (const locale of currentSupportedLanguages) {
+			expect(formatTimeAgo(oneHourFuture, locale), locale).to.be.a("string").and
+				.not.be.empty;
+		}
+	});
+
+	// Weitere Tests können hinzugefügt werden
 });