@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,173 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-nav-item/ds-nav-item.js';
+
+/**
+ * Vertical navigation container component
+ * 
+ * @element ds-nav-vertical
+ * 
+ * @prop {string} value - Currently selected item value (optional, for programmatic control)
+ * 
+ * @slot - Default slot for ds-nav-item elements
+ * 
+ * @fires ds-nav-change - Fired when selection changes, detail includes { value, label, href, item }
+ * 
+ * @csspart container - The main container element
+ */
+export class DsNavVertical extends LitElement {
+    static properties = {
+        value: { type: String, reflect: true }
+    };
+
+    static styles = css`
+        :host {
+            display: block;
+            box-sizing: border-box;
+            padding: var(--ds-space-lg) var(--ds-space-sm); /* 16px 8px */
+            background-color: var(--ds-color-bg-panel-default);
+            height: 100%;
+        }
+
+        nav {
+            display: flex;
+            flex-direction: column;
+            gap: var(--ds-space-sm); /* 8px */
+            height: 100%;
+            box-sizing: border-box;
+        }
+    `;
+
+    constructor() {
+        super();
+        this.value = '';
+        this._selectedItem = null;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Listen for selection events from nav items
+        this.addEventListener('ds-nav-select', this._handleNavSelect);
+
+        // Initial setup after render
+        this.updateComplete.then(() => {
+            this._updateLevels();
+            this._syncSelection();
+        });
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('ds-nav-select', this._handleNavSelect);
+    }
+
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            this._syncSelection();
+        }
+    }
+
+    /**
+     * Handle selection event from nav items
+     */
+    _handleNavSelect = (e) => {
+        const { value, label, href, item } = e.detail;
+
+        // Prevent event from bubbling further (we'll dispatch our own)
+        e.stopPropagation();
+
+        // Deselect previous item
+        if (this._selectedItem && this._selectedItem !== item) {
+            this._selectedItem.selected = false;
+        }
+
+        // Select new item
+        item.selected = true;
+        this._selectedItem = item;
+        this.value = value;
+
+        // Update parent bold states
+        this._updateParentStates(item);
+
+        // Dispatch change event
+        this.dispatchEvent(new CustomEvent('ds-nav-change', {
+            detail: { value, label, href, item },
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    /**
+     * Sync selection state based on value prop
+     */
+    _syncSelection() {
+        if (!this.value) return;
+
+        const items = this._getAllItems();
+        items.forEach(item => {
+            if (item.value === this.value) {
+                item.selected = true;
+                this._selectedItem = item;
+                this._updateParentStates(item);
+            } else {
+                item.selected = false;
+            }
+        });
+    }
+
+    /**
+     * Update level property on all nested items
+     */
+    _updateLevels() {
+        const processItems = (parent, level) => {
+            const children = parent.querySelectorAll(':scope > ds-nav-item');
+            children.forEach(item => {
+                item.level = level;
+                // Process children of this item
+                processItems(item, level + 1);
+            });
+        };
+
+        // Start with direct children at level 0
+        processItems(this, 0);
+    }
+
+    /**
+     * Propagate child-selected state to parent items
+     */
+    _updateParentStates(selectedItem) {
+        const allItems = this._getAllItems();
+        // Clear previous state
+        allItems.forEach(item => { item.childSelected = false; });
+
+        if (!selectedItem) return;
+
+        // Traverse up
+        let parent = selectedItem.parentElement;
+        while (parent && parent.tagName === 'DS-NAV-ITEM') {
+            parent.childSelected = true;
+            parent = parent.parentElement;
+        }
+    }
+
+    /**
+     * Get all ds-nav-item descendants
+     */
+    _getAllItems() {
+        return Array.from(this.querySelectorAll('ds-nav-item'));
+    }
+
+    _handleSlotChange() {
+        this._updateLevels();
+        this._syncSelection();
+    }
+
+    render() {
+        return html`
+            <nav part="container" role="navigation" aria-label="Main navigation">
+                <slot @slotchange="${this._handleSlotChange}"></slot>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('ds-nav-vertical', DsNavVertical);

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

@@ -0,0 +1,124 @@
+import { html } from 'lit';
+import './ds-nav-vertical.js';
+import '../ds-nav-item/ds-nav-item.js';
+
+export default {
+    title: 'Components/Nav Vertical',
+    component: 'ds-nav-vertical',
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'Currently selected item value'
+        }
+    }
+};
+
+/**
+ * Basic navigation with items
+ */
+export const Default = {
+    render: () => html`
+        <ds-nav-vertical style="width: 280px;">
+            <ds-nav-item value="dashboard" label="Dashboard" icon="apps"></ds-nav-item>
+            <ds-nav-item value="orders" label="Orders" icon="local-shipping"></ds-nav-item>
+            <ds-nav-item value="customers" label="Customers" icon="groups"></ds-nav-item>
+            <ds-nav-item value="settings" label="Settings" icon="settings"></ds-nav-item>
+        </ds-nav-vertical>
+    `
+};
+
+/**
+ * Navigation with pre-selected item
+ */
+export const WithSelectedItem = {
+    render: () => html`
+        <ds-nav-vertical value="dashboard" style="width: 280px;">
+            <ds-nav-item value="dashboard" label="Dashboard" icon="apps"></ds-nav-item>
+            <ds-nav-item value="orders" label="Orders" icon="local-shipping"></ds-nav-item>
+            <ds-nav-item value="customers" label="Customers" icon="groups"></ds-nav-item>
+            <ds-nav-item value="settings" label="Settings" icon="settings"></ds-nav-item>
+        </ds-nav-vertical>
+    `
+};
+
+/**
+ * Navigation with nested/collapsible items
+ */
+export const WithNestedItems = {
+    render: () => html`
+        <ds-nav-vertical value="all-products" style="width: 280px;">
+            <ds-nav-item value="dashboard" label="Dashboard" icon="apps"></ds-nav-item>
+            <ds-nav-item value="products" label="Products" icon="folder" expanded>
+                <ds-nav-item value="all-products" label="All Products"></ds-nav-item>
+                <ds-nav-item value="categories" label="Categories"></ds-nav-item>
+                <ds-nav-item value="inventory" label="Inventory"></ds-nav-item>
+            </ds-nav-item>
+            <ds-nav-item value="orders" label="Orders" icon="local-shipping"></ds-nav-item>
+        </ds-nav-vertical>
+    `
+};
+
+/**
+ * Navigation with multiple levels of nesting
+ */
+export const DeepNesting = {
+    render: () => html`
+        <ds-nav-vertical style="width: 280px;">
+            <ds-nav-item value="home" label="Home" icon="home"></ds-nav-item>
+            <ds-nav-item value="level-1" label="Level 1" icon="folder" expanded>
+                <ds-nav-item value="level-2a" label="Level 2A" expanded>
+                    <ds-nav-item value="level-3" label="Level 3"></ds-nav-item>
+                </ds-nav-item>
+                <ds-nav-item value="level-2b" label="Level 2B"></ds-nav-item>
+            </ds-nav-item>
+        </ds-nav-vertical>
+    `
+};
+
+/**
+ * Full nav vertical example (replaces Full Sidebar)
+ */
+export const FullNavVertical = {
+    render: () => html`
+        <div style="width: 280px; height: 600px; border-right: 1px solid var(--ds-color-border-default);">
+            <ds-nav-vertical value="dashboard">
+                <ds-nav-item value="dashboard" label="Dashboard" icon="apps"></ds-nav-item>
+                <ds-nav-item value="products" label="Products" icon="folder" expanded>
+                    <ds-nav-item value="all-products" label="All Products"></ds-nav-item>
+                    <ds-nav-item value="categories" label="Categories"></ds-nav-item>
+                    <ds-nav-item value="inventory" label="Inventory"></ds-nav-item>
+                </ds-nav-item>
+                <ds-nav-item value="orders" label="Orders" icon="local-shipping"></ds-nav-item>
+                <ds-nav-item value="customers" label="Customers" icon="groups"></ds-nav-item>
+                <ds-nav-item value="analytics" label="Analytics" icon="bar-chart" expanded>
+                    <ds-nav-item value="overview" label="Overview"></ds-nav-item>
+                    <ds-nav-item value="reports" label="Reports"></ds-nav-item>
+                </ds-nav-item>
+                <ds-nav-item value="settings" label="Settings" icon="settings"></ds-nav-item>
+            </ds-nav-vertical>
+        </div>
+    `
+};
+
+/**
+ * Navigation with event handling
+ */
+export const WithEventHandling = {
+    render: () => html`
+        <div>
+            <ds-nav-vertical 
+                style="width: 280px;"
+                @ds-nav-change="${(e) => {
+            document.getElementById('nav-output').textContent =
+                'Selected: ' + e.detail.value + ' (' + e.detail.label + ')';
+        }}"
+            >
+                <ds-nav-item value="home" label="Home" icon="home"></ds-nav-item>
+                <ds-nav-item value="about" label="About" icon="info"></ds-nav-item>
+                <ds-nav-item value="contact" label="Contact" icon="groups"></ds-nav-item>
+            </ds-nav-vertical>
+            <p id="nav-output" style="margin-top: 16px; color: var(--ds-color-text-default);">Click an item to see the event</p>
+        </div>
+    `
+};

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

@@ -0,0 +1,176 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-nav-vertical.js';
+import '../ds-nav-item/ds-nav-item.js';
+
+describe('ds-nav-vertical', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-nav-vertical></ds-nav-vertical>';
+        const element = container.querySelector('ds-nav-vertical');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.value).toBe('');
+    });
+
+    it('renders slotted nav items', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical>
+                <ds-nav-item value="home" label="Home"></ds-nav-item>
+                <ds-nav-item value="about" label="About"></ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const items = container.querySelectorAll('ds-nav-item');
+        expect(items.length).toBe(2);
+    });
+
+    it('selects item on click and updates value', 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>
+        `;
+        const nav = container.querySelector('ds-nav-vertical');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const homeItem = container.querySelector('ds-nav-item[value="home"]');
+        const button = homeItem.shadowRoot.querySelector('.nav-item');
+        button.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(homeItem.selected).toBe(true);
+        expect(nav.value).toBe('home');
+    });
+
+    it('deselects previous item when new item is selected', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical>
+                <ds-nav-item value="home" label="Home"></ds-nav-item>
+                <ds-nav-item value="settings" label="Settings"></ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const homeItem = container.querySelector('ds-nav-item[value="home"]');
+        const settingsItem = container.querySelector('ds-nav-item[value="settings"]');
+
+        // Click home
+        homeItem.shadowRoot.querySelector('.nav-item').click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(homeItem.selected).toBe(true);
+
+        // Click settings
+        settingsItem.shadowRoot.querySelector('.nav-item').click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(settingsItem.selected).toBe(true);
+        expect(homeItem.selected).toBe(false);
+    });
+
+    it('dispatches ds-nav-change event on selection', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical>
+                <ds-nav-item value="home" label="Home"></ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        const nav = container.querySelector('ds-nav-vertical');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const changeSpy = vi.fn();
+        nav.addEventListener('ds-nav-change', changeSpy);
+
+        const homeItem = container.querySelector('ds-nav-item[value="home"]');
+        homeItem.shadowRoot.querySelector('.nav-item').click();
+
+        expect(changeSpy).toHaveBeenCalledTimes(1);
+        expect(changeSpy.mock.calls[0][0].detail.value).toBe('home');
+        expect(changeSpy.mock.calls[0][0].detail.label).toBe('Home');
+    });
+
+    it('sets initial selection based on value prop', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical value="settings">
+                <ds-nav-item value="home" label="Home"></ds-nav-item>
+                <ds-nav-item value="settings" label="Settings"></ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const settingsItem = container.querySelector('ds-nav-item[value="settings"]');
+        expect(settingsItem.selected).toBe(true);
+    });
+
+    it('propagates level to nested items', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical>
+                <ds-nav-item value="parent" label="Parent">
+                    <ds-nav-item value="child" label="Child"></ds-nav-item>
+                </ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 150));
+
+        const parent = container.querySelector('ds-nav-item[value="parent"]');
+        const child = container.querySelector('ds-nav-item[value="child"]');
+
+        expect(parent.level).toBe(0);
+        expect(child.level).toBe(1);
+    });
+
+    it('propagates child-selected state to parent items', async () => {
+        container.innerHTML = `
+            <ds-nav-vertical>
+                <ds-nav-item value="parent" label="Parent">
+                    <ds-nav-item value="child" label="Child">
+                        <ds-nav-item value="grandchild" label="Grandchild"></ds-nav-item>
+                    </ds-nav-item>
+                </ds-nav-item>
+            </ds-nav-vertical>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 150));
+
+        const parent = container.querySelector('ds-nav-item[value="parent"]');
+        const child = container.querySelector('ds-nav-item[value="child"]');
+        const grandchild = container.querySelector('ds-nav-item[value="grandchild"]');
+
+        // Select grandchild
+        grandchild.shadowRoot.querySelector('.nav-item').click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(grandchild.selected).toBe(true);
+        expect(child.childSelected).toBe(true);
+        expect(parent.childSelected).toBe(true);
+
+        // Click child (parent item): should only toggle, not change selection
+        const childButton = child.shadowRoot.querySelector('.nav-item');
+        const initialExpanded = child.expanded;
+        childButton.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(child.expanded).toBe(!initialExpanded);
+        expect(child.selected).toBe(false); // Parent items with children aren't selectable via click
+        expect(grandchild.selected).toBe(true); // Grandchild remains selected
+        expect(child.childSelected).toBe(true); // Still true as descendant is selected
+    });
+
+    it('has navigation role for accessibility', async () => {
+        container.innerHTML = '<ds-nav-vertical></ds-nav-vertical>';
+        const nav = container.querySelector('ds-nav-vertical');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const navElement = nav.shadowRoot.querySelector('nav');
+        expect(navElement.getAttribute('role')).toBe('navigation');
+    });
+});

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

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

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-pagination.js';
+
+describe('ds-pagination a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks for default variant', async () => {
+        container.innerHTML = '<ds-pagination total="5" current="3"></ds-pagination>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const options = {
+            rules: {
+                'color-contrast': { enabled: false }
+            }
+        };
+
+        const results = await axe.run(container, options);
+        if (results.violations.length > 0) {
+            console.log('Violations for default variant:', JSON.stringify(results.violations, null, 2));
+        }
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for dot variant', async () => {
+        container.innerHTML = '<ds-pagination variant="dot" total="5" current="3"></ds-pagination>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const options = {
+            rules: {
+                'color-contrast': { enabled: false }
+            }
+        };
+
+        const results = await axe.run(container, options);
+        if (results.violations.length > 0) {
+            console.log('Violations for dot variant:', JSON.stringify(results.violations, null, 2));
+        }
+        expect(results.violations).toHaveLength(0);
+    });
+});