@warp-ds/elements 2.8.0-next.1 → 2.8.0-next.3

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

@@ -0,0 +1,148 @@
+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-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-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-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-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-ui]) [part='control'],
+    :host([role='radio']:state(checked)) [part='control'] {
+      background-color: var(--_border-color-checked);
+      border-color: var(--_border-color-checked);
+    }
+
+    :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

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

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

@@ -0,0 +1,81 @@
+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>
+      `);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        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>
+      `);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        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>
+      `);
+            await expect(page).toHaveNoAxeViolations();
+        });
+    });
+    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>
+      `);
+            await expect.element(page.getByRole('radio', { name: 'First option' })).toBeVisible();
+        });
+    });
+    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>
+      `);
+            await expect.element(page.getByRole('radio', { name: 'Disabled' })).toBeDisabled();
+        });
+        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');
+            await group.updateComplete;
+            const [checkedRadio, uncheckedRadio] = Array.from(document.querySelectorAll('w-radio'));
+            await checkedRadio.click();
+            await group.updateComplete;
+            await expect.poll(() => checkedRadio.getAttribute('aria-checked')).toBe('true');
+            await expect.poll(() => uncheckedRadio.getAttribute('aria-checked')).toBe('false');
+        });
+        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>
+      `);
+            await expect.element(page.getByRole('radio', { name: 'First option' })).toBeVisible();
+            await expect.element(page.getByRole('radio', { name: 'Second option' })).toBeVisible();
+        });
+    });
+});

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

@@ -0,0 +1,53 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+declare const WRadio_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+export declare class WRadio extends WRadio_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** The name of the radio, submitted as a name/value pair with form data. */
+    name: string;
+    /** The radio's value. When selected, the radio group will receive this value. */
+    value: string | null;
+    /** Draws the radio in a checked state (reflected to attribute). */
+    checked: boolean;
+    /** Disables the radio. */
+    disabled: boolean;
+    /** Makes the radio a required field. */
+    required: boolean;
+    /** Draws the radio in an invalid state. */
+    invalid: boolean;
+    constructor();
+    connectedCallback(): void;
+    private syncAriaDisabled;
+    private syncAriaChecked;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    private handleClick;
+    private handleInvalid;
+    private handleKeyDown;
+    resetFormControl(): void;
+    /** Returns the validation message if the radio is invalid, otherwise an empty string */
+    get validationMessage(): string;
+    /** Returns the validity state of the radio */
+    get validity(): ValidityState;
+    /** Checks whether the radio passes constraint validation */
+    checkValidity(): boolean;
+    /** Checks validity and shows the browser's validation message if invalid */
+    reportValidity(): boolean;
+    private isInGroup;
+    private getRadioScope;
+    private getStandaloneNamedRadios;
+    private syncStandaloneTabOrder;
+    private uncheckOtherRadios;
+    private updateValidity;
+    private syncFormValue;
+    private syncTabIndex;
+    private shouldSyncFormState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-radio': WRadio;
+    }
+}
+export {};