voa-ds-core 1.0.3

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

@@ -0,0 +1,410 @@
+import { html } from "lit";
+import "../../Stories/styles/voa-breadcrumbs.external.css";
+/**
+ * Home icon SVG inline (matches Figma design)
+ */
+const homeIcon = html `
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="display: block;">
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+  </svg>
+`;
+const meta = {
+    title: "Componentes/Navegação/Breadcrumbs",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=443-10022',
+        },
+    },
+    argTypes: {
+        type: { control: 'radio', options: ['default', 'round', 'outline'] }
+    },
+    args: {
+        type: 'default'
+    }
+};
+export default meta;
+/**
+ * All Variants - Grid layout matching Figma design (node-id: 443-10022)
+ *
+ * Shows all 8 combinations:
+ * - Type: default / round
+ * - Icon-first: false / true (home icon)
+ * - Long: false / true (collapsed with "...")
+ */
+export const AllVariants = {
+    render: () => html `
+    <style>
+      .variants-grid {
+        display: grid;
+        grid-template-columns: repeat(2, auto);
+        gap: 24px;
+        padding: 24px;
+        background: #18181b;
+        border-radius: 8px;
+      }
+      .variant-label {
+        font-size: 10px;
+        color: #9f9fa8;
+        margin-bottom: 8px;
+        font-family: 'Lato', sans-serif;
+      }
+      .variant-item {
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+    
+    <div class="variants-grid">
+      <!-- Row 1: Type=default, Icon-first=false, Long=false -->
+      <div class="variant-item">
+        <div class="variant-label">Type=default, Icon-first=false, Long=false</div>
+        <voa-breadcrumbs type="default">
+          <voa-breadcrumbs-item href="/">Principal</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="/nivel1">Nível 1</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="/nivel2">Nível 2</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+
+      <!-- Row 1: Type=round, Icon-first=false, Long=false -->
+      <div class="variant-item">
+        <div class="variant-label">Type=round, Icon-first=false, Long=false</div>
+        <voa-breadcrumbs type="round">
+          <voa-breadcrumbs-item href="/">Principal</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="/nivel1">Nível 1</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="/nivel2">Nível 2</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+
+      <!-- Row 2: Type=default, Icon-first=false, Long=true -->
+      <div class="variant-item">
+        <div class="variant-label">Type=default, Icon-first=false, Long=true</div>
+        <voa-breadcrumbs type="default">
+          <voa-breadcrumbs-item href="/">Principal</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item>...</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+
+      <!-- Row 2: Type=round, Icon-first=false, Long=true -->
+      <div class="variant-item">
+        <div class="variant-label">Type=round, Icon-first=false, Long=true</div>
+        <voa-breadcrumbs type="round">
+          <voa-breadcrumbs-item href="/">Principal</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item>...</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+
+      <!-- Row 3: Type=default, Icon-first=true, Long=false -->
+      <div class="variant-item">
+        <div class="variant-label">Type=default, Icon-first=true, Long=false</div>
+        <voa-breadcrumbs type="default">
+          <voa-breadcrumbs-item href="/">${homeIcon}</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="/nivel1">Nível 1</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="/nivel2">Nível 2</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+
+      <!-- Row 3: Type=round, Icon-first=true, Long=false -->
+      <div class="variant-item">
+        <div class="variant-label">Type=round, Icon-first=true, Long=false</div>
+        <voa-breadcrumbs type="round">
+          <voa-breadcrumbs-item href="/">${homeIcon}</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="/nivel1">Nível 1</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="/nivel2">Nível 2</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+
+      <!-- Row 4: Type=default, Icon-first=true, Long=true -->
+      <div class="variant-item">
+        <div class="variant-label">Type=default, Icon-first=true, Long=true</div>
+        <voa-breadcrumbs type="default">
+          <voa-breadcrumbs-item href="/">${homeIcon}</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item>...</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+
+      <!-- Row 4: Type=round, Icon-first=true, Long=true -->
+      <div class="variant-item">
+        <div class="variant-label">Type=round, Icon-first=true, Long=true</div>
+        <voa-breadcrumbs type="round">
+          <voa-breadcrumbs-item href="/">${homeIcon}</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item>...</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+    </div>
+  `
+};
+/**
+ * Default variant - Standard breadcrumbs with white background
+ */
+export const Default = {
+    render: (args) => html `
+    <voa-breadcrumbs type="${args.type}">
+      <voa-breadcrumbs-item href="/">Home</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>
+    </voa-breadcrumbs>
+  `
+};
+/**
+ * Round variant - Pill-shaped container with dark background
+ */
+export const Round = {
+    args: {
+        type: 'round'
+    },
+    render: (args) => html `
+    <voa-breadcrumbs type="${args.type}">
+      <voa-breadcrumbs-item href="/">Home</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>
+    </voa-breadcrumbs>
+  `
+};
+/**
+ * Outline variant - Bordered container with transparent background
+ */
+export const Outline = {
+    args: {
+        type: 'outline'
+    },
+    render: (args) => html `
+    <voa-breadcrumbs type="${args.type}">
+      <voa-breadcrumbs-item href="/">Home</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>
+    </voa-breadcrumbs>
+  `
+};
+/**
+ * With Home Icon - Using home icon as first item
+ */
+export const WithHomeIcon = {
+    render: (args) => html `
+    <voa-breadcrumbs type="${args.type}">
+      <voa-breadcrumbs-item href="/">${homeIcon}</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>
+    </voa-breadcrumbs>
+  `
+};
+/**
+ * Collapsed (Long) - Using "..." to indicate hidden items
+ */
+export const Collapsed = {
+    render: (args) => html `
+    <voa-breadcrumbs type="${args.type}">
+      <voa-breadcrumbs-item href="/">Principal</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item>...</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>
+    </voa-breadcrumbs>
+  `
+};
+/**
+ * Custom Separator - Using a custom separator via slot
+ */
+export const CustomSeparator = {
+    render: (args) => html `
+    <voa-breadcrumbs type="${args.type}">
+      <voa-breadcrumbs-item href="/">
+        Home
+        <span slot="separator" style="color: #9f9fa8;">/</span>
+      </voa-breadcrumbs-item>
+      
+      <voa-breadcrumbs-item href="/components">
+        Settings
+        <span slot="separator" style="color: #9f9fa8;">/</span>
+      </voa-breadcrumbs-item>
+      
+      <voa-breadcrumbs-item active>
+        Profile
+      </voa-breadcrumbs-item>
+    </voa-breadcrumbs>
+  `
+};
+// ============================================
+// 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
+<!-- Breadcrumbs básico -->
+<voa-breadcrumbs type="default">
+  <voa-breadcrumbs-item href="/">Home</voa-breadcrumbs-item>
+  <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+  <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>
+</voa-breadcrumbs>
+
+<!-- Breadcrumbs com ícone home -->
+<voa-breadcrumbs type="default">
+  <voa-breadcrumbs-item href="/">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+    </svg>
+  </voa-breadcrumbs-item>
+  <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+  <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>
+</voa-breadcrumbs>
+
+<!-- Breadcrumbs round -->
+<voa-breadcrumbs type="round">
+  <voa-breadcrumbs-item href="/">Home</voa-breadcrumbs-item>
+  <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+  <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>
+</voa-breadcrumbs>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaBreadcrumbs, VoaBreadcrumbsItem } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Breadcrumbs básico */}
+      <VoaBreadcrumbs type="default">
+        <VoaBreadcrumbsItem href="/">Home</VoaBreadcrumbsItem>
+        <VoaBreadcrumbsItem href="/components">Components</VoaBreadcrumbsItem>
+        <VoaBreadcrumbsItem active>Breadcrumbs</VoaBreadcrumbsItem>
+      </VoaBreadcrumbs>
+
+      {/* Breadcrumbs com ícone home */}
+      <VoaBreadcrumbs type="default">
+        <VoaBreadcrumbsItem href="/">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+          </svg>
+        </VoaBreadcrumbsItem>
+        <VoaBreadcrumbsItem href="/components">Components</VoaBreadcrumbsItem>
+        <VoaBreadcrumbsItem active>Breadcrumbs</VoaBreadcrumbsItem>
+      </VoaBreadcrumbs>
+
+      {/* Breadcrumbs round */}
+      <VoaBreadcrumbs type="round">
+        <VoaBreadcrumbsItem href="/">Home</VoaBreadcrumbsItem>
+        <VoaBreadcrumbsItem href="/components">Components</VoaBreadcrumbsItem>
+        <VoaBreadcrumbsItem active>Breadcrumbs</VoaBreadcrumbsItem>
+      </VoaBreadcrumbs>
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaBreadcrumbs, VoaBreadcrumbsItem } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Breadcrumbs básico -->
+    <voa-breadcrumbs type="default">
+      <voa-breadcrumbs-item href="/">Home</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item [active]="true">Breadcrumbs</voa-breadcrumbs-item>
+    </voa-breadcrumbs>
+
+    <!-- Breadcrumbs round -->
+    <voa-breadcrumbs type="round">
+      <voa-breadcrumbs-item href="/">Home</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+      <voa-breadcrumbs-item [active]="true">Breadcrumbs</voa-breadcrumbs-item>
+    </voa-breadcrumbs>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Breadcrumbs básico -->
+    <VoaBreadcrumbs type="default">
+      <VoaBreadcrumbsItem href="/">Home</VoaBreadcrumbsItem>
+      <VoaBreadcrumbsItem href="/components">Components</VoaBreadcrumbsItem>
+      <VoaBreadcrumbsItem :active="true">Breadcrumbs</VoaBreadcrumbsItem>
+    </VoaBreadcrumbs>
+
+    <!-- Breadcrumbs round -->
+    <VoaBreadcrumbs type="round">
+      <VoaBreadcrumbsItem href="/">Home</VoaBreadcrumbsItem>
+      <VoaBreadcrumbsItem href="/components">Components</VoaBreadcrumbsItem>
+      <VoaBreadcrumbsItem :active="true">Breadcrumbs</VoaBreadcrumbsItem>
+    </VoaBreadcrumbs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoaBreadcrumbs, VoaBreadcrumbsItem } 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;">Exemplo Interativo</h3>
+      <voa-breadcrumbs type="default" style="margin-bottom: 2rem;">
+        <voa-breadcrumbs-item href="/">Home</voa-breadcrumbs-item>
+        <voa-breadcrumbs-item href="/components">Components</voa-breadcrumbs-item>
+        <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>
+      </voa-breadcrumbs>
+      <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-voabreadcrumbs--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-breadcrumbs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-breadcrumbs.stories.js","sourceRoot":"","sources":["../../../src/components/voa-breadcrumbs/voa-breadcrumbs.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,mDAAmD,CAAC;AAE3D;;GAEG;AACH,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;CAIpB,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,mCAAmC;IAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,yFAAyF;SAC/F;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE;KACrE;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;KAChB;CACa,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAqEuB,QAAQ;;;;;;;;;;;2CAWR,QAAQ;;;;;;;;;;;2CAWR,QAAQ;;;;;;;;;;2CAUR,QAAQ;;;;;;GAMhD;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;6BACK,IAAI,CAAC,IAAI;;;;;GAKnC;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;6BACK,IAAI,CAAC,IAAI;;;;;GAKnC;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;KAChB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;6BACK,IAAI,CAAC,IAAI;;;;;GAKnC;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;6BACK,IAAI,CAAC,IAAI;uCACC,QAAQ;;;;GAI5C;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;6BACK,IAAI,CAAC,IAAI;;;;;GAKnC;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;6BACK,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;GAenC;CACF,CAAC;AAEF,+CAA+C;AAC/C,6BAA6B;AAC7B,+CAA+C;AAE/C,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoJN;aACF;SACF;KACF;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;GAejB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-breadcrumbs.external.css';\r\n\r\n/**\r\n * Home icon SVG inline (matches Figma design)\r\n */\r\nconst homeIcon = html`\r\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"display: block;\">\r\n    <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/>\r\n  </svg>\r\n`;\r\n\r\nconst meta = {\r\n  title: \"Componentes/Navegação/Breadcrumbs\",\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-10022',\r\n    },\r\n  },\r\n  argTypes: {\r\n    type: { control: 'radio', options: ['default', 'round', 'outline'] }\r\n  },\r\n  args: {\r\n    type: '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 * All Variants - Grid layout matching Figma design (node-id: 443-10022)\r\n * \r\n * Shows all 8 combinations:\r\n * - Type: default / round\r\n * - Icon-first: false / true (home icon)\r\n * - Long: false / true (collapsed with \"...\")\r\n */\r\nexport const AllVariants: Story = {\r\n  render: () => html`\r\n    <style>\r\n      .variants-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, auto);\r\n        gap: 24px;\r\n        padding: 24px;\r\n        background: #18181b;\r\n        border-radius: 8px;\r\n      }\r\n      .variant-label {\r\n        font-size: 10px;\r\n        color: #9f9fa8;\r\n        margin-bottom: 8px;\r\n        font-family: 'Lato', sans-serif;\r\n      }\r\n      .variant-item {\r\n        display: flex;\r\n        flex-direction: column;\r\n      }\r\n    </style>\r\n    \r\n    <div class=\"variants-grid\">\r\n      <!-- Row 1: Type=default, Icon-first=false, Long=false -->\r\n      <div class=\"variant-item\">\r\n        <div class=\"variant-label\">Type=default, Icon-first=false, Long=false</div>\r\n        <voa-breadcrumbs type=\"default\">\r\n          <voa-breadcrumbs-item href=\"/\">Principal</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"/nivel1\">Nível 1</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"/nivel2\">Nível 2</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n\r\n      <!-- Row 1: Type=round, Icon-first=false, Long=false -->\r\n      <div class=\"variant-item\">\r\n        <div class=\"variant-label\">Type=round, Icon-first=false, Long=false</div>\r\n        <voa-breadcrumbs type=\"round\">\r\n          <voa-breadcrumbs-item href=\"/\">Principal</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"/nivel1\">Nível 1</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"/nivel2\">Nível 2</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n\r\n      <!-- Row 2: Type=default, Icon-first=false, Long=true -->\r\n      <div class=\"variant-item\">\r\n        <div class=\"variant-label\">Type=default, Icon-first=false, Long=true</div>\r\n        <voa-breadcrumbs type=\"default\">\r\n          <voa-breadcrumbs-item href=\"/\">Principal</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item>...</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n\r\n      <!-- Row 2: Type=round, Icon-first=false, Long=true -->\r\n      <div class=\"variant-item\">\r\n        <div class=\"variant-label\">Type=round, Icon-first=false, Long=true</div>\r\n        <voa-breadcrumbs type=\"round\">\r\n          <voa-breadcrumbs-item href=\"/\">Principal</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item>...</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n\r\n      <!-- Row 3: Type=default, Icon-first=true, Long=false -->\r\n      <div class=\"variant-item\">\r\n        <div class=\"variant-label\">Type=default, Icon-first=true, Long=false</div>\r\n        <voa-breadcrumbs type=\"default\">\r\n          <voa-breadcrumbs-item href=\"/\">${homeIcon}</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"/nivel1\">Nível 1</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"/nivel2\">Nível 2</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n\r\n      <!-- Row 3: Type=round, Icon-first=true, Long=false -->\r\n      <div class=\"variant-item\">\r\n        <div class=\"variant-label\">Type=round, Icon-first=true, Long=false</div>\r\n        <voa-breadcrumbs type=\"round\">\r\n          <voa-breadcrumbs-item href=\"/\">${homeIcon}</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"/nivel1\">Nível 1</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item href=\"/nivel2\">Nível 2</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n\r\n      <!-- Row 4: Type=default, Icon-first=true, Long=true -->\r\n      <div class=\"variant-item\">\r\n        <div class=\"variant-label\">Type=default, Icon-first=true, Long=true</div>\r\n        <voa-breadcrumbs type=\"default\">\r\n          <voa-breadcrumbs-item href=\"/\">${homeIcon}</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item>...</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n\r\n      <!-- Row 4: Type=round, Icon-first=true, Long=true -->\r\n      <div class=\"variant-item\">\r\n        <div class=\"variant-label\">Type=round, Icon-first=true, Long=true</div>\r\n        <voa-breadcrumbs type=\"round\">\r\n          <voa-breadcrumbs-item href=\"/\">${homeIcon}</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item>...</voa-breadcrumbs-item>\r\n          <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n        </voa-breadcrumbs>\r\n      </div>\r\n    </div>\r\n  `\r\n};\r\n\r\n/**\r\n * Default variant - Standard breadcrumbs with white background\r\n */\r\nexport const Default: Story = {\r\n  render: (args) => html`\r\n    <voa-breadcrumbs type=\"${args.type}\">\r\n      <voa-breadcrumbs-item href=\"/\">Home</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>\r\n    </voa-breadcrumbs>\r\n  `\r\n};\r\n\r\n/**\r\n * Round variant - Pill-shaped container with dark background\r\n */\r\nexport const Round: Story = {\r\n  args: {\r\n    type: 'round'\r\n  },\r\n  render: (args) => html`\r\n    <voa-breadcrumbs type=\"${args.type}\">\r\n      <voa-breadcrumbs-item href=\"/\">Home</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>\r\n    </voa-breadcrumbs>\r\n  `\r\n};\r\n\r\n/**\r\n * Outline variant - Bordered container with transparent background\r\n */\r\nexport const Outline: Story = {\r\n  args: {\r\n    type: 'outline'\r\n  },\r\n  render: (args) => html`\r\n    <voa-breadcrumbs type=\"${args.type}\">\r\n      <voa-breadcrumbs-item href=\"/\">Home</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>\r\n    </voa-breadcrumbs>\r\n  `\r\n};\r\n\r\n/**\r\n * With Home Icon - Using home icon as first item\r\n */\r\nexport const WithHomeIcon: Story = {\r\n  render: (args) => html`\r\n    <voa-breadcrumbs type=\"${args.type}\">\r\n      <voa-breadcrumbs-item href=\"/\">${homeIcon}</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>\r\n    </voa-breadcrumbs>\r\n  `\r\n};\r\n\r\n/**\r\n * Collapsed (Long) - Using \"...\" to indicate hidden items\r\n */\r\nexport const Collapsed: Story = {\r\n  render: (args) => html`\r\n    <voa-breadcrumbs type=\"${args.type}\">\r\n      <voa-breadcrumbs-item href=\"/\">Principal</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item>...</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item active>Nível 3</voa-breadcrumbs-item>\r\n    </voa-breadcrumbs>\r\n  `\r\n};\r\n\r\n/**\r\n * Custom Separator - Using a custom separator via slot\r\n */\r\nexport const CustomSeparator: Story = {\r\n  render: (args) => html`\r\n    <voa-breadcrumbs type=\"${args.type}\">\r\n      <voa-breadcrumbs-item href=\"/\">\r\n        Home\r\n        <span slot=\"separator\" style=\"color: #9f9fa8;\">/</span>\r\n      </voa-breadcrumbs-item>\r\n      \r\n      <voa-breadcrumbs-item href=\"/components\">\r\n        Settings\r\n        <span slot=\"separator\" style=\"color: #9f9fa8;\">/</span>\r\n      </voa-breadcrumbs-item>\r\n      \r\n      <voa-breadcrumbs-item active>\r\n        Profile\r\n      </voa-breadcrumbs-item>\r\n    </voa-breadcrumbs>\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<!-- Breadcrumbs básico -->\r\n<voa-breadcrumbs type=\"default\">\r\n  <voa-breadcrumbs-item href=\"/\">Home</voa-breadcrumbs-item>\r\n  <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n  <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>\r\n</voa-breadcrumbs>\r\n\r\n<!-- Breadcrumbs com ícone home -->\r\n<voa-breadcrumbs type=\"default\">\r\n  <voa-breadcrumbs-item href=\"/\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/>\r\n    </svg>\r\n  </voa-breadcrumbs-item>\r\n  <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n  <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>\r\n</voa-breadcrumbs>\r\n\r\n<!-- Breadcrumbs round -->\r\n<voa-breadcrumbs type=\"round\">\r\n  <voa-breadcrumbs-item href=\"/\">Home</voa-breadcrumbs-item>\r\n  <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n  <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>\r\n</voa-breadcrumbs>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaBreadcrumbs, VoaBreadcrumbsItem } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Breadcrumbs básico */}\r\n      <VoaBreadcrumbs type=\"default\">\r\n        <VoaBreadcrumbsItem href=\"/\">Home</VoaBreadcrumbsItem>\r\n        <VoaBreadcrumbsItem href=\"/components\">Components</VoaBreadcrumbsItem>\r\n        <VoaBreadcrumbsItem active>Breadcrumbs</VoaBreadcrumbsItem>\r\n      </VoaBreadcrumbs>\r\n\r\n      {/* Breadcrumbs com ícone home */}\r\n      <VoaBreadcrumbs type=\"default\">\r\n        <VoaBreadcrumbsItem href=\"/\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/>\r\n          </svg>\r\n        </VoaBreadcrumbsItem>\r\n        <VoaBreadcrumbsItem href=\"/components\">Components</VoaBreadcrumbsItem>\r\n        <VoaBreadcrumbsItem active>Breadcrumbs</VoaBreadcrumbsItem>\r\n      </VoaBreadcrumbs>\r\n\r\n      {/* Breadcrumbs round */}\r\n      <VoaBreadcrumbs type=\"round\">\r\n        <VoaBreadcrumbsItem href=\"/\">Home</VoaBreadcrumbsItem>\r\n        <VoaBreadcrumbsItem href=\"/components\">Components</VoaBreadcrumbsItem>\r\n        <VoaBreadcrumbsItem active>Breadcrumbs</VoaBreadcrumbsItem>\r\n      </VoaBreadcrumbs>\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaBreadcrumbs, VoaBreadcrumbsItem } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Breadcrumbs básico -->\r\n    <voa-breadcrumbs type=\"default\">\r\n      <voa-breadcrumbs-item href=\"/\">Home</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item [active]=\"true\">Breadcrumbs</voa-breadcrumbs-item>\r\n    </voa-breadcrumbs>\r\n\r\n    <!-- Breadcrumbs round -->\r\n    <voa-breadcrumbs type=\"round\">\r\n      <voa-breadcrumbs-item href=\"/\">Home</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n      <voa-breadcrumbs-item [active]=\"true\">Breadcrumbs</voa-breadcrumbs-item>\r\n    </voa-breadcrumbs>\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  <div>\r\n    <!-- Breadcrumbs básico -->\r\n    <VoaBreadcrumbs type=\"default\">\r\n      <VoaBreadcrumbsItem href=\"/\">Home</VoaBreadcrumbsItem>\r\n      <VoaBreadcrumbsItem href=\"/components\">Components</VoaBreadcrumbsItem>\r\n      <VoaBreadcrumbsItem :active=\"true\">Breadcrumbs</VoaBreadcrumbsItem>\r\n    </VoaBreadcrumbs>\r\n\r\n    <!-- Breadcrumbs round -->\r\n    <VoaBreadcrumbs type=\"round\">\r\n      <VoaBreadcrumbsItem href=\"/\">Home</VoaBreadcrumbsItem>\r\n      <VoaBreadcrumbsItem href=\"/components\">Components</VoaBreadcrumbsItem>\r\n      <VoaBreadcrumbsItem :active=\"true\">Breadcrumbs</VoaBreadcrumbsItem>\r\n    </VoaBreadcrumbs>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaBreadcrumbs, VoaBreadcrumbsItem } 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;\">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-breadcrumbs type=\"default\" style=\"margin-bottom: 2rem;\">\r\n        <voa-breadcrumbs-item href=\"/\">Home</voa-breadcrumbs-item>\r\n        <voa-breadcrumbs-item href=\"/components\">Components</voa-breadcrumbs-item>\r\n        <voa-breadcrumbs-item active>Breadcrumbs</voa-breadcrumbs-item>\r\n      </voa-breadcrumbs>\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-voabreadcrumbs--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-breadcrumbs-divider/voa-breadcrumbs-divider.css

@@ -0,0 +1,39 @@
+/* 
+ * 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-flex;
+  box-sizing: border-box;
+}
+
+.voa-breadcrumbs-divider {
+  /* APENAS estilos estruturais */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.voa-breadcrumbs-divider__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+/* Layout para o SVG interno */
+.voa-breadcrumbs-divider__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+}
+

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

@@ -0,0 +1,77 @@
+import { h, Host } from "@stencil/core";
+import { Icons } from "../../utils/icons";
+/**
+ * Componente de divisor para breadcrumbs.
+ * Baseado no design do Figma (node-id: 443-9825).
+ *
+ * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+ * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O container interno do divisor
+ * @part icon - O container do ícone SVG
+ */
+export class VoaBreadcrumbsDivider {
+    constructor() {
+        /**
+         * Tipo de ícone a ser exibido como divisor.
+         * Mapeia as variantes do Figma: chevron, arrow, arrow-alt.
+         */
+        this.icon = 'chevron';
+    }
+    getIconComponent() {
+        switch (this.icon) {
+            case 'chevron':
+                return Icons['chevron-right'];
+            case 'arrow':
+                return Icons['arrow-right'];
+            case 'arrow-alt':
+                return Icons['arrow-right-alt'];
+            default:
+                return Icons['chevron-right'];
+        }
+    }
+    render() {
+        const IconComponent = this.getIconComponent();
+        return (h(Host, { key: '3ca0a38193c0c6d61ec4905cd95e12209fa00a57', role: "separator", "aria-hidden": "true" }, h("div", { key: 'd6d136f7c9e8e4965938a4a23e77fe19ec16c369', part: "base", class: {
+                'voa-breadcrumbs-divider': true,
+                [`voa-breadcrumbs-divider--${this.icon}`]: true,
+            } }, h("span", { key: 'c57435ac5dd5fe8d1abc40f75676709b04b1e185', part: "icon", class: "voa-breadcrumbs-divider__icon" }, h(IconComponent, { key: '066b4d14c8e02969e04d43630329c7483a788ac5' })))));
+    }
+    static get is() { return "voa-breadcrumbs-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-breadcrumbs-divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-breadcrumbs-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'chevron' | 'arrow' | 'arrow-alt'",
+                    "resolved": "\"arrow\" | \"arrow-alt\" | \"chevron\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo de \u00EDcone a ser exibido como divisor.\r\nMapeia as variantes do Figma: chevron, arrow, arrow-alt."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon",
+                "defaultValue": "'chevron'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=voa-breadcrumbs-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-breadcrumbs-divider.js","sourceRoot":"","sources":["../../../src/components/voa-breadcrumbs-divider/voa-breadcrumbs-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;;;;;;;GASG;AAOH,MAAM,OAAO,qBAAqB;IANlC;QAOE;;;WAGG;QACsB,SAAI,GAAsC,SAAS,CAAC;KAqC9E;IAnCS,gBAAgB;QACtB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS;gBACZ,OAAO,KAAK,CAAC,eAAe,CAAC,CAAC;YAChC,KAAK,OAAO;gBACV,OAAO,KAAK,CAAC,aAAa,CAAC,CAAC;YAC9B,KAAK,WAAW;gBACd,OAAO,KAAK,CAAC,iBAAiB,CAAC,CAAC;YAClC;gBACE,OAAO,KAAK,CAAC,eAAe,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAE9C,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,WAAW,iBACJ,MAAM;YAElB,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,yBAAyB,EAAE,IAAI;oBAC/B,CAAC,4BAA4B,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;iBAChD;gBAED,6DAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,+BAA+B;oBACrD,EAAC,aAAa,sDAAG,CACZ,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\r\nimport { Icons } from '../../utils/icons';\r\n\r\n/**\r\n * Componente de divisor para breadcrumbs.\r\n * Baseado no design do Figma (node-id: 443-9825).\r\n * \r\n * O componente segue o padrão \"unstyled\" - apenas estrutura e lógica.\r\n * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O container interno do divisor\r\n * @part icon - O container do ícone SVG\r\n */\r\n@Component({\r\n  tag: 'voa-breadcrumbs-divider',\r\n  styleUrl: 'voa-breadcrumbs-divider.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaBreadcrumbsDivider {\r\n  /**\r\n   * Tipo de ícone a ser exibido como divisor.\r\n   * Mapeia as variantes do Figma: chevron, arrow, arrow-alt.\r\n   */\r\n  @Prop({ reflect: true }) icon: 'chevron' | 'arrow' | 'arrow-alt' = 'chevron';\r\n\r\n  private getIconComponent() {\r\n    switch (this.icon) {\r\n      case 'chevron':\r\n        return Icons['chevron-right'];\r\n      case 'arrow':\r\n        return Icons['arrow-right'];\r\n      case 'arrow-alt':\r\n        return Icons['arrow-right-alt'];\r\n      default:\r\n        return Icons['chevron-right'];\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const IconComponent = this.getIconComponent();\r\n\r\n    return (\r\n      <Host\r\n        role=\"separator\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-breadcrumbs-divider': true,\r\n            [`voa-breadcrumbs-divider--${this.icon}`]: true,\r\n          }}\r\n        >\r\n          <span part=\"icon\" class=\"voa-breadcrumbs-divider__icon\">\r\n            <IconComponent />\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"]}

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

@@ -0,0 +1,62 @@
+/* 
+ * 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-flex;
+  align-items: center;
+}
+
+.breadcrumbs-item-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumbs-content {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+/* Remove pointer events/cursor for active (current) item */
+.breadcrumbs-content[aria-current="page"] {
+  cursor: default;
+  pointer-events: none; 
+}
+
+.breadcrumbs-separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline: 0; /* Spacing handled via CSS Parts */
+  user-select: none;
+}
+
+/* * CRITICAL: Hide separator on the last item.
+ * Since we are inside Shadow DOM, :host(:last-child) refers to the 
+ * custom element itself within the parent's light DOM/slot context.
+ */
+:host(:last-of-type) .breadcrumbs-separator {
+  display: none;
+}
+
+/* Layout para o SVG interno do ícone */
+.voa-breadcrumbs-item__icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  flex-shrink: 0;
+}
+