voa-ds-core 1.0.36 → 1.0.37

package/dist/custom-elements/voa-timepicker.js

@@ -30,7 +30,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const VoaTimepicker = TimePicker;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-timepicker.js.map

@@ -1 +1 @@
-{"file":"voa-timepicker.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;IAGrB,MAAM,GAAA;QACJ,OAAO,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-timepicker/timepicker.css?tag=voa-timepicker&encapsulation=shadow","src/components/voa-timepicker/timepicker.tsx"],"sourcesContent":[".timepicker {\r\n  padding: 10px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-timepicker\",\r\n  styleUrl: \"timepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class TimePicker {\r\n  @Prop() value: string;\r\n\r\n  render() {\r\n    return <input class=\"timepicker\" type=\"time\" value={this.value} />;\r\n  }\r\n}\r\n"],"version":3}
+{"file":"voa-timepicker.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;IAGrB,MAAM,GAAA;QACJ,OAAO,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-timepicker/timepicker.css?tag=voa-timepicker&encapsulation=shadow","src/components/voa-timepicker/timepicker.tsx"],"sourcesContent":[".timepicker {\r\n  padding: 10px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-timepicker\",\r\n  styleUrl: \"timepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class TimePicker {\r\n  @Prop() value: string;\r\n\r\n  render() {\r\n    return <input class=\"timepicker\" type=\"time\" value={this.value} />;\r\n  }\r\n}\r\n"],"version":3}

package/dist/custom-elements/voa-tooltip-arrow.js

@@ -45,7 +45,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const VoaTooltipArrow = VoaTooltipArrow$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-tooltip-arrow.js.map

@@ -1 +1 @@
-{"file":"voa-tooltip-arrow.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,w9EAAw9E;;MCkBt+EA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAN5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAwC,QAAQ;AAEjF;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAA+G,SAAS;AAiBvJ;IAfC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,mBAAmB,EAAE,IAAI;AACzB,gBAAA,CAAC,sBAAsB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;aAC9C,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,6BAA6B,EAAO,CAAA,CAC3D,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaTooltipArrow","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tooltip-arrow/voa-tooltip-arrow.css?tag=voa-tooltip-arrow&encapsulation=shadow","src/components/voa-tooltip-arrow/voa-tooltip-arrow.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n.voa-tooltip-arrow {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ============================================\r\n   Bottom arrow (aponta para baixo)\r\n   ============================================ */\r\n.voa-tooltip-arrow--bottom {\r\n  /* Largura automática para centralizar em relação ao body */\r\n  width: auto;\r\n  /* Centralizado via align-items do container pai */\r\n  justify-content: center;\r\n}\r\n\r\n.voa-tooltip-arrow--bottom .voa-tooltip-arrow__triangle {\r\n  position: relative;\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 6px solid transparent;\r\n  border-right: 6px solid transparent;\r\n  border-top: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */\r\n}\r\n\r\n/* Borda da seta usando clip-path - triângulo maior posicionado atrás */\r\n.voa-tooltip-arrow--bottom .voa-tooltip-arrow__triangle::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Triângulo de borda: 1.5px maior em cada direção */\r\n  /* Base: 12px (6px * 2) + 3px (1.5px * 2) = 15px */\r\n  /* Altura: 7px + 3px (1.5px * 2) = 10px */\r\n  width: 15px;\r\n  height: 10px;\r\n  /* Posicionar para que o vértice inferior fique alinhado com o vértice do triângulo principal */\r\n  /* O triângulo principal tem seu vértice em (0, 0) - o ponto onde as bordas se encontram */\r\n  /* O triângulo de borda precisa ter seu vértice no mesmo ponto */\r\n  top: -10px; /* Mover para cima pela altura total, de forma que o vértice inferior fique em (0, 0) */\r\n  left: 50%; /* Centralizar horizontalmente */\r\n  transform: translateX(-50%); /* Ajustar para centralizar - o vértice estará em (50%, 100%) = (50%, 0px relativo ao triângulo principal) */\r\n  /* Criar o triângulo usando clip-path (aponta para baixo) - vértice em 50% 100% */\r\n  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Top arrow (aponta para cima)\r\n   ============================================ */\r\n.voa-tooltip-arrow--top {\r\n  /* Largura automática para centralizar em relação ao body */\r\n  width: auto;\r\n  /* Centralizado via align-items do container pai */\r\n  justify-content: center;\r\n}\r\n\r\n.voa-tooltip-arrow--top .voa-tooltip-arrow__triangle {\r\n  position: relative;\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 6px solid transparent;\r\n  border-right: 6px solid transparent;\r\n  border-bottom: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */\r\n}\r\n\r\n/* Borda da seta usando clip-path em um quadrado (aponta para cima) */\r\n.voa-tooltip-arrow--top .voa-tooltip-arrow__triangle::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: calc(6px * 2 + 1.5px * 2); /* 15px - base do triângulo + borda */\r\n  height: calc(7px + 1.5px * 2); /* 10px - altura do triângulo + borda */\r\n  bottom: -10px; /* Mover para baixo pela altura total */\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  /* Criar o triângulo usando clip-path (aponta para cima) */\r\n  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Left arrow (aponta para esquerda)\r\n   ============================================ */\r\n.voa-tooltip-arrow--left {\r\n  /* Altura automática para centralizar em relação ao body */\r\n  height: auto;\r\n  /* Centralizado via align-items do container pai */\r\n  align-items: center;\r\n}\r\n\r\n.voa-tooltip-arrow--left .voa-tooltip-arrow__triangle {\r\n  position: relative;\r\n  width: 0;\r\n  height: 0;\r\n  border-top: 5.5px solid transparent;\r\n  border-bottom: 5.5px solid transparent;\r\n  border-right: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */\r\n}\r\n\r\n/* Borda da seta usando clip-path em um quadrado (aponta para esquerda) */\r\n.voa-tooltip-arrow--left .voa-tooltip-arrow__triangle::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: calc(7px + 1.5px * 2); /* 10px - largura do triângulo + borda */\r\n  height: calc(5.5px * 2 + 1.5px * 2); /* 15px - altura do triângulo + borda */\r\n  top: 50%;\r\n  right: -10px; /* Mover para direita pela largura total */\r\n  transform: translateY(-50%);\r\n  /* Criar o triângulo usando clip-path (aponta para esquerda) */\r\n  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Right arrow (aponta para direita)\r\n   ============================================ */\r\n.voa-tooltip-arrow--right {\r\n  /* Altura automática para centralizar em relação ao body */\r\n  height: auto;\r\n  /* Centralizado via align-items do container pai */\r\n  align-items: center;\r\n}\r\n\r\n.voa-tooltip-arrow--right .voa-tooltip-arrow__triangle {\r\n  position: relative;\r\n  width: 0;\r\n  height: 0;\r\n  border-top: 5.5px solid transparent;\r\n  border-bottom: 5.5px solid transparent;\r\n  border-left: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */\r\n}\r\n\r\n/* Borda da seta usando clip-path em um quadrado (aponta para direita) */\r\n.voa-tooltip-arrow--right .voa-tooltip-arrow__triangle::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: calc(7px + 1.5px * 2); /* 10px - largura do triângulo + borda */\r\n  height: calc(5.5px * 2 + 1.5px * 2); /* 15px - altura do triângulo + borda */\r\n  top: 50%;\r\n  left: -10px; /* Mover para esquerda pela largura total */\r\n  transform: translateY(-50%);\r\n  /* Criar o triângulo usando clip-path (aponta para direita) */\r\n  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\r\n\r\n/**\r\n * Subcomponente de seta (arrow) para o VoaTooltip.\r\n * Cria uma seta triangular apontando na direção especificada.\r\n * \r\n * A seta é implementada usando CSS border trick para criar um triângulo,\r\n * permitindo colorização dinâmica via CSS variables.\r\n * \r\n * @part base - O elemento raiz da seta\r\n * @part triangle - O triângulo visual da seta\r\n */\r\n@Component({\r\n  tag: 'voa-tooltip-arrow',\r\n  styleUrl: 'voa-tooltip-arrow.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTooltipArrow {\r\n  @Element() host: HTMLVoaTooltipArrowElement;\r\n\r\n  /**\r\n   * Posição da seta.\r\n   * Determina em qual direção a seta aponta.\r\n   */\r\n  @Prop({ reflect: true }) position: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n\r\n  /**\r\n   * Tema de cor da seta.\r\n   * A cor da seta será mapeada via CSS variables baseadas no tema.\r\n   */\r\n  @Prop({ reflect: true }) theme: 'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange' = 'default';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-tooltip-arrow': true,\r\n            [`voa-tooltip-arrow--${this.position}`]: true,\r\n          }}\r\n        >\r\n          <div part=\"triangle\" class=\"voa-tooltip-arrow__triangle\"></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"version":3}
+{"file":"voa-tooltip-arrow.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,w9EAAw9E;;MCkBt+EA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAN5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAwC,QAAQ;AAEjF;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAA+G,SAAS;AAiBvJ;IAfC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,mBAAmB,EAAE,IAAI;AACzB,gBAAA,CAAC,sBAAsB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;aAC9C,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,6BAA6B,EAAO,CAAA,CAC3D,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaTooltipArrow","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tooltip-arrow/voa-tooltip-arrow.css?tag=voa-tooltip-arrow&encapsulation=shadow","src/components/voa-tooltip-arrow/voa-tooltip-arrow.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n.voa-tooltip-arrow {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ============================================\r\n   Bottom arrow (aponta para baixo)\r\n   ============================================ */\r\n.voa-tooltip-arrow--bottom {\r\n  /* Largura automática para centralizar em relação ao body */\r\n  width: auto;\r\n  /* Centralizado via align-items do container pai */\r\n  justify-content: center;\r\n}\r\n\r\n.voa-tooltip-arrow--bottom .voa-tooltip-arrow__triangle {\r\n  position: relative;\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 6px solid transparent;\r\n  border-right: 6px solid transparent;\r\n  border-top: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */\r\n}\r\n\r\n/* Borda da seta usando clip-path - triângulo maior posicionado atrás */\r\n.voa-tooltip-arrow--bottom .voa-tooltip-arrow__triangle::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Triângulo de borda: 1.5px maior em cada direção */\r\n  /* Base: 12px (6px * 2) + 3px (1.5px * 2) = 15px */\r\n  /* Altura: 7px + 3px (1.5px * 2) = 10px */\r\n  width: 15px;\r\n  height: 10px;\r\n  /* Posicionar para que o vértice inferior fique alinhado com o vértice do triângulo principal */\r\n  /* O triângulo principal tem seu vértice em (0, 0) - o ponto onde as bordas se encontram */\r\n  /* O triângulo de borda precisa ter seu vértice no mesmo ponto */\r\n  top: -10px; /* Mover para cima pela altura total, de forma que o vértice inferior fique em (0, 0) */\r\n  left: 50%; /* Centralizar horizontalmente */\r\n  transform: translateX(-50%); /* Ajustar para centralizar - o vértice estará em (50%, 100%) = (50%, 0px relativo ao triângulo principal) */\r\n  /* Criar o triângulo usando clip-path (aponta para baixo) - vértice em 50% 100% */\r\n  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Top arrow (aponta para cima)\r\n   ============================================ */\r\n.voa-tooltip-arrow--top {\r\n  /* Largura automática para centralizar em relação ao body */\r\n  width: auto;\r\n  /* Centralizado via align-items do container pai */\r\n  justify-content: center;\r\n}\r\n\r\n.voa-tooltip-arrow--top .voa-tooltip-arrow__triangle {\r\n  position: relative;\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 6px solid transparent;\r\n  border-right: 6px solid transparent;\r\n  border-bottom: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */\r\n}\r\n\r\n/* Borda da seta usando clip-path em um quadrado (aponta para cima) */\r\n.voa-tooltip-arrow--top .voa-tooltip-arrow__triangle::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: calc(6px * 2 + 1.5px * 2); /* 15px - base do triângulo + borda */\r\n  height: calc(7px + 1.5px * 2); /* 10px - altura do triângulo + borda */\r\n  bottom: -10px; /* Mover para baixo pela altura total */\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  /* Criar o triângulo usando clip-path (aponta para cima) */\r\n  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Left arrow (aponta para esquerda)\r\n   ============================================ */\r\n.voa-tooltip-arrow--left {\r\n  /* Altura automática para centralizar em relação ao body */\r\n  height: auto;\r\n  /* Centralizado via align-items do container pai */\r\n  align-items: center;\r\n}\r\n\r\n.voa-tooltip-arrow--left .voa-tooltip-arrow__triangle {\r\n  position: relative;\r\n  width: 0;\r\n  height: 0;\r\n  border-top: 5.5px solid transparent;\r\n  border-bottom: 5.5px solid transparent;\r\n  border-right: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */\r\n}\r\n\r\n/* Borda da seta usando clip-path em um quadrado (aponta para esquerda) */\r\n.voa-tooltip-arrow--left .voa-tooltip-arrow__triangle::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: calc(7px + 1.5px * 2); /* 10px - largura do triângulo + borda */\r\n  height: calc(5.5px * 2 + 1.5px * 2); /* 15px - altura do triângulo + borda */\r\n  top: 50%;\r\n  right: -10px; /* Mover para direita pela largura total */\r\n  transform: translateY(-50%);\r\n  /* Criar o triângulo usando clip-path (aponta para esquerda) */\r\n  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Right arrow (aponta para direita)\r\n   ============================================ */\r\n.voa-tooltip-arrow--right {\r\n  /* Altura automática para centralizar em relação ao body */\r\n  height: auto;\r\n  /* Centralizado via align-items do container pai */\r\n  align-items: center;\r\n}\r\n\r\n.voa-tooltip-arrow--right .voa-tooltip-arrow__triangle {\r\n  position: relative;\r\n  width: 0;\r\n  height: 0;\r\n  border-top: 5.5px solid transparent;\r\n  border-bottom: 5.5px solid transparent;\r\n  border-left: 7px solid var(--arrow-color, currentColor); /* Cor definida externamente via custom property --arrow-color */\r\n}\r\n\r\n/* Borda da seta usando clip-path em um quadrado (aponta para direita) */\r\n.voa-tooltip-arrow--right .voa-tooltip-arrow__triangle::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: calc(7px + 1.5px * 2); /* 10px - largura do triângulo + borda */\r\n  height: calc(5.5px * 2 + 1.5px * 2); /* 15px - altura do triângulo + borda */\r\n  top: 50%;\r\n  left: -10px; /* Mover para esquerda pela largura total */\r\n  transform: translateY(-50%);\r\n  /* Criar o triângulo usando clip-path (aponta para direita) */\r\n  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  pointer-events: none;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\r\n\r\n/**\r\n * Subcomponente de seta (arrow) para o VoaTooltip.\r\n * Cria uma seta triangular apontando na direção especificada.\r\n * \r\n * A seta é implementada usando CSS border trick para criar um triângulo,\r\n * permitindo colorização dinâmica via CSS variables.\r\n * \r\n * @part base - O elemento raiz da seta\r\n * @part triangle - O triângulo visual da seta\r\n */\r\n@Component({\r\n  tag: 'voa-tooltip-arrow',\r\n  styleUrl: 'voa-tooltip-arrow.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTooltipArrow {\r\n  @Element() host: HTMLVoaTooltipArrowElement;\r\n\r\n  /**\r\n   * Posição da seta.\r\n   * Determina em qual direção a seta aponta.\r\n   */\r\n  @Prop({ reflect: true }) position: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n\r\n  /**\r\n   * Tema de cor da seta.\r\n   * A cor da seta será mapeada via CSS variables baseadas no tema.\r\n   */\r\n  @Prop({ reflect: true }) theme: 'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange' = 'default';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-tooltip-arrow': true,\r\n            [`voa-tooltip-arrow--${this.position}`]: true,\r\n          }}\r\n        >\r\n          <div part=\"triangle\" class=\"voa-tooltip-arrow__triangle\"></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"version":3}

package/dist/custom-elements/voa-tooltip.js

@@ -96,7 +96,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const VoaTooltip = VoaTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-tooltip.js.map

@@ -1 +1 @@
-{"file":"voa-tooltip.js","mappings":"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","names":["VoaTooltip","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tooltip/voa-tooltip.css?tag=voa-tooltip&encapsulation=shadow","src/components/voa-tooltip/voa-tooltip.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.voa-tooltip {\r\n  display: inline-flex;\r\n  position: absolute;\r\n  z-index: 1000;\r\n  white-space: nowrap;\r\n  /* Animation: initial hidden state */\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  /* Smooth transition for opacity and transform */\r\n  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n}\r\n\r\n.voa-tooltip--visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n/* ============================================\r\n   Layout baseado na posição\r\n   ============================================ */\r\n\r\n/* Bottom: body com arrow embaixo */\r\n.voa-tooltip--bottom {\r\n  top: 100%;\r\n  left: 50%;\r\n  transform: translateX(-50%) translateY(4px);\r\n  margin-top: 10px;\r\n}\r\n\r\n.voa-tooltip--bottom.voa-tooltip--visible {\r\n  transform: translateX(-50%) translateY(0);\r\n}\r\n\r\n/* Top: body com arrow em cima */\r\n.voa-tooltip--top {\r\n  bottom: 100%;\r\n  left: 50%;\r\n  transform: translateX(-50%) translateY(-4px);\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.voa-tooltip--top.voa-tooltip--visible {\r\n  transform: translateX(-50%) translateY(0);\r\n}\r\n\r\n/* Left: body com arrow à esquerda */\r\n.voa-tooltip--left {\r\n  right: 100%;\r\n  top: 50%;\r\n  transform: translateY(-50%) translateX(-4px);\r\n  margin-right: 10px;\r\n}\r\n\r\n.voa-tooltip--left.voa-tooltip--visible {\r\n  transform: translateY(-50%) translateX(0);\r\n}\r\n\r\n/* Right: body com arrow à direita */\r\n.voa-tooltip--right {\r\n  left: 100%;\r\n  top: 50%;\r\n  transform: translateY(-50%) translateX(4px);\r\n  margin-left: 10px;\r\n}\r\n\r\n.voa-tooltip--right.voa-tooltip--visible {\r\n  transform: translateY(-50%) translateX(0);\r\n}\r\n\r\n/* ============================================\r\n   Body (container do conteúdo)\r\n   ============================================ */\r\n\r\n.voa-tooltip__body {\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  position: relative;\r\n  flex-shrink: 0;\r\n  /* Mantém largura natural para que a arrow seja centralizada em relação a ele */\r\n  width: fit-content;\r\n  /* O body e seus filhos ficam naturalmente acima dos pseudo-elementos ::before e ::after */\r\n  /* A borda do body sobrepõe a parte superior da arrow através do posicionamento */\r\n  /* Variáveis CSS para controlar o triângulo (baseado no artigo CSS-Tricks) */\r\n  --triangle-base: 12px;\r\n  /* 6px * 2 - para bottom/top arrows */\r\n  --triangle-height: 7px;\r\n  /* para bottom/top arrows */\r\n  --triangle-base-horizontal: 7px;\r\n  /* para left/right arrows */\r\n  --triangle-height-horizontal: 11px;\r\n  /* 5.5px * 2 - para left/right arrows */\r\n  --triangle-position: 50%;\r\n  /* Posição horizontal/vertical do triângulo */\r\n}\r\n\r\n/* ============================================\r\n   Arrow Triangle (criado via pseudo-elemento ::after)\r\n   Baseado no método clip-path do CSS-Tricks\r\n   ============================================ */\r\n\r\n/* Bottom arrow (aponta para cima - em direção ao elemento trigger) */\r\n.voa-tooltip--bottom .voa-tooltip__body::after {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar acima do body para apontar para o trigger */\r\n  top: calc(-1 * var(--triangle-height, 7px));\r\n  left: var(--triangle-position, 50%);\r\n  transform: translateX(-50%);\r\n  width: var(--triangle-base, 12px);\r\n  height: var(--triangle-height, 7px);\r\n  /* Criar triângulo usando clip-path (aponta para cima) - vértice em 50% 0% */\r\n  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\r\n  /* Background será definido externamente via CSS custom property */\r\n  background-color: var(--arrow-color, currentColor);\r\n  z-index: 0;\r\n  /* Atrás do body, mas acima do border-triangle */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Top arrow (aponta para baixo - em direção ao elemento trigger) */\r\n.voa-tooltip--top .voa-tooltip__body::after {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar abaixo do body para apontar para o trigger */\r\n  bottom: calc(-1 * var(--triangle-height, 7px) + 1.5px);\r\n  left: var(--triangle-position, 50%);\r\n  transform: translateX(-50%);\r\n  width: var(--triangle-base, 12px);\r\n  height: var(--triangle-height, 7px);\r\n  /* Criar triângulo usando clip-path (aponta para baixo) - vértice em 50% 100% */\r\n  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\r\n  background-color: var(--arrow-color, currentColor);\r\n  z-index: 0;\r\n  /* Atrás do body, mas acima do border-triangle */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Left arrow (aponta para direita - em direção ao elemento trigger) */\r\n.voa-tooltip--left .voa-tooltip__body::after {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar à direita do body para apontar para o trigger */\r\n  right: calc(-1 * var(--triangle-base-horizontal, 7px));\r\n  top: var(--triangle-position, 50%);\r\n  transform: translateY(-50%);\r\n  width: var(--triangle-base-horizontal, 7px);\r\n  height: var(--triangle-height-horizontal, 11px);\r\n  /* Criar triângulo usando clip-path (aponta para direita) - vértice em 100% 50% */\r\n  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\r\n  background-color: var(--arrow-color, currentColor);\r\n  z-index: 0;\r\n  /* Atrás do body, mas acima do border-triangle */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Right arrow (aponta para esquerda - em direção ao elemento trigger) */\r\n.voa-tooltip--right .voa-tooltip__body::after {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar à esquerda do body para apontar para o trigger */\r\n  left: calc(-1 * var(--triangle-base-horizontal, 7px));\r\n  top: var(--triangle-position, 50%);\r\n  transform: translateY(-50%);\r\n  width: var(--triangle-base-horizontal, 7px);\r\n  height: var(--triangle-height-horizontal, 11px);\r\n  /* Criar triângulo usando clip-path (aponta para esquerda) - vértice em 0% 50% */\r\n  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\r\n  background-color: var(--arrow-color, currentColor);\r\n  z-index: 0;\r\n  /* Atrás do body, mas acima do border-triangle */\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Border Triangle (criado via pseudo-elemento ::before)\r\n   Triângulo maior posicionado atrás para criar o efeito de borda\r\n   ============================================ */\r\n\r\n/* Bottom arrow border (aponta para cima - em direção ao elemento trigger) */\r\n.voa-tooltip--bottom .voa-tooltip__body::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar acima do body para criar borda do triângulo que aponta para cima */\r\n  top: calc(-1 * var(--triangle-height, 7px) - 1.5px);\r\n  left: var(--triangle-position, 50%);\r\n  transform: translateX(-50%);\r\n  /* Tamanho maior para criar a borda: +3px de largura (1.5px cada lado), +3px de altura */\r\n  width: calc(var(--triangle-base, 12px) + 3px);\r\n  height: calc(var(--triangle-height, 7px) + 3px);\r\n  /* Triângulo maior - aponta para cima */\r\n  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  /* Mais atrás - atrás do triângulo principal e do body */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Top arrow border (aponta para baixo - em direção ao elemento trigger) */\r\n.voa-tooltip--top .voa-tooltip__body::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar abaixo do body para criar borda do triângulo que aponta para baixo */\r\n  bottom: calc(-1 * var(--triangle-height, 7px) + 1.5px - 1.5px);\r\n  left: var(--triangle-position, 50%);\r\n  transform: translateX(-50%);\r\n  width: calc(var(--triangle-base, 12px) + 3px);\r\n  height: calc(var(--triangle-height, 7px) + 1.5px);\r\n  /* Triângulo maior - aponta para baixo */\r\n  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  /* Mais atrás - atrás do triângulo principal e do body */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Left arrow border (aponta para direita - em direção ao elemento trigger) */\r\n.voa-tooltip--left .voa-tooltip__body::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar à direita do body para criar borda do triângulo que aponta para direita */\r\n  right: calc(-1 * var(--triangle-base-horizontal, 7px) - 1.5px);\r\n  top: var(--triangle-position, 50%);\r\n  transform: translateY(-50%);\r\n  width: calc(var(--triangle-base-horizontal, 7px) + 3px);\r\n  height: calc(var(--triangle-height-horizontal, 11px) + 3px);\r\n  /* Triângulo maior - aponta para direita */\r\n  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  /* Mais atrás - atrás do triângulo principal e do body */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Right arrow border (aponta para esquerda - em direção ao elemento trigger) */\r\n.voa-tooltip--right .voa-tooltip__body::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar à esquerda do body para criar borda do triângulo que aponta para esquerda */\r\n  left: calc(-1 * var(--triangle-base-horizontal, 7px) - 1.5px);\r\n  top: var(--triangle-position, 50%);\r\n  transform: translateY(-50%);\r\n  width: calc(var(--triangle-base-horizontal, 7px) + 3px);\r\n  height: calc(var(--triangle-height-horizontal, 11px) + 3px);\r\n  /* Triângulo maior - aponta para esquerda */\r\n  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  /* Mais atrás - atrás do triângulo principal e do body */\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Icon Slot\r\n   ============================================ */\r\n\r\n.voa-tooltip__icon-slot {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ============================================\r\n   Content (texto)\r\n   ============================================ */\r\n\r\n.voa-tooltip__content {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  text-align: center;\r\n}","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"],"version":3}
+{"file":"voa-tooltip.js","mappings":";;AAAA,MAAM,aAAa,GAAG,kmJAAkmJ;;MCwB3mJA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AANvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASW,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAEnC;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAwC,QAAQ;AAEjF;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAA+G,SAAS;AAEtJ;;;AAGG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAY,IAAI;AAE7C;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,WAAW;AAoB1B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAgEF;AAlFC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;;AACZ,QAAA,MAAM,OAAO,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,kBAAkB,CAAgB;QACtF,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,EAAE;;;IAYnB,gBAAgB,GAAA;;;AAEd,QAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,MAAM,CAAoB;QAC3E,IAAI,IAAI,EAAE;;AAER,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;AAGhE,YAAA,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;gBAClC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC;gBACxD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC;gBACxD,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC;gBACrD,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC;AACxD,aAAC,CAAC;;;IAIN,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,YAAA,EACF,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,EAAA,EAE5B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,CAAC,gBAAgB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;AACvC,gBAAA,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;gBACpC,sBAAsB,EAAE,IAAI,CAAC,SAAS;aACvC,EACY,aAAA,EAAA,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,EAAA,EAE/C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EAAA,EAExB,IAAI,CAAC,IAAI,KACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,wBAAwB,EAAA,EAE9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,sBAAsB,EAAA,EAE3B,IAAI,CAAC,IAAI,CACN,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaTooltip","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tooltip/voa-tooltip.css?tag=voa-tooltip&encapsulation=shadow","src/components/voa-tooltip/voa-tooltip.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.voa-tooltip {\r\n  display: inline-flex;\r\n  position: absolute;\r\n  z-index: 1000;\r\n  white-space: nowrap;\r\n  /* Animation: initial hidden state */\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  /* Smooth transition for opacity and transform */\r\n  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n}\r\n\r\n.voa-tooltip--visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n/* ============================================\r\n   Layout baseado na posição\r\n   ============================================ */\r\n\r\n/* Bottom: body com arrow embaixo */\r\n.voa-tooltip--bottom {\r\n  top: 100%;\r\n  left: 50%;\r\n  transform: translateX(-50%) translateY(4px);\r\n  margin-top: 10px;\r\n}\r\n\r\n.voa-tooltip--bottom.voa-tooltip--visible {\r\n  transform: translateX(-50%) translateY(0);\r\n}\r\n\r\n/* Top: body com arrow em cima */\r\n.voa-tooltip--top {\r\n  bottom: 100%;\r\n  left: 50%;\r\n  transform: translateX(-50%) translateY(-4px);\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.voa-tooltip--top.voa-tooltip--visible {\r\n  transform: translateX(-50%) translateY(0);\r\n}\r\n\r\n/* Left: body com arrow à esquerda */\r\n.voa-tooltip--left {\r\n  right: 100%;\r\n  top: 50%;\r\n  transform: translateY(-50%) translateX(-4px);\r\n  margin-right: 10px;\r\n}\r\n\r\n.voa-tooltip--left.voa-tooltip--visible {\r\n  transform: translateY(-50%) translateX(0);\r\n}\r\n\r\n/* Right: body com arrow à direita */\r\n.voa-tooltip--right {\r\n  left: 100%;\r\n  top: 50%;\r\n  transform: translateY(-50%) translateX(4px);\r\n  margin-left: 10px;\r\n}\r\n\r\n.voa-tooltip--right.voa-tooltip--visible {\r\n  transform: translateY(-50%) translateX(0);\r\n}\r\n\r\n/* ============================================\r\n   Body (container do conteúdo)\r\n   ============================================ */\r\n\r\n.voa-tooltip__body {\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  position: relative;\r\n  flex-shrink: 0;\r\n  /* Mantém largura natural para que a arrow seja centralizada em relação a ele */\r\n  width: fit-content;\r\n  /* O body e seus filhos ficam naturalmente acima dos pseudo-elementos ::before e ::after */\r\n  /* A borda do body sobrepõe a parte superior da arrow através do posicionamento */\r\n  /* Variáveis CSS para controlar o triângulo (baseado no artigo CSS-Tricks) */\r\n  --triangle-base: 12px;\r\n  /* 6px * 2 - para bottom/top arrows */\r\n  --triangle-height: 7px;\r\n  /* para bottom/top arrows */\r\n  --triangle-base-horizontal: 7px;\r\n  /* para left/right arrows */\r\n  --triangle-height-horizontal: 11px;\r\n  /* 5.5px * 2 - para left/right arrows */\r\n  --triangle-position: 50%;\r\n  /* Posição horizontal/vertical do triângulo */\r\n}\r\n\r\n/* ============================================\r\n   Arrow Triangle (criado via pseudo-elemento ::after)\r\n   Baseado no método clip-path do CSS-Tricks\r\n   ============================================ */\r\n\r\n/* Bottom arrow (aponta para cima - em direção ao elemento trigger) */\r\n.voa-tooltip--bottom .voa-tooltip__body::after {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar acima do body para apontar para o trigger */\r\n  top: calc(-1 * var(--triangle-height, 7px));\r\n  left: var(--triangle-position, 50%);\r\n  transform: translateX(-50%);\r\n  width: var(--triangle-base, 12px);\r\n  height: var(--triangle-height, 7px);\r\n  /* Criar triângulo usando clip-path (aponta para cima) - vértice em 50% 0% */\r\n  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\r\n  /* Background será definido externamente via CSS custom property */\r\n  background-color: var(--arrow-color, currentColor);\r\n  z-index: 0;\r\n  /* Atrás do body, mas acima do border-triangle */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Top arrow (aponta para baixo - em direção ao elemento trigger) */\r\n.voa-tooltip--top .voa-tooltip__body::after {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar abaixo do body para apontar para o trigger */\r\n  bottom: calc(-1 * var(--triangle-height, 7px) + 1.5px);\r\n  left: var(--triangle-position, 50%);\r\n  transform: translateX(-50%);\r\n  width: var(--triangle-base, 12px);\r\n  height: var(--triangle-height, 7px);\r\n  /* Criar triângulo usando clip-path (aponta para baixo) - vértice em 50% 100% */\r\n  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\r\n  background-color: var(--arrow-color, currentColor);\r\n  z-index: 0;\r\n  /* Atrás do body, mas acima do border-triangle */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Left arrow (aponta para direita - em direção ao elemento trigger) */\r\n.voa-tooltip--left .voa-tooltip__body::after {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar à direita do body para apontar para o trigger */\r\n  right: calc(-1 * var(--triangle-base-horizontal, 7px));\r\n  top: var(--triangle-position, 50%);\r\n  transform: translateY(-50%);\r\n  width: var(--triangle-base-horizontal, 7px);\r\n  height: var(--triangle-height-horizontal, 11px);\r\n  /* Criar triângulo usando clip-path (aponta para direita) - vértice em 100% 50% */\r\n  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\r\n  background-color: var(--arrow-color, currentColor);\r\n  z-index: 0;\r\n  /* Atrás do body, mas acima do border-triangle */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Right arrow (aponta para esquerda - em direção ao elemento trigger) */\r\n.voa-tooltip--right .voa-tooltip__body::after {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar à esquerda do body para apontar para o trigger */\r\n  left: calc(-1 * var(--triangle-base-horizontal, 7px));\r\n  top: var(--triangle-position, 50%);\r\n  transform: translateY(-50%);\r\n  width: var(--triangle-base-horizontal, 7px);\r\n  height: var(--triangle-height-horizontal, 11px);\r\n  /* Criar triângulo usando clip-path (aponta para esquerda) - vértice em 0% 50% */\r\n  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\r\n  background-color: var(--arrow-color, currentColor);\r\n  z-index: 0;\r\n  /* Atrás do body, mas acima do border-triangle */\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Border Triangle (criado via pseudo-elemento ::before)\r\n   Triângulo maior posicionado atrás para criar o efeito de borda\r\n   ============================================ */\r\n\r\n/* Bottom arrow border (aponta para cima - em direção ao elemento trigger) */\r\n.voa-tooltip--bottom .voa-tooltip__body::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar acima do body para criar borda do triângulo que aponta para cima */\r\n  top: calc(-1 * var(--triangle-height, 7px) - 1.5px);\r\n  left: var(--triangle-position, 50%);\r\n  transform: translateX(-50%);\r\n  /* Tamanho maior para criar a borda: +3px de largura (1.5px cada lado), +3px de altura */\r\n  width: calc(var(--triangle-base, 12px) + 3px);\r\n  height: calc(var(--triangle-height, 7px) + 3px);\r\n  /* Triângulo maior - aponta para cima */\r\n  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  /* Mais atrás - atrás do triângulo principal e do body */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Top arrow border (aponta para baixo - em direção ao elemento trigger) */\r\n.voa-tooltip--top .voa-tooltip__body::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar abaixo do body para criar borda do triângulo que aponta para baixo */\r\n  bottom: calc(-1 * var(--triangle-height, 7px) + 1.5px - 1.5px);\r\n  left: var(--triangle-position, 50%);\r\n  transform: translateX(-50%);\r\n  width: calc(var(--triangle-base, 12px) + 3px);\r\n  height: calc(var(--triangle-height, 7px) + 1.5px);\r\n  /* Triângulo maior - aponta para baixo */\r\n  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  /* Mais atrás - atrás do triângulo principal e do body */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Left arrow border (aponta para direita - em direção ao elemento trigger) */\r\n.voa-tooltip--left .voa-tooltip__body::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar à direita do body para criar borda do triângulo que aponta para direita */\r\n  right: calc(-1 * var(--triangle-base-horizontal, 7px) - 1.5px);\r\n  top: var(--triangle-position, 50%);\r\n  transform: translateY(-50%);\r\n  width: calc(var(--triangle-base-horizontal, 7px) + 3px);\r\n  height: calc(var(--triangle-height-horizontal, 11px) + 3px);\r\n  /* Triângulo maior - aponta para direita */\r\n  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  /* Mais atrás - atrás do triângulo principal e do body */\r\n  pointer-events: none;\r\n}\r\n\r\n/* Right arrow border (aponta para esquerda - em direção ao elemento trigger) */\r\n.voa-tooltip--right .voa-tooltip__body::before {\r\n  content: '';\r\n  position: absolute;\r\n  /* Posicionar à esquerda do body para criar borda do triângulo que aponta para esquerda */\r\n  left: calc(-1 * var(--triangle-base-horizontal, 7px) - 1.5px);\r\n  top: var(--triangle-position, 50%);\r\n  transform: translateY(-50%);\r\n  width: calc(var(--triangle-base-horizontal, 7px) + 3px);\r\n  height: calc(var(--triangle-height-horizontal, 11px) + 3px);\r\n  /* Triângulo maior - aponta para esquerda */\r\n  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\r\n  background-color: var(--arrow-border-color, transparent);\r\n  z-index: -1;\r\n  /* Mais atrás - atrás do triângulo principal e do body */\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================\r\n   Icon Slot\r\n   ============================================ */\r\n\r\n.voa-tooltip__icon-slot {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ============================================\r\n   Content (texto)\r\n   ============================================ */\r\n\r\n.voa-tooltip__content {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  text-align: center;\r\n}","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"],"version":3}

package/dist/custom-elements/voa-upload.js

@@ -28,7 +28,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const VoaUpload = Upload;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-upload.js.map

@@ -1 +1 @@
-{"file":"voa-upload.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4WAA4W;;MCOjX,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;IACjB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,KAAK,EAAC,YAAY,EAAG,CAAA,EACzD,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAA,EAAA,aAAA,CAEzC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-upload/upload.css?tag=voa-upload&encapsulation=shadow","src/components/voa-upload/upload.tsx"],"sourcesContent":[".upload {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.file-input {\r\n  width: 0.1px;\r\n  height: 0.1px;\r\n  opacity: 0;\r\n  overflow: hidden;\r\n  position: absolute;\r\n  z-index: -1;\r\n}\r\n\r\n.upload-label {\r\n  display: inline-block;\r\n  padding: 10px 20px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #007bff;\r\n  color: white;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.upload-label:hover {\r\n  background-color: #0056b3;\r\n}\r\n","import { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-upload\",\r\n  styleUrl: \"upload.css\",\r\n  shadow: true,\r\n})\r\nexport class Upload {\r\n  render() {\r\n    return (\r\n      <div class=\"upload\">\r\n        <input type=\"file\" id=\"file-upload\" class=\"file-input\" />\r\n        <label htmlFor=\"file-upload\" class=\"upload-label\">\r\n          Choose File\r\n        </label>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"voa-upload.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4WAA4W;;MCOjX,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;IACjB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,KAAK,EAAC,YAAY,EAAG,CAAA,EACzD,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAA,EAAA,aAAA,CAEzC,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-upload/upload.css?tag=voa-upload&encapsulation=shadow","src/components/voa-upload/upload.tsx"],"sourcesContent":[".upload {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.file-input {\r\n  width: 0.1px;\r\n  height: 0.1px;\r\n  opacity: 0;\r\n  overflow: hidden;\r\n  position: absolute;\r\n  z-index: -1;\r\n}\r\n\r\n.upload-label {\r\n  display: inline-block;\r\n  padding: 10px 20px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #007bff;\r\n  color: white;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.upload-label:hover {\r\n  background-color: #0056b3;\r\n}\r\n","import { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-upload\",\r\n  styleUrl: \"upload.css\",\r\n  shadow: true,\r\n})\r\nexport class Upload {\r\n  render() {\r\n    return (\r\n      <div class=\"upload\">\r\n        <input type=\"file\" id=\"file-upload\" class=\"file-input\" />\r\n        <label htmlFor=\"file-upload\" class=\"upload-label\">\r\n          Choose File\r\n        </label>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/styles/voa-components.css

@@ -6,8 +6,8 @@
  * @import 'voa-ds-core/dist/voa/voa.css';
  * @import 'voa-ds-core/components';
  *
- * Versão: 1.0.36
- * Gerado automaticamente em: 2026-01-26T20:26:00.445Z
+ * Versão: 1.0.37
+ * Gerado automaticamente em: 2026-01-26T20:32:45.265Z
  */
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voa-ds-core",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",

package/dist/custom-elements/p-B2P7cgN3.js.map

@@ -1 +0,0 @@
-{"file":"p-B2P7cgN3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-badge/voa-badge.css?tag=voa-badge&encapsulation=shadow","src/components/voa-badge/voa-badge.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-badge__container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-badge__label {\r\n  display: inline-block;\r\n}\r\n\r\n.voa-badge__counter {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.voa-badge__indicator {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  white-space: pre-wrap;\r\n}\r\n\r\n.voa-badge__indicator-only {\r\n  display: inline-block;\r\n}\r\n\r\n.voa-badge__icon,\r\n.voa-badge__icon-leading,\r\n.voa-badge__icon-trailing {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.voa-badge__icon svg,\r\n.voa-badge__icon-leading svg,\r\n.voa-badge__icon-trailing svg {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n","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"],"version":3}

package/dist/custom-elements/p-CQr0ZKZZ.js.map

@@ -1 +0,0 @@
-{"file":"p-CQr0ZKZZ.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,6bAA6b;;MCO7c,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQE;;;;;AAKG;AACsB,QAAA,IAAI,CAAA,IAAA,GAA0C,MAAM;AAE7E;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAI1C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC9C,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;AAEzB,SAAC;AAwDF;IAtDS,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACxB,YAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAgB,gBAAA,EAAA,OAAO,qBAAiB,OAAO,EAAA,EACxH,CAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAY,CAAA,CAC1C;;AAGV,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACxB,YAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAgB,gBAAA,EAAA,OAAO,qBAAiB,OAAO,EAAA,EACxH,CAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,gBAAgB,EAAY,CAAA,CACzC;;AAGV,QAAA,OAAO,IAAI;;IAGb,MAAM,GAAA;;AAEJ,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC5B,YAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAa,MAAM,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,KAAA,CAAU,CACxC;;AAIX,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,IAAI,CAAC,WAAW,EACX,cAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAAA,eAAA,EAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,EAEjD,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EACjC,EAAA,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,KAC5C,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,EACnC,IAAI,CAAC,UAAU,EAAE,CACb,KAEP,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACT,CACI,CACA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-pagination/voa-pagination-item.css?tag=voa-pagination-item&encapsulation=shadow","src/components/voa-pagination/voa-pagination-item.tsx"],"sourcesContent":[":host {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.base-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  min-width: 32px;\r\n  /* Structural minimums */\r\n  height: 32px;\r\n}\r\n\r\n:host([type=\"ellipsis\"]) .content {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n}\r\n\r\n.icon-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}","import { Component, Prop, h, Host, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-pagination-item',\r\n  styleUrl: 'voa-pagination-item.css',\r\n  shadow: true,\r\n})\r\nexport class VoaPaginationItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * The type of item to render.\r\n   * - page: A standard page number\r\n   * - ellipsis: The \"...\" separator\r\n   * - prev/next: Navigation arrows\r\n   */\r\n  @Prop({ reflect: true }) type: 'page' | 'ellipsis' | 'prev' | 'next' = 'page';\r\n\r\n  /**\r\n   * Is this the current active page?\r\n   */\r\n  @Prop({ reflect: true }) active: boolean = false;\r\n\r\n  /**\r\n   * Is this item disabled?\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  @Event() itemClick: EventEmitter<void>;\r\n\r\n  private handleClick = () => {\r\n    if (!this.disabled && this.type !== 'ellipsis') {\r\n      this.itemClick.emit();\r\n    }\r\n  };\r\n\r\n  private renderIcon() {\r\n    if (this.type === 'prev') {\r\n      return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"15 18 9 12 15 6\"></polyline>\r\n        </svg>\r\n      );\r\n    }\r\n    if (this.type === 'next') {\r\n      return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n        </svg>\r\n      );\r\n    }\r\n    return null;\r\n  }\r\n\r\n  render() {\r\n    // Ellipsis are not interactive\r\n    if (this.type === 'ellipsis') {\r\n      return (\r\n        <Host aria-hidden=\"true\">\r\n          <div part=\"content\" class=\"content\">...</div>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host\r\n        onClick={this.handleClick}\r\n        aria-current={this.active ? 'page' : undefined}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          part=\"base\"\r\n          class=\"base-button\"\r\n          disabled={this.disabled}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n        >\r\n          <span part=\"content\" class=\"content\">\r\n            {(this.type === 'prev' || this.type === 'next') ? (\r\n              <span part=\"icon\" class=\"icon-wrapper\">\r\n                {this.renderIcon()}\r\n              </span>\r\n            ) : (\r\n              <slot />\r\n            )}\r\n          </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/custom-elements/p-DKnM_Ozb.js.map

@@ -1 +0,0 @@
-{"file":"p-DKnM_Ozb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-select/voa-select-base.css?tag=voa-select-base&encapsulation=shadow","src/components/voa-select/voa-select-base.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: block;\r\n  width: 100%;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  /* Garantir que o dropdown possa aparecer fora do container */\r\n  overflow: visible;\r\n}\r\n\r\n.voa-select {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  box-sizing: border-box;\r\n  /* Garantir que o dropdown possa aparecer fora do container */\r\n  overflow: visible;\r\n}\r\n\r\n.voa-select__control {\r\n  /* Structural styles only - Reset button defaults */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n  \r\n  /* Reset button defaults */\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: inherit;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n}\r\n\r\n.voa-select--disabled .voa-select__control {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.voa-select__value {\r\n  /* Structural styles only */\r\n  flex: 1;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-select__indicator {\r\n  /* Structural styles only */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n.voa-select--open .voa-select__indicator {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.voa-select__dropdown-icon {\r\n  pointer-events: none;\r\n  display: block;\r\n}\r\n\r\n.voa-select__dropdown {\r\n  /* Structural styles only */\r\n  position: absolute;\r\n  top: calc(100% + 4px); /* Posicionado logo abaixo do control com 4px de espaço */\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 1000;\r\n  max-height: 200px;\r\n  overflow-y: auto;\r\n  box-sizing: border-box;\r\n  display: block;\r\n\r\n  /* Visual styles - White background */\r\n  background-color: var(--colors-structure-bg-base, #ffffff);\r\n  \r\n  /* Outline - border using same token as input field */\r\n  border: 1.125px solid var(--colors-structure-border-color, #adb5bd);\r\n  border-radius: 15.75px;\r\n\r\n  /* Shadow for elevation */\r\n  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15), \r\n              0px 0px 0px 0.5px var(--colors-structure-border-color, #adb5bd),\r\n              inset 0px 0px 0px 1px var(--colors-structure-border-color, #adb5bd);\r\n\r\n  /* Padding inside dropdown - vertical only */\r\n  padding: 8px 0;\r\n\r\n  /* Animation - entrance effect */\r\n  animation: dropdownEnter 0.2s ease-out forwards;\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n@keyframes dropdownEnter {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-8px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes dropdownExit {\r\n  from {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    transform: translateY(-8px);\r\n  }\r\n}\r\n\r\n/* Toggle logic handled by class in TSX */\r\n.voa-select__dropdown--hidden {\r\n  animation: dropdownExit 0.15s ease-in forwards;\r\n  display: none;\r\n  pointer-events: none;\r\n}\r\n\r\n.voa-select__option {\r\n  /* Structural styles only */\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  /* Padding to prevent text from touching borders */\r\n  padding: 8px 12px;\r\n}\r\n\r\n.voa-select__option--disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Active state (keyboard navigation highlight) */\r\n.voa-select__option--active {\r\n  /* Minimal visual feedback for keyboard navigation - external CSS will enhance */\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n/* Selected state */\r\n.voa-select__option--selected {\r\n  /* Minimal visual feedback for selected state - external CSS will enhance */\r\n  background-color: rgba(0, 100, 203, 0.1);\r\n} ","import { Component, Prop, Event, EventEmitter, Method, Element, h, State, Watch, Listen } from '@stencil/core';\r\n\r\n/**\r\n * Componente Base para Select do Voa Design System, baseado no design do Figma.\r\n * \r\n * @part base - The root select element\r\n * @part control - The select control button\r\n * @part value - The displayed value text\r\n * @part indicator - The dropdown indicator icon\r\n * @part dropdown - The dropdown menu container\r\n * @part option - Individual option element\r\n */\r\n@Component({\r\n  tag: 'voa-select-base',\r\n  styleUrl: 'voa-select-base.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaSelectBase {\r\n  @Element() host: HTMLElement;\r\n  /**\r\n   * Lista de opções para seleção\r\n   */\r\n  @Prop() options: Array<{ value: string, label: string, disabled?: boolean }> = [];\r\n\r\n  /**\r\n   * Texto de placeholder quando não há item selecionado\r\n   */\r\n  @Prop() placeholder: string = 'Select an option';\r\n\r\n  /**\r\n   * Se verdadeiro, o select estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o select terá estado de erro.\r\n   */\r\n  @Prop({ reflect: true }) error: boolean = false;\r\n\r\n  /**\r\n   * THE TRUTH. Read-only from parent.\r\n   */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * Internal Reality.\r\n   */\r\n  @State() innerValue?: string;\r\n\r\n  /**\r\n   * Se verdadeiro, o select mostrará as opções.\r\n   */\r\n  @State() isOpen: boolean = false;\r\n\r\n  /**\r\n   * Track which option is currently \"highlighted\" by the keyboard\r\n   * (Not necessarily selected yet).\r\n   */\r\n  @State() activeIndex: number = -1;\r\n\r\n  /**\r\n   * Evento emitido quando o valor é alterado\r\n   */\r\n  @Event() voaChange: EventEmitter<string>;\r\n\r\n  private listboxId = `voa-listbox-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n  componentWillLoad() {\r\n    this.innerValue = this.value;\r\n  }\r\n\r\n  @Watch('value')\r\n  syncValue(val: string) {\r\n    this.innerValue = val;\r\n  }\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(ev: MouseEvent) {\r\n    const path = ev.composedPath();\r\n    if (this.isOpen && !path.includes(this.host)) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  private toggleDropdown = () => {\r\n    if (this.disabled) return;\r\n    if (this.isOpen) {\r\n      this.closeDropdown();\r\n    } else {\r\n      this.openDropdown();\r\n    }\r\n  };\r\n\r\n  private openDropdown() {\r\n    this.isOpen = true;\r\n    // Find the index of the currently selected value to highlight it\r\n    const index = this.options.findIndex(o => o.value === this.innerValue);\r\n    this.activeIndex = index >= 0 ? index : 0;\r\n  }\r\n\r\n  private closeDropdown() {\r\n    this.isOpen = false;\r\n    this.activeIndex = -1;\r\n  }\r\n\r\n  private handleSelect = (val: string) => {\r\n    if (this.disabled) return;\r\n    this.innerValue = val;\r\n    this.voaChange.emit(val);\r\n    this.closeDropdown();\r\n  };\r\n\r\n  /**\r\n   * THE KEYBOARD BRAIN\r\n   * This is what makes a Select a Select.\r\n   */\r\n  private handleKeyDown = (ev: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    switch (ev.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        ev.preventDefault();\r\n        if (this.isOpen) {\r\n          if (this.activeIndex >= 0 && this.options[this.activeIndex]) {\r\n            this.handleSelect(this.options[this.activeIndex].value);\r\n          }\r\n        } else {\r\n          this.openDropdown();\r\n        }\r\n        break;\r\n      case 'ArrowDown':\r\n        ev.preventDefault();\r\n        if (!this.isOpen) {\r\n          this.openDropdown();\r\n        } else {\r\n          this.activeIndex = Math.min(this.activeIndex + 1, this.options.length - 1);\r\n          this.scrollToActive();\r\n        }\r\n        break;\r\n      case 'ArrowUp':\r\n        ev.preventDefault();\r\n        if (this.isOpen) {\r\n          this.activeIndex = Math.max(this.activeIndex - 1, 0);\r\n          this.scrollToActive();\r\n        }\r\n        break;\r\n      case 'Escape':\r\n        if (this.isOpen) {\r\n          ev.preventDefault();\r\n          this.closeDropdown();\r\n        }\r\n        break;\r\n      case 'Tab':\r\n        // If user tabs away, close it.\r\n        if (this.isOpen) {\r\n          this.closeDropdown();\r\n        }\r\n        break;\r\n    }\r\n  };\r\n\r\n  private scrollToActive() {\r\n    // Logic to scroll the dropdown container to keep the active item in view\r\n    // Implementation omitted for brevity, but vital for production\r\n  }\r\n\r\n  private getDisplayText(): string {\r\n    const selected = this.options.find(o => o.value === this.innerValue);\r\n    return selected ? selected.label : this.placeholder;\r\n  }\r\n\r\n  /**\r\n   * Método para delegar foco ao elemento interno do select.\r\n   * Requerido para acessibilidade WCAG 2.2 AA.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const control = this.host.shadowRoot?.querySelector('[part=\"control\"]') as HTMLElement;\r\n    if (control) {\r\n      control.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const activeId = this.activeIndex >= 0 ? `${this.listboxId}-opt-${this.activeIndex}` : undefined;\r\n\r\n    return (\r\n      <div\r\n        part=\"base\"\r\n        class={{\r\n          'voa-select': true,\r\n          'voa-select--open': this.isOpen,\r\n          'voa-select--disabled': this.disabled,\r\n        }}\r\n        // The container handles keydown\r\n        onKeyDown={this.handleKeyDown}\r\n      >\r\n        {/* CONTROL (The Trigger) */}\r\n        <button\r\n          part=\"control\"\r\n          type=\"button\"\r\n          class=\"voa-select__control\"\r\n          onClick={this.toggleDropdown}\r\n          aria-haspopup=\"listbox\"\r\n          aria-expanded={this.isOpen ? 'true' : 'false'}\r\n          aria-controls={this.listboxId}\r\n          aria-activedescendant={this.isOpen ? activeId : undefined}\r\n          disabled={this.disabled}\r\n        >\r\n          <span part=\"value\" class=\"voa-select__value\">\r\n            {this.getDisplayText()}\r\n          </span>\r\n          <span part=\"indicator\" class=\"voa-select__indicator\">\r\n            <slot name=\"indicator\">\r\n              {/* Default Chevron */}\r\n              <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" stroke=\"currentColor\">\r\n                <path d=\"M1 1L5 5L9 1\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            </slot>\r\n          </span>\r\n        </button>\r\n\r\n        {/* DROPDOWN (The Listbox) */}\r\n        <div\r\n          id={this.listboxId}\r\n          part=\"dropdown\"\r\n          class={{\r\n            'voa-select__dropdown': true,\r\n            'voa-select__dropdown--hidden': !this.isOpen,\r\n          }}\r\n          role=\"listbox\"\r\n          tabindex=\"-1\"\r\n          aria-hidden={!this.isOpen ? 'true' : undefined}\r\n        >\r\n          {this.options.map((option, index) => {\r\n            const isSelected = option.value === this.innerValue;\r\n            const isActive = index === this.activeIndex;\r\n\r\n            return (\r\n              <div\r\n                id={`${this.listboxId}-opt-${index}`}\r\n                part=\"option\"\r\n                class={{\r\n                  'voa-select__option': true,\r\n                  'voa-select__option--selected': isSelected,\r\n                  'voa-select__option--active': isActive, // Highlighted by keyboard\r\n                  'voa-select__option--disabled': !!option.disabled,\r\n                }}\r\n                role=\"option\"\r\n                aria-selected={isSelected ? 'true' : 'false'}\r\n                onClick={() => !option.disabled && this.handleSelect(option.value)}\r\n                onMouseEnter={() => (this.activeIndex = index)} // Mouse syncs with keyboard\r\n              >\r\n                {option.label}\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/custom-elements/p-DPyVgztA.js.map

@@ -1 +0,0 @@
-{"file":"p-DPyVgztA.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,uPAAuP;;MCkBnQ,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,GAAG;AAE9B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkB,KAAK;AAyCxC;IAvCC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,CAAC,mBAAmB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;aAC3C,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,EAAA,EAC9C,IAAI,CAAC,QAAQ,KAAK,KAAK,IACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,4IAA4I,EAC9I,IAAI,EAAC,cAAc,EACN,cAAA,EAAA,KAAK,EAClB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,uBAAuB,EACzB,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,KAAK,EAAA,gBAAA,EACH,OAAO,EACtB,CAAA,CACE,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAc,cAAA,EAAA,KAAK,EAAG,CAAA,EACzF,CAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,iBAAa,QAAQ,EAAA,WAAA,EAAW,GAAG,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,KAAK,EAEpF,EAAA,MAAA,CAAA,CACH,CACP,CACG,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,EAC/C,EAAA,IAAI,CAAC,QAAQ,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-keybinding/voa-keybinding.css?tag=voa-keybinding&encapsulation=shadow","src/components/voa-keybinding/voa-keybinding.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-keybinding__icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-keybinding__text {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente Keybinding para exibir atalhos de teclado.\r\n * \r\n * Baseado no design do Figma, usado como subcomponente do input-addon.\r\n * Segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * \r\n * @part base - O elemento raiz do keybinding\r\n * @part key-icon - O ícone da tecla modificadora (⌘ ou Ctrl)\r\n * @part key-text - O texto da tecla\r\n */\r\n@Component({\r\n  tag: 'voa-keybinding',\r\n  styleUrl: 'voa-keybinding.css',\r\n  shadow: true,\r\n  scoped: false,\r\n})\r\nexport class VoaKeybinding {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * A tecla do atalho (ex: \"S\", \"K\", \"Enter\")\r\n   */\r\n  @Prop() shortcut: string = 'S';\r\n\r\n  /**\r\n   * Plataforma do atalho (mac ou win)\r\n   */\r\n  @Prop() platform: 'mac' | 'win' = 'mac';\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        part=\"base\"\r\n        class={{\r\n          'voa-keybinding': true,\r\n          [`voa-keybinding--${this.platform}`]: true,\r\n        }}\r\n      >\r\n        <div part=\"key-icon\" class=\"voa-keybinding__icon\">\r\n          {this.platform === 'mac' ? (\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M12.5 2C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V3.5C2 2.67157 2.67157 2 3.5 2H12.5Z\"\r\n                fill=\"currentColor\"\r\n                fill-opacity=\"0.1\"\r\n              />\r\n              <path\r\n                d=\"M4 4H12M4 8H12M4 12H8\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n              />\r\n            </svg>\r\n          ) : (\r\n            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect x=\"0\" y=\"0\" width=\"20\" height=\"10\" rx=\"2\" fill=\"currentColor\" fill-opacity=\"0.1\" />\r\n              <text x=\"10\" y=\"7\" text-anchor=\"middle\" font-size=\"8\" fill=\"currentColor\" font-weight=\"600\">\r\n                Ctrl\r\n              </text>\r\n            </svg>\r\n          )}\r\n        </div>\r\n        <span part=\"key-text\" class=\"voa-keybinding__text\">\r\n          {this.shortcut}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"version":3}

package/dist/custom-elements/p-Dto9R8Te.js.map

@@ -1 +0,0 @@
-{"file":"p-Dto9R8Te.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-button/voa-button.css?tag=voa-button&encapsulation=shadow","src/components/voa-button/voa-button.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n * \r\n * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Cursor must be on :host because pointer-events:none on button \r\n   causes cursor to \"pass through\" to parent element */\r\n:host([disabled]),\r\n:host([loading]) {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.voa-button {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  border: none; /* Remove borda padrão que afeta box-model */\r\n  background: transparent; /* Garante que não há fundo padrão */\r\n  padding: 0; /* Reset de padding */\r\n  margin: 0; /* Reset de margin */\r\n  \r\n  /* Interatividade básica */\r\n  cursor: pointer;\r\n  user-select: none;\r\n  \r\n  /* Layout Flex */\r\n  flex-direction: row;\r\n  flex-wrap: nowrap;\r\n  gap: 0; /* Gap padrão zerado, definido externamente */\r\n}\r\n\r\n.voa-button:disabled,\r\n.voa-button--loading {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Containers para ícones - estrutura apenas */\r\n.voa-button__icon-leading,\r\n.voa-button__icon-trailing {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.voa-button__loader {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  /* Default size - can be overridden via ::part(loader) */\r\n  width: var(--voa-loader-size, 16px);\r\n  height: var(--voa-loader-size, 16px);\r\n  /* Structural animation - rotation is physics, not art */\r\n  animation: voa-spin var(--voa-loader-duration, 1s) linear infinite;\r\n}\r\n\r\n/* Keyframes must be inside Shadow DOM scope to be accessible */\r\n@keyframes voa-spin {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}\r\n\r\n/* Ensure the default SVG fills the loader span */\r\n.voa-button__loader svg {\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.voa-button__label {\r\n  display: inline-block;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* Layout para slots de ícones */\r\n.voa-button ::slotted([slot=\"icon-leading\"]),\r\n.voa-button ::slotted([slot=\"icon-trailing\"]) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Botão principal 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 botão (elemento <button>)\r\n * @part label - O wrapper do texto do botão\r\n * @part icon-leading - Container do slot para ícone à esquerda\r\n * @part icon-trailing - Container do slot para ícone à direita\r\n */\r\n@Component({\r\n  tag: 'voa-button',\r\n  styleUrl: 'voa-button.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaButton {\r\n  @Element() host: HTMLVoaButtonElement;\r\n\r\n  /**\r\n   * Variante visual do botão.\r\n   * Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.\r\n   */\r\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tonal' | 'ghost' | 'link' = 'primary';\r\n\r\n  /**\r\n   * Tamanho do botão.\r\n   * Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).\r\n   */\r\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'lg';\r\n\r\n  /**\r\n   * Se verdadeiro, o botão estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o botão exibe um estado de carregamento (spinner)\r\n   * e desabilita interações.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * O texto exibido no botão.\r\n   * Pode ser fornecido via prop ou via slot padrão.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * Rótulo ARIA para acessibilidade.\r\n   * Usado quando o botão não tem texto visível (apenas ícone).\r\n   */\r\n  @Prop() ariaLabel: string;\r\n\r\n  /**\r\n   * Tipo do botão HTML.\r\n   * Padrão é 'button' para evitar submissão de formulários.\r\n   */\r\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n\r\n  /**\r\n   * Evento emitido ao clicar no botão.\r\n   * Segue o padrão kebab-case: dsClick.\r\n   */\r\n  @Event() dsClick: EventEmitter<void>;\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 button = this.host.shadowRoot?.querySelector('button[part=\"base\"]') as HTMLButtonElement;\r\n    if (button) {\r\n      button.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no botão.\r\n   */\r\n  private handleClick = (ev?: MouseEvent) => {\r\n    if (this.disabled || this.loading) {\r\n      ev?.preventDefault();\r\n      ev?.stopPropagation();\r\n      return;\r\n    }\r\n    this.dsClick.emit();\r\n  };\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   * Suporta Enter, Space para ativar, e Escape para cancelar (se aplicável).\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled || this.loading) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        event.preventDefault();\r\n        this.handleClick();\r\n        break;\r\n      case 'Escape':\r\n        // Para botões que abrem modais/dropdowns, Escape fecha\r\n        // Para botões simples, não faz nada (comportamento padrão)\r\n        break;\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          part=\"base\"\r\n          type={this.type}\r\n          class={{\r\n            'voa-button': true,\r\n            [`voa-button--${this.variant}`]: true,\r\n            [`voa-button--${this.size}`]: true,\r\n            'voa-button--disabled': this.disabled,\r\n            'voa-button--loading': this.loading,\r\n          }}\r\n          disabled={this.disabled || this.loading}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          aria-disabled={this.disabled || this.loading ? 'true' : undefined}\r\n          aria-busy={this.loading ? 'true' : undefined}\r\n          aria-label={\r\n            this.loading \r\n              ? 'Loading' \r\n              : (this.ariaLabel || this.label)\r\n          }\r\n        >\r\n          {this.loading && (\r\n            <span part=\"loader\" class=\"voa-button__loader\">\r\n              <slot name=\"loader\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                   <path d=\"M12 2V6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M12 18V22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M4.93 4.93L7.76 7.76\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M16.24 16.24L19.07 19.07\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M2 12H6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M18 12H22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M4.93 19.07L7.76 16.24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M16.24 7.76L19.07 4.93\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                </svg>\r\n              </slot>\r\n            </span>\r\n          )}\r\n          \r\n          {!this.loading && (\r\n            <span part=\"icon-leading\" class=\"voa-button__icon-leading\">\r\n              <slot name=\"icon-leading\"></slot>\r\n            </span>\r\n          )}\r\n          <span part=\"label\" class=\"voa-button__label\">\r\n            <slot>{this.label}</slot>\r\n          </span>\r\n          <span part=\"icon-trailing\" class=\"voa-button__icon-trailing\">\r\n            <slot name=\"icon-trailing\"></slot>\r\n          </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n} "],"version":3}