@schukai/monster 4.150.1 → 4.150.2

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

@@ -448,6 +448,11 @@ describe("ControlBar", function () {
       "--monster-action-menu-item-hover-background-color",
     );
     expect(cssText).to.contain("--monster-action-menu-item-focus-outline-offset");
+    expect(cssText).to.contain("--monster-button-bar-flex-direction: column");
+    expect(cssText).to.contain("--monster-button-bar-height: auto");
+    expect(cssText).to.contain(
+      ":has(>[data-monster-role=switch][hidden])",
+    );
     expect(cssText).to.contain("height: auto !important");
   });
 
@@ -2192,6 +2197,124 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should restore controls when a hidden parent becomes visible during feedback suppression", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    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="hidden-parent-wrapper">
+          <monster-control-bar id="hidden-parent-bar">
+            <button id="hidden-parent-one">One</button>
+            <button id="hidden-parent-two">Two</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("hidden-parent-wrapper");
+      const bar = document.getElementById("hidden-parent-bar");
+      const popperNav = bar.shadowRoot.querySelector(
+        '[data-monster-role="popper-nav"]',
+      );
+      const controls = [
+        document.getElementById("hidden-parent-one"),
+        document.getElementById("hidden-parent-two"),
+      ];
+      let wrapperWidth = 120;
+
+      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"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      expect(controls.every((control) => control.slot === "")).to.be.true;
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      wrapperWidth = 0;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      scheduledCallbacks.shift()();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(controls.every((control) => control.slot === "popper")).to.be.true;
+
+      wrapperWidth = 120;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+
+      expect(controls.every((control) => control.slot === "")).to.be.true;
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(popperNav.style.display).to.equal("");
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should keep an open overflow menu through inherited hidden positioning", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;

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

@@ -51,4 +51,15 @@ describe("FieldSet", function () {
 		expect(cssText).to.contain("justify-content: flex-start");
 		expect(cssText).to.contain("--monster-control-min-block-size");
 	});
+
+	it("should size toggle rows from the themed control height", function () {
+		const cssText = FieldSet.getCSSStyleSheet()
+			.flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+			.map((rule) => rule.cssText)
+			.join("\n");
+
+		expect(cssText).to.match(
+			/::slotted\(monster-toggle-switch\)[\s\S]*?min-height:\s*var\(--monster-control-min-block-size,\s*1\.8rem\)/u,
+		);
+	});
 });

package/test/cases/components/form/toggle-switch.mjs

@@ -73,6 +73,19 @@ describe('ToggleSwitch', function () {
             it('should instance of monster-toggle-switch', function () {
                 expect(document.createElement('monster-toggle-switch')).is.instanceof(ToggleSwitch);
             });
+
+            it('should center the visual switch within the themed control height', function () {
+                const cssText = ToggleSwitch.getCSSStyleSheet()
+                    .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+                    .map((rule) => rule.cssText)
+                    .join("\n");
+
+                expect(cssText).to.contain("min-block-size: inherit");
+                expect(cssText).to.contain("align-items: center");
+                expect(cssText).to.match(
+                    /:host\s*\{[^}]*min-block-size:\s*var\(--monster-control-min-block-size,\s*1\.8rem\)/u,
+                );
+            });
         });
 
     });