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

package/dist/collection/components/switch/switch.js

@@ -14,7 +14,10 @@ export class Switch {
     constructor() {
         this.handleCheckedChange = (event) => {
             this._checkedValue = event.target.checked;
-            this.brDidCheckedChange.emit(this._checkedValue);
+            this.brDidSwitchToggle.emit(this._checkedValue);
+        };
+        this.handleClick = (event) => {
+            event.stopPropagation();
         };
         this.inheritedAttributes = {};
         this.disabled = false;
@@ -44,7 +47,7 @@ export class Switch {
      */
     async toggleChecked() {
         this._checkedValue = !this._checkedValue;
-        this.brDidCheckedChange.emit(this._checkedValue);
+        this.brDidSwitchToggle.emit(this._checkedValue);
     }
     getCssClassMap() {
         return {
@@ -57,7 +60,7 @@ export class Switch {
         };
     }
     render() {
-        return (h(Host, { key: '52838e1fe630318fe34af78b47a42781646f291c' }, h("div", Object.assign({ key: 'bc2c656294f72bee0d9778791ab9a6b00cea7c9e', class: this.getCssClassMap() }, this.inheritedAttributes), h("input", { key: '8ac78e3880ce376faa5e224d0fdab9602104e9ef', id: this.customId, type: "checkbox", name: this.name, checked: this._checkedValue, disabled: this.disabled, role: "switch", "aria-checked": this._checkedValue.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: this.handleCheckedChange }), h("label", { key: '4e85a4b6d51059a4a899dc24bb7a3f181e99db25', htmlFor: this.customId }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: '30b401aed4ede6e5159240b8337d429d6a7f8aff', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
+        return (h(Host, { key: '0c550accde86f8f6bf23d0c13a0abaeca6422123' }, h("div", Object.assign({ key: 'c63172ea2696799e3f3ae55a98598341785bfcce', class: this.getCssClassMap() }, this.inheritedAttributes), h("input", { key: 'ac86ee46e8ac44de1b9a70bd335822369eabf417', id: this.customId, type: "checkbox", name: this.name, checked: this._checkedValue, disabled: this.disabled, role: "switch", "aria-checked": this._checkedValue.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: this.handleCheckedChange, onClick: this.handleClick }), h("label", { key: '637d8dbdd7ffc4618a3b5627691c767d7a542134', htmlFor: this.customId }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: 'c201c7a56eee2bce5c41c79bf6df84fb493fe56a', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
     }
     static get is() { return "br-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -88,6 +91,8 @@ export class Switch {
                     "tags": [],
                     "text": "Desativa o switch, tornando-o n\u00E3o interativo."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -106,6 +111,8 @@ export class Switch {
                     "tags": [],
                     "text": "Define o estado de sele\u00E7\u00E3o do checkbox.\nSe definido como verdadeiro, o checkbox estar\u00E1 marcado. Caso contr\u00E1rio, estar\u00E1 desmarcado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
@@ -124,6 +131,8 @@ export class Switch {
                     "tags": [],
                     "text": "Identificador \u00FAnico do switch.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "id",
                 "reflect": true,
                 "defaultValue": "`br-input-${uuidv4()}`"
@@ -142,6 +151,8 @@ export class Switch {
                     "tags": [],
                     "text": "Texto descritivo.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade ser\u00E1 ignorado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -159,6 +170,8 @@ export class Switch {
                     "tags": [],
                     "text": "Posi\u00E7\u00E3o do r\u00F3tulo em rela\u00E7\u00E3o ao switch."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-position",
                 "reflect": true,
                 "defaultValue": "'left'"
@@ -177,6 +190,8 @@ export class Switch {
                     "tags": [],
                     "text": "Texto exibido quando o switch est\u00E1 ativado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-on",
                 "reflect": true
             },
@@ -194,6 +209,8 @@ export class Switch {
                     "tags": [],
                     "text": "Texto exibido quando o switch est\u00E1 desativado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-off",
                 "reflect": true
             },
@@ -211,6 +228,8 @@ export class Switch {
                     "tags": [],
                     "text": "Adiciona um \u00EDcone ao switch para indicar a mudan\u00E7a de estado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "has-icon",
                 "reflect": true,
                 "defaultValue": "false"
@@ -229,6 +248,8 @@ export class Switch {
                     "tags": [],
                     "text": "Define o nome do switch, que \u00E9 utilizado para agrupar switches em formul\u00E1rios e identificar o campo.\nO valor \u00E9 obrigat\u00F3rio e deve ser fornecido para garantir o correto funcionamento em formul\u00E1rios."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -246,6 +267,8 @@ export class Switch {
                     "tags": [],
                     "text": "Define o valor associado ao switch quando ele faz parte de um formul\u00E1rio nativo (`<form>`).\nEsse valor \u00E9 enviado com o formul\u00E1rio quando o switch est\u00E1 selecionado.\n**Nota:** Esta propriedade n\u00E3o deve ser utilizada para determinar se o switch est\u00E1 selecionado; para verificar o estado de sele\u00E7\u00E3o, use a propriedade `checked`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             },
@@ -263,6 +286,8 @@ export class Switch {
                     "tags": [],
                     "text": "O ajuste da densidade consiste em aumentar ou reduzir a \u00E1rea de intera\u00E7\u00E3o do switch. Quanto menor for a densidade, maior a \u00E1rea de intera\u00E7\u00E3o."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "density",
                 "reflect": true,
                 "defaultValue": "'medium'"
@@ -277,8 +302,8 @@ export class Switch {
     }
     static get events() {
         return [{
-                "method": "brDidCheckedChange",
-                "name": "brDidCheckedChange",
+                "method": "brDidSwitchToggle",
+                "name": "brDidSwitchToggle",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\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/switch?tab=designer).\n *\n * @slot default - Descreve o que o switch faz quando a alternância estiver ativada. A label passada por slot tem precedência sobre a propriedade 'label'.\n */\n@Component({\n  tag: 'br-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\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: HTMLBrSwitchElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Desativa o switch, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define o estado de seleção do checkbox.\n   * Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.\n   */\n  @Prop({ reflect: true }) checked: boolean = false\n\n  /**\n   * Identificador único do switch.\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   * Texto descritivo.\n   * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n   */\n  @Prop() label: string\n\n  /**\n   * Posição do rótulo em relação ao switch.\n   */\n  @Prop({ reflect: true }) labelPosition: 'right' | 'left' | 'top' = 'left'\n\n  /**\n   * Texto exibido quando o switch está ativado.\n   */\n  @Prop({ reflect: true }) labelOn: string\n\n  /**\n   * Texto exibido quando o switch está desativado.\n   */\n  @Prop({ reflect: true }) labelOff: string\n\n  /**\n   * Adiciona um ícone ao switch para indicar a mudança de estado.\n   */\n  @Prop({ reflect: true }) hasIcon: boolean = false\n\n  /**\n   * Define o nome do switch, que é utilizado para agrupar switches em formulários e identificar o campo.\n   * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n   */\n  @Prop({ reflect: true }) name: string\n\n  /**\n   * Define o valor associado ao switch quando ele faz parte de um formulário nativo (`<form>`).\n   * Esse valor é enviado com o formulário quando o switch está selecionado.\n   * **Nota:** Esta propriedade não deve ser utilizada para determinar se o switch está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n   */\n  @Prop({ reflect: true }) value: string\n\n  /** O ajuste da densidade consiste em aumentar ou reduzir a área de interação do switch. Quanto menor for a densidade, maior a área de interação. */\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() _slotDefault: boolean = false\n\n  @State() _checkedValue: boolean\n\n  componentWillLoad() {\n    this._hasSlotContentDefault()\n    this._checkedValue = this.checked\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Disparado depois que o valor do `checked` foi alterado\n   */\n  @Event() brDidCheckedChange: EventEmitter<boolean>\n  private _hasSlotContentDefault(): any {\n    this._slotDefault = this.el.innerHTML !== ''\n  }\n\n  private readonly handleCheckedChange = (event: Event) => {\n    this._checkedValue = (event.target as HTMLInputElement).checked\n    this.brDidCheckedChange.emit(this._checkedValue)\n  }\n\n  /**\n   * Inverte o valor da prop `checked`\n   */\n  @Method()\n  async toggleChecked() {\n    this._checkedValue = !this._checkedValue\n    this.brDidCheckedChange.emit(this._checkedValue)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-switch': true,\n      icon: this.hasIcon,\n      top: this.labelPosition === 'top',\n      right: this.labelPosition === 'right',\n      large: this.density === 'large',\n      small: this.density === 'small',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          <input\n            id={this.customId}\n            type=\"checkbox\"\n            name={this.name}\n            checked={this._checkedValue}\n            disabled={this.disabled}\n            role=\"switch\"\n            aria-checked={this._checkedValue.toString()}\n            aria-disabled={this.disabled ? 'true' : null}\n            onChange={this.handleCheckedChange}\n          />\n          <label htmlFor={this.customId}>{this._slotDefault ? <slot></slot> : this.label}</label>\n          {this.labelOn && this.labelOff && (\n            <div class=\"switch-data\" data-enabled={this.labelOn} data-disabled={this.labelOff}></div>\n          )}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core'\nimport { v4 as uuidv4 } from 'uuid'\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/switch?tab=designer).\n *\n * @slot default - Descreve o que o switch faz quando a alternância estiver ativada. A label passada por slot tem precedência sobre a propriedade 'label'.\n */\n@Component({\n  tag: 'br-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\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: HTMLBrSwitchElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Desativa o switch, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Define o estado de seleção do checkbox.\n   * Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.\n   */\n  @Prop({ reflect: true }) checked: boolean = false\n\n  /**\n   * Identificador único do switch.\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   * Texto descritivo.\n   * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n   */\n  @Prop() label: string\n\n  /**\n   * Posição do rótulo em relação ao switch.\n   */\n  @Prop({ reflect: true }) labelPosition: 'right' | 'left' | 'top' = 'left'\n\n  /**\n   * Texto exibido quando o switch está ativado.\n   */\n  @Prop({ reflect: true }) labelOn: string\n\n  /**\n   * Texto exibido quando o switch está desativado.\n   */\n  @Prop({ reflect: true }) labelOff: string\n\n  /**\n   * Adiciona um ícone ao switch para indicar a mudança de estado.\n   */\n  @Prop({ reflect: true }) hasIcon: boolean = false\n\n  /**\n   * Define o nome do switch, que é utilizado para agrupar switches em formulários e identificar o campo.\n   * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n   */\n  @Prop({ reflect: true }) name: string\n\n  /**\n   * Define o valor associado ao switch quando ele faz parte de um formulário nativo (`<form>`).\n   * Esse valor é enviado com o formulário quando o switch está selecionado.\n   * **Nota:** Esta propriedade não deve ser utilizada para determinar se o switch está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n   */\n  @Prop({ reflect: true }) value: string\n\n  /** O ajuste da densidade consiste em aumentar ou reduzir a área de interação do switch. Quanto menor for a densidade, maior a área de interação. */\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() _slotDefault: boolean = false\n\n  @State() _checkedValue: boolean\n\n  componentWillLoad() {\n    this._hasSlotContentDefault()\n    this._checkedValue = this.checked\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Disparado depois que o valor do `checked` foi alterado\n   */\n  @Event() brDidSwitchToggle: EventEmitter<boolean>\n  private _hasSlotContentDefault(): any {\n    this._slotDefault = this.el.innerHTML !== ''\n  }\n\n  private readonly handleCheckedChange = (event: Event) => {\n    this._checkedValue = (event.target as HTMLInputElement).checked\n    this.brDidSwitchToggle.emit(this._checkedValue)\n  }\n\n  private readonly handleClick = (event: Event) => {\n    event.stopPropagation();\n  }\n\n  /**\n   * Inverte o valor da prop `checked`\n   */\n  @Method()\n  async toggleChecked() {\n    this._checkedValue = !this._checkedValue\n    this.brDidSwitchToggle.emit(this._checkedValue)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-switch': true,\n      icon: this.hasIcon,\n      top: this.labelPosition === 'top',\n      right: this.labelPosition === 'right',\n      large: this.density === 'large',\n      small: this.density === 'small',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          <input\n            id={this.customId}\n            type=\"checkbox\"\n            name={this.name}\n            checked={this._checkedValue}\n            disabled={this.disabled}\n            role=\"switch\"\n            aria-checked={this._checkedValue.toString()}\n            aria-disabled={this.disabled ? 'true' : null}\n            onChange={this.handleCheckedChange}\n            onClick={this.handleClick}\n          />\n          <label htmlFor={this.customId}>{this._slotDefault ? <slot></slot> : this.label}</label>\n          {this.labelOn && this.labelOff && (\n            <div class=\"switch-data\" data-enabled={this.labelOn} data-disabled={this.labelOff}></div>\n          )}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/tag/tag.css

@@ -34,6 +34,7 @@ img {
 
 button,
 input,
+select,
 textarea {
   font-family: inherit;
   font-size: 100%;
@@ -46,7 +47,8 @@ input {
   overflow: visible;
 }
 
-button {
+button,
+select {
   text-transform: none;
 }
 
@@ -211,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;
 }
@@ -219,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/tag/tag.js

@@ -64,7 +64,7 @@ export class Tag {
         return (h("span", { class: "tag-spacing-status", id: "interactivetag1", "aria-label": this.label }, this.label));
     }
     render() {
-        return (h(Host, { key: '2ae1b9e249097b66fb02e0c903e294f73aad6bc0' }, h("div", { key: '65f39b80147b977231e8bb9566f2aa1797597646', class: "tag-position" }, h("span", Object.assign({ key: '452777774bfdba4a5eed2af6bb429f02f8dd9ed3', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "alert", "aria-live": "assertive" }), this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: 'c3cad61c4e5d7b683c9b4a6b66fbf0b62a56ac8a' })), this.renderStatusLabel())));
+        return (h(Host, { key: '4e078895032e633b6c111bd633222938e6b00a95' }, h("div", { key: '3dd682ccfe5eb9533ad82f9d1fd39a2b1357774f', class: "tag-position" }, h("span", Object.assign({ key: '09f68d7a0a6820f590cfdb04bc75956ee276f426', class: this.getCssClassMap() }, this.inheritedAttributes, { role: "alert", "aria-live": "assertive" }), this.renderIcon(), this.renderLabel(), this.renderCloseButton(), h("slot", { key: '04a14d8b19926d9d18f3a4f2abe66061c85f5446' })), this.renderStatusLabel())));
     }
     static get is() { return "br-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -95,6 +95,8 @@ export class Tag {
                     "tags": [],
                     "text": "A propriedade 'label' \u00E9 uma string que representa o texto a ser exibido no componente.\nEla \u00E9 refletida no DOM, permitindo que altera\u00E7\u00F5es no valor sejam refletidas no elemento HTML correspondente."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true,
                 "defaultValue": "''"
@@ -113,6 +115,8 @@ export class Tag {
                     "tags": [],
                     "text": "A propriedade 'iconName' define o nome do \u00EDcone que ser\u00E1 exibido ao lado do texto.\nO valor padr\u00E3o \u00E9 'fa-solid:car', que corresponde a um \u00EDcone de carro da biblioteca Font Awesome."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon-name",
                 "reflect": true,
                 "defaultValue": "''"
@@ -131,6 +135,8 @@ export class Tag {
                     "tags": [],
                     "text": "A propriedade 'color' permite definir a cor do componente.\nAceita valores como 'red', 'blue', entre outros, e \u00E9 refletida no DOM."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true,
                 "defaultValue": "''"
@@ -149,6 +155,8 @@ export class Tag {
                     "tags": [],
                     "text": "A propriedade 'density' permite definir a densidade do componente.\nAceita valores como 'small', 'medium' e 'large', e \u00E9 refletida no DOM."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "density",
                 "reflect": true,
                 "defaultValue": "'small'"
@@ -167,6 +175,8 @@ export class Tag {
                     "tags": [],
                     "text": "A propriedade 'shape' define o formato do componente.\nValores poss\u00EDveis:\n- 'circle': Componente com formato circular.\n- 'rounded': Componente com bordas arredondadas.\n- 'default': Componente com formato padr\u00E3o."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "shape",
                 "reflect": true,
                 "defaultValue": "'default'"
@@ -185,6 +195,8 @@ export class Tag {
                     "tags": [],
                     "text": "A propriedade 'status' \u00E9 um booleano que indica se o status deve ser exibido.\nSe definido como true, o status ser\u00E1 mostrado ao lado do texto."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": true,
                 "defaultValue": "false"
@@ -203,6 +215,8 @@ export class Tag {
                     "tags": [],
                     "text": "A propriedade 'interaction' \u00E9 um booleano que indica se a intera\u00E7\u00E3o deve ser habilitada.\nSe definido como true, o componente permitir\u00E1 intera\u00E7\u00F5es do usu\u00E1rio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "interaction",
                 "reflect": true,
                 "defaultValue": "false"
@@ -221,6 +235,8 @@ export class Tag {
                     "tags": [],
                     "text": "A propriedade 'disabled' \u00E9 um booleano que indica se o componente deve estar desabilitado.\nSe definido como true, o componente n\u00E3o permitir\u00E1 intera\u00E7\u00F5es do usu\u00E1rio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\n\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/tag?tab=designer).\n *\n * @slot default - Slot utilizado para inserir conteúdo adicional na tag, como texto ou elementos HTML extras.\n */\n@Component({\n  tag: 'br-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Tag {\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: HTMLBrTagElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) label: string = ''\n\n  /**\n   * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n   * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n   */\n  @Prop({ reflect: true }) iconName: string = ''\n\n  /**\n   * A propriedade 'color' permite definir a cor do componente.\n   * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) color: string = ''\n\n  /**\n   * A propriedade 'density' permite definir a densidade do componente.\n   * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) density: 'small' | 'medium' | 'large' = 'small'\n\n  /**\n   * A propriedade 'shape' define o formato do componente.\n   * Valores possíveis:\n   * - 'circle': Componente com formato circular.\n   * - 'rounded': Componente com bordas arredondadas.\n   * - 'default': Componente com formato padrão.\n   */\n  @Prop({ reflect: true }) shape: 'circle' | 'rounded' | 'default' = 'default'\n\n  /**\n   * A propriedade 'status' é um booleano que indica se o status deve ser exibido.\n   * Se definido como true, o status será mostrado ao lado do texto.\n   */\n  @Prop({ reflect: true }) status: boolean = false\n\n  /**\n   * A propriedade 'interaction' é um booleano que indica se a interação deve ser habilitada.\n   * Se definido como true, o componente permitirá interações do usuário.\n   */\n  @Prop({ reflect: true }) interaction: boolean = false\n\n  /**\n   * A propriedade 'disabled' é um booleano que indica se o componente deve estar desabilitado.\n   * Se definido como true, o componente não permitirá interações do usuário.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  @State() stateIconName: string = 'fa-solid:car'\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  private getCssClassMap(): CssClassMap {\n    const classes: CssClassMap = {\n      'br-tag': true,\n      interaction: this.interaction,\n      [this.color]: this.color !== '',\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      count: this.shape === 'rounded' ? true : false,\n      icon: this.shape === 'circle' ? true : false,\n      status: this.status,\n    }\n\n    return classes\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderIcon() {\n    if (this.iconName.trim().length === 0) return null\n    return <br-icon style={{ fontSize: 'var(--icon-size-base)' }} icon-name={this.iconName} aria-hidden=\"true\" />\n  }\n\n  private renderLabel() {\n    if (this.shape === 'circle' || this.status) return null\n    return (\n      <span id=\"interactivetag1\" aria-label={this.label}>\n        {this.label}\n      </span>\n    )\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        type=\"button\"\n        shape=\"circle\"\n        emphasis={!this.interaction ? 'tertiary' : 'primary'}\n        aria-label=\"Fechar\"\n        colorMode={!this.interaction ? 'dark' : null}\n        aria-describedby=\"interactivetag1\"\n        onClick={this.handleClose}\n        disabled={this.disabled}\n      >\n        <br-icon icon-name=\"fa-solid:times\"></br-icon>\n      </br-button>\n    )\n  }\n\n  private renderStatusLabel() {\n    if (!this.status) return null\n    return (\n      <span class=\"tag-spacing-status\" id=\"interactivetag1\" aria-label={this.label}>\n        {this.label}\n      </span>\n    )\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"tag-position\">\n          <span class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"alert\" aria-live=\"assertive\">\n            {this.renderIcon()}\n            {this.renderLabel()}\n            {this.renderCloseButton()}\n            <slot></slot>\n          </span>\n          {this.renderStatusLabel()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core'\n\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/tag?tab=designer).\n *\n * @slot default - Slot utilizado para inserir conteúdo adicional na tag, como texto ou elementos HTML extras.\n */\n@Component({\n  tag: 'br-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Tag {\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: HTMLBrTagElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) label: string = ''\n\n  /**\n   * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n   * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n   */\n  @Prop({ reflect: true }) iconName: string = ''\n\n  /**\n   * A propriedade 'color' permite definir a cor do componente.\n   * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) color: string = ''\n\n  /**\n   * A propriedade 'density' permite definir a densidade do componente.\n   * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) density: 'small' | 'medium' | 'large' = 'small'\n\n  /**\n   * A propriedade 'shape' define o formato do componente.\n   * Valores possíveis:\n   * - 'circle': Componente com formato circular.\n   * - 'rounded': Componente com bordas arredondadas.\n   * - 'default': Componente com formato padrão.\n   */\n  @Prop({ reflect: true }) shape: 'circle' | 'rounded' | 'default' = 'default'\n\n  /**\n   * A propriedade 'status' é um booleano que indica se o status deve ser exibido.\n   * Se definido como true, o status será mostrado ao lado do texto.\n   */\n  @Prop({ reflect: true }) status: boolean = false\n\n  /**\n   * A propriedade 'interaction' é um booleano que indica se a interação deve ser habilitada.\n   * Se definido como true, o componente permitirá interações do usuário.\n   */\n  @Prop({ reflect: true }) interaction: boolean = false\n\n  /**\n   * A propriedade 'disabled' é um booleano que indica se o componente deve estar desabilitado.\n   * Se definido como true, o componente não permitirá interações do usuário.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  @State() stateIconName: string = 'fa-solid:car'\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  private getCssClassMap(): CssClassMap {\n    const classes: CssClassMap = {\n      'br-tag': true,\n      interaction: this.interaction,\n      [this.color]: this.color !== '',\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      count: this.shape === 'rounded' ? true : false,\n      icon: this.shape === 'circle' ? true : false,\n      status: this.status,\n    }\n\n    return classes\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  private renderIcon() {\n    if (this.iconName.trim().length === 0) return null\n    return <br-icon style={{ fontSize: 'var(--icon-size-base)' }} icon-name={this.iconName} aria-hidden=\"true\" />\n  }\n\n  private renderLabel() {\n    if (this.shape === 'circle' || this.status) return null\n    return (\n      <span id=\"interactivetag1\" aria-label={this.label}>\n        {this.label}\n      </span>\n    )\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        type=\"button\"\n        shape=\"circle\"\n        emphasis={!this.interaction ? 'tertiary' : 'primary'}\n        aria-label=\"Fechar\"\n        colorMode={!this.interaction ? 'dark' : null}\n        aria-describedby=\"interactivetag1\"\n        onClick={this.handleClose}\n        disabled={this.disabled}\n      >\n        <br-icon icon-name=\"fa-solid:times\"></br-icon>\n      </br-button>\n    )\n  }\n\n  private renderStatusLabel() {\n    if (!this.status) return null\n    return (\n      <span class=\"tag-spacing-status\" id=\"interactivetag1\" aria-label={this.label}>\n        {this.label}\n      </span>\n    )\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"tag-position\">\n          <span class={this.getCssClassMap()} {...this.inheritedAttributes} role=\"alert\" aria-live=\"assertive\">\n            {this.renderIcon()}\n            {this.renderLabel()}\n            {this.renderCloseButton()}\n            <slot></slot>\n          </span>\n          {this.renderStatusLabel()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/textarea/textarea.css

@@ -34,6 +34,7 @@ img {
 
 button,
 input,
+select,
 textarea {
   font-family: inherit;
   font-size: 100%;
@@ -46,7 +47,8 @@ input {
   overflow: visible;
 }
 
-button {
+button,
+select {
   text-transform: none;
 }
 
@@ -211,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;
 }
@@ -219,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/textarea/textarea.js

@@ -76,7 +76,7 @@ export class Textarea {
     render() {
         const caracteresRestantes = this.maxlength - this.currentLength;
         const mostrarLimite = this.currentLength > 0;
-        return (h(Host, { key: '8bb5ea9efb0e2ee82d1c4074d7f9a8332fcfb635' }, h("div", Object.assign({ key: 'cedcc004557860b4b2724c5180f2c012a109fcc1', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: '3998a88b69f3dddc63ea41d08db7de96af28d25d', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: '8f94f9c2aaf2758e5ee9be6938be50ce8c82db7c', class: this.isInline ? 'col' : '' }, h("textarea", Object.assign({ key: 'a642046a4dd9da93ac051eb6bf0ecfe711433680', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: 'b859da1b3f48ed513e32374251a31ad3fc0f108f', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '0aaebed51ac98b00c4fca6e7d857664d117b0d74' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("slot", { key: 'e24c4673cc638ce9e37acf05d2d80fea32b7f8fa' }))))));
+        return (h(Host, { key: '9bfb06666d1c2b474e44b9a8c5ee68a1b435199f' }, h("div", Object.assign({ key: '977244962b6d2423ace8ec5f5fff9a234d238c3b', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: 'b7568e2fcdc00447862e96287989e05afa8ea22f', class: this.isInline ? 'row' : '' }, this.isInline ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.customId }, this.label))) : (h("label", { htmlFor: this.customId }, this.label)), h("div", { key: '56ef7055c6a4f48e50bbd359f0c1b70c70a5b310', class: this.isInline ? 'col' : '' }, h("textarea", Object.assign({ key: 'e10d4ea67079a82976195b1ee931d132ad699b38', id: this.customId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: 'dfb7790e95c1ec6c3f4202ebe6a56fd52c8cc037', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: '28e5410a07385118ffcbeb82c5a9a3906e8c199d' }, mostrarLimite ? (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres")) : (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres"))))), h("slot", { key: '6a6ff1012fdd6fa62b3a9175220b466db904a148' }))))));
     }
     static get is() { return "br-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -107,6 +107,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Valor atual do textarea. Este valor pode ser alterado programaticamente."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             },
@@ -124,6 +126,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Texto do r\u00F3tulo associado ao textarea. Este r\u00F3tulo \u00E9 exibido acima do campo de entrada."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true
             },
@@ -141,6 +145,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Texto exibido quando o textarea est\u00E1 vazio. Ajuda a guiar o usu\u00E1rio sobre o que deve ser inserido."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -158,6 +164,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Indica se o textarea est\u00E1 desabilitado. Quando verdadeiro, o usu\u00E1rio n\u00E3o pode interagir com o campo."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -176,6 +184,8 @@ export class Textarea {
                     "tags": [],
                     "text": "N\u00FAmero m\u00E1ximo de caracteres permitidos no textarea. Se definido como 0, n\u00E3o h\u00E1 limite."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "maxlength",
                 "reflect": true,
                 "defaultValue": "0"
@@ -194,6 +204,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "state",
                 "reflect": true
             },
@@ -211,6 +223,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "density",
                 "reflect": true,
                 "defaultValue": "'medium'"
@@ -229,6 +243,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Se verdadeiro, o r\u00F3tulo e o input estar\u00E3o na mesma linha (layout inline)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-inline",
                 "reflect": true,
                 "defaultValue": "false"
@@ -247,6 +263,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Identificador \u00FAnico do textarea.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "id",
                 "reflect": true,
                 "defaultValue": "`br-textarea-${uuidv4()}`"

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core'\n\nimport { v4 as uuidv4 } from 'uuid'\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/textarea?tab=designer).\n *\n * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.\n */\n@Component({\n  tag: 'br-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el: HTMLBrTextareaElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Valor atual do textarea. Este valor pode ser alterado programaticamente.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string\n\n  /**\n   * Texto do rótulo associado ao textarea. Este rótulo é exibido acima do campo de entrada.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Texto exibido quando o textarea está vazio. Ajuda a guiar o usuário sobre o que deve ser inserido.\n   */\n  @Prop({ reflect: true }) placeholder: string\n\n  /**\n   * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\n   */\n  @Prop({ reflect: true }) maxlength: number = 0\n\n  /**\n   * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.\n   */\n  @Prop({ reflect: true }) state: 'danger' | 'success' | 'warning'\n  /**\n   * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n   */\n  @Prop({ reflect: true }) density: 'small' | 'medium' | 'large' = 'medium'\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   * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n   */\n  @State() currentLength: number\n\n  /**\n   * Identificador único do textarea.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-textarea-${uuidv4()}`\n\n  componentWillLoad() {\n    this.currentLength = this.value?.length\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.currentLength = this.value?.length\n  }\n\n  /**\n   * Manipula a mudança de valor do textarea. Atualiza o valor e emite um evento de mudança.\n   * @param event - O evento de entrada do textarea.\n   */\n  private readonly handleChange = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement\n    this.value = textarea.value\n    this.currentLength = this.value?.length\n    this.emitValueChange()\n  }\n\n  /**\n   * Define um novo valor para o textarea.\n   * @param newValue - O novo valor a ser definido.\n   */\n  @Method()\n  async setValue(newValue: string) {\n    this.value = newValue\n    this.currentLength = this.value?.length\n    this.emitValueChange()\n  }\n\n  private emitValueChange() {\n    const changeEvent = new CustomEvent('valueChange', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    })\n    this.el.dispatchEvent(changeEvent)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-textarea': true,\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      warning: this.state === 'warning',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    const caracteresRestantes: number = this.maxlength - this.currentLength\n    const mostrarLimite = this.currentLength > 0\n\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          <div class={this.isInline ? 'row' : ''}>\n            {this.isInline ? (\n              <div class=\"col-auto pt-half\">\n                <label htmlFor={this.customId}>{this.label}</label>\n              </div>\n            ) : (\n              <label htmlFor={this.customId}>{this.label}</label>\n            )}\n            <div class={this.isInline ? 'col' : ''}>\n              <textarea\n                id={this.customId}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                onInput={this.handleChange}\n                {...(this.maxlength > 0 ? { maxLength: this.maxlength } : {})}\n              ></textarea>\n              <div class=\"text-base mt-1\">\n                {this.maxlength > 0 && (\n                  <div>\n                    {mostrarLimite ? (\n                      <span class=\"restantes\" aria-live=\"polite\" role=\"status\" id=\"limitmax\">\n                        Restam <strong>{caracteresRestantes}</strong> caracteres\n                      </span>\n                    ) : (\n                      <span class=\"limit\" aria-live=\"polite\">\n                        Limite máximo de <strong>{this.maxlength}</strong> caracteres\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, h, Host, Method, Prop, State, Watch } 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 * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/textarea?tab=designer).\n *\n * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.\n */\n@Component({\n  tag: 'br-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el: HTMLBrTextareaElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Valor atual do textarea. Este valor pode ser alterado programaticamente.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string\n\n  /**\n   * Texto do rótulo associado ao textarea. Este rótulo é exibido acima do campo de entrada.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Texto exibido quando o textarea está vazio. Ajuda a guiar o usuário sobre o que deve ser inserido.\n   */\n  @Prop({ reflect: true }) placeholder: string\n\n  /**\n   * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\n   */\n  @Prop({ reflect: true }) maxlength: number = 0\n\n  /**\n   * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.\n   */\n  @Prop({ reflect: true }) state: 'danger' | 'success' | 'warning'\n  /**\n   * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n   */\n  @Prop({ reflect: true }) density: 'small' | 'medium' | 'large' = 'medium'\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   * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n   */\n  @State() currentLength: number\n\n  /**\n   * Identificador único do textarea.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string = `br-textarea-${uuidv4()}`\n\n  componentWillLoad() {\n    this.currentLength = this.value?.length\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.currentLength = this.value?.length\n  }\n\n  /**\n   * Manipula a mudança de valor do textarea. Atualiza o valor e emite um evento de mudança.\n   * @param event - O evento de entrada do textarea.\n   */\n  private readonly handleChange = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement\n    this.value = textarea.value\n    this.currentLength = this.value?.length\n    this.emitValueChange()\n  }\n\n  /**\n   * Define um novo valor para o textarea.\n   * @param newValue - O novo valor a ser definido.\n   */\n  @Method()\n  async setValue(newValue: string) {\n    this.value = newValue\n    this.currentLength = this.value?.length\n    this.emitValueChange()\n  }\n\n  private emitValueChange() {\n    const changeEvent = new CustomEvent('valueChange', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    })\n    this.el.dispatchEvent(changeEvent)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-textarea': true,\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      warning: this.state === 'warning',\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    const caracteresRestantes: number = this.maxlength - this.currentLength\n    const mostrarLimite = this.currentLength > 0\n\n    return (\n      <Host>\n        <div class={this.getCssClassMap()} {...this.inheritedAttributes}>\n          <div class={this.isInline ? 'row' : ''}>\n            {this.isInline ? (\n              <div class=\"col-auto pt-half\">\n                <label htmlFor={this.customId}>{this.label}</label>\n              </div>\n            ) : (\n              <label htmlFor={this.customId}>{this.label}</label>\n            )}\n            <div class={this.isInline ? 'col' : ''}>\n              <textarea\n                id={this.customId}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                onInput={this.handleChange}\n                {...(this.maxlength > 0 ? { maxLength: this.maxlength } : {})}\n              ></textarea>\n              <div class=\"text-base mt-1\">\n                {this.maxlength > 0 && (\n                  <div>\n                    {mostrarLimite ? (\n                      <span class=\"restantes\" aria-live=\"polite\" role=\"status\" id=\"limitmax\">\n                        Restam <strong>{caracteresRestantes}</strong> caracteres\n                      </span>\n                    ) : (\n                      <span class=\"limit\" aria-live=\"polite\">\n                        Limite máximo de <strong>{this.maxlength}</strong> caracteres\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/upload/upload.css

@@ -34,6 +34,7 @@ img {
 
 button,
 input,
+select,
 textarea {
   font-family: inherit;
   font-size: 100%;
@@ -46,7 +47,8 @@ input {
   overflow: visible;
 }
 
-button {
+button,
+select {
   text-transform: none;
 }
 
@@ -211,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;
 }
@@ -219,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/upload/upload.js

@@ -133,7 +133,7 @@ export class Upload {
         fileInput.click();
     }
     render() {
-        return (h(Host, { key: 'aab6988f0879747fdb594e3810704e497718635c' }, h("div", { key: '274726af605123e4be46cd995b295c8eb147cbf4', class: this.getCssClassMap() }, h("label", { key: '40753e4671f13bd2daab5c823284e64dd104214b', class: "upload-label", form: "single-file" }, h("span", { key: 'd49a6054c231e556bb40ee4c8b06f0c8ff950507' }, this.label)), h("button", { key: 'dafa2d9c447bb65f01e9b5dbd81f63dde33d38d2', class: "upload-button", type: "button", "aria-hidden": "true", tabIndex: this.disabled ? -1 : 0, disabled: this.disabled, "aria-label": "Selecionar arquivo para upload", onClick: () => this.handleFileSelection(), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event) }, h("br-icon", { key: '22b4bf3b4618ecdff30cdcb8db2185db6da0af5f', "icon-name": "fa-solid:upload", height: "16", "aria-hidden": "true" }), h("span", { key: 'f8a3fbc9629d7a8cd85eb434d922356b5c61ab22' }, "Selecione o arquivo")), h("input", Object.assign({ key: '83b65e6e1a55db70d42c6075bea037d58b86c457', class: "upload-input", id: "single-file", type: "file", "aria-hidden": "null", "aria-label": "enviar arquivo", onChange: ($event) => this.onInputChange($event.target.files) }, this.inheritedAttributes, { multiple: this.multiple, disabled: this.disabled, accept: this.accept })), h("div", { key: '0a7a7f508c8379986a56d1a2aa5773b0f0709c17', id: "list-files", class: "upload-list" }, this.filesSelected ? this.renderFilesUploaded() : null))));
+        return (h(Host, { key: '02b2a02a1e5a01541f274af27a252df11b997533' }, h("div", { key: '18dc309308da75b0b3c83d0c1064bb78eb539aee', class: this.getCssClassMap() }, h("label", { key: 'c8cd9c1f4ab8af73f3caccdc72af81ba9c9b5845', class: "upload-label", form: "single-file" }, h("span", { key: '1ce6051408c897ca48fb782c2da53a21658c6c1e' }, this.label)), h("button", { key: 'c0ab9d74e4f4182dacac708ec29f024fcfef9f24', class: "upload-button", type: "button", "aria-hidden": "true", tabIndex: this.disabled ? -1 : 0, disabled: this.disabled, "aria-label": "Selecionar arquivo para upload", onClick: () => this.handleFileSelection(), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event) }, h("br-icon", { key: '9d18e764dd75896fc54ad49214bc7b6697a84087', "icon-name": "fa-solid:upload", height: "16", "aria-hidden": "true" }), h("span", { key: '41867f8e64071e62f632ca02b9093bbb60f71e51' }, "Selecione o arquivo")), h("input", Object.assign({ key: '20b2c8cbceea55c0756978da246d53fd923fbed8', class: "upload-input", id: "single-file", type: "file", "aria-hidden": "null", "aria-label": "enviar arquivo", onChange: ($event) => this.onInputChange($event.target.files) }, this.inheritedAttributes, { multiple: this.multiple, disabled: this.disabled, accept: this.accept })), h("div", { key: '4b627eadceade14860def5aaa9ae69c05b000832', id: "list-files", class: "upload-list" }, this.filesSelected ? this.renderFilesUploaded() : null))));
     }
     static get is() { return "br-upload"; }
     static get encapsulation() { return "shadow"; }
@@ -164,6 +164,8 @@ export class Upload {
                     "tags": [],
                     "text": "Tipos de arquivo permitidos (ex: 'image/*').\nEsta propriedade define quais tipos de arquivos podem ser selecionados para upload."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accept",
                 "reflect": false,
                 "defaultValue": "''"
@@ -180,8 +182,10 @@ export class Upload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "**[OBRIGAT\u00D3RIO]** Texto descritivo do campo de upload.\nEste \u00E9 o texto que \u00E9 mostrado no label do textarea."
+                    "text": "Texto descritivo do campo de upload.\nEste \u00E9 o texto que \u00E9 mostrado no label do textarea."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Envio de arquivo'"
@@ -200,6 +204,8 @@ export class Upload {
                     "tags": [],
                     "text": "Indica se o componente est\u00E1 desativado.\nQuando definido como `true`, o campo de upload se torna n\u00E3o interativo,\nimpedindo que o usu\u00E1rio selecione ou envie arquivos.\nIsso \u00E9 \u00FAtil para controlar a intera\u00E7\u00E3o do usu\u00E1rio em situa\u00E7\u00F5es espec\u00EDficas,\ncomo durante o carregamento de dados ou quando o formul\u00E1rio est\u00E1 em um estado inv\u00E1lido."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -216,8 +222,10 @@ export class Upload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "**[OBRIGAT\u00D3RIO]** Define o estado visual da mensagem.\nOs poss\u00EDveis valores s\u00E3o:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padr\u00E3o \u00E9 'info'."
+                    "text": "Define o estado visual da mensagem.\nOs poss\u00EDveis valores s\u00E3o:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padr\u00E3o \u00E9 'info'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "state",
                 "reflect": true,
                 "defaultValue": "UploadState.INFO"
@@ -236,6 +244,8 @@ export class Upload {
                     "tags": [],
                     "text": "Indica se o componente permite a sele\u00E7\u00E3o de m\u00FAltiplos arquivos.\nQuando definido como `true`, o usu\u00E1rio pode selecionar mais de um arquivo para upload."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"