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

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

@@ -1,51 +1,51 @@
-import { userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './switch.js';
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./switch.js";
 // axe-core doesn't support ElementInternals for ARIA attributes.
 // We use ElementInternals for role, aria-checked, and aria-disabled which works
 // correctly with real assistive technologies, but axe-core can't detect them.
 // Disable these rules as a workaround for this axe-core limitation.
 const axeOptions = {
     rules: {
-        'aria-required-attr': { enabled: false },
-        'aria-prohibited-attr': { enabled: false },
+        "aria-required-attr": { enabled: false },
+        "aria-prohibited-attr": { enabled: false },
     },
 };
-describe('w-switch accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
-        test('default state has no violations', async () => {
+describe("w-switch accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
             const page = render(html `<w-switch aria-label="Enable notifications"></w-switch>`);
             await expect(page).toHaveNoAxeViolations(axeOptions);
         });
-        test('checked state has no violations', async () => {
+        test("checked state has no violations", async () => {
             const page = render(html `<w-switch checked aria-label="Enable notifications"></w-switch>`);
             await expect(page).toHaveNoAxeViolations(axeOptions);
         });
-        test('disabled state has no violations', async () => {
+        test("disabled state has no violations", async () => {
             const page = render(html `<w-switch disabled aria-label="Enable notifications"></w-switch>`);
             await expect(page).toHaveNoAxeViolations(axeOptions);
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('switch has accessible name via aria-labelledby', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("switch has accessible name via aria-labelledby", async () => {
             const page = render(html `
-        <div>
-          <span id="switch-label">Enable notifications</span>
-          <w-switch aria-labelledby="switch-label"></w-switch>
-        </div>
-      `);
+				<div>
+					<span id="switch-label">Enable notifications</span>
+					<w-switch aria-labelledby="switch-label"></w-switch>
+				</div>
+			`);
             // ElementInternals role is set in accessibility tree but not queryable via getByRole
-            const wSwitch = page.container.querySelector('w-switch');
+            const wSwitch = page.container.querySelector("w-switch");
             await expect.element(wSwitch).toBeVisible();
-            expect(wSwitch.getAttribute('aria-labelledby')).toBe('switch-label');
+            expect(wSwitch.getAttribute("aria-labelledby")).toBe("switch-label");
         });
     });
-    describe('WCAG 4.1.2 - Name, Role, Value', () => {
-        test('switch exposes role and checked state', async () => {
+    describe("WCAG 4.1.2 - Name, Role, Value", () => {
+        test("switch exposes role and checked state", async () => {
             const page = render(html `<w-switch aria-label="Enable notifications"></w-switch>`);
-            const wSwitch = page.container.querySelector('w-switch');
+            const wSwitch = page.container.querySelector("w-switch");
             // Check properties - ARIA states are set via ElementInternals
             await expect.element(wSwitch).toBeVisible();
             expect(wSwitch.checked).toBe(false);
@@ -53,38 +53,46 @@ describe('w-switch accessibility (WCAG 2.2)', () => {
             await wSwitch.updateComplete;
             expect(wSwitch.checked).toBe(true);
         });
-        test('disabled state is exposed', async () => {
+        test("disabled state is exposed", async () => {
             const page = render(html `<w-switch disabled aria-label="Enable notifications"></w-switch>`);
-            const wSwitch = page.container.querySelector('w-switch');
+            const wSwitch = page.container.querySelector("w-switch");
             // Check property - aria-disabled is set via ElementInternals
             expect(wSwitch.disabled).toBe(true);
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('switch is reachable by tab and can be toggled with keyboard', async () => {
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("switch is reachable by tab and can be toggled with keyboard", async () => {
             const page = render(html `
-        <button type="button">Before</button>
-        <w-switch aria-label="Enable notifications"></w-switch>
-        <button type="button">After</button>
-      `);
-            const wSwitch = page.container.querySelector('w-switch');
-            const beforeButton = page.getByRole('button', { name: 'Before' });
+				<button type="button">Before</button>
+				<w-switch aria-label="Enable notifications"></w-switch>
+				<button type="button">After</button>
+			`);
+            const wSwitch = page.container.querySelector("w-switch");
+            const beforeButton = page.getByRole("button", { name: "Before" });
             await wSwitch.updateComplete;
             const beforeButtonEl = beforeButton.element();
             beforeButtonEl.focus();
             await expect.element(beforeButton).toHaveFocus();
             await userEvent.tab();
             await expect.element(wSwitch).toHaveFocus();
-            await userEvent.keyboard(' ');
+            await userEvent.keyboard(" ");
             await wSwitch.updateComplete;
             expect(wSwitch.checked).toBe(true);
-            await userEvent.keyboard('{Enter}');
+            await userEvent.keyboard("{Enter}");
             await wSwitch.updateComplete;
             expect(wSwitch.checked).toBe(false);
-            wSwitch.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', altKey: true, bubbles: true }));
+            wSwitch.dispatchEvent(new KeyboardEvent("keydown", {
+                key: "Enter",
+                altKey: true,
+                bubbles: true,
+            }));
             await wSwitch.updateComplete;
             expect(wSwitch.checked).toBe(false);
-            wSwitch.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', shiftKey: true, bubbles: true }));
+            wSwitch.dispatchEvent(new KeyboardEvent("keydown", {
+                key: " ",
+                shiftKey: true,
+                bubbles: true,
+            }));
             await wSwitch.updateComplete;
             expect(wSwitch.checked).toBe(false);
         });

package/dist/packages/switch/switch.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 export type WarpSwitchChangeEvent = CustomEvent<{
     checked: boolean;
     value: string | null;

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

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

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

@@ -1,53 +1,53 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
 // Import the custom element definition
-import './switch.js';
+import "./switch.js";
 // Switch uses ElementInternals for role/aria-checked/aria-disabled and
 // delegatesFocus for keyboard accessibility. No host attributes needed.
-describe('w-switch React SSR hydration', () => {
+describe("w-switch React SSR hydration", () => {
     beforeEach(() => {
         setupHydrationWarningCapture();
     });
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-switch', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-switch", {});
         expect(warnings).toEqual([]);
     });
-    test('with aria-label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-switch', {
-            'aria-label': 'Toggle notifications',
+    test("with aria-label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-switch", {
+            "aria-label": "Toggle notifications",
         });
         expect(warnings).toEqual([]);
     });
-    test('checked state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-switch', {
+    test("checked state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-switch", {
             checked: true,
-            'aria-label': 'Toggle notifications',
+            "aria-label": "Toggle notifications",
         });
         expect(warnings).toEqual([]);
     });
-    test('disabled state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-switch', {
+    test("disabled state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-switch", {
             disabled: true,
-            'aria-label': 'Toggle notifications',
+            "aria-label": "Toggle notifications",
         });
         expect(warnings).toEqual([]);
     });
-    test('checked and disabled state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-switch', {
+    test("checked and disabled state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-switch", {
             checked: true,
             disabled: true,
-            'aria-label': 'Toggle notifications',
+            "aria-label": "Toggle notifications",
         });
         expect(warnings).toEqual([]);
     });
-    test('with name and value hydrates without warnings', async () => {
-        const warnings = await testHydration('w-switch', {
-            name: 'notifications',
-            value: 'enabled',
-            'aria-label': 'Toggle notifications',
+    test("with name and value hydrates without warnings", async () => {
+        const warnings = await testHydration("w-switch", {
+            name: "notifications",
+            value: "enabled",
+            "aria-label": "Toggle notifications",
         });
         expect(warnings).toEqual([]);
     });