voa-ds-core 1.0.4

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

@@ -0,0 +1 @@
+{"file":"voa-list.js","mappings":";;AAAA,MAAM,OAAO,GAAG,qIAAqI;;MCOxI,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;AALjB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAa,EAAE;AAW7B;IATC,MAAM,GAAA;AACJ,QAAA,QACE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,IACb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnB,CAAA,CAAA,IAAA,EAAA,IAAA,EAAK,IAAI,CAAM,CAChB,CAAC,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-list/list.css?tag=voa-list&encapsulation=shadow","src/components/voa-list/list.tsx"],"sourcesContent":[".list {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.list li {\r\n  padding: 10px;\r\n  border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.list li:last-child {\r\n  border-bottom: none;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-list\",\r\n  styleUrl: \"list.css\",\r\n  shadow: true,\r\n})\r\nexport class List {\r\n  @Prop() items: string[] = [];\r\n\r\n  render() {\r\n    return (\r\n      <ul class=\"list\">\r\n        {this.items.map((item) => (\r\n          <li>{item}</li>\r\n        ))}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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

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

@@ -0,0 +1,47 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+
+const modalCss = ".modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center;z-index:1000}.modal.open{display:flex}.overlay{position:absolute;width:100%;height:100%}.content{background-color:white;padding:20px;border-radius:8px;position:relative;z-index:1001}.close{position:absolute;top:10px;right:10px;font-size:1.5rem;background:none;border:none;cursor:pointer}";
+
+const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.open = false;
+        this.isOpen = this.open;
+        this.closeModal = () => {
+            this.isOpen = false;
+        };
+    }
+    render() {
+        return (h("div", { key: 'c0e105af6a694cb130eb9d1144a4c59e20671713', class: `modal ${this.isOpen ? "open" : ""}` }, h("div", { key: 'd0e513097ba4294a890a012346e43fd57d89b822', class: "overlay", onClick: this.closeModal }), h("div", { key: '324eedf9a9b03c21316a57ca468ccd6a78b69cf2', class: "content" }, h("button", { key: 'e631ad6af68a96d6fcd10815694a053f47786450', class: "close", onClick: this.closeModal }, "\u00D7"), h("slot", { key: '12fd5b949f993855dc866904a13c5acc870f215c' }))));
+    }
+    static get style() { return modalCss; }
+}, [257, "voa-modal", {
+        "open": [4],
+        "isOpen": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Modal);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaModal = Modal;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaModal, defineCustomElement };
+//# sourceMappingURL=voa-modal.js.map
+
+//# sourceMappingURL=voa-modal.js.map

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

@@ -0,0 +1 @@
+{"file":"voa-modal.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,sbAAsb;;MCO1b,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AAChB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAeF;IAbC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC9C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAQ,CAAA,EACrD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAErC,EAAA,QAAA,CAAA,EACT,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-modal/modal.css?tag=voa-modal&encapsulation=shadow","src/components/voa-modal/modal.tsx"],"sourcesContent":[".modal {\r\n  display: none;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 1000;\r\n}\r\n\r\n.modal.open {\r\n  display: flex;\r\n}\r\n\r\n.overlay {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.content {\r\n  background-color: white;\r\n  padding: 20px;\r\n  border-radius: 8px;\r\n  position: relative;\r\n  z-index: 1001;\r\n}\r\n\r\n.close {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 10px;\r\n  font-size: 1.5rem;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-modal\",\r\n  styleUrl: \"modal.css\",\r\n  shadow: true,\r\n})\r\nexport class Modal {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  closeModal = () => {\r\n    this.isOpen = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div class={`modal ${this.isOpen ? \"open\" : \"\"}`}>\r\n        <div class=\"overlay\" onClick={this.closeModal}></div>\r\n        <div class=\"content\">\r\n          <button class=\"close\" onClick={this.closeModal}>\r\n            &times;\r\n          </button>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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

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

@@ -0,0 +1,109 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const voaOptionCss = ":host{display:inline-block;box-sizing:border-box;contain:content}:host(:focus){outline:none;}.option-container{display:inline-flex;align-items:center;position:relative;box-sizing:border-box;user-select:none;gap:0;width:100%;cursor:pointer}.option-container.option-disabled{cursor:not-allowed;pointer-events:none;opacity:0.5}.option-indicator{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;flex-shrink:0;width:20px;height:20px}.option-indicator-dot{display:block;position:absolute;}.option-label{display:inline-block;box-sizing:border-box;flex:1}";
+
+const VoaOption$1 = /*@__PURE__*/ proxyCustomElement(class VoaOption extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dsChange = createEvent(this, "dsChange");
+        this.internals = this.attachInternals();
+        /**
+         * Internal state for the checked status.
+         * Synced from the checked prop via @Watch.
+         */
+        this.internalChecked = false;
+        /**
+         * If true, this option is selected.
+         */
+        this.checked = false;
+        /**
+         * If true, this option is disabled.
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            // Radio logic: Clicking toggles the checked state.
+            // In a radio group, parent should uncheck siblings.
+            // For this isolated component, we toggle and emit the event.
+            this.internalChecked = !this.internalChecked;
+            this.checked = this.internalChecked; // Update the prop so it reflects to attribute
+            this.updateFormInternals();
+            this.dsChange.emit(this.value);
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled)
+                return;
+            if (ev.key === ' ' || ev.key === 'Enter') {
+                ev.preventDefault();
+                this.handleClick();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalChecked = this.checked;
+        this.updateFormInternals();
+    }
+    checkedChanged(newValue) {
+        this.internalChecked = newValue;
+        this.updateFormInternals();
+    }
+    /**
+     * Syncs with Native Form API
+     */
+    updateFormInternals() {
+        this.internals.setFormValue(this.internalChecked ? this.value : null);
+        this.internals.ariaChecked = this.internalChecked ? 'true' : 'false';
+        this.internals.ariaDisabled = this.disabled ? 'true' : 'false';
+    }
+    render() {
+        return (h(Host, { key: 'a49a02f2159f3bce112f07df847a4101006795f5', onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0 }, h("div", { key: '5efdd0734068fe0965061b87021ff2348617c147', part: "base", class: {
+                'option-container': true,
+                'option-disabled': this.disabled,
+                'option-checked': this.internalChecked,
+                'option-no-label': !this.label
+            } }, h("div", { key: '1c2180ab31d85b38cdf053cc190a4294a499439d', part: "indicator", class: "option-indicator" }, h("div", { key: 'f1b60c9e4ecc2d9fd55b3c725dbd9d6eb03b6ed4', part: "indicator-dot", class: "option-indicator-dot" })), this.label && (h("span", { key: 'e9d593927bb1a5eed33e304a5b789e82e6a4558a', part: "label", class: "option-label" }, this.label, h("slot", { key: '19ddb8536fb451c3a0fced8042ac018029b517be' }))))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "checked": ["checkedChanged"]
+    }; }
+    static get style() { return voaOptionCss; }
+}, [337, "voa-option", {
+        "checked": [516],
+        "disabled": [516],
+        "label": [1],
+        "name": [1],
+        "value": [1],
+        "internalChecked": [32]
+    }, undefined, {
+        "checked": ["checkedChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-option"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaOption$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaOption = VoaOption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaOption, defineCustomElement };
+//# sourceMappingURL=voa-option.js.map
+
+//# sourceMappingURL=voa-option.js.map

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

@@ -0,0 +1 @@
+{"file":"voa-option.js","mappings":"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","names":["VoaOption","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-option/voa-option.css?tag=voa-option&encapsulation=shadow","src/components/voa-option/voa-option.tsx"],"sourcesContent":["/* UNSTYLED PATTERN: Structural CSS only */\r\n\r\n:host {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n  contain: content;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none; /* Focus ring handled on part(base) via external CSS */\r\n}\r\n\r\n.option-container {\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  gap: 0;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}\r\n\r\n.option-container.option-disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n  opacity: 0.5;\r\n}\r\n\r\n/* The Radio Circle Container */\r\n.option-indicator {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  flex-shrink: 0;\r\n  \r\n  /* DEFAULT STRUCTURAL SIZE */\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n\r\n/* The Inner Dot */\r\n.option-indicator-dot {\r\n  display: block;\r\n  position: absolute;\r\n  /* Size must be set by external CSS or it is invisible */\r\n}\r\n\r\n.option-label {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n  flex: 1;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\n/**\r\n * Componente Option do Voa Design System - Radio Button Pattern\r\n * \r\n * Acts as a standalone radio option that can be used in a radio group.\r\n * Manages internal checked state and syncs with Native Form API via ElementInternals.\r\n * \r\n * @part base - Root container with flex layout\r\n * @part indicator - Outer radio circle container\r\n * @part indicator-dot - Inner dot (visible when checked)\r\n * @part label - Label text wrapper\r\n * \r\n * CSS Parts allow external styling via ::part() selectors using design tokens.\r\n * Supports delegated focus for better accessibility.\r\n */\r\n@Component({\r\n  tag: 'voa-option',\r\n  styleUrl: 'voa-option.css',\r\n  shadow: {\r\n    delegatesFocus: true\r\n  },\r\n  formAssociated: true\r\n})\r\nexport class VoaOption {\r\n  @Element() host: HTMLVoaOptionElement;\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  /**\r\n   * Internal state for the checked status.\r\n   * Synced from the checked prop via @Watch.\r\n   */\r\n  @State() internalChecked: boolean = false;\r\n\r\n  /**\r\n   * If true, this option is selected.\r\n   */\r\n  @Prop({ reflect: true }) checked: boolean = false;\r\n\r\n  /**\r\n   * If true, this option is disabled.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * The label text displayed next to the radio indicator.\r\n   * If not provided, only the indicator is shown.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * The name attribute for the radio group.\r\n   */\r\n  @Prop() name: string;\r\n\r\n  /**\r\n   * The value returned when this option is selected.\r\n   */\r\n  @Prop() value: string;\r\n\r\n  /**\r\n   * Emitted when the user selects this option.\r\n   */\r\n  @Event() dsChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    this.internalChecked = this.checked;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  @Watch('checked')\r\n  checkedChanged(newValue: boolean) {\r\n    this.internalChecked = newValue;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  /**\r\n   * Syncs with Native Form API\r\n   */\r\n  private updateFormInternals() {\r\n    this.internals.setFormValue(this.internalChecked ? this.value : null);\r\n    this.internals.ariaChecked = this.internalChecked ? 'true' : 'false';\r\n    this.internals.ariaDisabled = this.disabled ? 'true' : 'false';\r\n  }\r\n\r\n  private handleClick = () => {\r\n    if (this.disabled) return;\r\n\r\n    // Radio logic: Clicking toggles the checked state.\r\n    // In a radio group, parent should uncheck siblings.\r\n    // For this isolated component, we toggle and emit the event.\r\n    this.internalChecked = !this.internalChecked;\r\n    this.checked = this.internalChecked; // Update the prop so it reflects to attribute\r\n    this.updateFormInternals();\r\n    this.dsChange.emit(this.value);\r\n  };\r\n\r\n  private handleKeyDown = (ev: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n    if (ev.key === ' ' || ev.key === 'Enter') {\r\n      ev.preventDefault();\r\n      this.handleClick();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        onClick={this.handleClick}\r\n        onKeyDown={this.handleKeyDown}\r\n        tabIndex={this.disabled ? -1 : 0}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'option-container': true,\r\n            'option-disabled': this.disabled,\r\n            'option-checked': this.internalChecked,\r\n            'option-no-label': !this.label\r\n          }}\r\n        >\r\n          {/* visual radio indicator */}\r\n          <div part=\"indicator\" class=\"option-indicator\">\r\n            <div part=\"indicator-dot\" class=\"option-indicator-dot\"></div>\r\n          </div>\r\n\r\n          {/* Label Wrapper */}\r\n          {this.label && (\r\n            <span part=\"label\" class=\"option-label\">\r\n              {this.label}\r\n              <slot />\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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

package/dist/custom-elements/voa-pagination-item.js

@@ -0,0 +1,9 @@
+import { V as VoaPaginationItem$1, d as defineCustomElement$1 } from './p-CQr0ZKZZ.js';
+
+const VoaPaginationItem = VoaPaginationItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaPaginationItem, defineCustomElement };
+//# sourceMappingURL=voa-pagination-item.js.map
+
+//# sourceMappingURL=voa-pagination-item.js.map

package/dist/custom-elements/voa-pagination-item.js.map

@@ -0,0 +1 @@
+{"file":"voa-pagination-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

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

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

@@ -0,0 +1,116 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CQr0ZKZZ.js';
+
+const voaPaginationCss = ":host{display:block;box-sizing:border-box}.pagination-list{display:flex;align-items:center;list-style:none;padding:0;margin:0;gap:4px;}li{display:flex;margin:0;padding:0}";
+
+const VoaPagination$1 = /*@__PURE__*/ proxyCustomElement(class VoaPagination extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.voaPageChange = createEvent(this, "voaPageChange");
+        this.currentPage = 1;
+        this.totalPages = 1;
+        /**
+         * How many siblings to show around the current page.
+         * E.g., siblingCount=1 means: ... 4 [5] 6 ...
+         */
+        this.siblingCount = 1;
+        this.internalPage = 1;
+    }
+    handlePageChange(val) {
+        this.internalPage = val;
+    }
+    componentWillLoad() {
+        this.internalPage = this.currentPage;
+    }
+    onPageClick(page) {
+        if (page < 1 || page > this.totalPages || page === this.internalPage)
+            return;
+        this.internalPage = page;
+        this.voaPageChange.emit(this.internalPage);
+    }
+    /**
+     * THE ALGORITHM:
+     * Generates the range of numbers to display.
+     */
+    getPaginationRange() {
+        const totalPageNumbers = this.siblingCount + 5; // sibling + first + last + current + 2*dots
+        // Case 1: Total pages is small, show everything
+        if (totalPageNumbers >= this.totalPages) {
+            return Array.from({ length: this.totalPages }, (_, i) => i + 1);
+        }
+        const leftSiblingIndex = Math.max(this.internalPage - this.siblingCount, 1);
+        const rightSiblingIndex = Math.min(this.internalPage + this.siblingCount, this.totalPages);
+        const shouldShowLeftDots = leftSiblingIndex > 2;
+        const shouldShowRightDots = rightSiblingIndex < this.totalPages - 2;
+        const firstPageIndex = 1;
+        const lastPageIndex = this.totalPages;
+        // Case 2: No left dots, but right dots shown
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            let leftItemCount = 3 + 2 * this.siblingCount;
+            let leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+            return [...leftRange, '...', lastPageIndex];
+        }
+        // Case 3: No right dots, but left dots shown
+        if (shouldShowLeftDots && !shouldShowRightDots) {
+            let rightItemCount = 3 + 2 * this.siblingCount;
+            let rightRange = Array.from({ length: rightItemCount }, (_, i) => lastPageIndex - rightItemCount + i + 1);
+            return [firstPageIndex, '...', ...rightRange];
+        }
+        // Case 4: Both dots shown
+        if (shouldShowLeftDots && shouldShowRightDots) {
+            let middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, i) => leftSiblingIndex + i);
+            return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];
+        }
+    }
+    render() {
+        const paginationRange = this.getPaginationRange();
+        return (h(Host, { key: '87acc93be81f1e8446f923d569ede98b506d39f0' }, h("nav", { key: 'bb98a635c41d184a29bd796a63268db9819b46d3', role: "navigation", "aria-label": "Pagination" }, h("ul", { key: 'd9457fab43c97763bf2d9252f2d3b5660bf9a6eb', class: "pagination-list" }, h("li", { key: '549e36d444315203c43952d7d7ae2bedf985a697' }, h("voa-pagination-item", { key: '5d0c111b0d1e1fab9b803a5d32e1995c6954515c', type: "prev", disabled: this.internalPage === 1, onItemClick: () => this.onPageClick(this.internalPage - 1) })), paginationRange.map((pageNumber, index) => {
+            if (pageNumber === '...') {
+                return (h("li", { key: `dots-${index}` }, h("voa-pagination-item", { type: "ellipsis" })));
+            }
+            return (h("li", { key: pageNumber }, h("voa-pagination-item", { active: pageNumber === this.internalPage, onItemClick: () => this.onPageClick(pageNumber) }, pageNumber)));
+        }), h("li", { key: '7592d17b5d2ec1697377bd5d545162f2446a3828' }, h("voa-pagination-item", { key: 'b4961409192136247c6d62b59b093e5719f925a0', type: "next", disabled: this.internalPage === this.totalPages, onItemClick: () => this.onPageClick(this.internalPage + 1) }))))));
+    }
+    static get watchers() { return {
+        "currentPage": ["handlePageChange"]
+    }; }
+    static get style() { return voaPaginationCss; }
+}, [257, "voa-pagination", {
+        "currentPage": [2, "current-page"],
+        "totalPages": [2, "total-pages"],
+        "siblingCount": [2, "sibling-count"],
+        "internalPage": [32]
+    }, undefined, {
+        "currentPage": ["handlePageChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-pagination", "voa-pagination-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaPagination$1);
+            }
+            break;
+        case "voa-pagination-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaPagination = VoaPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaPagination, defineCustomElement };
+//# sourceMappingURL=voa-pagination.js.map
+
+//# sourceMappingURL=voa-pagination.js.map

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

@@ -0,0 +1 @@
+{"file":"voa-pagination.js","mappings":"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","names":["VoaPagination","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-pagination/voa-pagination.css?tag=voa-pagination&encapsulation=shadow","src/components/voa-pagination/voa-pagination.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.pagination-list {\r\n  display: flex;\r\n  align-items: center;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  gap: 4px;\r\n  /* Default gap, can be overridden externally */\r\n}\r\n\r\nli {\r\n  display: flex;\r\n  margin: 0;\r\n  padding: 0;\r\n}","import { Component, Prop, h, Event, EventEmitter, Host, State, Watch } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-pagination\",\r\n  styleUrl: \"voa-pagination.css\",\r\n  shadow: true,\r\n})\r\nexport class VoaPagination {\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() totalPages: number = 1;\r\n\r\n  /**\r\n   * How many siblings to show around the current page.\r\n   * E.g., siblingCount=1 means: ... 4 [5] 6 ...\r\n   */\r\n  @Prop() siblingCount: number = 1;\r\n\r\n  @Event() voaPageChange: EventEmitter<number>;\r\n\r\n  @State() internalPage: number = 1;\r\n\r\n  @Watch('currentPage')\r\n  handlePageChange(val: number) {\r\n    this.internalPage = val;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalPage = this.currentPage;\r\n  }\r\n\r\n  private onPageClick(page: number) {\r\n    if (page < 1 || page > this.totalPages || page === this.internalPage) return;\r\n    this.internalPage = page;\r\n    this.voaPageChange.emit(this.internalPage);\r\n  }\r\n\r\n  /**\r\n   * THE ALGORITHM:\r\n   * Generates the range of numbers to display.\r\n   */\r\n  private getPaginationRange() {\r\n    const totalPageNumbers = this.siblingCount + 5; // sibling + first + last + current + 2*dots\r\n\r\n    // Case 1: Total pages is small, show everything\r\n    if (totalPageNumbers >= this.totalPages) {\r\n      return Array.from({ length: this.totalPages }, (_, i) => i + 1);\r\n    }\r\n\r\n    const leftSiblingIndex = Math.max(this.internalPage - this.siblingCount, 1);\r\n    const rightSiblingIndex = Math.min(this.internalPage + this.siblingCount, this.totalPages);\r\n\r\n    const shouldShowLeftDots = leftSiblingIndex > 2;\r\n    const shouldShowRightDots = rightSiblingIndex < this.totalPages - 2;\r\n\r\n    const firstPageIndex = 1;\r\n    const lastPageIndex = this.totalPages;\r\n\r\n    // Case 2: No left dots, but right dots shown\r\n    if (!shouldShowLeftDots && shouldShowRightDots) {\r\n      let leftItemCount = 3 + 2 * this.siblingCount;\r\n      let leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);\r\n      return [...leftRange, '...', lastPageIndex];\r\n    }\r\n\r\n    // Case 3: No right dots, but left dots shown\r\n    if (shouldShowLeftDots && !shouldShowRightDots) {\r\n      let rightItemCount = 3 + 2 * this.siblingCount;\r\n      let rightRange = Array.from({ length: rightItemCount }, (_, i) => lastPageIndex - rightItemCount + i + 1);\r\n      return [firstPageIndex, '...', ...rightRange];\r\n    }\r\n\r\n    // Case 4: Both dots shown\r\n    if (shouldShowLeftDots && shouldShowRightDots) {\r\n      let middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, i) => leftSiblingIndex + i);\r\n      return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const paginationRange = this.getPaginationRange();\r\n\r\n    return (\r\n      <Host>\r\n        <nav role=\"navigation\" aria-label=\"Pagination\">\r\n          <ul class=\"pagination-list\">\r\n\r\n            {/* Previous Button */}\r\n            <li>\r\n              <voa-pagination-item\r\n                type=\"prev\"\r\n                disabled={this.internalPage === 1}\r\n                onItemClick={() => this.onPageClick(this.internalPage - 1)}\r\n              />\r\n            </li>\r\n\r\n            {/* Page Numbers */}\r\n            {paginationRange.map((pageNumber, index) => {\r\n              if (pageNumber === '...') {\r\n                return (\r\n                  <li key={`dots-${index}`}>\r\n                    <voa-pagination-item type=\"ellipsis\" />\r\n                  </li>\r\n                );\r\n              }\r\n\r\n              return (\r\n                <li key={pageNumber}>\r\n                  <voa-pagination-item\r\n                    active={pageNumber === this.internalPage}\r\n                    onItemClick={() => this.onPageClick(pageNumber as number)}\r\n                  >\r\n                    {pageNumber}\r\n                  </voa-pagination-item>\r\n                </li>\r\n              );\r\n            })}\r\n\r\n            {/* Next Button */}\r\n            <li>\r\n              <voa-pagination-item\r\n                type=\"next\"\r\n                disabled={this.internalPage === this.totalPages}\r\n                onItemClick={() => this.onPageClick(this.internalPage + 1)}\r\n              />\r\n            </li>\r\n\r\n          </ul>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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

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

@@ -0,0 +1,42 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+
+const progressCss = ".progress{width:100%;background-color:#eee;border-radius:4px;overflow:hidden}.bar{height:20px;background-color:#007bff;transition:width 0.2s}";
+
+const Progress = /*@__PURE__*/ proxyCustomElement(class Progress extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.value = 0;
+    }
+    render() {
+        return (h("div", { key: '34f14ecb7f4fa544020adbd4ea3ca55dabd96afc', class: "progress" }, h("div", { key: '4ee9008528a1029c42a4cf3b8b8d98dc6892f4c6', class: "bar", style: { width: `${this.value}%` } })));
+    }
+    static get style() { return progressCss; }
+}, [257, "voa-progress", {
+        "value": [2]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-progress"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-progress":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Progress);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaProgress = Progress;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaProgress, defineCustomElement };
+//# sourceMappingURL=voa-progress.js.map
+
+//# sourceMappingURL=voa-progress.js.map

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

@@ -0,0 +1 @@
+{"file":"voa-progress.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+IAA+I;;MCOtJ,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAS1B;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,EAAQ,CAAA,CACvD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-progress/progress.css?tag=voa-progress&encapsulation=shadow","src/components/voa-progress/progress.tsx"],"sourcesContent":[".progress {\r\n  width: 100%;\r\n  background-color: #eee;\r\n  border-radius: 4px;\r\n  overflow: hidden;\r\n}\r\n\r\n.bar {\r\n  height: 20px;\r\n  background-color: #007bff;\r\n  transition: width 0.2s;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-progress\",\r\n  styleUrl: \"progress.css\",\r\n  shadow: true,\r\n})\r\nexport class Progress {\r\n  @Prop() value: number = 0;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"progress\">\r\n        <div class=\"bar\" style={{ width: `${this.value}%` }}></div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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

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

@@ -0,0 +1,88 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+
+const voaRadioCss = ":host{display:inline-block}.voa-radio{display:inline-flex;align-items:center;position:relative;user-select:none;cursor:pointer;box-sizing:border-box}.voa-radio--disabled{cursor:not-allowed;pointer-events:none}.voa-radio__input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.voa-radio__indicator{position:relative;display:grid;place-content:center;flex-shrink:0;box-sizing:border-box;width:20px;height:20px;border-radius:50%}.voa-radio__dot{position:absolute;left:50%;top:50%;margin-left:-4px;margin-top:-4px;width:8px;height:8px;border-radius:50%;transform:scale(0);box-sizing:border-box;opacity:0}.voa-radio--checked .voa-radio__dot{transform:scale(1);opacity:1}:host(:focus-within){outline:none}@media (prefers-reduced-motion: reduce){.voa-radio__indicator,.voa-radio__dot{transition:none}}";
+
+const VoaRadio$1 = /*@__PURE__*/ proxyCustomElement(class VoaRadio extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.radioChange = createEvent(this, "radioChange");
+        this.radioFocus = createEvent(this, "radioFocus");
+        this.radioBlur = createEvent(this, "radioBlur");
+        /**
+         * Se verdadeiro, o radio button estará selecionado.
+         */
+        this.checked = false;
+        /**
+         * Se verdadeiro, o radio button estará desabilitado.
+         */
+        this.disabled = false;
+        this.handleChange = (event) => {
+            const input = event.target;
+            this.checked = input.checked;
+            this.radioChange.emit({
+                checked: this.checked,
+                value: this.value,
+                name: this.name
+            });
+        };
+        this.handleFocus = () => {
+            this.radioFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.radioBlur.emit();
+        };
+    }
+    /**
+     * Método para delegar foco ao elemento interno do radio.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    async setFocus() {
+        var _a;
+        const input = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="radio"]');
+        if (input) {
+            input.focus();
+        }
+    }
+    render() {
+        const containerClasses = {
+            'voa-radio': true,
+            'voa-radio--checked': this.checked,
+            'voa-radio--disabled': this.disabled
+        };
+        return (h("label", { key: '1720c583901aa4dabb6d7238fa66be45e1fa3493', part: "base", class: containerClasses, "aria-disabled": this.disabled ? 'true' : undefined, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("input", { key: 'ddc79a737e4db289b18f971dda13ff0454a49d95', type: "radio", part: "input", class: "voa-radio__input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("span", { key: '6ef749a8899c67e2b97c9aa838d20c8d93afbc94', class: "voa-radio__indicator", part: "indicator" }, h("span", { key: 'cc353745dc55b5f1b376244c83e1eac9eb8de30a', class: "voa-radio__dot", part: "dot" }))));
+    }
+    get host() { return this; }
+    static get style() { return voaRadioCss; }
+}, [257, "voa-radio", {
+        "checked": [516],
+        "disabled": [516],
+        "name": [1],
+        "value": [1],
+        "setFocus": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-radio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaRadio$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaRadio = VoaRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaRadio, defineCustomElement };
+//# sourceMappingURL=voa-radio.js.map
+
+//# sourceMappingURL=voa-radio.js.map

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

@@ -0,0 +1 @@
+{"file":"voa-radio.js","mappings":";;AAAA,MAAM,WAAW,GAAG,g0BAAg0B;;MCmBv0BA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AANrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;AAQE;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2B1C,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO;AAE5B,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC;AACZ,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACxB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,SAAC;AA+CF;AA7CC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;;AACZ,QAAA,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,qBAAqB,CAAqB;QAC5F,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,KAAK,EAAE;;;IAIjB,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,WAAW,EAAE,IAAI;YACjB,oBAAoB,EAAE,IAAI,CAAC,OAAO;YAClC,qBAAqB,EAAE,IAAI,CAAC;SAC7B;AAED,QAAA,QACE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,gBAAgB,EAAA,eAAA,EACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAAA,EAE7C,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,WAAW,EAAA,EACjD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,KAAK,EAAQ,CAAA,CAC1C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaRadio","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-radio/voa-radio.css?tag=voa-radio&encapsulation=shadow","src/components/voa-radio/voa-radio.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: inline-block;\r\n}\r\n\r\n.voa-radio {\r\n  /* Structural styles only */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  position: relative;\r\n  user-select: none;\r\n  cursor: pointer;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-radio--disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.voa-radio__input {\r\n  /* Structural styles only - visually hidden but accessible */\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 0;\r\n  height: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.voa-radio__indicator {\r\n  /* Structural styles only - Tamanho fixo 20px conforme Figma */\r\n  position: relative;\r\n  display: grid;\r\n  place-content: center;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n}\r\n\r\n.voa-radio__dot {\r\n  /* Structural styles only - Tamanho fixo 8px conforme Figma */\r\n  position: absolute;\r\n  /* Centralizar perfeitamente independente de borders */\r\n  left: 50%;\r\n  top: 50%;\r\n  /* Usar margin negativo para centralizar baseado no tamanho do dot (8px / 2 = 4px) */\r\n  margin-left: -4px;\r\n  margin-top: -4px;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n  transform: scale(0);\r\n  box-sizing: border-box;\r\n  opacity: 0;\r\n}\r\n\r\n.voa-radio--checked .voa-radio__dot {\r\n  transform: scale(1);\r\n  opacity: 1;\r\n}\r\n\r\n/* Acessibilidade */\r\n:host(:focus-within) {\r\n  outline: none;\r\n}\r\n\r\n/* Respeitar preferências de movimento reduzido */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .voa-radio__indicator,\r\n  .voa-radio__dot {\r\n    transition: none;\r\n  }\r\n} ","import { Component, Prop, Event, EventEmitter, Method, Element, h } from '@stencil/core';\r\n\r\n/**\r\n * Componente Radio Button do Voa Design System, baseado no design do Figma.\r\n * Permite seleção única dentro de um grupo de opções.\r\n * Este é o componente base do radio (apenas o indicador visual).\r\n * Para opções com label, use o componente voa-option.\r\n * \r\n * @part base - The root label element\r\n * @part input - The native radio input element\r\n * @part indicator - The visual radio indicator circle (20px)\r\n * @part dot - The inner dot when checked (8px)\r\n */\r\n@Component({\r\n  tag: 'voa-radio',\r\n  styleUrl: 'voa-radio.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaRadio {\r\n  @Element() host: HTMLVoaRadioElement;\r\n  /**\r\n   * Se verdadeiro, o radio button estará selecionado.\r\n   */\r\n  @Prop({ reflect: true }) checked: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o radio button estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Nome do grupo de radio buttons (usado para agrupamento).\r\n   */\r\n  @Prop() name: string;\r\n\r\n  /**\r\n   * Valor do radio button quando selecionado.\r\n   */\r\n  @Prop() value: string;\r\n\r\n  /**\r\n   * Evento emitido quando o estado do radio button muda.\r\n   */\r\n  @Event() radioChange: EventEmitter<{ checked: boolean; value: string; name: string }>;\r\n\r\n  /**\r\n   * Evento emitido quando o radio button recebe foco.\r\n   */\r\n  @Event() radioFocus: EventEmitter<void>;\r\n\r\n  /**\r\n   * Evento emitido quando o radio button perde foco.\r\n   */\r\n  @Event() radioBlur: EventEmitter<void>;\r\n\r\n  private handleChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.checked = input.checked;\r\n    \r\n    this.radioChange.emit({\r\n      checked: this.checked,\r\n      value: this.value,\r\n      name: this.name\r\n    });\r\n  };\r\n\r\n  private handleFocus = () => {\r\n    this.radioFocus.emit();\r\n  };\r\n\r\n  private handleBlur = () => {\r\n    this.radioBlur.emit();\r\n  };\r\n\r\n  /**\r\n   * Método para delegar foco ao elemento interno do radio.\r\n   * Requerido para acessibilidade WCAG 2.2 AA.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const input = this.host.shadowRoot?.querySelector('input[type=\"radio\"]') as HTMLInputElement;\r\n    if (input) {\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const containerClasses = {\r\n      'voa-radio': true,\r\n      'voa-radio--checked': this.checked,\r\n      'voa-radio--disabled': this.disabled\r\n    };\r\n\r\n    return (\r\n      <label \r\n        part=\"base\"\r\n        class={containerClasses}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        role=\"radio\"\r\n        aria-checked={this.checked ? 'true' : 'false'}\r\n      >\r\n        <input\r\n          type=\"radio\"\r\n          part=\"input\"\r\n          class=\"voa-radio__input\"\r\n          checked={this.checked}\r\n          disabled={this.disabled}\r\n          name={this.name}\r\n          value={this.value}\r\n          onChange={this.handleChange}\r\n          onFocus={this.handleFocus}\r\n          onBlur={this.handleBlur}\r\n        />\r\n        <span class=\"voa-radio__indicator\" part=\"indicator\">\r\n          <span class=\"voa-radio__dot\" part=\"dot\"></span>\r\n        </span>\r\n      </label>\r\n    );\r\n  }\r\n} "],"version":3}

package/dist/custom-elements/voa-select-base.d.ts

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

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

@@ -0,0 +1,9 @@
+import { V as VoaSelectBase$1, d as defineCustomElement$1 } from './p-DKnM_Ozb.js';
+
+const VoaSelectBase = VoaSelectBase$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaSelectBase, defineCustomElement };
+//# sourceMappingURL=voa-select-base.js.map
+
+//# sourceMappingURL=voa-select-base.js.map

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

@@ -0,0 +1 @@
+{"file":"voa-select-base.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

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