voa-ds-core 1.0.4

package/dist/custom-elements/voa-select.js

@@ -0,0 +1,189 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-DKnM_Ozb.js';
+
+const voaSelectCss = ":host{display:block;width:100%;position:relative;box-sizing:border-box}.voa-select{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;overflow:visible}.voa-select__header{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box}.voa-select__label{flex:1 0 0;box-sizing:border-box}.voa-select__info{display:flex;align-items:center;gap:4px;box-sizing:border-box}.voa-select__info-message{box-sizing:border-box;white-space:nowrap}.voa-select__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.voa-select__input{display:flex;position:relative;width:100%;box-sizing:border-box;overflow:visible}.voa-select__input-wrapper{display:flex;align-items:center;gap:8px;width:100%;height:100%;box-sizing:border-box;position:relative}.voa-select__content{flex:1 0 0;min-width:0;height:100%;box-sizing:border-box;position:relative;overflow:visible}.voa-select__error{display:block;width:100%;box-sizing:border-box}.voa-select__input--disabled{pointer-events:none;cursor:not-allowed}";
+
+const VoaSelect$1 = /*@__PURE__*/ proxyCustomElement(class VoaSelect extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.voaSelectChange = createEvent(this, "voaSelectChange");
+        /**
+         * Tipo de seleção: 'simple' para seleção única
+         * NOTA: 'multi' está temporariamente desabilitado até implementação correta
+         */
+        this.type = 'simple';
+        /**
+         * Se verdadeiro, o label será exibido
+         */
+        this.showLabel = true;
+        /**
+         * Se verdadeiro, a informação adicional será exibida
+         */
+        this.info = false;
+        /**
+         * Se verdadeiro, o select terá estado de erro
+         */
+        this.error = false;
+        /**
+         * Texto de placeholder
+         */
+        this.placeholder = 'Placeholder';
+        /**
+         * Lista de opções para seleção
+         */
+        this.options = [];
+        /**
+         * Se verdadeiro, o select estará desabilitado
+         */
+        this.disabled = false;
+        /**
+         * Estado interno para controlar o foco
+         */
+        this.isFocused = false;
+        /**
+         * Estado interno calculado (default, selected, focused, filled, disabled)
+         */
+        this.currentState = 'default';
+        /**
+         * Manipula mudança de valor no select-base
+         */
+        this.handleChange = (event) => {
+            this.innerValue = event.detail;
+            this.voaSelectChange.emit(event.detail);
+        };
+    }
+    componentWillLoad() {
+        this.innerValue = this.value;
+        this.updateState();
+    }
+    syncValue(val) {
+        this.innerValue = val;
+        this.updateState();
+    }
+    /**
+     * Atualiza o estado interno baseado nas props
+     */
+    updateState() {
+        if (this.disabled) {
+            this.currentState = 'disabled';
+        }
+        else if (this.isFocused) {
+            this.currentState = 'focused';
+        }
+        else if (this.hasValue()) {
+            // Se há valor selecionado, é "filled" ou "selected"
+            this.currentState = 'filled';
+            if (this.hasSelectedValue()) {
+                this.currentState = 'selected';
+            }
+        }
+        else {
+            this.currentState = 'default';
+        }
+    }
+    /**
+     * Verifica se há valor selecionado
+     */
+    hasValue() {
+        return !!this.innerValue && this.innerValue !== '';
+    }
+    /**
+     * Verifica se há valor selecionado (para estado selected)
+     */
+    hasSelectedValue() {
+        return this.hasValue();
+    }
+    /**
+     * Listen to focus event on the internal button
+     */
+    handleFocus() {
+        this.isFocused = true;
+        this.updateState();
+    }
+    /**
+     * Listen to blur event on the internal button
+     */
+    handleBlur() {
+        this.isFocused = false;
+        this.updateState();
+    }
+    /**
+     * Método para delegar foco ao elemento interno do select.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    async setFocus() {
+        var _a;
+        const selectBase = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('voa-select-base');
+        if (selectBase && typeof selectBase.setFocus === 'function') {
+            await selectBase.setFocus();
+        }
+    }
+    render() {
+        // Verificar se há slot de ícone (apenas para renderização condicional)
+        const iconSlot = this.host.querySelector('[slot="icon"]') || this.host.querySelector('[slot="prefix"]');
+        return (h(Host, { key: 'c6b2e0886e9116e0194a52dea22fd36dc8e973a9', role: "group", "aria-disabled": this.disabled ? 'true' : undefined, "data-state": this.currentState }, h("div", { key: '6ce5e54fea992399bec2ec5827d3b28803fc26c1', part: "base", class: "voa-select" }, this.showLabel && (h("div", { key: 'f236c0419c555b3e3931ecd2aa8efcc46a883777', part: "header", class: "voa-select__header" }, this.label && (h("label", { key: 'b9f963448f922bd18ab152c29aea8f98e723a8b2', part: "label", class: "voa-select__label" }, this.label)), this.info && (h("div", { key: 'fab440ec4d2edc8f710dc6b0bbb28f54f244cdd0', part: "info", class: "voa-select__info" }, this.infoMessage && (h("span", { key: '78afb157e2fef08b26c7dd544e498f6982c4a20c', class: "voa-select__info-message" }, this.infoMessage)), h("slot", { key: '609d452bb0f9f8c79833744bfce72801ca7cb353', name: "info-icon" }, h("svg", { key: '15264e9fc111165da6cb06cb0873bc1605deb4b4', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8fb3c6a63d7c0c82b8ef76ebf179ef14ce0c2398', d: "M8 12V8M8 4H8.01", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))), h("div", { key: 'f888d96ab1db44636c100a924da725f26da8ec2d', part: "input", class: {
+                'voa-select__input': true,
+                [`voa-select__input--${this.currentState}`]: true,
+                'voa-select__input--error': this.error,
+                'voa-select__input--disabled': this.disabled
+            } }, h("div", { key: 'aeb54d401288d8c413fb5bf8d28856e4d1d12239', part: "input-wrapper", class: "voa-select__input-wrapper" }, iconSlot && (h("div", { key: '10470d8b5478233e11433763441a0de2183420b3', part: "icon", class: "voa-select__icon" }, h("slot", { key: '5fe39af041f7bcc27fba60034c7b3254ca22a97b', name: "icon" }), h("slot", { key: '5344b7e33db324f2783453a07f6d57441c9c4944', name: "prefix" }))), h("div", { key: 'f7110b718fc52fa5ea697d9cac534ada1b44b7b9', part: "select-content", class: "voa-select__content" }, h("voa-select-base", { key: 'd80516375edaf1c7620a0a693610f1e7a5d7ca54', options: this.options, value: this.innerValue, placeholder: this.placeholder, disabled: this.disabled, error: this.error, "on-voa-change": this.handleChange })))), this.error && this.errorMessage && (h("div", { key: 'cd40fbd67848f85776fd85b59f0013fc9b5e32e8', part: "error-message", class: "voa-select__error" }, this.errorMessage)))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "value": ["syncValue"],
+        "disabled": ["updateState"],
+        "isFocused": ["updateState"]
+    }; }
+    static get style() { return voaSelectCss; }
+}, [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"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-select", "voa-select-base"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaSelect$1);
+            }
+            break;
+        case "voa-select-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaSelect = VoaSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaSelect, defineCustomElement };
+//# sourceMappingURL=voa-select.js.map
+
+//# sourceMappingURL=voa-select.js.map

package/dist/custom-elements/voa-select.js.map

@@ -0,0 +1 @@
+{"file":"voa-select.js","mappings":"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","names":["VoaSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-select/voa-select.css?tag=voa-select&encapsulation=shadow","src/components/voa-select/voa-select.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: block;\r\n  width: 100%;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-select {\r\n  /* Structural styles only */\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  /* Garantir que dropdowns filhos possam aparecer acima */\r\n  overflow: visible;\r\n}\r\n\r\n/* Header */\r\n.voa-select__header {\r\n  /* Structural styles only */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-select__label {\r\n  /* Structural styles only */\r\n  flex: 1 0 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-select__info {\r\n  /* Structural styles only */\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-select__info-message {\r\n  /* Structural styles only */\r\n  box-sizing: border-box;\r\n  white-space: nowrap;\r\n}\r\n\r\n.voa-select__icon {\r\n  /* Structural styles only */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Input Container */\r\n.voa-select__input {\r\n  /* Structural styles only */\r\n  display: flex;\r\n  position: relative;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  /* Garantir que o dropdown possa ser posicionado relativamente a este container */\r\n  overflow: visible;\r\n}\r\n\r\n.voa-select__input-wrapper {\r\n  /* Structural styles only */\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  width: 100%;\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n  position: relative;\r\n}\r\n\r\n.voa-select__content {\r\n  /* Structural styles only */\r\n  flex: 1 0 0;\r\n  min-width: 0;\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n  /* Garantir que o dropdown dentro do voa-select-base possa ser posicionado */\r\n  position: relative;\r\n  overflow: visible;\r\n}\r\n\r\n/* Error Message */\r\n.voa-select__error {\r\n  /* Structural styles only */\r\n  display: block;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Estados estruturais */\r\n.voa-select__input--disabled {\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Method, Watch, Listen } from '@stencil/core';\r\n\r\n/**\r\n * Componente Select principal do Voa Design System, baseado no design do Figma.\r\n * \r\n * Este componente orquestra os subcomponentes voa-select-base e voa-container-multi-select,\r\n * adicionando funcionalidades de label, info, ícone e mensagem de erro.\r\n * \r\n * @part base - O elemento raiz do componente\r\n * @part header - Container do header (label + info)\r\n * @part label - Texto do label\r\n * @part info - Container de informação\r\n * @part input-wrapper - Wrapper do input field\r\n * @part input - Container do input (com borda)\r\n * @part error-message - Mensagem de erro\r\n */\r\n@Component({\r\n  tag: 'voa-select',\r\n  styleUrl: 'voa-select.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaSelect {\r\n  @Element() host: HTMLVoaSelectElement;\r\n\r\n  /**\r\n   * Tipo de seleção: 'simple' para seleção única\r\n   * NOTA: 'multi' está temporariamente desabilitado até implementação correta\r\n   */\r\n  @Prop({ reflect: true }) type: 'simple' = 'simple';\r\n\r\n  /**\r\n   * Texto do label exibido acima do input\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * Se verdadeiro, o label será exibido\r\n   */\r\n  @Prop() showLabel: boolean = true;\r\n\r\n  /**\r\n   * Se verdadeiro, a informação adicional será exibida\r\n   */\r\n  @Prop() info: boolean = false;\r\n\r\n  /**\r\n   * Mensagem de informação adicional\r\n   */\r\n  @Prop() infoMessage?: string;\r\n\r\n  /**\r\n   * Se verdadeiro, o select terá estado de erro\r\n   */\r\n  @Prop() error: boolean = false;\r\n\r\n  /**\r\n   * Mensagem de erro exibida abaixo do input\r\n   */\r\n  @Prop() errorMessage?: string;\r\n\r\n  /**\r\n   * Texto de placeholder\r\n   */\r\n  @Prop() placeholder: string = 'Placeholder';\r\n\r\n  /**\r\n   * THE TRUTH. Read-only from parent.\r\n   */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * Internal Reality.\r\n   */\r\n  @State() innerValue?: string;\r\n\r\n  /**\r\n   * Lista de opções para seleção\r\n   */\r\n  @Prop() options: Array<{value: string, label: string, disabled?: boolean}> = [];\r\n\r\n  /**\r\n   * Se verdadeiro, o select estará desabilitado\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Estado interno para controlar o foco\r\n   */\r\n  @State() isFocused: boolean = false;\r\n\r\n  /**\r\n   * Estado interno calculado (default, selected, focused, filled, disabled)\r\n   */\r\n  @State() private currentState: 'default' | 'selected' | 'focused' | 'filled' | 'disabled' = 'default';\r\n\r\n  /**\r\n   * Evento emitido quando o valor é alterado\r\n   */\r\n  @Event() voaSelectChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    this.innerValue = this.value;\r\n    this.updateState();\r\n  }\r\n\r\n  @Watch('value')\r\n  syncValue(val: string) {\r\n    this.innerValue = val;\r\n    this.updateState();\r\n  }\r\n\r\n  /**\r\n   * Atualiza o estado interno baseado nas props\r\n   */\r\n  @Watch('disabled')\r\n  @Watch('isFocused')\r\n  updateState() {\r\n    if (this.disabled) {\r\n      this.currentState = 'disabled';\r\n    } else if (this.isFocused) {\r\n      this.currentState = 'focused';\r\n    } else if (this.hasValue()) {\r\n      // Se há valor selecionado, é \"filled\" ou \"selected\"\r\n      this.currentState = 'filled';\r\n      if (this.hasSelectedValue()) {\r\n        this.currentState = 'selected';\r\n      }\r\n    } else {\r\n      this.currentState = 'default';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Verifica se há valor selecionado\r\n   */\r\n  private hasValue(): boolean {\r\n    return !!this.innerValue && this.innerValue !== '';\r\n  }\r\n\r\n  /**\r\n   * Verifica se há valor selecionado (para estado selected)\r\n   */\r\n  private hasSelectedValue(): boolean {\r\n    return this.hasValue();\r\n  }\r\n\r\n  /**\r\n   * Manipula mudança de valor no select-base\r\n   */\r\n  private handleChange = (event: CustomEvent<string>) => {\r\n    this.innerValue = event.detail;\r\n    this.voaSelectChange.emit(event.detail);\r\n  };\r\n\r\n  /**\r\n   * Listen to focus event on the internal button\r\n   */\r\n  @Listen('focus', { capture: true })\r\n  handleFocus() {\r\n    this.isFocused = true;\r\n    this.updateState();\r\n  }\r\n\r\n  /**\r\n   * Listen to blur event on the internal button\r\n   */\r\n  @Listen('blur', { capture: true })\r\n  handleBlur() {\r\n    this.isFocused = false;\r\n    this.updateState();\r\n  }\r\n\r\n  /**\r\n   * Método para delegar foco ao elemento interno do select.\r\n   * Requerido para acessibilidade WCAG 2.2 AA.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const selectBase = this.host.shadowRoot?.querySelector('voa-select-base') as any;\r\n    if (selectBase && typeof selectBase.setFocus === 'function') {\r\n      await selectBase.setFocus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    // Verificar se há slot de ícone (apenas para renderização condicional)\r\n    const iconSlot = this.host.querySelector('[slot=\"icon\"]') || this.host.querySelector('[slot=\"prefix\"]');\r\n\r\n    return (\r\n      <Host\r\n        role=\"group\"\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        data-state={this.currentState}\r\n      >\r\n        <div part=\"base\" class=\"voa-select\">\r\n          {/* Header */}\r\n          {this.showLabel && (\r\n            <div part=\"header\" class=\"voa-select__header\">\r\n              {this.label && (\r\n                <label part=\"label\" class=\"voa-select__label\">\r\n                  {this.label}\r\n                </label>\r\n              )}\r\n              {this.info && (\r\n                <div part=\"info\" class=\"voa-select__info\">\r\n                  {this.infoMessage && (\r\n                    <span class=\"voa-select__info-message\">{this.infoMessage}</span>\r\n                  )}\r\n                  <slot name=\"info-icon\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path d=\"M8 12V8M8 4H8.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                  </slot>\r\n                </div>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          {/* Input Wrapper */}\r\n          <div \r\n            part=\"input\" \r\n            class={{\r\n              'voa-select__input': true,\r\n              [`voa-select__input--${this.currentState}`]: true,\r\n              'voa-select__input--error': this.error,\r\n              'voa-select__input--disabled': this.disabled\r\n            }}\r\n          >\r\n            <div part=\"input-wrapper\" class=\"voa-select__input-wrapper\">\r\n              {/* Icon Slot */}\r\n              {iconSlot && (\r\n                <div part=\"icon\" class=\"voa-select__icon\">\r\n                  <slot name=\"icon\"></slot>\r\n                  <slot name=\"prefix\"></slot>\r\n                </div>\r\n              )}\r\n\r\n              {/* Select Base */}\r\n              <div part=\"select-content\" class=\"voa-select__content\">\r\n                <voa-select-base\r\n                  options={this.options}\r\n                  value={this.innerValue}\r\n                  placeholder={this.placeholder}\r\n                  disabled={this.disabled}\r\n                  error={this.error}\r\n                  on-voa-change={this.handleChange}\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Error Message */}\r\n          {this.error && this.errorMessage && (\r\n            <div part=\"error-message\" class=\"voa-select__error\">\r\n              {this.errorMessage}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"version":3}

package/dist/custom-elements/voa-skeleton.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VoaSkeleton extends Components.VoaSkeleton, HTMLElement {}
+export const VoaSkeleton: {
+    prototype: VoaSkeleton;
+    new (): VoaSkeleton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/custom-elements/voa-skeleton.js

@@ -0,0 +1,48 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+
+const skeletonCss = ".skeleton{border-radius:2px;display:inline-block;line-height:100%;width:100%;background-color:#fff;background-size:1000px 1000px;background-image:linear-gradient(\r\n        100deg,\r\n        #e8e8e8 20%,\r\n        #fafafa 50%,\r\n        #e8e8e8 60%\r\n    );animation:placeholderShimmer 1.5s linear infinite forwards}.skeleton--circle{border-radius:50%}@keyframes placeholderShimmer{0%{background-position:-500px 0}100%{background-position:500px 0}}";
+
+const Skeleton = /*@__PURE__*/ proxyCustomElement(class Skeleton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.width = "200px";
+        this.height = "100px";
+    }
+    handleClass() {
+        const isCircle = this.variant === 'circle';
+        return `skeleton ${isCircle ? 'skeleton--circle' : ''}`;
+    }
+    render() {
+        return h("span", { key: '5e1a7fc83f985cde0b19a2f2234359053adcd703', class: this.handleClass(), style: { width: this.width, height: this.height } });
+    }
+    static get style() { return skeletonCss; }
+}, [256, "voa-skeleton", {
+        "width": [1],
+        "height": [1],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-skeleton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-skeleton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Skeleton);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaSkeleton = Skeleton;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaSkeleton, defineCustomElement };
+//# sourceMappingURL=voa-skeleton.js.map
+
+//# sourceMappingURL=voa-skeleton.js.map

package/dist/custom-elements/voa-skeleton.js.map

@@ -0,0 +1 @@
+{"file":"voa-skeleton.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ucAAuc;;MCO9c,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAMY,QAAA,IAAK,CAAA,KAAA,GAAW,OAAO;AACvB,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAanC;IAVG,WAAW,GAAA;AACP,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ;QAC1C,OAAO,CAAA,SAAA,EAAY,QAAQ,GAAG,kBAAkB,GAAG,EAAE,CAAA,CAAE;;IAG3D,MAAM,GAAA;AACF,QAAA,OAAO,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAA,CACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-skeleton/skeleton.css?tag=voa-skeleton","src/components/voa-skeleton/skeleton.tsx"],"sourcesContent":[".skeleton{\r\n    border-radius: 2px;\r\n    display: inline-block;\r\n    line-height: 100%;\r\n    width: 100%;\r\n    background-color: #fff;\r\n    background-size: 1000px 1000px;\r\n    background-image: linear-gradient(\r\n        100deg,\r\n        #e8e8e8 20%,\r\n        #fafafa 50%,\r\n        #e8e8e8 60%\r\n    );\r\n    animation: placeholderShimmer 1.5s linear infinite forwards;\r\n}\r\n\r\n.skeleton--circle{\r\n    border-radius: 50%;\r\n}\r\n\r\n@keyframes placeholderShimmer{\r\n    0%{\r\n        background-position: -500px 0;\r\n    }\r\n    \r\n    100%{\r\n        background-position: 500px 0;\r\n    }\r\n\r\n}","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"voa-skeleton\",\r\n    styleUrl: \"skeleton.css\",\r\n    shadow: false,\r\n})\r\nexport class Skeleton {\r\n    @Prop() width: string = \"200px\";\r\n    @Prop() height: string = \"100px\";\r\n    @Prop() variant: \"text\" | \"circle\" ;\r\n\r\n    handleClass() {\r\n        const isCircle = this.variant === 'circle';\r\n        return `skeleton ${isCircle ? 'skeleton--circle' : ''}`;;\r\n    }\r\n\r\n    render() {\r\n        return <span class={this.handleClass()} \r\n        style={{ width: this.width, height: this.height}}\r\n        ></span>\r\n    }\r\n}\r\n"],"version":3}

package/dist/custom-elements/voa-stepper.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VoaStepper extends Components.VoaStepper, HTMLElement {}
+export const VoaStepper: {
+    prototype: VoaStepper;
+    new (): VoaStepper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/custom-elements/voa-stepper.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+
+const stepperCss = ".stepper{display:flex;align-items:center}.step{padding:10px 20px;border:1px solid #ccc;border-radius:4px;background-color:#f9f9f9;cursor:pointer;transition:background-color 0.2s;margin-right:10px}.step.active{background-color:#007bff;color:white}.step:hover{background-color:#eee}";
+
+const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.stepChanged = createEvent(this, "stepChanged");
+        this.steps = [];
+        this.currentStep = 0;
+        this.activeStep = this.currentStep;
+    }
+    goToStep(step) {
+        this.activeStep = step;
+        this.stepChanged.emit(this.activeStep);
+    }
+    render() {
+        return (h("div", { key: '51b81df5726adea180c1ce858de29c48b18b0e0f', class: "stepper" }, this.steps.map((step, index) => (h("div", { class: `step ${this.activeStep === index ? "active" : ""}`, onClick: () => this.goToStep(index) }, step)))));
+    }
+    static get style() { return stepperCss; }
+}, [257, "voa-stepper", {
+        "steps": [16],
+        "currentStep": [2, "current-step"],
+        "activeStep": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-stepper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-stepper":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Stepper);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaStepper = Stepper;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaStepper, defineCustomElement };
+//# sourceMappingURL=voa-stepper.js.map
+
+//# sourceMappingURL=voa-stepper.js.map

package/dist/custom-elements/voa-stepper.js.map

@@ -0,0 +1 @@
+{"file":"voa-stepper.js","mappings":";;AAAA,MAAM,UAAU,GAAG,0RAA0R;;MCOhS,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAa,EAAE;AACpB,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;AACtB,QAAA,IAAA,CAAA,UAAU,GAAW,IAAI,CAAC,WAAW;AAsB/C;AAnBC,IAAA,QAAQ,CAAC,IAAY,EAAA;AACnB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;QACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;;IAGxC,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EACjB,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC1B,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,UAAU,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAC1D,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAA,EAElC,IAAI,CACD,CACP,CAAC,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-stepper/stepper.css?tag=voa-stepper&encapsulation=shadow","src/components/voa-stepper/stepper.tsx"],"sourcesContent":[".stepper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.step {\r\n  padding: 10px 20px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #f9f9f9;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n  margin-right: 10px;\r\n}\r\n\r\n.step.active {\r\n  background-color: #007bff;\r\n  color: white;\r\n}\r\n\r\n.step:hover {\r\n  background-color: #eee;\r\n}\r\n","import { Component, Prop, h, State, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-stepper\",\r\n  styleUrl: \"stepper.css\",\r\n  shadow: true,\r\n})\r\nexport class Stepper {\r\n  @Prop() steps: string[] = [];\r\n  @Prop() currentStep: number = 0;\r\n  @State() activeStep: number = this.currentStep;\r\n  @Event() stepChanged: EventEmitter<number>;\r\n\r\n  goToStep(step: number) {\r\n    this.activeStep = step;\r\n    this.stepChanged.emit(this.activeStep);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"stepper\">\r\n        {this.steps.map((step, index) => (\r\n          <div\r\n            class={`step ${this.activeStep === index ? \"active\" : \"\"}`}\r\n            onClick={() => this.goToStep(index)}\r\n          >\r\n            {step}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/custom-elements/voa-switch.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VoaSwitch extends Components.VoaSwitch, HTMLElement {}
+export const VoaSwitch: {
+    prototype: VoaSwitch;
+    new (): VoaSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/custom-elements/voa-switch.js

@@ -0,0 +1,131 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const voaSwitchCss = ":host{display:inline-block;box-sizing:border-box;contain:content}.switch-container{display:inline-flex;align-items:center;position:relative;box-sizing:border-box;user-select:none;border:none;background:none;padding:0;margin:0;gap:0;}.switch-container:disabled,.switch-container.switch-disabled{cursor:not-allowed;pointer-events:none}.switch-container.switch-no-label{gap:0}.switch-track{display:flex;align-items:center;position:relative;box-sizing:border-box;flex-shrink:0;width:40px;height:20px;overflow:hidden;padding:2px}.switch-thumb{display:block;position:relative;box-sizing:border-box;flex-shrink:0;width:16px;height:16px}.switch-shadow{position:absolute;inset:0;pointer-events:none;}.switch-label{display:inline-block;user-select:none;box-sizing:border-box}";
+
+const VoaSwitch$1 = /*@__PURE__*/ proxyCustomElement(class VoaSwitch extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dsChange = createEvent(this, "dsChange");
+        this.internals = this.attachInternals();
+        /**
+         * Internal state to handle "uncontrolled" usage while keeping props immutable
+         */
+        this.internalChecked = false;
+        this.checked = false;
+        this.disabled = false;
+        this.showLabel = false;
+        this.value = 'on'; // Default value for forms
+        this.handleClick = (ev) => {
+            ev.preventDefault();
+            if (this.disabled)
+                return;
+            // Optimistic UI update for uncontrolled scenarios
+            this.internalChecked = !this.internalChecked;
+            this.checked = this.internalChecked;
+            this.dsChange.emit(this.internalChecked);
+            this.updateFormValue();
+            this.reflectStateToHost();
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleClick(event);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalChecked = this.checked;
+        this.updateFormValue();
+        this.reflectStateToHost();
+    }
+    checkedChanged(newValue) {
+        this.internalChecked = newValue;
+        this.updateFormValue();
+        this.reflectStateToHost();
+    }
+    /**
+     * Reflects the current state to the Host element for CSS attribute selectors
+     */
+    reflectStateToHost() {
+        if (this.internalChecked) {
+            this.host.setAttribute('checked', '');
+        }
+        else {
+            this.host.removeAttribute('checked');
+        }
+    }
+    /**
+     * Syncs with the native Form API
+     */
+    updateFormValue() {
+        try {
+            // ElementInternals is only available in real browsers
+            // Skip in test environment where it's not supported
+            if (this.internals && typeof this.internals.setFormValue === 'function') {
+                this.internals.setFormValue(this.internalChecked ? this.value : null);
+                // Accessibility internals (replaces aria attributes on Host)
+                this.internals.ariaChecked = this.internalChecked ? 'true' : 'false';
+                this.internals.ariaDisabled = this.disabled ? 'true' : 'false';
+            }
+        }
+        catch (e) {
+            // ElementInternals may not be available in test environment
+        }
+    }
+    render() {
+        // NOTE: Host no longer has aria-roles, ElementInternals handles that on the custom element itself.
+        // The internal button is purely for visual structure and click capturing.
+        return (h(Host, { key: 'c21dd59c46b702c662b74ac4bf63c9a64b36aeaa' }, h("button", { key: '0d76db2e8907a5f98a1d9ed5616d7cf83a543676', part: "base", class: {
+                'switch-container': true,
+                'switch-disabled': this.disabled,
+                'switch-checked': this.internalChecked,
+                'switch-no-label': !this.showLabel
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown,
+            // We remove aria-checked here to avoid "double talk" with the Host/Internals
+            tabIndex: -1 }, h("div", { key: '95be86688e5594d2c2a95cc1e5658fccfc7ac3c6', part: "track", class: "switch-track" }, h("div", { key: '8a86e010d6748784c8c8b81da1bc1a5f2824b8d7', part: "thumb", class: "switch-thumb" }), h("div", { key: '66a705df89533e04992477c26614684280be9d32', part: "shadow", class: "switch-shadow" })), this.showLabel && (h("span", { key: 'd4fcce7d91db73450b7b1e19ba93c676785c5b2d', class: "switch-label", part: "label" }, h("slot", { key: '3d00442b08822107bbf494869aabbad9413ebe72' }))))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "checked": ["checkedChanged"]
+    }; }
+    static get style() { return voaSwitchCss; }
+}, [337, "voa-switch", {
+        "checked": [4],
+        "disabled": [4],
+        "showLabel": [4, "show-label"],
+        "name": [1],
+        "value": [1],
+        "internalChecked": [32]
+    }, undefined, {
+        "checked": ["checkedChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaSwitch$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaSwitch = VoaSwitch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaSwitch, defineCustomElement };
+//# sourceMappingURL=voa-switch.js.map
+
+//# sourceMappingURL=voa-switch.js.map

package/dist/custom-elements/voa-switch.js.map

@@ -0,0 +1 @@
+{"file":"voa-switch.js","mappings":"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","names":["VoaSwitch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-switch/voa-switch.css?tag=voa-switch&encapsulation=shadow","src/components/voa-switch/voa-switch.tsx"],"sourcesContent":["/* * 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  box-sizing: border-box;\r\n  /* Ensures the host has a tangible size if not defined externally */\r\n  contain: content;\r\n}\r\n\r\n.switch-container {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  user-select: none;\r\n  border: none;\r\n  background: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  gap: 0;\r\n  /* Gap defaults to 0, overridden by external CSS if needed */\r\n}\r\n\r\n.switch-container:disabled,\r\n.switch-container.switch-disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.switch-container.switch-no-label {\r\n  gap: 0;\r\n}\r\n\r\n.switch-track {\r\n  /* APENAS estilos estruturais */\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  flex-shrink: 0;\r\n  /* CRITICAL: Prevents track from squashing in flex layouts */\r\n\r\n  /* Tamanhos estruturais conforme Figma: 40px x 20px */\r\n  width: 40px;\r\n  height: 20px;\r\n\r\n  overflow: hidden;\r\n  /* Padding interno para posicionar o thumb */\r\n  padding: 2px;\r\n}\r\n\r\n.switch-thumb {\r\n  /* APENAS estilos estruturais */\r\n  display: block;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  flex-shrink: 0;\r\n\r\n  /* RESTORED DIMENSIONS - CRITICAL FOR VISIBILITY */\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n\r\n.switch-shadow {\r\n  /* APENAS estilos estruturais */\r\n  position: absolute;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  /* Shadow será aplicada externamente via CSS custom property */\r\n}\r\n\r\n.switch-label {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-block;\r\n  user-select: none;\r\n  box-sizing: border-box;\r\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-switch',\r\n  styleUrl: 'voa-switch.css',\r\n  shadow: {\r\n    delegatesFocus: true // CRITICAL: Passes focus from Host to the internal button automatically\r\n  },\r\n  formAssociated: true // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaSwitch {\r\n  @Element() host: HTMLVoaSwitchElement;\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  /**\r\n   * Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n   */\r\n  @State() internalChecked: boolean = false;\r\n\r\n  @Prop() checked: boolean = false;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() name: string;\r\n  @Prop() value: string = 'on'; // Default value for forms\r\n\r\n  @Event() dsChange: EventEmitter<boolean>;\r\n\r\n  componentWillLoad() {\r\n    this.internalChecked = this.checked;\r\n    this.updateFormValue();\r\n    this.reflectStateToHost();\r\n  }\r\n\r\n  @Watch('checked')\r\n  checkedChanged(newValue: boolean) {\r\n    this.internalChecked = newValue;\r\n    this.updateFormValue();\r\n    this.reflectStateToHost();\r\n  }\r\n\r\n  /**\r\n   * Reflects the current state to the Host element for CSS attribute selectors\r\n   */\r\n  private reflectStateToHost() {\r\n    if (this.internalChecked) {\r\n      this.host.setAttribute('checked', '');\r\n    } else {\r\n      this.host.removeAttribute('checked');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Syncs with the native Form API\r\n   */\r\n  private updateFormValue() {\r\n    try {\r\n      // ElementInternals is only available in real browsers\r\n      // Skip in test environment where it's not supported\r\n      if (this.internals && typeof (this.internals as any).setFormValue === 'function') {\r\n        (this.internals as any).setFormValue(this.internalChecked ? this.value : null);\r\n        \r\n        // Accessibility internals (replaces aria attributes on Host)\r\n        (this.internals as any).ariaChecked = this.internalChecked ? 'true' : 'false';\r\n        (this.internals as any).ariaDisabled = this.disabled ? 'true' : 'false';\r\n      }\r\n    } catch (e) {\r\n      // ElementInternals may not be available in test environment\r\n    }\r\n  }\r\n\r\n  private handleClick = (ev: Event) => {\r\n    ev.preventDefault();\r\n    if (this.disabled) return;\r\n\r\n    // Optimistic UI update for uncontrolled scenarios\r\n    this.internalChecked = !this.internalChecked;\r\n    this.checked = this.internalChecked;\r\n    this.dsChange.emit(this.internalChecked);\r\n    this.updateFormValue();\r\n    this.reflectStateToHost();\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      this.handleClick(event);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    // NOTE: Host no longer has aria-roles, ElementInternals handles that on the custom element itself.\r\n    // The internal button is purely for visual structure and click capturing.\r\n    return (\r\n      <Host>\r\n        <button\r\n          part=\"base\"\r\n          class={{\r\n            'switch-container': true,\r\n            'switch-disabled': this.disabled,\r\n            'switch-checked': this.internalChecked,\r\n            'switch-no-label': !this.showLabel\r\n          }}\r\n          type=\"button\"\r\n          disabled={this.disabled}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          // We remove aria-checked here to avoid \"double talk\" with the Host/Internals\r\n          tabIndex={-1} // handled by delegatesFocus on Host\r\n        >\r\n          <div part=\"track\" class=\"switch-track\">\r\n            <div part=\"thumb\" class=\"switch-thumb\" />\r\n            <div part=\"shadow\" class=\"switch-shadow\" />\r\n          </div>\r\n\r\n          {this.showLabel && (\r\n            <span class=\"switch-label\" part=\"label\">\r\n              <slot />\r\n            </span>\r\n          )}\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"version":3}

package/dist/custom-elements/voa-tab-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VoaTabItem extends Components.VoaTabItem, HTMLElement {}
+export const VoaTabItem: {
+    prototype: VoaTabItem;
+    new (): VoaTabItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;