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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/dist/cjs/br-avatar.cjs.entry.js +1 -1
  2. package/dist/cjs/br-avatar.cjs.entry.js.map +1 -1
  3. package/dist/cjs/br-avatar.entry.cjs.js.map +1 -1
  4. package/dist/cjs/br-button.br-icon.entry.cjs.js.map +1 -1
  5. package/dist/cjs/br-button_2.cjs.entry.js +15 -2
  6. package/dist/cjs/br-button_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/br-message.cjs.entry.js +2 -2
  8. package/dist/cjs/br-message.cjs.entry.js.map +1 -1
  9. package/dist/cjs/br-message.entry.cjs.js.map +1 -1
  10. package/dist/cjs/br-switch.cjs.entry.js +28 -2
  11. package/dist/cjs/br-switch.cjs.entry.js.map +1 -1
  12. package/dist/cjs/br-switch.entry.cjs.js.map +1 -1
  13. package/dist/cjs/br-tag.cjs.entry.js +151 -13
  14. package/dist/cjs/br-tag.cjs.entry.js.map +1 -1
  15. package/dist/cjs/br-tag.entry.cjs.js.map +1 -1
  16. package/dist/cjs/br-textarea.cjs.entry.js +32 -5
  17. package/dist/cjs/br-textarea.cjs.entry.js.map +1 -1
  18. package/dist/cjs/br-textarea.entry.cjs.js.map +1 -1
  19. package/dist/cjs/br-tooltip.cjs.entry.js +1 -1
  20. package/dist/cjs/br-upload.cjs.entry.js +15 -23
  21. package/dist/cjs/br-upload.cjs.entry.js.map +1 -1
  22. package/dist/cjs/br-upload.entry.cjs.js.map +1 -1
  23. package/dist/cjs/loader.cjs.js +1 -1
  24. package/dist/cjs/webcomponents.cjs.js +1 -1
  25. package/dist/collection/components/avatar/avatar.js +1 -1
  26. package/dist/collection/components/avatar/avatar.js.map +1 -1
  27. package/dist/collection/components/button/button.js +1 -1
  28. package/dist/collection/components/button/button.js.map +1 -1
  29. package/dist/collection/components/icon/icon.js +42 -1
  30. package/dist/collection/components/icon/icon.js.map +1 -1
  31. package/dist/collection/components/message/message.css +1 -1
  32. package/dist/collection/components/message/message.js +1 -1
  33. package/dist/collection/components/message/message.js.map +1 -1
  34. package/dist/collection/components/switch/switch.css +1 -1
  35. package/dist/collection/components/switch/switch.js +27 -1
  36. package/dist/collection/components/switch/switch.js.map +1 -1
  37. package/dist/collection/components/tag/tag.css +1 -1
  38. package/dist/collection/components/tag/tag.js +192 -14
  39. package/dist/collection/components/tag/tag.js.map +1 -1
  40. package/dist/collection/components/textarea/textarea.js +51 -5
  41. package/dist/collection/components/textarea/textarea.js.map +1 -1
  42. package/dist/collection/components/tooltip/tooltip.js +1 -1
  43. package/dist/collection/components/upload/upload.js +46 -30
  44. package/dist/collection/components/upload/upload.js.map +1 -1
  45. package/dist/components/br-avatar.js +4 -3
  46. package/dist/components/br-avatar.js.map +1 -1
  47. package/dist/components/br-breadcrumb.js +4 -4
  48. package/dist/components/br-button.js +4 -4
  49. package/dist/components/br-collapse.js +4 -4
  50. package/dist/components/br-footer-category.js +3 -3
  51. package/dist/components/br-footer-social.js +2 -2
  52. package/dist/components/br-icon.js +1 -1
  53. package/dist/components/br-input.js +1 -1
  54. package/dist/components/br-list.js +1 -1
  55. package/dist/components/br-message.js +11 -9
  56. package/dist/components/br-message.js.map +1 -1
  57. package/dist/components/br-select.js +5 -5
  58. package/dist/components/br-step-item.js +2 -2
  59. package/dist/components/br-switch.js +35 -11
  60. package/dist/components/br-switch.js.map +1 -1
  61. package/dist/components/br-tab-item.js +1 -1
  62. package/dist/components/br-tag.js +167 -52
  63. package/dist/components/br-tag.js.map +1 -1
  64. package/dist/components/br-textarea.js +42 -15
  65. package/dist/components/br-textarea.js.map +1 -1
  66. package/dist/components/br-tooltip.js +31 -31
  67. package/dist/components/br-upload.js +57 -59
  68. package/dist/components/br-upload.js.map +1 -1
  69. package/dist/components/{p-Hceu1c6D.js → p-BUfNFi9N.js} +3 -3
  70. package/dist/components/{p-mX_ZX0bR.js → p-Bjt1OWm8.js} +4 -4
  71. package/dist/components/{p-ssSt5UuQ.js → p-Brhs7qAd.js} +6 -7
  72. package/dist/components/p-Brhs7qAd.js.map +1 -0
  73. package/dist/components/{p-xvM_htUS.js → p-CYtPDYp6.js} +22 -6
  74. package/dist/components/p-CYtPDYp6.js.map +1 -0
  75. package/dist/components/{p-3-jhm6pC.js → p-D0wwETCp.js} +4 -4
  76. package/dist/custom-elements.json +297 -9
  77. package/dist/esm/br-avatar.entry.js +1 -1
  78. package/dist/esm/br-avatar.entry.js.map +1 -1
  79. package/dist/esm/br-button.br-icon.entry.js.map +1 -1
  80. package/dist/esm/br-button_2.entry.js +15 -2
  81. package/dist/esm/br-button_2.entry.js.map +1 -1
  82. package/dist/esm/br-message.entry.js +2 -2
  83. package/dist/esm/br-message.entry.js.map +1 -1
  84. package/dist/esm/br-switch.entry.js +28 -2
  85. package/dist/esm/br-switch.entry.js.map +1 -1
  86. package/dist/esm/br-tag.entry.js +151 -13
  87. package/dist/esm/br-tag.entry.js.map +1 -1
  88. package/dist/esm/br-textarea.entry.js +32 -5
  89. package/dist/esm/br-textarea.entry.js.map +1 -1
  90. package/dist/esm/br-tooltip.entry.js +1 -1
  91. package/dist/esm/br-upload.entry.js +15 -23
  92. package/dist/esm/br-upload.entry.js.map +1 -1
  93. package/dist/esm/loader.js +1 -1
  94. package/dist/esm/webcomponents.js +1 -1
  95. package/dist/hydrate/index.js +258 -55
  96. package/dist/hydrate/index.mjs +258 -55
  97. package/dist/types/components/icon/icon.d.ts +35 -0
  98. package/dist/types/components/switch/switch.d.ts +8 -3
  99. package/dist/types/components/tag/tag.d.ts +45 -3
  100. package/dist/types/components/textarea/textarea.d.ts +18 -0
  101. package/dist/types/components/upload/upload.d.ts +14 -4
  102. package/dist/types/components.d.ts +54 -6
  103. package/dist/webcomponents/br-avatar.entry.esm.js.map +1 -1
  104. package/dist/webcomponents/br-button.br-icon.entry.esm.js.map +1 -1
  105. package/dist/webcomponents/br-message.entry.esm.js.map +1 -1
  106. package/dist/webcomponents/br-switch.entry.esm.js.map +1 -1
  107. package/dist/webcomponents/br-tag.entry.esm.js.map +1 -1
  108. package/dist/webcomponents/br-textarea.entry.esm.js.map +1 -1
  109. package/dist/webcomponents/br-upload.entry.esm.js.map +1 -1
  110. package/dist/webcomponents/{p-9f9f80c1.entry.js → p-0b45efc3.entry.js} +6 -4
  111. package/dist/webcomponents/p-0b45efc3.entry.js.map +1 -0
  112. package/dist/webcomponents/{p-b019dfca.entry.js → p-3f18e20a.entry.js} +23 -9
  113. package/dist/webcomponents/p-3f18e20a.entry.js.map +1 -0
  114. package/dist/webcomponents/{p-8b15dfc8.entry.js → p-6dba4bb1.entry.js} +10 -10
  115. package/dist/webcomponents/{p-df6e707a.entry.js → p-7251c80f.entry.js} +4 -3
  116. package/dist/webcomponents/p-7251c80f.entry.js.map +1 -0
  117. package/dist/webcomponents/{p-24f6adad.entry.js → p-73794ac8.entry.js} +42 -16
  118. package/dist/webcomponents/p-73794ac8.entry.js.map +1 -0
  119. package/dist/webcomponents/{p-abf81334.entry.js → p-82dec3b6.entry.js} +36 -12
  120. package/dist/webcomponents/p-82dec3b6.entry.js.map +1 -0
  121. package/dist/webcomponents/{p-a802ca08.entry.js → p-861b8ebf.entry.js} +55 -58
  122. package/dist/webcomponents/p-861b8ebf.entry.js.map +1 -0
  123. package/dist/webcomponents/{p-761f7798.entry.js → p-d3463d4a.entry.js} +161 -48
  124. package/dist/webcomponents/p-d3463d4a.entry.js.map +1 -0
  125. package/dist/webcomponents/webcomponents.esm.js +1 -1
  126. package/dist/webcomponents.html-custom-data.json +17 -4
  127. package/package.json +1 -1
  128. package/dist/components/p-ssSt5UuQ.js.map +0 -1
  129. package/dist/components/p-xvM_htUS.js.map +0 -1
  130. package/dist/webcomponents/p-24f6adad.entry.js.map +0 -1
  131. package/dist/webcomponents/p-761f7798.entry.js.map +0 -1
  132. package/dist/webcomponents/p-9f9f80c1.entry.js.map +0 -1
  133. package/dist/webcomponents/p-a802ca08.entry.js.map +0 -1
  134. package/dist/webcomponents/p-abf81334.entry.js.map +0 -1
  135. package/dist/webcomponents/p-b019dfca.entry.js.map +0 -1
  136. package/dist/webcomponents/p-df6e707a.entry.js.map +0 -1
  137. /package/dist/components/{p-Hceu1c6D.js.map → p-BUfNFi9N.js.map} +0 -0
  138. /package/dist/components/{p-mX_ZX0bR.js.map → p-Bjt1OWm8.js.map} +0 -0
  139. /package/dist/components/{p-3-jhm6pC.js.map → p-D0wwETCp.js.map} +0 -0
  140. /package/dist/webcomponents/{p-8b15dfc8.entry.js.map → p-6dba4bb1.entry.js.map} +0 -0
@@ -63,6 +63,41 @@ export declare class Icon {
63
63
  * O valor padrão é `false`.
64
64
  */
65
65
  readonly isFocusable?: boolean;
66
+ /**
67
+ * Controla o comportamento de carregamento do ícone através do observer interno do Iconify.
68
+ *
69
+ * Comportamento:
70
+ * - Padrão (propriedade não definida): carregamento imediato aplicando `noobserver` para evitar problemas de layout shift
71
+ * - `lazy={true}`: ativa o observer para carregamento lazy otimizado (útil em documentos longos com muitos ícones)
72
+ * - `lazy={false}`: carregamento imediato aplicando `noobserver` (mesmo comportamento do padrão)
73
+ *
74
+ * **Nota**: O padrão foi alterado para carregamento imediato para resolver problemas de deslocamento de layout
75
+ * que ocorriam quando ícones eram carregados depois do conteúdo inicial.
76
+ *
77
+ * @example
78
+ * // Comportamento padrão (carregamento imediato - sem layout shift)
79
+ * <br-icon icon-name="mdi:home"></br-icon>
80
+ *
81
+ * @example
82
+ * // Carregamento lazy para otimizar performance em documentos longos
83
+ * <br-icon icon-name="mdi:home" lazy={true}></br-icon>
84
+ *
85
+ * @example
86
+ * // Carregamento imediato explícito (mesmo comportamento do padrão)
87
+ * <br-icon icon-name="mdi:home" lazy={false}></br-icon>
88
+ */
89
+ readonly lazy?: boolean;
90
+ /**
91
+ * Retorna o valor efetivo para o comportamento "lazy" do ícone.
92
+ *
93
+ * Explicação:
94
+ * - Se o atributo 'lazy' estiver presente no elemento, o método retorna o valor da propriedade this.lazy (true ou false).
95
+ * - Se o atributo 'lazy' NÃO estiver presente, assume-se o comportamento padrão, retornando false (ou seja, carregamento imediato ativado).
96
+ *
97
+ * Isso permite distinguir entre o caso em que o usuário explicitamente define lazy={true} (carregamento lazy)
98
+ * e o caso em que o atributo não é informado (carregamento imediato por padrão).
99
+ */
100
+ private get effectiveLazy();
66
101
  componentDidLoad(): void;
67
102
  render(): any;
68
103
  }
@@ -61,20 +61,25 @@ export declare class Switch {
61
61
  readonly density: 'large' | 'medium' | 'small';
62
62
  _slotDefault: boolean;
63
63
  componentWillLoad(): void;
64
- /**
65
- * Disparado depois que o valor do `checked` foi alterado
66
- */
67
64
  /**
68
65
  * Disparado depois que o valor do `checked` foi alterado
69
66
  */
70
67
  checkedChange: EventEmitter<boolean>;
71
68
  private _hasSlotContentDefault;
69
+ /**
70
+ * Determina o texto a ser usado para acessibilidade quando não há label visível
71
+ */
72
+ private getAccessibilityLabel;
72
73
  private readonly handleCheckedChange;
73
74
  private readonly handleClick;
74
75
  /**
75
76
  * Inverte o valor da prop `checked`
76
77
  */
77
78
  toggleChecked(): Promise<void>;
79
+ /**
80
+ * Verifica se o componente tem texto visível (via slot ou label)
81
+ */
82
+ private hasVisibleText;
78
83
  private getCssClassMap;
79
84
  render(): any;
80
85
  }
@@ -54,7 +54,8 @@ export declare class Tag {
54
54
  */
55
55
  readonly shape: 'circle' | 'rounded' | 'default';
56
56
  /**
57
- * Status deve ser exibido.
57
+ * Transforma a tag em um indicador de status, com aparência circular.
58
+ * É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).
58
59
  */
59
60
  readonly status: boolean;
60
61
  /**
@@ -69,6 +70,19 @@ export declare class Tag {
69
70
  * Tag deve estar desabilitado.
70
71
  */
71
72
  readonly disabled: boolean;
73
+ /**
74
+ * Rótulo personalizado para leitores de tela.
75
+ * Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela.
76
+ * Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações).
77
+ */
78
+ readonly ariaLabel: string;
79
+ /**
80
+ * ID do elemento que fornece descrição adicional da tag.
81
+ * Referencia um elemento na página que contém informações complementares sobre a tag.
82
+ * A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela.
83
+ * Exemplo: aria-describedby="help-status" onde existe <div id="help-status">Aguardando aprovação</div>
84
+ */
85
+ readonly ariaDescribedby: string;
72
86
  /**
73
87
  * Tag está selecionada.
74
88
  */
@@ -79,10 +93,35 @@ export declare class Tag {
79
93
  radioSelected: EventEmitter<string>;
80
94
  handleInteractionChange(newValue: boolean): void;
81
95
  handleInteractionSelectChange(newValue: boolean): void;
96
+ handleSelectedChange(newValue: boolean): void;
97
+ handleCheckedChange(event: CustomEvent): void;
82
98
  componentWillLoad(): void;
83
99
  connectedCallback(): void;
84
- handleSelectedChange(newValue: boolean): void;
100
+ disconnectedCallback(): void;
101
+ /**
102
+ * Permite navegação por teclado (setas) entre tags do tipo radio (seleção unica).
103
+ * Funciona apenas quando 'interactionSelect' é true e 'multiple' é false.
104
+ * Ignora tags desabilitadas.
105
+ * @param event - Evento de teclado
106
+ */
107
+ private handleKeyDown;
108
+ private selectNextRadio;
109
+ private selectPreviousRadio;
110
+ private selectRadioByStep;
111
+ private selectRadioByIndex;
85
112
  private getCssClassMap;
113
+ private getTagAttributes;
114
+ private getAriaDescribedBy;
115
+ /**
116
+ * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).
117
+ * @param value - String a ser verificada
118
+ * @returns {boolean} true se a string possui conteúdo
119
+ */
120
+ private hasContent;
121
+ private getAriaLabel;
122
+ private getRole;
123
+ private getAriaChecked;
124
+ private getAriaDisabled;
86
125
  private renderIcon;
87
126
  private renderLabel;
88
127
  private renderCloseButton;
@@ -90,6 +129,9 @@ export declare class Tag {
90
129
  private handleClose;
91
130
  private handleChangeValueChecked;
92
131
  private handleChangeRadioValue;
93
- handleCheckedChange(event: CustomEvent): void;
132
+ private renderMainTagContent;
133
+ private renderStatusLayout;
134
+ private handleInputChange;
135
+ private renderInteractionSelectTag;
94
136
  render(): any;
95
137
  }
@@ -20,6 +20,11 @@ export declare class Textarea {
20
20
  * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.
21
21
  */
22
22
  readonly placeholder: string;
23
+ /**
24
+ * Texto alternativo para acessibilidade quando não há label visível.
25
+ * Fornece um rótulo para tecnologias assistivas sem exibir visualmente.
26
+ */
27
+ readonly ariaLabel: string;
23
28
  /**
24
29
  * Identificador único.
25
30
  * Caso não seja fornecido, um ID gerado automaticamente será usado.
@@ -65,6 +70,19 @@ export declare class Textarea {
65
70
  * @param newValue - O novo valor a ser definido.
66
71
  */
67
72
  setValue(newValue: string): Promise<void>;
73
+ /**
74
+ * Retorna os ids para o atributo aria-describedby do textarea
75
+ */
76
+ private getDescribedBy;
77
+ /**
78
+ * Determina o texto a ser usado para acessibilidade quando não há label
79
+ * Ordem de prioridade:
80
+ * - aria-label do elemento host
81
+ * - propriedade ariaLabel do componente
82
+ * - placeholder
83
+ * - texto padrão ("Campo de texto")
84
+ */
85
+ private getAccessibilityLabel;
68
86
  private getCssClassMap;
69
87
  render(): any;
70
88
  }
@@ -1,9 +1,16 @@
1
1
  /**
2
2
  * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/upload?tab=designer).
3
3
  *
4
- * @slot default - Descrição do slot
4
+ * @slot default - Texto personalizado para o botão de upload. Se não fornecido, será exibido "Selecione o arquivo" como texto padrão.
5
+ * Use este slot para personalizar o texto do botão de acordo com o contexto do upload, por exemplo: "Anexar documentos",
6
+ * "Enviar imagens", etc.
5
7
  */
6
8
  export declare class Upload {
9
+ /**
10
+ * Identificador único.
11
+ * Caso não seja fornecido, um ID gerado automaticamente será usado.
12
+ */
13
+ readonly customId: string;
7
14
  /**
8
15
  * Referência ao elemento host do componente.
9
16
  * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
@@ -15,8 +22,11 @@ export declare class Upload {
15
22
  */
16
23
  accept: string;
17
24
  /**
18
- * Texto descritivo do campo de upload.
19
- * Este é o texto que é mostrado no label do textarea.
25
+ * Rótulo principal do campo de upload.
26
+ * Este texto ajuda usuários de leitores de tela a identificarem o propósito do upload.
27
+ * Exemplos: "Anexar comprovante", "Enviar foto do documento".
28
+ *
29
+ * @default "Envio de arquivo"
20
30
  */
21
31
  label: string;
22
32
  /**
@@ -46,7 +56,7 @@ export declare class Upload {
46
56
  * - 'success': Mensagem de sucesso.
47
57
  * O valor padrão é 'info'.
48
58
  */
49
- state: string;
59
+ state: 'info' | 'warning' | 'danger' | 'success';
50
60
  /**
51
61
  * Indica se o componente permite a seleção de múltiplos arquivos.
52
62
  * Quando definido como `true`, o usuário pode selecionar mais de um arquivo para upload.
@@ -510,6 +510,13 @@ export namespace Components {
510
510
  * Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor. Útil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto. O valor padrão é `false`.
511
511
  */
512
512
  "isInline"?: boolean;
513
+ /**
514
+ * Controla o comportamento de carregamento do ícone através do observer interno do Iconify. Comportamento: - Padrão (propriedade não definida): carregamento imediato aplicando `noobserver` para evitar problemas de layout shift - `lazy={true}`: ativa o observer para carregamento lazy otimizado (útil em documentos longos com muitos ícones) - `lazy={false}`: carregamento imediato aplicando `noobserver` (mesmo comportamento do padrão) **Nota**: O padrão foi alterado para carregamento imediato para resolver problemas de deslocamento de layout que ocorriam quando ícones eram carregados depois do conteúdo inicial.
515
+ * @example // Comportamento padrão (carregamento imediato - sem layout shift) <br-icon icon-name="mdi:home"></br-icon>
516
+ * @example // Carregamento lazy para otimizar performance em documentos longos <br-icon icon-name="mdi:home" lazy={true}></br-icon>
517
+ * @example // Carregamento imediato explícito (mesmo comportamento do padrão) <br-icon icon-name="mdi:home" lazy={false}></br-icon>
518
+ */
519
+ "lazy"?: boolean;
513
520
  /**
514
521
  * Define o ângulo de rotação do ícone. Aceita valores como "90deg", "180deg" e "270deg" para rotacionar o ícone em diferentes ângulos.
515
522
  */
@@ -1231,6 +1238,14 @@ export namespace Components {
1231
1238
  "customId": string;
1232
1239
  }
1233
1240
  interface BrTag {
1241
+ /**
1242
+ * 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>
1243
+ */
1244
+ "ariaDescribedby": string;
1245
+ /**
1246
+ * 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).
1247
+ */
1248
+ "ariaLabel": string;
1234
1249
  /**
1235
1250
  * A propriedade 'color' permite definir a cor do componente. Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.
1236
1251
  */
@@ -1280,7 +1295,7 @@ export namespace Components {
1280
1295
  */
1281
1296
  "shape": 'circle' | 'rounded' | 'default';
1282
1297
  /**
1283
- * Status deve ser exibido.
1298
+ * 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).
1284
1299
  */
1285
1300
  "status": boolean;
1286
1301
  }
@@ -1288,6 +1303,10 @@ export namespace Components {
1288
1303
  * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
1289
1304
  */
1290
1305
  interface BrTextarea {
1306
+ /**
1307
+ * Texto alternativo para acessibilidade quando não há label visível. Fornece um rótulo para tecnologias assistivas sem exibir visualmente.
1308
+ */
1309
+ "ariaLabel": string;
1291
1310
  /**
1292
1311
  * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
1293
1312
  */
@@ -1386,12 +1405,17 @@ export namespace Components {
1386
1405
  * Tipos de arquivo permitidos (ex: 'image/*'). Esta propriedade define quais tipos de arquivos podem ser selecionados para upload.
1387
1406
  */
1388
1407
  "accept": string;
1408
+ /**
1409
+ * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
1410
+ */
1411
+ "customId": string;
1389
1412
  /**
1390
1413
  * 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.
1391
1414
  */
1392
1415
  "disabled": boolean;
1393
1416
  /**
1394
- * Texto descritivo do campo de upload. Este é o texto que é mostrado no label do textarea.
1417
+ * 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".
1418
+ * @default "Envio de arquivo"
1395
1419
  */
1396
1420
  "label": string;
1397
1421
  /**
@@ -1401,7 +1425,7 @@ export namespace Components {
1401
1425
  /**
1402
1426
  * 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'.
1403
1427
  */
1404
- "state": string;
1428
+ "state": 'info' | 'warning' | 'danger' | 'success';
1405
1429
  }
1406
1430
  }
1407
1431
  export interface BrCheckboxCustomEvent<T> extends CustomEvent<T> {
@@ -2610,6 +2634,13 @@ declare namespace LocalJSX {
2610
2634
  * Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor. Útil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto. O valor padrão é `false`.
2611
2635
  */
2612
2636
  "isInline"?: boolean;
2637
+ /**
2638
+ * Controla o comportamento de carregamento do ícone através do observer interno do Iconify. Comportamento: - Padrão (propriedade não definida): carregamento imediato aplicando `noobserver` para evitar problemas de layout shift - `lazy={true}`: ativa o observer para carregamento lazy otimizado (útil em documentos longos com muitos ícones) - `lazy={false}`: carregamento imediato aplicando `noobserver` (mesmo comportamento do padrão) **Nota**: O padrão foi alterado para carregamento imediato para resolver problemas de deslocamento de layout que ocorriam quando ícones eram carregados depois do conteúdo inicial.
2639
+ * @example // Comportamento padrão (carregamento imediato - sem layout shift) <br-icon icon-name="mdi:home"></br-icon>
2640
+ * @example // Carregamento lazy para otimizar performance em documentos longos <br-icon icon-name="mdi:home" lazy={true}></br-icon>
2641
+ * @example // Carregamento imediato explícito (mesmo comportamento do padrão) <br-icon icon-name="mdi:home" lazy={false}></br-icon>
2642
+ */
2643
+ "lazy"?: boolean;
2613
2644
  /**
2614
2645
  * Define o ângulo de rotação do ícone. Aceita valores como "90deg", "180deg" e "270deg" para rotacionar o ícone em diferentes ângulos.
2615
2646
  */
@@ -3327,6 +3358,14 @@ declare namespace LocalJSX {
3327
3358
  "customId"?: string;
3328
3359
  }
3329
3360
  interface BrTag {
3361
+ /**
3362
+ * 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>
3363
+ */
3364
+ "ariaDescribedby"?: string;
3365
+ /**
3366
+ * 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).
3367
+ */
3368
+ "ariaLabel"?: string;
3330
3369
  /**
3331
3370
  * A propriedade 'color' permite definir a cor do componente. Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.
3332
3371
  */
@@ -3380,7 +3419,7 @@ declare namespace LocalJSX {
3380
3419
  */
3381
3420
  "shape"?: 'circle' | 'rounded' | 'default';
3382
3421
  /**
3383
- * Status deve ser exibido.
3422
+ * 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).
3384
3423
  */
3385
3424
  "status"?: boolean;
3386
3425
  }
@@ -3388,6 +3427,10 @@ declare namespace LocalJSX {
3388
3427
  * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
3389
3428
  */
3390
3429
  interface BrTextarea {
3430
+ /**
3431
+ * Texto alternativo para acessibilidade quando não há label visível. Fornece um rótulo para tecnologias assistivas sem exibir visualmente.
3432
+ */
3433
+ "ariaLabel"?: string;
3391
3434
  /**
3392
3435
  * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
3393
3436
  */
@@ -3493,12 +3536,17 @@ declare namespace LocalJSX {
3493
3536
  * Tipos de arquivo permitidos (ex: 'image/*'). Esta propriedade define quais tipos de arquivos podem ser selecionados para upload.
3494
3537
  */
3495
3538
  "accept"?: string;
3539
+ /**
3540
+ * Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
3541
+ */
3542
+ "customId"?: string;
3496
3543
  /**
3497
3544
  * 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.
3498
3545
  */
3499
3546
  "disabled"?: boolean;
3500
3547
  /**
3501
- * Texto descritivo do campo de upload. Este é o texto que é mostrado no label do textarea.
3548
+ * 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".
3549
+ * @default "Envio de arquivo"
3502
3550
  */
3503
3551
  "label"?: string;
3504
3552
  /**
@@ -3508,7 +3556,7 @@ declare namespace LocalJSX {
3508
3556
  /**
3509
3557
  * 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'.
3510
3558
  */
3511
- "state"?: string;
3559
+ "state"?: 'info' | 'warning' | 'danger' | 'success';
3512
3560
  }
3513
3561
  interface IntrinsicElements {
3514
3562
  "br-avatar": BrAvatar;
@@ -1 +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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"}
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()} 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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"}