@govbr-ds/webcomponents 2.0.0-next.13 → 2.0.0-next.15

package/dist/collection/components/avatar/avatar.css

@@ -38,7 +38,8 @@ img {
 }
 
 button,
-input {
+input,
+textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: var(--font-line-height-medium);
@@ -82,6 +83,10 @@ progress {
   vertical-align: baseline;
 }
 
+textarea {
+  overflow: auto;
+}
+
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
@@ -139,6 +144,17 @@ progress {
   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;
@@ -148,24 +164,52 @@ progress {
 }
 
 @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 {
@@ -180,6 +224,10 @@ progress {
   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;
@@ -256,6 +304,11 @@ 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 {
@@ -290,6 +343,7 @@ label,
 }
 
 input,
+textarea,
 .input {
   color: var(--color-light);
   font-size: var(--font-size-scale-up-01);
@@ -333,6 +387,10 @@ code,
   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);
@@ -349,6 +407,50 @@ code,
   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);
@@ -407,6 +509,15 @@ code,
   --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);

package/dist/collection/components/avatar/avatar.js

@@ -79,7 +79,7 @@ export class Avatar {
     }
     setIconSize() {
         var _a, _b;
-        if (!((_a = this.image) === null || _a === void 0 ? void 0 : _a.trim().length) && !((_b = this.text) === null || _b === void 0 ? void 0 : _b.trim().length)) {
+        if (((_a = this.image) === null || _a === void 0 ? void 0 : _a.trim().length) !== 0 && ((_b = this.text) === null || _b === void 0 ? void 0 : _b.trim().length) !== 0) {
             const size = this.iconSizes[this.density];
             this.iconHeight = size.height;
             this.iconWidth = size.width;
@@ -90,10 +90,10 @@ export class Avatar {
     }
     renderAvatar() {
         var _a, _b;
-        if ((_a = this.text) === null || _a === void 0 ? void 0 : _a.trim().length) {
+        if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.trim().length) > 0) {
             return (h("span", { class: "content bg-support-01 text-pure-0", title: this.text }, this.text[0].toUpperCase()));
         }
-        if ((_b = this.image) === null || _b === void 0 ? void 0 : _b.trim().length) {
+        if (((_b = this.image) === null || _b === void 0 ? void 0 : _b.trim().length) > 0) {
             return (h("span", { class: "content", title: this.imageAlt || this.text }, h("img", { src: this.image, alt: this.imageAlt, loading: "lazy" })));
         }
         if (this.isIconic) {
@@ -101,7 +101,7 @@ export class Avatar {
         }
     }
     render() {
-        return (h(Host, { key: '3ec24f0b250572d05af4058ef5d1c135414a3237' }, h("span", Object.assign({ key: 'ca670019b75e79dfde00b8e065d169673ec781ec', class: this.getCssClassMap() }, this.inheritedAttributes), this.renderAvatar())));
+        return (h(Host, { key: '90d4903713585ba969eb111676d95f89c53522f5' }, h("span", Object.assign({ key: '3bb155bdc14da14da5bb576323446157636f3974', class: this.getCssClassMap() }, this.inheritedAttributes), this.renderAvatar())));
     }
     static get is() { return "br-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["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: HTMLElement\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 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 && !this.text?.trim().length) {\n      const size = this.iconSizes[this.density]\n      this.iconHeight = size.height\n      this.iconWidth = size.width\n    }\n  }\n\n  private 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) {\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) {\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"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/button/button.css

@@ -38,7 +38,8 @@ img {
 }
 
 button,
-input {
+input,
+textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: var(--font-line-height-medium);
@@ -82,6 +83,10 @@ progress {
   vertical-align: baseline;
 }
 
+textarea {
+  overflow: auto;
+}
+
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
@@ -139,6 +144,17 @@ progress {
   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;
@@ -148,24 +164,52 @@ progress {
 }
 
 @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 {
@@ -180,6 +224,10 @@ progress {
   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;
@@ -256,6 +304,11 @@ 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 {
@@ -290,6 +343,7 @@ label,
 }
 
 input,
+textarea,
 .input {
   color: var(--color-light);
   font-size: var(--font-size-scale-up-01);
@@ -333,6 +387,10 @@ code,
   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);
@@ -349,6 +407,50 @@ code,
   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-button {
   --button-radius: 100em;
   --button-xsmall: 24px;
@@ -598,6 +700,13 @@ a.br-button {
   animation: fill ease-in-out 2s;
   transform: rotate(3.6deg);
 }
+.loading[data-progress="3"] .br-loading-mask.full,
+.loading[data-progress="3"] .br-loading-fill,
+.br-loading[data-progress="3"] .br-loading-mask.full,
+.br-loading[data-progress="3"] .br-loading-fill {
+  animation: fill ease-in-out 2s;
+  transform: rotate(5.4deg);
+}
 .loading[data-progress="5"] .br-loading-mask.full,
 .loading[data-progress="5"] .br-loading-fill,
 .br-loading[data-progress="5"] .br-loading-mask.full,
@@ -605,6 +714,13 @@ a.br-button {
   animation: fill ease-in-out 2s;
   transform: rotate(9deg);
 }
+.loading[data-progress="10"] .br-loading-mask.full,
+.loading[data-progress="10"] .br-loading-fill,
+.br-loading[data-progress="10"] .br-loading-mask.full,
+.br-loading[data-progress="10"] .br-loading-fill {
+  animation: fill ease-in-out 2s;
+  transform: rotate(18deg);
+}
 .loading[data-progress="16"] .br-loading-mask.full,
 .loading[data-progress="16"] .br-loading-fill,
 .br-loading[data-progress="16"] .br-loading-mask.full,

package/dist/collection/components/button/button.js

@@ -7,8 +7,21 @@ import { inheritAriaAttributes } from "../../utils/inherited-attributes";
  */
 export class Button {
     constructor() {
+        this.handleClick = () => {
+            if (this.type === 'submit') {
+                const submitEvent = new SubmitEvent('submit', {
+                    submitter: this.elementInternals.form,
+                    composed: true,
+                    cancelable: true,
+                    bubbles: true,
+                });
+                this.elementInternals.form.dispatchEvent(submitEvent);
+            }
+            if (this.type === 'reset') {
+                this.elementInternals.form.reset();
+            }
+        };
         this.inheritedAttributes = {};
-        this.autofocus = false;
         this.colorMode = undefined;
         this.density = undefined;
         this.disabled = false;
@@ -59,20 +72,6 @@ export class Button {
     formStateRestoreCallback(state, _mode) {
         this.brFormStateRestoreCallback.emit([state, _mode]);
     }
-    handleClick() {
-        if (this.type === 'submit') {
-            const submitEvent = new SubmitEvent('submit', {
-                submitter: this.elementInternals.form,
-                composed: true,
-                cancelable: true,
-                bubbles: true,
-            });
-            this.elementInternals.form.dispatchEvent(submitEvent);
-        }
-        if (this.type === 'reset') {
-            this.elementInternals.form.reset();
-        }
-    }
     getCssClassMap() {
         return {
             'br-button': true,
@@ -88,7 +87,7 @@ export class Button {
         };
     }
     render() {
-        return (h(Host, { key: '8c496f8f5ff52840ff7ee13e3901b9a5464a9b3b', "aria-disabled": this.disabled ? 'true' : null }, h("button", Object.assign({ key: '685dd72cc52efdf67a8b4059b2bc75bbb3a98c5b', class: this.getCssClassMap(), type: this.type, disabled: this.disabled, autofocus: this.autofocus, value: this.value, onClick: () => this.handleClick() }, this.inheritedAttributes), h("slot", { key: '6da79451bc92ad7fa5851c425244398413930e72' }))));
+        return (h(Host, { key: '01d8aa91c3282453a80a9f54e3d223688b235354', "aria-disabled": this.disabled ? 'true' : null }, h("button", Object.assign({ key: '1a2949be7c6d9b865af11c1bd9a7b5bc12f15d5d', class: this.getCssClassMap(), type: this.type, disabled: this.disabled, value: this.value, onClick: this.handleClick }, this.inheritedAttributes), h("slot", { key: '0d0a45fef31732720036a4ea436a003dc9d5cae9' }))));
     }
     static get is() { return "br-button"; }
     static get encapsulation() { return "shadow"; }
@@ -105,24 +104,6 @@ export class Button {
     }
     static get properties() {
         return {
-            "autofocus": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Se definido como verdadeiro, o bot\u00E3o receber\u00E1 foco automaticamente ao ser renderizado."
-                },
-                "attribute": "autofocus",
-                "reflect": true,
-                "defaultValue": "false"
-            },
             "colorMode": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.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/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/button?tab=designer).\n *\n * @slot default - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.\n */\n@Component({\n  tag: 'br-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Button {\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: HTMLElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Se definido como verdadeiro, o botão receberá foco automaticamente ao ser renderizado.\n   */\n  @Prop({ reflect: true }) autofocus: boolean = false\n\n  /**\n   * Define se o botão usará um esquema de cores escuro.\n   */\n  @Prop({ reflect: true }) colorMode: 'dark'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'middle' | 'small'\n\n  /**\n   * Desativa o botão, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.\n   */\n  @Prop({ reflect: true }) emphasis: 'primary' | 'secondary' | 'tertiary'\n\n  /**\n   * Indica se o botão está no estado ativo.\n   * Se definido como verdadeiro, o botão será exibido como ativo.\n   */\n  @Prop({ reflect: true }) isActive: boolean = false\n\n  /**\n   * Aplica o estado de \"progresso\" ao botão.\n   * O botão exibirá um indicador de carregamento ou progresso.\n   */\n  @Prop({ reflect: true }) isLoading: boolean = false\n\n  /**\n   * Define o formato do botão.\n   * Valores possíveis:\n   * - 'circle': Botão com formato circular.\n   * - 'block': Botão com formato ovalado ocupando toda a largura disponível.\n   * - 'pill': Botão com formato ovalado, com bordas arredondadas.\n   */\n  @Prop({ reflect: true }) shape: 'circle' | 'block' | 'pill'\n\n  /**\n   * Define o tipo de botão, especificando seu comportamento padrão.\n   * Valores possíveis:\n   * - 'button': Um botão padrão.\n   * - 'reset': Um botão para redefinir o formulário.\n   * - 'submit': Um botão para enviar o formulário.\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit'\n\n  /**\n   * Define o valor inicial do botão em um formulário.\n   */\n  @Prop({ reflect: true }) value: 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  /**\n   * Emite um evento quando o componente é associado ou removido de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n   *\n   * @param form - Dados do formulário associado.\n   */\n  @Event() brFormAssociatedCallback: EventEmitter<FormData>\n  formAssociatedCallback(form: FormData) {\n    this.brFormAssociatedCallback.emit(form)\n  }\n\n  /**\n   * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n   *\n   * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n   */\n  @Event() brFormDisabledCallback: EventEmitter<boolean>\n  formDisabledCallback(disabled: boolean) {\n    this.brFormDisabledCallback.emit(disabled)\n  }\n\n  /**\n   * Emite um evento quando um `<form>` é resetado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n   */\n  @Event() brFormResetCallback: EventEmitter<void>\n  formResetCallback() {\n    this.brFormResetCallback.emit()\n  }\n\n  /**\n   * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n   *\n   * @param state - Estado restaurado do formulário.\n   * @param _mode - Modo de preenchimento automático do navegador.\n   */\n  @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n  formStateRestoreCallback(state: string, _mode: string) {\n    this.brFormStateRestoreCallback.emit([state, _mode])\n  }\n\n  private handleClick() {\n    if (this.type === 'submit') {\n      const submitEvent = new SubmitEvent('submit', {\n        submitter: this.elementInternals.form,\n        composed: true,\n        cancelable: true,\n        bubbles: true,\n      })\n      this.elementInternals.form.dispatchEvent(submitEvent)\n    }\n\n    if (this.type === 'reset') {\n      this.elementInternals.form.reset()\n    }\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-button': true,\n      primary: this.emphasis === 'primary',\n      secondary: this.emphasis === 'secondary',\n      large: this.density === 'large',\n      small: this.density === 'small',\n      block: this.shape === 'block',\n      circle: this.shape === 'circle',\n      active: this.isActive,\n      loading: this.isLoading,\n      'dark-mode': this.colorMode === 'dark',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <button\n          class={this.getCssClassMap()}\n          type={this.type}\n          disabled={this.disabled}\n          autofocus={this.autofocus}\n          value={this.value}\n          onClick={() => this.handleClick()}\n          {...this.inheritedAttributes}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.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/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/button?tab=designer).\n *\n * @slot default - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.\n */\n@Component({\n  tag: 'br-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Button {\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: HTMLBrButtonElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define se o botão usará um esquema de cores escuro.\n   */\n  @Prop({ reflect: true }) colorMode: 'dark'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) density: 'large' | 'middle' | 'small'\n\n  /**\n   * Desativa o botão, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.\n   */\n  @Prop({ reflect: true }) emphasis: 'primary' | 'secondary' | 'tertiary'\n\n  /**\n   * Indica se o botão está no estado ativo.\n   * Se definido como verdadeiro, o botão será exibido como ativo.\n   */\n  @Prop({ reflect: true }) isActive: boolean = false\n\n  /**\n   * Aplica o estado de \"progresso\" ao botão.\n   * O botão exibirá um indicador de carregamento ou progresso.\n   */\n  @Prop({ reflect: true }) isLoading: boolean = false\n\n  /**\n   * Define o formato do botão.\n   * Valores possíveis:\n   * - 'circle': Botão com formato circular.\n   * - 'block': Botão com formato ovalado ocupando toda a largura disponível.\n   * - 'pill': Botão com formato ovalado, com bordas arredondadas.\n   */\n  @Prop({ reflect: true }) shape: 'circle' | 'block' | 'pill'\n\n  /**\n   * Define o tipo de botão, especificando seu comportamento padrão.\n   * Valores possíveis:\n   * - 'button': Um botão padrão.\n   * - 'reset': Um botão para redefinir o formulário.\n   * - 'submit': Um botão para enviar o formulário.\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit'\n\n  /**\n   * Define o valor inicial do botão em um formulário.\n   */\n  @Prop({ reflect: true }) value: 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  /**\n   * Emite um evento quando o componente é associado ou removido de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n   *\n   * @param form - Dados do formulário associado.\n   */\n  @Event() brFormAssociatedCallback: EventEmitter<FormData>\n  formAssociatedCallback(form: FormData) {\n    this.brFormAssociatedCallback.emit(form)\n  }\n\n  /**\n   * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n   *\n   * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n   */\n  @Event() brFormDisabledCallback: EventEmitter<boolean>\n  formDisabledCallback(disabled: boolean) {\n    this.brFormDisabledCallback.emit(disabled)\n  }\n\n  /**\n   * Emite um evento quando um `<form>` é resetado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n   */\n  @Event() brFormResetCallback: EventEmitter<void>\n  formResetCallback() {\n    this.brFormResetCallback.emit()\n  }\n\n  /**\n   * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n   *\n   * @param state - Estado restaurado do formulário.\n   * @param _mode - Modo de preenchimento automático do navegador.\n   */\n  @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n  formStateRestoreCallback(state: string, _mode: string) {\n    this.brFormStateRestoreCallback.emit([state, _mode])\n  }\n\n  private readonly handleClick = () => {\n    if (this.type === 'submit') {\n      const submitEvent = new SubmitEvent('submit', {\n        submitter: this.elementInternals.form,\n        composed: true,\n        cancelable: true,\n        bubbles: true,\n      })\n      this.elementInternals.form.dispatchEvent(submitEvent)\n    }\n\n    if (this.type === 'reset') {\n      this.elementInternals.form.reset()\n    }\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-button': true,\n      primary: this.emphasis === 'primary',\n      secondary: this.emphasis === 'secondary',\n      large: this.density === 'large',\n      small: this.density === 'small',\n      block: this.shape === 'block',\n      circle: this.shape === 'circle',\n      active: this.isActive,\n      loading: this.isLoading,\n      'dark-mode': this.colorMode === 'dark',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <button\n          class={this.getCssClassMap()}\n          type={this.type}\n          disabled={this.disabled}\n          value={this.value}\n          onClick={this.handleClick}\n          {...this.inheritedAttributes}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    )\n  }\n}\n"]}