@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,55 @@
+import { html } from 'lit';
+import './ds-tag-action.js';
+
+export default {
+    title: 'Components/Tag Action',
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+const ActionTemplate = (args) => html`
+  <ds-tag-action
+    label=${args.label}
+    icon=${args.icon}
+    size=${args.size}
+    color=${args.color}
+    ?selected=${args.selected}
+    ?disabled=${args.disabled}
+    @ds-selected-change=${(e) => console.log('Selection changed:', e.detail)}
+  ></ds-tag-action>
+`;
+
+export const Default = ActionTemplate.bind({});
+Default.args = {
+    label: 'Action Tag',
+    icon: 'star',
+    size: 'm',
+    color: 'neutral',
+    selected: false,
+    disabled: false,
+};
+Default.argTypes = {
+    size: { control: { type: 'select' }, options: ['s', 'm'] },
+    color: { control: { type: 'select' }, options: ['neutral', 'info'] },
+    icon: { control: 'text' },
+};
+
+export const AllStates = () => html`
+  <div style="display: flex; gap: 16px; flex-direction: column;">
+    <!-- Neutral -->
+    <div style="display: flex; gap: 8px; align-items: center;">
+      <ds-tag-action label="Neutral M" size="m" color="neutral"></ds-tag-action>
+      <ds-tag-action label="Neutral S" size="s" color="neutral"></ds-tag-action>
+      <ds-tag-action label="Selected" size="m" color="neutral" selected></ds-tag-action>
+      <ds-tag-action label="Disabled" size="m" color="neutral" disabled></ds-tag-action>
+    </div>
+    <!-- Info -->
+     <div style="display: flex; gap: 8px; align-items: center;">
+      <ds-tag-action label="Info M" size="m" color="info"></ds-tag-action>
+      <ds-tag-action label="Info S" size="s" color="info"></ds-tag-action>
+      <ds-tag-action label="Selected" size="m" color="info" selected></ds-tag-action>
+      <ds-tag-action label="Disabled" size="m" color="info" disabled></ds-tag-action>
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,44 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-tag-action.js';
+
+describe('DsTagAction', () => {
+    let container;
+    beforeEach(() => { container = document.createElement('div'); document.body.appendChild(container); });
+    afterEach(() => { container.remove(); });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-tag-action label="Test"></ds-tag-action>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-action');
+        expect(el.label).toBe('Test');
+        expect(el.shadowRoot.querySelector('span').textContent).toBe('Test');
+        expect(el.getAttribute('size')).toBe('m');
+        expect(el.getAttribute('color')).toBe('neutral');
+    });
+
+    it('renders with icon', async () => {
+        container.innerHTML = '<ds-tag-action label="Test" icon="star"></ds-tag-action>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-action');
+        const icon = el.shadowRoot.querySelector('ds-icon');
+        expect(icon).to.exist;
+        expect(icon.getAttribute('name')).toBe('star');
+    });
+
+    it('reflects selected state', async () => {
+        container.innerHTML = '<ds-tag-action label="Test" selected></ds-tag-action>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-action');
+        expect(el.hasAttribute('selected')).toBe(true);
+        const btn = el.shadowRoot.querySelector('button');
+        expect(btn.getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('reflects disabled state', async () => {
+        container.innerHTML = '<ds-tag-action label="Test" 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-removable/ds-tag-removable.a11y.test.js

@@ -0,0 +1,24 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-tag-removable.js';
+
+describe('DsTagRemovable A11y', () => {
+    let container;
+    beforeEach(() => { container = document.createElement('div'); document.body.appendChild(container); });
+    afterEach(() => { container.remove(); });
+
+    it('internal remove button has correct aria-label', async () => {
+        container.innerHTML = '<ds-tag-removable label="My Tag"></ds-tag-removable>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-removable');
+        const btn = el.shadowRoot.querySelector('ds-icon-button');
+        expect(btn.getAttribute('aria-label')).toBe('Remove My Tag');
+    });
+
+    it('internal button disabled state', async () => {
+        container.innerHTML = '<ds-tag-removable label="Disabled" disabled></ds-tag-removable>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-removable');
+        const btn = el.shadowRoot.querySelector('ds-icon-button');
+        expect(btn.hasAttribute('disabled')).toBe(true);
+    });
+});

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

@@ -0,0 +1,146 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+
+/**
+ * @element ds-tag-removable
+ * @summary A square-edged tag with a remove action.
+ *
+ * @prop {string} label - Text label.
+ * @prop {string} icon - Optional icon name (left).
+ * @prop {boolean} disabled - Whether the tag (and remove action) is disabled.
+ * @prop {string} size - 's' (24px) | 'm' (32px). Default: 'm'.
+ * @prop {string} color - 'neutral' | 'info'. Default: 'neutral'.
+ *
+ * @fires ds-tag-remove - Dispatched when remove button is clicked.
+ */
+export class DsTagRemovable extends LitElement {
+  static properties = {
+    label: { type: String },
+    icon: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    size: { type: String, reflect: true },
+    color: { type: String, reflect: true },
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      vertical-align: middle;
+      box-sizing: border-box;
+    }
+
+    .container {
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      
+      border-radius: var(--ds-radius-container, 0px); /* Square/Sharp */
+      
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      white-space: nowrap; /* Prevent breaking on resize */
+      
+      /* Gap Logic: 
+         Gap between Icon and Label is 4px.
+         Label to Action gap is 4px.
+      */
+    }
+    
+    .content-wrapper {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px; /* Icon to Label gap */
+        margin-right: 4px; /* Label to Action gap */
+    }
+
+    /* 
+     * SIZES 
+     */
+    /* Size M: 32px height */
+    :host([size="m"]) .container,
+    :host(:not([size])) .container {
+       height: 32px;
+       padding: 0 4px 0 var(--ds-space-sm);
+    }
+
+    /* Size S: 24px height */
+     :host([size="s"]) .container {
+       height: 24px;
+       padding: 0 4px 0 var(--ds-space-sm);
+    }
+
+    /* 
+     * COLORS 
+     */
+    /* NEUTRAL */
+    :host([color="neutral"]) .container,
+    :host(:not([color])) .container {
+       background-color: var(--ds-color-bg-neutral-subtle);
+    }
+    
+    /* INFO */
+    :host([color="info"]) .container {
+       background-color: var(--ds-color-bg-brand-subtle);
+    }
+    
+    /* 
+     * DISABLED 
+     */
+    :host([disabled]) {
+       /* Reset opacity strategy */
+       pointer-events: none;
+    }
+    :host([disabled]) .container {
+       background-color: var(--ds-color-bg-disabled);
+       color: var(--ds-color-text-disabled);
+    }
+
+    ds-icon {
+        /* User: "tamanho do ícone deve ser size S em ambos os casos" */
+        --size: var(--ds-icon-size-sm, 20px);
+        color: currentColor; 
+    }
+  `;
+
+  constructor() {
+    super();
+    this.disabled = false;
+    this.size = 'm';
+    this.color = 'neutral';
+    this.label = '';
+  }
+
+  _handleRemove(e) {
+    e.stopPropagation(); // Don't bubble click if container had one (optional)
+    this.dispatchEvent(new CustomEvent('ds-tag-remove', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    return html`
+      <div class="container" part="container">
+        <div class="content-wrapper">
+            ${this.icon ? html`<ds-icon name=${this.icon} size="sm" part="icon"></ds-icon>` : ''}
+            <span>${this.label}</span>
+        </div>
+        
+        <ds-icon-button 
+            icon="close" 
+            variant="action" 
+            size="s" 
+            ?disabled=${this.disabled}
+            aria-label="Remove ${this.label}"
+            @click=${this._handleRemove}
+            part="remove-button"
+        ></ds-icon-button>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('ds-tag-removable')) {
+  customElements.define('ds-tag-removable', DsTagRemovable);
+}

package/src/ds-tag-removable/ds-tag-removable.stories.js

@@ -0,0 +1,52 @@
+import { html } from 'lit';
+import './ds-tag-removable.js';
+
+export default {
+    title: 'Components/Tag Removable',
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+const RemovableTemplate = (args) => html`
+  <ds-tag-removable
+    label=${args.label}
+    icon=${args.icon}
+    size=${args.size}
+    color=${args.color}
+    ?disabled=${args.disabled}
+    @ds-tag-remove=${() => console.log('Remove Clicked')}
+  ></ds-tag-removable>
+`;
+
+export const Default = RemovableTemplate.bind({});
+Default.args = {
+    label: 'Removable Tag',
+    icon: 'star',
+    size: 'm',
+    color: 'neutral',
+    disabled: false,
+};
+Default.argTypes = {
+    size: { control: { type: 'select' }, options: ['s', 'm'] },
+    color: { control: { type: 'select' }, options: ['neutral', 'info'] },
+    icon: { control: 'text' },
+};
+
+export const AllStates = () => html`
+  <div style="display: flex; gap: 16px; flex-direction: column;">
+    <!-- Neutral -->
+    <div style="display: flex; gap: 8px; align-items: flex-start;">
+      <ds-tag-removable label="Neutral M" size="m" color="neutral"></ds-tag-removable>
+      <ds-tag-removable label="Neutral S" size="s" color="neutral"></ds-tag-removable>
+      <ds-tag-removable label="With Icon" icon="favorite" size="m" color="neutral"></ds-tag-removable>
+      <ds-tag-removable label="Disabled" size="m" color="neutral" disabled></ds-tag-removable>
+    </div>
+    <!-- Info -->
+     <div style="display: flex; gap: 8px; align-items: flex-start;">
+      <ds-tag-removable label="Info M" size="m" color="info"></ds-tag-removable>
+      <ds-tag-removable label="Info S" size="s" color="info"></ds-tag-removable>
+      <ds-tag-removable label="Disabled" size="m" color="info" disabled></ds-tag-removable>
+    </div>
+  </div>
+`;

package/src/ds-tag-removable/ds-tag-removable.test.js

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import './ds-tag-removable.js';
+
+describe('DsTagRemovable', () => {
+    let container;
+    beforeEach(() => { container = document.createElement('div'); document.body.appendChild(container); });
+    afterEach(() => { container.remove(); });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-tag-removable label="Removable"></ds-tag-removable>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-removable');
+        expect(el.label).toBe('Removable');
+        expect(el.shadowRoot.querySelector('span').textContent).toBe('Removable');
+    });
+
+    it('dispatches ds-tag-remove event when close button is clicked', async () => {
+        container.innerHTML = '<ds-tag-removable label="Removable"></ds-tag-removable>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-removable');
+        const removeBtn = el.shadowRoot.querySelector('ds-icon-button');
+
+        const listener = vi.fn();
+        el.addEventListener('ds-tag-remove', listener);
+
+        removeBtn.click();
+        expect(listener).toHaveBeenCalled();
+    });
+
+    it('passes disabled state to icon button', async () => {
+        container.innerHTML = '<ds-tag-removable label="Removable" disabled></ds-tag-removable>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-removable');
+        const removeBtn = el.shadowRoot.querySelector('ds-icon-button');
+        expect(removeBtn.hasAttribute('disabled')).toBe(true);
+    });
+
+    it('renders size S structure', async () => {
+        container.innerHTML = '<ds-tag-removable label="Small" size="s"></ds-tag-removable>';
+        await new Promise(r => setTimeout(r, 0));
+        const el = container.querySelector('ds-tag-removable');
+        const removeBtn = el.shadowRoot.querySelector('ds-icon-button');
+        expect(removeBtn.getAttribute('size')).toBe('s');
+        expect(el.getAttribute('size')).toBe('s');
+    });
+});

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

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-tag-status.js';
+
+describe('ds-tag-status a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks with size S', async () => {
+        container.innerHTML = '<ds-tag-status status="success" label="Active"></ds-tag-status>';
+        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 with size XS', async () => {
+        container.innerHTML = '<ds-tag-status size="xs" status="warning" label="Pending"></ds-tag-status>';
+        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 error status', async () => {
+        container.innerHTML = '<ds-tag-status status="error" label="Failed"></ds-tag-status>';
+        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 info status', async () => {
+        container.innerHTML = '<ds-tag-status status="info" label="Information"></ds-tag-status>';
+        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 neutral status', async () => {
+        container.innerHTML = '<ds-tag-status status="neutral" label="Draft"></ds-tag-status>';
+        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-tag-status hide-icon status="success" label="Complete"></ds-tag-status>';
+        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 with all statuses', async () => {
+        const statuses = ['error', 'warning', 'success', 'info', 'neutral'];
+
+        for (const status of statuses) {
+            container.innerHTML = `<ds-tag-status status="${status}" label="Test ${status}"></ds-tag-status>`;
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            const results = await axe.run(container, {
+                rules: { 'color-contrast': { enabled: false } }
+            });
+            expect(results.violations).toHaveLength(0);
+        }
+    });
+});

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

@@ -0,0 +1,164 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+// Icon mapping constant
+const STATUS_ICONS = {
+  error: 'cancel',
+  warning: 'warning',
+  success: 'check-circle',
+  info: 'info',
+  neutral: 'pending'
+};
+
+/**
+ * Tag status component for displaying status indicators
+ *
+ * @element ds-tag-status
+ *
+ * @prop {string} status - Status type: 'error' | 'warning' | 'success' | 'info' | 'neutral' (default: 'neutral')
+ * @prop {string} size - Size variant: 's' | 'xs' (default: 's')
+ * @prop {string} label - Label text to display
+ * @prop {boolean} hideIcon - Hide icon in size S (default: false)
+ * @prop {string} icon - Custom icon name (overrides status-based icon)
+ *
+ * @csspart container - The main container element
+ * @csspart icon - The icon element
+ * @csspart label - The label text element
+ */
+export class DsTagStatus extends LitElement {
+  static properties = {
+    status: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    label: { type: String },
+    hideIcon: { type: Boolean, attribute: 'hide-icon', reflect: true },
+    icon: { type: String }
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      vertical-align: middle;
+      box-sizing: border-box;
+    }
+
+    .container {
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      border-radius: var(--ds-radius-container); /* 0px - sharp */
+    }
+
+    /* Size S (default): 24px height */
+    :host([size="s"]) .container,
+    :host(:not([size])) .container {
+      height: 24px;
+      padding: 2px var(--ds-space-sm); /* 2px vertical, 8px horizontal */
+      gap: var(--ds-space-xs); /* 4px gap between icon and label */
+    }
+
+    :host([size="s"]) .label,
+    :host(:not([size])) .label {
+      font: var(--ds-typo-content-body-regular);
+    }
+
+    /* Size XS: 20px height (caption text box height) */
+    :host([size="xs"]) .container {
+      height: 20px;
+      padding: 2px var(--ds-space-sm); /* 2px vertical, 8px horizontal */
+    }
+
+    :host([size="xs"]) .label {
+      font: var(--ds-typo-content-caption-regular);
+    }
+
+    /* Label styling */
+    .label {
+      color: var(--ds-color-text-default);
+      white-space: nowrap;
+      line-height: 1;
+    }
+
+    /* Icon styling */
+    ds-icon {
+      color: var(--ds-color-icon-default);
+      flex-shrink: 0;
+    }
+
+    /* Status: Error */
+    :host([status="error"]) .container {
+      background-color: var(--ds-color-bg-error-subtle);
+    }
+
+    /* Status: Warning */
+    :host([status="warning"]) .container {
+      background-color: var(--ds-color-bg-warning-subtle);
+    }
+
+    /* Status: Success */
+    :host([status="success"]) .container {
+      background-color: var(--ds-color-bg-success-subtle);
+    }
+
+    /* Status: Info */
+    :host([status="info"]) .container {
+      background-color: var(--ds-color-bg-info-subtle);
+    }
+
+    /* Status: Neutral (default) */
+    :host([status="neutral"]) .container,
+    :host(:not([status])) .container {
+      background-color: var(--ds-color-bg-neutral-subtle);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.status = 'neutral';
+    this.size = 's';
+    this.label = '';
+    this.hideIcon = false;
+    this.icon = '';
+  }
+
+  /**
+   * Returns the icon name based on the status
+   * @returns {string} Icon name
+   */
+  _getIconName() {
+    // If custom icon is provided, use it
+    if (this.icon) {
+      return this.icon;
+    }
+
+    // Otherwise use status-based icon
+    return STATUS_ICONS[this.status] || STATUS_ICONS.neutral;
+  }
+
+  /**
+   * Determines if the icon should be shown
+   * @returns {boolean} Whether to show the icon
+   */
+  _shouldShowIcon() {
+    // Only show icon in size S, unless hideIcon is true
+    return this.size !== 'xs' && !this.hideIcon;
+  }
+
+  render() {
+    const showIcon = this._shouldShowIcon();
+
+    return html`
+      <div class="container" part="container">
+        ${showIcon ? html`
+          <ds-icon 
+            name="${this._getIconName()}" 
+            size="sm"
+            part="icon"
+          ></ds-icon>
+        ` : ''}
+        <span class="label" part="label">${this.label}</span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-tag-status', DsTagStatus);