@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,259 @@
+import { html, nothing } from 'lit';
+import './ds-dropdown.js';
+import '../ds-list-item/ds-list-item.js';
+
+export default {
+  title: 'Components/Dropdown',
+  component: 'ds-dropdown',
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    info: { control: 'text' },
+    placeholder: { control: 'text' },
+    value: { control: 'text' },
+    helper: { control: 'text' },
+    validationStatus: {
+      control: 'select',
+      options: ['', 'error', 'success']
+    },
+    validationMessage: { control: 'text' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    clearable: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    selectAll: { control: 'boolean' },
+    labelPosition: {
+      control: 'select',
+      options: ['top', 'inline-start']
+    },
+    labelWidth: { control: 'text' }
+  },
+  args: {
+    label: 'Country',
+    info: '',
+    placeholder: 'Select a country...',
+    value: '',
+    helper: '',
+    validationStatus: '',
+    validationMessage: '',
+    disabled: false,
+    required: false,
+    clearable: false,
+    multiple: false,
+    selectAll: false,
+    labelPosition: 'top',
+    labelWidth: ''
+  },
+  decorators: [
+    (story) => html`
+            <div style="min-height: 400px; padding: 20px;">
+                ${story()}
+            </div>
+        `
+  ]
+};
+
+const Template = (args) => html`
+    <ds-dropdown
+      label="${args.label}"
+      info="${args.info || nothing}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      helper="${args.helper || nothing}"
+      validation-status="${args.validationStatus || nothing}"
+      validation-message="${args.validationMessage || nothing}"
+      ?disabled="${args.disabled}"
+      ?required="${args.required}"
+      ?clearable="${args.clearable}"
+      ?multiple="${args.multiple}"
+      ?select-all="${args.selectAll}"
+      label-position="${args.labelPosition || nothing}"
+      label-width="${args.labelWidth || nothing}"
+    >
+      <ds-list-item value="pt" label="Portugal"></ds-list-item>
+      <ds-list-item value="es" label="Spain"></ds-list-item>
+      <ds-list-item value="fr" label="France"></ds-list-item>
+      <ds-list-item value="de" label="Germany"></ds-list-item>
+      <ds-list-item value="it" label="Italy"></ds-list-item>
+    </ds-dropdown>
+`;
+
+export const Default = {
+  render: Template
+};
+
+export const InlineLabel = {
+  render: Template,
+  args: {
+    label: 'Select Region',
+    labelPosition: 'inline-start',
+    labelWidth: '150px',
+    placeholder: 'Select a region...'
+  }
+};
+
+export const MultiSelect = {
+  render: Template,
+  args: {
+    label: 'Countries (Multi)',
+    multiple: true,
+    placeholder: 'Select countries...'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use `multiple` prop to allow selecting multiple options. The component automatically switches to checkbox variants.'
+      }
+    }
+  }
+};
+
+export const SelectAll = {
+  render: Template,
+  args: {
+    label: 'Countries (Select All)',
+    multiple: true,
+    selectAll: true,
+    placeholder: 'Select countries...'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use `select-all` prop in combination with `multiple` to verify easy bulk selection.'
+      }
+    }
+  }
+};
+
+export const WithValue = {
+  args: {
+    label: 'Language',
+    value: 'en',
+    placeholder: 'Select language...'
+  },
+  render: (args) => html`
+    <ds-dropdown
+      label="${args.label}"
+      value="${args.value}"
+      placeholder="${args.placeholder}"
+      helper="${args.helper || nothing}"
+      validation-status="${args.validationStatus || nothing}"
+      validation-message="${args.validationMessage || nothing}"
+      ?disabled="${args.disabled}"
+      ?required="${args.required}"
+    >
+      <ds-list-item value="pt" label="Português"></ds-list-item>
+      <ds-list-item value="en" label="English"></ds-list-item>
+      <ds-list-item value="es" label="Español"></ds-list-item>
+      <ds-list-item value="fr" label="Français"></ds-list-item>
+    </ds-dropdown>
+  `
+};
+
+export const WithError = {
+  args: {
+    label: 'Priority',
+    validationStatus: 'error',
+    validationMessage: 'Please select a priority',
+    required: true
+  },
+  render: (args) => html`
+    <ds-dropdown
+      label="${args.label}"
+      validation-status="${args.validationStatus}"
+      validation-message="${args.validationMessage}"
+      helper="${args.helper || nothing}"
+      ?required="${args.required}"
+      ?disabled="${args.disabled}"
+    >
+      <ds-list-item value="low" label="Low"></ds-list-item>
+      <ds-list-item value="medium" label="Medium"></ds-list-item>
+      <ds-list-item value="high" label="High"></ds-list-item>
+    </ds-dropdown>
+  `
+};
+
+export const Disabled = {
+  args: {
+    label: 'Status',
+    value: 'active',
+    disabled: true
+  },
+  render: (args) => html`
+    <ds-dropdown
+      label="${args.label}"
+      value="${args.value}"
+      helper="${args.helper || nothing}"
+      ?disabled="${args.disabled}"
+    >
+      <ds-list-item value="active" label="Active"></ds-list-item>
+      <ds-list-item value="inactive" label="Inactive"></ds-list-item>
+    </ds-dropdown>
+  `
+};
+
+export const LargeMultiSelect = {
+  args: {
+    label: 'Large Selection (60 items)',
+    multiple: true,
+    selectAll: true,
+    placeholder: 'Scroll to see all...'
+  },
+  render: (args) => html`
+    <ds-dropdown
+      label="${args.label}"
+      info="${args.info || nothing}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      helper="${args.helper || nothing}"
+      validation-status="${args.validationStatus || nothing}"
+      validation-message="${args.validationMessage || nothing}"
+      ?disabled="${args.disabled}"
+      ?required="${args.required}"
+      ?clearable="${args.clearable}"
+      ?multiple="${args.multiple}"
+      ?select-all="${args.selectAll}"
+    >
+      ${Array.from({ length: 60 }).map((_, i) => html`
+        <ds-list-item value="item-${i}" label="Option ${i + 1}"></ds-list-item>
+      `)}
+    </ds-dropdown>
+  `
+};
+
+export const LargeGrouped = {
+  args: {
+    label: 'Grouped Large Selection',
+    multiple: true,
+    selectAll: true,
+    placeholder: 'Grouped options...'
+  },
+  render: (args) => html`
+    <ds-dropdown
+      label="${args.label}"
+      info="${args.info || nothing}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      helper="${args.helper || nothing}"
+      validation-status="${args.validationStatus || nothing}"
+      validation-message="${args.validationMessage || nothing}"
+      ?disabled="${args.disabled}"
+      ?required="${args.required}"
+      ?clearable="${args.clearable}"
+      ?multiple="${args.multiple}"
+      ?select-all="${args.selectAll}"
+    >
+      <ds-list-item variant="section" label="Primary Options"></ds-list-item>
+      ${Array.from({ length: 25 }).map((_, i) => html`
+        <ds-list-item value="opt-a-${i}" label="Primary ${i + 1}"></ds-list-item>
+      `)}
+      
+      <ds-list-item variant="section" label="Secondary Options"></ds-list-item>
+      ${Array.from({ length: 25 }).map((_, i) => html`
+        <ds-list-item value="opt-b-${i}" label="Secondary ${i + 1}"></ds-list-item>
+      `)}
+    </ds-dropdown>
+  `
+};
+
+

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

@@ -0,0 +1,268 @@
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-dropdown.js';
+
+describe('ds-dropdown', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('renders with default values', async () => {
+    container.innerHTML = '<ds-dropdown></ds-dropdown>';
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(element.label).toBe('');
+    expect(element.value).toBe('');
+    expect(element.placeholder).toBe('Select...'); // Changed default placeholder
+    expect(element.disabled).toBe(false);
+  });
+
+  it('renders label when provided', async () => {
+    container.innerHTML = '<ds-dropdown label="Country"></ds-dropdown>';
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const label = element.shadowRoot.querySelector('label');
+    expect(label.textContent).toBe('Country');
+  });
+
+  it('renders placeholder when no value selected', async () => {
+    container.innerHTML = '<ds-dropdown placeholder="Choose..."></ds-dropdown>';
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const valueText = element.shadowRoot.querySelector('.value-text.placeholder');
+    expect(valueText.textContent.trim()).toBe('Choose...');
+  });
+
+  it('displays selected value from ds-list-item', async () => {
+    container.innerHTML = `
+      <ds-dropdown>
+        <ds-list-item value="pt" label="Portugal"></ds-list-item>
+        <ds-list-item value="es" label="Spain" selected></ds-list-item>
+      </ds-dropdown>
+    `;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 100)); // Wait for slotchange and sync
+
+    expect(element.value).toBe('es');
+    const valueText = element.shadowRoot.querySelector('.value-text');
+    expect(valueText.textContent.trim()).toBe('Spain');
+  });
+
+  it('dispatches change event on selection', async () => {
+    container.innerHTML = `
+      <ds-dropdown>
+        <ds-list-item value="pt" label="Portugal"></ds-list-item>
+        <ds-list-item value="es" label="Spain"></ds-list-item>
+      </ds-dropdown>
+    `;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const changeSpy = vi.fn();
+    element.addEventListener('change', changeSpy);
+
+    // Simulate clicking an item
+    const items = element.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
+    const itemToSelect = items.find(el => el.getAttribute('value') === 'pt');
+
+    // Create a mock event bubbling up from ds-list-item -> ds-menu-group -> dropdown
+    // But since logic is in ds-menu-group, we might need to simulate click on item which propagates to group
+
+    // To properly test integration, we should click the item.
+    itemToSelect.click();
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(changeSpy).toHaveBeenCalledTimes(1);
+    expect(changeSpy.mock.calls[0][0].detail.value).toBe('pt');
+    expect(element.value).toBe('pt');
+  });
+
+  it('disables trigger when disabled', async () => {
+    container.innerHTML = '<ds-dropdown disabled></ds-dropdown>';
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const trigger = element.shadowRoot.querySelector('.trigger');
+    expect(trigger.getAttribute('tabindex')).toBe('-1');
+    expect(trigger.classList.contains('disabled')).toBeFalsy(); // Trigger style depends on :host([disabled])
+  });
+
+  it('shows clear button when clearable and has value', async () => {
+    container.innerHTML = `
+        <ds-dropdown clearable>
+            <ds-list-item value="pt" label="Portugal" selected></ds-list-item>
+        </ds-dropdown>
+    `;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Should be shown because we have a value
+    const clearButton = element.shadowRoot.querySelector('ds-icon-button[icon="close"]');
+    expect(clearButton).toBeTruthy();
+  });
+
+  it('clears value when clear button is clicked', async () => {
+    container.innerHTML = `
+        <ds-dropdown clearable>
+            <ds-list-item value="pt" label="Portugal" selected></ds-list-item>
+        </ds-dropdown>
+    `;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const clearButton = element.shadowRoot.querySelector('ds-icon-button[icon="close"]');
+    clearButton.click();
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(element.value).toBe('');
+    const valueText = element.shadowRoot.querySelector('.value-text.placeholder');
+    expect(valueText).toBeTruthy();
+
+    // Validate that the item is no longer selected
+    const items = element.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
+    expect(items[0].hasAttribute('selected')).toBe(false);
+  });
+
+  it('shows indeterminate state on select all when partially selected', async () => {
+    container.innerHTML = `
+      <ds-dropdown multiple select-all>
+        <ds-list-item value="1" label="Option 1"></ds-list-item>
+        <ds-list-item value="2" label="Option 2"></ds-list-item>
+      </ds-dropdown>
+    `;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Select one item
+    element.value = "1";
+    await element.updateComplete;
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Open to check visual state
+    const trigger = element.shadowRoot.querySelector('.trigger');
+    trigger.click();
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Find Select All item
+    const selectAllItem = element.shadowRoot.querySelector('ds-list-item[label="Select All"]');
+    expect(selectAllItem).toBeTruthy();
+    expect(selectAllItem.hasAttribute('indeterminate')).toBe(true);
+    expect(selectAllItem.hasAttribute('selected')).toBe(false);
+  });
+
+
+  it('initializes with provided value', async () => {
+    container.innerHTML = `
+      <ds-dropdown value="es">
+        <ds-list-item value="pt" label="Portugal"></ds-list-item>
+        <ds-list-item value="es" label="Spain"></ds-list-item>
+      </ds-dropdown>
+    `;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 100)); // Wait for slotchange and sync logic
+
+    const valueText = element.shadowRoot.querySelector('.value-text');
+    expect(valueText.textContent.trim()).toBe('Spain');
+
+    // Verify item selected state
+    const items = element.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
+    expect(items[1].hasAttribute('selected')).toBe(true);
+  });
+
+  it('updates display value when item selected via click', async () => {
+    container.innerHTML = `
+      <ds-dropdown>
+        <ds-list-item value="pt" label="Portugal"></ds-list-item>
+        <ds-list-item value="es" label="Spain"></ds-list-item>
+      </ds-dropdown>
+    `;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const items = element.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
+    items[0].click(); // Select Portugal
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(element.value).toBe('pt');
+    const valueText = element.shadowRoot.querySelector('.value-text');
+    expect(valueText.textContent.trim()).toBe('Portugal');
+    expect(valueText.classList.contains('placeholder')).toBe(false);
+  });
+
+
+  it('renders helper text', async () => {
+    container.innerHTML = '<ds-dropdown helper="Select your country"></ds-dropdown>';
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Helper just uses base class, no specific modifier unless error
+    const message = element.shadowRoot.querySelector('.field-message');
+    expect(message.textContent.trim()).toBe('Select your country');
+  });
+
+  it('renders error message and icon', async () => {
+    container.innerHTML = `
+      <ds-dropdown 
+        validation-status="error"
+        validation-message="This field is required"
+      ></ds-dropdown>
+    `;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Error adds modifier class
+    const errorMessage = element.shadowRoot.querySelector('.field-message--error');
+    expect(errorMessage).toBeTruthy();
+    expect(errorMessage.textContent.trim()).toBe('This field is required');
+
+    const errorIcon = errorMessage.querySelector('ds-icon[name="warning"]');
+    expect(errorIcon).toBeTruthy();
+  });
+
+  it('opens menu on trigger click', async () => {
+    container.innerHTML = '<ds-dropdown><ds-list-item label="A"></ds-list-item></ds-dropdown>';
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const trigger = element.shadowRoot.querySelector('.trigger');
+    trigger.click();
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(element.open).toBe(true);
+  });
+
+  it('opens menu with ArrowDown key on trigger', async () => {
+    container.innerHTML = '<ds-dropdown><ds-list-item label="A"></ds-list-item></ds-dropdown>';
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const trigger = element.shadowRoot.querySelector('.trigger');
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(element.open).toBe(true);
+  });
+
+  it('Closes menu with Escape key within menu interaction', async () => {
+    container.innerHTML = '<ds-dropdown open><ds-list-item label="A"></ds-list-item></ds-dropdown>';
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const trigger = element.shadowRoot.querySelector('.trigger');
+    // In Virtual Focus, the trigger handles key events
+    trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(element.open).toBe(false);
+  });
+});

package/src/ds-dropdown/index.js

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

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

@@ -0,0 +1,55 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Logical grouping of dropdown items with optional label.
+ * 
+ * @element ds-dropdown-group
+ * @prop {string} label - Group label text
+ * @slot - Default slot for ds-list-item elements
+ */
+export class DsDropdownGroup extends LitElement {
+    static properties = {
+        label: { type: String }
+    };
+
+    static styles = css`
+        :host {
+            display: block;
+        }
+
+        .group-label {
+            font: var(--ds-typo-content-body-bold);
+            color: var(--ds-color-text-secondary);
+            padding: 8px 16px 4px;
+            display: block;
+        }
+
+        .group-items {
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Divider between groups */
+        :host(:not(:first-child)) {
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid var(--ds-color-border-default);
+        }
+    `;
+
+    constructor() {
+        super();
+        this.label = '';
+    }
+
+    render() {
+        return html`
+            ${this.label ? html`<span class="group-label">${this.label}</span>` : ''}
+            <div class="group-items" role="group" aria-label="${this.label || 'Item group'}">
+                <slot></slot>
+            </div>
+        `;
+    }
+}
+
+customElements.define('ds-dropdown-group', DsDropdownGroup);

package/src/ds-dropdown-panel/ds-dropdown-panel.js

@@ -0,0 +1,34 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * specialized panel for dropdown popups.
+ * Handles scrolling, containment, and visual styling (shadow, radius).
+ * 
+ * @element ds-dropdown-panel
+ * @slot - Content (Items, Headers)
+ */
+export class DsDropdownPanel extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--ds-color-bg-default);
+      border-radius: var(--ds-radius-container);
+      box-shadow: var(--ds-elevation-floating);
+      max-height: 300px; /* Default constraint */
+      overflow: hidden; /* Changed from auto - zones handle scroll */
+      padding: 0; /* Zones handle their own padding */
+      box-sizing: border-box;
+      
+      /* Scrollbar styling */
+      scrollbar-width: thin;
+      scrollbar-color: var(--ds-color-border-strong) transparent;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('ds-dropdown-panel', DsDropdownPanel);

package/src/ds-file-uploaded/ds-file-uploaded.a11y.test.js

@@ -0,0 +1,40 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-file-uploaded.js';
+
+describe('DsFileUploaded A11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('default state passes axe a11y checks', async () => {
+        container.innerHTML = '<div role="list"><ds-file-uploaded filename="report.pdf" size="2 MB"></ds-file-uploaded></div>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('loading state passes axe a11y checks', async () => {
+        container.innerHTML = '<div role="list"><ds-file-uploaded filename="report.pdf" size="2 MB" loading progress="50"></ds-file-uploaded></div>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('error state passes axe a11y checks', async () => {
+        container.innerHTML = '<div role="list"><ds-file-uploaded filename="report.pdf" size="2 MB" error error-message="Upload failed"></ds-file-uploaded></div>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+});