voa-ds-core 1.0.3

package/dist/collection/components/voa-tab-item/voa-tab-item.js

@@ -0,0 +1,261 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Item individual de tab do Voa Design System.
+ * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545
+ * * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ * * @part base - O elemento raiz do item de tab
+ * @part label - Container do texto do item
+ * @part badge - Container do badge (quando showBadge=true)
+ */
+export class VoaTabItem {
+    constructor() {
+        /**
+         * Estado do item de tab.
+         * Mapeia os estados do Figma: Active, Default, Disabled.
+         */
+        this.state = 'default';
+        /**
+         * Posição do indicador de ativo (borda).
+         * Mapeia as posições do Figma: Default (bottom), Top, Right, Left.
+         */
+        this.position = 'default';
+        /**
+         * Se verdadeiro, exibe um badge no item.
+         */
+        this.showBadge = false;
+        /**
+         * Se verdadeiro, o item estará desabilitado.
+         * Alias para state="disabled".
+         */
+        this.disabled = false;
+        /**
+         * Handler interno de clique.
+         */
+        this.handleClick = () => {
+            if (!this.disabled && this.state !== 'disabled') {
+                this.tabClick.emit();
+            }
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno.
+     */
+    async setFocus() {
+        var _a;
+        const base = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="base"]');
+        if (base) {
+            base.focus();
+        }
+    }
+    /**
+     * Determina o estado efetivo do componente.
+     * Se disabled=true, força state="disabled".
+     */
+    getEffectiveState() {
+        if (this.disabled) {
+            return 'disabled';
+        }
+        return this.state;
+    }
+    /**
+     * Determina o valor do badge a ser exibido.
+     */
+    getBadgeValue() {
+        if (this.badgeCount !== undefined) {
+            return String(this.badgeCount);
+        }
+        return '0';
+    }
+    render() {
+        const effectiveState = this.getEffectiveState();
+        const isActive = effectiveState === 'active';
+        const isDisabled = effectiveState === 'disabled';
+        return (h(Host, { key: '15c5808af110e8b547664412017ffc94bb95f4e2', role: "tab", "aria-selected": isActive ? 'true' : 'false', "aria-disabled": isDisabled ? 'true' : undefined, tabindex: isDisabled ? -1 : (isActive ? 0 : -1), onClick: this.handleClick }, h("div", { key: '4cb9bd8d7f6804213ca2b92ac3587a7028429fe2', part: "base", class: {
+                'voa-tab-item': true,
+                [`voa-tab-item--${effectiveState}`]: true,
+                [`voa-tab-item--${this.position}`]: true,
+                'voa-tab-item--disabled': isDisabled,
+            } }, h("span", { key: 'bf1ae3f34dd2c77eece50aeed14d8cbf4a4a34ec', part: "label", class: "voa-tab-item__label" }, h("slot", { key: 'f54a35be6b6d08125882b3f61816f75dc0acc8a6' })), this.showBadge && (h("div", { key: 'e04ad4b69771b3732f2159d4b8ac096d9cfb1dcc', part: "badge", class: "voa-tab-item__badge" }, h("span", { key: '02b00f32bc0e425d9c38096e53ce770ee320cefa', class: "voa-tab-item__badge-text" }, this.getBadgeValue()))))));
+    }
+    static get is() { return "voa-tab-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-tab-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-tab-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'active' | 'default' | 'disabled'",
+                    "resolved": "\"active\" | \"default\" | \"disabled\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado do item de tab.\r\nMapeia os estados do Figma: Active, Default, Disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'top' | 'right' | 'left'",
+                    "resolved": "\"default\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posi\u00E7\u00E3o do indicador de ativo (borda).\r\nMapeia as posi\u00E7\u00F5es do Figma: Default (bottom), Top, Right, Left."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'default'"
+            },
+            "showBadge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, exibe um badge no item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-badge",
+                "defaultValue": "false"
+            },
+            "badgeCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero a ser exibido no badge (opcional).\r\nSe n\u00E3o fornecido e showBadge=true, exibe \"0\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-count"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o item estar\u00E1 desabilitado.\r\nAlias para state=\"disabled\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "itemIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00CDndice do item (gerenciado pelo componente pai voa-tab).\r\nUsado internamente para identifica\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "item-index"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabClick",
+                "name": "tabClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o tab \u00E9 clicado.\r\nO pai (voa-tab) escuta isso para gerenciar a sele\u00E7\u00E3o."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo para acessibilidade WCAG 2.2 AA.\r\nDelega foco ao elemento interno.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-tab-item.js.map

package/dist/collection/components/voa-tab-item/voa-tab-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tab-item.js","sourceRoot":"","sources":["../../../src/components/voa-tab-item/voa-tab-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Method, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * Item individual de tab do Voa Design System.\r\n * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545\r\n * * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * * @part base - O elemento raiz do item de tab\r\n * @part label - Container do texto do item\r\n * @part badge - Container do badge (quando showBadge=true)\r\n */\r\n@Component({\r\n  tag: 'voa-tab-item',\r\n  styleUrl: 'voa-tab-item.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTabItem {\r\n  @Element() host: HTMLVoaTabItemElement;\r\n\r\n  /**\r\n   * Estado do item de tab.\r\n   * Mapeia os estados do Figma: Active, Default, Disabled.\r\n   */\r\n  @Prop({ reflect: true }) state: 'active' | 'default' | 'disabled' = 'default';\r\n\r\n  /**\r\n   * Posição do indicador de ativo (borda).\r\n   * Mapeia as posições do Figma: Default (bottom), Top, Right, Left.\r\n   */\r\n  @Prop({ reflect: true }) position: 'default' | 'top' | 'right' | 'left' = 'default';\r\n\r\n  /**\r\n   * Se verdadeiro, exibe um badge no item.\r\n   */\r\n  @Prop({ reflect: true }) showBadge: boolean = false;\r\n\r\n  /**\r\n   * Número a ser exibido no badge (opcional).\r\n   * Se não fornecido e showBadge=true, exibe \"0\".\r\n   */\r\n  @Prop() badgeCount?: number;\r\n\r\n  /**\r\n   * Se verdadeiro, o item estará desabilitado.\r\n   * Alias para state=\"disabled\".\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Índice do item (gerenciado pelo componente pai voa-tab).\r\n   * Usado internamente para identificação.\r\n   */\r\n  @Prop({ reflect: true, attribute: 'item-index' }) itemIndex?: number;\r\n\r\n  /**\r\n   * Evento emitido quando o tab é clicado.\r\n   * O pai (voa-tab) escuta isso para gerenciar a seleção.\r\n   */\r\n  @Event() tabClick: EventEmitter<void>;\r\n\r\n  /**\r\n   * Handler interno de clique.\r\n   */\r\n  private handleClick = () => {\r\n    if (!this.disabled && this.state !== 'disabled') {\r\n      this.tabClick.emit();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA.\r\n   * Delega foco ao elemento interno.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const base = this.host.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement;\r\n    if (base) {\r\n      base.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Determina o estado efetivo do componente.\r\n   * Se disabled=true, força state=\"disabled\".\r\n   */\r\n  private getEffectiveState(): 'active' | 'default' | 'disabled' {\r\n    if (this.disabled) {\r\n      return 'disabled';\r\n    }\r\n    return this.state;\r\n  }\r\n\r\n  /**\r\n   * Determina o valor do badge a ser exibido.\r\n   */\r\n  private getBadgeValue(): string {\r\n    if (this.badgeCount !== undefined) {\r\n      return String(this.badgeCount);\r\n    }\r\n    return '0';\r\n  }\r\n\r\n  render() {\r\n    const effectiveState = this.getEffectiveState();\r\n    const isActive = effectiveState === 'active';\r\n    const isDisabled = effectiveState === 'disabled';\r\n\r\n    return (\r\n      <Host\r\n        role=\"tab\"\r\n        aria-selected={isActive ? 'true' : 'false'}\r\n        aria-disabled={isDisabled ? 'true' : undefined}\r\n        tabindex={isDisabled ? -1 : (isActive ? 0 : -1)}\r\n        onClick={this.handleClick}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-tab-item': true,\r\n            [`voa-tab-item--${effectiveState}`]: true,\r\n            [`voa-tab-item--${this.position}`]: true,\r\n            'voa-tab-item--disabled': isDisabled,\r\n          }}\r\n        >\r\n          <span part=\"label\" class=\"voa-tab-item__label\">\r\n            <slot></slot>\r\n          </span>\r\n          {this.showBadge && (\r\n            <div part=\"badge\" class=\"voa-tab-item__badge\">\r\n              <span class=\"voa-tab-item__badge-text\">{this.getBadgeValue()}</span>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"]}

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

@@ -0,0 +1,15 @@
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 10px;
+  border: 1px solid #ddd;
+  text-align: left;
+}
+
+th {
+  background-color: #f4f4f4;
+}

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

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+export class Table {
+    constructor() {
+        this.data = [];
+        this.columns = [];
+    }
+    render() {
+        return (h("table", { key: '117e9b340eb21a4641a6e2fd5d7a3d93495d97c8', class: "table" }, h("thead", { key: '0ecd63c8eca1906f3091deb4b4cc8317745de98b' }, h("tr", { key: '86416e1bb3f8e3290a79c1f4e6a0e6ef61f98527' }, this.columns.map((column) => (h("th", null, column))))), h("tbody", { key: '0d9a3312dc03d6788c935c9467fff10d6b835bfd' }, this.data.map((row) => (h("tr", null, this.columns.map((column) => (h("td", null, row[column])))))))));
+    }
+    static get is() { return "voa-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/voa-table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,KAAK;IALlB;QAMU,SAAI,GAAU,EAAE,CAAC;QACjB,YAAO,GAAa,EAAE,CAAC;KAwBhC;IAtBC,MAAM;QACJ,OAAO,CACL,8DAAO,KAAK,EAAC,OAAO;YAClB;gBACE,6DACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,cAAK,MAAM,CAAM,CAClB,CAAC,CACC,CACC;YACR,gEACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACtB,cACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,cAAK,GAAG,CAAC,MAAM,CAAC,CAAM,CACvB,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/voa-table/table.stories.js

@@ -0,0 +1,21 @@
+import { html } from "lit-html";
+export default {
+    title: "Componentes/Dados/Table",
+    component: "voa-table",
+    argTypes: {
+        data: { control: "object" },
+        columns: { control: "object" },
+    },
+};
+const Template = ({ data, columns }) => html `
+  <voa-table .data="${data}" .columns="${columns}"></voa-table>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    data: [
+        { name: "John Doe", age: 30 },
+        { name: "Jane Smith", age: 25 },
+    ],
+    columns: ["name", "age"],
+};
+//# sourceMappingURL=table.stories.js.map

package/dist/collection/components/voa-table/table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/voa-table/table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC/B;CACM,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;sBAC/B,IAAI,eAAe,OAAO;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE;QACJ,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE;QAC7B,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE,EAAE,EAAE;KAChC;IACD,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;CACzB,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\n\r\nexport default {\r\n  title: \"Componentes/Dados/Table\",\r\n  component: \"voa-table\",\r\n  argTypes: {\r\n    data: { control: \"object\" },\r\n    columns: { control: \"object\" },\r\n  },\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ data, columns }) => html`\r\n  <voa-table .data=\"${data}\" .columns=\"${columns}\"></voa-table>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  data: [\r\n    { name: \"John Doe\", age: 30 },\r\n    { name: \"Jane Smith\", age: 25 },\r\n  ],\r\n  columns: [\"name\", \"age\"],\r\n};\r\n"]}

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

@@ -0,0 +1,31 @@
+/* UNSTYLED PATTERN: Structural CSS only */
+
+: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; /* Prevents icon height weirdness */
+}

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

@@ -0,0 +1,183 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Tag component para exibir labels categorizadores, status ou metadados.
+ * Baseado no design do Figma (node-id: 1436-769).
+ *
+ * O componente segue o padrão "headless/unstyled" - apenas estrutura e lógica.
+ * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O container principal do tag
+ * @part label - O wrapper do texto
+ * @part icon-start - Container do ícone à esquerda (slot para variante icons)
+ * @part icon-end - Container do ícone à direita (slot para variante icons)
+ */
+export class VoaTag {
+    constructor() {
+        /**
+         * 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 (h(Host, { key: 'eeddc95792bcd34a3ca5a43f9fd16720a961e00d' }, 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 && (h("span", { key: 'f3eae8eeee463f2dee0445244118e8b575fba004', part: "icon-start", class: "tag-icon-start" }, h("slot", { key: '1fffcd8b8cb4c1f2d111822008e8740f8d78d07c', name: "icon-start" }))), h("span", { key: '5ad2e56b56b922c51a6c404344892cde903c21b7', part: "label", class: "tag-label" }, this.label, h("slot", { key: '069595167c2ba1b42f1a591a772721eeb43e4fa6' })), isIcons && this.iconRight && (h("span", { key: 'adad7eb1e4f8af195c66eb79647f75cf56ebd816', part: "icon-end", class: "tag-icon-end" }, h("slot", { key: '82d3246264e768883ffbb1deea54220e018ffb2e', name: "icon-end" }))))));
+    }
+    static get is() { return "voa-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "O texto a ser exibido no tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'plain' | 'icons'",
+                    "resolved": "\"icons\" | \"plain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A variante do tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'plain'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pill'",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forma do tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md'",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho do tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "iconLeft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe o \u00EDcone \u00E0 esquerda (apenas se variant=\"icons\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-left",
+                "defaultValue": "false"
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe o \u00EDcone \u00E0 direita (apenas se variant=\"icons\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-right",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tag.js","sourceRoot":"","sources":["../../../src/components/voa-tag/voa-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,MAAM;IALnB;QAaE;;WAEG;QACsB,YAAO,GAAsB,OAAO,CAAC;QAE9D;;WAEG;QACsB,UAAK,GAAuB,SAAS,CAAC;QAE/D;;WAEG;QACsB,SAAI,GAAgB,IAAI,CAAC;QAElD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;WAEG;QACsB,cAAS,GAAY,KAAK,CAAC;KAoCrD;IAlCC,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;QAEzC,OAAO,CACL,EAAC,IAAI;YACH,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;oBAC7B,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;oBAC3B,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;iBAC3B;gBAEA,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,CAC3B,6DAAM,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB;oBAC5C,6DAAM,IAAI,EAAC,YAAY,GAAG,CACrB,CACR;gBAED,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW;oBACjC,IAAI,CAAC,KAAK;oBACX,8DAAQ,CACH;gBAEN,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,CAC5B,6DAAM,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,cAAc;oBACxC,6DAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACR,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}