@govbr-ds/webcomponents 2.0.0-next.17 → 2.0.0-next.19

package/dist/collection/components/loading/loading.js

@@ -1,3 +1,7 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
 import { h, Host } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/inherited-attributes";
 /**
@@ -7,38 +11,13 @@ export class Loading {
     constructor() {
         this.inheritedAttributes = {};
         this.isProgress = false;
-        this.progressPercent = null;
+        this.progressPercent = undefined;
         this.isMedium = false;
-        this.label = '';
-    }
-    connectedCallback() {
-        this.brDidConnect.emit();
+        this.label = undefined;
     }
     componentWillLoad() {
-        this.brWillLoad.emit();
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
-    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-loading': true,
@@ -46,7 +25,7 @@ export class Loading {
         };
     }
     render() {
-        return (h(Host, { key: '7f56287a3ba146d776b7eb895721d7ec5841bfbb' }, this.isProgress ? (h("div", Object.assign({}, this.inheritedAttributes, { class: this.getCssClassMap(), role: "progressbar", "data-progress": this.progressPercent, "aria-label": "Carregando exemplo com porcentagem", "aria-valuemin": "0", "aria-valuenow": this.progressPercent, "aria-valuemax": "100" }), h("div", { class: "br-loading-mask full" }, h("div", { class: "br-loading-fill" })), h("div", { class: "br-loading-mask" }, h("div", { class: "br-loading-fill" })))) : (h("div", { class: "loading-progress-alignment" }, h("div", { class: this.getCssClassMap(), role: "progressbar", "aria-label": "Carregando exemplo indeterminado pequeno" }), h("span", { class: "rotulo" }, this.label)))));
+        return (h(Host, { key: 'd9ef2a8a142e986437e2fa16878440c6286379cb' }, this.isProgress ? (h("div", Object.assign({}, this.inheritedAttributes, { class: this.getCssClassMap(), role: "progressbar", "data-progress": this.progressPercent, "aria-label": "Carregando exemplo com porcentagem", "aria-valuemin": "0", "aria-valuenow": this.progressPercent, "aria-valuemax": "100" }), h("div", { class: "br-loading-mask full" }, h("div", { class: "br-loading-fill" })), h("div", { class: "br-loading-mask" }, h("div", { class: "br-loading-fill" })))) : (h("div", { class: "loading-progress-alignment" }, h("div", { class: this.getCssClassMap(), role: "progressbar", "aria-label": "Carregando exemplo indeterminado pequeno" }), h("span", { class: "rotulo" }, this.label)))));
     }
     static get is() { return "br-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -96,8 +75,7 @@ export class Loading {
                     "text": "Define a porcentagem de progresso a ser exibida na barra de progresso.\nDeve ser um valor num\u00E9rico entre 0 e 100. Ignorado se `isProgress` estiver definido como falso."
                 },
                 "attribute": "progress-percent",
-                "reflect": true,
-                "defaultValue": "null"
+                "reflect": true
             },
             "isMedium": {
                 "type": "boolean",
@@ -132,149 +110,10 @@ export class Loading {
                     "text": "Texto a ser exibido abaixo do indicador de carregamento.\nPode ser usado para fornecer informa\u00E7\u00F5es adicionais ou descritivas sobre o estado do carregamento."
                 },
                 "attribute": "label",
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": true
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "brDidConnect",
-                "name": "brDidConnect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento quando o componente \u00E9 conectado ao DOM.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brWillLoad",
-                "name": "brWillLoad",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento antes que o componente seja carregado pela primeira vez.\nUtilize este evento para realizar tarefas de inicializa\u00E7\u00E3o antes do componente ser exibido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brDidLoad",
-                "name": "brDidLoad",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento ap\u00F3s o componente ter sido carregado pela primeira vez.\nUtilize este evento para realizar a\u00E7\u00F5es que devem ocorrer depois que o componente foi totalmente carregado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brWillRender",
-                "name": "brWillRender",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento antes do componente ser renderizado.\nUtilize este evento para preparar o componente antes de sua renderiza\u00E7\u00E3o.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brDidRender",
-                "name": "brDidRender",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento ap\u00F3s o componente ter sido renderizado.\nUtilize este evento para executar a\u00E7\u00F5es que devem ocorrer ap\u00F3s a renderiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brShouldUpdate",
-                "name": "brShouldUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento para indicar se o componente deve ser atualizado ou n\u00E3o.\nEste evento \u00E9 chamado antes de qualquer atualiza\u00E7\u00E3o do componente para decidir se a atualiza\u00E7\u00E3o deve prosseguir.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brWillUpdate",
-                "name": "brWillUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento antes de o componente ser atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es preparat\u00F3rias antes da atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brDidUpdate",
-                "name": "brDidUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento ap\u00F3s o componente ter sido atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es ap\u00F3s a atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brDidDisconnect",
-                "name": "brDidDisconnect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento quando o componente \u00E9 desconectado do DOM.\nUtilize este evento para realizar a limpeza ou outras a\u00E7\u00F5es necess\u00E1rias quando o componente \u00E9 removido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=loading.js.map

package/dist/collection/components/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../../src/components/loading/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACtF,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAEpF;;GAEG;AAOH,MAAM,OAAO,OAAO;;QAgIV,wBAAmB,GAAe,EAAE,CAAA;0BApHG,KAAK;+BAMD,IAAI;wBAKV,KAAK;qBAMT,EAAE;;IAO3C,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAQD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;IAC7B,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,YAAY,EAAE,IAAI;YAClB,MAAM,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAA;IACH,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,2BACM,IAAI,CAAC,mBAAmB,IAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,aAAa,mBACH,IAAI,CAAC,eAAe,gBACxB,oCAAoC,mBACjC,GAAG,mBACF,IAAI,CAAC,eAAe,mBACrB,KAAK;YAEnB,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,WAAK,KAAK,EAAC,iBAAiB,GAAO,CAC/B;YACN,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,iBAAiB,GAAO,CAC/B,CACF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,4BAA4B;YACrC,WACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,aAAa,gBACP,0CAA0C,GAChD;YACP,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,KAAK,CAAQ,CACpC,CACP,CACI,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/loading?tab=designer).\n */\n@Component({\n  tag: 'br-loading',\n  styleUrl: 'loading.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Loading {\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: HTMLBrLoadingElement\n\n  /**\n   * Determina o tipo de indicador a ser exibido:\n   * - Se verdadeiro, exibirá uma barra de progresso com a porcentagem de progresso.\n   * - Se falso, exibirá um indicador de carregamento indeterminado.\n   */\n  @Prop({ reflect: true }) isProgress: boolean = false\n\n  /**\n   * Define a porcentagem de progresso a ser exibida na barra de progresso.\n   * Deve ser um valor numérico entre 0 e 100. Ignorado se `isProgress` estiver definido como falso.\n   */\n  @Prop({ reflect: true }) progressPercent: number = null\n\n  /**\n   * Se verdadeiro, ajusta o tamanho do indicador de carregamento para o tamanho médio.\n   */\n  @Prop({ reflect: true }) isMedium: boolean = false\n\n  /**\n   * Texto a ser exibido abaixo do indicador de carregamento.\n   * Pode ser usado para fornecer informações adicionais ou descritivas sobre o estado do carregamento.\n   */\n  @Prop({ reflect: true }) label: 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  }\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  private getCssClassMap(): CssClassMap {\n    return {\n      'br-loading': true,\n      medium: this.isMedium,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host>\n        {this.isProgress ? (\n          <div\n            {...this.inheritedAttributes}\n            class={this.getCssClassMap()}\n            role=\"progressbar\"\n            data-progress={this.progressPercent}\n            aria-label=\"Carregando exemplo com porcentagem\"\n            aria-valuemin=\"0\"\n            aria-valuenow={this.progressPercent}\n            aria-valuemax=\"100\"\n          >\n            <div class=\"br-loading-mask full\">\n              <div class=\"br-loading-fill\"></div>\n            </div>\n            <div class=\"br-loading-mask\">\n              <div class=\"br-loading-fill\"></div>\n            </div>\n          </div>\n        ) : (\n          <div class=\"loading-progress-alignment\">\n            <div\n              class={this.getCssClassMap()}\n              role=\"progressbar\"\n              aria-label=\"Carregando exemplo indeterminado pequeno\"\n            ></div>\n            <span class=\"rotulo\">{this.label}</span>\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../../../src/components/loading/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAEpF;;GAEG;AAOH,MAAM,OAAO,OAAO;;QA0CV,wBAAmB,GAAe,EAAE,CAAA;0BA9BG,KAAK;;wBAWP,KAAK;;;IAQlD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,YAAY,EAAE,IAAI;YAClB,MAAM,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAA;IACH,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,2BACM,IAAI,CAAC,mBAAmB,IAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,aAAa,mBACH,IAAI,CAAC,eAAe,gBACxB,oCAAoC,mBACjC,GAAG,mBACF,IAAI,CAAC,eAAe,mBACrB,KAAK;YAEnB,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,WAAK,KAAK,EAAC,iBAAiB,GAAO,CAC/B;YACN,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,iBAAiB,GAAO,CAC/B,CACF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,4BAA4B;YACrC,WACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,IAAI,EAAC,aAAa,gBACP,0CAA0C,GAChD;YACP,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,KAAK,CAAQ,CACpC,CACP,CACI,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/loading?tab=designer).\n */\n@Component({\n  tag: 'br-loading',\n  styleUrl: 'loading.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Loading {\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: HTMLBrLoadingElement\n\n  /**\n   * Determina o tipo de indicador a ser exibido:\n   * - Se verdadeiro, exibirá uma barra de progresso com a porcentagem de progresso.\n   * - Se falso, exibirá um indicador de carregamento indeterminado.\n   */\n  @Prop({ reflect: true }) isProgress: boolean = false\n\n  /**\n   * Define a porcentagem de progresso a ser exibida na barra de progresso.\n   * Deve ser um valor numérico entre 0 e 100. Ignorado se `isProgress` estiver definido como falso.\n   */\n  @Prop({ reflect: true }) progressPercent: number\n\n  /**\n   * Se verdadeiro, ajusta o tamanho do indicador de carregamento para o tamanho médio.\n   */\n  @Prop({ reflect: true }) isMedium: boolean = false\n\n  /**\n   * Texto a ser exibido abaixo do indicador de carregamento.\n   * Pode ser usado para fornecer informações adicionais ou descritivas sobre o estado do carregamento.\n   */\n  @Prop({ reflect: true }) label: string\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-loading': true,\n      medium: this.isMedium,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host>\n        {this.isProgress ? (\n          <div\n            {...this.inheritedAttributes}\n            class={this.getCssClassMap()}\n            role=\"progressbar\"\n            data-progress={this.progressPercent}\n            aria-label=\"Carregando exemplo com porcentagem\"\n            aria-valuemin=\"0\"\n            aria-valuenow={this.progressPercent}\n            aria-valuemax=\"100\"\n          >\n            <div class=\"br-loading-mask full\">\n              <div class=\"br-loading-fill\"></div>\n            </div>\n            <div class=\"br-loading-mask\">\n              <div class=\"br-loading-fill\"></div>\n            </div>\n          </div>\n        ) : (\n          <div class=\"loading-progress-alignment\">\n            <div\n              class={this.getCssClassMap()}\n              role=\"progressbar\"\n              aria-label=\"Carregando exemplo indeterminado pequeno\"\n            ></div>\n            <span class=\"rotulo\">{this.label}</span>\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/message/message.css

@@ -215,10 +215,18 @@ textarea {
   margin-right: var(--spacing-scale-base) !important;
 }
 
+.mr-n2 {
+  margin-right: calc(var(--spacing-scale-base) * -1) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }
 
+.mr-auto {
+  margin-right: auto !important;
+}
+
 .pt-half {
   padding-top: var(--spacing-scale-half) !important;
 }
@@ -351,6 +359,10 @@ textarea,
   color: var(--pure-0) !important;
 }
 
+.text-primary-default {
+  color: var(--color-primary-default) !important;
+}
+
 .bg-support-01 {
   --color: var(--color-dark);
   --color-rgb: var(--color-dark-rgb);

package/dist/collection/components/message/message.js

@@ -1,3 +1,7 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/inherited-attributes";
 /**
@@ -12,42 +16,17 @@ export class Message {
             this.el.remove();
         };
         this.inheritedAttributes = {};
-        this.messageTitle = '';
-        this.message = '';
+        this.messageTitle = undefined;
+        this.message = undefined;
         this.isInline = false;
         this.isClosable = false;
         this.showIcon = false;
         this.isFeedback = false;
         this.state = 'info';
     }
-    connectedCallback() {
-        this.brDidConnect.emit();
-    }
     componentWillLoad() {
-        this.brWillLoad.emit();
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
-    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();
-    }
     checkIconState() {
         const iconMap = {
             success: 'fa-solid:check-circle',
@@ -65,7 +44,7 @@ export class Message {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '5b8bfb2b3b5c3861cf4e695c1cacb0bd034d4a82' }, this.isFeedback ? (h("div", { class: "mb-3" }, h("span", Object.assign({ class: `feedback ${this.state}`, role: "alert" }, this.inheritedAttributes), this.showIcon ? h("br-icon", { class: "icon-space", "icon-name": this.checkIconState() }) : null, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) === 0 ? h("slot", null) : this.message))) : (h("div", Object.assign({ class: this.getCssClassMap(), role: "alert" }, this.inheritedAttributes), this.showIcon && (h("div", { class: "icon" }, h("br-icon", { "icon-name": this.checkIconState(), height: "20", "aria-hidden": "true" }))), h("div", { class: "content", role: "alert" }, ((_b = this.message) === null || _b === void 0 ? void 0 : _b.length) === 0 ? (h("div", null, this.messageTitle && h("strong", null, this.messageTitle), this.messageTitle && !this.isInline && h("br", null), h("slot", null))) : (h("div", null, h("span", { class: "message-title mr-1" }, this.messageTitle), h("span", { class: "message-body" }, this.message)))), this.isClosable && !this.isFeedback && (h("div", { class: "close" }, h("br-button", { shape: "circle", type: "button", "aria-label": "Fechar a mensagem", onClick: this.dismissHandler }, h("br-icon", { "icon-name": "fa-solid:times", "aria-hidden": "true" }))))))));
+        return (h(Host, { key: 'b96c347896bb97d13195dc194d88019fefdbbf2e' }, this.isFeedback ? (h("div", { class: "mb-3" }, h("span", Object.assign({ class: `feedback ${this.state}`, role: "alert" }, this.inheritedAttributes), this.showIcon ? h("br-icon", { class: "icon-space", "icon-name": this.checkIconState() }) : null, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) === 0 ? h("slot", null) : this.message))) : (h("div", Object.assign({ class: this.getCssClassMap(), role: "alert" }, this.inheritedAttributes), this.showIcon && (h("div", { class: "icon" }, h("br-icon", { "icon-name": this.checkIconState(), height: "20", "aria-hidden": "true" }))), h("div", { class: "content", role: "alert" }, ((_b = this.message) === null || _b === void 0 ? void 0 : _b.length) === 0 ? (h("div", null, this.messageTitle && h("strong", null, this.messageTitle), this.messageTitle && !this.isInline && h("br", null), h("slot", null))) : (h("div", null, h("span", { class: "message-title mr-1" }, this.messageTitle), h("span", { class: "message-body" }, this.message)))), this.isClosable && !this.isFeedback && (h("div", { class: "close" }, h("br-button", { shape: "circle", type: "button", "aria-label": "Fechar a mensagem", onClick: this.dismissHandler }, h("br-icon", { "icon-name": "fa-solid:times", "aria-hidden": "true" }))))))));
     }
     static get is() { return "br-message"; }
     static get encapsulation() { return "shadow"; }
@@ -97,8 +76,7 @@ export class Message {
                     "text": "Define o t\u00EDtulo da mensagem, que \u00E9 exibido no in\u00EDcio, acima da mensagem principal.\nEste t\u00EDtulo serve para destacar a mensagem textual. N\u00E3o \u00E9 aplic\u00E1vel para mensagens do tipo feedback."
                 },
                 "attribute": "message-title",
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": true
             },
             "message": {
                 "type": "string",
@@ -108,15 +86,14 @@ export class Message {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "**[OBRIGAT\u00D3RIO]** Define o texto da mensagem que ser\u00E1 exibido.\nEste \u00E9 o conte\u00FAdo principal da mensagem. A propriedade `message` \u00E9 obrigat\u00F3ria e deve ser fornecida para que a mensagem apare\u00E7a."
+                    "text": "Define o texto da mensagem que ser\u00E1 exibido.\nEste \u00E9 o conte\u00FAdo principal da mensagem. A propriedade `message` \u00E9 obrigat\u00F3ria e deve ser fornecida para que a mensagem apare\u00E7a."
                 },
                 "attribute": "message",
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": true
             },
             "isInline": {
                 "type": "boolean",
@@ -202,7 +179,7 @@ export class Message {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "**[OBRIGAT\u00D3RIO]** Define o estado visual da mensagem.\nOs poss\u00EDveis valores s\u00E3o:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padr\u00E3o \u00E9 'info'."
+                    "text": "Define o estado do message.\nOs poss\u00EDveis valores s\u00E3o:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padr\u00E3o \u00E9 'info'."
                 },
                 "attribute": "state",
                 "reflect": true,
@@ -212,141 +189,6 @@ export class Message {
     }
     static get events() {
         return [{
-                "method": "brDidConnect",
-                "name": "brDidConnect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento quando o componente \u00E9 conectado ao DOM.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brWillLoad",
-                "name": "brWillLoad",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento antes que o componente seja carregado pela primeira vez.\nUtilize este evento para realizar tarefas de inicializa\u00E7\u00E3o antes do componente ser exibido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brDidLoad",
-                "name": "brDidLoad",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento ap\u00F3s o componente ter sido carregado pela primeira vez.\nUtilize este evento para realizar a\u00E7\u00F5es que devem ocorrer depois que o componente foi totalmente carregado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brWillRender",
-                "name": "brWillRender",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento antes do componente ser renderizado.\nUtilize este evento para preparar o componente antes de sua renderiza\u00E7\u00E3o.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brDidRender",
-                "name": "brDidRender",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento ap\u00F3s o componente ter sido renderizado.\nUtilize este evento para executar a\u00E7\u00F5es que devem ocorrer ap\u00F3s a renderiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brShouldUpdate",
-                "name": "brShouldUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento para indicar se o componente deve ser atualizado ou n\u00E3o.\nEste evento \u00E9 chamado antes de qualquer atualiza\u00E7\u00E3o do componente para decidir se a atualiza\u00E7\u00E3o deve prosseguir.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brWillUpdate",
-                "name": "brWillUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento antes de o componente ser atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es preparat\u00F3rias antes da atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brDidUpdate",
-                "name": "brDidUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento ap\u00F3s o componente ter sido atualizado.\nUtilize este evento para realizar a\u00E7\u00F5es ap\u00F3s a atualiza\u00E7\u00E3o do componente.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "brDidDisconnect",
-                "name": "brDidDisconnect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emite um evento quando o componente \u00E9 desconectado do DOM.\nUtilize este evento para realizar a limpeza ou outras a\u00E7\u00F5es necess\u00E1rias quando o componente \u00E9 removido.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
                 "method": "brDidClose",
                 "name": "brDidClose",
                 "bubbles": true,

package/dist/collection/components/message/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/message/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).\n *\n * @slot default - Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem.\n */\n@Component({\n  tag: 'br-message',\n  styleUrl: 'message.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Message {\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: HTMLBrMessageElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o título da mensagem, que é exibido no início, acima da mensagem principal.\n   * Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.\n   */\n  @Prop({ reflect: true }) messageTitle: string = ''\n\n  /**\n   * **[OBRIGATÓRIO]** Define o texto da mensagem que será exibido.\n   * Este é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.\n   */\n  @Prop({ reflect: true }) message: string = ''\n\n  /**\n   * Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal.\n   * Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem.\n   * Este recurso não está disponível para mensagens do tipo feedback.\n   */\n  @Prop({ reflect: true }) isClosable: boolean = false\n\n  /**\n   * Se definido como verdadeiro, um ícone associado à mensagem será exibido.\n   * Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.\n   */\n  @Prop({ reflect: true }) showIcon: boolean = false\n\n  /**\n   * Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário.\n   * Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.\n   */\n  @Prop({ reflect: true }) isFeedback: boolean = false\n\n  /**\n   * **[OBRIGATÓRIO]** Define o estado visual da mensagem.\n   * Os possíveis valores são:\n   * - 'info': Mensagem informativa.\n   * - 'warning': Mensagem de aviso.\n   * - 'danger': Mensagem de erro ou alerta.\n   * - 'success': Mensagem de sucesso.\n   * O valor padrão é 'info'.\n   */\n  @Prop({ reflect: true }) state: 'info' | 'warning' | 'danger' | 'success' = 'info'\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  }\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  /** Evento emitido quando o usuário fecha a mensagem, se closable for true. */\n  @Event() brDidClose: EventEmitter\n  private readonly dismissHandler = () => {\n    this.brDidClose.emit()\n    this.el.remove()\n  }\n\n  private checkIconState() {\n    const iconMap = {\n      success: 'fa-solid:check-circle',\n      warning: 'fa-solid:exclamation-triangle',\n      danger: 'fa-solid:times-circle',\n      info: 'fa-solid:info-circle',\n    }\n    return iconMap[this.state] || 'check-circle' // Valor padrão se não encontrado\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-message': true,\n      [this.state]: true,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host>\n        {this.isFeedback ? (\n          <div class=\"mb-3\">\n            <span class={`feedback ${this.state}`} role=\"alert\" {...this.inheritedAttributes}>\n              {this.showIcon ? <br-icon class=\"icon-space\" icon-name={this.checkIconState()}></br-icon> : null}\n              {this.message?.length === 0 ? <slot></slot> : this.message}\n            </span>\n          </div>\n        ) : (\n          <div class={this.getCssClassMap()} role=\"alert\" {...this.inheritedAttributes}>\n            {this.showIcon && (\n              <div class=\"icon\">\n                <br-icon icon-name={this.checkIconState()} height=\"20\" aria-hidden=\"true\"></br-icon>\n              </div>\n            )}\n            <div class=\"content\" role=\"alert\">\n              {this.message?.length === 0 ? (\n                <div>\n                  {this.messageTitle && <strong>{this.messageTitle}</strong>}\n                  {this.messageTitle && !this.isInline && <br />}\n                  <slot></slot>\n                </div>\n              ) : (\n                <div>\n                  <span class=\"message-title mr-1\">{this.messageTitle}</span>\n                  <span class=\"message-body\">{this.message}</span>\n                </div>\n              )}\n            </div>\n            {this.isClosable && !this.isFeedback && (\n              <div class=\"close\">\n                <br-button shape=\"circle\" type=\"button\" aria-label=\"Fechar a mensagem\" onClick={this.dismissHandler}>\n                  <br-icon icon-name=\"fa-solid:times\" aria-hidden=\"true\"></br-icon>\n                </br-button>\n              </div>\n            )}\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../../src/components/message/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).\n *\n * @slot default - Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem.\n */\n@Component({\n  tag: 'br-message',\n  styleUrl: 'message.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Message {\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: HTMLBrMessageElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o título da mensagem, que é exibido no início, acima da mensagem principal.\n   * Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.\n   */\n  @Prop({ reflect: true }) messageTitle: string\n\n  /**\n   * Define o texto da mensagem que será exibido.\n   * Este é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.\n   */\n  @Prop({ reflect: true }) message!: string\n\n  /**\n   * Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal.\n   * Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem.\n   * Este recurso não está disponível para mensagens do tipo feedback.\n   */\n  @Prop({ reflect: true }) isClosable: boolean = false\n\n  /**\n   * Se definido como verdadeiro, um ícone associado à mensagem será exibido.\n   * Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.\n   */\n  @Prop({ reflect: true }) showIcon: boolean = false\n\n  /**\n   * Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário.\n   * Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.\n   */\n  @Prop({ reflect: true }) isFeedback: boolean = false\n\n  /**\n   * Define o estado do message.\n   * Os possíveis valores são:\n   * - 'info': Mensagem informativa.\n   * - 'warning': Mensagem de aviso.\n   * - 'danger': Mensagem de erro ou alerta.\n   * - 'success': Mensagem de sucesso.\n   * O valor padrão é 'info'.\n   */\n  @Prop({ reflect: true }) state: 'info' | 'warning' | 'danger' | 'success' = 'info'\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /** Evento emitido quando o usuário fecha a mensagem, se closable for true. */\n  @Event() brDidClose: EventEmitter\n  private readonly dismissHandler = () => {\n    this.brDidClose.emit()\n    this.el.remove()\n  }\n\n  private checkIconState() {\n    const iconMap = {\n      success: 'fa-solid:check-circle',\n      warning: 'fa-solid:exclamation-triangle',\n      danger: 'fa-solid:times-circle',\n      info: 'fa-solid:info-circle',\n    }\n    return iconMap[this.state] || 'check-circle' // Valor padrão se não encontrado\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-message': true,\n      [this.state]: true,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host>\n        {this.isFeedback ? (\n          <div class=\"mb-3\">\n            <span class={`feedback ${this.state}`} role=\"alert\" {...this.inheritedAttributes}>\n              {this.showIcon ? <br-icon class=\"icon-space\" icon-name={this.checkIconState()}></br-icon> : null}\n              {this.message?.length === 0 ? <slot></slot> : this.message}\n            </span>\n          </div>\n        ) : (\n          <div class={this.getCssClassMap()} role=\"alert\" {...this.inheritedAttributes}>\n            {this.showIcon && (\n              <div class=\"icon\">\n                <br-icon icon-name={this.checkIconState()} height=\"20\" aria-hidden=\"true\"></br-icon>\n              </div>\n            )}\n            <div class=\"content\" role=\"alert\">\n              {this.message?.length === 0 ? (\n                <div>\n                  {this.messageTitle && <strong>{this.messageTitle}</strong>}\n                  {this.messageTitle && !this.isInline && <br />}\n                  <slot></slot>\n                </div>\n              ) : (\n                <div>\n                  <span class=\"message-title mr-1\">{this.messageTitle}</span>\n                  <span class=\"message-body\">{this.message}</span>\n                </div>\n              )}\n            </div>\n            {this.isClosable && !this.isFeedback && (\n              <div class=\"close\">\n                <br-button shape=\"circle\" type=\"button\" aria-label=\"Fechar a mensagem\" onClick={this.dismissHandler}>\n                  <br-icon icon-name=\"fa-solid:times\" aria-hidden=\"true\"></br-icon>\n                </br-button>\n              </div>\n            )}\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/radio/radio.css

@@ -215,10 +215,18 @@ textarea {
   margin-right: var(--spacing-scale-base) !important;
 }
 
+.mr-n2 {
+  margin-right: calc(var(--spacing-scale-base) * -1) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }
 
+.mr-auto {
+  margin-right: auto !important;
+}
+
 .pt-half {
   padding-top: var(--spacing-scale-half) !important;
 }
@@ -351,6 +359,10 @@ textarea,
   color: var(--pure-0) !important;
 }
 
+.text-primary-default {
+  color: var(--color-primary-default) !important;
+}
+
 .bg-support-01 {
   --color: var(--color-dark);
   --color-rgb: var(--color-dark-rgb);