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

voa-ds-core 1.0.29 → 1.0.31

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-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 './index.js';
+import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.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,7 +33,6 @@ 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, a as Host } from './index.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.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,7 +62,6 @@ 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, a as Host } from './index.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.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,7 +144,6 @@ 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 './index.js';
+import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
 const timepickerCss = ".timepicker{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;width:100%}";
@@ -30,7 +30,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 const VoaTimepicker = TimePicker;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-timepicker.js.map 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, a as Host } from './index.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.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,7 +45,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 const VoaTooltipArrow = VoaTooltipArrow$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-tooltip-arrow.js.map 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, a as Host } from './index.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.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,7 +96,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 const VoaTooltip = VoaTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-tooltip.js.map 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 './index.js';
+import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.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,7 +28,6 @@ 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.29
- * Gerado automaticamente em: 2026-01-26T18:48:09.253Z
+ * Versão: 1.0.31
+ * Gerado automaticamente em: 2026-01-26T19:08:21.298Z
  */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "voa-ds-core",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -48,6 +48,10 @@
       "types": "./dist/custom-elements/*.d.ts",
       "import": "./dist/custom-elements/*"
     },
+    "./dist/custom-elements/*.js": {
+      "types": "./dist/custom-elements/*.d.ts",
+      "import": "./dist/custom-elements/*.js"
+    },
     "./styles": "./dist/voa/voa.css",
     "./dist/voa/voa.css": "./dist/voa/voa.css",
     "./tokens": "./dist/tokens/global.css",

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

@@ -1 +0,0 @@

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

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

@@ -1 +0,0 @@

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

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

@@ -1 +0,0 @@

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