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

package/dist/packages/checkbox/styles.js

@@ -1,135 +1,186 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css `
-  :host {
-    --_label-font-size: var(--w-c-checkbox-label-font-size, var(--w-font-size-m));
-    --_label-line-height: var(--w-c-checkbox-label-line-height, var(--w-line-height-m));
-
-    --_control-size: var(--w-c-checkbox-control-size, 2rem);
-    --_gap: var(--w-c-checkbox-gap, 8px);
-    --_radius: var(--w-c-checkbox-radius, 4px);
-    --_border-width: var(--w-c-checkbox-border-width, 1px);
-
-    --_bg-default: var(--w-c-checkbox-bg, var(--w-s-color-background));
-    --_border-default: var(--w-c-checkbox-border-color, var(--w-s-color-border-strong));
-    --_icon-color: var(--w-c-checkbox-icon-color, var(--w-s-color-icon-inverted));
-
-    --_bg-checked: var(--w-c-checkbox-bg-checked, var(--w-s-color-background-primary));
-    --_border-checked: var(--w-c-checkbox-border-color-checked, var(--w-s-color-border-primary));
-    --_checked-icon: var(--w-c-checkbox-checked-icon, var(--w-icon-toggle-checked));
-
-    --_border-invalid: var(--w-c-checkbox-border-color-invalid, var(--w-s-color-border-negative));
-    --_bg-invalid-checked: var(--w-c-checkbox-bg-invalid-checked, var(--w-s-color-background-negative));
-
-    --_bg-disabled: var(--w-c-checkbox-bg-disabled, var(--w-s-color-background-disabled-subtle));
-    --_border-disabled: var(--w-c-checkbox-border-color-disabled, var(--w-s-color-border-disabled));
-    --_bg-disabled-checked: var(--w-c-checkbox-bg-disabled-checked, var(--w-s-color-background-disabled));
-
-    --_outline-width: var(--w-c-checkbox-outline-width, 2px);
-    --_outline-color: var(--w-c-checkbox-outline-color, var(--w-s-color-border-focus));
-    --_outline-offset: var(--w-c-checkbox-outline-offset, var(--w-outline-offset, 1px));
-
-    --_transition: var(--w-c-checkbox-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
-
-    --_bg: var(--_bg-default);
-    --_border-color: var(--_border-default);
-  }
-
-  :host([type='checkbox']) {
-    --_radius: var(--w-c-checkbox-radius, 4px);
-  }
-
-  :host([checked]),
-  :host([indeterminate]) {
-    --_bg: var(--_bg-checked);
-    --_border-color: var(--_border-checked);
-  }
-
-  :host([disabled]) {
-    --_bg: var(--_bg-disabled);
-    --_border-color: var(--_border-disabled);
-  }
-
-  :host([disabled][checked]),
-  :host([disabled][indeterminate]) {
-    --_bg: var(--_bg-disabled-checked);
-  }
-
-  [part~='label'] {
-    display: block;
-    font-size: var(--_label-font-size);
-    line-height: var(--_label-line-height);
-    user-select: none;
-    cursor: pointer;
-  }
-
-  [part='base'] {
-    display: grid;
-    grid-template-columns: var(--_control-size) max-content;
-    gap: var(--_gap);
-  }
-
-  [part='input'] {
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    pointer-events: none;
-    inset: 0;
-  }
-
-  [part='control'] {
-    position: relative;
-    display: block;
-    height: var(--_control-size);
-    width: var(--_control-size);
-    flex-shrink: 0;
-
-    border-width: var(--_border-width);
-    border-style: solid;
-    border-color: var(--_border-color);
-    border-radius: var(--_radius);
-
-    background-color: var(--_bg);
-    color: var(--_icon-color);
-
-    cursor: pointer;
-    user-select: none;
-    appearance: none;
-    transition: var(--_transition);
-
-    font-weight: 700;
-    text-align: center;
-    line-height: var(--w-line-height-xs);
-    font-size: var(--w-font-size-m);
-  }
-
-  /* Invalid visuals are driven by the actual control state instead of host attributes.
+	:host {
+		--_label-font-size: var(
+			--w-c-checkbox-label-font-size,
+			var(--w-font-size-m)
+		);
+		--_label-line-height: var(
+			--w-c-checkbox-label-line-height,
+			var(--w-line-height-m)
+		);
+
+		--_control-size: var(--w-c-checkbox-control-size, 2rem);
+		--_gap: var(--w-c-checkbox-gap, 8px);
+		--_radius: var(--w-c-checkbox-radius, 4px);
+		--_border-width: var(--w-c-checkbox-border-width, 1px);
+
+		--_bg-default: var(--w-c-checkbox-bg, var(--w-s-color-background));
+		--_border-default: var(
+			--w-c-checkbox-border-color,
+			var(--w-s-color-border-strong)
+		);
+		--_icon-color: var(
+			--w-c-checkbox-icon-color,
+			var(--w-s-color-icon-inverted)
+		);
+
+		--_bg-checked: var(
+			--w-c-checkbox-bg-checked,
+			var(--w-s-color-background-primary)
+		);
+		--_border-checked: var(
+			--w-c-checkbox-border-color-checked,
+			var(--w-s-color-border-primary)
+		);
+		--_checked-icon: var(
+			--w-c-checkbox-checked-icon,
+			var(--w-icon-toggle-checked)
+		);
+
+		--_border-invalid: var(
+			--w-c-checkbox-border-color-invalid,
+			var(--w-s-color-border-negative)
+		);
+		--_bg-invalid-checked: var(
+			--w-c-checkbox-bg-invalid-checked,
+			var(--w-s-color-background-negative)
+		);
+
+		--_bg-disabled: var(
+			--w-c-checkbox-bg-disabled,
+			var(--w-s-color-background-disabled-subtle)
+		);
+		--_border-disabled: var(
+			--w-c-checkbox-border-color-disabled,
+			var(--w-s-color-border-disabled)
+		);
+		--_bg-disabled-checked: var(
+			--w-c-checkbox-bg-disabled-checked,
+			var(--w-s-color-background-disabled)
+		);
+
+		--_outline-width: var(--w-c-checkbox-outline-width, 2px);
+		--_outline-color: var(
+			--w-c-checkbox-outline-color,
+			var(--w-s-color-border-focus)
+		);
+		--_outline-offset: var(
+			--w-c-checkbox-outline-offset,
+			var(--w-outline-offset, 1px)
+		);
+
+		--_transition: var(
+			--w-c-checkbox-transition,
+			all 150ms cubic-bezier(0.4, 0, 0.2, 1)
+		);
+
+		--_bg: var(--_bg-default);
+		--_border-color: var(--_border-default);
+	}
+
+	:host([type="checkbox"]) {
+		--_radius: var(--w-c-checkbox-radius, 4px);
+	}
+
+	:host([checked]),
+	:host([indeterminate]) {
+		--_bg: var(--_bg-checked);
+		--_border-color: var(--_border-checked);
+	}
+
+	:host([disabled]) {
+		--_bg: var(--_bg-disabled);
+		--_border-color: var(--_border-disabled);
+	}
+
+	:host([disabled][checked]),
+	:host([disabled][indeterminate]) {
+		--_bg: var(--_bg-disabled-checked);
+	}
+
+	[part~="label"] {
+		display: block;
+		font-size: var(--_label-font-size);
+		line-height: var(--_label-line-height);
+		user-select: none;
+		cursor: pointer;
+	}
+
+	[part="base"] {
+		display: grid;
+		grid-template-columns: var(--_control-size) max-content;
+		gap: var(--_gap);
+	}
+
+	[part="input"] {
+		position: absolute;
+		padding: 0;
+		margin: 0;
+		opacity: 0;
+		pointer-events: none;
+		inset: 0;
+	}
+
+	[part="control"] {
+		position: relative;
+		display: block;
+		height: var(--_control-size);
+		width: var(--_control-size);
+		flex-shrink: 0;
+
+		border-width: var(--_border-width);
+		border-style: solid;
+		border-color: var(--_border-color);
+		border-radius: var(--_radius);
+
+		background-color: var(--_bg);
+		color: var(--_icon-color);
+
+		cursor: pointer;
+		user-select: none;
+		appearance: none;
+		transition: var(--_transition);
+
+		font-weight: 700;
+		text-align: center;
+		line-height: var(--w-line-height-xs);
+		font-size: var(--w-font-size-m);
+	}
+
+	/* Invalid visuals are driven by the actual control state instead of host attributes.
    * This preserves group-driven invalid styling without mutating host attributes. */
-  [part='control']:has(> [part='input'][aria-invalid='true']:not(:disabled)) {
-    border-color: var(--_border-invalid);
-  }
-
-  [part='control']:has(> [part='input'][aria-invalid='true']:is(:checked, :indeterminate):not(:disabled)) {
-    background-color: var(--_bg-invalid-checked);
-  }
-
-  :host(:focus-visible) {
-    outline: none;
-  }
-
-  [part='control']:has(> [part='input']:focus-visible:not(:disabled)),
-  :host(:focus-visible) [part='control'] {
-    outline: var(--_outline-width) solid var(--_outline-color);
-    outline-offset: var(--_outline-offset);
-  }
-
-  /* checked icon (keep driven by actual input state for parity) */
-  [part='control']:has(:checked) {
-    background-image: var(--_checked-icon);
-    background-position: center;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :host { --w-c-checkbox-transition: none; }
-  }
+	[part="control"]:has(> [part="input"][aria-invalid="true"]:not(:disabled)) {
+		border-color: var(--_border-invalid);
+	}
+
+	[part="control"]:has(
+		> [part="input"][aria-invalid="true"]:is(:checked, :indeterminate):not(
+				:disabled
+			)
+	) {
+		background-color: var(--_bg-invalid-checked);
+	}
+
+	:host(:focus-visible) {
+		outline: none;
+	}
+
+	[part="control"]:has(> [part="input"]:focus-visible:not(:disabled)),
+	:host(:focus-visible) [part="control"] {
+		outline: var(--_outline-width) solid var(--_outline-color);
+		outline-offset: var(--_outline-offset);
+	}
+
+	/* checked icon (keep driven by actual input state for parity) */
+	[part="control"]:has(:checked) {
+		background-image: var(--_checked-icon);
+		background-position: center;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			--w-c-checkbox-transition: none;
+		}
+	}
 `;

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

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

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

@@ -1,108 +1,118 @@
-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 './checkbox-group.js';
-import '../checkbox/checkbox.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 "./checkbox-group.js";
+import "../checkbox/checkbox.js";
 // Initialize i18n with English locale for tests
-i18n.load('en', {
-    'checkbox-group.label.optional': ['(optional)'],
-    'checkbox-group.validation.required': ['At least one selection is required.'],
+i18n.load("en", {
+    "checkbox-group.label.optional": ["(optional)"],
+    "checkbox-group.validation.required": ["At least one selection is required."],
 });
-i18n.activate('en');
-const REQUIRED_MESSAGE = 'At least one selection is required.';
-describe('w-checkbox-group accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
-        test('default state has no violations', async () => {
+i18n.activate("en");
+const REQUIRED_MESSAGE = "At least one selection is required.";
+describe("w-checkbox-group accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
             const page = render(html `
-        <w-checkbox-group label="Preferences">
-          <w-checkbox>One</w-checkbox>
-          <w-checkbox>Two</w-checkbox>
-        </w-checkbox-group>
-      `);
+				<w-checkbox-group label="Preferences">
+					<w-checkbox>One</w-checkbox>
+					<w-checkbox>Two</w-checkbox>
+				</w-checkbox-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-checkbox-group label="Preferences" help-text="Select one">
-          <w-checkbox>One</w-checkbox>
-          <w-checkbox>Two</w-checkbox>
-        </w-checkbox-group>
-      `);
+				<w-checkbox-group label="Preferences" help-text="Select one">
+					<w-checkbox>One</w-checkbox>
+					<w-checkbox>Two</w-checkbox>
+				</w-checkbox-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-checkbox-group label="Preferences" required help-text="Select one">
-          <w-checkbox>One</w-checkbox>
-          <w-checkbox>Two</w-checkbox>
-        </w-checkbox-group>
-      `);
-            const groupEl = document.querySelector('w-checkbox-group');
+				<w-checkbox-group label="Preferences" required help-text="Select one">
+					<w-checkbox>One</w-checkbox>
+					<w-checkbox>Two</w-checkbox>
+				</w-checkbox-group>
+			`);
+            const groupEl = document.querySelector("w-checkbox-group");
             groupEl.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-checkbox-group label="Preferences">
-          <w-checkbox>One</w-checkbox>
-          <w-checkbox>Two</w-checkbox>
-        </w-checkbox-group>
-      `);
-            await expect.element(page.getByRole('group', { name: 'Preferences' })).toBeVisible();
+				<w-checkbox-group label="Preferences">
+					<w-checkbox>One</w-checkbox>
+					<w-checkbox>Two</w-checkbox>
+				</w-checkbox-group>
+			`);
+            await expect
+                .element(page.getByRole("group", { name: "Preferences" }))
+                .toBeVisible();
         });
     });
-    describe('WCAG 3.3.1 - Error Identification', () => {
-        test('invalid state is indicated via aria-invalid', async () => {
+    describe("WCAG 3.3.1 - Error Identification", () => {
+        test("invalid state is indicated via aria-invalid", async () => {
             const page = render(html `
-        <w-checkbox-group label="Preferences" required help-text="Select one">
-          <w-checkbox>One</w-checkbox>
-          <w-checkbox>Two</w-checkbox>
-        </w-checkbox-group>
-      `);
-            const groupEl = document.querySelector('w-checkbox-group');
+				<w-checkbox-group label="Preferences" required help-text="Select one">
+					<w-checkbox>One</w-checkbox>
+					<w-checkbox>Two</w-checkbox>
+				</w-checkbox-group>
+			`);
+            const groupEl = document.querySelector("w-checkbox-group");
             groupEl.reportValidity?.();
-            await expect.element(page.getByRole('group', { name: 'Preferences' })).toHaveAttribute('aria-invalid', 'true');
+            await expect
+                .element(page.getByRole("group", { name: "Preferences" }))
+                .toHaveAttribute("aria-invalid", "true");
             await expect.element(page.getByText(REQUIRED_MESSAGE)).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-checkbox-group label="Preferences" help-text="Select one">
-          <w-checkbox>One</w-checkbox>
-          <w-checkbox>Two</w-checkbox>
-        </w-checkbox-group>
-      `);
-            await expect.element(page.getByRole('group', { name: 'Preferences' })).toHaveAccessibleDescription('Select one');
+				<w-checkbox-group label="Preferences" help-text="Select one">
+					<w-checkbox>One</w-checkbox>
+					<w-checkbox>Two</w-checkbox>
+				</w-checkbox-group>
+			`);
+            await expect
+                .element(page.getByRole("group", { name: "Preferences" }))
+                .toHaveAccessibleDescription("Select one");
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('tab moves through checkboxes and space toggles', async () => {
-            const page = render(html `
-        <button>Before</button>
-        <w-checkbox-group label="Preferences">
-          <w-checkbox>One</w-checkbox>
-          <w-checkbox>Two</w-checkbox>
-        </w-checkbox-group>
-        <button>After</button>
-      `);
-            const checkboxes = Array.from(document.querySelectorAll('w-checkbox'));
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("tab moves through checkboxes and space toggles", async () => {
+            render(html `
+				<button>Before</button>
+				<w-checkbox-group label="Preferences">
+					<w-checkbox>One</w-checkbox>
+					<w-checkbox>Two</w-checkbox>
+				</w-checkbox-group>
+				<button>After</button>
+			`);
+            const checkboxes = [...document.querySelectorAll("w-checkbox")];
             const firstCheckbox = checkboxes[0];
             const secondCheckbox = checkboxes[1];
             await firstCheckbox?.updateComplete;
             firstCheckbox?.focus();
-            await expect.poll(() => firstCheckbox?.shadowRoot?.activeElement?.tagName).toBe('INPUT');
+            await expect
+                .poll(() => firstCheckbox?.shadowRoot?.activeElement?.tagName)
+                .toBe("INPUT");
             expect(firstCheckbox.checked).toBe(false);
-            await userEvent.keyboard('[Space]');
+            await userEvent.keyboard("[Space]");
             await expect.poll(() => firstCheckbox.checked).toBe(true);
             await secondCheckbox?.updateComplete;
             secondCheckbox?.focus();
-            await expect.poll(() => secondCheckbox?.shadowRoot?.activeElement?.tagName).toBe('INPUT');
-            await userEvent.keyboard('[Space]');
+            await expect
+                .poll(() => secondCheckbox?.shadowRoot?.activeElement?.tagName)
+                .toBe("INPUT");
+            await userEvent.keyboard("[Space]");
             await expect.poll(() => secondCheckbox.checked).toBe(true);
         });
     });

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

@@ -1,5 +1,19 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 declare const WarpCheckboxGroup_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * Checkboxes allow users to select multiple options from a list of choices.
+ *
+ * Use with `w-checkbox`.
+ *
+ * ## Architecture Note
+ * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
+ * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
+ * HTML best practices. This inconsistency exists for historical reasons and may be addressed
+ * in a future major version to align both on the more semantic approach.
+ *
+ * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
+ * backwards compatibility implications (CSS selectors, etc.).
+ */
 export declare class WarpCheckboxGroup extends WarpCheckboxGroup_base {
     #private;
     static shadowRootOptions: {
@@ -63,7 +77,7 @@ export declare class WarpCheckboxGroup extends WarpCheckboxGroup_base {
 export declare const WCheckboxGroup: typeof WarpCheckboxGroup;
 declare global {
     interface HTMLElementTagNameMap {
-        'w-checkbox-group': WarpCheckboxGroup;
+        "w-checkbox-group": WarpCheckboxGroup;
     }
 }
 export {};

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

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

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

@@ -1,40 +1,57 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import '../checkbox/checkbox.js';
-import './checkbox-group.js';
-describe('w-checkbox-group React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "../checkbox/checkbox.js";
+import "./checkbox-group.js";
+describe("w-checkbox-group React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
     // Note: w-checkbox-group requires w-checkbox 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-checkbox-group', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox-group", {});
         expect(warnings).toEqual([]);
     });
-    test('with label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox-group', { label: 'Options' });
+    test("with label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox-group", {
+            label: "Options",
+        });
         expect(warnings).toEqual([]);
     });
-    test('with name hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox-group', { label: 'Options', name: 'options' });
+    test("with name hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox-group", {
+            label: "Options",
+            name: "options",
+        });
         expect(warnings).toEqual([]);
     });
-    test('with optional hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox-group', { label: 'Options', optional: true });
+    test("with optional hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox-group", {
+            label: "Options",
+            optional: true,
+        });
         expect(warnings).toEqual([]);
     });
-    test('with help-text hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox-group', { label: 'Options', 'help-text': 'Select one or more' });
+    test("with help-text hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox-group", {
+            label: "Options",
+            "help-text": "Select one or more",
+        });
         expect(warnings).toEqual([]);
     });
-    test('invalid checkbox-group hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox-group', { label: 'Options', invalid: true });
+    test("invalid checkbox-group hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox-group", {
+            label: "Options",
+            invalid: true,
+        });
         expect(warnings).toEqual([]);
     });
-    test('required checkbox-group hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox-group', { label: 'Options', required: true });
+    test("required checkbox-group hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox-group", {
+            label: "Options",
+            required: true,
+        });
         expect(warnings).toEqual([]);
     });
 });