@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,63 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-list-item.js';
+
+describe('ds-list-item', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with label', async () => {
+        container.innerHTML = '<ds-list-item label="Test Label"></ds-list-item>';
+        const el = container.querySelector('ds-list-item');
+        await new Promise(resolve => setTimeout(resolve, 0));
+        const label = el.shadowRoot.querySelector('.label');
+        expect(label.textContent.trim()).toBe('Test Label');
+    });
+
+    it('renders slot content', async () => {
+        container.innerHTML = '<ds-list-item>Slotted Content</ds-list-item>';
+        const el = container.querySelector('ds-list-item');
+        await new Promise(resolve => setTimeout(resolve, 0));
+        const slot = el.shadowRoot.querySelector('slot:not([name])');
+        expect(slot).toBeTruthy();
+    });
+
+    it('handles checkbox selection variant', async () => {
+        container.innerHTML = '<ds-list-item variant="select-checkbox" selected></ds-list-item>';
+        const el = container.querySelector('ds-list-item');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Check if checkbox exists and is checked
+        const checkbox = el.shadowRoot.querySelector('ds-checkbox');
+        expect(checkbox).toBeTruthy();
+        expect(checkbox.hasAttribute('checked')).toBe(true);
+    });
+
+    it('handles simple select variant', async () => {
+        container.innerHTML = '<ds-list-item variant="select-simple" selected></ds-list-item>';
+        const el = container.querySelector('ds-list-item');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Check if check icon exists
+        const icon = el.shadowRoot.querySelector('ds-icon[name="check"]');
+        expect(icon).toBeTruthy();
+    });
+
+    it('handles section variant styling', async () => {
+        container.innerHTML = '<ds-list-item variant="section" label="Header"></ds-list-item>';
+        const el = container.querySelector('ds-list-item');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Section variant (presentation role) should NOT have tabindex
+        expect(el.hasAttribute('tabindex')).toBe(false);
+    });
+
+
+});

package/src/ds-menu/ds-menu.js

@@ -0,0 +1,30 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Menu container component.
+ *
+ * @element ds-menu
+ */
+export class DsMenu extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      padding: 16px; /* 16px all around per request */
+      gap: 0; /* Gap removed - children handle spacing */
+      box-shadow: var(--ds-elevation-floating);
+      background-color: var(--ds-color-bg-default);
+      border-radius: var(--ds-radius-container);
+      box-sizing: border-box;
+      width: 100%; /* Fill the popup container */
+      min-width: unset; /* Allow container to dictate size */
+      overflow: hidden; /* Clip content to rounded corners */
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('ds-menu', DsMenu);

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

@@ -0,0 +1,120 @@
+import { html } from 'lit';
+import './ds-menu.js';
+import '../ds-menu-group/ds-menu-group.js';
+import '../ds-list-item/ds-list-item.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-avatar/ds-avatar.js';
+
+export default {
+    title: 'Components/Menu',
+    component: 'ds-menu',
+    argTypes: {
+        padding: { control: 'text' }
+    },
+    decorators: [
+        (story) => html`
+            <div style="padding: 24px; min-height: 400px; display: flex; align-items: flex-start; justify-content: flex-start;">
+                <div style="width: 280px;">
+                    ${story()}
+                </div>
+            </div>
+        `
+    ]
+};
+
+export const SimpleActions = {
+    render: () => html`
+        <ds-menu>
+            <ds-list-item label="Edit Profile">
+                <ds-icon slot="start" name="edit" size="sm"></ds-icon>
+            </ds-list-item>
+            <ds-list-item label="Preferences">
+                <ds-icon slot="start" name="settings" size="sm"></ds-icon>
+            </ds-list-item>
+            <ds-list-item label="Sign Out" variant="action" additional-text="Log out of your account">
+                <ds-icon slot="start" name="logout" size="sm"></ds-icon>
+            </ds-list-item>
+        </ds-menu>
+    `
+};
+
+export const GroupedActions = {
+    render: () => html`
+        <ds-menu>
+            <!-- First section: hide divider to avoid line at top of menu -->
+            <ds-list-item variant="section" label="Account" hide-divider></ds-list-item>
+            <ds-menu-group>
+                <ds-list-item label="Profile">
+                    <ds-avatar slot="start" size="sm" initials="MS"></ds-avatar>
+                </ds-list-item>
+                <ds-list-item label="Billing"></ds-list-item>
+            </ds-menu-group>
+            
+            <ds-list-item variant="section" label="Support"></ds-list-item>
+            <ds-menu-group>
+                <ds-list-item label="Help Center"></ds-list-item>
+                <ds-list-item label="Contact Us"></ds-list-item>
+            </ds-menu-group>
+        </ds-menu>
+    `
+};
+
+export const SingleSelect = {
+    render: () => html`
+        <ds-menu>
+            <ds-list-item variant="section" label="Sort By" hide-divider></ds-list-item>
+            <ds-menu-group type="single">
+                <ds-list-item label="Newest First" variant="select-simple" selected></ds-list-item>
+                <ds-list-item label="Oldest First" variant="select-simple"></ds-list-item>
+                <ds-list-item label="Alphabetical" variant="select-simple"></ds-list-item>
+            </ds-menu-group>
+        </ds-menu>
+    `
+};
+
+export const MultiSelect = {
+    render: () => html`
+        <ds-menu>
+            <ds-list-item variant="section" label="Filter Status" hide-divider></ds-list-item>
+            <ds-menu-group type="multiple">
+                <ds-list-item label="Completed" variant="select-simple" selected></ds-list-item>
+                <ds-list-item label="Pending" variant="select-simple" selected></ds-list-item>
+                <ds-list-item label="Archived" variant="select-simple"></ds-list-item>
+            </ds-menu-group>
+        </ds-menu>
+    `
+};
+
+export const MixedComplex = {
+    render: () => html`
+        <ds-menu>
+            <ds-menu-group>
+                <ds-list-item label="View Details">
+                    <ds-icon slot="start" name="visibility" size="sm"></ds-icon>
+                </ds-list-item>
+            </ds-menu-group>
+
+            <!-- Section Title (with default divider above) -->
+            <ds-list-item variant="section" label="Display Options"></ds-list-item>
+            
+            <ds-menu-group type="single">
+                <ds-list-item label="Compact View" variant="select-simple"></ds-list-item>
+                <ds-list-item label="Comfortable View" variant="select-simple" selected></ds-list-item>
+            </ds-menu-group>
+
+            <ds-list-item variant="section" label="Visibility"></ds-list-item>
+
+            <ds-menu-group type="multiple">
+                <ds-list-item label="Show Hidden Files" variant="select-simple"></ds-list-item>
+                <ds-list-item label="Show Extensions" variant="select-simple"></ds-list-item>
+            </ds-menu-group>
+            
+            <!-- Visual Separator only (Hide Label) -->
+            <ds-list-item variant="section" hide-label></ds-list-item>
+            
+            <ds-list-item label="Delete" style="--ds-color-text-default: var(--ds-color-text-danger);">
+                <ds-icon slot="start" name="delete" size="sm" style="color: var(--ds-color-icon-danger);"></ds-icon>
+            </ds-list-item>
+        </ds-menu>
+    `
+};

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

@@ -0,0 +1,123 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import '../ds-menu/ds-menu.js';
+import '../ds-menu-group/ds-menu-group.js';
+import '../ds-list-item/ds-list-item.js';
+
+describe('DsMenu', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with correct default styles', async () => {
+        container.innerHTML = '<ds-menu>Content</ds-menu>';
+        const el = container.querySelector('ds-menu');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const style = getComputedStyle(el);
+        expect(style.display).toBe('flex');
+        expect(style.flexDirection).toBe('column');
+        expect(style.padding).toBe('16px');
+        expect(style.gap).toBe('0px');
+    });
+});
+
+describe('DsMenuGroup', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('handles single selection (radio behavior)', async () => {
+        container.innerHTML = `
+            <ds-menu>
+                <ds-menu-group type="single">
+                    <ds-list-item id="item1" variant="select-simple" selected></ds-list-item>
+                    <ds-list-item id="item2" variant="select-simple"></ds-list-item>
+                </ds-menu-group>
+            </ds-menu>
+        `;
+
+        const group = container.querySelector('ds-menu-group');
+        const item1 = container.querySelector('#item1');
+        const item2 = container.querySelector('#item2');
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(item1.selected).toBe(true);
+        expect(item2.selected).toBe(false);
+
+        // click item2
+        item2.click(); // Group listens for click bubbling
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(item1.selected).toBe(false);
+        expect(item2.selected).toBe(true);
+    });
+
+    it('handles multiple selection (checkbox behavior)', async () => {
+        container.innerHTML = `
+            <ds-menu>
+                <ds-menu-group type="multiple">
+                    <ds-list-item id="item1" variant="select-simple"></ds-list-item>
+                    <ds-list-item id="item2" variant="select-simple"></ds-list-item>
+                </ds-menu-group>
+            </ds-menu>
+        `;
+
+        const item1 = container.querySelector('#item1');
+        const item2 = container.querySelector('#item2');
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(item1.selected).toBe(false);
+        expect(item2.selected).toBe(false);
+
+        item1.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(item1.selected).toBe(true);
+        expect(item2.selected).toBe(false);
+
+        item2.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(item1.selected).toBe(true);
+        expect(item2.selected).toBe(true);
+
+        item1.click(); // Toggle off
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(item1.selected).toBe(false);
+        expect(item2.selected).toBe(true);
+    });
+
+    it('ignores clicks on disabled items', async () => {
+        container.innerHTML = `
+            <ds-menu>
+                <ds-menu-group type="single">
+                    <ds-list-item id="item1" variant="select-simple"></ds-list-item>
+                    <ds-list-item id="item2" variant="select-simple" disabled></ds-list-item>
+                </ds-menu-group>
+            </ds-menu>
+        `;
+
+        const item2 = container.querySelector('#item2');
+        item2.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(item2.selected).toBe(false);
+    });
+});

package/src/ds-menu-group/ds-menu-group.js

@@ -0,0 +1,101 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Logical group for menu items.
+ *
+ * @element ds-menu-group
+ * @prop {string} type - 'action' | 'single' | 'multiple'
+ * @prop {string} variant - Optional variant
+ */
+export class DsMenuGroup extends LitElement {
+    static properties = {
+        type: { type: String },
+        variant: { type: String }
+    };
+
+    static styles = css`
+    :host {
+      display: block;
+      padding: 8px 0; /* Standard vertical spacing for a group */
+    }
+  `;
+
+    constructor() {
+        super();
+        this.type = 'action';
+    }
+
+    /* Keep logic methods if they are useful for other menus, or revert them too? 
+       User said "voltem ao plano inicial". 
+       I will keep the logic (variant handling, click handling) as that's arguably part of the "component" 
+       but revert the Render/Styles to simple.
+    */
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._handleClick);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this._handleClick);
+    }
+
+    _handleSlotChange() {
+        this._updateChildrenVariants();
+    }
+
+    updated(changedProperties) {
+        if (changedProperties.has('variant')) {
+            this._updateChildrenVariants();
+        }
+    }
+
+    _updateChildrenVariants() {
+        if (!this.variant) return;
+        const slot = this.shadowRoot.querySelector('slot');
+        if (!slot) return;
+        const nodes = slot.assignedElements({ flatten: true });
+        nodes.forEach(node => {
+            if (node.localName === 'ds-list-item') {
+                const currentVariant = node.getAttribute('variant');
+                if (!currentVariant || currentVariant === 'action') {
+                    node.setAttribute('variant', this.variant);
+                }
+            }
+        });
+    }
+
+    _handleClick(e) {
+        if (this.type === 'action') return;
+        const path = e.composedPath();
+        const item = path.find(el => el.localName === 'ds-list-item');
+        if (!item || item.hasAttribute('disabled') || item.getAttribute('variant') === 'section') return;
+
+        if (this.type === 'single') {
+            this._handleSingleSelect(item);
+        } else if (this.type === 'multiple') {
+            this._handleMultiSelect(item);
+        }
+    }
+
+    _handleSingleSelect(selectedItem) {
+        selectedItem.selected = true;
+        const slot = this.shadowRoot.querySelector('slot');
+        const nodes = slot.assignedNodes({ flatten: true });
+        nodes.forEach(node => {
+            if (node.localName === 'ds-list-item' && node !== selectedItem) {
+                node.selected = false;
+            }
+        });
+    }
+
+    _handleMultiSelect(item) {
+        item.selected = !item.selected;
+    }
+
+    render() {
+        return html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+    }
+}
+
+customElements.define('ds-menu-group', DsMenuGroup);

package/src/ds-menu-group/ds-menu-group.stories.js

@@ -0,0 +1,99 @@
+import { html } from 'lit';
+import './ds-menu-group.js';
+import '../ds-list-item/ds-list-item.js';
+
+export default {
+    title: 'Components/Menu Group',
+    component: 'ds-menu-group',
+    argTypes: {
+        type: {
+            control: 'radio',
+            options: ['action', 'single', 'multiple'],
+            description: 'Defines the selection logic for the group.'
+        },
+        variant: {
+            control: 'text',
+            description: 'Optional: Overrides the variant of all child items (e.g. "select-checkbox").'
+        }
+    },
+    decorators: [
+        (story) => html`
+            <div style="padding: 24px; min-height: 400px; display: flex; justify-content: flex-start; align-items: flex-start;">
+                <div style="width: 280px; display: flex; flex-direction: column; gap: 4px;">
+                    ${story()}
+                </div>
+            </div>
+        `
+    ]
+};
+
+const Template = (args) => html`
+    <ds-menu-group .type=${args.type} .variant=${args.variant}>
+        <ds-list-item label="Option 1" selected></ds-list-item>
+        <ds-list-item label="Option 2"></ds-list-item>
+        <ds-list-item label="Option 3"></ds-list-item>
+    </ds-menu-group>
+`;
+
+export const SingleSelect = {
+    render: Template,
+    args: {
+        type: 'single',
+        variant: 'select-simple'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use `type="single"` for radio-button-like behavior within the group.'
+            }
+        }
+    }
+};
+
+export const MultiSelect = {
+    render: Template,
+    args: {
+        type: 'multiple',
+        variant: 'select-simple'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use `type="multiple"` for independent toggling of items.'
+            }
+        }
+    }
+};
+
+export const ActionGroup = {
+    render: () => html`
+        <ds-menu-group type="action">
+            <ds-list-item label="Action 1" variant="action"></ds-list-item>
+            <ds-list-item label="Action 2" variant="action"></ds-list-item>
+        </ds-menu-group>
+    `,
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use `type="action"` (default) for grouping simple logical actions without selection state.'
+            }
+        }
+    }
+};
+
+export const CheckboxGroup = {
+    render: () => html`
+        <ds-menu-group type="multiple" variant="select-checkbox">
+            <ds-list-item label="Checkbox 1" selected></ds-list-item>
+            <ds-list-item label="Checkbox 2"></ds-list-item>
+            <ds-list-item label="Checkbox 3"></ds-list-item>
+        </ds-menu-group>
+    `,
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use `variant="select-checkbox"` on the `ds-menu-group` to automatically style all children as checkboxes. This demonstrates the **cascading variant** feature.'
+            }
+        }
+    }
+};

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

@@ -0,0 +1,91 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-nav-item.js';
+
+describe('ds-nav-item a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks for stand-alone item', async () => {
+        container.innerHTML = '<ds-nav-item label="Home" icon="home"></ds-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 for selected item', async () => {
+        container.innerHTML = '<ds-nav-item label="Dashboard" icon="apps" selected></ds-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 for parent item', async () => {
+        container.innerHTML = `
+            <ds-nav-item label="Products" icon="folder">
+                <ds-nav-item label="All Products"></ds-nav-item>
+                <ds-nav-item label="Categories"></ds-nav-item>
+            </ds-nav-item>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 150));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for expanded parent', async () => {
+        container.innerHTML = `
+            <ds-nav-item label="Products" icon="folder" expanded>
+                <ds-nav-item label="All Products"></ds-nav-item>
+                <ds-nav-item label="Categories"></ds-nav-item>
+            </ds-nav-item>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 150));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for link item', async () => {
+        container.innerHTML = '<ds-nav-item label="External Link" href="/external"></ds-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 without icon', async () => {
+        container.innerHTML = '<ds-nav-item label="Text Only"></ds-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);
+    });
+});