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

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

@@ -129,7 +129,7 @@ export class Input {
         return null;
     }
     render() {
-        return (h(Host, { key: 'd5e8fec1c09589e9c9e9aa206b3c1669ef1f04f8' }, h("div", { key: '431430f8d91e3086b114d4bc7fa3b43e9b5b9eab', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent())));
+        return (h(Host, { key: '7db54be8c6f64d73126cff434d407895f20e2075' }, h("div", { key: '9448cee18e6c87443ffb0dd67cbaf60d5539a11d', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent())));
     }
     static get is() { return "br-input"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +160,8 @@ export class Input {
                     "tags": [],
                     "text": "Identificador \u00FAnico do input.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "id",
                 "reflect": true,
                 "defaultValue": "`br-input-${uuidv4()}`"
@@ -178,6 +180,8 @@ export class Input {
                     "tags": [],
                     "text": "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\u00FAmeros\n- 'tel': Campo para n\u00FAmeros de telefone\n- 'text': Campo de texto padr\u00E3o\n- 'url': Campo para URLs"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'text'"
@@ -196,6 +200,8 @@ export class Input {
                     "tags": [],
                     "text": "Controla o comportamento de preenchimento autom\u00E1tico do navegador para o input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocomplete",
                 "reflect": true
             },
@@ -213,6 +219,8 @@ export class Input {
                     "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'"
@@ -231,6 +239,8 @@ export class Input {
                     "tags": [],
                     "text": "Desativa o input, tornando-o n\u00E3o interativo."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -249,6 +259,8 @@ export class Input {
                     "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"
@@ -267,6 +279,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, o input ter\u00E1 destaque visual."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-highlight",
                 "reflect": true,
                 "defaultValue": "false"
@@ -285,6 +299,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o estado do input\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
             },
@@ -302,6 +318,8 @@ export class Input {
                     "tags": [],
                     "text": "Texto exibido como r\u00F3tulo do input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true
             },
@@ -319,6 +337,8 @@ export class Input {
                     "tags": [],
                     "text": "Nome do input, utilizado para identifica\u00E7\u00E3o em formul\u00E1rios."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -336,6 +356,8 @@ export class Input {
                     "tags": [],
                     "text": "Texto exibido dentro do input quando est\u00E1 vazio, fornecendo uma dica ou sugest\u00E3o ao usu\u00E1rio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": true
             },
@@ -353,6 +375,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, o valor do input \u00E9 exibido, mas n\u00E3o pode ser editado pelo usu\u00E1rio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": true,
                 "defaultValue": "false"
@@ -371,6 +395,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, o input \u00E9 obrigat\u00F3rio e deve ser preenchido antes que o formul\u00E1rio possa ser enviado."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
@@ -389,6 +415,8 @@ export class Input {
                     "tags": [],
                     "text": "Valor inicial exibido no input.\nPode ser alterado pelo usu\u00E1rio se a propriedade `readonly` n\u00E3o estiver ativa."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             },
@@ -406,6 +434,8 @@ export class Input {
                     "tags": [],
                     "text": "Texto adicional que fornece ajuda ou informa\u00E7\u00F5es sobre o input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "help-text",
                 "reflect": true
             },
@@ -423,6 +453,8 @@ export class Input {
                     "tags": [],
                     "text": "Controla a corre\u00E7\u00E3o autom\u00E1tica do texto."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocorrect",
                 "reflect": true,
                 "defaultValue": "'off'"
@@ -441,6 +473,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o valor m\u00EDnimo para campos de entrada num\u00E9ricos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": true
             },
@@ -458,6 +492,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o valor m\u00E1ximo para campos de entrada num\u00E9ricos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": true
             },
@@ -475,6 +511,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o comprimento m\u00EDnimo do valor do campo de entrada."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "minlength",
                 "reflect": true
             },
@@ -492,6 +530,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o comprimento m\u00E1ximo do valor do campo de entrada."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "maxlength",
                 "reflect": true
             },
@@ -509,6 +549,8 @@ export class Input {
                     "tags": [],
                     "text": "Se verdadeiro, permite a sele\u00E7\u00E3o de m\u00FAltiplos arquivos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": true,
                 "defaultValue": "false"
@@ -527,6 +569,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o padr\u00E3o de entrada para valida\u00E7\u00E3o."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "pattern",
                 "reflect": true
             },
@@ -544,6 +588,8 @@ export class Input {
                     "tags": [],
                     "text": "Define o valor do passo para campos de entrada num\u00E9ricos."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "step",
                 "reflect": true
             }

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":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9G,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AAEnC,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;;;;GAOG;AAOH,MAAM,OAAO,KAAK;;QAqLR,wBAAmB,GAAe,EAAE,CAAA;QAM3B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YAC9C,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;YACrD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC,CAAA;QAEgB,gBAAW,GAAG,GAAG,EAAE;;YAClC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,CAAC,EAAE,CAAC;gBAC3B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,OAAO,CACL,WAAK,KAAK,EAAC,aAAa;wBACtB,aAAO,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,IAC9C,IAAI,CAAC,KAAK,CACL,CACJ,CACP,CAAA;gBACH,CAAC;qBAAM,CAAC;oBACN,OAAO,aAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAAA;gBAC5D,CAAC;YACH,CAAC;QACH,CAAC,CAAA;QAMgB,gBAAW,GAAG,GAAG,EAAE;YAClC,OAAO,CACL,2BACE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,EAClD,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,IAAI,CAAC,mBAAmB,EAC5B,CACH,CAAA;QACH,CAAC,CAAA;QAEgB,mBAAc,GAAG,GAAG,EAAE;;YACrC,OAAO,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,aAAI,IAAI,CAAC,QAAQ,CAAK,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAAA;QAC5F,CAAC,CAAA;QAEgB,uBAAkB,GAAG,GAAG,EAAE;YACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAA;YAC/E,OAAO,4BAAoB,QAAQ,GAAY,CAAA;QACjD,CAAC,CAAA;QAEgB,6BAAwB,GAAG,GAAG,EAAE;YAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YACvD,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAA;YAChD,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAA;QAC3D,CAAC,CAAA;QAyCgB,6BAAwB,GAAG,GAAG,EAAE;YAC/C,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,OAAO,WAAK,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,mBAAmB,EAAE,CAAO,CAAA;YACtE,CAAC;iBAAM,CAAC;gBACN,OAAO,WAAK,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,sBAAsB,EAAE,CAAO,CAAA;YACzE,CAAC;QACH,CAAC,CAAA;QAEgB,uBAAkB,GAAG,GAAG,EAAE;YACzC,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAA;QACtF,CAAC,CAAA;QAEgB,wBAAmB,GAAG,GAAG,EAAE;YAC1C,OAAO,CACL,WAAK,KAAK,EAAC,aAAa;gBACrB,IAAI,CAAC,cAAc,EAAE;gBACrB,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,cAAc,EAAE,CAClB,CACP,CAAA;QACH,CAAC,CAAA;QAEgB,2BAAsB,GAAG,GAAG,EAAE;YAC7C,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;QACzE,CAAC,CAAA;wBAlT4D,YAAY,MAAM,EAAE,EAAE;oBA0BvE,MAAM;;uBAU+C,QAAQ;wBAK5B,KAAK;wBAKL,KAAK;2BAKF,KAAK;;;;;wBA+BR,KAAK;wBAKL,KAAK;;;2BAgBG,KAAK;;;;;wBAyBb,KAAK;;;iCAYZ,KAAK;2BAEX,KAAK;6BAEH,KAAK;;IAEvC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;QAClD,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAEO,mBAAmB;QACzB,OAAO;YACL,UAAU,EAAE,IAAI;YAChB,cAAc,EAAE,IAAI,CAAC,aAAa;YAClC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjC,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACjC,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC/B,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM;YAC3B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;SAClC,CAAA;IACH,CAAC;IA6BO,cAAc,CAAC,QAAgB;QACrC,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAA;IAC/D,CAAC;IA6CO,cAAc;QACpB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,OAAO,CACL,WAAK,KAAK,EAAC,YAAY;gBACrB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACP,CAAA;QACH,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,OAAO,CACL,iBACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,OAAO,gBACJ,4CAAwB,EACnC,OAAO,EAAE,IAAI,CAAC,wBAAwB,IAErC,IAAI,CAAC,kBAAkB,EAAE,CAChB,CACb,CAAA;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;YACzC,OAAO,CACL,iBACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,OAAO,gBACJ,4CAAwB;gBAGnC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACjB,CACb,CAAA;QACH,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC;IA6BD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE;gBACnC,IAAI,CAAC,WAAW,EAAE;gBAElB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CACxE,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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

@@ -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/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

@@ -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;
 }