voa-ds-core 1.0.3

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

@@ -0,0 +1,332 @@
+import { fn } from "@storybook/test";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../tokens/global.css";
+import "../../Stories/styles/voa-accordion.external.css";
+const meta = {
+    title: "Componentes/Layout/Accordion",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-201',
+        },
+    },
+    render: (args) => html `
+    <voa-accordion
+      ?open=${args.open}
+      .size=${ifDefined(args.size)}
+      ?divider=${args.divider !== false}
+      @accordionToggle=${(e) => { var _a; return (_a = args.onAccordionToggle) === null || _a === void 0 ? void 0 : _a.call(args, e); }}
+    >
+      <span slot="header">${args.header || 'Título do Accordion'}</span>
+      <p>${args.children || 'Mussum Ipsum, cacilds vidis litro abertis. Detraxit consequat et quo num tendi nada.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.In elementis mé pra quem é amistosis quis leo.Suco de cevadiss deixa as pessoas mais interessantis.'}</p>
+    </voa-accordion>
+  `,
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Define se o accordion inicia aberto',
+        },
+        size: {
+            control: 'select',
+            options: ['md', 'lg'],
+            description: 'Tamanho do accordion (md = médio, lg = grande)',
+        },
+        divider: {
+            control: 'boolean',
+            description: 'Define se o accordion exibe divisor (borda superior)',
+        },
+        header: {
+            control: 'text',
+            description: 'Texto do título do accordion',
+        },
+        children: {
+            control: 'text',
+            description: 'Conteúdo do accordion (slot padrão)',
+        },
+        onAccordionToggle: {
+            action: 'accordionToggle',
+            description: 'Evento emitido ao expandir ou recolher o accordion',
+        },
+    },
+    args: {
+        open: false,
+        size: 'md',
+        divider: true,
+        header: 'Título do Accordion',
+        children: 'Mussum Ipsum, cacilds vidis litro abertis. Detraxit consequat et quo num tendi nada.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.In elementis mé pra quem é amistosis quis leo.Suco de cevadiss deixa as pessoas mais interessantis.',
+        onAccordionToggle: fn(),
+    },
+};
+export default meta;
+// Playground
+export const Playground = {};
+// Variantes baseadas no Figma
+// Tamanho=md, Estado=closed, Divisor=on (padrão)
+export const MediumClosedWithDivider = {
+    args: {
+        open: false,
+        size: 'md',
+        divider: true,
+        header: 'Título',
+    },
+};
+// Tamanho=md, Estado=open, Divisor=on
+export const MediumOpenWithDivider = {
+    args: {
+        open: true,
+        size: 'md',
+        divider: true,
+        header: 'Título',
+    },
+};
+// Tamanho=lg, Estado=closed, Divisor=on
+export const LargeClosedWithDivider = {
+    args: {
+        open: false,
+        size: 'lg',
+        divider: true,
+        header: 'Título',
+    },
+};
+// Tamanho=lg, Estado=open, Divisor=on
+export const LargeOpenWithDivider = {
+    args: {
+        open: true,
+        size: 'lg',
+        divider: true,
+        header: 'Título',
+    },
+};
+// Tamanho=md, Estado=closed, Divisor=off
+export const MediumClosedNoDivider = {
+    args: {
+        open: false,
+        size: 'md',
+        divider: false,
+        header: 'Título',
+    },
+};
+// Tamanho=md, Estado=open, Divisor=off
+export const MediumOpenNoDivider = {
+    args: {
+        open: true,
+        size: 'md',
+        divider: false,
+        header: 'Título',
+    },
+};
+// Tamanho=lg, Estado=closed, Divisor=off
+export const LargeClosedNoDivider = {
+    args: {
+        open: false,
+        size: 'lg',
+        divider: false,
+        header: 'Título',
+    },
+};
+// Tamanho=lg, Estado=open, Divisor=off
+export const LargeOpenNoDivider = {
+    args: {
+        open: true,
+        size: 'lg',
+        divider: false,
+        header: 'Título',
+    },
+};
+// Grid de todas as variantes (como no Figma)
+export const AllVariants = {
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px;">
+      ${[
+        { open: false, size: 'md', divider: true },
+        { open: true, size: 'md', divider: true },
+        { open: false, size: 'lg', divider: true },
+        { open: true, size: 'lg', divider: true },
+        { open: false, size: 'md', divider: false },
+        { open: true, size: 'md', divider: false },
+        { open: false, size: 'lg', divider: false },
+        { open: true, size: 'lg', divider: false },
+    ].map(variant => html `
+        <voa-accordion ?open=${variant.open} .size=${variant.size} ?divider=${variant.divider}>
+          <span slot="header">Título</span>
+          <p>Mussum Ipsum, cacilds vidis litro abertis. Detraxit consequat et quo num tendi nada.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.In elementis mé pra quem é amistosis quis leo.Suco de cevadiss deixa as pessoas mais interessantis.</p>
+        </voa-accordion>
+      `)}
+    </div>
+  `,
+};
+// ============================================
+// 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
+<!-- Accordion básico -->
+<voa-accordion size="md">
+  <span slot="header">Título do Accordion</span>
+  <p>Conteúdo do accordion aqui.</p>
+</voa-accordion>
+
+<!-- Accordion aberto com divider -->
+<voa-accordion size="lg" open divider>
+  <span slot="header">Título do Accordion</span>
+  <p>Conteúdo do accordion aqui.</p>
+</voa-accordion>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaAccordion } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [open, setOpen] = useState(false);
+
+  const handleToggle = (e: CustomEvent<boolean>) => {
+    setOpen(e.detail);
+    console.log('Toggled', e.detail);
+  };
+
+  return (
+    <>
+      {/* Accordion básico */}
+      <VoaAccordion size="md" open={open} onAccordionToggle={handleToggle}>
+        <span slot="header">Título do Accordion</span>
+        <p>Conteúdo do accordion aqui.</p>
+      </VoaAccordion>
+
+      {/* Accordion aberto com divider */}
+      <VoaAccordion size="lg" open divider>
+        <span slot="header">Título do Accordion</span>
+        <p>Conteúdo do accordion aqui.</p>
+      </VoaAccordion>
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaAccordion } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Accordion básico -->
+    <voa-accordion [size]="'md'" [open]="isOpen" (accordionToggle)="handleToggle($event)">
+      <span slot="header">Título do Accordion</span>
+      <p>Conteúdo do accordion aqui.</p>
+    </voa-accordion>
+
+    <!-- Accordion aberto com divider -->
+    <voa-accordion [size]="'lg'" [open]="true" [divider]="true">
+      <span slot="header">Título do Accordion</span>
+      <p>Conteúdo do accordion aqui.</p>
+    </voa-accordion>
+  \`
+})
+export class ExampleComponent {
+  isOpen = false;
+
+  handleToggle(event: CustomEvent<boolean>) {
+    this.isOpen = event.detail;
+    console.log('Toggled', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Accordion básico -->
+    <VoaAccordion size="md" :open="isOpen" @accordionToggle="handleToggle">
+      <template #header>
+        <span>Título do Accordion</span>
+      </template>
+      <p>Conteúdo do accordion aqui.</p>
+    </VoaAccordion>
+
+    <!-- Accordion aberto com divider -->
+    <VoaAccordion size="lg" :open="true" :divider="true">
+      <template #header>
+        <span>Título do Accordion</span>
+      </template>
+      <p>Conteúdo do accordion aqui.</p>
+    </VoaAccordion>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaAccordion } from '@voa-ds/vue';
+
+const isOpen = ref(false);
+
+const handleToggle = (event: CustomEvent<boolean>) => {
+  isOpen.value = event.detail;
+  console.log('Toggled', event.detail);
+};
+</script>
+\`\`\`
+
+## Instalação
+
+### HTML
+\`\`\`bash
+# NPM
+npm install @voa-ds/components
+
+# Importar no HTML
+<script type="module" src="https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js"></script>
+\`\`\`
+
+### React
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/react
+\`\`\`
+
+### Angular
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/angular
+\`\`\`
+
+### Vue
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/vue
+\`\`\`
+        `
+            }
+        }
+    },
+    render: () => html `
+    <div style="padding: 2rem; max-width: 100%;">
+      <h2 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;">Uso do Componente</h2>
+      <p style="margin-bottom: 2rem; color: #666;">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>
+      <h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;">Exemplo Interativo</h3>
+      <voa-accordion size="md" style="margin-bottom: 2rem;">
+        <span slot="header">Exemplo de Uso</span>
+        <p>Conteúdo do accordion aqui.</p>
+      </voa-accordion>
+      <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-voaaccordion--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-accordion.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-accordion.stories.js","sourceRoot":"","sources":["../../../src/components/voa-accordion/voa-accordion.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { fn } from '@storybook/test';\r\nimport type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport '../../tokens/global.css';\r\nimport '../../Stories/styles/voa-accordion.external.css';\r\n\r\ninterface AccordionArgs {\r\n  open?: boolean;\r\n  size?: 'md' | 'lg';\r\n  divider?: boolean;\r\n  header?: string;\r\n  children?: string;\r\n  onAccordionToggle?: (e: CustomEvent<boolean>) => void;\r\n}\r\n\r\nconst meta = {\r\n  title: \"Componentes/Layout/Accordion\",\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=397-201',\r\n    },\r\n  },\r\n  render: (args: AccordionArgs) => html`\r\n    <voa-accordion\r\n      ?open=${args.open}\r\n      .size=${ifDefined(args.size)}\r\n      ?divider=${args.divider !== false}\r\n      @accordionToggle=${(e: Event) => args.onAccordionToggle?.(e as CustomEvent<boolean>)}\r\n    >\r\n      <span slot=\"header\">${args.header || 'Título do Accordion'}</span>\r\n      <p>${args.children || 'Mussum Ipsum, cacilds vidis litro abertis. Detraxit consequat et quo num tendi nada.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.In elementis mé pra quem é amistosis quis leo.Suco de cevadiss deixa as pessoas mais interessantis.'}</p>\r\n    </voa-accordion>\r\n  `,\r\n  argTypes: {\r\n    open: {\r\n      control: 'boolean',\r\n      description: 'Define se o accordion inicia aberto',\r\n    },\r\n    size: {\r\n      control: 'select',\r\n      options: ['md', 'lg'],\r\n      description: 'Tamanho do accordion (md = médio, lg = grande)',\r\n    },\r\n    divider: {\r\n      control: 'boolean',\r\n      description: 'Define se o accordion exibe divisor (borda superior)',\r\n    },\r\n    header: {\r\n      control: 'text',\r\n      description: 'Texto do título do accordion',\r\n    },\r\n    children: {\r\n      control: 'text',\r\n      description: 'Conteúdo do accordion (slot padrão)',\r\n    },\r\n    onAccordionToggle: {\r\n      action: 'accordionToggle',\r\n      description: 'Evento emitido ao expandir ou recolher o accordion',\r\n    },\r\n  },\r\n  args: {\r\n    open: false,\r\n    size: 'md',\r\n    divider: true,\r\n    header: 'Título do Accordion',\r\n    children: 'Mussum Ipsum, cacilds vidis litro abertis. Detraxit consequat et quo num tendi nada.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.In elementis mé pra quem é amistosis quis leo.Suco de cevadiss deixa as pessoas mais interessantis.',\r\n    onAccordionToggle: fn(),\r\n  },\r\n} satisfies Meta<AccordionArgs>;\r\n\r\nexport default meta;\r\ntype Story = StoryObj<AccordionArgs>;\r\n\r\n// Playground\r\nexport const Playground: Story = {};\r\n\r\n// Variantes baseadas no Figma\r\n// Tamanho=md, Estado=closed, Divisor=on (padrão)\r\nexport const MediumClosedWithDivider: Story = {\r\n  args: {\r\n    open: false,\r\n    size: 'md',\r\n    divider: true,\r\n    header: 'Título',\r\n  },\r\n};\r\n\r\n// Tamanho=md, Estado=open, Divisor=on\r\nexport const MediumOpenWithDivider: Story = {\r\n  args: {\r\n    open: true,\r\n    size: 'md',\r\n    divider: true,\r\n    header: 'Título',\r\n  },\r\n};\r\n\r\n// Tamanho=lg, Estado=closed, Divisor=on\r\nexport const LargeClosedWithDivider: Story = {\r\n  args: {\r\n    open: false,\r\n    size: 'lg',\r\n    divider: true,\r\n    header: 'Título',\r\n  },\r\n};\r\n\r\n// Tamanho=lg, Estado=open, Divisor=on\r\nexport const LargeOpenWithDivider: Story = {\r\n  args: {\r\n    open: true,\r\n    size: 'lg',\r\n    divider: true,\r\n    header: 'Título',\r\n  },\r\n};\r\n\r\n// Tamanho=md, Estado=closed, Divisor=off\r\nexport const MediumClosedNoDivider: Story = {\r\n  args: {\r\n    open: false,\r\n    size: 'md',\r\n    divider: false,\r\n    header: 'Título',\r\n  },\r\n};\r\n\r\n// Tamanho=md, Estado=open, Divisor=off\r\nexport const MediumOpenNoDivider: Story = {\r\n  args: {\r\n    open: true,\r\n    size: 'md',\r\n    divider: false,\r\n    header: 'Título',\r\n  },\r\n};\r\n\r\n// Tamanho=lg, Estado=closed, Divisor=off\r\nexport const LargeClosedNoDivider: Story = {\r\n  args: {\r\n    open: false,\r\n    size: 'lg',\r\n    divider: false,\r\n    header: 'Título',\r\n  },\r\n};\r\n\r\n// Tamanho=lg, Estado=open, Divisor=off\r\nexport const LargeOpenNoDivider: Story = {\r\n  args: {\r\n    open: true,\r\n    size: 'lg',\r\n    divider: false,\r\n    header: 'Título',\r\n  },\r\n};\r\n\r\n// Grid de todas as variantes (como no Figma)\r\nexport const AllVariants: Story = {\r\n  render: () => html`\r\n    <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px;\">\r\n      ${[\r\n        { open: false, size: 'md', divider: true },\r\n        { open: true, size: 'md', divider: true },\r\n        { open: false, size: 'lg', divider: true },\r\n        { open: true, size: 'lg', divider: true },\r\n        { open: false, size: 'md', divider: false },\r\n        { open: true, size: 'md', divider: false },\r\n        { open: false, size: 'lg', divider: false },\r\n        { open: true, size: 'lg', divider: false },\r\n      ].map(variant => html`\r\n        <voa-accordion ?open=${variant.open} .size=${variant.size} ?divider=${variant.divider}>\r\n          <span slot=\"header\">Título</span>\r\n          <p>Mussum Ipsum, cacilds vidis litro abertis. Detraxit consequat et quo num tendi nada.Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.In elementis mé pra quem é amistosis quis leo.Suco de cevadiss deixa as pessoas mais interessantis.</p>\r\n        </voa-accordion>\r\n      `)}\r\n    </div>\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<!-- Accordion básico -->\r\n<voa-accordion size=\"md\">\r\n  <span slot=\"header\">Título do Accordion</span>\r\n  <p>Conteúdo do accordion aqui.</p>\r\n</voa-accordion>\r\n\r\n<!-- Accordion aberto com divider -->\r\n<voa-accordion size=\"lg\" open divider>\r\n  <span slot=\"header\">Título do Accordion</span>\r\n  <p>Conteúdo do accordion aqui.</p>\r\n</voa-accordion>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaAccordion } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [open, setOpen] = useState(false);\r\n\r\n  const handleToggle = (e: CustomEvent<boolean>) => {\r\n    setOpen(e.detail);\r\n    console.log('Toggled', e.detail);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Accordion básico */}\r\n      <VoaAccordion size=\"md\" open={open} onAccordionToggle={handleToggle}>\r\n        <span slot=\"header\">Título do Accordion</span>\r\n        <p>Conteúdo do accordion aqui.</p>\r\n      </VoaAccordion>\r\n\r\n      {/* Accordion aberto com divider */}\r\n      <VoaAccordion size=\"lg\" open divider>\r\n        <span slot=\"header\">Título do Accordion</span>\r\n        <p>Conteúdo do accordion aqui.</p>\r\n      </VoaAccordion>\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaAccordion } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Accordion básico -->\r\n    <voa-accordion [size]=\"'md'\" [open]=\"isOpen\" (accordionToggle)=\"handleToggle($event)\">\r\n      <span slot=\"header\">Título do Accordion</span>\r\n      <p>Conteúdo do accordion aqui.</p>\r\n    </voa-accordion>\r\n\r\n    <!-- Accordion aberto com divider -->\r\n    <voa-accordion [size]=\"'lg'\" [open]=\"true\" [divider]=\"true\">\r\n      <span slot=\"header\">Título do Accordion</span>\r\n      <p>Conteúdo do accordion aqui.</p>\r\n    </voa-accordion>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  isOpen = false;\r\n\r\n  handleToggle(event: CustomEvent<boolean>) {\r\n    this.isOpen = event.detail;\r\n    console.log('Toggled', event.detail);\r\n  }\r\n}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- Accordion básico -->\r\n    <VoaAccordion size=\"md\" :open=\"isOpen\" @accordionToggle=\"handleToggle\">\r\n      <template #header>\r\n        <span>Título do Accordion</span>\r\n      </template>\r\n      <p>Conteúdo do accordion aqui.</p>\r\n    </VoaAccordion>\r\n\r\n    <!-- Accordion aberto com divider -->\r\n    <VoaAccordion size=\"lg\" :open=\"true\" :divider=\"true\">\r\n      <template #header>\r\n        <span>Título do Accordion</span>\r\n      </template>\r\n      <p>Conteúdo do accordion aqui.</p>\r\n    </VoaAccordion>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaAccordion } from '@voa-ds/vue';\r\n\r\nconst isOpen = ref(false);\r\n\r\nconst handleToggle = (event: CustomEvent<boolean>) => {\r\n  isOpen.value = event.detail;\r\n  console.log('Toggled', event.detail);\r\n};\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n        `\r\n      }\r\n    }\r\n  },\r\n  render: () => html`\r\n    <div style=\"padding: 2rem; max-width: 100%;\">\r\n      <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n      <p style=\"margin-bottom: 2rem; color: #666;\">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>\r\n      <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n      <voa-accordion size=\"md\" style=\"margin-bottom: 2rem;\">\r\n        <span slot=\"header\">Exemplo de Uso</span>\r\n        <p>Conteúdo do accordion aqui.</p>\r\n      </voa-accordion>\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-voaaccordion--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-alert/voa-alert.css

@@ -0,0 +1,78 @@
+/* UNSTYLED PATTERN: Structural Only */
+
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.alert-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.alert-inline {
+  flex-direction: row;
+  align-items: center;
+}
+
+.content-wrapper {
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.alert-inline .content-wrapper {
+  align-items: center;
+}
+
+.alert-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0; /* Prevents text overflow issues */
+}
+
+.alert-inline .content {
+  flex-direction: row;
+  align-items: center;
+}
+
+.text-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.actions-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+}