voa-ds-core 1.0.3

package/dist/custom-elements/p-DKnM_Ozb.js.map

@@ -0,0 +1 @@
+{"file":"p-DKnM_Ozb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}

package/dist/custom-elements/p-DPyVgztA.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const voaKeybindingCss = ":host{display:inline-flex;align-items:center;box-sizing:border-box}.voa-keybinding__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.voa-keybinding__text{display:inline-block;box-sizing:border-box}";
+
+const VoaKeybinding = /*@__PURE__*/ proxyCustomElement(class VoaKeybinding extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * A tecla do atalho (ex: "S", "K", "Enter")
+         */
+        this.shortcut = 'S';
+        /**
+         * Plataforma do atalho (mac ou win)
+         */
+        this.platform = 'mac';
+    }
+    render() {
+        return (h(Host, { key: 'bb1998ab8ea77847a5dd9acc92066fba2f6dc0f5', part: "base", class: {
+                'voa-keybinding': true,
+                [`voa-keybinding--${this.platform}`]: true,
+            } }, h("div", { key: 'a352156abf152af21b6ee7f94172d7ca923fc593', part: "key-icon", class: "voa-keybinding__icon" }, this.platform === 'mac' ? (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12.5 2C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V3.5C2 2.67157 2.67157 2 3.5 2H12.5Z", fill: "currentColor", "fill-opacity": "0.1" }), h("path", { d: "M4 4H12M4 8H12M4 12H8", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))) : (h("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "0", y: "0", width: "20", height: "10", rx: "2", fill: "currentColor", "fill-opacity": "0.1" }), h("text", { x: "10", y: "7", "text-anchor": "middle", "font-size": "8", fill: "currentColor", "font-weight": "600" }, "Ctrl")))), h("span", { key: 'ec6bd9a8adeb308c7ce704ff96ccee00ff8dc84c', part: "key-text", class: "voa-keybinding__text" }, this.shortcut)));
+    }
+    get host() { return this; }
+    static get style() { return voaKeybindingCss; }
+}, [257, "voa-keybinding", {
+        "shortcut": [1],
+        "platform": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-keybinding"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-keybinding":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaKeybinding);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { VoaKeybinding as V, defineCustomElement as d };
+//# sourceMappingURL=p-DPyVgztA.js.map
+
+//# sourceMappingURL=p-DPyVgztA.js.map

package/dist/custom-elements/p-DPyVgztA.js.map

@@ -0,0 +1 @@
+{"file":"p-DPyVgztA.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,uPAAuP;;MCkBnQ,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,GAAG;AAE9B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkB,KAAK;AAyCxC;IAvCC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,CAAC,mBAAmB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;aAC3C,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,EAAA,EAC9C,IAAI,CAAC,QAAQ,KAAK,KAAK,IACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,4IAA4I,EAC9I,IAAI,EAAC,cAAc,EACN,cAAA,EAAA,KAAK,EAClB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,uBAAuB,EACzB,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,KAAK,EAAA,gBAAA,EACH,OAAO,EACtB,CAAA,CACE,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAc,cAAA,EAAA,KAAK,EAAG,CAAA,EACzF,CAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,iBAAa,QAAQ,EAAA,WAAA,EAAW,GAAG,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,KAAK,EAEpF,EAAA,MAAA,CAAA,CACH,CACP,CACG,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,EAC/C,EAAA,IAAI,CAAC,QAAQ,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-keybinding/voa-keybinding.css?tag=voa-keybinding&encapsulation=shadow","src/components/voa-keybinding/voa-keybinding.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  box-sizing: border-box;\r\n}\r\n\r\n.voa-keybinding__icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-keybinding__text {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente Keybinding para exibir atalhos de teclado.\r\n * \r\n * Baseado no design do Figma, usado como subcomponente do input-addon.\r\n * Segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * \r\n * @part base - O elemento raiz do keybinding\r\n * @part key-icon - O ícone da tecla modificadora (⌘ ou Ctrl)\r\n * @part key-text - O texto da tecla\r\n */\r\n@Component({\r\n  tag: 'voa-keybinding',\r\n  styleUrl: 'voa-keybinding.css',\r\n  shadow: true,\r\n  scoped: false,\r\n})\r\nexport class VoaKeybinding {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * A tecla do atalho (ex: \"S\", \"K\", \"Enter\")\r\n   */\r\n  @Prop() shortcut: string = 'S';\r\n\r\n  /**\r\n   * Plataforma do atalho (mac ou win)\r\n   */\r\n  @Prop() platform: 'mac' | 'win' = 'mac';\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        part=\"base\"\r\n        class={{\r\n          'voa-keybinding': true,\r\n          [`voa-keybinding--${this.platform}`]: true,\r\n        }}\r\n      >\r\n        <div part=\"key-icon\" class=\"voa-keybinding__icon\">\r\n          {this.platform === 'mac' ? (\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M12.5 2C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V3.5C2 2.67157 2.67157 2 3.5 2H12.5Z\"\r\n                fill=\"currentColor\"\r\n                fill-opacity=\"0.1\"\r\n              />\r\n              <path\r\n                d=\"M4 4H12M4 8H12M4 12H8\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n              />\r\n            </svg>\r\n          ) : (\r\n            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect x=\"0\" y=\"0\" width=\"20\" height=\"10\" rx=\"2\" fill=\"currentColor\" fill-opacity=\"0.1\" />\r\n              <text x=\"10\" y=\"7\" text-anchor=\"middle\" font-size=\"8\" fill=\"currentColor\" font-weight=\"600\">\r\n                Ctrl\r\n              </text>\r\n            </svg>\r\n          )}\r\n        </div>\r\n        <span part=\"key-text\" class=\"voa-keybinding__text\">\r\n          {this.shortcut}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"],"version":3}

package/dist/custom-elements/p-Dto9R8Te.js

@@ -0,0 +1,117 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const voaButtonCss = ":host{display:inline-block;box-sizing:border-box}:host([disabled]),:host([loading]){cursor:not-allowed}.voa-button{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;border:none;background:transparent;padding:0;margin:0;cursor:pointer;user-select:none;flex-direction:row;flex-wrap:nowrap;gap:0;}.voa-button:disabled,.voa-button--loading{cursor:not-allowed;pointer-events:none}.voa-button__icon-leading,.voa-button__icon-trailing{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.voa-button__loader{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--voa-loader-size, 16px);height:var(--voa-loader-size, 16px);animation:voa-spin var(--voa-loader-duration, 1s) linear infinite}@keyframes voa-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.voa-button__loader svg{height:100%;width:100%}.voa-button__label{display:inline-block;flex-shrink:0}.voa-button ::slotted([slot=\"icon-leading\"]),.voa-button ::slotted([slot=\"icon-trailing\"]){display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}";
+
+const VoaButton = /*@__PURE__*/ proxyCustomElement(class VoaButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dsClick = createEvent(this, "dsClick");
+        /**
+         * Variante visual do botão.
+         * Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.
+         */
+        this.variant = 'primary';
+        /**
+         * Tamanho do botão.
+         * Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).
+         */
+        this.size = 'lg';
+        /**
+         * Se verdadeiro, o botão estará desabilitado.
+         */
+        this.disabled = false;
+        /**
+         * Se verdadeiro, o botão exibe um estado de carregamento (spinner)
+         * e desabilita interações.
+         */
+        this.loading = false;
+        /**
+         * Tipo do botão HTML.
+         * Padrão é 'button' para evitar submissão de formulários.
+         */
+        this.type = 'button';
+        /**
+         * Handler para clique no botão.
+         */
+        this.handleClick = (ev) => {
+            if (this.disabled || this.loading) {
+                ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+                ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+                return;
+            }
+            this.dsClick.emit();
+        };
+        /**
+         * Handler para navegação por teclado (WCAG 2.2 AA).
+         * Suporta Enter, Space para ativar, e Escape para cancelar (se aplicável).
+         */
+        this.handleKeyDown = (event) => {
+            if (this.disabled || this.loading) {
+                return;
+            }
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.handleClick();
+                    break;
+            }
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno nativo.
+     */
+    async setFocus() {
+        var _a;
+        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button[part="base"]');
+        if (button) {
+            button.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '01090febe625a70730bd1c681e57aee036d520cb' }, h("button", { key: 'ac690de44ff3ed5207c7504be3a66b1e5707019c', part: "base", type: this.type, class: {
+                'voa-button': true,
+                [`voa-button--${this.variant}`]: true,
+                [`voa-button--${this.size}`]: true,
+                'voa-button--disabled': this.disabled,
+                'voa-button--loading': this.loading,
+            }, disabled: this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, "aria-label": this.loading
+                ? 'Loading'
+                : (this.ariaLabel || this.label) }, this.loading && (h("span", { key: '546a219f6687636a57002e2349f81c1bcf151bb5', part: "loader", class: "voa-button__loader" }, h("slot", { key: '655af9861281eba7a33ed42690a674a091dc790b', name: "loader" }, h("svg", { key: '055cfe9d98ef8c845a4c35038331d37d436dbdee', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8582e6e36475380a339b7f2d232289b9bc121d0a', d: "M12 2V6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '8b14cb2167c9a89f31f74517fcd9983ae18d22e8', d: "M12 18V22", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '3ae670a047ba1a5e9f60b5e630809b6e97a299d6', d: "M4.93 4.93L7.76 7.76", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '80687001311999306c4e5b62c5a1064d4fae14e1', d: "M16.24 16.24L19.07 19.07", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '10200b00c28bf37c67cf92e6c7c05ba19a3a6ad9', d: "M2 12H6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: '880c4d9587ca2cbe29486c26571812b5802f7e23', d: "M18 12H22", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: 'a9884c1241e43d45700151ecd584e8ef5f160c50', d: "M4.93 19.07L7.76 16.24", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { key: 'b07fd22585962dbe4cdb98aabc48d282b4de4f4e', d: "M16.24 7.76L19.07 4.93", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))), !this.loading && (h("span", { key: '0dd707e080df5390168b7e0cc691bcf7a550eb49', part: "icon-leading", class: "voa-button__icon-leading" }, h("slot", { key: 'c5d178682afaad3ba5d8a557a6a0fe7427fa5bde', name: "icon-leading" }))), h("span", { key: '291dcbbc54088a3ba7202d96dd94d8b79ad4cafb', part: "label", class: "voa-button__label" }, h("slot", { key: 'fbef3b678e1af0436d43b93ad0c32a15da0831ab' }, this.label)), h("span", { key: '3ad028eb5377d05fd90a158c2c1510136d6d2b79', part: "icon-trailing", class: "voa-button__icon-trailing" }, h("slot", { key: '1f818a3e8ceeec8522f7399c1154d5eab2fd1e67', name: "icon-trailing" })))));
+    }
+    get host() { return this; }
+    static get style() { return voaButtonCss; }
+}, [257, "voa-button", {
+        "variant": [513],
+        "size": [513],
+        "disabled": [516],
+        "loading": [516],
+        "label": [1],
+        "ariaLabel": [1, "aria-label"],
+        "type": [1],
+        "setFocus": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaButton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { VoaButton as V, defineCustomElement as d };
+//# sourceMappingURL=p-Dto9R8Te.js.map
+
+//# sourceMappingURL=p-Dto9R8Te.js.map

package/dist/custom-elements/p-Dto9R8Te.js.map

@@ -0,0 +1 @@
+{"file":"p-Dto9R8Te.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-button/voa-button.css?tag=voa-button&encapsulation=shadow","src/components/voa-button/voa-button.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/* Cursor must be on :host because pointer-events:none on button \r\n   causes cursor to \"pass through\" to parent element */\r\n:host([disabled]),\r\n:host([loading]) {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.voa-button {\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  border: none; /* Remove borda padrão que afeta box-model */\r\n  background: transparent; /* Garante que não há fundo padrão */\r\n  padding: 0; /* Reset de padding */\r\n  margin: 0; /* Reset de margin */\r\n  \r\n  /* Interatividade básica */\r\n  cursor: pointer;\r\n  user-select: none;\r\n  \r\n  /* Layout Flex */\r\n  flex-direction: row;\r\n  flex-wrap: nowrap;\r\n  gap: 0; /* Gap padrão zerado, definido externamente */\r\n}\r\n\r\n.voa-button:disabled,\r\n.voa-button--loading {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Containers para ícones - estrutura apenas */\r\n.voa-button__icon-leading,\r\n.voa-button__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-button__loader {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  /* Default size - can be overridden via ::part(loader) */\r\n  width: var(--voa-loader-size, 16px);\r\n  height: var(--voa-loader-size, 16px);\r\n  /* Structural animation - rotation is physics, not art */\r\n  animation: voa-spin var(--voa-loader-duration, 1s) linear infinite;\r\n}\r\n\r\n/* Keyframes must be inside Shadow DOM scope to be accessible */\r\n@keyframes voa-spin {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}\r\n\r\n/* Ensure the default SVG fills the loader span */\r\n.voa-button__loader svg {\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.voa-button__label {\r\n  display: inline-block;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* Layout para slots de ícones */\r\n.voa-button ::slotted([slot=\"icon-leading\"]),\r\n.voa-button ::slotted([slot=\"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","import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Botão principal do Voa Design System, baseado no design do Figma.\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do botão (elemento <button>)\r\n * @part label - O wrapper do texto do botão\r\n * @part icon-leading - Container do slot para ícone à esquerda\r\n * @part icon-trailing - Container do slot para ícone à direita\r\n */\r\n@Component({\r\n  tag: 'voa-button',\r\n  styleUrl: 'voa-button.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaButton {\r\n  @Element() host: HTMLVoaButtonElement;\r\n\r\n  /**\r\n   * Variante visual do botão.\r\n   * Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.\r\n   */\r\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tonal' | 'ghost' | 'link' = 'primary';\r\n\r\n  /**\r\n   * Tamanho do botão.\r\n   * Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).\r\n   */\r\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'lg';\r\n\r\n  /**\r\n   * Se verdadeiro, o botão estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o botão exibe um estado de carregamento (spinner)\r\n   * e desabilita interações.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * O texto exibido no botão.\r\n   * Pode ser fornecido via prop ou via slot padrão.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * Rótulo ARIA para acessibilidade.\r\n   * Usado quando o botão não tem texto visível (apenas ícone).\r\n   */\r\n  @Prop() ariaLabel: string;\r\n\r\n  /**\r\n   * Tipo do botão HTML.\r\n   * Padrão é 'button' para evitar submissão de formulários.\r\n   */\r\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n\r\n  /**\r\n   * Evento emitido ao clicar no botão.\r\n   * Segue o padrão kebab-case: dsClick.\r\n   */\r\n  @Event() dsClick: EventEmitter<void>;\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 button = this.host.shadowRoot?.querySelector('button[part=\"base\"]') as HTMLButtonElement;\r\n    if (button) {\r\n      button.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no botão.\r\n   */\r\n  private handleClick = (ev?: MouseEvent) => {\r\n    if (this.disabled || this.loading) {\r\n      ev?.preventDefault();\r\n      ev?.stopPropagation();\r\n      return;\r\n    }\r\n    this.dsClick.emit();\r\n  };\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   * Suporta Enter, Space para ativar, e Escape para cancelar (se aplicável).\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled || this.loading) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        event.preventDefault();\r\n        this.handleClick();\r\n        break;\r\n      case 'Escape':\r\n        // Para botões que abrem modais/dropdowns, Escape fecha\r\n        // Para botões simples, não faz nada (comportamento padrão)\r\n        break;\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          part=\"base\"\r\n          type={this.type}\r\n          class={{\r\n            'voa-button': true,\r\n            [`voa-button--${this.variant}`]: true,\r\n            [`voa-button--${this.size}`]: true,\r\n            'voa-button--disabled': this.disabled,\r\n            'voa-button--loading': this.loading,\r\n          }}\r\n          disabled={this.disabled || this.loading}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          aria-disabled={this.disabled || this.loading ? 'true' : undefined}\r\n          aria-busy={this.loading ? 'true' : undefined}\r\n          aria-label={\r\n            this.loading \r\n              ? 'Loading' \r\n              : (this.ariaLabel || this.label)\r\n          }\r\n        >\r\n          {this.loading && (\r\n            <span part=\"loader\" class=\"voa-button__loader\">\r\n              <slot name=\"loader\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                   <path d=\"M12 2V6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M12 18V22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M4.93 4.93L7.76 7.76\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M16.24 16.24L19.07 19.07\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M2 12H6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M18 12H22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M4.93 19.07L7.76 16.24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M16.24 7.76L19.07 4.93\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                </svg>\r\n              </slot>\r\n            </span>\r\n          )}\r\n          \r\n          {!this.loading && (\r\n            <span part=\"icon-leading\" class=\"voa-button__icon-leading\">\r\n              <slot name=\"icon-leading\"></slot>\r\n            </span>\r\n          )}\r\n          <span part=\"label\" class=\"voa-button__label\">\r\n            <slot>{this.label}</slot>\r\n          </span>\r\n          <span part=\"icon-trailing\" class=\"voa-button__icon-trailing\">\r\n            <slot name=\"icon-trailing\"></slot>\r\n          </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n} "],"version":3}

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

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

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

@@ -0,0 +1,104 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.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$1 = /*@__PURE__*/ proxyCustomElement(class VoaAccordion extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        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 this; }
+    static get watchers() { return {
+        "open": ["watchOpenHandler"]
+    }; }
+    static get style() { return voaAccordionCss; }
+}, [257, "voa-accordion", {
+        "open": [516],
+        "size": [513],
+        "divider": [516],
+        "isExpanded": [32],
+        "setFocus": [64]
+    }, undefined, {
+        "open": ["watchOpenHandler"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaAccordion$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaAccordion = VoaAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaAccordion, defineCustomElement };
+//# sourceMappingURL=voa-accordion.js.map
+
+//# sourceMappingURL=voa-accordion.js.map

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

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

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

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

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

@@ -0,0 +1,111 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as getAlertIcon } from './p-Cp28eWhS.js';
+import { d as defineCustomElement$2 } from './p-Dto9R8Te.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$1 = /*@__PURE__*/ proxyCustomElement(class VoaAlert extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        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 this; }
+    static get style() { return voaAlertCss; }
+}, [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]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["voa-alert", "voa-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "voa-alert":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VoaAlert$1);
+            }
+            break;
+        case "voa-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const VoaAlert = VoaAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VoaAlert, defineCustomElement };
+//# sourceMappingURL=voa-alert.js.map
+
+//# sourceMappingURL=voa-alert.js.map

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

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

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

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