@nuvia-ui/components 4.0.1

package/src/ds-checkbox/ds-checkbox.js

@@ -0,0 +1,271 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * Checkbox component for boolean selections or multi-selection groups.
+ *
+ * @element ds-checkbox
+ *
+ * @prop {boolean} checked - Whether the checkbox is checked
+ * @prop {boolean} indeterminate - Visual partial selection state
+ * @prop {string} label - Label text to display
+ * @prop {string} name - Form name
+ * @prop {string} value - Form value (default: 'on')
+ * @prop {boolean} disabled - Disabled state
+ * @prop {boolean} required - Required field
+ * @prop {string} validationStatus - Validation state: 'error' | undefined
+ *
+ * @fires change - Fired when checked state changes
+ */
+export class DsCheckbox extends LitElement {
+  static properties = {
+    checked: { type: Boolean, reflect: true },
+    indeterminate: { type: Boolean, reflect: true },
+    label: { type: String },
+    name: { type: String },
+    value: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    validationStatus: { type: String, attribute: 'validation-status', reflect: true },
+    standalone: { type: Boolean, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      vertical-align: middle;
+      outline: none;
+      font-family: var(--ds-font-family-content);
+    }
+
+    .checkbox-wrapper {
+      display: flex;
+      align-items: flex-start; /* Align to top to handle multiline labels if needed, though center is fine for single line */
+      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;
+    }
+
+    /* Standalone Mode: Remove padding and min-height constraint for tight layouts (Data Tables, List Items) */
+    :host([standalone]) .checkbox-wrapper {
+      padding: 0;
+      min-height: 0;
+    }
+    
+    :host([standalone]) .checkbox-wrapper:hover {
+      background-color: transparent; /* No hover bg in standalone mode */
+    }
+
+    /* Hover state - Covers control and label */
+    :host(:not([disabled])) .checkbox-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;
+    }
+
+    /* Visual Control Box - 16px */
+    .control {
+      width: var(--ds-size-16);
+      height: var(--ds-size-16);
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--ds-radius-container); /* 0px */
+      transition: all 0.2s ease-in-out;
+    }
+
+    /* Unchecked State */
+    .control {
+      border: 2px solid var(--ds-color-border-strongest);
+      background-color: transparent;
+    }
+
+    /* Checked & Indeterminate States */
+    :host([checked]) .control,
+    :host([indeterminate]) .control {
+      background-color: var(--ds-color-bg-brand);
+      border-color: var(--ds-color-border-brand);
+    }
+
+    /* Icon styles */
+    ds-icon {
+      color: var(--ds-color-icon-inverse);
+      --ds-icon-size: var(--ds-icon-size-xs);
+      display: block;
+    }
+
+    /* 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 - applied when internal input is focused via keyboard */
+    .checkbox-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]) .checkbox-wrapper {
+      cursor: not-allowed;
+    }
+    
+    :host([disabled]) .checkbox-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,
+    :host([disabled][indeterminate]) .control {
+       background-color: var(--ds-color-icon-disabled);
+       border-color: transparent;
+    }
+
+    /* Disabled Icon Color */
+    :host([disabled]) ds-icon {
+      color: var(--ds-color-icon-inverse);
+    }
+
+    /* Error State */
+    :host([validation-status="error"]) .control {
+        border-color: var(--ds-color-border-error);
+    }
+    
+    :host([validation-status="error"][checked]) .control,
+    :host([validation-status="error"][indeterminate]) .control {
+        background-color: var(--ds-color-bg-error); 
+        border-color: var(--ds-color-border-error);
+    }
+
+    /* Error State Icon Color */
+    :host([validation-status="error"][checked]) ds-icon,
+    :host([validation-status="error"][indeterminate]) ds-icon {
+        color: var(--ds-color-icon-inverse);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.checked = false;
+    this.indeterminate = false;
+    this.name = '';
+    this.value = 'on';
+    this.disabled = false;
+    this.required = false;
+    this.standalone = false;
+  }
+
+  /* 
+   * Handle user interaction
+   * If indeterminate, interaction typically clears it and checks/unchecks based on previous state.
+   * Standard pattern: Indeterminate -> Checked -> Unchecked
+   */
+  _handleClick(e) {
+    if (this.disabled) return;
+
+    e.preventDefault();
+
+    // If indeterminate, we usually want to transition to checked, or just toggle checked state
+    if (this.indeterminate) {
+      this.indeterminate = false;
+      this.checked = true;
+    } else {
+      this.checked = !this.checked;
+    }
+
+    this._dispatchChange();
+  }
+
+  _dispatchChange() {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        checked: this.checked,
+        indeterminate: this.indeterminate,
+        value: this.value
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _getAriaLabel() {
+    return this.getAttribute('aria-label') || this.label || '';
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('indeterminate')) {
+      const input = this.shadowRoot.querySelector('input');
+      if (input) {
+        input.indeterminate = this.indeterminate;
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="checkbox-wrapper" @click="${this._handleClick}">
+        <input 
+          type="checkbox" 
+          .checked="${this.checked}" 
+          .indeterminate="${this.indeterminate}"
+          ?disabled="${this.disabled}"
+          ?required="${this.required}"
+          name="${this.name}"
+          value="${this.value}"
+          aria-label="${this._getAriaLabel()}"
+        >
+        
+        <div class="control-container">
+          <div class="control">
+            ${this.indeterminate
+        ? html`<ds-icon name="remove" size="xs"></ds-icon>` // Horizontal dash
+        : this.checked
+          ? html`<ds-icon name="check" size="xs"></ds-icon>` // Checkmark
+          : ''
+      }
+          </div>
+        </div>
+        
+        ${this.label ? html`<span class="label">${this.label}</span>` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-checkbox', DsCheckbox);

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

@@ -0,0 +1,77 @@
+import { html } from 'lit';
+import './ds-checkbox.js';
+
+export default {
+    title: 'Components/Checkbox',
+    component: 'ds-checkbox',
+    argTypes: {
+        checked: { control: 'boolean' },
+        indeterminate: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        required: { control: 'boolean' },
+        label: { control: 'text' },
+        validationStatus: {
+            control: { type: 'select' },
+            options: [undefined, 'error', 'success'],
+        },
+        standalone: { control: 'boolean' },
+    },
+};
+
+const Template = (args) => html`
+  <ds-checkbox
+    ?checked=${args.checked}
+    ?indeterminate=${args.indeterminate}
+    ?disabled=${args.disabled}
+    ?required=${args.required}
+    .label=${args.label}
+    .validationStatus=${args.validationStatus}
+    ?standalone=${args.standalone}
+  ></ds-checkbox>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Accept terms and conditions',
+    checked: false,
+    indeterminate: false,
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+    label: 'Option selected',
+    checked: true,
+};
+
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+    label: 'Parent option',
+    indeterminate: true,
+    checked: false, // Indeterminate usually overrides checked visually
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    label: 'This option is disabled',
+    disabled: true,
+};
+
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+    label: 'Disabled and checked',
+    disabled: true,
+    checked: true,
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+    label: 'Checkbox with error',
+    validationStatus: 'error',
+};
+
+export const Standalone = Template.bind({});
+Standalone.args = {
+    standalone: true,
+    checked: true,
+    label: 'Label hidden/ignored visually if standalone removes padding',
+};

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

@@ -0,0 +1,191 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-checkbox.js';
+import '../ds-icon/ds-icon.js';
+
+describe('ds-checkbox', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-checkbox></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.checked).toBe(false);
+        expect(element.disabled).toBe(false);
+        expect(element.indeterminate).toBe(false);
+    });
+
+    it('renders label when provided', async () => {
+        container.innerHTML = '<ds-checkbox label="Test Label"></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        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-checkbox checked></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.hasAttribute('checked')).toBe(true);
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.checked).toBe(true);
+    });
+
+    it('handles click events to toggle state', async () => {
+        container.innerHTML = '<ds-checkbox></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const wrapper = element.shadowRoot.querySelector('.checkbox-wrapper');
+
+        // Click to check
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(true);
+
+        // Click to uncheck
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(false);
+    });
+
+    it('handles indeterminate state correctly', async () => {
+        container.innerHTML = '<ds-checkbox indeterminate></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.indeterminate).toBe(true);
+
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon.getAttribute('name')).toBe('remove'); // Dash icon
+
+        const wrapper = element.shadowRoot.querySelector('.checkbox-wrapper');
+
+        // Click should clear indeterminate and set checked
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.indeterminate).toBe(false);
+        expect(element.checked).toBe(true);
+
+        const newIcon = element.shadowRoot.querySelector('ds-icon');
+        expect(newIcon.getAttribute('name')).toBe('check');
+    });
+
+    it('dispatches change event on interaction', async () => {
+        container.innerHTML = '<ds-checkbox></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const wrapper = element.shadowRoot.querySelector('.checkbox-wrapper');
+
+        let eventFired = false;
+        let eventDetail = null;
+
+        element.addEventListener('change', (e) => {
+            eventFired = true;
+            eventDetail = e.detail;
+        });
+
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(eventFired).toBe(true);
+        expect(eventDetail.checked).toBe(true);
+    });
+
+    it('does not toggle when disabled', async () => {
+        container.innerHTML = '<ds-checkbox disabled></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const wrapper = element.shadowRoot.querySelector('.checkbox-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-checkbox name="test-checkbox" value="accepted"></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.name).toBe('test-checkbox');
+        expect(input.value).toBe('accepted');
+    });
+
+    it('toggles state with Space key on set focus', async () => {
+        container.innerHTML = '<ds-checkbox></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input');
+        input.focus();
+
+        // Dispatch Space keydown
+        const spaceEvent = new KeyboardEvent('keydown', {
+            key: ' ',
+            code: 'Space',
+            bubbles: true,
+            composed: true
+        });
+        input.dispatchEvent(spaceEvent);
+
+        // Simulating standard checkbox behavior where Space triggers a click
+        const clickEvent = new MouseEvent('click', {
+            bubbles: true,
+            composed: true,
+            cancelable: true
+        });
+        input.dispatchEvent(clickEvent);
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(true);
+    });
+
+    it('clears indeterminate when clicked', async () => {
+        container.innerHTML = '<ds-checkbox indeterminate></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.indeterminate).toBe(true);
+
+        const wrapper = element.shadowRoot.querySelector('.checkbox-wrapper');
+        wrapper.click();
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.indeterminate).toBe(false);
+        expect(element.checked).toBe(true);
+    });
+
+    it('uses aria-label from host if provided', async () => {
+        container.innerHTML = '<ds-checkbox aria-label="custom accessible name"></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.getAttribute('aria-label')).toBe('custom accessible name');
+    });
+    it('reflects standalone property to attribute', async () => {
+        container.innerHTML = '<ds-checkbox standalone></ds-checkbox>';
+        const element = container.querySelector('ds-checkbox');
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.hasAttribute('standalone')).toBe(true);
+    });
+});

package/src/ds-checkbox/index.js

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

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

@@ -0,0 +1,146 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-checkbox-group.js';
+import '../ds-checkbox/ds-checkbox.js';
+
+describe('ds-checkbox-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-checkbox-group label="Preferences">
+                <ds-checkbox label="Option A" value="a"></ds-checkbox>
+                <ds-checkbox label="Option B" value="b"></ds-checkbox>
+                <ds-checkbox label="Option C" value="c"></ds-checkbox>
+            </ds-checkbox-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-checkbox-group label="Features" helper="Select all that apply">
+                <ds-checkbox label="Feature 1" value="1"></ds-checkbox>
+                <ds-checkbox label="Feature 2" value="2"></ds-checkbox>
+            </ds-checkbox-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-checkbox-group 
+                label="Required selections" 
+                validation-status="error" 
+                validation-message="Please select at least one option"
+            >
+                <ds-checkbox label="Option A" value="a"></ds-checkbox>
+                <ds-checkbox label="Option B" value="b"></ds-checkbox>
+            </ds-checkbox-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-checkbox-group label="Disabled options" disabled>
+                <ds-checkbox label="Option A" value="a"></ds-checkbox>
+                <ds-checkbox label="Option B" value="b"></ds-checkbox>
+            </ds-checkbox-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-checkbox-group label="Inline options" orientation="horizontal">
+                <ds-checkbox label="Option A" value="a"></ds-checkbox>
+                <ds-checkbox label="Option B" value="b"></ds-checkbox>
+            </ds-checkbox-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 some items checked', async () => {
+        container.innerHTML = `
+            <ds-checkbox-group label="Pre-selected options">
+                <ds-checkbox label="Option A" value="a" checked></ds-checkbox>
+                <ds-checkbox label="Option B" value="b"></ds-checkbox>
+                <ds-checkbox label="Option C" value="c" checked></ds-checkbox>
+            </ds-checkbox-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 group role attribute', async () => {
+        container.innerHTML = `
+            <ds-checkbox-group label="Test group">
+                <ds-checkbox label="Option A" value="a"></ds-checkbox>
+            </ds-checkbox-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const group = container.querySelector('ds-checkbox-group');
+        const groupContent = group.shadowRoot.querySelector('.group-content');
+
+        expect(groupContent.getAttribute('role')).toBe('group');
+    });
+
+    it('should have aria-labelledby referencing the label', async () => {
+        container.innerHTML = `
+            <ds-checkbox-group label="Labeled group">
+                <ds-checkbox label="Option A" value="a"></ds-checkbox>
+            </ds-checkbox-group>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const group = container.querySelector('ds-checkbox-group');
+        const groupContent = group.shadowRoot.querySelector('.group-content');
+        const labelId = groupContent.getAttribute('aria-labelledby');
+
+        expect(labelId).toBeTruthy();
+        expect(group.shadowRoot.getElementById(labelId)).toBeTruthy();
+    });
+});