voa-ds-core 1.0.3

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

@@ -0,0 +1,12 @@
+.progress {
+  width: 100%;
+  background-color: #eee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.bar {
+  height: 20px;
+  background-color: #007bff;
+  transition: width 0.2s;
+}

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

@@ -0,0 +1,46 @@
+import { h } from "@stencil/core";
+export class Progress {
+    constructor() {
+        this.value = 0;
+    }
+    render() {
+        return (h("div", { key: '34f14ecb7f4fa544020adbd4ea3ca55dabd96afc', class: "progress" }, h("div", { key: '4ee9008528a1029c42a4cf3b8b8d98dc6892f4c6', class: "bar", style: { width: `${this.value}%` } })));
+    }
+    static get is() { return "voa-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            }
+        };
+    }
+}
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/components/voa-progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IALrB;QAMU,UAAK,GAAW,CAAC,CAAC;KAS3B;IAPC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU;YACnB,4DAAK,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,GAAQ,CACvD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-progress\",\r\n  styleUrl: \"progress.css\",\r\n  shadow: true,\r\n})\r\nexport class Progress {\r\n  @Prop() value: number = 0;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"progress\">\r\n        <div class=\"bar\" style={{ width: `${this.value}%` }}></div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,16 @@
+import { html } from "lit-html";
+export default {
+    title: "Componentes/Feedback/Progress",
+    component: "voa-progress",
+    argTypes: {
+        value: { control: "number" },
+    },
+};
+const Template = ({ value }) => html `
+  <voa-progress value="${value}"></voa-progress>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    value: 50,
+};
+//# sourceMappingURL=progress.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.stories.js","sourceRoot":"","sources":["../../../src/components/voa-progress/progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACM,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;yBACpB,KAAK;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,EAAE;CACV,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\n\r\nexport default {\r\n  title: \"Componentes/Feedback/Progress\",\r\n  component: \"voa-progress\",\r\n  argTypes: {\r\n    value: { control: \"number\" },\r\n  },\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ value }) => html`\r\n  <voa-progress value=\"${value}\"></voa-progress>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  value: 50,\r\n};\r\n"]}

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

@@ -0,0 +1,82 @@
+/* 
+ * 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.
+ */
+
+:host {
+  display: inline-block;
+}
+
+.voa-radio {
+  /* Structural styles only */
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.voa-radio--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.voa-radio__input {
+  /* Structural styles only - visually hidden but accessible */
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+
+.voa-radio__indicator {
+  /* Structural styles only - Tamanho fixo 20px conforme Figma */
+  position: relative;
+  display: grid;
+  place-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
+.voa-radio__dot {
+  /* Structural styles only - Tamanho fixo 8px conforme Figma */
+  position: absolute;
+  /* Centralizar perfeitamente independente de borders */
+  left: 50%;
+  top: 50%;
+  /* Usar margin negativo para centralizar baseado no tamanho do dot (8px / 2 = 4px) */
+  margin-left: -4px;
+  margin-top: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transform: scale(0);
+  box-sizing: border-box;
+  opacity: 0;
+}
+
+.voa-radio--checked .voa-radio__dot {
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* Acessibilidade */
+:host(:focus-within) {
+  outline: none;
+}
+
+/* Respeitar preferências de movimento reduzido */
+@media (prefers-reduced-motion: reduce) {
+  .voa-radio__indicator,
+  .voa-radio__dot {
+    transition: none;
+  }
+} 

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

@@ -0,0 +1,227 @@
+import { h } from "@stencil/core";
+/**
+ * Componente Radio Button do Voa Design System, baseado no design do Figma.
+ * Permite seleção única dentro de um grupo de opções.
+ * Este é o componente base do radio (apenas o indicador visual).
+ * Para opções com label, use o componente voa-option.
+ *
+ * @part base - The root label element
+ * @part input - The native radio input element
+ * @part indicator - The visual radio indicator circle (20px)
+ * @part dot - The inner dot when checked (8px)
+ */
+export class VoaRadio {
+    constructor() {
+        /**
+         * Se verdadeiro, o radio button estará selecionado.
+         */
+        this.checked = false;
+        /**
+         * Se verdadeiro, o radio button estará desabilitado.
+         */
+        this.disabled = false;
+        this.handleChange = (event) => {
+            const input = event.target;
+            this.checked = input.checked;
+            this.radioChange.emit({
+                checked: this.checked,
+                value: this.value,
+                name: this.name
+            });
+        };
+        this.handleFocus = () => {
+            this.radioFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.radioBlur.emit();
+        };
+    }
+    /**
+     * Método para delegar foco ao elemento interno do radio.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    async setFocus() {
+        var _a;
+        const input = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="radio"]');
+        if (input) {
+            input.focus();
+        }
+    }
+    render() {
+        const containerClasses = {
+            'voa-radio': true,
+            'voa-radio--checked': this.checked,
+            'voa-radio--disabled': this.disabled
+        };
+        return (h("label", { key: '1720c583901aa4dabb6d7238fa66be45e1fa3493', part: "base", class: containerClasses, "aria-disabled": this.disabled ? 'true' : undefined, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("input", { key: 'ddc79a737e4db289b18f971dda13ff0454a49d95', type: "radio", part: "input", class: "voa-radio__input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("span", { key: '6ef749a8899c67e2b97c9aa838d20c8d93afbc94', class: "voa-radio__indicator", part: "indicator" }, h("span", { key: 'cc353745dc55b5f1b376244c83e1eac9eb8de30a', class: "voa-radio__dot", part: "dot" }))));
+    }
+    static get is() { return "voa-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o radio button estar\u00E1 selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o radio button estar\u00E1 desabilitado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do grupo de radio buttons (usado para agrupamento)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor do radio button quando selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "radioChange",
+                "name": "radioChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o estado do radio button muda."
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; value: string; name: string }",
+                    "resolved": "{ checked: boolean; value: string; name: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "radioFocus",
+                "name": "radioFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o radio button recebe foco."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "radioBlur",
+                "name": "radioBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o radio button perde foco."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo para delegar foco ao elemento interno do radio.\r\nRequerido para acessibilidade WCAG 2.2 AA.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-radio.js","sourceRoot":"","sources":["../../../src/components/voa-radio/voa-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzF;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,QAAQ;IANrB;QAQE;;WAEG;QACsB,YAAO,GAAY,KAAK,CAAC;QAElD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QA2B3C,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAE7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;KA+CH;IA7CC;;;OAGG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,qBAAqB,CAAqB,CAAC;QAC7F,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,WAAW,EAAE,IAAI;YACjB,oBAAoB,EAAE,IAAI,CAAC,OAAO;YAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,CAAC;QAEF,OAAO,CACL,8DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,gBAAgB,mBACR,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE7C,8DACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,GACvB;YACF,6DAAM,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,WAAW;gBACjD,6DAAM,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,KAAK,GAAQ,CAC1C,CACD,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, Method, Element, h } from '@stencil/core';\r\n\r\n/**\r\n * Componente Radio Button do Voa Design System, baseado no design do Figma.\r\n * Permite seleção única dentro de um grupo de opções.\r\n * Este é o componente base do radio (apenas o indicador visual).\r\n * Para opções com label, use o componente voa-option.\r\n * \r\n * @part base - The root label element\r\n * @part input - The native radio input element\r\n * @part indicator - The visual radio indicator circle (20px)\r\n * @part dot - The inner dot when checked (8px)\r\n */\r\n@Component({\r\n  tag: 'voa-radio',\r\n  styleUrl: 'voa-radio.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaRadio {\r\n  @Element() host: HTMLVoaRadioElement;\r\n  /**\r\n   * Se verdadeiro, o radio button estará selecionado.\r\n   */\r\n  @Prop({ reflect: true }) checked: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o radio button estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Nome do grupo de radio buttons (usado para agrupamento).\r\n   */\r\n  @Prop() name: string;\r\n\r\n  /**\r\n   * Valor do radio button quando selecionado.\r\n   */\r\n  @Prop() value: string;\r\n\r\n  /**\r\n   * Evento emitido quando o estado do radio button muda.\r\n   */\r\n  @Event() radioChange: EventEmitter<{ checked: boolean; value: string; name: string }>;\r\n\r\n  /**\r\n   * Evento emitido quando o radio button recebe foco.\r\n   */\r\n  @Event() radioFocus: EventEmitter<void>;\r\n\r\n  /**\r\n   * Evento emitido quando o radio button perde foco.\r\n   */\r\n  @Event() radioBlur: EventEmitter<void>;\r\n\r\n  private handleChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.checked = input.checked;\r\n    \r\n    this.radioChange.emit({\r\n      checked: this.checked,\r\n      value: this.value,\r\n      name: this.name\r\n    });\r\n  };\r\n\r\n  private handleFocus = () => {\r\n    this.radioFocus.emit();\r\n  };\r\n\r\n  private handleBlur = () => {\r\n    this.radioBlur.emit();\r\n  };\r\n\r\n  /**\r\n   * Método para delegar foco ao elemento interno do radio.\r\n   * Requerido para acessibilidade WCAG 2.2 AA.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const input = this.host.shadowRoot?.querySelector('input[type=\"radio\"]') as HTMLInputElement;\r\n    if (input) {\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const containerClasses = {\r\n      'voa-radio': true,\r\n      'voa-radio--checked': this.checked,\r\n      'voa-radio--disabled': this.disabled\r\n    };\r\n\r\n    return (\r\n      <label \r\n        part=\"base\"\r\n        class={containerClasses}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        role=\"radio\"\r\n        aria-checked={this.checked ? 'true' : 'false'}\r\n      >\r\n        <input\r\n          type=\"radio\"\r\n          part=\"input\"\r\n          class=\"voa-radio__input\"\r\n          checked={this.checked}\r\n          disabled={this.disabled}\r\n          name={this.name}\r\n          value={this.value}\r\n          onChange={this.handleChange}\r\n          onFocus={this.handleFocus}\r\n          onBlur={this.handleBlur}\r\n        />\r\n        <span class=\"voa-radio__indicator\" part=\"indicator\">\r\n          <span class=\"voa-radio__dot\" part=\"dot\"></span>\r\n        </span>\r\n      </label>\r\n    );\r\n  }\r\n} "]}