voa-ds-core 1.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-avatar.stories.js","sourceRoot":"","sources":["../../../src/components/voa-avatar/voa-avatar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport '../../Stories/styles/voa-avatar.external.css';\r\n\r\ninterface AvatarArgs {\r\n  type?: 'icon' | 'photo' | 'initials';\r\n  initials?: string;\r\n  src?: string;\r\n  alt?: string;\r\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n}\r\n\r\nconst meta = {\r\n  title: \"Componentes/Display/Avatar\",\r\n  tags: ['autodocs'],\r\n  parameters: {\r\n    // Link para Figma (OBRIGATÓRIO)\r\n    design: {\r\n      type: 'figma',\r\n      url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-2809&t=eEPGXVkQRijr3FMg-4',\r\n    },\r\n  },\r\n  render: (args) => html`\r\n    <voa-avatar\r\n      type=${ifDefined(args.type)}\r\n      initials=${ifDefined(args.initials)}\r\n      src=${ifDefined(args.src)}\r\n      alt=${ifDefined(args.alt)}\r\n      size=${ifDefined(args.size)}\r\n    ></voa-avatar>\r\n  `,\r\n  argTypes: {\r\n    type: {\r\n      control: 'select',\r\n      options: ['icon', 'photo', 'initials'],\r\n      description: 'Tipo de avatar a ser exibido: icon (ícone padrão), photo (imagem), ou initials (iniciais).',\r\n    },\r\n    initials: {\r\n      control: 'text',\r\n      description: 'As iniciais a serem exibidas quando type=\"initials\".',\r\n    },\r\n    src: {\r\n      control: 'text',\r\n      description: 'URL da imagem do avatar quando type=\"photo\".',\r\n    },\r\n    alt: {\r\n      control: 'text',\r\n      description: 'Texto alternativo para a imagem do avatar.',\r\n    },\r\n    size: {\r\n      control: 'select',\r\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\r\n      description: 'Tamanho do avatar. Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px).',\r\n    },\r\n  },\r\n  args: {\r\n    type: 'icon',\r\n    size: 'md',\r\n  },\r\n} satisfies Meta<AvatarArgs>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<AvatarArgs>;\r\n\r\n// Story base com playground\r\nexport const Playground: Story = {};\r\n\r\n// Avatar padrão com ícone\r\nexport const Icon: Story = {\r\n  args: {\r\n    type: 'icon',\r\n    size: 'md',\r\n  },\r\n};\r\n\r\n// Avatar com iniciais\r\nexport const Initials: Story = {\r\n  args: {\r\n    type: 'initials',\r\n    initials: 'AB',\r\n    size: 'md',\r\n  },\r\n};\r\n\r\n// Avatar com imagem\r\nexport const Photo: Story = {\r\n  args: {\r\n    type: 'photo',\r\n    src: 'https://i.pravatar.cc/150?img=1',\r\n    alt: 'Avatar do usuário',\r\n    size: 'md',\r\n  },\r\n};\r\n\r\n// Diferentes tamanhos - Icon\r\nexport const IconExtraSmall: Story = {\r\n  args: {\r\n    type: 'icon',\r\n    size: 'xs',\r\n  },\r\n};\r\n\r\nexport const IconSmall: Story = {\r\n  args: {\r\n    type: 'icon',\r\n    size: 'sm',\r\n  },\r\n};\r\n\r\nexport const IconMedium: Story = {\r\n  args: {\r\n    type: 'icon',\r\n    size: 'md',\r\n  },\r\n};\r\n\r\nexport const IconLarge: Story = {\r\n  args: {\r\n    type: 'icon',\r\n    size: 'lg',\r\n  },\r\n};\r\n\r\nexport const IconExtraLarge: Story = {\r\n  args: {\r\n    type: 'icon',\r\n    size: 'xl',\r\n  },\r\n};\r\n\r\n// Diferentes tamanhos - Initials\r\nexport const InitialsExtraSmall: Story = {\r\n  args: {\r\n    type: 'initials',\r\n    initials: 'XS',\r\n    size: 'xs',\r\n  },\r\n};\r\n\r\nexport const InitialsSmall: Story = {\r\n  args: {\r\n    type: 'initials',\r\n    initials: 'SM',\r\n    size: 'sm',\r\n  },\r\n};\r\n\r\nexport const InitialsMedium: Story = {\r\n  args: {\r\n    type: 'initials',\r\n    initials: 'MD',\r\n    size: 'md',\r\n  },\r\n};\r\n\r\nexport const InitialsLarge: Story = {\r\n  args: {\r\n    type: 'initials',\r\n    initials: 'LG',\r\n    size: 'lg',\r\n  },\r\n};\r\n\r\nexport const InitialsExtraLarge: Story = {\r\n  args: {\r\n    type: 'initials',\r\n    initials: 'XL',\r\n    size: 'xl',\r\n  },\r\n};\r\n\r\n// Diferentes tamanhos - Photo\r\nexport const PhotoExtraSmall: Story = {\r\n  args: {\r\n    type: 'photo',\r\n    src: 'https://i.pravatar.cc/150?img=1',\r\n    alt: 'Avatar extra small',\r\n    size: 'xs',\r\n  },\r\n};\r\n\r\nexport const PhotoSmall: Story = {\r\n  args: {\r\n    type: 'photo',\r\n    src: 'https://i.pravatar.cc/150?img=2',\r\n    alt: 'Avatar small',\r\n    size: 'sm',\r\n  },\r\n};\r\n\r\nexport const PhotoMedium: Story = {\r\n  args: {\r\n    type: 'photo',\r\n    src: 'https://i.pravatar.cc/150?img=3',\r\n    alt: 'Avatar medium',\r\n    size: 'md',\r\n  },\r\n};\r\n\r\nexport const PhotoLarge: Story = {\r\n  args: {\r\n    type: 'photo',\r\n    src: 'https://i.pravatar.cc/150?img=4',\r\n    alt: 'Avatar large',\r\n    size: 'lg',\r\n  },\r\n};\r\n\r\nexport const PhotoExtraLarge: Story = {\r\n  args: {\r\n    type: 'photo',\r\n    src: 'https://i.pravatar.cc/150?img=5',\r\n    alt: 'Avatar extra large',\r\n    size: 'xl',\r\n  },\r\n};\r\n\r\n// Galeria de tamanhos com imagens\r\nexport const SizeGalleryWithPhotos: Story = {\r\n  render: () => {\r\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\r\n    const images = [\r\n      'https://i.pravatar.cc/150?img=1',\r\n      'https://i.pravatar.cc/150?img=2',\r\n      'https://i.pravatar.cc/150?img=3',\r\n      'https://i.pravatar.cc/150?img=4',\r\n      'https://i.pravatar.cc/150?img=5',\r\n    ];\r\n\r\n    return html`\r\n      <div style=\"display:flex;gap:16px;align-items:center;flex-wrap:wrap\">\r\n        ${sizes.map((size, index) => html`\r\n          <div style=\"text-align:center\">\r\n            <div style=\"margin-bottom:8px;font-size:12px;font-weight:600\">${size.toUpperCase()}</div>\r\n            <voa-avatar type=\"photo\" src=\"${images[index]}\" alt=\"Avatar ${size}\" size=\"${size}\"></voa-avatar>\r\n          </div>\r\n        `)}\r\n      </div>\r\n    `;\r\n  },\r\n};\r\n\r\n// Galeria de tamanhos com iniciais\r\nexport const SizeGalleryWithInitials: Story = {\r\n  render: () => {\r\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\r\n    const initials = ['XS', 'SM', 'MD', 'LG', 'XL'];\r\n\r\n    return html`\r\n      <div style=\"display:flex;gap:16px;align-items:center;flex-wrap:wrap\">\r\n        ${sizes.map((size, index) => html`\r\n          <div style=\"text-align:center\">\r\n            <div style=\"margin-bottom:8px;font-size:12px;font-weight:600\">${size.toUpperCase()}</div>\r\n            <voa-avatar type=\"initials\" initials=\"${initials[index]}\" size=\"${size}\"></voa-avatar>\r\n          </div>\r\n        `)}\r\n      </div>\r\n    `;\r\n  },\r\n};\r\n\r\n// Galeria de tamanhos com ícones\r\nexport const SizeGalleryWithIcons: Story = {\r\n  render: () => {\r\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\r\n\r\n    return html`\r\n      <div style=\"display:flex;gap:16px;align-items:center;flex-wrap:wrap\">\r\n        ${sizes.map((size) => html`\r\n          <div style=\"text-align:center\">\r\n            <div style=\"margin-bottom:8px;font-size:12px;font-weight:600\">${size.toUpperCase()}</div>\r\n            <voa-avatar type=\"icon\" size=\"${size}\"></voa-avatar>\r\n          </div>\r\n        `)}\r\n      </div>\r\n    `;\r\n  },\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<!-- Avatar com ícone padrão -->\r\n<voa-avatar type=\"icon\" size=\"md\"></voa-avatar>\r\n\r\n<!-- Avatar com iniciais -->\r\n<voa-avatar type=\"initials\" initials=\"AB\" size=\"md\"></voa-avatar>\r\n\r\n<!-- Avatar com foto -->\r\n<voa-avatar \r\n  type=\"photo\" \r\n  src=\"https://i.pravatar.cc/150?img=1\" \r\n  alt=\"Avatar do usuário\"\r\n  size=\"md\"\r\n></voa-avatar>\r\n\r\n<!-- Diferentes tamanhos -->\r\n<voa-avatar type=\"icon\" size=\"xs\"></voa-avatar>\r\n<voa-avatar type=\"icon\" size=\"sm\"></voa-avatar>\r\n<voa-avatar type=\"icon\" size=\"md\"></voa-avatar>\r\n<voa-avatar type=\"icon\" size=\"lg\"></voa-avatar>\r\n<voa-avatar type=\"icon\" size=\"xl\"></voa-avatar>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaAvatar } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Avatar com ícone padrão */}\r\n      <VoaAvatar type=\"icon\" size=\"md\" />\r\n\r\n      {/* Avatar com iniciais */}\r\n      <VoaAvatar type=\"initials\" initials=\"AB\" size=\"md\" />\r\n\r\n      {/* Avatar com foto */}\r\n      <VoaAvatar \r\n        type=\"photo\" \r\n        src=\"https://i.pravatar.cc/150?img=1\" \r\n        alt=\"Avatar do usuário\"\r\n        size=\"md\"\r\n      />\r\n\r\n      {/* Diferentes tamanhos */}\r\n      <VoaAvatar type=\"icon\" size=\"xs\" />\r\n      <VoaAvatar type=\"icon\" size=\"sm\" />\r\n      <VoaAvatar type=\"icon\" size=\"md\" />\r\n      <VoaAvatar type=\"icon\" size=\"lg\" />\r\n      <VoaAvatar type=\"icon\" size=\"xl\" />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaAvatar } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Avatar com ícone padrão -->\r\n    <voa-avatar type=\"icon\" size=\"md\"></voa-avatar>\r\n\r\n    <!-- Avatar com iniciais -->\r\n    <voa-avatar type=\"initials\" initials=\"AB\" size=\"md\"></voa-avatar>\r\n\r\n    <!-- Avatar com foto -->\r\n    <voa-avatar \r\n      type=\"photo\" \r\n      [src]=\"'https://i.pravatar.cc/150?img=1'\" \r\n      [alt]=\"'Avatar do usuário'\"\r\n      size=\"md\"\r\n    ></voa-avatar>\r\n\r\n    <!-- Diferentes tamanhos -->\r\n    <voa-avatar type=\"icon\" size=\"xs\"></voa-avatar>\r\n    <voa-avatar type=\"icon\" size=\"sm\"></voa-avatar>\r\n    <voa-avatar type=\"icon\" size=\"md\"></voa-avatar>\r\n    <voa-avatar type=\"icon\" size=\"lg\"></voa-avatar>\r\n    <voa-avatar type=\"icon\" size=\"xl\"></voa-avatar>\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    <!-- Avatar com ícone padrão -->\r\n    <VoaAvatar type=\"icon\" size=\"md\" />\r\n\r\n    <!-- Avatar com iniciais -->\r\n    <VoaAvatar type=\"initials\" initials=\"AB\" size=\"md\" />\r\n\r\n    <!-- Avatar com foto -->\r\n    <VoaAvatar \r\n      type=\"photo\" \r\n      src=\"https://i.pravatar.cc/150?img=1\" \r\n      alt=\"Avatar do usuário\"\r\n      size=\"md\"\r\n    />\r\n\r\n    <!-- Diferentes tamanhos -->\r\n    <VoaAvatar type=\"icon\" size=\"xs\" />\r\n    <VoaAvatar type=\"icon\" size=\"sm\" />\r\n    <VoaAvatar type=\"icon\" size=\"md\" />\r\n    <VoaAvatar type=\"icon\" size=\"lg\" />\r\n    <VoaAvatar type=\"icon\" size=\"xl\" />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaAvatar } 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\r\n      <h3 style=\"margin-top:2rem;margin-bottom:1rem;font-size:1.25rem;font-weight:600\">Exemplo Interativo</h3>\r\n      <div style=\"display:flex;gap:16px;align-items:center;margin-bottom:2rem\">\r\n        <voa-avatar type=\"icon\" size=\"md\"></voa-avatar>\r\n        <voa-avatar type=\"initials\" initials=\"AB\" size=\"md\"></voa-avatar>\r\n        <voa-avatar type=\"photo\" src=\"https://i.pravatar.cc/150?img=1\" alt=\"Avatar\" size=\"md\"></voa-avatar>\r\n      </div>\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-voaavatar--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};"]}

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

@@ -0,0 +1,59 @@
+/* 
+ * 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.
+ */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.voa-badge__container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.voa-badge__label {
+  display: inline-block;
+}
+
+.voa-badge__counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.voa-badge__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  white-space: pre-wrap;
+}
+
+.voa-badge__indicator-only {
+  display: inline-block;
+}
+
+.voa-badge__icon,
+.voa-badge__icon-leading,
+.voa-badge__icon-trailing {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.voa-badge__icon svg,
+.voa-badge__icon-leading svg,
+.voa-badge__icon-trailing svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+

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

@@ -0,0 +1,266 @@
+import { h, Host } from "@stencil/core";
+import { Icons } from "../../utils/icons";
+/**
+ * Badge component para exibir indicadores visuais como texto, contadores ou status.
+ * Baseado no design do Figma (node-id: 397-3352).
+ *
+ * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+ * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O container interno do badge (onde as classes são aplicadas)
+ * @part label - O wrapper do texto (para variantes plain e icons)
+ * @part counter - O wrapper do número (para variantes indicator e indicator-overlay)
+ * @part icon-leading - Container do ícone à esquerda (para variante icons)
+ * @part icon-trailing - Container do ícone à direita (para variante icons)
+ * @part icon - Container do ícone (para variante icon-only)
+ * @part indicator - O indicador numérico ou ponto (para variantes indicator, indicator-overlay, indicator-only)
+ *
+ * @slot start - Slot para ícone no início do badge (usado em variante icons)
+ * @slot end - Slot para ícone no final do badge (usado em variante icons)
+ */
+export class VoaBadgeComponent {
+    constructor() {
+        /**
+         * A variante do badge conforme design do Figma
+         */
+        this.variant = 'plain';
+        /**
+         * Forma do badge conforme design do Figma
+         */
+        this.shape = 'default';
+        /**
+         * Tamanho do badge conforme design do Figma
+         */
+        this.size = 'md';
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA
+     * Delega foco ao elemento interno nativo
+     */
+    async setFocus() {
+        var _a;
+        const focusable = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[tabindex]');
+        if (focusable) {
+            focusable.focus();
+        }
+    }
+    renderIcon(iconName) {
+        const IconComponent = Icons[iconName];
+        if (!IconComponent) {
+            console.warn(`Ícone não encontrado: ${iconName}`);
+            return null;
+        }
+        return h(IconComponent, null);
+    }
+    getAriaLabel() {
+        if (this.variant === 'indicator' || this.variant === 'indicator-overlay') {
+            return `${this.count || 0} items`;
+        }
+        if (this.variant === 'indicator-only') {
+            return 'Notification indicator';
+        }
+        if (this.variant === 'icon-only') {
+            return 'Icon badge';
+        }
+        return this.label || 'Badge';
+    }
+    getRole() {
+        // All indicator variants use role="status" for dynamic updates
+        // Non-indicator variants use role="status" as 'badge' is not a valid ARIA role
+        return 'status';
+    }
+    getAriaLive() {
+        // Only indicator variants need live region announcements
+        if (this.variant === 'indicator' || this.variant === 'indicator-overlay' || this.variant === 'indicator-only') {
+            return 'polite';
+        }
+        return 'off';
+    }
+    render() {
+        const containerClasses = {
+            'voa-badge__container': true,
+            [`voa-badge--${this.variant}`]: true,
+            [`voa-badge--${this.shape}`]: true,
+            [`voa-badge--${this.size}`]: true,
+        };
+        const renderContent = () => {
+            switch (this.variant) {
+                case 'plain':
+                    return h("span", { part: "label", class: "voa-badge__label" }, this.label);
+                case 'icons':
+                    return (h("div", null, h("span", { part: "icon-leading", class: "voa-badge__icon-leading" }, h("slot", { name: "start" }, this.icon && this.renderIcon(this.icon))), h("span", { part: "label", class: "voa-badge__label" }, this.label), h("span", { part: "icon-trailing", class: "voa-badge__icon-trailing" }, h("slot", { name: "end" }, this.icon && this.renderIcon(this.icon)))));
+                case 'icon-only':
+                    return (h("span", { part: "icon", class: "voa-badge__icon" }, this.icon && this.renderIcon(this.icon)));
+                case 'indicator':
+                    return (h("span", { part: "indicator", class: "voa-badge__indicator", role: "status", "aria-live": "polite" }, this.count !== undefined ? this.count : 0));
+                case 'indicator-overlay':
+                    return (h("span", { part: "indicator", class: "voa-badge__indicator", role: "status", "aria-live": "polite" }, this.count !== undefined ? this.count : 0));
+                case 'indicator-only':
+                    return h("span", { part: "indicator", class: "voa-badge__indicator-only", "aria-hidden": "true" });
+                default:
+                    return null;
+            }
+        };
+        return (h(Host, { role: this.getRole(), "aria-label": this.getAriaLabel(), "aria-live": this.getAriaLive() }, h("div", { part: "base", class: containerClasses }, renderContent())));
+    }
+    static get is() { return "voa-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "O texto a ser exibido no badge (mapeado do Figma como \"label\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "O n\u00FAmero a ser exibido como contador (para variantes indicator e indicator-overlay)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell'",
+                    "resolved": "\"bell\" | \"check\" | \"close\" | \"error\" | \"heart\" | \"info\" | \"star\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "O nome do \u00EDcone a ser exibido (para variantes icon-only e icons)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only'",
+                    "resolved": "\"icon-only\" | \"icons\" | \"indicator\" | \"indicator-only\" | \"indicator-overlay\" | \"plain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A variante do badge conforme design do Figma"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'plain'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pill'",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forma do badge conforme design do Figma"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md'",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho do badge conforme design do Figma"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo para acessibilidade WCAG 2.2 AA\r\nDelega foco ao elemento interno nativo",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-badge.js","sourceRoot":"","sources":["../../../src/components/voa-badge/voa-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, Method } from '@stencil/core';\r\nimport { Icons } from '../../utils/icons';\r\n\r\nexport interface VoaBadge {\r\n  /**\r\n   * O texto a ser exibido no badge (mapeado do Figma como \"label\")\r\n   */\r\n  label?: string;\r\n\r\n  /**\r\n   * O número a ser exibido como contador (para variantes indicator e indicator-overlay)\r\n   */\r\n  count?: number;\r\n\r\n  /**\r\n   * O nome do ícone a ser exibido (para variantes icon-only e icons)\r\n   */\r\n  icon?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';\r\n\r\n  /**\r\n   * A variante do badge conforme design do Figma\r\n   * - plain: Badge com texto apenas\r\n   * - icons: Badge com texto e ícones (leading/trailing)\r\n   * - icon-only: Badge apenas com ícone\r\n   * - indicator: Badge numérico (contador)\r\n   * - indicator-overlay: Badge numérico com fundo vermelho (danger)\r\n   * - indicator-only: Badge apenas indicador (ponto vermelho)\r\n   */\r\n  variant?: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only';\r\n\r\n  /**\r\n   * Forma do badge conforme design do Figma\r\n   * - default: Forma retangular com bordas arredondadas\r\n   * - pill: Forma completamente arredondada (pill-shaped)\r\n   */\r\n  shape?: 'default' | 'pill';\r\n\r\n  /**\r\n   * Tamanho do badge conforme design do Figma\r\n   * - sm: Tamanho pequeno\r\n   * - md: Tamanho médio (padrão)\r\n   */\r\n  size?: 'sm' | 'md';\r\n}\r\n\r\n/**\r\n * Badge component para exibir indicadores visuais como texto, contadores ou status.\r\n * Baseado no design do Figma (node-id: 397-3352).\r\n * \r\n * O componente segue o padrão \"unstyled\" - apenas estrutura e lógica.\r\n * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O container interno do badge (onde as classes são aplicadas)\r\n * @part label - O wrapper do texto (para variantes plain e icons)\r\n * @part counter - O wrapper do número (para variantes indicator e indicator-overlay)\r\n * @part icon-leading - Container do ícone à esquerda (para variante icons)\r\n * @part icon-trailing - Container do ícone à direita (para variante icons)\r\n * @part icon - Container do ícone (para variante icon-only)\r\n * @part indicator - O indicador numérico ou ponto (para variantes indicator, indicator-overlay, indicator-only)\r\n * \r\n * @slot start - Slot para ícone no início do badge (usado em variante icons)\r\n * @slot end - Slot para ícone no final do badge (usado em variante icons)\r\n */\r\n@Component({\r\n  tag: 'voa-badge',\r\n  styleUrl: 'voa-badge.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaBadgeComponent implements VoaBadge {\r\n  @Element() host: HTMLVoaBadgeElement;\r\n\r\n  /**\r\n   * O texto a ser exibido no badge (mapeado do Figma como \"label\")\r\n   */\r\n  @Prop({ reflect: true }) label?: string;\r\n\r\n  /**\r\n   * O número a ser exibido como contador (para variantes indicator e indicator-overlay)\r\n   */\r\n  @Prop() count?: number;\r\n\r\n  /**\r\n   * O nome do ícone a ser exibido (para variantes icon-only e icons)\r\n   */\r\n  @Prop({ reflect: true }) icon?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';\r\n\r\n  /**\r\n   * A variante do badge conforme design do Figma\r\n   */\r\n  @Prop() variant: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only' = 'plain';\r\n\r\n  /**\r\n   * Forma do badge conforme design do Figma\r\n   */\r\n  @Prop({ reflect: true }) shape: 'default' | 'pill' = 'default';\r\n\r\n  /**\r\n   * Tamanho do badge conforme design do Figma\r\n   */\r\n  @Prop() size: 'sm' | 'md' = 'md';\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA\r\n   * Delega foco ao elemento interno nativo\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const focusable = this.host.shadowRoot?.querySelector('[tabindex]') as HTMLElement;\r\n    if (focusable) {\r\n      focusable.focus();\r\n    }\r\n  }\r\n\r\n  private renderIcon(iconName: string) {\r\n    const IconComponent = Icons[iconName];\r\n    if (!IconComponent) {\r\n      console.warn(`Ícone não encontrado: ${iconName}`);\r\n      return null;\r\n    }\r\n    return <IconComponent />;\r\n  }\r\n\r\n  private getAriaLabel(): string {\r\n    if (this.variant === 'indicator' || this.variant === 'indicator-overlay') {\r\n      return `${this.count || 0} items`;\r\n    }\r\n    if (this.variant === 'indicator-only') {\r\n      return 'Notification indicator';\r\n    }\r\n    if (this.variant === 'icon-only') {\r\n      return 'Icon badge';\r\n    }\r\n    return this.label || 'Badge';\r\n  }\r\n\r\n  private getRole(): string {\r\n    // All indicator variants use role=\"status\" for dynamic updates\r\n    // Non-indicator variants use role=\"status\" as 'badge' is not a valid ARIA role\r\n    return 'status';\r\n  }\r\n\r\n  private getAriaLive(): 'polite' | 'off' {\r\n    // Only indicator variants need live region announcements\r\n    if (this.variant === 'indicator' || this.variant === 'indicator-overlay' || this.variant === 'indicator-only') {\r\n      return 'polite';\r\n    }\r\n    return 'off';\r\n  }\r\n\r\n  render() {\r\n    const containerClasses = {\r\n      'voa-badge__container': true,\r\n      [`voa-badge--${this.variant}`]: true,\r\n      [`voa-badge--${this.shape}`]: true,\r\n      [`voa-badge--${this.size}`]: true,\r\n    };\r\n\r\n    const renderContent = () => {\r\n      switch (this.variant) {\r\n        case 'plain':\r\n          return <span part=\"label\" class=\"voa-badge__label\">{this.label}</span>;\r\n\r\n        case 'icons':\r\n          return (\r\n            <div>\r\n              <span part=\"icon-leading\" class=\"voa-badge__icon-leading\">\r\n                <slot name=\"start\">\r\n                  {this.icon && this.renderIcon(this.icon)}\r\n                </slot>\r\n              </span>\r\n              <span part=\"label\" class=\"voa-badge__label\">{this.label}</span>\r\n              <span part=\"icon-trailing\" class=\"voa-badge__icon-trailing\">\r\n                <slot name=\"end\">\r\n                  {this.icon && this.renderIcon(this.icon)}\r\n                </slot>\r\n              </span>\r\n            </div>\r\n          );\r\n\r\n        case 'icon-only':\r\n          return (\r\n            <span part=\"icon\" class=\"voa-badge__icon\">\r\n              {this.icon && this.renderIcon(this.icon)}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator':\r\n          return (\r\n            <span part=\"indicator\" class=\"voa-badge__indicator\" role=\"status\" aria-live=\"polite\">\r\n              {this.count !== undefined ? this.count : 0}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator-overlay':\r\n          return (\r\n            <span part=\"indicator\" class=\"voa-badge__indicator\" role=\"status\" aria-live=\"polite\">\r\n              {this.count !== undefined ? this.count : 0}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator-only':\r\n          return <span part=\"indicator\" class=\"voa-badge__indicator-only\" aria-hidden=\"true\"></span>;\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    };\r\n\r\n    return (\r\n      <Host\r\n        role={this.getRole()}\r\n        aria-label={this.getAriaLabel()}\r\n        aria-live={this.getAriaLive()}\r\n      >\r\n        <div part=\"base\" class={containerClasses}>\r\n          {renderContent()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}