@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,341 @@
+import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * @element ds-tab-item
+ * @summary A single tab item.
+ *
+ * @slot - Default slot for label text.
+ * @slot icon - Decorative icon.
+ *
+ * @prop {boolean} selected - Whether the tab is selected.
+ * @prop {boolean} disabled - Whether the tab is disabled.
+ * @prop {string} label - Text label (optional, if not using slot).
+ *
+ * @fires ds-tab-selected - Dispatched when the tab is clicked/activated.
+ */
+export class DsTabItem extends LitElement {
+  static properties = {
+    selected: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    label: { type: String },
+    variant: { type: String, reflect: true }, // 'line' | 'contained'
+  };
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      outline: none;
+    }
+
+    .tab {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      height: 32px;
+      /* Padding: Top 6px, Bottom 5px (to accommodate 1px transparent border), Horizontal 16px */
+      padding: 6px 16px 5px 16px; 
+      cursor: pointer;
+      position: relative;
+      background-color: transparent;
+      color: var(--ds-color-text-default);
+      transition: background-color 0.2s, color 0.2s;
+      
+      /* Transparent border allows parent shadow (divider) to show through */
+      border-bottom: 1px solid transparent;
+      /* padding-box clip ensures background doesn't cover the transparent border area */
+      background-clip: padding-box;
+      gap: 4px; /* "4 pixels de distância entre si" */
+      white-space: nowrap;
+      
+      /* Typography Default */
+      font: var(--ds-typo-content-body-regular);
+    }
+
+    /* =========================================
+       VARIANT: LINE (Default)
+       ========================================= */
+    /* Shared styles above match Line defaults largely, but we can be explicit if needed */
+
+    /* =========================================
+       VARIANT: LINE (Default)
+       ========================================= */
+
+    /* Hover State (Line) */
+    :host(:not([variant="contained"])) .tab:hover:not(.disabled) {
+      background-color: var(--ds-color-bg-hover);
+    }
+
+    /* Selected State (Line) */
+    :host([selected]:not([variant="contained"])) .tab {
+      font: var(--ds-typo-content-body-bold);
+      color: var(--ds-color-text-default);
+    }
+    :host([selected][disabled]:not([variant="contained"])) .tab {
+      /* Use disabled color for text, but keep bold font */
+      color: var(--ds-color-text-disabled, inherit); 
+    }
+    
+    /* Indicator (Line) */
+    :host(:not([variant="contained"])) .tab::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: transparent;
+      transition: background-color 0.2s;
+      z-index: 2;
+    }
+    :host([selected]:not([variant="contained"])) .tab::after {
+      background-color: var(--ds-color-border-selected);
+    }
+    /* Disabled Override */
+    :host([selected][disabled]:not([variant="contained"])) .tab::after {
+      background-color: var(--ds-color-border-disabled, #ccc);
+    }
+
+    /* =========================================
+       VARIANT: CONTAINED
+       ========================================= */
+    
+    :host([variant="contained"]) .tab {
+      height: 40px;
+      padding: 10px 16px; 
+      
+      background-color: var(--ds-color-bg-secondary);
+      
+      border: 1px solid var(--ds-color-border-strong);
+      border-bottom-color: transparent; 
+      
+      z-index: 0;
+    }
+
+    /* Contained Hover */
+    :host([variant="contained"]:not([selected])) .tab:hover:not(.disabled) {
+       background-color: var(--ds-color-bg-hover);
+       z-index: 1; 
+    }
+
+    /* Selected State (Contained) */
+    :host([variant="contained"][selected]) .tab {
+      font: var(--ds-typo-content-body-bold);
+      background-color: var(--ds-color-bg-default);
+      
+      border-color: var(--ds-color-border-strong);
+      border-top: 2px solid var(--ds-color-border-selected);
+      padding-top: 9px;
+      
+      border-bottom: 1px solid var(--ds-color-bg-default);
+      
+      z-index: 2;
+    }
+
+    /* Disabled Override for Contained Selected */
+    :host([variant="contained"][selected][disabled]) .tab {
+        /* Keep white bg? Or maybe grey? Usually keep structure but grey text/border */
+        color: var(--ds-color-text-disabled);
+        border-top-color: var(--ds-color-border-disabled);
+        /* Ensure bottom border matches BG (if BG changes, this must change) */
+        /* If disabled selected tab has same BG as panel, let's assume default white. */
+    }
+    
+    /* Remove ::after indicator for Contained */
+    :host([variant="contained"]) .tab::after {
+      content: none;
+    }
+
+    /* Focus State (Shared Logic) */
+    :host(:focus-visible) {
+      z-index: 3; 
+      position: relative;
+    }
+    :host(:focus-visible) .tab {
+      /* User requested focus "more outside" and "hiding lines".
+         outline: 2px solid with offset -2px positions the outline 
+         inside the border-box edge.
+         If border is 1px, this 2px outline covers the 1px border + 1px padding.
+         It effectively paints ON TOP of the border.
+      */
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: -2px;
+      box-shadow: none; /* Remove previous inset shadow strategy */
+    }
+    /* 
+       Problem: User said "focus não aparece outline".
+       On a filled background (bg-secondary), inset shadow works.
+       Maybe z-index 3 is not enough?
+       Or maybe 'outline' property is being overridden?
+       We use 'outline: 2px solid transparent' which is correct for a11y.
+       The visual is 'box-shadow'.
+       If the tab has borders, box-shadow inset paints *inside* the borders.
+       Confirmed this logic usually works.
+    */
+
+    /* Disabled State */
+    .tab.disabled {
+      cursor: not-allowed;
+      opacity: var(--ds-opacity-disabled, 0.5); 
+      pointer-events: none;
+    }
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    /* ... Layout Shift logic remains ... */
+
+    /* 
+       Layout Shift Prevention for Bold Text 
+       We use a pseudo-element on the label container to reserve space 
+       for the bold version of the text.
+    */
+    .label-container {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+
+    /* Use attr(data-text) to duplicate content */
+    .label-container::before {
+      content: attr(data-text);
+      font: var(--ds-typo-content-body-bold);
+      height: 0;
+      visibility: hidden;
+      overflow: hidden;
+      /* This ensures the container preserves the width of the bold text */
+    }
+
+    .label-text {
+      /* Position absolute? No, just let it sit there. 
+         Wait, if ::before reserves width, the actual text needs to overlap it 
+         or just be centered? 
+         Method: Grid or Flex overlay.
+      */
+    }
+
+    /* Improved Layout Shift Prevention: CSS Grid Override */
+    .label-container {
+      display: inline-grid;
+      grid-template-columns: 1fr;
+      justify-items: center;
+      align-items: center;
+    }
+
+    .label-container::before {
+        grid-area: 1 / 1;
+        content: attr(data-text);
+        font: var(--ds-typo-content-body-bold);
+        visibility: hidden;
+    }
+
+    .label-text {
+        grid-area: 1 / 1;
+        white-space: nowrap;
+    }
+
+    ::slotted(ds-icon) {
+        --size: var(--ds-icon-size-sm, 20px);
+        color: var(--ds-color-icon-default);
+        display: flex;
+    }
+
+    ds-icon {
+        display: flex;
+        --size: var(--ds-icon-size-sm, 20px);
+        color: var(--ds-color-icon-default);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.selected = false;
+    this.disabled = false;
+    this.label = '';
+    this.variant = 'line';
+  }
+
+  /* Accessibility properties */
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'tab');
+    this.addEventListener('click', this._handleClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this._handleClick);
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('selected')) {
+      this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+      this.setAttribute('tabindex', this.selected ? '0' : '-1');
+    }
+    if (changedProperties.has('disabled')) {
+      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+      if (this.disabled) {
+        this.removeAttribute('tabindex');
+      }
+    }
+  }
+
+  _handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('ds-tab-selected', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleSlotChange(e) {
+    this.requestUpdate();
+  }
+
+  render() {
+    const labelContent = this.label ||
+      (this.shadowRoot ? this.shadowRoot.querySelector('slot:not([name])')?.assignedNodes({ flatten: true }).map(n => n.textContent).join('').trim() : '');
+
+    // We need the text content for the layout shift trick
+    // If usage is <ds-tab>Label</ds-tab>, we need to extract "Label".
+    // This is tricky with Shadow DOM slots. 
+    // Easier if we wrap the slot content in the grid trick.
+    // But we can't easily get 'data-text' from a slot content dynamically in CSS without JS.
+    // Compromise: Implementation relies on 'label' prop for the trick, 
+    // OR we just accept that if you use slot, you might get shift, 
+    // unless we use a ResizeObserver logic which is too heavy.
+    // BETTER: Just apply the bold font to the slot wrapper? No, that causes shift.
+
+    // Let's assume 'label' prop is preferred for this optimization, 
+    // but we can try to grab textContent if available.
+
+    // For now, I will implement the logic primarily around `label`.
+    // If the USER uses slots for complex content, they might accept the shift or we refine later.
+
+    return html`
+      <div 
+        class="tab ${this.disabled ? 'disabled' : ''}" 
+      >
+        <slot name="icon"></slot>
+        
+        <span class="label-container" data-text=${ifDefined(this.label)}>
+             <!-- Reserve space using pseudo element on container -->
+             <span class="label-text">
+                ${this.label ? this.label : html`<slot></slot>`}
+             </span>
+        </span>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('ds-tab-item')) {
+  customElements.define('ds-tab-item', DsTabItem);
+}

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

@@ -0,0 +1,69 @@
+import { html } from 'lit';
+import './ds-tab-item.js';
+import '../ds-icon/ds-icon.js';
+
+export default {
+    title: 'Components/Tab Item',
+    component: 'ds-tab-item',
+    argTypes: {
+        label: { control: 'text' },
+        selected: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        variant: {
+            control: { type: 'select' },
+            options: ['line', 'contained'],
+            defaultValue: 'line'
+        }
+    },
+};
+
+const Template = (args) => html`
+  <ds-tab-item 
+      label=${args.label} 
+      ?selected=${args.selected} 
+      ?disabled=${args.disabled}
+      variant=${args.variant || 'line'}
+  >
+    ${args.icon ? html`<ds-icon slot="icon" name=${args.icon}></ds-icon>` : ''}
+  </ds-tab-item>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Single Tab',
+    selected: false,
+    disabled: false,
+    variant: 'line',
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+    label: 'Selected Tab',
+    selected: true,
+    disabled: false,
+    variant: 'line',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    label: 'Disabled Tab',
+    selected: false,
+    disabled: true,
+    variant: 'line',
+};
+
+export const Contained = Template.bind({});
+Contained.args = {
+    label: 'Contained Tab',
+    selected: false,
+    disabled: false,
+    variant: 'contained',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+    label: 'Home',
+    icon: 'home',
+    selected: false,
+    variant: 'line',
+};

package/src/ds-tabs/ds-tab-panel.js

@@ -0,0 +1,48 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @element ds-tab-panel
+ * @summary A panel containing content associated with a tab.
+ *
+ * @slot - Default slot for panel content.
+ *
+ * @prop {boolean} selected - Whether the panel is active/visible.
+ */
+export class DsTabPanel extends LitElement {
+    static properties = {
+        selected: { type: Boolean, reflect: true },
+    };
+
+    static styles = css`
+    :host {
+      display: none;
+      box-sizing: border-box;
+      /* Default styles for panel content - can be overridden */
+      padding: var(--ds-space-md, 16px);
+      color: var(--ds-color-text-default);
+      font: var(--ds-typo-content-body-regular);
+    }
+
+    :host([selected]) {
+      display: block;
+    }
+  `;
+
+    constructor() {
+        super();
+        this.selected = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'tabpanel');
+    }
+
+    render() {
+        return html`<slot></slot>`;
+    }
+}
+
+if (!customElements.get('ds-tab-panel')) {
+    customElements.define('ds-tab-panel', DsTabPanel);
+}

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

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-tabs.js';
+import '../ds-tab-item/ds-tab-item.js';
+
+describe('ds-tabs a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('ds-tabs has role tablist', async () => {
+        container.innerHTML = '<ds-tabs></ds-tabs>';
+        const el = container.querySelector('ds-tabs');
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(el.getAttribute('role')).toBe('tablist');
+    });
+
+    it('ds-tab-item has role tab', async () => {
+        container.innerHTML = '<ds-tab-item label="Tab"></ds-tab-item>';
+        const el = container.querySelector('ds-tab-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(el.getAttribute('role')).toBe('tab');
+    });
+
+    it('selected tab has aria-selected=true and tabindex=0', async () => {
+        container.innerHTML = '<ds-tab-item label="Tab" selected></ds-tab-item>';
+        const el = container.querySelector('ds-tab-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(el.getAttribute('aria-selected')).toBe('true');
+        expect(el.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('unselected tab has aria-selected=false and tabindex=-1', async () => {
+        container.innerHTML = '<ds-tab-item label="Tab"></ds-tab-item>';
+        const el = container.querySelector('ds-tab-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(el.getAttribute('aria-selected')).toBe('false');
+        expect(el.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('disabled tab has aria-disabled=true', async () => {
+        container.innerHTML = '<ds-tab-item label="Tab" disabled></ds-tab-item>';
+        const el = container.querySelector('ds-tab-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(el.getAttribute('aria-disabled')).toBe('true');
+        // Disabled elements should not be focusable usually, or -1. 
+        // ds-tab implementation removes tabindex.
+        expect(el.hasAttribute('tabindex')).toBe(false);
+    });
+});

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

@@ -0,0 +1,180 @@
+// ds-tabs.js
+import { LitElement, html, css } from 'lit';
+import '../ds-tab-item/ds-tab-item.js';
+
+/**
+ * @element ds-tabs
+ * @summary A container for tab items that manages selection and keyboard navigation.
+ *
+ * @slot - Default slot for ds-tab-item items.
+ *
+ * @prop {string} variant - Visual variant ('line' | 'contained'). Default: 'line'.
+ */
+export class DsTabs extends LitElement {
+    static properties = {
+        variant: { type: String, reflect: true },
+    };
+
+    static styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      
+      /* Optional: Scrollable if content overflows */
+      overflow-x: auto;
+      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none; /* IE/Edge */
+      
+      /* Padding removed as we use inner outline for focus now */
+      padding: 0;
+    }
+    
+    /* Line Variant (Default) Specifics */
+    :host([variant="line"]) {
+        box-shadow: inset 0 -1px 0 var(--ds-color-border-strong);
+        gap: 0; 
+    }
+
+    /* Contained Variant Specifics */
+    :host([variant="contained"]) {
+        gap: 0;
+        padding: 0;
+        
+        /* Bottom Track (Inset Shadow) */
+        box-shadow: inset 0 -1px 0 var(--ds-color-border-strong);
+    }
+    
+    /* Margin Overlap Strategy */
+    :host([variant="contained"]) ::slotted(ds-tab-item:not(:first-child)) {
+        margin-left: -1px;
+    }
+    
+    :host::-webkit-scrollbar {
+      display: none; /* Chrome/Safari */
+    }
+  `;
+
+    constructor() {
+        super();
+        this.variant = 'line';
+        this._handleTabSelected = this._handleTabSelected.bind(this);
+        this._handleKeydown = this._handleKeydown.bind(this);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('ds-tab-selected', this._handleTabSelected);
+        this.addEventListener('keydown', this._handleKeydown);
+        this.setAttribute('role', 'tablist');
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('ds-tab-selected', this._handleTabSelected);
+        this.removeEventListener('keydown', this._handleKeydown);
+    }
+
+    updated(changedProperties) {
+        if (changedProperties.has('variant')) {
+            this._propagateVariant();
+        }
+    }
+
+    firstUpdated() {
+        this._propagateVariant();
+    }
+
+    _handleSlotChange(e) {
+        this._propagateVariant();
+    }
+
+    _propagateVariant() {
+        const tabs = [...this.querySelectorAll('ds-tab-item')];
+        tabs.forEach(tab => {
+            if (tab.variant !== this.variant) {
+                tab.variant = this.variant;
+            }
+        });
+    }
+
+    /**
+     * Handles selection events from child tabs.
+     * Updates state to ensure only one tab is selected.
+     */
+    _handleTabSelected(event) {
+        const selectedTab = event.target;
+        this._activateTab(selectedTab);
+    }
+
+    _activateTab(selectedTab) {
+        const tabs = [...this.querySelectorAll('ds-tab-item')];
+        tabs.forEach(tab => {
+            const isSelected = tab === selectedTab;
+            if (tab.selected !== isSelected) {
+                tab.selected = isSelected;
+            }
+            // ARIA management could happen here or in the item itself reflecting props
+        });
+    }
+
+    /**
+     * Handles keyboard navigation (Arrow keys).
+     */
+    _handleKeydown(e) {
+        const tabs = [...this.querySelectorAll('ds-tab-item')].filter(t => !t.disabled);
+        if (!tabs.length) return;
+
+        const currentTab = e.target;
+        const currentIndex = tabs.indexOf(currentTab);
+
+        // Only handle if focus is essentially inside a tab
+        if (currentIndex === -1) return;
+
+        let nextIndex;
+
+        switch (e.key) {
+            case 'ArrowRight':
+                nextIndex = (currentIndex + 1) % tabs.length;
+                break;
+            case 'ArrowLeft':
+                nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+
+        e.preventDefault();
+        const nextTab = tabs[nextIndex];
+        if (nextTab) {
+            nextTab.focus();
+            // Optional: Automatic selection on focus (common for tabs)
+            // For now, we'll stick to focus, user presses Enter/Space to select -> ds-tab handles click/enter
+            // Actually, standard aria practices often suggest automatic activation for tabs.
+            // But let's check requirements. "Implementation Plan" didn't specify auto-follow.
+            // Let's stick to standard behavior: arrow moves focus. User activates.
+            // Wait, standard WAI-ARIA Authoring Practices 1.2: 
+            // "It is recommended that tabs activate automatically when they receive focus, 
+            // as long as their associated tab panels are displayed without significant latency."
+            // I will trigger click() to activate it.
+            nextTab.click();
+        }
+    }
+
+    render() {
+        return html`
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        `;
+    }
+}
+
+if (!customElements.get('ds-tabs')) {
+    customElements.define('ds-tabs', DsTabs);
+}