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

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACtF,OAAO,cAAc,CAAA;AACrB,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAEpF;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,IAAI;;QAkDP,wBAAmB,GAAe,EAAE,CAAA;;sBAjCF,IAAI;qBAML,IAAI;;wBAaC,KAAK;;;;IAqBnD,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAQD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mFACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,IACf,IAAI,CAAC,mBAAmB,EACd,CACX,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core'\nimport 'iconify-icon'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\n\n/**\n * O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações.\n * Utilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.\n *\n * Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone\n * deve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para\n * integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário\n * e a clareza das interfaces.\n *\n * Para mais informações sobre quais ícones estão disponíveis, consulte a documentação do [Iconify](https://iconify.design/).\n */\n@Component({\n  tag: 'br-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLElement\n\n  /**\n   * Nome do ícone a ser exibido, utilizando a biblioteca Iconify.\n   * Este nome deve corresponder ao nome do ícone definido na biblioteca para que ele seja exibido corretamente.\n   */\n  @Prop({ reflect: true }) IconName: string\n\n  /**\n   * Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\n   * O valor padrão é '16'.\n   */\n  @Prop({ reflect: true }) height: string = '16'\n\n  /**\n   * Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\n   * O valor padrão é '24'.\n   */\n  @Prop({ reflect: true }) width: string = '24'\n\n  /**\n   * Permite adicionar classes CSS adicionais ao ícone.\n   * Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.\n   */\n  @Prop({ reflect: true }) class?: string\n\n  /**\n   * Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor.\n   * Útil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto.\n   * O valor padrão é `false`.\n   */\n  @Prop({ reflect: true }) isInline?: boolean = false\n\n  /**\n   * Define o ângulo de rotação do ícone.\n   * Aceita valores como \"90deg\", \"180deg\" e \"270deg\" para rotacionar o ícone em diferentes ângulos.\n   */\n  @Prop({ reflect: true }) rotate?: '90deg' | '180deg' | '270deg'\n\n  /**\n   * Define o tipo de espelhamento do ícone.\n   * Aceita valores como \"horizontal\" para espelhar o ícone horizontalmente, \"vertical\" para espelhar verticalmente, ou ambos.\n   */\n  @Prop({ reflect: true }) flip?: 'horizontal' | 'vertical'\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  render() {\n    return (\n      <Host>\n        <iconify-icon\n          flip={this.flip}\n          width={this.width}\n          class={this.class}\n          icon={this.IconName}\n          inline={this.isInline}\n          height={this.height}\n          rotate={this.rotate}\n          {...this.inheritedAttributes}\n        ></iconify-icon>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACtF,OAAO,cAAc,CAAA;AACrB,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAEpF;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,IAAI;;QAkDP,wBAAmB,GAAe,EAAE,CAAA;;sBAjCF,IAAI;qBAML,IAAI;;wBAaC,KAAK;;;;IAqBnD,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAQD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mFACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,IACf,IAAI,CAAC,mBAAmB,EACd,CACX,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core'\nimport 'iconify-icon'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\n\n/**\n * O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações.\n * Utilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.\n *\n * Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone\n * deve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para\n * integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário\n * e a clareza das interfaces.\n *\n * Para mais informações sobre quais ícones estão disponíveis, consulte a documentação do [Iconify](https://iconify.design/).\n */\n@Component({\n  tag: 'br-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\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: HTMLBrIconElement\n\n  /**\n   * Nome do ícone a ser exibido, utilizando a biblioteca Iconify.\n   * Este nome deve corresponder ao nome do ícone definido na biblioteca para que ele seja exibido corretamente.\n   */\n  @Prop({ reflect: true }) IconName: string\n\n  /**\n   * Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\n   * O valor padrão é '16'.\n   */\n  @Prop({ reflect: true }) height: string = '16'\n\n  /**\n   * Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc.\n   * O valor padrão é '24'.\n   */\n  @Prop({ reflect: true }) width: string = '24'\n\n  /**\n   * Permite adicionar classes CSS adicionais ao ícone.\n   * Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.\n   */\n  @Prop({ reflect: true }) CssClasses?: string\n\n  /**\n   * Se definido como verdadeiro, o ícone será alinhado verticalmente ao texto ao seu redor.\n   * Útil quando o ícone é usado em linha com texto para garantir que esteja alinhado corretamente com o texto.\n   * O valor padrão é `false`.\n   */\n  @Prop({ reflect: true }) isInline?: boolean = false\n\n  /**\n   * Define o ângulo de rotação do ícone.\n   * Aceita valores como \"90deg\", \"180deg\" e \"270deg\" para rotacionar o ícone em diferentes ângulos.\n   */\n  @Prop({ reflect: true }) rotate?: '90deg' | '180deg' | '270deg'\n\n  /**\n   * Define o tipo de espelhamento do ícone.\n   * Aceita valores como \"horizontal\" para espelhar o ícone horizontalmente, \"vertical\" para espelhar verticalmente, ou ambos.\n   */\n  @Prop({ reflect: true }) flip?: 'horizontal' | 'vertical'\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  render() {\n    return (\n      <Host>\n        <iconify-icon\n          flip={this.flip}\n          width={this.width}\n          class={this.CssClasses}\n          icon={this.IconName}\n          inline={this.isInline}\n          height={this.height}\n          rotate={this.rotate}\n          {...this.inheritedAttributes}\n        ></iconify-icon>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/input/input.css

@@ -38,7 +38,8 @@ img {
 }
 
 button,
-input {
+input,
+textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: var(--font-line-height-medium);
@@ -82,6 +83,10 @@ progress {
   vertical-align: baseline;
 }
 
+textarea {
+  overflow: auto;
+}
+
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
@@ -139,6 +144,17 @@ progress {
   width: auto;
 }
 
+.container {
+  --grid-margin: var(--grid-portrait-margin);
+  --grid-maxwidth: var(--grid-portrait-maxwidth);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--grid-maxwidth);
+  padding-left: var(--grid-margin);
+  padding-right: var(--grid-margin);
+  width: 100%;
+}
+
 .row {
   --grid-gutter: var(--grid-portrait-gutter);
   display: flex;
@@ -148,24 +164,52 @@ progress {
 }
 
 @media (min-width: 576px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tablet-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
+  }
 }
 @media (min-width: 992px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tablet-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
+  }
 }
 @media (min-width: 1280px) {
+  .container {
+    --grid-margin: var(--grid-desktop-margin);
+  }
   .row {
     --grid-gutter: var(--grid-desktop-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
+  }
 }
 @media (min-width: 1600px) {
+  .container {
+    --grid-margin: var(--grid-tv-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tv-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
+  }
+}
+
+.mt-1 {
+  margin-top: var(--spacing-scale-half) !important;
 }
 
 .mr-1 {
@@ -180,6 +224,10 @@ progress {
   margin-bottom: var(--spacing-scale-2x) !important;
 }
 
+.pt-half {
+  padding-top: var(--spacing-scale-half) !important;
+}
+
 .py-3 {
   padding-bottom: var(--spacing-scale-2x) !important;
   padding-top: var(--spacing-scale-2x) !important;
@@ -256,6 +304,11 @@ img {
   max-width: 100%;
   vertical-align: middle;
 }
+ul {
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+  padding: 0 0 0 var(--spacing-scale-5x);
+}
 
 label,
 .label {
@@ -290,6 +343,7 @@ label,
 }
 
 input,
+textarea,
 .input {
   color: var(--color-light);
   font-size: var(--font-size-scale-up-01);
@@ -333,6 +387,10 @@ code,
   white-space: nowrap !important;
 }
 
+.text-base {
+  font-size: var(--font-size-scale-base) !important;
+}
+
 .highlight {
   background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
   color: var(--status-highlight-text);
@@ -349,6 +407,50 @@ code,
   pointer-events: none;
 }
 
+[data-toggle=dropdown] + * {
+  position: absolute;
+}
+
+.dropdown {
+  position: relative;
+}
+.dropdown [data-toggle=dropdown] + * {
+  box-shadow: var(--surface-shadow-sm);
+  left: 0;
+  position: absolute;
+  top: 100%;
+}
+.dropdown .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--color-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+  background-color: var(--background-light);
+  color: var(--color);
+}
+.dropdown .br-item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+.dropdown .br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+
 .br-input {
   --input-button-margin: var(--spacing-scale-half);
   --input-padding: 0 var(--spacing-scale-2x);

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

@@ -12,8 +12,13 @@ import { inheritAriaAttributes } from "../../utils/inherited-attributes";
 export class Input {
     constructor() {
         this.inheritedAttributes = {};
+        this.handleInput = (event) => {
+            this.value = event.target.value;
+            this.valueChange.emit(this.value);
+        };
         this.renderLabel = () => {
-            if (this.label) {
+            var _a;
+            if (((_a = this.label) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 if (this.isInline) {
                     return (h("div", { class: "input-label" }, h("label", { class: "text-nowrap", htmlFor: this.defaultID }, this.label)));
                 }
@@ -28,10 +33,11 @@ export class Input {
             this.showIconTextPassword = input.type === 'password';
         };
         this.renderInput = () => {
-            return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.defaultID, autocomplete: this.autocomplete, autofocus: this.autofocus, disabled: this.disabled, onInput: this.handleInput.bind(this), placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)));
+            return (h("input", Object.assign({ class: this.isHighlight ? 'input-highlight' : null, id: this.defaultID, autocomplete: this.autocomplete, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }, this.inheritedAttributes)));
         };
         this.renderHelpText = () => {
-            return this.helpText ? h("p", null, this.helpText) : h("slot", { name: "help-text" });
+            var _a;
+            return ((_a = this.helpText) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h("p", null, this.helpText) : h("slot", { name: "help-text" });
         };
         this.renderIconPassword = () => {
             const showPassword = !this.showIconTextPassword;
@@ -40,7 +46,6 @@ export class Input {
         this.defaultID = `br-input-${uuidv4()}`;
         this.type = 'text';
         this.autocomplete = undefined;
-        this.autofocus = false;
         this.density = 'medium';
         this.disabled = false;
         this.isInline = false;
@@ -117,12 +122,8 @@ export class Input {
             warning: this.warning,
         };
     }
-    handleInput(event) {
-        this.value = event.target.value;
-        this.valueChange.emit(this.value);
-    }
     hasSlotContent(slotName) {
-        return !!this.el.querySelector(`[slot="${slotName}"]`);
+        return this.el.querySelector(`[slot="${slotName}"]`) !== null;
     }
     renderIconSlot() {
         if (this.hasSlotContent('icon')) {
@@ -139,7 +140,7 @@ export class Input {
         return null;
     }
     render() {
-        return (h(Host, { key: 'd6d001f1ad2ce509ad81a4ecf9be52353b85e661' }, h("div", { key: '9d672553f29ec3147eacfc26b8cb9f35a67d7223', class: this.getInputCssClassMap() }, this.renderLabel(), this.hasIconSlot ? (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput())) : (this.renderInput()), this.renderButton(), this.renderHelpText())));
+        return (h(Host, { key: '04d44896164c990470d07dde9bd531afa826dfe2' }, h("div", { key: '9605db5f9260861938915b37dda216b5babf2ea1', class: this.getInputCssClassMap() }, this.renderLabel(), this.hasIconSlot ? (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput())) : (this.renderInput()), this.renderButton(), this.renderHelpText())));
     }
     static get is() { return "br-input"; }
     static get encapsulation() { return "shadow"; }
@@ -209,24 +210,6 @@ export class Input {
                 "attribute": "autocomplete",
                 "reflect": true
             },
-            "autofocus": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Se definido como verdadeiro, o input receber\u00E1 foco automaticamente ao ser renderizado."
-                },
-                "attribute": "autofocus",
-                "reflect": true,
-                "defaultValue": "false"
-            },
             "density": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"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,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAC9G,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AACnC,OAAO,EAAc,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAGpF;;;;;;;GAOG;AAOH,MAAM,OAAO,KAAK;;QA2RR,wBAAmB,GAAe,EAAE,CAAA;QAW5C,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,OAAO,CACL,WAAK,KAAK,EAAC,aAAa;wBACtB,aAAO,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,SAAS,IAC/C,IAAI,CAAC,KAAK,CACL,CACJ,CACP,CAAA;gBACH,CAAC;qBAAM,CAAC;oBACN,OAAO,aAAO,OAAO,EAAE,IAAI,CAAC,SAAS,IAAG,IAAI,CAAC,KAAK,CAAS,CAAA;gBAC7D,CAAC;YACH,CAAC;QACH,CAAC,CAAA;QAED,6BAAwB,GAAG,GAAG,EAAE;YAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YACvD,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAA;YAC5D,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,CAAA;QACvD,CAAC,CAAA;QAMD,gBAAW,GAAG,GAAG,EAAE;YACjB,OAAO,CACL,2BACE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,EAClD,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,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;QAED,mBAAc,GAAG,GAAG,EAAE;YACpB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAI,IAAI,CAAC,QAAQ,CAAK,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAAA;QAChF,CAAC,CAAA;QAED,uBAAkB,GAAG,GAAG,EAAE;YACxB,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAA;YAC/C,OAAO,4BAAoB,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,GAAY,CAAA;QAC7F,CAAC,CAAA;yBA9U4C,YAAY,MAAM,EAAE,EAAE;oBAyBvD,MAAM;;yBAU4B,KAAK;uBAKc,QAAQ;wBAK5B,KAAK;wBAKL,KAAK;2BAKF,KAAK;uBAKT,KAAK;sBAKN,KAAK;oBAKP,KAAK;uBAKF,KAAK;;;;wBAoBJ,KAAK;wBAKL,KAAK;;;oCAaT,KAAK;2BAEd,KAAK;6BAEH,KAAK;;IAOvC,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,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,UAAU,CAAC,IAAI,EAAE,CAAA;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAQD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAQD,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IAC1B,CAAC;IAQD,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAQD,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAA;IAC7B,CAAC;IASD,sBAAsB,CAAC,IAAc;QACnC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1C,CAAC;IASD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC5C,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAA;IACjC,CAAC;IAUD,wBAAwB,CAAC,KAAa,EAAE,KAAa;QACnD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IACtD,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,OAAO;YACrB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAA;IACH,CAAC;IAQO,WAAW,CAAC,KAAY;QAC9B,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;QACrD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACnC,CAAC;IAwBO,cAAc,CAAC,QAAgB;QACrC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAA;IACxD,CAAC;IA+BD,cAAc;QACZ,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;IAED,YAAY;QACV,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;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE;gBACnC,IAAI,CAAC,WAAW,EAAE;gBAElB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,WAAK,KAAK,EAAC,aAAa;oBACrB,IAAI,CAAC,cAAc,EAAE;oBACrB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,EAAE,CACnB;gBAEA,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,cAAc,EAAE,CAClB,CACD,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, 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 *\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: HTMLElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único do campo de entrada.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) defaultID: 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    | '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   * Se definido como verdadeiro, o input receberá foco automaticamente ao ser renderizado.\n   */\n  @Prop({ reflect: true }) autofocus: boolean = false\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   * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n   */\n  @Prop({ reflect: true }) success: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de validação com erro.\n   */\n  @Prop({ reflect: true }) danger: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado informativo.\n   */\n  @Prop({ reflect: true }) info: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de alerta.\n   */\n  @Prop({ reflect: true }) warning: boolean = false\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  @State() showIconTextPassword: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\n\n  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é associado ou removido de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n   *\n   * @param form - Dados do formulário associado.\n   */\n  @Event() brFormAssociatedCallback: EventEmitter<FormData>\n  formAssociatedCallback(form: FormData) {\n    this.brFormAssociatedCallback.emit(form)\n  }\n\n  /**\n   * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n   *\n   * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n   */\n  @Event() brFormDisabledCallback: EventEmitter<boolean>\n  formDisabledCallback(disabled: boolean) {\n    this.brFormDisabledCallback.emit(disabled)\n  }\n\n  /**\n   * Emite um evento quando um `<form>` é resetado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n   */\n  @Event() brFormResetCallback: EventEmitter<void>\n  formResetCallback() {\n    this.brFormResetCallback.emit()\n  }\n\n  /**\n   * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n   *\n   * @param state - Estado restaurado do formulário.\n   * @param _mode - Modo de preenchimento automático do navegador.\n   */\n  @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n  formStateRestoreCallback(state: string, _mode: string) {\n    this.brFormStateRestoreCallback.emit([state, _mode])\n  }\n\n  private 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.success,\n      danger: this.danger,\n      info: this.info,\n      warning: this.warning,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Valor atualizado do input\n   */\n  @Event() valueChange!: EventEmitter<string>\n  private handleInput(event: Event) {\n    this.value = (event.target as HTMLInputElement).value\n    this.valueChange.emit(this.value)\n  }\n\n  renderLabel = () => {\n    if (this.label) {\n      if (this.isInline) {\n        return (\n          <div class=\"input-label\">\n            <label class=\"text-nowrap\" htmlFor={this.defaultID}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.defaultID}>{this.label}</label>\n      }\n    }\n  }\n\n  togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    input.type = input.type === 'password' ? 'text' : 'password'\n    this.showIconTextPassword = input.type === 'password'\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${slotName}\"]`)\n  }\n\n  renderInput = () => {\n    return (\n      <input\n        class={this.isHighlight ? 'input-highlight' : null}\n        id={this.defaultID}\n        autocomplete={this.autocomplete}\n        autofocus={this.autofocus}\n        disabled={this.disabled}\n        onInput={this.handleInput.bind(this)}\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  renderHelpText = () => {\n    return this.helpText ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n  }\n\n  renderIconPassword = () => {\n    const showPassword = !this.showIconTextPassword\n    return <br-icon icon-name={showPassword ? 'fa-solid:eye' : 'fa-solid:eye-slash'}></br-icon>\n  }\n\n  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  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  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.hasIconSlot ? (\n            <div class=\"input-group\">\n              {this.renderIconSlot()}\n              {this.renderInput()}\n            </div>\n          ) : (\n            this.renderInput()\n          )}\n\n          {this.renderButton()}\n          {this.renderHelpText()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, 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 *\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 campo de entrada.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) defaultID: 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    | '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   * Se verdadeiro, o input indica um estado de validação bem-sucedido.\n   */\n  @Prop({ reflect: true }) success: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de validação com erro.\n   */\n  @Prop({ reflect: true }) danger: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado informativo.\n   */\n  @Prop({ reflect: true }) info: boolean = false\n\n  /**\n   * Se verdadeiro, o input indica um estado de alerta.\n   */\n  @Prop({ reflect: true }) warning: boolean = false\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  @State() showIconTextPassword: boolean = false\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\n\n  /**\n   * Emite um evento quando o componente é conectado ao DOM.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n   */\n  @Event() brDidConnect: EventEmitter<void>\n  connectedCallback() {\n    this.brDidConnect.emit()\n  }\n\n  /**\n   * Emite um evento antes que o componente seja carregado pela primeira vez.\n   * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n   */\n  @Event() brWillLoad: EventEmitter<void>\n  componentWillLoad() {\n    this.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.brWillLoad.emit()\n    this.inheritedAttributes = inheritAriaAttributes(this.el)\n  }\n\n  /**\n   * Emite um evento após o componente ter sido carregado pela primeira vez.\n   * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n   */\n  @Event() brDidLoad: EventEmitter<void>\n  componentDidLoad() {\n    this.brDidLoad.emit()\n  }\n\n  /**\n   * Emite um evento antes do componente ser renderizado.\n   * Utilize este evento para preparar o componente antes de sua renderização.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n   */\n  @Event() brWillRender: EventEmitter<void>\n  componentWillRender() {\n    this.brWillRender.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido renderizado.\n   * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n   */\n  @Event() brDidRender: EventEmitter<void>\n  componentDidRender() {\n    this.brDidRender.emit()\n  }\n\n  /**\n   * Emite um evento para indicar se o componente deve ser atualizado ou não.\n   * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n   */\n  @Event() brShouldUpdate: EventEmitter<void>\n  componentShouldUpdate() {\n    this.brShouldUpdate.emit()\n  }\n\n  /**\n   * Emite um evento antes de o componente ser atualizado.\n   * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n   */\n  @Event() brWillUpdate: EventEmitter<void>\n  componentWillUpdate() {\n    this.brWillUpdate.emit()\n  }\n\n  /**\n   * Emite um evento após o componente ter sido atualizado.\n   * Utilize este evento para realizar ações após a atualização do componente.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n   */\n  @Event() brDidUpdate: EventEmitter<void>\n  componentDidUpdate() {\n    this.brDidUpdate.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é desconectado do DOM.\n   * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n   */\n  @Event() brDidDisconnect: EventEmitter<void>\n  disconnectedCallback() {\n    this.brDidDisconnect.emit()\n  }\n\n  /**\n   * Emite um evento quando o componente é associado ou removido de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n   *\n   * @param form - Dados do formulário associado.\n   */\n  @Event() brFormAssociatedCallback: EventEmitter<FormData>\n  formAssociatedCallback(form: FormData) {\n    this.brFormAssociatedCallback.emit(form)\n  }\n\n  /**\n   * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n   *\n   * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n   */\n  @Event() brFormDisabledCallback: EventEmitter<boolean>\n  formDisabledCallback(disabled: boolean) {\n    this.brFormDisabledCallback.emit(disabled)\n  }\n\n  /**\n   * Emite um evento quando um `<form>` é resetado.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n   */\n  @Event() brFormResetCallback: EventEmitter<void>\n  formResetCallback() {\n    this.brFormResetCallback.emit()\n  }\n\n  /**\n   * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n   * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n   *\n   * @param state - Estado restaurado do formulário.\n   * @param _mode - Modo de preenchimento automático do navegador.\n   */\n  @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n  formStateRestoreCallback(state: string, _mode: string) {\n    this.brFormStateRestoreCallback.emit([state, _mode])\n  }\n\n  private 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.success,\n      danger: this.danger,\n      info: this.info,\n      warning: this.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.defaultID}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return <label htmlFor={this.defaultID}>{this.label}</label>\n      }\n    }\n  }\n\n  private readonly togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    input.type = input.type === 'password' ? 'text' : 'password'\n    this.showIconTextPassword = input.type === 'password'\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.defaultID}\n        autocomplete={this.autocomplete}\n        disabled={this.disabled}\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 showPassword = !this.showIconTextPassword\n    return <br-icon icon-name={showPassword ? 'fa-solid:eye' : 'fa-solid:eye-slash'}></br-icon>\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  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.hasIconSlot ? (\n            <div class=\"input-group\">\n              {this.renderIconSlot()}\n              {this.renderInput()}\n            </div>\n          ) : (\n            this.renderInput()\n          )}\n\n          {this.renderButton()}\n          {this.renderHelpText()}\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

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

@@ -38,7 +38,8 @@ img {
 }
 
 button,
-input {
+input,
+textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: var(--font-line-height-medium);
@@ -82,6 +83,10 @@ progress {
   vertical-align: baseline;
 }
 
+textarea {
+  overflow: auto;
+}
+
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
@@ -139,6 +144,17 @@ progress {
   width: auto;
 }
 
+.container {
+  --grid-margin: var(--grid-portrait-margin);
+  --grid-maxwidth: var(--grid-portrait-maxwidth);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--grid-maxwidth);
+  padding-left: var(--grid-margin);
+  padding-right: var(--grid-margin);
+  width: 100%;
+}
+
 .row {
   --grid-gutter: var(--grid-portrait-gutter);
   display: flex;
@@ -148,24 +164,52 @@ progress {
 }
 
 @media (min-width: 576px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tablet-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin));
+  }
 }
 @media (min-width: 992px) {
+  .container {
+    --grid-margin: var(--grid-tablet-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tablet-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin));
+  }
 }
 @media (min-width: 1280px) {
+  .container {
+    --grid-margin: var(--grid-desktop-margin);
+  }
   .row {
     --grid-gutter: var(--grid-desktop-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin));
+  }
 }
 @media (min-width: 1600px) {
+  .container {
+    --grid-margin: var(--grid-tv-margin);
+  }
   .row {
     --grid-gutter: var(--grid-tv-gutter);
   }
+  .container {
+    --grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin));
+  }
+}
+
+.mt-1 {
+  margin-top: var(--spacing-scale-half) !important;
 }
 
 .mr-1 {
@@ -180,6 +224,10 @@ progress {
   margin-bottom: var(--spacing-scale-2x) !important;
 }
 
+.pt-half {
+  padding-top: var(--spacing-scale-half) !important;
+}
+
 .py-3 {
   padding-bottom: var(--spacing-scale-2x) !important;
   padding-top: var(--spacing-scale-2x) !important;
@@ -256,6 +304,11 @@ img {
   max-width: 100%;
   vertical-align: middle;
 }
+ul {
+  margin-bottom: var(--spacing-scale-2x);
+  margin-top: 0;
+  padding: 0 0 0 var(--spacing-scale-5x);
+}
 
 label,
 .label {
@@ -290,6 +343,7 @@ label,
 }
 
 input,
+textarea,
 .input {
   color: var(--color-light);
   font-size: var(--font-size-scale-up-01);
@@ -333,6 +387,10 @@ code,
   white-space: nowrap !important;
 }
 
+.text-base {
+  font-size: var(--font-size-scale-base) !important;
+}
+
 .highlight {
   background: var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));
   color: var(--status-highlight-text);
@@ -349,6 +407,50 @@ code,
   pointer-events: none;
 }
 
+[data-toggle=dropdown] + * {
+  position: absolute;
+}
+
+.dropdown {
+  position: relative;
+}
+.dropdown [data-toggle=dropdown] + * {
+  box-shadow: var(--surface-shadow-sm);
+  left: 0;
+  position: absolute;
+  top: 100%;
+}
+.dropdown .br-item {
+  --color: var(--color-light);
+  --color-rgb: var(--color-light-rgb);
+  --text-color: var(--color-light);
+  --interactive: var(--interactive-light);
+  --interactive-rgb: var(--color-rgb);
+  --visited: var(--visited-light);
+  --hover: var(--hover-light);
+  --pressed: var(--pressed-light);
+  --focus-color: var(--focus-color-light);
+  --focus: var(--focus-color-light);
+  --item-padding-y: var(--spacing-scale-2x);
+  background-color: var(--background-light);
+  color: var(--color);
+}
+.dropdown .br-item:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+.dropdown .br-item.selected {
+  --color: var(--color-dark);
+  --color-rgb: var(--color-dark-rgb);
+  --text-color: var(--color-dark);
+  --interactive: var(--interactive-dark);
+  --interactive-rgb: var(--interactive-dark-rgb);
+  --visited: var(--visited-dark);
+  --hover: var(--hover-dark);
+  --pressed: var(--pressed-dark);
+  --focus-color: var(--focus-color-dark);
+  --focus: var(--focus-color-dark);
+}
+
 .br-item {
   background: var(--background);
   --item-padding-x: var(--spacing-scale-2x);