voa-ds-core 1.0.4

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

@@ -0,0 +1,359 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../tokens/global.css";
+// Make sure this path aligns with where you actually put the external CSS file
+import "../../Stories/styles/voa-switch.external.css";
+const meta = {
+    title: "Componentes/Formulários/Switch",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=443-10259',
+        },
+        docs: {
+            description: {
+                component: `
+Este componente é "unstyled" e pode ser estilizado usando CSS Custom Properties (de \`@voa-ds/tokens\`)
+direcionando os seguintes seletores CSS \`::part()\`:
+
+- \`base\`: O elemento raiz do switch (elemento <button>)
+- \`track\`: O container do switch (40px x 20px)
+- \`thumb\`: O elemento circular que se move (16px)
+- \`shadow\`: A sombra interna (pseudo-elemento)
+- \`label\`: O wrapper do texto do label (quando showLabel=true)
+
+**Exemplo de estilização:**
+
+\`\`\`css
+@import '@voa-ds/tokens/global.css';
+@import '@voa-ds/styles/voa-switch.external.css';
+
+voa-switch::part(track) {
+  width: 40px;
+  height: 20px;
+  border-radius: var(--radius-round);
+  background-color: var(--brand-base);
+  border: 1px solid var(--structure-colors-fill-secondary);
+}
+
+voa-switch::part(thumb) {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-round);
+  background-color: var(--brand-secondary);
+}
+\`\`\`
+        `
+            }
+        }
+    },
+    render: (args) => html `
+    <voa-switch
+      ?checked=${args.checked}
+      ?disabled=${args.disabled}
+      ?showLabel=${args.showLabel}
+      .name=${ifDefined(args.name)}
+      .value=${ifDefined(args.value)}
+      @dsChange=${args.onDsChange}
+    >
+      ${args.label ? args.label : ''}
+    </voa-switch>
+  `,
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Se verdadeiro, o switch estará ligado (checked)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Se verdadeiro, o switch estará desabilitado',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showLabel: {
+            control: 'boolean',
+            description: 'Se verdadeiro, o label será exibido',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        name: {
+            control: 'text',
+            description: 'Nome do switch para formulários',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'Valor do switch para formulários',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: 'text',
+            description: 'Conteúdo do label do switch',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onDsChange: {
+            action: 'dsChange',
+            description: 'Emitido quando o estado do switch muda (segue o padrão ds*)',
+            table: {
+                type: { summary: 'CustomEvent<boolean>' },
+            },
+        },
+    },
+    args: {
+        checked: false,
+        disabled: false,
+        showLabel: false,
+        label: 'Opção',
+    },
+};
+export default meta;
+// Story padrão - Switch off, sem label
+export const Default = {};
+// Switch on, sem label
+export const Checked = {
+    args: {
+        checked: true,
+    },
+};
+// Switch com label
+export const WithLabel = {
+    args: {
+        showLabel: true,
+        label: 'Opção',
+    },
+};
+// Switch on com label
+export const WithLabelChecked = {
+    args: {
+        checked: true,
+        showLabel: true,
+        label: 'Opção',
+    },
+};
+// Switch desabilitado (off)
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};
+// Switch desabilitado (on)
+export const DisabledChecked = {
+    args: {
+        checked: true,
+        disabled: true,
+    },
+};
+// Switch desabilitado com label
+export const WithLabelDisabled = {
+    args: {
+        disabled: true,
+        showLabel: true,
+        label: 'Opção',
+    },
+};
+// Switch com nome e valor
+export const WithNameAndValue = {
+    args: {
+        name: 'switch-group',
+        value: 'switch-value',
+        showLabel: true,
+        label: 'Switch com nome e valor',
+    },
+};
+// ============================================
+// 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
+<!-- Switch básico -->
+<voa-switch 
+  checked
+  show-label
+  label="Ativar notificações"
+  ondsChange={(e) => console.log('Changed', e.detail)}
+></voa-switch>
+
+<!-- Switch desabilitado -->
+<voa-switch 
+  checked
+  disabled
+  show-label
+  label="Opção desabilitada"
+></voa-switch>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaSwitch } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [checked, setChecked] = useState(false);
+
+  const handleChange = (e: CustomEvent<boolean>) => {
+    setChecked(e.detail);
+    console.log('Changed', e.detail);
+  };
+
+  return (
+    <>
+      {/* Switch básico */}
+      <VoaSwitch
+        checked={checked}
+        showLabel
+        label="Ativar notificações"
+        onDsChange={handleChange}
+      />
+
+      {/* Switch desabilitado */}
+      <VoaSwitch
+        checked={true}
+        disabled
+        showLabel
+        label="Opção desabilitada"
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaSwitch } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Switch básico -->
+    <voa-switch
+      [checked]="checked"
+      [showLabel]="true"
+      [label]="'Ativar notificações'"
+      (dsChange)="handleChange($event)"
+    ></voa-switch>
+
+    <!-- Switch desabilitado -->
+    <voa-switch
+      [checked]="true"
+      [disabled]="true"
+      [showLabel]="true"
+      [label]="'Opção desabilitada'"
+    ></voa-switch>
+  \`
+})
+export class ExampleComponent {
+  checked = false;
+
+  handleChange(event: CustomEvent<boolean>) {
+    this.checked = event.detail;
+    console.log('Changed', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Switch básico -->
+    <VoaSwitch
+      v-model:checked="checked"
+      :show-label="true"
+      label="Ativar notificações"
+      @dsChange="handleChange"
+    />
+
+    <!-- Switch desabilitado -->
+    <VoaSwitch
+      :checked="true"
+      :disabled="true"
+      :show-label="true"
+      label="Opção desabilitada"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaSwitch } from '@voa-ds/vue';
+
+const checked = ref(false);
+
+const handleChange = (event: CustomEvent<boolean>) => {
+  checked.value = event.detail;
+  console.log('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-switch checked showLabel label="Exemplo de Uso" style="margin-bottom: 2rem;"></voa-switch>
+      <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-voaswitch--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-switch.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-switch.stories.js","sourceRoot":"","sources":["../../../src/components/voa-switch/voa-switch.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport '../../tokens/global.css';\r\n// Make sure this path aligns with where you actually put the external CSS file\r\nimport '../../Stories/styles/voa-switch.external.css';\r\n\r\n/**\r\n * Componente Switch do Voa Design System.\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\ninterface SwitchArgs {\r\n  checked: boolean;\r\n  disabled: boolean;\r\n  showLabel: boolean;\r\n  name?: string;\r\n  value?: string;\r\n  label?: string;\r\n  onDsChange?: (e: CustomEvent) => void;\r\n}\r\n\r\nconst meta = {\r\n  title: \"Componentes/Formulários/Switch\",\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=443-10259',\r\n    },\r\n    docs: {\r\n      description: {\r\n        component: `\r\nEste componente é \"unstyled\" e pode ser estilizado usando CSS Custom Properties (de \\`@voa-ds/tokens\\`)\r\ndirecionando os seguintes seletores CSS \\`::part()\\`:\r\n\r\n- \\`base\\`: O elemento raiz do switch (elemento <button>)\r\n- \\`track\\`: O container do switch (40px x 20px)\r\n- \\`thumb\\`: O elemento circular que se move (16px)\r\n- \\`shadow\\`: A sombra interna (pseudo-elemento)\r\n- \\`label\\`: O wrapper do texto do label (quando showLabel=true)\r\n\r\n**Exemplo de estilização:**\r\n\r\n\\`\\`\\`css\r\n@import '@voa-ds/tokens/global.css';\r\n@import '@voa-ds/styles/voa-switch.external.css';\r\n\r\nvoa-switch::part(track) {\r\n  width: 40px;\r\n  height: 20px;\r\n  border-radius: var(--radius-round);\r\n  background-color: var(--brand-base);\r\n  border: 1px solid var(--structure-colors-fill-secondary);\r\n}\r\n\r\nvoa-switch::part(thumb) {\r\n  width: 16px;\r\n  height: 16px;\r\n  border-radius: var(--radius-round);\r\n  background-color: var(--brand-secondary);\r\n}\r\n\\`\\`\\`\r\n        `\r\n      }\r\n    }\r\n  },\r\n  render: (args: SwitchArgs) => html`\r\n    <voa-switch\r\n      ?checked=${args.checked}\r\n      ?disabled=${args.disabled}\r\n      ?showLabel=${args.showLabel}\r\n      .name=${ifDefined(args.name)}\r\n      .value=${ifDefined(args.value)}\r\n      @dsChange=${args.onDsChange}\r\n    >\r\n      ${args.label ? args.label : ''}\r\n    </voa-switch>\r\n  `,\r\n  argTypes: {\r\n    checked: {\r\n      control: 'boolean',\r\n      description: 'Se verdadeiro, o switch estará ligado (checked)',\r\n      table: {\r\n        type: { summary: 'boolean' },\r\n        defaultValue: { summary: 'false' },\r\n      },\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n      description: 'Se verdadeiro, o switch estará desabilitado',\r\n      table: {\r\n        type: { summary: 'boolean' },\r\n        defaultValue: { summary: 'false' },\r\n      },\r\n    },\r\n    showLabel: {\r\n      control: 'boolean',\r\n      description: 'Se verdadeiro, o label será exibido',\r\n      table: {\r\n        type: { summary: 'boolean' },\r\n        defaultValue: { summary: 'false' },\r\n      },\r\n    },\r\n    name: {\r\n      control: 'text',\r\n      description: 'Nome do switch para formulários',\r\n      table: {\r\n        type: { summary: 'string' },\r\n      },\r\n    },\r\n    value: {\r\n      control: 'text',\r\n      description: 'Valor do switch para formulários',\r\n      table: {\r\n        type: { summary: 'string' },\r\n      },\r\n    },\r\n    label: {\r\n      control: 'text',\r\n      description: 'Conteúdo do label do switch',\r\n      table: {\r\n        type: { summary: 'string' },\r\n      },\r\n    },\r\n    onDsChange: {\r\n      action: 'dsChange',\r\n      description: 'Emitido quando o estado do switch muda (segue o padrão ds*)',\r\n      table: {\r\n        type: { summary: 'CustomEvent<boolean>' },\r\n      },\r\n    },\r\n  },\r\n  args: {\r\n    checked: false,\r\n    disabled: false,\r\n    showLabel: false,\r\n    label: 'Opção',\r\n  },\r\n} satisfies Meta<SwitchArgs>;\r\n\r\nexport default meta;\r\ntype Story = StoryObj<SwitchArgs>;\r\n\r\n// Story padrão - Switch off, sem label\r\nexport const Default: Story = {};\r\n\r\n// Switch on, sem label\r\nexport const Checked: Story = {\r\n  args: {\r\n    checked: true,\r\n  },\r\n};\r\n\r\n// Switch com label\r\nexport const WithLabel: Story = {\r\n  args: {\r\n    showLabel: true,\r\n    label: 'Opção',\r\n  },\r\n};\r\n\r\n// Switch on com label\r\nexport const WithLabelChecked: Story = {\r\n  args: {\r\n    checked: true,\r\n    showLabel: true,\r\n    label: 'Opção',\r\n  },\r\n};\r\n\r\n// Switch desabilitado (off)\r\nexport const Disabled: Story = {\r\n  args: {\r\n    disabled: true,\r\n  },\r\n};\r\n\r\n// Switch desabilitado (on)\r\nexport const DisabledChecked: Story = {\r\n  args: {\r\n    checked: true,\r\n    disabled: true,\r\n  },\r\n};\r\n\r\n// Switch desabilitado com label\r\nexport const WithLabelDisabled: Story = {\r\n  args: {\r\n    disabled: true,\r\n    showLabel: true,\r\n    label: 'Opção',\r\n  },\r\n};\r\n\r\n// Switch com nome e valor\r\nexport const WithNameAndValue: Story = {\r\n  args: {\r\n    name: 'switch-group',\r\n    value: 'switch-value',\r\n    showLabel: true,\r\n    label: 'Switch com nome e valor',\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<!-- Switch básico -->\r\n<voa-switch \r\n  checked\r\n  show-label\r\n  label=\"Ativar notificações\"\r\n  ondsChange={(e) => console.log('Changed', e.detail)}\r\n></voa-switch>\r\n\r\n<!-- Switch desabilitado -->\r\n<voa-switch \r\n  checked\r\n  disabled\r\n  show-label\r\n  label=\"Opção desabilitada\"\r\n></voa-switch>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaSwitch } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [checked, setChecked] = useState(false);\r\n\r\n  const handleChange = (e: CustomEvent<boolean>) => {\r\n    setChecked(e.detail);\r\n    console.log('Changed', e.detail);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Switch básico */}\r\n      <VoaSwitch\r\n        checked={checked}\r\n        showLabel\r\n        label=\"Ativar notificações\"\r\n        onDsChange={handleChange}\r\n      />\r\n\r\n      {/* Switch desabilitado */}\r\n      <VoaSwitch\r\n        checked={true}\r\n        disabled\r\n        showLabel\r\n        label=\"Opção desabilitada\"\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaSwitch } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Switch básico -->\r\n    <voa-switch\r\n      [checked]=\"checked\"\r\n      [showLabel]=\"true\"\r\n      [label]=\"'Ativar notificações'\"\r\n      (dsChange)=\"handleChange($event)\"\r\n    ></voa-switch>\r\n\r\n    <!-- Switch desabilitado -->\r\n    <voa-switch\r\n      [checked]=\"true\"\r\n      [disabled]=\"true\"\r\n      [showLabel]=\"true\"\r\n      [label]=\"'Opção desabilitada'\"\r\n    ></voa-switch>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  checked = false;\r\n\r\n  handleChange(event: CustomEvent<boolean>) {\r\n    this.checked = event.detail;\r\n    console.log('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    <!-- Switch básico -->\r\n    <VoaSwitch\r\n      v-model:checked=\"checked\"\r\n      :show-label=\"true\"\r\n      label=\"Ativar notificações\"\r\n      @dsChange=\"handleChange\"\r\n    />\r\n\r\n    <!-- Switch desabilitado -->\r\n    <VoaSwitch\r\n      :checked=\"true\"\r\n      :disabled=\"true\"\r\n      :show-label=\"true\"\r\n      label=\"Opção desabilitada\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaSwitch } from '@voa-ds/vue';\r\n\r\nconst checked = ref(false);\r\n\r\nconst handleChange = (event: CustomEvent<boolean>) => {\r\n  checked.value = event.detail;\r\n  console.log('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-switch checked showLabel label=\"Exemplo de Uso\" style=\"margin-bottom: 2rem;\"></voa-switch>\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-voaswitch--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};"]}

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

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+.tab-container {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.tab-list {
+  display: flex;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Orientation Modifiers */
+.tab-horizontal .tab-list {
+  flex-direction: row;
+  align-items: flex-end; /* Common alignment for tabs sitting on a line */
+}
+
+.tab-vertical {
+  display: flex; /* Container becomes flex in vertical to allow content next to it if needed */
+}
+
+.tab-vertical .tab-list {
+  flex-direction: column;
+  width: auto; /* Shrink to fit items */
+}

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

@@ -0,0 +1,209 @@
+import { Host, h } from "@stencil/core";
+export class VoaTab {
+    constructor() {
+        this.direction = 'horizontal';
+        /**
+         * Internal state for uncontrolled mode.
+         */
+        this.internalIndex = 0;
+        /**
+         * Listens for children being added/removed from the slot.
+         */
+        this.handleSlotChange = () => {
+            this.syncChildren();
+        };
+        this.handleKeyDown = (event) => {
+            const tabs = this.getTabs();
+            if (tabs.length === 0)
+                return;
+            const isVertical = this.direction === 'vertical';
+            const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+            const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+            let nextIndex = this.internalIndex;
+            if (event.key === nextKey) {
+                event.preventDefault();
+                nextIndex = this.internalIndex + 1;
+                if (nextIndex >= tabs.length)
+                    nextIndex = 0;
+            }
+            else if (event.key === prevKey) {
+                event.preventDefault();
+                nextIndex = this.internalIndex - 1;
+                if (nextIndex < 0)
+                    nextIndex = tabs.length - 1;
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                nextIndex = 0;
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                nextIndex = tabs.length - 1;
+            }
+            else {
+                return;
+            }
+            // Simple skip for disabled tabs (moves to the one requested, if disabled, does nothing in this simple version)
+            // In production, you'd want a while loop to find the next non-disabled index.
+            const targetTab = tabs[nextIndex];
+            if (targetTab.disabled || targetTab.state === 'disabled') {
+                return;
+            }
+            this.activateTab(nextIndex);
+            tabs[nextIndex].setFocus();
+        };
+    }
+    handleActiveIndexChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalIndex = newValue;
+            this.syncChildren();
+        }
+    }
+    componentDidLoad() {
+        if (this.activeIndex !== undefined) {
+            this.internalIndex = this.activeIndex;
+        }
+        this.syncChildren();
+    }
+    /**
+     * Listens for the child emitting its click event.
+     */
+    handleTabSelected(event) {
+        const target = event.target;
+        const tabs = this.getTabs();
+        const index = tabs.indexOf(target);
+        // Ensure we don't activate disabled tabs (double check)
+        if (index > -1 && !target.disabled && target.state !== 'disabled') {
+            this.activateTab(index);
+        }
+    }
+    getTabs() {
+        return Array.from(this.host.querySelectorAll('voa-tab-item'));
+    }
+    /**
+     * Updates the `state` prop of all children based on current selection.
+     * Handles the 'active' | 'default' | 'disabled' string logic.
+     */
+    syncChildren() {
+        const tabs = this.getTabs();
+        tabs.forEach((tab, index) => {
+            // Never overwrite 'disabled' state
+            if (tab.disabled || tab.state === 'disabled') {
+                return;
+            }
+            // Set active or default
+            if (index === this.internalIndex) {
+                tab.state = 'active';
+            }
+            else {
+                tab.state = 'default';
+            }
+        });
+    }
+    activateTab(index) {
+        this.internalIndex = index;
+        this.syncChildren();
+        this.dsTabChange.emit({ index });
+    }
+    render() {
+        return (h(Host, { key: '6f6c95f8e33913a9f739534fc2d3fdf8b5cc7d29', role: "tablist", "aria-orientation": this.direction, onKeyDown: this.handleKeyDown }, h("div", { key: '4cb4c2937ba9a368ef37b53bc01e15ca0b1867db', part: "base", class: {
+                'tab-container': true,
+                [`tab-${this.direction}`]: true
+            } }, h("div", { key: 'dc98c574d6f450f37c136740541d56e223f0eb1c', part: "list", class: "tab-list" }, h("slot", { key: 'afd443dffc7138cb143f59079c377a09d22b2907', onSlotchange: this.handleSlotChange })))));
+    }
+    static get is() { return "voa-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "activeIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled mode active index."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-index"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsTabChange",
+                "name": "dsTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the active tab changes."
+                },
+                "complexType": {
+                    "original": "{ index: number }",
+                    "resolved": "{ index: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeIndex",
+                "methodName": "handleActiveIndexChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "tabClick",
+                "method": "handleTabSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=voa-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tab.js","sourceRoot":"","sources":["../../../src/components/voa-tab/voa-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-tab',\r\n  styleUrl: 'voa-tab.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTab {\r\n  @Element() host: HTMLVoaTabElement;\r\n\r\n  @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\r\n\r\n  /**\r\n   * Controlled mode active index.\r\n   */\r\n  @Prop() activeIndex: number;\r\n\r\n  /**\r\n   * Event emitted when the active tab changes.\r\n   */\r\n  @Event() dsTabChange: EventEmitter<{ index: number }>;\r\n\r\n  /**\r\n   * Internal state for uncontrolled mode.\r\n   */\r\n  @State() internalIndex: number = 0;\r\n\r\n  @Watch('activeIndex')\r\n  handleActiveIndexChange(newValue: number) {\r\n    if (newValue !== undefined) {\r\n      this.internalIndex = newValue;\r\n      this.syncChildren();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.activeIndex !== undefined) {\r\n      this.internalIndex = this.activeIndex;\r\n    }\r\n    this.syncChildren();\r\n  }\r\n\r\n  /**\r\n   * Listens for children being added/removed from the slot.\r\n   */\r\n  private handleSlotChange = () => {\r\n    this.syncChildren();\r\n  };\r\n\r\n  /**\r\n   * Listens for the child emitting its click event.\r\n   */\r\n  @Listen('tabClick')\r\n  handleTabSelected(event: CustomEvent) {\r\n    const target = event.target as HTMLVoaTabItemElement;\r\n    const tabs = this.getTabs();\r\n    const index = tabs.indexOf(target);\r\n\r\n    // Ensure we don't activate disabled tabs (double check)\r\n    if (index > -1 && !target.disabled && target.state !== 'disabled') {\r\n      this.activateTab(index);\r\n    }\r\n  }\r\n\r\n  private getTabs() {\r\n    return Array.from(this.host.querySelectorAll('voa-tab-item'));\r\n  }\r\n\r\n  /**\r\n   * Updates the `state` prop of all children based on current selection.\r\n   * Handles the 'active' | 'default' | 'disabled' string logic.\r\n   */\r\n  private syncChildren() {\r\n    const tabs = this.getTabs();\r\n    tabs.forEach((tab, index) => {\r\n      // Never overwrite 'disabled' state\r\n      if (tab.disabled || tab.state === 'disabled') {\r\n        return; \r\n      }\r\n      \r\n      // Set active or default\r\n      if (index === this.internalIndex) {\r\n        tab.state = 'active';\r\n      } else {\r\n        tab.state = 'default';\r\n      }\r\n    });\r\n  }\r\n\r\n  private activateTab(index: number) {\r\n    this.internalIndex = index;\r\n    this.syncChildren();\r\n    this.dsTabChange.emit({ index });\r\n  }\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    const tabs = this.getTabs();\r\n    if (tabs.length === 0) return;\r\n\r\n    const isVertical = this.direction === 'vertical';\r\n    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';\r\n    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';\r\n\r\n    let nextIndex = this.internalIndex;\r\n\r\n    if (event.key === nextKey) {\r\n      event.preventDefault();\r\n      nextIndex = this.internalIndex + 1;\r\n      if (nextIndex >= tabs.length) nextIndex = 0;\r\n    } else if (event.key === prevKey) {\r\n      event.preventDefault();\r\n      nextIndex = this.internalIndex - 1;\r\n      if (nextIndex < 0) nextIndex = tabs.length - 1;\r\n    } else if (event.key === 'Home') {\r\n      event.preventDefault();\r\n      nextIndex = 0;\r\n    } else if (event.key === 'End') {\r\n      event.preventDefault();\r\n      nextIndex = tabs.length - 1;\r\n    } else {\r\n      return;\r\n    }\r\n\r\n    // Simple skip for disabled tabs (moves to the one requested, if disabled, does nothing in this simple version)\r\n    // In production, you'd want a while loop to find the next non-disabled index.\r\n    const targetTab = tabs[nextIndex];\r\n    if (targetTab.disabled || targetTab.state === 'disabled') {\r\n       return; \r\n    }\r\n\r\n    this.activateTab(nextIndex);\r\n    tabs[nextIndex].setFocus();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host \r\n        role=\"tablist\" \r\n        aria-orientation={this.direction}\r\n        onKeyDown={this.handleKeyDown}\r\n      >\r\n        <div part=\"base\" class={{\r\n            'tab-container': true,\r\n            [`tab-${this.direction}`]: true\r\n        }}>\r\n          <div part=\"list\" class=\"tab-list\">\r\n            <slot onSlotchange={this.handleSlotChange} />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"]}