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

package/dist/packages/radio/radio-styles.js

@@ -1,162 +1,201 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css `
-  :host {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--_gap);
-
-    --_gap: var(--w-c-radio-gap, 8px);
-
-    --_size: var(--w-c-radio-size, 2rem);
-    --_radius: var(--w-c-radio-radius, 50%);
-    --_border-width: var(--w-c-radio-border-width, 1px);
-    --_checked-border-width: var(--w-c-radio-checked-border-width, 0.6rem);
-
-    --_bg: var(--w-c-radio-bg, var(--w-s-color-background));
-    --_border-color: var(--w-c-radio-border-color, var(--w-s-color-border-strong));
-    --_border-color-checked: var(--w-c-radio-border-color-checked, var(--w-s-color-border-selected));
-    --_border-color-invalid: var(--w-c-radio-border-color-invalid, var(--w-s-color-border-negative));
-
-    --_outline-width: var(--w-c-radio-outline-width, 2px);
-    --_outline-color: var(--w-c-radio-outline-color, var(--w-s-color-border-focus));
-    --_outline-offset: var(--w-c-radio-outline-offset, var(--w-outline-offset, 1px));
-
-    --_border-color-disabled: var(--w-c-radio-border-color-disabled, var(--w-s-color-border-disabled));
-    --_bg-disabled: var(--w-c-radio-bg-disabled, var(--w-s-color-background-disabled-subtle));
-
-    --_label-font-size: var(--w-c-radio-label-font-size, var(--w-font-size-m));
-    --_label-line-height: var(--w-c-radio-label-line-height, var(--w-line-height-m));
-    --_label-color: var(--w-c-radio-label-color, currentColor);
-    --_label-color-disabled: var(--w-c-radio-label-color-disabled, var(--w-s-color-text-disabled));
-
-    --_cursor: var(--w-c-radio-cursor, pointer);
-    --_cursor-disabled: var(--w-c-radio-cursor-disabled, not-allowed);
-
-    --_transition: var(
-      --w-c-radio-transition,
-      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      border-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
-    );
-  }
-
-  :host([disabled]),
-  :host([disabled-ui]) {
-    --w-c-radio-border-color: var(--w-c-radio-border-color-disabled, var(--w-s-color-border-disabled));
-    --w-c-radio-bg: var(--w-c-radio-bg-disabled, var(--w-s-color-background-disabled-subtle));
-    --w-c-radio-border-color-checked: var(--w-c-radio-border-color-disabled, var(--w-s-color-border-disabled));
-    --w-c-radio-label-color: var(--w-c-radio-label-color-disabled, var(--w-s-color-text-disabled));
-    --w-c-radio-cursor: var(--w-c-radio-cursor-disabled, not-allowed);
-  }
-
-  .wrapper {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--_gap);
-  }
-
-  [part='control'] {
-    appearance: none;
-    -webkit-appearance: none;
-    margin: 0;
-
-    width: var(--_size);
-    height: var(--_size);
-    border-style: solid;
-    border-width: var(--_border-width);
-    border-color: var(--_border-color);
-    border-radius: var(--_radius);
-    background-color: var(--_bg);
-    cursor: var(--_cursor);
-    flex-shrink: 0;
-
-    transition: var(--_transition);
-  }
-
-  :host([checked]) [part='control'],
-  :host([checked-ui]) [part='control'],
-  :host([role='radio'][checked-ui]) [part='control'],
-  :host([role='radio']:state(checked)) [part='control'] {
-    border-color: var(--_border-color-checked);
-    border-width: var(--_checked-border-width);
-  }
-
-  :host([invalid]) [part='control'] {
-    border-color: var(--_border-color-invalid);
-  }
-
-  :host(:focus-visible) {
-    outline: none;
-  }
-
-  :host(:focus-visible) [part='control'] {
-    outline: var(--_outline-width) solid var(--_outline-color);
-    outline-offset: var(--_outline-offset);
-  }
-
-  :host([disabled]) [part='control'],
-  :host([disabled-ui]) [part='control'],
-  :host([role='radio']:state(disabled)) [part='control'] {
-    border-color: var(--_border-color-disabled);
-    background-color: var(--_bg-disabled);
-    cursor: var(--_cursor-disabled);
-  }
-
-  :host([disabled]) [part='label'],
-  :host([disabled-ui]) [part='label'] {
-    color: var(--_label-color-disabled);
-    cursor: var(--_cursor-disabled);
-  }
-
-  :host([disabled][checked]),
-  :host([disabled][checked-ui]),
-  :host([disabled-ui][checked-ui]) [part='control'] {
-    border-color: var(--_border-color-disabled);
-  }
-
-  [part='label'] {
-    font-size: var(--_label-font-size);
-    line-height: var(--_label-line-height);
-    color: var(--_label-color);
-    user-select: none;
-    cursor: var(--_cursor);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :host {
-      --w-c-radio-transition: none;
-    }
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      --w-c-radio-bg: Canvas;
-      --w-c-radio-border-color: ButtonText;
-      --w-c-radio-border-color-checked: Highlight;
-      --w-c-radio-outline-color: Highlight;
-      --w-c-radio-bg-disabled: Canvas;
-      --w-c-radio-border-color-disabled: GrayText;
-      --w-c-radio-label-color: CanvasText;
-      --w-c-radio-label-color-disabled: GrayText;
-    }
-
-    [part='control'] {
-      forced-color-adjust: none;
-    }
-
-    :host([checked]) [part='control'],
-    :host([checked-ui]) [part='control'],
-    :host([role='radio']:state(checked)) [part='control'] {
-      background-color: var(--_border-color-checked);
-      border-color: var(--_border-color-checked);
-    }
-
-    :host([disabled][checked]),
-    :host([disabled][checked-ui]),
-    :host([disabled-ui][checked-ui]) [part='control'],
-    :host([role='radio']:state(disabled):state(checked)) [part='control'] {
-      background-color: var(--_border-color-disabled);
-      border-color: var(--_border-color-disabled);
-    }
-  }
+	:host {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--_gap);
+
+		--_gap: var(--w-c-radio-gap, 8px);
+
+		--_size: var(--w-c-radio-size, 2rem);
+		--_radius: var(--w-c-radio-radius, 50%);
+		--_border-width: var(--w-c-radio-border-width, 1px);
+		--_checked-border-width: var(--w-c-radio-checked-border-width, 0.6rem);
+
+		--_bg: var(--w-c-radio-bg, var(--w-s-color-background));
+		--_border-color: var(
+			--w-c-radio-border-color,
+			var(--w-s-color-border-strong)
+		);
+		--_border-color-checked: var(
+			--w-c-radio-border-color-checked,
+			var(--w-s-color-border-selected)
+		);
+		--_border-color-invalid: var(
+			--w-c-radio-border-color-invalid,
+			var(--w-s-color-border-negative)
+		);
+
+		--_outline-width: var(--w-c-radio-outline-width, 2px);
+		--_outline-color: var(
+			--w-c-radio-outline-color,
+			var(--w-s-color-border-focus)
+		);
+		--_outline-offset: var(
+			--w-c-radio-outline-offset,
+			var(--w-outline-offset, 1px)
+		);
+
+		--_border-color-disabled: var(
+			--w-c-radio-border-color-disabled,
+			var(--w-s-color-border-disabled)
+		);
+		--_bg-disabled: var(
+			--w-c-radio-bg-disabled,
+			var(--w-s-color-background-disabled-subtle)
+		);
+
+		--_label-font-size: var(--w-c-radio-label-font-size, var(--w-font-size-m));
+		--_label-line-height: var(
+			--w-c-radio-label-line-height,
+			var(--w-line-height-m)
+		);
+		--_label-color: var(--w-c-radio-label-color, currentColor);
+		--_label-color-disabled: var(
+			--w-c-radio-label-color-disabled,
+			var(--w-s-color-text-disabled)
+		);
+
+		--_cursor: var(--w-c-radio-cursor, pointer);
+		--_cursor-disabled: var(--w-c-radio-cursor-disabled, not-allowed);
+
+		--_transition: var(
+			--w-c-radio-transition,
+			border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+			border-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
+			background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
+		);
+	}
+
+	:host([disabled]),
+	:host([disabled-ui]) {
+		--w-c-radio-border-color: var(
+			--w-c-radio-border-color-disabled,
+			var(--w-s-color-border-disabled)
+		);
+		--w-c-radio-bg: var(
+			--w-c-radio-bg-disabled,
+			var(--w-s-color-background-disabled-subtle)
+		);
+		--w-c-radio-border-color-checked: var(
+			--w-c-radio-border-color-disabled,
+			var(--w-s-color-border-disabled)
+		);
+		--w-c-radio-label-color: var(
+			--w-c-radio-label-color-disabled,
+			var(--w-s-color-text-disabled)
+		);
+		--w-c-radio-cursor: var(--w-c-radio-cursor-disabled, not-allowed);
+	}
+
+	.wrapper {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--_gap);
+	}
+
+	[part="control"] {
+		appearance: none;
+		-webkit-appearance: none;
+		margin: 0;
+
+		width: var(--_size);
+		height: var(--_size);
+		border-style: solid;
+		border-width: var(--_border-width);
+		border-color: var(--_border-color);
+		border-radius: var(--_radius);
+		background-color: var(--_bg);
+		cursor: var(--_cursor);
+		flex-shrink: 0;
+
+		transition: var(--_transition);
+	}
+
+	:host([checked]) [part="control"],
+	:host([checked-ui]) [part="control"],
+	:host([role="radio"][checked-ui]) [part="control"],
+	:host([role="radio"]:state(checked)) [part="control"] {
+		border-color: var(--_border-color-checked);
+		border-width: var(--_checked-border-width);
+	}
+
+	:host([invalid]) [part="control"] {
+		border-color: var(--_border-color-invalid);
+	}
+
+	:host(:focus-visible) {
+		outline: none;
+	}
+
+	:host(:focus-visible) [part="control"] {
+		outline: var(--_outline-width) solid var(--_outline-color);
+		outline-offset: var(--_outline-offset);
+	}
+
+	:host([disabled]) [part="control"],
+	:host([disabled-ui]) [part="control"],
+	:host([role="radio"]:state(disabled)) [part="control"] {
+		border-color: var(--_border-color-disabled);
+		background-color: var(--_bg-disabled);
+		cursor: var(--_cursor-disabled);
+	}
+
+	:host([disabled]) [part="label"],
+	:host([disabled-ui]) [part="label"] {
+		color: var(--_label-color-disabled);
+		cursor: var(--_cursor-disabled);
+	}
+
+	:host([disabled][checked]),
+	:host([disabled][checked-ui]),
+	:host([disabled-ui][checked-ui]) [part="control"] {
+		border-color: var(--_border-color-disabled);
+	}
+
+	[part="label"] {
+		font-size: var(--_label-font-size);
+		line-height: var(--_label-line-height);
+		color: var(--_label-color);
+		user-select: none;
+		cursor: var(--_cursor);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			--w-c-radio-transition: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		:host {
+			--w-c-radio-bg: Canvas;
+			--w-c-radio-border-color: ButtonText;
+			--w-c-radio-border-color-checked: Highlight;
+			--w-c-radio-outline-color: Highlight;
+			--w-c-radio-bg-disabled: Canvas;
+			--w-c-radio-border-color-disabled: GrayText;
+			--w-c-radio-label-color: CanvasText;
+			--w-c-radio-label-color-disabled: GrayText;
+		}
+
+		[part="control"] {
+			forced-color-adjust: none;
+		}
+
+		:host([checked]) [part="control"],
+		:host([checked-ui]) [part="control"],
+		:host([role="radio"]:state(checked)) [part="control"] {
+			background-color: var(--_border-color-checked);
+			border-color: var(--_border-color-checked);
+		}
+
+		:host([disabled][checked]),
+		:host([disabled][checked-ui]),
+		:host([disabled-ui][checked-ui]) [part="control"],
+		:host([role="radio"]:state(disabled):state(checked)) [part="control"] {
+			background-color: var(--_border-color-disabled);
+			border-color: var(--_border-color-disabled);
+		}
+	}
 `;

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

@@ -1,2 +1,2 @@
-import './radio.js';
-import '../radio-group/radio-group.js';
+import "./radio.js";
+import "../radio-group/radio-group.js";

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

@@ -1,90 +1,92 @@
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './radio.js';
-import '../radio-group/radio-group.js';
-describe('w-radio 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 "./radio.js";
+import "../radio-group/radio-group.js";
+describe("w-radio accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
             const page = render(html `
-        <w-radio-group label="Options">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Options">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('disabled state has no violations', async () => {
+        test("disabled state has no violations", async () => {
             const page = render(html `
-        <w-radio-group label="Options">
-          <w-radio value="one" disabled>One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Options">
+					<w-radio value="one" disabled>One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('checked state has no violations', async () => {
+        test("checked state has no violations", async () => {
             const page = render(html `
-        <w-radio-group label="Options">
-          <w-radio value="one" checked>One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Options">
+					<w-radio value="one" checked>One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('radio has accessible name from label slot', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("radio has accessible name from label slot", async () => {
             const page = render(html `
-        <w-radio-group label="Options">
-          <w-radio value="one">First option</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Options">
+					<w-radio value="one">First option</w-radio>
+				</w-radio-group>
+			`);
             // ElementInternals role is set in accessibility tree but not queryable via getByRole
-            const radio = page.container.querySelector('w-radio');
+            const radio = page.container.querySelector("w-radio");
             await expect.element(radio).toBeVisible();
-            expect(radio.textContent?.trim()).toBe('First option');
+            expect(radio.textContent?.trim()).toBe("First option");
         });
     });
-    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-radio-group label="Options">
-          <w-radio value="one" disabled>Disabled</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Options">
+					<w-radio value="one" disabled>Disabled</w-radio>
+				</w-radio-group>
+			`);
             // Check property - aria-disabled is set via ElementInternals
-            const radio = page.container.querySelector('w-radio');
+            const radio = page.container.querySelector("w-radio");
             expect(radio.disabled).toBe(true);
         });
-        test('checked state is exposed', async () => {
-            const page = render(html `
-        <w-radio-group label="Options">
-          <w-radio value="one">Checked</w-radio>
-          <w-radio value="two">Unchecked</w-radio>
-        </w-radio-group>
-      `);
-            const group = document.querySelector('w-radio-group');
+        test("checked state is exposed", async () => {
+            render(html `
+				<w-radio-group label="Options">
+					<w-radio value="one">Checked</w-radio>
+					<w-radio value="two">Unchecked</w-radio>
+				</w-radio-group>
+			`);
+            const group = document.querySelector("w-radio-group");
             await group.updateComplete;
-            const [checkedRadio, uncheckedRadio] = Array.from(document.querySelectorAll('w-radio'));
+            const [checkedRadio, uncheckedRadio] = [
+                ...document.querySelectorAll("w-radio"),
+            ];
             await checkedRadio.click();
             await group.updateComplete;
             // Check the checked property - the aria-checked state is set via ElementInternals
             await expect.poll(() => checkedRadio.checked).toBe(true);
             await expect.poll(() => uncheckedRadio.checked).toBe(false);
         });
-        test('role and accessible name are preserved', async () => {
+        test("role and accessible name are preserved", async () => {
             const page = render(html `
-        <w-radio-group label="Options">
-          <w-radio value="one">First option</w-radio>
-          <w-radio value="two">Second option</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Options">
+					<w-radio value="one">First option</w-radio>
+					<w-radio value="two">Second option</w-radio>
+				</w-radio-group>
+			`);
             // ElementInternals role is set in accessibility tree but not queryable via getByRole
-            const radios = page.container.querySelectorAll('w-radio');
+            const radios = page.container.querySelectorAll("w-radio");
             expect(radios).toHaveLength(2);
-            expect(radios[0].textContent?.trim()).toBe('First option');
-            expect(radios[1].textContent?.trim()).toBe('Second option');
+            expect(radios[0].textContent?.trim()).toBe("First option");
+            expect(radios[1].textContent?.trim()).toBe("Second option");
         });
     });
 });

package/dist/packages/radio/radio.d.ts

@@ -1,5 +1,5 @@
-import type { PropertyValues } from 'lit';
-import { LitElement } from 'lit';
+import type { PropertyValues } from "lit";
+import { LitElement } from "lit";
 declare const WarpRadio_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * @parent w-radio-group
@@ -119,7 +119,7 @@ export declare class WarpRadio extends WarpRadio_base {
 export declare const WRadio: typeof WarpRadio;
 declare global {
     interface HTMLElementTagNameMap {
-        'w-radio': WarpRadio;
+        "w-radio": WarpRadio;
     }
 }
 export {};

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

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

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

@@ -1,29 +1,38 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './radio.js';
-describe('w-radio React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./radio.js";
+describe("w-radio React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio", {});
         expect(warnings).toEqual([]);
     });
-    test('with value hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio', { value: 'option1' });
+    test("with value hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio", { value: "option1" });
         expect(warnings).toEqual([]);
     });
-    test('with name hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio', { value: 'option1', name: 'options' });
+    test("with name hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio", {
+            value: "option1",
+            name: "options",
+        });
         expect(warnings).toEqual([]);
     });
-    test('checked radio hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio', { value: 'option1', checked: true });
+    test("checked radio hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio", {
+            value: "option1",
+            checked: true,
+        });
         expect(warnings).toEqual([]);
     });
-    test('disabled radio hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio', { value: 'option1', disabled: true });
+    test("disabled radio hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio", {
+            value: "option1",
+            disabled: true,
+        });
         expect(warnings).toEqual([]);
     });
 });