voa-ds-core 1.0.4

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

@@ -0,0 +1,92 @@
+import { h, Host } from "@stencil/core";
+export class VoaBreadcrumbsItem {
+    constructor() {
+        /**
+         * Is this the current/active page?
+         */
+        this.active = false;
+    }
+    render() {
+        // Determine the tag type
+        const Tag = this.href && !this.active ? 'a' : 'span';
+        // Accessibility: Current page should rely on aria-current
+        const ariaCurrent = this.active ? 'page' : undefined;
+        return (h(Host, { key: 'f72dd6b4030693ed8e9b4b965ba3ae02dc957b47' }, h("li", { key: '75c354b98c337adb9fdaa7f4a538d45cb4db51fe', class: "breadcrumbs-item-wrapper" }, h(Tag, { key: '4dc895812b0facd3fe860e9038aeb4cde310d582', part: "content", class: "breadcrumbs-content", href: this.href, target: this.target, "aria-current": ariaCurrent }, h("slot", { key: '9f0886dcf1720ec06e5bdbd0c51f636c6c75f93d' })), h("span", { key: '82607218bc31771e6ba480e4259815792a02db3c', part: "separator", class: "breadcrumbs-separator", "aria-hidden": "true" }, h("slot", { key: 'b4e36ccdd8c24daa626366e3ec8b9a1f6c0d6e8e', name: "separator" }, h("svg", { key: '0740e3781c0a16a2f7de592f7bd6750a17af3dc9', width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '14ba6ed15eccf0e93104bd414e0db239c176be16', points: "9 18 15 12 9 6" })))))));
+    }
+    static get is() { return "voa-breadcrumbs-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-breadcrumbs-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-breadcrumbs-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HREF destination. If provided, renders an anchor tag.\r\nIf missing, renders a span (current page or static item)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Target for the link (e.g., _blank)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is this the current/active page?"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-breadcrumbs-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-breadcrumbs-item.js","sourceRoot":"","sources":["../../../src/components/voa-breadcrumbs-item/voa-breadcrumbs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,kBAAkB;IAL/B;QAmBE;;WAEG;QACsB,WAAM,GAAY,KAAK,CAAC;KAyClD;IAvCC,MAAM;QACJ,yBAAyB;QACzB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;QAErD,0DAA0D;QAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAErD,OAAO,CACL,EAAC,IAAI;YACH,2DAAI,KAAK,EAAC,0BAA0B;gBAGlC,EAAC,GAAG,qDACF,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,kBACL,WAAW;oBAEzB,8DAAQ,CACJ;gBAMN,6DAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,uBAAuB,iBAAa,MAAM;oBACpE,6DAAM,IAAI,EAAC,WAAW;wBAEpB,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO;4BAC/I,iEAAU,MAAM,EAAC,gBAAgB,GAAY,CACzC,CACD,CACH,CAEJ,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-breadcrumbs-item',\r\n  styleUrl: 'voa-breadcrumbs-item.css',\r\n  shadow: true,\r\n})\r\nexport class VoaBreadcrumbsItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * HREF destination. If provided, renders an anchor tag.\r\n   * If missing, renders a span (current page or static item).\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /**\r\n   * Target for the link (e.g., _blank)\r\n   */\r\n  @Prop() target?: string;\r\n\r\n  /**\r\n   * Is this the current/active page?\r\n   */\r\n  @Prop({ reflect: true }) active: boolean = false;\r\n\r\n  render() {\r\n    // Determine the tag type\r\n    const Tag = this.href && !this.active ? 'a' : 'span';\r\n    \r\n    // Accessibility: Current page should rely on aria-current\r\n    const ariaCurrent = this.active ? 'page' : undefined;\r\n\r\n    return (\r\n      <Host>\r\n        <li class=\"breadcrumbs-item-wrapper\">\r\n          \r\n          {/* 1. The Content Part */}\r\n          <Tag \r\n            part=\"content\" \r\n            class=\"breadcrumbs-content\"\r\n            href={this.href}\r\n            target={this.target}\r\n            aria-current={ariaCurrent}\r\n          >\r\n            <slot />\r\n          </Tag>\r\n\r\n          {/* 2. The Separator Part \r\n            We render it always, and hide it via CSS for the last item.\r\n            This is much more robust than JS logic.\r\n          */}\r\n          <span part=\"separator\" class=\"breadcrumbs-separator\" aria-hidden=\"true\">\r\n             <slot name=\"separator\">\r\n               {/* Default Icon: Chevron Right */}\r\n               <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                 <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n               </svg>\r\n             </slot>\r\n          </span>\r\n\r\n        </li>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"]}

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

@@ -0,0 +1,95 @@
+/* 
+ * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).
+ * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally
+ * via CSS Parts API (::part() selectors) using design tokens.
+ * 
+ * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.
+ * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.
+ */
+
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+/* Cursor must be on :host because pointer-events:none on button 
+   causes cursor to "pass through" to parent element */
+:host([disabled]),
+:host([loading]) {
+  cursor: not-allowed;
+}
+
+.voa-button {
+  /* APENAS estilos estruturais */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  border: none; /* Remove borda padrão que afeta box-model */
+  background: transparent; /* Garante que não há fundo padrão */
+  padding: 0; /* Reset de padding */
+  margin: 0; /* Reset de margin */
+  
+  /* Interatividade básica */
+  cursor: pointer;
+  user-select: none;
+  
+  /* Layout Flex */
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 0; /* Gap padrão zerado, definido externamente */
+}
+
+.voa-button:disabled,
+.voa-button--loading {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Containers para ícones - estrutura apenas */
+.voa-button__icon-leading,
+.voa-button__icon-trailing {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.voa-button__loader {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* Default size - can be overridden via ::part(loader) */
+  width: var(--voa-loader-size, 16px);
+  height: var(--voa-loader-size, 16px);
+  /* Structural animation - rotation is physics, not art */
+  animation: voa-spin var(--voa-loader-duration, 1s) linear infinite;
+}
+
+/* Keyframes must be inside Shadow DOM scope to be accessible */
+@keyframes voa-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Ensure the default SVG fills the loader span */
+.voa-button__loader svg {
+  height: 100%;
+  width: 100%;
+}
+
+.voa-button__label {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+/* Layout para slots de ícones */
+.voa-button ::slotted([slot="icon-leading"]),
+.voa-button ::slotted([slot="icon-trailing"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,292 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Botão principal do Voa Design System, baseado no design do Figma.
+ *
+ * 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 botão (elemento <button>)
+ * @part label - O wrapper do texto do botão
+ * @part icon-leading - Container do slot para ícone à esquerda
+ * @part icon-trailing - Container do slot para ícone à direita
+ */
+export class VoaButton {
+    constructor() {
+        /**
+         * Variante visual do botão.
+         * Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.
+         */
+        this.variant = 'primary';
+        /**
+         * Tamanho do botão.
+         * Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).
+         */
+        this.size = 'lg';
+        /**
+         * Se verdadeiro, o botão estará desabilitado.
+         */
+        this.disabled = false;
+        /**
+         * Se verdadeiro, o botão exibe um estado de carregamento (spinner)
+         * e desabilita interações.
+         */
+        this.loading = false;
+        /**
+         * Tipo do botão HTML.
+         * Padrão é 'button' para evitar submissão de formulários.
+         */
+        this.type = 'button';
+        /**
+         * Handler para clique no botão.
+         */
+        this.handleClick = (ev) => {
+            if (this.disabled || this.loading) {
+                ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+                ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+                return;
+            }
+            this.dsClick.emit();
+        };
+        /**
+         * Handler para navegação por teclado (WCAG 2.2 AA).
+         * Suporta Enter, Space para ativar, e Escape para cancelar (se aplicável).
+         */
+        this.handleKeyDown = (event) => {
+            if (this.disabled || this.loading) {
+                return;
+            }
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.handleClick();
+                    break;
+                case 'Escape':
+                    // Para botões que abrem modais/dropdowns, Escape fecha
+                    // Para botões simples, não faz nada (comportamento padrão)
+                    break;
+            }
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno nativo.
+     */
+    async setFocus() {
+        var _a;
+        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button[part="base"]');
+        if (button) {
+            button.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '01090febe625a70730bd1c681e57aee036d520cb' }, h("button", { key: 'ac690de44ff3ed5207c7504be3a66b1e5707019c', part: "base", type: this.type, class: {
+                'voa-button': true,
+                [`voa-button--${this.variant}`]: true,
+                [`voa-button--${this.size}`]: true,
+                'voa-button--disabled': this.disabled,
+                'voa-button--loading': this.loading,
+            }, disabled: this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, "aria-label": this.loading
+                ? 'Loading'
+                : (this.ariaLabel || this.label) }, this.loading && (h("span", { key: '546a219f6687636a57002e2349f81c1bcf151bb5', part: "loader", class: "voa-button__loader" }, h("slot", { key: '655af9861281eba7a33ed42690a674a091dc790b', name: "loader" }, h("svg", { key: '055cfe9d98ef8c845a4c35038331d37d436dbdee', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8582e6e36475380a339b7f2d232289b9bc121d0a', d: "M12 2V6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '8b14cb2167c9a89f31f74517fcd9983ae18d22e8', d: "M12 18V22", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '3ae670a047ba1a5e9f60b5e630809b6e97a299d6', d: "M4.93 4.93L7.76 7.76", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '80687001311999306c4e5b62c5a1064d4fae14e1', d: "M16.24 16.24L19.07 19.07", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '10200b00c28bf37c67cf92e6c7c05ba19a3a6ad9', d: "M2 12H6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '880c4d9587ca2cbe29486c26571812b5802f7e23', d: "M18 12H22", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: 'a9884c1241e43d45700151ecd584e8ef5f160c50', d: "M4.93 19.07L7.76 16.24", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: 'b07fd22585962dbe4cdb98aabc48d282b4de4f4e', d: "M16.24 7.76L19.07 4.93", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))), !this.loading && (h("span", { key: '0dd707e080df5390168b7e0cc691bcf7a550eb49', part: "icon-leading", class: "voa-button__icon-leading" }, h("slot", { key: 'c5d178682afaad3ba5d8a557a6a0fe7427fa5bde', name: "icon-leading" }))), h("span", { key: '291dcbbc54088a3ba7202d96dd94d8b79ad4cafb', part: "label", class: "voa-button__label" }, h("slot", { key: 'fbef3b678e1af0436d43b93ad0c32a15da0831ab' }, this.label)), h("span", { key: '3ad028eb5377d05fd90a158c2c1510136d6d2b79', part: "icon-trailing", class: "voa-button__icon-trailing" }, h("slot", { key: '1f818a3e8ceeec8522f7399c1154d5eab2fd1e67', name: "icon-trailing" })))));
+    }
+    static get is() { return "voa-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tonal' | 'ghost' | 'link'",
+                    "resolved": "\"ghost\" | \"link\" | \"primary\" | \"secondary\" | \"tonal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante visual do bot\u00E3o.\r\nMapeia as variantes do Figma: primary, secondary, tonal, ghost, link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho do bot\u00E3o.\r\nMapeia os tamanhos do Figma: sm (small), md (medium), lg (large)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o bot\u00E3o estar\u00E1 desabilitado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o bot\u00E3o exibe um estado de carregamento (spinner)\r\ne desabilita intera\u00E7\u00F5es."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "O texto exibido no bot\u00E3o.\r\nPode ser fornecido via prop ou via slot padr\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "R\u00F3tulo ARIA para acessibilidade.\r\nUsado quando o bot\u00E3o n\u00E3o tem texto vis\u00EDvel (apenas \u00EDcone)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo do bot\u00E3o HTML.\r\nPadr\u00E3o \u00E9 'button' para evitar submiss\u00E3o de formul\u00E1rios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsClick",
+                "name": "dsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido ao clicar no bot\u00E3o.\r\nSegue o padr\u00E3o kebab-case: dsClick."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLButtonElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo para acessibilidade WCAG 2.2 AA.\r\nDelega foco ao elemento interno nativo.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-button.js","sourceRoot":"","sources":["../../../src/components/voa-button/voa-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Botão principal do Voa Design System, baseado no design do Figma.\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do botão (elemento <button>)\r\n * @part label - O wrapper do texto do botão\r\n * @part icon-leading - Container do slot para ícone à esquerda\r\n * @part icon-trailing - Container do slot para ícone à direita\r\n */\r\n@Component({\r\n  tag: 'voa-button',\r\n  styleUrl: 'voa-button.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaButton {\r\n  @Element() host: HTMLVoaButtonElement;\r\n\r\n  /**\r\n   * Variante visual do botão.\r\n   * Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.\r\n   */\r\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tonal' | 'ghost' | 'link' = 'primary';\r\n\r\n  /**\r\n   * Tamanho do botão.\r\n   * Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).\r\n   */\r\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'lg';\r\n\r\n  /**\r\n   * Se verdadeiro, o botão estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o botão exibe um estado de carregamento (spinner)\r\n   * e desabilita interações.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * O texto exibido no botão.\r\n   * Pode ser fornecido via prop ou via slot padrão.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * Rótulo ARIA para acessibilidade.\r\n   * Usado quando o botão não tem texto visível (apenas ícone).\r\n   */\r\n  @Prop() ariaLabel: string;\r\n\r\n  /**\r\n   * Tipo do botão HTML.\r\n   * Padrão é 'button' para evitar submissão de formulários.\r\n   */\r\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n\r\n  /**\r\n   * Evento emitido ao clicar no botão.\r\n   * Segue o padrão kebab-case: dsClick.\r\n   */\r\n  @Event() dsClick: EventEmitter<void>;\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA.\r\n   * Delega foco ao elemento interno nativo.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const button = this.host.shadowRoot?.querySelector('button[part=\"base\"]') as HTMLButtonElement;\r\n    if (button) {\r\n      button.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no botão.\r\n   */\r\n  private handleClick = (ev?: MouseEvent) => {\r\n    if (this.disabled || this.loading) {\r\n      ev?.preventDefault();\r\n      ev?.stopPropagation();\r\n      return;\r\n    }\r\n    this.dsClick.emit();\r\n  };\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   * Suporta Enter, Space para ativar, e Escape para cancelar (se aplicável).\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled || this.loading) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        event.preventDefault();\r\n        this.handleClick();\r\n        break;\r\n      case 'Escape':\r\n        // Para botões que abrem modais/dropdowns, Escape fecha\r\n        // Para botões simples, não faz nada (comportamento padrão)\r\n        break;\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          part=\"base\"\r\n          type={this.type}\r\n          class={{\r\n            'voa-button': true,\r\n            [`voa-button--${this.variant}`]: true,\r\n            [`voa-button--${this.size}`]: true,\r\n            'voa-button--disabled': this.disabled,\r\n            'voa-button--loading': this.loading,\r\n          }}\r\n          disabled={this.disabled || this.loading}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          aria-disabled={this.disabled || this.loading ? 'true' : undefined}\r\n          aria-busy={this.loading ? 'true' : undefined}\r\n          aria-label={\r\n            this.loading \r\n              ? 'Loading' \r\n              : (this.ariaLabel || this.label)\r\n          }\r\n        >\r\n          {this.loading && (\r\n            <span part=\"loader\" class=\"voa-button__loader\">\r\n              <slot name=\"loader\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                   <path d=\"M12 2V6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M12 18V22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M4.93 4.93L7.76 7.76\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M16.24 16.24L19.07 19.07\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M2 12H6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M18 12H22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M4.93 19.07L7.76 16.24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M16.24 7.76L19.07 4.93\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                </svg>\r\n              </slot>\r\n            </span>\r\n          )}\r\n          \r\n          {!this.loading && (\r\n            <span part=\"icon-leading\" class=\"voa-button__icon-leading\">\r\n              <slot name=\"icon-leading\"></slot>\r\n            </span>\r\n          )}\r\n          <span part=\"label\" class=\"voa-button__label\">\r\n            <slot>{this.label}</slot>\r\n          </span>\r\n          <span part=\"icon-trailing\" class=\"voa-button__icon-trailing\">\r\n            <slot name=\"icon-trailing\"></slot>\r\n          </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n} "]}