voa-ds-core 1.0.3

package/dist/collection/components/voa-tab/voa-tab.stories.js

@@ -0,0 +1,405 @@
+import { html } from "lit";
+import "../../Stories/styles/voa-tab.external.css";
+/**
+ * Componente Tab do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=545-553
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.
+ */
+const meta = {
+    title: "Componentes/Navegação/Tabs",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=545-553',
+        },
+    },
+    render: (args) => html `
+    <voa-tab
+      direction="${args.direction}"
+      activeIndex="${args.activeIndex || 0}"
+      @dsTabChange=${(e) => console.log('Tab changed:', e.detail)}
+    >
+      ${Array.from({ length: args.itemCount || 3 }).map((_, i) => html `
+        <voa-tab-item
+          ?showBadge=${args.showBadge && i === 1}
+          badge-count="${args.showBadge && i === 1 ? args.badgeCount : ''}"
+          ?disabled=${args.hasDisabled && i === (args.itemCount || 3) - 1}
+          position="${args.position}"
+        >
+          Nome aba ${i + 1}
+        </voa-tab-item>
+      `)}
+    </voa-tab>
+  `,
+    argTypes: {
+        direction: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+            description: 'Direção do layout dos tabs'
+        },
+        itemCount: {
+            control: { type: 'number', min: 1, max: 20, step: 1 },
+            description: 'Número de itens de tab'
+        },
+        activeIndex: {
+            control: { type: 'number', min: 0, max: 19 },
+            description: 'Índice do item ativo (modo controlado)'
+        },
+        showBadge: {
+            control: 'boolean',
+            description: 'Exibir badge no segundo item'
+        },
+        badgeCount: {
+            control: { type: 'number', min: 0, max: 99 },
+            description: 'Número a ser exibido no badge'
+        },
+        hasDisabled: {
+            control: 'boolean',
+            description: 'Incluir um item desabilitado'
+        },
+        position: {
+            control: 'select',
+            options: ['default', 'top', 'right', 'left'],
+            description: 'Posição do indicador de ativo (borda)'
+        },
+    },
+    args: {
+        direction: 'horizontal',
+        itemCount: 3,
+        showBadge: false,
+        badgeCount: 5,
+        hasDisabled: false,
+        position: 'default',
+    }
+};
+export default meta;
+// ============================================
+// História padrão
+// ============================================
+export const Default = {};
+// ============================================
+// Variações Numéricas
+// ============================================
+const generateVariations = (direction, position) => {
+    const itemPosition = position || (direction === 'vertical' ? 'left' : 'default');
+    return html `
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      ${Array.from({ length: 9 }).map((_, i) => {
+        const count = i + 1;
+        return html `
+          <div>
+            <h4 style="margin-bottom: 0.5rem; font-family: sans-serif; color: #666;">${count} Items</h4>
+            <voa-tab direction="${direction}" activeIndex="0">
+              ${Array.from({ length: count }).map((__, j) => html `
+                <voa-tab-item position="${itemPosition}">Tab ${j + 1}</voa-tab-item>
+              `)}
+            </voa-tab>
+          </div>
+        `;
+    })}
+    </div>
+  `;
+};
+export const Horizontal = {
+    render: () => generateVariations('horizontal')
+};
+export const Vertical = {
+    args: {
+        position: "right"
+    },
+    render: (args) => generateVariations('vertical', args.position)
+};
+// ============================================
+// Navegação (> 9 itens)
+// ============================================
+export const WithNavigation = {
+    render: () => {
+        const scroll = (e, amount) => {
+            var _a;
+            // Find the container relative to the button to avoid ID conflicts
+            const button = e.currentTarget;
+            const container = (_a = button.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-scroll-container');
+            if (container) {
+                container.scrollBy({ left: amount, behavior: 'smooth' });
+            }
+        };
+        return html `
+      <div style="display: flex; align-items: center; gap: 8px; max-width: 100%;">
+        <button 
+          @click=${(e) => scroll(e, -100)} 
+          style="
+            padding: 8px 12px; 
+            cursor: pointer; 
+            border: 1px solid #ccc; 
+            background: #fff; 
+            border-radius: 4px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          "
+          aria-label="Scroll Left"
+        >
+          &lt;
+        </button>
+        
+        <div 
+          class="tab-scroll-container" 
+          style="
+            overflow-x: auto; 
+            white-space: nowrap; 
+            flex: 1; 
+            scrollbar-width: none; 
+            -ms-overflow-style: none;
+          "
+        >
+          <voa-tab direction="horizontal" activeIndex="0">
+            ${Array.from({ length: 15 }).map((_, i) => html `
+              <voa-tab-item>Tab ${i + 1}</voa-tab-item>
+            `)}
+          </voa-tab>
+        </div>
+
+        <button 
+          @click=${(e) => scroll(e, 100)} 
+          style="
+            padding: 8px 12px; 
+            cursor: pointer; 
+            border: 1px solid #ccc; 
+            background: #fff; 
+            border-radius: 4px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          "
+          aria-label="Scroll Right"
+        >
+          &gt;
+        </button>
+      </div>
+      <style>
+        .tab-scroll-container::-webkit-scrollbar {
+          display: none;
+        }
+      </style>
+    `;
+    }
+};
+// ============================================
+// Usage - Exemplos de Código
+// ============================================
+export const Usage = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## Uso do Componente
+
+Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:
+
+### HTML (Web Components)
+
+\`\`\`html
+<!-- Tab horizontal básico -->
+<voa-tab direction="horizontal" activeIndex="0">
+  <voa-tab-item>Tab 1</voa-tab-item>
+  <voa-tab-item>Tab 2</voa-tab-item>
+  <voa-tab-item>Tab 3</voa-tab-item>
+</voa-tab>
+
+<!-- Tab vertical -->
+<voa-tab direction="vertical" activeIndex="0">
+  <voa-tab-item position="left">Tab 1</voa-tab-item>
+  <voa-tab-item position="left">Tab 2</voa-tab-item>
+  <voa-tab-item position="left">Tab 3</voa-tab-item>
+</voa-tab>
+
+<!-- Tab com badge -->
+<voa-tab direction="horizontal" activeIndex="0">
+  <voa-tab-item>Tab 1</voa-tab-item>
+  <voa-tab-item show-badge badge-count="5">Tab 2</voa-tab-item>
+  <voa-tab-item>Tab 3</voa-tab-item>
+</voa-tab>
+
+<!-- Tab com item desabilitado -->
+<voa-tab direction="horizontal" activeIndex="0">
+  <voa-tab-item>Tab 1</voa-tab-item>
+  <voa-tab-item>Tab 2</voa-tab-item>
+  <voa-tab-item disabled>Tab 3</voa-tab-item>
+</voa-tab>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaTab, VoaTabItem } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const handleTabChange = (e: CustomEvent<number>) => {
+    setActiveIndex(e.detail);
+    console.log('Tab changed:', e.detail);
+  };
+
+  return (
+    <>
+      {/* Tab horizontal básico */}
+      <VoaTab direction="horizontal" activeIndex={activeIndex} onDsTabChange={handleTabChange}>
+        <VoaTabItem>Tab 1</VoaTabItem>
+        <VoaTabItem>Tab 2</VoaTabItem>
+        <VoaTabItem>Tab 3</VoaTabItem>
+      </VoaTab>
+
+      {/* Tab vertical */}
+      <VoaTab direction="vertical" activeIndex={activeIndex} onDsTabChange={handleTabChange}>
+        <VoaTabItem position="left">Tab 1</VoaTabItem>
+        <VoaTabItem position="left">Tab 2</VoaTabItem>
+        <VoaTabItem position="left">Tab 3</VoaTabItem>
+      </VoaTab>
+
+      {/* Tab com badge */}
+      <VoaTab direction="horizontal" activeIndex={activeIndex} onDsTabChange={handleTabChange}>
+        <VoaTabItem>Tab 1</VoaTabItem>
+        <VoaTabItem showBadge badgeCount={5}>Tab 2</VoaTabItem>
+        <VoaTabItem>Tab 3</VoaTabItem>
+      </VoaTab>
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaTab, VoaTabItem } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Tab horizontal básico -->
+    <voa-tab direction="horizontal" [activeIndex]="activeIndex" (dsTabChange)="handleTabChange($event)">
+      <voa-tab-item>Tab 1</voa-tab-item>
+      <voa-tab-item>Tab 2</voa-tab-item>
+      <voa-tab-item>Tab 3</voa-tab-item>
+    </voa-tab>
+
+    <!-- Tab vertical -->
+    <voa-tab direction="vertical" [activeIndex]="activeIndex" (dsTabChange)="handleTabChange($event)">
+      <voa-tab-item position="left">Tab 1</voa-tab-item>
+      <voa-tab-item position="left">Tab 2</voa-tab-item>
+      <voa-tab-item position="left">Tab 3</voa-tab-item>
+    </voa-tab>
+
+    <!-- Tab com badge -->
+    <voa-tab direction="horizontal" [activeIndex]="activeIndex" (dsTabChange)="handleTabChange($event)">
+      <voa-tab-item>Tab 1</voa-tab-item>
+      <voa-tab-item [showBadge]="true" [badgeCount]="5">Tab 2</voa-tab-item>
+      <voa-tab-item>Tab 3</voa-tab-item>
+    </voa-tab>
+  \`
+})
+export class ExampleComponent {
+  activeIndex = 0;
+
+  handleTabChange(event: CustomEvent<number>) {
+    this.activeIndex = event.detail;
+    console.log('Tab changed:', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Tab horizontal básico -->
+    <VoaTab direction="horizontal" :active-index="activeIndex" @dsTabChange="handleTabChange">
+      <VoaTabItem>Tab 1</VoaTabItem>
+      <VoaTabItem>Tab 2</VoaTabItem>
+      <VoaTabItem>Tab 3</VoaTabItem>
+    </VoaTab>
+
+    <!-- Tab vertical -->
+    <VoaTab direction="vertical" :active-index="activeIndex" @dsTabChange="handleTabChange">
+      <VoaTabItem position="left">Tab 1</VoaTabItem>
+      <VoaTabItem position="left">Tab 2</VoaTabItem>
+      <VoaTabItem position="left">Tab 3</VoaTabItem>
+    </VoaTab>
+
+    <!-- Tab com badge -->
+    <VoaTab direction="horizontal" :active-index="activeIndex" @dsTabChange="handleTabChange">
+      <VoaTabItem>Tab 1</VoaTabItem>
+      <VoaTabItem :show-badge="true" :badge-count="5">Tab 2</VoaTabItem>
+      <VoaTabItem>Tab 3</VoaTabItem>
+    </VoaTab>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaTab, VoaTabItem } from '@voa-ds/vue';
+
+const activeIndex = ref(0);
+
+const handleTabChange = (event: CustomEvent<number>) => {
+  activeIndex.value = event.detail;
+  console.log('Tab changed:', event.detail);
+};
+</script>
+\`\`\`
+
+## Instalação
+
+### HTML
+\`\`\`bash
+# NPM
+npm install @voa-ds/components
+
+# Importar no HTML
+<script type="module" src="https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js"></script>
+\`\`\`
+
+### React
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/react
+\`\`\`
+
+### Angular
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/angular
+\`\`\`
+
+### Vue
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/vue
+\`\`\`
+        `
+            }
+        }
+    },
+    render: () => html `
+    <div style="padding: 2rem; max-width: 100%;">
+      <h2 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;">Uso do Componente</h2>
+      <p style="margin-bottom: 2rem; color: #666;">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>
+      <h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;">Exemplo Interativo</h3>
+      <voa-tab direction="horizontal" activeIndex="0" style="margin-bottom: 2rem;">
+        <voa-tab-item>Tab 1</voa-tab-item>
+        <voa-tab-item>Tab 2</voa-tab-item>
+        <voa-tab-item>Tab 3</voa-tab-item>
+      </voa-tab>
+      <div style="margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;">
+        <p style="margin: 0; font-weight: 600; margin-bottom: 0.5rem;">📚 Documentação Completa</p>
+        <p style="margin: 0; color: #666; font-size: 0.9rem;">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href="?path=/docs/components-voatab--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-tab.stories.js.map

package/dist/collection/components/voa-tab/voa-tab.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tab.stories.js","sourceRoot":"","sources":["../../../src/components/voa-tab/voa-tab.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from \"@storybook/web-components\";\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-tab.external.css';\r\n\r\n/**\r\n * Componente Tab do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=545-553\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.\r\n */\r\nconst meta = {\r\n  title: \"Componentes/Navegação/Tabs\",\r\n  tags: ['autodocs'],\r\n  parameters: {\r\n    design: {\r\n      type: 'figma',\r\n      url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=545-553',\r\n    },\r\n  },\r\n  render: (args) => html`\r\n    <voa-tab\r\n      direction=\"${args.direction}\"\r\n      activeIndex=\"${args.activeIndex || 0}\"\r\n      @dsTabChange=${(e: Event) => console.log('Tab changed:', (e as CustomEvent).detail)}\r\n    >\r\n      ${Array.from({ length: args.itemCount || 3 }).map((_, i) => html`\r\n        <voa-tab-item\r\n          ?showBadge=${args.showBadge && i === 1}\r\n          badge-count=\"${args.showBadge && i === 1 ? args.badgeCount : ''}\"\r\n          ?disabled=${args.hasDisabled && i === (args.itemCount || 3) - 1}\r\n          position=\"${args.position}\"\r\n        >\r\n          Nome aba ${i + 1}\r\n        </voa-tab-item>\r\n      `)}\r\n    </voa-tab>\r\n  `,\r\n  argTypes: {\r\n    direction: {\r\n      control: 'select',\r\n      options: ['horizontal', 'vertical'],\r\n      description: 'Direção do layout dos tabs'\r\n    },\r\n    itemCount: {\r\n      control: { type: 'number', min: 1, max: 20, step: 1 },\r\n      description: 'Número de itens de tab'\r\n    },\r\n    activeIndex: {\r\n      control: { type: 'number', min: 0, max: 19 },\r\n      description: 'Índice do item ativo (modo controlado)'\r\n    },\r\n    showBadge: {\r\n      control: 'boolean',\r\n      description: 'Exibir badge no segundo item'\r\n    },\r\n    badgeCount: {\r\n      control: { type: 'number', min: 0, max: 99 },\r\n      description: 'Número a ser exibido no badge'\r\n    },\r\n    hasDisabled: {\r\n      control: 'boolean',\r\n      description: 'Incluir um item desabilitado'\r\n    },\r\n    position: {\r\n      control: 'select',\r\n      options: ['default', 'top', 'right', 'left'],\r\n      description: 'Posição do indicador de ativo (borda)'\r\n    },\r\n  },\r\n  args: {\r\n    direction: 'horizontal',\r\n    itemCount: 3,\r\n    showBadge: false,\r\n    badgeCount: 5,\r\n    hasDisabled: false,\r\n    position: 'default',\r\n  }\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\n// ============================================\r\n// História padrão\r\n// ============================================\r\n\r\nexport const Default: Story = {};\r\n\r\n// ============================================\r\n// Variações Numéricas\r\n// ============================================\r\n\r\nconst generateVariations = (direction: 'horizontal' | 'vertical', position?: string) => {\r\n  const itemPosition = position || (direction === 'vertical' ? 'left' : 'default');\r\n  return html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 2rem;\">\r\n      ${Array.from({ length: 9 }).map((_, i) => {\r\n    const count = i + 1;\r\n    return html`\r\n          <div>\r\n            <h4 style=\"margin-bottom: 0.5rem; font-family: sans-serif; color: #666;\">${count} Items</h4>\r\n            <voa-tab direction=\"${direction}\" activeIndex=\"0\">\r\n              ${Array.from({ length: count }).map((__, j) => html`\r\n                <voa-tab-item position=\"${itemPosition}\">Tab ${j + 1}</voa-tab-item>\r\n              `)}\r\n            </voa-tab>\r\n          </div>\r\n        `;\r\n  })}\r\n    </div>\r\n  `;\r\n};\r\n\r\nexport const Horizontal: Story = {\r\n  render: () => generateVariations('horizontal')\r\n};\r\n\r\nexport const Vertical: Story = {\r\n  args: {\r\n    position: \"right\"\r\n  },\r\n\r\n  render: (args) => generateVariations('vertical', args.position)\r\n};\r\n\r\n// ============================================\r\n// Navegação (> 9 itens)\r\n// ============================================\r\n\r\nexport const WithNavigation: Story = {\r\n  render: () => {\r\n    const scroll = (e: Event, amount: number) => {\r\n      // Find the container relative to the button to avoid ID conflicts\r\n      const button = e.currentTarget as HTMLElement;\r\n      const container = button.parentElement?.querySelector('.tab-scroll-container');\r\n      if (container) {\r\n        container.scrollBy({ left: amount, behavior: 'smooth' });\r\n      }\r\n    };\r\n\r\n    return html`\r\n      <div style=\"display: flex; align-items: center; gap: 8px; max-width: 100%;\">\r\n        <button \r\n          @click=${(e: Event) => scroll(e, -100)} \r\n          style=\"\r\n            padding: 8px 12px; \r\n            cursor: pointer; \r\n            border: 1px solid #ccc; \r\n            background: #fff; \r\n            border-radius: 4px;\r\n            font-weight: bold;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n          \"\r\n          aria-label=\"Scroll Left\"\r\n        >\r\n          &lt;\r\n        </button>\r\n        \r\n        <div \r\n          class=\"tab-scroll-container\" \r\n          style=\"\r\n            overflow-x: auto; \r\n            white-space: nowrap; \r\n            flex: 1; \r\n            scrollbar-width: none; \r\n            -ms-overflow-style: none;\r\n          \"\r\n        >\r\n          <voa-tab direction=\"horizontal\" activeIndex=\"0\">\r\n            ${Array.from({ length: 15 }).map((_, i) => html`\r\n              <voa-tab-item>Tab ${i + 1}</voa-tab-item>\r\n            `)}\r\n          </voa-tab>\r\n        </div>\r\n\r\n        <button \r\n          @click=${(e: Event) => scroll(e, 100)} \r\n          style=\"\r\n            padding: 8px 12px; \r\n            cursor: pointer; \r\n            border: 1px solid #ccc; \r\n            background: #fff; \r\n            border-radius: 4px;\r\n            font-weight: bold;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n          \"\r\n          aria-label=\"Scroll Right\"\r\n        >\r\n          &gt;\r\n        </button>\r\n      </div>\r\n      <style>\r\n        .tab-scroll-container::-webkit-scrollbar {\r\n          display: none;\r\n        }\r\n      </style>\r\n    `;\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: Story = {\r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        story: `\r\n## Uso do Componente\r\n\r\nEste componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n\r\n### HTML (Web Components)\r\n\r\n\\`\\`\\`html\r\n<!-- Tab horizontal básico -->\r\n<voa-tab direction=\"horizontal\" activeIndex=\"0\">\r\n  <voa-tab-item>Tab 1</voa-tab-item>\r\n  <voa-tab-item>Tab 2</voa-tab-item>\r\n  <voa-tab-item>Tab 3</voa-tab-item>\r\n</voa-tab>\r\n\r\n<!-- Tab vertical -->\r\n<voa-tab direction=\"vertical\" activeIndex=\"0\">\r\n  <voa-tab-item position=\"left\">Tab 1</voa-tab-item>\r\n  <voa-tab-item position=\"left\">Tab 2</voa-tab-item>\r\n  <voa-tab-item position=\"left\">Tab 3</voa-tab-item>\r\n</voa-tab>\r\n\r\n<!-- Tab com badge -->\r\n<voa-tab direction=\"horizontal\" activeIndex=\"0\">\r\n  <voa-tab-item>Tab 1</voa-tab-item>\r\n  <voa-tab-item show-badge badge-count=\"5\">Tab 2</voa-tab-item>\r\n  <voa-tab-item>Tab 3</voa-tab-item>\r\n</voa-tab>\r\n\r\n<!-- Tab com item desabilitado -->\r\n<voa-tab direction=\"horizontal\" activeIndex=\"0\">\r\n  <voa-tab-item>Tab 1</voa-tab-item>\r\n  <voa-tab-item>Tab 2</voa-tab-item>\r\n  <voa-tab-item disabled>Tab 3</voa-tab-item>\r\n</voa-tab>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaTab, VoaTabItem } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [activeIndex, setActiveIndex] = useState(0);\r\n\r\n  const handleTabChange = (e: CustomEvent<number>) => {\r\n    setActiveIndex(e.detail);\r\n    console.log('Tab changed:', e.detail);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Tab horizontal básico */}\r\n      <VoaTab direction=\"horizontal\" activeIndex={activeIndex} onDsTabChange={handleTabChange}>\r\n        <VoaTabItem>Tab 1</VoaTabItem>\r\n        <VoaTabItem>Tab 2</VoaTabItem>\r\n        <VoaTabItem>Tab 3</VoaTabItem>\r\n      </VoaTab>\r\n\r\n      {/* Tab vertical */}\r\n      <VoaTab direction=\"vertical\" activeIndex={activeIndex} onDsTabChange={handleTabChange}>\r\n        <VoaTabItem position=\"left\">Tab 1</VoaTabItem>\r\n        <VoaTabItem position=\"left\">Tab 2</VoaTabItem>\r\n        <VoaTabItem position=\"left\">Tab 3</VoaTabItem>\r\n      </VoaTab>\r\n\r\n      {/* Tab com badge */}\r\n      <VoaTab direction=\"horizontal\" activeIndex={activeIndex} onDsTabChange={handleTabChange}>\r\n        <VoaTabItem>Tab 1</VoaTabItem>\r\n        <VoaTabItem showBadge badgeCount={5}>Tab 2</VoaTabItem>\r\n        <VoaTabItem>Tab 3</VoaTabItem>\r\n      </VoaTab>\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaTab, VoaTabItem } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Tab horizontal básico -->\r\n    <voa-tab direction=\"horizontal\" [activeIndex]=\"activeIndex\" (dsTabChange)=\"handleTabChange($event)\">\r\n      <voa-tab-item>Tab 1</voa-tab-item>\r\n      <voa-tab-item>Tab 2</voa-tab-item>\r\n      <voa-tab-item>Tab 3</voa-tab-item>\r\n    </voa-tab>\r\n\r\n    <!-- Tab vertical -->\r\n    <voa-tab direction=\"vertical\" [activeIndex]=\"activeIndex\" (dsTabChange)=\"handleTabChange($event)\">\r\n      <voa-tab-item position=\"left\">Tab 1</voa-tab-item>\r\n      <voa-tab-item position=\"left\">Tab 2</voa-tab-item>\r\n      <voa-tab-item position=\"left\">Tab 3</voa-tab-item>\r\n    </voa-tab>\r\n\r\n    <!-- Tab com badge -->\r\n    <voa-tab direction=\"horizontal\" [activeIndex]=\"activeIndex\" (dsTabChange)=\"handleTabChange($event)\">\r\n      <voa-tab-item>Tab 1</voa-tab-item>\r\n      <voa-tab-item [showBadge]=\"true\" [badgeCount]=\"5\">Tab 2</voa-tab-item>\r\n      <voa-tab-item>Tab 3</voa-tab-item>\r\n    </voa-tab>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  activeIndex = 0;\r\n\r\n  handleTabChange(event: CustomEvent<number>) {\r\n    this.activeIndex = event.detail;\r\n    console.log('Tab changed:', event.detail);\r\n  }\r\n}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- Tab horizontal básico -->\r\n    <VoaTab direction=\"horizontal\" :active-index=\"activeIndex\" @dsTabChange=\"handleTabChange\">\r\n      <VoaTabItem>Tab 1</VoaTabItem>\r\n      <VoaTabItem>Tab 2</VoaTabItem>\r\n      <VoaTabItem>Tab 3</VoaTabItem>\r\n    </VoaTab>\r\n\r\n    <!-- Tab vertical -->\r\n    <VoaTab direction=\"vertical\" :active-index=\"activeIndex\" @dsTabChange=\"handleTabChange\">\r\n      <VoaTabItem position=\"left\">Tab 1</VoaTabItem>\r\n      <VoaTabItem position=\"left\">Tab 2</VoaTabItem>\r\n      <VoaTabItem position=\"left\">Tab 3</VoaTabItem>\r\n    </VoaTab>\r\n\r\n    <!-- Tab com badge -->\r\n    <VoaTab direction=\"horizontal\" :active-index=\"activeIndex\" @dsTabChange=\"handleTabChange\">\r\n      <VoaTabItem>Tab 1</VoaTabItem>\r\n      <VoaTabItem :show-badge=\"true\" :badge-count=\"5\">Tab 2</VoaTabItem>\r\n      <VoaTabItem>Tab 3</VoaTabItem>\r\n    </VoaTab>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaTab, VoaTabItem } from '@voa-ds/vue';\r\n\r\nconst activeIndex = ref(0);\r\n\r\nconst handleTabChange = (event: CustomEvent<number>) => {\r\n  activeIndex.value = event.detail;\r\n  console.log('Tab changed:', event.detail);\r\n};\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n        `\r\n      }\r\n    }\r\n  },\r\n  render: () => html`\r\n    <div style=\"padding: 2rem; max-width: 100%;\">\r\n      <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n      <p style=\"margin-bottom: 2rem; color: #666;\">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>\r\n      <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n      <voa-tab direction=\"horizontal\" activeIndex=\"0\" style=\"margin-bottom: 2rem;\">\r\n        <voa-tab-item>Tab 1</voa-tab-item>\r\n        <voa-tab-item>Tab 2</voa-tab-item>\r\n        <voa-tab-item>Tab 3</voa-tab-item>\r\n      </voa-tab>\r\n      <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\r\n        <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n        <p style=\"margin: 0; color: #666; font-size: 0.9rem;\">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href=\"?path=/docs/components-voatab--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.</p>\r\n      </div>\r\n    </div>\r\n  `\r\n};\r\n\r\n"]}

package/dist/collection/components/voa-tab-item/voa-tab-item.css

@@ -0,0 +1,52 @@
+/* * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).
+ * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally
+ * via CSS Parts API (::part() selectors) using design tokens.
+ * * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.
+ * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.
+ */
+
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.voa-tab-item {
+  /* APENAS estilos estruturais */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  /* Gap estrutural para espaçamento entre label e badge */
+  gap: 0;
+  /* Layout flex para garantir alinhamento correto */
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.voa-tab-item--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.voa-tab-item__label {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.voa-tab-item__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.voa-tab-item__badge-text {
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+}