npm - voa-ds-core - Versions diffs - 1.0.31 → 1.0.35 - Mend

voa-ds-core 1.0.31 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/dist/custom-elements/voa-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"voa-switch.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["VoaSwitch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-switch/voa-switch.css?tag=voa-switch&encapsulation=shadow","src/components/voa-switch/voa-switch.tsx"],"sourcesContent":["/* * 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 box-sizing: border-box;\r\n / Ensures the host has a tangible size if not defined externally /\r\n contain: content;\r\n}\r\n\r\n.switch-container {\r\n / APENAS estilos estruturais /\r\n display: inline-flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n user-select: none;\r\n border: none;\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n gap: 0;\r\n / Gap defaults to 0, overridden by external CSS if needed /\r\n}\r\n\r\n.switch-container:disabled,\r\n.switch-container.switch-disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.switch-container.switch-no-label {\r\n gap: 0;\r\n}\r\n\r\n.switch-track {\r\n / APENAS estilos estruturais /\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n / CRITICAL: Prevents track from squashing in flex layouts /\r\n\r\n / Tamanhos estruturais conforme Figma: 40px x 20px /\r\n width: 40px;\r\n height: 20px;\r\n\r\n overflow: hidden;\r\n / Padding interno para posicionar o thumb /\r\n padding: 2px;\r\n}\r\n\r\n.switch-thumb {\r\n / APENAS estilos estruturais /\r\n display: block;\r\n position: relative;\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n\r\n / RESTORED DIMENSIONS - CRITICAL FOR VISIBILITY /\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.switch-shadow {\r\n / APENAS estilos estruturais /\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n / Shadow será aplicada externamente via CSS custom property /\r\n}\r\n\r\n.switch-label {\r\n / APENAS estilos estruturais /\r\n display: inline-block;\r\n user-select: none;\r\n box-sizing: border-box;\r\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-switch',\r\n styleUrl: 'voa-switch.css',\r\n shadow: {\r\n delegatesFocus: true // CRITICAL: Passes focus from Host to the internal button automatically\r\n },\r\n formAssociated: true // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaSwitch {\r\n @Element() host: HTMLVoaSwitchElement;\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n /\r\n Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n /\r\n @State() internalChecked: boolean = false;\r\n\r\n @Prop() checked: boolean = false;\r\n @Prop() disabled: boolean = false;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() name: string;\r\n @Prop() value: string = 'on'; // Default value for forms\r\n\r\n @Event() dsChange: EventEmitter<boolean>;\r\n\r\n componentWillLoad() {\r\n this.internalChecked = this.checked;\r\n this.updateFormValue();\r\n this.reflectStateToHost();\r\n }\r\n\r\n @Watch('checked')\r\n checkedChanged(newValue: boolean) {\r\n this.internalChecked = newValue;\r\n this.updateFormValue();\r\n this.reflectStateToHost();\r\n }\r\n\r\n /\r\n Reflects the current state to the Host element for CSS attribute selectors\r\n /\r\n private reflectStateToHost() {\r\n if (this.internalChecked) {\r\n this.host.setAttribute('checked', '');\r\n } else {\r\n this.host.removeAttribute('checked');\r\n }\r\n }\r\n\r\n /\r\n Syncs with the native Form API\r\n */\r\n private updateFormValue() {\r\n try {\r\n // ElementInternals is only available in real browsers\r\n // Skip in test environment where it's not supported\r\n if (this.internals && typeof (this.internals as any).setFormValue === 'function') {\r\n (this.internals as any).setFormValue(this.internalChecked ? this.value : null);\r\n \r\n // Accessibility internals (replaces aria attributes on Host)\r\n (this.internals as any).ariaChecked = this.internalChecked ? 'true' : 'false';\r\n (this.internals as any).ariaDisabled = this.disabled ? 'true' : 'false';\r\n }\r\n } catch (e) {\r\n // ElementInternals may not be available in test environment\r\n }\r\n }\r\n\r\n private handleClick = (ev: Event) => {\r\n ev.preventDefault();\r\n if (this.disabled) return;\r\n\r\n // Optimistic UI update for uncontrolled scenarios\r\n this.internalChecked = !this.internalChecked;\r\n this.checked = this.internalChecked;\r\n this.dsChange.emit(this.internalChecked);\r\n this.updateFormValue();\r\n this.reflectStateToHost();\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled) return;\r\n if (event.key === 'Enter' \|\| event.key === ' ') {\r\n event.preventDefault();\r\n this.handleClick(event);\r\n }\r\n };\r\n\r\n render() {\r\n // NOTE: Host no longer has aria-roles, ElementInternals handles that on the custom element itself.\r\n // The internal button is purely for visual structure and click capturing.\r\n return (\r\n <Host>\r\n <button\r\n part=\"base\"\r\n class={{\r\n 'switch-container': true,\r\n 'switch-disabled': this.disabled,\r\n 'switch-checked': this.internalChecked,\r\n 'switch-no-label': !this.showLabel\r\n }}\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n onKeyDown={this.handleKeyDown}\r\n // We remove aria-checked here to avoid \"double talk\" with the Host/Internals\r\n tabIndex={-1} // handled by delegatesFocus on Host\r\n >\r\n <div part=\"track\" class=\"switch-track\">\r\n <div part=\"thumb\" class=\"switch-thumb\" />\r\n <div part=\"shadow\" class=\"switch-shadow\" />\r\n </div>\r\n\r\n {this.showLabel && (\r\n <span class=\"switch-label\" part=\"label\">\r\n <slot />\r\n </span>\r\n )}\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}
1	+ {"file":"voa-switch.js","mappings":"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","names":["VoaSwitch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-switch/voa-switch.css?tag=voa-switch&encapsulation=shadow","src/components/voa-switch/voa-switch.tsx"],"sourcesContent":["/* * 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 box-sizing: border-box;\r\n / Ensures the host has a tangible size if not defined externally /\r\n contain: content;\r\n}\r\n\r\n.switch-container {\r\n / APENAS estilos estruturais /\r\n display: inline-flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n user-select: none;\r\n border: none;\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n gap: 0;\r\n / Gap defaults to 0, overridden by external CSS if needed /\r\n}\r\n\r\n.switch-container:disabled,\r\n.switch-container.switch-disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.switch-container.switch-no-label {\r\n gap: 0;\r\n}\r\n\r\n.switch-track {\r\n / APENAS estilos estruturais /\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n / CRITICAL: Prevents track from squashing in flex layouts /\r\n\r\n / Tamanhos estruturais conforme Figma: 40px x 20px /\r\n width: 40px;\r\n height: 20px;\r\n\r\n overflow: hidden;\r\n / Padding interno para posicionar o thumb /\r\n padding: 2px;\r\n}\r\n\r\n.switch-thumb {\r\n / APENAS estilos estruturais /\r\n display: block;\r\n position: relative;\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n\r\n / RESTORED DIMENSIONS - CRITICAL FOR VISIBILITY /\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.switch-shadow {\r\n / APENAS estilos estruturais /\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n / Shadow será aplicada externamente via CSS custom property /\r\n}\r\n\r\n.switch-label {\r\n / APENAS estilos estruturais /\r\n display: inline-block;\r\n user-select: none;\r\n box-sizing: border-box;\r\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-switch',\r\n styleUrl: 'voa-switch.css',\r\n shadow: {\r\n delegatesFocus: true // CRITICAL: Passes focus from Host to the internal button automatically\r\n },\r\n formAssociated: true // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaSwitch {\r\n @Element() host: HTMLVoaSwitchElement;\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n /\r\n Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n /\r\n @State() internalChecked: boolean = false;\r\n\r\n @Prop() checked: boolean = false;\r\n @Prop() disabled: boolean = false;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() name: string;\r\n @Prop() value: string = 'on'; // Default value for forms\r\n\r\n @Event() dsChange: EventEmitter<boolean>;\r\n\r\n componentWillLoad() {\r\n this.internalChecked = this.checked;\r\n this.updateFormValue();\r\n this.reflectStateToHost();\r\n }\r\n\r\n @Watch('checked')\r\n checkedChanged(newValue: boolean) {\r\n this.internalChecked = newValue;\r\n this.updateFormValue();\r\n this.reflectStateToHost();\r\n }\r\n\r\n /\r\n Reflects the current state to the Host element for CSS attribute selectors\r\n /\r\n private reflectStateToHost() {\r\n if (this.internalChecked) {\r\n this.host.setAttribute('checked', '');\r\n } else {\r\n this.host.removeAttribute('checked');\r\n }\r\n }\r\n\r\n /\r\n Syncs with the native Form API\r\n */\r\n private updateFormValue() {\r\n try {\r\n // ElementInternals is only available in real browsers\r\n // Skip in test environment where it's not supported\r\n if (this.internals && typeof (this.internals as any).setFormValue === 'function') {\r\n (this.internals as any).setFormValue(this.internalChecked ? this.value : null);\r\n \r\n // Accessibility internals (replaces aria attributes on Host)\r\n (this.internals as any).ariaChecked = this.internalChecked ? 'true' : 'false';\r\n (this.internals as any).ariaDisabled = this.disabled ? 'true' : 'false';\r\n }\r\n } catch (e) {\r\n // ElementInternals may not be available in test environment\r\n }\r\n }\r\n\r\n private handleClick = (ev: Event) => {\r\n ev.preventDefault();\r\n if (this.disabled) return;\r\n\r\n // Optimistic UI update for uncontrolled scenarios\r\n this.internalChecked = !this.internalChecked;\r\n this.checked = this.internalChecked;\r\n this.dsChange.emit(this.internalChecked);\r\n this.updateFormValue();\r\n this.reflectStateToHost();\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled) return;\r\n if (event.key === 'Enter' \|\| event.key === ' ') {\r\n event.preventDefault();\r\n this.handleClick(event);\r\n }\r\n };\r\n\r\n render() {\r\n // NOTE: Host no longer has aria-roles, ElementInternals handles that on the custom element itself.\r\n // The internal button is purely for visual structure and click capturing.\r\n return (\r\n <Host>\r\n <button\r\n part=\"base\"\r\n class={{\r\n 'switch-container': true,\r\n 'switch-disabled': this.disabled,\r\n 'switch-checked': this.internalChecked,\r\n 'switch-no-label': !this.showLabel\r\n }}\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n onKeyDown={this.handleKeyDown}\r\n // We remove aria-checked here to avoid \"double talk\" with the Host/Internals\r\n tabIndex={-1} // handled by delegatesFocus on Host\r\n >\r\n <div part=\"track\" class=\"switch-track\">\r\n <div part=\"thumb\" class=\"switch-thumb\" />\r\n <div part=\"shadow\" class=\"switch-shadow\" />\r\n </div>\r\n\r\n {this.showLabel && (\r\n <span class=\"switch-label\" part=\"label\">\r\n <slot />\r\n </span>\r\n )}\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}

package/dist/custom-elements/voa-tab-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 const voaTabItemCss = ":host{display:inline-block;box-sizing:border-box}.voa-tab-item{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;user-select:none;gap:0;flex-direction:row;flex-wrap:nowrap}.voa-tab-item--disabled{cursor:not-allowed;pointer-events:none}.voa-tab-item__label{display:inline-block;flex-shrink:0}.voa-tab-item__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-sizing:border-box}.voa-tab-item__badge-text{display:inline-block;text-align:center;white-space:nowrap}";
@@ -103,6 +103,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaTabItem = VoaTabItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-tab-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"voa-tab-item.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["VoaTabItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tab-item/voa-tab-item.css?tag=voa-tab-item&encapsulation=shadow","src/components/voa-tab-item/voa-tab-item.tsx"],"sourcesContent":["/* * 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 * * 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.voa-tab-item {\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 cursor: pointer;\r\n user-select: none;\r\n / Gap estrutural para espaçamento entre label e badge /\r\n gap: 0;\r\n / Layout flex para garantir alinhamento correto /\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n}\r\n\r\n.voa-tab-item--disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.voa-tab-item__label {\r\n display: inline-block;\r\n flex-shrink: 0;\r\n}\r\n\r\n.voa-tab-item__badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n position: relative;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-tab-item__badge-text {\r\n display: inline-block;\r\n text-align: center;\r\n white-space: nowrap;\r\n}","import { Component, Host, h, Prop, Element, Method, Event, EventEmitter } from '@stencil/core';\r\n\r\n/\r\n Item individual de tab do Voa Design System.\r\n * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545\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 * * @part base - O elemento raiz do item de tab\r\n * @part label - Container do texto do item\r\n * @part badge - Container do badge (quando showBadge=true)\r\n /\r\n@Component({\r\n tag: 'voa-tab-item',\r\n styleUrl: 'voa-tab-item.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTabItem {\r\n @Element() host: HTMLVoaTabItemElement;\r\n\r\n /\r\n Estado do item de tab.\r\n * Mapeia os estados do Figma: Active, Default, Disabled.\r\n /\r\n @Prop({ reflect: true }) state: 'active' \| 'default' \| 'disabled' = 'default';\r\n\r\n /\r\n Posição do indicador de ativo (borda).\r\n * Mapeia as posições do Figma: Default (bottom), Top, Right, Left.\r\n /\r\n @Prop({ reflect: true }) position: 'default' \| 'top' \| 'right' \| 'left' = 'default';\r\n\r\n /\r\n Se verdadeiro, exibe um badge no item.\r\n /\r\n @Prop({ reflect: true }) showBadge: boolean = false;\r\n\r\n /\r\n Número a ser exibido no badge (opcional).\r\n * Se não fornecido e showBadge=true, exibe \"0\".\r\n /\r\n @Prop() badgeCount?: number;\r\n\r\n /\r\n Se verdadeiro, o item estará desabilitado.\r\n * Alias para state=\"disabled\".\r\n /\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /\r\n Índice do item (gerenciado pelo componente pai voa-tab).\r\n * Usado internamente para identificação.\r\n /\r\n @Prop({ reflect: true, attribute: 'item-index' }) itemIndex?: number;\r\n\r\n /\r\n Evento emitido quando o tab é clicado.\r\n * O pai (voa-tab) escuta isso para gerenciar a seleção.\r\n /\r\n @Event() tabClick: EventEmitter<void>;\r\n\r\n /\r\n Handler interno de clique.\r\n /\r\n private handleClick = () => {\r\n if (!this.disabled && this.state !== 'disabled') {\r\n this.tabClick.emit();\r\n }\r\n };\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 base = this.host.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement;\r\n if (base) {\r\n base.focus();\r\n }\r\n }\r\n\r\n /\r\n Determina o estado efetivo do componente.\r\n * Se disabled=true, força state=\"disabled\".\r\n /\r\n private getEffectiveState(): 'active' \| 'default' \| 'disabled' {\r\n if (this.disabled) {\r\n return 'disabled';\r\n }\r\n return this.state;\r\n }\r\n\r\n /\r\n Determina o valor do badge a ser exibido.\r\n */\r\n private getBadgeValue(): string {\r\n if (this.badgeCount !== undefined) {\r\n return String(this.badgeCount);\r\n }\r\n return '0';\r\n }\r\n\r\n render() {\r\n const effectiveState = this.getEffectiveState();\r\n const isActive = effectiveState === 'active';\r\n const isDisabled = effectiveState === 'disabled';\r\n\r\n return (\r\n <Host\r\n role=\"tab\"\r\n aria-selected={isActive ? 'true' : 'false'}\r\n aria-disabled={isDisabled ? 'true' : undefined}\r\n tabindex={isDisabled ? -1 : (isActive ? 0 : -1)}\r\n onClick={this.handleClick}\r\n >\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'voa-tab-item': true,\r\n [`voa-tab-item--${effectiveState}`]: true,\r\n [`voa-tab-item--${this.position}`]: true,\r\n 'voa-tab-item--disabled': isDisabled,\r\n }}\r\n >\r\n <span part=\"label\" class=\"voa-tab-item__label\">\r\n <slot></slot>\r\n </span>\r\n {this.showBadge && (\r\n <div part=\"badge\" class=\"voa-tab-item__badge\">\r\n <span class=\"voa-tab-item__badge-text\">{this.getBadgeValue()}</span>\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}
1	+ {"file":"voa-tab-item.js","mappings":";;AAAA,MAAM,aAAa,GAAG,qkBAAqkB;;MCiB9kBA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AANvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASE;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAsC,SAAS;AAE7E;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAyC,SAAS;AAEnF;;AAEG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAQnD;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAclD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE;AAC/C,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;AAExB,SAAC;AAqEF;AAnEC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;;AACZ,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,eAAe,CAAgB;QAChF,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,KAAK,EAAE;;;AAIhB;;;AAGG;IACK,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,OAAO,UAAU;;QAEnB,OAAO,IAAI,CAAC,KAAK;;AAGnB;;AAEG;IACK,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;AACjC,YAAA,OAAO,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;AAEhC,QAAA,OAAO,GAAG;;IAGZ,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;AAC/C,QAAA,MAAM,QAAQ,GAAG,cAAc,KAAK,QAAQ;AAC5C,QAAA,MAAM,UAAU,GAAG,cAAc,KAAK,UAAU;AAEhD,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EACK,eAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC3B,UAAU,GAAG,MAAM,GAAG,SAAS,EAC9C,QAAQ,EAAE,UAAU,GAAG,EAAE,IAAI,QAAQ,GAAG,CAAC,GAAG,EAAE,CAAC,EAC/C,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,CAAC,CAAiB,cAAA,EAAA,cAAc,CAAE,CAAA,GAAG,IAAI;AACzC,gBAAA,CAAC,iBAAiB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;AACxC,gBAAA,wBAAwB,EAAE,UAAU;AACrC,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,EAAA,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,EACN,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,EAAA,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,0BAA0B,EAAA,EAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAChE,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaTabItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tab-item/voa-tab-item.css?tag=voa-tab-item&encapsulation=shadow","src/components/voa-tab-item/voa-tab-item.tsx"],"sourcesContent":["/* * 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 * * 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.voa-tab-item {\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 cursor: pointer;\r\n user-select: none;\r\n / Gap estrutural para espaçamento entre label e badge /\r\n gap: 0;\r\n / Layout flex para garantir alinhamento correto /\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n}\r\n\r\n.voa-tab-item--disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.voa-tab-item__label {\r\n display: inline-block;\r\n flex-shrink: 0;\r\n}\r\n\r\n.voa-tab-item__badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n position: relative;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-tab-item__badge-text {\r\n display: inline-block;\r\n text-align: center;\r\n white-space: nowrap;\r\n}","import { Component, Host, h, Prop, Element, Method, Event, EventEmitter } from '@stencil/core';\r\n\r\n/\r\n Item individual de tab do Voa Design System.\r\n * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545\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 * * @part base - O elemento raiz do item de tab\r\n * @part label - Container do texto do item\r\n * @part badge - Container do badge (quando showBadge=true)\r\n /\r\n@Component({\r\n tag: 'voa-tab-item',\r\n styleUrl: 'voa-tab-item.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTabItem {\r\n @Element() host: HTMLVoaTabItemElement;\r\n\r\n /\r\n Estado do item de tab.\r\n * Mapeia os estados do Figma: Active, Default, Disabled.\r\n /\r\n @Prop({ reflect: true }) state: 'active' \| 'default' \| 'disabled' = 'default';\r\n\r\n /\r\n Posição do indicador de ativo (borda).\r\n * Mapeia as posições do Figma: Default (bottom), Top, Right, Left.\r\n /\r\n @Prop({ reflect: true }) position: 'default' \| 'top' \| 'right' \| 'left' = 'default';\r\n\r\n /\r\n Se verdadeiro, exibe um badge no item.\r\n /\r\n @Prop({ reflect: true }) showBadge: boolean = false;\r\n\r\n /\r\n Número a ser exibido no badge (opcional).\r\n * Se não fornecido e showBadge=true, exibe \"0\".\r\n /\r\n @Prop() badgeCount?: number;\r\n\r\n /\r\n Se verdadeiro, o item estará desabilitado.\r\n * Alias para state=\"disabled\".\r\n /\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /\r\n Índice do item (gerenciado pelo componente pai voa-tab).\r\n * Usado internamente para identificação.\r\n /\r\n @Prop({ reflect: true, attribute: 'item-index' }) itemIndex?: number;\r\n\r\n /\r\n Evento emitido quando o tab é clicado.\r\n * O pai (voa-tab) escuta isso para gerenciar a seleção.\r\n /\r\n @Event() tabClick: EventEmitter<void>;\r\n\r\n /\r\n Handler interno de clique.\r\n /\r\n private handleClick = () => {\r\n if (!this.disabled && this.state !== 'disabled') {\r\n this.tabClick.emit();\r\n }\r\n };\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 base = this.host.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement;\r\n if (base) {\r\n base.focus();\r\n }\r\n }\r\n\r\n /\r\n Determina o estado efetivo do componente.\r\n * Se disabled=true, força state=\"disabled\".\r\n /\r\n private getEffectiveState(): 'active' \| 'default' \| 'disabled' {\r\n if (this.disabled) {\r\n return 'disabled';\r\n }\r\n return this.state;\r\n }\r\n\r\n /\r\n Determina o valor do badge a ser exibido.\r\n */\r\n private getBadgeValue(): string {\r\n if (this.badgeCount !== undefined) {\r\n return String(this.badgeCount);\r\n }\r\n return '0';\r\n }\r\n\r\n render() {\r\n const effectiveState = this.getEffectiveState();\r\n const isActive = effectiveState === 'active';\r\n const isDisabled = effectiveState === 'disabled';\r\n\r\n return (\r\n <Host\r\n role=\"tab\"\r\n aria-selected={isActive ? 'true' : 'false'}\r\n aria-disabled={isDisabled ? 'true' : undefined}\r\n tabindex={isDisabled ? -1 : (isActive ? 0 : -1)}\r\n onClick={this.handleClick}\r\n >\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'voa-tab-item': true,\r\n [`voa-tab-item--${effectiveState}`]: true,\r\n [`voa-tab-item--${this.position}`]: true,\r\n 'voa-tab-item--disabled': isDisabled,\r\n }}\r\n >\r\n <span part=\"label\" class=\"voa-tab-item__label\">\r\n <slot></slot>\r\n </span>\r\n {this.showBadge && (\r\n <div part=\"badge\" class=\"voa-tab-item__badge\">\r\n <span class=\"voa-tab-item__badge-text\">{this.getBadgeValue()}</span>\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}

package/dist/custom-elements/voa-tab.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 const voaTabCss = ":host{display:block;box-sizing:border-box}.tab-container{display:block;width:100%;box-sizing:border-box}.tab-list{display:flex;position:relative;width:100%;box-sizing:border-box}.tab-horizontal .tab-list{flex-direction:row;align-items:flex-end;}.tab-vertical{display:flex;}.tab-vertical .tab-list{flex-direction:column;width:auto;}";
@@ -145,6 +145,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaTab = VoaTab$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"voa-tab.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["VoaTab","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tab/voa-tab.css?tag=voa-tab&encapsulation=shadow","src/components/voa-tab/voa-tab.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.tab-container {\r\n display: block;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.tab-list {\r\n display: flex;\r\n position: relative;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Orientation Modifiers /\r\n.tab-horizontal .tab-list {\r\n flex-direction: row;\r\n align-items: flex-end; / Common alignment for tabs sitting on a line /\r\n}\r\n\r\n.tab-vertical {\r\n display: flex; / Container becomes flex in vertical to allow content next to it if needed /\r\n}\r\n\r\n.tab-vertical .tab-list {\r\n flex-direction: column;\r\n width: auto; / Shrink to fit items /\r\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-tab',\r\n styleUrl: 'voa-tab.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTab {\r\n @Element() host: HTMLVoaTabElement;\r\n\r\n @Prop({ reflect: true }) direction: 'horizontal' \| 'vertical' = 'horizontal';\r\n\r\n /\r\n Controlled mode active index.\r\n /\r\n @Prop() activeIndex: number;\r\n\r\n /\r\n Event emitted when the active tab changes.\r\n /\r\n @Event() dsTabChange: EventEmitter<{ index: number }>;\r\n\r\n /\r\n Internal state for uncontrolled mode.\r\n /\r\n @State() internalIndex: number = 0;\r\n\r\n @Watch('activeIndex')\r\n handleActiveIndexChange(newValue: number) {\r\n if (newValue !== undefined) {\r\n this.internalIndex = newValue;\r\n this.syncChildren();\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.activeIndex !== undefined) {\r\n this.internalIndex = this.activeIndex;\r\n }\r\n this.syncChildren();\r\n }\r\n\r\n /\r\n Listens for children being added/removed from the slot.\r\n /\r\n private handleSlotChange = () => {\r\n this.syncChildren();\r\n };\r\n\r\n /\r\n Listens for the child emitting its click event.\r\n /\r\n @Listen('tabClick')\r\n handleTabSelected(event: CustomEvent) {\r\n const target = event.target as HTMLVoaTabItemElement;\r\n const tabs = this.getTabs();\r\n const index = tabs.indexOf(target);\r\n\r\n // Ensure we don't activate disabled tabs (double check)\r\n if (index > -1 && !target.disabled && target.state !== 'disabled') {\r\n this.activateTab(index);\r\n }\r\n }\r\n\r\n private getTabs() {\r\n return Array.from(this.host.querySelectorAll('voa-tab-item'));\r\n }\r\n\r\n /\r\n Updates the `state` prop of all children based on current selection.\r\n * Handles the 'active' \| 'default' \| 'disabled' string logic.\r\n */\r\n private syncChildren() {\r\n const tabs = this.getTabs();\r\n tabs.forEach((tab, index) => {\r\n // Never overwrite 'disabled' state\r\n if (tab.disabled \|\| tab.state === 'disabled') {\r\n return; \r\n }\r\n \r\n // Set active or default\r\n if (index === this.internalIndex) {\r\n tab.state = 'active';\r\n } else {\r\n tab.state = 'default';\r\n }\r\n });\r\n }\r\n\r\n private activateTab(index: number) {\r\n this.internalIndex = index;\r\n this.syncChildren();\r\n this.dsTabChange.emit({ index });\r\n }\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n const tabs = this.getTabs();\r\n if (tabs.length === 0) return;\r\n\r\n const isVertical = this.direction === 'vertical';\r\n const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';\r\n const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';\r\n\r\n let nextIndex = this.internalIndex;\r\n\r\n if (event.key === nextKey) {\r\n event.preventDefault();\r\n nextIndex = this.internalIndex + 1;\r\n if (nextIndex >= tabs.length) nextIndex = 0;\r\n } else if (event.key === prevKey) {\r\n event.preventDefault();\r\n nextIndex = this.internalIndex - 1;\r\n if (nextIndex < 0) nextIndex = tabs.length - 1;\r\n } else if (event.key === 'Home') {\r\n event.preventDefault();\r\n nextIndex = 0;\r\n } else if (event.key === 'End') {\r\n event.preventDefault();\r\n nextIndex = tabs.length - 1;\r\n } else {\r\n return;\r\n }\r\n\r\n // Simple skip for disabled tabs (moves to the one requested, if disabled, does nothing in this simple version)\r\n // In production, you'd want a while loop to find the next non-disabled index.\r\n const targetTab = tabs[nextIndex];\r\n if (targetTab.disabled \|\| targetTab.state === 'disabled') {\r\n return; \r\n }\r\n\r\n this.activateTab(nextIndex);\r\n tabs[nextIndex].setFocus();\r\n };\r\n\r\n render() {\r\n return (\r\n <Host \r\n role=\"tablist\" \r\n aria-orientation={this.direction}\r\n onKeyDown={this.handleKeyDown}\r\n >\r\n <div part=\"base\" class={{\r\n 'tab-container': true,\r\n [`tab-${this.direction}`]: true\r\n }}>\r\n <div part=\"list\" class=\"tab-list\">\r\n <slot onSlotchange={this.handleSlotChange} />\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}
1	+ {"file":"voa-tab.js","mappings":"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","names":["VoaTab","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tab/voa-tab.css?tag=voa-tab&encapsulation=shadow","src/components/voa-tab/voa-tab.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.tab-container {\r\n display: block;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.tab-list {\r\n display: flex;\r\n position: relative;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Orientation Modifiers /\r\n.tab-horizontal .tab-list {\r\n flex-direction: row;\r\n align-items: flex-end; / Common alignment for tabs sitting on a line /\r\n}\r\n\r\n.tab-vertical {\r\n display: flex; / Container becomes flex in vertical to allow content next to it if needed /\r\n}\r\n\r\n.tab-vertical .tab-list {\r\n flex-direction: column;\r\n width: auto; / Shrink to fit items /\r\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-tab',\r\n styleUrl: 'voa-tab.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTab {\r\n @Element() host: HTMLVoaTabElement;\r\n\r\n @Prop({ reflect: true }) direction: 'horizontal' \| 'vertical' = 'horizontal';\r\n\r\n /\r\n Controlled mode active index.\r\n /\r\n @Prop() activeIndex: number;\r\n\r\n /\r\n Event emitted when the active tab changes.\r\n /\r\n @Event() dsTabChange: EventEmitter<{ index: number }>;\r\n\r\n /\r\n Internal state for uncontrolled mode.\r\n /\r\n @State() internalIndex: number = 0;\r\n\r\n @Watch('activeIndex')\r\n handleActiveIndexChange(newValue: number) {\r\n if (newValue !== undefined) {\r\n this.internalIndex = newValue;\r\n this.syncChildren();\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.activeIndex !== undefined) {\r\n this.internalIndex = this.activeIndex;\r\n }\r\n this.syncChildren();\r\n }\r\n\r\n /\r\n Listens for children being added/removed from the slot.\r\n /\r\n private handleSlotChange = () => {\r\n this.syncChildren();\r\n };\r\n\r\n /\r\n Listens for the child emitting its click event.\r\n /\r\n @Listen('tabClick')\r\n handleTabSelected(event: CustomEvent) {\r\n const target = event.target as HTMLVoaTabItemElement;\r\n const tabs = this.getTabs();\r\n const index = tabs.indexOf(target);\r\n\r\n // Ensure we don't activate disabled tabs (double check)\r\n if (index > -1 && !target.disabled && target.state !== 'disabled') {\r\n this.activateTab(index);\r\n }\r\n }\r\n\r\n private getTabs() {\r\n return Array.from(this.host.querySelectorAll('voa-tab-item'));\r\n }\r\n\r\n /\r\n Updates the `state` prop of all children based on current selection.\r\n * Handles the 'active' \| 'default' \| 'disabled' string logic.\r\n */\r\n private syncChildren() {\r\n const tabs = this.getTabs();\r\n tabs.forEach((tab, index) => {\r\n // Never overwrite 'disabled' state\r\n if (tab.disabled \|\| tab.state === 'disabled') {\r\n return; \r\n }\r\n \r\n // Set active or default\r\n if (index === this.internalIndex) {\r\n tab.state = 'active';\r\n } else {\r\n tab.state = 'default';\r\n }\r\n });\r\n }\r\n\r\n private activateTab(index: number) {\r\n this.internalIndex = index;\r\n this.syncChildren();\r\n this.dsTabChange.emit({ index });\r\n }\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n const tabs = this.getTabs();\r\n if (tabs.length === 0) return;\r\n\r\n const isVertical = this.direction === 'vertical';\r\n const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';\r\n const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';\r\n\r\n let nextIndex = this.internalIndex;\r\n\r\n if (event.key === nextKey) {\r\n event.preventDefault();\r\n nextIndex = this.internalIndex + 1;\r\n if (nextIndex >= tabs.length) nextIndex = 0;\r\n } else if (event.key === prevKey) {\r\n event.preventDefault();\r\n nextIndex = this.internalIndex - 1;\r\n if (nextIndex < 0) nextIndex = tabs.length - 1;\r\n } else if (event.key === 'Home') {\r\n event.preventDefault();\r\n nextIndex = 0;\r\n } else if (event.key === 'End') {\r\n event.preventDefault();\r\n nextIndex = tabs.length - 1;\r\n } else {\r\n return;\r\n }\r\n\r\n // Simple skip for disabled tabs (moves to the one requested, if disabled, does nothing in this simple version)\r\n // In production, you'd want a while loop to find the next non-disabled index.\r\n const targetTab = tabs[nextIndex];\r\n if (targetTab.disabled \|\| targetTab.state === 'disabled') {\r\n return; \r\n }\r\n\r\n this.activateTab(nextIndex);\r\n tabs[nextIndex].setFocus();\r\n };\r\n\r\n render() {\r\n return (\r\n <Host \r\n role=\"tablist\" \r\n aria-orientation={this.direction}\r\n onKeyDown={this.handleKeyDown}\r\n >\r\n <div part=\"base\" class={{\r\n 'tab-container': true,\r\n [`tab-${this.direction}`]: true\r\n }}>\r\n <div part=\"list\" class=\"tab-list\">\r\n <slot onSlotchange={this.handleSlotChange} />\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}

package/dist/custom-elements/voa-table.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 const tableCss = ".table{width:100%;border-collapse:collapse}th,td{padding:10px;border:1px solid #ddd;text-align:left}th{background-color:#f4f4f4}";
@@ -33,6 +33,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaTable = Table;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"voa-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,kIAAkI;;MCOtI,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAU,EAAE;AAChB,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AAwB/B;IAtBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAA,EAClB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAK,CAAA,IAAA,EAAA,IAAA,EAAA,MAAM,CAAM,CAClB,CAAC,CACC,CACC,EACR,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MACjB,CAAA,CAAA,IAAA,EAAA,IAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAK,CAAA,IAAA,EAAA,IAAA,EAAA,GAAG,CAAC,MAAM,CAAC,CAAM,CACvB,CAAC,CACC,CACN,CAAC,CACI,CACF~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-table/table.css?tag=voa-table&encapsulation=shadow","src/components/voa-table/table.tsx"],"sourcesContent":[".table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n}\r\n\r\nth,\r\ntd {\r\n padding: 10px;\r\n border: 1px solid #ddd;\r\n text-align: left;\r\n}\r\n\r\nth {\r\n background-color: #f4f4f4;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-table\",\r\n styleUrl: \"table.css\",\r\n shadow: true,\r\n})\r\nexport class Table {\r\n @Prop() data: any[] = [];\r\n @Prop() columns: string[] = [];\r\n\r\n render() {\r\n return (\r\n <table class=\"table\">\r\n <thead>\r\n <tr>\r\n {this.columns.map((column) => (\r\n <th>{column}</th>\r\n ))}\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {this.data.map((row) => (\r\n <tr>\r\n {this.columns.map((column) => (\r\n <td>{row[column]}</td>\r\n ))}\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"voa-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,kIAAkI;;MCOtI,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAU,EAAE;AAChB,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AAwB/B;IAtBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAA,EAClB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAK,CAAA,IAAA,EAAA,IAAA,EAAA,MAAM,CAAM,CAClB,CAAC,CACC,CACC,EACR,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MACjB,CAAA,CAAA,IAAA,EAAA,IAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAK,CAAA,IAAA,EAAA,IAAA,EAAA,GAAG,CAAC,MAAM,CAAC,CAAM,CACvB,CAAC,CACC,CACN,CAAC,CACI,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-table/table.css?tag=voa-table&encapsulation=shadow","src/components/voa-table/table.tsx"],"sourcesContent":[".table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n}\r\n\r\nth,\r\ntd {\r\n padding: 10px;\r\n border: 1px solid #ddd;\r\n text-align: left;\r\n}\r\n\r\nth {\r\n background-color: #f4f4f4;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-table\",\r\n styleUrl: \"table.css\",\r\n shadow: true,\r\n})\r\nexport class Table {\r\n @Prop() data: any[] = [];\r\n @Prop() columns: string[] = [];\r\n\r\n render() {\r\n return (\r\n <table class=\"table\">\r\n <thead>\r\n <tr>\r\n {this.columns.map((column) => (\r\n <th>{column}</th>\r\n ))}\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {this.data.map((row) => (\r\n <tr>\r\n {this.columns.map((column) => (\r\n <td>{row[column]}</td>\r\n ))}\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/custom-elements/voa-tag.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 const voaTagCss = ":host{display:inline-flex;vertical-align:middle;box-sizing:border-box}.tag-container{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.tag-label{display:block;white-space:nowrap;box-sizing:border-box}.tag-icon-start,.tag-icon-end{display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;}";
@@ -62,6 +62,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaTag = VoaTag$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"voa-tag.js","mappings":";;AAAA,MAAM,SAAS,GAAG,+WAA+W;;MCmBpXA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAaE;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;AAE7D;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAuB,SAAS;AAE9D;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAgB,IAAI;AAEjD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;AAEG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAoCpD;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO;QAExC,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,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,OAAO,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAC7B,gBAAA,CAAC,OAAO,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;aAC3B,EAAA,EAEA,OAAO,IAAI,IAAI,CAAC,QAAQ,KACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,EAAA,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAG,CACrB,CACR,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,EAAA,EACjC,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,OAAO,IAAI,IAAI,CAAC,SAAS,KACxB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,cAAc,EAAA,EACxC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,CAAG,CACnB,CACR,CACG,CACD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["VoaTag","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tag/voa-tag.css?tag=voa-tag&encapsulation=shadow","src/components/voa-tag/voa-tag.tsx"],"sourcesContent":["/* UNSTYLED PATTERN: Structural CSS only /\r\n\r\n:host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n}\r\n\r\n.tag-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.tag-label {\r\n display: block;\r\n white-space: nowrap;\r\n box-sizing: border-box;\r\n}\r\n\r\n.tag-icon-start,\r\n.tag-icon-end {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n line-height: 0; / Prevents icon height weirdness /\r\n}\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n/\r\n Tag component para exibir labels categorizadores, status ou metadados.\r\n * Baseado no design do Figma (node-id: 1436-769).\r\n \r\n O componente segue o padrão \"headless/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 principal do tag\r\n * @part label - O wrapper do texto\r\n * @part icon-start - Container do ícone à esquerda (slot para variante icons)\r\n * @part icon-end - Container do ícone à direita (slot para variante icons)\r\n /\r\n@Component({\r\n tag: 'voa-tag',\r\n styleUrl: 'voa-tag.css',\r\n shadow: true,\r\n})\r\nexport class VoaTag {\r\n @Element() host: HTMLElement;\r\n\r\n /\r\n O texto a ser exibido no tag\r\n /\r\n @Prop({ reflect: true }) label?: string;\r\n\r\n /\r\n A variante do tag\r\n /\r\n @Prop({ reflect: true }) variant: 'plain' \| 'icons' = 'plain';\r\n\r\n /\r\n Forma do tag\r\n /\r\n @Prop({ reflect: true }) shape: 'default' \| 'pill' = 'default';\r\n\r\n /\r\n Tamanho do tag\r\n /\r\n @Prop({ reflect: true }) size: 'sm' \| 'md' = 'md';\r\n\r\n /\r\n Exibe o ícone à esquerda (apenas se variant=\"icons\")\r\n /\r\n @Prop({ reflect: true }) iconLeft: boolean = false;\r\n\r\n /\r\n Exibe o ícone à direita (apenas se variant=\"icons\")\r\n */\r\n @Prop({ reflect: true }) iconRight: boolean = false;\r\n\r\n render() {\r\n const isIcons = this.variant === 'icons';\r\n\r\n return (\r\n <Host>\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'tag-container': true,\r\n [`tag-${this.variant}`]: true,\r\n [`tag-${this.shape}`]: true,\r\n [`tag-${this.size}`]: true,\r\n }}\r\n >\r\n {isIcons && this.iconLeft && (\r\n <span part=\"icon-start\" class=\"tag-icon-start\">\r\n <slot name=\"icon-start\" />\r\n </span>\r\n )}\r\n\r\n <span part=\"label\" class=\"tag-label\">\r\n {this.label}\r\n <slot />\r\n </span>\r\n\r\n {isIcons && this.iconRight && (\r\n <span part=\"icon-end\" class=\"tag-icon-end\">\r\n <slot name=\"icon-end\" />\r\n </span>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"voa-tag.js","mappings":";;AAAA,MAAM,SAAS,GAAG,+WAA+W;;MCmBpXA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAaE;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;AAE7D;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAuB,SAAS;AAE9D;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAgB,IAAI;AAEjD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;AAEG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAoCpD;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO;QAExC,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,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,OAAO,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAC7B,gBAAA,CAAC,OAAO,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;aAC3B,EAAA,EAEA,OAAO,IAAI,IAAI,CAAC,QAAQ,KACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,EAAA,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAG,CACrB,CACR,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,EAAA,EACjC,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,OAAO,IAAI,IAAI,CAAC,SAAS,KACxB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,cAAc,EAAA,EACxC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,CAAG,CACnB,CACR,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaTag","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-tag/voa-tag.css?tag=voa-tag&encapsulation=shadow","src/components/voa-tag/voa-tag.tsx"],"sourcesContent":["/* UNSTYLED PATTERN: Structural CSS only /\r\n\r\n:host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n}\r\n\r\n.tag-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.tag-label {\r\n display: block;\r\n white-space: nowrap;\r\n box-sizing: border-box;\r\n}\r\n\r\n.tag-icon-start,\r\n.tag-icon-end {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n line-height: 0; / Prevents icon height weirdness /\r\n}\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n/\r\n Tag component para exibir labels categorizadores, status ou metadados.\r\n * Baseado no design do Figma (node-id: 1436-769).\r\n \r\n O componente segue o padrão \"headless/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 principal do tag\r\n * @part label - O wrapper do texto\r\n * @part icon-start - Container do ícone à esquerda (slot para variante icons)\r\n * @part icon-end - Container do ícone à direita (slot para variante icons)\r\n /\r\n@Component({\r\n tag: 'voa-tag',\r\n styleUrl: 'voa-tag.css',\r\n shadow: true,\r\n})\r\nexport class VoaTag {\r\n @Element() host: HTMLElement;\r\n\r\n /\r\n O texto a ser exibido no tag\r\n /\r\n @Prop({ reflect: true }) label?: string;\r\n\r\n /\r\n A variante do tag\r\n /\r\n @Prop({ reflect: true }) variant: 'plain' \| 'icons' = 'plain';\r\n\r\n /\r\n Forma do tag\r\n /\r\n @Prop({ reflect: true }) shape: 'default' \| 'pill' = 'default';\r\n\r\n /\r\n Tamanho do tag\r\n /\r\n @Prop({ reflect: true }) size: 'sm' \| 'md' = 'md';\r\n\r\n /\r\n Exibe o ícone à esquerda (apenas se variant=\"icons\")\r\n /\r\n @Prop({ reflect: true }) iconLeft: boolean = false;\r\n\r\n /\r\n Exibe o ícone à direita (apenas se variant=\"icons\")\r\n */\r\n @Prop({ reflect: true }) iconRight: boolean = false;\r\n\r\n render() {\r\n const isIcons = this.variant === 'icons';\r\n\r\n return (\r\n <Host>\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'tag-container': true,\r\n [`tag-${this.variant}`]: true,\r\n [`tag-${this.shape}`]: true,\r\n [`tag-${this.size}`]: true,\r\n }}\r\n >\r\n {isIcons && this.iconLeft && (\r\n <span part=\"icon-start\" class=\"tag-icon-start\">\r\n <slot name=\"icon-start\" />\r\n </span>\r\n )}\r\n\r\n <span part=\"label\" class=\"tag-label\">\r\n {this.label}\r\n <slot />\r\n </span>\r\n\r\n {isIcons && this.iconRight && (\r\n <span part=\"icon-end\" class=\"tag-icon-end\">\r\n <slot name=\"icon-end\" />\r\n </span>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/custom-elements/voa-text-area.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 const voaTextAreaCss = ":host{display:block;box-sizing:border-box}.label-wrapper{display:flex;justify-content:space-between;align-items:flex-end;box-sizing:border-box}.label-text{flex:1}.textarea-container{position:relative;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column}textarea{flex:1;width:100%;height:100%;border:none;outline:none;background:transparent;resize:none;box-sizing:border-box;display:block;margin:0;padding:0}.resize-handle{position:absolute;bottom:2px;right:2px;width:12px;height:12px;cursor:nwse-resize;z-index:10;pointer-events:auto}.footer{display:flex;justify-content:space-between;align-items:flex-start;margin-top:4px}.character-counter{margin-left:auto;}";
@@ -144,6 +144,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaTextArea = VoaTextArea$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-text-area.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"voa-text-area.js","mappings":"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","names":["VoaTextArea","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-text-area/voa-text-area.css?tag=voa-text-area&encapsulation=shadow","src/components/voa-text-area/voa-text-area.tsx"],"sourcesContent":["/* UNSTYLED PATTERN: Structural CSS only /\r\n\r\n:host {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.label-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n box-sizing: border-box;\r\n}\r\n\r\n.label-text {\r\n flex: 1;\r\n}\r\n\r\n.textarea-container {\r\n position: relative;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n / Needed for border-radius clipping /\r\n display: flex;\r\n / Flex ensures child textarea fills height /\r\n flex-direction: column;\r\n}\r\n\r\ntextarea {\r\n flex: 1;\r\n / Fills the container /\r\n width: 100%;\r\n / Fills width /\r\n height: 100%;\r\n / Fills height /\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n resize: none;\r\n / Disable native resize /\r\n box-sizing: border-box;\r\n display: block;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.resize-handle {\r\n position: absolute;\r\n bottom: 2px;\r\n right: 2px;\r\n width: 12px;\r\n height: 12px;\r\n cursor: nwse-resize;\r\n z-index: 10;\r\n pointer-events: auto;\r\n}\r\n\r\n.footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-top: 4px;\r\n}\r\n\r\n.character-counter {\r\n margin-left: auto;\r\n / Push to right /\r\n}","import { Component, Prop, State, Event, EventEmitter, Method, Element, h, Host, Watch, AttachInternals } from '@stencil/core';\r\n\r\n/\r\n Componente de área de texto para entrada de textos longos\r\n * @part base - The root host element\r\n * @part container - The resizable wrapper\r\n * @part textarea - The native textarea\r\n /\r\n@Component({\r\n tag: 'voa-text-area',\r\n styleUrl: 'voa-text-area.css',\r\n shadow: {\r\n delegatesFocus: true\r\n },\r\n formAssociated: true\r\n})\r\nexport class VoaTextArea {\r\n @Element() host: HTMLVoaTextAreaElement;\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n @Prop() textareaId?: string;\r\n @Prop() name?: string;\r\n @Prop() label?: string;\r\n @Prop() info?: boolean = false;\r\n @Prop() infoText?: string = 'Identificador único';\r\n @Prop() placeholder?: string;\r\n @Prop() value?: string = '';\r\n @Prop() maxLength?: number;\r\n @Prop({ reflect: true }) disabled?: boolean = false;\r\n @Prop({ reflect: true }) readonly?: boolean = false;\r\n @Prop() required?: boolean = false;\r\n @Prop() rows?: number = 4;\r\n @Prop() cols?: number = 20;\r\n @Prop() errorMessage?: string;\r\n @Prop({ reflect: true }) hasError?: boolean = false;\r\n\r\n @State() internalValue: string = '';\r\n @State() isFocused: boolean = false;\r\n @State() characterCount: number = 0;\r\n\r\n // Stable ID for ARIA\r\n private uniqueId: string;\r\n private containerRef?: HTMLDivElement;\r\n\r\n @Event() voaChange: EventEmitter<string>;\r\n @Event() voaInput: EventEmitter<string>;\r\n @Event() voaFocus: EventEmitter<FocusEvent>;\r\n @Event() voaBlur: EventEmitter<FocusEvent>;\r\n\r\n componentWillLoad() {\r\n this.uniqueId = this.textareaId \|\| `voa-textarea-${Math.random().toString(36).substr(2, 9)}`;\r\n this.internalValue = this.value \|\| '';\r\n this.characterCount = this.internalValue.length;\r\n this.updateFormInternals();\r\n }\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string) {\r\n this.internalValue = newValue \|\| '';\r\n this.characterCount = this.internalValue.length;\r\n this.updateFormInternals();\r\n }\r\n\r\n private updateFormInternals() {\r\n this.internals.setFormValue(this.internalValue);\r\n // Aria-invalid is handled on the element in render, but could be done here too if delegating to host\r\n }\r\n\r\n private handleInput = (event: Event) => {\r\n const textarea = event.target as HTMLTextAreaElement;\r\n this.internalValue = textarea.value;\r\n this.characterCount = this.internalValue.length;\r\n\r\n this.updateFormInternals();\r\n this.voaInput.emit(this.internalValue);\r\n };\r\n\r\n private handleChange = (event: Event) => {\r\n event.stopPropagation(); // Stop native change, emit ours\r\n this.voaChange.emit(this.internalValue);\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n this.isFocused = true;\r\n this.voaFocus.emit(event);\r\n };\r\n\r\n private handleBlur = (event: FocusEvent) => {\r\n this.isFocused = false;\r\n this.voaBlur.emit(event);\r\n };\r\n\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n // Delegates focus handles this mostly, but good for imperative usage\r\n this.host.focus();\r\n }\r\n\r\n // --- RESIZE LOGIC FIXED ---\r\n // We resize the CONTAINER, not the textarea.\r\n private startResize = (event: MouseEvent) => {\r\n event.preventDefault();\r\n if (this.disabled \|\| this.readonly \|\| !this.containerRef) return;\r\n\r\n const startX = event.clientX;\r\n const startY = event.clientY;\r\n\r\n // Get current dimensions of the container\r\n const startWidth = this.containerRef.offsetWidth;\r\n const startHeight = this.containerRef.offsetHeight;\r\n\r\n const doDrag = (e: MouseEvent) => {\r\n // Apply style to CONTAINER\r\n // Using requestAnimationFrame for performance is better, but this is simple enough for now\r\n this.containerRef.style.width = `${Math.max(100, startWidth + e.clientX - startX)}px`;\r\n this.containerRef.style.height = `${Math.max(60, startHeight + e.clientY - startY)}px`;\r\n };\r\n\r\n const stopDrag = () => {\r\n document.removeEventListener('mousemove', doDrag);\r\n document.removeEventListener('mouseup', stopDrag);\r\n };\r\n\r\n document.addEventListener('mousemove', doDrag);\r\n document.addEventListener('mouseup', stopDrag);\r\n };\r\n\r\n private renderInfoIcon = () => (\r\n <svg part=\"label-info-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\r\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\r\n </svg>\r\n );\r\n\r\n private renderResizeIcon = () => (\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M8.05113 0.603577L0.603577 8.05113M8.60358 4.87979L4.8798 8.60356\" stroke=\"#9F9FA8\" stroke-width=\"1.20716\" stroke-linecap=\"round\" />\r\n </svg>\r\n );\r\n\r\n render() {\r\n return (\r\n <Host part=\"base\">\r\n {this.label && (\r\n <div part=\"label-wrapper\" class=\"label-wrapper\">\r\n <label part=\"label\" htmlFor={this.uniqueId} class=\"label-text\">\r\n {this.label}\r\n {this.required && <span part=\"required-indicator\" class=\"required-indicator\" aria-hidden=\"true\"></span>}\r\n </label>\r\n {this.info && (\r\n <div part=\"label-info\" class=\"label-info\">\r\n <span part=\"label-info-text\">{this.infoText}</span>\r\n {this.renderInfoIcon()}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n\r\n <div\r\n part=\"container\"\r\n ref={el => this.containerRef = el}\r\n class={{\r\n 'textarea-container': true,\r\n 'is-focused': this.isFocused,\r\n 'has-error': this.hasError,\r\n 'is-disabled': this.disabled,\r\n 'is-readonly': this.readonly\r\n }}\r\n >\r\n <textarea\r\n part=\"textarea\"\r\n id={this.uniqueId}\r\n name={this.name}\r\n placeholder={this.placeholder}\r\n value={this.internalValue}\r\n maxlength={this.maxLength}\r\n disabled={this.disabled}\r\n readonly={this.readonly}\r\n required={this.required}\r\n rows={this.rows}\r\n cols={this.cols}\r\n onInput={this.handleInput}\r\n onChange={this.handleChange}\r\n onFocus={this.handleFocus}\r\n onBlur={this.handleBlur}\r\n aria-invalid={this.hasError ? 'true' : undefined}\r\n aria-describedby={this.hasError && this.errorMessage ? `${this.uniqueId}-error` : undefined}\r\n />\r\n\r\n {/* Resize Handle - Visual Only, Mouse only for this simple implementation. \r\n Native resize is disabled via CSS. */}\r\n {!this.disabled && !this.readonly && (\r\n <div\r\n part=\"resize-handle\"\r\n class=\"resize-handle\"\r\n onMouseDown={this.startResize}\r\n role=\"presentation\" // Simplified for now\r\n >\r\n {this.renderResizeIcon()}\r\n </div>\r\n )}\r\n </div>\r\n\r\n <div part=\"footer\" class=\"footer\">\r\n {this.hasError && this.errorMessage ? (\r\n <div part=\"error-message\" class=\"error-message\" id={`${this.uniqueId}-error`} role=\"alert\">\r\n {this.errorMessage}\r\n </div>\r\n ) : (<span></span>)}\r\n\r\n <div part=\"character-counter\" class=\"character-counter\">\r\n <span>{this.characterCount}</span>\r\n {this.maxLength && <span>/ {this.maxLength}</span>}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}
1	+ {"file":"voa-text-area.js","mappings":"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","names":["VoaTextArea","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-text-area/voa-text-area.css?tag=voa-text-area&encapsulation=shadow","src/components/voa-text-area/voa-text-area.tsx"],"sourcesContent":["/* UNSTYLED PATTERN: Structural CSS only /\r\n\r\n:host {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.label-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n box-sizing: border-box;\r\n}\r\n\r\n.label-text {\r\n flex: 1;\r\n}\r\n\r\n.textarea-container {\r\n position: relative;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n / Needed for border-radius clipping /\r\n display: flex;\r\n / Flex ensures child textarea fills height /\r\n flex-direction: column;\r\n}\r\n\r\ntextarea {\r\n flex: 1;\r\n / Fills the container /\r\n width: 100%;\r\n / Fills width /\r\n height: 100%;\r\n / Fills height /\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n resize: none;\r\n / Disable native resize /\r\n box-sizing: border-box;\r\n display: block;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.resize-handle {\r\n position: absolute;\r\n bottom: 2px;\r\n right: 2px;\r\n width: 12px;\r\n height: 12px;\r\n cursor: nwse-resize;\r\n z-index: 10;\r\n pointer-events: auto;\r\n}\r\n\r\n.footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-top: 4px;\r\n}\r\n\r\n.character-counter {\r\n margin-left: auto;\r\n / Push to right /\r\n}","import { Component, Prop, State, Event, EventEmitter, Method, Element, h, Host, Watch, AttachInternals } from '@stencil/core';\r\n\r\n/\r\n Componente de área de texto para entrada de textos longos\r\n * @part base - The root host element\r\n * @part container - The resizable wrapper\r\n * @part textarea - The native textarea\r\n /\r\n@Component({\r\n tag: 'voa-text-area',\r\n styleUrl: 'voa-text-area.css',\r\n shadow: {\r\n delegatesFocus: true\r\n },\r\n formAssociated: true\r\n})\r\nexport class VoaTextArea {\r\n @Element() host: HTMLVoaTextAreaElement;\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n @Prop() textareaId?: string;\r\n @Prop() name?: string;\r\n @Prop() label?: string;\r\n @Prop() info?: boolean = false;\r\n @Prop() infoText?: string = 'Identificador único';\r\n @Prop() placeholder?: string;\r\n @Prop() value?: string = '';\r\n @Prop() maxLength?: number;\r\n @Prop({ reflect: true }) disabled?: boolean = false;\r\n @Prop({ reflect: true }) readonly?: boolean = false;\r\n @Prop() required?: boolean = false;\r\n @Prop() rows?: number = 4;\r\n @Prop() cols?: number = 20;\r\n @Prop() errorMessage?: string;\r\n @Prop({ reflect: true }) hasError?: boolean = false;\r\n\r\n @State() internalValue: string = '';\r\n @State() isFocused: boolean = false;\r\n @State() characterCount: number = 0;\r\n\r\n // Stable ID for ARIA\r\n private uniqueId: string;\r\n private containerRef?: HTMLDivElement;\r\n\r\n @Event() voaChange: EventEmitter<string>;\r\n @Event() voaInput: EventEmitter<string>;\r\n @Event() voaFocus: EventEmitter<FocusEvent>;\r\n @Event() voaBlur: EventEmitter<FocusEvent>;\r\n\r\n componentWillLoad() {\r\n this.uniqueId = this.textareaId \|\| `voa-textarea-${Math.random().toString(36).substr(2, 9)}`;\r\n this.internalValue = this.value \|\| '';\r\n this.characterCount = this.internalValue.length;\r\n this.updateFormInternals();\r\n }\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string) {\r\n this.internalValue = newValue \|\| '';\r\n this.characterCount = this.internalValue.length;\r\n this.updateFormInternals();\r\n }\r\n\r\n private updateFormInternals() {\r\n this.internals.setFormValue(this.internalValue);\r\n // Aria-invalid is handled on the element in render, but could be done here too if delegating to host\r\n }\r\n\r\n private handleInput = (event: Event) => {\r\n const textarea = event.target as HTMLTextAreaElement;\r\n this.internalValue = textarea.value;\r\n this.characterCount = this.internalValue.length;\r\n\r\n this.updateFormInternals();\r\n this.voaInput.emit(this.internalValue);\r\n };\r\n\r\n private handleChange = (event: Event) => {\r\n event.stopPropagation(); // Stop native change, emit ours\r\n this.voaChange.emit(this.internalValue);\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n this.isFocused = true;\r\n this.voaFocus.emit(event);\r\n };\r\n\r\n private handleBlur = (event: FocusEvent) => {\r\n this.isFocused = false;\r\n this.voaBlur.emit(event);\r\n };\r\n\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n // Delegates focus handles this mostly, but good for imperative usage\r\n this.host.focus();\r\n }\r\n\r\n // --- RESIZE LOGIC FIXED ---\r\n // We resize the CONTAINER, not the textarea.\r\n private startResize = (event: MouseEvent) => {\r\n event.preventDefault();\r\n if (this.disabled \|\| this.readonly \|\| !this.containerRef) return;\r\n\r\n const startX = event.clientX;\r\n const startY = event.clientY;\r\n\r\n // Get current dimensions of the container\r\n const startWidth = this.containerRef.offsetWidth;\r\n const startHeight = this.containerRef.offsetHeight;\r\n\r\n const doDrag = (e: MouseEvent) => {\r\n // Apply style to CONTAINER\r\n // Using requestAnimationFrame for performance is better, but this is simple enough for now\r\n this.containerRef.style.width = `${Math.max(100, startWidth + e.clientX - startX)}px`;\r\n this.containerRef.style.height = `${Math.max(60, startHeight + e.clientY - startY)}px`;\r\n };\r\n\r\n const stopDrag = () => {\r\n document.removeEventListener('mousemove', doDrag);\r\n document.removeEventListener('mouseup', stopDrag);\r\n };\r\n\r\n document.addEventListener('mousemove', doDrag);\r\n document.addEventListener('mouseup', stopDrag);\r\n };\r\n\r\n private renderInfoIcon = () => (\r\n <svg part=\"label-info-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\r\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\r\n </svg>\r\n );\r\n\r\n private renderResizeIcon = () => (\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M8.05113 0.603577L0.603577 8.05113M8.60358 4.87979L4.8798 8.60356\" stroke=\"#9F9FA8\" stroke-width=\"1.20716\" stroke-linecap=\"round\" />\r\n </svg>\r\n );\r\n\r\n render() {\r\n return (\r\n <Host part=\"base\">\r\n {this.label && (\r\n <div part=\"label-wrapper\" class=\"label-wrapper\">\r\n <label part=\"label\" htmlFor={this.uniqueId} class=\"label-text\">\r\n {this.label}\r\n {this.required && <span part=\"required-indicator\" class=\"required-indicator\" aria-hidden=\"true\"></span>}\r\n </label>\r\n {this.info && (\r\n <div part=\"label-info\" class=\"label-info\">\r\n <span part=\"label-info-text\">{this.infoText}</span>\r\n {this.renderInfoIcon()}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n\r\n <div\r\n part=\"container\"\r\n ref={el => this.containerRef = el}\r\n class={{\r\n 'textarea-container': true,\r\n 'is-focused': this.isFocused,\r\n 'has-error': this.hasError,\r\n 'is-disabled': this.disabled,\r\n 'is-readonly': this.readonly\r\n }}\r\n >\r\n <textarea\r\n part=\"textarea\"\r\n id={this.uniqueId}\r\n name={this.name}\r\n placeholder={this.placeholder}\r\n value={this.internalValue}\r\n maxlength={this.maxLength}\r\n disabled={this.disabled}\r\n readonly={this.readonly}\r\n required={this.required}\r\n rows={this.rows}\r\n cols={this.cols}\r\n onInput={this.handleInput}\r\n onChange={this.handleChange}\r\n onFocus={this.handleFocus}\r\n onBlur={this.handleBlur}\r\n aria-invalid={this.hasError ? 'true' : undefined}\r\n aria-describedby={this.hasError && this.errorMessage ? `${this.uniqueId}-error` : undefined}\r\n />\r\n\r\n {/* Resize Handle - Visual Only, Mouse only for this simple implementation. \r\n Native resize is disabled via CSS. */}\r\n {!this.disabled && !this.readonly && (\r\n <div\r\n part=\"resize-handle\"\r\n class=\"resize-handle\"\r\n onMouseDown={this.startResize}\r\n role=\"presentation\" // Simplified for now\r\n >\r\n {this.renderResizeIcon()}\r\n </div>\r\n )}\r\n </div>\r\n\r\n <div part=\"footer\" class=\"footer\">\r\n {this.hasError && this.errorMessage ? (\r\n <div part=\"error-message\" class=\"error-message\" id={`${this.uniqueId}-error`} role=\"alert\">\r\n {this.errorMessage}\r\n </div>\r\n ) : (<span></span>)}\r\n\r\n <div part=\"character-counter\" class=\"character-counter\">\r\n <span>{this.characterCount}</span>\r\n {this.maxLength && <span>/ {this.maxLength}</span>}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 const timepickerCss = ".timepicker{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;width:100%}";
@@ -30,6 +30,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaTimepicker = TimePicker;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +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}
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}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 const voaTooltipArrowCss = ":host{display:block}.voa-tooltip-arrow{position:relative;display:flex;justify-content:center;align-items:center;flex-shrink:0}.voa-tooltip-arrow--bottom{width:auto;justify-content:center}.voa-tooltip-arrow--bottom .voa-tooltip-arrow__triangle{position:relative;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--arrow-color, currentColor);}.voa-tooltip-arrow--bottom .voa-tooltip-arrow__triangle::before{content:'';position:absolute;width:15px;height:10px;top:-10px;left:50%;transform:translateX(-50%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);background-color:var(--arrow-border-color, transparent);z-index:-1;pointer-events:none}.voa-tooltip-arrow--top{width:auto;justify-content:center}.voa-tooltip-arrow--top .voa-tooltip-arrow__triangle{position:relative;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid var(--arrow-color, currentColor);}.voa-tooltip-arrow--top .voa-tooltip-arrow__triangle::before{content:'';position:absolute;width:calc(6px * 2 + 1.5px * 2);height:calc(7px + 1.5px * 2);bottom:-10px;left:50%;transform:translateX(-50%);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);background-color:var(--arrow-border-color, transparent);z-index:-1;pointer-events:none}.voa-tooltip-arrow--left{height:auto;align-items:center}.voa-tooltip-arrow--left .voa-tooltip-arrow__triangle{position:relative;width:0;height:0;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;border-right:7px solid var(--arrow-color, currentColor);}.voa-tooltip-arrow--left .voa-tooltip-arrow__triangle::before{content:'';position:absolute;width:calc(7px + 1.5px * 2);height:calc(5.5px * 2 + 1.5px * 2);top:50%;right:-10px;transform:translateY(-50%);clip-path:polygon(0% 50%, 100% 0%, 100% 100%);background-color:var(--arrow-border-color, transparent);z-index:-1;pointer-events:none}.voa-tooltip-arrow--right{height:auto;align-items:center}.voa-tooltip-arrow--right .voa-tooltip-arrow__triangle{position:relative;width:0;height:0;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;border-left:7px solid var(--arrow-color, currentColor);}.voa-tooltip-arrow--right .voa-tooltip-arrow__triangle::before{content:'';position:absolute;width:calc(7px + 1.5px * 2);height:calc(5.5px * 2 + 1.5px * 2);top:50%;left:-10px;transform:translateY(-50%);clip-path:polygon(0% 0%, 100% 50%, 0% 100%);background-color:var(--arrow-border-color, transparent);z-index:-1;pointer-events:none}";
@@ -45,6 +45,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaTooltipArrow = VoaTooltipArrow$1;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +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}
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}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 const voaTooltipCss = ":host{display:inline-block;position:relative}.voa-tooltip{display:inline-flex;position:absolute;z-index:1000;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}.voa-tooltip--visible{opacity:1;pointer-events:auto}.voa-tooltip--bottom{top:100%;left:50%;transform:translateX(-50%) translateY(4px);margin-top:10px}.voa-tooltip--bottom.voa-tooltip--visible{transform:translateX(-50%) translateY(0)}.voa-tooltip--top{bottom:100%;left:50%;transform:translateX(-50%) translateY(-4px);margin-bottom:10px}.voa-tooltip--top.voa-tooltip--visible{transform:translateX(-50%) translateY(0)}.voa-tooltip--left{right:100%;top:50%;transform:translateY(-50%) translateX(-4px);margin-right:10px}.voa-tooltip--left.voa-tooltip--visible{transform:translateY(-50%) translateX(0)}.voa-tooltip--right{left:100%;top:50%;transform:translateY(-50%) translateX(4px);margin-left:10px}.voa-tooltip--right.voa-tooltip--visible{transform:translateY(-50%) translateX(0)}.voa-tooltip__body{display:flex;align-items:center;box-sizing:border-box;position:relative;flex-shrink:0;width:fit-content;--triangle-base:12px;--triangle-height:7px;--triangle-base-horizontal:7px;--triangle-height-horizontal:11px;--triangle-position:50%;}.voa-tooltip--bottom .voa-tooltip__body::after{content:'';position:absolute;top:calc(-1 * var(--triangle-height, 7px));left:var(--triangle-position, 50%);transform:translateX(-50%);width:var(--triangle-base, 12px);height:var(--triangle-height, 7px);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);background-color:var(--arrow-color, currentColor);z-index:0;pointer-events:none}.voa-tooltip--top .voa-tooltip__body::after{content:'';position:absolute;bottom:calc(-1 * var(--triangle-height, 7px) + 1.5px);left:var(--triangle-position, 50%);transform:translateX(-50%);width:var(--triangle-base, 12px);height:var(--triangle-height, 7px);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);background-color:var(--arrow-color, currentColor);z-index:0;pointer-events:none}.voa-tooltip--left .voa-tooltip__body::after{content:'';position:absolute;right:calc(-1 * var(--triangle-base-horizontal, 7px));top:var(--triangle-position, 50%);transform:translateY(-50%);width:var(--triangle-base-horizontal, 7px);height:var(--triangle-height-horizontal, 11px);clip-path:polygon(0% 0%, 100% 50%, 0% 100%);background-color:var(--arrow-color, currentColor);z-index:0;pointer-events:none}.voa-tooltip--right .voa-tooltip__body::after{content:'';position:absolute;left:calc(-1 * var(--triangle-base-horizontal, 7px));top:var(--triangle-position, 50%);transform:translateY(-50%);width:var(--triangle-base-horizontal, 7px);height:var(--triangle-height-horizontal, 11px);clip-path:polygon(0% 50%, 100% 0%, 100% 100%);background-color:var(--arrow-color, currentColor);z-index:0;pointer-events:none}.voa-tooltip--bottom .voa-tooltip__body::before{content:'';position:absolute;top:calc(-1 * var(--triangle-height, 7px) - 1.5px);left:var(--triangle-position, 50%);transform:translateX(-50%);width:calc(var(--triangle-base, 12px) + 3px);height:calc(var(--triangle-height, 7px) + 3px);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);background-color:var(--arrow-border-color, transparent);z-index:-1;pointer-events:none}.voa-tooltip--top .voa-tooltip__body::before{content:'';position:absolute;bottom:calc(-1 * var(--triangle-height, 7px) + 1.5px - 1.5px);left:var(--triangle-position, 50%);transform:translateX(-50%);width:calc(var(--triangle-base, 12px) + 3px);height:calc(var(--triangle-height, 7px) + 1.5px);clip-path:polygon(0% 0%, 100% 0%, 50% 100%);background-color:var(--arrow-border-color, transparent);z-index:-1;pointer-events:none}.voa-tooltip--left .voa-tooltip__body::before{content:'';position:absolute;right:calc(-1 * var(--triangle-base-horizontal, 7px) - 1.5px);top:var(--triangle-position, 50%);transform:translateY(-50%);width:calc(var(--triangle-base-horizontal, 7px) + 3px);height:calc(var(--triangle-height-horizontal, 11px) + 3px);clip-path:polygon(0% 0%, 100% 50%, 0% 100%);background-color:var(--arrow-border-color, transparent);z-index:-1;pointer-events:none}.voa-tooltip--right .voa-tooltip__body::before{content:'';position:absolute;left:calc(-1 * var(--triangle-base-horizontal, 7px) - 1.5px);top:var(--triangle-position, 50%);transform:translateY(-50%);width:calc(var(--triangle-base-horizontal, 7px) + 3px);height:calc(var(--triangle-height-horizontal, 11px) + 3px);clip-path:polygon(0% 50%, 100% 0%, 100% 100%);background-color:var(--arrow-border-color, transparent);z-index:-1;pointer-events:none}.voa-tooltip__icon-slot{display:flex;align-items:center;justify-content:center;flex-shrink:0}.voa-tooltip__content{display:flex;flex-shrink:0;text-align:center}";
@@ -96,6 +96,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaTooltip = VoaTooltip$1;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +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}
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}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 const uploadCss = ".upload{position:relative;display:inline-block}.file-input{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.upload-label{display:inline-block;padding:10px 20px;border:1px solid #ccc;border-radius:4px;background-color:#007bff;color:white;cursor:pointer;transition:background-color 0.2s}.upload-label:hover{background-color:#0056b3}";
@@ -28,6 +28,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 const VoaUpload = Upload;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +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}
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}

package/dist/styles/voa-components.css CHANGED Viewed

@@ -6,8 +6,8 @@
  * @import 'voa-ds-core/dist/voa/voa.css';
  * @import 'voa-ds-core/components';
  *
- * Versão: 1.0.31
- * Gerado automaticamente em: 2026-01-26T19:08:21.298Z
+ * Versão: 1.0.35
+ * Gerado automaticamente em: 2026-01-26T20:20:30.083Z
  */