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

package/dist/esm/br-radio.entry.js

@@ -1,7 +1,16 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c7037515.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cad6e6c3.js';
 import { i as inheritAriaAttributes } from './inherited-attributes-c856c729.js';
 
-const radioCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{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;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 992px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 1280px){.row{--grid-gutter:var(--grid-desktop-gutter)}}@media (min-width: 1600px){.row{--grid-gutter:var(--grid-tv-gutter)}}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.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);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}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{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);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}.bg-support-01{--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);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{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;--radio-bullet-position:calc((var(--radio-size) - var(--radio-bullet-size)) * 0.5);display:block}.br-radio+.br-radio{margin-top:var(--spacing-scale-base)}.br-radio input{opacity:0;position:absolute}.br-radio input+label{cursor:pointer;display:inline-block;margin-bottom:0;min-height:var(--radio-size);min-width:var(--radio-size);padding-left:calc(var(--spacing-scale-base) + var(--radio-size));position:relative}.br-radio input+label::before{background:var(--background);border:1px solid var(--border-color);border-radius:50%;content:\"\";height:var(--radio-size);left:0;position:absolute;top:-1px;width:var(--radio-size)}.br-radio input+label:empty{padding:0}.br-radio input+label:empty::before{top:0}.br-radio label{font-weight:var(--font-weight-medium)}.br-radio input:checked+label::after{background:var(--selected);border:7px solid var(--selected);border-radius:50%;content:\"\";height:var(--radio-bullet-size);left:var(--radio-bullet-position);position:absolute;right:0;top:calc(var(--radio-bullet-position) - 1px);width:var(--radio-bullet-size)}.br-radio input:checked+label:empty::after{top:var(--radio-bullet-position)}.br-radio.valid input+label::before,.br-radio[valid] input+label::before{border-color:var(--success)}.br-radio.invalid input+label::before,.br-radio[invalid] input+label::before{border-color:var(--danger)}.br-radio.small input+label,.br-radio[small] input+label{line-height:var(--spacing-scale-2xh);min-height:var(--spacing-scale-2xh)}.br-radio.small input+label::before,.br-radio[small] input+label::before{height:var(--spacing-scale-2xh);width:var(--spacing-scale-2xh)}.br-radio.small input:checked+label::after,.br-radio[small] input:checked+label::after{border-width:4px;height:10px;width:10px}.br-radio input:invalid+label::before{border-color:var(--danger)}.br-radio input:focus-visible:checked+label::before,.br-radio input:focus-visible+label::before{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-radio input:hover:not(:disabled)+label::before{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-radio.dark-mode,.br-radio.dark-mode label{color:var(--color-dark)}:host{display:block}.br-radio.hidden-label label{padding-left:calc(var(--checkbox-size) + var(--surface-width-md) * 2);text-indent:-10000px;white-space:nowrap;width:0}";
+function generateUniqueId(prefix = 'id', randomPartLength = 30) {
+    // Cria uma parte aleatória do comprimento desejado
+    const randomPart = Array.from(crypto.getRandomValues(new Uint8Array(randomPartLength)))
+        .map((num) => (num % 16).toString(16)) // Converte os números para hexadecimal
+        .join(''); // Junta os caracteres para criar uma string
+    // Concatena o prefixo e a parte aleatória
+    return `${prefix}-${randomPart}`;
+}
+
+const radioCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{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}.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;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@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{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mb-3{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}.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);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}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{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.bg-support-01{--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);background:var(--color-support-01) !important}.text-nowrap{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);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{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;--radio-bullet-position:calc((var(--radio-size) - var(--radio-bullet-size)) * 0.5);display:block}.br-radio+.br-radio{margin-top:var(--spacing-scale-base)}.br-radio input{opacity:0;position:absolute}.br-radio input+label{cursor:pointer;display:inline-block;margin-bottom:0;min-height:var(--radio-size);min-width:var(--radio-size);padding-left:calc(var(--spacing-scale-base) + var(--radio-size));position:relative}.br-radio input+label::before{background:var(--background);border:1px solid var(--border-color);border-radius:50%;content:\"\";height:var(--radio-size);left:0;position:absolute;top:-1px;width:var(--radio-size)}.br-radio input+label:empty{padding:0}.br-radio input+label:empty::before{top:0}.br-radio label{font-weight:var(--font-weight-medium)}.br-radio input:checked+label::after{background:var(--selected);border:7px solid var(--selected);border-radius:50%;content:\"\";height:var(--radio-bullet-size);left:var(--radio-bullet-position);position:absolute;right:0;top:calc(var(--radio-bullet-position) - 1px);width:var(--radio-bullet-size)}.br-radio input:checked+label:empty::after{top:var(--radio-bullet-position)}.br-radio.valid input+label::before,.br-radio[valid] input+label::before{border-color:var(--success)}.br-radio.invalid input+label::before,.br-radio[invalid] input+label::before{border-color:var(--danger)}.br-radio.small input+label,.br-radio[small] input+label{line-height:var(--spacing-scale-2xh);min-height:var(--spacing-scale-2xh)}.br-radio.small input+label::before,.br-radio[small] input+label::before{height:var(--spacing-scale-2xh);width:var(--spacing-scale-2xh)}.br-radio.small input:checked+label::after,.br-radio[small] input:checked+label::after{border-width:4px;height:10px;width:10px}.br-radio input:invalid+label::before{border-color:var(--danger)}.br-radio input:focus-visible:checked+label::before,.br-radio input:focus-visible+label::before{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-radio input:hover:not(:disabled)+label::before{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-radio.dark-mode,.br-radio.dark-mode label{color:var(--color-dark)}:host{display:block}.br-radio.hidden-label label{padding-left:calc(var(--checkbox-size) + var(--surface-width-md) * 2);text-indent:-10000px;white-space:nowrap;width:0}";
 const BrRadioStyle0 = radioCss;
 
 const Radio = class {
@@ -20,7 +29,7 @@ const Radio = class {
         this.brFormDisabledCallback = createEvent(this, "brFormDisabledCallback", 7);
         this.brFormResetCallback = createEvent(this, "brFormResetCallback", 7);
         this.brFormStateRestoreCallback = createEvent(this, "brFormStateRestoreCallback", 7);
-        this.brDidCheckedChange = createEvent(this, "brDidCheckedChange", 7);
+        this.brDidChange = createEvent(this, "brDidChange", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.elementInternals = hostRef.$hostElement$["s-ei"];
         }
@@ -29,28 +38,21 @@ const Radio = class {
             hostRef.$hostElement$["s-ei"] = this.elementInternals;
         }
         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;
@@ -59,25 +61,20 @@ const Radio = class {
         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);
     }
@@ -114,8 +111,12 @@ const Radio = class {
     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 {
@@ -131,13 +132,16 @@ const Radio = class {
      */
     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 formAssociated() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "customId": ["onCustomIdChange"]
+    }; }
 };
 Radio.style = BrRadioStyle0;
 

package/dist/esm/br-radio.entry.js.map

@@ -1 +1 @@
-{"file":"br-radio.entry.js","mappings":"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","names":[],"sources":["src/components/radio/radio.scss?tag=br-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/radio/radio.scss\";\n\n:host {\n  display: block;\n}\n\n.br-radio.hidden-label {\n  label {\n    padding-left: calc(var(--checkbox-size) + var(--surface-width-md)* 2);\n    text-indent: -10000px;\n    white-space: nowrap;\n    width: 0;\n  }\n}\n  ","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":"br-radio.entry.js","mappings":"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","names":[],"sources":["src/utils/unique-id-generator.ts","src/components/radio/radio.scss?tag=br-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["export default function generateUniqueId(prefix: string = 'id', randomPartLength: number = 30): string {\n  // Cria uma parte aleatória do comprimento desejado\n  const randomPart = Array.from(crypto.getRandomValues(new Uint8Array(randomPartLength)))\n    .map((num) => (num % 16).toString(16)) // Converte os números para hexadecimal\n    .join('') // Junta os caracteres para criar uma string\n\n  // Concatena o prefixo e a parte aleatória\n  return `${prefix}-${randomPart}`\n}\n","@import \"../../../../../node_modules/@govbr-ds/core/src/components/radio/radio.scss\";\n\n:host {\n  display: block;\n}\n\n.br-radio.hidden-label {\n  label {\n    padding-left: calc(var(--checkbox-size) + var(--surface-width-md)* 2);\n    text-indent: -10000px;\n    white-space: nowrap;\n    width: 0;\n  }\n}\n  ","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"],"version":3}

package/dist/esm/br-switch.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c7037515.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cad6e6c3.js';
 import { i as inheritAriaAttributes } from './inherited-attributes-c856c729.js';
 import { v as v4 } from './v4-23648a96.js';
 
-const switchCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{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;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@media (min-width: 576px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 992px){.row{--grid-gutter:var(--grid-tablet-gutter)}}@media (min-width: 1280px){.row{--grid-gutter:var(--grid-desktop-gutter)}}@media (min-width: 1600px){.row{--grid-gutter:var(--grid-tv-gutter)}}.mr-1{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.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);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}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{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);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}.bg-support-01{--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);background:var(--color-support-01) !important}.text-nowrap{white-space:nowrap !important}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{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);--switch-toggle-size:var(--switch-toggle-medium);--switch-icon-size:var(--switch-icon-medium);--switch-height-small:24px;--switch-height-medium:30px;--switch-height-large:36px;--switch-width-small:40px;--switch-width-medium:52px;--switch-width-large:64px;--switch-toggle-small:16px;--switch-toggle-medium:22px;--switch-toggle-large:28px;--switch-icon-small:var(--icon-size-xs);--switch-icon-medium:var(--icon-size-sm);--switch-icon-large:var(--icon-size-base);display:inline-flex;min-height:var(--switch-height);}.br-switch input{opacity:0;position:absolute}.br-switch input+label{align-items:center;color:var(--color);cursor:pointer;display:inline-flex;font-size:var(--font-size-scale-base);margin-bottom:0;position:relative}.br-switch input+label::before{background:var(--background-light);border:1px solid var(--border-color);border-radius:100em;content:\"\";height:var(--switch-height);position:absolute;width:var(--switch-width)}.br-switch input+label::after{background-color:var(--off);border-radius:50%;content:\"\";height:var(--switch-toggle-size);position:absolute;transition:all 0.3s ease-in-out;width:var(--switch-toggle-size)}.br-switch input:checked+label::after{background-color:var(--on)}.br-switch input+label{padding-right:calc(var(--spacing-scale-2x) + var(--switch-width))}.br-switch input+label:empty{padding-right:var(--switch-width)}.br-switch input+label::before{right:0}.br-switch input+label::after{right:calc(4px + var(--switch-toggle-size))}.br-switch input:checked+label::after{right:4px}.br-switch.right input+label{padding-left:calc(var(--spacing-scale-2x) + var(--switch-width));padding-right:0}.br-switch.right input+label::before{left:0}.br-switch.right input+label::after{left:4px}.br-switch.right input:checked+label::after{left:calc(var(--switch-width) - var(--switch-toggle-size) - 4px)}.br-switch.top{min-height:calc(var(--switch-height) * 2)}.br-switch.top input+label{align-items:flex-start;padding-right:0}.br-switch.top input+label::before{bottom:0;left:0}.br-switch.top input+label::after{bottom:4px;left:4px}.br-switch.top input:checked+label::after{left:calc(var(--switch-width) - var(--switch-toggle-size) - 4px)}.br-switch.small{--switch-height:var(--switch-height-small);--switch-width:var(--switch-width-small);--switch-toggle-size:var(--switch-toggle-small);--switch-icon-size:var(--switch-icon-small)}.br-switch.medium{--switch-height:var(--switch-height-medium);--switch-width:var(--switch-width-medium);--switch-toggle-size:var(--switch-toggle-medium);--switch-icon-size:var(--switch-icon-medium)}.br-switch.large{--switch-height:var(--switch-height-large);--switch-width:var(--switch-width-large);--switch-toggle-size:var(--switch-toggle-large);--switch-icon-size:var(--switch-icon-large)}.br-switch input~.switch-data{align-self:center;color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);margin-left:8px}.br-switch input~.switch-data::before{content:attr(data-disabled)}.br-switch input:checked~.switch-data{color:var(--color)}.br-switch input:checked~.switch-data::before{content:attr(data-enabled)}.br-switch.icon input+label::after{align-items:center;color:var(--color-dark);content:\"\\f00d\";display:inline-flex;font-family:\"Font Awesome 5 Free\", sans-serif;font-size:var(--switch-icon-size);font-weight:var(--font-weight-black);justify-content:center}.br-switch.icon input:checked+label::after{content:\"\\f00c\"}.br-switch input:focus-visible+label::before{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-switch input:hover:not([disabled]):checked+label::before{background-image:linear-gradient(rgba(var(--on-rgb), var(--hover)), rgba(var(--on-rgb), var(--hover)))}.br-switch input:hover:not([disabled]):not(:checked)+label::before{background-image:linear-gradient(rgba(var(--off-rgb), var(--hover)), rgba(var(--off-rgb), var(--hover)))}.br-switch input:active:not([disabled]):checked+label::before{background-image:linear-gradient(rgba(var(--on-rgb), var(--pressed)), rgba(var(--on-rgb), var(--pressed)))}.br-switch input:active:not([disabled]):not(:checked)+label::before{background-image:linear-gradient(rgba(var(--off-rgb), var(--pressed)), rgba(var(--off-rgb), var(--pressed)))}.br-switch.dark-mode,.br-switch.dark-mode label{color:var(--color-dark)}:host{display:block}";
+const switchCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{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}.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;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@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{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mb-3{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}.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);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}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{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.bg-support-01{--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);background:var(--color-support-01) !important}.text-nowrap{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);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{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);--switch-toggle-size:var(--switch-toggle-medium);--switch-icon-size:var(--switch-icon-medium);--switch-height-small:24px;--switch-height-medium:30px;--switch-height-large:36px;--switch-width-small:40px;--switch-width-medium:52px;--switch-width-large:64px;--switch-toggle-small:16px;--switch-toggle-medium:22px;--switch-toggle-large:28px;--switch-icon-small:var(--icon-size-xs);--switch-icon-medium:var(--icon-size-sm);--switch-icon-large:var(--icon-size-base);display:inline-flex;min-height:var(--switch-height);}.br-switch input{opacity:0;position:absolute}.br-switch input+label{align-items:center;color:var(--color);cursor:pointer;display:inline-flex;font-size:var(--font-size-scale-base);margin-bottom:0;position:relative}.br-switch input+label::before{background:var(--background-light);border:1px solid var(--border-color);border-radius:100em;content:\"\";height:var(--switch-height);position:absolute;width:var(--switch-width)}.br-switch input+label::after{background-color:var(--off);border-radius:50%;content:\"\";height:var(--switch-toggle-size);position:absolute;transition:all 0.3s ease-in-out;width:var(--switch-toggle-size)}.br-switch input:checked+label::after{background-color:var(--on)}.br-switch input+label{padding-right:calc(var(--spacing-scale-2x) + var(--switch-width))}.br-switch input+label:empty{padding-right:var(--switch-width)}.br-switch input+label::before{right:0}.br-switch input+label::after{right:calc(4px + var(--switch-toggle-size))}.br-switch input:checked+label::after{right:4px}.br-switch.right input+label{padding-left:calc(var(--spacing-scale-2x) + var(--switch-width));padding-right:0}.br-switch.right input+label::before{left:0}.br-switch.right input+label::after{left:4px}.br-switch.right input:checked+label::after{left:calc(var(--switch-width) - var(--switch-toggle-size) - 4px)}.br-switch.top{min-height:calc(var(--switch-height) * 2)}.br-switch.top input+label{align-items:flex-start;padding-right:0}.br-switch.top input+label::before{bottom:0;left:0}.br-switch.top input+label::after{bottom:4px;left:4px}.br-switch.top input:checked+label::after{left:calc(var(--switch-width) - var(--switch-toggle-size) - 4px)}.br-switch.small{--switch-height:var(--switch-height-small);--switch-width:var(--switch-width-small);--switch-toggle-size:var(--switch-toggle-small);--switch-icon-size:var(--switch-icon-small)}.br-switch.medium{--switch-height:var(--switch-height-medium);--switch-width:var(--switch-width-medium);--switch-toggle-size:var(--switch-toggle-medium);--switch-icon-size:var(--switch-icon-medium)}.br-switch.large{--switch-height:var(--switch-height-large);--switch-width:var(--switch-width-large);--switch-toggle-size:var(--switch-toggle-large);--switch-icon-size:var(--switch-icon-large)}.br-switch input~.switch-data{align-self:center;color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);margin-left:8px}.br-switch input~.switch-data::before{content:attr(data-disabled)}.br-switch input:checked~.switch-data{color:var(--color)}.br-switch input:checked~.switch-data::before{content:attr(data-enabled)}.br-switch.icon input+label::after{align-items:center;color:var(--color-dark);content:\"\\f00d\";display:inline-flex;font-family:\"Font Awesome 5 Free\", sans-serif;font-size:var(--switch-icon-size);font-weight:var(--font-weight-black);justify-content:center}.br-switch.icon input:checked+label::after{content:\"\\f00c\"}.br-switch input:focus-visible+label::before{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-switch input:hover:not([disabled]):checked+label::before{background-image:linear-gradient(rgba(var(--on-rgb), var(--hover)), rgba(var(--on-rgb), var(--hover)))}.br-switch input:hover:not([disabled]):not(:checked)+label::before{background-image:linear-gradient(rgba(var(--off-rgb), var(--hover)), rgba(var(--off-rgb), var(--hover)))}.br-switch input:active:not([disabled]):checked+label::before{background-image:linear-gradient(rgba(var(--on-rgb), var(--pressed)), rgba(var(--on-rgb), var(--pressed)))}.br-switch input:active:not([disabled]):not(:checked)+label::before{background-image:linear-gradient(rgba(var(--off-rgb), var(--pressed)), rgba(var(--off-rgb), var(--pressed)))}.br-switch.dark-mode,.br-switch.dark-mode label{color:var(--color-dark)}:host{display:block}";
 const BrSwitchStyle0 = switchCss;
 
 const Switch = class {
@@ -120,7 +120,7 @@ const Switch = class {
         };
     }
     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 formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/br-switch.entry.js.map

@@ -1 +1 @@
-{"file":"br-switch.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/switch/switch.scss?tag=br-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/switch/switch.scss\";\n\n:host {\n  display: block;\n}\n","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":"br-switch.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/switch/switch.scss?tag=br-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@import \"../../../../../node_modules/@govbr-ds/core/src/components/switch/switch.scss\";\n\n:host {\n  display: block;\n}\n","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"],"version":3}

package/dist/esm/br-textarea.entry.js

@@ -0,0 +1,154 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cad6e6c3.js';
+import { i as inheritAriaAttributes } from './inherited-attributes-c856c729.js';
+import { v as v4 } from './v4-23648a96.js';
+
+const textareaCss = "*,*::before,*::after{box-sizing:border-box}html{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a{background-color:transparent}strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}[hidden]{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}.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;flex-wrap:wrap;margin-left:calc(var(--grid-gutter) * -0.5);margin-right:calc(var(--grid-gutter) * -0.5)}@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{margin-right:var(--spacing-scale-half) !important}.mr-2{margin-right:var(--spacing-scale-base) !important}.mb-3{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}.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);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half);color:var(--interactive);text-decoration:none}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}button{cursor:pointer}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{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.bg-support-01{--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);background:var(--color-support-01) !important}.text-nowrap{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);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{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-textarea{--textarea-padding:var(--textarea-medium);--textarea-small:var(--spacing-scale-base);--textarea-medium:var(--spacing-scale-baseh);--textarea-large:var(--spacing-scale-2x);color:var(--color)}.br-textarea label{display:inline-block;margin-bottom:var(--spacing-scale-half)}.br-textarea textarea{background:var(--background-light);border:1px solid var(--border-color-alternative);border-radius:6px;color:var(--color);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);padding:var(--textarea-padding);width:100%}.br-textarea.small textarea{--textarea-padding:var(--textarea-small)}.br-textarea.medium textarea{--textarea-padding:var(--textarea-medium)}.br-textarea.large textarea{--textarea-padding:var(--textarea-large)}.br-textarea.success textarea{border-color:var(--success);border-width:2px}.br-textarea.danger textarea{border-color:var(--danger);border-width:2px}.br-textarea.warning textarea{border-color:var(--warning);border-width:2px}.br-textarea.info textarea{border-color:var(--info);border-width:2px}.br-textarea textarea:focus,.br-textarea textarea:focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-textarea textarea:hover:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-textarea.dark-mode,.br-textarea.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}.br-textarea.dark-mode textarea{color:var(--color-light)}:host{display:block;box-sizing:border-box;font-family:Rawline, Raleway, sans-serif}";
+const BrTextareaStyle0 = textareaCss;
+
+var Density;
+(function (Density) {
+    Density["Small"] = "small";
+    Density["Medium"] = "medium";
+    Density["Large"] = "large";
+})(Density || (Density = {}));
+var States;
+(function (States) {
+    States["Danger"] = "danger";
+    States["Success"] = "success";
+    States["Warning"] = "warning";
+})(States || (States = {}));
+const Textarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.brDidConnect = createEvent(this, "brDidConnect", 7);
+        this.brWillLoad = createEvent(this, "brWillLoad", 7);
+        this.brDidLoad = createEvent(this, "brDidLoad", 7);
+        this.brWillRender = createEvent(this, "brWillRender", 7);
+        this.brDidRender = createEvent(this, "brDidRender", 7);
+        this.brShouldUpdate = createEvent(this, "brShouldUpdate", 7);
+        this.brWillUpdate = createEvent(this, "brWillUpdate", 7);
+        this.brDidUpdate = createEvent(this, "brDidUpdate", 7);
+        this.brDidDisconnect = createEvent(this, "brDidDisconnect", 7);
+        this.brFormAssociatedCallback = createEvent(this, "brFormAssociatedCallback", 7);
+        this.brFormDisabledCallback = createEvent(this, "brFormDisabledCallback", 7);
+        this.brFormResetCallback = createEvent(this, "brFormResetCallback", 7);
+        this.brFormStateRestoreCallback = createEvent(this, "brFormStateRestoreCallback", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.elementInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.elementInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.elementInternals;
+        }
+        this.inheritedAttributes = {};
+        this.value = '';
+        this.label = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.maxlength = 0;
+        this.states = null;
+        this.density = Density.Medium;
+        this.isDarkMode = false;
+        this.isLabelLeft = false;
+        this.currentLength = 0;
+        this.defaultId = `br-textarea-${v4()}`;
+    }
+    connectedCallback() {
+        this.brDidConnect.emit();
+    }
+    componentWillLoad() {
+        this.currentLength = this.value.length;
+        this.brWillLoad.emit();
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    componentDidLoad() {
+        this.brDidLoad.emit();
+    }
+    componentWillRender() {
+        this.brWillRender.emit();
+    }
+    componentDidRender() {
+        this.brDidRender.emit();
+    }
+    componentShouldUpdate() {
+        this.brShouldUpdate.emit();
+    }
+    componentWillUpdate() {
+        this.brWillUpdate.emit();
+    }
+    componentDidUpdate() {
+        this.brDidUpdate.emit();
+    }
+    disconnectedCallback() {
+        this.brDidDisconnect.emit();
+    }
+    formAssociatedCallback(form) {
+        this.brFormAssociatedCallback.emit(form);
+    }
+    formDisabledCallback(disabled) {
+        this.brFormDisabledCallback.emit(disabled);
+    }
+    formResetCallback() {
+        this.brFormResetCallback.emit();
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.brFormStateRestoreCallback.emit([state, _mode]);
+    }
+    valueChanged() {
+        this.currentLength = this.value.length;
+    }
+    /**
+     * Manipula a mudança de valor do textarea. Atualiza o valor e emite um evento de mudança.
+     * @param event - O evento de entrada do textarea.
+     */
+    handleChange(event) {
+        const textarea = event.target;
+        this.value = textarea.value;
+        this.currentLength = this.value.length;
+        this.emitValueChange();
+    }
+    /**
+     * Define um novo valor para o textarea.
+     * @param newValue - O novo valor a ser definido.
+     */
+    async setValue(newValue) {
+        this.value = newValue;
+        this.currentLength = this.value.length;
+        this.emitValueChange();
+    }
+    emitValueChange() {
+        const changeEvent = new CustomEvent('valueChange', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        });
+        this.el.dispatchEvent(changeEvent);
+    }
+    getCssClassMap() {
+        return {
+            'br-textarea': true,
+            'dark-mode': this.isDarkMode,
+            small: this.density === Density.Small,
+            medium: this.density === Density.Medium,
+            large: this.density === Density.Large,
+            success: this.states === States.Success,
+            danger: this.states === States.Danger,
+            warning: this.states === States.Warning,
+        };
+    }
+    render() {
+        const caracteresRestantes = this.maxlength - this.currentLength;
+        const mostrarLimite = this.currentLength === 0;
+        return (h(Host, { key: '25a8d99b601bbd44f1058d89de4c8c683defe797' }, h("div", Object.assign({ key: 'e1c917d6f46b8f416f44ec2e6725a0ab0b0317ef', class: this.getCssClassMap() }, this.inheritedAttributes), h("div", { key: 'b83093202871a78d7b8d965d12be0c035852d626', class: this.isLabelLeft ? 'row' : '' }, this.isLabelLeft ? (h("div", { class: "col-auto pt-half" }, h("label", { htmlFor: this.defaultId }, this.label))) : (h("label", { htmlFor: this.defaultId }, this.label)), h("div", { key: '6ea04b8adf07c33b9c417a2d3ae0aa0a9aaf8c29', class: this.isLabelLeft ? 'col' : '' }, h("textarea", Object.assign({ key: 'c60aef3d50689757cc9d81b669fe2126146b574c', id: this.defaultId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleChange.bind(this) }, (this.maxlength > 0 ? { maxLength: this.maxlength } : {}))), h("div", { key: 'f8f18f3525d711e54f92526f308b3d4bf8d10c31', class: "text-base mt-1" }, this.maxlength > 0 && (h("div", { key: 'f8c062d5fca8d1e14aa9e340bdb397951b78ff06' }, mostrarLimite ? (h("span", { class: "limit", "aria-live": "polite" }, "Limite m\u00E1ximo de ", h("strong", null, this.maxlength), " caracteres")) : (h("span", { class: "restantes", "aria-live": "polite", role: "status", id: "limitmax" }, "Restam ", h("strong", null, caracteresRestantes), " caracteres"))))), h("slot", { key: 'cba00d317f4d7717dc3475d433ebc9a2e3483529' }))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+};
+Textarea.style = BrTextareaStyle0;
+
+export { Textarea as br_textarea };
+
+//# sourceMappingURL=br-textarea.entry.js.map