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

package/dist/custom-elements.json

@@ -7570,6 +7570,17 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "getAccessibilityLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "Determina o texto a ser usado para acessibilidade quando não há label visível"
+            },
             {
               "kind": "field",
               "name": "handleCheckedChange",
@@ -7585,6 +7596,17 @@
               "name": "toggleChecked",
               "description": "Inverte o valor da prop `checked`"
             },
+            {
+              "kind": "method",
+              "name": "hasVisibleText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Verifica se o componente tem texto visível (via slot ou label)"
+            },
             {
               "kind": "method",
               "name": "getCssClassMap",
@@ -8859,7 +8881,7 @@
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
-              "default": "DENSITY_SMALL",
+              "default": "DENSITY_MEDIUM",
               "description": "A propriedade 'density' permite definir a densidade do componente.\nAceita valores como 'small', 'medium' e 'large', e é refletida no DOM."
             },
             {
@@ -8878,7 +8900,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Status deve ser exibido."
+              "description": "Transforma a tag em um indicador de status, com aparência circular.\nÉ flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores)."
             },
             {
               "kind": "field",
@@ -8907,6 +8929,24 @@
               "default": "false",
               "description": "Tag deve estar desabilitado."
             },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "description": "Rótulo personalizado para leitores de tela.\nQuando fornecido, substitui completamente o texto visível para usuários de leitores de tela.\nÚtil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações)."
+            },
+            {
+              "kind": "field",
+              "name": "ariaDescribedby",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "description": "ID do elemento que fornece descrição adicional da tag.\nReferencia um elemento na página que contém informações complementares sobre a tag.\nA descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela.\nExemplo: aria-describedby=\"help-status\" onde existe <div id=\"help-status\">Aguardando aprovação</div>"
+            },
             {
               "kind": "field",
               "name": "selectedClassValue",
@@ -8952,6 +8992,72 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "description": "Permite navegação por teclado (setas) entre tags do tipo radio (seleção unica).\nFunciona apenas quando 'interactionSelect' é true e 'multiple' é false.\nIgnora tags desabilitadas.",
+              "parameters": [
+                {
+                  "description": "Evento de teclado",
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "selectNextRadio",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "selectPreviousRadio",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "selectRadioByStep",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "step",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "selectRadioByIndex",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "radios",
+                  "type": {
+                    "text": "HTMLElement[]"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "getCssClassMap",
@@ -8962,6 +9068,81 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "getTagAttributes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getAriaDescribedBy",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "String a ser verificada"
+                }
+              ],
+              "description": "Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco)."
+            },
+            {
+              "kind": "method",
+              "name": "getAriaLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getRole",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getAriaChecked",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getAriaDisabled",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | null"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "renderIcon",
@@ -8999,16 +9180,32 @@
             },
             {
               "kind": "method",
-              "name": "handleCheckedChange",
+              "name": "renderMainTagContent",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderStatusLayout",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "content",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "JSX.Element"
                   }
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "handleInputChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderInteractionSelectTag",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "render"
@@ -9105,6 +9302,20 @@
               "type": {
                 "text": "boolean"
               }
+            },
+            {
+              "name": "aria-label",
+              "fieldName": "ariaLabel",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "aria-describedby",
+              "fieldName": "ariaDescribedby",
+              "type": {
+                "text": "string"
+              }
             }
           ],
           "tagName": "br-tag",
@@ -9192,6 +9403,14 @@
               },
               "description": "Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário."
             },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "Texto alternativo para acessibilidade quando não há label visível.\nFornece um rótulo para tecnologias assistivas sem exibir visualmente."
+            },
             {
               "kind": "field",
               "name": "customId",
@@ -9285,6 +9504,28 @@
               ],
               "description": "Define um novo valor para o textarea."
             },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "Retorna os ids para o atributo aria-describedby do textarea"
+            },
+            {
+              "kind": "method",
+              "name": "getAccessibilityLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "Determina o texto a ser usado para acessibilidade quando não há label\nOrdem de prioridade:\n - aria-label do elemento host\n - propriedade ariaLabel do componente\n - placeholder\n - texto padrão (\"Campo de texto\")"
+            },
             {
               "kind": "method",
               "name": "getCssClassMap",
@@ -9322,6 +9563,13 @@
                 "text": "string"
               }
             },
+            {
+              "name": "aria-label",
+              "fieldName": "ariaLabel",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "name": "custom-id",
               "fieldName": "customId",
@@ -9906,11 +10154,20 @@
           "name": "Upload",
           "slots": [
             {
-              "description": "Descrição do slot",
+              "description": "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.",
               "name": "default"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "customId",
+              "type": {
+                "text": "string"
+              },
+              "default": "`br-upload-${uploadId++}`",
+              "description": "Identificador único.\nCaso não seja fornecido, um ID gerado automaticamente será usado."
+            },
             {
               "kind": "field",
               "name": "el",
@@ -9935,7 +10192,7 @@
                 "text": "string"
               },
               "default": "'Envio de arquivo'",
-              "description": "Texto descritivo do campo de upload.\nEste é o texto que é mostrado no label do textarea."
+              "description": "Rótulo principal do campo de upload.\nEste texto ajuda usuários de leitores de tela a identificarem o propósito do upload.\nExemplos: \"Anexar comprovante\", \"Enviar foto do documento\"."
             },
             {
               "kind": "field",
@@ -9968,7 +10225,7 @@
               "kind": "field",
               "name": "state",
               "type": {
-                "text": "string"
+                "text": "'info' | 'warning' | 'danger' | 'success'"
               },
               "description": "Define o estado visual da mensagem.\nOs possíveis valores são:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padrão é 'info'."
             },
@@ -10084,6 +10341,13 @@
             }
           ],
           "attributes": [
+            {
+              "name": "custom-id",
+              "fieldName": "customId",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "name": "accept",
               "fieldName": "accept",
@@ -10109,7 +10373,7 @@
               "name": "state",
               "fieldName": "state",
               "type": {
-                "text": "string"
+                "text": "'info' | 'warning' | 'danger' | 'success'"
               }
             },
             {

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

@@ -164,7 +164,7 @@ const Avatar = class {
         return this.renderIconAvatar();
     }
     render() {
-        return (h(Host, { key: '3d8b630477fdf515967af256d99e8f73ac4e89b3' }, h("span", { key: '4da2e4630ba4197a46ffeedc5521c547fef21a1c', id: this.customId, class: this.getCssClassMap(), "aria-label": this.getAriaLabel() }, h("span", { key: '4801a24d8e48e24646a2c4060c07068a873c8e9a', class: this.getContentClasses() }, this.renderAvatar()))));
+        return (h(Host, { key: '3d8b630477fdf515967af256d99e8f73ac4e89b3' }, h("span", { key: '3e4ee93b9587e90bd4b04e33f04f565129c1fbb5', id: this.customId, class: this.getCssClassMap(), role: "img", "aria-label": this.getAriaLabel() }, h("span", { key: '33f6cb765e0b1ec7880085c4f268c94fdc6bb3d5', class: this.getContentClasses() }, this.renderAvatar()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"version":3,"file":"br-avatar.entry.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.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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"}