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

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/react.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { WarpSelect } from './select.js';
+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" | "_setValue" | "handleKeyDown"> & {
     onChange?: ((e: CustomEvent<any>) => void) | undefined;
     onchange?: ((e: CustomEvent<any>) => void) | undefined;

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,7 +20,7 @@ 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 | undefined;
     /**
      * Renders the field in an invalid state.
@@ -81,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([]);
     });