@govbr-ds/webcomponents 2.0.0-next.46 → 2.0.0-next.47

package/dist/types/components/switch/switch.d.ts

@@ -61,20 +61,25 @@ export declare class Switch {
     readonly density: 'large' | 'medium' | 'small';
     _slotDefault: boolean;
     componentWillLoad(): void;
-    /**
-     * Disparado depois que o valor do `checked` foi alterado
-     */
     /**
      * Disparado depois que o valor do `checked` foi alterado
      */
     checkedChange: EventEmitter<boolean>;
     private _hasSlotContentDefault;
+    /**
+     * Determina o texto a ser usado para acessibilidade quando não há label visível
+     */
+    private getAccessibilityLabel;
     private readonly handleCheckedChange;
     private readonly handleClick;
     /**
      * Inverte o valor da prop `checked`
      */
     toggleChecked(): Promise<void>;
+    /**
+     * Verifica se o componente tem texto visível (via slot ou label)
+     */
+    private hasVisibleText;
     private getCssClassMap;
     render(): any;
 }

package/dist/types/components/tag/tag.d.ts

@@ -54,7 +54,8 @@ export declare class Tag {
      */
     readonly shape: 'circle' | 'rounded' | 'default';
     /**
-     * Status deve ser exibido.
+     * Transforma a tag em um indicador de status, com aparência circular.
+     * É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).
      */
     readonly status: boolean;
     /**
@@ -69,6 +70,19 @@ export declare class Tag {
      * Tag deve estar desabilitado.
      */
     readonly disabled: boolean;
+    /**
+     * Rótulo personalizado para leitores de tela.
+     * Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela.
+     * Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações).
+     */
+    readonly ariaLabel: string;
+    /**
+     * ID do elemento que fornece descrição adicional da tag.
+     * Referencia um elemento na página que contém informações complementares sobre a tag.
+     * A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela.
+     * Exemplo: aria-describedby="help-status" onde existe <div id="help-status">Aguardando aprovação</div>
+     */
+    readonly ariaDescribedby: string;
     /**
      * Tag está selecionada.
      */
@@ -79,10 +93,35 @@ export declare class Tag {
     radioSelected: EventEmitter<string>;
     handleInteractionChange(newValue: boolean): void;
     handleInteractionSelectChange(newValue: boolean): void;
+    handleSelectedChange(newValue: boolean): void;
+    handleCheckedChange(event: CustomEvent): void;
     componentWillLoad(): void;
     connectedCallback(): void;
-    handleSelectedChange(newValue: boolean): void;
+    disconnectedCallback(): void;
+    /**
+     * Permite navegação por teclado (setas) entre tags do tipo radio (seleção unica).
+     * Funciona apenas quando 'interactionSelect' é true e 'multiple' é false.
+     * Ignora tags desabilitadas.
+     * @param event - Evento de teclado
+     */
+    private handleKeyDown;
+    private selectNextRadio;
+    private selectPreviousRadio;
+    private selectRadioByStep;
+    private selectRadioByIndex;
     private getCssClassMap;
+    private getTagAttributes;
+    private getAriaDescribedBy;
+    /**
+     * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).
+     * @param value - String a ser verificada
+     * @returns {boolean} true se a string possui conteúdo
+     */
+    private hasContent;
+    private getAriaLabel;
+    private getRole;
+    private getAriaChecked;
+    private getAriaDisabled;
     private renderIcon;
     private renderLabel;
     private renderCloseButton;
@@ -90,6 +129,9 @@ export declare class Tag {
     private handleClose;
     private handleChangeValueChecked;
     private handleChangeRadioValue;
-    handleCheckedChange(event: CustomEvent): void;
+    private renderMainTagContent;
+    private renderStatusLayout;
+    private handleInputChange;
+    private renderInteractionSelectTag;
     render(): any;
 }

package/dist/types/components/textarea/textarea.d.ts

@@ -20,6 +20,11 @@ export declare class Textarea {
      * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.
      */
     readonly placeholder: string;
+    /**
+     * Texto alternativo para acessibilidade quando não há label visível.
+     * Fornece um rótulo para tecnologias assistivas sem exibir visualmente.
+     */
+    readonly ariaLabel: string;
     /**
      * Identificador único.
      * Caso não seja fornecido, um ID gerado automaticamente será usado.
@@ -65,6 +70,19 @@ export declare class Textarea {
      * @param newValue - O novo valor a ser definido.
      */
     setValue(newValue: string): Promise<void>;
+    /**
+     * Retorna os ids para o atributo aria-describedby do textarea
+     */
+    private getDescribedBy;
+    /**
+     * Determina o texto a ser usado para acessibilidade quando não há label
+     * Ordem de prioridade:
+     *  - aria-label do elemento host
+     *  - propriedade ariaLabel do componente
+     *  - placeholder
+     *  - texto padrão ("Campo de texto")
+     */
+    private getAccessibilityLabel;
     private getCssClassMap;
     render(): any;
 }

package/dist/types/components/upload/upload.d.ts

@@ -1,9 +1,16 @@
 /**
  * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/upload?tab=designer).
  *
- * @slot default - Descrição do slot
+ * @slot default - Texto personalizado para o botão de upload. Se não fornecido, será exibido "Selecione o arquivo" como texto padrão.
+ *                 Use este slot para personalizar o texto do botão de acordo com o contexto do upload, por exemplo: "Anexar documentos",
+ *                 "Enviar imagens", etc.
  */
 export declare class Upload {
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    readonly customId: string;
     /**
      * Referência ao elemento host do componente.
      * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
@@ -15,8 +22,11 @@ export declare class Upload {
      */
     accept: string;
     /**
-     * Texto descritivo do campo de upload.
-     * Este é o texto que é mostrado no label do textarea.
+     * Rótulo principal do campo de upload.
+     * Este texto ajuda usuários de leitores de tela a identificarem o propósito do upload.
+     * Exemplos: "Anexar comprovante", "Enviar foto do documento".
+     *
+     * @default "Envio de arquivo"
      */
     label: string;
     /**
@@ -46,7 +56,7 @@ export declare class Upload {
      * - 'success': Mensagem de sucesso.
      * O valor padrão é 'info'.
      */
-    state: string;
+    state: 'info' | 'warning' | 'danger' | 'success';
     /**
      * Indica se o componente permite a seleção de múltiplos arquivos.
      * Quando definido como `true`, o usuário pode selecionar mais de um arquivo para upload.

package/dist/types/components.d.ts

@@ -1238,6 +1238,14 @@ export namespace Components {
         "customId": string;
     }
     interface BrTag {
+        /**
+          * ID do elemento que fornece descrição adicional da tag. Referencia um elemento na página que contém informações complementares sobre a tag. A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela. Exemplo: aria-describedby="help-status" onde existe <div id="help-status">Aguardando aprovação</div>
+         */
+        "ariaDescribedby": string;
+        /**
+          * Rótulo personalizado para leitores de tela. Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela. Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações).
+         */
+        "ariaLabel": string;
         /**
           * A propriedade 'color' permite definir a cor do componente. Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.
          */
@@ -1287,7 +1295,7 @@ export namespace Components {
          */
         "shape": 'circle' | 'rounded' | 'default';
         /**
-          * Status deve ser exibido.
+          * Transforma a tag em um indicador de status, com aparência circular. É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).
          */
         "status": boolean;
     }
@@ -1295,6 +1303,10 @@ export namespace Components {
      * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
      */
     interface BrTextarea {
+        /**
+          * Texto alternativo para acessibilidade quando não há label visível. Fornece um rótulo para tecnologias assistivas sem exibir visualmente.
+         */
+        "ariaLabel": string;
         /**
           * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
          */
@@ -1393,12 +1405,17 @@ export namespace Components {
           * Tipos de arquivo permitidos (ex: 'image/*'). Esta propriedade define quais tipos de arquivos podem ser selecionados para upload.
          */
         "accept": string;
+        /**
+          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        "customId": string;
         /**
           * Indica se o componente está desativado. Quando definido como `true`, o campo de upload se torna não interativo, impedindo que o usuário selecione ou envie arquivos. Isso é útil para controlar a interação do usuário em situações específicas, como durante o carregamento de dados ou quando o formulário está em um estado inválido.
          */
         "disabled": boolean;
         /**
-          * Texto descritivo do campo de upload. Este é o texto que é mostrado no label do textarea.
+          * Rótulo principal do campo de upload. Este texto ajuda usuários de leitores de tela a identificarem o propósito do upload. Exemplos: "Anexar comprovante", "Enviar foto do documento".
+          * @default "Envio de arquivo"
          */
         "label": string;
         /**
@@ -1408,7 +1425,7 @@ export namespace Components {
         /**
           * Define o estado visual da mensagem. Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'.
          */
-        "state": string;
+        "state": 'info' | 'warning' | 'danger' | 'success';
     }
 }
 export interface BrCheckboxCustomEvent<T> extends CustomEvent<T> {
@@ -3341,6 +3358,14 @@ declare namespace LocalJSX {
         "customId"?: string;
     }
     interface BrTag {
+        /**
+          * ID do elemento que fornece descrição adicional da tag. Referencia um elemento na página que contém informações complementares sobre a tag. A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela. Exemplo: aria-describedby="help-status" onde existe <div id="help-status">Aguardando aprovação</div>
+         */
+        "ariaDescribedby"?: string;
+        /**
+          * Rótulo personalizado para leitores de tela. Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela. Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações).
+         */
+        "ariaLabel"?: string;
         /**
           * A propriedade 'color' permite definir a cor do componente. Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.
          */
@@ -3394,7 +3419,7 @@ declare namespace LocalJSX {
          */
         "shape"?: 'circle' | 'rounded' | 'default';
         /**
-          * Status deve ser exibido.
+          * Transforma a tag em um indicador de status, com aparência circular. É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).
          */
         "status"?: boolean;
     }
@@ -3402,6 +3427,10 @@ declare namespace LocalJSX {
      * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
      */
     interface BrTextarea {
+        /**
+          * Texto alternativo para acessibilidade quando não há label visível. Fornece um rótulo para tecnologias assistivas sem exibir visualmente.
+         */
+        "ariaLabel"?: string;
         /**
           * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
          */
@@ -3507,12 +3536,17 @@ declare namespace LocalJSX {
           * Tipos de arquivo permitidos (ex: 'image/*'). Esta propriedade define quais tipos de arquivos podem ser selecionados para upload.
          */
         "accept"?: string;
+        /**
+          * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        "customId"?: string;
         /**
           * Indica se o componente está desativado. Quando definido como `true`, o campo de upload se torna não interativo, impedindo que o usuário selecione ou envie arquivos. Isso é útil para controlar a interação do usuário em situações específicas, como durante o carregamento de dados ou quando o formulário está em um estado inválido.
          */
         "disabled"?: boolean;
         /**
-          * Texto descritivo do campo de upload. Este é o texto que é mostrado no label do textarea.
+          * Rótulo principal do campo de upload. Este texto ajuda usuários de leitores de tela a identificarem o propósito do upload. Exemplos: "Anexar comprovante", "Enviar foto do documento".
+          * @default "Envio de arquivo"
          */
         "label"?: string;
         /**
@@ -3522,7 +3556,7 @@ declare namespace LocalJSX {
         /**
           * Define o estado visual da mensagem. Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'.
          */
-        "state"?: string;
+        "state"?: 'info' | 'warning' | 'danger' | 'success';
     }
     interface IntrinsicElements {
         "br-avatar": BrAvatar;

package/dist/webcomponents/br-avatar.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"br-avatar.entry.esm.js","sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: inline-block;\n  --avatar-text-background-color: var(--blue-10);\n}\n\n.br-avatar .content.text-pure-0 {\n  background-color: var(--avatar-text-background-color) !important;\n}\n\n.avatar-icon {\n  margin-top: 0.39em;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrAvatarElement\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() readonly alt = 'Foto de perfil do usuário'\n\n  /**\n   * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\n   * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Conteúdo textual do avatar.\n   * Apenas o primeiro caractere será exibido em maiúscula.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  /**\n   * Cor de fundo personalizada para o avatar do tipo texto\n   */\n  @Prop() readonly textBackgroundColor: string\n\n  @State() private hasError = false\n\n  /**\n   * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\n   * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n   */\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n    this.setCustomBackgroundColor()\n  }\n\n  componentDidUpdate() {\n    this.setCustomBackgroundColor()\n  }\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  /**\n   * Obtém as classes CSS para o elemento content.\n   * @returns {string} Classes CSS do content\n   */\n  private getContentClasses(): string {\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return 'content text-pure-0'\n    }\n    return 'content'\n  }\n\n  /**\n   * Define a variável CSS para cor de fundo personalizada para o avatar texto.\n   */\n  private setCustomBackgroundColor() {\n    if (this.hasContent(this.textBackgroundColor)) {\n      this.el.style.setProperty('--avatar-text-background-color', this.textBackgroundColor)\n    }\n  }\n\n  /**\n   * Gera aria-label apropriado baseado no tipo de avatar\n   * Prioriza aria-label do host, senão gera automaticamente\n   */\n  private getAriaLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n    if (this.hasContent(hostAriaLabel)) {\n      return hostAriaLabel\n    }\n\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return `Avatar de ${this.text}`\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.alt\n    }\n\n    return 'Avatar com ícone padrão de usuário'\n  }\n\n  /**\n   * Obtém o valor do token do DS para altura do ícone\n   */\n  private getIconSize(): string {\n    const tokenName = `--icon-size-${this.density === 'small' ? '2x' : this.density === 'medium' ? '5x' : '8x'}`\n    return getComputedStyle(this.el).getPropertyValue(tokenName).trim()\n  }\n\n  /**\n   * Obtém o valor do token do DS para largura do ícone (altura + 8px)\n   */\n  private getIconWidth(): string {\n    const baseSize = this.getIconSize()\n    const numericValue = parseInt(baseSize.replace('px', ''))\n    return `${numericValue + 8}px`\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'letra/texto'.\n   * Exibe a primeira letra do texto em maiúscula.\n   */\n  private renderTextAvatar() {\n    return this.text[0].toUpperCase()\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'fotográfico/imagem'.\n   * Exibe uma imagem carregada via URL.\n   */\n  private renderImageAvatar() {\n    return <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'icônico'.\n   * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.\n   */\n  private renderIconAvatar() {\n    return (\n      <br-icon\n        icon-name=\"fa-solid:user\"\n        height={this.getIconSize()}\n        width={this.getIconWidth()}\n        aria-hidden=\"true\"\n        class=\"avatar-icon\"\n      ></br-icon>\n    )\n  }\n\n  /**\n   * Método principal de renderização do avatar.\n   * Prioridade: isIconic > texto > imagem > ícone (padrão)\n   */\n  private renderAvatar() {\n    if (this.isIconic) {\n      return this.renderIconAvatar()\n    }\n\n    if (this.hasContent(this.text)) {\n      return this.renderTextAvatar()\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.renderImageAvatar()\n    }\n\n    return this.renderIconAvatar()\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} aria-label={this.getAriaLabel()}>\n          <span class={this.getContentClasses()}>{this.renderAvatar()}</span>\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"br-avatar.entry.esm.js","sources":["../../packages/webcomponents/src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","../../packages/webcomponents/src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: inline-block;\n  --avatar-text-background-color: var(--blue-10);\n}\n\n.br-avatar .content.text-pure-0 {\n  background-color: var(--avatar-text-background-color) !important;\n}\n\n.avatar-icon {\n  margin-top: 0.39em;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).\n */\n@Component({\n  tag: 'br-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrAvatarElement\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ mutable: true }) density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-avatar-${avatarId++}`\n\n  /**\n   * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.\n   * Deve ser uma URL válida que aponta para a imagem desejada.\n   */\n  @Prop() readonly src: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.\n   * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: \"Foto de perfil de João Silva\".\n   */\n  @Prop() readonly alt = 'Foto de perfil do usuário'\n\n  /**\n   * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).\n   * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.\n   */\n  @Prop() readonly isIconic: boolean = false\n\n  /**\n   * Conteúdo textual do avatar.\n   * Apenas o primeiro caractere será exibido em maiúscula.\n   */\n  @Prop() readonly text: string\n\n  /**\n   * Define se o avatar está desabilitado\n   */\n  @Prop() readonly disabled = false\n\n  /**\n   * Cor de fundo personalizada para o avatar do tipo texto\n   */\n  @Prop() readonly textBackgroundColor: string\n\n  @State() private hasError = false\n\n  /**\n   * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\n   * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n   */\n  @Watch('density')\n  handleDensityChange(newValue: 'small' | 'medium' | 'large') {\n    if (!['small', 'medium', 'large'].includes(newValue)) {\n      console.warn(`Valor inválido para density: ${newValue}. Usando 'medium'.`)\n      this.density = 'medium'\n    }\n    this.el.setAttribute('density', this.density)\n  }\n\n  componentWillLoad() {\n    this.handleDensityChange(this.density)\n    this.setCustomBackgroundColor()\n  }\n\n  componentDidUpdate() {\n    this.setCustomBackgroundColor()\n  }\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      [this.density]: true,\n      error: this.hasError,\n      disabled: this.disabled,\n    }\n  }\n\n  /**\n   * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).\n   * @param value - String a ser verificada\n   * @returns {boolean} true se a string possui conteúdo\n   */\n  private hasContent(value: string): boolean {\n    return value?.trim().length > 0\n  }\n\n  private readonly handleImageError = () => {\n    this.hasError = true\n    console.error(`Erro ao carregar imagem do avatar: ${this.src}`)\n  }\n\n  /**\n   * Obtém as classes CSS para o elemento content.\n   * @returns {string} Classes CSS do content\n   */\n  private getContentClasses(): string {\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return 'content text-pure-0'\n    }\n    return 'content'\n  }\n\n  /**\n   * Define a variável CSS para cor de fundo personalizada para o avatar texto.\n   */\n  private setCustomBackgroundColor() {\n    if (this.hasContent(this.textBackgroundColor)) {\n      this.el.style.setProperty('--avatar-text-background-color', this.textBackgroundColor)\n    }\n  }\n\n  /**\n   * Gera aria-label apropriado baseado no tipo de avatar\n   * Prioriza aria-label do host, senão gera automaticamente\n   */\n  private getAriaLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n    if (this.hasContent(hostAriaLabel)) {\n      return hostAriaLabel\n    }\n\n    if (this.hasContent(this.text) && !this.isIconic) {\n      return `Avatar de ${this.text}`\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.alt\n    }\n\n    return 'Avatar com ícone padrão de usuário'\n  }\n\n  /**\n   * Obtém o valor do token do DS para altura do ícone\n   */\n  private getIconSize(): string {\n    const tokenName = `--icon-size-${this.density === 'small' ? '2x' : this.density === 'medium' ? '5x' : '8x'}`\n    return getComputedStyle(this.el).getPropertyValue(tokenName).trim()\n  }\n\n  /**\n   * Obtém o valor do token do DS para largura do ícone (altura + 8px)\n   */\n  private getIconWidth(): string {\n    const baseSize = this.getIconSize()\n    const numericValue = parseInt(baseSize.replace('px', ''))\n    return `${numericValue + 8}px`\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'letra/texto'.\n   * Exibe a primeira letra do texto em maiúscula.\n   */\n  private renderTextAvatar() {\n    return this.text[0].toUpperCase()\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'fotográfico/imagem'.\n   * Exibe uma imagem carregada via URL.\n   */\n  private renderImageAvatar() {\n    return <img src={this.src} alt={this.alt} loading=\"lazy\" onError={this.handleImageError} />\n  }\n\n  /**\n   * Renderiza o avatar do tipo 'icônico'.\n   * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.\n   */\n  private renderIconAvatar() {\n    return (\n      <br-icon\n        icon-name=\"fa-solid:user\"\n        height={this.getIconSize()}\n        width={this.getIconWidth()}\n        aria-hidden=\"true\"\n        class=\"avatar-icon\"\n      ></br-icon>\n    )\n  }\n\n  /**\n   * Método principal de renderização do avatar.\n   * Prioridade: isIconic > texto > imagem > ícone (padrão)\n   */\n  private renderAvatar() {\n    if (this.isIconic) {\n      return this.renderIconAvatar()\n    }\n\n    if (this.hasContent(this.text)) {\n      return this.renderTextAvatar()\n    }\n\n    if (this.hasContent(this.src) && !this.hasError) {\n      return this.renderImageAvatar()\n    }\n\n    return this.renderIconAvatar()\n  }\n\n  render() {\n    return (\n      <Host>\n        <span id={this.customId} class={this.getCssClassMap()} role=\"img\" aria-label={this.getAriaLabel()}>\n          <span class={this.getContentClasses()}>{this.renderAvatar()}</span>\n        </span>\n      </Host>\n    )\n  }\n}\n\nlet avatarId = 0\n"],"names":[],"mappings":"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"}