@schukai/monster 4.152.0 → 4.153.0

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

@@ -392,74 +392,77 @@ describe("ControlBar", function () {
     const cssText = ControlBar.getCSSStyleSheet()
       .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
       .map((rule) => rule.cssText)
-      .join("\n");
-
-    expect(cssText).to.contain("--monster-control-bar-height");
-    expect(cssText).to.contain("slot[name=popper]");
-    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(*)");
-    expect(cssText).to.contain("display: flex");
-    expect(cssText).to.contain(
+      .join("\n")
+      .replace(/="([\w-]+)"/g, "=$1");
+
+    const expectCSS = (fragment) => expect(cssText.replace(/\s/g, "")).to.contain(fragment.replace(/\s/g, ""));
+
+    expectCSS("--monster-control-bar-height");
+    expectCSS("slot[name=popper]");
+    expectCSS("align-items: stretch");
+    expectCSS("[data-monster-layout-alignment=center]");
+    expectCSS("justify-content: center");
+    expectCSS("::slotted(*)");
+    expectCSS("display: flex");
+    expectCSS(
       "--monster-control-min-block-size: var(--monster-control-bar-height)",
     );
-    expect(cssText).to.contain(
+    expectCSS(
       "::slotted(monster-control-bar)",
     );
-    expect(cssText).to.contain(
+    expectCSS(
       "--monster-control-min-block-size: inherit",
     );
-    expect(cssText).to.contain("::slotted(form)");
-    expect(cssText).to.contain("height: var(--monster-control-bar-height)");
-    expect(cssText).to.contain(
+    expectCSS("::slotted(form)");
+    expectCSS("height: var(--monster-control-bar-height)");
+    expectCSS(
       "border-width: var(--monster-theme-control-border-width",
     );
-    expect(cssText).to.contain("appearance: none");
-    expect(cssText).to.contain("--monster-select-container-overflow: hidden");
-    expect(cssText).to.contain(
+    expectCSS("appearance: none");
+    expectCSS("--monster-select-container-overflow: hidden");
+    expectCSS(
       "--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-control-bar-item-flex");
-    expect(cssText).to.contain("--monster-control-bar-slot-flex");
-    expect(cssText).to.contain(
+    expectCSS("::slotted(monster-button)");
+    expectCSS("::slotted(monster-popper-button)");
+    expectCSS("--monster-control-bar-item-flex");
+    expectCSS("--monster-control-bar-slot-flex");
+    expectCSS(
       "--monster-control-bar-button-inline-size",
     );
-    expect(cssText).to.contain("::slotted(monster-input-group)");
-    expect(cssText).to.contain("::slotted(monster-control-bar-spacer)");
-    expect(cssText).to.contain(
+    expectCSS("::slotted(monster-input-group)");
+    expectCSS("::slotted(monster-control-bar-spacer)");
+    expectCSS(
       "--monster-control-bar-spacer-line-block-size: 60%",
     );
-    expect(cssText).to.contain(
+    expectCSS(
       "--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(
+    expectCSS("--monster-action-menu-padding");
+    expectCSS("--monster-action-menu-min-inline-size");
+    expectCSS("--monster-action-menu-item-min-block-size");
+    expectCSS(
       "--monster-button-border-width: var(--monster-action-menu-item-border-width",
     );
-    expect(cssText).to.contain(
+    expectCSS(
       "--monster-button-border-radius: var(--monster-action-menu-item-border-radius",
     );
-    expect(cssText).to.contain(
+    expectCSS(
       "--monster-button-justify-content: var(--monster-action-menu-item-justify-content",
     );
-    expect(cssText).to.contain(
+    expectCSS(
       "--monster-button-background-color: var(--monster-action-menu-item-background-color",
     );
-    expect(cssText).to.contain(
+    expectCSS(
       "--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(
+    expectCSS("--monster-action-menu-item-focus-outline-offset");
+    expectCSS("--monster-button-bar-flex-direction: column");
+    expectCSS("--monster-button-bar-height: auto");
+    expectCSS(
       ":has(>[data-monster-role=switch][hidden])",
     );
-    expect(cssText).to.contain("height: auto !important");
+    expectCSS("height: auto !important");
   });
 
   it("should join adjacent borders using the smaller computed border width", async function () {
@@ -530,12 +533,12 @@ describe("ControlBar", function () {
         });
       }
 
-      controls[0].style.borderRightWidth = "3px";
-      controls[1].style.borderLeftWidth = "2px";
-      controls[1].style.borderRightWidth = "2px";
-      controls[2].style.borderLeftWidth = "2px";
-      controls[2].style.borderRightWidth = "3px";
-      controls[3].style.borderLeftWidth = "3px";
+      controls[0].style.borderRight = "3px solid";
+      controls[1].style.borderLeft = "2px solid";
+      controls[1].style.borderRight = "2px solid";
+      controls[2].style.borderLeft = "2px solid";
+      controls[2].style.borderRight = "3px solid";
+      controls[3].style.borderLeft = "3px solid";
 
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
@@ -617,8 +620,8 @@ describe("ControlBar", function () {
         });
       }
 
-      button.style.borderRightWidth = "3px";
-      innerControl.style.borderLeftWidth = "2px";
+      button.style.borderRight = "3px solid";
+      innerControl.style.borderLeft = "2px solid";
 
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
@@ -705,8 +708,8 @@ describe("ControlBar", function () {
         });
 
         const innerButton = control.shadowRoot?.querySelector("button");
-        innerButton.style.borderLeftWidth = "3px";
-        innerButton.style.borderRightWidth = "3px";
+        innerButton.style.borderLeft = "3px solid";
+        innerButton.style.borderRight = "3px solid";
         innerButton.style.borderRadius = "8px";
       }
 
@@ -720,19 +723,17 @@ describe("ControlBar", function () {
       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.borderTopLeftRadius || innerButtons[0].style.borderRadius).to.equal("8px");
       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[0].style.borderBottomLeftRadius || innerButtons[0].style.borderRadius).to.equal("8px");
       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.borderTopRightRadius || innerButtons[2].style.borderRadius).to.equal("8px");
+      expect(innerButtons[2].style.borderBottomRightRadius || innerButtons[2].style.borderRadius).to.equal("8px");
       expect(innerButtons[2].style.borderBottomLeftRadius).to.equal("0px");
     } finally {
       window.requestAnimationFrame = originalRequestAnimationFrame;
@@ -836,10 +837,10 @@ describe("ControlBar", function () {
         '[data-monster-role="button"]',
       );
 
-      releaseInnerButton.style.borderRightWidth = "3px";
-      cancelInnerButton.style.borderLeftWidth = "3px";
-      cancelInnerButton.style.borderRightWidth = "2px";
-      followUpInnerButton.style.borderLeftWidth = "2px";
+      releaseInnerButton.style.borderRight = "3px solid";
+      cancelInnerButton.style.borderLeft = "3px solid";
+      cancelInnerButton.style.borderRight = "2px solid";
+      followUpInnerButton.style.borderLeft = "2px solid";
 
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
@@ -942,8 +943,8 @@ describe("ControlBar", function () {
         '[data-monster-role="button"]',
       );
 
-      copyInnerButton.style.borderRightWidth = "3px";
-      repairInnerButton.style.borderLeftWidth = "3px";
+      copyInnerButton.style.borderRight = "3px solid";
+      repairInnerButton.style.borderLeft = "3px solid";
 
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
@@ -1020,8 +1021,8 @@ describe("ControlBar", function () {
         });
       }
 
-      left.style.borderRightWidth = "4px";
-      right.style.borderLeftWidth = "2px";
+      left.style.borderRight = "4px solid";
+      right.style.borderLeft = "2px solid";
 
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
@@ -1104,8 +1105,8 @@ describe("ControlBar", function () {
         });
       }
 
-      top.style.borderBottomWidth = "2px";
-      bottom.style.borderTopWidth = "5px";
+      top.style.borderBottom = "2px solid";
+      bottom.style.borderTop = "5px solid";
 
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
@@ -1218,7 +1219,7 @@ describe("ControlBar", function () {
         configurable: true,
         value: 20,
       });
-      switchButton.style.borderLeftWidth = "1px";
+      switchButton.style.borderLeft = "1px solid";
       const controlBar = bar.shadowRoot.querySelector(
         '[data-monster-role="control-bar"]',
       );
@@ -1241,11 +1242,11 @@ describe("ControlBar", function () {
       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[1].style.borderTopLeftRadius || controls[1].style.borderRadius).to.equal("8px");
+      expect(controls[1].style.borderTopRightRadius || controls[1].style.borderRadius).to.equal("8px");
       expect(controls[2].style.borderRadius).to.equal("8px");
-      expect(controls[2].style.borderTopLeftRadius).to.equal("");
-      expect(controls[2].style.borderTopRightRadius).to.equal("");
+      expect(controls[2].style.borderTopLeftRadius || controls[2].style.borderRadius).to.equal("8px");
+      expect(controls[2].style.borderTopRightRadius || controls[2].style.borderRadius).to.equal("8px");
     } finally {
       window.ResizeObserver = OriginalResizeObserver;
       globalThis.ResizeObserver = originalGlobalResizeObserver;
@@ -1455,7 +1456,7 @@ describe("ControlBar", function () {
             class="nucleus-list-main-actions"
             data-monster-option-layout-alignment="right"
             data-monster-option-layout-stacked-alignment="left"
-            data-monster-option-layout-stacked-breakpoint="30rem"
+            data-monster-option-layout-stacked-breakpoint="400px"
           >
             <button id="reconnect-create">Create</button>
             <button id="reconnect-tags">Manage tags</button>

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

@@ -49,7 +49,9 @@ describe("InputGroup", () => {
 		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");
+		const outline = new CSSStyleSheet();
+		outline.replaceSync("input { outline: none !important; }");
+		expect(cssText).to.contain(outline.cssRules[0].style.cssText.trim());
 		expect(cssText).to.contain("box-sizing: content-box !important");
 		expect(cssText).to.contain("height: 1.1rem");
 	});

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

@@ -40,7 +40,7 @@ describe("Password", function () {
 	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)
+			.map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1"))
 			.join("\n");
 
 		expect(cssText).to.contain("monster-input-group");
@@ -51,7 +51,7 @@ describe("Password", function () {
 	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)
+			.map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1"))
 			.join("\n");
 
 		expect(cssText).to.contain("--monster-password-control-block-size");

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

@@ -34,7 +34,7 @@ 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)
+			.map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1"))
 			.join("\n")
 			.replaceAll(/\s+/g, "");
 
@@ -51,7 +51,7 @@ describe("PopperButton", function () {
 	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)
+			.map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1"))
 			.join("\n")
 			.replaceAll(/\s+/g, "");
 

package/test/cases/components/form/select-sort-callback.mjs

@@ -0,0 +1,57 @@
+import { expect } from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+describe("Select mapping sorting compatibility", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("../../../../source/components/form/select.mjs");
+	});
+	afterEach(() => document.getElementById("mocks").replaceChildren());
+	for (const [name, sort, expected] of [
+		["callback", (a, b) => b[1].localeCompare(a[1]), ["b", "a"]],
+		["run", "run:return b[1].localeCompare(a[1]);", ["b", "a"]],
+		["ascending", "call:asc", ["a", "b"]],
+		["descending", "call:desc", ["b", "a"]],
+		["disabled", null, ["b", "a"]],
+	]) {
+		it(`preserves ${name} mapping`, () => {
+			const element = document.createElement("monster-select");
+			document.getElementById("mocks").append(element);
+			element.setOptions({
+				mapping: {
+					selector: "*",
+					labelTemplate: "label",
+					valueTemplate: "value",
+					sort,
+				},
+			});
+			element.importOptions([
+				{ value: "b", label: "Beta" },
+				{ value: "a", label: "Alpha" },
+			]);
+			expect(
+				element.getOption("options").map((option) => option.value),
+			).to.deep.equal(expected);
+		});
+	}
+	it("passes the owning control to callback sorters", () => {
+		const element = document.createElement("monster-select");
+		document.getElementById("mocks").append(element);
+		let owner;
+		element.setOptions({
+			mapping: {
+				labelTemplate: "label",
+				valueTemplate: "value",
+				sort: (_a, _b, control) => {
+					owner = control;
+					return 0;
+				},
+			},
+		});
+		element.importOptions([
+			{ value: "a", label: "Alpha" },
+			{ value: "b", label: "Beta" },
+		]);
+		expect(owner).to.equal(element);
+	});
+});

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

@@ -180,7 +180,7 @@ describe('Select', function () {
     it('should expose compact layout variables for constrained control contexts', function () {
         const cssText = SelectStyleSheet
             .cssRules
-            ? Array.from(SelectStyleSheet.cssRules).map((rule) => rule.cssText).join("\n")
+            ? Array.from(SelectStyleSheet.cssRules).map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1").replace(/>\s+\[/g, ">[")).join("\n")
             : "";
 
         expect(cssText).to.contain("--monster-select-container-overflow");
@@ -1513,7 +1513,7 @@ describe('Select', function () {
 
         it('should keep option list scroll layout stable while overflow toggles', function () {
             const cssText = Array.from(SelectStyleSheet.cssRules)
-                .map((rule) => rule.cssText)
+                .map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1").replace(/>\s+\[/g, ">["))
                 .join('\n')
                 .replace(/\s+/g, '');
 

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

@@ -98,6 +98,16 @@ describe("Sheet", function () {
 			clientX: 120,
 			clientY: 80,
 		});
+		// Keep the menu in a deliberately small viewport in every DOM engine.
+		const wrapper = sheet.shadowRoot.querySelector('[data-monster-role="grid-wrapper"]');
+		Object.defineProperties(wrapper, {
+			clientWidth: {configurable:true,value:80},
+			clientHeight: {configurable:true,value:40},
+		});
+		Object.defineProperties(menu, {
+			offsetWidth: {configurable:true,value:160},
+			offsetHeight: {configurable:true,value:96},
+		});
 
 		input.dispatchEvent(event);
 
@@ -110,7 +120,7 @@ describe("Sheet", function () {
 
 		const cssText = Sheet.getCSSStyleSheet()
 			.flatMap((styleSheet) => Array.from(styleSheet.cssRules || []))
-			.map((rule) => rule.cssText)
+			.map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1").replace(/>\s+\[/g, ">["))
 			.join("\n")
 			.replace(/\s+/g, "");
 		expect(cssText).to.contain("[part=context-menu]{position:absolute");
@@ -160,6 +170,8 @@ describe("Sheet", function () {
 					sheet.addEventListener("monster-sheet-resize-column", () => {
 						resizeEvents++;
 					});
+					// Ignore lifecycle frames queued while the element was connected.
+					scheduledCallbacks.length = 0;
 
 					const down = new Event("pointerdown", { bubbles: true });
 					Object.assign(down, {

package/test/cases/components/layout/popper.mjs

@@ -41,6 +41,8 @@ describe("Popper", function () {
 		const popper = host.shadowRoot.querySelector(
 			'[data-monster-role="popper"]',
 		);
+		// Use viewport coordinates in both JSDOM and a real containing block.
+		host.setOption("popper.strategy", "fixed");
 
 		setElementRect(control, {
 			x: 100,
@@ -65,7 +67,7 @@ describe("Popper", function () {
 
 		await waitForCondition(() => popper.style.transform !== "");
 
-		expect(popper.style.transform).to.contain("translate(60px,140px)");
+		expect(popper.style.transform.replaceAll(" ", "")).to.contain("translate(60px,140px)");
 		host.hideDialog();
 	});
 });

package/test/cases/components/layout/tabs.mjs

@@ -356,7 +356,7 @@ describe("Tabs", function () {
 			);
 			expect(cssText).to.contain("--monster-tabs-indicator-inline-size");
 			expect(cssText).to.contain("--monster-tabs-indicator-active-opacity");
-			expect(cssText).to.contain("button:before");
+			expect(cssText).to.match(/button::?before/);
 			expect(cssText).to.contain("prefers-reduced-motion");
 			expect(cssText).to.contain(":focus-visible");
 			expect(cssText).to.contain(
@@ -555,6 +555,9 @@ describe("Tabs", function () {
 			const switchButton = tabs.shadowRoot.querySelector(
 				'[data-monster-role="switch"]',
 			);
+			// This fixture fits all tabs; expose the switch before testing focus.
+			switchButton.hidden = false;
+			switchButton.classList.remove("hidden");
 			switchButton.click();
 			expect(switchButton.getAttribute("aria-expanded")).to.equal("true");
 			switchButton.dispatchEvent(

package/test/cases/components/navigation/site-navigation.mjs

@@ -30,7 +30,7 @@ describe("SiteNavigation", function () {
 		);
 	});
 
-	it("should coalesce resize layout updates", function (done) {
+	it("should coalesce resize layout updates", async function () {
 		const OriginalResizeObserver = window.ResizeObserver;
 		const originalGlobalResizeObserver = globalThis.ResizeObserver;
 		const originalRequestAnimationFrame = window.requestAnimationFrame;
@@ -50,11 +50,6 @@ describe("SiteNavigation", function () {
 		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 = `
@@ -72,33 +67,24 @@ describe("SiteNavigation", function () {
 			);
 			expect(resizeObserver).to.exist;
 
-			while (scheduledCallbacks.length > 0) {
-				scheduledCallbacks.shift()();
-			}
+			// Settle initial slot/layout work before measuring resize coalescing.
+			await new Promise(resolve => setTimeout(resolve, 260));
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallbacks.push(callback);
+				return scheduledCallbacks.length;
+			};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
 			resizeObserver.triggerResize([]);
 			resizeObserver.triggerResize([]);
 
-			setTimeout(() => {
-				try {
-					expect(scheduledCallbacks.length).to.equal(1);
-					scheduledCallbacks.shift()();
-					done();
-				} catch (e) {
-					done(e);
-				} finally {
-					window.ResizeObserver = OriginalResizeObserver;
-					globalThis.ResizeObserver = originalGlobalResizeObserver;
-					window.requestAnimationFrame = originalRequestAnimationFrame;
-					globalThis.requestAnimationFrame =
-						originalGlobalRequestAnimationFrame;
-				}
-			}, 260);
-		} catch (e) {
+			await new Promise(resolve => setTimeout(resolve, 260));
+			expect(scheduledCallbacks.length).to.equal(1);
+			scheduledCallbacks.shift()();
+		} finally {
 			window.ResizeObserver = OriginalResizeObserver;
 			globalThis.ResizeObserver = originalGlobalResizeObserver;
 			window.requestAnimationFrame = originalRequestAnimationFrame;
 			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
-			done(e);
 		}
 	});
 });

package/test/cases/components/navigation/table-of-content.mjs

@@ -73,6 +73,7 @@ describe('TableOfContent', function () {
 		tableOfContent.appendChild(paragraph);
 
 		Object.defineProperties(outerScroller, {
+			scrollTop: { configurable: true, writable: true, value: 0 },
 			clientHeight: { configurable: true, value: 200 },
 			scrollHeight: { configurable: true, value: 600 },
 			clientWidth: { configurable: true, value: 300 },
@@ -135,6 +136,7 @@ describe('TableOfContent', function () {
 		tableOfContent.appendChild(heading);
 
 		Object.defineProperties(outerScroller, {
+			scrollTop: { configurable: true, writable: true, value: 0 },
 			clientHeight: { configurable: true, value: 200 },
 			scrollHeight: { configurable: true, value: 600 },
 			clientWidth: { configurable: true, value: 300 },
@@ -187,6 +189,7 @@ describe('TableOfContent', function () {
 		tableOfContent.appendChild(heading);
 
 		Object.defineProperties(outerScroller, {
+			scrollTop: { configurable: true, writable: true, value: 0 },
 			clientHeight: { configurable: true, value: 200 },
 			scrollHeight: { configurable: true, value: 600 },
 			clientWidth: { configurable: true, value: 300 },

package/test/cases/components/state/ticker-lifecycle.mjs

@@ -0,0 +1,47 @@
+import { expect } from "chai";
+import sinon from "sinon";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+describe("State component tickers", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("../../../../source/components/state/log.mjs");
+		await import("../../../../source/components/state/thread.mjs");
+	});
+	for (const tag of ["monster-log", "monster-thread"]) {
+		it(`${tag} stops on removal and resumes once without losing options`, () => {
+			const intervals = new Map();
+			let sequence = 0;
+			const set = sinon
+				.stub(globalThis, "setInterval")
+				.callsFake((callback, delay) => {
+					const id = ++sequence;
+					intervals.set(id, { callback, delay });
+					return id;
+				});
+			const clear = sinon
+				.stub(globalThis, "clearInterval")
+				.callsFake((id) => intervals.delete(id));
+			let element;
+			try {
+				element = document.createElement(tag);
+				element.setOption("updateFrequency", 1234);
+				document.getElementById("mocks").append(element);
+				expect(intervals.size).to.equal(1);
+				expect([...intervals.values()][0].delay).to.equal(1234);
+				const entries = element.getOption("entries");
+				element.remove();
+				expect(intervals.size).to.equal(0);
+				document.getElementById("mocks").append(element);
+				element.connectedCallback();
+				expect(intervals.size).to.equal(1);
+				expect(element.getOption("entries")).to.equal(entries);
+				expect(element.getOption("updateFrequency")).to.equal(1234);
+			} finally {
+				element?.remove();
+				set.restore();
+				clear.restore();
+			}
+		});
+	}
+});