voa-ds-core 1.0.4

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

@@ -0,0 +1,495 @@
+import { html } from "lit";
+import "../../Stories/styles/voa-alert.external.css";
+/**
+ * Componente Alert do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-2706
+ *
+ * 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.
+ */
+const meta = {
+    title: "Componentes/Feedback/Alert",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-2706',
+        },
+    },
+    render: (args) => html `
+    <voa-alert
+      variant="${args.variant}"
+      type="${args.type}"
+      ?closable="${args.closable}"
+      ?show-buttons="${args.showButtons}"
+      alert-title="${args.alertTitle}"
+      description="${args.description}"
+      primary-button-text="${args.primaryButtonText}"
+      secondary-button-text="${args.secondaryButtonText}"
+      @voaDismiss=${() => console.log('Dismissed')}
+      @voaPrimaryClick=${() => console.log('Primary Click')}
+      @voaSecondaryClick=${() => console.log('Secondary Click')}
+    ></voa-alert>
+  `,
+    argTypes: {
+        variant: {
+            control: 'radio',
+            options: ['default', 'inline'],
+            description: 'Variante do alerta: default (layout vertical) ou inline (layout horizontal)'
+        },
+        type: {
+            control: 'select',
+            options: ['basic', 'success', 'warning', 'warning-inline', 'error', 'info'],
+            description: 'O tipo de alerta a ser exibido. Influencia a cor e o ícone'
+        },
+        closable: {
+            control: 'boolean',
+            description: 'Determina se o alerta pode ser fechado pelo usuário'
+        },
+        showButtons: {
+            control: 'boolean',
+            description: 'Determina se os botões de ação devem ser exibidos (apenas para variant default)'
+        },
+        alertTitle: {
+            control: 'text',
+            description: 'Título do alerta'
+        },
+        description: {
+            control: 'text',
+            description: 'Descrição do alerta. Apenas exibida na variante default'
+        },
+        primaryButtonText: {
+            control: 'text',
+            description: 'Texto do botão primário'
+        },
+        secondaryButtonText: {
+            control: 'text',
+            description: 'Texto do botão secundário'
+        },
+    },
+    args: {
+        variant: 'default',
+        type: 'info',
+        closable: true,
+        showButtons: false,
+        alertTitle: 'Informação',
+        description: 'Esta é uma descrição padrão do alerta.',
+        primaryButtonText: 'Confirmar',
+        secondaryButtonText: 'Cancelar'
+    },
+};
+export default meta;
+// História padrão
+export const Default = {};
+// ============================================
+// Tipos (Type)
+// ============================================
+export const Basic = {
+    args: {
+        type: 'basic',
+        alertTitle: 'Mensagem básica',
+        description: 'Descrição e sugestão'
+    }
+};
+export const Success = {
+    args: {
+        type: 'success',
+        alertTitle: 'Sucesso',
+        description: 'Operação realizada com sucesso'
+    }
+};
+export const Info = {
+    args: {
+        type: 'info',
+        alertTitle: 'Informação',
+        description: 'Esta é uma informação importante'
+    }
+};
+export const Warning = {
+    args: {
+        type: 'warning',
+        alertTitle: 'Atenção',
+        description: 'Verifique os dados antes de continuar'
+    }
+};
+export const Error = {
+    args: {
+        type: 'error',
+        alertTitle: 'Erro',
+        description: 'Ocorreu um erro ao processar'
+    }
+};
+// ============================================
+// Variantes (Variant)
+// ============================================
+export const InlineBasic = {
+    args: {
+        variant: 'inline',
+        type: 'basic',
+        alertTitle: 'Mensagem básica'
+    }
+};
+export const InlineSuccess = {
+    args: {
+        variant: 'inline',
+        type: 'success',
+        alertTitle: 'Operação realizada com sucesso'
+    }
+};
+export const InlineInfo = {
+    args: {
+        variant: 'inline',
+        type: 'info',
+        alertTitle: 'Informação importante'
+    }
+};
+export const InlineWarning = {
+    args: {
+        variant: 'inline',
+        type: 'warning-inline',
+        alertTitle: 'Atenção necessária'
+    }
+};
+export const InlineError = {
+    args: {
+        variant: 'inline',
+        type: 'error',
+        alertTitle: 'Erro ao processar'
+    }
+};
+// ============================================
+// Estados (States)
+// ============================================
+export const Closable = {
+    args: {
+        closable: true,
+        alertTitle: 'Alerta fechável',
+        description: 'Este alerta pode ser fechado pelo usuário'
+    }
+};
+export const NotClosable = {
+    args: {
+        closable: false,
+        alertTitle: 'Alerta não fechável',
+        description: 'Este alerta não pode ser fechado pelo usuário'
+    }
+};
+// ============================================
+// Com Botões (With Buttons)
+// ============================================
+export const WithButtons = {
+    args: {
+        type: 'warning',
+        alertTitle: 'Excluir conta?',
+        description: 'Esta ação não pode ser desfeita. Tem certeza?',
+        showButtons: true,
+        closable: false
+    }
+};
+export const WithPrimaryButtonOnly = {
+    args: {
+        type: 'success',
+        alertTitle: 'Operação realizada com sucesso!',
+        description: 'Clique em "Entendi" para continuar.',
+        showButtons: true,
+        primaryButtonText: 'Entendi',
+        secondaryButtonText: '',
+        closable: false
+    }
+};
+export const Complete = {
+    args: {
+        type: 'warning',
+        alertTitle: 'Atenção!',
+        description: 'Esta ação não poderá ser desfeita. Tem certeza que deseja continuar?',
+        closable: true,
+        showButtons: true
+    }
+};
+// ============================================
+// Showcase - Todos os Tipos
+// ============================================
+export const AllTypes = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <voa-alert type="basic" alert-title="Mensagem básica" description="Descrição e sugestão" closable></voa-alert>
+      <voa-alert type="success" alert-title="Sucesso" description="Operação realizada com sucesso" closable></voa-alert>
+      <voa-alert type="info" alert-title="Informação" description="Esta é uma informação importante" closable></voa-alert>
+      <voa-alert type="warning" alert-title="Atenção" description="Verifique os dados antes de continuar" closable></voa-alert>
+      <voa-alert type="error" alert-title="Erro" description="Ocorreu um erro ao processar" closable></voa-alert>
+    </div>
+  `
+};
+export const AllTypesInline = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <voa-alert variant="inline" type="basic" alert-title="Mensagem básica" closable></voa-alert>
+      <voa-alert variant="inline" type="success" alert-title="Operação realizada com sucesso" closable></voa-alert>
+      <voa-alert variant="inline" type="info" alert-title="Informação importante" closable></voa-alert>
+      <voa-alert variant="inline" type="warning-inline" alert-title="Atenção necessária" closable></voa-alert>
+      <voa-alert variant="inline" type="error" alert-title="Erro ao processar" closable></voa-alert>
+    </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
+<!-- Alerta básico -->
+<voa-alert 
+  variant="default"
+  type="info"
+  alert-title="Título do alerta"
+  description="Esta é a descrição do alerta."
+  closable
+></voa-alert>
+
+<!-- Alerta inline -->
+<voa-alert 
+  variant="inline"
+  type="success"
+  alert-title="Operação realizada com sucesso!"
+  closable
+></voa-alert>
+
+<!-- Alerta com botões -->
+<voa-alert 
+  variant="default"
+  type="warning"
+  alert-title="Confirmação necessária"
+  description="Você deseja prosseguir com esta ação?"
+  show-buttons
+  primary-button-text="Aceitar"
+  secondary-button-text="Cancelar"
+></voa-alert>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaAlert } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Alerta básico */}
+      <VoaAlert
+        variant="default"
+        type="info"
+        alertTitle="Título do alerta"
+        description="Esta é a descrição do alerta."
+        closable
+        onVoaDismiss={(e) => console.log('Dismissed', e)}
+      />
+
+      {/* Alerta inline */}
+      <VoaAlert
+        variant="inline"
+        type="success"
+        alertTitle="Operação realizada com sucesso!"
+        closable
+      />
+
+      {/* Alerta com botões */}
+      <VoaAlert
+        variant="default"
+        type="warning"
+        alertTitle="Confirmação necessária"
+        description="Você deseja prosseguir com esta ação?"
+        showButtons
+        primaryButtonText="Aceitar"
+        secondaryButtonText="Cancelar"
+        onVoaPrimaryClick={(e) => console.log('Primary clicked', e)}
+        onVoaSecondaryClick={(e) => console.log('Secondary clicked', e)}
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaAlert } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Alerta básico -->
+    <voa-alert
+      [variant]="'default'"
+      [type]="'info'"
+      [alertTitle]="'Título do alerta'"
+      [description]="'Esta é a descrição do alerta.'"
+      [closable]="true"
+      (voaDismiss)="handleDismiss($event)"
+    ></voa-alert>
+
+    <!-- Alerta inline -->
+    <voa-alert
+      [variant]="'inline'"
+      [type]="'success'"
+      [alertTitle]="'Operação realizada com sucesso!'"
+      [closable]="true"
+    ></voa-alert>
+
+    <!-- Alerta com botões -->
+    <voa-alert
+      [variant]="'default'"
+      [type]="'warning'"
+      [alertTitle]="'Confirmação necessária'"
+      [description]="'Você deseja prosseguir com esta ação?'"
+      [showButtons]="true"
+      [primaryButtonText]="'Aceitar'"
+      [secondaryButtonText]="'Cancelar'"
+      (voaPrimaryClick)="handlePrimaryClick($event)"
+      (voaSecondaryClick)="handleSecondaryClick($event)"
+    ></voa-alert>
+  \`
+})
+export class ExampleComponent {
+  handleDismiss(event: CustomEvent) {
+    console.log('Dismissed', event);
+  }
+
+  handlePrimaryClick(event: CustomEvent) {
+    console.log('Primary clicked', event);
+  }
+
+  handleSecondaryClick(event: CustomEvent) {
+    console.log('Secondary clicked', event);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Alerta básico -->
+    <VoaAlert
+      variant="default"
+      type="info"
+      alert-title="Título do alerta"
+      description="Esta é a descrição do alerta."
+      :closable="true"
+      @voaDismiss="handleDismiss"
+    />
+
+    <!-- Alerta inline -->
+    <VoaAlert
+      variant="inline"
+      type="success"
+      alert-title="Operação realizada com sucesso!"
+      :closable="true"
+    />
+
+    <!-- Alerta com botões -->
+    <VoaAlert
+      variant="default"
+      type="warning"
+      alert-title="Confirmação necessária"
+      description="Você deseja prosseguir com esta ação?"
+      :show-buttons="true"
+      primary-button-text="Aceitar"
+      secondary-button-text="Cancelar"
+      @voaPrimaryClick="handlePrimaryClick"
+      @voaSecondaryClick="handleSecondaryClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoaAlert } from '@voa-ds/vue';
+
+const handleDismiss = (event: CustomEvent) => {
+  console.log('Dismissed', event);
+};
+
+const handlePrimaryClick = (event: CustomEvent) => {
+  console.log('Primary clicked', event);
+};
+
+const handleSecondaryClick = (event: CustomEvent) => {
+  console.log('Secondary clicked', event);
+};
+</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: () => {
+        const container = document.createElement('div');
+        container.style.cssText = 'padding: 2rem; max-width: 100%;';
+        const title = document.createElement('h2');
+        title.textContent = 'Uso do Componente';
+        title.style.cssText = 'margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;';
+        container.appendChild(title);
+        const description = document.createElement('p');
+        description.textContent = 'Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:';
+        description.style.cssText = 'margin-bottom: 2rem; color: #666;';
+        container.appendChild(description);
+        const exampleTitle = document.createElement('h3');
+        exampleTitle.textContent = 'Exemplo Interativo';
+        exampleTitle.style.cssText = 'margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;';
+        container.appendChild(exampleTitle);
+        const el = document.createElement('voa-alert');
+        el.setAttribute('variant', 'default');
+        el.setAttribute('type', 'info');
+        el.setAttribute('alert-title', 'Exemplo de Uso');
+        el.setAttribute('description', 'Este é um exemplo de como usar o componente VoaAlert.');
+        el.setAttribute('closable', '');
+        el.style.cssText = 'margin-bottom: 2rem;';
+        container.appendChild(el);
+        const note = document.createElement('div');
+        note.style.cssText = 'margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;';
+        note.innerHTML = '<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-voaalert--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.' +
+            '</p>';
+        container.appendChild(note);
+        return container;
+    }
+};
+//# sourceMappingURL=voa-alert.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-alert.stories.js","sourceRoot":"","sources":["../../../src/components/voa-alert/voa-alert.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-alert.external.css';\r\n\r\n/**\r\n * Componente Alert do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-2706\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\nconst meta = {\r\n  title: \"Componentes/Feedback/Alert\",\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-2706',\r\n    },\r\n  },\r\n  render: (args) => html`\r\n    <voa-alert\r\n      variant=\"${args.variant}\"\r\n      type=\"${args.type}\"\r\n      ?closable=\"${args.closable}\"\r\n      ?show-buttons=\"${args.showButtons}\"\r\n      alert-title=\"${args.alertTitle}\"\r\n      description=\"${args.description}\"\r\n      primary-button-text=\"${args.primaryButtonText}\"\r\n      secondary-button-text=\"${args.secondaryButtonText}\"\r\n      @voaDismiss=${() => console.log('Dismissed')}\r\n      @voaPrimaryClick=${() => console.log('Primary Click')}\r\n      @voaSecondaryClick=${() => console.log('Secondary Click')}\r\n    ></voa-alert>\r\n  `,\r\n  argTypes: {\r\n    variant: { \r\n      control: 'radio', \r\n      options: ['default', 'inline'],\r\n      description: 'Variante do alerta: default (layout vertical) ou inline (layout horizontal)'\r\n    },\r\n    type: { \r\n      control: 'select', \r\n      options: ['basic', 'success', 'warning', 'warning-inline', 'error', 'info'],\r\n      description: 'O tipo de alerta a ser exibido. Influencia a cor e o ícone'\r\n    },\r\n    closable: { \r\n      control: 'boolean',\r\n      description: 'Determina se o alerta pode ser fechado pelo usuário'\r\n    },\r\n    showButtons: { \r\n      control: 'boolean',\r\n      description: 'Determina se os botões de ação devem ser exibidos (apenas para variant default)'\r\n    },\r\n    alertTitle: { \r\n      control: 'text',\r\n      description: 'Título do alerta'\r\n    },\r\n    description: { \r\n      control: 'text',\r\n      description: 'Descrição do alerta. Apenas exibida na variante default'\r\n    },\r\n    primaryButtonText: { \r\n      control: 'text',\r\n      description: 'Texto do botão primário'\r\n    },\r\n    secondaryButtonText: { \r\n      control: 'text',\r\n      description: 'Texto do botão secundário'\r\n    },\r\n  },\r\n  args: {\r\n    variant: 'default',\r\n    type: 'info',\r\n    closable: true,\r\n    showButtons: false,\r\n    alertTitle: 'Informação',\r\n    description: 'Esta é uma descrição padrão do alerta.',\r\n    primaryButtonText: 'Confirmar',\r\n    secondaryButtonText: 'Cancelar'\r\n  },\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj;\r\n\r\n// História padrão\r\nexport const Default: Story = {};\r\n\r\n// ============================================\r\n// Tipos (Type)\r\n// ============================================\r\n\r\nexport const Basic: Story = {\r\n  args: {\r\n    type: 'basic',\r\n    alertTitle: 'Mensagem básica',\r\n    description: 'Descrição e sugestão'\r\n  }\r\n};\r\n\r\nexport const Success: Story = {\r\n  args: {\r\n    type: 'success',\r\n    alertTitle: 'Sucesso',\r\n    description: 'Operação realizada com sucesso'\r\n  }\r\n};\r\n\r\nexport const Info: Story = {\r\n  args: {\r\n    type: 'info',\r\n    alertTitle: 'Informação',\r\n    description: 'Esta é uma informação importante'\r\n  }\r\n};\r\n\r\nexport const Warning: Story = {\r\n  args: {\r\n    type: 'warning',\r\n    alertTitle: 'Atenção',\r\n    description: 'Verifique os dados antes de continuar'\r\n  }\r\n};\r\n\r\nexport const Error: Story = {\r\n  args: {\r\n    type: 'error',\r\n    alertTitle: 'Erro',\r\n    description: 'Ocorreu um erro ao processar'\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Variantes (Variant)\r\n// ============================================\r\n\r\nexport const InlineBasic: Story = {\r\n  args: {\r\n    variant: 'inline',\r\n    type: 'basic',\r\n    alertTitle: 'Mensagem básica'\r\n  }\r\n};\r\n\r\nexport const InlineSuccess: Story = {\r\n  args: {\r\n    variant: 'inline',\r\n    type: 'success',\r\n    alertTitle: 'Operação realizada com sucesso'\r\n  }\r\n};\r\n\r\nexport const InlineInfo: Story = {\r\n  args: {\r\n    variant: 'inline',\r\n    type: 'info',\r\n    alertTitle: 'Informação importante'\r\n  }\r\n};\r\n\r\nexport const InlineWarning: Story = {\r\n  args: {\r\n    variant: 'inline',\r\n    type: 'warning-inline',\r\n    alertTitle: 'Atenção necessária'\r\n  }\r\n};\r\n\r\nexport const InlineError: Story = {\r\n  args: {\r\n    variant: 'inline',\r\n    type: 'error',\r\n    alertTitle: 'Erro ao processar'\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Estados (States)\r\n// ============================================\r\n\r\nexport const Closable: Story = {\r\n  args: {\r\n    closable: true,\r\n    alertTitle: 'Alerta fechável',\r\n    description: 'Este alerta pode ser fechado pelo usuário'\r\n  }\r\n};\r\n\r\nexport const NotClosable: Story = {\r\n  args: {\r\n    closable: false,\r\n    alertTitle: 'Alerta não fechável',\r\n    description: 'Este alerta não pode ser fechado pelo usuário'\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Com Botões (With Buttons)\r\n// ============================================\r\n\r\nexport const WithButtons: Story = {\r\n  args: {\r\n    type: 'warning',\r\n    alertTitle: 'Excluir conta?',\r\n    description: 'Esta ação não pode ser desfeita. Tem certeza?',\r\n    showButtons: true,\r\n    closable: false\r\n  }\r\n};\r\n\r\nexport const WithPrimaryButtonOnly: Story = {\r\n  args: {\r\n    type: 'success',\r\n    alertTitle: 'Operação realizada com sucesso!',\r\n    description: 'Clique em \"Entendi\" para continuar.',\r\n    showButtons: true,\r\n    primaryButtonText: 'Entendi',\r\n    secondaryButtonText: '',\r\n    closable: false\r\n  }\r\n};\r\n\r\nexport const Complete: Story = {\r\n  args: {\r\n    type: 'warning',\r\n    alertTitle: 'Atenção!',\r\n    description: 'Esta ação não poderá ser desfeita. Tem certeza que deseja continuar?',\r\n    closable: true,\r\n    showButtons: true\r\n  }\r\n};\r\n\r\n// ============================================\r\n// Showcase - Todos os Tipos\r\n// ============================================\r\n\r\nexport const AllTypes: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n      <voa-alert type=\"basic\" alert-title=\"Mensagem básica\" description=\"Descrição e sugestão\" closable></voa-alert>\r\n      <voa-alert type=\"success\" alert-title=\"Sucesso\" description=\"Operação realizada com sucesso\" closable></voa-alert>\r\n      <voa-alert type=\"info\" alert-title=\"Informação\" description=\"Esta é uma informação importante\" closable></voa-alert>\r\n      <voa-alert type=\"warning\" alert-title=\"Atenção\" description=\"Verifique os dados antes de continuar\" closable></voa-alert>\r\n      <voa-alert type=\"error\" alert-title=\"Erro\" description=\"Ocorreu um erro ao processar\" closable></voa-alert>\r\n    </div>\r\n  `\r\n};\r\n\r\nexport const AllTypesInline: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n      <voa-alert variant=\"inline\" type=\"basic\" alert-title=\"Mensagem básica\" closable></voa-alert>\r\n      <voa-alert variant=\"inline\" type=\"success\" alert-title=\"Operação realizada com sucesso\" closable></voa-alert>\r\n      <voa-alert variant=\"inline\" type=\"info\" alert-title=\"Informação importante\" closable></voa-alert>\r\n      <voa-alert variant=\"inline\" type=\"warning-inline\" alert-title=\"Atenção necessária\" closable></voa-alert>\r\n      <voa-alert variant=\"inline\" type=\"error\" alert-title=\"Erro ao processar\" closable></voa-alert>\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<!-- Alerta básico -->\r\n<voa-alert \r\n  variant=\"default\"\r\n  type=\"info\"\r\n  alert-title=\"Título do alerta\"\r\n  description=\"Esta é a descrição do alerta.\"\r\n  closable\r\n></voa-alert>\r\n\r\n<!-- Alerta inline -->\r\n<voa-alert \r\n  variant=\"inline\"\r\n  type=\"success\"\r\n  alert-title=\"Operação realizada com sucesso!\"\r\n  closable\r\n></voa-alert>\r\n\r\n<!-- Alerta com botões -->\r\n<voa-alert \r\n  variant=\"default\"\r\n  type=\"warning\"\r\n  alert-title=\"Confirmação necessária\"\r\n  description=\"Você deseja prosseguir com esta ação?\"\r\n  show-buttons\r\n  primary-button-text=\"Aceitar\"\r\n  secondary-button-text=\"Cancelar\"\r\n></voa-alert>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaAlert } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Alerta básico */}\r\n      <VoaAlert\r\n        variant=\"default\"\r\n        type=\"info\"\r\n        alertTitle=\"Título do alerta\"\r\n        description=\"Esta é a descrição do alerta.\"\r\n        closable\r\n        onVoaDismiss={(e) => console.log('Dismissed', e)}\r\n      />\r\n\r\n      {/* Alerta inline */}\r\n      <VoaAlert\r\n        variant=\"inline\"\r\n        type=\"success\"\r\n        alertTitle=\"Operação realizada com sucesso!\"\r\n        closable\r\n      />\r\n\r\n      {/* Alerta com botões */}\r\n      <VoaAlert\r\n        variant=\"default\"\r\n        type=\"warning\"\r\n        alertTitle=\"Confirmação necessária\"\r\n        description=\"Você deseja prosseguir com esta ação?\"\r\n        showButtons\r\n        primaryButtonText=\"Aceitar\"\r\n        secondaryButtonText=\"Cancelar\"\r\n        onVoaPrimaryClick={(e) => console.log('Primary clicked', e)}\r\n        onVoaSecondaryClick={(e) => console.log('Secondary clicked', e)}\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaAlert } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Alerta básico -->\r\n    <voa-alert\r\n      [variant]=\"'default'\"\r\n      [type]=\"'info'\"\r\n      [alertTitle]=\"'Título do alerta'\"\r\n      [description]=\"'Esta é a descrição do alerta.'\"\r\n      [closable]=\"true\"\r\n      (voaDismiss)=\"handleDismiss($event)\"\r\n    ></voa-alert>\r\n\r\n    <!-- Alerta inline -->\r\n    <voa-alert\r\n      [variant]=\"'inline'\"\r\n      [type]=\"'success'\"\r\n      [alertTitle]=\"'Operação realizada com sucesso!'\"\r\n      [closable]=\"true\"\r\n    ></voa-alert>\r\n\r\n    <!-- Alerta com botões -->\r\n    <voa-alert\r\n      [variant]=\"'default'\"\r\n      [type]=\"'warning'\"\r\n      [alertTitle]=\"'Confirmação necessária'\"\r\n      [description]=\"'Você deseja prosseguir com esta ação?'\"\r\n      [showButtons]=\"true\"\r\n      [primaryButtonText]=\"'Aceitar'\"\r\n      [secondaryButtonText]=\"'Cancelar'\"\r\n      (voaPrimaryClick)=\"handlePrimaryClick($event)\"\r\n      (voaSecondaryClick)=\"handleSecondaryClick($event)\"\r\n    ></voa-alert>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  handleDismiss(event: CustomEvent) {\r\n    console.log('Dismissed', event);\r\n  }\r\n\r\n  handlePrimaryClick(event: CustomEvent) {\r\n    console.log('Primary clicked', event);\r\n  }\r\n\r\n  handleSecondaryClick(event: CustomEvent) {\r\n    console.log('Secondary clicked', event);\r\n  }\r\n}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- Alerta básico -->\r\n    <VoaAlert\r\n      variant=\"default\"\r\n      type=\"info\"\r\n      alert-title=\"Título do alerta\"\r\n      description=\"Esta é a descrição do alerta.\"\r\n      :closable=\"true\"\r\n      @voaDismiss=\"handleDismiss\"\r\n    />\r\n\r\n    <!-- Alerta inline -->\r\n    <VoaAlert\r\n      variant=\"inline\"\r\n      type=\"success\"\r\n      alert-title=\"Operação realizada com sucesso!\"\r\n      :closable=\"true\"\r\n    />\r\n\r\n    <!-- Alerta com botões -->\r\n    <VoaAlert\r\n      variant=\"default\"\r\n      type=\"warning\"\r\n      alert-title=\"Confirmação necessária\"\r\n      description=\"Você deseja prosseguir com esta ação?\"\r\n      :show-buttons=\"true\"\r\n      primary-button-text=\"Aceitar\"\r\n      secondary-button-text=\"Cancelar\"\r\n      @voaPrimaryClick=\"handlePrimaryClick\"\r\n      @voaSecondaryClick=\"handleSecondaryClick\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaAlert } from '@voa-ds/vue';\r\n\r\nconst handleDismiss = (event: CustomEvent) => {\r\n  console.log('Dismissed', event);\r\n};\r\n\r\nconst handlePrimaryClick = (event: CustomEvent) => {\r\n  console.log('Primary clicked', event);\r\n};\r\n\r\nconst handleSecondaryClick = (event: CustomEvent) => {\r\n  console.log('Secondary clicked', event);\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: () => {\r\n    const container = document.createElement('div');\r\n    container.style.cssText = 'padding: 2rem; max-width: 100%;';\r\n    \r\n    const title = document.createElement('h2');\r\n    title.textContent = 'Uso do Componente';\r\n    title.style.cssText = 'margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;';\r\n    container.appendChild(title);\r\n    \r\n    const description = document.createElement('p');\r\n    description.textContent = 'Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:';\r\n    description.style.cssText = 'margin-bottom: 2rem; color: #666;';\r\n    container.appendChild(description);\r\n    \r\n    const exampleTitle = document.createElement('h3');\r\n    exampleTitle.textContent = 'Exemplo Interativo';\r\n    exampleTitle.style.cssText = 'margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;';\r\n    container.appendChild(exampleTitle);\r\n    \r\n    const el = document.createElement('voa-alert');\r\n    el.setAttribute('variant', 'default');\r\n    el.setAttribute('type', 'info');\r\n    el.setAttribute('alert-title', 'Exemplo de Uso');\r\n    el.setAttribute('description', 'Este é um exemplo de como usar o componente VoaAlert.');\r\n    el.setAttribute('closable', '');\r\n    el.style.cssText = 'margin-bottom: 2rem;';\r\n    container.appendChild(el);\r\n    \r\n    const note = document.createElement('div');\r\n    note.style.cssText = 'margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;';\r\n    note.innerHTML = '<p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>' +\r\n      '<p style=\"margin: 0; color: #666; font-size: 0.9rem;\">' +\r\n      'Para ver exemplos de código completos para HTML, React, Angular e Vue, ' +\r\n      '<a href=\"?path=/docs/components-voaalert--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.' +\r\n      '</p>';\r\n    container.appendChild(note);\r\n    \r\n    return container;\r\n  }\r\n}; "]}

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

@@ -0,0 +1,103 @@
+/* 
+ * 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.
+ * 
+ * Design Tokens utilizados (aplicados externamente):
+ * - --structure-colors-bg-elevated: Background do avatar (✅ existe em voa-tokens.css)
+ * - --text-primary: Cor do texto/iniciais (✅ existe em voa-tokens.css, valor: #0b1215)
+ * - --spacing-spacing-md: 16px (xs) (✅ existe em voa-tokens.css)
+ * - --spacing-spacing-lg: 24px (sm) (✅ existe em voa-tokens.css)
+ * - --spacing-spacing-xl: 32px (md) (✅ existe em voa-tokens.css)
+ * - --spacing-spacing-xxl: 48px (lg) (✅ existe em voa-tokens.css)
+ * - --spacing-spacing-xxxl: 56px (xl) (✅ existe em voa-tokens.css)
+ * - --radius-round: Border-radius circular (✅ existe em voa-tokens.css, valor: 64rem)
+ * 
+ * Exemplo de estilização externa:
+ * voa-avatar::part(base) {
+ *   background-color: var(--structure-colors-bg-elevated);
+ *   border-radius: var(--radius-round);
+ * }
+ * voa-avatar::part(initials) {
+ *   color: var(--text-primary);
+ *   font-family: var(--font-family-body);
+ *   font-weight: var(--font-weight-semibold);
+ * }
+ */
+
+:host {
+  display: inline-block;
+  
+  /* Definir variáveis CSS para tamanhos usando tokens semânticos */
+  --avatar-size-xs: var(--spacing-spacing-md); /* 16px */
+  --avatar-size-sm: var(--spacing-spacing-lg); /* 24px */
+  --avatar-size-md: var(--spacing-spacing-xl); /* 32px */
+  --avatar-size-lg: var(--spacing-spacing-xxl); /* 48px */
+  --avatar-size-xl: var(--spacing-spacing-xxxl); /* 56px */
+}
+
+.voa-avatar {
+  /* APENAS estilos estruturais */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  /* Border-radius será aplicado externamente via tokens */
+}
+
+/* Tamanhos do Avatar - usando tokens semânticos */
+.voa-avatar--xs {
+  width: var(--avatar-size-xs);
+  height: var(--avatar-size-xs);
+}
+
+.voa-avatar--sm {
+  width: var(--avatar-size-sm);
+  height: var(--avatar-size-sm);
+}
+
+.voa-avatar--md {
+  width: var(--avatar-size-md);
+  height: var(--avatar-size-md);
+}
+
+.voa-avatar--lg {
+  width: var(--avatar-size-lg);
+  height: var(--avatar-size-lg);
+}
+
+.voa-avatar--xl {
+  width: var(--avatar-size-xl);
+  height: var(--avatar-size-xl);
+}
+
+/* Estilos estruturais para imagem */
+.voa-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  box-sizing: border-box;
+}
+
+/* Estilos estruturais para iniciais */
+.avatar-initials {
+  display: inline-block;
+  text-transform: uppercase;
+  user-select: none;
+  line-height: 1;
+  box-sizing: border-box;
+  /* Font-size, color, font-weight serão aplicados externamente via tokens */
+}
+
+/* Estilos estruturais para ícone */
+.avatar-icon {
+  width: 60%;
+  height: 60%;
+  display: block;
+  box-sizing: border-box;
+  /* Color será aplicado externamente via tokens */
+}