voa-ds-core 1.0.4

package/dist/esm/voa-option.entry.js.map

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

package/dist/esm/voa-pagination-item.entry.js

@@ -0,0 +1,51 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Dh8480Ec.js';
+
+const voaPaginationItemCss = ":host{display:inline-block;box-sizing:border-box}.base-button{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;background:none;border:none;cursor:pointer;padding:0;margin:0;min-width:32px;height:32px}:host([type=\"ellipsis\"]) .content{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px}.icon-wrapper{display:flex;align-items:center;justify-content:center}";
+
+const VoaPaginationItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemClick = createEvent(this, "itemClick");
+        /**
+         * The type of item to render.
+         * - page: A standard page number
+         * - ellipsis: The "..." separator
+         * - prev/next: Navigation arrows
+         */
+        this.type = 'page';
+        /**
+         * Is this the current active page?
+         */
+        this.active = false;
+        /**
+         * Is this item disabled?
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (!this.disabled && this.type !== 'ellipsis') {
+                this.itemClick.emit();
+            }
+        };
+    }
+    renderIcon() {
+        if (this.type === 'prev') {
+            return (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "15 18 9 12 15 6" })));
+        }
+        if (this.type === 'next') {
+            return (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "9 18 15 12 9 6" })));
+        }
+        return null;
+    }
+    render() {
+        // Ellipsis are not interactive
+        if (this.type === 'ellipsis') {
+            return (h(Host, { "aria-hidden": "true" }, h("div", { part: "content", class: "content" }, "...")));
+        }
+        return (h(Host, { onClick: this.handleClick, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("button", { type: "button", part: "base", class: "base-button", disabled: this.disabled, tabIndex: this.disabled ? -1 : 0 }, h("span", { part: "content", class: "content" }, (this.type === 'prev' || this.type === 'next') ? (h("span", { part: "icon", class: "icon-wrapper" }, this.renderIcon())) : (h("slot", null))))));
+    }
+    get host() { return getElement(this); }
+};
+VoaPaginationItem.style = voaPaginationItemCss;
+
+export { VoaPaginationItem as voa_pagination_item };
+//# sourceMappingURL=voa-pagination-item.entry.js.map

package/dist/esm/voa-pagination-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-pagination-item.entry.js","sources":["src/components/voa-pagination/voa-pagination-item.css?tag=voa-pagination-item&encapsulation=shadow","src/components/voa-pagination/voa-pagination-item.tsx"],"sourcesContent":[":host {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.base-button {\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  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  min-width: 32px;\r\n  /* Structural minimums */\r\n  height: 32px;\r\n}\r\n\r\n:host([type=\"ellipsis\"]) .content {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n}\r\n\r\n.icon-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}","import { Component, Prop, h, Host, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-pagination-item',\r\n  styleUrl: 'voa-pagination-item.css',\r\n  shadow: true,\r\n})\r\nexport class VoaPaginationItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * The type of item to render.\r\n   * - page: A standard page number\r\n   * - ellipsis: The \"...\" separator\r\n   * - prev/next: Navigation arrows\r\n   */\r\n  @Prop({ reflect: true }) type: 'page' | 'ellipsis' | 'prev' | 'next' = 'page';\r\n\r\n  /**\r\n   * Is this the current active page?\r\n   */\r\n  @Prop({ reflect: true }) active: boolean = false;\r\n\r\n  /**\r\n   * Is this item disabled?\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  @Event() itemClick: EventEmitter<void>;\r\n\r\n  private handleClick = () => {\r\n    if (!this.disabled && this.type !== 'ellipsis') {\r\n      this.itemClick.emit();\r\n    }\r\n  };\r\n\r\n  private renderIcon() {\r\n    if (this.type === 'prev') {\r\n      return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"15 18 9 12 15 6\"></polyline>\r\n        </svg>\r\n      );\r\n    }\r\n    if (this.type === 'next') {\r\n      return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n        </svg>\r\n      );\r\n    }\r\n    return null;\r\n  }\r\n\r\n  render() {\r\n    // Ellipsis are not interactive\r\n    if (this.type === 'ellipsis') {\r\n      return (\r\n        <Host aria-hidden=\"true\">\r\n          <div part=\"content\" class=\"content\">...</div>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host\r\n        onClick={this.handleClick}\r\n        aria-current={this.active ? 'page' : undefined}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          part=\"base\"\r\n          class=\"base-button\"\r\n          disabled={this.disabled}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n        >\r\n          <span part=\"content\" class=\"content\">\r\n            {(this.type === 'prev' || this.type === 'next') ? (\r\n              <span part=\"icon\" class=\"icon-wrapper\">\r\n                {this.renderIcon()}\r\n              </span>\r\n            ) : (\r\n              <slot />\r\n            )}\r\n          </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,6bAA6b;;MCO7c,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQE;;;;;AAKG;AACsB,QAAA,IAAI,CAAA,IAAA,GAA0C,MAAM;AAE7E;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAI1C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC9C,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;AAEzB,SAAC;AAwDF;IAtDS,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACxB,YAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAgB,gBAAA,EAAA,OAAO,qBAAiB,OAAO,EAAA,EACxH,CAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAY,CAAA,CAC1C;;AAGV,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACxB,YAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAgB,gBAAA,EAAA,OAAO,qBAAiB,OAAO,EAAA,EACxH,CAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,gBAAgB,EAAY,CAAA,CACzC;;AAGV,QAAA,OAAO,IAAI;;IAGb,MAAM,GAAA;;AAEJ,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC5B,YAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAa,MAAM,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,KAAA,CAAU,CACxC;;AAIX,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,IAAI,CAAC,WAAW,EACX,cAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAAA,eAAA,EAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,EAEjD,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EACjC,EAAA,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,KAC5C,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,EACnC,IAAI,CAAC,UAAU,EAAE,CACb,KAEP,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACT,CACI,CACA,CACJ;;;;;;;;"}

package/dist/esm/voa-pagination.entry.js

@@ -0,0 +1,80 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Dh8480Ec.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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"]
+    }; }
+};
+VoaPagination.style = voaPaginationCss;
+
+export { VoaPagination as voa_pagination };
+//# sourceMappingURL=voa-pagination.entry.js.map

package/dist/esm/voa-pagination.entry.js.map

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

package/dist/esm/voa-progress.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-Dh8480Ec.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = 0;
+    }
+    render() {
+        return (h("div", { key: '34f14ecb7f4fa544020adbd4ea3ca55dabd96afc', class: "progress" }, h("div", { key: '4ee9008528a1029c42a4cf3b8b8d98dc6892f4c6', class: "bar", style: { width: `${this.value}%` } })));
+    }
+};
+Progress.style = progressCss;
+
+export { Progress as voa_progress };
+//# sourceMappingURL=voa-progress.entry.js.map

package/dist/esm/voa-progress.entry.js.map

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

package/dist/esm/voa-radio.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Dh8480Ec.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+};
+VoaRadio.style = voaRadioCss;
+
+export { VoaRadio as voa_radio };
+//# sourceMappingURL=voa-radio.entry.js.map

package/dist/esm/voa-radio.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-radio.entry.js","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} "],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,g0BAAg0B;;MCmBv0B,QAAQ,GAAA,MAAA;AANrB,IAAA,WAAA,CAAA,OAAA,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;;;;;;;;"}

package/dist/esm/voa-select-base.entry.js

@@ -0,0 +1,175 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Dh8480Ec.js';
+
+const voaSelectBaseCss = ":host{display:block;width:100%;position:relative;box-sizing:border-box;overflow:visible}.voa-select{position:relative;width:100%;min-height:48px;box-sizing:border-box;overflow:visible}.voa-select__control{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;height:100%;box-sizing:border-box;cursor:pointer;border:none;outline:none;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;appearance:none;-webkit-appearance:none;-moz-appearance:none}.voa-select--disabled .voa-select__control{cursor:not-allowed;pointer-events:none}.voa-select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.voa-select__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;transition:transform 0.2s ease}.voa-select--open .voa-select__indicator{transform:rotate(180deg)}.voa-select__dropdown-icon{pointer-events:none;display:block}.voa-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;max-height:200px;overflow-y:auto;box-sizing:border-box;display:block;background-color:var(--colors-structure-bg-base, #ffffff);border:1.125px solid var(--colors-structure-border-color, #adb5bd);border-radius:15.75px;box-shadow:0px 8px 16px rgba(0, 0, 0, 0.15), \r\n              0px 0px 0px 0.5px var(--colors-structure-border-color, #adb5bd),\r\n              inset 0px 0px 0px 1px var(--colors-structure-border-color, #adb5bd);padding:8px 0;animation:dropdownEnter 0.2s ease-out forwards;opacity:1;transform:translateY(0)}@keyframes dropdownEnter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.voa-select__dropdown--hidden{animation:dropdownExit 0.15s ease-in forwards;display:none;pointer-events:none}.voa-select__option{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:8px 12px}.voa-select__option--disabled{cursor:not-allowed;pointer-events:none}.voa-select__option--active{background-color:rgba(0, 0, 0, 0.05)}.voa-select__option--selected{background-color:rgba(0, 100, 203, 0.1)}";
+
+const VoaSelectBase = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.voaChange = createEvent(this, "voaChange");
+        /**
+         * Lista de opções para seleção
+         */
+        this.options = [];
+        /**
+         * Texto de placeholder quando não há item selecionado
+         */
+        this.placeholder = 'Select an option';
+        /**
+         * Se verdadeiro, o select estará desabilitado.
+         */
+        this.disabled = false;
+        /**
+         * Se verdadeiro, o select terá estado de erro.
+         */
+        this.error = false;
+        /**
+         * Se verdadeiro, o select mostrará as opções.
+         */
+        this.isOpen = false;
+        /**
+         * Track which option is currently "highlighted" by the keyboard
+         * (Not necessarily selected yet).
+         */
+        this.activeIndex = -1;
+        this.listboxId = `voa-listbox-${Math.random().toString(36).substr(2, 9)}`;
+        this.toggleDropdown = () => {
+            if (this.disabled)
+                return;
+            if (this.isOpen) {
+                this.closeDropdown();
+            }
+            else {
+                this.openDropdown();
+            }
+        };
+        this.handleSelect = (val) => {
+            if (this.disabled)
+                return;
+            this.innerValue = val;
+            this.voaChange.emit(val);
+            this.closeDropdown();
+        };
+        /**
+         * THE KEYBOARD BRAIN
+         * This is what makes a Select a Select.
+         */
+        this.handleKeyDown = (ev) => {
+            if (this.disabled)
+                return;
+            switch (ev.key) {
+                case 'Enter':
+                case ' ':
+                    ev.preventDefault();
+                    if (this.isOpen) {
+                        if (this.activeIndex >= 0 && this.options[this.activeIndex]) {
+                            this.handleSelect(this.options[this.activeIndex].value);
+                        }
+                    }
+                    else {
+                        this.openDropdown();
+                    }
+                    break;
+                case 'ArrowDown':
+                    ev.preventDefault();
+                    if (!this.isOpen) {
+                        this.openDropdown();
+                    }
+                    else {
+                        this.activeIndex = Math.min(this.activeIndex + 1, this.options.length - 1);
+                        this.scrollToActive();
+                    }
+                    break;
+                case 'ArrowUp':
+                    ev.preventDefault();
+                    if (this.isOpen) {
+                        this.activeIndex = Math.max(this.activeIndex - 1, 0);
+                        this.scrollToActive();
+                    }
+                    break;
+                case 'Escape':
+                    if (this.isOpen) {
+                        ev.preventDefault();
+                        this.closeDropdown();
+                    }
+                    break;
+                case 'Tab':
+                    // If user tabs away, close it.
+                    if (this.isOpen) {
+                        this.closeDropdown();
+                    }
+                    break;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.innerValue = this.value;
+    }
+    syncValue(val) {
+        this.innerValue = val;
+    }
+    handleOutsideClick(ev) {
+        const path = ev.composedPath();
+        if (this.isOpen && !path.includes(this.host)) {
+            this.closeDropdown();
+        }
+    }
+    openDropdown() {
+        this.isOpen = true;
+        // Find the index of the currently selected value to highlight it
+        const index = this.options.findIndex(o => o.value === this.innerValue);
+        this.activeIndex = index >= 0 ? index : 0;
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.activeIndex = -1;
+    }
+    scrollToActive() {
+        // Logic to scroll the dropdown container to keep the active item in view
+        // Implementation omitted for brevity, but vital for production
+    }
+    getDisplayText() {
+        const selected = this.options.find(o => o.value === this.innerValue);
+        return selected ? selected.label : this.placeholder;
+    }
+    /**
+     * Método para delegar foco ao elemento interno do select.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    async setFocus() {
+        var _a;
+        const control = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="control"]');
+        if (control) {
+            control.focus();
+        }
+    }
+    render() {
+        const activeId = this.activeIndex >= 0 ? `${this.listboxId}-opt-${this.activeIndex}` : undefined;
+        return (h("div", { key: 'bfc22f9fc559870dab16294a325a5bc55060f99e', part: "base", class: {
+                'voa-select': true,
+                'voa-select--open': this.isOpen,
+                'voa-select--disabled': this.disabled,
+            },
+            // The container handles keydown
+            onKeyDown: this.handleKeyDown }, h("button", { key: 'dc192bef1f52d80e74a1365d683b17aacda46699', part: "control", type: "button", class: "voa-select__control", onClick: this.toggleDropdown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": this.listboxId, "aria-activedescendant": this.isOpen ? activeId : undefined, disabled: this.disabled }, h("span", { key: 'ae5e57687de6b46dc423139e77637555632972f6', part: "value", class: "voa-select__value" }, this.getDisplayText()), h("span", { key: '56f46e6aa3a087421ec8b4d059cea3afe5a8df55', part: "indicator", class: "voa-select__indicator" }, h("slot", { key: 'ac55becc8c000d90d55995e98489d4902fbeacdb', name: "indicator" }, h("svg", { key: '26b2d68fd9da3af50dcb5cb8a7dbed3cdbb38d76', width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", stroke: "currentColor" }, h("path", { key: 'b2c38a6bdd672f49bb615ed29c3303f9dbbcf53f', d: "M1 1L5 5L9 1", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '59589921d080699e294838fbfb68f88a9a826a15', id: this.listboxId, part: "dropdown", class: {
+                'voa-select__dropdown': true,
+                'voa-select__dropdown--hidden': !this.isOpen,
+            }, role: "listbox", tabindex: "-1", "aria-hidden": !this.isOpen ? 'true' : undefined }, this.options.map((option, index) => {
+            const isSelected = option.value === this.innerValue;
+            const isActive = index === this.activeIndex;
+            return (h("div", { id: `${this.listboxId}-opt-${index}`, part: "option", class: {
+                    'voa-select__option': true,
+                    'voa-select__option--selected': isSelected,
+                    'voa-select__option--active': isActive, // Highlighted by keyboard
+                    'voa-select__option--disabled': !!option.disabled,
+                }, role: "option", "aria-selected": isSelected ? 'true' : 'false', onClick: () => !option.disabled && this.handleSelect(option.value), onMouseEnter: () => (this.activeIndex = index) }, option.label));
+        }))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["syncValue"]
+    }; }
+};
+VoaSelectBase.style = voaSelectBaseCss;
+
+export { VoaSelectBase as voa_select_base };
+//# sourceMappingURL=voa-select-base.entry.js.map

package/dist/esm/voa-select-base.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-select-base.entry.js","sources":["src/components/voa-select/voa-select-base.css?tag=voa-select-base&encapsulation=shadow","src/components/voa-select/voa-select-base.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  /* Garantir que o dropdown possa aparecer fora do container */\r\n  overflow: visible;\r\n}\r\n\r\n.voa-select {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  box-sizing: border-box;\r\n  /* Garantir que o dropdown possa aparecer fora do container */\r\n  overflow: visible;\r\n}\r\n\r\n.voa-select__control {\r\n  /* Structural styles only - Reset button defaults */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n  \r\n  /* Reset button defaults */\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: inherit;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n}\r\n\r\n.voa-select--disabled .voa-select__control {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.voa-select__value {\r\n  /* Structural styles only */\r\n  flex: 1;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-select__indicator {\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  transition: transform 0.2s ease;\r\n}\r\n\r\n.voa-select--open .voa-select__indicator {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.voa-select__dropdown-icon {\r\n  pointer-events: none;\r\n  display: block;\r\n}\r\n\r\n.voa-select__dropdown {\r\n  /* Structural styles only */\r\n  position: absolute;\r\n  top: calc(100% + 4px); /* Posicionado logo abaixo do control com 4px de espaço */\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 1000;\r\n  max-height: 200px;\r\n  overflow-y: auto;\r\n  box-sizing: border-box;\r\n  display: block;\r\n\r\n  /* Visual styles - White background */\r\n  background-color: var(--colors-structure-bg-base, #ffffff);\r\n  \r\n  /* Outline - border using same token as input field */\r\n  border: 1.125px solid var(--colors-structure-border-color, #adb5bd);\r\n  border-radius: 15.75px;\r\n\r\n  /* Shadow for elevation */\r\n  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15), \r\n              0px 0px 0px 0.5px var(--colors-structure-border-color, #adb5bd),\r\n              inset 0px 0px 0px 1px var(--colors-structure-border-color, #adb5bd);\r\n\r\n  /* Padding inside dropdown - vertical only */\r\n  padding: 8px 0;\r\n\r\n  /* Animation - entrance effect */\r\n  animation: dropdownEnter 0.2s ease-out forwards;\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n@keyframes dropdownEnter {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-8px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes dropdownExit {\r\n  from {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    transform: translateY(-8px);\r\n  }\r\n}\r\n\r\n/* Toggle logic handled by class in TSX */\r\n.voa-select__dropdown--hidden {\r\n  animation: dropdownExit 0.15s ease-in forwards;\r\n  display: none;\r\n  pointer-events: none;\r\n}\r\n\r\n.voa-select__option {\r\n  /* Structural styles only */\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  /* Padding to prevent text from touching borders */\r\n  padding: 8px 12px;\r\n}\r\n\r\n.voa-select__option--disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Active state (keyboard navigation highlight) */\r\n.voa-select__option--active {\r\n  /* Minimal visual feedback for keyboard navigation - external CSS will enhance */\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n/* Selected state */\r\n.voa-select__option--selected {\r\n  /* Minimal visual feedback for selected state - external CSS will enhance */\r\n  background-color: rgba(0, 100, 203, 0.1);\r\n} ","import { Component, Prop, Event, EventEmitter, Method, Element, h, State, Watch, Listen } from '@stencil/core';\r\n\r\n/**\r\n * Componente Base para Select do Voa Design System, baseado no design do Figma.\r\n * \r\n * @part base - The root select element\r\n * @part control - The select control button\r\n * @part value - The displayed value text\r\n * @part indicator - The dropdown indicator icon\r\n * @part dropdown - The dropdown menu container\r\n * @part option - Individual option element\r\n */\r\n@Component({\r\n  tag: 'voa-select-base',\r\n  styleUrl: 'voa-select-base.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaSelectBase {\r\n  @Element() host: HTMLElement;\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   * Texto de placeholder quando não há item selecionado\r\n   */\r\n  @Prop() placeholder: string = 'Select an option';\r\n\r\n  /**\r\n   * Se verdadeiro, o select estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o select terá estado de erro.\r\n   */\r\n  @Prop({ reflect: true }) error: boolean = false;\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   * Se verdadeiro, o select mostrará as opções.\r\n   */\r\n  @State() isOpen: boolean = false;\r\n\r\n  /**\r\n   * Track which option is currently \"highlighted\" by the keyboard\r\n   * (Not necessarily selected yet).\r\n   */\r\n  @State() activeIndex: number = -1;\r\n\r\n  /**\r\n   * Evento emitido quando o valor é alterado\r\n   */\r\n  @Event() voaChange: EventEmitter<string>;\r\n\r\n  private listboxId = `voa-listbox-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n  componentWillLoad() {\r\n    this.innerValue = this.value;\r\n  }\r\n\r\n  @Watch('value')\r\n  syncValue(val: string) {\r\n    this.innerValue = val;\r\n  }\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(ev: MouseEvent) {\r\n    const path = ev.composedPath();\r\n    if (this.isOpen && !path.includes(this.host)) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  private toggleDropdown = () => {\r\n    if (this.disabled) return;\r\n    if (this.isOpen) {\r\n      this.closeDropdown();\r\n    } else {\r\n      this.openDropdown();\r\n    }\r\n  };\r\n\r\n  private openDropdown() {\r\n    this.isOpen = true;\r\n    // Find the index of the currently selected value to highlight it\r\n    const index = this.options.findIndex(o => o.value === this.innerValue);\r\n    this.activeIndex = index >= 0 ? index : 0;\r\n  }\r\n\r\n  private closeDropdown() {\r\n    this.isOpen = false;\r\n    this.activeIndex = -1;\r\n  }\r\n\r\n  private handleSelect = (val: string) => {\r\n    if (this.disabled) return;\r\n    this.innerValue = val;\r\n    this.voaChange.emit(val);\r\n    this.closeDropdown();\r\n  };\r\n\r\n  /**\r\n   * THE KEYBOARD BRAIN\r\n   * This is what makes a Select a Select.\r\n   */\r\n  private handleKeyDown = (ev: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    switch (ev.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        ev.preventDefault();\r\n        if (this.isOpen) {\r\n          if (this.activeIndex >= 0 && this.options[this.activeIndex]) {\r\n            this.handleSelect(this.options[this.activeIndex].value);\r\n          }\r\n        } else {\r\n          this.openDropdown();\r\n        }\r\n        break;\r\n      case 'ArrowDown':\r\n        ev.preventDefault();\r\n        if (!this.isOpen) {\r\n          this.openDropdown();\r\n        } else {\r\n          this.activeIndex = Math.min(this.activeIndex + 1, this.options.length - 1);\r\n          this.scrollToActive();\r\n        }\r\n        break;\r\n      case 'ArrowUp':\r\n        ev.preventDefault();\r\n        if (this.isOpen) {\r\n          this.activeIndex = Math.max(this.activeIndex - 1, 0);\r\n          this.scrollToActive();\r\n        }\r\n        break;\r\n      case 'Escape':\r\n        if (this.isOpen) {\r\n          ev.preventDefault();\r\n          this.closeDropdown();\r\n        }\r\n        break;\r\n      case 'Tab':\r\n        // If user tabs away, close it.\r\n        if (this.isOpen) {\r\n          this.closeDropdown();\r\n        }\r\n        break;\r\n    }\r\n  };\r\n\r\n  private scrollToActive() {\r\n    // Logic to scroll the dropdown container to keep the active item in view\r\n    // Implementation omitted for brevity, but vital for production\r\n  }\r\n\r\n  private getDisplayText(): string {\r\n    const selected = this.options.find(o => o.value === this.innerValue);\r\n    return selected ? selected.label : this.placeholder;\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 control = this.host.shadowRoot?.querySelector('[part=\"control\"]') as HTMLElement;\r\n    if (control) {\r\n      control.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const activeId = this.activeIndex >= 0 ? `${this.listboxId}-opt-${this.activeIndex}` : undefined;\r\n\r\n    return (\r\n      <div\r\n        part=\"base\"\r\n        class={{\r\n          'voa-select': true,\r\n          'voa-select--open': this.isOpen,\r\n          'voa-select--disabled': this.disabled,\r\n        }}\r\n        // The container handles keydown\r\n        onKeyDown={this.handleKeyDown}\r\n      >\r\n        {/* CONTROL (The Trigger) */}\r\n        <button\r\n          part=\"control\"\r\n          type=\"button\"\r\n          class=\"voa-select__control\"\r\n          onClick={this.toggleDropdown}\r\n          aria-haspopup=\"listbox\"\r\n          aria-expanded={this.isOpen ? 'true' : 'false'}\r\n          aria-controls={this.listboxId}\r\n          aria-activedescendant={this.isOpen ? activeId : undefined}\r\n          disabled={this.disabled}\r\n        >\r\n          <span part=\"value\" class=\"voa-select__value\">\r\n            {this.getDisplayText()}\r\n          </span>\r\n          <span part=\"indicator\" class=\"voa-select__indicator\">\r\n            <slot name=\"indicator\">\r\n              {/* Default Chevron */}\r\n              <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" stroke=\"currentColor\">\r\n                <path d=\"M1 1L5 5L9 1\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            </slot>\r\n          </span>\r\n        </button>\r\n\r\n        {/* DROPDOWN (The Listbox) */}\r\n        <div\r\n          id={this.listboxId}\r\n          part=\"dropdown\"\r\n          class={{\r\n            'voa-select__dropdown': true,\r\n            'voa-select__dropdown--hidden': !this.isOpen,\r\n          }}\r\n          role=\"listbox\"\r\n          tabindex=\"-1\"\r\n          aria-hidden={!this.isOpen ? 'true' : undefined}\r\n        >\r\n          {this.options.map((option, index) => {\r\n            const isSelected = option.value === this.innerValue;\r\n            const isActive = index === this.activeIndex;\r\n\r\n            return (\r\n              <div\r\n                id={`${this.listboxId}-opt-${index}`}\r\n                part=\"option\"\r\n                class={{\r\n                  'voa-select__option': true,\r\n                  'voa-select__option--selected': isSelected,\r\n                  'voa-select__option--active': isActive, // Highlighted by keyboard\r\n                  'voa-select__option--disabled': !!option.disabled,\r\n                }}\r\n                role=\"option\"\r\n                aria-selected={isSelected ? 'true' : 'false'}\r\n                onClick={() => !option.disabled && this.handleSelect(option.value)}\r\n                onMouseEnter={() => (this.activeIndex = index)} // Mouse syncs with keyboard\r\n              >\r\n                {option.label}\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"],"names":[],"mappings":"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"}