@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,152 @@
+import { html } from 'lit';
+import './ds-tabs.js';
+import '../ds-tab-item/ds-tab-item.js';
+import '../ds-icon/ds-icon.js';
+
+export default {
+    title: 'Components/Tabs',
+    component: 'ds-tabs',
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['line', 'contained'],
+            defaultValue: 'line',
+        },
+    },
+};
+
+const Template = (args) => html`
+  <style>
+    /* Demo container styles */
+    .demo-container {
+        font-family: var(--ds-font-family-content);
+    }
+    p {
+        padding: 16px; 
+        color: var(--ds-color-text-secondary);
+    }
+  </style>
+  <div class="demo-container">
+      <ds-tabs variant=${args.variant || 'line'}>
+        <ds-tab-item label="First Tab" selected></ds-tab-item>
+        <ds-tab-item label="Second Tab"></ds-tab-item>
+        <ds-tab-item label="Third Tab"></ds-tab-item>
+        <ds-tab-item label="Disabled Tab" disabled></ds-tab-item>
+      </ds-tabs>
+      <p>Content for the selected tab would go here.</p>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    variant: 'line',
+};
+
+export const WithIcons = () => html`
+  <ds-tabs>
+    <ds-tab-item label="Home" selected>
+        <ds-icon slot="icon" name="home" size="sm"></ds-icon>
+    </ds-tab-item>
+    <ds-tab-item label="Settings">
+        <ds-icon slot="icon" name="settings" size="sm"></ds-icon>
+    </ds-tab-item>
+    <ds-tab-item label="Profile">
+        <ds-icon slot="icon" name="person" size="sm"></ds-icon>
+    </ds-tab-item>
+  </ds-tabs>
+`;
+
+export const InteractiveDemo = () => html`
+    <script>
+        // Simple script to handle tab switching for the demo
+        document.addEventListener('ds-tab-selected', (e) => {
+            // Find parent tabs
+            const tabs = e.target.closest('ds-tabs');
+            if(tabs && tabs.contains(document.currentScript?.parentElement)) {
+                 // Logic is mainly handled by ds-tabs internal handler for selection state visualization
+                 console.log('Tab selected:', e.target.label);
+            }
+        });
+    </script>
+    <ds-tabs>
+        <ds-tab-item label="Overview" selected></ds-tab-item>
+        <ds-tab-item label="Details"></ds-tab-item>
+        <ds-tab-item label="Reviews"></ds-tab-item>
+    </ds-tabs>
+`;
+
+export const Overflow = () => html`
+  <div style="max-width: 300px; border: 1px solid #ccc;">
+      <ds-tabs>
+        <ds-tab-item label="Tab 1" selected></ds-tab-item>
+        <ds-tab-item label="Tab 2"></ds-tab-item>
+        <ds-tab-item label="Tab 3"></ds-tab-item>
+        <ds-tab-item label="Tab 4 long label"></ds-tab-item>
+        <ds-tab-item label="Tab 5"></ds-tab-item>
+        <ds-tab-item label="Tab 6"></ds-tab-item>
+      </ds-tabs>
+  </div>
+`;
+
+import './ds-tab-panel.js';
+
+// ... (existing exports)
+
+// Full Example with Panels
+export const Contained = Template.bind({});
+Contained.args = {
+    variant: 'contained',
+};
+
+export const WithPanels = (args) => {
+    const handleTabSelected = (e) => {
+        console.log('Event ds-tab-selected captured in Story:', e);
+        const selectedTab = e.target;
+        const targetId = selectedTab.getAttribute('aria-controls');
+
+        // robustly find the wrapper: e.currentTarget is the ds-tabs list
+        const wrapper = e.currentTarget.parentElement;
+
+        if (!wrapper) {
+            console.warn('Wrapper not found');
+            return;
+        }
+
+        const panels = wrapper.querySelectorAll('ds-tab-panel');
+        panels.forEach(panel => {
+            const shouldSelect = panel.id === targetId;
+            // Use property setting AND attribute for robustness
+            panel.selected = shouldSelect;
+            if (shouldSelect) {
+                console.log('Activating panel:', panel.id);
+            }
+        });
+    };
+
+    return html`
+    <div class="tabs-wrapper">
+        <ds-tabs id="tabs-demo" @ds-tab-selected=${handleTabSelected}>
+            <ds-tab-item label="Account" selected aria-controls="panel-1"></ds-tab-item>
+            <ds-tab-item label="Notifications" aria-controls="panel-2"></ds-tab-item>
+            <ds-tab-item label="Security" aria-controls="panel-3"></ds-tab-item>
+        </ds-tabs>
+
+        <ds-tab-panel id="panel-1" aria-labelledby="tab-1" selected>
+            <h3>Account Settings</h3>
+            <p>Manage your account details properly here.</p>
+        </ds-tab-panel>
+
+        <ds-tab-panel id="panel-2" aria-labelledby="tab-2">
+            <h3>Notifications</h3>
+            <p>Choose your notification preferences.</p>
+        </ds-tab-panel>
+
+        <ds-tab-panel id="panel-3" aria-labelledby="tab-3">
+            <h3>Security</h3>
+            <p>Update your password and security settings.</p>
+        </ds-tab-panel>
+    </div>
+    `;
+};
+
+// Isolated TabItem story moved to ds-tab-item.stories.js

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

@@ -0,0 +1,306 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-tabs.js';
+import '../ds-tab-item/ds-tab-item.js';
+
+describe('ds-tabs', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders tabs correctly', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" selected></ds-tab-item>
+                <ds-tab-item label="Tab 2"></ds-tab-item>
+            </ds-tabs>
+        `;
+
+        // Wait for elements to be defined and rendered
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabs = container.querySelectorAll('ds-tab-item');
+        expect(tabs.length).toBe(2);
+        expect(tabs[0].getAttribute('selected')).toBe('');
+    });
+
+    it('handles click selection', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" selected></ds-tab-item>
+                <ds-tab-item label="Tab 2" id="tab2"></ds-tab-item>
+            </ds-tabs>
+        `;
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+        const tab2 = container.querySelector('#tab2');
+
+        tab2.click();
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabs = container.querySelectorAll('ds-tab-item');
+        expect(tabs[0].hasAttribute('selected')).toBe(false);
+        expect(tabs[1].hasAttribute('selected')).toBe(true);
+    });
+
+    it('handles keyboard navigation (ArrowRight)', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" selected></ds-tab-item>
+                <ds-tab-item label="Tab 2"></ds-tab-item>
+                <ds-tab-item label="Tab 3"></ds-tab-item>
+            </ds-tabs>
+        `;
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+        const tabs = container.querySelectorAll('ds-tab-item');
+        tabs[0].focus();
+
+        // Simulate ArrowRight keydown
+        tabs[0].dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'ArrowRight',
+            bubbles: true,
+            composed: true
+        }));
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        // Check if next tab is selected
+        expect(tabs[1].selected).toBe(true);
+        expect(document.activeElement === tabs[1]).toBe(true);
+    });
+
+    // KEYBOARD NAVIGATION COMPLETE
+    it('ArrowLeft moves to previous tab (wraps around)', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" selected></ds-tab-item>
+                <ds-tab-item label="Tab 2"></ds-tab-item>
+                <ds-tab-item label="Tab 3"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+        const tabs = container.querySelectorAll('ds-tab-item');
+        tabs[0].focus();
+
+        tabs[0].dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'ArrowLeft',
+            bubbles: true,
+            composed: true
+        }));
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        // Should wrap to last tab
+        expect(tabs[2].selected).toBe(true);
+    });
+
+    it('Home key selects first tab', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1"></ds-tab-item>
+                <ds-tab-item label="Tab 2" selected></ds-tab-item>
+                <ds-tab-item label="Tab 3"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+        const tabs = container.querySelectorAll('ds-tab-item');
+        tabs[1].focus();
+
+        tabs[1].dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'Home',
+            bubbles: true,
+            composed: true
+        }));
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(tabs[0].selected).toBe(true);
+    });
+
+    it('End key selects last tab', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" selected></ds-tab-item>
+                <ds-tab-item label="Tab 2"></ds-tab-item>
+                <ds-tab-item label="Tab 3"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+        const tabs = container.querySelectorAll('ds-tab-item');
+        tabs[0].focus();
+
+        tabs[0].dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'End',
+            bubbles: true,
+            composed: true
+        }));
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(tabs[2].selected).toBe(true);
+    });
+
+    it('skips disabled tabs during keyboard navigation', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" selected></ds-tab-item>
+                <ds-tab-item label="Tab 2" disabled></ds-tab-item>
+                <ds-tab-item label="Tab 3"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+        const tabs = container.querySelectorAll('ds-tab-item');
+        tabs[0].focus();
+
+        tabs[0].dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'ArrowRight',
+            bubbles: true,
+            composed: true
+        }));
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        // Should skip disabled tab 2 and go to tab 3
+        expect(tabs[2].selected).toBe(true);
+    });
+
+    // VARIANT TESTS
+    it('propagates variant="line" to all tab items', async () => {
+        container.innerHTML = `
+            <ds-tabs variant="line">
+                <ds-tab-item label="Tab 1"></ds-tab-item>
+                <ds-tab-item label="Tab 2"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabsEl = container.querySelector('ds-tabs');
+        const tabs = container.querySelectorAll('ds-tab-item');
+
+        expect(tabsEl.variant).toBe('line');
+        tabs.forEach(tab => {
+            expect(tab.variant).toBe('line');
+        });
+    });
+
+    it('propagates variant="contained" to all tab items', async () => {
+        container.innerHTML = `
+            <ds-tabs variant="contained">
+                <ds-tab-item label="Tab 1"></ds-tab-item>
+                <ds-tab-item label="Tab 2"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabsEl = container.querySelector('ds-tabs');
+        const tabs = container.querySelectorAll('ds-tab-item');
+
+        expect(tabsEl.variant).toBe('contained');
+        tabs.forEach(tab => {
+            expect(tab.variant).toBe('contained');
+        });
+    });
+
+    it('updates variant when prop changes', async () => {
+        container.innerHTML = `
+            <ds-tabs variant="line">
+                <ds-tab-item label="Tab 1"></ds-tab-item>
+                <ds-tab-item label="Tab 2"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabsEl = container.querySelector('ds-tabs');
+        tabsEl.variant = 'contained';
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabs = container.querySelectorAll('ds-tab-item');
+        tabs.forEach(tab => {
+            expect(tab.variant).toBe('contained');
+        });
+    });
+
+    // SELECTION TESTS
+    it('only one tab selected at a time', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" selected></ds-tab-item>
+                <ds-tab-item label="Tab 2" id="tab2"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tab2 = container.querySelector('#tab2');
+        tab2.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabs = container.querySelectorAll('ds-tab-item');
+        const selectedTabs = [...tabs].filter(t => t.selected);
+        expect(selectedTabs.length).toBe(1);
+        expect(selectedTabs[0]).toBe(tab2);
+    });
+
+    it('activates tab on click', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" selected></ds-tab-item>
+                <ds-tab-item label="Tab 2" id="tab2"></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tab2 = container.querySelector('#tab2');
+        expect(tab2.selected).toBe(false);
+
+        tab2.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(tab2.selected).toBe(true);
+    });
+
+    // EDGE CASES
+    it('handles empty slot (no tabs)', async () => {
+        container.innerHTML = `<ds-tabs></ds-tabs>`;
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabsEl = container.querySelector('ds-tabs');
+        expect(tabsEl).toBeTruthy();
+
+        // No tabs, no errors
+        const tabs = container.querySelectorAll('ds-tab-item');
+        expect(tabs.length).toBe(0);
+    });
+
+    it('handles all tabs disabled', async () => {
+        container.innerHTML = `
+            <ds-tabs>
+                <ds-tab-item label="Tab 1" disabled selected></ds-tab-item>
+                <ds-tab-item label="Tab 2" disabled></ds-tab-item>
+            </ds-tabs>
+        `;
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const tabsEl = container.querySelector('ds-tabs');
+        const tabs = container.querySelectorAll('ds-tab-item');
+
+        // All disabled, keyboard nav should do nothing
+        tabs[0].dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'ArrowRight',
+            bubbles: true,
+            composed: true
+        }));
+
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        // Nothing should change
+        expect(tabs[0].selected).toBe(true);
+    });
+});

package/src/ds-tabs/index.js

@@ -0,0 +1,3 @@
+export { DsTabs } from './ds-tabs.js';
+export { DsTabItem } from './ds-tab-item.js';
+export { DsTabPanel } from './ds-tab-panel.js';

package/src/ds-tag-action/ds-tag-action.a11y.test.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-tag-action.js';
+
+describe('DsTagAction A11y', () => {
+    let container;
+    beforeEach(() => { container = document.createElement('div'); document.body.appendChild(container); });
+    afterEach(() => { container.remove(); });
+
+    it('renders internal button', async () => {
+        container.innerHTML = '<ds-tag-action label="Action"></ds-tag-action>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-action');
+        const btn = el.shadowRoot.querySelector('button');
+        expect(btn).to.exist;
+    });
+
+    it('sets aria-pressed when selected', async () => {
+        container.innerHTML = '<ds-tag-action label="Selected" selected></ds-tag-action>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-action');
+        const btn = el.shadowRoot.querySelector('button');
+        expect(btn.getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('sets disabled attribute on button', async () => {
+        container.innerHTML = '<ds-tag-action label="Disabled" disabled></ds-tag-action>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-action');
+        const btn = el.shadowRoot.querySelector('button');
+        expect(btn.hasAttribute('disabled')).toBe(true);
+    });
+});

package/src/ds-tag-action/ds-tag-action.js

@@ -0,0 +1,185 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * @element ds-tag-action
+ * @summary A rounded, interactive tag (chip) that can be selected.
+ *
+ * @prop {string} label - Text label.
+ * @prop {string} icon - Optional icon name (left).
+ * @prop {boolean} selected - Whether the tag is selected.
+ * @prop {boolean} disabled - Whether the tag is disabled.
+ * @prop {string} size - 's' (24px) | 'm' (32px). Default: 'm'.
+ * @prop {string} color - 'neutral' | 'info'. Default: 'neutral'.
+ */
+export class DsTagAction extends LitElement {
+  static properties = {
+    label: { type: String },
+    icon: { type: String },
+    selected: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    size: { type: String, reflect: true },
+    color: { type: String, reflect: true },
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex; /* Fix ghost space from inline-block */
+      vertical-align: middle;
+      outline: none;
+    }
+
+    button {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      
+      border-radius: var(--ds-radius-action, 999px);
+      border: 1px solid transparent; /* Reserve space for border to avoid shift */
+      cursor: pointer;
+      position: relative;
+      
+      font: var(--ds-typo-content-body-regular); /* Correct token */
+      white-space: nowrap;
+      
+      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+    }
+
+    /* Gap Logic */
+    button {
+      gap: 4px; /* "gap de 4px entre eles" */
+    }
+
+    /* 
+     * SIZES 
+     */
+    /* 
+     * SIZES 
+     */
+    /* Size M (default): 32px height */
+    :host([size="m"]) button,
+    :host(:not([size])) button {
+      height: 32px;
+      padding: 0 var(--ds-space-sm); 
+    }
+    
+    /* Size S: 24px height */
+    :host([size="s"]) button {
+      height: 24px;
+      padding: 0 var(--ds-space-sm);
+      box-sizing: border-box; 
+      line-height: 1; 
+    }
+    
+    /* 
+     * COLORS / VARIANTS 
+     */
+    
+    /* NEUTRAL (Default) */
+    :host([color="neutral"]) button,
+    :host(:not([color])) button {
+      background-color: var(--ds-color-bg-neutral-subtle);
+      color: var(--ds-color-text-default);
+    }
+    
+    /* Neutral Hover */
+    :host([color="neutral"]:not([disabled])) button:hover,
+    :host(:not([color]):not([disabled])) button:hover {
+      background-color: var(--ds-color-bg-hover);
+    }
+
+    /* Neutral Selected */
+    :host([color="neutral"][selected]) button,
+    :host(:not([color])[selected]) button {
+        border-color: var(--ds-color-border-selected-secondary, #949494);
+    }
+
+    /* INFO */
+    :host([color="info"]) button {
+        background-color: var(--ds-color-bg-brand-subtle);
+        color: var(--ds-color-text-default);
+    }
+
+    /* Info Hover */
+    :host([color="info"]:not([disabled])) button:hover {
+        background-color: var(--ds-color-bg-brand-subtle-hover);
+    }
+
+    /* Info Selected */
+    :host([color="info"][selected]) button {
+        border-color: var(--ds-color-border-selected);
+    }
+
+    /* 
+     * DISABLED 
+     */
+    :host([disabled]) button {
+      cursor: not-allowed;
+      background-color: var(--ds-color-bg-disabled);
+      color: var(--ds-color-text-disabled);
+      border-color: transparent;
+      opacity: 1;
+      pointer-events: none;
+    }
+    :host([disabled][selected]) button {
+       border-color: var(--ds-color-border-disabled);
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    /* FOCUS */
+    button:focus-visible {
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: 2px;
+    }
+    
+    /* ICON styling */
+    ds-icon {
+      /* User requested size S consistently */
+      --size: var(--ds-icon-size-sm, 20px); 
+      color: currentColor; 
+    }
+  `;
+
+  constructor() {
+    super();
+    this.selected = false;
+    this.disabled = false;
+    this.size = 'm';
+    this.color = 'neutral';
+    this.label = '';
+  }
+
+  _handleClick() {
+    if (this.disabled) return;
+    this.selected = !this.selected;
+    this.dispatchEvent(new CustomEvent('ds-selected-change', {
+      detail: { selected: this.selected },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    return html`
+      <button 
+        type="button" 
+        part="container"
+        ?disabled=${this.disabled}
+        aria-pressed=${this.selected}
+        @click=${this._handleClick}
+      >
+        ${this.icon ? html`<ds-icon name=${this.icon} size="sm" part="icon"></ds-icon>` : ''}
+        <span>${this.label}</span>
+      </button>
+    `;
+  }
+}
+
+if (!customElements.get('ds-tag-action')) {
+  customElements.define('ds-tag-action', DsTagAction);
+}