@govbr-ds/webcomponents 2.0.0-next.12 → 2.0.0-next.14

package/dist/collection/components/message/message.css

@@ -115,6 +115,30 @@ progress {
   display: none;
 }
 
+.d-flex {
+  display: flex !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+.col,
+[class*=col-] {
+  padding-left: calc(var(--grid-gutter) * 0.5);
+  padding-right: calc(var(--grid-gutter) * 0.5);
+  width: 100%;
+}
+
+.col {
+  flex: 1 0 0%;
+  min-width: 8.3333333333%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
 .row {
   --grid-gutter: var(--grid-portrait-gutter);
   display: flex;
@@ -155,6 +179,16 @@ progress {
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }
+
+.py-3 {
+  padding-bottom: var(--spacing-scale-2x) !important;
+  padding-top: var(--spacing-scale-2x) !important;
+}
+
+.py-4 {
+  padding-bottom: var(--spacing-scale-3x) !important;
+  padding-top: var(--spacing-scale-3x) !important;
+}
 body {
   --bg-color: var(--background);
   --bg-color-rgb: var(--background-rgb);
@@ -222,6 +256,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 {
@@ -315,6 +354,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-message {
   --message-background: var(--background);
   --message-color-icon: var(--color);

package/dist/collection/components/message/message.js

@@ -7,6 +7,10 @@ import { inheritAriaAttributes } from "../../utils/inherited-attributes";
  */
 export class Message {
     constructor() {
+        this.dismissHandler = () => {
+            this.brDidClose.emit();
+            this.el.remove();
+        };
         this.inheritedAttributes = {};
         this.messageTitle = '';
         this.message = '';
@@ -44,10 +48,6 @@ export class Message {
     disconnectedCallback() {
         this.brDidDisconnect.emit();
     }
-    dismissHandler() {
-        this.brDidClose.emit();
-        this.el.remove();
-    }
     checkIconState() {
         const iconMap = {
             success: 'fa-solid:check-circle',
@@ -64,7 +64,8 @@ export class Message {
         };
     }
     render() {
-        return (h(Host, { key: '907d3fdd67a557e7ceb80ebd35ba0c49e82f182c' }, this.isFeedback ? (h("div", { class: "mb-3" }, h("span", Object.assign({ class: `feedback ${this.state}`, role: "alert" }, this.inheritedAttributes), this.showIcon ? h("br-icon", { class: "icon-space", "icon-name": this.checkIconState() }) : null, !this.message ? h("slot", null) : this.message))) : (h("div", Object.assign({ class: this.getCssClassMap(), role: "alert" }, this.inheritedAttributes), this.showIcon && (h("div", { class: "icon" }, h("br-icon", { "icon-name": this.checkIconState(), height: "20", "aria-hidden": "true" }))), h("div", { class: "content", role: "alert" }, !this.message ? (h("div", null, this.messageTitle && h("strong", null, this.messageTitle), this.messageTitle && !this.isInline && h("br", null), h("slot", null))) : (h("div", null, h("span", { class: "message-title mr-1" }, this.messageTitle), h("span", { class: "message-body" }, this.message)))), this.isClosable && !this.isFeedback && (h("div", { class: "close" }, h("br-button", { shape: "circle", type: "button", "aria-label": "Fechar a mensagem", onClick: () => this.dismissHandler() }, h("br-icon", { "icon-name": "fa-solid:times", "aria-hidden": "true" }))))))));
+        var _a, _b;
+        return (h(Host, { key: 'd6bf5928201f58d0f8e854bac2ac5957c032b7d0' }, this.isFeedback ? (h("div", { class: "mb-3" }, h("span", Object.assign({ class: `feedback ${this.state}`, role: "alert" }, this.inheritedAttributes), this.showIcon ? h("br-icon", { class: "icon-space", "icon-name": this.checkIconState() }) : null, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) === 0 ? h("slot", null) : this.message))) : (h("div", Object.assign({ class: this.getCssClassMap(), role: "alert" }, this.inheritedAttributes), this.showIcon && (h("div", { class: "icon" }, h("br-icon", { "icon-name": this.checkIconState(), height: "20", "aria-hidden": "true" }))), h("div", { class: "content", role: "alert" }, ((_b = this.message) === null || _b === void 0 ? void 0 : _b.length) === 0 ? (h("div", null, this.messageTitle && h("strong", null, this.messageTitle), this.messageTitle && !this.isInline && h("br", null), h("slot", null))) : (h("div", null, h("span", { class: "message-title mr-1" }, this.messageTitle), h("span", { class: "message-body" }, this.message)))), this.isClosable && !this.isFeedback && (h("div", { class: "close" }, h("br-button", { shape: "circle", type: "button", "aria-label": "Fechar a mensagem", onClick: this.dismissHandler }, h("br-icon", { "icon-name": "fa-solid:times", "aria-hidden": "true" }))))))));
     }
     static get is() { return "br-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/message/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).\n *\n * @slot default - Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem.\n */\n@Component({\n  tag: 'br-message',\n  styleUrl: 'message.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Message {\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   * Define o título da mensagem, que é exibido no início, acima da mensagem principal.\n   * Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.\n   */\n  @Prop({ reflect: true }) messageTitle: string = ''\n\n  /**\n   * **[OBRIGATÓRIO]** Define o texto da mensagem que será exibido.\n   * Este é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.\n   */\n  @Prop({ reflect: true }) message: string = ''\n\n  /**\n   * Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal.\n   * Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem.\n   * Este recurso não está disponível para mensagens do tipo feedback.\n   */\n  @Prop({ reflect: true }) isClosable: boolean = false\n\n  /**\n   * Se definido como verdadeiro, um ícone associado à mensagem será exibido.\n   * Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.\n   */\n  @Prop({ reflect: true }) showIcon: boolean = false\n\n  /**\n   * Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário.\n   * Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.\n   */\n  @Prop({ reflect: true }) isFeedback: boolean = false\n\n  /**\n   * **[OBRIGATÓRIO]** Define o estado visual da mensagem.\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' = 'info'\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  /** Evento emitido quando o usuário fecha a mensagem, se closable for true. */\n  @Event() brDidClose: EventEmitter\n  dismissHandler() {\n    this.brDidClose.emit()\n    this.el.remove()\n  }\n\n  private checkIconState() {\n    const iconMap = {\n      success: 'fa-solid:check-circle',\n      warning: 'fa-solid:exclamation-triangle',\n      danger: 'fa-solid:times-circle',\n      info: 'fa-solid:info-circle',\n    }\n    return iconMap[this.state] || 'check-circle' // Valor padrão se não encontrado\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-message': true,\n      [this.state]: true,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host>\n        {this.isFeedback ? (\n          <div class=\"mb-3\">\n            <span class={`feedback ${this.state}`} role=\"alert\" {...this.inheritedAttributes}>\n              {this.showIcon ? <br-icon class=\"icon-space\" icon-name={this.checkIconState()}></br-icon> : null}\n              {!this.message ? <slot></slot> : this.message}\n            </span>\n          </div>\n        ) : (\n          <div class={this.getCssClassMap()} role=\"alert\" {...this.inheritedAttributes}>\n            {this.showIcon && (\n              <div class=\"icon\">\n                <br-icon icon-name={this.checkIconState()} height=\"20\" aria-hidden=\"true\"></br-icon>\n              </div>\n            )}\n            <div class=\"content\" role=\"alert\">\n              {!this.message ? (\n                <div>\n                  {this.messageTitle && <strong>{this.messageTitle}</strong>}\n                  {this.messageTitle && !this.isInline && <br />}\n                  <slot></slot>\n                </div>\n              ) : (\n                <div>\n                  <span class=\"message-title mr-1\">{this.messageTitle}</span>\n                  <span class=\"message-body\">{this.message}</span>\n                </div>\n              )}\n            </div>\n            {this.isClosable && !this.isFeedback && (\n              <div class=\"close\">\n                <br-button\n                  shape=\"circle\"\n                  type=\"button\"\n                  aria-label=\"Fechar a mensagem\"\n                  onClick={() => this.dismissHandler()}\n                >\n                  <br-icon icon-name=\"fa-solid:times\" aria-hidden=\"true\"></br-icon>\n                </br-button>\n              </div>\n            )}\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/message/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/message?tab=designer).\n *\n * @slot default - Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem.\n */\n@Component({\n  tag: 'br-message',\n  styleUrl: 'message.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Message {\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: HTMLBrMessageElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o título da mensagem, que é exibido no início, acima da mensagem principal.\n   * Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.\n   */\n  @Prop({ reflect: true }) messageTitle: string = ''\n\n  /**\n   * **[OBRIGATÓRIO]** Define o texto da mensagem que será exibido.\n   * Este é o conteúdo principal da mensagem. A propriedade `message` é obrigatória e deve ser fornecida para que a mensagem apareça.\n   */\n  @Prop({ reflect: true }) message: string = ''\n\n  /**\n   * Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal.\n   * Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente.\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem.\n   * Este recurso não está disponível para mensagens do tipo feedback.\n   */\n  @Prop({ reflect: true }) isClosable: boolean = false\n\n  /**\n   * Se definido como verdadeiro, um ícone associado à mensagem será exibido.\n   * Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.\n   */\n  @Prop({ reflect: true }) showIcon: boolean = false\n\n  /**\n   * Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário.\n   * Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.\n   */\n  @Prop({ reflect: true }) isFeedback: boolean = false\n\n  /**\n   * **[OBRIGATÓRIO]** Define o estado visual da mensagem.\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' = 'info'\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  /** Evento emitido quando o usuário fecha a mensagem, se closable for true. */\n  @Event() brDidClose: EventEmitter\n  private readonly dismissHandler = () => {\n    this.brDidClose.emit()\n    this.el.remove()\n  }\n\n  private checkIconState() {\n    const iconMap = {\n      success: 'fa-solid:check-circle',\n      warning: 'fa-solid:exclamation-triangle',\n      danger: 'fa-solid:times-circle',\n      info: 'fa-solid:info-circle',\n    }\n    return iconMap[this.state] || 'check-circle' // Valor padrão se não encontrado\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-message': true,\n      [this.state]: true,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <Host>\n        {this.isFeedback ? (\n          <div class=\"mb-3\">\n            <span class={`feedback ${this.state}`} role=\"alert\" {...this.inheritedAttributes}>\n              {this.showIcon ? <br-icon class=\"icon-space\" icon-name={this.checkIconState()}></br-icon> : null}\n              {this.message?.length === 0 ? <slot></slot> : this.message}\n            </span>\n          </div>\n        ) : (\n          <div class={this.getCssClassMap()} role=\"alert\" {...this.inheritedAttributes}>\n            {this.showIcon && (\n              <div class=\"icon\">\n                <br-icon icon-name={this.checkIconState()} height=\"20\" aria-hidden=\"true\"></br-icon>\n              </div>\n            )}\n            <div class=\"content\" role=\"alert\">\n              {this.message?.length === 0 ? (\n                <div>\n                  {this.messageTitle && <strong>{this.messageTitle}</strong>}\n                  {this.messageTitle && !this.isInline && <br />}\n                  <slot></slot>\n                </div>\n              ) : (\n                <div>\n                  <span class=\"message-title mr-1\">{this.messageTitle}</span>\n                  <span class=\"message-body\">{this.message}</span>\n                </div>\n              )}\n            </div>\n            {this.isClosable && !this.isFeedback && (\n              <div class=\"close\">\n                <br-button shape=\"circle\" type=\"button\" aria-label=\"Fechar a mensagem\" onClick={this.dismissHandler}>\n                  <br-icon icon-name=\"fa-solid:times\" aria-hidden=\"true\"></br-icon>\n                </br-button>\n              </div>\n            )}\n          </div>\n        )}\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/radio/radio.css

@@ -115,6 +115,30 @@ progress {
   display: none;
 }
 
+.d-flex {
+  display: flex !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+.col,
+[class*=col-] {
+  padding-left: calc(var(--grid-gutter) * 0.5);
+  padding-right: calc(var(--grid-gutter) * 0.5);
+  width: 100%;
+}
+
+.col {
+  flex: 1 0 0%;
+  min-width: 8.3333333333%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
 .row {
   --grid-gutter: var(--grid-portrait-gutter);
   display: flex;
@@ -155,6 +179,16 @@ progress {
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }
+
+.py-3 {
+  padding-bottom: var(--spacing-scale-2x) !important;
+  padding-top: var(--spacing-scale-2x) !important;
+}
+
+.py-4 {
+  padding-bottom: var(--spacing-scale-3x) !important;
+  padding-top: var(--spacing-scale-3x) !important;
+}
 body {
   --bg-color: var(--background);
   --bg-color-rgb: var(--background-rgb);
@@ -222,6 +256,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 {
@@ -315,6 +354,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-radio {
   --radio-size: 24px;
   --radio-bullet-size: 16px;

package/dist/collection/components/radio/radio.js

@@ -8,6 +8,28 @@ import { inheritAriaAttributes } from "../../utils/inherited-attributes";
 export class Radio {
     constructor() {
         this.inheritedAttributes = {};
+        this.handleClick = () => {
+            this.toggleChecked();
+        };
+        this.handleKeyDown = (event) => {
+            // Permite alternar o estado apenas quando a tecla pressionada é 'Space'
+            if (event.code === 'Space') {
+                event.preventDefault(); // Impede o comportamento padrão da tecla 'Space'
+                this.toggleChecked();
+            }
+        };
+        /**
+         * Controla o comportamento de alternar o estado checked.
+         */
+        this.toggleChecked = () => {
+            if (this.toggle) {
+                this.checked = !this.checked;
+                this.brDidCheckedChange.emit({ value: this.value, checked: this.checked });
+            }
+        };
+        this.stopPropagation = (event) => {
+            event.stopPropagation();
+        };
         this.checked = false;
         this.disabled = false;
         this.state = null;
@@ -83,39 +105,15 @@ export class Radio {
             'hidden-label': this.hasHiddenLabel,
         };
     }
-    /**
-     * Handler para o evento "onClick"
-     */
-    async handleClick() {
-        this.toggleChecked();
-    }
-    /**
-     * Handler para o evento "onKeyDown"
-     */
-    async handleKeyDown(event) {
-        // Permite alternar o estado apenas quando a tecla pressionada é 'Space'
-        if (event.code === 'Space') {
-            event.preventDefault(); // Impede o comportamento padrão da tecla 'Space'
-            this.toggleChecked();
-        }
-    }
-    /**
-     * Controla o comportamento de alternar o estado checked.
-     */
-    toggleChecked() {
-        if (this.toggle) {
-            this.checked = !this.checked;
-            this.brDidCheckedChange.emit({ value: this.value, checked: this.checked });
-        }
-    }
     /**
      * Determina um id para o radio.
      */
     getComputedId() {
-        return this.customId ? this.customId : this.name;
+        var _a;
+        return ((_a = this.customId) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.customId : this.name;
     }
     render() {
-        return (h(Host, { key: '660b969988e41a89fdae674f8de5383dadf5c659', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'b146f7d3944904b24eb3695679512b0161953f26', class: this.getCssClassMap(), onClick: () => this.handleClick(), onKeyDown: (event) => this.handleKeyDown(event) }, h("input", Object.assign({ key: 'dcd4a5addad7971f6ad0947f09d3cded5d3cebf0', "aria-label": this.label, type: "radio", id: this.getComputedId(), name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: (event) => event.stopPropagation() }, this.inheritedAttributes)), h("label", { key: '39a07b6dc9b460b33f511f608b2a612b92ba8b84', htmlFor: this.getComputedId() }, this._slotDefault ? h("slot", null) : this.label))));
+        return (h(Host, { key: '5da5a61be5135f9d6938a3f71d5423947c62f786', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '84fb3469e320751f3f9d10f727f3bd113bea0c7d', class: this.getCssClassMap(), onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", Object.assign({ key: 'e2dfa7551a548ed986d2d1be7343cd67645150b9', "aria-label": this.label, type: "radio", id: this.getComputedId(), name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: this.stopPropagation }, this.inheritedAttributes)), h("label", { key: 'fa025229ad31f88416a552fb6dc9cd00f0da6876', htmlFor: this.getComputedId() }, this._slotDefault ? h("slot", null) : this.label))));
     }
     static get is() { return "br-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -188,7 +186,7 @@ export class Radio {
             },
             "hasHiddenLabel": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -527,52 +525,6 @@ export class Radio {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "handleClick": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "handleKeyDown": {
-                "complexType": {
-                    "signature": "(event: KeyboardEvent) => Promise<void>",
-                    "parameters": [{
-                            "name": "event",
-                            "type": "KeyboardEvent",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "KeyboardEvent": {
-                            "location": "global",
-                            "id": "global::KeyboardEvent"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *  Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n\n@Component({\n  tag: 'br-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio {\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: HTMLInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o estado de seleção do radio.\n   * Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false\n\n  /**\n   * Desativa o radio, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Indica a validade do radio.\n   * Valores possíveis:\n   * - 'valid': O radio é considerado válido.\n   * - 'invalid': O radio é considerado inválido.\n   * Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.\n   */\n  @Prop({ reflect: true }) state: 'valid' | 'invalid' = null\n\n  /**\n   * Define se o label associado ao radio deve ser oculto.\n   * Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional.\n   */\n  @Prop({ reflect: true, mutable: true, attribute: 'has-hidden-label' }) hasHiddenLabel: boolean = false\n\n  /**\n   * Define o nome do radio, que é utilizado para agrupar radios em formulários e identificar o campo.\n   * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n   */\n\n  @Prop({ reflect: true }) name!: string\n\n  /**\n   * Texto descritivo exibido à direita do radio.\n   * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`).\n   * Esse valor é enviado com o formulário quando o radio está selecionado.\n   * **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n   */\n  @Prop({ reflect: true }) value: any\n\n  /**\n   * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio.\n   * Se não for fornecido, o ID será o mesmo valor atribuído à propriedade `name`.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string\n\n  /**\n   * Indica se o radio pode alternar seu estado checked\n   */\n  @Prop({ reflect: true }) toggle: boolean = false\n\n  /**\n   * Propriedade que vai guardar o valor da validação do slot\n   */\n  @State() _slotDefault: boolean = false\n\n   // Faz a marcação do checkbox de acordo com a seleção do componente item do tipo is-interactive\n   @Listen('brDidSelect', { target: 'document' })\n   handleItemInteractiveSelect(event: CustomEvent) {\n\n       // Verifica se o evento é de um pai correto\n       const target = event.target as HTMLElement;\n       const brItem = target.closest('br-item') as HTMLElement;\n\n       if (brItem && this.el.parentElement?.contains(brItem)) {\n         this.checked = event.detail.selected;\n       }\n\n       event.stopPropagation();\n   }\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.hasSlotContentDefault()\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 hasSlotContentDefault(): any {\n    this._slotDefault = this.el.innerHTML !== ''\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-radio': true,\n      valid: this.state === 'valid',\n      invalid: this.state === 'invalid',\n      disabled: this.disabled,\n      'hidden-label': this.hasHiddenLabel,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Componente teve seu estado \"checked\" alterado\n   */\n  @Event() brDidCheckedChange: EventEmitter<{ value: boolean; checked: boolean }>\n\n  @Method()\n  /**\n   * Handler para o evento \"onClick\"\n   */\n  async handleClick() {\n    this.toggleChecked()\n  }\n\n  @Method()\n  /**\n   * Handler para o evento \"onKeyDown\"\n   */\n  async handleKeyDown(event: KeyboardEvent) {\n    // Permite alternar o estado apenas quando a tecla pressionada é 'Space'\n    if (event.code === 'Space') {\n      event.preventDefault() // Impede o comportamento padrão da tecla 'Space'\n      this.toggleChecked()\n    }\n  }\n\n  /**\n   * Controla o comportamento de alternar o estado checked.\n   */\n  private toggleChecked() {\n    if (this.toggle) {\n      this.checked = !this.checked\n      this.brDidCheckedChange.emit({ value: this.value, checked: this.checked })\n    }\n  }\n\n  /**\n   * Determina um id para o radio.\n   */\n  private getComputedId(): string {\n    return this.customId ? this.customId : this.name\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <div\n          class={this.getCssClassMap()}\n          onClick={() => this.handleClick()}\n          onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n          <input\n            aria-label={this.label}\n            type=\"radio\"\n            id={this.getComputedId()}\n            name={this.name}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            onClick={(event) => event.stopPropagation()}\n            {...this.inheritedAttributes}\n          />\n          <label htmlFor={this.getComputedId()}>{this._slotDefault ? <slot></slot> : this.label}</label>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *  Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n\n@Component({\n  tag: 'br-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio {\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: HTMLBrRadioElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Define o estado de seleção do radio.\n   * Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false\n\n  /**\n   * Desativa o radio, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false\n\n  /**\n   * Indica a validade do radio.\n   * Valores possíveis:\n   * - 'valid': O radio é considerado válido.\n   * - 'invalid': O radio é considerado inválido.\n   * Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.\n   */\n  @Prop({ reflect: true }) state: 'valid' | 'invalid' = null\n\n  /**\n   * Define se o label associado ao radio deve ser oculto.\n   * Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional.\n   */\n  @Prop({ reflect: true, attribute: 'has-hidden-label' }) hasHiddenLabel: boolean = false\n\n  /**\n   * Define o nome do radio, que é utilizado para agrupar radios em formulários e identificar o campo.\n   * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n   */\n\n  @Prop({ reflect: true }) name!: string\n\n  /**\n   * Texto descritivo exibido à direita do radio.\n   * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`).\n   * Esse valor é enviado com o formulário quando o radio está selecionado.\n   * **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n   */\n  @Prop({ reflect: true }) value: any\n\n  /**\n   * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio.\n   * Se não for fornecido, o ID será o mesmo valor atribuído à propriedade `name`.\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string\n\n  /**\n   * Indica se o radio pode alternar seu estado checked\n   */\n  @Prop({ reflect: true }) toggle: boolean = false\n\n  /**\n   * Propriedade que vai guardar o valor da validação do slot\n   */\n  @State() _slotDefault: boolean = false\n\n  // Faz a marcação do checkbox de acordo com a seleção do componente item do tipo is-interactive\n  @Listen('brDidSelect', { target: 'document' })\n  handleItemInteractiveSelect(event: CustomEvent) {\n    // Verifica se o evento é de um pai correto\n    const target = event.target as HTMLElement\n    const brItem = target.closest('br-item') as HTMLElement\n\n    if (brItem && this.el.parentElement?.contains(brItem)) {\n      this.checked = event.detail.selected\n    }\n\n    event.stopPropagation()\n  }\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.hasSlotContentDefault()\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 hasSlotContentDefault(): any {\n    this._slotDefault = this.el.innerHTML !== ''\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-radio': true,\n      valid: this.state === 'valid',\n      invalid: this.state === 'invalid',\n      disabled: this.disabled,\n      'hidden-label': this.hasHiddenLabel,\n    }\n  }\n\n  private inheritedAttributes: Attributes = {}\n\n  /**\n   * Componente teve seu estado \"checked\" alterado\n   */\n  @Event() brDidCheckedChange: EventEmitter<{ value: boolean; checked: boolean }>\n\n  private readonly handleClick = () => {\n    this.toggleChecked()\n  }\n\n  private readonly handleKeyDown = (event: KeyboardEvent) => {\n    // Permite alternar o estado apenas quando a tecla pressionada é 'Space'\n    if (event.code === 'Space') {\n      event.preventDefault() // Impede o comportamento padrão da tecla 'Space'\n      this.toggleChecked()\n    }\n  }\n\n  /**\n   * Controla o comportamento de alternar o estado checked.\n   */\n  private readonly toggleChecked = () => {\n    if (this.toggle) {\n      this.checked = !this.checked\n      this.brDidCheckedChange.emit({ value: this.value, checked: this.checked })\n    }\n  }\n\n  /**\n   * Determina um id para o radio.\n   */\n  private getComputedId(): string {\n    return this.customId?.length > 0 ? this.customId : this.name\n  }\n\n  private readonly stopPropagation = (event: Event) => {\n    event.stopPropagation()\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <div class={this.getCssClassMap()} onClick={this.handleClick} onKeyDown={this.handleKeyDown}>\n          <input\n            aria-label={this.label}\n            type=\"radio\"\n            id={this.getComputedId()}\n            name={this.name}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            onClick={this.stopPropagation}\n            {...this.inheritedAttributes}\n          />\n          <label htmlFor={this.getComputedId()}>{this._slotDefault ? <slot></slot> : this.label}</label>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/switch/switch.css

@@ -115,6 +115,30 @@ progress {
   display: none;
 }
 
+.d-flex {
+  display: flex !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+.col,
+[class*=col-] {
+  padding-left: calc(var(--grid-gutter) * 0.5);
+  padding-right: calc(var(--grid-gutter) * 0.5);
+  width: 100%;
+}
+
+.col {
+  flex: 1 0 0%;
+  min-width: 8.3333333333%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
 .row {
   --grid-gutter: var(--grid-portrait-gutter);
   display: flex;
@@ -155,6 +179,16 @@ progress {
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }
+
+.py-3 {
+  padding-bottom: var(--spacing-scale-2x) !important;
+  padding-top: var(--spacing-scale-2x) !important;
+}
+
+.py-4 {
+  padding-bottom: var(--spacing-scale-3x) !important;
+  padding-top: var(--spacing-scale-3x) !important;
+}
 body {
   --bg-color: var(--background);
   --bg-color-rgb: var(--background-rgb);
@@ -222,6 +256,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 {
@@ -315,6 +354,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-switch {
   --switch-height: var(--switch-height-medium);
   --switch-width: var(--switch-width-medium);