@govbr-ds/webcomponents 2.0.0-next.21 → 2.0.0-next.22

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\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: HTMLBrInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único do input.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-input-${uuidv4()}`\n\n  /**\n   * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n   * - 'color': Seletor de cor\n   * - 'email': Campo para e-mail\n   * - 'hidden': Campo oculto\n   * - 'password': Campo para senha\n   * - 'range': Controle deslizante\n   * - 'search': Campo de pesquisa\n   * - 'number': Campo para números\n   * - 'tel': Campo para números de telefone\n   * - 'text': Campo de texto padrão\n   * - 'url': Campo para URLs\n   */\n  @Prop({ reflect: true }) type:\n    | 'color'\n    | 'email'\n    | 'hidden'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'number'\n    | 'tel'\n    | 'text'\n    | 'file'\n    | 'url' = 'text'\n\n  /**\n   * Controla o comportamento de preenchimento automático do navegador para o input.\n   */\n  @Prop({ reflect: true }) autocomplete: 'on' | 'off'\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' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o input, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se verdadeiro, o input terá destaque visual.\n   */\n  @Prop({ reflect: true }) isHighlight: boolean = false\n\n  /**\n   * Define o estado do input\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'\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Nome do input, utilizado para identificação em formulários.\n   */\n  @Prop({ reflect: true }) name: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) placeholder: string\n\n  /**\n   * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false\n\n  /**\n   * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n   */\n  @Prop({ reflect: true }) required: boolean = false\n\n  /**\n   * Valor inicial exibido no input.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /**\n   * Texto adicional que fornece ajuda ou informações sobre o input.\n   */\n  @Prop({ reflect: true }) helpText: string\n\n  /**\n   * Controla a correção automática do texto.\n   */\n  @Prop({ reflect: true }) autocorrect: 'off' | 'on' = 'off'\n\n  /**\n   * Define o valor mínimo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) min: number\n\n  /**\n   * Define o valor máximo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) max: number\n\n  /**\n   * Define o comprimento mínimo do valor do campo de entrada.\n   */\n  @Prop({ reflect: true }) minlength: number\n\n  /**\n   * Define o comprimento máximo do valor do campo de entrada.\n   */\n  @Prop({ reflect: true }) maxlength: number\n\n  /**\n   * Se verdadeiro, permite a seleção de múltiplos arquivos.\n   */\n  @Prop({ reflect: true }) multiple: boolean = false\n\n  /**\n   * Define o padrão de entrada para validação.\n   */\n  @Prop({ reflect: true }) pattern: string\n\n  /**\n   * Define o valor do passo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) step: number\n\n  @State() isPasswordVisible: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\n\n  componentWillLoad() {\n    this.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.hasActionSlot,\n      small: this.density === 'small',\n      large: this.density === 'large',\n      medium: this.density === 'medium',\n      'input-inline': this.isInline,\n      'input-highlight': this.isHighlight,\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      info: this.state === 'info',\n      warning: this.state === 'warning',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Valor atualizado do input\n   */\n  @Event() valueChange!: EventEmitter<string>\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  private readonly renderLabel = () => {\n    if (this.label?.length > 0) {\n      if (this.isInline) {\n        return (\n          <div class=\"input-label\">\n            <label class=\"text-nowrap\" htmlFor={this.customId}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.customId}>{this.label}</label>\n      }\n    }\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private readonly renderInput = () => {\n    return (\n      <input\n        class={this.isHighlight ? 'input-highlight' : null}\n        id={this.customId}\n        autocomplete={this.autocomplete}\n        disabled={this.disabled}\n        autoCorrect={this.autocorrect}\n        min={this.min}\n        max={this.max}\n        minLength={this.minlength}\n        maxLength={this.maxlength}\n        multiple={this.multiple}\n        name={this.name}\n        pattern={this.pattern}\n        step={this.step}\n        onInput={this.handleInput}\n        placeholder={this.placeholder}\n        readonly={this.readonly}\n        required={this.required}\n        title={this.el.title}\n        type={this.type}\n        value={this.value}\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly renderHelpText = () => {\n    return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n  }\n\n  private readonly renderIconPassword = () => {\n    const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye'\n    return <br-icon icon-name={iconName}></br-icon>\n  }\n\n  private readonly togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    this.isPasswordVisible = !this.isPasswordVisible\n    input.type = this.isPasswordVisible ? 'text' : 'password'\n  }\n\n  private renderIconSlot() {\n    if (this.hasSlotContent('icon')) {\n      return (\n        <div class=\"input-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n      )\n    }\n  }\n\n  private renderButton() {\n    if (this.type === 'password') {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          onClick={this.togglePasswordVisibility}\n        >\n          {this.renderIconPassword()}\n        </br-button>\n      )\n    } else if (this.hasSlotContent('action')) {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          // onClick={this.onIconAction}\n        >\n          <slot name=\"action\"></slot>\n        </br-button>\n      )\n    }\n    return null\n  }\n\n  private readonly renderInlineInputContent = () => {\n    if (this.hasIconSlot) {\n      return <div class=\"input-content\">{this.renderInputWithIcon()}</div>\n    } else {\n      return <div class=\"input-content\">{this.renderInputWithoutIcon()}</div>\n    }\n  }\n\n  private readonly renderInputContent = () => {\n    return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n  }\n\n  private readonly renderInputWithIcon = () => {\n    return (\n      <div class=\"input-group\">\n        {this.renderIconSlot()}\n        {this.renderInput()}\n        {this.renderButton()}\n        {this.renderHelpText()}\n      </div>\n    )\n  }\n\n  private readonly renderInputWithoutIcon = () => {\n    return [this.renderInput(), this.renderButton(), this.renderHelpText()]\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.isInline ? this.renderInlineInputContent() : this.renderInputContent()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\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: HTMLBrInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único do input.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-input-${uuidv4()}`\n\n  /**\n   * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n   * - 'color': Seletor de cor\n   * - 'email': Campo para e-mail\n   * - 'hidden': Campo oculto\n   * - 'password': Campo para senha\n   * - 'range': Controle deslizante\n   * - 'search': Campo de pesquisa\n   * - 'number': Campo para números\n   * - 'tel': Campo para números de telefone\n   * - 'text': Campo de texto padrão\n   * - 'url': Campo para URLs\n   */\n  @Prop({ reflect: true }) type:\n    | 'color'\n    | 'email'\n    | 'hidden'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'number'\n    | 'tel'\n    | 'text'\n    | 'file'\n    | 'url' = 'text'\n\n  /**\n   * Controla o comportamento de preenchimento automático do navegador para o input.\n   */\n  @Prop({ reflect: true }) autocomplete: 'on' | 'off'\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' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o input, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se verdadeiro, o input terá destaque visual.\n   */\n  @Prop({ reflect: true }) isHighlight: boolean = false\n\n  /**\n   * Define o estado do input\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'\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Nome do input, utilizado para identificação em formulários.\n   */\n  @Prop({ reflect: true }) name: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) placeholder: string\n\n  /**\n   * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false\n\n  /**\n   * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n   */\n  @Prop({ reflect: true }) required: boolean = false\n\n  /**\n   * Valor inicial exibido no input.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /**\n   * Texto adicional que fornece ajuda ou informações sobre o input.\n   */\n  @Prop({ reflect: true }) helpText: string\n\n  /**\n   * Controla a correção automática do texto.\n   */\n  @Prop({ reflect: true }) autocorrect: 'off' | 'on' = 'off'\n\n  /**\n   * Define o valor mínimo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) min: number\n\n  /**\n   * Define o valor máximo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) max: number\n\n  /**\n   * Define o comprimento mínimo do valor do campo de entrada.\n   */\n  @Prop({ reflect: true }) minlength: number\n\n  /**\n   * Define o comprimento máximo do valor do campo de entrada.\n   */\n  @Prop({ reflect: true }) maxlength: number\n\n  /**\n   * Se verdadeiro, permite a seleção de múltiplos arquivos.\n   */\n  @Prop({ reflect: true }) multiple: boolean = false\n\n  /**\n   * Define o padrão de entrada para validação.\n   */\n  @Prop({ reflect: true }) pattern: string\n\n  /**\n   * Define o valor do passo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) step: number\n\n  @State() isPasswordVisible: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\n\n  componentWillLoad() {\n    this.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.hasActionSlot,\n      small: this.density === 'small',\n      large: this.density === 'large',\n      medium: this.density === 'medium',\n      'input-inline': this.isInline,\n      'input-highlight': this.isHighlight,\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      info: this.state === 'info',\n      warning: this.state === 'warning',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Valor atualizado do input\n   */\n  @Event() valueChange!: EventEmitter<string>\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  private readonly renderLabel = () => {\n    if (this.label?.length > 0) {\n      if (this.isInline) {\n        return (\n          <div class=\"input-label\">\n            <label class=\"text-nowrap\" htmlFor={this.customId}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.customId}>{this.label}</label>\n      }\n    }\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private readonly renderInput = () => {\n    return (\n      <input\n        class={this.isHighlight ? 'input-highlight' : null}\n        id={this.customId}\n        autocomplete={this.autocomplete}\n        disabled={this.disabled}\n        autoCorrect={this.autocorrect}\n        min={this.min}\n        max={this.max}\n        minLength={this.minlength}\n        maxLength={this.maxlength}\n        multiple={this.multiple}\n        name={this.name}\n        pattern={this.pattern}\n        step={this.step}\n        onInput={this.handleInput}\n        placeholder={this.placeholder}\n        readonly={this.readonly}\n        required={this.required}\n        title={this.el.title}\n        type={this.type}\n        value={this.value}\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly renderHelpText = () => {\n    return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n  }\n\n  private readonly renderIconPassword = () => {\n    const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye'\n    return <br-icon icon-name={iconName}></br-icon>\n  }\n\n  private readonly togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    this.isPasswordVisible = !this.isPasswordVisible\n    input.type = this.isPasswordVisible ? 'text' : 'password'\n  }\n\n  private renderIconSlot() {\n    if (this.hasSlotContent('icon')) {\n      return (\n        <div class=\"input-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n      )\n    }\n  }\n\n  private renderButton() {\n    if (this.type === 'password') {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          onClick={this.togglePasswordVisibility}\n        >\n          {this.renderIconPassword()}\n        </br-button>\n      )\n    } else if (this.hasSlotContent('action')) {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label=\"botão de ação do ícone\"\n          // onClick={this.onIconAction}\n        >\n          <slot name=\"action\"></slot>\n        </br-button>\n      )\n    }\n    return null\n  }\n\n  private readonly renderInlineInputContent = () => {\n    if (this.hasIconSlot) {\n      return <div class=\"input-content\">{this.renderInputWithIcon()}</div>\n    } else {\n      return <div class=\"input-content\">{this.renderInputWithoutIcon()}</div>\n    }\n  }\n\n  private readonly renderInputContent = () => {\n    return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n  }\n\n  private readonly renderInputWithIcon = () => {\n    return (\n      <div class=\"input-group\">\n        {this.renderIconSlot()}\n        {this.renderInput()}\n        {this.renderButton()}\n        {this.renderHelpText()}\n      </div>\n    )\n  }\n\n  private readonly renderInputWithoutIcon = () => {\n    return [this.renderInput(), this.renderButton(), this.renderHelpText()]\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.isInline ? this.renderInlineInputContent() : this.renderInputContent()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/item/item.css

@@ -213,6 +213,10 @@ textarea {
   margin-right: var(--spacing-scale-half) !important;
 }
 
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
 .mr-2 {
   margin-right: var(--spacing-scale-base) !important;
 }
@@ -221,6 +225,10 @@ textarea {
   margin-right: calc(var(--spacing-scale-base) * -1) !important;
 }
 
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }

package/dist/collection/components/item/item.js

@@ -14,6 +14,8 @@ import { Host, h } from "@stencil/core";
  */
 export class Item {
     constructor() {
+        // Propriedade para rastrear a presença de rádios dentro do item
+        this.hasRadios = false;
         this.inheritedAttributes = {};
         this.handleClick = (event) => {
             const clickedElement = event.target;
@@ -21,6 +23,9 @@ export class Item {
                 event.preventDefault();
                 event.stopPropagation();
             }
+            if (this.hasRadios) {
+                return;
+            }
             if (this.isButton) {
                 this.brDidClick.emit();
             }
@@ -46,10 +51,15 @@ export class Item {
         this.hasSlotEnd = false;
         this.selectedValue = false;
     }
-    handleChange(event) {
+    handleRadioChange() {
+        requestAnimationFrame(() => {
+            this.updateRadioSelectionState();
+        });
+    }
+    handleCheckboxChange(event) {
         const target = event.target;
         if (this.el.contains(target)) {
-            this.updateItemSelectionState();
+            this.updateCheckboxSelectionState();
         }
     }
     componentWillLoad() {
@@ -60,10 +70,19 @@ export class Item {
         if (this.isButton) {
             this.type = this.type || 'button';
         }
-        this.updateItemSelectionState();
-    }
-    componentDidLoad() {
-        this.updateCheckboxes();
+        const radios = Array.from(this.el.querySelectorAll('br-radio'));
+        const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
+        this.hasRadios = radios.length > 0;
+        if (this.isSelected) {
+            if (checkboxes.length > 0) {
+                checkboxes.forEach((checkbox) => (checkbox.checked = true));
+            }
+            if (radios.length > 0) {
+                radios[0].checked = true;
+            }
+        }
+        this.updateRadioSelectionState();
+        this.updateCheckboxSelectionState();
     }
     hasSlotContentDefault() {
         this.hasSlotDefault = this.el.innerHTML !== '';
@@ -94,20 +113,21 @@ export class Item {
     getAttributes() {
         const TagType = this.getTagType();
         const baseAttributes = TagType === 'button' ? { type: this.type, value: this.value } : { href: this.href, target: this.target };
-        return Object.assign(Object.assign(Object.assign({}, baseAttributes), { 'aria-disabled': this.disabled ? 'true' : null, 'aria-current': this.isActive ? 'true' : null, 'data-toggle': this.isInteractive ? 'selection' : null }), this.inheritedAttributes);
+        return Object.assign(Object.assign(Object.assign({}, baseAttributes), { 'aria-disabled': this.disabled ? 'true' : null, 'aria-current': this.isActive ? 'true' : null, 'data-toggle': this.isInteractive ? 'selection' : null, 'is-selected': this.selectedValue ? true : null }), this.inheritedAttributes);
     }
-    updateItemSelectionState() {
+    updateCheckboxSelectionState() {
+        if (this.hasRadios)
+            return;
         const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
+        this.selectedValue = checkboxes.some(checkbox => checkbox.checked);
+        this.brDidSelect.emit({ selected: this.selectedValue });
+    }
+    updateRadioSelectionState() {
+        if (!this.hasRadios)
+            return;
         const radios = Array.from(this.el.querySelectorAll('br-radio'));
-        let isAnyCheckboxChecked = false;
-        let isAnyRadioSelected = false;
-        if (checkboxes.length > 0) {
-            isAnyCheckboxChecked = checkboxes.some((cb) => cb.checked);
-        }
-        if (radios.length > 0) {
-            isAnyRadioSelected = radios.some((radio) => radio.checked);
-        }
-        this.selectedValue = isAnyCheckboxChecked || isAnyRadioSelected;
+        this.selectedValue = radios.some(radio => radio.checked);
+        this.brDidSelect.emit({ selected: this.selectedValue });
     }
     // Função para verificar se o clique foi dentro do slot do item.
     isClickInsideInteractiveElement(target) {
@@ -125,7 +145,7 @@ export class Item {
         const TagType = this.getTagType();
         const attributes = this.getAttributes();
         const classList = this.getCssClassMap();
-        return (h(Host, { key: 'cd5aaacd053d2a3dcce81f2be4948a499b8165a2' }, h(TagType, Object.assign({ key: 'f6987c1b45458255f4008568cbeececc8d2f5548', class: classList }, attributes, { onClick: this.handleClick }), this.hasSlotStart || this.hasSlotEnd ? (h("div", { class: "row align-items-center" }, this.hasSlotStart && (h("div", { class: "col-auto" }, h("slot", { name: "start" }))), h("div", { class: "col" }, h("slot", null)), this.hasSlotEnd && (h("div", { class: "col-auto" }, h("slot", { name: "end" }))))) : (h("slot", null)))));
+        return (h(Host, { key: 'f6c1cb0986dd510896aaff3c94a7a6505cc4c30b' }, h(TagType, Object.assign({ key: 'a3c91de0e8d46cc4cac5c1e7fbaa71bcde79cc23', class: classList }, attributes, { onClick: this.handleClick }), this.hasSlotStart || this.hasSlotEnd ? (h("div", { class: "row align-items-center" }, this.hasSlotStart && (h("div", { class: "col-auto" }, h("slot", { name: "start" }))), h("div", { class: "col" }, h("slot", null)), this.hasSlotEnd && (h("div", { class: "col-auto" }, h("slot", { name: "end" }))))) : (h("slot", null)))));
     }
     static get is() { return "br-item"; }
     static get encapsulation() { return "shadow"; }
@@ -156,6 +176,8 @@ export class Item {
                     "tags": [],
                     "text": "Desativa o item, tornando-o n\u00E3o interativo."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -174,6 +196,8 @@ export class Item {
                     "tags": [],
                     "text": "Indica se o item est\u00E1 no estado ativo.\nSe definido como verdadeiro, o item ser\u00E1 exibido como ativo."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-active",
                 "reflect": true,
                 "defaultValue": "false"
@@ -192,6 +216,8 @@ export class Item {
                     "tags": [],
                     "text": "Indica se o item est\u00E1 no estado selecionado.\nSe definido como verdadeiro, o item ser\u00E1 exibido como selecionado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-selected",
                 "reflect": true,
                 "defaultValue": "false"
@@ -210,6 +236,8 @@ export class Item {
                     "tags": [],
                     "text": "Marca o item como interativo, permitindo que toda a superf\u00EDcie do item seja clic\u00E1vel."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-interactive",
                 "reflect": true,
                 "defaultValue": "false"
@@ -228,6 +256,8 @@ export class Item {
                     "tags": [],
                     "text": "URL ou caminho para o qual o usu\u00E1rio ser\u00E1 direcionado ao clicar no item. Quando definido, o item ser\u00E1 renderizado como um link."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": true
             },
@@ -245,6 +275,8 @@ export class Item {
                     "tags": [],
                     "text": "Define o alvo do link quando `href` est\u00E1 presente. Pode ser:\n- `_blank` para abrir em uma nova aba,\n- `_self` para abrir na mesma aba,\n- `_parent` para abrir na aba pai,\n- `_top` para abrir na aba superior."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": true
             },
@@ -262,6 +294,8 @@ export class Item {
                     "tags": [],
                     "text": "Quando definido como `true`, o item ser\u00E1 tratado como um bot\u00E3o."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-button",
                 "reflect": true,
                 "defaultValue": "false"
@@ -280,6 +314,8 @@ export class Item {
                     "tags": [],
                     "text": "Tipo do bot\u00E3o, aplic\u00E1vel apenas se `isButton` for `true`. Pode ser:\n- `'submit'` para enviar um formul\u00E1rio,\n- `'reset'` para redefinir um formul\u00E1rio,\n- `'button'` para um bot\u00E3o padr\u00E3o."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true
             },
@@ -297,6 +333,8 @@ export class Item {
                     "tags": [],
                     "text": "Define um valor associado ao br-item quando renderizado como um bot\u00E3o, utilizado em contextos de formul\u00E1rio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             },
@@ -314,6 +352,8 @@ export class Item {
                     "tags": [],
                     "text": "Ajusta a densidade, alterando o espa\u00E7amento interno para um visual mais compacto ou mais expandido."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "density",
                 "reflect": true,
                 "defaultValue": "'medium'"
@@ -364,8 +404,14 @@ export class Item {
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
+                "name": "brDidChange",
+                "method": "handleRadioChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "brDidCheckedChange",
-                "method": "handleChange",
+                "method": "handleCheckboxChange",
                 "target": "document",
                 "capture": false,
                 "passive": false

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

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/components/item/item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core'\nimport { Attributes } 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/item?tab=designer).\n *\n * @slot default - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).\n *\n * @slot start - Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.\n *\n * @slot end - Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.\n */\n@Component({\n  tag: 'br-item',\n  styleUrl: 'item.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Item {\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: HTMLBrItemElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Desativa o item, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Indica se o item está no estado ativo.\n   * Se definido como verdadeiro, o item será exibido como ativo.\n   */\n  @Prop({ reflect: true }) isActive: boolean = false\n\n  /**\n   * Indica se o item está no estado selecionado.\n   * Se definido como verdadeiro, o item será exibido como selecionado.\n   */\n  @Prop({ reflect: true }) isSelected: boolean = false\n\n  /**\n   * Marca o item como interativo, permitindo que toda a superfície do item seja clicável.\n   */\n  @Prop({ reflect: true }) isInteractive: boolean = false\n\n  /**\n   * URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.\n   */\n  @Prop({ reflect: true }) href?: string\n\n  /**\n   * Define o alvo do link quando `href` está presente. Pode ser:\n   * - `_blank` para abrir em uma nova aba,\n   * - `_self` para abrir na mesma aba,\n   * - `_parent` para abrir na aba pai,\n   * - `_top` para abrir na aba superior.\n   */\n  @Prop({ reflect: true }) target?: '_blank' | '_self' | '_parent' | '_top'\n\n  /**\n   * Quando definido como `true`, o item será tratado como um botão.\n   */\n  @Prop({ reflect: true }) isButton: boolean = false\n\n  /**\n   * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser:\n   * - `'submit'` para enviar um formulário,\n   * - `'reset'` para redefinir um formulário,\n   * - `'button'` para um botão padrão.\n   */\n  @Prop({ reflect: true, mutable: true }) type: 'submit' | 'reset' | 'button'\n\n  /**\n   *  Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.\n   */\n  @Prop({ reflect: true }) value?: string\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' | 'medium' | 'small' = 'medium'\n\n  // Propriedade interna para verificar a presença de conteúdo no slot default\n  @State() hasSlotDefault: boolean = false\n\n  @State() hasSlotStart: boolean = false\n\n  @State() hasSlotEnd: boolean = false\n\n  // Propriedade interna para armazenar o valor selecionado\n  @State() selectedValue: boolean = false\n\n  @Listen('brDidCheckedChange', { target: 'document' })\n  handleChange(event: Event) {\n    const target = event.target as HTMLElement\n\n    if (this.el.contains(target)) {\n      this.updateItemSelectionState()\n    }\n  }\n\n  /**\n   * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`).\n   * Pode ser utilizado para ações personalizadas, exceto quando o item está desativado.\n   */\n  @Event({ composed: true, cancelable: true, bubbles: true }) brDidClick: EventEmitter\n\n  /**\n   * Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item é selecionado e desde que a propriedade `isInteractive` esteja presente.\n   */\n  @Event({ bubbles: true, composed: true }) brDidSelect: EventEmitter<{ selected: boolean }>\n\n  componentWillLoad() {\n    this.hasSlotContentDefault()\n    this.hasSlotStart = this.hasSlotContent('start')\n    this.hasSlotEnd = this.hasSlotContent('end')\n    this.selectedValue = this.isSelected\n    if (this.isButton) {\n      this.type = this.type || 'button'\n    }\n    this.updateItemSelectionState()\n  }\n\n  componentDidLoad() {\n    this.updateCheckboxes()\n  }\n\n  private hasSlotContentDefault(): any {\n    this.hasSlotDefault = this.el.innerHTML !== ''\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-item': true,\n      disabled: this.disabled,\n      active: this.isActive,\n      selected: this.selectedValue,\n      'py-3': this.density === 'medium',\n      'py-4': this.density === 'small',\n    }\n  }\n\n  private readonly inheritedAttributes: Attributes = {}\n\n  private getTagType(): string {\n    if (this.isButton) {\n      return 'button'\n    }\n    if (this.href?.length > 0) {\n      return 'a'\n    }\n    return 'div'\n  }\n\n  private getAttributes() {\n    const TagType = this.getTagType()\n    const baseAttributes =\n      TagType === 'button' ? { type: this.type, value: this.value } : { href: this.href, target: this.target }\n\n    return {\n      ...baseAttributes,\n      'aria-disabled': this.disabled ? 'true' : null,\n      'aria-current': this.isActive ? 'true' : null,\n      'data-toggle': this.isInteractive ? 'selection' : null,\n      ...this.inheritedAttributes,\n    }\n  }\n\n  private updateItemSelectionState() {\n    const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'))\n    const radios = Array.from(this.el.querySelectorAll('br-radio'))\n\n    let isAnyCheckboxChecked = false\n    let isAnyRadioSelected = false\n\n    if (checkboxes.length > 0) {\n      isAnyCheckboxChecked = checkboxes.some((cb) => cb.checked)\n    }\n    if (radios.length > 0) {\n      isAnyRadioSelected = radios.some((radio) => radio.checked)\n    }\n\n    this.selectedValue = isAnyCheckboxChecked || isAnyRadioSelected\n  }\n\n  // Função para verificar se o clique foi dentro do slot do item.\n  private isClickInsideInteractiveElement(target: HTMLElement): boolean {\n    const interactiveSelectors = 'br-checkbox, br-radio, br-input, br-button, br-select, br-textarea'\n    const interactiveElements = this.el.querySelectorAll(interactiveSelectors)\n    return Array.from(interactiveElements).some((el) => el.contains(target) || target === el)\n  }\n\n  private updateCheckboxes() {\n    const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'))\n\n    checkboxes.forEach((checkbox) => {\n      checkbox.checked = this.selectedValue\n    })\n  }\n\n  private readonly handleClick = (event: MouseEvent) => {\n    const clickedElement = event.target as HTMLElement\n\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n\n    if (this.isButton) {\n      this.brDidClick.emit()\n    } else if (this.isInteractive && !this.isClickInsideInteractiveElement(clickedElement)) {\n      this.selectedValue = !this.selectedValue\n      this.brDidSelect.emit({ selected: this.selectedValue })\n      this.updateCheckboxes()\n    }\n    event.stopPropagation()\n  }\n\n  render() {\n    const TagType = this.getTagType()\n    const attributes = this.getAttributes()\n    const classList = this.getCssClassMap()\n    return (\n      <Host>\n        <TagType class={classList} {...attributes} onClick={this.handleClick}>\n          {this.hasSlotStart || this.hasSlotEnd ? (\n            <div class=\"row align-items-center\">\n              {this.hasSlotStart && (\n                <div class=\"col-auto\">\n                  <slot name=\"start\"></slot>\n                </div>\n              )}\n\n              <div class=\"col\">\n                <slot></slot>\n              </div>\n\n              {this.hasSlotEnd && (\n                <div class=\"col-auto\">\n                  <slot name=\"end\"></slot>\n                </div>\n              )}\n            </div>\n          ) : (\n            <slot></slot>\n          )}\n        </TagType>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/item/item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core'\nimport { Attributes } 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/item?tab=designer).\n *\n * @slot default - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).\n *\n * @slot start - Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.\n *\n * @slot end - Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.\n */\n@Component({\n  tag: 'br-item',\n  styleUrl: 'item.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Item {\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: HTMLBrItemElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Desativa o item, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Indica se o item está no estado ativo.\n   * Se definido como verdadeiro, o item será exibido como ativo.\n   */\n  @Prop({ reflect: true }) isActive: boolean = false\n\n  /**\n   * Indica se o item está no estado selecionado.\n   * Se definido como verdadeiro, o item será exibido como selecionado.\n   */\n  @Prop({ reflect: true }) isSelected: boolean = false\n\n  /**\n   * Marca o item como interativo, permitindo que toda a superfície do item seja clicável.\n   */\n  @Prop({ reflect: true }) isInteractive: boolean = false\n\n  /**\n   * URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.\n   */\n  @Prop({ reflect: true }) href?: string\n\n  /**\n   * Define o alvo do link quando `href` está presente. Pode ser:\n   * - `_blank` para abrir em uma nova aba,\n   * - `_self` para abrir na mesma aba,\n   * - `_parent` para abrir na aba pai,\n   * - `_top` para abrir na aba superior.\n   */\n  @Prop({ reflect: true }) target?: '_blank' | '_self' | '_parent' | '_top'\n\n  /**\n   * Quando definido como `true`, o item será tratado como um botão.\n   */\n  @Prop({ reflect: true }) isButton: boolean = false\n\n  /**\n   * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser:\n   * - `'submit'` para enviar um formulário,\n   * - `'reset'` para redefinir um formulário,\n   * - `'button'` para um botão padrão.\n   */\n  @Prop({ reflect: true, mutable: true }) type: 'submit' | 'reset' | 'button'\n\n  /**\n   *  Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.\n   */\n  @Prop({ reflect: true }) value?: string\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' | 'medium' | 'small' = 'medium'\n\n  // Propriedade interna para verificar a presença de conteúdo no slot default\n  @State() hasSlotDefault: boolean = false\n\n  @State() hasSlotStart: boolean = false\n\n  @State() hasSlotEnd: boolean = false\n\n  // Propriedade interna para armazenar o valor selecionado\n  @State() selectedValue: boolean = false\n\n  // Propriedade para rastrear a presença de rádios dentro do item\n  private hasRadios: boolean = false;\n\n  @Listen('brDidChange', { target: 'document' })\n  handleRadioChange() {\n    requestAnimationFrame(() => {\n      this.updateRadioSelectionState();\n    });\n  }\n\n  @Listen('brDidCheckedChange', { target: 'document' })\n  handleCheckboxChange(event: Event) {\n    const target = event.target as HTMLElement\n\n    if (this.el.contains(target)) {\n      this.updateCheckboxSelectionState();\n    }\n  }\n\n  /**\n   * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`).\n   * Pode ser utilizado para ações personalizadas, exceto quando o item está desativado.\n   */\n  @Event({ composed: true, cancelable: true, bubbles: true }) brDidClick: EventEmitter\n\n  /**\n   * Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item é selecionado e desde que a propriedade `isInteractive` esteja presente.\n   */\n  @Event({ bubbles: true, composed: true }) brDidSelect: EventEmitter<{ selected: boolean }>\n\n  componentWillLoad() {\n    this.hasSlotContentDefault()\n    this.hasSlotStart = this.hasSlotContent('start')\n    this.hasSlotEnd = this.hasSlotContent('end')\n    this.selectedValue = this.isSelected\n    if (this.isButton) {\n      this.type = this.type || 'button'\n    }\n    const radios = Array.from(this.el.querySelectorAll('br-radio'));\n    const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));\n    this.hasRadios = radios.length > 0;\n\n    if (this.isSelected) {\n      if(checkboxes.length > 0){\n        checkboxes.forEach((checkbox) => (checkbox.checked = true));\n      }\n      if (radios.length > 0) {\n        radios[0].checked = true;\n      }\n    }\n\n    this.updateRadioSelectionState();\n    this.updateCheckboxSelectionState();\n  }\n\n  private hasSlotContentDefault(): any {\n    this.hasSlotDefault = this.el.innerHTML !== ''\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-item': true,\n      disabled: this.disabled,\n      active: this.isActive,\n      selected: this.selectedValue,\n      'py-3': this.density === 'medium',\n      'py-4': this.density === 'small',\n    }\n  }\n\n  private readonly inheritedAttributes: Attributes = {}\n\n  private getTagType(): string {\n    if (this.isButton) {\n      return 'button'\n    }\n    if (this.href?.length > 0) {\n      return 'a'\n    }\n    return 'div'\n  }\n\n  private getAttributes() {\n    const TagType = this.getTagType()\n    const baseAttributes =\n      TagType === 'button' ? { type: this.type, value: this.value } : { href: this.href, target: this.target }\n\n    return {\n      ...baseAttributes,\n      'aria-disabled': this.disabled ? 'true' : null,\n      'aria-current': this.isActive ? 'true' : null,\n      'data-toggle': this.isInteractive ? 'selection' : null,\n      'is-selected': this.selectedValue ? true : null,\n      ...this.inheritedAttributes,\n    }\n  }\n\n  private updateCheckboxSelectionState() {\n    if(this.hasRadios) return;\n\n    const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));\n\n    this.selectedValue = checkboxes.some(checkbox => checkbox.checked);\n    this.brDidSelect.emit({ selected: this.selectedValue });\n  }\n\n  private updateRadioSelectionState() {\n    if(!this.hasRadios) return;\n\n    const radios = Array.from(this.el.querySelectorAll('br-radio'));\n\n    this.selectedValue = radios.some(radio => radio.checked);\n    this.brDidSelect.emit({ selected: this.selectedValue });\n  }\n\n  // Função para verificar se o clique foi dentro do slot do item.\n  private isClickInsideInteractiveElement(target: HTMLElement): boolean {\n    const interactiveSelectors = 'br-checkbox, br-radio, br-input, br-button, br-select, br-textarea'\n    const interactiveElements = this.el.querySelectorAll(interactiveSelectors)\n    return Array.from(interactiveElements).some((el) => el.contains(target) || target === el)\n  }\n\n  private updateCheckboxes() {\n    const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'))\n\n    checkboxes.forEach((checkbox) => {\n      checkbox.checked = this.selectedValue\n    })\n  }\n\n  private readonly handleClick = (event: MouseEvent) => {\n    const clickedElement = event.target as HTMLElement\n\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n\n    if (this.hasRadios) {\n      return;\n    }\n\n    if (this.isButton) {\n      this.brDidClick.emit()\n    } else if (this.isInteractive && !this.isClickInsideInteractiveElement(clickedElement)) {\n      this.selectedValue = !this.selectedValue\n      this.brDidSelect.emit({ selected: this.selectedValue })\n      this.updateCheckboxes()\n    }\n\n    event.stopPropagation()\n  }\n\n  render() {\n    const TagType = this.getTagType()\n    const attributes = this.getAttributes()\n    const classList = this.getCssClassMap()\n    return (\n      <Host>\n        <TagType class={classList} {...attributes} onClick={this.handleClick}>\n          {this.hasSlotStart || this.hasSlotEnd ? (\n            <div class=\"row align-items-center\">\n              {this.hasSlotStart && (\n                <div class=\"col-auto\">\n                  <slot name=\"start\"></slot>\n                </div>\n              )}\n\n              <div class=\"col\">\n                <slot></slot>\n              </div>\n\n              {this.hasSlotEnd && (\n                <div class=\"col-auto\">\n                  <slot name=\"end\"></slot>\n                </div>\n              )}\n            </div>\n          ) : (\n            <slot></slot>\n          )}\n        </TagType>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/list/list.css

@@ -213,6 +213,10 @@ textarea {
   margin-right: var(--spacing-scale-half) !important;
 }
 
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
 .mr-2 {
   margin-right: var(--spacing-scale-base) !important;
 }
@@ -221,6 +225,10 @@ textarea {
   margin-right: calc(var(--spacing-scale-base) * -1) !important;
 }
 
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }

package/dist/collection/components/list/list.js

@@ -60,7 +60,7 @@ export class List {
         return null;
     }
     render() {
-        return (h(Host, { key: '278e1c81fca5d8789ee8d6c2bf8dfac723135246' }, h("div", Object.assign({ key: '2772b9ef20bb4537f2de28395261b2eb273dd396', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "list" }), this.renderHeader(), this.renderDivider(), h("slot", { key: '5fe5afdd6081641872b63d9a9a9a5909e72d6f0b' }))));
+        return (h(Host, { key: 'd78205f2956019aeb8f6b291f00d09b2b041074e' }, h("div", Object.assign({ key: 'dbc9f0b1cf3e4376feb5038cf38a4cb3b4566a94', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "list" }), this.renderHeader(), this.renderDivider(), h("slot", { key: 'e89409ff1fce9ee0622d5afbfa73d2d44540bb68' }))));
     }
     static get is() { return "br-list"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +91,8 @@ export class List {
                     "tags": [],
                     "text": "Define o cabe\u00E7alho para a lista."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "header",
                 "reflect": true
             },
@@ -108,6 +110,8 @@ export class List {
                     "tags": [],
                     "text": "Indica se a lista ser\u00E1 horizontal. Por padr\u00E3o, a lista \u00E9 vertical."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-horizontal",
                 "reflect": true,
                 "defaultValue": "false"
@@ -126,6 +130,8 @@ export class List {
                     "tags": [],
                     "text": "Indica que o divider para o t\u00EDtulo da lista estar\u00E1 oculto."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-header-divider",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../src/components/list/list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAClF,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;QAuDP,wBAAmB,GAAe,EAAE,CAAA;QAK3B,iBAAY,GAAG,GAAG,EAAE;;YACnC,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC7D,OAAO,CACL,WAAK,KAAK,EAAC,QAAQ;oBAChB,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,MAAM,CAAO;oBACrD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAChC,WAAK,KAAK,EAAC,QAAQ;wBACjB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACP,CACG,CACP,CAAA;YACH,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC,CAAA;;4BAzDgD,KAAK;iCAKA,KAAK;;IAE3D,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAA;YAEjE,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACzB,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAA;gBAC3C,IAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;oBAClD,MAAM,OAAO,GAAG,WAA0B,CAAA;oBAC1C,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,WAAW,CAAA;oBACvC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAA;gBAC7B,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAA;QAC7D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;QACvC,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,YAAY;SAC9B,CAAA;IACH,CAAC;IAIO,cAAc,CAAC,QAAgB;QACrC,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAA;IAC/D,CAAC;IAiBO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC9E,OAAO,WAAK,KAAK,EAAC,YAAY,GAAO,CAAA;QACvC,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0EAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAAM,IAAI,CAAC,mBAAmB,IAAE,IAAI,EAAC,MAAM;gBACzE,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,aAAa,EAAE;gBACrB,8DAAa,CACT,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, 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/list?tab=designer).\n *\n * @slot default - Slot padrão para inclusão dos itens da lista.\n * @slot header - Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo).\n */\n@Component({\n  tag: 'br-list',\n  styleUrl: 'list.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class List {\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: HTMLBrListElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o cabeçalho para a lista.\n   */\n  @Prop({ reflect: true }) header: string\n\n  /**\n   * Indica se a lista será horizontal. Por padrão, a lista é vertical.\n   */\n  @Prop({ reflect: true }) isHorizontal: boolean = false\n\n  /**\n   * Indica que o divider para o título da lista estará oculto.\n   */\n  @Prop({ reflect: true }) hideHeaderDivider: boolean = false\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  componentDidLoad() {\n    if (this.isHorizontal) {\n      const slotItems = Array.from(this.el.querySelectorAll('br-item'))\n\n      slotItems.forEach((item) => {\n        const nextElement = item.nextElementSibling\n        if (nextElement?.classList.contains('br-divider')) {\n          const divider = nextElement as HTMLElement\n          divider.style.borderWidth = '0 1px 0 0'\n          divider.style.width = '1px'\n        }\n      })\n    }\n\n    const items = Array.from(this.el.querySelectorAll('br-item'))\n    items.forEach((item) => {\n      item.setAttribute('role', 'listitem')\n    })\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-list': true,\n      horizontal: this.isHorizontal,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n  private readonly renderHeader = () => {\n    if (this.header?.length > 0 || this.hasSlotContent('header')) {\n      return (\n        <div class=\"header\">\n          {this.header && <div class=\"title\">{this.header}</div>}\n          {this.hasSlotContent('header') && (\n            <div class=\"d-flex\">\n              <slot name=\"header\"></slot>\n            </div>\n          )}\n        </div>\n      )\n    }\n    return null\n  }\n\n  private renderDivider() {\n    if ((this.header || this.hasSlotContent('header')) && !this.hideHeaderDivider) {\n      return <div class=\"br-divider\"></div>\n    }\n    return null\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"list\">\n          {this.renderHeader()}\n          {this.renderDivider()}\n          <slot></slot>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, 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/list?tab=designer).\n *\n * @slot default - Slot padrão para inclusão dos itens da lista.\n * @slot header - Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo).\n */\n@Component({\n  tag: 'br-list',\n  styleUrl: 'list.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class List {\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: HTMLBrListElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o cabeçalho para a lista.\n   */\n  @Prop({ reflect: true }) header: string\n\n  /**\n   * Indica se a lista será horizontal. Por padrão, a lista é vertical.\n   */\n  @Prop({ reflect: true }) isHorizontal: boolean = false\n\n  /**\n   * Indica que o divider para o título da lista estará oculto.\n   */\n  @Prop({ reflect: true }) hideHeaderDivider: boolean = false\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  componentDidLoad() {\n    if (this.isHorizontal) {\n      const slotItems = Array.from(this.el.querySelectorAll('br-item'))\n\n      slotItems.forEach((item) => {\n        const nextElement = item.nextElementSibling\n        if (nextElement?.classList.contains('br-divider')) {\n          const divider = nextElement as HTMLElement\n          divider.style.borderWidth = '0 1px 0 0'\n          divider.style.width = '1px'\n        }\n      })\n    }\n\n    const items = Array.from(this.el.querySelectorAll('br-item'))\n    items.forEach((item) => {\n      item.setAttribute('role', 'listitem')\n    })\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-list': true,\n      horizontal: this.isHorizontal,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n  private readonly renderHeader = () => {\n    if (this.header?.length > 0 || this.hasSlotContent('header')) {\n      return (\n        <div class=\"header\">\n          {this.header && <div class=\"title\">{this.header}</div>}\n          {this.hasSlotContent('header') && (\n            <div class=\"d-flex\">\n              <slot name=\"header\"></slot>\n            </div>\n          )}\n        </div>\n      )\n    }\n    return null\n  }\n\n  private renderDivider() {\n    if ((this.header || this.hasSlotContent('header')) && !this.hideHeaderDivider) {\n      return <div class=\"br-divider\"></div>\n    }\n    return null\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"list\">\n          {this.renderHeader()}\n          {this.renderDivider()}\n          <slot></slot>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/loading/loading.css

@@ -213,6 +213,10 @@ textarea {
   margin-right: var(--spacing-scale-half) !important;
 }
 
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
 .mr-2 {
   margin-right: var(--spacing-scale-base) !important;
 }
@@ -221,6 +225,10 @@ textarea {
   margin-right: calc(var(--spacing-scale-base) * -1) !important;
 }
 
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }

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

@@ -25,7 +25,7 @@ export class Loading {
         };
     }
     render() {
-        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)))));
+        return (h(Host, { key: '5ea8e7a75ee32ceb893327059b83a2a57a7f9548' }, 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"; }
@@ -56,6 +56,8 @@ export class Loading {
                     "tags": [],
                     "text": "Determina o tipo de indicador a ser exibido:\n- Se verdadeiro, exibir\u00E1 uma barra de progresso com a porcentagem de progresso.\n- Se falso, exibir\u00E1 um indicador de carregamento indeterminado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-progress",
                 "reflect": true,
                 "defaultValue": "false"
@@ -74,6 +76,8 @@ export class Loading {
                     "tags": [],
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "progress-percent",
                 "reflect": true
             },
@@ -91,6 +95,8 @@ export class Loading {
                     "tags": [],
                     "text": "Se verdadeiro, ajusta o tamanho do indicador de carregamento para o tamanho m\u00E9dio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-medium",
                 "reflect": true,
                 "defaultValue": "false"
@@ -109,6 +115,8 @@ export class Loading {
                     "tags": [],
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true
             }

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,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"]}
+{"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

@@ -213,6 +213,10 @@ textarea {
   margin-right: var(--spacing-scale-half) !important;
 }
 
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
 .mr-2 {
   margin-right: var(--spacing-scale-base) !important;
 }
@@ -221,6 +225,10 @@ textarea {
   margin-right: calc(var(--spacing-scale-base) * -1) !important;
 }
 
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }