@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

package/dist/packages/checkbox-group/checkbox-group.test.js

@@ -1,122 +1,128 @@
-import { i18n } from '@lingui/core';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './checkbox-group.js';
-import '../checkbox/checkbox.js';
+import { i18n } from "@lingui/core";
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./checkbox-group.js";
+import "../checkbox/checkbox.js";
 // Initialize i18n with English locale for tests
-i18n.load('en', {
-    'checkbox-group.label.optional': ['(optional)'],
-    'checkbox-group.validation.required': ['At least one selection is required.'],
+i18n.load("en", {
+    "checkbox-group.label.optional": ["(optional)"],
+    "checkbox-group.validation.required": ["At least one selection is required."],
 });
-i18n.activate('en');
-test('renders help text when provided', async () => {
+i18n.activate("en");
+test("renders help text when provided", async () => {
     const page = render(html `
-    <w-checkbox-group help-text="Select all that apply">
-      <w-checkbox>One</w-checkbox>
-      <w-checkbox>Two</w-checkbox>
-    </w-checkbox-group>
-  `);
-    await expect.element(page.getByText('Select all that apply')).toBeVisible();
+		<w-checkbox-group help-text="Select all that apply">
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    await expect.element(page.getByText("Select all that apply")).toBeVisible();
 });
-test('associates help text with the group', async () => {
+test("associates help text with the group", async () => {
     const page = render(html `
-    <w-checkbox-group help-text="Choose wisely">
-      <w-checkbox>One</w-checkbox>
-      <w-checkbox>Two</w-checkbox>
-    </w-checkbox-group>
-  `);
-    const group = page.getByRole('group');
-    await expect.element(group).toHaveAccessibleDescription('Choose wisely');
+		<w-checkbox-group help-text="Choose wisely">
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    const group = page.getByRole("group");
+    await expect.element(group).toHaveAccessibleDescription("Choose wisely");
 });
-test('renders label above the group and associates it', async () => {
+test("renders label above the group and associates it", async () => {
     const page = render(html `
-    <w-checkbox-group label="Preferences">
-      <w-checkbox>One</w-checkbox>
-      <w-checkbox>Two</w-checkbox>
-    </w-checkbox-group>
-  `);
-    await expect.element(page.getByText('Preferences')).toBeVisible();
-    await expect.element(page.getByRole('group', { name: 'Preferences' })).toBeVisible();
+		<w-checkbox-group label="Preferences">
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    await expect.element(page.getByText("Preferences")).toBeVisible();
+    await expect
+        .element(page.getByRole("group", { name: "Preferences" }))
+        .toBeVisible();
 });
-test('renders optional text when optional is true', async () => {
+test("renders optional text when optional is true", async () => {
     const page = render(html `
-    <w-checkbox-group label="Preferences" optional>
-      <w-checkbox>One</w-checkbox>
-      <w-checkbox>Two</w-checkbox>
-    </w-checkbox-group>
-  `);
-    await expect.element(page.getByText('(optional)')).toBeVisible();
+		<w-checkbox-group label="Preferences" optional>
+			<w-checkbox>One</w-checkbox>
+			<w-checkbox>Two</w-checkbox>
+		</w-checkbox-group>
+	`);
+    await expect.element(page.getByText("(optional)")).toBeVisible();
 });
-test('required group toggles invalid state for group and children after submit and selection', async () => {
+test("required group toggles invalid state for group and children after submit and selection", async () => {
     const page = render(html `
-    <form>
-      <w-checkbox-group label="Preferences" required>
-        <w-checkbox name="group" value="foo">Foo</w-checkbox>
-        <w-checkbox name="group" value="bar">Bar</w-checkbox>
-      </w-checkbox-group>
-      <button type="submit">Submit</button>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const submit = page.getByRole('button', { name: 'Submit' });
-    const group = page.getByRole('group', { name: 'Preferences' });
-    const firstCheckbox = page.getByRole('checkbox', { name: 'Foo' });
-    const firstCheckboxEl = document.querySelector('w-checkbox');
+		<form>
+			<w-checkbox-group label="Preferences" required>
+				<w-checkbox name="group" value="foo">Foo</w-checkbox>
+				<w-checkbox name="group" value="bar">Bar</w-checkbox>
+			</w-checkbox-group>
+			<button type="submit">Submit</button>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const submit = page.getByRole("button", { name: "Submit" });
+    const group = page.getByRole("group", { name: "Preferences" });
+    const firstCheckbox = page.getByRole("checkbox", { name: "Foo" });
+    const firstCheckboxEl = document.querySelector("w-checkbox");
     await firstCheckboxEl.updateComplete;
     const internalInput = firstCheckboxEl.shadowRoot?.querySelector('[part="input"]');
     if (!internalInput) {
-        throw new Error('Expected checkbox input element to exist');
+        throw new Error("Expected checkbox input element to exist");
     }
     await submit.click();
     await expect.poll(() => form.checkValidity()).toBe(false);
-    await expect.element(group).toHaveAttribute('aria-invalid', 'true');
-    await expect.element(firstCheckbox).toHaveAttribute('aria-invalid', 'true');
+    await expect.element(group).toHaveAttribute("aria-invalid", "true");
+    await expect.element(firstCheckbox).toHaveAttribute("aria-invalid", "true");
     // Group invalid state should flow via aria-invalid on the internal input,
     // while host invalid remains untouched (no host attribute mutation).
-    expect(firstCheckboxEl.hasAttribute('invalid')).toBe(false);
-    expect(internalInput.getAttribute('aria-invalid')).toBe('true');
+    expect(firstCheckboxEl.hasAttribute("invalid")).toBe(false);
+    expect(internalInput.getAttribute("aria-invalid")).toBe("true");
     firstCheckboxEl.click();
     await expect.poll(() => form.checkValidity()).toBe(true);
-    await expect.element(group).not.toHaveAttribute('aria-invalid', 'true');
-    await expect.element(firstCheckbox).not.toHaveAttribute('aria-invalid', 'true');
-    expect(internalInput.getAttribute('aria-invalid')).toBeNull();
+    await expect.element(group).not.toHaveAttribute("aria-invalid", "true");
+    await expect
+        .element(firstCheckbox)
+        .not.toHaveAttribute("aria-invalid", "true");
+    expect(internalInput.getAttribute("aria-invalid")).toBeNull();
 });
-test('submits checked checkbox values via form data', async () => {
+test("submits checked checkbox values via form data", async () => {
     render(html `
-    <form>
-      <w-checkbox-group label="Preferences">
-        <w-checkbox name="prefs" value="alpha" checked>Alpha</w-checkbox>
-        <w-checkbox name="prefs" value="beta" checked>Beta</w-checkbox>
-        <w-checkbox name="prefs" value="gamma">Gamma</w-checkbox>
-      </w-checkbox-group>
-    </form>
-  `);
-    const form = document.querySelector('form');
+		<form>
+			<w-checkbox-group label="Preferences">
+				<w-checkbox name="prefs" value="alpha" checked>Alpha</w-checkbox>
+				<w-checkbox name="prefs" value="beta" checked>Beta</w-checkbox>
+				<w-checkbox name="prefs" value="gamma">Gamma</w-checkbox>
+			</w-checkbox-group>
+		</form>
+	`);
+    const form = document.querySelector("form");
     const data = new FormData(form);
-    expect(data.getAll('prefs')).toEqual(['alpha', 'beta']);
+    expect(data.getAll("prefs")).toEqual(["alpha", "beta"]);
 });
-test('applies group name to child checkboxes without a name', async () => {
+test("applies group name to child checkboxes without a name", async () => {
     render(html `
-    <w-checkbox-group name="prefs">
-      <w-checkbox value="alpha" checked>Alpha</w-checkbox>
-      <w-checkbox name="custom" value="beta" checked>Beta</w-checkbox>
-    </w-checkbox-group>
-  `);
-    const [first, second] = Array.from(document.querySelectorAll('w-checkbox'));
+		<w-checkbox-group name="prefs">
+			<w-checkbox value="alpha" checked>Alpha</w-checkbox>
+			<w-checkbox name="custom" value="beta" checked>Beta</w-checkbox>
+		</w-checkbox-group>
+	`);
+    const [first, second] = [
+        ...document.querySelectorAll("w-checkbox"),
+    ];
     await first.updateComplete;
-    expect(first.name).toBe('prefs');
-    expect(second.name).toBe('custom');
+    expect(first.name).toBe("prefs");
+    expect(second.name).toBe("custom");
 });
-test('warns when used in a form without a name', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+test("warns when used in a form without a name", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => { });
     render(html `
-    <form>
-      <w-checkbox-group>
-        <w-checkbox value="alpha" checked>Alpha</w-checkbox>
-      </w-checkbox-group>
-    </form>
-  `);
+		<form>
+			<w-checkbox-group>
+				<w-checkbox value="alpha" checked>Alpha</w-checkbox>
+			</w-checkbox-group>
+		</form>
+	`);
     await expect.poll(() => warn).toHaveBeenCalled();
     warn.mockRestore();
 });

package/dist/packages/checkbox-group/react.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { WarpCheckboxGroup } from './checkbox-group.js';
+import React from "react";
+import { WarpCheckboxGroup } from "./checkbox-group.js";
 export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpCheckboxGroup>, "form" | "label" | "name" | "invalid" | "helpText" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "reportValidity" | "optional"> & {} & Partial<Omit<WarpCheckboxGroup, keyof HTMLElement>> & React.RefAttributes<WarpCheckboxGroup>, "ref">, "help-text"> & {
     helpText?: string;
 } & React.RefAttributes<WarpCheckboxGroup>>;

package/dist/packages/checkbox-group/react.js

@@ -1,17 +1,17 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 const BaseCheckboxGroup = createComponent({
-    tagName: 'w-checkbox-group',
+    tagName: "w-checkbox-group",
     elementClass: Component,
     react: React,
 });
 export const CheckboxGroup = React.forwardRef(({ helpText, ...props }, ref) => React.createElement(BaseCheckboxGroup, {
     ...props,
-    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ...(helpText !== undefined ? { "help-text": helpText } : {}),
     ref,
 }));
-CheckboxGroup.displayName = 'CheckboxGroup';
+CheckboxGroup.displayName = "CheckboxGroup";

package/dist/packages/combobox/combobox.a11y.test.d.ts

@@ -1,2 +1,2 @@
-import '../textfield/textfield.js';
-import './combobox.js';
+import "../textfield/textfield.js";
+import "./combobox.js";

package/dist/packages/combobox/combobox.a11y.test.js

@@ -1,74 +1,97 @@
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import '../textfield/textfield.js';
-import './combobox.js';
-describe('w-combobox accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "../textfield/textfield.js";
+import "./combobox.js";
+describe("w-combobox accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
         const sampleOptions = [
-            { value: 'apple', label: 'Apple' },
-            { value: 'banana', label: 'Banana' },
-            { value: 'orange', label: 'Orange' },
+            { value: "apple", label: "Apple" },
+            { value: "banana", label: "Banana" },
+            { value: "orange", label: "Orange" },
         ];
-        test('default state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" .options="${sampleOptions}"></w-combobox>`);
+        test("default state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('with help text has no violations', async () => {
+        test("with help text has no violations", async () => {
             const page = render(html `
-        <w-combobox
-          label="Select a fruit"
-          help-text="Start typing to filter options"
-          .options="${sampleOptions}"></w-combobox>
-      `);
+				<w-combobox
+					label="Select a fruit"
+					help-text="Start typing to filter options"
+					.options="${sampleOptions}"
+				></w-combobox>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('invalid state has no violations', async () => {
+        test("invalid state has no violations", async () => {
             const page = render(html `
-        <w-combobox
-          label="Select a fruit"
-          invalid
-          help-text="Please select a valid option"
-          .options="${sampleOptions}"></w-combobox>
-      `);
+				<w-combobox
+					label="Select a fruit"
+					invalid
+					help-text="Please select a valid option"
+					.options="${sampleOptions}"
+				></w-combobox>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('disabled state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" disabled .options="${sampleOptions}"></w-combobox>`);
+        test("disabled state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					disabled
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('required state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" required .options="${sampleOptions}"></w-combobox>`);
+        test("required state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					required
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('optional state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" optional .options="${sampleOptions}"></w-combobox>`);
+        test("optional state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					optional
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('open on focus state has no violations', async () => {
-            const page = render(html `<w-combobox label="Select a fruit" open-on-focus .options="${sampleOptions}"></w-combobox>`);
+        test("open on focus state has no violations", async () => {
+            const page = render(html `<w-combobox
+					label="Select a fruit"
+					open-on-focus
+					.options="${sampleOptions}"
+				></w-combobox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('with light-DOM option children has no violations', async () => {
+        test("with light-DOM option children has no violations", async () => {
             const page = render(html `
-        <w-combobox label="Select a fruit">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
-        </w-combobox>
-      `);
+				<w-combobox label="Select a fruit">
+					<option value="apple">Apple</option>
+					<option value="banana">Banana</option>
+					<option value="orange">Orange</option>
+				</w-combobox>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('open with light-DOM option children has no violations', async () => {
+        test("open with light-DOM option children has no violations", async () => {
             const page = render(html `
-        <w-combobox data-testid="combobox" label="Select a fruit" open-on-focus>
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
-        </w-combobox>
-      `);
-            const el = (await page.getByTestId('combobox').element());
-            const input = el?.shadowRoot?.querySelector('w-textfield')?.shadowRoot?.querySelector('input');
+				<w-combobox data-testid="combobox" label="Select a fruit" open-on-focus>
+					<option value="apple">Apple</option>
+					<option value="banana">Banana</option>
+					<option value="orange">Orange</option>
+				</w-combobox>
+			`);
+            const el = (await page.getByTestId("combobox").element());
+            const input = el?.shadowRoot
+                ?.querySelector("w-textfield")
+                ?.shadowRoot?.querySelector("input");
             input?.focus();
             await new Promise((resolve) => setTimeout(resolve, 100));
             await expect(page).toHaveNoAxeViolations();

package/dist/packages/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 export interface ComboboxOption {
     value: string;
     label?: string;
@@ -116,7 +116,7 @@ export declare class WarpCombobox extends WarpCombobox_base {
     private _displayValue;
     static styles: import("lit").CSSResult[];
     constructor();
-    firstUpdated(changedProps: Map<string, unknown>): void;
+    firstUpdated(): void;
     updated(changedProperties: Map<string, unknown>): void;
     resetFormControl(): void;
     connectedCallback(): void;

package/dist/packages/combobox/combobox.hydration.test.d.ts

@@ -1 +1 @@
-import './combobox.js';
+import "./combobox.js";

package/dist/packages/combobox/combobox.hydration.test.js

@@ -1,70 +1,70 @@
-import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './combobox.js';
-describe('w-combobox React SSR hydration', () => {
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./combobox.js";
+describe("w-combobox React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-combobox', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-combobox", {});
         expect(warnings).toEqual([]);
     });
-    test('with label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-combobox', {
-            label: 'Search',
+    test("with label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-combobox", {
+            label: "Search",
         });
         expect(warnings).toEqual([]);
     });
-    test('with placeholder hydrates without warnings', async () => {
-        const warnings = await testHydration('w-combobox', {
-            placeholder: 'Type to search...',
+    test("with placeholder hydrates without warnings", async () => {
+        const warnings = await testHydration("w-combobox", {
+            placeholder: "Type to search...",
         });
         expect(warnings).toEqual([]);
     });
-    test('with value hydrates without warnings', async () => {
-        const warnings = await testHydration('w-combobox', {
-            value: 'test',
+    test("with value hydrates without warnings", async () => {
+        const warnings = await testHydration("w-combobox", {
+            value: "test",
         });
         expect(warnings).toEqual([]);
     });
-    test('disabled combobox hydrates without warnings', async () => {
-        const warnings = await testHydration('w-combobox', {
+    test("disabled combobox hydrates without warnings", async () => {
+        const warnings = await testHydration("w-combobox", {
             disabled: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('invalid combobox hydrates without warnings', async () => {
-        const warnings = await testHydration('w-combobox', {
+    test("invalid combobox hydrates without warnings", async () => {
+        const warnings = await testHydration("w-combobox", {
             invalid: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('options array prop hydrates without runtime errors', async () => {
+    test("options array prop hydrates without runtime errors", async () => {
         const unhandledRejections = [];
         const onUnhandledRejection = (event) => {
             unhandledRejections.push(String(event.reason));
             event.preventDefault();
         };
-        window.addEventListener('unhandledrejection', onUnhandledRejection);
+        window.addEventListener("unhandledrejection", onUnhandledRejection);
         try {
-            await testHydration('w-combobox', {
+            await testHydration("w-combobox", {
                 options: [
-                    { value: 'apple', label: 'Apple' },
-                    { value: 'banana', label: 'Banana' },
+                    { value: "apple", label: "Apple" },
+                    { value: "banana", label: "Banana" },
                 ],
             });
             expect(unhandledRejections).toEqual([]);
         }
         finally {
-            window.removeEventListener('unhandledrejection', onUnhandledRejection);
+            window.removeEventListener("unhandledrejection", onUnhandledRejection);
         }
     });
-    test('dangerouslySetInnerHTML wrapper hydrates without attribute mismatch warnings', async () => {
-        const container = document.createElement('div');
-        container.id = 'hydration-innerhtml-root';
+    test("dangerouslySetInnerHTML wrapper hydrates without attribute mismatch warnings", async () => {
+        const container = document.createElement("div");
+        container.id = "hydration-innerhtml-root";
         document.body.appendChild(container);
         const innerHtml = '<w-combobox id="demo-combobox" placeholder="Search"></w-combobox>';
         try {
@@ -73,8 +73,8 @@ describe('w-combobox React SSR hydration', () => {
             // before React hydrates the tree.
             await new Promise((resolve) => setTimeout(resolve, 50));
             function App() {
-                return React.createElement('section', {
-                    className: 'example',
+                return React.createElement("section", {
+                    className: "example",
                     // biome-ignore lint/security/noDangerouslySetInnerHtml: test reproduces React hydration mismatch path
                     dangerouslySetInnerHTML: { __html: innerHtml },
                 });
@@ -82,9 +82,9 @@ describe('w-combobox React SSR hydration', () => {
             hydrateRoot(container, React.createElement(App), {
                 onRecoverableError: (error) => {
                     const msg = error instanceof Error ? error.message : String(error);
-                    if (msg.includes('Hydration') ||
-                        msg.includes('hydrat') ||
-                        msg.includes('did not match') ||
+                    if (msg.includes("Hydration") ||
+                        msg.includes("hydrat") ||
+                        msg.includes("did not match") ||
                         msg.includes("didn't match")) {
                         window.__HYDRATION_WARNINGS__.push(msg);
                     }
@@ -97,22 +97,22 @@ describe('w-combobox React SSR hydration', () => {
             document.body.removeChild(container);
         }
     });
-    test('declarative option children hydrate without attribute mismatch warnings', async () => {
-        const container = document.createElement('div');
-        container.id = 'hydration-options-root';
+    test("declarative option children hydrate without attribute mismatch warnings", async () => {
+        const container = document.createElement("div");
+        container.id = "hydration-options-root";
         document.body.appendChild(container);
         const innerHtml = [
             '<w-combobox id="demo-combobox" label="Search">',
             '<option value="apple">Apple</option>',
             '<option value="banana">Banana</option>',
-            '</w-combobox>',
-        ].join('');
+            "</w-combobox>",
+        ].join("");
         try {
             container.innerHTML = `<section class="example">${innerHtml}</section>`;
             await new Promise((resolve) => setTimeout(resolve, 50));
             function App() {
-                return React.createElement('section', {
-                    className: 'example',
+                return React.createElement("section", {
+                    className: "example",
                     // biome-ignore lint/security/noDangerouslySetInnerHtml: test reproduces React hydration mismatch path
                     dangerouslySetInnerHTML: { __html: innerHtml },
                 });
@@ -120,9 +120,9 @@ describe('w-combobox React SSR hydration', () => {
             hydrateRoot(container, React.createElement(App), {
                 onRecoverableError: (error) => {
                     const msg = error instanceof Error ? error.message : String(error);
-                    if (msg.includes('Hydration') ||
-                        msg.includes('hydrat') ||
-                        msg.includes('did not match') ||
+                    if (msg.includes("Hydration") ||
+                        msg.includes("hydrat") ||
+                        msg.includes("did not match") ||
                         msg.includes("didn't match")) {
                         window.__HYDRATION_WARNINGS__.push(msg);
                     }