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

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

@@ -1,90 +1,123 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css `
-  :host {
-    display: block;
-
-    --_label-font-size: var(--w-c-radio-group-label-font-size, var(--w-font-size-s));
-    --_label-line-height: var(--w-c-radio-group-label-line-height, var(--w-line-height-s));
-    --_label-font-weight: var(--w-c-radio-group-label-font-weight, 700);
-    --_label-color: var(--w-c-radio-group-label-color, var(--w-s-color-text));
-    --_label-color-disabled: var(--w-c-radio-group-label-color-disabled, var(--w-s-color-text-disabled));
-    --_label-padding-bottom: var(--w-c-radio-group-label-padding-bottom, 16px);
-
-    --_optional-font-weight: var(--w-c-radio-group-optional-font-weight, 400);
-    --_optional-color: var(--w-c-radio-group-optional-color, var(--w-s-color-text-subtle));
-    --_optional-margin-inline-start: var(--w-c-radio-group-optional-margin-inline-start, 0.5rem);
-
-    --_radios-gap: var(--w-c-radio-group-gap, 16px);
-
-    --_help-text-margin-block-start: var(--w-c-radio-group-help-text-margin-block-start, 16px);
-    --_help-text-font-size: var(--w-c-radio-group-help-text-font-size, var(--w-font-size-xs));
-    --_help-text-line-height: var(--w-c-radio-group-help-text-line-height, var(--w-line-height-xs));
-    --_help-text-color: var(--w-c-radio-group-help-text-color, var(--w-s-color-text-subtle));
-    --_help-text-color-disabled: var(--w-c-radio-group-help-text-color-disabled, var(--w-s-color-text-disabled));
-    --_help-text-color-error: var(--w-c-radio-group-help-text-color-error, var(--w-s-color-text-negative));
-  }
-
-  [part='form-control'] {
-    position: relative;
-
-    border: 0;
-    padding: 0;
-    margin: 0;
-
-    min-inline-size: 0;
-  }
-
-  [part='form-control-label'] {
-    display: block;
-    cursor: pointer;
-
-    font-size: var(--_label-font-size);
-    line-height: var(--_label-line-height);
-    font-weight: var(--_label-font-weight);
-    color: var(--_label-color);
-
-    padding-bottom: var(--_label-padding-bottom);
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smoothing: grayscale;
-  }
-
-  :host([disabled]) [part='form-control-label'] {
-    cursor: default;
-    color: var(--_label-color-disabled);
-  }
-
-  :host([required]) [part='form-control-label']::after {
-    content: var(--wa-form-control-required-content);
-    margin-inline-start: var(--wa-form-control-required-content-offset);
-  }
-
-  .optional {
-    font-weight: var(--_optional-font-weight);
-    color: var(--_optional-color);
-    margin-inline-start: var(--_optional-margin-inline-start);
-  }
-
-  [part~='form-control-input'] {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: var(--_radios-gap);
-  }
-
-  [part~='help-text'] {
-    margin-block-start: var(--_help-text-margin-block-start);
-    font-size: var(--_help-text-font-size);
-    line-height: var(--_help-text-line-height);
-    color: var(--_help-text-color);
-  }
-
-  :host([disabled]) [part~='help-text'] {
-    color: var(--_help-text-color-disabled);
-  }
-
-  :host([data-show-error]) [part~='help-text'] {
-    color: var(--_help-text-color-error);
-  }
+	:host {
+		display: block;
+
+		--_label-font-size: var(
+			--w-c-radio-group-label-font-size,
+			var(--w-font-size-s)
+		);
+		--_label-line-height: var(
+			--w-c-radio-group-label-line-height,
+			var(--w-line-height-s)
+		);
+		--_label-font-weight: var(--w-c-radio-group-label-font-weight, 700);
+		--_label-color: var(--w-c-radio-group-label-color, var(--w-s-color-text));
+		--_label-color-disabled: var(
+			--w-c-radio-group-label-color-disabled,
+			var(--w-s-color-text-disabled)
+		);
+		--_label-padding-bottom: var(--w-c-radio-group-label-padding-bottom, 16px);
+
+		--_optional-font-weight: var(--w-c-radio-group-optional-font-weight, 400);
+		--_optional-color: var(
+			--w-c-radio-group-optional-color,
+			var(--w-s-color-text-subtle)
+		);
+		--_optional-margin-inline-start: var(
+			--w-c-radio-group-optional-margin-inline-start,
+			0.5rem
+		);
+
+		--_radios-gap: var(--w-c-radio-group-gap, 16px);
+
+		--_help-text-margin-block-start: var(
+			--w-c-radio-group-help-text-margin-block-start,
+			16px
+		);
+		--_help-text-font-size: var(
+			--w-c-radio-group-help-text-font-size,
+			var(--w-font-size-xs)
+		);
+		--_help-text-line-height: var(
+			--w-c-radio-group-help-text-line-height,
+			var(--w-line-height-xs)
+		);
+		--_help-text-color: var(
+			--w-c-radio-group-help-text-color,
+			var(--w-s-color-text-subtle)
+		);
+		--_help-text-color-disabled: var(
+			--w-c-radio-group-help-text-color-disabled,
+			var(--w-s-color-text-disabled)
+		);
+		--_help-text-color-error: var(
+			--w-c-radio-group-help-text-color-error,
+			var(--w-s-color-text-negative)
+		);
+	}
+
+	[part="form-control"] {
+		position: relative;
+
+		border: 0;
+		padding: 0;
+		margin: 0;
+
+		min-inline-size: 0;
+	}
+
+	[part="form-control-label"] {
+		display: block;
+		cursor: pointer;
+
+		font-size: var(--_label-font-size);
+		line-height: var(--_label-line-height);
+		font-weight: var(--_label-font-weight);
+		color: var(--_label-color);
+
+		padding-bottom: var(--_label-padding-bottom);
+
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		font-smoothing: grayscale;
+	}
+
+	:host([disabled]) [part="form-control-label"] {
+		cursor: default;
+		color: var(--_label-color-disabled);
+	}
+
+	:host([required]) [part="form-control-label"]::after {
+		content: var(--wa-form-control-required-content);
+		margin-inline-start: var(--wa-form-control-required-content-offset);
+	}
+
+	.optional {
+		font-weight: var(--_optional-font-weight);
+		color: var(--_optional-color);
+		margin-inline-start: var(--_optional-margin-inline-start);
+	}
+
+	[part~="form-control-input"] {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		gap: var(--_radios-gap);
+	}
+
+	[part~="help-text"] {
+		margin-block-start: var(--_help-text-margin-block-start);
+		font-size: var(--_help-text-font-size);
+		line-height: var(--_help-text-line-height);
+		color: var(--_help-text-color);
+	}
+
+	:host([disabled]) [part~="help-text"] {
+		color: var(--_help-text-color-disabled);
+	}
+
+	:host([data-show-error]) [part~="help-text"] {
+		color: var(--_help-text-color-error);
+	}
 `;

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

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

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

@@ -1,124 +1,126 @@
-import { i18n } from '@lingui/core';
-import { userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './radio-group.js';
-import '../radio/radio.js';
+import { i18n } from "@lingui/core";
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./radio-group.js";
+import "../radio/radio.js";
 // Initialize i18n with English locale for tests
-i18n.load('en', {
-    'radio-group.label.optional': ['(optional)'],
-    'radio-group.validation.required': ['Please select an option.'],
+i18n.load("en", {
+    "radio-group.label.optional": ["(optional)"],
+    "radio-group.validation.required": ["Please select an option."],
 });
-i18n.activate('en');
-describe('w-radio-group accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
-        test('default state has no violations', async () => {
+i18n.activate("en");
+describe("w-radio-group accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Preferences">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             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-radio-group label="Preferences" help-text="Select one">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Preferences" help-text="Select one">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('required invalid state has no violations', async () => {
+        test("required invalid state has no violations", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences" required>
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
-            const group = document.querySelector('w-radio-group');
+				<w-radio-group label="Preferences" required>
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
+            const group = document.querySelector("w-radio-group");
             group.reportValidity?.();
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('group has accessible name from label', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("group has accessible name from label", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
-            await expect.element(page.getByRole('radiogroup', { name: 'Preferences' })).toBeVisible();
+				<w-radio-group label="Preferences">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
+            await expect
+                .element(page.getByRole("radiogroup", { name: "Preferences" }))
+                .toBeVisible();
         });
     });
-    describe('WCAG 3.3.2 - Labels or Instructions', () => {
-        test('help text is programmatically associated', async () => {
+    describe("WCAG 3.3.2 - Labels or Instructions", () => {
+        test("help text is programmatically associated", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences" help-text="Select one">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Preferences" help-text="Select one">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             await expect
-                .element(page.getByRole('radiogroup', { name: 'Preferences' }))
-                .toHaveAccessibleDescription('Select one');
+                .element(page.getByRole("radiogroup", { name: "Preferences" }))
+                .toHaveAccessibleDescription("Select one");
         });
-        test('slotted label and help text are associated', async () => {
+        test("slotted label and help text are associated", async () => {
             const page = render(html `
-        <w-radio-group>
-          <span slot="label">Slotted label</span>
-          <span slot="help-text">Slotted help text</span>
-          <w-radio value="one">One</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group>
+					<span slot="label">Slotted label</span>
+					<span slot="help-text">Slotted help text</span>
+					<w-radio value="one">One</w-radio>
+				</w-radio-group>
+			`);
             await expect
-                .element(page.getByRole('radiogroup', { name: 'Slotted label' }))
-                .toHaveAccessibleDescription('Slotted help text');
+                .element(page.getByRole("radiogroup", { name: "Slotted label" }))
+                .toHaveAccessibleDescription("Slotted help text");
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('arrow keys move selection between radios', async () => {
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("arrow keys move selection between radios", async () => {
             render(html `
-        <w-radio-group label="Preferences">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-          <w-radio value="three">Three</w-radio>
-        </w-radio-group>
-      `);
-            const radios = Array.from(document.querySelectorAll('w-radio'));
+				<w-radio-group label="Preferences">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+					<w-radio value="three">Three</w-radio>
+				</w-radio-group>
+			`);
+            const radios = [...document.querySelectorAll("w-radio")];
             await radios[0].updateComplete;
             // Wait for radio-group to set tabIndex (async via slotchange)
             await expect.poll(() => radios[0].tabIndex).toBe(0);
             radios[0].focus();
             await expect.poll(() => document.activeElement).toBe(radios[0]);
-            await userEvent.keyboard('[ArrowDown]');
+            await userEvent.keyboard("[ArrowDown]");
             await expect.poll(() => radios[1].checked).toBe(true);
             await expect.poll(() => document.activeElement).toBe(radios[1]);
-            await userEvent.keyboard('[ArrowDown]');
+            await userEvent.keyboard("[ArrowDown]");
             await expect.poll(() => radios[2].checked).toBe(true);
             await expect.poll(() => document.activeElement).toBe(radios[2]);
         });
-        test('arrow keys wrap and skip disabled radios', async () => {
+        test("arrow keys wrap and skip disabled radios", async () => {
             render(html `
-        <w-radio-group label="Preferences">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two" disabled>Two</w-radio>
-          <w-radio value="three">Three</w-radio>
-        </w-radio-group>
-      `);
-            const radios = Array.from(document.querySelectorAll('w-radio'));
+				<w-radio-group label="Preferences">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two" disabled>Two</w-radio>
+					<w-radio value="three">Three</w-radio>
+				</w-radio-group>
+			`);
+            const radios = [...document.querySelectorAll("w-radio")];
             await radios[0].updateComplete;
             // Wait for radio-group to set tabIndex (async via slotchange)
             await expect.poll(() => radios[0].tabIndex).toBe(0);
             radios[0].focus();
             await expect.poll(() => document.activeElement).toBe(radios[0]);
-            await userEvent.keyboard('[ArrowDown]');
+            await userEvent.keyboard("[ArrowDown]");
             await expect.poll(() => radios[2].checked).toBe(true);
             await expect.poll(() => document.activeElement).toBe(radios[2]);
-            await userEvent.keyboard('[ArrowDown]');
+            await userEvent.keyboard("[ArrowDown]");
             await expect.poll(() => radios[0].checked).toBe(true);
             await expect.poll(() => document.activeElement).toBe(radios[0]);
         });

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

@@ -1,12 +1,14 @@
-import type { PropertyValues } from 'lit';
-import { LitElement } from 'lit';
-import '../radio/radio.js';
-import type { WarpRadio } from '../radio/radio.js';
+import type { PropertyValues } from "lit";
+import { LitElement } from "lit";
+import "../radio/radio.js";
+import type { WarpRadio } from "../radio/radio.js";
 declare const WarpRadioGroup_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * Radios allow users to select a single option from a list of choices.
  *
- * Use with `w-radio`.
+ * Wrap individual radio components in a radio group.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
  *
  * @slot label - Alternative to the `label` attribute should you need custom HTML.
  * @slot help-text - Alternative to the `help-text` attribute should you need custom HTML.
@@ -56,14 +58,14 @@ export declare class WarpRadioGroup extends WarpRadioGroup_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
     constructor();
     /** @internal */
-    get validationTarget(): WarpRadio;
+    get validationTarget(): WarpRadio | undefined;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): Promise<void>;
@@ -107,7 +109,7 @@ export declare class WarpRadioGroup extends WarpRadioGroup_base {
 export declare const WRadioGroup: typeof WarpRadioGroup;
 declare global {
     interface HTMLElementTagNameMap {
-        'w-radio-group': WarpRadioGroup;
+        "w-radio-group": WarpRadioGroup;
     }
 }
 export {};

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

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

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

@@ -1,36 +1,47 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import '../radio/radio.js';
-import './radio-group.js';
-describe('w-radio-group React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "../radio/radio.js";
+import "./radio-group.js";
+describe("w-radio-group React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
     // Note: w-radio-group requires w-radio children to function properly.
     // Testing the parent element alone to verify its own attributes don't cause mismatch.
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {});
         expect(warnings).toEqual([]);
     });
-    test('with label and name hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', { label: 'Options', name: 'options' });
+    test("with label and name hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {
+            label: "Options",
+            name: "options",
+        });
         expect(warnings).toEqual([]);
     });
-    test('with optional hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', { label: 'Options', name: 'options', optional: true });
+    test("with optional hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {
+            label: "Options",
+            name: "options",
+            optional: true,
+        });
         expect(warnings).toEqual([]);
     });
-    test('with help-text hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', {
-            label: 'Options',
-            name: 'options',
-            'help-text': 'Select one',
+    test("with help-text hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {
+            label: "Options",
+            name: "options",
+            "help-text": "Select one",
         });
         expect(warnings).toEqual([]);
     });
-    test('required radio-group hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', { label: 'Options', name: 'options', required: true });
+    test("required radio-group hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {
+            label: "Options",
+            name: "options",
+            required: true,
+        });
         expect(warnings).toEqual([]);
     });
 });