@nuvia-ui/components 4.0.1

package/src/ds-radio/ds-radio.a11y.test.js

@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-radio.js';
+
+describe('ds-radio a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks in default state', async () => {
+        container.innerHTML = '<ds-radio label="Option one"></ds-radio>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        if (results.violations.length > 0) {
+            console.log('Violations:', JSON.stringify(results.violations, null, 2));
+        }
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks when checked', async () => {
+        container.innerHTML = '<ds-radio label="Selected option" checked></ds-radio>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks when disabled', async () => {
+        container.innerHTML = '<ds-radio label="Disabled option" disabled></ds-radio>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks in error state', async () => {
+        container.innerHTML = '<ds-radio label="Error option" validation-status="error"></ds-radio>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks when required', async () => {
+        container.innerHTML = '<ds-radio label="Required option" required></ds-radio>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+});

package/src/ds-radio/ds-radio.js

@@ -0,0 +1,240 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * A radio button component for exclusive selection within a group.
+ *
+ * @element ds-radio
+ *
+ * @prop {Boolean} checked - Whether the radio is selected
+ * @prop {Boolean} disabled - Whether the radio is disabled
+ * @prop {Boolean} required - Whether the radio is required
+ * @prop {String} name - Name for form association (should match group)
+ * @prop {String} value - Value for form submission
+ * @prop {String} label - Label text displayed next to the radio
+ * @prop {String} validation-status - Validation state: 'error' or empty
+ *
+ * @fires change - Fired when the radio is selected
+ */
+export class DsRadio extends LitElement {
+  static properties = {
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    name: { type: String },
+    value: { type: String },
+    label: { type: String },
+    validationStatus: { type: String, attribute: 'validation-status', reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: flex-start;
+    }
+
+    /* Wrapper */
+    .radio-wrapper {
+      display: flex;
+      align-items: flex-start; /* Align to top to handle multiline labels if needed */
+      cursor: pointer;
+      padding: var(--ds-size-6) var(--ds-space-sm); /* 6px vertical (to get 32px total with 20px content), 8px horizontal */
+      min-height: var(--ds-size-32);
+      box-sizing: border-box;
+      border-radius: var(--ds-radius-container); /* 0px */
+      transition: background-color 0.2s;
+      position: relative;
+    }
+
+    :host([disabled]) .radio-wrapper {
+      cursor: not-allowed;
+    }
+
+    /* Hover state - Covers control and label */
+    :host(:not([disabled])) .radio-wrapper:hover {
+      background-color: var(--ds-color-bg-hover);
+    }
+
+    /* Control Container - 20px height to match label line-height */
+    .control-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--ds-size-20);
+      flex-shrink: 0;
+    }
+
+    /* Control (The Circle) - 16px to match checkbox */
+    .control {
+      width: var(--ds-size-16);
+      height: var(--ds-size-16);
+      border: 2px solid var(--ds-color-border-strongest);
+      border-radius: var(--ds-size-999);
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    /* Inner Dot (shown when checked) - 8px for 16px control */
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: var(--ds-size-999);
+      background-color: var(--ds-color-bg-brand);
+      opacity: 0;
+      transform: scale(0);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+    }
+
+    :host([checked]) .dot {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    /* Checked State - keep border visible, dot handles the visual indicator */
+    :host([checked]) .control {
+      border-color: var(--ds-color-border-brand);
+    }
+
+    /* Label Styles */
+    .label {
+      margin-inline-start: var(--ds-space-sm);
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      user-select: none;
+    }
+
+    /* Focus Visible */
+    .radio-wrapper:has(input:focus-visible) {
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: 0;
+    }
+
+    /* Native Input (Hidden but accessible) */
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      margin: 0;
+      cursor: inherit;
+    }
+
+    /* Disabled State */
+    :host([disabled]) .radio-wrapper:hover {
+      background-color: transparent;
+    }
+
+    :host([disabled]) .label {
+      color: var(--ds-color-text-disabled);
+    }
+
+    /* Disabled State Control */
+    :host([disabled]) .control {
+      background-color: transparent;
+      border-color: var(--ds-color-icon-disabled);
+    }
+
+    :host([disabled][checked]) .control {
+      background-color: var(--ds-color-bg-disabled);
+    }
+
+    /* Disabled Dot Color */
+    :host([disabled]) .dot {
+      background-color: var(--ds-color-icon-disabled);
+    }
+
+    /* Error State */
+    :host([validation-status="error"]) .control {
+      border-color: var(--ds-color-border-error);
+    }
+
+    :host([validation-status="error"][checked]) .control {
+      border-color: var(--ds-color-border-error);
+    }
+
+    /* Error State Dot Color */
+    :host([validation-status="error"][checked]) .dot {
+      background-color: var(--ds-color-bg-error);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.required = false;
+    this.name = '';
+    this.value = '';
+    this.label = '';
+    this.validationStatus = '';
+  }
+
+  _handleClick(e) {
+    if (this.disabled) return;
+    if (this.checked) return; // Radio buttons don't uncheck on click
+
+    e.preventDefault();
+
+    // Handle mutual exclusivity within the same root (Document or ShadowRoot)
+    const root = this.getRootNode();
+    const name = this.getAttribute('name');
+
+    if (name) {
+      const siblings = root.querySelectorAll(`ds-radio[name="${name}"]`);
+      siblings.forEach(sibling => {
+        if (sibling !== this) {
+          sibling.checked = false;
+        }
+      });
+    }
+
+    this.checked = true;
+    this._dispatchChange();
+  }
+
+  _dispatchChange() {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        checked: this.checked,
+        value: this.value
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _getAriaLabel() {
+    return this.getAttribute('aria-label') || this.label || '';
+  }
+
+  render() {
+    return html`
+      <div class="radio-wrapper" @click="${this._handleClick}">
+        <input
+          type="radio"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          ?required="${this.required}"
+          name="${this.name}"
+          value="${this.value}"
+          aria-label="${this._getAriaLabel()}"
+        >
+
+        <div class="control-container">
+          <div class="control">
+            <div class="dot"></div>
+          </div>
+        </div>
+
+        ${this.label ? html`<span class="label">${this.label}</span>` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-radio', DsRadio);

package/src/ds-radio/ds-radio.stories.js

@@ -0,0 +1,102 @@
+import { html } from 'lit';
+import './ds-radio.js';
+import '../token-provider/token-provider.js';
+
+export default {
+    title: 'Components/Radio',
+    component: 'ds-radio',
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        required: { control: 'boolean' },
+        name: { control: 'text' },
+        value: { control: 'text' },
+        validationStatus: {
+            control: 'select',
+            options: ['', 'error']
+        }
+    },
+    args: {
+        label: 'Option label',
+        checked: false,
+        disabled: false,
+        required: false,
+        name: 'radio-group',
+        value: 'option-1',
+        validationStatus: ''
+    }
+};
+
+export const Default = {
+    args: {
+        label: 'Default option'
+    }
+};
+
+export const Checked = {
+    args: {
+        label: 'Selected option',
+        checked: true
+    }
+};
+
+export const Disabled = {
+    args: {
+        label: 'This option is disabled',
+        disabled: true
+    }
+};
+
+export const DisabledChecked = {
+    args: {
+        label: 'Disabled selected option',
+        checked: true,
+        disabled: true
+    }
+};
+
+export const WithError = {
+    args: {
+        label: 'Option with validation error',
+        validationStatus: 'error'
+    }
+};
+
+export const WithErrorChecked = {
+    args: {
+        label: 'Selected option with error',
+        checked: true,
+        validationStatus: 'error'
+    }
+};
+
+export const RadioGroup = {
+    render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 8px;">
+      <ds-radio name="group-demo" value="option-1" label="First option" checked></ds-radio>
+      <ds-radio name="group-demo" value="option-2" label="Second option"></ds-radio>
+      <ds-radio name="group-demo" value="option-3" label="Third option"></ds-radio>
+    </div>
+  `
+};
+
+export const AllStates = {
+    render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="display: flex; gap: 24px; align-items: center;">
+        <ds-radio label="Default"></ds-radio>
+        <ds-radio label="Checked" checked></ds-radio>
+      </div>
+      <div style="display: flex; gap: 24px; align-items: center;">
+        <ds-radio label="Disabled" disabled></ds-radio>
+        <ds-radio label="Disabled checked" disabled checked></ds-radio>
+      </div>
+      <div style="display: flex; gap: 24px; align-items: center;">
+        <ds-radio label="Error" validation-status="error"></ds-radio>
+        <ds-radio label="Error checked" validation-status="error" checked></ds-radio>
+      </div>
+    </div>
+  `
+};

package/src/ds-radio/ds-radio.test.js

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-radio.js';
+
+describe('ds-radio', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-radio></ds-radio>';
+        const element = container.querySelector('ds-radio');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.checked).toBe(false);
+        expect(element.disabled).toBe(false);
+        expect(element.shadowRoot.querySelector('.control')).toBeTruthy();
+        expect(element.shadowRoot.querySelector('.dot')).toBeTruthy();
+    });
+
+    it('renders label when provided', async () => {
+        container.innerHTML = '<ds-radio label="Test Label"></ds-radio>';
+        const element = container.querySelector('ds-radio');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const label = element.shadowRoot.querySelector('.label');
+        expect(label).toBeTruthy();
+        expect(label.textContent).toBe('Test Label');
+    });
+
+    it('reflects checked property to attribute', async () => {
+        container.innerHTML = '<ds-radio></ds-radio>';
+        const element = container.querySelector('ds-radio');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        element.checked = true;
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.hasAttribute('checked')).toBe(true);
+    });
+
+    it('handles click events to select', async () => {
+        container.innerHTML = '<ds-radio></ds-radio>';
+        const element = container.querySelector('ds-radio');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const wrapper = element.shadowRoot.querySelector('.radio-wrapper');
+
+        // Click to check
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(true);
+
+        // Click again should NOT uncheck (radio behavior)
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(true);
+    });
+
+    it('dispatches change event on interaction', async () => {
+        container.innerHTML = '<ds-radio value="test-value"></ds-radio>';
+        const element = container.querySelector('ds-radio');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        let eventDetail = null;
+        element.addEventListener('change', (e) => {
+            eventDetail = e.detail;
+        });
+
+        const wrapper = element.shadowRoot.querySelector('.radio-wrapper');
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(eventDetail).toBeTruthy();
+        expect(eventDetail.checked).toBe(true);
+        expect(eventDetail.value).toBe('test-value');
+    });
+
+    it('does not toggle when disabled', async () => {
+        container.innerHTML = '<ds-radio disabled></ds-radio>';
+        const element = container.querySelector('ds-radio');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const wrapper = element.shadowRoot.querySelector('.radio-wrapper');
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.checked).toBe(false);
+    });
+
+    it('sets name and value on internal input', async () => {
+        container.innerHTML = '<ds-radio name="test-radio" value="accepted"></ds-radio>';
+        const element = container.querySelector('ds-radio');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.name).toBe('test-radio');
+        expect(input.value).toBe('accepted');
+    });
+
+    it('uses aria-label from host if provided', async () => {
+        container.innerHTML = '<ds-radio aria-label="custom accessible name"></ds-radio>';
+        const element = container.querySelector('ds-radio');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.getAttribute('aria-label')).toBe('custom accessible name');
+    });
+});

package/src/ds-radio/index.js

@@ -0,0 +1 @@
+export { DsRadio } from './ds-radio.js';

package/src/ds-radio-group/ds-radio-group.a11y.test.js

@@ -0,0 +1,164 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-radio-group.js';
+import '../ds-radio/ds-radio.js';
+
+describe('ds-radio-group a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks with label and children', async () => {
+        container.innerHTML = `
+            <ds-radio-group label="Payment method" name="payment">
+                <ds-radio label="Credit card" value="credit"></ds-radio>
+                <ds-radio label="Debit card" value="debit"></ds-radio>
+                <ds-radio label="PayPal" value="paypal"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        if (results.violations.length > 0) {
+            console.log('Violations:', JSON.stringify(results.violations, null, 2));
+        }
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with helper text', async () => {
+        container.innerHTML = `
+            <ds-radio-group label="Shipping speed" name="shipping" helper="Select your preferred delivery option">
+                <ds-radio label="Standard (5-7 days)" value="standard"></ds-radio>
+                <ds-radio label="Express (2-3 days)" value="express"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks in error state', async () => {
+        container.innerHTML = `
+            <ds-radio-group 
+                label="Required selection" 
+                name="required"
+                validation-status="error" 
+                validation-message="Please select an option"
+            >
+                <ds-radio label="Option A" value="a"></ds-radio>
+                <ds-radio label="Option B" value="b"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks when disabled', async () => {
+        container.innerHTML = `
+            <ds-radio-group label="Disabled options" name="disabled" disabled>
+                <ds-radio label="Option A" value="a"></ds-radio>
+                <ds-radio label="Option B" value="b"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with horizontal orientation', async () => {
+        container.innerHTML = `
+            <ds-radio-group label="Size" name="size" orientation="horizontal">
+                <ds-radio label="Small" value="s"></ds-radio>
+                <ds-radio label="Medium" value="m"></ds-radio>
+                <ds-radio label="Large" value="l"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with pre-selected value', async () => {
+        container.innerHTML = `
+            <ds-radio-group label="Language" name="lang" value="en">
+                <ds-radio label="English" value="en"></ds-radio>
+                <ds-radio label="Portuguese" value="pt"></ds-radio>
+                <ds-radio label="Spanish" value="es"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should have proper radiogroup role attribute', async () => {
+        container.innerHTML = `
+            <ds-radio-group label="Test group" name="test">
+                <ds-radio label="Option A" value="a"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const group = container.querySelector('ds-radio-group');
+        const groupContent = group.shadowRoot.querySelector('.group-content');
+
+        expect(groupContent.getAttribute('role')).toBe('radiogroup');
+    });
+
+    it('should have aria-labelledby referencing the label', async () => {
+        container.innerHTML = `
+            <ds-radio-group label="Labeled group" name="labeled">
+                <ds-radio label="Option A" value="a"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const group = container.querySelector('ds-radio-group');
+        const groupContent = group.shadowRoot.querySelector('.group-content');
+        const labelId = groupContent.getAttribute('aria-labelledby');
+
+        expect(labelId).toBeTruthy();
+        expect(group.shadowRoot.getElementById(labelId)).toBeTruthy();
+    });
+
+    it('should propagate name to child radios for proper grouping', async () => {
+        container.innerHTML = `
+            <ds-radio-group label="Test group" name="test-group">
+                <ds-radio label="Option A" value="a"></ds-radio>
+                <ds-radio label="Option B" value="b"></ds-radio>
+            </ds-radio-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 200));
+
+        const radios = container.querySelectorAll('ds-radio');
+
+        radios.forEach(radio => {
+            expect(radio.getAttribute('name')).toBe('test-group');
+        });
+    });
+});