voa-ds-core 1.0.4

package/dist/cjs/voa-table.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.js');
+
+const tableCss = ".table{width:100%;border-collapse:collapse}th,td{padding:10px;border:1px solid #ddd;text-align:left}th{background-color:#f4f4f4}";
+
+const Table = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.data = [];
+        this.columns = [];
+    }
+    render() {
+        return (index.h("table", { key: '117e9b340eb21a4641a6e2fd5d7a3d93495d97c8', class: "table" }, index.h("thead", { key: '0ecd63c8eca1906f3091deb4b4cc8317745de98b' }, index.h("tr", { key: '86416e1bb3f8e3290a79c1f4e6a0e6ef61f98527' }, this.columns.map((column) => (index.h("th", null, column))))), index.h("tbody", { key: '0d9a3312dc03d6788c935c9467fff10d6b835bfd' }, this.data.map((row) => (index.h("tr", null, this.columns.map((column) => (index.h("td", null, row[column])))))))));
+    }
+};
+Table.style = tableCss;
+
+exports.voa_table = Table;
+//# sourceMappingURL=voa-table.entry.cjs.js.map

package/dist/cjs/voa-table.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-table.entry.cjs.js","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,kIAAkI;;MCOtI,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAU,EAAE;AAChB,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AAwB/B;IAtBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAA,EAClBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,OAAK,CAAA,IAAA,EAAA,IAAA,EAAA,MAAM,CAAM,CAClB,CAAC,CACC,CACC,EACRA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MACjBA,OAAA,CAAA,IAAA,EAAA,IAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,OAAK,CAAA,IAAA,EAAA,IAAA,EAAA,GAAG,CAAC,MAAM,CAAC,CAAM,CACvB,CAAC,CACC,CACN,CAAC,CACI,CACF;;;;;;;"}

package/dist/cjs/voa-tag.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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;}";
+
+const VoaTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * A variante do tag
+         */
+        this.variant = 'plain';
+        /**
+         * Forma do tag
+         */
+        this.shape = 'default';
+        /**
+         * Tamanho do tag
+         */
+        this.size = 'md';
+        /**
+         * Exibe o ícone à esquerda (apenas se variant="icons")
+         */
+        this.iconLeft = false;
+        /**
+         * Exibe o ícone à direita (apenas se variant="icons")
+         */
+        this.iconRight = false;
+    }
+    render() {
+        const isIcons = this.variant === 'icons';
+        return (index.h(index.Host, { key: 'eeddc95792bcd34a3ca5a43f9fd16720a961e00d' }, index.h("div", { key: '755f15c3b5d95a8109c9b523bd0e88cc57ad4550', part: "base", class: {
+                'tag-container': true,
+                [`tag-${this.variant}`]: true,
+                [`tag-${this.shape}`]: true,
+                [`tag-${this.size}`]: true,
+            } }, isIcons && this.iconLeft && (index.h("span", { key: 'f3eae8eeee463f2dee0445244118e8b575fba004', part: "icon-start", class: "tag-icon-start" }, index.h("slot", { key: '1fffcd8b8cb4c1f2d111822008e8740f8d78d07c', name: "icon-start" }))), index.h("span", { key: '5ad2e56b56b922c51a6c404344892cde903c21b7', part: "label", class: "tag-label" }, this.label, index.h("slot", { key: '069595167c2ba1b42f1a591a772721eeb43e4fa6' })), isIcons && this.iconRight && (index.h("span", { key: 'adad7eb1e4f8af195c66eb79647f75cf56ebd816', part: "icon-end", class: "tag-icon-end" }, index.h("slot", { key: '82d3246264e768883ffbb1deea54220e018ffb2e', name: "icon-end" }))))));
+    }
+    get host() { return index.getElement(this); }
+};
+VoaTag.style = voaTagCss;
+
+exports.voa_tag = VoaTag;
+//# sourceMappingURL=voa-tag.entry.cjs.js.map

package/dist/cjs/voa-tag.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tag.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,+WAA+W;;MCmBpX,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,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,KACvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,EAAA,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAG,CACrB,CACR,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,EAAA,EACjC,IAAI,CAAC,KAAK,EACXA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,OAAO,IAAI,IAAI,CAAC,SAAS,KACxBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,cAAc,EAAA,EACxCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,CAAG,CACnB,CACR,CACG,CACD;;;;;;;;"}

package/dist/cjs/voa-text-area.cjs.entry.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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;}";
+
+const VoaTextArea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.voaChange = index.createEvent(this, "voaChange");
+        this.voaInput = index.createEvent(this, "voaInput");
+        this.voaFocus = index.createEvent(this, "voaFocus");
+        this.voaBlur = index.createEvent(this, "voaBlur");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.info = false;
+        this.infoText = 'Identificador único';
+        this.value = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.rows = 4;
+        this.cols = 20;
+        this.hasError = false;
+        this.internalValue = '';
+        this.isFocused = false;
+        this.characterCount = 0;
+        this.handleInput = (event) => {
+            const textarea = event.target;
+            this.internalValue = textarea.value;
+            this.characterCount = this.internalValue.length;
+            this.updateFormInternals();
+            this.voaInput.emit(this.internalValue);
+        };
+        this.handleChange = (event) => {
+            event.stopPropagation(); // Stop native change, emit ours
+            this.voaChange.emit(this.internalValue);
+        };
+        this.handleFocus = (event) => {
+            this.isFocused = true;
+            this.voaFocus.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.isFocused = false;
+            this.voaBlur.emit(event);
+        };
+        // --- RESIZE LOGIC FIXED ---
+        // We resize the CONTAINER, not the textarea.
+        this.startResize = (event) => {
+            event.preventDefault();
+            if (this.disabled || this.readonly || !this.containerRef)
+                return;
+            const startX = event.clientX;
+            const startY = event.clientY;
+            // Get current dimensions of the container
+            const startWidth = this.containerRef.offsetWidth;
+            const startHeight = this.containerRef.offsetHeight;
+            const doDrag = (e) => {
+                // Apply style to CONTAINER
+                // Using requestAnimationFrame for performance is better, but this is simple enough for now
+                this.containerRef.style.width = `${Math.max(100, startWidth + e.clientX - startX)}px`;
+                this.containerRef.style.height = `${Math.max(60, startHeight + e.clientY - startY)}px`;
+            };
+            const stopDrag = () => {
+                document.removeEventListener('mousemove', doDrag);
+                document.removeEventListener('mouseup', stopDrag);
+            };
+            document.addEventListener('mousemove', doDrag);
+            document.addEventListener('mouseup', stopDrag);
+        };
+        this.renderInfoIcon = () => (index.h("svg", { part: "label-info-icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, index.h("circle", { cx: "12", cy: "12", r: "10" }), index.h("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), index.h("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })));
+        this.renderResizeIcon = () => (index.h("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.05113 0.603577L0.603577 8.05113M8.60358 4.87979L4.8798 8.60356", stroke: "#9F9FA8", "stroke-width": "1.20716", "stroke-linecap": "round" })));
+    }
+    componentWillLoad() {
+        this.uniqueId = this.textareaId || `voa-textarea-${Math.random().toString(36).substr(2, 9)}`;
+        this.internalValue = this.value || '';
+        this.characterCount = this.internalValue.length;
+        this.updateFormInternals();
+    }
+    valueChanged(newValue) {
+        this.internalValue = newValue || '';
+        this.characterCount = this.internalValue.length;
+        this.updateFormInternals();
+    }
+    updateFormInternals() {
+        this.internals.setFormValue(this.internalValue);
+        // Aria-invalid is handled on the element in render, but could be done here too if delegating to host
+    }
+    async setFocus() {
+        // Delegates focus handles this mostly, but good for imperative usage
+        this.host.focus();
+    }
+    render() {
+        return (index.h(index.Host, { key: '4863d0e217fc5c37d0275ca3476b7239452d7310', part: "base" }, this.label && (index.h("div", { key: '2294cb8fec9ac4d69a3338433446b4a7af8cba37', part: "label-wrapper", class: "label-wrapper" }, index.h("label", { key: 'f2dd830852ee8a25cfb2df554152d52e531a16aa', part: "label", htmlFor: this.uniqueId, class: "label-text" }, this.label, this.required && index.h("span", { key: '6a07b71db5dc48a8fda14eeb552c50efba749910', part: "required-indicator", class: "required-indicator", "aria-hidden": "true" }, "*")), this.info && (index.h("div", { key: '6554c892f4ad12767ce0e277ce549e122bbc2344', part: "label-info", class: "label-info" }, index.h("span", { key: 'd64319dc7d829755d9dba7f2d7cfff951f4dbc06', part: "label-info-text" }, this.infoText), this.renderInfoIcon())))), index.h("div", { key: '847bdb142109d2d2d194fdd245ee814bd3f04a01', part: "container", ref: el => this.containerRef = el, class: {
+                'textarea-container': true,
+                'is-focused': this.isFocused,
+                'has-error': this.hasError,
+                'is-disabled': this.disabled,
+                'is-readonly': this.readonly
+            } }, index.h("textarea", { key: 'a33fa897e0f5968ff30dbb9e70fe447f9b3cf85d', part: "textarea", id: this.uniqueId, name: this.name, placeholder: this.placeholder, value: this.internalValue, maxlength: this.maxLength, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, cols: this.cols, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : undefined, "aria-describedby": this.hasError && this.errorMessage ? `${this.uniqueId}-error` : undefined }), !this.disabled && !this.readonly && (index.h("div", { key: '76e74755cbfb891e5f0a49cbbdacab279a13af1b', part: "resize-handle", class: "resize-handle", onMouseDown: this.startResize, role: "presentation" // Simplified for now
+        }, this.renderResizeIcon()))), index.h("div", { key: 'b35e24d979f5e81e0c8c18923a42f4ab2e2eb60b', part: "footer", class: "footer" }, this.hasError && this.errorMessage ? (index.h("div", { part: "error-message", class: "error-message", id: `${this.uniqueId}-error`, role: "alert" }, this.errorMessage)) : (index.h("span", null)), index.h("div", { key: 'acb48ce620a7c5c5874c1031ab546dd9743e0368', part: "character-counter", class: "character-counter" }, index.h("span", { key: '62fa045a61394dd4aa768f3df03de8064a947f49' }, this.characterCount), this.maxLength && index.h("span", { key: '9382b64570176e88773c8a7117d5677bcb9ab44c' }, "/ ", this.maxLength)))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+};
+VoaTextArea.style = voaTextAreaCss;
+
+exports.voa_text_area = VoaTextArea;
+//# sourceMappingURL=voa-text-area.entry.cjs.js.map

package/dist/cjs/voa-text-area.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-text-area.entry.cjs.js","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}"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/voa-timepicker.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.js');
+
+const timepickerCss = ".timepicker{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;width:100%}";
+
+const TimePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return index.h("input", { key: '04a5343c2e052aa3937c8de8c3b89c9e63a6100f', class: "timepicker", type: "time", value: this.value });
+    }
+};
+TimePicker.style = timepickerCss;
+
+exports.voa_timepicker = TimePicker;
+//# sourceMappingURL=voa-timepicker.entry.cjs.js.map

package/dist/cjs/voa-timepicker.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-timepicker.entry.cjs.js","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,GAAA,MAAA;;;;IAGrB,MAAM,GAAA;QACJ,OAAOA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;;;;;;;"}

package/dist/cjs/voa-tooltip-arrow.cjs.entry.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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}";
+
+const VoaTooltipArrow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Posição da seta.
+         * Determina em qual direção a seta aponta.
+         */
+        this.position = 'bottom';
+        /**
+         * Tema de cor da seta.
+         * A cor da seta será mapeada via CSS variables baseadas no tema.
+         */
+        this.theme = 'default';
+    }
+    render() {
+        return (index.h(index.Host, { key: '6de18de38842ff8050a0628a18f79ddafd85c418' }, index.h("div", { key: 'dde0556ba9cc84f6685cf6d3a792abe7b2d1cecf', part: "base", class: {
+                'voa-tooltip-arrow': true,
+                [`voa-tooltip-arrow--${this.position}`]: true,
+            } }, index.h("div", { key: 'a4b7f1ebb3ad3d087d62ad8ac8c5dc62a11498f2', part: "triangle", class: "voa-tooltip-arrow__triangle" }))));
+    }
+    get host() { return index.getElement(this); }
+};
+VoaTooltipArrow.style = voaTooltipArrowCss;
+
+exports.voa_tooltip_arrow = VoaTooltipArrow;
+//# sourceMappingURL=voa-tooltip-arrow.entry.cjs.js.map

package/dist/cjs/voa-tooltip-arrow.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tooltip-arrow.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,w9EAAw9E;;MCkBt+E,eAAe,GAAA,MAAA;AAN5B,IAAA,WAAA,CAAA,OAAA,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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,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,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,6BAA6B,EAAO,CAAA,CAC3D,CACD;;;;;;;;"}

package/dist/cjs/voa-tooltip.cjs.entry.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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}";
+
+const VoaTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isVisible = false;
+        /**
+         * Posição da seta do tooltip.
+         * Mapeia as posições do Figma: top, bottom, left, right.
+         */
+        this.position = 'bottom';
+        /**
+         * Tema de cor do tooltip.
+         * Mapeia os temas do Figma: default, spot, pink, grape, violet, indigo, blue, cyan, teal, lime, orange.
+         */
+        this.theme = 'default';
+        /**
+         * Se verdadeiro, exibe o slot de ícone.
+         * Baseado na prop `icon` do design do Figma.
+         */
+        this.icon = true;
+        /**
+         * Texto do tooltip.
+         * Pode ser fornecido via prop ou via slot padrão.
+         */
+        this.text = 'Body text';
+        this.showTooltip = () => {
+            this.isVisible = true;
+        };
+        this.hideTooltip = () => {
+            this.isVisible = false;
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno.
+     */
+    async setFocus() {
+        var _a;
+        const content = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="content"]');
+        if (content) {
+            content.focus();
+        }
+    }
+    componentDidLoad() {
+        var _a;
+        // Get the slot element from shadow DOM
+        const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot) {
+            // Get all slotted elements
+            const slottedElements = slot.assignedElements({ flatten: true });
+            // Attach event listeners to each slotted element
+            slottedElements.forEach((element) => {
+                element.addEventListener('mouseenter', this.showTooltip);
+                element.addEventListener('mouseleave', this.hideTooltip);
+                element.addEventListener('focusin', this.showTooltip);
+                element.addEventListener('focusout', this.hideTooltip);
+            });
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c028eefe619a891b7f6f7ca2bc41f2c66f39a029', role: "tooltip", "aria-label": this.ariaLabel || this.text, onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip, onFocusin: this.showTooltip, onFocusout: this.hideTooltip }, index.h("slot", { key: 'e6224fe757cf53d890a3f0d4fd6261d96650a180' }), index.h("div", { key: '8432ed710e57cc9d4d27c3400e40ee4dda06abc8', part: "base", class: {
+                'voa-tooltip': true,
+                [`voa-tooltip--${this.position}`]: true,
+                [`voa-tooltip--${this.theme}`]: true,
+                'voa-tooltip--visible': this.isVisible,
+            }, "aria-hidden": !this.isVisible ? 'true' : 'false' }, index.h("div", { key: '6f65c439ceb970c2d4ccda7daebfbac1658ce7a7', part: "body", class: "voa-tooltip__body" }, this.icon && (index.h("div", { key: 'd9842fe4e0217baec069d2a2e59e6e1a486ebc65', part: "icon-slot", class: "voa-tooltip__icon-slot" }, index.h("slot", { key: '11a80c7da30db69b0c3bc5ff455cf4e475c58a99', name: "icon" }))), index.h("div", { key: '73ed5b2d20b3b96158533d82eb0d1fcc7a179071', part: "content", class: "voa-tooltip__content" }, this.text)))));
+    }
+    get host() { return index.getElement(this); }
+};
+VoaTooltip.style = voaTooltipCss;
+
+exports.voa_tooltip = VoaTooltip;
+//# sourceMappingURL=voa-tooltip.entry.cjs.js.map

package/dist/cjs/voa-tooltip.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tooltip.entry.cjs.js","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"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/voa-upload.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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}";
+
+const Upload = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: '1f7288c2c2bcdcc11883117be4b6fd855edf51f0', class: "upload" }, index.h("input", { key: 'ff0acfe7b7c8058dce56bdac310ce46442fc3c6f', type: "file", id: "file-upload", class: "file-input" }), index.h("label", { key: '1264495d160986c1dfdcee7f2a1cc9a38c740c64', htmlFor: "file-upload", class: "upload-label" }, "Choose File")));
+    }
+};
+Upload.style = uploadCss;
+
+exports.voa_upload = Upload;
+//# sourceMappingURL=voa-upload.entry.cjs.js.map

package/dist/cjs/voa-upload.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-upload.entry.cjs.js","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,4WAA4W;;MCOjX,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,KAAK,EAAC,YAAY,EAAG,CAAA,EACzDA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAA,EAAA,aAAA,CAEzC,CACJ;;;;;;;"}

package/dist/cjs/voa.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('voa.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["voa-alert.cjs",[[257,"voa-alert",{"variant":[513],"type":[513],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"alertTitle":[1,"alert-title"],"description":[1],"showButtons":[4,"show-buttons"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"setFocus":[64]}]]],["voa-container-multi-select.cjs",[[257,"voa-container-multi-select",{"items":[16],"disabled":[4],"placeholder":[1],"selectedItems":[32]}]]],["voa-input-addon.cjs",[[257,"voa-input-addon",{"variant":[513],"prependContent":[1,"prepend-content"],"countryCode":[1,"country-code"],"buttonLabel":[1,"button-label"],"currency":[1],"currencyName":[1,"currency-name"],"shortcut":[1],"platform":[1],"setFocus":[64]}]]],["voa-pagination.cjs",[[257,"voa-pagination",{"currentPage":[2,"current-page"],"totalPages":[2,"total-pages"],"siblingCount":[2,"sibling-count"],"internalPage":[32]},null,{"currentPage":["handlePageChange"]}]]],["voa-select.cjs",[[257,"voa-select",{"type":[513],"label":[1],"showLabel":[4,"show-label"],"info":[4],"infoMessage":[1,"info-message"],"error":[4],"errorMessage":[1,"error-message"],"placeholder":[1],"value":[1],"options":[16],"disabled":[4],"innerValue":[32],"isFocused":[32],"currentState":[32],"setFocus":[64]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["syncValue"],"disabled":["updateState"],"isFocused":["updateState"]}]]],["voa-accordion.cjs",[[257,"voa-accordion",{"open":[516],"size":[513],"divider":[516],"isExpanded":[32],"setFocus":[64]},null,{"open":["watchOpenHandler"]}]]],["voa-avatar.cjs",[[257,"voa-avatar",{"type":[1],"size":[1],"initials":[1],"src":[1],"alt":[1],"setFocus":[64]}]]],["voa-breadcrumbs.cjs",[[257,"voa-breadcrumbs",{"type":[513]}]]],["voa-breadcrumbs-divider.cjs",[[257,"voa-breadcrumbs-divider",{"icon":[513]}]]],["voa-breadcrumbs-item.cjs",[[257,"voa-breadcrumbs-item",{"href":[1],"target":[1],"active":[516]}]]],["voa-card.cjs",[[257,"voa-card"]]],["voa-checkbox.cjs",[[337,"voa-checkbox",{"state":[513],"disabled":[516],"showLabel":[4,"show-label"],"name":[1],"value":[1],"internalState":[32]},null,{"state":["stateChanged"],"internalState":["internalStateChanged"]}]]],["voa-datepicker.cjs",[[257,"voa-datepicker",{"value":[1],"selectedDate":[32]}]]],["voa-drawer.cjs",[[257,"voa-drawer",{"open":[4],"isOpen":[32]}]]],["voa-dropdown.cjs",[[257,"voa-dropdown",{"options":[16],"isOpen":[32],"selected":[32]}]]],["voa-input.cjs",[[257,"voa-input",{"inputId":[1,"input-id"],"type":[1],"name":[1],"value":[1],"placeholder":[1],"label":[1],"helperText":[1,"helper-text"],"error":[516],"valid":[516],"warning":[516],"disabled":[516],"readonly":[516],"required":[516],"fill":[516],"size":[513],"showInfoIcon":[4,"show-info-icon"],"isFocused":[32],"hasPrefix":[32],"hasSuffix":[32],"hasInfo":[32],"internalValue":[32],"setFocus":[64]},null,{"value":["valueChanged"]}]]],["voa-link.cjs",[[257,"voa-link",{"href":[1],"target":[1]}]]],["voa-list.cjs",[[257,"voa-list",{"items":[16]}]]],["voa-modal.cjs",[[257,"voa-modal",{"open":[4],"isOpen":[32]}]]],["voa-option.cjs",[[337,"voa-option",{"checked":[516],"disabled":[516],"label":[1],"name":[1],"value":[1],"internalChecked":[32]},null,{"checked":["checkedChanged"]}]]],["voa-progress.cjs",[[257,"voa-progress",{"value":[2]}]]],["voa-radio.cjs",[[257,"voa-radio",{"checked":[516],"disabled":[516],"name":[1],"value":[1],"setFocus":[64]}]]],["voa-skeleton.cjs",[[256,"voa-skeleton",{"width":[1],"height":[1],"variant":[1]}]]],["voa-stepper.cjs",[[257,"voa-stepper",{"steps":[16],"currentStep":[2,"current-step"],"activeStep":[32]}]]],["voa-switch.cjs",[[337,"voa-switch",{"checked":[4],"disabled":[4],"showLabel":[4,"show-label"],"name":[1],"value":[1],"internalChecked":[32]},null,{"checked":["checkedChanged"]}]]],["voa-tab.cjs",[[257,"voa-tab",{"direction":[513],"activeIndex":[2,"active-index"],"internalIndex":[32]},[[0,"tabClick","handleTabSelected"]],{"activeIndex":["handleActiveIndexChange"]}]]],["voa-tab-item.cjs",[[257,"voa-tab-item",{"state":[513],"position":[513],"showBadge":[516,"show-badge"],"badgeCount":[2,"badge-count"],"disabled":[516],"itemIndex":[514,"item-index"],"setFocus":[64]}]]],["voa-table.cjs",[[257,"voa-table",{"data":[16],"columns":[16]}]]],["voa-tag.cjs",[[257,"voa-tag",{"label":[513],"variant":[513],"shape":[513],"size":[513],"iconLeft":[516,"icon-left"],"iconRight":[516,"icon-right"]}]]],["voa-text-area.cjs",[[337,"voa-text-area",{"textareaId":[1,"textarea-id"],"name":[1],"label":[1],"info":[4],"infoText":[1,"info-text"],"placeholder":[1],"value":[1],"maxLength":[2,"max-length"],"disabled":[516],"readonly":[516],"required":[4],"rows":[2],"cols":[2],"errorMessage":[1,"error-message"],"hasError":[516,"has-error"],"internalValue":[32],"isFocused":[32],"characterCount":[32],"setFocus":[64]},null,{"value":["valueChanged"]}]]],["voa-timepicker.cjs",[[257,"voa-timepicker",{"value":[1]}]]],["voa-tooltip.cjs",[[257,"voa-tooltip",{"position":[513],"theme":[513],"icon":[516],"text":[1],"ariaLabel":[1,"aria-label"],"isVisible":[32],"setFocus":[64]}]]],["voa-tooltip-arrow.cjs",[[257,"voa-tooltip-arrow",{"position":[513],"theme":[513]}]]],["voa-upload.cjs",[[257,"voa-upload"]]],["voa-badge.cjs",[[257,"voa-badge",{"label":[513],"count":[2],"icon":[513],"variant":[1],"shape":[513],"size":[1],"setFocus":[64]}]]],["voa-button.cjs",[[257,"voa-button",{"variant":[513],"size":[513],"disabled":[516],"loading":[516],"label":[1],"ariaLabel":[1,"aria-label"],"type":[1],"setFocus":[64]}]]],["voa-keybinding.cjs",[[257,"voa-keybinding",{"shortcut":[1],"platform":[1]}]]],["voa-pagination-item.cjs",[[257,"voa-pagination-item",{"type":[513],"active":[516],"disabled":[516]}]]],["voa-select-base.cjs",[[257,"voa-select-base",{"options":[16],"placeholder":[1],"disabled":[516],"error":[516],"value":[1],"innerValue":[32],"isOpen":[32],"activeIndex":[32],"setFocus":[64]},[[8,"click","handleOutsideClick"]],{"value":["syncValue"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+//# sourceMappingURL=voa.cjs.js.map

package/dist/cjs/voa.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa.cjs.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,4PAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}