voa-ds-core 1.0.3

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

@@ -0,0 +1,387 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../Stories/styles/voa-badge.external.css";
+const meta = {
+    title: "Componentes/Feedback/Badge",
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-3352',
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['icon-only', 'indicator', 'indicator-overlay', 'indicator-only', 'plain', 'icons'],
+            description: 'Variante do badge conforme Figma. As variantes do Figma são: icon-only, indicator, indicator-overlay, indicator-only.',
+        },
+        shape: {
+            control: 'select',
+            options: ['default', 'pill'],
+            description: 'Forma do badge (state no Figma)',
+        },
+        size: {
+            control: 'select',
+            options: ['md', 'sm'],
+            description: 'Tamanho do badge',
+        },
+        count: {
+            control: 'number',
+            description: 'Número a ser exibido (para variantes indicator e indicator-overlay)',
+        },
+        icon: {
+            control: 'select',
+            options: ['success', 'warning', 'error', 'info', 'close', 'check', 'star', 'heart', 'bell'],
+            description: 'Ícone a ser exibido (para variantes icon-only e icons)',
+        },
+        label: {
+            control: 'text',
+            description: 'Texto do badge (para variantes plain e icons)',
+        },
+    },
+    render: (args) => html `
+    <voa-badge
+      variant=${ifDefined(args.variant)}
+      label=${ifDefined(args.label)}
+      count=${ifDefined(args.count)}
+      icon=${ifDefined(args.icon)}
+      shape=${ifDefined(args.shape)}
+      size=${ifDefined(args.size)}
+    ></voa-badge>
+  `,
+};
+export default meta;
+// Story padrão para playground - Icon Only (default no Figma)
+export const Playground = {
+    args: {
+        variant: 'icon-only',
+        icon: 'check',
+        size: 'md',
+        shape: 'default',
+    },
+};
+// ============================================
+// Variantes do Figma
+// ============================================
+// Badge com apenas ícone (Type=icon-only) - Default no Figma
+export const IconOnly = {
+    args: {
+        variant: 'icon-only',
+        icon: 'check',
+        size: 'md',
+        shape: 'default',
+    },
+};
+// Badge com apenas ícone - Pill
+export const IconOnlyPill = {
+    args: {
+        variant: 'icon-only',
+        icon: 'check',
+        size: 'md',
+        shape: 'pill',
+    },
+};
+// Badge com apenas ícone - Small
+export const IconOnlySmall = {
+    args: {
+        variant: 'icon-only',
+        icon: 'check',
+        size: 'sm',
+        shape: 'default',
+    },
+};
+// Badge com contador (Type=indicator)
+export const Indicator = {
+    args: {
+        variant: 'indicator',
+        count: 0,
+        size: 'md',
+        shape: 'default',
+    },
+};
+// Badge com contador - Pill
+export const IndicatorPill = {
+    args: {
+        variant: 'indicator',
+        count: 0,
+        size: 'md',
+        shape: 'pill',
+    },
+};
+// Badge com contador - Small
+export const IndicatorSmall = {
+    args: {
+        variant: 'indicator',
+        count: 0,
+        size: 'sm',
+        shape: 'default',
+    },
+};
+// Badge com contador e overlay (Type=indicator-overlay) - Fundo vermelho
+export const IndicatorOverlay = {
+    args: {
+        variant: 'indicator-overlay',
+        count: 0,
+        size: 'md',
+        shape: 'default',
+    },
+};
+// Badge com contador e overlay - Pill
+export const IndicatorOverlayPill = {
+    args: {
+        variant: 'indicator-overlay',
+        count: 0,
+        size: 'md',
+        shape: 'pill',
+    },
+};
+// Badge com contador e overlay - Small
+export const IndicatorOverlaySmall = {
+    args: {
+        variant: 'indicator-overlay',
+        count: 0,
+        size: 'sm',
+        shape: 'default',
+    },
+};
+// Badge com indicador apenas (Type=indicator-only) - Apenas ponto vermelho
+export const IndicatorOnly = {
+    args: {
+        variant: 'indicator-only',
+    },
+};
+// ============================================
+// Variantes Legado (retrocompatibilidade)
+// ============================================
+// Badge com texto (plain) - Não existe no Figma atual
+export const Plain = {
+    args: {
+        variant: 'plain',
+        label: 'Badge',
+        size: 'md',
+    },
+};
+// Badge com texto e ícones (icons) - Não existe no Figma atual
+export const WithIcons = {
+    args: {
+        variant: 'icons',
+        label: 'Badge com ícone',
+        icon: 'star',
+        size: 'md',
+    },
+};
+// Badge com forma pill (usando plain)
+export const Pill = {
+    args: {
+        variant: 'indicator',
+        count: 5,
+        shape: 'pill',
+        size: 'md',
+    },
+};
+// ============================================
+// 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
+<!-- Badge com ícone (icon-only) -->
+<voa-badge variant="icon-only" icon="check"></voa-badge>
+
+<!-- Badge com ícone - Pill -->
+<voa-badge variant="icon-only" icon="check" shape="pill"></voa-badge>
+
+<!-- Badge indicador -->
+<voa-badge variant="indicator" count="5"></voa-badge>
+
+<!-- Badge indicador overlay (fundo vermelho) -->
+<voa-badge variant="indicator-overlay" count="5"></voa-badge>
+
+<!-- Badge indicador apenas (ponto vermelho) -->
+<voa-badge variant="indicator-only"></voa-badge>
+
+<!-- Badge indicador pill -->
+<voa-badge variant="indicator" count="0" shape="pill"></voa-badge>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaBadge } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Badge com ícone (icon-only) */}
+      <VoaBadge variant="icon-only" icon="check" />
+
+      {/* Badge com ícone - Pill */}
+      <VoaBadge variant="icon-only" icon="check" shape="pill" />
+
+      {/* Badge indicador */}
+      <VoaBadge variant="indicator" count={5} />
+
+      {/* Badge indicador overlay (fundo vermelho) */}
+      <VoaBadge variant="indicator-overlay" count={5} />
+
+      {/* Badge indicador apenas (ponto vermelho) */}
+      <VoaBadge variant="indicator-only" />
+
+      {/* Badge indicador pill */}
+      <VoaBadge variant="indicator" count={0} shape="pill" />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaBadge } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Badge com ícone (icon-only) -->
+    <voa-badge variant="icon-only" icon="check"></voa-badge>
+
+    <!-- Badge com ícone - Pill -->
+    <voa-badge variant="icon-only" icon="check" shape="pill"></voa-badge>
+
+    <!-- Badge indicador -->
+    <voa-badge variant="indicator" [count]="5"></voa-badge>
+
+    <!-- Badge indicador overlay (fundo vermelho) -->
+    <voa-badge variant="indicator-overlay" [count]="5"></voa-badge>
+
+    <!-- Badge indicador apenas (ponto vermelho) -->
+    <voa-badge variant="indicator-only"></voa-badge>
+
+    <!-- Badge indicador pill -->
+    <voa-badge variant="indicator" [count]="0" shape="pill"></voa-badge>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <!-- Badge com ícone (icon-only) -->
+  <VoaBadge variant="icon-only" icon="check" />
+
+  <!-- Badge com ícone - Pill -->
+  <VoaBadge variant="icon-only" icon="check" shape="pill" />
+
+  <!-- Badge indicador -->
+  <VoaBadge variant="indicator" :count="5" />
+
+  <!-- Badge indicador overlay (fundo vermelho) -->
+  <VoaBadge variant="indicator-overlay" :count="5" />
+
+  <!-- Badge indicador apenas (ponto vermelho) -->
+  <VoaBadge variant="indicator-only" />
+
+  <!-- Badge indicador pill -->
+  <VoaBadge variant="indicator" :count="0" shape="pill" />
+</template>
+
+<script setup lang="ts">
+import { VoaBadge } from '@voa-ds/vue';
+</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;">
+        Exemplos Interativos - Variantes do Figma
+      </h3>
+      
+      <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 2rem;">
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <voa-badge variant="icon-only" icon="check" size="md"></voa-badge>
+          <span style="font-size: 12px; color: #666;">icon-only</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <voa-badge variant="icon-only" icon="check" size="md" shape="pill"></voa-badge>
+          <span style="font-size: 12px; color: #666;">icon-only pill</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <voa-badge variant="indicator" count="0" size="md"></voa-badge>
+          <span style="font-size: 12px; color: #666;">indicator</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <voa-badge variant="indicator-overlay" count="0" size="md"></voa-badge>
+          <span style="font-size: 12px; color: #666;">indicator-overlay</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <voa-badge variant="indicator" count="0" size="md" shape="pill"></voa-badge>
+          <span style="font-size: 12px; color: #666;">indicator pill</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <voa-badge variant="indicator-overlay" count="0" size="md" shape="pill"></voa-badge>
+          <span style="font-size: 12px; color: #666;">indicator-overlay pill</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <voa-badge variant="indicator-only"></voa-badge>
+          <span style="font-size: 12px; color: #666;">indicator-only</span>
+        </div>
+      </div>
+      
+      <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-voa-badge--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.
+        </p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-badge.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-badge.stories.js","sourceRoot":"","sources":["../../../src/components/voa-badge/voa-badge.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 type { VoaBadge } from './voa-badge';\r\nimport '../../Stories/styles/voa-badge.external.css';\r\n\r\nconst meta: Meta = {\r\n  title: \"Componentes/Feedback/Badge\",\r\n  parameters: {\r\n    design: {\r\n      type: 'figma',\r\n      url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-3352',\r\n    },\r\n  },\r\n  argTypes: {\r\n    variant: {\r\n      control: 'select',\r\n      options: ['icon-only', 'indicator', 'indicator-overlay', 'indicator-only', 'plain', 'icons'],\r\n      description: 'Variante do badge conforme Figma. As variantes do Figma são: icon-only, indicator, indicator-overlay, indicator-only.',\r\n    },\r\n    shape: {\r\n      control: 'select',\r\n      options: ['default', 'pill'],\r\n      description: 'Forma do badge (state no Figma)',\r\n    },\r\n    size: {\r\n      control: 'select',\r\n      options: ['md', 'sm'],\r\n      description: 'Tamanho do badge',\r\n    },\r\n    count: {\r\n      control: 'number',\r\n      description: 'Número a ser exibido (para variantes indicator e indicator-overlay)',\r\n    },\r\n    icon: {\r\n      control: 'select',\r\n      options: ['success', 'warning', 'error', 'info', 'close', 'check', 'star', 'heart', 'bell'],\r\n      description: 'Ícone a ser exibido (para variantes icon-only e icons)',\r\n    },\r\n    label: {\r\n      control: 'text',\r\n      description: 'Texto do badge (para variantes plain e icons)',\r\n    },\r\n  },\r\n  render: (args) => html`\r\n    <voa-badge\r\n      variant=${ifDefined(args.variant)}\r\n      label=${ifDefined(args.label)}\r\n      count=${ifDefined(args.count)}\r\n      icon=${ifDefined(args.icon)}\r\n      shape=${ifDefined(args.shape)}\r\n      size=${ifDefined(args.size)}\r\n    ></voa-badge>\r\n  `,\r\n};\r\nexport default meta;\r\ntype Story = StoryObj<VoaBadge>;\r\n\r\n// Story padrão para playground - Icon Only (default no Figma)\r\nexport const Playground: Story = {\r\n  args: {\r\n    variant: 'icon-only',\r\n    icon: 'check',\r\n    size: 'md',\r\n    shape: 'default',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Variantes do Figma\r\n// ============================================\r\n\r\n// Badge com apenas ícone (Type=icon-only) - Default no Figma\r\nexport const IconOnly: Story = {\r\n  args: {\r\n    variant: 'icon-only',\r\n    icon: 'check',\r\n    size: 'md',\r\n    shape: 'default',\r\n  },\r\n};\r\n\r\n// Badge com apenas ícone - Pill\r\nexport const IconOnlyPill: Story = {\r\n  args: {\r\n    variant: 'icon-only',\r\n    icon: 'check',\r\n    size: 'md',\r\n    shape: 'pill',\r\n  },\r\n};\r\n\r\n// Badge com apenas ícone - Small\r\nexport const IconOnlySmall: Story = {\r\n  args: {\r\n    variant: 'icon-only',\r\n    icon: 'check',\r\n    size: 'sm',\r\n    shape: 'default',\r\n  },\r\n};\r\n\r\n// Badge com contador (Type=indicator)\r\nexport const Indicator: Story = {\r\n  args: {\r\n    variant: 'indicator',\r\n    count: 0,\r\n    size: 'md',\r\n    shape: 'default',\r\n  },\r\n};\r\n\r\n// Badge com contador - Pill\r\nexport const IndicatorPill: Story = {\r\n  args: {\r\n    variant: 'indicator',\r\n    count: 0,\r\n    size: 'md',\r\n    shape: 'pill',\r\n  },\r\n};\r\n\r\n// Badge com contador - Small\r\nexport const IndicatorSmall: Story = {\r\n  args: {\r\n    variant: 'indicator',\r\n    count: 0,\r\n    size: 'sm',\r\n    shape: 'default',\r\n  },\r\n};\r\n\r\n// Badge com contador e overlay (Type=indicator-overlay) - Fundo vermelho\r\nexport const IndicatorOverlay: Story = {\r\n  args: {\r\n    variant: 'indicator-overlay',\r\n    count: 0,\r\n    size: 'md',\r\n    shape: 'default',\r\n  },\r\n};\r\n\r\n// Badge com contador e overlay - Pill\r\nexport const IndicatorOverlayPill: Story = {\r\n  args: {\r\n    variant: 'indicator-overlay',\r\n    count: 0,\r\n    size: 'md',\r\n    shape: 'pill',\r\n  },\r\n};\r\n\r\n// Badge com contador e overlay - Small\r\nexport const IndicatorOverlaySmall: Story = {\r\n  args: {\r\n    variant: 'indicator-overlay',\r\n    count: 0,\r\n    size: 'sm',\r\n    shape: 'default',\r\n  },\r\n};\r\n\r\n// Badge com indicador apenas (Type=indicator-only) - Apenas ponto vermelho\r\nexport const IndicatorOnly: Story = {\r\n  args: {\r\n    variant: 'indicator-only',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Variantes Legado (retrocompatibilidade)\r\n// ============================================\r\n\r\n// Badge com texto (plain) - Não existe no Figma atual\r\nexport const Plain: Story = {\r\n  args: {\r\n    variant: 'plain',\r\n    label: 'Badge',\r\n    size: 'md',\r\n  },\r\n};\r\n\r\n// Badge com texto e ícones (icons) - Não existe no Figma atual\r\nexport const WithIcons: Story = {\r\n  args: {\r\n    variant: 'icons',\r\n    label: 'Badge com ícone',\r\n    icon: 'star',\r\n    size: 'md',\r\n  },\r\n};\r\n\r\n// Badge com forma pill (usando plain)\r\nexport const Pill: Story = {\r\n  args: {\r\n    variant: 'indicator',\r\n    count: 5,\r\n    shape: 'pill',\r\n    size: 'md',\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<!-- Badge com ícone (icon-only) -->\r\n<voa-badge variant=\"icon-only\" icon=\"check\"></voa-badge>\r\n\r\n<!-- Badge com ícone - Pill -->\r\n<voa-badge variant=\"icon-only\" icon=\"check\" shape=\"pill\"></voa-badge>\r\n\r\n<!-- Badge indicador -->\r\n<voa-badge variant=\"indicator\" count=\"5\"></voa-badge>\r\n\r\n<!-- Badge indicador overlay (fundo vermelho) -->\r\n<voa-badge variant=\"indicator-overlay\" count=\"5\"></voa-badge>\r\n\r\n<!-- Badge indicador apenas (ponto vermelho) -->\r\n<voa-badge variant=\"indicator-only\"></voa-badge>\r\n\r\n<!-- Badge indicador pill -->\r\n<voa-badge variant=\"indicator\" count=\"0\" shape=\"pill\"></voa-badge>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaBadge } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Badge com ícone (icon-only) */}\r\n      <VoaBadge variant=\"icon-only\" icon=\"check\" />\r\n\r\n      {/* Badge com ícone - Pill */}\r\n      <VoaBadge variant=\"icon-only\" icon=\"check\" shape=\"pill\" />\r\n\r\n      {/* Badge indicador */}\r\n      <VoaBadge variant=\"indicator\" count={5} />\r\n\r\n      {/* Badge indicador overlay (fundo vermelho) */}\r\n      <VoaBadge variant=\"indicator-overlay\" count={5} />\r\n\r\n      {/* Badge indicador apenas (ponto vermelho) */}\r\n      <VoaBadge variant=\"indicator-only\" />\r\n\r\n      {/* Badge indicador pill */}\r\n      <VoaBadge variant=\"indicator\" count={0} shape=\"pill\" />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaBadge } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Badge com ícone (icon-only) -->\r\n    <voa-badge variant=\"icon-only\" icon=\"check\"></voa-badge>\r\n\r\n    <!-- Badge com ícone - Pill -->\r\n    <voa-badge variant=\"icon-only\" icon=\"check\" shape=\"pill\"></voa-badge>\r\n\r\n    <!-- Badge indicador -->\r\n    <voa-badge variant=\"indicator\" [count]=\"5\"></voa-badge>\r\n\r\n    <!-- Badge indicador overlay (fundo vermelho) -->\r\n    <voa-badge variant=\"indicator-overlay\" [count]=\"5\"></voa-badge>\r\n\r\n    <!-- Badge indicador apenas (ponto vermelho) -->\r\n    <voa-badge variant=\"indicator-only\"></voa-badge>\r\n\r\n    <!-- Badge indicador pill -->\r\n    <voa-badge variant=\"indicator\" [count]=\"0\" shape=\"pill\"></voa-badge>\r\n  \\`\r\n})\r\nexport class ExampleComponent {}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <!-- Badge com ícone (icon-only) -->\r\n  <VoaBadge variant=\"icon-only\" icon=\"check\" />\r\n\r\n  <!-- Badge com ícone - Pill -->\r\n  <VoaBadge variant=\"icon-only\" icon=\"check\" shape=\"pill\" />\r\n\r\n  <!-- Badge indicador -->\r\n  <VoaBadge variant=\"indicator\" :count=\"5\" />\r\n\r\n  <!-- Badge indicador overlay (fundo vermelho) -->\r\n  <VoaBadge variant=\"indicator-overlay\" :count=\"5\" />\r\n\r\n  <!-- Badge indicador apenas (ponto vermelho) -->\r\n  <VoaBadge variant=\"indicator-only\" />\r\n\r\n  <!-- Badge indicador pill -->\r\n  <VoaBadge variant=\"indicator\" :count=\"0\" shape=\"pill\" />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaBadge } from '@voa-ds/vue';\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;\">\r\n        Uso do Componente\r\n      </h2>\r\n      <p style=\"margin-bottom: 2rem; color: #666;\">\r\n        Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n      </p>\r\n      \r\n      <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">\r\n        Exemplos Interativos - Variantes do Figma\r\n      </h3>\r\n      \r\n      <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 2rem;\">\r\n        <div style=\"display: flex; flex-direction: column; align-items: center; gap: 8px;\">\r\n          <voa-badge variant=\"icon-only\" icon=\"check\" size=\"md\"></voa-badge>\r\n          <span style=\"font-size: 12px; color: #666;\">icon-only</span>\r\n        </div>\r\n        <div style=\"display: flex; flex-direction: column; align-items: center; gap: 8px;\">\r\n          <voa-badge variant=\"icon-only\" icon=\"check\" size=\"md\" shape=\"pill\"></voa-badge>\r\n          <span style=\"font-size: 12px; color: #666;\">icon-only pill</span>\r\n        </div>\r\n        <div style=\"display: flex; flex-direction: column; align-items: center; gap: 8px;\">\r\n          <voa-badge variant=\"indicator\" count=\"0\" size=\"md\"></voa-badge>\r\n          <span style=\"font-size: 12px; color: #666;\">indicator</span>\r\n        </div>\r\n        <div style=\"display: flex; flex-direction: column; align-items: center; gap: 8px;\">\r\n          <voa-badge variant=\"indicator-overlay\" count=\"0\" size=\"md\"></voa-badge>\r\n          <span style=\"font-size: 12px; color: #666;\">indicator-overlay</span>\r\n        </div>\r\n        <div style=\"display: flex; flex-direction: column; align-items: center; gap: 8px;\">\r\n          <voa-badge variant=\"indicator\" count=\"0\" size=\"md\" shape=\"pill\"></voa-badge>\r\n          <span style=\"font-size: 12px; color: #666;\">indicator pill</span>\r\n        </div>\r\n        <div style=\"display: flex; flex-direction: column; align-items: center; gap: 8px;\">\r\n          <voa-badge variant=\"indicator-overlay\" count=\"0\" size=\"md\" shape=\"pill\"></voa-badge>\r\n          <span style=\"font-size: 12px; color: #666;\">indicator-overlay pill</span>\r\n        </div>\r\n        <div style=\"display: flex; flex-direction: column; align-items: center; gap: 8px;\">\r\n          <voa-badge variant=\"indicator-only\"></voa-badge>\r\n          <span style=\"font-size: 12px; color: #666;\">indicator-only</span>\r\n        </div>\r\n      </div>\r\n      \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;\">\r\n          Para ver exemplos de código completos para HTML, React, Angular e Vue, \r\n          <a href=\"?path=/docs/components-voa-badge--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  `\r\n};\r\n"]}

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

@@ -0,0 +1,29 @@
+/* 
+ * 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-breadcrumbs {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.breadcrumbs-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap; /* Breadcrumbs should wrap on small screens */
+  margin: 0;
+  padding: 0;
+  list-style: none; /* Remove default list numbers */
+  gap: 0; /* Gaps handled by items */
+}
+

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

@@ -0,0 +1,58 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Componente de breadcrumbs (navegação estrutural).
+ * Baseado no design do Figma (node-id: 443-10022).
+ * * @slot default - Items do breadcrumb (voa-breadcrumbs-item)
+ */
+export class VoaBreadcrumbs {
+    constructor() {
+        /**
+         * Variante visual do breadcrumb.
+         */
+        this.type = 'default';
+    }
+    render() {
+        return (h(Host, { key: 'c200bcb5b1cee06222ae5a51a5ad5418dd73f68c' }, h("nav", { key: '3e302797bacdd137c2cacf786e49074e9bb9a85a', part: "base", "aria-label": "Breadcrumb", class: {
+                'voa-breadcrumbs': true,
+                [`voa-breadcrumbs--${this.type}`]: true,
+            } }, h("ol", { key: 'bffbacbe69cec2da8410a9f28ad9fb76b896ac3a', part: "list", class: "breadcrumbs-list" }, h("slot", { key: 'b629e8573b851c5d9b3bb802f4b40bcc5620bb99' })))));
+    }
+    static get is() { return "voa-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-breadcrumbs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'round' | 'outline'",
+                    "resolved": "\"default\" | \"outline\" | \"round\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante visual do breadcrumb."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/voa-breadcrumbs/voa-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;GAIG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAQE;;WAEG;QACsB,SAAI,GAAoC,SAAS,CAAC;KAuB5E;IArBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YAIH,4DACE,IAAI,EAAC,MAAM,gBACA,YAAY,EACvB,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;iBACxC;gBAED,2DAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB;oBACtC,8DAAa,CACV,CACD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente de breadcrumbs (navegação estrutural).\r\n * Baseado no design do Figma (node-id: 443-10022).\r\n * * @slot default - Items do breadcrumb (voa-breadcrumbs-item)\r\n */\r\n@Component({\r\n  tag: 'voa-breadcrumbs',\r\n  styleUrl: 'voa-breadcrumbs.css',\r\n  shadow: true,\r\n})\r\nexport class VoaBreadcrumbs {\r\n  @Element() host: HTMLVoaBreadcrumbsElement;\r\n\r\n  /**\r\n   * Variante visual do breadcrumb.\r\n   */\r\n  @Prop({ reflect: true }) type: 'default' | 'round' | 'outline' = 'default';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {/* Using <nav> and <ol> is the Semantic Standard for Breadcrumbs. \r\n          Screen readers will announce \"Navigation, list, X items\".\r\n        */}\r\n        <nav\r\n          part=\"base\"\r\n          aria-label=\"Breadcrumb\"\r\n          class={{\r\n            'voa-breadcrumbs': true,\r\n            [`voa-breadcrumbs--${this.type}`]: true,\r\n          }}\r\n        >\r\n          <ol part=\"list\" class=\"breadcrumbs-list\">\r\n            <slot></slot>\r\n          </ol>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"]}