@govbr-ds/webcomponents 2.0.0-next.14 → 2.0.0-next.16

package/dist/esm/webcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-c7037515.js';
-export { s as setNonce } from './index-c7037515.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-cad6e6c3.js';
+export { s as setNonce } from './index-cad6e6c3.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["br-input",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"showIconTextPassword":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list",[[65,"br-list",{"listTitle":[513,"list-title"],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"],"toggle":[516],"_slotDefault":[32]},[[4,"brDidSelect","handleItemInteractiveSelect"]]]]],["br-switch",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-button_2",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"IconName":[513,"icon-name"],"height":[513],"width":[513],"CssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
+  return bootstrapLazy([["br-input",[[65,"br-input",{"defaultID":[513,"default-i-d"],"type":[513],"autocomplete":[513],"density":[513],"disabled":[516],"isInline":[516,"is-inline"],"isHighlight":[516,"is-highlight"],"success":[516],"danger":[516],"info":[516],"warning":[516],"label":[513],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"value":[1537],"helpText":[513,"help-text"],"showIconTextPassword":[32],"hasIconSlot":[32],"hasActionSlot":[32]}]]],["br-message",[[65,"br-message",{"messageTitle":[513,"message-title"],"message":[513],"isInline":[516,"is-inline"],"isClosable":[516,"is-closable"],"showIcon":[516,"show-icon"],"isFeedback":[516,"is-feedback"],"state":[513]}]]],["br-avatar",[[1,"br-avatar",{"density":[1],"image":[1],"imageAlt":[1,"image-alt"],"isIconic":[4,"is-iconic"],"text":[1],"iconWidth":[32],"iconHeight":[32]}]]],["br-checkbox",[[65,"br-checkbox",{"indeterminate":[516],"checked":[1540],"customId":[513,"id"],"disabled":[516],"hasHiddenLabel":[516,"has-hidden-label"],"label":[513],"name":[513],"state":[513],"value":[520],"_slotDefault":[32],"toggleChecked":[64]}]]],["br-dropdown",[[65,"br-dropdown",{"isOpen":[1540,"is-open"],"open":[64],"hide":[64]},null,{"isOpen":["isOpenChanged"]}]]],["br-item",[[65,"br-item",{"disabled":[516],"isActive":[516,"is-active"],"isSelected":[516,"is-selected"],"isInteractive":[516,"is-interactive"],"href":[513],"target":[513],"isButton":[516,"is-button"],"type":[1537],"value":[513],"density":[513],"hasSlotDefault":[32],"hasSlotStart":[32],"hasSlotEnd":[32],"selectedValue":[32]},[[4,"brDidCheckedChange","handleChange"]]]]],["br-list",[[65,"br-list",{"listTitle":[513,"list-title"],"isHorizontal":[516,"is-horizontal"],"hideHeaderDivider":[516,"hide-header-divider"]}]]],["br-loading",[[65,"br-loading",{"isProgress":[516,"is-progress"],"progressPercent":[514,"progress-percent"],"isMedium":[516,"is-medium"],"label":[513]}]]],["br-radio",[[65,"br-radio",{"checked":[1540],"disabled":[516],"state":[513],"hasHiddenLabel":[516,"has-hidden-label"],"name":[513],"label":[513],"value":[520],"customId":[513,"id"],"computedId":[32]},[[8,"brDidChange","onBrDidChange"]],{"customId":["onCustomIdChange"]}]]],["br-switch",[[65,"br-switch",{"disabled":[516],"checked":[516],"customId":[513,"id"],"label":[1],"labelPosition":[513,"label-position"],"labelOn":[513,"label-on"],"labelOff":[513,"label-off"],"hasIcon":[516,"has-icon"],"name":[513],"value":[513],"density":[513],"_slotDefault":[32],"_checkedValue":[32],"toggleChecked":[64]}]]],["br-textarea",[[65,"br-textarea",{"value":[1537],"label":[513],"placeholder":[513],"disabled":[516],"maxlength":[514],"states":[513],"density":[513],"isDarkMode":[516,"is-dark-mode"],"isLabelLeft":[516,"is-label-left"],"defaultId":[513,"default-id"],"currentLength":[32],"setValue":[64]},null,{"value":["valueChanged"]}]]],["br-button_2",[[65,"br-button",{"colorMode":[513,"color-mode"],"density":[513],"disabled":[516],"emphasis":[513],"isActive":[516,"is-active"],"isLoading":[516,"is-loading"],"shape":[513],"type":[513],"value":[513]}],[1,"br-icon",{"IconName":[513,"icon-name"],"height":[513],"width":[513],"CssClasses":[513,"css-classes"],"isInline":[516,"is-inline"],"rotate":[513],"flip":[513]}]]]], options);
 });
 
 //# sourceMappingURL=webcomponents.js.map

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

@@ -11,6 +11,10 @@ export declare class Radio {
      */
     el: HTMLBrRadioElement;
     elementInternals: ElementInternals;
+    /**
+     * Contém o id usado internamente no componente
+     */
+    computedId: string;
     /**
      * Define o estado de seleção do radio.
      * Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado.
@@ -51,18 +55,10 @@ export declare class Radio {
     value: any;
     /**
      * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio.
-     * Se não for fornecido, o ID será o mesmo valor atribuído à propriedade `name`.
+     * Se não for fornecido, o ID será gerado automaticamente e de forma aleatória
      */
     customId: string;
-    /**
-     * Indica se o radio pode alternar seu estado checked
-     */
-    toggle: boolean;
-    /**
-     * Propriedade que vai guardar o valor da validação do slot
-     */
-    _slotDefault: boolean;
-    handleItemInteractiveSelect(event: CustomEvent): void;
+    onCustomIdChange(newValue: any): void;
     /**
      * Emite um evento quando o componente é conectado ao DOM.
      * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.
@@ -156,26 +152,25 @@ export declare class Radio {
      */
     brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>;
     formStateRestoreCallback(state: string, _mode: string): void;
-    private hasSlotContentDefault;
+    /**
+     * Componente teve seu estado "checked" alterado
+     */
+    brDidChange: EventEmitter;
+    onBrDidChange(event: CustomEvent): void;
     private getCssClassMap;
     private inheritedAttributes;
     /**
-     * Componente teve seu estado "checked" alterado
+     * Determina um id para o radio.
      */
-    brDidCheckedChange: EventEmitter<{
-        value: boolean;
-        checked: boolean;
-    }>;
-    private readonly handleClick;
-    private readonly handleKeyDown;
+    private getComputedId;
     /**
-     * Controla o comportamento de alternar o estado checked.
+     * Handler para o event "click"
+     * @param event Objeto Event
      */
-    private readonly toggleChecked;
+    private onClick;
     /**
-     * Determina um id para o radio.
+     * Handler para o evento "change"
      */
-    private getComputedId;
-    private readonly stopPropagation;
+    private onChange;
     render(): any;
 }

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

@@ -0,0 +1,157 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
+ *
+ * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.
+ */
+export declare class Textarea {
+    el: HTMLBrTextareaElement;
+    /**
+     * Valor atual do textarea. Este valor pode ser alterado programaticamente.
+     */
+    value: string;
+    /**
+     * Texto do rótulo associado ao textarea. Este rótulo é exibido acima do campo de entrada.
+     */
+    label: string;
+    /**
+     * Texto exibido quando o textarea está vazio. Ajuda a guiar o usuário sobre o que deve ser inserido.
+     */
+    placeholder: string;
+    /**
+     * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.
+     */
+    disabled: boolean;
+    /**
+     * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.
+     */
+    maxlength: number;
+    /**
+     * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.
+     */
+    states: string;
+    /**
+     * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.
+     */
+    density: string;
+    /**
+     * Ativa o modo escuro para o componente. Quando verdadeiro, o componente será exibido em um tema escuro.
+     */
+    isDarkMode: boolean;
+    /**
+     * Define se o rótulo deve ser exibido à esquerda do textarea. Quando verdadeiro, o rótulo é posicionado à esquerda.
+     */
+    isLabelLeft: boolean;
+    /**
+     * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.
+     */
+    currentLength: number;
+    elementInternals: ElementInternals;
+    /**
+     * Identificador único do textarea, gerado automaticamente.
+     * Este ID é utilizado para associar o textarea a outros elementos, como rótulos,
+     * e garantir que cada instância do componente tenha um identificador distinto.
+     */
+    defaultId: string;
+    /**
+     * Emite um evento quando o componente é conectado ao DOM.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.
+     */
+    brDidConnect: EventEmitter<void>;
+    connectedCallback(): void;
+    /**
+     * Emite um evento antes que o componente seja carregado pela primeira vez.
+     * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.
+     */
+    brWillLoad: EventEmitter<void>;
+    componentWillLoad(): void;
+    /**
+     * Emite um evento após o componente ter sido carregado pela primeira vez.
+     * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+     */
+    brDidLoad: EventEmitter<void>;
+    componentDidLoad(): void;
+    /**
+     * Emite um evento antes do componente ser renderizado.
+     * Utilize este evento para preparar o componente antes de sua renderização.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.
+     */
+    brWillRender: EventEmitter<void>;
+    componentWillRender(): void;
+    /**
+     * Emite um evento após o componente ter sido renderizado.
+     * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.
+     */
+    brDidRender: EventEmitter<void>;
+    componentDidRender(): void;
+    /**
+     * Emite um evento para indicar se o componente deve ser atualizado ou não.
+     * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.
+     */
+    brShouldUpdate: EventEmitter<void>;
+    componentShouldUpdate(): void;
+    /**
+     * Emite um evento antes de o componente ser atualizado.
+     * Utilize este evento para realizar ações preparatórias antes da atualização do componente.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.
+     */
+    brWillUpdate: EventEmitter<void>;
+    componentWillUpdate(): void;
+    /**
+     * Emite um evento após o componente ter sido atualizado.
+     * Utilize este evento para realizar ações após a atualização do componente.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.
+     */
+    brDidUpdate: EventEmitter<void>;
+    componentDidUpdate(): void;
+    /**
+     * Emite um evento quando o componente é desconectado do DOM.
+     * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.
+     * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.
+     */
+    brDidDisconnect: EventEmitter<void>;
+    disconnectedCallback(): void;
+    /**
+     * Emite um evento quando o formulário associado é enviado.
+     * Utilize este evento para realizar ações quando o formulário é enviado.
+     */
+    brFormAssociatedCallback: EventEmitter<FormData>;
+    formAssociatedCallback(form: FormData): void;
+    /**
+     * Emite um evento quando o estado do formulário é alterado para desabilitado.
+     * Utilize este evento para realizar ações quando o formulário é desabilitado.
+     */
+    brFormDisabledCallback: EventEmitter<boolean>;
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Emite um evento quando o formulário é redefinido.
+     * Utilize este evento para realizar ações quando o formulário é redefinido.
+     */
+    brFormResetCallback: EventEmitter<void>;
+    formResetCallback(): void;
+    /**
+     * Emite um evento para restaurar o estado do formulário.
+     * Utilize este evento para realizar ações quando o estado do formulário é restaurado.
+     */
+    brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>;
+    formStateRestoreCallback(state: string, _mode: string): void;
+    valueChanged(): void;
+    /**
+     * Manipula a mudança de valor do textarea. Atualiza o valor e emite um evento de mudança.
+     * @param event - O evento de entrada do textarea.
+     */
+    private handleChange;
+    /**
+     * Define um novo valor para o textarea.
+     * @param newValue - O novo valor a ser definido.
+     */
+    setValue(newValue: string): Promise<void>;
+    private emitValueChange;
+    private getCssClassMap;
+    private inheritedAttributes;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -386,7 +386,7 @@ export namespace Components {
          */
         "checked": boolean;
         /**
-          * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio. Se não for fornecido, o ID será o mesmo valor atribuído à propriedade `name`.
+          * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio. Se não for fornecido, o ID será gerado automaticamente e de forma aleatória
          */
         "customId": string;
         /**
@@ -409,10 +409,6 @@ export namespace Components {
           * Indica a validade do radio. Valores possíveis: - 'valid': O radio é considerado válido. - 'invalid': O radio é considerado inválido. Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.
          */
         "state": 'valid' | 'invalid';
-        /**
-          * Indica se o radio pode alternar seu estado checked
-         */
-        "toggle": boolean;
         /**
           * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`). Esse valor é enviado com o formulário quando o radio está selecionado. **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.
          */
@@ -471,6 +467,56 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
+     */
+    interface BrTextarea {
+        /**
+          * Identificador único do textarea, gerado automaticamente. Este ID é utilizado para associar o textarea a outros elementos, como rótulos, e garantir que cada instância do componente tenha um identificador distinto.
+         */
+        "defaultId": string;
+        /**
+          * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.
+         */
+        "density": string;
+        /**
+          * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.
+         */
+        "disabled": boolean;
+        /**
+          * Ativa o modo escuro para o componente. Quando verdadeiro, o componente será exibido em um tema escuro.
+         */
+        "isDarkMode": boolean;
+        /**
+          * Define se o rótulo deve ser exibido à esquerda do textarea. Quando verdadeiro, o rótulo é posicionado à esquerda.
+         */
+        "isLabelLeft": boolean;
+        /**
+          * Texto do rótulo associado ao textarea. Este rótulo é exibido acima do campo de entrada.
+         */
+        "label": string;
+        /**
+          * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.
+         */
+        "maxlength": number;
+        /**
+          * Texto exibido quando o textarea está vazio. Ajuda a guiar o usuário sobre o que deve ser inserido.
+         */
+        "placeholder": string;
+        /**
+          * Define um novo valor para o textarea.
+          * @param newValue - O novo valor a ser definido.
+         */
+        "setValue": (newValue: string) => Promise<void>;
+        /**
+          * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.
+         */
+        "states": string;
+        /**
+          * Valor atual do textarea. Este valor pode ser alterado programaticamente.
+         */
+        "value": string;
+    }
 }
 export interface BrAvatarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -520,6 +566,10 @@ export interface BrSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBrSwitchElement;
 }
+export interface BrTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBrTextareaElement;
+}
 declare global {
     interface HTMLBrAvatarElementEventMap {
         "brDidConnect": void;
@@ -851,7 +901,7 @@ declare global {
         "brFormDisabledCallback": boolean;
         "brFormResetCallback": void;
         "brFormStateRestoreCallback": [state: string, _mode: string];
-        "brDidCheckedChange": { value: boolean; checked: boolean };
+        "brDidChange": any;
     }
     /**
      * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).
@@ -903,6 +953,38 @@ declare global {
         prototype: HTMLBrSwitchElement;
         new (): HTMLBrSwitchElement;
     };
+    interface HTMLBrTextareaElementEventMap {
+        "brDidConnect": void;
+        "brWillLoad": void;
+        "brDidLoad": void;
+        "brWillRender": void;
+        "brDidRender": void;
+        "brShouldUpdate": void;
+        "brWillUpdate": void;
+        "brDidUpdate": void;
+        "brDidDisconnect": void;
+        "brFormAssociatedCallback": FormData;
+        "brFormDisabledCallback": boolean;
+        "brFormResetCallback": void;
+        "brFormStateRestoreCallback": [state: string, _mode: string];
+    }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
+     */
+    interface HTMLBrTextareaElement extends Components.BrTextarea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBrTextareaElementEventMap>(type: K, listener: (this: HTMLBrTextareaElement, ev: BrTextareaCustomEvent<HTMLBrTextareaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBrTextareaElementEventMap>(type: K, listener: (this: HTMLBrTextareaElement, ev: BrTextareaCustomEvent<HTMLBrTextareaElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBrTextareaElement: {
+        prototype: HTMLBrTextareaElement;
+        new (): HTMLBrTextareaElement;
+    };
     interface HTMLElementTagNameMap {
         "br-avatar": HTMLBrAvatarElement;
         "br-button": HTMLBrButtonElement;
@@ -916,6 +998,7 @@ declare global {
         "br-message": HTMLBrMessageElement;
         "br-radio": HTMLBrRadioElement;
         "br-switch": HTMLBrSwitchElement;
+        "br-textarea": HTMLBrTextareaElement;
     }
 }
 declare namespace LocalJSX {
@@ -1789,7 +1872,7 @@ declare namespace LocalJSX {
          */
         "checked"?: boolean;
         /**
-          * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio. Se não for fornecido, o ID será o mesmo valor atribuído à propriedade `name`.
+          * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio. Se não for fornecido, o ID será gerado automaticamente e de forma aleatória
          */
         "customId"?: string;
         /**
@@ -1811,7 +1894,7 @@ declare namespace LocalJSX {
         /**
           * Componente teve seu estado "checked" alterado
          */
-        "onBrDidCheckedChange"?: (event: BrRadioCustomEvent<{ value: boolean; checked: boolean }>) => void;
+        "onBrDidChange"?: (event: BrRadioCustomEvent<any>) => void;
         /**
           * Emite um evento quando o componente é conectado ao DOM. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.
          */
@@ -1872,10 +1955,6 @@ declare namespace LocalJSX {
           * Indica a validade do radio. Valores possíveis: - 'valid': O radio é considerado válido. - 'invalid': O radio é considerado inválido. Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.
          */
         "state"?: 'valid' | 'invalid';
-        /**
-          * Indica se o radio pode alternar seu estado checked
-         */
-        "toggle"?: boolean;
         /**
           * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`). Esse valor é enviado com o formulário quando o radio está selecionado. **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.
          */
@@ -1990,6 +2069,103 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
+     */
+    interface BrTextarea {
+        /**
+          * Identificador único do textarea, gerado automaticamente. Este ID é utilizado para associar o textarea a outros elementos, como rótulos, e garantir que cada instância do componente tenha um identificador distinto.
+         */
+        "defaultId"?: string;
+        /**
+          * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.
+         */
+        "density"?: string;
+        /**
+          * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.
+         */
+        "disabled"?: boolean;
+        /**
+          * Ativa o modo escuro para o componente. Quando verdadeiro, o componente será exibido em um tema escuro.
+         */
+        "isDarkMode"?: boolean;
+        /**
+          * Define se o rótulo deve ser exibido à esquerda do textarea. Quando verdadeiro, o rótulo é posicionado à esquerda.
+         */
+        "isLabelLeft"?: boolean;
+        /**
+          * Texto do rótulo associado ao textarea. Este rótulo é exibido acima do campo de entrada.
+         */
+        "label"?: string;
+        /**
+          * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.
+         */
+        "maxlength"?: number;
+        /**
+          * Emite um evento quando o componente é conectado ao DOM. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.
+         */
+        "onBrDidConnect"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento quando o componente é desconectado do DOM. Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.
+         */
+        "onBrDidDisconnect"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento após o componente ter sido carregado pela primeira vez. Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
+         */
+        "onBrDidLoad"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento após o componente ter sido renderizado. Utilize este evento para executar ações que devem ocorrer após a renderização do componente. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.
+         */
+        "onBrDidRender"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento após o componente ter sido atualizado. Utilize este evento para realizar ações após a atualização do componente. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.
+         */
+        "onBrDidUpdate"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento quando o formulário associado é enviado. Utilize este evento para realizar ações quando o formulário é enviado.
+         */
+        "onBrFormAssociatedCallback"?: (event: BrTextareaCustomEvent<FormData>) => void;
+        /**
+          * Emite um evento quando o estado do formulário é alterado para desabilitado. Utilize este evento para realizar ações quando o formulário é desabilitado.
+         */
+        "onBrFormDisabledCallback"?: (event: BrTextareaCustomEvent<boolean>) => void;
+        /**
+          * Emite um evento quando o formulário é redefinido. Utilize este evento para realizar ações quando o formulário é redefinido.
+         */
+        "onBrFormResetCallback"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento para restaurar o estado do formulário. Utilize este evento para realizar ações quando o estado do formulário é restaurado.
+         */
+        "onBrFormStateRestoreCallback"?: (event: BrTextareaCustomEvent<[state: string, _mode: string]>) => void;
+        /**
+          * Emite um evento para indicar se o componente deve ser atualizado ou não. Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.
+         */
+        "onBrShouldUpdate"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento antes que o componente seja carregado pela primeira vez. Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.
+         */
+        "onBrWillLoad"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento antes do componente ser renderizado. Utilize este evento para preparar o componente antes de sua renderização. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.
+         */
+        "onBrWillRender"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Emite um evento antes de o componente ser atualizado. Utilize este evento para realizar ações preparatórias antes da atualização do componente. Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.
+         */
+        "onBrWillUpdate"?: (event: BrTextareaCustomEvent<void>) => void;
+        /**
+          * Texto exibido quando o textarea está vazio. Ajuda a guiar o usuário sobre o que deve ser inserido.
+         */
+        "placeholder"?: string;
+        /**
+          * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.
+         */
+        "states"?: string;
+        /**
+          * Valor atual do textarea. Este valor pode ser alterado programaticamente.
+         */
+        "value"?: string;
+    }
     interface IntrinsicElements {
         "br-avatar": BrAvatar;
         "br-button": BrButton;
@@ -2003,6 +2179,7 @@ declare namespace LocalJSX {
         "br-message": BrMessage;
         "br-radio": BrRadio;
         "br-switch": BrSwitch;
+        "br-textarea": BrTextarea;
     }
 }
 export { LocalJSX as JSX };
@@ -2063,6 +2240,10 @@ declare module "@stencil/core" {
              * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/switch?tab=designer).
              */
             "br-switch": LocalJSX.BrSwitch & JSXBase.HTMLAttributes<HTMLBrSwitchElement>;
+            /**
+             * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).
+             */
+            "br-textarea": LocalJSX.BrTextarea & JSXBase.HTMLAttributes<HTMLBrTextareaElement>;
         }
     }
 }

package/dist/types/utils/unique-id-generator.d.ts

@@ -0,0 +1 @@
+export default function generateUniqueId(prefix?: string, randomPartLength?: number): string;

package/dist/webcomponents/p-35f43cf0.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as t,h as r,H as i,g as e}from"./p-8dfeb926.js";import{i as o}from"./p-ee6f4f3f.js";const n="*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{display:none}.d-flex{display:flex !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter) * 0.5);padding-right:calc(var(--grid-gutter) * 0.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.container{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mb-3{margin-bottom:var(--spacing-scale-2x) !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.bg-support-01{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.text-base{font-size:var(--font-size-scale-base) !important}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.br-avatar{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small);--avatar-small:40px;--avatar-medium:100px;--avatar-large:160px;--avatar-icon-small:var(--icon-size-2x);--avatar-icon-medium:var(--icon-size-5x);--avatar-icon-large:var(--icon-size-8x);--avatar-text-small:var(--font-size-scale-up-03);--avatar-text-medium:var(--font-size-scale-up-07);--avatar-text-large:var(--font-size-scale-up-11);align-items:center;background-color:transparent;border:0;display:inline-flex;font-size:var(--avatar-text-size);font-weight:var(--font-weight-bold);justify-content:center;line-height:var(--avatar-size);vertical-align:middle}.br-avatar .content{align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);justify-content:center;overflow:hidden;text-align:center;text-transform:uppercase;vertical-align:inherit;width:var(--avatar-size)}.br-avatar .content img{height:var(--avatar-size);vertical-align:inherit;width:var(--avatar-size)}.br-avatar.small,.br-avatar[small]{--avatar-size:var(--avatar-small);--avatar-icon-size:var(--avatar-icon-small);--avatar-text-size:var(--avatar-text-small)}.br-avatar.is-medium,.br-avatar.medium,.br-avatar[medium]{--avatar-size:var(--avatar-medium);--avatar-icon-size:var(--avatar-icon-medium);--avatar-text-size:var(--avatar-text-medium)}.br-avatar.large,.br-avatar[large]{--avatar-size:var(--avatar-large);--avatar-icon-size:var(--avatar-icon-large);--avatar-text-size:var(--avatar-text-large)}.br-avatar[data-toggle=dropdown]:focus{outline:none}.br-avatar[data-toggle=dropdown]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-avatar .image{align-items:center;background-color:var(--blue-10);border-radius:50%;color:var(--blue-warm-20);display:inline-flex;font-size:var(--avatar-text-size);height:var(--avatar-size);justify-content:center;overflow:hidden;text-align:center;text-transform:uppercase;vertical-align:inherit;width:var(--avatar-size)}.br-avatar .image img{height:var(--avatar-size);vertical-align:inherit;width:var(--avatar-size)}:host{display:block}";const s=n;var l;(function(a){a["Small"]="small";a["Medium"]="medium";a["Large"]="large"})(l||(l={}));const c=class{constructor(r){a(this,r);this.brDidConnect=t(this,"brDidConnect",7);this.brWillLoad=t(this,"brWillLoad",7);this.brDidLoad=t(this,"brDidLoad",7);this.brWillRender=t(this,"brWillRender",7);this.brDidRender=t(this,"brDidRender",7);this.brShouldUpdate=t(this,"brShouldUpdate",7);this.brWillUpdate=t(this,"brWillUpdate",7);this.brDidUpdate=t(this,"brDidUpdate",7);this.brDidDisconnect=t(this,"brDidDisconnect",7);this.iconSizes={small:{height:"32",width:"40"},medium:{height:"80",width:"88"},large:{height:"128",width:"136"}};this.iconMarginTops={small:"0.7em",medium:"1em",large:"0.62em"};this.inheritedAttributes={};this.density=l.Medium;this.image=undefined;this.imageAlt="Imagem do avatar";this.isIconic=false;this.text=undefined;this.iconWidth=undefined;this.iconHeight=undefined}connectedCallback(){this.brDidConnect.emit()}componentWillLoad(){this.brWillLoad.emit();this.inheritedAttributes=o(this.el);this.setIconSize()}componentDidLoad(){this.brDidLoad.emit()}componentWillRender(){this.brWillRender.emit()}componentDidRender(){this.brDidRender.emit()}componentShouldUpdate(){this.brShouldUpdate.emit()}componentWillUpdate(){this.brWillUpdate.emit()}componentDidUpdate(){this.brDidUpdate.emit()}disconnectedCallback(){this.brDidDisconnect.emit()}getCssClassMap(){return{"br-avatar":true,small:this.density===l.Small,medium:this.density===l.Medium,large:this.density===l.Large}}setIconSize(){var a,t;if(((a=this.image)===null||a===void 0?void 0:a.trim().length)!==0&&((t=this.text)===null||t===void 0?void 0:t.trim().length)!==0){const a=this.iconSizes[this.density];this.iconHeight=a.height;this.iconWidth=a.width}}adjustIconStyle(a){return this.iconMarginTops[a]||"1em"}renderAvatar(){var a,t;if(((a=this.text)===null||a===void 0?void 0:a.trim().length)>0){return r("span",{class:"content bg-support-01 text-pure-0",title:this.text},this.text[0].toUpperCase())}if(((t=this.image)===null||t===void 0?void 0:t.trim().length)>0){return r("span",{class:"content",title:this.imageAlt||this.text},r("img",{src:this.image,alt:this.imageAlt,loading:"lazy"}))}if(this.isIconic){return r("span",{class:"content",title:this.text},r("br-icon",{"icon-name":"fa-solid:user",height:this.iconHeight,width:this.iconWidth,"aria-hidden":"true",style:{"margin-top":this.adjustIconStyle(this.density)}}))}}render(){return r(i,{key:"90d4903713585ba969eb111676d95f89c53522f5"},r("span",Object.assign({key:"3bb155bdc14da14da5bb576323446157636f3974",class:this.getCssClassMap()},this.inheritedAttributes),this.renderAvatar()))}get el(){return e(this)}};c.style=s;export{c as br_avatar};
+//# sourceMappingURL=p-35f43cf0.entry.js.map

package/dist/webcomponents/p-35f43cf0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["avatarCss","BrAvatarStyle0","Density","Avatar","this","iconSizes","small","height","width","medium","large","iconMarginTops","inheritedAttributes","Medium","connectedCallback","brDidConnect","emit","componentWillLoad","brWillLoad","inheritAriaAttributes","el","setIconSize","componentDidLoad","brDidLoad","componentWillRender","brWillRender","componentDidRender","brDidRender","componentShouldUpdate","brShouldUpdate","componentWillUpdate","brWillUpdate","componentDidUpdate","brDidUpdate","disconnectedCallback","brDidDisconnect","getCssClassMap","density","Small","Large","_a","image","trim","length","_b","text","size","iconHeight","iconWidth","adjustIconStyle","renderAvatar","h","class","title","toUpperCase","imageAlt","src","alt","loading","isIconic","style","render","Host","key","Object","assign"],"sources":["src/components/avatar/avatar.scss?tag=br-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/avatar/avatar\";\n\n:host {\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\nenum Density {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\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() density: string = Density.Medium\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() image: string\n\n  /**\n   * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade e SEO.\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() imageAlt = 'Imagem do avatar'\n\n  /**\n   * Indica se o avatar deve ser exibido como um ícone em vez de uma imagem fotográfica.\n   * Se definido como verdadeiro, o avatar será exibido como um ícone.\n   */\n  @Prop() isIconic: boolean = false\n\n  /**\n   * Texto exibido no avatar do tipo 'letra'.\n   * Esse texto será mostrado em vez de uma imagem e pode ser usado para representar iniciais ou outras informações textuais.\n   */\n  @Prop() text: string\n\n  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n    this.setIconSize()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  // Largura do ícone no avatar do tipo icônico\n  @State() iconWidth: string\n\n  // Altura do ícone no avatar do tipo icônico\n  @State() iconHeight: string\n\n  /**\n   * Gera um mapa de classes CSS com base nas propriedades do componente.\n   * O mapa de classes determina quais classes CSS devem ser aplicadas\n   * ao elemento host do componente, ajustando sua aparência.\n   *\n   * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.\n   */\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-avatar': true,\n      small: this.density === Density.Small,\n      medium: this.density === Density.Medium,\n      large: this.density === Density.Large,\n    }\n  }\n\n  /**\n   * Calcula o tamanho dos ícones de acordo com a classe de densidade\n   */\n  private readonly iconSizes = {\n    small: { height: '32', width: '40' },\n    medium: { height: '80', width: '88' },\n    large: { height: '128', width: '136' },\n  }\n\n  private setIconSize() {\n    if (this.image?.trim().length !== 0 && this.text?.trim().length !== 0) {\n      const size = this.iconSizes[this.density]\n      this.iconHeight = size.height\n      this.iconWidth = size.width\n    }\n  }\n\n  private readonly iconMarginTops = {\n    small: '0.7em',\n    medium: '1em',\n    large: '0.62em',\n  }\n\n  private adjustIconStyle(density: string) {\n    return this.iconMarginTops[density] || '1em'\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderAvatar() {\n    if (this.text?.trim().length > 0) {\n      return (\n        <span class=\"content bg-support-01 text-pure-0\" title={this.text}>\n          {this.text[0].toUpperCase()}\n        </span>\n      )\n    }\n\n    if (this.image?.trim().length > 0) {\n      return (\n        <span class=\"content\" title={this.imageAlt || this.text}>\n          <img src={this.image} alt={this.imageAlt} loading=\"lazy\" />\n        </span>\n      )\n    }\n\n    if (this.isIconic) {\n      return (\n        <span class=\"content\" title={this.text}>\n          <br-icon\n            icon-name=\"fa-solid:user\"\n            height={this.iconHeight}\n            width={this.iconWidth}\n            aria-hidden=\"true\"\n            style={{ 'margin-top': this.adjustIconStyle(this.density) }}\n          ></br-icon>\n        </span>\n      )\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          {this.renderAvatar()}\n        </span>\n      </Host>\n    )\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,+3TAClB,MAAAC,EAAeD,ECGf,IAAKE,GAAL,SAAKA,GACHA,EAAA,iBACAA,EAAA,mBACAA,EAAA,gBACD,EAJD,CAAKA,MAAO,K,MAcCC,EAAM,M,wZAwJAC,KAAAC,UAAY,CAC3BC,MAAO,CAAEC,OAAQ,KAAMC,MAAO,MAC9BC,OAAQ,CAAEF,OAAQ,KAAMC,MAAO,MAC/BE,MAAO,CAAEH,OAAQ,MAAOC,MAAO,QAWhBJ,KAAAO,eAAiB,CAChCL,MAAO,QACPG,OAAQ,MACRC,MAAO,UAODN,KAAAQ,oBAAkC,G,aAtKhBV,EAAQW,O,mCAYf,mB,cAMS,M,uEAa5B,iBAAAC,GACEV,KAAKW,aAAaC,M,CASpB,iBAAAC,GACEb,KAAKc,WAAWF,OAChBZ,KAAKQ,oBAAsBO,EAAsBf,KAAKgB,IACtDhB,KAAKiB,a,CASP,gBAAAC,GACElB,KAAKmB,UAAUP,M,CASjB,mBAAAQ,GACEpB,KAAKqB,aAAaT,M,CASpB,kBAAAU,GACEtB,KAAKuB,YAAYX,M,CASnB,qBAAAY,GACExB,KAAKyB,eAAeb,M,CAStB,mBAAAc,GACE1B,KAAK2B,aAAaf,M,CASpB,kBAAAgB,GACE5B,KAAK6B,YAAYjB,M,CASnB,oBAAAkB,GACE9B,KAAK+B,gBAAgBnB,M,CAgBf,cAAAoB,GACN,MAAO,CACL,YAAa,KACb9B,MAAOF,KAAKiC,UAAYnC,EAAQoC,MAChC7B,OAAQL,KAAKiC,UAAYnC,EAAQW,OACjCH,MAAON,KAAKiC,UAAYnC,EAAQqC,M,CAa5B,WAAAlB,G,QACN,KAAImB,EAAApC,KAAKqC,SAAK,MAAAD,SAAA,SAAAA,EAAEE,OAAOC,UAAW,KAAKC,EAAAxC,KAAKyC,QAAI,MAAAD,SAAA,SAAAA,EAAEF,OAAOC,UAAW,EAAG,CACrE,MAAMG,EAAO1C,KAAKC,UAAUD,KAAKiC,SACjCjC,KAAK2C,WAAaD,EAAKvC,OACvBH,KAAK4C,UAAYF,EAAKtC,K,EAUlB,eAAAyC,CAAgBZ,GACtB,OAAOjC,KAAKO,eAAe0B,IAAY,K,CAKjC,YAAAa,G,QACN,KAAIV,EAAApC,KAAKyC,QAAI,MAAAL,SAAA,SAAAA,EAAEE,OAAOC,QAAS,EAAG,CAChC,OACEQ,EAAA,QAAMC,MAAM,oCAAoCC,MAAOjD,KAAKyC,MACzDzC,KAAKyC,KAAK,GAAGS,c,CAKpB,KAAIV,EAAAxC,KAAKqC,SAAK,MAAAG,SAAA,SAAAA,EAAEF,OAAOC,QAAS,EAAG,CACjC,OACEQ,EAAA,QAAMC,MAAM,UAAUC,MAAOjD,KAAKmD,UAAYnD,KAAKyC,MACjDM,EAAA,OAAKK,IAAKpD,KAAKqC,MAAOgB,IAAKrD,KAAKmD,SAAUG,QAAQ,S,CAKxD,GAAItD,KAAKuD,SAAU,CACjB,OACER,EAAA,QAAMC,MAAM,UAAUC,MAAOjD,KAAKyC,MAChCM,EAAA,uBACY,gBACV5C,OAAQH,KAAK2C,WACbvC,MAAOJ,KAAK4C,UAAS,cACT,OACZY,MAAO,CAAE,aAAcxD,KAAK6C,gBAAgB7C,KAAKiC,Y,EAO3D,MAAAwB,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,4CACHZ,EAAA,OAAAa,OAAAC,OAAA,CAAAF,IAAA,2CAAMX,MAAOhD,KAAKgC,kBAAsBhC,KAAKQ,qBAC1CR,KAAK8C,gB","ignoreList":[]}