@schukai/monster 4.148.9 → 4.149.1

package/test/cases/components/datatable/responsive-breakpoint.mjs

@@ -0,0 +1,41 @@
+import { expect } from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const nextTask = () => new Promise((resolve) => setTimeout(resolve, 0));
+let declarativeBreakpoint;
+
+describe("Datatable responsive breakpoint", function () {
+	before(async function () {
+		await initJSDOM();
+		await import("element-internals-polyfill").catch(() => {});
+		globalThis.ResizeObserver ??= ResizeObserverMock;
+
+		document.getElementById("mocks").innerHTML = `
+			<monster-datatable
+				data-monster-responsive-breakpoint="720"
+			></monster-datatable>
+		`;
+		await import("../../../../source/components/datatable/datatable.mjs");
+		await nextTask();
+
+		declarativeBreakpoint = document
+			.querySelector("monster-datatable")
+			.getOption("responsive.breakpoint");
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	afterEach(function () {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("uses 960px as the default responsive threshold", function () {
+		const datatable = document.createElement("monster-datatable");
+
+		expect(datatable.getOption("responsive.breakpoint")).to.equal(960);
+	});
+
+	it("keeps the responsive breakpoint attribute as an explicit override", function () {
+		expect(declarativeBreakpoint).to.equal(720);
+	});
+});

package/test/cases/components/datatable/selection.mjs

@@ -0,0 +1,149 @@
+import { expect } from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const waitForUpdates = () => new Promise((resolve) => setTimeout(resolve, 250));
+
+function createFixture() {
+	const datasource = document.createElement("monster-datasource-dom");
+	datasource.id = "selection-datasource";
+	datasource.innerHTML = `
+		<script type="application/json">
+			{
+				"dataset": [
+					{ "id": "first", "name": "Alpha" },
+					{ "id": "second", "name": "Beta" },
+					{ "id": "third", "name": "Gamma" }
+				]
+			}
+		</script>
+	`;
+
+	const datatable = document.createElement("monster-datatable");
+	datatable.id = "selection-table";
+	datatable.setAttribute(
+		"data-monster-datasource-selector",
+		"#selection-datasource",
+	);
+	datatable.setOption("datasource.selector", "#selection-datasource");
+	datatable.innerHTML = `
+		<template id="selection-table-row">
+			<div
+				data-monster-features="select"
+				data-monster-mode="fixed"
+			></div>
+			<div
+				data-monster-head="Name"
+				data-monster-replace="path:selection-table-row.name"
+			></div>
+		</template>
+	`;
+
+	document.getElementById("mocks").append(datasource, datatable);
+	return datatable;
+}
+
+describe("Datatable row selection", function () {
+	before(async function () {
+		await initJSDOM();
+		await import("element-internals-polyfill").catch(() => {});
+		await import("../../../../source/components/datatable/datatable.mjs");
+	});
+
+	beforeEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("renders selectable rows from a populated DOM datasource", async function () {
+		const datatable = createFixture();
+		await waitForUpdates();
+
+		const rowCheckboxes = datatable.shadowRoot.querySelectorAll(
+			'[data-monster-role="select-row"]',
+		);
+		const selectAll = datatable.shadowRoot.querySelector(
+			'[data-monster-role="select-all"]',
+		);
+		const firstRowCells = datatable.shadowRoot.querySelectorAll(
+			'[data-monster-insert-reference="selection-table-row-0"]',
+		);
+		expect(rowCheckboxes).to.have.length(3);
+		expect(rowCheckboxes[0].getAttribute("aria-label")).to.equal("Select row");
+		expect(selectAll.getAttribute("aria-label")).to.equal("Select all rows");
+		expect(
+			firstRowCells[0].hasAttribute("data-monster-datatable-row-start"),
+		).to.equal(true);
+		expect(
+			firstRowCells[firstRowCells.length - 1].hasAttribute(
+				"data-monster-datatable-row-end",
+			),
+		).to.equal(true);
+		expect(datatable.getSelectedRows()).to.deep.equal([]);
+	});
+
+	it("synchronizes row, select-all, and mixed selection states", async function () {
+		const datatable = createFixture();
+		const events = [];
+		for (const type of [
+			"monster-datatable-row-selected",
+			"monster-datatable-all-rows-selected",
+			"monster-datatable-all-rows-deselected",
+			"monster-datatable-selection-changed",
+		]) {
+			datatable.addEventListener(type, () => events.push(type));
+		}
+
+		await waitForUpdates();
+
+		const rowCheckboxes = [
+			...datatable.shadowRoot.querySelectorAll(
+				'[data-monster-role="select-row"]',
+			),
+		];
+		const selectAll = datatable.shadowRoot.querySelector(
+			'[data-monster-role="select-all"]',
+		);
+
+		rowCheckboxes[0].click();
+
+		expect(datatable.getSelectedRows()).to.deep.equal([0]);
+		expect(selectAll.checked).to.equal(false);
+		expect(selectAll.indeterminate).to.equal(true);
+		expect(
+			datatable.shadowRoot.querySelectorAll(
+				'[data-monster-role="datatable"] > .selected',
+			),
+		).to.have.length(2);
+
+		selectAll.click();
+
+		expect(datatable.getSelectedRows()).to.deep.equal([0, 1, 2]);
+		expect(rowCheckboxes.every((checkbox) => checkbox.checked)).to.equal(true);
+		expect(selectAll.checked).to.equal(true);
+		expect(selectAll.indeterminate).to.equal(false);
+		expect(
+			datatable.shadowRoot.querySelectorAll(
+				'[data-monster-role="datatable"] > .selected',
+			),
+		).to.have.length(6);
+
+		selectAll.click();
+
+		expect(datatable.getSelectedRows()).to.deep.equal([]);
+		expect(rowCheckboxes.every((checkbox) => !checkbox.checked)).to.equal(true);
+		expect(selectAll.checked).to.equal(false);
+		expect(selectAll.indeterminate).to.equal(false);
+		expect(
+			datatable.shadowRoot.querySelectorAll(
+				'[data-monster-role="datatable"] > .selected',
+			),
+		).to.have.length(0);
+		expect(events).to.deep.equal([
+			"monster-datatable-row-selected",
+			"monster-datatable-selection-changed",
+			"monster-datatable-all-rows-selected",
+			"monster-datatable-selection-changed",
+			"monster-datatable-all-rows-deselected",
+			"monster-datatable-selection-changed",
+		]);
+	});
+});

package/test/cases/components/form/action-button-style.mjs

@@ -0,0 +1,85 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const actionButtonSource = readFileSync(
+	new URL(
+		"../../../../source/components/form/style/action-button.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const actionButtonStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/form/stylesheet/action-button.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+const actionButtonComponent = readFileSync(
+	new URL(
+		"../../../../source/components/form/action-button.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+const stateButtonSource = readFileSync(
+	new URL(
+		"../../../../source/components/form/style/state-button.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const stateButtonStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/form/stylesheet/state-button.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("ActionButton styles", () => {
+	it("provides theme hooks for a coherent action menu", () => {
+		for (const token of [
+			"--monster-action-menu-padding",
+			"--monster-action-menu-item-padding",
+			"--monster-action-button-popper-padding",
+			"--monster-action-button-popper-border-color",
+			"--monster-action-button-menu-min-inline-size",
+			"--monster-action-button-item-background-color",
+			"--monster-action-button-item-hover-background-color",
+			"--monster-action-button-item-focus-outline-offset",
+		]) {
+			expect(actionButtonSource, token).to.include(token);
+			expect(actionButtonStyleSheet, token).to.include(token);
+		}
+	});
+
+	it("keeps the existing action appearance as the token fallback", () => {
+		expect(actionButtonSource).to.include(
+			"--monster-action-menu-item-background-color",
+		);
+		expect(actionButtonSource).to.include(
+			"--monster-action-button-item-margin, 2px",
+		);
+	});
+
+	it("allows menu labels to align independently from regular state buttons", () => {
+		const declaration =
+			"var(--monster-state-button-label-justify-content, center)";
+		const buttonDeclaration = "--monster-state-button-justify-content";
+
+		expect(stateButtonSource).to.include(declaration);
+		expect(stateButtonSource).to.include(buttonDeclaration);
+		expect(stateButtonStyleSheet).to.include(
+			"var(--monster-state-button-label-justify-content,center)",
+		);
+		expect(stateButtonStyleSheet).to.include(buttonDeclaration);
+	});
+
+	it("forwards the public accessible name to the native menu trigger", () => {
+		expect(actionButtonComponent).to.include(
+			'data-monster-attributes="aria-label path:aria.label, class path:classes.button"',
+		);
+		expect(actionButtonComponent).to.include('aria-haspopup="menu"');
+	});
+});

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

@@ -85,6 +85,38 @@ describe("ButtonBar", function () {
     expect(bar.toggleDialog).to.be.a("function");
   });
 
+  it("should name and expose the state of the overflow switch", async function () {
+    const bar = document.getElementById("bar");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    const switchButton = bar.shadowRoot.querySelector(
+      '[data-monster-role="switch"]',
+    );
+
+    expect(switchButton.getAttribute("aria-label")).to.equal("More actions");
+    expect(switchButton.getAttribute("aria-expanded")).to.equal("false");
+    expect(switchButton.getAttribute("aria-controls")).to.equal(
+      "monster-button-bar-popper",
+    );
+
+    bar.setOption("labels.moreActions", "Weitere Aktionen");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(switchButton.getAttribute("aria-label")).to.equal(
+      "Weitere Aktionen",
+    );
+
+    bar.showDialog();
+    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(bar.shadowRoot.activeElement).to.equal(switchButton);
+  });
+
   it("should keep the popper switch hidden when no buttons are slotted", function (done) {
     const bar = document.getElementById("bar");
 
@@ -245,6 +277,99 @@ describe("ButtonBar", function () {
     }
   });
 
+  it("should use the host content box when reserving overflow switch space", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="content-box-wrapper">
+          <monster-button-bar
+            id="content-box-button-bar"
+            style="box-sizing: border-box; padding-left: 20px; padding-right: 20px"
+          >
+            <button id="content-box-a" type="button">One</button>
+            <button id="content-box-b" type="button">Two</button>
+          </monster-button-bar>
+        </div>
+      `;
+      const wrapper = document.getElementById("content-box-wrapper");
+      const bar = document.getElementById("content-box-button-bar");
+      const buttons = [
+        document.getElementById("content-box-a"),
+        document.getElementById("content-box-b"),
+      ];
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 120,
+      });
+      Object.defineProperty(bar, "clientWidth", {
+        configurable: true,
+        value: 60,
+      });
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      for (const button of buttons) {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 48,
+        });
+        Object.defineProperty(button, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 48,
+          height: 30,
+          top: 0,
+          right: 48,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      await flushFrames();
+      await waitForCondition(() => {
+        return buttons.every(
+          (button) => button.getAttribute("slot") === "popper",
+        );
+      });
+
+      expect(
+        buttons.every((button) => button.getAttribute("slot") === "popper"),
+      ).to.be.true;
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should default the button bar layout alignment to left", function () {
     const bar = document.getElementById("bar");
     const buttonBar = bar.shadowRoot.querySelector(
@@ -275,7 +400,7 @@ describe("ButtonBar", function () {
     }, 50);
   });
 
-  it("should render overflow popper buttons as a joined vertical group", function () {
+  it("should allow themes to space main and overflow button groups", function () {
     const cssText = ButtonBar.getCSSStyleSheet()
       .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
       .map((rule) => rule.cssText)
@@ -283,9 +408,103 @@ describe("ButtonBar", function () {
 
     expect(cssText).to.contain("slot[name=popper]");
     expect(cssText).to.contain("align-items: stretch");
-    expect(cssText).to.contain("gap: 0");
+    expect(cssText).to.contain("var(--monster-button-bar-gap,0)");
+    expect(cssText).to.contain("--monster-button-bar-popper-gap");
+    expect(cssText).to.contain("--monster-action-menu-gap");
     expect(cssText).to.contain("margin-top");
-    expect(cssText).to.contain("var(--monster-border-width)");
+    expect(cssText).to.contain("--monster-button-bar-item-spacing");
+    expect(cssText).to.contain("--monster-button-bar-popper-item-spacing");
+    expect(cssText).to.match(/--monster-button-bar-item-spacing,\s*0/u);
+    expect(cssText).to.match(/--monster-button-bar-popper-item-spacing,\s*0/u);
+  });
+
+  it("should clear joined-border offsets when a button gap is configured", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="spaced-button-bar-wrapper">
+          <monster-button-bar
+            id="spaced-button-bar"
+            style="--monster-button-bar-gap: 8px"
+          >
+            <button id="spaced-button-a" type="button">One</button>
+            <button id="spaced-button-b" type="button">Two</button>
+          </monster-button-bar>
+        </div>
+      `;
+      const wrapper = document.getElementById("spaced-button-bar-wrapper");
+      const bar = document.getElementById("spaced-button-bar");
+      const buttons = [
+        document.getElementById("spaced-button-a"),
+        document.getElementById("spaced-button-b"),
+      ];
+
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 200,
+      });
+      for (const button of buttons) {
+        button.style.border = "1px solid";
+        button.style.borderRadius = "8px";
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 48,
+        });
+        Object.defineProperty(button, "offsetHeight", {
+          configurable: true,
+          value: 40,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 48,
+          height: 40,
+          top: 0,
+          right: 48,
+          bottom: 40,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+      buttons[1].style.marginLeft = "-1px";
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+
+      expect(buttons[1].style.marginLeft).to.equal("");
+      expect(buttons[0].style.borderRadius).to.equal("8px");
+      expect(buttons[0].style.borderTopRightRadius).to.equal("");
+      expect(buttons[0].style.borderBottomRightRadius).to.equal("");
+      expect(buttons[1].style.borderRadius).to.equal("8px");
+      expect(buttons[1].style.borderTopLeftRadius).to.equal("");
+      expect(buttons[1].style.borderBottomLeftRadius).to.equal("");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
   });
 
   it("should coalesce resize layouts and avoid unchanged layout writes", async function () {

package/test/cases/components/form/context-theme-colors.mjs

@@ -0,0 +1,59 @@
+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";
+
+const contextThemeClasses = new Map([
+	["monster-context-help", "monster-theme-primary-1"],
+	["monster-context-hint", "monster-theme-tertiary-2"],
+	["monster-context-info", "monster-theme-primary-2"],
+	["monster-context-note", "monster-theme-secondary-2"],
+	["monster-context-success", "monster-theme-success-2"],
+	["monster-context-warning", "monster-theme-warning-2"],
+	["monster-context-error", "monster-theme-error-2"],
+]);
+
+describe("Context component theme colors", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		if (!global.ResizeObserver) {
+			global.ResizeObserver = ResizeObserverMock;
+		}
+
+		await Promise.all([
+			import("../../../../source/components/form/context-help.mjs"),
+			import("../../../../source/components/form/context-hint.mjs"),
+			import("../../../../source/components/form/context-info.mjs"),
+			import("../../../../source/components/form/context-note.mjs"),
+			import("../../../../source/components/form/context-success.mjs"),
+			import("../../../../source/components/form/context-warning.mjs"),
+			import("../../../../source/components/form/context-error.mjs"),
+		]);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	for (const [tag, themeClass] of contextThemeClasses) {
+		it(`${tag} keeps its semantic pair while inheriting the control background`, async () => {
+			const element = document.createElement(tag);
+			element.textContent = "Accessible context";
+			document.getElementById("mocks").append(element);
+			await new Promise((resolve) => setTimeout(resolve, 0));
+
+			const button = element.shadowRoot.querySelector(
+				'[data-monster-role="button"]',
+			);
+			const icon = button.querySelector("svg");
+
+			assert.ok(button.classList.contains(themeClass));
+			assert.ok(button.classList.contains("monster-theme-background-inherit"));
+			assert.equal(icon.getAttribute("fill"), "currentColor");
+			assert.equal(icon.querySelector("[fill]"), null);
+		});
+	}
+});