voa-ds-core 1.0.31 → 1.0.32

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

@@ -1 +1 @@
-{"file":"voa-avatar.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ugCAAugC;;MCoB/gCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaAvatar","__stencil_proxyCustomElement","HTMLElement"],"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} "],"version":3}
+{"file":"voa-avatar.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ugCAAugC;;MCoB/gCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaAvatar","__stencil_proxyCustomElement","HTMLElement"],"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} "],"version":3}

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

@@ -1,4 +1,4 @@
-import { V as VoaBadgeComponent, d as defineCustomElement$1 } from './p-Dij6eiDm.js';
+import { V as VoaBadgeComponent, d as defineCustomElement$1 } from './p-B2P7cgN3.js';
 
 const VoaBadge = VoaBadgeComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-breadcrumbs-divider.js

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
-import { I as Icons } from './p-CGXKDN0Z.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { I as Icons } from './p-Cp28eWhS.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}";
 
@@ -52,6 +52,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaBreadcrumbsDivider = VoaBreadcrumbsDivider$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-breadcrumbs-divider.js.map

@@ -1 +1 @@
-{"file":"voa-breadcrumbs-divider.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,kYAAkY;;MCmBtZA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AANlC,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbsDivider","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
+{"file":"voa-breadcrumbs-divider.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,kYAAkY;;MCmBtZA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AANlC,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbsDivider","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.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}";
 
@@ -41,6 +41,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaBreadcrumbsItem = VoaBreadcrumbsItem$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"voa-breadcrumbs-item.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,woBAAwoB;;MCOzpBA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbsItem","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
+{"file":"voa-breadcrumbs-item.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,woBAAwoB;;MCOzpBA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbsItem","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.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;}";
 
@@ -38,6 +38,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaBreadcrumbs = VoaBreadcrumbs$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"voa-breadcrumbs.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0NAA0N;;MCYvOA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbs","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
+{"file":"voa-breadcrumbs.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0NAA0N;;MCYvOA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbs","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

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

@@ -1,4 +1,4 @@
-import { V as VoaButton$1, d as defineCustomElement$1 } from './p-DMLFTaAS.js';
+import { V as VoaButton$1, d as defineCustomElement$1 } from './p-Dto9R8Te.js';
 
 const VoaButton = VoaButton$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const voaCardCss = ":host{display:block}[part=\"base\"]{display:flex;flex-direction:column;overflow:hidden}[part=\"header\"]{display:block}[part=\"body\"]{flex:1;display:block}[part=\"footer\"]{display:block}";
 
@@ -28,6 +28,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaCard = VoaCard$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"voa-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,8LAA8L;;MCOpMA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-card/voa-card.css?tag=voa-card&encapsulation=shadow","src/components/voa-card/voa-card.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n[part=\"base\"] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n}\r\n\r\n[part=\"header\"] {\r\n  display: block;\r\n}\r\n\r\n[part=\"body\"] {\r\n  flex: 1;\r\n  display: block;\r\n}\r\n\r\n[part=\"footer\"] {\r\n  display: block;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-card',\r\n  styleUrl: 'voa-card.css',\r\n  shadow: true,\r\n})\r\nexport class VoaCard {\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div part=\"base\">\r\n          <div part=\"header\">\r\n            <slot name=\"header\"></slot>\r\n          </div>\r\n          <div part=\"body\">\r\n            <slot></slot>\r\n          </div>\r\n          <div part=\"footer\">\r\n            <slot name=\"footer\"></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"voa-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,8LAA8L;;MCOpMA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-card/voa-card.css?tag=voa-card&encapsulation=shadow","src/components/voa-card/voa-card.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n[part=\"base\"] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n}\r\n\r\n[part=\"header\"] {\r\n  display: block;\r\n}\r\n\r\n[part=\"body\"] {\r\n  flex: 1;\r\n  display: block;\r\n}\r\n\r\n[part=\"footer\"] {\r\n  display: block;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'voa-card',\r\n  styleUrl: 'voa-card.css',\r\n  shadow: true,\r\n})\r\nexport class VoaCard {\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div part=\"base\">\r\n          <div part=\"header\">\r\n            <slot name=\"header\"></slot>\r\n          </div>\r\n          <div part=\"body\">\r\n            <slot></slot>\r\n          </div>\r\n          <div part=\"footer\">\r\n            <slot name=\"footer\"></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 
 const voaCheckboxCss = ":host{display:inline-block;box-sizing:border-box;contain:content;pointer-events:auto}.checkbox-container{display:inline-flex;align-items:center;position:relative;box-sizing:border-box;user-select:none;gap:0;}.checkbox-container.checkbox-disabled{cursor:not-allowed;pointer-events:none;opacity:0.5;}.checkbox-container.checkbox-no-label{gap:0}.checkbox-custom{display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;box-sizing:border-box;width:20px;height:20px}.checkbox-custom::after{content:'';display:block;position:absolute;box-sizing:border-box}.checkbox-label{display:inline-block;user-select:none;box-sizing:border-box;min-height:1em}";
 
@@ -138,6 +138,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaCheckbox = VoaCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"voa-checkbox.js","mappings":"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","names":["VoaCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-checkbox/voa-checkbox.css?tag=voa-checkbox&encapsulation=shadow","src/components/voa-checkbox/voa-checkbox.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  contain: content;\r\n  pointer-events: auto;\r\n}\r\n\r\n.checkbox-container {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  user-select: none;\r\n  /* Gap estrutural - será aplicado via CSS custom property externamente */\r\n  gap: 0; /* Defaults to 0, overridable externally */\r\n}\r\n\r\n.checkbox-container.checkbox-disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n  opacity: 0.5; /* Structural indication of disabled state */\r\n}\r\n\r\n.checkbox-container.checkbox-no-label {\r\n  gap: 0;\r\n}\r\n\r\n/* \r\n * The visual box of the checkbox.\r\n * MUST have default dimensions to exist in the layout flow.\r\n */\r\n.checkbox-custom {\r\n  /* Improved alignment */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n  \r\n  /* DEFAULT STRUCTURAL SIZE - 20px conforme Figma */\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n\r\n/* \r\n * We leave the ::after content management to the external CSS \r\n * OR we set basic display properties here so the external CSS \r\n * just has to toggle opacity/color.\r\n */\r\n.checkbox-custom::after {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.checkbox-label {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-block;\r\n  user-select: none;\r\n  box-sizing: border-box;\r\n  /* Ensure label doesn't collapse if empty slot */\r\n  min-height: 1em;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckboxState = 'active' | 'inactive' | 'indeterminate';\r\n\r\n/**\r\n * Componente de checkbox que segue o design system VOA.\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 checkbox (elemento <div> no container)\r\n * @part indicator - O indicador visual do checkbox (caixa customizada)\r\n * @part label - O wrapper do texto do label\r\n * \r\n * @slot default - Conteúdo do label do checkbox\r\n */\r\n@Component({\r\n  tag: 'voa-checkbox',\r\n  styleUrl: 'voa-checkbox.css',\r\n  shadow: {\r\n    delegatesFocus: true, // Passes focus to the internal input/button automatically\r\n  },\r\n  formAssociated: true, // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaCheckbox {\r\n  @Element() host: HTMLVoaCheckboxElement;\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  /**\r\n   * Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n   */\r\n  @State() internalState: CheckboxState = 'inactive';\r\n\r\n  /**\r\n   * State of the checkbox.\r\n   * active = checked\r\n   * inactive = unchecked\r\n   * indeterminate = partial/mixed\r\n   */\r\n  @Prop({ reflect: true }) state: CheckboxState = 'inactive';\r\n\r\n  /**\r\n   * Se o checkbox está desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se o label deve ser exibido.\r\n   */\r\n  @Prop() showLabel: boolean = true;\r\n\r\n  /**\r\n   * Nome do checkbox para formulários.\r\n   */\r\n  @Prop() name: string;\r\n\r\n  /**\r\n   * Valor do checkbox para formulários.\r\n   */\r\n  @Prop() value: string = 'on'; // Default value if none provided\r\n\r\n  /**\r\n   * Emitido quando o estado do checkbox muda.\r\n   * Segue o padrão kebab-case: dsChange.\r\n   */\r\n  @Event() dsChange: EventEmitter<CheckboxState>;\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  /**\r\n   * Atualiza o estado interno e sincroniza com o Form Internals API\r\n   */\r\n  @Watch('state')\r\n  stateChanged(newValue: CheckboxState) {\r\n    this.internalState = newValue;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  /**\r\n   * Watch changes to internal state and update the reflected prop for CSS selectors\r\n   */\r\n  @Watch('internalState')\r\n  internalStateChanged() {\r\n    // Update the reflected state prop so CSS selectors work\r\n    this.state = this.internalState;\r\n  }\r\n\r\n  /**\r\n   * Syncs with the native Form API and Accessibility Tree\r\n   */\r\n  private updateFormInternals() {\r\n    const isChecked = this.internalState === 'active';\r\n\r\n    // 1. Form Value: Only 'active' submits the value by default in standard HTML\r\n    this.internals.setFormValue(isChecked ? this.value : null);\r\n\r\n    // 2. Accessibility State\r\n    let ariaChecked = 'false';\r\n    if (this.internalState === 'active') ariaChecked = 'true';\r\n    if (this.internalState === 'indeterminate') ariaChecked = 'mixed';\r\n\r\n    this.internals.ariaChecked = ariaChecked;\r\n    this.internals.ariaDisabled = this.disabled ? 'true' : 'false';\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no checkbox.\r\n   */\r\n  private handleClick = (_ev: Event) => {\r\n    if (this.disabled) return;\r\n\r\n    // Logic: Indeterminate -> Active. Active -> Inactive. Inactive -> Active.\r\n    if (this.internalState === 'indeterminate' || this.internalState === 'inactive') {\r\n      this.internalState = 'active';\r\n    } else {\r\n      this.internalState = 'inactive';\r\n    }\r\n\r\n    this.updateFormInternals();\r\n    this.dsChange.emit(this.internalState);\r\n  };\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   * Suporta Space para alternar estado.\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    // Native checkbox activates on Space\r\n    if (event.key === ' ') {\r\n      event.preventDefault();\r\n      this.handleClick(event);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        onClick={this.handleClick}\r\n        onKeyDown={this.handleKeyDown}\r\n        tabIndex={this.disabled ? -1 : 0}\r\n        style={{ cursor: this.disabled ? 'not-allowed' : 'pointer' }}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'checkbox-container': true,\r\n            'checkbox-disabled': this.disabled,\r\n            [`checkbox-${this.internalState}`]: true,\r\n            'checkbox-no-label': !this.showLabel,\r\n          }}\r\n        >\r\n          {/* Visual Indicator */}\r\n          <div class=\"checkbox-custom\" part=\"indicator\">\r\n            {/* Optional: You could render the checkmark/dash SVG here if \r\n              you wanted structural icons instead of pure CSS pseudo-elements.\r\n              For now, keeping it empty to match your CSS-only approach.\r\n            */}\r\n          </div>\r\n\r\n          {this.showLabel && (\r\n            <span class=\"checkbox-label\" part=\"label\">\r\n              <slot />\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n} "],"version":3}
+{"file":"voa-checkbox.js","mappings":"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","names":["VoaCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-checkbox/voa-checkbox.css?tag=voa-checkbox&encapsulation=shadow","src/components/voa-checkbox/voa-checkbox.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  contain: content;\r\n  pointer-events: auto;\r\n}\r\n\r\n.checkbox-container {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  user-select: none;\r\n  /* Gap estrutural - será aplicado via CSS custom property externamente */\r\n  gap: 0; /* Defaults to 0, overridable externally */\r\n}\r\n\r\n.checkbox-container.checkbox-disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n  opacity: 0.5; /* Structural indication of disabled state */\r\n}\r\n\r\n.checkbox-container.checkbox-no-label {\r\n  gap: 0;\r\n}\r\n\r\n/* \r\n * The visual box of the checkbox.\r\n * MUST have default dimensions to exist in the layout flow.\r\n */\r\n.checkbox-custom {\r\n  /* Improved alignment */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n  \r\n  /* DEFAULT STRUCTURAL SIZE - 20px conforme Figma */\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n\r\n/* \r\n * We leave the ::after content management to the external CSS \r\n * OR we set basic display properties here so the external CSS \r\n * just has to toggle opacity/color.\r\n */\r\n.checkbox-custom::after {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.checkbox-label {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-block;\r\n  user-select: none;\r\n  box-sizing: border-box;\r\n  /* Ensure label doesn't collapse if empty slot */\r\n  min-height: 1em;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckboxState = 'active' | 'inactive' | 'indeterminate';\r\n\r\n/**\r\n * Componente de checkbox que segue o design system VOA.\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 checkbox (elemento <div> no container)\r\n * @part indicator - O indicador visual do checkbox (caixa customizada)\r\n * @part label - O wrapper do texto do label\r\n * \r\n * @slot default - Conteúdo do label do checkbox\r\n */\r\n@Component({\r\n  tag: 'voa-checkbox',\r\n  styleUrl: 'voa-checkbox.css',\r\n  shadow: {\r\n    delegatesFocus: true, // Passes focus to the internal input/button automatically\r\n  },\r\n  formAssociated: true, // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaCheckbox {\r\n  @Element() host: HTMLVoaCheckboxElement;\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  /**\r\n   * Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n   */\r\n  @State() internalState: CheckboxState = 'inactive';\r\n\r\n  /**\r\n   * State of the checkbox.\r\n   * active = checked\r\n   * inactive = unchecked\r\n   * indeterminate = partial/mixed\r\n   */\r\n  @Prop({ reflect: true }) state: CheckboxState = 'inactive';\r\n\r\n  /**\r\n   * Se o checkbox está desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se o label deve ser exibido.\r\n   */\r\n  @Prop() showLabel: boolean = true;\r\n\r\n  /**\r\n   * Nome do checkbox para formulários.\r\n   */\r\n  @Prop() name: string;\r\n\r\n  /**\r\n   * Valor do checkbox para formulários.\r\n   */\r\n  @Prop() value: string = 'on'; // Default value if none provided\r\n\r\n  /**\r\n   * Emitido quando o estado do checkbox muda.\r\n   * Segue o padrão kebab-case: dsChange.\r\n   */\r\n  @Event() dsChange: EventEmitter<CheckboxState>;\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  /**\r\n   * Atualiza o estado interno e sincroniza com o Form Internals API\r\n   */\r\n  @Watch('state')\r\n  stateChanged(newValue: CheckboxState) {\r\n    this.internalState = newValue;\r\n    this.updateFormInternals();\r\n  }\r\n\r\n  /**\r\n   * Watch changes to internal state and update the reflected prop for CSS selectors\r\n   */\r\n  @Watch('internalState')\r\n  internalStateChanged() {\r\n    // Update the reflected state prop so CSS selectors work\r\n    this.state = this.internalState;\r\n  }\r\n\r\n  /**\r\n   * Syncs with the native Form API and Accessibility Tree\r\n   */\r\n  private updateFormInternals() {\r\n    const isChecked = this.internalState === 'active';\r\n\r\n    // 1. Form Value: Only 'active' submits the value by default in standard HTML\r\n    this.internals.setFormValue(isChecked ? this.value : null);\r\n\r\n    // 2. Accessibility State\r\n    let ariaChecked = 'false';\r\n    if (this.internalState === 'active') ariaChecked = 'true';\r\n    if (this.internalState === 'indeterminate') ariaChecked = 'mixed';\r\n\r\n    this.internals.ariaChecked = ariaChecked;\r\n    this.internals.ariaDisabled = this.disabled ? 'true' : 'false';\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no checkbox.\r\n   */\r\n  private handleClick = (_ev: Event) => {\r\n    if (this.disabled) return;\r\n\r\n    // Logic: Indeterminate -> Active. Active -> Inactive. Inactive -> Active.\r\n    if (this.internalState === 'indeterminate' || this.internalState === 'inactive') {\r\n      this.internalState = 'active';\r\n    } else {\r\n      this.internalState = 'inactive';\r\n    }\r\n\r\n    this.updateFormInternals();\r\n    this.dsChange.emit(this.internalState);\r\n  };\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   * Suporta Space para alternar estado.\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    // Native checkbox activates on Space\r\n    if (event.key === ' ') {\r\n      event.preventDefault();\r\n      this.handleClick(event);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        onClick={this.handleClick}\r\n        onKeyDown={this.handleKeyDown}\r\n        tabIndex={this.disabled ? -1 : 0}\r\n        style={{ cursor: this.disabled ? 'not-allowed' : 'pointer' }}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'checkbox-container': true,\r\n            'checkbox-disabled': this.disabled,\r\n            [`checkbox-${this.internalState}`]: true,\r\n            'checkbox-no-label': !this.showLabel,\r\n          }}\r\n        >\r\n          {/* Visual Indicator */}\r\n          <div class=\"checkbox-custom\" part=\"indicator\">\r\n            {/* Optional: You could render the checkmark/dash SVG here if \r\n              you wanted structural icons instead of pure CSS pseudo-elements.\r\n              For now, keeping it empty to match your CSS-only approach.\r\n            */}\r\n          </div>\r\n\r\n          {this.showLabel && (\r\n            <span class=\"checkbox-label\" part=\"label\">\r\n              <slot />\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n} "],"version":3}

package/dist/custom-elements/voa-container-multi-select.js

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-CFBaVtm5.js';
-import { d as defineCustomElement$2 } from './p-Dij6eiDm.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { d as defineCustomElement$2 } from './p-B2P7cgN3.js';
 
 const voaContainerMultiSelectCss = ":host{display:block;width:100%;box-sizing:border-box}.voa-container-multi-select{position:relative;width:100%;min-height:48px;box-sizing:border-box}.voa-container-multi-select__inner{position:relative;width:100%;min-height:inherit;box-sizing:border-box}.voa-container-multi-select__items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--structure-large-spacing-xs, 4px);width:100%;min-height:inherit;box-sizing:border-box}.voa-container-multi-select__item{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;box-sizing:border-box}.voa-container-multi-select__badge-wrapper{display:inline-flex;align-items:center;cursor:pointer;box-sizing:border-box}.voa-container-multi-select__badge-wrapper voa-badge{cursor:pointer;box-sizing:border-box}.voa-container-multi-select__badge-wrapper voa-badge::part(base){background-color:var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));border:1px dashed var(--branding-coi-colors-light-primary-light, #0064cb);border-radius:var(--structure-large-radius-round, 1024px);padding-block:var(--structure-large-spacing-xxs, 2px);padding-inline:var(--structure-large-spacing-xs, 4px);font-family:var(--branding-coi-type-family-sans, 'Lato', sans-serif);font-size:16px;font-weight:400;line-height:24px;font-style:normal;color:var(--branding-coi-colors-light-primary-light, #0064cb);box-sizing:border-box;transition:background-color 0.2s ease, border-color 0.2s ease;display:inline-flex;align-items:center;gap:var(--structure-large-spacing-xxs, 2px)}.voa-container-multi-select__badge-wrapper:hover voa-badge::part(base){background-color:var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25));border-color:var(--branding-coi-colors-light-primary-light-400, #0071c8)}.voa-container-multi-select__badge-wrapper voa-badge::part(label){color:var(--branding-coi-colors-light-primary-light, #0064cb);box-sizing:border-box;white-space:nowrap}.voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading){display:none}.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing){display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--branding-coi-colors-light-primary-light, #0064cb);box-sizing:border-box;flex-shrink:0;margin-left:var(--structure-large-spacing-xxs, 2px)}.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg{width:12px;height:12px;display:block;flex-shrink:0}.voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing){opacity:0.8}.voa-container-multi-select--disabled .voa-container-multi-select__badge-wrapper voa-badge::part(base){opacity:0.5;cursor:not-allowed;pointer-events:none}.voa-container-multi-select__placeholder{display:flex;align-items:center;justify-content:flex-start;min-height:inherit;width:100%;box-sizing:border-box}.voa-container-multi-select--disabled{cursor:not-allowed;pointer-events:none}";
 
@@ -111,6 +111,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaContainerMultiSelect = VoaContainerMultiSelect$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-container-multi-select.js.map

@@ -1 +1 @@
-{"file":"voa-container-multi-select.js","mappings":"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","names":["VoaContainerMultiSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-select/voa-container-multi-select.css?tag=voa-container-multi-select&encapsulation=shadow","src/components/voa-select/voa-container-multi-select.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: block;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 48px; /* Altura mínima equivalente ao input */\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__inner {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: inherit;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__items {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--structure-large-spacing-xs, 4px); /* Gap entre itens/badges - Figma: spacing/spacing-xs */\r\n  width: 100%;\r\n  min-height: inherit;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__item {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* ============================================\r\n   ESTILOS PARA BADGES ANINHADOS\r\n   ============================================ */\r\n/* \r\n * ⚠️ EXCEÇÃO AO PADRÃO \"UNSTYLED\":\r\n * \r\n * Normalmente, estilos visuais devem ser aplicados externamente via CSS Parts API.\r\n * Porém, quando um componente incorpora outro componente e ambos usam Shadow DOM,\r\n * CSS externo NÃO pode atravessar os limites do Shadow DOM.\r\n * \r\n * SOLUÇÃO (conforme documentação.md):\r\n * Os estilos para o badge incorporado devem ser aplicados DENTRO deste CSS\r\n * (mesmo contexto Shadow DOM), usando design tokens semânticos.\r\n * \r\n * Referência: documentation.md - \"⚠️ CRITICAL: Styling Embedded Components\"\r\n */\r\n\r\n/* Wrapper do badge para permitir clique */\r\n.voa-container-multi-select__badge-wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Badge incorporado - estilos visuais usando design tokens */\r\n.voa-container-multi-select__badge-wrapper voa-badge {\r\n  cursor: pointer;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Badge base - estilos visuais usando design tokens */\r\n/* Nota: Usamos seletores específicos para garantir que os estilos sejam aplicados\r\n   sobre os estilos padrão do badge, já que ambos os componentes usam Shadow DOM */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(base) {\r\n  /* Background - Figma: brand-base with 15% opacity */\r\n  background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));\r\n  \r\n  /* Border - Figma: 1px dashed brand-base */\r\n  border: 1px dashed var(--branding-coi-colors-light-primary-light, #0064cb);\r\n  \r\n  /* Border-radius - Figma: pill shape (1024px from tokens) */\r\n  border-radius: var(--structure-large-radius-round, 1024px);\r\n  \r\n  /* Padding - Figma: 2px vertical, 4px horizontal */\r\n  padding-block: var(--structure-large-spacing-xxs, 2px);\r\n  padding-inline: var(--structure-large-spacing-xs, 4px);\r\n  \r\n  /* Tipografia - Figma: Lato Regular 16px / 24px */\r\n  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);\r\n  font-size: 16px;\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n  font-style: normal;\r\n  \r\n  /* Cor do texto - Figma: brand-base */\r\n  color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n  \r\n  /* Box-sizing */\r\n  box-sizing: border-box;\r\n  \r\n  /* Transições */\r\n  transition: background-color 0.2s ease, border-color 0.2s ease;\r\n  \r\n  /* Display e layout */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--structure-large-spacing-xxs, 2px);\r\n}\r\n\r\n/* Hover state do badge */\r\n.voa-container-multi-select__badge-wrapper:hover voa-badge::part(base) {\r\n  background-color: var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25));\r\n  border-color: var(--branding-coi-colors-light-primary-light-400, #0071c8);\r\n}\r\n\r\n/* Label do badge */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(label) {\r\n  color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n  box-sizing: border-box;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Ícone leading - esconder quando não necessário */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading) {\r\n  display: none;\r\n}\r\n\r\n/* Ícone trailing (close) do badge */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n  box-sizing: border-box;\r\n  flex-shrink: 0;\r\n  margin-left: var(--structure-large-spacing-xxs, 2px);\r\n}\r\n\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg {\r\n  width: 12px;\r\n  height: 12px;\r\n  display: block;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* Hover no ícone close */\r\n.voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing) {\r\n  opacity: 0.8;\r\n}\r\n\r\n/* Disabled state */\r\n.voa-container-multi-select--disabled .voa-container-multi-select__badge-wrapper voa-badge::part(base) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.voa-container-multi-select__placeholder {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  min-height: inherit;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select--disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n} ","import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\r\n\r\n/**\r\n * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.\r\n * Permite selecionar múltiplos itens dentro de um contêiner.\r\n * \r\n * @part base - The root container element\r\n * @part inner - The inner container wrapper\r\n * @part items - The items container wrapper\r\n * @part item - Individual selectable item\r\n * @part placeholder - The placeholder text element\r\n */\r\n@Component({\r\n  tag: 'voa-container-multi-select',\r\n  styleUrl: 'voa-container-multi-select.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaContainerMultiSelect {\r\n  /**\r\n   * Lista de itens para seleção\r\n   */\r\n  @Prop() items: Array<{id: string, label: string, selected?: boolean}> = [];\r\n\r\n  /**\r\n   * Se verdadeiro, o contêiner estará desabilitado.\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Texto de placeholder quando não há itens selecionados\r\n   */\r\n  @Prop() placeholder: string = 'Selecione os itens';\r\n\r\n  /**\r\n   * Estado interno dos itens selecionados\r\n   */\r\n  @State() selectedItems: string[] = [];\r\n\r\n  /**\r\n   * Evento emitido quando a seleção é alterada\r\n   */\r\n  @Event() voaSelectionChange: EventEmitter<string[]>;\r\n\r\n  componentWillLoad() {\r\n    // Inicializa os itens selecionados com base nos itens que já têm selected=true\r\n    this.syncSelectedItems();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    // Sincroniza quando items prop muda (chamado após cada render)\r\n    this.syncSelectedItems();\r\n  }\r\n\r\n  /**\r\n   * Sincroniza selectedItems quando items prop muda\r\n   * Usa componentDidUpdate porque @Watch pode não detectar mudanças em arrays por referência\r\n   */\r\n  private syncSelectedItems() {\r\n    // Atualiza os itens selecionados com base nos itens que têm selected=true\r\n    const newSelectedItems = this.items\r\n      .filter(item => item.selected)\r\n      .map(item => item.id);\r\n    \r\n    // Só atualiza se houver mudança para evitar loops infinitos\r\n    const currentSorted = [...this.selectedItems].sort().join(',');\r\n    const newSorted = [...newSelectedItems].sort().join(',');\r\n    \r\n    if (currentSorted !== newSorted) {\r\n      this.selectedItems = newSelectedItems;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Verifica se um item está selecionado\r\n   */\r\n  private isItemSelected(itemId: string): boolean {\r\n    return this.selectedItems.includes(itemId);\r\n  }\r\n\r\n  /**\r\n   * Manipula o clique no badge (remove o item da seleção quando clicado)\r\n   */\r\n  private handleBadgeClick = (itemId: string) => {\r\n    if (!this.disabled) {\r\n      // Remove o item da seleção quando o badge é clicado (incluindo o ícone close)\r\n      this.selectedItems = this.selectedItems.filter(id => id !== itemId);\r\n      this.voaSelectionChange.emit(this.selectedItems);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div \r\n        part=\"base\"\r\n        class={{\r\n          'voa-container-multi-select': true,\r\n          'voa-container-multi-select--disabled': this.disabled\r\n        }}\r\n        aria-disabled={this.disabled ? 'true' : 'false'}\r\n        role=\"listbox\"\r\n        aria-multiselectable=\"true\"\r\n      >\r\n        <div class=\"voa-container-multi-select__inner\" part=\"inner\">\r\n          {(() => {\r\n            // Filtrar apenas os itens selecionados para renderizar no campo\r\n            const selectedItems = this.items.filter(item => {\r\n              const isSelected = item.selected === true || this.isItemSelected(item.id);\r\n              return isSelected;\r\n            });\r\n\r\n            // Se não há itens selecionados, mostrar placeholder\r\n            if (selectedItems.length === 0) {\r\n              return (\r\n                <div class=\"voa-container-multi-select__placeholder\" part=\"placeholder\">\r\n                  {this.placeholder}\r\n                </div>\r\n              );\r\n            }\r\n\r\n            // Renderizar apenas os itens selecionados como badges\r\n            return (\r\n              <div class=\"voa-container-multi-select__items\" part=\"items\">\r\n                {selectedItems.map(item => (\r\n                  <div\r\n                    key={item.id}\r\n                    class=\"voa-container-multi-select__badge-wrapper\"\r\n                    onClick={() => this.handleBadgeClick(item.id)}\r\n                    role=\"option\"\r\n                    aria-selected=\"true\"\r\n                    tabIndex={this.disabled ? -1 : 0}\r\n                  >\r\n                    <voa-badge\r\n                      label={item.label}\r\n                      variant=\"icons\"\r\n                      size=\"sm\"\r\n                      shape=\"pill\"\r\n                    >\r\n                      <svg slot=\"end\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                        <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                      </svg>\r\n                    </voa-badge>\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            );\r\n          })()}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n} "],"version":3}
+{"file":"voa-container-multi-select.js","mappings":"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","names":["VoaContainerMultiSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-select/voa-container-multi-select.css?tag=voa-container-multi-select&encapsulation=shadow","src/components/voa-select/voa-container-multi-select.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: block;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 48px; /* Altura mínima equivalente ao input */\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__inner {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: inherit;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__items {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--structure-large-spacing-xs, 4px); /* Gap entre itens/badges - Figma: spacing/spacing-xs */\r\n  width: 100%;\r\n  min-height: inherit;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__item {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* ============================================\r\n   ESTILOS PARA BADGES ANINHADOS\r\n   ============================================ */\r\n/* \r\n * ⚠️ EXCEÇÃO AO PADRÃO \"UNSTYLED\":\r\n * \r\n * Normalmente, estilos visuais devem ser aplicados externamente via CSS Parts API.\r\n * Porém, quando um componente incorpora outro componente e ambos usam Shadow DOM,\r\n * CSS externo NÃO pode atravessar os limites do Shadow DOM.\r\n * \r\n * SOLUÇÃO (conforme documentação.md):\r\n * Os estilos para o badge incorporado devem ser aplicados DENTRO deste CSS\r\n * (mesmo contexto Shadow DOM), usando design tokens semânticos.\r\n * \r\n * Referência: documentation.md - \"⚠️ CRITICAL: Styling Embedded Components\"\r\n */\r\n\r\n/* Wrapper do badge para permitir clique */\r\n.voa-container-multi-select__badge-wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Badge incorporado - estilos visuais usando design tokens */\r\n.voa-container-multi-select__badge-wrapper voa-badge {\r\n  cursor: pointer;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Badge base - estilos visuais usando design tokens */\r\n/* Nota: Usamos seletores específicos para garantir que os estilos sejam aplicados\r\n   sobre os estilos padrão do badge, já que ambos os componentes usam Shadow DOM */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(base) {\r\n  /* Background - Figma: brand-base with 15% opacity */\r\n  background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));\r\n  \r\n  /* Border - Figma: 1px dashed brand-base */\r\n  border: 1px dashed var(--branding-coi-colors-light-primary-light, #0064cb);\r\n  \r\n  /* Border-radius - Figma: pill shape (1024px from tokens) */\r\n  border-radius: var(--structure-large-radius-round, 1024px);\r\n  \r\n  /* Padding - Figma: 2px vertical, 4px horizontal */\r\n  padding-block: var(--structure-large-spacing-xxs, 2px);\r\n  padding-inline: var(--structure-large-spacing-xs, 4px);\r\n  \r\n  /* Tipografia - Figma: Lato Regular 16px / 24px */\r\n  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);\r\n  font-size: 16px;\r\n  font-weight: 400;\r\n  line-height: 24px;\r\n  font-style: normal;\r\n  \r\n  /* Cor do texto - Figma: brand-base */\r\n  color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n  \r\n  /* Box-sizing */\r\n  box-sizing: border-box;\r\n  \r\n  /* Transições */\r\n  transition: background-color 0.2s ease, border-color 0.2s ease;\r\n  \r\n  /* Display e layout */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--structure-large-spacing-xxs, 2px);\r\n}\r\n\r\n/* Hover state do badge */\r\n.voa-container-multi-select__badge-wrapper:hover voa-badge::part(base) {\r\n  background-color: var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25));\r\n  border-color: var(--branding-coi-colors-light-primary-light-400, #0071c8);\r\n}\r\n\r\n/* Label do badge */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(label) {\r\n  color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n  box-sizing: border-box;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Ícone leading - esconder quando não necessário */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading) {\r\n  display: none;\r\n}\r\n\r\n/* Ícone trailing (close) do badge */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n  box-sizing: border-box;\r\n  flex-shrink: 0;\r\n  margin-left: var(--structure-large-spacing-xxs, 2px);\r\n}\r\n\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg {\r\n  width: 12px;\r\n  height: 12px;\r\n  display: block;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* Hover no ícone close */\r\n.voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing) {\r\n  opacity: 0.8;\r\n}\r\n\r\n/* Disabled state */\r\n.voa-container-multi-select--disabled .voa-container-multi-select__badge-wrapper voa-badge::part(base) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.voa-container-multi-select__placeholder {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  min-height: inherit;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select--disabled {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n} ","import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\r\n\r\n/**\r\n * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.\r\n * Permite selecionar múltiplos itens dentro de um contêiner.\r\n * \r\n * @part base - The root container element\r\n * @part inner - The inner container wrapper\r\n * @part items - The items container wrapper\r\n * @part item - Individual selectable item\r\n * @part placeholder - The placeholder text element\r\n */\r\n@Component({\r\n  tag: 'voa-container-multi-select',\r\n  styleUrl: 'voa-container-multi-select.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaContainerMultiSelect {\r\n  /**\r\n   * Lista de itens para seleção\r\n   */\r\n  @Prop() items: Array<{id: string, label: string, selected?: boolean}> = [];\r\n\r\n  /**\r\n   * Se verdadeiro, o contêiner estará desabilitado.\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Texto de placeholder quando não há itens selecionados\r\n   */\r\n  @Prop() placeholder: string = 'Selecione os itens';\r\n\r\n  /**\r\n   * Estado interno dos itens selecionados\r\n   */\r\n  @State() selectedItems: string[] = [];\r\n\r\n  /**\r\n   * Evento emitido quando a seleção é alterada\r\n   */\r\n  @Event() voaSelectionChange: EventEmitter<string[]>;\r\n\r\n  componentWillLoad() {\r\n    // Inicializa os itens selecionados com base nos itens que já têm selected=true\r\n    this.syncSelectedItems();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    // Sincroniza quando items prop muda (chamado após cada render)\r\n    this.syncSelectedItems();\r\n  }\r\n\r\n  /**\r\n   * Sincroniza selectedItems quando items prop muda\r\n   * Usa componentDidUpdate porque @Watch pode não detectar mudanças em arrays por referência\r\n   */\r\n  private syncSelectedItems() {\r\n    // Atualiza os itens selecionados com base nos itens que têm selected=true\r\n    const newSelectedItems = this.items\r\n      .filter(item => item.selected)\r\n      .map(item => item.id);\r\n    \r\n    // Só atualiza se houver mudança para evitar loops infinitos\r\n    const currentSorted = [...this.selectedItems].sort().join(',');\r\n    const newSorted = [...newSelectedItems].sort().join(',');\r\n    \r\n    if (currentSorted !== newSorted) {\r\n      this.selectedItems = newSelectedItems;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Verifica se um item está selecionado\r\n   */\r\n  private isItemSelected(itemId: string): boolean {\r\n    return this.selectedItems.includes(itemId);\r\n  }\r\n\r\n  /**\r\n   * Manipula o clique no badge (remove o item da seleção quando clicado)\r\n   */\r\n  private handleBadgeClick = (itemId: string) => {\r\n    if (!this.disabled) {\r\n      // Remove o item da seleção quando o badge é clicado (incluindo o ícone close)\r\n      this.selectedItems = this.selectedItems.filter(id => id !== itemId);\r\n      this.voaSelectionChange.emit(this.selectedItems);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div \r\n        part=\"base\"\r\n        class={{\r\n          'voa-container-multi-select': true,\r\n          'voa-container-multi-select--disabled': this.disabled\r\n        }}\r\n        aria-disabled={this.disabled ? 'true' : 'false'}\r\n        role=\"listbox\"\r\n        aria-multiselectable=\"true\"\r\n      >\r\n        <div class=\"voa-container-multi-select__inner\" part=\"inner\">\r\n          {(() => {\r\n            // Filtrar apenas os itens selecionados para renderizar no campo\r\n            const selectedItems = this.items.filter(item => {\r\n              const isSelected = item.selected === true || this.isItemSelected(item.id);\r\n              return isSelected;\r\n            });\r\n\r\n            // Se não há itens selecionados, mostrar placeholder\r\n            if (selectedItems.length === 0) {\r\n              return (\r\n                <div class=\"voa-container-multi-select__placeholder\" part=\"placeholder\">\r\n                  {this.placeholder}\r\n                </div>\r\n              );\r\n            }\r\n\r\n            // Renderizar apenas os itens selecionados como badges\r\n            return (\r\n              <div class=\"voa-container-multi-select__items\" part=\"items\">\r\n                {selectedItems.map(item => (\r\n                  <div\r\n                    key={item.id}\r\n                    class=\"voa-container-multi-select__badge-wrapper\"\r\n                    onClick={() => this.handleBadgeClick(item.id)}\r\n                    role=\"option\"\r\n                    aria-selected=\"true\"\r\n                    tabIndex={this.disabled ? -1 : 0}\r\n                  >\r\n                    <voa-badge\r\n                      label={item.label}\r\n                      variant=\"icons\"\r\n                      size=\"sm\"\r\n                      shape=\"pill\"\r\n                    >\r\n                      <svg slot=\"end\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                        <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                      </svg>\r\n                    </voa-badge>\r\n                  </div>\r\n                ))}\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/voa-datepicker.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 
 const datepickerCss = ".datepicker{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;width:100%}";
 
@@ -35,6 +35,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaDatepicker = DatePicker;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"voa-datepicker.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASU,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK;AACjC,SAAC;AAYF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,8DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-datepicker/datepicker.css?tag=voa-datepicker&encapsulation=shadow","src/components/voa-datepicker/datepicker.tsx"],"sourcesContent":[".datepicker {\r\n  padding: 10px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n}\r\n","import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-datepicker\",\r\n  styleUrl: \"datepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class DatePicker {\r\n  @Prop() value: string;\r\n  @State() selectedDate: string;\r\n\r\n  private handleDateChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.selectedDate = input.value;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        class=\"datepicker\"\r\n        type=\"date\"\r\n        value={this.selectedDate}\r\n        onInput={this.handleDateChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"voa-datepicker.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASU,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK;AACjC,SAAC;AAYF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,8DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-datepicker/datepicker.css?tag=voa-datepicker&encapsulation=shadow","src/components/voa-datepicker/datepicker.tsx"],"sourcesContent":[".datepicker {\r\n  padding: 10px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n}\r\n","import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-datepicker\",\r\n  styleUrl: \"datepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class DatePicker {\r\n  @Prop() value: string;\r\n  @State() selectedDate: string;\r\n\r\n  private handleDateChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.selectedDate = input.value;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        class=\"datepicker\"\r\n        type=\"date\"\r\n        value={this.selectedDate}\r\n        onInput={this.handleDateChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 
 const drawerCss = ".drawer{position:fixed;top:0;left:0;height:100%;width:250px;background-color:#f4f4f4;box-shadow:2px 0 5px rgba(0, 0, 0, 0.3);overflow-x:hidden;transform:translateX(-100%);transition:transform 0.3s ease-out}.drawer.open{transform:translateX(0)}";
 
@@ -36,6 +36,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaDrawer = Drawer;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"voa-drawer.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qPAAqP;;MCO1P,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAcF;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,CACtC,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-drawer/drawer.css?tag=voa-drawer&encapsulation=shadow","src/components/voa-drawer/drawer.tsx"],"sourcesContent":[".drawer {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  height: 100%;\r\n  width: 250px;\r\n  background-color: #f4f4f4;\r\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);\r\n  overflow-x: hidden;\r\n  transform: translateX(-100%);\r\n  transition: transform 0.3s ease-out;\r\n}\r\n\r\n.drawer.open {\r\n  transform: translateX(0);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-drawer\",\r\n  styleUrl: \"drawer.css\",\r\n  shadow: true,\r\n})\r\nexport class Drawer {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  toggleDrawer = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <button onClick={this.toggleDrawer}>\r\n          {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n        </button>\r\n        <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"voa-drawer.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qPAAqP;;MCO1P,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAcF;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,CACtC,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-drawer/drawer.css?tag=voa-drawer&encapsulation=shadow","src/components/voa-drawer/drawer.tsx"],"sourcesContent":[".drawer {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  height: 100%;\r\n  width: 250px;\r\n  background-color: #f4f4f4;\r\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);\r\n  overflow-x: hidden;\r\n  transform: translateX(-100%);\r\n  transition: transform 0.3s ease-out;\r\n}\r\n\r\n.drawer.open {\r\n  transform: translateX(0);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-drawer\",\r\n  styleUrl: \"drawer.css\",\r\n  shadow: true,\r\n})\r\nexport class Drawer {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  toggleDrawer = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <button onClick={this.toggleDrawer}>\r\n          {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n        </button>\r\n        <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 
 const dropdownCss = ".dropdown{position:relative;display:inline-block}.dropdown-button{padding:10px 20px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;transition:background-color 0.2s}.dropdown-list{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;border-radius:4px;background-color:#fff;list-style:none;padding:0;margin:0;z-index:1}.dropdown-list li{padding:10px;cursor:pointer}.dropdown-list li:hover{background-color:#f4f4f4}";
 
@@ -41,6 +41,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaDropdown = Dropdown;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"voa-dropdown.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0cAA0c;;MCOjd,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AACrB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAGhC,QAAA,IAAc,CAAA,cAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,MAAc,KAAI;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,MAAM;AACtB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAkBF;IAhBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,iBAAiB,IAC1D,IAAI,CAAC,QAAQ,IAAI,kBAAkB,CAC7B,EACR,IAAI,CAAC,MAAM,KACV,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAI,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAG,EAAA,MAAM,CAAM,CAC5D,CAAC,CACC,CACN,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-dropdown/dropdown.css?tag=voa-dropdown&encapsulation=shadow","src/components/voa-dropdown/dropdown.tsx"],"sourcesContent":[".dropdown {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.dropdown-button {\r\n  padding: 10px 20px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.dropdown-list {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  width: 100%;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #fff;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  z-index: 1;\r\n}\r\n\r\n.dropdown-list li {\r\n  padding: 10px;\r\n  cursor: pointer;\r\n}\r\n\r\n.dropdown-list li:hover {\r\n  background-color: #f4f4f4;\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-dropdown\",\r\n  styleUrl: \"dropdown.css\",\r\n  shadow: true,\r\n})\r\nexport class Dropdown {\r\n  @Prop() options: string[] = [];\r\n  @State() isOpen: boolean = false;\r\n  @State() selected: string;\r\n\r\n  toggleDropdown = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  selectOption = (option: string) => {\r\n    this.selected = option;\r\n    this.isOpen = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dropdown\">\r\n        <button onClick={this.toggleDropdown} class=\"dropdown-button\">\r\n          {this.selected || \"Select an option\"}\r\n        </button>\r\n        {this.isOpen && (\r\n          <ul class=\"dropdown-list\">\r\n            {this.options.map((option) => (\r\n              <li onClick={() => this.selectOption(option)}>{option}</li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"voa-dropdown.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0cAA0c;;MCOjd,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AACrB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAGhC,QAAA,IAAc,CAAA,cAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,MAAc,KAAI;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,MAAM;AACtB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAkBF;IAhBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,iBAAiB,IAC1D,IAAI,CAAC,QAAQ,IAAI,kBAAkB,CAC7B,EACR,IAAI,CAAC,MAAM,KACV,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAI,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAG,EAAA,MAAM,CAAM,CAC5D,CAAC,CACC,CACN,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-dropdown/dropdown.css?tag=voa-dropdown&encapsulation=shadow","src/components/voa-dropdown/dropdown.tsx"],"sourcesContent":[".dropdown {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.dropdown-button {\r\n  padding: 10px 20px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.dropdown-list {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  width: 100%;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #fff;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  z-index: 1;\r\n}\r\n\r\n.dropdown-list li {\r\n  padding: 10px;\r\n  cursor: pointer;\r\n}\r\n\r\n.dropdown-list li:hover {\r\n  background-color: #f4f4f4;\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-dropdown\",\r\n  styleUrl: \"dropdown.css\",\r\n  shadow: true,\r\n})\r\nexport class Dropdown {\r\n  @Prop() options: string[] = [];\r\n  @State() isOpen: boolean = false;\r\n  @State() selected: string;\r\n\r\n  toggleDropdown = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  selectOption = (option: string) => {\r\n    this.selected = option;\r\n    this.isOpen = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dropdown\">\r\n        <button onClick={this.toggleDropdown} class=\"dropdown-button\">\r\n          {this.selected || \"Select an option\"}\r\n        </button>\r\n        {this.isOpen && (\r\n          <ul class=\"dropdown-list\">\r\n            {this.options.map((option) => (\r\n              <li onClick={() => this.selectOption(option)}>{option}</li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/custom-elements/voa-input-addon.js

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
-import { d as defineCustomElement$2 } from './p-C3RlQWjO.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-DPyVgztA.js';
 
 const voaInputAddonCss = ":host{display:inline-flex;box-sizing:border-box}.voa-input-addon__base{display:flex;align-items:center;box-sizing:border-box;height:100%}.voa-input-addon--interactive .voa-input-addon__base{cursor:pointer;user-select:none}.voa-input-addon__content{display:flex;align-items:center;gap:var(--spacing-spacing-xxs, 2px);box-sizing:border-box;width:100%;height:100%}.voa-input-addon__text{display:inline-block;box-sizing:border-box}.voa-input-addon__icon,.voa-input-addon__flag-icon,.voa-input-addon__dropdown-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.voa-input-addon__flag-icon{width:24px;height:24px;border-radius:100px}.voa-input-addon__button-text{display:inline-block;box-sizing:border-box}";
 
@@ -149,6 +149,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaInputAddon = VoaInputAddon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/custom-elements/voa-input-addon.js.map

@@ -1 +1 @@
-{"file":"voa-input-addon.js","mappings":"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","names":["VoaInputAddon","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-input-addon/voa-input-addon.css?tag=voa-input-addon&encapsulation=shadow","src/components/voa-input-addon/voa-input-addon.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  box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__base {\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  height: 100%;\r\n}\r\n\r\n.voa-input-addon--interactive .voa-input-addon__base {\r\n  cursor: pointer;\r\n  user-select: none;\r\n}\r\n\r\n.voa-input-addon__content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-spacing-xxs, 2px);\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.voa-input-addon__text {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__icon,\r\n.voa-input-addon__flag-icon,\r\n.voa-input-addon__dropdown-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-input-addon__flag-icon {\r\n  width: 24px;\r\n  height: 24px;\r\n  border-radius: 100px;\r\n}\r\n\r\n.voa-input-addon__button-text {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Componente Input-Addon para elementos auxiliares em inputs.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157\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 addon\r\n * @part content - O conteúdo do addon\r\n * @part icon - O ícone (quando aplicável)\r\n * @part text - O texto do addon\r\n * @part dropdown-icon - O ícone de dropdown (quando aplicável)\r\n */\r\n@Component({\r\n  tag: 'voa-input-addon',\r\n  styleUrl: 'voa-input-addon.css',\r\n  shadow: true,\r\n  scoped: false,\r\n})\r\nexport class VoaInputAddon {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * Variante do addon\r\n   */\r\n  @Prop({ reflect: true }) variant: 'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post' = 'label';\r\n\r\n  /**\r\n   * Texto do label/prepend (para variantes label, select)\r\n   */\r\n  @Prop() prependContent?: string = 'http://';\r\n\r\n  /**\r\n   * Código do país (para variante flags)\r\n   */\r\n  @Prop() countryCode?: string = 'BR +55';\r\n\r\n  /**\r\n   * Texto do botão (para variante button)\r\n   */\r\n  @Prop() buttonLabel?: string = 'Procurar...';\r\n\r\n  /**\r\n   * Símbolo da moeda (para variante currency-pre)\r\n   */\r\n  @Prop() currency?: string = 'R$';\r\n\r\n  /**\r\n   * Nome da moeda (para variante currency-post)\r\n   */\r\n  @Prop() currencyName?: string = 'Real';\r\n\r\n  /**\r\n   * Tecla do atalho (para variante shortcut)\r\n   */\r\n  @Prop() shortcut?: string = 'S';\r\n\r\n  /**\r\n   * Plataforma do atalho (para variante shortcut)\r\n   */\r\n  @Prop() platform?: 'mac' | 'win' = 'mac';\r\n\r\n  /**\r\n   * Evento emitido quando o addon é clicado (para variantes interativas)\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 focusable = this.host.shadowRoot?.querySelector('[tabindex]') as HTMLElement;\r\n    if (focusable) {\r\n      focusable.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no addon\r\n   */\r\n  private handleClick = () => {\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   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\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    }\r\n  };\r\n\r\n  render() {\r\n    const isInteractive = ['button', 'select', 'flags', 'currency-post', 'clear'].includes(this.variant);\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          'voa-input-addon': true,\r\n          [`voa-input-addon--${this.variant}`]: true,\r\n          'voa-input-addon--interactive': isInteractive,\r\n        }}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class=\"voa-input-addon__base\"\r\n          onClick={isInteractive ? this.handleClick : undefined}\r\n          onKeyDown={isInteractive ? this.handleKeyDown : undefined}\r\n          role={isInteractive ? 'button' : undefined}\r\n          tabindex={isInteractive ? 0 : undefined}\r\n          aria-label={this.getAriaLabel()}\r\n        >\r\n          {this.renderContent()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private getAriaLabel(): string | undefined {\r\n    switch (this.variant) {\r\n      case 'button':\r\n        return this.buttonLabel || 'Botão';\r\n      case 'clear':\r\n        return 'Limpar campo';\r\n      case 'select':\r\n        return `Selecionar ${this.prependContent || 'opção'}`;\r\n      case 'flags':\r\n        return `Selecionar país ${this.countryCode || ''}`;\r\n      case 'currency-post':\r\n        return `Selecionar moeda ${this.currencyName || ''}`;\r\n      default:\r\n        return undefined;\r\n    }\r\n  }\r\n\r\n  private renderContent() {\r\n    switch (this.variant) {\r\n      case 'currency-pre':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.currency}\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'select':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.prependContent}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'clear':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"icon\" class=\"voa-input-addon__icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M18 6L6 18M6 6L18 18\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'flags':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"icon\" class=\"voa-input-addon__flag-icon\"></span>\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.countryCode}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'button':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__button-text\">\r\n              {this.buttonLabel}\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'currency-post':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.currencyName}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'shortcut':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <voa-keybinding shortcut={this.shortcut} platform={this.platform}></voa-keybinding>\r\n          </div>\r\n        );\r\n\r\n      case 'label':\r\n      default:\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.prependContent}\r\n            </span>\r\n          </div>\r\n        );\r\n    }\r\n  }\r\n}\r\n\r\n"],"version":3}
+{"file":"voa-input-addon.js","mappings":"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","names":["VoaInputAddon","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-input-addon/voa-input-addon.css?tag=voa-input-addon&encapsulation=shadow","src/components/voa-input-addon/voa-input-addon.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  box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__base {\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  height: 100%;\r\n}\r\n\r\n.voa-input-addon--interactive .voa-input-addon__base {\r\n  cursor: pointer;\r\n  user-select: none;\r\n}\r\n\r\n.voa-input-addon__content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-spacing-xxs, 2px);\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.voa-input-addon__text {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__icon,\r\n.voa-input-addon__flag-icon,\r\n.voa-input-addon__dropdown-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-input-addon__flag-icon {\r\n  width: 24px;\r\n  height: 24px;\r\n  border-radius: 100px;\r\n}\r\n\r\n.voa-input-addon__button-text {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Componente Input-Addon para elementos auxiliares em inputs.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157\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 addon\r\n * @part content - O conteúdo do addon\r\n * @part icon - O ícone (quando aplicável)\r\n * @part text - O texto do addon\r\n * @part dropdown-icon - O ícone de dropdown (quando aplicável)\r\n */\r\n@Component({\r\n  tag: 'voa-input-addon',\r\n  styleUrl: 'voa-input-addon.css',\r\n  shadow: true,\r\n  scoped: false,\r\n})\r\nexport class VoaInputAddon {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * Variante do addon\r\n   */\r\n  @Prop({ reflect: true }) variant: 'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post' = 'label';\r\n\r\n  /**\r\n   * Texto do label/prepend (para variantes label, select)\r\n   */\r\n  @Prop() prependContent?: string = 'http://';\r\n\r\n  /**\r\n   * Código do país (para variante flags)\r\n   */\r\n  @Prop() countryCode?: string = 'BR +55';\r\n\r\n  /**\r\n   * Texto do botão (para variante button)\r\n   */\r\n  @Prop() buttonLabel?: string = 'Procurar...';\r\n\r\n  /**\r\n   * Símbolo da moeda (para variante currency-pre)\r\n   */\r\n  @Prop() currency?: string = 'R$';\r\n\r\n  /**\r\n   * Nome da moeda (para variante currency-post)\r\n   */\r\n  @Prop() currencyName?: string = 'Real';\r\n\r\n  /**\r\n   * Tecla do atalho (para variante shortcut)\r\n   */\r\n  @Prop() shortcut?: string = 'S';\r\n\r\n  /**\r\n   * Plataforma do atalho (para variante shortcut)\r\n   */\r\n  @Prop() platform?: 'mac' | 'win' = 'mac';\r\n\r\n  /**\r\n   * Evento emitido quando o addon é clicado (para variantes interativas)\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 focusable = this.host.shadowRoot?.querySelector('[tabindex]') as HTMLElement;\r\n    if (focusable) {\r\n      focusable.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no addon\r\n   */\r\n  private handleClick = () => {\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   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\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    }\r\n  };\r\n\r\n  render() {\r\n    const isInteractive = ['button', 'select', 'flags', 'currency-post', 'clear'].includes(this.variant);\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          'voa-input-addon': true,\r\n          [`voa-input-addon--${this.variant}`]: true,\r\n          'voa-input-addon--interactive': isInteractive,\r\n        }}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class=\"voa-input-addon__base\"\r\n          onClick={isInteractive ? this.handleClick : undefined}\r\n          onKeyDown={isInteractive ? this.handleKeyDown : undefined}\r\n          role={isInteractive ? 'button' : undefined}\r\n          tabindex={isInteractive ? 0 : undefined}\r\n          aria-label={this.getAriaLabel()}\r\n        >\r\n          {this.renderContent()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private getAriaLabel(): string | undefined {\r\n    switch (this.variant) {\r\n      case 'button':\r\n        return this.buttonLabel || 'Botão';\r\n      case 'clear':\r\n        return 'Limpar campo';\r\n      case 'select':\r\n        return `Selecionar ${this.prependContent || 'opção'}`;\r\n      case 'flags':\r\n        return `Selecionar país ${this.countryCode || ''}`;\r\n      case 'currency-post':\r\n        return `Selecionar moeda ${this.currencyName || ''}`;\r\n      default:\r\n        return undefined;\r\n    }\r\n  }\r\n\r\n  private renderContent() {\r\n    switch (this.variant) {\r\n      case 'currency-pre':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.currency}\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'select':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.prependContent}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'clear':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"icon\" class=\"voa-input-addon__icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M18 6L6 18M6 6L18 18\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'flags':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"icon\" class=\"voa-input-addon__flag-icon\"></span>\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.countryCode}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'button':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__button-text\">\r\n              {this.buttonLabel}\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'currency-post':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.currencyName}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'shortcut':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <voa-keybinding shortcut={this.shortcut} platform={this.platform}></voa-keybinding>\r\n          </div>\r\n        );\r\n\r\n      case 'label':\r\n      default:\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.prependContent}\r\n            </span>\r\n          </div>\r\n        );\r\n    }\r\n  }\r\n}\r\n\r\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 
 const voaInputCss = ":host{display:block;box-sizing:border-box}.voa-input__title-row{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.voa-input__label{display:block;box-sizing:border-box}.voa-input__info{display:flex;align-items:center;gap:4px;box-sizing:border-box}.voa-input__info-icon{display:flex;align-items:center;justify-content:center}.voa-input__required-indicator{display:inline;box-sizing:border-box}.voa-input__container{position:relative;display:flex;align-items:center;box-sizing:border-box;overflow:hidden}.voa-input__prefix{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.voa-input__suffix{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.voa-input__input{flex:1 1 0%;min-width:0;width:100%;border:none;outline:none;background:transparent;box-sizing:border-box;display:block}.voa-input__input:disabled{cursor:not-allowed}.voa-input__input:read-only{cursor:default}.voa-input__helper-text{display:block;box-sizing:border-box}.is-hidden{display:none !important}";
 
@@ -226,6 +226,7 @@ function defineCustomElement$1() {
             break;
     } });
 }
+defineCustomElement$1();
 
 const VoaInput = VoaInput$1;
 const defineCustomElement = defineCustomElement$1;