voa-ds-core 1.0.3

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/loader.js

@@ -0,0 +1,11 @@
+import { g as globalScripts, b as bootstrapLazy } from './index-Dh8480Ec.js';
+export { s as setNonce } from './index-Dh8480Ec.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["voa-alert",[[257,"voa-alert",{"variant":[513],"type":[513],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"alertTitle":[1,"alert-title"],"description":[1],"showButtons":[4,"show-buttons"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"setFocus":[64]}]]],["voa-container-multi-select",[[257,"voa-container-multi-select",{"items":[16],"disabled":[4],"placeholder":[1],"selectedItems":[32]}]]],["voa-input-addon",[[257,"voa-input-addon",{"variant":[513],"prependContent":[1,"prepend-content"],"countryCode":[1,"country-code"],"buttonLabel":[1,"button-label"],"currency":[1],"currencyName":[1,"currency-name"],"shortcut":[1],"platform":[1],"setFocus":[64]}]]],["voa-pagination",[[257,"voa-pagination",{"currentPage":[2,"current-page"],"totalPages":[2,"total-pages"],"siblingCount":[2,"sibling-count"],"internalPage":[32]},null,{"currentPage":["handlePageChange"]}]]],["voa-select",[[257,"voa-select",{"type":[513],"label":[1],"showLabel":[4,"show-label"],"info":[4],"infoMessage":[1,"info-message"],"error":[4],"errorMessage":[1,"error-message"],"placeholder":[1],"value":[1],"options":[16],"disabled":[4],"innerValue":[32],"isFocused":[32],"currentState":[32],"setFocus":[64]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["syncValue"],"disabled":["updateState"],"isFocused":["updateState"]}]]],["voa-accordion",[[257,"voa-accordion",{"open":[516],"size":[513],"divider":[516],"isExpanded":[32],"setFocus":[64]},null,{"open":["watchOpenHandler"]}]]],["voa-avatar",[[257,"voa-avatar",{"type":[1],"size":[1],"initials":[1],"src":[1],"alt":[1],"setFocus":[64]}]]],["voa-breadcrumbs",[[257,"voa-breadcrumbs",{"type":[513]}]]],["voa-breadcrumbs-divider",[[257,"voa-breadcrumbs-divider",{"icon":[513]}]]],["voa-breadcrumbs-item",[[257,"voa-breadcrumbs-item",{"href":[1],"target":[1],"active":[516]}]]],["voa-card",[[257,"voa-card"]]],["voa-checkbox",[[337,"voa-checkbox",{"state":[513],"disabled":[516],"showLabel":[4,"show-label"],"name":[1],"value":[1],"internalState":[32]},null,{"state":["stateChanged"],"internalState":["internalStateChanged"]}]]],["voa-datepicker",[[257,"voa-datepicker",{"value":[1],"selectedDate":[32]}]]],["voa-drawer",[[257,"voa-drawer",{"open":[4],"isOpen":[32]}]]],["voa-dropdown",[[257,"voa-dropdown",{"options":[16],"isOpen":[32],"selected":[32]}]]],["voa-input",[[257,"voa-input",{"inputId":[1,"input-id"],"type":[1],"name":[1],"value":[1],"placeholder":[1],"label":[1],"helperText":[1,"helper-text"],"error":[516],"valid":[516],"warning":[516],"disabled":[516],"readonly":[516],"required":[516],"fill":[516],"size":[513],"showInfoIcon":[4,"show-info-icon"],"isFocused":[32],"hasPrefix":[32],"hasSuffix":[32],"hasInfo":[32],"internalValue":[32],"setFocus":[64]},null,{"value":["valueChanged"]}]]],["voa-link",[[257,"voa-link",{"href":[1],"target":[1]}]]],["voa-list",[[257,"voa-list",{"items":[16]}]]],["voa-modal",[[257,"voa-modal",{"open":[4],"isOpen":[32]}]]],["voa-option",[[337,"voa-option",{"checked":[516],"disabled":[516],"label":[1],"name":[1],"value":[1],"internalChecked":[32]},null,{"checked":["checkedChanged"]}]]],["voa-progress",[[257,"voa-progress",{"value":[2]}]]],["voa-radio",[[257,"voa-radio",{"checked":[516],"disabled":[516],"name":[1],"value":[1],"setFocus":[64]}]]],["voa-skeleton",[[256,"voa-skeleton",{"width":[1],"height":[1],"variant":[1]}]]],["voa-stepper",[[257,"voa-stepper",{"steps":[16],"currentStep":[2,"current-step"],"activeStep":[32]}]]],["voa-switch",[[337,"voa-switch",{"checked":[4],"disabled":[4],"showLabel":[4,"show-label"],"name":[1],"value":[1],"internalChecked":[32]},null,{"checked":["checkedChanged"]}]]],["voa-tab",[[257,"voa-tab",{"direction":[513],"activeIndex":[2,"active-index"],"internalIndex":[32]},[[0,"tabClick","handleTabSelected"]],{"activeIndex":["handleActiveIndexChange"]}]]],["voa-tab-item",[[257,"voa-tab-item",{"state":[513],"position":[513],"showBadge":[516,"show-badge"],"badgeCount":[2,"badge-count"],"disabled":[516],"itemIndex":[514,"item-index"],"setFocus":[64]}]]],["voa-table",[[257,"voa-table",{"data":[16],"columns":[16]}]]],["voa-tag",[[257,"voa-tag",{"label":[513],"variant":[513],"shape":[513],"size":[513],"iconLeft":[516,"icon-left"],"iconRight":[516,"icon-right"]}]]],["voa-text-area",[[337,"voa-text-area",{"textareaId":[1,"textarea-id"],"name":[1],"label":[1],"info":[4],"infoText":[1,"info-text"],"placeholder":[1],"value":[1],"maxLength":[2,"max-length"],"disabled":[516],"readonly":[516],"required":[4],"rows":[2],"cols":[2],"errorMessage":[1,"error-message"],"hasError":[516,"has-error"],"internalValue":[32],"isFocused":[32],"characterCount":[32],"setFocus":[64]},null,{"value":["valueChanged"]}]]],["voa-timepicker",[[257,"voa-timepicker",{"value":[1]}]]],["voa-tooltip",[[257,"voa-tooltip",{"position":[513],"theme":[513],"icon":[516],"text":[1],"ariaLabel":[1,"aria-label"],"isVisible":[32],"setFocus":[64]}]]],["voa-tooltip-arrow",[[257,"voa-tooltip-arrow",{"position":[513],"theme":[513]}]]],["voa-upload",[[257,"voa-upload"]]],["voa-badge",[[257,"voa-badge",{"label":[513],"count":[2],"icon":[513],"variant":[1],"shape":[513],"size":[1],"setFocus":[64]}]]],["voa-button",[[257,"voa-button",{"variant":[513],"size":[513],"disabled":[516],"loading":[516],"label":[1],"ariaLabel":[1,"aria-label"],"type":[1],"setFocus":[64]}]]],["voa-keybinding",[[257,"voa-keybinding",{"shortcut":[1],"platform":[1]}]]],["voa-pagination-item",[[257,"voa-pagination-item",{"type":[513],"active":[516],"disabled":[516]}]]],["voa-select-base",[[257,"voa-select-base",{"options":[16],"placeholder":[1],"disabled":[516],"error":[516],"value":[1],"innerValue":[32],"isOpen":[32],"activeIndex":[32],"setFocus":[64]},[[8,"click","handleOutsideClick"]],{"value":["syncValue"]}]]]], options);
+};
+
+export { defineCustomElements };
+//# sourceMappingURL=loader.js.map

package/dist/esm/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":[],"mappings":";;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;"}

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

@@ -0,0 +1,73 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Dh8480Ec.js';
+
+const voaAccordionCss = ":host{display:block;width:100%}.voa-accordion{display:flex;flex-direction:column}.voa-accordion__trigger{appearance:none;background:transparent;border:none;width:100%;padding:0;cursor:pointer;text-align:left}.voa-accordion__header-content{display:flex;align-items:center;justify-content:space-between;width:100%}.voa-accordion__title{flex-grow:1}.voa-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.voa-accordion__content{display:grid;grid-template-rows:1fr;}.voa-accordion__content-inner{overflow:hidden;min-height:0}";
+
+// Helper for unique IDs
+let accordionIds = 0;
+const VoaAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.voaToggle = createEvent(this, "voaToggle");
+        this.componentId = `voa-accordion-${accordionIds++}`;
+        /**
+         * If true, the accordion is expanded.
+         */
+        this.open = false;
+        /**
+         * Size variant.
+         */
+        this.size = 'md';
+        /**
+         * Shows the top divider.
+         */
+        this.divider = true;
+        // Internal state ensures the component works even if the parent doesn't update the prop immediately
+        this.isExpanded = false;
+        this.handleToggle = () => {
+            // Invert internal state immediately for UI responsiveness
+            this.isExpanded = !this.isExpanded;
+            // Update the open prop to reflect in the DOM attribute (for CSS selectors)
+            this.open = this.isExpanded;
+            // Tell the world what happened
+            this.voaToggle.emit(this.isExpanded);
+        };
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                this.handleToggle();
+            }
+        };
+    }
+    watchOpenHandler(newValue) {
+        this.isExpanded = newValue;
+    }
+    componentWillLoad() {
+        this.isExpanded = this.open;
+    }
+    async setFocus() {
+        var _a;
+        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+        button === null || button === void 0 ? void 0 : button.focus();
+    }
+    render() {
+        const headerId = `${this.componentId}-header`;
+        const contentId = `${this.componentId}-content`;
+        return (h(Host, { key: '9e50265508e1515149432b8d619a780735bf88d2' }, h("div", { key: 'b6ce00c6185e8fc23e3263eb926cf6f40696a3a4', part: "base", class: {
+                'voa-accordion': true,
+                [`voa-accordion--${this.size}`]: true,
+                'voa-accordion--open': this.isExpanded,
+                'voa-accordion--closed': !this.isExpanded,
+                'voa-accordion--divider': this.divider,
+            } }, h("div", { key: '57ed4fa16a27073d90106ffd92c5c1192ad14327', class: "voa-accordion__header-wrapper" }, h("button", { key: '08ed553d1436df26f636b1b2756c00f4a2911a25', part: "header", id: headerId, class: "voa-accordion__trigger", onClick: this.handleToggle, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": contentId }, h("div", { key: 'a5af08c83ebad9df32032d7dac6ff99234a08069', part: "header-content", class: "voa-accordion__header-content" }, h("span", { key: 'c4347d7274f9d8a03f55074dd2dee707991fa77a', part: "title", class: "voa-accordion__title" }, h("slot", { key: '5bd0e7b181595ad554b4fa477e442ad77f88d24e', name: "header" }, "Title")), h("span", { key: '37957ebe29ddde5e45c6f40e030ac2c10d75b791', part: "icon", class: "voa-accordion__icon" }, h("slot", { key: '99258f2cd2f0c3e8e75521757499007054c6264f', name: "icon" }, h("svg", { key: 'ae58b580cadc0d25042fd3d14938f6f1c47711e2', width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: {
+                transform: this.isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'
+            } }, h("path", { key: '7be1b4f5f63665e22d5e0adeabcc156d0dc8fbb0', d: "M7 10L12 15L17 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))), h("div", { key: 'e4602e8b9d42936dd0d69f4c56601197ac5182ab', part: "content", id: contentId, class: "voa-accordion__content", role: "region", "aria-labelledby": headerId, "aria-hidden": !this.isExpanded ? 'true' : 'false' }, h("div", { key: 'fe6de94d8c6394e9ff3bac0476bb9a43c4751d66', class: "voa-accordion__content-inner" }, h("slot", { key: '20f6ab4c9ea0656c9d8ed81c1335694507765634' }))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["watchOpenHandler"]
+    }; }
+};
+VoaAccordion.style = voaAccordionCss;
+
+export { VoaAccordion as voa_accordion };
+//# sourceMappingURL=voa-accordion.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-accordion.entry.js","sources":["src/components/voa-accordion/voa-accordion.css?tag=voa-accordion&encapsulation=shadow","src/components/voa-accordion/voa-accordion.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n.voa-accordion {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.voa-accordion__trigger {\r\n  appearance: none;\r\n  background: transparent;\r\n  border: none;\r\n  width: 100%;\r\n  padding: 0;\r\n  cursor: pointer;\r\n  text-align: left;\r\n}\r\n\r\n.voa-accordion__header-content {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n}\r\n\r\n.voa-accordion__title {\r\n  flex-grow: 1;\r\n}\r\n\r\n.voa-accordion__icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  /* Removed fixed width/height. Let the SVG or the Part define it. */\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ============================================\r\n   ANIMATION ARCHITECTURE\r\n   ============================================\r\n   \r\n   This component uses CSS Grid to enable smooth height animations.\r\n   \r\n   STRUCTURAL (Internal CSS):\r\n   - Sets up grid context: display: grid; grid-template-rows: 1fr;\r\n   - Provides .voa-accordion__content-inner wrapper for height calculation\r\n   \r\n   ANIMATION (External CSS):\r\n   - Consumer controls transition timing via ::part(content)\r\n   - Consumer defines closed state: grid-template-rows: 0fr;\r\n   - Consumer handles prefers-reduced-motion\r\n   \r\n   Why? Performance, Accessibility, and Brand Flexibility.\r\n   ============================================ */\r\n\r\n.voa-accordion__content {\r\n  /* STRUCTURAL PREP FOR ANIMATION */\r\n  display: grid;\r\n  \r\n  /* Default state is open structurally to allow the 'fr' transition to work.\r\n     We control the 'closed' state via the grid-template-rows property. */\r\n  grid-template-rows: 1fr;\r\n  \r\n  /* IMPORTANT: We do NOT use display: none here.\r\n     If we did, the external CSS couldn't animate the opening. */\r\n}\r\n\r\n.voa-accordion__content-inner {\r\n  /* This inner wrapper is required for the grid trick to work.\r\n     The parent animates the grid track, this container calculates the height. */\r\n  overflow: hidden;\r\n  min-height: 0;\r\n}","import { Component, h, Prop, State, Event, EventEmitter, Method, Element, Host, Watch } from '@stencil/core';\r\n\r\n// Helper for unique IDs\r\nlet accordionIds = 0;\r\n\r\n@Component({\r\n  tag: 'voa-accordion',\r\n  styleUrl: 'voa-accordion.css',\r\n  shadow: true,\r\n})\r\nexport class VoaAccordion {\r\n  @Element() host: HTMLVoaAccordionElement;\r\n\r\n  private componentId = `voa-accordion-${accordionIds++}`;\r\n\r\n  /**\r\n   * If true, the accordion is expanded.\r\n   */\r\n  @Prop({ reflect: true }) open: boolean = false;\r\n\r\n  /**\r\n   * Size variant.\r\n   */\r\n  @Prop({ reflect: true }) size: 'md' | 'lg' = 'md';\r\n\r\n  /**\r\n   * Shows the top divider.\r\n   */\r\n  @Prop({ reflect: true }) divider: boolean = true;\r\n\r\n  /**\r\n   * Emitted when the user interacts with the header.\r\n   * Payload: the requested new state (boolean).\r\n   */\r\n  @Event() voaToggle: EventEmitter<boolean>;\r\n\r\n  // Internal state ensures the component works even if the parent doesn't update the prop immediately\r\n  @State() isExpanded: boolean = false;\r\n\r\n  @Watch('open')\r\n  watchOpenHandler(newValue: boolean) {\r\n    this.isExpanded = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isExpanded = this.open;\r\n  }\r\n\r\n  private handleToggle = () => {\r\n    // Invert internal state immediately for UI responsiveness\r\n    this.isExpanded = !this.isExpanded;\r\n    // Update the open prop to reflect in the DOM attribute (for CSS selectors)\r\n    this.open = this.isExpanded;\r\n    // Tell the world what happened\r\n    this.voaToggle.emit(this.isExpanded);\r\n  };\r\n\r\n  private handleKeyDown = (ev: KeyboardEvent) => {\r\n    if (ev.key === 'Enter' || ev.key === ' ') {\r\n      ev.preventDefault();\r\n      this.handleToggle();\r\n    }\r\n  };\r\n\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const button = this.host.shadowRoot?.querySelector('button');\r\n    button?.focus();\r\n  }\r\n\r\n  render() {\r\n    const headerId = `${this.componentId}-header`;\r\n    const contentId = `${this.componentId}-content`;\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-accordion': true,\r\n            [`voa-accordion--${this.size}`]: true,\r\n            'voa-accordion--open': this.isExpanded,\r\n            'voa-accordion--closed': !this.isExpanded,\r\n            'voa-accordion--divider': this.divider,\r\n          }}\r\n        >\r\n          {/* Header wraps a button for semantics */}\r\n          <div class=\"voa-accordion__header-wrapper\">\r\n            <button\r\n              part=\"header\"\r\n              id={headerId}\r\n              class=\"voa-accordion__trigger\"\r\n              onClick={this.handleToggle}\r\n              onKeyDown={this.handleKeyDown}\r\n              aria-expanded={this.isExpanded ? 'true' : 'false'}\r\n              aria-controls={contentId}\r\n            >\r\n              <div part=\"header-content\" class=\"voa-accordion__header-content\">\r\n                <span part=\"title\" class=\"voa-accordion__title\">\r\n                  <slot name=\"header\">Title</slot>\r\n                </span>\r\n\r\n                {/* ICON SLOT: Allows external replacement */}\r\n                <span part=\"icon\" class=\"voa-accordion__icon\">\r\n                  <slot name=\"icon\">\r\n                    {/* Default Fallback Icon (Chevron) */}\r\n                    <svg\r\n                      width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      style={{\r\n                        transform: this.isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'\r\n                      }}\r\n                    >\r\n                      <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  </slot>\r\n                </span>\r\n              </div>\r\n            </button>\r\n          </div>\r\n\r\n          {/* CONTENT: Kept in DOM for animation support via CSS Grid Trick */}\r\n          <div\r\n            part=\"content\"\r\n            id={contentId}\r\n            class=\"voa-accordion__content\"\r\n            role=\"region\"\r\n            aria-labelledby={headerId}\r\n            aria-hidden={!this.isExpanded ? 'true' : 'false'}\r\n          >\r\n            <div class=\"voa-accordion__content-inner\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Dh8480Ec.js';
+import { g as getAlertIcon } from './icons-Bjdap-bM.js';
+
+const voaAlertCss = ":host{display:block;box-sizing:border-box;width:100%}.alert-container{display:flex;flex-direction:column;position:relative;box-sizing:border-box;width:100%}.alert-inline{flex-direction:row;align-items:center}.content-wrapper{display:flex;align-items:flex-start;flex:1;width:100%;box-sizing:border-box}.alert-inline .content-wrapper{align-items:center}.alert-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.content{flex:1;display:flex;flex-direction:column;box-sizing:border-box;min-width:0;}.alert-inline .content{flex-direction:row;align-items:center}.text-group{display:flex;flex-direction:column}.close-button{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;margin:0;flex-shrink:0}.actions-wrapper{display:flex;justify-content:flex-end;align-items:center;width:100%;box-sizing:border-box;flex-wrap:wrap}";
+
+const VoaAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.voaDismiss = createEvent(this, "voaDismiss");
+        this.voaPrimaryClick = createEvent(this, "voaPrimaryClick");
+        this.voaSecondaryClick = createEvent(this, "voaSecondaryClick");
+        /**
+         * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal).
+         * Padrão é 'default'.
+         */
+        this.variant = 'default';
+        /**
+         * O tipo de alerta a ser exibido. Influencia a cor e o ícone.
+         * Padrão é 'info'.
+         */
+        this.type = 'info';
+        /**
+         * Determina se o alerta pode ser fechado pelo usuário.
+         */
+        this.closable = false;
+        /**
+         * Texto do rótulo para o botão de fechar, para acessibilidade.
+         * Padrão é "Fechar alerta".
+         */
+        this.closeButtonLabel = 'Fechar alerta';
+        /**
+         * Determina se os botões devem ser exibidos.
+         * Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido).
+         * Se false, os botões não serão exibidos, independente das outras props.
+         */
+        this.showButtons = false;
+        this.handleClose = (e) => {
+            e.stopPropagation();
+            this.voaDismiss.emit();
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA
+     * Delega foco ao botão de fechar se existir
+     */
+    async setFocus() {
+        var _a;
+        const closeBtn = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="close-button"]');
+        if (closeBtn) {
+            closeBtn.focus();
+        }
+    }
+    renderIcon() {
+        const iconType = this.variant === 'inline' && this.type === 'warning' ? 'warning-inline' : this.type;
+        const IconComponent = getAlertIcon(iconType, this.variant);
+        return (h("div", { part: "icon", class: "alert-icon" }, h(IconComponent, null)));
+    }
+    render() {
+        const hasButtons = this.variant === 'default' && this.showButtons && !!this.primaryButtonText;
+        return (h(Host, { key: '3e04be2859dc5ef25212fd5df6cba4ba2eff5c88', role: "alert", "aria-hidden": !this.closable ? null : "false" }, h("div", { key: '98f0d6a88ef58e7692818154090ca4150e2ce404', part: "base", class: {
+                'alert-container': true,
+                [`alert-${this.variant}`]: true,
+                [`alert-type-${this.type}`]: true
+            } }, h("div", { key: '41ba5dcd37cdf3fbf4afb4593f4eea352f30453c', part: "content-wrapper", class: "content-wrapper" }, this.renderIcon(), h("div", { key: '274c21ee707d150d83ee405b62464f98c31d34f4', part: "content", class: "content" }, (this.alertTitle || this.description) ? (h("div", { class: "text-group" }, this.alertTitle && h("div", { part: "title", class: "title" }, this.alertTitle), this.variant === 'default' && this.description && (h("div", { part: "description", class: "description" }, this.description)))) : (h("slot", null))), this.closable && (h("button", { key: '03da877fab62fab406fac41e4c94e71298af132c', part: "close-button", type: "button", class: "close-button", onClick: this.handleClose, "aria-label": this.closeButtonLabel }, getAlertIcon('close', this.variant)()))), hasButtons && (h("div", { key: '98b4b495e98dc4bb7105df40e34071ffb03965cb', part: "actions", class: "actions-wrapper" }, this.secondaryButtonText && (h("voa-button", { key: '8006d6fbdb687ce60b7dc832eb0bb91e28bf5195', variant: "ghost", size: "sm", onDsClick: () => this.voaSecondaryClick.emit(), exportparts: "base: secondary-btn-base" }, this.secondaryButtonText)), h("voa-button", { key: '9917cb71af08d6956dc0359b8a66bfb094d5c18c', variant: "primary", size: "sm", onDsClick: () => this.voaPrimaryClick.emit(), exportparts: "base: primary-btn-base" }, this.primaryButtonText))))));
+    }
+    get host() { return getElement(this); }
+};
+VoaAlert.style = voaAlertCss;
+
+export { VoaAlert as voa_alert };
+//# sourceMappingURL=voa-alert.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-alert.entry.js","sources":["src/components/voa-alert/voa-alert.css?tag=voa-alert&encapsulation=shadow","src/components/voa-alert/voa-alert.tsx"],"sourcesContent":["/* UNSTYLED PATTERN: Structural Only */\r\n\r\n:host {\r\n  display: block;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n}\r\n\r\n.alert-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n}\r\n\r\n.alert-inline {\r\n  flex-direction: row;\r\n  align-items: center;\r\n}\r\n\r\n.content-wrapper {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  flex: 1;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.alert-inline .content-wrapper {\r\n  align-items: center;\r\n}\r\n\r\n.alert-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.content {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  min-width: 0; /* Prevents text overflow issues */\r\n}\r\n\r\n.alert-inline .content {\r\n  flex-direction: row;\r\n  align-items: center;\r\n}\r\n\r\n.text-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.close-button {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.actions-wrapper {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-wrap: wrap;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, Element, Method, Host } from '@stencil/core';\r\nimport { getAlertIcon } from '../../utils/icons';\r\n\r\n/**\r\n * O componente voa-alert é usado para exibir mensagens importantes para o usuário.\r\n * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.\r\n * Suporta variantes default (layout vertical) e inline (layout horizontal).\r\n * \r\n * @part base - O elemento raiz do alerta\r\n * @part content-wrapper - Wrapper do conteúdo principal\r\n * @part icon - Container do ícone\r\n * @part content - Container do conteúdo (slot padrão)\r\n * @part title - Container do título\r\n * @part description - Container da descrição\r\n * @part close-button - Botão de fechar\r\n * @part actions - Container dos botões de ação\r\n * @part primary-btn-base - Expõe o part \"base\" do botão primário para estilização externa\r\n * @part secondary-btn-base - Expõe o part \"base\" do botão secundário para estilização externa\r\n */\r\n@Component({\r\n  tag: 'voa-alert',\r\n  styleUrl: 'voa-alert.css',\r\n  shadow: true,\r\n})\r\nexport class VoaAlert {\r\n  @Element() host: HTMLVoaAlertElement;\r\n\r\n  /**\r\n   * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal).\r\n   * Padrão é 'default'.\r\n   */\r\n  @Prop({ reflect: true }) variant: 'default' | 'inline' = 'default';\r\n\r\n  /**\r\n   * O tipo de alerta a ser exibido. Influencia a cor e o ícone.\r\n   * Padrão é 'info'.\r\n   */\r\n  @Prop({ reflect: true }) type: 'basic' | 'success' | 'warning' | 'warning-inline' | 'error' | 'info' = 'info';\r\n\r\n  /**\r\n   * Determina se o alerta pode ser fechado pelo usuário.\r\n   */\r\n  @Prop() closable: boolean = false;\r\n\r\n  /**\r\n   * Texto do rótulo para o botão de fechar, para acessibilidade.\r\n   * Padrão é \"Fechar alerta\".\r\n   */\r\n  @Prop() closeButtonLabel: string = 'Fechar alerta';\r\n\r\n  /**\r\n   * Título do alerta. Quando fornecido, será exibido como título principal.\r\n   * Para variant inline, apenas o título é exibido.\r\n   */\r\n  @Prop() alertTitle?: string;\r\n\r\n  /**\r\n   * Descrição do alerta. Apenas exibida na variante default.\r\n   */\r\n  @Prop() description?: string;\r\n\r\n  /**\r\n   * Determina se os botões devem ser exibidos.\r\n   * Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido).\r\n   * Se false, os botões não serão exibidos, independente das outras props.\r\n   */\r\n  @Prop() showButtons: boolean = false;\r\n\r\n  /**\r\n   * Texto do botão primário. Só será exibido se showButtons for true.\r\n   */\r\n  @Prop() primaryButtonText?: string;\r\n\r\n  /**\r\n   * Texto do botão secundário. Só será exibido se showButtons for true e primaryButtonText também for fornecido.\r\n   */\r\n  @Prop() secondaryButtonText?: string;\r\n\r\n  /**\r\n   * Evento emitido quando o alerta é dispensado (fechado).\r\n   */\r\n  @Event() voaDismiss: EventEmitter<void>;\r\n\r\n  /**\r\n   * Evento emitido quando o botão primário é clicado.\r\n   */\r\n  @Event() voaPrimaryClick: EventEmitter<void>;\r\n\r\n  /**\r\n   * Evento emitido quando o botão secundário é clicado.\r\n   */\r\n  @Event() voaSecondaryClick: EventEmitter<void>;\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA\r\n   * Delega foco ao botão de fechar se existir\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const closeBtn = this.host.shadowRoot?.querySelector('[part=\"close-button\"]') as HTMLElement;\r\n    if (closeBtn) {\r\n      closeBtn.focus();\r\n    }\r\n  }\r\n\r\n  private handleClose = (e: Event) => {\r\n    e.stopPropagation();\r\n    this.voaDismiss.emit();\r\n  };\r\n\r\n  private renderIcon() {\r\n    const iconType = this.variant === 'inline' && this.type === 'warning' ? 'warning-inline' : this.type;\r\n    const IconComponent = getAlertIcon(iconType, this.variant);\r\n    \r\n    return (\r\n      <div part=\"icon\" class=\"alert-icon\">\r\n        <IconComponent />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const hasButtons = this.variant === 'default' && this.showButtons && !!this.primaryButtonText;\r\n\r\n    return (\r\n      <Host \r\n        role=\"alert\" \r\n        aria-hidden={!this.closable ? null : \"false\"}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'alert-container': true,\r\n            [`alert-${this.variant}`]: true,\r\n            [`alert-type-${this.type}`]: true\r\n          }}\r\n        >\r\n          <div part=\"content-wrapper\" class=\"content-wrapper\">\r\n            {this.renderIcon()}\r\n            \r\n            <div part=\"content\" class=\"content\">\r\n              {(this.alertTitle || this.description) ? (\r\n                <div class=\"text-group\">\r\n                   {this.alertTitle && <div part=\"title\" class=\"title\">{this.alertTitle}</div>}\r\n                   {this.variant === 'default' && this.description && (\r\n                     <div part=\"description\" class=\"description\">{this.description}</div>\r\n                   )}\r\n                </div>\r\n              ) : (\r\n                <slot />\r\n              )}\r\n            </div>\r\n\r\n            {this.closable && (\r\n              <button\r\n                part=\"close-button\"\r\n                type=\"button\"\r\n                class=\"close-button\"\r\n                onClick={this.handleClose}\r\n                aria-label={this.closeButtonLabel}\r\n              >\r\n                {getAlertIcon('close', this.variant)()}\r\n              </button>\r\n            )}\r\n          </div>\r\n\r\n          {/* Action Buttons */}\r\n          {hasButtons && (\r\n            <div part=\"actions\" class=\"actions-wrapper\">\r\n              {this.secondaryButtonText && (\r\n                <voa-button\r\n                  variant=\"ghost\"\r\n                  size=\"sm\"\r\n                  onDsClick={() => this.voaSecondaryClick.emit()}\r\n                  exportparts=\"base: secondary-btn-base\" \r\n                >\r\n                  {this.secondaryButtonText}\r\n                </voa-button>\r\n              )}\r\n              \r\n              <voa-button\r\n                variant=\"primary\"\r\n                size=\"sm\"\r\n                onDsClick={() => this.voaPrimaryClick.emit()}\r\n                exportparts=\"base: primary-btn-base\"\r\n              >\r\n                {this.primaryButtonText}\r\n              </voa-button>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n} "],"names":[],"mappings":"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"}

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

@@ -0,0 +1,78 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Dh8480Ec.js';
+
+const voaAvatarCss = ":host{display:inline-block;--avatar-size-xs:var(--spacing-spacing-md);--avatar-size-sm:var(--spacing-spacing-lg);--avatar-size-md:var(--spacing-spacing-xl);--avatar-size-lg:var(--spacing-spacing-xxl);--avatar-size-xl:var(--spacing-spacing-xxxl);}.voa-avatar{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0;box-sizing:border-box;}.voa-avatar--xs{width:var(--avatar-size-xs);height:var(--avatar-size-xs)}.voa-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm)}.voa-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md)}.voa-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg)}.voa-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl)}.voa-avatar img{width:100%;height:100%;object-fit:cover;display:block;box-sizing:border-box}.avatar-initials{display:inline-block;text-transform:uppercase;user-select:none;line-height:1;box-sizing:border-box;}.avatar-icon{width:60%;height:60%;display:block;box-sizing:border-box;}";
+
+const VoaAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Tipo de avatar a ser exibido.
+         * - 'icon': Exibe um ícone de usuário padrão
+         * - 'photo': Exibe uma imagem (requer prop src)
+         * - 'initials': Exibe iniciais de texto (requer prop initials)
+         */
+        this.type = 'icon';
+        /**
+         * Tamanho do avatar.
+         * Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)
+         */
+        this.size = 'md';
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno do avatar.
+     */
+    async setFocus() {
+        var _a;
+        const focusable = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="base"]');
+        if (focusable) {
+            focusable.focus();
+        }
+    }
+    getAriaLabel() {
+        if (this.alt) {
+            return this.alt;
+        }
+        if (this.type === 'initials' && this.initials) {
+            return `Avatar com iniciais ${this.initials}`;
+        }
+        if (this.type === 'photo' && this.src) {
+            return 'Avatar com foto de perfil';
+        }
+        return 'Avatar de usuário';
+    }
+    renderContent() {
+        switch (this.type) {
+            case 'photo':
+                if (this.src) {
+                    return h("img", { part: "image", src: this.src, alt: this.alt || 'Avatar' });
+                }
+                // Fallback para icon se src não fornecido
+                return this.renderIcon();
+            case 'initials':
+                if (this.initials) {
+                    return h("span", { class: "avatar-initials", part: "initials" }, this.initials);
+                }
+                // Fallback para icon se initials não fornecido
+                return this.renderIcon();
+            case 'icon':
+            default:
+                return this.renderIcon();
+        }
+    }
+    renderIcon() {
+        return (h("svg", { class: "avatar-icon", part: "icon", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })));
+    }
+    render() {
+        return (h(Host, { key: '3da67acafc6bd4af69d45ae6ee662e2e2bc3aa10', role: "img", "aria-label": this.getAriaLabel() }, h("div", { key: '32391b690e317f36d4a8b5cc4ad9956c70cea493', part: "base", class: {
+                'voa-avatar': true,
+                [`voa-avatar--${this.size}`]: true,
+                [`voa-avatar--${this.type}`]: true,
+            } }, this.renderContent())));
+    }
+    get host() { return getElement(this); }
+};
+VoaAvatar.style = voaAvatarCss;
+
+export { VoaAvatar as voa_avatar };
+//# sourceMappingURL=voa-avatar.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-avatar.entry.js","sources":["src/components/voa-avatar/voa-avatar.css?tag=voa-avatar&encapsulation=shadow","src/components/voa-avatar/voa-avatar.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 * Design Tokens utilizados (aplicados externamente):\r\n * - --structure-colors-bg-elevated: Background do avatar (✅ existe em voa-tokens.css)\r\n * - --text-primary: Cor do texto/iniciais (✅ existe em voa-tokens.css, valor: #0b1215)\r\n * - --spacing-spacing-md: 16px (xs) (✅ existe em voa-tokens.css)\r\n * - --spacing-spacing-lg: 24px (sm) (✅ existe em voa-tokens.css)\r\n * - --spacing-spacing-xl: 32px (md) (✅ existe em voa-tokens.css)\r\n * - --spacing-spacing-xxl: 48px (lg) (✅ existe em voa-tokens.css)\r\n * - --spacing-spacing-xxxl: 56px (xl) (✅ existe em voa-tokens.css)\r\n * - --radius-round: Border-radius circular (✅ existe em voa-tokens.css, valor: 64rem)\r\n * \r\n * Exemplo de estilização externa:\r\n * voa-avatar::part(base) {\r\n *   background-color: var(--structure-colors-bg-elevated);\r\n *   border-radius: var(--radius-round);\r\n * }\r\n * voa-avatar::part(initials) {\r\n *   color: var(--text-primary);\r\n *   font-family: var(--font-family-body);\r\n *   font-weight: var(--font-weight-semibold);\r\n * }\r\n */\r\n\r\n:host {\r\n  display: inline-block;\r\n  \r\n  /* Definir variáveis CSS para tamanhos usando tokens semânticos */\r\n  --avatar-size-xs: var(--spacing-spacing-md); /* 16px */\r\n  --avatar-size-sm: var(--spacing-spacing-lg); /* 24px */\r\n  --avatar-size-md: var(--spacing-spacing-xl); /* 32px */\r\n  --avatar-size-lg: var(--spacing-spacing-xxl); /* 48px */\r\n  --avatar-size-xl: var(--spacing-spacing-xxxl); /* 56px */\r\n}\r\n\r\n.voa-avatar {\r\n  /* APENAS estilos estruturais */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  overflow: hidden;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n  /* Border-radius será aplicado externamente via tokens */\r\n}\r\n\r\n/* Tamanhos do Avatar - usando tokens semânticos */\r\n.voa-avatar--xs {\r\n  width: var(--avatar-size-xs);\r\n  height: var(--avatar-size-xs);\r\n}\r\n\r\n.voa-avatar--sm {\r\n  width: var(--avatar-size-sm);\r\n  height: var(--avatar-size-sm);\r\n}\r\n\r\n.voa-avatar--md {\r\n  width: var(--avatar-size-md);\r\n  height: var(--avatar-size-md);\r\n}\r\n\r\n.voa-avatar--lg {\r\n  width: var(--avatar-size-lg);\r\n  height: var(--avatar-size-lg);\r\n}\r\n\r\n.voa-avatar--xl {\r\n  width: var(--avatar-size-xl);\r\n  height: var(--avatar-size-xl);\r\n}\r\n\r\n/* Estilos estruturais para imagem */\r\n.voa-avatar img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Estilos estruturais para iniciais */\r\n.avatar-initials {\r\n  display: inline-block;\r\n  text-transform: uppercase;\r\n  user-select: none;\r\n  line-height: 1;\r\n  box-sizing: border-box;\r\n  /* Font-size, color, font-weight serão aplicados externamente via tokens */\r\n}\r\n\r\n/* Estilos estruturais para ícone */\r\n.avatar-icon {\r\n  width: 60%;\r\n  height: 60%;\r\n  display: block;\r\n  box-sizing: border-box;\r\n  /* Color será aplicado externamente via tokens */\r\n} ","import { Component, Host, Prop, Element, Method, h } from '@stencil/core';\r\n\r\n/**\r\n * Componente Avatar do Voa Design System, baseado no design do Figma.\r\n * Suporta exibição de ícone, iniciais ou imagem de perfil.\r\n * \r\n * O componente segue o padrão \"unstyled\" - apenas estrutura e lógica.\r\n * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do avatar (container circular)\r\n * @part image - O elemento de imagem (quando type=\"photo\" e src é fornecido)\r\n * @part initials - O wrapper do texto de iniciais (quando type=\"initials\")\r\n * @part icon - O wrapper do ícone SVG padrão (quando type=\"icon\")\r\n */\r\n@Component({\r\n  tag: 'voa-avatar',\r\n  styleUrl: 'voa-avatar.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaAvatar {\r\n  @Element() host: HTMLVoaAvatarElement;\r\n\r\n  /**\r\n   * Tipo de avatar a ser exibido.\r\n   * - 'icon': Exibe um ícone de usuário padrão\r\n   * - 'photo': Exibe uma imagem (requer prop src)\r\n   * - 'initials': Exibe iniciais de texto (requer prop initials)\r\n   */\r\n  @Prop() type: 'icon' | 'photo' | 'initials' = 'icon';\r\n\r\n  /**\r\n   * Tamanho do avatar.\r\n   * Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)\r\n   */\r\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n\r\n  /**\r\n   * As iniciais a serem exibidas quando type=\"initials\".\r\n   */\r\n  @Prop() initials?: string;\r\n\r\n  /**\r\n   * URL da imagem do avatar quando type=\"photo\".\r\n   */\r\n  @Prop() src?: string;\r\n\r\n  /**\r\n   * Texto alternativo para a imagem do avatar.\r\n   */\r\n  @Prop() alt?: string;\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA.\r\n   * Delega foco ao elemento interno do avatar.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const focusable = this.host.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement;\r\n    if (focusable) {\r\n      focusable.focus();\r\n    }\r\n  }\r\n\r\n  private getAriaLabel(): string {\r\n    if (this.alt) {\r\n      return this.alt;\r\n    }\r\n    if (this.type === 'initials' && this.initials) {\r\n      return `Avatar com iniciais ${this.initials}`;\r\n    }\r\n    if (this.type === 'photo' && this.src) {\r\n      return 'Avatar com foto de perfil';\r\n    }\r\n    return 'Avatar de usuário';\r\n  }\r\n\r\n  private renderContent() {\r\n    switch (this.type) {\r\n      case 'photo':\r\n        if (this.src) {\r\n          return <img part=\"image\" src={this.src} alt={this.alt || 'Avatar'} />;\r\n        }\r\n        // Fallback para icon se src não fornecido\r\n        return this.renderIcon();\r\n      \r\n      case 'initials':\r\n        if (this.initials) {\r\n          return <span class=\"avatar-initials\" part=\"initials\">{this.initials}</span>;\r\n        }\r\n        // Fallback para icon se initials não fornecido\r\n        return this.renderIcon();\r\n      \r\n      case 'icon':\r\n      default:\r\n        return this.renderIcon();\r\n    }\r\n  }\r\n\r\n  private renderIcon() {\r\n    return (\r\n      <svg class=\"avatar-icon\" part=\"icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/>\r\n      </svg>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        role=\"img\"\r\n        aria-label={this.getAriaLabel()}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-avatar': true,\r\n            [`voa-avatar--${this.size}`]: true,\r\n            [`voa-avatar--${this.type}`]: true,\r\n          }}\r\n        >\r\n          {this.renderContent()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n} "],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,ugCAAugC;;MCoB/gC,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,MAAM;AAEpD;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAqC,IAAI;AA2FtD;AA1EC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;;AACZ,QAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,eAAe,CAAgB;QACrF,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,EAAE;;;IAIb,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,OAAO,IAAI,CAAC,GAAG;;QAEjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AAC7C,YAAA,OAAO,CAAuB,oBAAA,EAAA,IAAI,CAAC,QAAQ,EAAE;;QAE/C,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE;AACrC,YAAA,OAAO,2BAA2B;;AAEpC,QAAA,OAAO,mBAAmB;;IAGpB,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,OAAO;AACV,gBAAA,IAAI,IAAI,CAAC,GAAG,EAAE;oBACZ,OAAO,WAAK,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,QAAQ,GAAI;;;AAGvE,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAE1B,YAAA,KAAK,UAAU;AACb,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,oBAAA,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,UAAU,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAQ;;;AAG7E,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAE1B,YAAA,KAAK,MAAM;AACX,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;;;IAItB,UAAU,GAAA;AAChB,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,EAAA,EAC7F,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,+GAA+G,EAAE,CAAA,CACrH;;IAIV,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EACE,YAAA,EAAA,IAAI,CAAC,YAAY,EAAE,EAAA,EAE/B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAClC,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;aACnC,EAAA,EAEA,IAAI,CAAC,aAAa,EAAE,CACjB,CACD;;;;;;;;"}

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

@@ -0,0 +1,97 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Dh8480Ec.js';
+import { I as Icons } from './icons-Bjdap-bM.js';
+
+const voaBadgeCss = ":host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.voa-badge__container{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.voa-badge__label{display:inline-block}.voa-badge__counter{display:inline-flex;align-items:center;justify-content:center}.voa-badge__indicator{display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap}.voa-badge__indicator-only{display:inline-block}.voa-badge__icon,.voa-badge__icon-leading,.voa-badge__icon-trailing{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.voa-badge__icon svg,.voa-badge__icon-leading svg,.voa-badge__icon-trailing svg{display:inline-flex;align-items:center;justify-content:center}";
+
+const VoaBadgeComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * A variante do badge conforme design do Figma
+         */
+        this.variant = 'plain';
+        /**
+         * Forma do badge conforme design do Figma
+         */
+        this.shape = 'default';
+        /**
+         * Tamanho do badge conforme design do Figma
+         */
+        this.size = 'md';
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA
+     * Delega foco ao elemento interno nativo
+     */
+    async setFocus() {
+        var _a;
+        const focusable = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[tabindex]');
+        if (focusable) {
+            focusable.focus();
+        }
+    }
+    renderIcon(iconName) {
+        const IconComponent = Icons[iconName];
+        if (!IconComponent) {
+            console.warn(`Ícone não encontrado: ${iconName}`);
+            return null;
+        }
+        return h(IconComponent, null);
+    }
+    getAriaLabel() {
+        if (this.variant === 'indicator' || this.variant === 'indicator-overlay') {
+            return `${this.count || 0} items`;
+        }
+        if (this.variant === 'indicator-only') {
+            return 'Notification indicator';
+        }
+        if (this.variant === 'icon-only') {
+            return 'Icon badge';
+        }
+        return this.label || 'Badge';
+    }
+    getRole() {
+        // All indicator variants use role="status" for dynamic updates
+        // Non-indicator variants use role="status" as 'badge' is not a valid ARIA role
+        return 'status';
+    }
+    getAriaLive() {
+        // Only indicator variants need live region announcements
+        if (this.variant === 'indicator' || this.variant === 'indicator-overlay' || this.variant === 'indicator-only') {
+            return 'polite';
+        }
+        return 'off';
+    }
+    render() {
+        const containerClasses = {
+            'voa-badge__container': true,
+            [`voa-badge--${this.variant}`]: true,
+            [`voa-badge--${this.shape}`]: true,
+            [`voa-badge--${this.size}`]: true,
+        };
+        const renderContent = () => {
+            switch (this.variant) {
+                case 'plain':
+                    return h("span", { part: "label", class: "voa-badge__label" }, this.label);
+                case 'icons':
+                    return (h("div", null, h("span", { part: "icon-leading", class: "voa-badge__icon-leading" }, h("slot", { name: "start" }, this.icon && this.renderIcon(this.icon))), h("span", { part: "label", class: "voa-badge__label" }, this.label), h("span", { part: "icon-trailing", class: "voa-badge__icon-trailing" }, h("slot", { name: "end" }, this.icon && this.renderIcon(this.icon)))));
+                case 'icon-only':
+                    return (h("span", { part: "icon", class: "voa-badge__icon" }, this.icon && this.renderIcon(this.icon)));
+                case 'indicator':
+                    return (h("span", { part: "indicator", class: "voa-badge__indicator", role: "status", "aria-live": "polite" }, this.count !== undefined ? this.count : 0));
+                case 'indicator-overlay':
+                    return (h("span", { part: "indicator", class: "voa-badge__indicator", role: "status", "aria-live": "polite" }, this.count !== undefined ? this.count : 0));
+                case 'indicator-only':
+                    return h("span", { part: "indicator", class: "voa-badge__indicator-only", "aria-hidden": "true" });
+                default:
+                    return null;
+            }
+        };
+        return (h(Host, { role: this.getRole(), "aria-label": this.getAriaLabel(), "aria-live": this.getAriaLive() }, h("div", { part: "base", class: containerClasses }, renderContent())));
+    }
+    get host() { return getElement(this); }
+};
+VoaBadgeComponent.style = voaBadgeCss;
+
+export { VoaBadgeComponent as voa_badge };
+//# sourceMappingURL=voa-badge.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-badge.entry.js","sources":["src/components/voa-badge/voa-badge.css?tag=voa-badge&encapsulation=shadow","src/components/voa-badge/voa-badge.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-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-badge__container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-badge__label {\r\n  display: inline-block;\r\n}\r\n\r\n.voa-badge__counter {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.voa-badge__indicator {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  white-space: pre-wrap;\r\n}\r\n\r\n.voa-badge__indicator-only {\r\n  display: inline-block;\r\n}\r\n\r\n.voa-badge__icon,\r\n.voa-badge__icon-leading,\r\n.voa-badge__icon-trailing {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.voa-badge__icon svg,\r\n.voa-badge__icon-leading svg,\r\n.voa-badge__icon-trailing svg {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element, Method } from '@stencil/core';\r\nimport { Icons } from '../../utils/icons';\r\n\r\nexport interface VoaBadge {\r\n  /**\r\n   * O texto a ser exibido no badge (mapeado do Figma como \"label\")\r\n   */\r\n  label?: string;\r\n\r\n  /**\r\n   * O número a ser exibido como contador (para variantes indicator e indicator-overlay)\r\n   */\r\n  count?: number;\r\n\r\n  /**\r\n   * O nome do ícone a ser exibido (para variantes icon-only e icons)\r\n   */\r\n  icon?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';\r\n\r\n  /**\r\n   * A variante do badge conforme design do Figma\r\n   * - plain: Badge com texto apenas\r\n   * - icons: Badge com texto e ícones (leading/trailing)\r\n   * - icon-only: Badge apenas com ícone\r\n   * - indicator: Badge numérico (contador)\r\n   * - indicator-overlay: Badge numérico com fundo vermelho (danger)\r\n   * - indicator-only: Badge apenas indicador (ponto vermelho)\r\n   */\r\n  variant?: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only';\r\n\r\n  /**\r\n   * Forma do badge conforme design do Figma\r\n   * - default: Forma retangular com bordas arredondadas\r\n   * - pill: Forma completamente arredondada (pill-shaped)\r\n   */\r\n  shape?: 'default' | 'pill';\r\n\r\n  /**\r\n   * Tamanho do badge conforme design do Figma\r\n   * - sm: Tamanho pequeno\r\n   * - md: Tamanho médio (padrão)\r\n   */\r\n  size?: 'sm' | 'md';\r\n}\r\n\r\n/**\r\n * Badge component para exibir indicadores visuais como texto, contadores ou status.\r\n * Baseado no design do Figma (node-id: 397-3352).\r\n * \r\n * O componente segue o padrão \"unstyled\" - apenas estrutura e lógica.\r\n * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O container interno do badge (onde as classes são aplicadas)\r\n * @part label - O wrapper do texto (para variantes plain e icons)\r\n * @part counter - O wrapper do número (para variantes indicator e indicator-overlay)\r\n * @part icon-leading - Container do ícone à esquerda (para variante icons)\r\n * @part icon-trailing - Container do ícone à direita (para variante icons)\r\n * @part icon - Container do ícone (para variante icon-only)\r\n * @part indicator - O indicador numérico ou ponto (para variantes indicator, indicator-overlay, indicator-only)\r\n * \r\n * @slot start - Slot para ícone no início do badge (usado em variante icons)\r\n * @slot end - Slot para ícone no final do badge (usado em variante icons)\r\n */\r\n@Component({\r\n  tag: 'voa-badge',\r\n  styleUrl: 'voa-badge.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaBadgeComponent implements VoaBadge {\r\n  @Element() host: HTMLVoaBadgeElement;\r\n\r\n  /**\r\n   * O texto a ser exibido no badge (mapeado do Figma como \"label\")\r\n   */\r\n  @Prop({ reflect: true }) label?: string;\r\n\r\n  /**\r\n   * O número a ser exibido como contador (para variantes indicator e indicator-overlay)\r\n   */\r\n  @Prop() count?: number;\r\n\r\n  /**\r\n   * O nome do ícone a ser exibido (para variantes icon-only e icons)\r\n   */\r\n  @Prop({ reflect: true }) icon?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';\r\n\r\n  /**\r\n   * A variante do badge conforme design do Figma\r\n   */\r\n  @Prop() variant: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only' = 'plain';\r\n\r\n  /**\r\n   * Forma do badge conforme design do Figma\r\n   */\r\n  @Prop({ reflect: true }) shape: 'default' | 'pill' = 'default';\r\n\r\n  /**\r\n   * Tamanho do badge conforme design do Figma\r\n   */\r\n  @Prop() size: 'sm' | 'md' = 'md';\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA\r\n   * Delega foco ao elemento interno nativo\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const focusable = this.host.shadowRoot?.querySelector('[tabindex]') as HTMLElement;\r\n    if (focusable) {\r\n      focusable.focus();\r\n    }\r\n  }\r\n\r\n  private renderIcon(iconName: string) {\r\n    const IconComponent = Icons[iconName];\r\n    if (!IconComponent) {\r\n      console.warn(`Ícone não encontrado: ${iconName}`);\r\n      return null;\r\n    }\r\n    return <IconComponent />;\r\n  }\r\n\r\n  private getAriaLabel(): string {\r\n    if (this.variant === 'indicator' || this.variant === 'indicator-overlay') {\r\n      return `${this.count || 0} items`;\r\n    }\r\n    if (this.variant === 'indicator-only') {\r\n      return 'Notification indicator';\r\n    }\r\n    if (this.variant === 'icon-only') {\r\n      return 'Icon badge';\r\n    }\r\n    return this.label || 'Badge';\r\n  }\r\n\r\n  private getRole(): string {\r\n    // All indicator variants use role=\"status\" for dynamic updates\r\n    // Non-indicator variants use role=\"status\" as 'badge' is not a valid ARIA role\r\n    return 'status';\r\n  }\r\n\r\n  private getAriaLive(): 'polite' | 'off' {\r\n    // Only indicator variants need live region announcements\r\n    if (this.variant === 'indicator' || this.variant === 'indicator-overlay' || this.variant === 'indicator-only') {\r\n      return 'polite';\r\n    }\r\n    return 'off';\r\n  }\r\n\r\n  render() {\r\n    const containerClasses = {\r\n      'voa-badge__container': true,\r\n      [`voa-badge--${this.variant}`]: true,\r\n      [`voa-badge--${this.shape}`]: true,\r\n      [`voa-badge--${this.size}`]: true,\r\n    };\r\n\r\n    const renderContent = () => {\r\n      switch (this.variant) {\r\n        case 'plain':\r\n          return <span part=\"label\" class=\"voa-badge__label\">{this.label}</span>;\r\n\r\n        case 'icons':\r\n          return (\r\n            <div>\r\n              <span part=\"icon-leading\" class=\"voa-badge__icon-leading\">\r\n                <slot name=\"start\">\r\n                  {this.icon && this.renderIcon(this.icon)}\r\n                </slot>\r\n              </span>\r\n              <span part=\"label\" class=\"voa-badge__label\">{this.label}</span>\r\n              <span part=\"icon-trailing\" class=\"voa-badge__icon-trailing\">\r\n                <slot name=\"end\">\r\n                  {this.icon && this.renderIcon(this.icon)}\r\n                </slot>\r\n              </span>\r\n            </div>\r\n          );\r\n\r\n        case 'icon-only':\r\n          return (\r\n            <span part=\"icon\" class=\"voa-badge__icon\">\r\n              {this.icon && this.renderIcon(this.icon)}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator':\r\n          return (\r\n            <span part=\"indicator\" class=\"voa-badge__indicator\" role=\"status\" aria-live=\"polite\">\r\n              {this.count !== undefined ? this.count : 0}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator-overlay':\r\n          return (\r\n            <span part=\"indicator\" class=\"voa-badge__indicator\" role=\"status\" aria-live=\"polite\">\r\n              {this.count !== undefined ? this.count : 0}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator-only':\r\n          return <span part=\"indicator\" class=\"voa-badge__indicator-only\" aria-hidden=\"true\"></span>;\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    };\r\n\r\n    return (\r\n      <Host\r\n        role={this.getRole()}\r\n        aria-label={this.getAriaLabel()}\r\n        aria-live={this.getAriaLive()}\r\n      >\r\n        <div part=\"base\" class={containerClasses}>\r\n          {renderContent()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/voa-breadcrumbs-divider.entry.js

@@ -0,0 +1,38 @@
+import { r as registerInstance, h, H as Host } from './index-Dh8480Ec.js';
+import { I as Icons } from './icons-Bjdap-bM.js';
+
+const voaBreadcrumbsDividerCss = ":host{display:inline-flex;box-sizing:border-box}.voa-breadcrumbs-divider{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.voa-breadcrumbs-divider__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.voa-breadcrumbs-divider__icon svg{display:block;width:100%;height:100%;flex-shrink:0}";
+
+const VoaBreadcrumbsDivider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Tipo de ícone a ser exibido como divisor.
+         * Mapeia as variantes do Figma: chevron, arrow, arrow-alt.
+         */
+        this.icon = 'chevron';
+    }
+    getIconComponent() {
+        switch (this.icon) {
+            case 'chevron':
+                return Icons['chevron-right'];
+            case 'arrow':
+                return Icons['arrow-right'];
+            case 'arrow-alt':
+                return Icons['arrow-right-alt'];
+            default:
+                return Icons['chevron-right'];
+        }
+    }
+    render() {
+        const IconComponent = this.getIconComponent();
+        return (h(Host, { key: '3ca0a38193c0c6d61ec4905cd95e12209fa00a57', role: "separator", "aria-hidden": "true" }, h("div", { key: 'd6d136f7c9e8e4965938a4a23e77fe19ec16c369', part: "base", class: {
+                'voa-breadcrumbs-divider': true,
+                [`voa-breadcrumbs-divider--${this.icon}`]: true,
+            } }, h("span", { key: 'c57435ac5dd5fe8d1abc40f75676709b04b1e185', part: "icon", class: "voa-breadcrumbs-divider__icon" }, h(IconComponent, { key: '066b4d14c8e02969e04d43630329c7483a788ac5' })))));
+    }
+};
+VoaBreadcrumbsDivider.style = voaBreadcrumbsDividerCss;
+
+export { VoaBreadcrumbsDivider as voa_breadcrumbs_divider };
+//# sourceMappingURL=voa-breadcrumbs-divider.entry.js.map

package/dist/esm/voa-breadcrumbs-divider.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-breadcrumbs-divider.entry.js","sources":["src/components/voa-breadcrumbs-divider/voa-breadcrumbs-divider.css?tag=voa-breadcrumbs-divider&encapsulation=shadow","src/components/voa-breadcrumbs-divider/voa-breadcrumbs-divider.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 * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n  display: inline-flex;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-breadcrumbs-divider {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-breadcrumbs-divider__icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n/* Layout para o SVG interno */\r\n.voa-breadcrumbs-divider__icon svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n","import { Component, Prop, h, Host } from '@stencil/core';\r\nimport { Icons } from '../../utils/icons';\r\n\r\n/**\r\n * Componente de divisor para breadcrumbs.\r\n * Baseado no design do Figma (node-id: 443-9825).\r\n * \r\n * O componente segue o padrão \"unstyled\" - apenas estrutura e lógica.\r\n * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O container interno do divisor\r\n * @part icon - O container do ícone SVG\r\n */\r\n@Component({\r\n  tag: 'voa-breadcrumbs-divider',\r\n  styleUrl: 'voa-breadcrumbs-divider.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaBreadcrumbsDivider {\r\n  /**\r\n   * Tipo de ícone a ser exibido como divisor.\r\n   * Mapeia as variantes do Figma: chevron, arrow, arrow-alt.\r\n   */\r\n  @Prop({ reflect: true }) icon: 'chevron' | 'arrow' | 'arrow-alt' = 'chevron';\r\n\r\n  private getIconComponent() {\r\n    switch (this.icon) {\r\n      case 'chevron':\r\n        return Icons['chevron-right'];\r\n      case 'arrow':\r\n        return Icons['arrow-right'];\r\n      case 'arrow-alt':\r\n        return Icons['arrow-right-alt'];\r\n      default:\r\n        return Icons['chevron-right'];\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const IconComponent = this.getIconComponent();\r\n\r\n    return (\r\n      <Host\r\n        role=\"separator\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'voa-breadcrumbs-divider': true,\r\n            [`voa-breadcrumbs-divider--${this.icon}`]: true,\r\n          }}\r\n        >\r\n          <span part=\"icon\" class=\"voa-breadcrumbs-divider__icon\">\r\n            <IconComponent />\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"names":[],"mappings":";;;AAAA,MAAM,wBAAwB,GAAG,kYAAkY;;MCmBtZ,qBAAqB,GAAA,MAAA;AANlC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAsC,SAAS;AAqC7E;IAnCS,gBAAgB,GAAA;AACtB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,KAAK,CAAC,eAAe,CAAC;AAC/B,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,KAAK,CAAC,aAAa,CAAC;AAC7B,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,KAAK,CAAC,iBAAiB,CAAC;AACjC,YAAA;AACE,gBAAA,OAAO,KAAK,CAAC,eAAe,CAAC;;;IAInC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE;AAE7C,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,WAAW,iBACJ,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,CAAC,4BAA4B,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAChD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,+BAA+B,EAAA,EACrD,CAAA,CAAC,aAAa,EAAG,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACZ,CACH,CACD;;;;;;;"}

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

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Dh8480Ec.js';
+
+const voaBreadcrumbsItemCss = ":host{display:inline-flex;align-items:center}.breadcrumbs-item-wrapper{display:inline-flex;align-items:center}.breadcrumbs-content{display:inline-flex;align-items:center;text-decoration:none;color:inherit;box-sizing:border-box;cursor:pointer}.breadcrumbs-content[aria-current=\"page\"]{cursor:default;pointer-events:none}.breadcrumbs-separator{display:inline-flex;align-items:center;justify-content:center;margin-inline:0;user-select:none}:host(:last-of-type) .breadcrumbs-separator{display:none}.voa-breadcrumbs-item__icon svg{display:block;width:16px;height:16px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);flex-shrink:0}";
+
+const VoaBreadcrumbsItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Is this the current/active page?
+         */
+        this.active = false;
+    }
+    render() {
+        // Determine the tag type
+        const Tag = this.href && !this.active ? 'a' : 'span';
+        // Accessibility: Current page should rely on aria-current
+        const ariaCurrent = this.active ? 'page' : undefined;
+        return (h(Host, { key: 'f72dd6b4030693ed8e9b4b965ba3ae02dc957b47' }, h("li", { key: '75c354b98c337adb9fdaa7f4a538d45cb4db51fe', class: "breadcrumbs-item-wrapper" }, h(Tag, { key: '4dc895812b0facd3fe860e9038aeb4cde310d582', part: "content", class: "breadcrumbs-content", href: this.href, target: this.target, "aria-current": ariaCurrent }, h("slot", { key: '9f0886dcf1720ec06e5bdbd0c51f636c6c75f93d' })), h("span", { key: '82607218bc31771e6ba480e4259815792a02db3c', part: "separator", class: "breadcrumbs-separator", "aria-hidden": "true" }, h("slot", { key: 'b4e36ccdd8c24daa626366e3ec8b9a1f6c0d6e8e', name: "separator" }, h("svg", { key: '0740e3781c0a16a2f7de592f7bd6750a17af3dc9', width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '14ba6ed15eccf0e93104bd414e0db239c176be16', points: "9 18 15 12 9 6" })))))));
+    }
+    get host() { return getElement(this); }
+};
+VoaBreadcrumbsItem.style = voaBreadcrumbsItemCss;
+
+export { VoaBreadcrumbsItem as voa_breadcrumbs_item };
+//# sourceMappingURL=voa-breadcrumbs-item.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-breadcrumbs-item.entry.js","sources":["src/components/voa-breadcrumbs-item/voa-breadcrumbs-item.css?tag=voa-breadcrumbs-item&encapsulation=shadow","src/components/voa-breadcrumbs-item/voa-breadcrumbs-item.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 * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n.breadcrumbs-item-wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n.breadcrumbs-content {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  text-decoration: none;\r\n  color: inherit;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n}\r\n\r\n/* Remove pointer events/cursor for active (current) item */\r\n.breadcrumbs-content[aria-current=\"page\"] {\r\n  cursor: default;\r\n  pointer-events: none; \r\n}\r\n\r\n.breadcrumbs-separator {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-inline: 0; /* Spacing handled via CSS Parts */\r\n  user-select: none;\r\n}\r\n\r\n/* * CRITICAL: Hide separator on the last item.\r\n * Since we are inside Shadow DOM, :host(:last-child) refers to the \r\n * custom element itself within the parent's light DOM/slot context.\r\n */\r\n:host(:last-of-type) .breadcrumbs-separator {\r\n  display: none;\r\n}\r\n\r\n/* Layout para o SVG interno do ícone */\r\n.voa-breadcrumbs-item__icon svg {\r\n  display: block;\r\n  width: 16px;\r\n  height: 16px;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  flex-shrink: 0;\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-breadcrumbs-item',\r\n  styleUrl: 'voa-breadcrumbs-item.css',\r\n  shadow: true,\r\n})\r\nexport class VoaBreadcrumbsItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * HREF destination. If provided, renders an anchor tag.\r\n   * If missing, renders a span (current page or static item).\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /**\r\n   * Target for the link (e.g., _blank)\r\n   */\r\n  @Prop() target?: string;\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  render() {\r\n    // Determine the tag type\r\n    const Tag = this.href && !this.active ? 'a' : 'span';\r\n    \r\n    // Accessibility: Current page should rely on aria-current\r\n    const ariaCurrent = this.active ? 'page' : undefined;\r\n\r\n    return (\r\n      <Host>\r\n        <li class=\"breadcrumbs-item-wrapper\">\r\n          \r\n          {/* 1. The Content Part */}\r\n          <Tag \r\n            part=\"content\" \r\n            class=\"breadcrumbs-content\"\r\n            href={this.href}\r\n            target={this.target}\r\n            aria-current={ariaCurrent}\r\n          >\r\n            <slot />\r\n          </Tag>\r\n\r\n          {/* 2. The Separator Part \r\n            We render it always, and hide it via CSS for the last item.\r\n            This is much more robust than JS logic.\r\n          */}\r\n          <span part=\"separator\" class=\"breadcrumbs-separator\" aria-hidden=\"true\">\r\n             <slot name=\"separator\">\r\n               {/* Default Icon: Chevron Right */}\r\n               <svg width=\"16\" height=\"16\" 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             </slot>\r\n          </span>\r\n\r\n        </li>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,woBAAwoB;;MCOzpB,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAmBE;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAyCjD;IAvCC,MAAM,GAAA;;AAEJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,MAAM;;AAGpD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS;AAEpD,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAGlC,CAAC,CAAA,GAAG,qDACF,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,cAAA,EACL,WAAW,EAAA,EAEzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAMN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,uBAAuB,iBAAa,MAAM,EAAA,EACpE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,EAEpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,EAC/I,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,gBAAgB,EAAY,CAAA,CACzC,CACD,CACH,CAEJ,CACA;;;;;;;;"}

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

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Dh8480Ec.js';
+
+const voaBreadcrumbsCss = ":host{display:inline-block;box-sizing:border-box}.voa-breadcrumbs{display:inline-block;box-sizing:border-box}.breadcrumbs-list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none;gap:0;}";
+
+const VoaBreadcrumbs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Variante visual do breadcrumb.
+         */
+        this.type = 'default';
+    }
+    render() {
+        return (h(Host, { key: 'c200bcb5b1cee06222ae5a51a5ad5418dd73f68c' }, h("nav", { key: '3e302797bacdd137c2cacf786e49074e9bb9a85a', part: "base", "aria-label": "Breadcrumb", class: {
+                'voa-breadcrumbs': true,
+                [`voa-breadcrumbs--${this.type}`]: true,
+            } }, h("ol", { key: 'bffbacbe69cec2da8410a9f28ad9fb76b896ac3a', part: "list", class: "breadcrumbs-list" }, h("slot", { key: 'b629e8573b851c5d9b3bb802f4b40bcc5620bb99' })))));
+    }
+    get host() { return getElement(this); }
+};
+VoaBreadcrumbs.style = voaBreadcrumbsCss;
+
+export { VoaBreadcrumbs as voa_breadcrumbs };
+//# sourceMappingURL=voa-breadcrumbs.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-breadcrumbs.entry.js","sources":["src/components/voa-breadcrumbs/voa-breadcrumbs.css?tag=voa-breadcrumbs&encapsulation=shadow","src/components/voa-breadcrumbs/voa-breadcrumbs.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 * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-breadcrumbs {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.breadcrumbs-list {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap; /* Breadcrumbs should wrap on small screens */\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none; /* Remove default list numbers */\r\n  gap: 0; /* Gaps handled by items */\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente de breadcrumbs (navegação estrutural).\r\n * Baseado no design do Figma (node-id: 443-10022).\r\n * * @slot default - Items do breadcrumb (voa-breadcrumbs-item)\r\n */\r\n@Component({\r\n  tag: 'voa-breadcrumbs',\r\n  styleUrl: 'voa-breadcrumbs.css',\r\n  shadow: true,\r\n})\r\nexport class VoaBreadcrumbs {\r\n  @Element() host: HTMLVoaBreadcrumbsElement;\r\n\r\n  /**\r\n   * Variante visual do breadcrumb.\r\n   */\r\n  @Prop({ reflect: true }) type: 'default' | 'round' | 'outline' = 'default';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {/* Using <nav> and <ol> is the Semantic Standard for Breadcrumbs. \r\n          Screen readers will announce \"Navigation, list, X items\".\r\n        */}\r\n        <nav\r\n          part=\"base\"\r\n          aria-label=\"Breadcrumb\"\r\n          class={{\r\n            'voa-breadcrumbs': true,\r\n            [`voa-breadcrumbs--${this.type}`]: true,\r\n          }}\r\n        >\r\n          <ol part=\"list\" class=\"breadcrumbs-list\">\r\n            <slot></slot>\r\n          </ol>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,0NAA0N;;MCYvO,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAoC,SAAS;AAuB3E;IArBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAIH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,gBACA,YAAY,EACvB,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACxC,aAAA,EAAA,EAED,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACV,CACD,CACD;;;;;;;;"}