@schukai/monster 4.150.0 → 4.150.2

package/source/components/time/month-calendar.mjs

@@ -207,11 +207,84 @@ function getTranslations() {
 	switch (locale.language) {
 		case "de":
 			return {
-				more: "weitere Termin",
+				more: "Weitere Termine",
 			};
+		case "es":
+			return {
+				more: "Más citas",
+			};
+		case "zh":
+			return {
+				more: "更多日程",
+			};
+		case "hi":
+			return {
+				more: "और अपॉइंटमेंट",
+			};
+		case "bn":
+			return {
+				more: "আরও অ্যাপয়েন্টমেন্ট",
+			};
+		case "pt":
+			return {
+				more: "Mais compromissos",
+			};
+		case "ru":
+			return {
+				more: "Другие события",
+			};
+		case "ja":
+			return {
+				more: "その他の予定",
+			};
+		case "pa":
+			return {
+				more: "ਹੋਰ ਮੁਲਾਕਾਤਾਂ",
+			};
+		case "mr":
+			return {
+				more: "आणखी भेटी",
+			};
+		case "fr":
+			return {
+				more: "Autres rendez-vous",
+			};
+		case "it":
+			return {
+				more: "Altri appuntamenti",
+			};
+		case "nl":
+			return {
+				more: "Meer afspraken",
+			};
+		case "sv":
+			return {
+				more: "Fler möten",
+			};
+		case "pl":
+			return {
+				more: "Więcej spotkań",
+			};
+		case "da":
+			return {
+				more: "Flere aftaler",
+			};
+		case "fi":
+			return {
+				more: "Lisää tapaamisia",
+			};
+		case "no":
+			return {
+				more: "Flere avtaler",
+			};
+		case "cs":
+			return {
+				more: "Další události",
+			};
+		case "en":
 		default:
 			return {
-				more: "more appointments",
+				more: "More appointments",
 			};
 	}
 }

package/source/i18n/internal.mjs

@@ -41,72 +41,114 @@ function getInternalTranslations() {
 		case "de":
 			messages = {
 				"the-response-does-not-contain-an-accepted-status": `Der Server hat die Anfrage nicht akzeptiert (Status \${status}).`,
-				"the-response-does-not-contain-a-valid-json": `Die Antwort des Servers ist kein gültiges JSON (actual=\${actual}).`,
+				"the-response-does-not-contain-a-valid-json": `Die Antwort des Servers ist kein gültiges JSON (tatsächlich=\${actual}).`,
 			};
 			break;
 		case "es":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `El servidor no ha aceptado la solicitud (Estado \${status}).`,
-				"the-response-does-not-contain-a-valid-json": `La respuesta del servidor no es un JSON válido (actual=\${actual}).`,
+				"the-response-does-not-contain-an-accepted-status": `El servidor no ha aceptado la solicitud (estado \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `La respuesta del servidor no es un JSON válido (real=\${actual}).`,
 			};
 			break;
 		case "zh":
 			messages = {
 				"the-response-does-not-contain-an-accepted-status": `服务器未接受请求（状态 \${status}）。`,
-				"the-response-does-not-contain-a-valid-json": `服务器响应不是有效的JSON（实际=\${actual}）。`,
+				"the-response-does-not-contain-a-valid-json": `服务器响应不是有效的 JSON（实际=\${actual}）。`,
+			};
+			break;
+		case "hi":
+			messages = {
+				"the-response-does-not-contain-an-accepted-status": `सर्वर ने अनुरोध स्वीकार नहीं किया (स्थिति \${status})।`,
+				"the-response-does-not-contain-a-valid-json": `सर्वर की प्रतिक्रिया मान्य JSON नहीं है (वास्तविक=\${actual})।`,
+			};
+			break;
+		case "bn":
+			messages = {
+				"the-response-does-not-contain-an-accepted-status": `সার্ভার অনুরোধটি গ্রহণ করেনি (স্থিতি \${status})।`,
+				"the-response-does-not-contain-a-valid-json": `সার্ভারের প্রতিক্রিয়াটি বৈধ JSON নয় (প্রকৃত=\${actual})।`,
+			};
+			break;
+		case "pt":
+			messages = {
+				"the-response-does-not-contain-an-accepted-status": `O servidor não aceitou a solicitação (status \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `A resposta do servidor não é um JSON válido (real=\${actual}).`,
+			};
+			break;
+		case "ru":
+			messages = {
+				"the-response-does-not-contain-an-accepted-status": `Сервер не принял запрос (статус \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `Ответ сервера не является допустимым JSON (фактическое значение=\${actual}).`,
+			};
+			break;
+		case "ja":
+			messages = {
+				"the-response-does-not-contain-an-accepted-status": `サーバーがリクエストを受け付けませんでした（ステータス \${status}）。`,
+				"the-response-does-not-contain-a-valid-json": `サーバーの応答は有効な JSON ではありません（実際=\${actual}）。`,
+			};
+			break;
+		case "pa":
+			messages = {
+				"the-response-does-not-contain-an-accepted-status": `ਸਰਵਰ ਨੇ ਬੇਨਤੀ ਸਵੀਕਾਰ ਨਹੀਂ ਕੀਤੀ (ਸਥਿਤੀ \${status})।`,
+				"the-response-does-not-contain-a-valid-json": `ਸਰਵਰ ਦਾ ਜਵਾਬ ਵੈਧ JSON ਨਹੀਂ ਹੈ (ਅਸਲ=\${actual})।`,
+			};
+			break;
+		case "mr":
+			messages = {
+				"the-response-does-not-contain-an-accepted-status": `सर्व्हरने विनंती स्वीकारली नाही (स्थिती \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `सर्व्हरचा प्रतिसाद वैध JSON नाही (प्रत्यक्ष=\${actual}).`,
 			};
 			break;
 		case "fr":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `Le serveur n'a pas accepté la demande (Statut \${status}).`,
-				"the-response-does-not-contain-a-valid-json": `La réponse du serveur n'est pas un JSON valide (actuel=\${actual}).`,
+				"the-response-does-not-contain-an-accepted-status": `Le serveur n'a pas accepté la demande (statut \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `La réponse du serveur n'est pas un JSON valide (réel=\${actual}).`,
 			};
 			break;
 		case "it":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `Il server non ha accettato la richiesta (Stato \${status}).`,
-				"the-response-does-not-contain-a-valid-json": `La risposta del server non è un JSON valido (attuale=\${actual}).`,
+				"the-response-does-not-contain-an-accepted-status": `Il server non ha accettato la richiesta (stato \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `La risposta del server non è un JSON valido (effettivo=\${actual}).`,
 			};
 			break;
 		case "nl":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `De server heeft het verzoek niet geaccepteerd (Status \${status}).`,
-				"the-response-does-not-contain-a-valid-json": `De serverrespons is geen geldige JSON (actueel=\${actual}).`,
+				"the-response-does-not-contain-an-accepted-status": `De server heeft het verzoek niet geaccepteerd (status \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `De serverrespons is geen geldige JSON (werkelijk=\${actual}).`,
 			};
 			break;
 		case "sv":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `Servern accepterade inte begäran (Status \${status}).`,
+				"the-response-does-not-contain-an-accepted-status": `Servern accepterade inte begäran (status \${status}).`,
 				"the-response-does-not-contain-a-valid-json": `Serverns svar är inte en giltig JSON (faktisk=\${actual}).`,
 			};
 			break;
 		case "pl":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `Serwer nie zaakceptował żądania (Status \${status}).`,
-				"the-response-does-not-contain-a-valid-json": `Odpowiedź serwera nie jest prawidłowym JSON-em (aktualne=\${actual}).`,
+				"the-response-does-not-contain-an-accepted-status": `Serwer nie zaakceptował żądania (status \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `Odpowiedź serwera nie jest prawidłowym JSON-em (rzeczywiste=\${actual}).`,
 			};
 			break;
 		case "da":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `Serveren accepterede ikke forespørgslen (Status \${status}).`,
-				"the-response-does-not-contain-a-valid-json": `Serverens svar er ikke en gyldig JSON (aktuel=\${actual}).`,
+				"the-response-does-not-contain-an-accepted-status": `Serveren accepterede ikke forespørgslen (status \${status}).`,
+				"the-response-does-not-contain-a-valid-json": `Serverens svar er ikke gyldig JSON (faktisk=\${actual}).`,
 			};
 			break;
 		case "fi":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `Palvelin ei hyväksynyt pyyntöä (Tila \${status}).`,
+				"the-response-does-not-contain-an-accepted-status": `Palvelin ei hyväksynyt pyyntöä (tila \${status}).`,
 				"the-response-does-not-contain-a-valid-json": `Palvelimen vastaus ei ole kelvollinen JSON (todellinen=\${actual}).`,
 			};
 			break;
 		case "no":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `Serveren aksepterte ikke forespørselen (Status \${status}).`,
+				"the-response-does-not-contain-an-accepted-status": `Serveren aksepterte ikke forespørselen (status \${status}).`,
 				"the-response-does-not-contain-a-valid-json": `Serverens respons er ikke en gyldig JSON (faktisk=\${actual}).`,
 			};
 			break;
 		case "cs":
 			messages = {
-				"the-response-does-not-contain-an-accepted-status": `Server nepřijal požadavek (Stav \${status}).`,
+				"the-response-does-not-contain-an-accepted-status": `Server nepřijal požadavek (stav \${status}).`,
 				"the-response-does-not-contain-a-valid-json": `Odpověď serveru není platný JSON (skutečný=\${actual}).`,
 			};
 			break;

package/source/i18n/map/languages.mjs

@@ -13,7 +13,7 @@
  */
 
 /**
- * Curretnly from Monster supported languages.
+ * Languages currently supported by Monster.
  * @type {string[]}
  */
 export const currentSupportedLanguages = [
@@ -74,6 +74,7 @@ export const languages = {
 	hi: "हिन्दी",
 	bn: "বাংলা",
 	pa: "ਪੰਜਾਬੀ",
+	mr: "मराठी",
 	id: "Bahasa Indonesia",
 	vi: "Tiếng Việt",
 	tr: "Türkçe",

package/source/i18n/time-ago.mjs

@@ -439,6 +439,135 @@ const translations = {
 		},
 	},
 
+	bn: {
+		template: {
+			on: (value) => `${value}-এ`,
+			past: (value) => `${value} আগে`,
+			future: (value) => `${value} পরে`,
+			justNow: () => `এইমাত্র`,
+		},
+		units: {
+			day: {
+				zero: "দিন",
+				one: "দিন",
+				two: "দিন",
+				few: "দিন",
+				many: "দিন",
+				other: "দিন",
+			},
+			hour: {
+				zero: "ঘণ্টা",
+				one: "ঘণ্টা",
+				two: "ঘণ্টা",
+				few: "ঘণ্টা",
+				many: "ঘণ্টা",
+				other: "ঘণ্টা",
+			},
+			minute: {
+				zero: "মিনিট",
+				one: "মিনিট",
+				two: "মিনিট",
+				few: "মিনিট",
+				many: "মিনিট",
+				other: "মিনিট",
+			},
+			second: {
+				zero: "সেকেন্ড",
+				one: "সেকেন্ড",
+				two: "সেকেন্ড",
+				few: "সেকেন্ড",
+				many: "সেকেন্ড",
+				other: "সেকেন্ড",
+			},
+		},
+	},
+
+	pa: {
+		template: {
+			on: (value) => `${value} ਨੂੰ`,
+			past: (value) => `${value} ਪਹਿਲਾਂ`,
+			future: (value) => `${value} ਬਾਅਦ`,
+			justNow: () => `ਹੁਣੇ`,
+		},
+		units: {
+			day: {
+				zero: "ਦਿਨ",
+				one: "ਦਿਨ",
+				two: "ਦਿਨ",
+				few: "ਦਿਨ",
+				many: "ਦਿਨ",
+				other: "ਦਿਨ",
+			},
+			hour: {
+				zero: "ਘੰਟੇ",
+				one: "ਘੰਟਾ",
+				two: "ਘੰਟੇ",
+				few: "ਘੰਟੇ",
+				many: "ਘੰਟੇ",
+				other: "ਘੰਟੇ",
+			},
+			minute: {
+				zero: "ਮਿੰਟ",
+				one: "ਮਿੰਟ",
+				two: "ਮਿੰਟ",
+				few: "ਮਿੰਟ",
+				many: "ਮਿੰਟ",
+				other: "ਮਿੰਟ",
+			},
+			second: {
+				zero: "ਸਕਿੰਟ",
+				one: "ਸਕਿੰਟ",
+				two: "ਸਕਿੰਟ",
+				few: "ਸਕਿੰਟ",
+				many: "ਸਕਿੰਟ",
+				other: "ਸਕਿੰਟ",
+			},
+		},
+	},
+
+	mr: {
+		template: {
+			on: (value) => `${value} रोजी`,
+			past: (value) => `${value} पूर्वी`,
+			future: (value) => `${value} नंतर`,
+			justNow: () => `आत्ताच`,
+		},
+		units: {
+			day: {
+				zero: "दिवस",
+				one: "दिवस",
+				two: "दिवस",
+				few: "दिवस",
+				many: "दिवस",
+				other: "दिवस",
+			},
+			hour: {
+				zero: "तास",
+				one: "तास",
+				two: "तास",
+				few: "तास",
+				many: "तास",
+				other: "तास",
+			},
+			minute: {
+				zero: "मिनिटे",
+				one: "मिनिट",
+				two: "मिनिटे",
+				few: "मिनिटे",
+				many: "मिनिटे",
+				other: "मिनिटे",
+			},
+			second: {
+				zero: "सेकंद",
+				one: "सेकंद",
+				two: "सेकंद",
+				few: "सेकंद",
+				many: "सेकंद",
+				other: "सेकंद",
+			},
+		},
+	},
+
 	pt: {
 		template: {
 			on: (value) => `em ${value}`,

package/test/cases/components/datatable/datasource-rest-lifecycle.mjs

@@ -335,7 +335,7 @@ describe("REST datasource lifecycle", function () {
 		expectNoPendingChanges(second);
 	});
 
-	it("preserves a read baseline when the save write finishes later", async function () {
+	it("preserves the exact read baseline when the save write finishes later", async function () {
 		const datasource = createDatasource("read-first-datasource");
 		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
 		const written = { data: [{ id: "area-1", name: "Written change" }] };
@@ -373,6 +373,14 @@ describe("REST datasource lifecycle", function () {
 		writeResult.resolve({ ok: true });
 		await waitForUpdates();
 		expectPendingChanges(button);
+
+		datasource.data = refreshed;
+		await waitForUpdates();
+		expectNoPendingChanges(button);
+
+		datasource.data = written;
+		await waitForUpdates();
+		expectPendingChanges(button);
 	});
 
 	it("establishes the read baseline when the save write finishes first", async function () {

package/test/cases/components/datatable/mobile-layout.mjs

@@ -80,6 +80,19 @@ describe("Datatable mobile layout", () => {
 		expect(generated).not.to.include("--monster-button-bar-gap:0.5rem");
 	});
 
+	it("keeps icon-only row overflow menus compact", () => {
+		expect(source).to.include("& > monster-button-bar");
+		expect(source).to.include("--monster-action-menu-min-inline-size: auto");
+		expect(source).to.include("inline-size: 100%");
+		expect(source).to.include("max-inline-size: 100%");
+		expect(source).to.include("min-inline-size: 0");
+		expect(generated).to.include(
+			"--monster-action-menu-min-inline-size:auto",
+		);
+		expect(generated).to.include("inline-size:100%");
+		expect(generated).to.include("max-inline-size:100%");
+	});
+
 	it("stacks labels above values when a responsive card becomes narrow", () => {
 		expect(source).to.include("container-name: monster-datatable-responsive");
 		expect(source).to.include("container-type: inline-size");

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

@@ -416,6 +416,27 @@ describe("ButtonBar", function () {
     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);
+    expect(cssText).to.contain(
+      ":has(>[data-monster-role=switch][hidden])",
+    );
+  });
+
+  it("should stack a nested button bar inside a parent overflow item", function () {
+    const cssText = ButtonBar.getCSSStyleSheet()
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join("\n");
+
+    expect(cssText).to.match(
+      /flex-direction:\s*var\(--monster-button-bar-flex-direction,\s*row\)/u,
+    );
+    expect(cssText).to.match(
+      /--monster-button-bar-flex-direction:\s*column/u,
+    );
+    expect(cssText).to.match(/--monster-button-bar-height:\s*auto/u);
+    expect(cssText).to.match(
+      /slot:not\(\[name\]\)[\s\S]*?inline-size:\s*100%/u,
+    );
   });
 
   it("should clear joined-border offsets when a button gap is configured", async function () {

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/locale-defaults.mjs

@@ -0,0 +1,58 @@
+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("localized form defaults", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		global.ResizeObserver ??= ResizeObserverMock;
+
+		await Promise.all([
+			import("../../../../source/components/form/buy-box.mjs"),
+			import("../../../../source/components/form/cart-control.mjs"),
+			import("../../../../source/components/form/login.mjs"),
+			import("../../../../source/components/form/select.mjs"),
+			import("../../../../source/components/form/variant-select.mjs"),
+			import("../../../../source/components/form/wizard.mjs"),
+		]);
+	});
+
+	afterEach(() => {
+		document.documentElement.lang = "en";
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("uses native text for localized component options", () => {
+		for (const [tag, locale, option, expected] of [
+			[
+				"monster-buy-box",
+				"de",
+				"labels.selectVariant",
+				"Bitte eine Variante wählen.",
+			],
+			["monster-buy-box", "ru", "labels.addToCart", "В корзину"],
+			["monster-cart-control", "cs", "labels.items", "Položky"],
+			["monster-login", "hi", "labels.username", "उपयोगकर्ता नाम या ई-मेल"],
+			["monster-login", "bn", "labels.password", "পাসওয়ার্ড"],
+			["monster-login", "pa", "labels.login", "ਲਾਗ ਇਨ ਕਰੋ"],
+			["monster-login", "mr", "labels.mailAddress", "ई-मेल पत्ता"],
+			["monster-login", "fi", "labels.login", "Kirjaudu sisään"],
+			["monster-variant-select", "pt", "messages.valid", "A seleção é válida."],
+			[
+				"monster-select",
+				"fr",
+				"labels.no-options-available",
+				"Aucune option disponible.",
+			],
+			["monster-wizard", "sv", "labels.submit", "Slutför"],
+		]) {
+			document.documentElement.lang = locale;
+			const element = document.createElement(tag);
+			assert.equal(element.getOption(option), expected, `${tag}:${locale}`);
+		}
+	});
+});

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

@@ -48,6 +48,18 @@ describe("PopperButton", function () {
 		expect(cssText).to.contain("textarea{resize:vertical;min-height:6rem");
 	});
 
+	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)
+			.join("\n")
+			.replaceAll(/\s+/g, "");
+
+		expect(cssText).to.contain(
+			"[part=content]:not([data-monster-overflow-mode=visible]){padding:var(--monster-popper-focus-bleed,max(0px,calc(var(--monster-focus-ring-width,2px)+var(--monster-focus-ring-offset,2px))))",
+		);
+	});
+
 	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");