voa-ds-core 1.0.4

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

@@ -0,0 +1,471 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../Stories/styles/voa-tooltip.external.css";
+const meta = {
+    title: "Componentes/Feedback/Tooltip",
+    tags: ['autodocs'],
+    render: (args) => {
+        var _a, _b, _c, _d;
+        return html `
+    <div style="padding: 50px; display: flex; justify-content: center;">
+      <voa-tooltip
+        .position=${(_a = args.position) !== null && _a !== void 0 ? _a : 'bottom'}
+        .theme=${(_b = args.theme) !== null && _b !== void 0 ? _b : 'default'}
+        ?icon=${(_c = args.icon) !== null && _c !== void 0 ? _c : true}
+        .text=${(_d = args.text) !== null && _d !== void 0 ? _d : 'Body text'}
+        aria-label=${ifDefined(args.ariaLabel)}
+      >
+        <button style="padding: 10px 20px; cursor: pointer;">Hover me</button>
+      </voa-tooltip>
+    </div>
+  `;
+    },
+    argTypes: {
+        position: {
+            control: 'select',
+            options: ['top', 'bottom', 'left', 'right'],
+            description: 'Posição da seta do tooltip',
+        },
+        theme: {
+            control: 'select',
+            options: ['default', 'spot', 'pink', 'grape', 'violet', 'indigo', 'blue', 'cyan', 'teal', 'lime', 'orange'],
+            description: 'Tema de cor do tooltip',
+        },
+        icon: {
+            control: 'boolean',
+            description: 'Exibir ícone no tooltip',
+        },
+        text: {
+            control: 'text',
+            description: 'Texto do tooltip',
+        },
+        ariaLabel: {
+            control: 'text',
+            description: 'Rótulo ARIA para acessibilidade',
+        },
+    },
+    args: {
+        position: 'bottom',
+        theme: 'default',
+        icon: true,
+        text: 'Body text',
+    },
+    parameters: {
+        // Link para Figma (OBRIGATÓRIO)
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=538-2010&t=Kno5mRpQSwBY8jAM-4',
+        },
+    },
+};
+export default meta;
+// Story padrão para playground
+export const Playground = {};
+// ============================================
+// Posições: Bottom
+// ============================================
+export const BottomDefault = {
+    args: {
+        position: 'bottom',
+        theme: 'default',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomSpot = {
+    args: {
+        position: 'bottom',
+        theme: 'spot',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomPink = {
+    args: {
+        position: 'bottom',
+        theme: 'pink',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomGrape = {
+    args: {
+        position: 'bottom',
+        theme: 'grape',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomViolet = {
+    args: {
+        position: 'bottom',
+        theme: 'violet',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomIndigo = {
+    args: {
+        position: 'bottom',
+        theme: 'indigo',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomBlue = {
+    args: {
+        position: 'bottom',
+        theme: 'blue',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomCyan = {
+    args: {
+        position: 'bottom',
+        theme: 'cyan',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomTeal = {
+    args: {
+        position: 'bottom',
+        theme: 'teal',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomLime = {
+    args: {
+        position: 'bottom',
+        theme: 'lime',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const BottomOrange = {
+    args: {
+        position: 'bottom',
+        theme: 'orange',
+        icon: true,
+        text: 'Body text',
+    },
+};
+// ============================================
+// Posições: Top
+// ============================================
+export const TopDefault = {
+    args: {
+        position: 'top',
+        theme: 'default',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const TopSpot = {
+    args: {
+        position: 'top',
+        theme: 'spot',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const TopPink = {
+    args: {
+        position: 'top',
+        theme: 'pink',
+        icon: true,
+        text: 'Body text',
+    },
+};
+// ============================================
+// Posições: Left
+// ============================================
+export const LeftDefault = {
+    args: {
+        position: 'left',
+        theme: 'default',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const LeftSpot = {
+    args: {
+        position: 'left',
+        theme: 'spot',
+        icon: true,
+        text: 'Body text',
+    },
+};
+// ============================================
+// Posições: Right
+// ============================================
+export const RightDefault = {
+    args: {
+        position: 'right',
+        theme: 'default',
+        icon: true,
+        text: 'Body text',
+    },
+};
+export const RightSpot = {
+    args: {
+        position: 'right',
+        theme: 'spot',
+        icon: true,
+        text: 'Body text',
+    },
+};
+// ============================================
+// Sem ícone
+// ============================================
+export const WithoutIcon = {
+    args: {
+        position: 'bottom',
+        theme: 'default',
+        icon: false,
+        text: 'Body text',
+    },
+};
+// ============================================
+// Texto personalizado
+// ============================================
+export const CustomText = {
+    args: {
+        position: 'bottom',
+        theme: 'default',
+        icon: true,
+        text: 'Este é um tooltip com texto personalizado',
+    },
+};
+// ============================================
+// Documentação de CSS Parts
+// ============================================
+/**
+ * ## Theming (CSS Parts)
+ *
+ * Este componente é "unstyled" e pode ser estilizado usando CSS Custom Properties
+ * (de `@voa-ds/tokens`) direcionando os seguintes seletores CSS `::part()`:
+ *
+ * | Part Name | Description |
+ * | :--- | :--- |
+ * | `base` | O elemento raiz do tooltip |
+ * | `body` | Container do conteúdo (background, border, padding) |
+ * | `icon-slot` | Container do ícone opcional |
+ * | `content` | Container do texto |
+ * | `arrow` | Elemento da seta (subcomponente voa-tooltip-arrow) |
+ *
+ * **Exemplo de estilização:**
+ *
+ * \`\`\`css
+ * voa-tooltip::part(body) {
+ *   background-color: var(--tooltip-default-bg);
+ *   border: 1.5px solid var(--tooltip-default-border);
+ *   border-radius: var(--radius-sm);
+ *   padding: var(--spacing-spacing-sm) var(--spacing-spacing-rg);
+ * }
+ *
+ * voa-tooltip[theme="spot"]::part(body) {
+ *   background-color: var(--tooltip-spot-bg);
+ *   border-color: var(--tooltip-spot-border);
+ * }
+ *
+ * voa-tooltip::part(content) {
+ *   color: var(--tooltip-default-text);
+ *   font-family: var(--font-family-sans);
+ *   font-size: 14px;
+ *   line-height: 16px;
+ * }
+ *
+ * voa-tooltip::part(arrow) {
+ *   --arrow-color: var(--tooltip-default-bg);
+ * }
+ * \`\`\`
+ */
+// ============================================
+// 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
+<!-- Tooltip básico -->
+<voa-tooltip 
+  position="bottom"
+  theme="default"
+  text="Texto do tooltip"
+  icon
+></voa-tooltip>
+
+<!-- Tooltip sem ícone -->
+<voa-tooltip 
+  position="top"
+  theme="blue"
+  text="Informação importante"
+  icon={false}
+></voa-tooltip>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaTooltip } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Tooltip básico */}
+      <VoaTooltip
+        position="bottom"
+        theme="default"
+        text="Texto do tooltip"
+        icon
+      />
+
+      {/* Tooltip sem ícone */}
+      <VoaTooltip
+        position="top"
+        theme="blue"
+        text="Informação importante"
+        icon={false}
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaTooltip } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Tooltip básico -->
+    <voa-tooltip
+      [position]="'bottom'"
+      [theme]="'default'"
+      [text]="'Texto do tooltip'"
+      [icon]="true"
+    ></voa-tooltip>
+
+    <!-- Tooltip sem ícone -->
+    <voa-tooltip
+      [position]="'top'"
+      [theme]="'blue'"
+      [text]="'Informação importante'"
+      [icon]="false"
+    ></voa-tooltip>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Tooltip básico -->
+    <VoaTooltip
+      position="bottom"
+      theme="default"
+      text="Texto do tooltip"
+      :icon="true"
+    />
+
+    <!-- Tooltip sem ícone -->
+    <VoaTooltip
+      position="top"
+      theme="blue"
+      text="Informação importante"
+      :icon="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoaTooltip } 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: () => {
+        // Criar container que inclui o componente e a documentação
+        const container = document.createElement('div');
+        container.style.cssText = 'padding: 2rem; max-width: 100%;';
+        // Adicionar título
+        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);
+        // Adicionar descrição
+        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);
+        // Adicionar componente de exemplo
+        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-tooltip');
+        el.position = 'bottom';
+        el.theme = 'default';
+        el.text = 'Exemplo de Uso';
+        el.icon = true;
+        el.style.cssText = 'margin-bottom: 2rem;';
+        container.appendChild(el);
+        // Adicionar nota sobre documentação completa
+        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-voatooltip--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-tooltip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/voa-tooltip/voa-tooltip.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-tooltip.external.css';\r\nimport type { VoaTooltip } from './voa-tooltip';\r\n\r\nconst meta: Meta<VoaTooltip> = {\r\n  title: \"Componentes/Feedback/Tooltip\",\r\n  tags: ['autodocs'],\r\n  render: (args) => html`\r\n    <div style=\"padding: 50px; display: flex; justify-content: center;\">\r\n      <voa-tooltip\r\n        .position=${args.position ?? 'bottom'}\r\n        .theme=${args.theme ?? 'default'}\r\n        ?icon=${args.icon ?? true}\r\n        .text=${args.text ?? 'Body text'}\r\n        aria-label=${ifDefined(args.ariaLabel)}\r\n      >\r\n        <button style=\"padding: 10px 20px; cursor: pointer;\">Hover me</button>\r\n      </voa-tooltip>\r\n    </div>\r\n  `,\r\n  argTypes: {\r\n    position: {\r\n      control: 'select',\r\n      options: ['top', 'bottom', 'left', 'right'],\r\n      description: 'Posição da seta do tooltip',\r\n    },\r\n    theme: {\r\n      control: 'select',\r\n      options: ['default', 'spot', 'pink', 'grape', 'violet', 'indigo', 'blue', 'cyan', 'teal', 'lime', 'orange'],\r\n      description: 'Tema de cor do tooltip',\r\n    },\r\n    icon: {\r\n      control: 'boolean',\r\n      description: 'Exibir ícone no tooltip',\r\n    },\r\n    text: {\r\n      control: 'text',\r\n      description: 'Texto do tooltip',\r\n    },\r\n    ariaLabel: {\r\n      control: 'text',\r\n      description: 'Rótulo ARIA para acessibilidade',\r\n    },\r\n  },\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'default',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\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=538-2010&t=Kno5mRpQSwBY8jAM-4',\r\n    },\r\n  },\r\n} satisfies Meta<VoaTooltip>;\r\n\r\nexport default meta;\r\ntype Story = StoryObj<VoaTooltip>;\r\n\r\n// Story padrão para playground\r\nexport const Playground: Story = {};\r\n\r\n// ============================================\r\n// Posições: Bottom\r\n// ============================================\r\n\r\nexport const BottomDefault: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'default',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomSpot: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'spot',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomPink: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'pink',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomGrape: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'grape',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomViolet: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'violet',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomIndigo: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'indigo',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomBlue: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'blue',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomCyan: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'cyan',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomTeal: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'teal',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomLime: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'lime',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const BottomOrange: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'orange',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Posições: Top\r\n// ============================================\r\n\r\nexport const TopDefault: Story = {\r\n  args: {\r\n    position: 'top',\r\n    theme: 'default',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const TopSpot: Story = {\r\n  args: {\r\n    position: 'top',\r\n    theme: 'spot',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const TopPink: Story = {\r\n  args: {\r\n    position: 'top',\r\n    theme: 'pink',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Posições: Left\r\n// ============================================\r\n\r\nexport const LeftDefault: Story = {\r\n  args: {\r\n    position: 'left',\r\n    theme: 'default',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const LeftSpot: Story = {\r\n  args: {\r\n    position: 'left',\r\n    theme: 'spot',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Posições: Right\r\n// ============================================\r\n\r\nexport const RightDefault: Story = {\r\n  args: {\r\n    position: 'right',\r\n    theme: 'default',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\nexport const RightSpot: Story = {\r\n  args: {\r\n    position: 'right',\r\n    theme: 'spot',\r\n    icon: true,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Sem ícone\r\n// ============================================\r\n\r\nexport const WithoutIcon: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'default',\r\n    icon: false,\r\n    text: 'Body text',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Texto personalizado\r\n// ============================================\r\n\r\nexport const CustomText: Story = {\r\n  args: {\r\n    position: 'bottom',\r\n    theme: 'default',\r\n    icon: true,\r\n    text: 'Este é um tooltip com texto personalizado',\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Documentação de CSS Parts\r\n// ============================================\r\n\r\n/**\r\n * ## Theming (CSS Parts)\r\n * \r\n * Este componente é \"unstyled\" e pode ser estilizado usando CSS Custom Properties\r\n * (de `@voa-ds/tokens`) direcionando os seguintes seletores CSS `::part()`:\r\n * \r\n * | Part Name | Description |\r\n * | :--- | :--- |\r\n * | `base` | O elemento raiz do tooltip |\r\n * | `body` | Container do conteúdo (background, border, padding) |\r\n * | `icon-slot` | Container do ícone opcional |\r\n * | `content` | Container do texto |\r\n * | `arrow` | Elemento da seta (subcomponente voa-tooltip-arrow) |\r\n * \r\n * **Exemplo de estilização:**\r\n * \r\n * \\`\\`\\`css\r\n * voa-tooltip::part(body) {\r\n *   background-color: var(--tooltip-default-bg);\r\n *   border: 1.5px solid var(--tooltip-default-border);\r\n *   border-radius: var(--radius-sm);\r\n *   padding: var(--spacing-spacing-sm) var(--spacing-spacing-rg);\r\n * }\r\n * \r\n * voa-tooltip[theme=\"spot\"]::part(body) {\r\n *   background-color: var(--tooltip-spot-bg);\r\n *   border-color: var(--tooltip-spot-border);\r\n * }\r\n * \r\n * voa-tooltip::part(content) {\r\n *   color: var(--tooltip-default-text);\r\n *   font-family: var(--font-family-sans);\r\n *   font-size: 14px;\r\n *   line-height: 16px;\r\n * }\r\n * \r\n * voa-tooltip::part(arrow) {\r\n *   --arrow-color: var(--tooltip-default-bg);\r\n * }\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<!-- Tooltip básico -->\r\n<voa-tooltip \r\n  position=\"bottom\"\r\n  theme=\"default\"\r\n  text=\"Texto do tooltip\"\r\n  icon\r\n></voa-tooltip>\r\n\r\n<!-- Tooltip sem ícone -->\r\n<voa-tooltip \r\n  position=\"top\"\r\n  theme=\"blue\"\r\n  text=\"Informação importante\"\r\n  icon={false}\r\n></voa-tooltip>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaTooltip } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Tooltip básico */}\r\n      <VoaTooltip\r\n        position=\"bottom\"\r\n        theme=\"default\"\r\n        text=\"Texto do tooltip\"\r\n        icon\r\n      />\r\n\r\n      {/* Tooltip sem ícone */}\r\n      <VoaTooltip\r\n        position=\"top\"\r\n        theme=\"blue\"\r\n        text=\"Informação importante\"\r\n        icon={false}\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaTooltip } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Tooltip básico -->\r\n    <voa-tooltip\r\n      [position]=\"'bottom'\"\r\n      [theme]=\"'default'\"\r\n      [text]=\"'Texto do tooltip'\"\r\n      [icon]=\"true\"\r\n    ></voa-tooltip>\r\n\r\n    <!-- Tooltip sem ícone -->\r\n    <voa-tooltip\r\n      [position]=\"'top'\"\r\n      [theme]=\"'blue'\"\r\n      [text]=\"'Informação importante'\"\r\n      [icon]=\"false\"\r\n    ></voa-tooltip>\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    <!-- Tooltip básico -->\r\n    <VoaTooltip\r\n      position=\"bottom\"\r\n      theme=\"default\"\r\n      text=\"Texto do tooltip\"\r\n      :icon=\"true\"\r\n    />\r\n\r\n    <!-- Tooltip sem ícone -->\r\n    <VoaTooltip\r\n      position=\"top\"\r\n      theme=\"blue\"\r\n      text=\"Informação importante\"\r\n      :icon=\"false\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaTooltip } 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: () => {\r\n    // Criar container que inclui o componente e a documentação\r\n    const container = document.createElement('div');\r\n    container.style.cssText = 'padding: 2rem; max-width: 100%;';\r\n\r\n    // Adicionar título\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    // Adicionar descrição\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    // Adicionar componente de exemplo\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-tooltip') as any;\r\n    el.position = 'bottom';\r\n    el.theme = 'default';\r\n    el.text = 'Exemplo de Uso';\r\n    el.icon = true;\r\n    el.style.cssText = 'margin-bottom: 2rem;';\r\n    container.appendChild(el);\r\n\r\n    // Adicionar nota sobre documentação completa\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 = `\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;\">\r\n        Para ver exemplos de código completos para HTML, React, Angular e Vue, \r\n        <a href=\"?path=/docs/components-voatooltip--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.\r\n      </p>\r\n    `;\r\n    container.appendChild(note);\r\n\r\n    return container;\r\n  }\r\n};\r\n"]}

package/dist/collection/components/voa-tooltip-arrow/voa-tooltip-arrow.css

@@ -0,0 +1,158 @@
+:host {
+  display: block;
+}
+
+.voa-tooltip-arrow {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   Bottom arrow (aponta para baixo)
+   ============================================ */
+.voa-tooltip-arrow--bottom {
+  /* Largura automática para centralizar em relação ao body */
+  width: auto;
+  /* Centralizado via align-items do container pai */
+  justify-content: center;
+}
+
+.voa-tooltip-arrow--bottom .voa-tooltip-arrow__triangle {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */
+}
+
+/* Borda da seta usando clip-path - triângulo maior posicionado atrás */
+.voa-tooltip-arrow--bottom .voa-tooltip-arrow__triangle::before {
+  content: '';
+  position: absolute;
+  /* Triângulo de borda: 1.5px maior em cada direção */
+  /* Base: 12px (6px * 2) + 3px (1.5px * 2) = 15px */
+  /* Altura: 7px + 3px (1.5px * 2) = 10px */
+  width: 15px;
+  height: 10px;
+  /* Posicionar para que o vértice inferior fique alinhado com o vértice do triângulo principal */
+  /* O triângulo principal tem seu vértice em (0, 0) - o ponto onde as bordas se encontram */
+  /* O triângulo de borda precisa ter seu vértice no mesmo ponto */
+  top: -10px; /* Mover para cima pela altura total, de forma que o vértice inferior fique em (0, 0) */
+  left: 50%; /* Centralizar horizontalmente */
+  transform: translateX(-50%); /* Ajustar para centralizar - o vértice estará em (50%, 100%) = (50%, 0px relativo ao triângulo principal) */
+  /* Criar o triângulo usando clip-path (aponta para baixo) - vértice em 50% 100% */
+  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
+  background-color: var(--arrow-border-color, transparent);
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* ============================================
+   Top arrow (aponta para cima)
+   ============================================ */
+.voa-tooltip-arrow--top {
+  /* Largura automática para centralizar em relação ao body */
+  width: auto;
+  /* Centralizado via align-items do container pai */
+  justify-content: center;
+}
+
+.voa-tooltip-arrow--top .voa-tooltip-arrow__triangle {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */
+}
+
+/* Borda da seta usando clip-path em um quadrado (aponta para cima) */
+.voa-tooltip-arrow--top .voa-tooltip-arrow__triangle::before {
+  content: '';
+  position: absolute;
+  width: calc(6px * 2 + 1.5px * 2); /* 15px - base do triângulo + borda */
+  height: calc(7px + 1.5px * 2); /* 10px - altura do triângulo + borda */
+  bottom: -10px; /* Mover para baixo pela altura total */
+  left: 50%;
+  transform: translateX(-50%);
+  /* Criar o triângulo usando clip-path (aponta para cima) */
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  background-color: var(--arrow-border-color, transparent);
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* ============================================
+   Left arrow (aponta para esquerda)
+   ============================================ */
+.voa-tooltip-arrow--left {
+  /* Altura automática para centralizar em relação ao body */
+  height: auto;
+  /* Centralizado via align-items do container pai */
+  align-items: center;
+}
+
+.voa-tooltip-arrow--left .voa-tooltip-arrow__triangle {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-top: 5.5px solid transparent;
+  border-bottom: 5.5px solid transparent;
+  border-right: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */
+}
+
+/* Borda da seta usando clip-path em um quadrado (aponta para esquerda) */
+.voa-tooltip-arrow--left .voa-tooltip-arrow__triangle::before {
+  content: '';
+  position: absolute;
+  width: calc(7px + 1.5px * 2); /* 10px - largura do triângulo + borda */
+  height: calc(5.5px * 2 + 1.5px * 2); /* 15px - altura do triângulo + borda */
+  top: 50%;
+  right: -10px; /* Mover para direita pela largura total */
+  transform: translateY(-50%);
+  /* Criar o triângulo usando clip-path (aponta para esquerda) */
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  background-color: var(--arrow-border-color, transparent);
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* ============================================
+   Right arrow (aponta para direita)
+   ============================================ */
+.voa-tooltip-arrow--right {
+  /* Altura automática para centralizar em relação ao body */
+  height: auto;
+  /* Centralizado via align-items do container pai */
+  align-items: center;
+}
+
+.voa-tooltip-arrow--right .voa-tooltip-arrow__triangle {
+  position: relative;
+  width: 0;
+  height: 0;
+  border-top: 5.5px solid transparent;
+  border-bottom: 5.5px solid transparent;
+  border-left: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */
+}
+
+/* Borda da seta usando clip-path em um quadrado (aponta para direita) */
+.voa-tooltip-arrow--right .voa-tooltip-arrow__triangle::before {
+  content: '';
+  position: absolute;
+  width: calc(7px + 1.5px * 2); /* 10px - largura do triângulo + borda */
+  height: calc(5.5px * 2 + 1.5px * 2); /* 15px - altura do triângulo + borda */
+  top: 50%;
+  left: -10px; /* Mover para esquerda pela largura total */
+  transform: translateY(-50%);
+  /* Criar o triângulo usando clip-path (aponta para direita) */
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  background-color: var(--arrow-border-color, transparent);
+  z-index: -1;
+  pointer-events: none;
+}
+