@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,307 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * Navigation item component for vertical navigation menus
+ * 
+ * @element ds-nav-item
+ * 
+ * @prop {string} label - Label text to display
+ * @prop {string} value - Unique value identifier for this item
+ * @prop {string} icon - Optional decorative icon name (left side)
+ * @prop {boolean} selected - Whether this item is currently selected/active
+ * @prop {boolean} expanded - For parent items, whether children are visible
+ * @prop {number} level - Indentation level (0 = root, each level adds 32px padding)
+ * @prop {string} href - Optional URL for navigation (makes item a link)
+ * 
+ * @slot - Default slot for child nav items (makes this a parent/collapsible item)
+ * 
+ * @fires ds-nav-select - Fired when a stand-alone item is clicked
+ * @fires ds-nav-toggle - Fired when a parent item is expanded/collapsed
+ * 
+ * @csspart container - The main container element
+ * @csspart icon - The decorative icon
+ * @csspart label - The label text
+ * @csspart chevron - The expand/collapse chevron (parent items only)
+ * @csspart children - The container for child items
+ */
+export class DsNavItem extends LitElement {
+    static properties = {
+        label: { type: String },
+        value: { type: String, reflect: true },
+        icon: { type: String },
+        selected: { type: Boolean, reflect: true },
+        expanded: { type: Boolean, reflect: true },
+        level: { type: Number, reflect: true },
+        href: { type: String },
+        childSelected: { type: Boolean, reflect: true, attribute: 'child-selected' },
+        _hasChildren: { type: Boolean, state: true }
+    };
+
+    static styles = css`
+        :host {
+            display: block;
+            box-sizing: border-box;
+        }
+
+        /* Wrapper handles indentation */
+        .nav-wrapper {
+            display: flex;
+            align-items: center;
+            box-sizing: border-box;
+            padding-left: 0;
+        }
+
+        /* Level indentation: 32px per level on wrapper */
+        :host([level="1"]) .nav-wrapper { padding-left: 32px; }
+        :host([level="2"]) .nav-wrapper { padding-left: 64px; }
+        :host([level="3"]) .nav-wrapper { padding-left: 96px; }
+        :host([level="4"]) .nav-wrapper { padding-left: 128px; }
+
+        /* Main clickable/interactive container - only content area */
+        .nav-item {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            height: 32px;
+            padding: 6px var(--ds-space-sm); /* 6px vertical, 8px horizontal */
+            gap: var(--ds-space-xs); /* 4px */
+            box-sizing: border-box;
+            border-radius: var(--ds-radius-container); /* 0px - sharp */
+            border: none;
+            background: transparent;
+            color: var(--ds-color-text-default);
+            font: var(--ds-typo-content-body-regular);
+            text-decoration: none;
+            cursor: pointer;
+            position: relative;
+            text-align: left;
+        }
+
+        /* Remove default button/anchor styles */
+        button.nav-item {
+            appearance: none;
+            font-family: var(--ds-font-family-content);
+            font: var(--ds-typo-content-body-regular);
+        }
+
+        a.nav-item {
+            display: flex;
+        }
+
+        /* Icon styling */
+        .icon {
+            flex-shrink: 0;
+            color: var(--ds-color-icon-default);
+        }
+
+        /* Label */
+        .label {
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* Chevron for parent items */
+        .chevron {
+            flex-shrink: 0;
+            color: var(--ds-color-icon-default);
+            transition: transform 0.2s ease;
+        }
+
+        /* Hover state - only on content area */
+        :host(:not([selected])) .nav-item:hover {
+            background-color: var(--ds-color-bg-hover);
+        }
+
+        /* Pressed/Active state */
+        :host(:not([selected])) .nav-item:active {
+            background-color: var(--ds-color-bg-pressed);
+        }
+
+        /* Focus state */
+        .nav-item:focus-visible {
+            outline: 2px solid var(--ds-color-border-focus);
+            outline-offset: 0;
+        }
+
+        /* Selected state - only on content area */
+        :host([selected]) .nav-item {
+            background-color: var(--ds-color-bg-selected);
+            font-family: var(--ds-font-family-content);
+            font-weight: bold;
+        }
+
+        /* Parent bold state when a child is selected and parent is collapsed */
+        :host([child-selected]:not([expanded])) .label {
+            font-weight: bold;
+        }
+
+        /* Selected indicator line - starts at content area, not at indentation */
+        :host([selected]) .nav-item::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background-color: var(--ds-color-border-brand);
+        }
+
+
+
+        /* Children container */
+        .children {
+            display: none;
+            flex-direction: column;
+            gap: var(--ds-space-sm);
+        }
+
+        :host([expanded]) .children {
+            display: flex;
+            margin-top: var(--ds-space-sm); /* 8px gap between parent and first child */
+        }
+
+        /* Hidden slot for detecting children */
+        .hidden-slot {
+            display: none;
+        }
+    `;
+
+    constructor() {
+        super();
+        this.label = '';
+        this.value = '';
+        this.icon = '';
+        this.selected = false;
+        this.expanded = false;
+        this.level = 0;
+        this.href = '';
+        this.childSelected = false;
+        this._hasChildren = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Check for slotted children to determine if this is a parent item
+        this._checkForChildren();
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+
+    _checkForChildren() {
+        // Check if there are any ds-nav-item children
+        const children = this.querySelectorAll(':scope > ds-nav-item');
+        this._hasChildren = children.length > 0;
+    }
+
+    _handleSlotChange() {
+        this._checkForChildren();
+    }
+
+    _handleClick(e) {
+
+        if (this._hasChildren) {
+            // Parent item: toggle expand/collapse
+            e.preventDefault();
+            this.expanded = !this.expanded;
+            this.dispatchEvent(new CustomEvent('ds-nav-toggle', {
+                detail: { expanded: this.expanded },
+                bubbles: true,
+                composed: true
+            }));
+        } else {
+            // Stand-alone item: dispatch select event (container will handle selection)
+            this.dispatchEvent(new CustomEvent('ds-nav-select', {
+                detail: {
+                    value: this.value,
+                    label: this.label,
+                    href: this.href,
+                    item: this
+                },
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+
+    _handleKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this._handleClick(e);
+        }
+    }
+
+    _getChevronIcon() {
+        return this.expanded ? 'expand-more' : 'chevron-right';
+    }
+
+    render() {
+        const isParent = this._hasChildren;
+        const Tag = this.href && !isParent ? 'a' : 'button';
+
+        const content = html`
+            ${this.icon ? html`
+                <ds-icon 
+                    name="${this.icon}" 
+                    size="sm" 
+                    class="icon"
+                    part="icon"
+                ></ds-icon>
+            ` : ''}
+            <span class="label" part="label">${this.label}</span>
+            ${isParent ? html`
+                <ds-icon 
+                    name="${this._getChevronIcon()}" 
+                    size="sm" 
+                    class="chevron"
+                    part="chevron"
+                ></ds-icon>
+            ` : ''}
+        `;
+
+        return html`
+            <div class="nav-wrapper">
+                ${Tag === 'a' ? html`
+                    <a 
+                        class="nav-item"
+                        href="${this.href}"
+                        part="container"
+                        aria-current="${this.selected ? 'page' : undefined}"
+                        @click="${this._handleClick}"
+                        @keydown="${this._handleKeyDown}"
+                    >
+                        ${content}
+                    </a>
+                ` : html`
+                    <button 
+                        class="nav-item"
+                        part="container"
+                        type="button"
+                        aria-expanded="${isParent ? String(this.expanded) : undefined}"
+                        aria-current="${this.selected ? 'page' : undefined}"
+                        @click="${this._handleClick}"
+                        @keydown="${this._handleKeyDown}"
+                    >
+                        ${content}
+                    </button>
+                `}
+            </div>
+
+            ${isParent ? html`
+                <div class="children" part="children">
+                    <slot @slotchange="${this._handleSlotChange}"></slot>
+                </div>
+            ` : html`
+                <div class="hidden-slot">
+                    <slot @slotchange="${this._handleSlotChange}"></slot>
+                </div>
+            `}
+        `;
+    }
+}
+
+customElements.define('ds-nav-item', DsNavItem);

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

@@ -0,0 +1,99 @@
+import { html } from 'lit';
+import './ds-nav-item.js';
+
+export default {
+    title: 'Components/Nav Item',
+    component: 'ds-nav-item',
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Label text to display'
+        },
+        icon: {
+            control: 'text',
+            description: 'Optional decorative icon name'
+        },
+        selected: {
+            control: 'boolean',
+            description: 'Whether this item is currently selected'
+        },
+
+        expanded: {
+            control: 'boolean',
+            description: 'For parent items, whether children are visible'
+        },
+        level: {
+            control: 'number',
+            description: 'Indentation level (each level adds 32px padding)'
+        },
+        href: {
+            control: 'text',
+            description: 'Optional URL for navigation'
+        }
+    }
+};
+
+/**
+ * Default stand-alone navigation item
+ */
+export const Default = {
+    args: {
+        label: 'Dashboard',
+        icon: 'apps'
+    }
+};
+
+/**
+ * Selected/active state with brand indicator
+ */
+export const Selected = {
+    args: {
+        label: 'Dashboard',
+        icon: 'apps',
+        selected: true
+    }
+};
+
+
+
+/**
+ * Without icon
+ */
+export const WithoutIcon = {
+    args: {
+        label: 'Overview'
+    }
+};
+
+/**
+ * As a link
+ */
+export const AsLink = {
+    args: {
+        label: 'External Link',
+        icon: 'open-in-new',
+        href: '/external'
+    }
+};
+
+/**
+ * Simple parent item example
+ */
+export const Parent = {
+    args: {
+        label: 'Parent Item',
+        icon: 'folder',
+        expanded: false
+    },
+    render: (args) => html`
+        <ds-nav-item 
+            label="${args.label}" 
+            icon="${args.icon}" 
+            ?expanded="${args.expanded}"
+            ?selected="${args.selected}"
+        >
+            <ds-nav-item label="Child Item"></ds-nav-item>
+        </ds-nav-item>
+    `
+};

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

@@ -0,0 +1,169 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-nav-item.js';
+
+describe('ds-nav-item', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-nav-item label="Home"></ds-nav-item>';
+        const element = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.label).toBe('Home');
+        expect(element.selected).toBe(false);
+        expect(element.expanded).toBe(false);
+        expect(element.level).toBe(0);
+    });
+
+    it('renders label correctly', async () => {
+        container.innerHTML = '<ds-nav-item label="Dashboard"></ds-nav-item>';
+        const element = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const label = element.shadowRoot.querySelector('.label');
+        expect(label.textContent).toBe('Dashboard');
+    });
+
+    it('renders icon when provided', async () => {
+        container.innerHTML = '<ds-nav-item label="Settings" icon="settings"></ds-nav-item>';
+        const element = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const icon = element.shadowRoot.querySelector('ds-icon.icon');
+        expect(icon).toBeTruthy();
+        expect(icon.getAttribute('name')).toBe('settings');
+    });
+
+    it('does not render icon when not provided', async () => {
+        container.innerHTML = '<ds-nav-item label="Home"></ds-nav-item>';
+        const element = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const icon = element.shadowRoot.querySelector('ds-icon.icon');
+        expect(icon).toBeFalsy();
+    });
+
+    it('reflects selected attribute', async () => {
+        container.innerHTML = '<ds-nav-item label="Home" selected></ds-nav-item>';
+        const element = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.hasAttribute('selected')).toBe(true);
+        expect(element.selected).toBe(true);
+    });
+
+    it('dispatches ds-nav-select event on click for stand-alone item', async () => {
+        container.innerHTML = '<ds-nav-item label="Home" icon="home"></ds-nav-item>';
+        const element = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const selectSpy = vi.fn();
+        element.addEventListener('ds-nav-select', selectSpy);
+
+        const button = element.shadowRoot.querySelector('.nav-item');
+        button.click();
+
+        expect(selectSpy).toHaveBeenCalledTimes(1);
+        expect(selectSpy.mock.calls[0][0].detail.label).toBe('Home');
+    });
+
+    it('renders as link when href is provided', async () => {
+        container.innerHTML = '<ds-nav-item label="External" href="/dashboard"></ds-nav-item>';
+        const element = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const link = element.shadowRoot.querySelector('a.nav-item');
+        expect(link).toBeTruthy();
+        expect(link.getAttribute('href')).toBe('/dashboard');
+    });
+
+    it('renders chevron for parent items with children', async () => {
+        container.innerHTML = `
+            <ds-nav-item label="Parent" icon="folder">
+                <ds-nav-item label="Child 1"></ds-nav-item>
+                <ds-nav-item label="Child 2"></ds-nav-item>
+            </ds-nav-item>
+        `;
+        const parent = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const chevron = parent.shadowRoot.querySelector('ds-icon.chevron');
+        expect(chevron).toBeTruthy();
+        expect(chevron.getAttribute('name')).toBe('chevron-right');
+    });
+
+    it('toggles expanded state on parent click', async () => {
+        container.innerHTML = `
+            <ds-nav-item label="Parent">
+                <ds-nav-item label="Child"></ds-nav-item>
+            </ds-nav-item>
+        `;
+        const parent = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(parent.expanded).toBe(false);
+
+        const button = parent.shadowRoot.querySelector('.nav-item');
+        button.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(parent.expanded).toBe(true);
+    });
+
+    it('dispatches ds-nav-toggle event on parent click', async () => {
+        container.innerHTML = `
+            <ds-nav-item label="Parent">
+                <ds-nav-item label="Child"></ds-nav-item>
+            </ds-nav-item>
+        `;
+        const parent = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const toggleSpy = vi.fn();
+        parent.addEventListener('ds-nav-toggle', toggleSpy);
+
+        const button = parent.shadowRoot.querySelector('.nav-item');
+        button.click();
+
+        expect(toggleSpy).toHaveBeenCalledTimes(1);
+        expect(toggleSpy.mock.calls[0][0].detail.expanded).toBe(true);
+    });
+
+    it('shows expand-more chevron when expanded', async () => {
+        container.innerHTML = `
+            <ds-nav-item label="Parent" expanded>
+                <ds-nav-item label="Child"></ds-nav-item>
+            </ds-nav-item>
+        `;
+        const parent = container.querySelector('ds-nav-item');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const chevron = parent.shadowRoot.querySelector('ds-icon.chevron');
+        expect(chevron.getAttribute('name')).toBe('expand-more');
+    });
+
+    it('respects level attribute for indentation', async () => {
+        container.innerHTML = `
+            <ds-nav-item label="Level 0" level="0"></ds-nav-item>
+            <ds-nav-item label="Level 1" level="1"></ds-nav-item>
+            <ds-nav-item label="Level 2" level="2"></ds-nav-item>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const items = container.querySelectorAll('ds-nav-item');
+        expect(items[0].level).toBe(0);
+        expect(items[1].level).toBe(1);
+        expect(items[2].level).toBe(2);
+    });
+
+
+});

package/src/ds-nav-item/index.js

@@ -0,0 +1 @@
+export { DsNavItem } from './ds-nav-item.js';

package/src/ds-nav-vertical/ds-nav-vertical.a11y.test.js

@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-nav-vertical.js';
+import '../ds-nav-item/ds-nav-item.js';
+
+describe('ds-nav-vertical a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks with basic nav', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical>
+                <ds-nav-item value="home" label="Home" icon="home"></ds-nav-item>
+                <ds-nav-item value="settings" label="Settings" icon="settings"></ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        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 selected item', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical value="home">
+                <ds-nav-item value="home" label="Home" icon="home"></ds-nav-item>
+                <ds-nav-item value="settings" label="Settings" icon="settings"></ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        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 nested items', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical>
+                <ds-nav-item value="products" label="Products" icon="folder" expanded>
+                    <ds-nav-item value="all" label="All Products"></ds-nav-item>
+                    <ds-nav-item value="categories" label="Categories"></ds-nav-item>
+                </ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 150));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+
+});