@nuvia-ui/components 4.0.1

package/src/ds-header-nav-item/ds-header-nav-item.a11y.test.js

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-header-nav-item.js';
+
+describe('ds-header-nav-item a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks in default state (button)', async () => {
+        container.innerHTML = `
+            <ds-header-nav-item>Dashboard</ds-header-nav-item>
+        `;
+        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 selected', async () => {
+        container.innerHTML = `
+            <ds-header-nav-item selected>Dashboard</ds-header-nav-item>
+        `;
+        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 as link', async () => {
+        container.innerHTML = `
+            <ds-header-nav-item href="/dashboard">Dashboard</ds-header-nav-item>
+        `;
+        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 icon', async () => {
+        container.innerHTML = `
+            <ds-header-nav-item icon="home">Dashboard</ds-header-nav-item>
+        `;
+        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-header-nav-item/ds-header-nav-item.js

@@ -0,0 +1,124 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * Navigation item for the Header component.
+ * 
+ * @element ds-header-nav-item
+ * 
+ * @slot default - The label text
+ * 
+ * @prop {string} icon - Icon name (optional)
+ * @prop {boolean} selected - Whether the item is active
+ * @prop {string} href - Link destination
+ */
+export class DsHeaderNavItem extends LitElement {
+    static properties = {
+        icon: { type: String },
+        selected: { type: Boolean, reflect: true },
+        href: { type: String }
+    };
+
+    static styles = css`
+        :host {
+            display: inline-flex;
+            /* height: 100%; Removed to allow 32px sizing */
+            align-items: center;
+            position: relative;
+            cursor: pointer;
+            text-decoration: none;
+            color: var(--ds-color-text-default); /* Expects context mapping from Header */
+        }
+
+        .item {
+            display: flex;
+            align-items: center;
+            box-sizing: border-box;
+            /* Height 32px calculation:
+               Line-height (approx 20px) + Padding-top (6px) + Padding-bottom (6px) = 32px
+            */
+            padding: var(--ds-size-6) var(--ds-space-md);
+            gap: var(--ds-size-4);
+            border-radius: var(--ds-radius-container);
+            transition: all 0.2s;
+            text-decoration: none;
+            color: inherit;
+            font: var(--ds-typo-content-body-regular);
+        }
+
+        /* Reset button styles */
+        button.item {
+            appearance: none;
+            background: transparent;
+            border: none;
+            font-family: inherit;
+            font-size: inherit;
+            font: var(--ds-typo-content-body-regular);
+            cursor: pointer;
+            text-align: left;
+        }
+
+        /* Hover */
+        :host(:hover) .item {
+            background-color: var(--ds-color-bg-hover);
+        }
+
+        /* Pressed / Selected */
+        :host([selected]) .item,
+        :host(:active) .item {
+            background-color: var(--ds-color-bg-pressed);
+            font-weight: var(--ds-font-weight-bold);
+        }
+
+        /* Focus */
+        .item:focus-visible {
+            outline: 2px solid var(--ds-color-border-focus);
+            outline-offset: 0;
+        }
+
+        /* Selected Top Bar */
+        :host([selected])::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background-color: var(--ds-color-bg-brand);
+        }
+
+        /* Ensure icon size matches specs (20px) */
+        ds-icon {
+            --size: 20px;
+        }
+    `;
+
+    constructor() {
+        super();
+        this.selected = false;
+        this.href = '';
+    }
+
+    render() {
+        const content = html`
+            ${this.icon ? html`<ds-icon name="${this.icon}"></ds-icon>` : ''}
+            <slot></slot>
+        `;
+
+        if (this.href) {
+            return html`
+                <a href="${this.href}" class="item" aria-current="${this.selected ? 'page' : undefined}">
+                    ${content}
+                </a>
+            `;
+        }
+
+        return html`
+            <button type="button" class="item" aria-current="${this.selected ? 'page' : undefined}">
+                ${content}
+            </button>
+        `;
+    }
+}
+
+customElements.define('ds-header-nav-item', DsHeaderNavItem);

package/src/ds-header-nav-item/ds-header-nav-item.stories.js

@@ -0,0 +1,43 @@
+import { html } from 'lit';
+import './ds-header-nav-item.js';
+import '../ds-header-nav/ds-header-nav.js';
+
+export default {
+    title: 'Components/Header Nav Item',
+    component: 'ds-header-nav-item',
+    argTypes: {
+        label: { control: 'text' },
+        icon: { control: 'text' },
+        selected: { control: 'boolean' },
+        href: { control: 'text' }
+    }
+};
+
+const Template = (args) => html`
+    <ds-header-nav-item 
+        .icon=${args.icon}
+        .href=${args.href}
+        ?selected=${args.selected}
+    >
+        ${args.label || 'Nav Item'}
+    </ds-header-nav-item>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Dashboard',
+    selected: false
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+    label: 'Dashboard',
+    selected: true
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+    label: 'Settings',
+    icon: 'settings',
+    selected: false
+};

package/src/ds-header-nav-item/ds-header-nav-item.test.js

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-header-nav-item.js';
+
+describe('ds-header-nav-item', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders label slot (as button by default)', async () => {
+        const element = document.createElement('ds-header-nav-item');
+        container.appendChild(element);
+        element.textContent = 'My Label';
+        await element.updateComplete;
+
+        expect(element.textContent).toContain('My Label');
+        expect(element.shadowRoot.querySelector('button')).toBeTruthy();
+    });
+
+    it('renders as anchor when href is provided', async () => {
+        const element = document.createElement('ds-header-nav-item');
+        container.appendChild(element);
+        element.href = '#';
+        element.textContent = 'My Link';
+        await element.updateComplete;
+
+        expect(element.shadowRoot.querySelector('a')).toBeTruthy();
+        expect(element.shadowRoot.querySelector('button')).toBeNull();
+    });
+
+    it('reflects selected attribute on anchor', async () => {
+        const element = document.createElement('ds-header-nav-item');
+        container.appendChild(element);
+        element.href = '#';
+        element.selected = true;
+        await element.updateComplete;
+
+        expect(element.hasAttribute('selected')).toBe(true);
+        const link = element.shadowRoot.querySelector('a');
+        expect(link).toBeTruthy();
+        expect(link.getAttribute('aria-current')).toBe('page');
+    });
+
+    it('reflects selected attribute on button', async () => {
+        const element = document.createElement('ds-header-nav-item');
+        container.appendChild(element);
+        element.selected = true;
+        await element.updateComplete;
+
+        expect(element.hasAttribute('selected')).toBe(true);
+        const btn = element.shadowRoot.querySelector('button');
+        expect(btn).toBeTruthy();
+        expect(btn.getAttribute('aria-current')).toBe('page');
+    });
+});

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

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-icon.js';
+
+describe('ds-icon accessibility', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should have aria-hidden on decorative icons', async () => {
+        container.innerHTML = '<ds-icon name="star" size="md"></ds-icon>';
+        const icon = container.querySelector('ds-icon');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const svg = icon.shadowRoot.querySelector('svg');
+        expect(svg.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('should pass axe accessibility checks', async () => {
+        container.innerHTML = `
+      <ds-icon name="home" size="sm"></ds-icon>
+      <ds-icon name="star" size="md"></ds-icon>
+      <ds-icon name="settings" size="lg"></ds-icon>
+    `;
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should be focusable only when interactive', async () => {
+        container.innerHTML = '<ds-icon name="star"></ds-icon>';
+        const icon = container.querySelector('ds-icon');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Decorative icons should not be focusable by default
+        expect(icon.tabIndex).toBe(-1);
+    });
+});

package/src/ds-icon/ds-icon.js

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Icon component using Material Symbols Sharp
+ * 
+ * @element ds-icon
+ * @prop {string} name - Icon name (e.g., 'star', 'home', 'search')
+ * @prop {string} size - Icon size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
+ * @prop {string} spritePath - Path to the SVG sprite file (default: '/sprite.svg')
+ * 
+ * @example
+ * <ds-icon name="star" size="sm"></ds-icon>
+ * <ds-icon name="home" sprite-path="/assets/icons.svg"></ds-icon>
+ */
+export class DsIcon extends LitElement {
+  static properties = {
+    name: { type: String },
+    size: { type: String, reflect: true },
+    spritePath: { type: String, attribute: 'sprite-path' }
+  };
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    svg {
+      fill: currentColor;
+      width: var(--size);
+      height: var(--size);
+      display: block;
+    }
+
+    /* Size variants using design tokens */
+    :host([size="xs"]) {
+      --size: var(--ds-icon-size-xs, 16px);
+    }
+
+    :host([size="sm"]) {
+      --size: var(--ds-icon-size-sm, 20px);
+    }
+
+    :host([size="md"]),
+    :host(:not([size])) {
+      --size: var(--ds-icon-size-md, 32px);
+    }
+
+    :host([size="lg"]) {
+      --size: var(--ds-icon-size-lg, 48px);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.size = 'md';
+    this.name = '';
+    this.spritePath = '/sprite.svg';
+  }
+
+  render() {
+    if (!this.name) {
+      console.warn('ds-icon: "name" prop is required');
+      return html``;
+    }
+
+    return html`
+      <svg aria-hidden="true">
+        <use href="${this.spritePath}#${this.name}"></use>
+      </svg>
+    `;
+  }
+}
+
+customElements.define('ds-icon', DsIcon);

package/src/ds-icon/ds-icon.mdx

@@ -0,0 +1,36 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as DsIconStories from './ds-icon.stories';
+
+<Meta of={DsIconStories} />
+
+# Icon
+
+A visual element that represents an action, object, or concept.
+
+## Usage
+
+### When to use
+- To reinforce the meaning of a label (e.g., a "Save" floppy disk icon next to the text).
+- To represent an action in a compact way (e.g., inside an Icon Button).
+- To categorize items (e.g., file types).
+
+### When not to use
+- To replace text labels completely, unless the meaning is universally understood (like a trash can or magnifying glass).
+- As decoration without semantic value if it clutters the interface.
+
+---
+
+## Best Practices
+
+### Accessibility
+- ✅ **Decorative Icons:** If an icon is purely decorative and accompanied by text, ensure it is hidden from screen readers (the component handles this via `aria-hidden="true"` by default if no label is provided).
+- ✅ **Standalone Icons:** If an icon stands alone (without text), it **must** have an accessible label provided via context or the parent component (like `ds-icon-button`).
+
+### Color & Sizing
+- ✅ **Inherit Color:** Icons default to `currentColor`, meaning they inherit the text color of their parent. Use utility classes or token CSS variables on the parent to style them.
+- ✅ **Standard Sizes:** Always use the defined size props (`xs`, `sm`, `md`, `lg`) to ensure consistency across the UI.
+
+---
+
+<Canvas of={DsIconStories.Default} />
+<Controls />

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

@@ -0,0 +1,88 @@
+import './ds-icon.js';
+import { iconNames } from '../../../icons/build/icons.js';
+
+
+export default {
+    title: 'Components/Icon',
+    component: 'ds-icon',
+    argTypes: {
+        name: {
+            control: 'select',
+            options: iconNames,
+            description: 'Icon name from Material Symbols Sharp',
+        },
+        size: {
+            control: 'radio',
+            options: ['xs', 'sm', 'md', 'lg'],
+            description: 'Icon size',
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        name: 'star',
+        size: 'md',
+    },
+    render: ({ name, size }) => {
+        const icon = document.createElement('ds-icon');
+        icon.setAttribute('name', name);
+        icon.setAttribute('size', size);
+        return icon;
+    },
+};
+
+export const AllSizes = {
+    render: () => {
+        const container = document.createElement('div');
+        container.style.cssText = 'display: flex; align-items: center; gap: 2rem;';
+
+        ['xs', 'sm', 'md', 'lg'].forEach(size => {
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'display: flex; flex-direction: column; align-items: center; gap: 0.5rem;';
+
+            const icon = document.createElement('ds-icon');
+            icon.setAttribute('name', 'star');
+            icon.setAttribute('size', size);
+
+            const label = document.createElement('div');
+            label.style.cssText = 'font: var(--ds-typo-content-caption-regular); color: var(--ds-color-text-secondary);';
+            label.textContent = size.toUpperCase();
+
+            wrapper.appendChild(icon);
+            wrapper.appendChild(label);
+            container.appendChild(wrapper);
+        });
+
+        return container;
+    },
+};
+
+
+export const CommonIcons = {
+    render: () => {
+        const container = document.createElement('div');
+        container.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1.5rem;';
+
+        const commonIcons = ['home', 'star', 'settings', 'search', 'menu', 'close', 'check', 'delete', 'edit', 'add', 'remove', 'help'];
+
+        commonIcons.forEach(iconName => {
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'display: flex; flex-direction: column; align-items: center; gap: 0.5rem;';
+
+            const icon = document.createElement('ds-icon');
+            icon.setAttribute('name', iconName);
+            icon.setAttribute('size', 'md');
+
+            const label = document.createElement('div');
+            label.style.cssText = 'font: var(--ds-typo-content-caption-regular); color: var(--ds-color-text-secondary); text-align: center;';
+            label.textContent = iconName;
+
+            wrapper.appendChild(icon);
+            wrapper.appendChild(label);
+            container.appendChild(wrapper);
+        });
+
+        return container;
+    },
+};

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

@@ -0,0 +1,97 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-icon.js';
+
+describe('ds-icon', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should render with valid name prop', async () => {
+        container.innerHTML = '<ds-icon name="home"></ds-icon>';
+        const icon = container.querySelector('ds-icon');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const svg = icon.shadowRoot.querySelector('svg');
+        expect(svg).toBeTruthy();
+
+        const use = svg.querySelector('use');
+        expect(use.getAttribute('href')).toContain('#home');
+    });
+
+    it('should not render when name is empty', async () => {
+        const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+
+        container.innerHTML = '<ds-icon></ds-icon>';
+        const icon = container.querySelector('ds-icon');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const svg = icon.shadowRoot.querySelector('svg');
+        expect(svg).toBeFalsy();
+        expect(consoleWarnSpy).toHaveBeenCalledWith('ds-icon: "name" prop is required');
+
+        consoleWarnSpy.mockRestore();
+    });
+
+    it('should apply size attribute correctly', async () => {
+        const sizes = ['xs', 'sm', 'md', 'lg'];
+
+        for (const size of sizes) {
+            container.innerHTML = `<ds-icon name="star" size="${size}"></ds-icon>`;
+            const icon = container.querySelector('ds-icon');
+
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            expect(icon.getAttribute('size')).toBe(size);
+            expect(icon.size).toBe(size);
+        }
+    });
+
+    it('should default to md size when size is not specified', async () => {
+        container.innerHTML = '<ds-icon name="star"></ds-icon>';
+        const icon = container.querySelector('ds-icon');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(icon.size).toBe('md');
+    });
+
+    it('should inherit color from parent (currentColor)', async () => {
+        container.style.color = 'rgb(255, 0, 0)';
+        container.innerHTML = '<ds-icon name="star"></ds-icon>';
+        const icon = container.querySelector('ds-icon');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const svg = icon.shadowRoot.querySelector('svg');
+        const computedStyle = window.getComputedStyle(svg);
+
+        // SVG should use currentColor which inherits from parent
+        expect(computedStyle.fill).toBe('rgb(255, 0, 0)');
+    });
+
+    it('should update when name prop changes', async () => {
+        container.innerHTML = '<ds-icon name="home"></ds-icon>';
+        const icon = container.querySelector('ds-icon');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        let use = icon.shadowRoot.querySelector('use');
+        expect(use.getAttribute('href')).toContain('#home');
+
+        // Change the name
+        icon.setAttribute('name', 'star');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        use = icon.shadowRoot.querySelector('use');
+        expect(use.getAttribute('href')).toContain('#star');
+    });
+});

package/src/ds-icon/index.js

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