@schukai/monster 4.148.8 → 4.149.0

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

@@ -85,6 +85,22 @@ describe("ControlBar", function () {
     expect(bar).to.be.instanceof(ControlBar);
   });
 
+  it("should forward the configurable overflow label to its native switch", async function () {
+    const bar = document.getElementById("bar");
+    await waitForLayout(0);
+    const switchButton = bar.shadowRoot.querySelector(
+      '[data-monster-role="switch"]',
+    );
+
+    expect(switchButton.getAttribute("aria-label")).to.equal("More actions");
+    bar.setAttribute(
+      "data-monster-option-labels-more-actions",
+      "More controls",
+    );
+    await waitForLayout(0);
+    expect(switchButton.getAttribute("aria-label")).to.equal("More controls");
+  });
+
   it("should keep the popper switch hidden when no controls are slotted", function (done) {
     const bar = document.getElementById("bar-right");
 
@@ -383,7 +399,11 @@ describe("ControlBar", function () {
     expect(cssText).to.contain("align-items: stretch");
     expect(cssText).to.contain("[data-monster-layout-alignment=center]");
     expect(cssText).to.contain("justify-content: center");
-    expect(cssText).to.contain("::slotted(*) { display: flex");
+    expect(cssText).to.contain("::slotted(*)");
+    expect(cssText).to.contain("display: flex");
+    expect(cssText).to.contain(
+      "--monster-control-min-block-size: var(--monster-control-bar-height)",
+    );
     expect(cssText).to.contain("::slotted(form)");
     expect(cssText).to.contain("height: var(--monster-control-bar-height)");
     expect(cssText).to.contain(
@@ -391,11 +411,15 @@ describe("ControlBar", function () {
     );
     expect(cssText).to.contain("appearance: none");
     expect(cssText).to.contain("--monster-select-container-overflow: hidden");
+    expect(cssText).to.contain(
+      "--monster-select-control-min-block-size: var(--monster-control-bar-height)",
+    );
     expect(cssText).to.contain("::slotted(monster-button)");
     expect(cssText).to.contain("::slotted(monster-popper-button)");
-    expect(cssText).to.contain("--monster-button-inline-size: max-content");
+    expect(cssText).to.contain("--monster-control-bar-item-flex");
+    expect(cssText).to.contain("--monster-control-bar-slot-flex");
     expect(cssText).to.contain(
-      "--monster-popper-button-inline-size: max-content",
+      "--monster-control-bar-button-inline-size",
     );
     expect(cssText).to.contain("::slotted(monster-input-group)");
     expect(cssText).to.contain("::slotted(monster-control-bar-spacer)");
@@ -405,6 +429,26 @@ describe("ControlBar", function () {
     expect(cssText).to.contain(
       "--monster-control-bar-spacer-line-inline-size: calc(100% - 1rem)",
     );
+    expect(cssText).to.contain("--monster-action-menu-padding");
+    expect(cssText).to.contain("--monster-action-menu-min-inline-size");
+    expect(cssText).to.contain("--monster-action-menu-item-min-block-size");
+    expect(cssText).to.contain(
+      "--monster-button-border-width: var(--monster-action-menu-item-border-width",
+    );
+    expect(cssText).to.contain(
+      "--monster-button-border-radius: var(--monster-action-menu-item-border-radius",
+    );
+    expect(cssText).to.contain(
+      "--monster-button-justify-content: var(--monster-action-menu-item-justify-content",
+    );
+    expect(cssText).to.contain(
+      "--monster-button-background-color: var(--monster-action-menu-item-background-color",
+    );
+    expect(cssText).to.contain(
+      "--monster-action-menu-item-hover-background-color",
+    );
+    expect(cssText).to.contain("--monster-action-menu-item-focus-outline-offset");
+    expect(cssText).to.contain("height: auto !important");
   });
 
   it("should join adjacent borders using the smaller computed border width", async function () {
@@ -652,6 +696,7 @@ describe("ControlBar", function () {
         const innerButton = control.shadowRoot?.querySelector("button");
         innerButton.style.borderLeftWidth = "3px";
         innerButton.style.borderRightWidth = "3px";
+        innerButton.style.borderRadius = "8px";
       }
 
       await flushFrames();
@@ -660,6 +705,24 @@ describe("ControlBar", function () {
 
       expect(controls[1].style.marginLeft).to.equal("-3px");
       expect(controls[2].style.marginLeft).to.equal("-3px");
+
+      const innerButtons = controls.map((control) =>
+        control.shadowRoot?.querySelector("button"),
+      );
+      expect(innerButtons[0].style.borderRadius).to.equal("8px");
+      expect(innerButtons[0].style.borderTopLeftRadius).to.equal("");
+      expect(innerButtons[0].style.borderTopRightRadius).to.equal("0px");
+      expect(innerButtons[0].style.borderBottomRightRadius).to.equal("0px");
+      expect(innerButtons[0].style.borderBottomLeftRadius).to.equal("");
+      expect(innerButtons[1].style.borderTopLeftRadius).to.equal("0px");
+      expect(innerButtons[1].style.borderTopRightRadius).to.equal("0px");
+      expect(innerButtons[1].style.borderBottomRightRadius).to.equal("0px");
+      expect(innerButtons[1].style.borderBottomLeftRadius).to.equal("0px");
+      expect(innerButtons[2].style.borderTopLeftRadius).to.equal("0px");
+      expect(innerButtons[2].style.borderRadius).to.equal("8px");
+      expect(innerButtons[2].style.borderTopRightRadius).to.equal("");
+      expect(innerButtons[2].style.borderBottomRightRadius).to.equal("");
+      expect(innerButtons[2].style.borderBottomLeftRadius).to.equal("0px");
     } finally {
       window.requestAnimationFrame = originalRequestAnimationFrame;
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
@@ -1114,6 +1177,8 @@ describe("ControlBar", function () {
       });
 
       for (const control of controls) {
+        control.style.border = "1px solid";
+        control.style.borderRadius = "8px";
         Object.defineProperty(control, "offsetWidth", {
           configurable: true,
           value: 50,
@@ -1142,6 +1207,7 @@ describe("ControlBar", function () {
         configurable: true,
         value: 20,
       });
+      switchButton.style.borderLeftWidth = "1px";
       const controlBar = bar.shadowRoot.querySelector(
         '[data-monster-role="control-bar"]',
       );
@@ -1163,6 +1229,12 @@ describe("ControlBar", function () {
         .equal("popper");
       expect(document.getElementById("overflow-button").getAttribute("slot")).to
         .equal("popper");
+      expect(controls[1].style.borderRadius).to.equal("8px");
+      expect(controls[1].style.borderTopLeftRadius).to.equal("");
+      expect(controls[1].style.borderTopRightRadius).to.equal("");
+      expect(controls[2].style.borderRadius).to.equal("8px");
+      expect(controls[2].style.borderTopLeftRadius).to.equal("");
+      expect(controls[2].style.borderTopRightRadius).to.equal("");
     } finally {
       window.ResizeObserver = OriginalResizeObserver;
       globalThis.ResizeObserver = originalGlobalResizeObserver;
@@ -2120,6 +2192,159 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should keep an open overflow menu through inherited hidden positioning", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+    const originalGetComputedStyle = window.getComputedStyle;
+    const originalGlobalGetComputedStyle = globalThis.getComputedStyle;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="positioning-overflow-wrapper">
+          <monster-control-bar id="positioning-overflow-bar">
+            <button id="positioning-overflow-one">One</button>
+            <button id="positioning-overflow-two">Two</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById(
+        "positioning-overflow-wrapper",
+      );
+      const bar = document.getElementById("positioning-overflow-bar");
+      const controls = [
+        document.getElementById("positioning-overflow-one"),
+        document.getElementById("positioning-overflow-two"),
+      ];
+      let wrapperWidth = 1;
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        get: () => wrapperWidth,
+      });
+
+      for (const control of controls) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 50,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 50,
+          height: 30,
+          top: 0,
+          right: 50,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      const popper = bar.shadowRoot.querySelector(
+        '[data-monster-role="popper"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      expect(controls.every((control) => control.slot === "popper")).to.be.true;
+
+      bar.showDialog();
+      expect(popper.style.display).to.equal("block");
+      expect(popper.style.visibility).to.equal("hidden");
+
+      const inheritedHiddenStyle = (element) => {
+        const style = originalGetComputedStyle.call(window, element);
+        if (
+          controls.includes(element) &&
+          element.slot === "popper" &&
+          popper.style.visibility === "hidden"
+        ) {
+          return new Proxy(style, {
+            get(target, property) {
+              if (property === "visibility") {
+                return "hidden";
+              }
+              const value = Reflect.get(target, property);
+              return value instanceof Function ? value.bind(target) : value;
+            },
+          });
+        }
+        return style;
+      };
+      window.getComputedStyle = inheritedHiddenStyle;
+      globalThis.getComputedStyle = inheritedHiddenStyle;
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+
+      expect(controls.every((control) => control.slot === "popper")).to.be.true;
+      expect(popper.style.display).to.equal("block");
+      expect(switchButton.getAttribute("aria-expanded")).to.equal("true");
+
+      window.getComputedStyle = originalGetComputedStyle;
+      globalThis.getComputedStyle = originalGlobalGetComputedStyle;
+      wrapperWidth = 200;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+
+      expect(controls.every((control) => control.slot === "")).to.be.true;
+      expect(popper.style.display).to.equal("none");
+      expect(switchButton.getAttribute("aria-expanded")).to.equal("false");
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+      window.getComputedStyle = originalGetComputedStyle;
+      globalThis.getComputedStyle = originalGlobalGetComputedStyle;
+    }
+  });
+
   it("should match the stacked breakpoint when the content-box container width is a css string", async function () {
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;

package/test/cases/components/form/control-heights.mjs

@@ -0,0 +1,103 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const quantitySource = readFileSync(
+	new URL(
+		"../../../../source/components/form/style/quantity.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const digitsSource = readFileSync(
+	new URL(
+		"../../../../source/components/form/style/digits.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+const quantityStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/form/stylesheet/quantity.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+const digitsStyleSheet = readFileSync(
+	new URL(
+		"../../../../source/components/form/stylesheet/digits.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+const filterSelectOperatorSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/filter/select-operator.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+const quantityComponentSource = readFileSync(
+	new URL("../../../../source/components/form/quantity.mjs", import.meta.url),
+	"utf8",
+);
+
+describe("Form control heights", () => {
+	it("uses the shared control height for quantity controls", () => {
+		const token = "--qty-height: var(--monster-control-min-block-size, 40px)";
+
+		expect(quantitySource).to.include(token);
+		expect(quantityStyleSheet).to.include(
+			"--qty-height:var(--monster-control-min-block-size,40px)",
+		);
+	});
+
+	it("centers quantity icons inside equal square button targets", () => {
+		for (const source of [quantitySource, quantityStyleSheet]) {
+			expect(source).to.include("--qty-button-size");
+			expect(source).to.not.include("translateX");
+		}
+		expect(quantitySource).to.include("padding: 0");
+		expect(quantityStyleSheet).to.include("padding:0");
+		expect(quantityComponentSource).to.include('<path d="M2 7h12v2H2z"/>');
+	});
+
+	it("keeps verification-code inputs square without consuming their content area", () => {
+		const size = "var(--monster-control-min-block-size, 2.5rem)";
+
+		for (const property of [
+			"flex: 0 0",
+			"inline-size:",
+			"min-inline-size:",
+			"block-size:",
+			"min-block-size:",
+		]) {
+			expect(digitsSource).to.include(`${property} ${size}`);
+		}
+		expect(digitsSource).to.include("padding: 0");
+		expect(digitsSource).to.not.include("width: 2rem");
+
+		for (const declaration of [
+			"flex:0 0 var(--monster-control-min-block-size,2.5rem)",
+			"inline-size:var(--monster-control-min-block-size,2.5rem)",
+			"min-inline-size:var(--monster-control-min-block-size,2.5rem)",
+			"block-size:var(--monster-control-min-block-size,2.5rem)",
+			"min-block-size:var(--monster-control-min-block-size,2.5rem)",
+			"padding:0",
+		]) {
+			expect(digitsStyleSheet).to.include(declaration);
+		}
+	});
+
+	it("keeps the combined filter select within the shared outer height", () => {
+		expect(filterSelectOperatorSource).to.include(
+			"height: var(--monster-control-min-block-size, 2.5rem)",
+		);
+		expect(filterSelectOperatorSource).to.include(
+			"--monster-select-control-min-block-size: 0",
+		);
+		expect(filterSelectOperatorSource).to.include("min-block-size: 0");
+		expect(filterSelectOperatorSource).to.include(
+			'data-monster-selected-template="summary"',
+		);
+	});
+});

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

@@ -0,0 +1,65 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const { expect } = chai;
+
+const nextTask = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe("Digits accessibility", function () {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+		await import("../../../../source/components/form/digits.mjs");
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("should expose a group name and a position-aware name per digit", async function () {
+		const digits = document.createElement("monster-digits");
+		digits.setOptions({
+			digits: 4,
+			labels: {
+				group: "Verification code",
+				digit: "Character {index} of {count}",
+			},
+		});
+		document.getElementById("mocks").append(digits);
+		await nextTask();
+
+		const group = digits.shadowRoot.querySelector(
+			'[data-monster-role="digits"]',
+		);
+		const inputs = [...group.querySelectorAll("input")];
+		expect(group.getAttribute("role")).to.equal("group");
+		expect(group.getAttribute("aria-label")).to.equal("Verification code");
+		expect(
+			inputs.map((input) => input.getAttribute("aria-label")),
+		).to.deep.equal([
+			"Character 1 of 4",
+			"Character 2 of 4",
+			"Character 3 of 4",
+			"Character 4 of 4",
+		]);
+	});
+
+	it("should refresh digit names when count and labels change", async function () {
+		const digits = document.createElement("monster-digits");
+		document.getElementById("mocks").append(digits);
+		await nextTask();
+
+		digits.setOption("labels.digit", "Position {index}/{count}");
+		digits.setOption("digits", 2);
+		await nextTask();
+
+		const inputs = [
+			...digits.shadowRoot.querySelectorAll(
+				'[data-monster-role="digits"] input',
+			),
+		];
+		expect(
+			inputs.map((input) => input.getAttribute("aria-label")),
+		).to.deep.equal(["Position 1/2", "Position 2/2"]);
+	});
+});

package/test/cases/components/form/field-set.mjs

@@ -0,0 +1,54 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const { expect } = chai;
+chai.use(chaiDom);
+
+let FieldSet;
+
+describe("FieldSet", function () {
+	before(async function () {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+		FieldSet = (
+			await import("../../../../source/components/form/field-set.mjs")
+		).FieldSet;
+	});
+
+	afterEach(function () {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should create a field-set element", function () {
+		const fieldSet = document.createElement("monster-field-set");
+
+		expect(fieldSet).to.be.instanceof(FieldSet);
+	});
+
+	it("should mark checkbox labels as one readable control", async function () {
+		const fieldSet = document.createElement("monster-field-set");
+		const label = document.createElement("label");
+		label.innerHTML = '<input type="checkbox"> Include Shadow DOM';
+		fieldSet.append(label);
+		document.getElementById("mocks").append(fieldSet);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+
+		expect(label).to.have.attribute(
+			"data-monster-field-set-choice-label",
+			"",
+		);
+
+		const cssText = FieldSet.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+			.map((rule) => rule.cssText)
+			.join("\n");
+
+		expect(cssText).to.contain(
+			"::slotted([data-monster-field-set-choice-label])",
+		);
+		expect(cssText).to.contain("align-items: center");
+		expect(cssText).to.contain("justify-content: flex-start");
+		expect(cssText).to.contain("--monster-control-min-block-size");
+	});
+});

package/test/cases/components/form/floating-ui.mjs

@@ -8,6 +8,8 @@ let applyAdaptiveFloatingElementSize;
 let applyFloatingReferenceVisibility;
 let createVisibilityRecoveryConfig;
 let getFloatingVisibleRatio;
+let resolveFloatingArrowStaticOffset;
+let resetAdaptiveFloatingElementSize;
 
 describe("form floating-ui boundary resolution", function () {
 	before(function (done) {
@@ -23,6 +25,9 @@ describe("form floating-ui boundary resolution", function () {
 				applyFloatingReferenceVisibility = m.applyFloatingReferenceVisibility;
 				createVisibilityRecoveryConfig = m.createVisibilityRecoveryConfig;
 				getFloatingVisibleRatio = m.getFloatingVisibleRatio;
+				resolveFloatingArrowStaticOffset =
+					m.resolveFloatingArrowStaticOffset;
+				resetAdaptiveFloatingElementSize = m.resetAdaptiveFloatingElementSize;
 				done();
 			})
 			.catch((e) => done(e));
@@ -33,6 +38,11 @@ describe("form floating-ui boundary resolution", function () {
 		mocks.innerHTML = "";
 	});
 
+	it("should overlap the popper edge by half of the rendered arrow size", function () {
+		expect(resolveFloatingArrowStaticOffset(8)).to.equal(-4);
+		expect(resolveFloatingArrowStaticOffset(0)).to.equal(0);
+	});
+
 	it("should ignore parent popper content wrappers as clipping boundaries for nested controls", function () {
 		const mocks = document.getElementById("mocks");
 		const wrapper = document.createElement("div");
@@ -142,6 +152,27 @@ describe("form floating-ui boundary resolution", function () {
 		expect(content.style.maxHeight).to.equal("100px");
 	});
 
+	it("should clear a stale adaptive max width before the next layout pass", function () {
+		const popper = document.createElement("div");
+		popper.style.maxWidth = "11px";
+		popper.style.maxHeight = "80px";
+
+		resetAdaptiveFloatingElementSize(popper);
+
+		expect(popper.style.maxWidth).to.equal("");
+		expect(popper.style.maxHeight).to.equal("");
+	});
+
+	it("should restore a component preferred max width before relayout", function () {
+		const popper = document.createElement("div");
+		popper.dataset.monsterPreferredMaxWidth = "320";
+		popper.style.maxWidth = "80px";
+
+		resetAdaptiveFloatingElementSize(popper);
+
+		expect(popper.style.maxWidth).to.equal("320px");
+	});
+
 	it("should not clamp the floating element height when content overflow is visible", function () {
 		const mocks = document.getElementById("mocks");
 		const popper = document.createElement("div");
@@ -501,6 +532,49 @@ describe("form floating-ui boundary resolution", function () {
 		expect(popper.dataset.monsterReferenceHidden).to.equal("true");
 	});
 
+	it("should use the viewport instead of the scrolled document root as a clipping boundary", function () {
+		const mocks = document.getElementById("mocks");
+		const reference = document.createElement("div");
+		const popper = document.createElement("div");
+		const root = document.documentElement;
+		const originalOverflow = root.style.overflow;
+		const originalRootRect = root.getBoundingClientRect;
+
+		root.style.overflow = "auto";
+		root.getBoundingClientRect = () => ({
+			top: -1200,
+			left: 0,
+			right: 1024,
+			bottom: -432,
+			width: 1024,
+			height: 768,
+			x: 0,
+			y: -1200,
+		});
+		reference.getBoundingClientRect = () => ({
+			top: 100,
+			left: 100,
+			right: 300,
+			bottom: 144,
+			width: 200,
+			height: 44,
+			x: 100,
+			y: 100,
+		});
+		mocks.appendChild(reference);
+
+		try {
+			expect(resolveClippingBoundaryElement(reference, popper)).to.equal(null);
+			expect(applyFloatingReferenceVisibility(reference, popper)).to.equal(
+				true,
+			);
+			expect(popper.style.visibility).to.equal("");
+		} finally {
+			root.style.overflow = originalOverflow;
+			root.getBoundingClientRect = originalRootRect;
+		}
+	});
+
 	it("should restore a floating element when its reference is visible again", function () {
 		const reference = document.createElement("div");
 		const popper = document.createElement("div");