voa-ds-core 1.0.3

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

@@ -0,0 +1,283 @@
+/* 
+ * 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-block;
+  position: relative;
+}
+
+.voa-tooltip {
+  display: inline-flex;
+  position: absolute;
+  z-index: 1000;
+  white-space: nowrap;
+  /* Animation: initial hidden state */
+  opacity: 0;
+  pointer-events: none;
+  /* Smooth transition for opacity and transform */
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.voa-tooltip--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ============================================
+   Layout baseado na posição
+   ============================================ */
+
+/* Bottom: body com arrow embaixo */
+.voa-tooltip--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  margin-top: 10px;
+}
+
+.voa-tooltip--bottom.voa-tooltip--visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Top: body com arrow em cima */
+.voa-tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+  margin-bottom: 10px;
+}
+
+.voa-tooltip--top.voa-tooltip--visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Left: body com arrow à esquerda */
+.voa-tooltip--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+  margin-right: 10px;
+}
+
+.voa-tooltip--left.voa-tooltip--visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* Right: body com arrow à direita */
+.voa-tooltip--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(4px);
+  margin-left: 10px;
+}
+
+.voa-tooltip--right.voa-tooltip--visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* ============================================
+   Body (container do conteúdo)
+   ============================================ */
+
+.voa-tooltip__body {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  flex-shrink: 0;
+  /* Mantém largura natural para que a arrow seja centralizada em relação a ele */
+  width: fit-content;
+  /* O body e seus filhos ficam naturalmente acima dos pseudo-elementos ::before e ::after */
+  /* A borda do body sobrepõe a parte superior da arrow através do posicionamento */
+  /* Variáveis CSS para controlar o triângulo (baseado no artigo CSS-Tricks) */
+  --triangle-base: 12px;
+  /* 6px * 2 - para bottom/top arrows */
+  --triangle-height: 7px;
+  /* para bottom/top arrows */
+  --triangle-base-horizontal: 7px;
+  /* para left/right arrows */
+  --triangle-height-horizontal: 11px;
+  /* 5.5px * 2 - para left/right arrows */
+  --triangle-position: 50%;
+  /* Posição horizontal/vertical do triângulo */
+}
+
+/* ============================================
+   Arrow Triangle (criado via pseudo-elemento ::after)
+   Baseado no método clip-path do CSS-Tricks
+   ============================================ */
+
+/* Bottom arrow (aponta para cima - em direção ao elemento trigger) */
+.voa-tooltip--bottom .voa-tooltip__body::after {
+  content: '';
+  position: absolute;
+  /* Posicionar acima do body para apontar para o trigger */
+  top: calc(-1 * var(--triangle-height, 7px));
+  left: var(--triangle-position, 50%);
+  transform: translateX(-50%);
+  width: var(--triangle-base, 12px);
+  height: var(--triangle-height, 7px);
+  /* Criar triângulo usando clip-path (aponta para cima) - vértice em 50% 0% */
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  /* Background será definido externamente via CSS custom property */
+  background-color: var(--arrow-color, currentColor);
+  z-index: 0;
+  /* Atrás do body, mas acima do border-triangle */
+  pointer-events: none;
+}
+
+/* Top arrow (aponta para baixo - em direção ao elemento trigger) */
+.voa-tooltip--top .voa-tooltip__body::after {
+  content: '';
+  position: absolute;
+  /* Posicionar abaixo do body para apontar para o trigger */
+  bottom: calc(-1 * var(--triangle-height, 7px) + 1.5px);
+  left: var(--triangle-position, 50%);
+  transform: translateX(-50%);
+  width: var(--triangle-base, 12px);
+  height: var(--triangle-height, 7px);
+  /* Criar 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-color, currentColor);
+  z-index: 0;
+  /* Atrás do body, mas acima do border-triangle */
+  pointer-events: none;
+}
+
+/* Left arrow (aponta para direita - em direção ao elemento trigger) */
+.voa-tooltip--left .voa-tooltip__body::after {
+  content: '';
+  position: absolute;
+  /* Posicionar à direita do body para apontar para o trigger */
+  right: calc(-1 * var(--triangle-base-horizontal, 7px));
+  top: var(--triangle-position, 50%);
+  transform: translateY(-50%);
+  width: var(--triangle-base-horizontal, 7px);
+  height: var(--triangle-height-horizontal, 11px);
+  /* Criar triângulo usando clip-path (aponta para direita) - vértice em 100% 50% */
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  background-color: var(--arrow-color, currentColor);
+  z-index: 0;
+  /* Atrás do body, mas acima do border-triangle */
+  pointer-events: none;
+}
+
+/* Right arrow (aponta para esquerda - em direção ao elemento trigger) */
+.voa-tooltip--right .voa-tooltip__body::after {
+  content: '';
+  position: absolute;
+  /* Posicionar à esquerda do body para apontar para o trigger */
+  left: calc(-1 * var(--triangle-base-horizontal, 7px));
+  top: var(--triangle-position, 50%);
+  transform: translateY(-50%);
+  width: var(--triangle-base-horizontal, 7px);
+  height: var(--triangle-height-horizontal, 11px);
+  /* Criar triângulo usando clip-path (aponta para esquerda) - vértice em 0% 50% */
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  background-color: var(--arrow-color, currentColor);
+  z-index: 0;
+  /* Atrás do body, mas acima do border-triangle */
+  pointer-events: none;
+}
+
+/* ============================================
+   Border Triangle (criado via pseudo-elemento ::before)
+   Triângulo maior posicionado atrás para criar o efeito de borda
+   ============================================ */
+
+/* Bottom arrow border (aponta para cima - em direção ao elemento trigger) */
+.voa-tooltip--bottom .voa-tooltip__body::before {
+  content: '';
+  position: absolute;
+  /* Posicionar acima do body para criar borda do triângulo que aponta para cima */
+  top: calc(-1 * var(--triangle-height, 7px) - 1.5px);
+  left: var(--triangle-position, 50%);
+  transform: translateX(-50%);
+  /* Tamanho maior para criar a borda: +3px de largura (1.5px cada lado), +3px de altura */
+  width: calc(var(--triangle-base, 12px) + 3px);
+  height: calc(var(--triangle-height, 7px) + 3px);
+  /* Triângulo maior - aponta para cima */
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  background-color: var(--arrow-border-color, transparent);
+  z-index: -1;
+  /* Mais atrás - atrás do triângulo principal e do body */
+  pointer-events: none;
+}
+
+/* Top arrow border (aponta para baixo - em direção ao elemento trigger) */
+.voa-tooltip--top .voa-tooltip__body::before {
+  content: '';
+  position: absolute;
+  /* Posicionar abaixo do body para criar borda do triângulo que aponta para baixo */
+  bottom: calc(-1 * var(--triangle-height, 7px) + 1.5px - 1.5px);
+  left: var(--triangle-position, 50%);
+  transform: translateX(-50%);
+  width: calc(var(--triangle-base, 12px) + 3px);
+  height: calc(var(--triangle-height, 7px) + 1.5px);
+  /* Triângulo maior - aponta para baixo */
+  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
+  background-color: var(--arrow-border-color, transparent);
+  z-index: -1;
+  /* Mais atrás - atrás do triângulo principal e do body */
+  pointer-events: none;
+}
+
+/* Left arrow border (aponta para direita - em direção ao elemento trigger) */
+.voa-tooltip--left .voa-tooltip__body::before {
+  content: '';
+  position: absolute;
+  /* Posicionar à direita do body para criar borda do triângulo que aponta para direita */
+  right: calc(-1 * var(--triangle-base-horizontal, 7px) - 1.5px);
+  top: var(--triangle-position, 50%);
+  transform: translateY(-50%);
+  width: calc(var(--triangle-base-horizontal, 7px) + 3px);
+  height: calc(var(--triangle-height-horizontal, 11px) + 3px);
+  /* Triângulo maior - aponta para direita */
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  background-color: var(--arrow-border-color, transparent);
+  z-index: -1;
+  /* Mais atrás - atrás do triângulo principal e do body */
+  pointer-events: none;
+}
+
+/* Right arrow border (aponta para esquerda - em direção ao elemento trigger) */
+.voa-tooltip--right .voa-tooltip__body::before {
+  content: '';
+  position: absolute;
+  /* Posicionar à esquerda do body para criar borda do triângulo que aponta para esquerda */
+  left: calc(-1 * var(--triangle-base-horizontal, 7px) - 1.5px);
+  top: var(--triangle-position, 50%);
+  transform: translateY(-50%);
+  width: calc(var(--triangle-base-horizontal, 7px) + 3px);
+  height: calc(var(--triangle-height-horizontal, 11px) + 3px);
+  /* Triângulo maior - aponta para esquerda */
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  background-color: var(--arrow-border-color, transparent);
+  z-index: -1;
+  /* Mais atrás - atrás do triângulo principal e do body */
+  pointer-events: none;
+}
+
+/* ============================================
+   Icon Slot
+   ============================================ */
+
+.voa-tooltip__icon-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   Content (texto)
+   ============================================ */
+
+.voa-tooltip__content {
+  display: flex;
+  flex-shrink: 0;
+  text-align: center;
+}

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

@@ -0,0 +1,230 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Tooltip component do Voa Design System, baseado no design do Figma.
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O elemento raiz do tooltip
+ * @part body - Container do conteúdo (background, border, padding). O triângulo é criado via pseudo-elementos ::before e ::after
+ * @part icon-slot - Container do ícone opcional
+ * @part content - Container do texto
+ *
+ * @example
+ * <voa-tooltip position="top" theme="spot" text="Hello World">
+ *   <span slot="icon">⚠️</span>
+ * </voa-tooltip>
+ */
+export class VoaTooltip {
+    constructor() {
+        this.isVisible = false;
+        /**
+         * Posição da seta do tooltip.
+         * Mapeia as posições do Figma: top, bottom, left, right.
+         */
+        this.position = 'bottom';
+        /**
+         * Tema de cor do tooltip.
+         * Mapeia os temas do Figma: default, spot, pink, grape, violet, indigo, blue, cyan, teal, lime, orange.
+         */
+        this.theme = 'default';
+        /**
+         * Se verdadeiro, exibe o slot de ícone.
+         * Baseado na prop `icon` do design do Figma.
+         */
+        this.icon = true;
+        /**
+         * Texto do tooltip.
+         * Pode ser fornecido via prop ou via slot padrão.
+         */
+        this.text = 'Body text';
+        this.showTooltip = () => {
+            this.isVisible = true;
+        };
+        this.hideTooltip = () => {
+            this.isVisible = false;
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno.
+     */
+    async setFocus() {
+        var _a;
+        const content = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="content"]');
+        if (content) {
+            content.focus();
+        }
+    }
+    componentDidLoad() {
+        var _a;
+        // Get the slot element from shadow DOM
+        const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot) {
+            // Get all slotted elements
+            const slottedElements = slot.assignedElements({ flatten: true });
+            // Attach event listeners to each slotted element
+            slottedElements.forEach((element) => {
+                element.addEventListener('mouseenter', this.showTooltip);
+                element.addEventListener('mouseleave', this.hideTooltip);
+                element.addEventListener('focusin', this.showTooltip);
+                element.addEventListener('focusout', this.hideTooltip);
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: 'c028eefe619a891b7f6f7ca2bc41f2c66f39a029', role: "tooltip", "aria-label": this.ariaLabel || this.text, onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip, onFocusin: this.showTooltip, onFocusout: this.hideTooltip }, h("slot", { key: 'e6224fe757cf53d890a3f0d4fd6261d96650a180' }), h("div", { key: '8432ed710e57cc9d4d27c3400e40ee4dda06abc8', part: "base", class: {
+                'voa-tooltip': true,
+                [`voa-tooltip--${this.position}`]: true,
+                [`voa-tooltip--${this.theme}`]: true,
+                'voa-tooltip--visible': this.isVisible,
+            }, "aria-hidden": !this.isVisible ? 'true' : 'false' }, h("div", { key: '6f65c439ceb970c2d4ccda7daebfbac1658ce7a7', part: "body", class: "voa-tooltip__body" }, this.icon && (h("div", { key: 'd9842fe4e0217baec069d2a2e59e6e1a486ebc65', part: "icon-slot", class: "voa-tooltip__icon-slot" }, h("slot", { key: '11a80c7da30db69b0c3bc5ff455cf4e475c58a99', name: "icon" }))), h("div", { key: '73ed5b2d20b3b96158533d82eb0d1fcc7a179071', part: "content", class: "voa-tooltip__content" }, this.text)))));
+    }
+    static get is() { return "voa-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posi\u00E7\u00E3o da seta do tooltip.\r\nMapeia as posi\u00E7\u00F5es do Figma: top, bottom, left, right."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'bottom'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange'",
+                    "resolved": "\"blue\" | \"cyan\" | \"default\" | \"grape\" | \"indigo\" | \"lime\" | \"orange\" | \"pink\" | \"spot\" | \"teal\" | \"violet\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tema de cor do tooltip.\r\nMapeia os temas do Figma: default, spot, pink, grape, violet, indigo, blue, cyan, teal, lime, orange."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "theme",
+                "defaultValue": "'default'"
+            },
+            "icon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, exibe o slot de \u00EDcone.\r\nBaseado na prop `icon` do design do Figma."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon",
+                "defaultValue": "true"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do tooltip.\r\nPode ser fornecido via prop ou via slot padr\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "'Body text'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "R\u00F3tulo ARIA para acessibilidade.\r\nUsado para descrever o tooltip para leitores de tela."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    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.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tooltip.js","sourceRoot":"","sources":["../../../src/components/voa-tooltip/voa-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;;;;;;;;;;;;GAeG;AAOH,MAAM,OAAO,UAAU;IANvB;QASW,cAAS,GAAY,KAAK,CAAC;QAEpC;;;WAGG;QACsB,aAAQ,GAAwC,QAAQ,CAAC;QAElF;;;WAGG;QACsB,UAAK,GAA+G,SAAS,CAAC;QAEvJ;;;WAGG;QACsB,SAAI,GAAY,IAAI,CAAC;QAE9C;;;WAGG;QACK,SAAI,GAAW,WAAW,CAAC;QAoB3B,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;KAgEH;IAlFC;;;OAGG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAgB,CAAC;QACvF,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAUD,gBAAgB;;QACd,uCAAuC;QACvC,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAoB,CAAC;QAC5E,IAAI,IAAI,EAAE,CAAC;YACT,2BAA2B;YAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAEjE,iDAAiD;YACjD,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAClC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBACzD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBACzD,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBACtD,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACzD,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EACvC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,UAAU,EAAE,IAAI,CAAC,WAAW;YAE5B,8DAAa;YAEb,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,CAAC,gBAAgB,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;oBACvC,CAAC,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;oBACpC,sBAAsB,EAAE,IAAI,CAAC,SAAS;iBACvC,iBACY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBAE/C,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB;oBAExB,IAAI,CAAC,IAAI,IAAI,CACZ,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,wBAAwB;wBAE9B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACP;oBACD,4DACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,sBAAsB,IAE3B,IAAI,CAAC,IAAI,CACN,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Method, State } from '@stencil/core';\r\n\r\n/**\r\n * Tooltip component do Voa Design System, baseado no design do Figma.\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do tooltip\r\n * @part body - Container do conteúdo (background, border, padding). O triângulo é criado via pseudo-elementos ::before e ::after\r\n * @part icon-slot - Container do ícone opcional\r\n * @part content - Container do texto\r\n * \r\n * @example\r\n * <voa-tooltip position=\"top\" theme=\"spot\" text=\"Hello World\">\r\n *   <span slot=\"icon\">⚠️</span>\r\n * </voa-tooltip>\r\n */\r\n@Component({\r\n  tag: 'voa-tooltip',\r\n  styleUrl: 'voa-tooltip.css',\r\n  shadow: true,\r\n  scoped: false,\r\n})\r\nexport class VoaTooltip {\r\n  @Element() host: HTMLVoaTooltipElement;\r\n\r\n  @State() isVisible: boolean = false;\r\n\r\n  /**\r\n   * Posição da seta do tooltip.\r\n   * Mapeia as posições do Figma: top, bottom, left, right.\r\n   */\r\n  @Prop({ reflect: true }) position: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n\r\n  /**\r\n   * Tema de cor do tooltip.\r\n   * Mapeia os temas do Figma: default, spot, pink, grape, violet, indigo, blue, cyan, teal, lime, orange.\r\n   */\r\n  @Prop({ reflect: true }) theme: 'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange' = 'default';\r\n\r\n  /**\r\n   * Se verdadeiro, exibe o slot de ícone.\r\n   * Baseado na prop `icon` do design do Figma.\r\n   */\r\n  @Prop({ reflect: true }) icon: boolean = true;\r\n\r\n  /**\r\n   * Texto do tooltip.\r\n   * Pode ser fornecido via prop ou via slot padrão.\r\n   */\r\n  @Prop() text: string = 'Body text';\r\n\r\n  /**\r\n   * Rótulo ARIA para acessibilidade.\r\n   * Usado para descrever o tooltip para leitores de tela.\r\n   */\r\n  @Prop() ariaLabel: string;\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA.\r\n   * Delega foco ao elemento interno.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const content = this.host.shadowRoot?.querySelector('[part=\"content\"]') as HTMLElement;\r\n    if (content) {\r\n      content.focus();\r\n    }\r\n  }\r\n\r\n  private showTooltip = () => {\r\n    this.isVisible = true;\r\n  };\r\n\r\n  private hideTooltip = () => {\r\n    this.isVisible = false;\r\n  };\r\n\r\n  componentDidLoad() {\r\n    // Get the slot element from shadow DOM\r\n    const slot = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement;\r\n    if (slot) {\r\n      // Get all slotted elements\r\n      const slottedElements = slot.assignedElements({ flatten: true });\r\n      \r\n      // Attach event listeners to each slotted element\r\n      slottedElements.forEach((element) => {\r\n        element.addEventListener('mouseenter', this.showTooltip);\r\n        element.addEventListener('mouseleave', this.hideTooltip);\r\n        element.addEventListener('focusin', this.showTooltip);\r\n        element.addEventListener('focusout', this.hideTooltip);\r\n      });\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        role=\"tooltip\"\r\n        aria-label={this.ariaLabel || this.text}\r\n        onMouseOver={this.showTooltip}\r\n        onMouseOut={this.hideTooltip}\r\n        onFocusin={this.showTooltip}\r\n        onFocusout={this.hideTooltip}\r\n      >\r\n        <slot></slot>\r\n\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-tooltip': true,\r\n            [`voa-tooltip--${this.position}`]: true,\r\n            [`voa-tooltip--${this.theme}`]: true,\r\n            'voa-tooltip--visible': this.isVisible,\r\n          }}\r\n          aria-hidden={!this.isVisible ? 'true' : 'false'}\r\n        >\r\n          <div\r\n            part=\"body\"\r\n            class=\"voa-tooltip__body\"\r\n          >\r\n            {this.icon && (\r\n              <div\r\n                part=\"icon-slot\"\r\n                class=\"voa-tooltip__icon-slot\"\r\n              >\r\n                <slot name=\"icon\"></slot>\r\n              </div>\r\n            )}\r\n            <div\r\n              part=\"content\"\r\n              class=\"voa-tooltip__content\"\r\n            >\r\n              {this.text}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"]}