@schukai/monster 4.148.8 → 4.149.0

package/test/cases/components/form/input-group.mjs

@@ -2,36 +2,69 @@ import * as chai from "chai";
 import { chaiDom } from "../../../util/chai-dom.mjs";
 import { initJSDOM } from "../../../util/jsdom.mjs";
 
-let expect = chai.expect;
+const expect = chai.expect;
 chai.use(chaiDom);
 
 let InputGroup;
 
-describe("InputGroup", function () {
-  before(function (done) {
-    initJSDOM()
-      .then(() => import("../../../../source/components/form/input-group.mjs"))
-      .then((m) => {
-        InputGroup = m.InputGroup;
-        done();
-      })
-      .catch((e) => done(e));
-  });
-
-  it("should create an input group element", function () {
-    const inputGroup = document.createElement("monster-input-group");
-
-    expect(inputGroup).to.be.instanceof(InputGroup);
-  });
-
-  it("should allow the input group to stretch within constrained controls", function () {
-    const cssText = InputGroup.getCSSStyleSheet()
-      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
-      .map((rule) => rule.cssText)
-      .join("\n");
-
-    expect(cssText).to.contain("display: flex");
-    expect(cssText).to.contain("box-sizing: border-box");
-    expect(cssText).to.contain("height: 100%");
-  });
+describe("InputGroup", () => {
+	before((done) => {
+		initJSDOM()
+			.then(() => import("../../../../source/components/form/input-group.mjs"))
+			.then((m) => {
+				InputGroup = m.InputGroup;
+				done();
+			})
+			.catch((e) => done(e));
+	});
+
+	it("should create an input group element", () => {
+		const inputGroup = document.createElement("monster-input-group");
+
+		expect(inputGroup).to.be.instanceof(InputGroup);
+	});
+
+	it("should allow the input group to stretch within constrained controls", () => {
+		const cssText = InputGroup.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+			.map((rule) => rule.cssText)
+			.join("\n");
+
+		expect(cssText).to.contain("display: flex");
+		expect(cssText).to.contain("box-sizing: border-box");
+		expect(cssText).to.contain("height: 100%");
+		expect(cssText).to.contain(
+			"min-block-size: var(--monster-control-min-block-size",
+		);
+		expect(cssText).to.contain("min-block-size: 0");
+	});
+
+	it("should draw one focus ring around the complete composed control", () => {
+		const cssText = InputGroup.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+			.map((rule) => rule.cssText)
+			.join("\n");
+
+		expect(cssText).to.contain(":host(:focus-within)");
+		expect(cssText).to.contain("var(--monster-focus-ring-width");
+		expect(cssText).to.contain("var(--monster-focus-ring-offset");
+		expect(cssText).to.contain("::slotted(input:focus-visible)");
+		expect(cssText).to.contain("outline: none !important");
+		expect(cssText).to.contain("box-sizing: content-box !important");
+		expect(cssText).to.contain("height: 1.1rem");
+	});
+
+	it("should keep hover feedback on the complete composed control", () => {
+		const cssText = InputGroup.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+			.map((rule) => rule.cssText)
+			.join("\n");
+
+		expect(cssText).to.contain(":host(:hover)");
+		expect(cssText).to.contain("--monster-input-group-hover-background-color");
+		expect(cssText).to.contain("--monster-input-group-hover-border-color");
+		expect(cssText).to.contain("::slotted(input:hover)");
+		expect(cssText).to.contain("box-shadow: none !important");
+		expect(cssText).to.contain("transition: none !important");
+	});
 });

package/test/cases/components/form/login.mjs

@@ -34,6 +34,53 @@ describe("Login", function () {
 		expect(document.createElement("monster-login")).is.instanceof(Login);
 	});
 
+	it("should associate visible labels and pass them to nested controls", async function () {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+
+		const username = login.shadowRoot.querySelector("input[name='username']");
+		const usernameLabel = login.shadowRoot.querySelector(
+			'label[for="monster-login-username"]',
+		);
+		const email = login.shadowRoot.querySelector("input[name='email']");
+		const emailLabel = login.shadowRoot.querySelector(
+			'label[for="monster-login-email"]',
+		);
+		const password = login.shadowRoot.querySelector("monster-password");
+		const digits = login.shadowRoot.querySelector(
+			'[data-monster-role="digits-collapse"] monster-digits',
+		);
+
+		expect(usernameLabel).to.not.equal(null);
+		expect(usernameLabel.htmlFor).to.equal(username.id);
+		expect(emailLabel).to.not.equal(null);
+		expect(emailLabel.htmlFor).to.equal(email.id);
+		expect(password.getOption("labels.input")).to.equal(
+			login.getOption("labels.password"),
+		);
+		expect(digits.getOption("labels.group")).to.equal(
+			login.getOption("labels.digits"),
+		);
+	});
+
+	it("keeps validation markers from shifting later grid rows", function () {
+		const login = document.createElement("monster-login");
+		document.getElementById("mocks").appendChild(login);
+
+		const validationMarkers = [
+			...login.shadowRoot.querySelectorAll(
+				'div[style*="grid-column: 1 / -1"]',
+			),
+		];
+		expect(validationMarkers).to.have.length.greaterThan(0);
+		expect(
+			validationMarkers.every(
+				(element) => element.style.gridColumn === "1 / -1",
+			),
+		).to.be.true;
+	});
+
 	it("should respect the native hidden attribute on the host", function () {
 		const login = document.createElement("monster-login");
 		login.setAttribute("hidden", "");

package/test/cases/components/form/password.mjs

@@ -0,0 +1,63 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const { expect } = chai;
+chai.use(chaiDom);
+const nextTask = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+let Password;
+
+describe("Password", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => import("../../../../source/components/form/password.mjs"))
+			.then((module) => {
+				Password = module.Password;
+				done();
+			})
+			.catch((error) => done(error));
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("should name its native input from the public label option", async function () {
+		const password = document.createElement("monster-password");
+		document.getElementById("mocks").append(password);
+		await nextTask();
+		const input = password.shadowRoot.querySelector(
+			'[data-monster-role="input"]',
+		);
+
+		expect(input.getAttribute("aria-label")).to.equal("Password");
+		password.setOption("labels.input", "Passwort");
+		await nextTask();
+		expect(input.getAttribute("aria-label")).to.equal("Passwort");
+	});
+
+	it("should preserve the input-group radius around the reveal control", function () {
+		const cssText = Password.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+			.map((rule) => rule.cssText)
+			.join("\n");
+
+		expect(cssText).to.contain("monster-input-group");
+		expect(cssText).to.contain("--monster-theme-control-bg-color");
+		expect(cssText).to.contain("overflow: hidden");
+	});
+
+	it("should vertically center the input and reveal icon in the shared control height", function () {
+		const cssText = Password.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+			.map((rule) => rule.cssText)
+			.join("\n");
+
+		expect(cssText).to.contain("--monster-password-control-block-size");
+		expect(cssText).to.contain("var(--monster-control-min-block-size,2.5rem)");
+		expect(cssText).to.contain("[data-monster-role=control]");
+		expect(cssText).to.contain("monster-input-group");
+		expect(cssText).to.contain("block-size: 100%");
+	});
+});

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

@@ -31,6 +31,23 @@ describe("PopperButton", function () {
 		);
 	});
 
+	it("should style native form controls inside 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(
+			"input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:var(--monster-control-min-block-size,auto)",
+		);
+		expect(cssText).to.contain(
+			"input:is([type=checkbox],[type=radio]){block-size:1rem;inline-size:1rem",
+		);
+		expect(cssText).to.contain("font-size:100%");
+		expect(cssText).to.contain("textarea{resize:vertical;min-height:6rem");
+	});
+
 	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");
@@ -48,9 +65,9 @@ describe("PopperButton", function () {
 
 				setTimeout(() => {
 					try {
-						expect(
-							content.getAttribute("data-monster-overflow-mode"),
-						).to.equal("horizontal");
+						expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+							"horizontal",
+						);
 						done();
 					} catch (e) {
 						done(e);
@@ -79,9 +96,9 @@ describe("PopperButton", function () {
 
 				setTimeout(() => {
 					try {
-						expect(
-							content.getAttribute("data-monster-overflow-mode"),
-						).to.equal("horizontal");
+						expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+							"horizontal",
+						);
 						done();
 					} catch (e) {
 						done(e);
@@ -107,12 +124,12 @@ describe("PopperButton", function () {
 
 				setTimeout(() => {
 					try {
-						expect(
-							button.getOption("popper.contentOverflow"),
-						).to.equal("visible");
-						expect(
-							content.getAttribute("data-monster-overflow-mode"),
-						).to.equal("visible");
+						expect(button.getOption("popper.contentOverflow")).to.equal(
+							"visible",
+						);
+						expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+							"visible",
+						);
 						done();
 					} catch (e) {
 						done(e);
@@ -161,9 +178,7 @@ describe("PopperButton", function () {
 			try {
 				const button = mocks.querySelector("monster-popper-button");
 				const content = button.shadowRoot.querySelector('[part="content"]');
-				expect(button.getOption("popper.contentOverflow")).to.equal(
-					"visible",
-				);
+				expect(button.getOption("popper.contentOverflow")).to.equal("visible");
 				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
 					"visible",
 				);

package/test/cases/components/form/quantity-accessibility.mjs

@@ -0,0 +1,46 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const { expect } = chai;
+const nextTask = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe("Quantity accessibility", function () {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+		await import("../../../../source/components/form/quantity.mjs");
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("should name every native control from configurable labels", async function () {
+		const quantity = document.createElement("monster-quantity");
+		quantity.setOptions({
+			labels: {
+				input: "Seats",
+				decrement: "Remove one seat",
+				increment: "Add one seat",
+			},
+		});
+		document.getElementById("mocks").append(quantity);
+		await nextTask();
+
+		expect(
+			quantity.shadowRoot
+				.querySelector('[data-monster-role="input"]')
+				.getAttribute("aria-label"),
+		).to.equal("Seats");
+		expect(
+			quantity.shadowRoot
+				.querySelector('[data-monster-role="decrement"]')
+				.getAttribute("aria-label"),
+		).to.equal("Remove one seat");
+		expect(
+			quantity.shadowRoot
+				.querySelector('[data-monster-role="increment"]')
+				.getAttribute("aria-label"),
+		).to.equal("Add one seat");
+	});
+});

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

@@ -0,0 +1,79 @@
+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("RegisterWizard", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		if (!global.ResizeObserver) {
+			global.ResizeObserver = ResizeObserverMock;
+		}
+
+		await import("../../../../source/components/form/register-wizard.mjs");
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("keeps explicit labels inside nested field sets", async () => {
+		const element = document.createElement("monster-register-wizard");
+		element.setOptions({
+			labels: {
+				email: "Email address",
+				password: "Password",
+				passwordConfirm: "Confirm password",
+				firstName: "First name",
+				lastName: "Last name",
+				consentsTitle: "Consents",
+			},
+		});
+		document.getElementById("mocks").append(element);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+
+		const labels = new Map([
+			["email-label", "Email address"],
+			["password-label", "Password"],
+			["password-confirm-label", "Confirm password"],
+			["first-name-label", "First name"],
+			["last-name-label", "Last name"],
+			["consents-title", "Consents"],
+		]);
+		for (const [role, expected] of labels) {
+			const label = element.shadowRoot.querySelector(
+				`[data-monster-role~="${role}"]`,
+			);
+			assert.equal(label.textContent.trim(), expected, role);
+		}
+		const email = element.shadowRoot.querySelector(
+			'[data-monster-role="email-input"]',
+		);
+		assert.equal(
+			email.getAttribute("aria-label"),
+			element.getOption("labels.emailAria"),
+		);
+		assert.equal(
+			email.getAttribute("placeholder"),
+			element.getOption("labels.emailPlaceholder"),
+		);
+		assert.equal(
+			email.getAttribute("autocomplete"),
+			element.getOption("autocomplete.email"),
+		);
+		const password = element.shadowRoot.querySelector(
+			'[data-monster-role="password-input"]',
+		);
+		assert.equal(password.hasAttribute("aria-label"), false);
+		assert.equal(
+			password.shadowRoot
+				.querySelector('[data-monster-role="input"]')
+				.getAttribute("aria-label"),
+			element.getOption("labels.passwordAria"),
+		);
+		assert.equal(element.shadowRoot.textContent.includes("undefined"), false);
+	});
+});

package/test/cases/components/form/select.mjs

@@ -187,9 +187,29 @@ describe('Select', function () {
         expect(cssText).to.contain("--monster-select-container-align-self");
         expect(cssText).to.contain("--monster-select-container-block-size");
         expect(cssText).to.contain("--monster-select-control-padding");
+        expect(cssText).to.contain("--monster-select-control-min-block-size");
+        expect(cssText).to.contain("--monster-select-option-padding");
+        expect(cssText).to.contain("--monster-select-option-control-size");
         expect(cssText).to.contain("--monster-select-selection-margin");
         expect(cssText).to.contain("--monster-select-selection-flex-wrap");
-        expect(cssText.replace(/\s+/g, '')).to.contain('z-index:var(--monster-z-index-popover)');
+        expect(cssText.replace(/\s+/g, '')).to.contain(
+            'div[data-monster-role=popper]{z-index:var(--monster-z-index-popover);}'
+        );
+        expect(cssText.replace(/\s+/g, '')).to.contain(
+            'min-block-size:var(--monster-select-control-min-block-size,var(--monster-control-min-block-size,2.5rem))'
+        );
+        expect(cssText.replace(/\s+/g, '')).to.contain(
+            'margin:var(--monster-select-selection-margin,05px)'
+        );
+        expect(cssText.replace(/\s+/g, '')).to.contain(
+            'padding:var(--monster-select-option-padding,2px6px)'
+        );
+        expect(cssText.replace(/\s+/g, '')).to.contain(
+            'min-block-size:var(--monster-select-option-control-size,1rem)'
+        );
+        expect(cssText.replace(/\s+/g, '')).to.match(
+            /@media\(prefers-color-scheme:light\)\{\[data-monster-role=control\]\{[^}]*border-color:var\(--monster-theme-control-border-color\)/u
+        );
     });
 
     it('should render select pagination in the compact arrow mode immediately', async function () {
@@ -1532,6 +1552,7 @@ describe('Select', function () {
             const result = getDefaultSelectPopperPositionProfile();
 
             expect(result.placement).to.equal('bottom-start');
+            expect(result.strategy).to.equal('fixed');
             expect(result.middleware).to.deep.equal([
                 'flip',
                 'offset:4',
@@ -2122,6 +2143,71 @@ describe('Select', function () {
             mocks.innerHTML = "";
         })
 
+        it('should prevent automatic popper filter focus from scrolling the page', async function () {
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('filter.mode', 'options');
+            select.setOption('filter.position', 'popper');
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector(
+                    '[data-monster-role=filter][name="popper-filter"]'
+                ) instanceof HTMLInputElement;
+            });
+            await new Promise(resolve => setTimeout(resolve, 150));
+
+            const filterInput = select.shadowRoot.querySelector(
+                '[data-monster-role=filter][name="popper-filter"]'
+            );
+            const focusCalls = [];
+            filterInput.focus = (...args) => {
+                focusCalls.push(args);
+            };
+
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+
+            await waitForCondition(() => focusCalls.length > 0);
+
+            expect(focusCalls.every(([options]) => {
+                return options?.preventScroll === true;
+            })).to.equal(true);
+        });
+
+        it('should reveal a searchable popper after opening', async function () {
+            this.timeout(5000);
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('filter.mode', 'options');
+            select.setOption('filter.position', 'popper');
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector(
+                    '[data-monster-role=container]'
+                ) instanceof HTMLElement;
+            });
+
+            const popper = select.shadowRoot.querySelector(
+                '[data-monster-role=popper]'
+            );
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+
+            await waitForCondition(() => popper.style.display === 'block');
+            await new Promise(resolve => setTimeout(resolve, 300));
+
+            expect(popper.style.visibility).to.equal('');
+        });
+
         it('should have no options', function (done) {
 
             let mocks = document.getElementById('mocks');
@@ -2147,7 +2233,7 @@ describe('Select', function () {
 
         });
 
-        it('should expose styling parts for container, filter messages and pagination', function (done) {
+        it('should expose styling parts for container, filter messages and the compact pagination footer', function (done) {
 
             let mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
@@ -2158,10 +2244,16 @@ describe('Select', function () {
                 try {
                     const container = select.shadowRoot.querySelector('[data-monster-role=container]');
                     const selectionMessages = select.shadowRoot.querySelector('[data-monster-role=selection-messages]');
+                    const paginationFooter = select.shadowRoot.querySelector('[data-monster-role=pagination-footer]');
+                    const remoteInfo = select.shadowRoot.querySelector('[data-monster-role=remote-info]');
                     const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
 
                     expect(container.getAttribute('part')).to.equal('container');
                     expect(selectionMessages.getAttribute('part')).to.equal('selection-messages');
+                    expect(paginationFooter.getAttribute('part')).to.equal('pagination-footer');
+                    expect(paginationFooter.firstElementChild).to.equal(remoteInfo);
+                    expect(remoteInfo.getAttribute('part')).to.equal('remote-info');
+                    expect(remoteInfo.nextElementSibling).to.equal(pagination);
                     expect(pagination.getAttribute('part')).to.equal('pagination');
                 } catch (e) {
                     return done(e);

package/test/cases/components/form/sheet.mjs

@@ -27,9 +27,62 @@ describe("Sheet", function () {
 		expect(document.createElement("monster-sheet")).to.be.instanceof(Sheet);
 	});
 
+	it("should name editable cells from their row and column labels", function () {
+		const sheet = document.createElement("monster-sheet");
+		sheet.setOptions({
+			columns: [{ id: "project", label: "Project" }],
+			rows: [{ id: "first", label: "First row" }],
+			labels: { cell: "{column} / {row}" },
+		});
+		document.getElementById("mocks").appendChild(sheet);
+
+		const input = sheet.shadowRoot.querySelector(
+			'[data-monster-role="cell-input"]',
+		);
+		expect(input.getAttribute("aria-label")).to.equal("Project / First row");
+	});
+
+	it("should position and expose its context menu on right click", function () {
+		const sheet = document.createElement("monster-sheet");
+		document.getElementById("mocks").appendChild(sheet);
+
+		const input = sheet.shadowRoot.querySelector(
+			'[data-monster-role="cell-input"]',
+		);
+		const menu = sheet.shadowRoot.querySelector(
+			'[data-monster-role="context-menu"]',
+		);
+		const event = new window.MouseEvent("contextmenu", {
+			bubbles: true,
+			cancelable: true,
+			clientX: 120,
+			clientY: 80,
+		});
+
+		input.dispatchEvent(event);
+
+		expect(event.defaultPrevented).to.equal(true);
+		expect(menu.hidden).to.equal(false);
+		expect(menu.style.display).to.equal("flex");
+		expect(menu.style.left).to.equal("0px");
+		expect(menu.style.top).to.equal("0px");
+		expect(menu.querySelectorAll('[role="menuitem"]')).to.have.length(3);
+
+		const cssText = Sheet.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules || []))
+			.map((rule) => rule.cssText)
+			.join("\n")
+			.replace(/\s+/g, "");
+		expect(cssText).to.contain("[part=context-menu]{position:absolute");
+		expect(cssText).to.contain(
+			"min-block-size:var(--monster-action-menu-item-min-block-size,44px)",
+		);
+	});
+
 	it("should coalesce column resize pointer moves", function (done) {
 		const originalRequestAnimationFrame = window.requestAnimationFrame;
-		const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+		const originalGlobalRequestAnimationFrame =
+			globalThis.requestAnimationFrame;
 		const originalCancelAnimationFrame = window.cancelAnimationFrame;
 		const originalGlobalCancelAnimationFrame = globalThis.cancelAnimationFrame;
 		const scheduledCallbacks = [];
@@ -110,7 +163,8 @@ describe("Sheet", function () {
 					done(e);
 				} finally {
 					window.requestAnimationFrame = originalRequestAnimationFrame;
-					globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+					globalThis.requestAnimationFrame =
+						originalGlobalRequestAnimationFrame;
 					window.cancelAnimationFrame = originalCancelAnimationFrame;
 					globalThis.cancelAnimationFrame = originalGlobalCancelAnimationFrame;
 				}