voa-ds-core 1.0.4

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

@@ -0,0 +1,142 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.voaSelectChange = index.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 (index.h(index.Host, { key: 'c6b2e0886e9116e0194a52dea22fd36dc8e973a9', role: "group", "aria-disabled": this.disabled ? 'true' : undefined, "data-state": this.currentState }, index.h("div", { key: '6ce5e54fea992399bec2ec5827d3b28803fc26c1', part: "base", class: "voa-select" }, this.showLabel && (index.h("div", { key: 'f236c0419c555b3e3931ecd2aa8efcc46a883777', part: "header", class: "voa-select__header" }, this.label && (index.h("label", { key: 'b9f963448f922bd18ab152c29aea8f98e723a8b2', part: "label", class: "voa-select__label" }, this.label)), this.info && (index.h("div", { key: 'fab440ec4d2edc8f710dc6b0bbb28f54f244cdd0', part: "info", class: "voa-select__info" }, this.infoMessage && (index.h("span", { key: '78afb157e2fef08b26c7dd544e498f6982c4a20c', class: "voa-select__info-message" }, this.infoMessage)), index.h("slot", { key: '609d452bb0f9f8c79833744bfce72801ca7cb353', name: "info-icon" }, index.h("svg", { key: '15264e9fc111165da6cb06cb0873bc1605deb4b4', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '8fb3c6a63d7c0c82b8ef76ebf179ef14ce0c2398', d: "M8 12V8M8 4H8.01", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))), index.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
+            } }, index.h("div", { key: 'aeb54d401288d8c413fb5bf8d28856e4d1d12239', part: "input-wrapper", class: "voa-select__input-wrapper" }, iconSlot && (index.h("div", { key: '10470d8b5478233e11433763441a0de2183420b3', part: "icon", class: "voa-select__icon" }, index.h("slot", { key: '5fe39af041f7bcc27fba60034c7b3254ca22a97b', name: "icon" }), index.h("slot", { key: '5344b7e33db324f2783453a07f6d57441c9c4944', name: "prefix" }))), index.h("div", { key: 'f7110b718fc52fa5ea697d9cac534ada1b44b7b9', part: "select-content", class: "voa-select__content" }, index.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 && (index.h("div", { key: 'cd40fbd67848f85776fd85b59f0013fc9b5e32e8', part: "error-message", class: "voa-select__error" }, this.errorMessage)))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["syncValue"],
+        "disabled": ["updateState"],
+        "isFocused": ["updateState"]
+    }; }
+};
+VoaSelect.style = voaSelectCss;
+
+exports.voa_select = VoaSelect;
+//# sourceMappingURL=voa-select.entry.cjs.js.map

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

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

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.width = "200px";
+        this.height = "100px";
+    }
+    handleClass() {
+        const isCircle = this.variant === 'circle';
+        return `skeleton ${isCircle ? 'skeleton--circle' : ''}`;
+    }
+    render() {
+        return index.h("span", { key: '5e1a7fc83f985cde0b19a2f2234359053adcd703', class: this.handleClass(), style: { width: this.width, height: this.height } });
+    }
+};
+Skeleton.style = skeletonCss;
+
+exports.voa_skeleton = Skeleton;
+//# sourceMappingURL=voa-skeleton.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-skeleton.entry.cjs.js","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,ucAAuc;;MCO9c,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,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,OAAOA,OAAA,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;;;;;;;"}

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.stepChanged = index.createEvent(this, "stepChanged");
+        this.steps = [];
+        this.currentStep = 0;
+        this.activeStep = this.currentStep;
+    }
+    goToStep(step) {
+        this.activeStep = step;
+        this.stepChanged.emit(this.activeStep);
+    }
+    render() {
+        return (index.h("div", { key: '51b81df5726adea180c1ce858de29c48b18b0e0f', class: "stepper" }, this.steps.map((step, index$1) => (index.h("div", { class: `step ${this.activeStep === index$1 ? "active" : ""}`, onClick: () => this.goToStep(index$1) }, step)))));
+    }
+};
+Stepper.style = stepperCss;
+
+exports.voa_stepper = Stepper;
+//# sourceMappingURL=voa-stepper.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-stepper.entry.cjs.js","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"],"names":["h","index"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,0RAA0R;;MCOhS,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,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,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EACjB,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,MAC1BD,OACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,UAAU,KAAKC,OAAK,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAC1D,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAACA,OAAK,CAAC,EAAA,EAElC,IAAI,CACD,CACP,CAAC,CACE;;;;;;;"}

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

@@ -0,0 +1,107 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsChange = index.createEvent(this, "dsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        /**
+         * 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 (index.h(index.Host, { key: 'c21dd59c46b702c662b74ac4bf63c9a64b36aeaa' }, index.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 }, index.h("div", { key: '95be86688e5594d2c2a95cc1e5658fccfc7ac3c6', part: "track", class: "switch-track" }, index.h("div", { key: '8a86e010d6748784c8c8b81da1bc1a5f2824b8d7', part: "thumb", class: "switch-thumb" }), index.h("div", { key: '66a705df89533e04992477c26614684280be9d32', part: "shadow", class: "switch-shadow" })), this.showLabel && (index.h("span", { key: 'd4fcce7d91db73450b7b1e19ba93c676785c5b2d', class: "switch-label", part: "label" }, index.h("slot", { key: '3d00442b08822107bbf494869aabbad9413ebe72' }))))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["checkedChanged"]
+    }; }
+};
+VoaSwitch.style = voaSwitchCss;
+
+exports.voa_switch = VoaSwitch;
+//# sourceMappingURL=voa-switch.entry.cjs.js.map

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

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

package/dist/cjs/voa-tab-item.cjs.entry.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.js');
+
+const voaTabItemCss = ":host{display:inline-block;box-sizing:border-box}.voa-tab-item{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;user-select:none;gap:0;flex-direction:row;flex-wrap:nowrap}.voa-tab-item--disabled{cursor:not-allowed;pointer-events:none}.voa-tab-item__label{display:inline-block;flex-shrink:0}.voa-tab-item__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-sizing:border-box}.voa-tab-item__badge-text{display:inline-block;text-align:center;white-space:nowrap}";
+
+const VoaTabItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabClick = index.createEvent(this, "tabClick");
+        /**
+         * Estado do item de tab.
+         * Mapeia os estados do Figma: Active, Default, Disabled.
+         */
+        this.state = 'default';
+        /**
+         * Posição do indicador de ativo (borda).
+         * Mapeia as posições do Figma: Default (bottom), Top, Right, Left.
+         */
+        this.position = 'default';
+        /**
+         * Se verdadeiro, exibe um badge no item.
+         */
+        this.showBadge = false;
+        /**
+         * Se verdadeiro, o item estará desabilitado.
+         * Alias para state="disabled".
+         */
+        this.disabled = false;
+        /**
+         * Handler interno de clique.
+         */
+        this.handleClick = () => {
+            if (!this.disabled && this.state !== 'disabled') {
+                this.tabClick.emit();
+            }
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno.
+     */
+    async setFocus() {
+        var _a;
+        const base = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="base"]');
+        if (base) {
+            base.focus();
+        }
+    }
+    /**
+     * Determina o estado efetivo do componente.
+     * Se disabled=true, força state="disabled".
+     */
+    getEffectiveState() {
+        if (this.disabled) {
+            return 'disabled';
+        }
+        return this.state;
+    }
+    /**
+     * Determina o valor do badge a ser exibido.
+     */
+    getBadgeValue() {
+        if (this.badgeCount !== undefined) {
+            return String(this.badgeCount);
+        }
+        return '0';
+    }
+    render() {
+        const effectiveState = this.getEffectiveState();
+        const isActive = effectiveState === 'active';
+        const isDisabled = effectiveState === 'disabled';
+        return (index.h(index.Host, { key: '15c5808af110e8b547664412017ffc94bb95f4e2', role: "tab", "aria-selected": isActive ? 'true' : 'false', "aria-disabled": isDisabled ? 'true' : undefined, tabindex: isDisabled ? -1 : (isActive ? 0 : -1), onClick: this.handleClick }, index.h("div", { key: '4cb9bd8d7f6804213ca2b92ac3587a7028429fe2', part: "base", class: {
+                'voa-tab-item': true,
+                [`voa-tab-item--${effectiveState}`]: true,
+                [`voa-tab-item--${this.position}`]: true,
+                'voa-tab-item--disabled': isDisabled,
+            } }, index.h("span", { key: 'bf1ae3f34dd2c77eece50aeed14d8cbf4a4a34ec', part: "label", class: "voa-tab-item__label" }, index.h("slot", { key: 'f54a35be6b6d08125882b3f61816f75dc0acc8a6' })), this.showBadge && (index.h("div", { key: 'e04ad4b69771b3732f2159d4b8ac096d9cfb1dcc', part: "badge", class: "voa-tab-item__badge" }, index.h("span", { key: '02b00f32bc0e425d9c38096e53ce770ee320cefa', class: "voa-tab-item__badge-text" }, this.getBadgeValue()))))));
+    }
+    get host() { return index.getElement(this); }
+};
+VoaTabItem.style = voaTabItemCss;
+
+exports.voa_tab_item = VoaTabItem;
+//# sourceMappingURL=voa-tab-item.entry.cjs.js.map

package/dist/cjs/voa-tab-item.entry.cjs.js.map

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

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

@@ -0,0 +1,129 @@
+'use strict';
+
+var index = require('./index-TzstRlIU.js');
+
+const voaTabCss = ":host{display:block;box-sizing:border-box}.tab-container{display:block;width:100%;box-sizing:border-box}.tab-list{display:flex;position:relative;width:100%;box-sizing:border-box}.tab-horizontal .tab-list{flex-direction:row;align-items:flex-end;}.tab-vertical{display:flex;}.tab-vertical .tab-list{flex-direction:column;width:auto;}";
+
+const VoaTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsTabChange = index.createEvent(this, "dsTabChange");
+        this.direction = 'horizontal';
+        /**
+         * Internal state for uncontrolled mode.
+         */
+        this.internalIndex = 0;
+        /**
+         * Listens for children being added/removed from the slot.
+         */
+        this.handleSlotChange = () => {
+            this.syncChildren();
+        };
+        this.handleKeyDown = (event) => {
+            const tabs = this.getTabs();
+            if (tabs.length === 0)
+                return;
+            const isVertical = this.direction === 'vertical';
+            const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+            const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+            let nextIndex = this.internalIndex;
+            if (event.key === nextKey) {
+                event.preventDefault();
+                nextIndex = this.internalIndex + 1;
+                if (nextIndex >= tabs.length)
+                    nextIndex = 0;
+            }
+            else if (event.key === prevKey) {
+                event.preventDefault();
+                nextIndex = this.internalIndex - 1;
+                if (nextIndex < 0)
+                    nextIndex = tabs.length - 1;
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                nextIndex = 0;
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                nextIndex = tabs.length - 1;
+            }
+            else {
+                return;
+            }
+            // Simple skip for disabled tabs (moves to the one requested, if disabled, does nothing in this simple version)
+            // In production, you'd want a while loop to find the next non-disabled index.
+            const targetTab = tabs[nextIndex];
+            if (targetTab.disabled || targetTab.state === 'disabled') {
+                return;
+            }
+            this.activateTab(nextIndex);
+            tabs[nextIndex].setFocus();
+        };
+    }
+    handleActiveIndexChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalIndex = newValue;
+            this.syncChildren();
+        }
+    }
+    componentDidLoad() {
+        if (this.activeIndex !== undefined) {
+            this.internalIndex = this.activeIndex;
+        }
+        this.syncChildren();
+    }
+    /**
+     * Listens for the child emitting its click event.
+     */
+    handleTabSelected(event) {
+        const target = event.target;
+        const tabs = this.getTabs();
+        const index = tabs.indexOf(target);
+        // Ensure we don't activate disabled tabs (double check)
+        if (index > -1 && !target.disabled && target.state !== 'disabled') {
+            this.activateTab(index);
+        }
+    }
+    getTabs() {
+        return Array.from(this.host.querySelectorAll('voa-tab-item'));
+    }
+    /**
+     * Updates the `state` prop of all children based on current selection.
+     * Handles the 'active' | 'default' | 'disabled' string logic.
+     */
+    syncChildren() {
+        const tabs = this.getTabs();
+        tabs.forEach((tab, index) => {
+            // Never overwrite 'disabled' state
+            if (tab.disabled || tab.state === 'disabled') {
+                return;
+            }
+            // Set active or default
+            if (index === this.internalIndex) {
+                tab.state = 'active';
+            }
+            else {
+                tab.state = 'default';
+            }
+        });
+    }
+    activateTab(index) {
+        this.internalIndex = index;
+        this.syncChildren();
+        this.dsTabChange.emit({ index });
+    }
+    render() {
+        return (index.h(index.Host, { key: '6f6c95f8e33913a9f739534fc2d3fdf8b5cc7d29', role: "tablist", "aria-orientation": this.direction, onKeyDown: this.handleKeyDown }, index.h("div", { key: '4cb4c2937ba9a368ef37b53bc01e15ca0b1867db', part: "base", class: {
+                'tab-container': true,
+                [`tab-${this.direction}`]: true
+            } }, index.h("div", { key: 'dc98c574d6f450f37c136740541d56e223f0eb1c', part: "list", class: "tab-list" }, index.h("slot", { key: 'afd443dffc7138cb143f59079c377a09d22b2907', onSlotchange: this.handleSlotChange })))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "activeIndex": ["handleActiveIndexChange"]
+    }; }
+};
+VoaTab.style = voaTabCss;
+
+exports.voa_tab = VoaTab;
+//# sourceMappingURL=voa-tab.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tab.entry.cjs.js","sources":["src/components/voa-tab/voa-tab.css?tag=voa-tab&encapsulation=shadow","src/components/voa-tab/voa-tab.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.tab-container {\r\n  display: block;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.tab-list {\r\n  display: flex;\r\n  position: relative;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Orientation Modifiers */\r\n.tab-horizontal .tab-list {\r\n  flex-direction: row;\r\n  align-items: flex-end; /* Common alignment for tabs sitting on a line */\r\n}\r\n\r\n.tab-vertical {\r\n  display: flex; /* Container becomes flex in vertical to allow content next to it if needed */\r\n}\r\n\r\n.tab-vertical .tab-list {\r\n  flex-direction: column;\r\n  width: auto; /* Shrink to fit items */\r\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-tab',\r\n  styleUrl: 'voa-tab.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaTab {\r\n  @Element() host: HTMLVoaTabElement;\r\n\r\n  @Prop({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\r\n\r\n  /**\r\n   * Controlled mode active index.\r\n   */\r\n  @Prop() activeIndex: number;\r\n\r\n  /**\r\n   * Event emitted when the active tab changes.\r\n   */\r\n  @Event() dsTabChange: EventEmitter<{ index: number }>;\r\n\r\n  /**\r\n   * Internal state for uncontrolled mode.\r\n   */\r\n  @State() internalIndex: number = 0;\r\n\r\n  @Watch('activeIndex')\r\n  handleActiveIndexChange(newValue: number) {\r\n    if (newValue !== undefined) {\r\n      this.internalIndex = newValue;\r\n      this.syncChildren();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.activeIndex !== undefined) {\r\n      this.internalIndex = this.activeIndex;\r\n    }\r\n    this.syncChildren();\r\n  }\r\n\r\n  /**\r\n   * Listens for children being added/removed from the slot.\r\n   */\r\n  private handleSlotChange = () => {\r\n    this.syncChildren();\r\n  };\r\n\r\n  /**\r\n   * Listens for the child emitting its click event.\r\n   */\r\n  @Listen('tabClick')\r\n  handleTabSelected(event: CustomEvent) {\r\n    const target = event.target as HTMLVoaTabItemElement;\r\n    const tabs = this.getTabs();\r\n    const index = tabs.indexOf(target);\r\n\r\n    // Ensure we don't activate disabled tabs (double check)\r\n    if (index > -1 && !target.disabled && target.state !== 'disabled') {\r\n      this.activateTab(index);\r\n    }\r\n  }\r\n\r\n  private getTabs() {\r\n    return Array.from(this.host.querySelectorAll('voa-tab-item'));\r\n  }\r\n\r\n  /**\r\n   * Updates the `state` prop of all children based on current selection.\r\n   * Handles the 'active' | 'default' | 'disabled' string logic.\r\n   */\r\n  private syncChildren() {\r\n    const tabs = this.getTabs();\r\n    tabs.forEach((tab, index) => {\r\n      // Never overwrite 'disabled' state\r\n      if (tab.disabled || tab.state === 'disabled') {\r\n        return; \r\n      }\r\n      \r\n      // Set active or default\r\n      if (index === this.internalIndex) {\r\n        tab.state = 'active';\r\n      } else {\r\n        tab.state = 'default';\r\n      }\r\n    });\r\n  }\r\n\r\n  private activateTab(index: number) {\r\n    this.internalIndex = index;\r\n    this.syncChildren();\r\n    this.dsTabChange.emit({ index });\r\n  }\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    const tabs = this.getTabs();\r\n    if (tabs.length === 0) return;\r\n\r\n    const isVertical = this.direction === 'vertical';\r\n    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';\r\n    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';\r\n\r\n    let nextIndex = this.internalIndex;\r\n\r\n    if (event.key === nextKey) {\r\n      event.preventDefault();\r\n      nextIndex = this.internalIndex + 1;\r\n      if (nextIndex >= tabs.length) nextIndex = 0;\r\n    } else if (event.key === prevKey) {\r\n      event.preventDefault();\r\n      nextIndex = this.internalIndex - 1;\r\n      if (nextIndex < 0) nextIndex = tabs.length - 1;\r\n    } else if (event.key === 'Home') {\r\n      event.preventDefault();\r\n      nextIndex = 0;\r\n    } else if (event.key === 'End') {\r\n      event.preventDefault();\r\n      nextIndex = tabs.length - 1;\r\n    } else {\r\n      return;\r\n    }\r\n\r\n    // Simple skip for disabled tabs (moves to the one requested, if disabled, does nothing in this simple version)\r\n    // In production, you'd want a while loop to find the next non-disabled index.\r\n    const targetTab = tabs[nextIndex];\r\n    if (targetTab.disabled || targetTab.state === 'disabled') {\r\n       return; \r\n    }\r\n\r\n    this.activateTab(nextIndex);\r\n    tabs[nextIndex].setFocus();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host \r\n        role=\"tablist\" \r\n        aria-orientation={this.direction}\r\n        onKeyDown={this.handleKeyDown}\r\n      >\r\n        <div part=\"base\" class={{\r\n            'tab-container': true,\r\n            [`tab-${this.direction}`]: true\r\n        }}>\r\n          <div part=\"list\" class=\"tab-list\">\r\n            <slot onSlotchange={this.handleSlotChange} />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"names":["h","Host"],"mappings":"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"}