@warp-ds/elements 2.10.0-next.9 → 2.10.0

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { WarpRadioGroup } from './radio-group.js';
-export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpRadioGroup>, "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onInput" | "reportValidity" | "optional" | "hasInteracted"> & {
-    onInput?: (e: Event) => void;
-    oninput?: (e: Event) => void;
-    onChange?: (e: Event) => void;
-    onchange?: (e: Event) => void;
+import React from "react";
+import { WarpRadioGroup } from "./radio-group.js";
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpRadioGroup>, "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onInput" | "reportValidity" | "hasInteracted"> & {
+    onInput?: ((e: Event) => void) | undefined;
+    oninput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+    onchange?: ((e: Event) => void) | undefined;
 } & Partial<Omit<WarpRadioGroup, keyof HTMLElement>> & React.RefAttributes<WarpRadioGroup>, "ref">, "help-text"> & {
     helpText?: string;
 } & React.RefAttributes<WarpRadioGroup>>;

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

@@ -1,23 +1,23 @@
-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 BaseRadioGroup = createComponent({
-    tagName: 'w-radio-group',
+    tagName: "w-radio-group",
     elementClass: Component,
     react: React,
     events: {
-        onInput: 'input',
-        oninput: 'input',
-        onChange: 'change',
-        onchange: 'change',
+        onInput: "input",
+        oninput: "input",
+        onChange: "change",
+        onchange: "change",
     },
 });
 export const RadioGroup = React.forwardRef(({ helpText, ...props }, ref) => React.createElement(BaseRadioGroup, {
     ...props,
-    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ...(helpText !== undefined ? { "help-text": helpText } : {}),
     ref,
 }));
-RadioGroup.displayName = 'RadioGroup';
+RadioGroup.displayName = "RadioGroup";

package/dist/packages/select/input-styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared styles for input components (textfield, textarea, select)
+ * using the internal token pattern with a public styling API.
+ *
+ * Public API tokens (customizable):
+ * - Label: --w-c-input-label-*
+ * - Help text: --w-c-input-help-text-*
+ * - Optional indicator: --w-c-input-optional-*
+ */
+export declare const inputLabelStyles: import("lit").CSSResult;
+export declare const inputHelpTextStyles: import("lit").CSSResult;

package/dist/packages/select/input-styles.js

@@ -0,0 +1,88 @@
+import { css } from "lit";
+/**
+ * Shared styles for input components (textfield, textarea, select)
+ * using the internal token pattern with a public styling API.
+ *
+ * Public API tokens (customizable):
+ * - Label: --w-c-input-label-*
+ * - Help text: --w-c-input-help-text-*
+ * - Optional indicator: --w-c-input-optional-*
+ */
+export const inputLabelStyles = css `
+	/* Label component tokens with semantic fallbacks */
+	label {
+		/* Internal tokens - not part of public API */
+		--_color: var(--w-c-input-label-color, var(--w-s-color-text));
+		--_font-size: var(--w-c-input-label-font-size, var(--w-font-size-s));
+		--_line-height: var(--w-c-input-label-line-height, var(--w-line-height-s));
+		--_font-weight: var(--w-c-input-label-font-weight, 700);
+		--_padding-bottom: var(--w-c-input-label-padding-bottom, 0.4rem);
+		--_cursor: var(--w-c-input-label-cursor, pointer);
+		--_display: var(--w-c-input-label-display, block);
+
+		/* Apply styles */
+		display: var(--_display);
+		position: relative;
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		font-weight: var(--_font-weight);
+		padding-bottom: var(--_padding-bottom);
+		cursor: var(--_cursor);
+		color: var(--_color);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	/* Optional text styling */
+	label span {
+		--_padding-left: var(--w-c-input-optional-padding-left, 0.8rem);
+		--_font-weight: var(--w-c-input-optional-font-weight, 400);
+		--_font-size: var(--w-c-input-optional-font-size, var(--w-font-size-s));
+		--_line-height: var(
+			--w-c-input-optional-line-height,
+			var(--w-line-height-s)
+		);
+		--_color: var(--w-c-input-optional-color, var(--w-s-color-text-subtle));
+
+		padding-left: var(--_padding-left);
+		font-weight: var(--_font-weight);
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		color: var(--_color);
+	}
+`;
+export const inputHelpTextStyles = css `
+	/* Help text component tokens with semantic fallbacks */
+	:host {
+		--_help-text-color: var(
+			--w-c-input-help-text-color,
+			var(--w-s-color-text-subtle)
+		);
+		--_help-text-font-size: var(
+			--w-c-input-help-text-font-size,
+			var(--w-font-size-xs)
+		);
+		--_help-text-line-height: var(
+			--w-c-input-help-text-line-height,
+			var(--w-line-height-xs)
+		);
+		--_help-text-margin-top: var(--w-c-input-help-text-margin-top, 0.4rem);
+		--_help-text-display: var(--w-c-input-help-text-display, block);
+	}
+
+	/* Invalid state overrides color */
+	:host([invalid]) {
+		--_help-text-color: var(
+			--w-c-input-help-text-color-invalid,
+			var(--w-s-color-text-negative)
+		);
+	}
+
+	.help-text {
+		font-size: var(--_help-text-font-size);
+		line-height: var(--_help-text-line-height);
+		margin-top: var(--_help-text-margin-top);
+		display: var(--_help-text-display);
+		color: var(--_help-text-color);
+	}
+`;

package/dist/packages/select/locales/da/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(valgfrit)\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Valgfri\"]}");

package/dist/packages/select/locales/en/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(optional)\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Optional\"]}");

package/dist/packages/select/locales/fi/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(vapaaehtoinen)\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Valinnainen\"]}");

package/dist/packages/select/locales/nb/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(valgfritt)\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Valgfri\"]}");

package/dist/packages/select/locales/sv/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"(valfritt)\"]}");
+/*eslint-disable*/ export const messages = JSON.parse("{\"select.label.optional\":[\"Valfritt\"]}");

package/dist/packages/select/react.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { WarpSelect } from './select.js';
-export declare const Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "hint" | "optional" | "willUpdate" | "formStateRestoreCallback" | "always" | "_options" | "_setValue" | "handleKeyDown"> & {
-    onChange?: (e: Event) => void;
-    onchange?: (e: Event) => void;
+import React from "react";
+import { WarpSelect } from "./select.js";
+export declare const Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "hint" | "willUpdate" | "formStateRestoreCallback" | "always" | "_setValue" | "handleKeyDown"> & {
+    onChange?: ((e: CustomEvent<any>) => void) | undefined;
+    onchange?: ((e: CustomEvent<any>) => void) | undefined;
 } & Partial<Omit<WarpSelect, keyof HTMLElement>> & React.RefAttributes<WarpSelect>, "ref">, "help-text" | "read-only" | "auto-focus"> & {
     autoFocus?: boolean;
     helpText?: string;

package/dist/packages/select/react.js

@@ -1,28 +1,28 @@
-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 BaseSelect = createComponent({
-    tagName: 'w-select',
+    tagName: "w-select",
     elementClass: Component,
     react: React,
     events: {
-        onChange: 'change',
-        onchange: 'change',
+        onChange: "change",
+        onchange: "change",
     },
 });
 export const Select = React.forwardRef(({ autoFocus, helpText, readOnly, ...props }, ref) => React.createElement(BaseSelect, {
     ...props,
-    ...(autoFocus ? { 'auto-focus': true } : {}),
-    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
-    ...(readOnly ? { 'read-only': true } : {}),
+    ...(autoFocus ? { "auto-focus": true } : {}),
+    ...(helpText !== undefined ? { "help-text": helpText } : {}),
+    ...(readOnly ? { "read-only": true } : {}),
     ref,
 }));
-Select.displayName = 'Select';
+Select.displayName = "Select";
 export const Option = createComponent({
-    tagName: 'w-option',
+    tagName: "w-option",
     elementClass: Component,
     react: React,
 });

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

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

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

@@ -1,128 +1,135 @@
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './select.js';
-describe('w-select accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
-        test('default state has no violations', async () => {
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./select.js";
+describe("w-select accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
             const page = render(html `
-        <w-select label="Berries">
-          <option value="strawberries">Strawberries</option>
-          <option value="raspberries">Raspberries</option>
-        </w-select>
-      `);
+				<w-select label="Berries">
+					<option value="strawberries">Strawberries</option>
+					<option value="raspberries">Raspberries</option>
+				</w-select>
+			`);
             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-select label="Berries" help-text="Choose your favorite">
-          <option value="strawberries">Strawberries</option>
-          <option value="raspberries">Raspberries</option>
-        </w-select>
-      `);
+				<w-select label="Berries" help-text="Choose your favorite">
+					<option value="strawberries">Strawberries</option>
+					<option value="raspberries">Raspberries</option>
+				</w-select>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('invalid state has no violations', async () => {
+        test("invalid state has no violations", async () => {
             const page = render(html `
-        <w-select label="Berries" invalid help-text="Selection required">
-          <option value="">Choose one</option>
-          <option value="strawberries">Strawberries</option>
-        </w-select>
-      `);
+				<w-select label="Berries" invalid help-text="Selection required">
+					<option value="">Choose one</option>
+					<option value="strawberries">Strawberries</option>
+				</w-select>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('disabled state has no violations', async () => {
+        test("disabled state has no violations", async () => {
             const page = render(html `
-        <w-select label="Berries" disabled>
-          <option value="strawberries">Strawberries</option>
-          <option value="raspberries">Raspberries</option>
-        </w-select>
-      `);
+				<w-select label="Berries" disabled>
+					<option value="strawberries">Strawberries</option>
+					<option value="raspberries">Raspberries</option>
+				</w-select>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('select has accessible name from label', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("select has accessible name from label", async () => {
             const page = render(html `
-        <w-select label="Berry choice">
-          <option value="strawberries">Strawberries</option>
-          <option value="raspberries">Raspberries</option>
-        </w-select>
-      `);
-            await expect.element(page.getByLabelText('Berry choice')).toBeVisible();
+				<w-select label="Berry choice">
+					<option value="strawberries">Strawberries</option>
+					<option value="raspberries">Raspberries</option>
+				</w-select>
+			`);
+            await expect.element(page.getByLabelText("Berry choice")).toBeVisible();
         });
     });
-    describe('WCAG 3.3.1/3.3.2 - Errors and Instructions', () => {
-        test('invalid state is exposed through aria-invalid', async () => {
+    describe("WCAG 3.3.1/3.3.2 - Errors and Instructions", () => {
+        test("invalid state is exposed through aria-invalid", async () => {
             const page = render(html `
-        <w-select label="Berry choice" invalid>
-          <option value="">Choose one</option>
-          <option value="strawberries">Strawberries</option>
-        </w-select>
-      `);
-            await expect.element(page.getByLabelText('Berry choice')).toHaveAttribute('aria-invalid', 'true');
+				<w-select label="Berry choice" invalid>
+					<option value="">Choose one</option>
+					<option value="strawberries">Strawberries</option>
+				</w-select>
+			`);
+            await expect
+                .element(page.getByLabelText("Berry choice"))
+                .toHaveAttribute("aria-invalid", "true");
         });
-        test('help text is associated as accessible description', async () => {
+        test("help text is associated as accessible description", async () => {
             const page = render(html `
-        <w-select label="Berry choice" help-text="This appears in your profile">
-          <option value="strawberries">Strawberries</option>
-          <option value="raspberries">Raspberries</option>
-        </w-select>
-      `);
+				<w-select label="Berry choice" help-text="This appears in your profile">
+					<option value="strawberries">Strawberries</option>
+					<option value="raspberries">Raspberries</option>
+				</w-select>
+			`);
             await expect
-                .element(page.getByLabelText('Berry choice'))
-                .toHaveAccessibleDescription('This appears in your profile');
+                .element(page.getByLabelText("Berry choice"))
+                .toHaveAccessibleDescription("This appears in your profile");
         });
     });
-    describe('WCAG 4.1.2 - Name, Role, Value', () => {
-        test('disabled state is exposed', async () => {
+    describe("WCAG 4.1.2 - Name, Role, Value", () => {
+        test("disabled state is exposed", async () => {
             const page = render(html `
-        <w-select label="Berry choice" disabled>
-          <option value="strawberries">Strawberries</option>
-          <option value="raspberries">Raspberries</option>
-        </w-select>
-      `);
-            await expect.element(page.getByLabelText('Berry choice')).toBeDisabled();
+				<w-select label="Berry choice" disabled>
+					<option value="strawberries">Strawberries</option>
+					<option value="raspberries">Raspberries</option>
+				</w-select>
+			`);
+            await expect.element(page.getByLabelText("Berry choice")).toBeDisabled();
         });
-        test('value reflects selected option', async () => {
+        test("value reflects selected option", async () => {
             const page = render(html `
-        <w-select label="Berry choice">
-          <option value="strawberries">Strawberries</option>
-          <option value="raspberries" selected>Raspberries</option>
-        </w-select>
-      `);
-            await expect.element(page.getByLabelText('Berry choice')).toHaveValue('raspberries');
+				<w-select label="Berry choice">
+					<option value="strawberries">Strawberries</option>
+					<option value="raspberries" selected>Raspberries</option>
+				</w-select>
+			`);
+            await expect
+                .element(page.getByLabelText("Berry choice"))
+                .toHaveValue("raspberries");
         });
-        test('dynamic selected option updates are reflected accessibly', async () => {
+        test("dynamic selected option updates are reflected accessibly", async () => {
             const page = render(html `
-        <w-select label="Berry choice">
-          <option value="strawberries" selected>Strawberries</option>
-          <option value="raspberries">Raspberries</option>
-        </w-select>
-      `);
-            const wSelect = document.querySelector('w-select');
+				<w-select label="Berry choice">
+					<option value="strawberries" selected>Strawberries</option>
+					<option value="raspberries">Raspberries</option>
+				</w-select>
+			`);
+            const wSelect = document.querySelector("w-select");
             await wSelect.updateComplete;
-            const lightOptions = Array.from(wSelect.querySelectorAll('option'));
-            lightOptions[0].removeAttribute('selected');
-            lightOptions[1].setAttribute('selected', '');
+            const lightOptions = [...wSelect.querySelectorAll("option")];
+            lightOptions[0].removeAttribute("selected");
+            lightOptions[1].setAttribute("selected", "");
             await expect
-                .poll(() => page.getByLabelText('Berry choice').element().value)
-                .toBe('raspberries');
+                .poll(() => page.getByLabelText("Berry choice").element()
+                .value)
+                .toBe("raspberries");
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('select is focusable', async () => {
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("select is focusable", async () => {
             const page = render(html `
-        <w-select label="Berry choice">
-          <option value="strawberries">Strawberries</option>
-          <option value="raspberries">Raspberries</option>
-        </w-select>
-      `);
-            const select = page.getByLabelText('Berry choice');
+				<w-select label="Berry choice">
+					<option value="strawberries">Strawberries</option>
+					<option value="raspberries">Raspberries</option>
+				</w-select>
+			`);
+            const select = page.getByLabelText("Berry choice");
             await select.click();
-            const wSelect = document.querySelector('w-select');
-            await expect.poll(() => wSelect?.shadowRoot?.activeElement?.tagName).toBe('SELECT');
+            const wSelect = document.querySelector("w-select");
+            await expect
+                .poll(() => wSelect?.shadowRoot?.activeElement?.tagName)
+                .toBe("SELECT");
         });
     });
 });

package/dist/packages/select/select.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import '../icon/icon.js';
+import { LitElement, PropertyValues, TemplateResult } from "lit";
+import "../icon/icon.js";
 declare const WarpSelect_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * A dropdown component for selecting a single value.
@@ -20,8 +20,8 @@ export declare class WarpSelect extends WarpSelect_base {
      * The content displayed as the help text.
      *
      * Paired with `invalid` to show the text as a validation error.
-    */
-    helpText: string;
+     */
+    helpText: string | undefined;
     /**
      * Renders the field in an invalid state.
      *
@@ -39,11 +39,11 @@ export declare class WarpSelect extends WarpSelect_base {
      *
      * @deprecated Use `help-text` instead.
      */
-    hint: string;
+    hint: string | undefined;
     /**
      * The content to display as the label.
      */
-    label: string;
+    label: string | undefined;
     /**
      * Whether to show the optional indicator after the label.
      */
@@ -62,16 +62,15 @@ export declare class WarpSelect extends WarpSelect_base {
      * Renders the field in a readonly state.
      */
     readonly: boolean;
-    /**  @internal */
-    _options: Array<TemplateResult>;
+    private _options;
     /**
      * The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
      */
-    name: string;
+    name: string | undefined;
     /**
      * Lets you set the current value.
      */
-    value: string;
+    value: string | undefined;
     static styles: import("lit").CSSResult[];
     constructor();
     /**  @internal */
@@ -82,7 +81,7 @@ export declare class WarpSelect extends WarpSelect_base {
     disconnectedCallback(): void;
     firstUpdated(): void;
     /**  @internal */
-    formStateRestoreCallback(state: string | File | FormData | null, _reason: 'autocomplete' | 'restore'): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _reason: "autocomplete" | "restore"): void;
     willUpdate(changedProperties: PropertyValues<this>): void;
     updated(changedProperties: PropertyValues<this>): void;
     /**  @internal */

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

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

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

@@ -1,36 +1,36 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './select.js';
-describe('w-select React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./select.js";
+describe("w-select React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-select', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-select", {});
         expect(warnings).toEqual([]);
     });
-    test('with label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-select', {
-            label: 'Country',
+    test("with label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-select", {
+            label: "Country",
         });
         expect(warnings).toEqual([]);
     });
-    test('with disabled state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-select', {
+    test("with disabled state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-select", {
             disabled: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with invalid state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-select', {
+    test("with invalid state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-select", {
             invalid: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with help text hydrates without warnings', async () => {
-        const warnings = await testHydration('w-select', {
-            'help-text': 'Select your country',
+    test("with help text hydrates without warnings", async () => {
+        const warnings = await testHydration("w-select", {
+            "help-text": "Select your country",
         });
         expect(warnings).toEqual([]);
     });