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

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

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -38,7 +33,8 @@ img {
 }
 
 button,
-input {
+input,
+textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: var(--font-line-height-medium);
@@ -82,6 +78,10 @@ progress {
   vertical-align: baseline;
 }
 
+textarea {
+  overflow: auto;
+}
+
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
@@ -139,6 +139,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 +159,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 +219,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;
@@ -295,6 +338,7 @@ label,
 }
 
 input,
+textarea,
 .input {
   color: var(--color-light);
   font-size: var(--font-size-scale-up-01);
@@ -303,19 +347,6 @@ input,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }
@@ -338,6 +369,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);

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

@@ -1,5 +1,6 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+import generateUniqueId from "../../utils/unique-id-generator";
 /**
  *  Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).
  *
@@ -8,28 +9,21 @@ 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.
+         * Handler para o event "click"
+         * @param event Objeto Event
          */
-        this.toggleChecked = () => {
-            if (this.toggle) {
-                this.checked = !this.checked;
-                this.brDidCheckedChange.emit({ value: this.value, checked: this.checked });
-            }
-        };
-        this.stopPropagation = (event) => {
+        this.onClick = (event) => {
             event.stopPropagation();
+            this.checked = event.target.checked;
+        };
+        /**
+         * Handler para o evento "change"
+         */
+        this.onChange = () => {
+            this.brDidChange.emit({ id: this.computedId, name: this.name, value: this.value, checked: this.checked });
         };
+        this.computedId = undefined;
         this.checked = false;
         this.disabled = false;
         this.state = null;
@@ -38,25 +32,20 @@ export class Radio {
         this.label = undefined;
         this.value = undefined;
         this.customId = undefined;
-        this.toggle = false;
-        this._slotDefault = false;
     }
-    // Faz a marcação do checkbox de acordo com a seleção do componente item do tipo is-interactive
-    handleItemInteractiveSelect(event) {
-        var _a;
-        // Verifica se o evento é de um pai correto
-        const target = event.target;
-        const brItem = target.closest('br-item');
-        if (brItem && ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.contains(brItem))) {
-            this.checked = event.detail.selected;
+    onCustomIdChange(newValue) {
+        if (newValue) {
+            this.computedId = newValue;
+        }
+        else {
+            this.computedId = generateUniqueId('radio', 8);
         }
-        event.stopPropagation();
     }
     connectedCallback() {
+        this.getComputedId();
         this.brDidConnect.emit();
     }
     componentWillLoad() {
-        this.hasSlotContentDefault();
         this.brWillLoad.emit();
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -93,8 +82,12 @@ export class Radio {
     formStateRestoreCallback(state, _mode) {
         this.brFormStateRestoreCallback.emit([state, _mode]);
     }
-    hasSlotContentDefault() {
-        this._slotDefault = this.el.innerHTML !== '';
+    // Ouvinte para o evento "brDidChange"
+    onBrDidChange(event) {
+        // If the event is from another radio with the same name, deselect this one
+        if (event.detail.id !== this.computedId && event.detail.name === this.name) {
+            this.checked = false;
+        }
     }
     getCssClassMap() {
         return {
@@ -110,10 +103,10 @@ export class Radio {
      */
     getComputedId() {
         var _a;
-        return ((_a = this.customId) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.customId : this.name;
+        this.computedId = (_a = this.customId) !== null && _a !== void 0 ? _a : generateUniqueId('radio', 8);
     }
     render() {
-        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))));
+        return (h(Host, { key: '157fbced7af9781ebec0d96ce5046d623e2d585d', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'f34f4954e2369d118ef3af1f41ca96883717830e', class: this.getCssClassMap() }, h("input", Object.assign({ key: 'b04146beacb034b9d86a5140d0a88019f5d21ba9', "aria-label": this.label, type: "radio", id: this.computedId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: this.onClick, onChange: this.onChange }, this.inheritedAttributes)), h("label", { key: 'ef29ce8a1ac83addc13723bfe97f0a65198c6133', htmlFor: this.computedId }, h("slot", { key: '1ad0ef5ad91ca8e7adeb7146fa3e270cb2f36a0f' }, this.label)))));
     }
     static get is() { return "br-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -265,34 +258,16 @@ export class Radio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Especifica o ID do componente, que \u00E9 usado para conectar o label correspondente ao radio.\nSe n\u00E3o for fornecido, o ID ser\u00E1 o mesmo valor atribu\u00EDdo \u00E0 propriedade `name`."
+                    "text": "Especifica o ID do componente, que \u00E9 usado para conectar o label correspondente ao radio.\nSe n\u00E3o for fornecido, o ID ser\u00E1 gerado automaticamente e de forma aleat\u00F3ria"
                 },
                 "attribute": "id",
                 "reflect": true
-            },
-            "toggle": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indica se o radio pode alternar seu estado checked"
-                },
-                "attribute": "toggle",
-                "reflect": true,
-                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "_slotDefault": {}
+            "computedId": {}
         };
     }
     static get events() {
@@ -509,8 +484,8 @@ export class Radio {
                     "references": {}
                 }
             }, {
-                "method": "brDidCheckedChange",
-                "name": "brDidCheckedChange",
+                "method": "brDidChange",
+                "name": "brDidChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -519,18 +494,24 @@ export class Radio {
                     "text": "Componente teve seu estado \"checked\" alterado"
                 },
                 "complexType": {
-                    "original": "{ value: boolean; checked: boolean }",
-                    "resolved": "{ value: boolean; checked: boolean; }",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "customId",
+                "methodName": "onCustomIdChange"
+            }];
+    }
     static get listeners() {
         return [{
-                "name": "brDidSelect",
-                "method": "handleItemInteractiveSelect",
-                "target": "document",
+                "name": "brDidChange",
+                "method": "onBrDidChange",
+                "target": "window",
                 "capture": false,
                 "passive": false
             }];

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, 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"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\nimport generateUniqueId from '../../utils/unique-id-generator'\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   * Contém o id usado internamente no componente\n   */\n  @State() computedId: string\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á gerado automaticamente e de forma aleatória\n   */\n  @Prop({ reflect: true, attribute: 'id' }) customId: string\n\n  @Watch('customId')\n  onCustomIdChange(newValue) {\n    if (newValue) {\n      this.computedId = newValue\n    } else {\n      this.computedId = generateUniqueId('radio', 8)\n    }\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.getComputedId()\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  /**\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  /**\n   * Componente teve seu estado \"checked\" alterado\n   */\n  @Event({ bubbles: true, composed: true }) brDidChange: EventEmitter\n\n  // Ouvinte para o evento \"brDidChange\"\n  @Listen('brDidChange', { target: 'window' })\n  onBrDidChange(event: CustomEvent) {\n    // If the event is from another radio with the same name, deselect this one\n    if (event.detail.id !== this.computedId && event.detail.name === this.name) {\n      this.checked = false\n    }\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   * Determina um id para o radio.\n   */\n  private getComputedId() {\n    this.computedId = this.customId ?? generateUniqueId('radio', 8)\n  }\n\n  /**\n   * Handler para o event \"click\"\n   * @param event Objeto Event\n   */\n  private onClick = (event: MouseEvent) => {\n    event.stopPropagation()\n    this.checked = (event.target as HTMLInputElement).checked\n  }\n\n  /**\n   * Handler para o evento \"change\"\n   */\n  private onChange = () => {\n    this.brDidChange.emit({ id: this.computedId, name: this.name, value: this.value, checked: this.checked })\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <div class={this.getCssClassMap()}>\n          <input\n            aria-label={this.label}\n            type=\"radio\"\n            id={this.computedId}\n            name={this.name}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            onClick={this.onClick}\n            onChange={this.onChange}\n            {...this.inheritedAttributes}\n          />\n          <label htmlFor={this.computedId}>\n            <slot>{this.label}</slot>\n          </label>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

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

@@ -24,11 +24,6 @@ strong {
   font-weight: bolder;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1em;
-}
-
 small {
   font-size: 80%;
 }
@@ -38,7 +33,8 @@ img {
 }
 
 button,
-input {
+input,
+textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: var(--font-line-height-medium);
@@ -82,6 +78,10 @@ progress {
   vertical-align: baseline;
 }
 
+textarea {
+  overflow: auto;
+}
+
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
@@ -139,6 +139,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 +159,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 +219,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;
@@ -295,6 +338,7 @@ label,
 }
 
 input,
+textarea,
 .input {
   color: var(--color-light);
   font-size: var(--font-size-scale-up-01);
@@ -303,19 +347,6 @@ input,
   margin-bottom: var(--spacing-scale-half);
 }
 
-code,
-.code {
-  background: var(--gray-5);
-  border-radius: 4px;
-  color: var(--gray-80);
-  display: inline-block;
-  font-family: monospace;
-  font-size: var(--font-size-scale-base);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-low);
-  padding: var(--spacing-scale-half);
-}
-
 .text-pure-0 {
   color: var(--pure-0) !important;
 }
@@ -338,6 +369,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);

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

@@ -99,7 +99,7 @@ export class Switch {
         };
     }
     render() {
-        return (h(Host, { key: 'e4b97fbd94a104ec3555678c2bc5d1e12dfdd6ca' }, h("div", Object.assign({ key: '44695b1dbbb7b5976699e326014fa1ffd2ab656a', class: this.getCssClassMap() }, this.inheritedAttributes), h("input", { key: 'a6bf042b187080e684a72f60ee634fa4719ce289', id: this._getComputedId(), type: "checkbox", name: this.name, checked: this._checkedValue, disabled: this.disabled, role: "switch", "aria-checked": this._checkedValue.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: this.handleCheckedChange }), h("label", { key: 'd1cf95c7464571ddcc9a87b7b0a7e19fdad00abc', htmlFor: this._getComputedId() }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: '73f1c58cae319b63541ddb28046f8b6c1d300087', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
+        return (h(Host, { key: 'd2cc950b9044ce062e96f3b1dd9eda0829d02b9e' }, h("div", Object.assign({ key: '8783b57e8133cb0f53354cf48eee863123c4197b', class: this.getCssClassMap() }, this.inheritedAttributes), h("input", { key: '396d817ecc1dca472abb3e95fe5869f266047dcc', id: this._getComputedId(), type: "checkbox", name: this.name, checked: this._checkedValue, disabled: this.disabled, role: "switch", "aria-checked": this._checkedValue.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: this.handleCheckedChange }), h("label", { key: 'b0c4dff57a94c2661859b18a9e55ee8a77d541a6', htmlFor: this._getComputedId() }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: '18f77feda3016dcd4c645cedd943312dcaa0db1a', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
     }
     static get is() { return "br-switch"; }
     static get encapsulation() { return "shadow"; }

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

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