voa-ds-core 1.0.4

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

@@ -0,0 +1,270 @@
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import "../../Stories/styles/voa-card.external.css";
+/**
+ * Componente Card do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * ## Slots
+ * - \`header\`: Conteúdo do cabeçalho do card.
+ * - \`default\`: Conteúdo principal do card.
+ * - \`footer\`: Conteúdo do rodapé do card.
+ *
+ * ## CSS Parts
+ * - \`base\`: Container principal.
+ * - \`header\`: Container do cabeçalho.
+ * - \`body\`: Container do corpo.
+ * - \`footer\`: Container do rodapé.
+ */
+const meta = {
+    title: "Componentes/Layout/Card",
+    component: 'voa-card',
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System',
+        },
+    },
+    argTypes: {
+        header: {
+            control: 'text',
+            description: 'Conteúdo HTML para o slot de cabeçalho'
+        },
+        content: {
+            control: 'text',
+            description: 'Conteúdo HTML para o slot principal (body)'
+        },
+        footer: {
+            control: 'text',
+            description: 'Conteúdo HTML para o slot de rodapé'
+        },
+    },
+    render: (args) => html `
+    <voa-card>
+      ${args.header ? html `<div slot="header">${unsafeHTML(args.header)}</div>` : ''}
+      ${args.content ? unsafeHTML(args.content) : ''}
+      ${args.footer ? html `<div slot="footer">${unsafeHTML(args.footer)}</div>` : ''}
+    </voa-card>
+  `,
+};
+export default meta;
+export const Default = {
+    args: {
+        header: '<h3>Card Header</h3>',
+        content: '<p>This is the card content. It can contain text, images, or other components.</p>',
+        footer: '<button style="padding: 8px 16px; background: #0064cb; color: white; border: none; border-radius: 4px; cursor: pointer;">Action</button>',
+    },
+};
+export const Simple = {
+    args: {
+        header: '',
+        content: '<p>This is a simple card with only body content.</p>',
+        footer: '',
+    },
+};
+export const WithHeaderOnly = {
+    args: {
+        header: '<h3>Card Title</h3>',
+        content: '<p>This card has a header and body, but no footer.</p>',
+        footer: '',
+    },
+};
+export const WithFooterOnly = {
+    args: {
+        header: '',
+        content: '<p>This card has a body and a footer, but no header.</p>',
+        footer: '<div style="display: flex; justify-content: flex-end; gap: 8px;"><button>Cancel</button><button>Save</button></div>',
+    },
+};
+export const RichContent = {
+    args: {
+        header: '<div style="display: flex; align-items: center; gap: 8px;"><span style="font-size: 24px;">👤</span> <span>User Profile</span></div>',
+        content: `
+      <div style="display: flex; gap: 16px;">
+        <div style="width: 64px; height: 64px; background: #eee; border-radius: 50%;"></div>
+        <div>
+          <h4 style="margin: 0;">John Doe</h4>
+          <p style="margin: 4px 0; color: #666;">Software Engineer</p>
+          <p style="margin: 4px 0; font-size: 12px;">john.doe@example.com</p>
+        </div>
+      </div>
+    `,
+        footer: '<a href="#" style="color: #0064cb; text-decoration: none;">View Full Profile</a>',
+    },
+};
+// ============================================
+// 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
+<!-- Card básico -->
+<voa-card>
+  <div slot="header"><h3>Card Title</h3></div>
+  <p>This is the card content.</p>
+  <div slot="footer"><button>Action</button></div>
+</voa-card>
+
+<!-- Card simples (apenas body) -->
+<voa-card>
+  <p>Simple card with only body content.</p>
+</voa-card>
+
+<!-- Card com header e body -->
+<voa-card>
+  <div slot="header"><h3>Card Title</h3></div>
+  <p>Card with header and body, but no footer.</p>
+</voa-card>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaCard } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Card básico */}
+      <VoaCard>
+        <div slot="header"><h3>Card Title</h3></div>
+        <p>This is the card content.</p>
+        <div slot="footer"><button>Action</button></div>
+      </VoaCard>
+
+      {/* Card simples (apenas body) */}
+      <VoaCard>
+        <p>Simple card with only body content.</p>
+      </VoaCard>
+
+      {/* Card com header e body */}
+      <VoaCard>
+        <div slot="header"><h3>Card Title</h3></div>
+        <p>Card with header and body, but no footer.</p>
+      </VoaCard>
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaCard } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Card básico -->
+    <voa-card>
+      <div slot="header"><h3>Card Title</h3></div>
+      <p>This is the card content.</p>
+      <div slot="footer"><button>Action</button></div>
+    </voa-card>
+
+    <!-- Card simples (apenas body) -->
+    <voa-card>
+      <p>Simple card with only body content.</p>
+    </voa-card>
+
+    <!-- Card com header e body -->
+    <voa-card>
+      <div slot="header"><h3>Card Title</h3></div>
+      <p>Card with header and body, but no footer.</p>
+    </voa-card>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Card básico -->
+    <VoaCard>
+      <template #header><h3>Card Title</h3></template>
+      <p>This is the card content.</p>
+      <template #footer><button>Action</button></template>
+    </VoaCard>
+
+    <!-- Card simples (apenas body) -->
+    <VoaCard>
+      <p>Simple card with only body content.</p>
+    </VoaCard>
+
+    <!-- Card com header e body -->
+    <VoaCard>
+      <template #header><h3>Card Title</h3></template>
+      <p>Card with header and body, but no footer.</p>
+    </VoaCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoaCard } 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-card style="margin-bottom: 2rem; max-width: 400px;">
+        <div slot="header"><h3 style="margin: 0;">Card Title</h3></div>
+        <p style="margin: 0;">This is the card content. It can contain text, images, or other components.</p>
+        <div slot="footer"><button style="padding: 8px 16px; background: #0064cb; color: white; border: none; border-radius: 4px; cursor: pointer;">Action</button></div>
+      </voa-card>
+      <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-voacard--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-card.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-card.stories.js","sourceRoot":"","sources":["../../../src/components/voa-card/voa-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,4CAA4C,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uEAAuE;SAC7E;KACF;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wCAAwC;SACtD;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4CAA4C;SAC1D;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qCAAqC;SACnD;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;QAEhB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;QAC5E,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;QAC5C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;GAEjF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,sBAAsB;QAC9B,OAAO,EAAE,oFAAoF;QAC7F,MAAM,EAAE,0IAA0I;KACnJ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,sDAAsD;QAC/D,MAAM,EAAE,EAAE;KACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,wDAAwD;QACjE,MAAM,EAAE,EAAE;KACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,0DAA0D;QACnE,MAAM,EAAE,qHAAqH;KAC9H;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,MAAM,EAAE,qIAAqI;QAC7I,OAAO,EAAE;;;;;;;;;KASR;QACD,MAAM,EAAE,kFAAkF;KAC3F;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA8IN;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 { unsafeHTML } from 'lit/directives/unsafe-html.js';\r\nimport '../../Stories/styles/voa-card.external.css';\r\n\r\n/**\r\n * Componente Card do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * ## Slots\r\n * - \\`header\\`: Conteúdo do cabeçalho do card.\r\n * - \\`default\\`: Conteúdo principal do card.\r\n * - \\`footer\\`: Conteúdo do rodapé do card.\r\n * \r\n * ## CSS Parts\r\n * - \\`base\\`: Container principal.\r\n * - \\`header\\`: Container do cabeçalho.\r\n * - \\`body\\`: Container do corpo.\r\n * - \\`footer\\`: Container do rodapé.\r\n */\r\nconst meta: Meta = {\r\n  title: \"Componentes/Layout/Card\",\r\n  component: 'voa-card',\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',\r\n    },\r\n  },\r\n  argTypes: {\r\n    header: { \r\n      control: 'text',\r\n      description: 'Conteúdo HTML para o slot de cabeçalho'\r\n    },\r\n    content: { \r\n      control: 'text',\r\n      description: 'Conteúdo HTML para o slot principal (body)'\r\n    },\r\n    footer: { \r\n      control: 'text',\r\n      description: 'Conteúdo HTML para o slot de rodapé'\r\n    },\r\n  },\r\n  render: (args) => html`\r\n    <voa-card>\r\n      ${args.header ? html`<div slot=\"header\">${unsafeHTML(args.header)}</div>` : ''}\r\n      ${args.content ? unsafeHTML(args.content) : ''}\r\n      ${args.footer ? html`<div slot=\"footer\">${unsafeHTML(args.footer)}</div>` : ''}\r\n    </voa-card>\r\n  `,\r\n};\r\n\r\nexport default meta;\r\ntype Story = StoryObj;\r\n\r\nexport const Default: Story = {\r\n  args: {\r\n    header: '<h3>Card Header</h3>',\r\n    content: '<p>This is the card content. It can contain text, images, or other components.</p>',\r\n    footer: '<button style=\"padding: 8px 16px; background: #0064cb; color: white; border: none; border-radius: 4px; cursor: pointer;\">Action</button>',\r\n  },\r\n};\r\n\r\nexport const Simple: Story = {\r\n  args: {\r\n    header: '',\r\n    content: '<p>This is a simple card with only body content.</p>',\r\n    footer: '',\r\n  },\r\n};\r\n\r\nexport const WithHeaderOnly: Story = {\r\n  args: {\r\n    header: '<h3>Card Title</h3>',\r\n    content: '<p>This card has a header and body, but no footer.</p>',\r\n    footer: '',\r\n  },\r\n};\r\n\r\nexport const WithFooterOnly: Story = {\r\n  args: {\r\n    header: '',\r\n    content: '<p>This card has a body and a footer, but no header.</p>',\r\n    footer: '<div style=\"display: flex; justify-content: flex-end; gap: 8px;\"><button>Cancel</button><button>Save</button></div>',\r\n  },\r\n};\r\n\r\nexport const RichContent: Story = {\r\n  args: {\r\n    header: '<div style=\"display: flex; align-items: center; gap: 8px;\"><span style=\"font-size: 24px;\">👤</span> <span>User Profile</span></div>',\r\n    content: `\r\n      <div style=\"display: flex; gap: 16px;\">\r\n        <div style=\"width: 64px; height: 64px; background: #eee; border-radius: 50%;\"></div>\r\n        <div>\r\n          <h4 style=\"margin: 0;\">John Doe</h4>\r\n          <p style=\"margin: 4px 0; color: #666;\">Software Engineer</p>\r\n          <p style=\"margin: 4px 0; font-size: 12px;\">john.doe@example.com</p>\r\n        </div>\r\n      </div>\r\n    `,\r\n    footer: '<a href=\"#\" style=\"color: #0064cb; text-decoration: none;\">View Full Profile</a>',\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<!-- Card básico -->\r\n<voa-card>\r\n  <div slot=\"header\"><h3>Card Title</h3></div>\r\n  <p>This is the card content.</p>\r\n  <div slot=\"footer\"><button>Action</button></div>\r\n</voa-card>\r\n\r\n<!-- Card simples (apenas body) -->\r\n<voa-card>\r\n  <p>Simple card with only body content.</p>\r\n</voa-card>\r\n\r\n<!-- Card com header e body -->\r\n<voa-card>\r\n  <div slot=\"header\"><h3>Card Title</h3></div>\r\n  <p>Card with header and body, but no footer.</p>\r\n</voa-card>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaCard } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Card básico */}\r\n      <VoaCard>\r\n        <div slot=\"header\"><h3>Card Title</h3></div>\r\n        <p>This is the card content.</p>\r\n        <div slot=\"footer\"><button>Action</button></div>\r\n      </VoaCard>\r\n\r\n      {/* Card simples (apenas body) */}\r\n      <VoaCard>\r\n        <p>Simple card with only body content.</p>\r\n      </VoaCard>\r\n\r\n      {/* Card com header e body */}\r\n      <VoaCard>\r\n        <div slot=\"header\"><h3>Card Title</h3></div>\r\n        <p>Card with header and body, but no footer.</p>\r\n      </VoaCard>\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaCard } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Card básico -->\r\n    <voa-card>\r\n      <div slot=\"header\"><h3>Card Title</h3></div>\r\n      <p>This is the card content.</p>\r\n      <div slot=\"footer\"><button>Action</button></div>\r\n    </voa-card>\r\n\r\n    <!-- Card simples (apenas body) -->\r\n    <voa-card>\r\n      <p>Simple card with only body content.</p>\r\n    </voa-card>\r\n\r\n    <!-- Card com header e body -->\r\n    <voa-card>\r\n      <div slot=\"header\"><h3>Card Title</h3></div>\r\n      <p>Card with header and body, but no footer.</p>\r\n    </voa-card>\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    <!-- Card básico -->\r\n    <VoaCard>\r\n      <template #header><h3>Card Title</h3></template>\r\n      <p>This is the card content.</p>\r\n      <template #footer><button>Action</button></template>\r\n    </VoaCard>\r\n\r\n    <!-- Card simples (apenas body) -->\r\n    <VoaCard>\r\n      <p>Simple card with only body content.</p>\r\n    </VoaCard>\r\n\r\n    <!-- Card com header e body -->\r\n    <VoaCard>\r\n      <template #header><h3>Card Title</h3></template>\r\n      <p>Card with header and body, but no footer.</p>\r\n    </VoaCard>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaCard } 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-card style=\"margin-bottom: 2rem; max-width: 400px;\">\r\n        <div slot=\"header\"><h3 style=\"margin: 0;\">Card Title</h3></div>\r\n        <p style=\"margin: 0;\">This is the card content. It can contain text, images, or other components.</p>\r\n        <div slot=\"footer\"><button style=\"padding: 8px 16px; background: #0064cb; color: white; border: none; border-radius: 4px; cursor: pointer;\">Action</button></div>\r\n      </voa-card>\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-voacard--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"]}

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

@@ -0,0 +1,75 @@
+/* 
+ * 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;
+  contain: content;
+  pointer-events: auto;
+}
+
+.checkbox-container {
+  /* APENAS estilos estruturais */
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+  /* Gap estrutural - será aplicado via CSS custom property externamente */
+  gap: 0; /* Defaults to 0, overridable externally */
+}
+
+.checkbox-container.checkbox-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.5; /* Structural indication of disabled state */
+}
+
+.checkbox-container.checkbox-no-label {
+  gap: 0;
+}
+
+/* 
+ * The visual box of the checkbox.
+ * MUST have default dimensions to exist in the layout flow.
+ */
+.checkbox-custom {
+  /* Improved alignment */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  
+  /* DEFAULT STRUCTURAL SIZE - 20px conforme Figma */
+  width: 20px;
+  height: 20px;
+}
+
+/* 
+ * We leave the ::after content management to the external CSS 
+ * OR we set basic display properties here so the external CSS 
+ * just has to toggle opacity/color.
+ */
+.checkbox-custom::after {
+  content: '';
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.checkbox-label {
+  /* APENAS estilos estruturais */
+  display: inline-block;
+  user-select: none;
+  box-sizing: border-box;
+  /* Ensure label doesn't collapse if empty slot */
+  min-height: 1em;
+}

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

@@ -0,0 +1,275 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Componente de checkbox que segue o design system VOA.
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O elemento raiz do checkbox (elemento <div> no container)
+ * @part indicator - O indicador visual do checkbox (caixa customizada)
+ * @part label - O wrapper do texto do label
+ *
+ * @slot default - Conteúdo do label do checkbox
+ */
+export class VoaCheckbox {
+    constructor() {
+        /**
+         * Internal state to handle "uncontrolled" usage while keeping props immutable
+         */
+        this.internalState = 'inactive';
+        /**
+         * State of the checkbox.
+         * active = checked
+         * inactive = unchecked
+         * indeterminate = partial/mixed
+         */
+        this.state = 'inactive';
+        /**
+         * Se o checkbox está desabilitado.
+         */
+        this.disabled = false;
+        /**
+         * Se o label deve ser exibido.
+         */
+        this.showLabel = true;
+        /**
+         * Valor do checkbox para formulários.
+         */
+        this.value = 'on'; // Default value if none provided
+        /**
+         * Handler para clique no checkbox.
+         */
+        this.handleClick = (_ev) => {
+            if (this.disabled)
+                return;
+            // Logic: Indeterminate -> Active. Active -> Inactive. Inactive -> Active.
+            if (this.internalState === 'indeterminate' || this.internalState === 'inactive') {
+                this.internalState = 'active';
+            }
+            else {
+                this.internalState = 'inactive';
+            }
+            this.updateFormInternals();
+            this.dsChange.emit(this.internalState);
+        };
+        /**
+         * Handler para navegação por teclado (WCAG 2.2 AA).
+         * Suporta Space para alternar estado.
+         */
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            // Native checkbox activates on Space
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.handleClick(event);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalState = this.state;
+        this.updateFormInternals();
+    }
+    /**
+     * Atualiza o estado interno e sincroniza com o Form Internals API
+     */
+    stateChanged(newValue) {
+        this.internalState = newValue;
+        this.updateFormInternals();
+    }
+    /**
+     * Watch changes to internal state and update the reflected prop for CSS selectors
+     */
+    internalStateChanged() {
+        // Update the reflected state prop so CSS selectors work
+        this.state = this.internalState;
+    }
+    /**
+     * Syncs with the native Form API and Accessibility Tree
+     */
+    updateFormInternals() {
+        const isChecked = this.internalState === 'active';
+        // 1. Form Value: Only 'active' submits the value by default in standard HTML
+        this.internals.setFormValue(isChecked ? this.value : null);
+        // 2. Accessibility State
+        let ariaChecked = 'false';
+        if (this.internalState === 'active')
+            ariaChecked = 'true';
+        if (this.internalState === 'indeterminate')
+            ariaChecked = 'mixed';
+        this.internals.ariaChecked = ariaChecked;
+        this.internals.ariaDisabled = this.disabled ? 'true' : 'false';
+    }
+    render() {
+        return (h(Host, { key: '8a0a61a4ff3fefeaeecb5dc10c520ac16e554dfa', onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, style: { cursor: this.disabled ? 'not-allowed' : 'pointer' } }, h("div", { key: '6d94fbb1d50c87aad42a7501d1da7557200923c1', part: "base", class: {
+                'checkbox-container': true,
+                'checkbox-disabled': this.disabled,
+                [`checkbox-${this.internalState}`]: true,
+                'checkbox-no-label': !this.showLabel,
+            } }, h("div", { key: '9f6e83ccd3e3fee7195172dcc41d4ae1c47a39df', class: "checkbox-custom", part: "indicator" }), this.showLabel && (h("span", { key: '5d29b9332ac3aec5abc4fc05585a165ff9a365da', class: "checkbox-label", part: "label" }, h("slot", { key: '0e10eebc77109b5400f9332e6e25e0f19cb773bc' }))))));
+    }
+    static get is() { return "voa-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxState",
+                    "resolved": "\"active\" | \"inactive\" | \"indeterminate\"",
+                    "references": {
+                        "CheckboxState": {
+                            "location": "local",
+                            "path": "C:/Users/samuelv/WebstormProjects/ds-gab/packages/core/src/components/voa-checkbox/voa-checkbox.tsx",
+                            "id": "src/components/voa-checkbox/voa-checkbox.tsx::CheckboxState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State of the checkbox.\r\nactive = checked\r\ninactive = unchecked\r\nindeterminate = partial/mixed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'inactive'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se o checkbox est\u00E1 desabilitado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se o label deve ser exibido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do checkbox para formul\u00E1rios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor do checkbox para formul\u00E1rios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o estado do checkbox muda.\r\nSegue o padr\u00E3o kebab-case: dsChange."
+                },
+                "complexType": {
+                    "original": "CheckboxState",
+                    "resolved": "\"active\" | \"inactive\" | \"indeterminate\"",
+                    "references": {
+                        "CheckboxState": {
+                            "location": "local",
+                            "path": "C:/Users/samuelv/WebstormProjects/ds-gab/packages/core/src/components/voa-checkbox/voa-checkbox.tsx",
+                            "id": "src/components/voa-checkbox/voa-checkbox.tsx::CheckboxState"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "state",
+                "methodName": "stateChanged"
+            }, {
+                "propName": "internalState",
+                "methodName": "internalStateChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=voa-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-checkbox.js","sourceRoot":"","sources":["../../../src/components/voa-checkbox/voa-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItH;;;;;;;;;;;GAWG;AASH,MAAM,OAAO,WAAW;IARxB;QAYE;;WAEG;QACM,kBAAa,GAAkB,UAAU,CAAC;QAEnD;;;;;WAKG;QACsB,UAAK,GAAkB,UAAU,CAAC;QAE3D;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;WAEG;QACK,cAAS,GAAY,IAAI,CAAC;QAOlC;;WAEG;QACK,UAAK,GAAW,IAAI,CAAC,CAAC,iCAAiC;QAiD/D;;WAEG;QACK,gBAAW,GAAG,CAAC,GAAU,EAAE,EAAE;YACnC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,0EAA0E;YAC1E,IAAI,IAAI,CAAC,aAAa,KAAK,eAAe,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,EAAE,CAAC;gBAChF,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC;YAClC,CAAC;YAED,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACzC,CAAC,CAAC;QAEF;;;WAGG;QACK,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,qCAAqC;YACrC,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACtB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;KAoCH;IA1GC,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED;;OAEG;IAEH,YAAY,CAAC,QAAuB;QAClC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAC9B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED;;OAEG;IAEH,oBAAoB;QAClB,wDAAwD;QACxD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IAClC,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC;QAElD,6EAA6E;QAC7E,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAE3D,yBAAyB;QACzB,IAAI,WAAW,GAAG,OAAO,CAAC;QAC1B,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ;YAAE,WAAW,GAAG,MAAM,CAAC;QAC1D,IAAI,IAAI,CAAC,aAAa,KAAK,eAAe;YAAE,WAAW,GAAG,OAAO,CAAC;QAElE,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;QACzC,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACjE,CAAC;IAiCD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAAE;YAE5D,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,oBAAoB,EAAE,IAAI;oBAC1B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;oBAClC,CAAC,YAAY,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;oBACxC,mBAAmB,EAAE,CAAC,IAAI,CAAC,SAAS;iBACrC;gBAGD,4DAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,WAAW,GAKvC;gBAEL,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;oBACvC,8DAAQ,CACH,CACR,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckboxState = 'active' | 'inactive' | 'indeterminate';\r\n\r\n/**\r\n * Componente de checkbox que segue o design system VOA.\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do checkbox (elemento <div> no container)\r\n * @part indicator - O indicador visual do checkbox (caixa customizada)\r\n * @part label - O wrapper do texto do label\r\n * \r\n * @slot default - Conteúdo do label do checkbox\r\n */\r\n@Component({\r\n  tag: 'voa-checkbox',\r\n  styleUrl: 'voa-checkbox.css',\r\n  shadow: {\r\n    delegatesFocus: true, // Passes focus to the internal input/button automatically\r\n  },\r\n  formAssociated: true, // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaCheckbox {\r\n  @Element() host: HTMLVoaCheckboxElement;\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  /**\r\n   * Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n   */\r\n  @State() internalState: CheckboxState = 'inactive';\r\n\r\n  /**\r\n   * State of the checkbox.\r\n   * active = checked\r\n   * inactive = unchecked\r\n   * indeterminate = partial/mixed\r\n   */\r\n  @Prop({ reflect: true }) state: CheckboxState = 'inactive';\r\n\r\n  /**\r\n   * Se o checkbox está desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se o label deve ser exibido.\r\n   */\r\n  @Prop() showLabel: boolean = true;\r\n\r\n  /**\r\n   * Nome do checkbox para formulários.\r\n   */\r\n  @Prop() name: string;\r\n\r\n  /**\r\n   * Valor do checkbox para formulários.\r\n   */\r\n  @Prop() value: string = 'on'; // Default value if none provided\r\n\r\n  /**\r\n   * Emitido quando o estado do checkbox muda.\r\n   * Segue o padrão kebab-case: dsChange.\r\n   */\r\n  @Event() dsChange: EventEmitter<CheckboxState>;\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  /**\r\n   * Atualiza o estado interno e sincroniza com o Form Internals API\r\n   */\r\n  @Watch('state')\r\n  stateChanged(newValue: CheckboxState) {\r\n    this.internalState = newValue;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  /**\r\n   * Watch changes to internal state and update the reflected prop for CSS selectors\r\n   */\r\n  @Watch('internalState')\r\n  internalStateChanged() {\r\n    // Update the reflected state prop so CSS selectors work\r\n    this.state = this.internalState;\r\n  }\r\n\r\n  /**\r\n   * Syncs with the native Form API and Accessibility Tree\r\n   */\r\n  private updateFormInternals() {\r\n    const isChecked = this.internalState === 'active';\r\n\r\n    // 1. Form Value: Only 'active' submits the value by default in standard HTML\r\n    this.internals.setFormValue(isChecked ? this.value : null);\r\n\r\n    // 2. Accessibility State\r\n    let ariaChecked = 'false';\r\n    if (this.internalState === 'active') ariaChecked = 'true';\r\n    if (this.internalState === 'indeterminate') ariaChecked = 'mixed';\r\n\r\n    this.internals.ariaChecked = ariaChecked;\r\n    this.internals.ariaDisabled = this.disabled ? 'true' : 'false';\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no checkbox.\r\n   */\r\n  private handleClick = (_ev: Event) => {\r\n    if (this.disabled) return;\r\n\r\n    // Logic: Indeterminate -> Active. Active -> Inactive. Inactive -> Active.\r\n    if (this.internalState === 'indeterminate' || this.internalState === 'inactive') {\r\n      this.internalState = 'active';\r\n    } else {\r\n      this.internalState = 'inactive';\r\n    }\r\n\r\n    this.updateFormInternals();\r\n    this.dsChange.emit(this.internalState);\r\n  };\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   * Suporta Space para alternar estado.\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    // Native checkbox activates on Space\r\n    if (event.key === ' ') {\r\n      event.preventDefault();\r\n      this.handleClick(event);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        onClick={this.handleClick}\r\n        onKeyDown={this.handleKeyDown}\r\n        tabIndex={this.disabled ? -1 : 0}\r\n        style={{ cursor: this.disabled ? 'not-allowed' : 'pointer' }}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'checkbox-container': true,\r\n            'checkbox-disabled': this.disabled,\r\n            [`checkbox-${this.internalState}`]: true,\r\n            'checkbox-no-label': !this.showLabel,\r\n          }}\r\n        >\r\n          {/* Visual Indicator */}\r\n          <div class=\"checkbox-custom\" part=\"indicator\">\r\n            {/* Optional: You could render the checkmark/dash SVG here if \r\n              you wanted structural icons instead of pure CSS pseudo-elements.\r\n              For now, keeping it empty to match your CSS-only approach.\r\n            */}\r\n          </div>\r\n\r\n          {this.showLabel && (\r\n            <span class=\"checkbox-label\" part=\"label\">\r\n              <slot />\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n} "]}