@govbr-ds/webcomponents 2.2.0 → 2.3.0

package/dist/collection/components/pagination/pagination.js

@@ -50,10 +50,12 @@ const PAGINATION_VARIANTS = ['default', 'contextual'];
  * @part per-page - Parte para o seletor de itens por página na variante contextual.
  * @part per-page-container - Contêiner encaminhado do seletor de itens por página.
  * @part per-page-input - Campo encaminhado do seletor de itens por página.
+ * @part per-page-input-label - Rótulo encaminhado do seletor de itens por página.
  * @part per-page-list - Lista encaminhada do seletor de itens por página.
  * @part go-to - Parte para o seletor de navegação direta na variante contextual.
  * @part go-to-container - Contêiner encaminhado do seletor de navegação direta.
  * @part go-to-input - Campo encaminhado do seletor de navegação direta.
+ * @part go-to-input-label - Rótulo encaminhado do seletor de navegação direta.
  * @part go-to-list - Lista encaminhada do seletor de navegação direta.
  * @part prev-button - Parte para o botão de página anterior, usada para estilização via ::part().
  * @part prev-button-inner - Botão interno encaminhado da página anterior.
@@ -870,7 +872,7 @@ export class Pagination {
             this.handleGoToPageChange(event);
     }
     renderPerPageDropdown() {
-        return (h("br-select", { part: "per-page", exportparts: "container: per-page-container, input: per-page-input, input-container: per-page-input-container, input-field: per-page-input-field, input-action: per-page-input-action, list: per-page-list", label: this.perPageLabel, isInline: true, inputWidth: "88px", borderless: true, density: this.effectiveDensity, disabled: this.loading }, this.effectivePerPageOptions.map((perPageOption) => (h("br-select-option", { key: String(perPageOption), value: String(perPageOption), selected: perPageOption === this.effectivePerPage }, perPageOption)))));
+        return (h("br-select", { part: "per-page", exportparts: "container: per-page-container, input: per-page-input, input-container: per-page-input-container, input-field: per-page-input-field, input-label: per-page-input-label, input-action: per-page-input-action, list: per-page-list", label: this.perPageLabel, isInline: true, inputWidth: "88px", borderless: true, density: this.effectiveDensity, disabled: this.loading }, this.effectivePerPageOptions.map((perPageOption) => (h("br-select-option", { key: String(perPageOption), value: String(perPageOption), selected: perPageOption === this.effectivePerPage }, perPageOption)))));
     }
     renderPerPageSelect() {
         return (h("div", { class: "pagination-per-page", part: "per-page" }, this.renderPerPageDropdown()));
@@ -879,7 +881,7 @@ export class Pagination {
         const totalPages = this.getTotalPages();
         const largePageSet = totalPages > Pagination.LARGE_PAGE_THRESHOLD;
         const goToInputWidth = `${Math.max(88, String(totalPages).length * 16 + 48)}px`;
-        return (h("div", { class: "pagination-go-to-page d-none d-sm-flex ml-auto" }, h("br-select", { part: "go-to", exportparts: "container: go-to-container, input: go-to-input, input-container: go-to-input-container, input-field: go-to-input-field, input-action: go-to-input-action, list: go-to-list", label: this.goToPageLabel, options: largePageSet
+        return (h("div", { class: "pagination-go-to-page d-none d-sm-flex ml-auto" }, h("br-select", { part: "go-to", exportparts: "container: go-to-container, input: go-to-input, input-container: go-to-input-container, input-field: go-to-input-field, input-label: go-to-input-label, input-action: go-to-input-action, list: go-to-list", label: this.goToPageLabel, options: largePageSet
                 ? this.getWindowedGoToOptions(totalPages, this.goToSearchTerm)
                 : this.goToOptionsReady
                     ? this.getGoToOptions(totalPages)

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

@@ -134,10 +134,12 @@ export class SelectInput {
         return h("br-icon", { slot: "icon", iconName: "fa-solid:search", width: "16", height: "16", "aria-hidden": "true" });
     }
     renderDropdownIcon() {
-        return (h("br-icon", { "aria-hidden": "true", iconName: this.flipped ? 'fa-solid:angle-up' : 'fa-solid:angle-down', width: "16", height: "16", slot: "action" }));
+        return (h("br-icon", { "aria-hidden": "true",
+            // Mesmo par de expandir/recolher do restante do DS (collapse, menu, cookiebar).
+            iconName: this.flipped ? 'fa6-solid:chevron-up' : 'fa6-solid:chevron-down', width: "16", height: "16", slot: "action" }));
     }
     render() {
-        return (h(Host, { key: '615ae815e7b71d479a570e951b49a7e5a8f50087' }, h("div", { key: 'eb4ed35555a744723b01415170ab791e5ca1ea50', class: this.getCssClassMap(), part: "container" }, h("br-input", { key: '9f5940fd60cdbbb776277ff691fb6e6689d179cc', "action-tab-index": -1, "action-label": this.flipped ? 'Fechar opções' : 'Abrir opções', autocomplete: this.effectiveAutocomplete, borderless: this.borderless, "control-width": this.inputWidth, density: this.effectiveDensity, readonly: !this.filterable, "is-inline": this.isInline, label: this.label, name: this.name, placeholder: this.placeholder, required: this.required, ref: (el) => {
+        return (h(Host, { key: '589fdfe1c4e4d6832eba9c8942b9a4004eccb423' }, h("div", { key: '109b21a721797e2147e515c2cf880317217742b8', class: this.getCssClassMap(), part: "container" }, h("br-input", { key: 'd54183ce546a969a524ce2cde60b43aec10d1427', "action-tab-index": -1, "action-label": this.flipped ? 'Fechar opções' : 'Abrir opções', autocomplete: this.effectiveAutocomplete, borderless: this.borderless, "control-width": this.inputWidth, density: this.effectiveDensity, readonly: !this.filterable, "is-inline": this.isInline, label: this.label, name: this.name, placeholder: this.placeholder, required: this.required, ref: (el) => {
                 this.inputElement = el;
             }, value: this.value, disabled: this.disabled, onClick: this.handleClick, onInput: this.handleInput, onFocus: this.handleFocus, exportparts: "container:input, label:label, input:input, group:group, icon:icon, action:action, action-button:action-button" }, this.showSearchIcon && this.renderSearchIcon(), this.renderDropdownIcon()))));
     }

package/dist/collection/components/select/select.utils.js

@@ -5,7 +5,9 @@
 export function transitionSelection({ currentValues, multiple, value, selected, selectableValues = [], }) {
     const current = [...new Set(currentValues)];
     if (!multiple) {
-        const values = selected && value ? [value] : [];
+        // Desmarcar uma opção que não é a selecionada não altera a seleção simples. Isso cobre a
+        // troca A -> B feita por framework, que desmarca A antes ou depois de marcar B.
+        const values = selected && value ? [value] : current.filter((item) => item !== value).slice(0, 1);
         return { values, changed: values.length !== current.length || values[0] !== current[0] };
     }
     if (!value && selectableValues.length > 0) {

package/dist/collection/components/sign-in/sign-in.js

@@ -28,7 +28,7 @@ import { hasNamedLightDomSlot } from "../../shared/utils/slot";
  *
  * O `br-sign-in` é um botão de autenticação estilizado com a marca oficial do Governo Federal, recebendo propriedades de rótulo e variantes institucionais.
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/sign-in?tab=designer).
+ * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/signin?tab=designer).
  *
 
  * @category Identidade, Ações, Formulários
@@ -105,7 +105,11 @@ export class SignIn {
         };
     }
     get effectiveColorMode() {
-        return resolveAllowedPropValue(this.el, 'colorMode', this.colorMode, ['dark'], 'dark');
+        // Sem `color-mode`, o sign-in usa o esquema claro; valores inválidos também caem nele.
+        return resolveAllowedPropValue(this.el, 'colorMode', this.colorMode, ['dark'], undefined, {
+            allowUndefined: true,
+            allowNull: true,
+        });
     }
     get effectiveEmphasis() {
         return resolveAllowedPropValue(this.el, 'emphasis', this.emphasis, ['primary', 'secondary'], 'secondary');
@@ -160,7 +164,7 @@ export class SignIn {
         const TagType = this.getTagType();
         const attributes = this.getAttributes();
         const classList = this.getCssClassMap();
-        return (h(Host, { key: '8dc7c7dd3bc464abcf147dc47e7925a6b0c3ba00', "aria-disabled": this.disabled ? 'true' : null }, h(TagType, { key: 'c24d8ce52ce130a846311a9ea27a11f4b107c029', part: "button", class: classList, id: this.customId, ...attributes, onClick: this.handleClick, onFocus: this.handleFocus }, h("slot", { key: 'cd070ed2fc4f0a68afb2d438527606d476040cb4', name: "icon" }, this.effectiveShape === 'circle' && h("br-icon", { key: '1c2b9aa7c9b374fa19fe33fc6133c16c5a64f2f1', iconName: "fa6-solid:user", width: "12", height: "12" })), h("span", { key: '064321d0750a00110c464c38c38035342069c7f4', part: "content" }, h("slot", { key: '6c0a53faa735df7553e4a1d3e5508270102b7548' })), this.hasSlotContent('image') && (h("span", { key: '17d18a6d4407ff5a833f38ddff43520ca54b8ab4', part: "image" }, h("slot", { key: 'a95537abbe3262603d709afab260f3393e129ccd', name: "image" }))))));
+        return (h(Host, { key: 'a0a0dfe061d56cbe2ffabb11432b3eaa893b0122', "aria-disabled": this.disabled ? 'true' : null }, h(TagType, { key: '81aa67e31541eacda111d4d629921b08f6f5f000', part: "button", class: classList, id: this.customId, ...attributes, onClick: this.handleClick, onFocus: this.handleFocus }, h("slot", { key: 'e4e4cc229fc950ac325ec07745fe3e4681ef0c81', name: "icon" }, this.effectiveShape === 'circle' && h("br-icon", { key: 'b011e22af33d5a993c82b043672ecf22a6439abe', iconName: "fa6-solid:user", width: "12", height: "12" })), h("span", { key: '71d1bd83848e2e866a62d2b558dd657ca2b410e4', part: "content" }, h("slot", { key: '1299daa32861ca77c1b5a37963853c57ae853b85' })), this.hasSlotContent('image') && (h("span", { key: '0441bf7f01f61252d1108ff0ffc9d5946332eb6a', part: "image" }, h("slot", { key: 'dd473e474af2daece1ff321c8662b2dda140cd55', name: "image" }))))));
     }
     static get is() { return "br-sign-in"; }
     static get encapsulation() { return "shadow"; }
@@ -209,7 +213,7 @@ export class SignIn {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define se o sign-in usar\u00E1 um esquema de cores escuro."
+                    "text": "Define se o sign-in usar\u00E1 um esquema de cores escuro, para fundos escuros.\nQuando omitido, ou com valor diferente de `dark`, usa o esquema claro."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/tab/tab-item/tab-item.js

@@ -179,7 +179,7 @@ export class TabItem {
         };
     }
     render() {
-        return (h(Host, { key: '62be8feaf5e9954396e488bc9ac2cd188343e1bd', class: this.getCssClassMap(), id: `tab-panel-${this.tabItemId}`, role: "tabpanel", "aria-labelledby": `tab-button-${this.tabItemId}`, hidden: !(this.active ?? this.isActive), tabindex: (this.active ?? this.isActive) && !this.hasFocusableContent ? 0 : -1 }, h("slot", { key: '14a1f34bb8009900d2ccc92ddc80cd18b916e19b', onSlotchange: () => this.updateFocusableContentState() })));
+        return (h(Host, { key: 'd38057720e25509e1adb3d50c65b316b8857ed40', class: this.getCssClassMap(), id: `tab-panel-${this.tabItemId}`, role: "tabpanel", "aria-labelledby": `tab-button-${this.tabItemId}`, hidden: !(this.active ?? this.isActive), tabindex: (this.active ?? this.isActive) && !this.hasFocusableContent ? 0 : -1 }, h("slot", { key: 'b409428f62310f19f3cd9bdb9f9d5581e092a091', onSlotchange: () => this.updateFocusableContentState() })));
     }
     static get is() { return "br-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -271,7 +271,7 @@ export class TabItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define o \u00EDcone do item de tab usando classes CSS do Font Awesome 5, como `fas fa-bell`.\nO formato Iconify \u00E9 aceito apenas para compatibilidade legada e n\u00E3o deve ser usado em novos c\u00F3digos."
+                    "text": "\u00CDcone da aba como identificador Iconify (ex.: `fa6-solid:bell`), renderizado em SVG pelo `br-icon`.\nPara \u00EDcones por classe CSS (ex.: Font Awesome), use o slot `icon-{id}` do `br-tab`, a forma\npreferida: `<i slot=\"icon-avisos\" class=\"fas fa-bell\" aria-hidden=\"true\"></i>`.\nO slot tem preced\u00EAncia sobre esta prop.\nUso descontinuado: classes CSS nesta prop (ex.: `fas fa-bell`) n\u00E3o s\u00E3o exibidas no Shadow DOM,\ngeram aviso e devem migrar para o slot `icon-{id}`. Identificadores Iconify continuam suportados."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/tab/tab.css

@@ -1 +1 @@
-@import'~@fortawesome/fontawesome-free/css/all.css';*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{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}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}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]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[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-notification{left:auto;right:0}.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)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--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,.container-lg,.container-fluid{--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))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--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,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !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}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}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)}a:focus{outline:none}a.focus-visible,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)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-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)}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)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::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)}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)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}.br-tab{--tab-padding: var(--spacing-scale-3x);--tab-size: var(--tab-medium);--tab-large: var(--spacing-scale-3x);--tab-medium: var(--spacing-scale-2x);--tab-small: var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar-track{background:var(--gray-10)}.br-tab .tab-nav::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-tab .tab-nav:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-tab .tab-nav{overflow-x:auto;width:100%}@media(max-width: 991px){.br-tab .tab-nav::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar-track{background:var(--gray-10)}.br-tab .tab-nav::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-tab .tab-nav:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-tab .tab-nav{display:flex;overflow-x:auto;width:100%}}.br-tab .tab-nav ul{border-bottom:1px solid var(--border-color);display:flex;margin-bottom:0;margin-top:0;padding:0;width:100%}.br-tab .tab-item{align-items:center;display:flex;justify-content:center;position:relative;white-space:nowrap}.br-tab .tab-item button,.br-tab .tab-item a{--focus-offset: calc(var(--spacing-scale-half) * -1)}.br-tab .tab-item button:focus,.br-tab .tab-item a:focus{outline:none}.br-tab .tab-item button.focus-visible,.br-tab .tab-item button:focus-visible,.br-tab .tab-item a.focus-visible,.br-tab .tab-item a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-tab .tab-item button:not(:disabled):hover,.br-tab .tab-item a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-tab .tab-item button,.br-tab .tab-item a{background-color:rgba(0,0,0,0);border:0;border-bottom:4px solid rgba(0,0,0,0);color:var(--color);display:inline-block;font-size:var(--font-size-scale-up-02);font-weight:var(--font-weight-medium);line-height:1;padding:var(--tab-size) var(--tab-padding);text-align:center;white-space:nowrap}.br-tab .tab-item:first-child{padding-left:0}.br-tab .tab-item:last-child{padding-right:0}.br-tab .tab-item.is-active button,.br-tab .tab-item.active button{border-bottom:4px solid var(--active);color:var(--active)}.br-tab .tab-item.is-active .results,.br-tab .tab-item.active .results{--font-weight: var(--font-weight-semi-bold);color:var(--active)}.br-tab .results{display:flex;font-weight:var(--font-weight);justify-content:center;margin-top:var(--spacing-scale-2x);position:absolute;top:100%}.br-tab[data-counter=true] .tab-nav ul{margin-bottom:calc(var(--spacing-scale-2x) + var(--font-size-scale-up-02) + var(--spacing-scale-base))}.br-tab .tab-content .tab-panel{color:var(--text-color);display:none}.br-tab .tab-content .tab-panel.is-active,.br-tab .tab-content .tab-panel.active{display:block}.br-tab.small,.br-tab[small]{--tab-size: var(--tab-small)}.br-tab.medium,.br-tab[medium]{--tab-size: var(--tab-medium)}.br-tab.large,.br-tab[large]{--tab-size: var(--tab-large)}.br-tab.inverted,.br-tab.dark-mode{--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-tab.inverted .tab-item.active button,.br-tab.dark-mode .tab-item.active button{border-bottom-color:var(--background-light);color:var(--color)}:host{display:block;height:100%;min-height:0;overflow:hidden;--br-tab-height: auto}.br-tab{box-sizing:border-box;display:flex;flex-direction:column;height:var(--br-tab-height);min-height:0;width:100%;overflow:hidden;padding:var(--tab-container-padding, 16px)}.br-tab.scroll-disabled{height:auto;min-height:auto;overflow:visible}.tab-nav{display:flex;flex-direction:row;align-items:flex-start;gap:0;list-style:none;margin:0;padding:0;flex:0 0 auto}.tab-nav[data-counter=true]{min-height:102px;overflow:hidden;max-height:65px}.tab-nav .tab-item{display:flex;flex-direction:column;align-items:center;position:relative}.tab-nav .tab-item button .icon:not(:only-child){margin-right:var(--spacing-scale-base)}br-divider{--divider-margin-top: 0;--divider-margin-bottom: var(--spacing-scale-2x, 8px)}.tab-content{flex:1 1 auto;min-height:0;overflow-y:auto}.scroll-disabled .tab-content{overflow:hidden}.results{display:flex;font-weight:var(--font-weight);justify-content:center;margin-top:var(--spacing-scale-2x);position:absolute;top:100%}:host([data-playground-badges]) .results{align-items:center;background:var(--danger, #e53e3e);border:2px solid var(--background, #fff);border-radius:999px;color:#fff;font-size:.65rem;font-weight:700;height:16px;line-height:1;margin-top:0;min-width:16px;padding:0 3px;right:0;top:-4px;z-index:1}:host([data-playground-badges]) .tab-nav[data-counter=true]{min-height:0;max-height:none;overflow:visible}:host([data-playground-badges]) .tab-nav .tab-item{overflow:visible}
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{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}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}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]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[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-notification{left:auto;right:0}.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)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--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,.container-lg,.container-fluid{--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))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--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,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !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}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}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)}a:focus{outline:none}a.focus-visible,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)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-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)}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)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::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)}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)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}.br-tab{--tab-padding: var(--spacing-scale-3x);--tab-size: var(--tab-medium);--tab-large: var(--spacing-scale-3x);--tab-medium: var(--spacing-scale-2x);--tab-small: var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar-track{background:var(--gray-10)}.br-tab .tab-nav::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-tab .tab-nav:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-tab .tab-nav{overflow-x:auto;width:100%}@media(max-width: 991px){.br-tab .tab-nav::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-tab .tab-nav::-webkit-scrollbar-track{background:var(--gray-10)}.br-tab .tab-nav::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-tab .tab-nav:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-tab .tab-nav{display:flex;overflow-x:auto;width:100%}}.br-tab .tab-nav ul{border-bottom:1px solid var(--border-color);display:flex;margin-bottom:0;margin-top:0;padding:0;width:100%}.br-tab .tab-item{align-items:center;display:flex;justify-content:center;position:relative;white-space:nowrap}.br-tab .tab-item button,.br-tab .tab-item a{--focus-offset: calc(var(--spacing-scale-half) * -1)}.br-tab .tab-item button:focus,.br-tab .tab-item a:focus{outline:none}.br-tab .tab-item button.focus-visible,.br-tab .tab-item button:focus-visible,.br-tab .tab-item a.focus-visible,.br-tab .tab-item a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-tab .tab-item button:not(:disabled):hover,.br-tab .tab-item a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-tab .tab-item button,.br-tab .tab-item a{background-color:rgba(0,0,0,0);border:0;border-bottom:4px solid rgba(0,0,0,0);color:var(--color);display:inline-block;font-size:var(--font-size-scale-up-02);font-weight:var(--font-weight-medium);line-height:1;padding:var(--tab-size) var(--tab-padding);text-align:center;white-space:nowrap}.br-tab .tab-item:first-child{padding-left:0}.br-tab .tab-item:last-child{padding-right:0}.br-tab .tab-item.is-active button,.br-tab .tab-item.active button{border-bottom:4px solid var(--active);color:var(--active)}.br-tab .tab-item.is-active .results,.br-tab .tab-item.active .results{--font-weight: var(--font-weight-semi-bold);color:var(--active)}.br-tab .results{display:flex;font-weight:var(--font-weight);justify-content:center;margin-top:var(--spacing-scale-2x);position:absolute;top:100%}.br-tab[data-counter=true] .tab-nav ul{margin-bottom:calc(var(--spacing-scale-2x) + var(--font-size-scale-up-02) + var(--spacing-scale-base))}.br-tab .tab-content .tab-panel{color:var(--text-color);display:none}.br-tab .tab-content .tab-panel.is-active,.br-tab .tab-content .tab-panel.active{display:block}.br-tab.small,.br-tab[small]{--tab-size: var(--tab-small)}.br-tab.medium,.br-tab[medium]{--tab-size: var(--tab-medium)}.br-tab.large,.br-tab[large]{--tab-size: var(--tab-large)}.br-tab.inverted,.br-tab.dark-mode{--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-tab.inverted .tab-item.active button,.br-tab.dark-mode .tab-item.active button{border-bottom-color:var(--background-light);color:var(--color)}:host{display:block;height:100%;min-height:0;overflow:hidden;--br-tab-height: auto}.br-tab{box-sizing:border-box;display:flex;flex-direction:column;height:var(--br-tab-height);min-height:0;width:100%;overflow:hidden;padding:var(--tab-container-padding, 16px)}.br-tab.scroll-disabled{height:auto;min-height:auto;overflow:visible}.tab-nav{display:flex;flex-direction:row;align-items:flex-start;gap:0;list-style:none;margin:0;padding:0;flex:0 0 auto}.tab-nav[data-counter=true]{min-height:102px;overflow:hidden;max-height:65px}.tab-nav .tab-item{display:flex;flex-direction:column;align-items:center;position:relative}.tab-nav .tab-item button .icon:not(:only-child){margin-right:var(--spacing-scale-base)}.tab-nav .tab-item button .icon[hidden]{display:none}br-divider{--divider-margin-top: 0;--divider-margin-bottom: var(--spacing-scale-2x, 8px)}.tab-content{flex:1 1 auto;min-height:0;overflow-y:auto}.scroll-disabled .tab-content{overflow:hidden}.results{display:flex;font-weight:var(--font-weight);justify-content:center;margin-top:var(--spacing-scale-2x);position:absolute;top:100%}:host([data-playground-badges]) .results{align-items:center;background:var(--danger, #e53e3e);border:2px solid var(--background, #fff);border-radius:999px;color:#fff;font-size:.65rem;font-weight:700;height:16px;line-height:1;margin-top:0;min-width:16px;padding:0 3px;right:0;top:-4px;z-index:1}:host([data-playground-badges]) .tab-nav[data-counter=true]{min-height:0;max-height:none;overflow:visible}:host([data-playground-badges]) .tab-nav .tab-item{overflow:visible}

package/dist/collection/components/tab/tab.js

@@ -6,7 +6,9 @@ import { Host, h, } from "@stencil/core";
 import { FOCUSABLE_SELECTORS } from "../../shared/utils/focus";
 import { getNextElementIndex } from "../../shared/utils/getNextElement";
 import { generateUniqueId } from "../../shared/utils/id";
+import { reportInvalidPropValue } from "../../shared/utils/prop-warning";
 import { resolveAllowedPropValue, resolveDensity } from "../../shared/utils/props";
+import { isIconClassList } from "../icon/icon.utils";
 const TAB_COLOR_MODES = ['dark'];
 const TAB_ALIGNMENTS = ['start', 'center', 'end'];
 const CSS_FUNCTION_HEIGHT_REGEX = /^(calc|min|max|clamp)\(.+\)$/;
@@ -48,6 +50,7 @@ const CSS_UNIT_HEIGHT_REGEX = /^\d+(\.\d+)?(px|%|vh|vw|dvh|svh|lvh|vmin|vmax|rem
  * @category Navegação, Seleção, Conteúdo
  * @status stable
  * @slot default - Slot para inserir os itens das abas (br-tab-item)
+ * @slot icon-{id} - Ícone da aba cujo `br-tab-item` tem o `id` informado (ex.: `<i slot="icon-avisos" class="fas fa-bell" aria-hidden="true"></i>`). Forma preferida para ícones por classe CSS, como Font Awesome: o elemento fica em light DOM e recebe os estilos globais da página. Tem precedência sobre a prop `icon` do item.
  *
  * @part container - Contêiner principal que envolve toda a estrutura do componente (navegação e conteúdo). Expõe o elemento para customizações de fundo, bordas e espaçamentos globais.
  * @part nav - Área de navegação (`tablist`) onde os botões das abas estão localizados. Permite customizar o alinhamento, espaçamento e plano de fundo da barra de abas.
@@ -124,12 +127,19 @@ export class Tab {
                 this.tabItems = nextTabItems;
             }
             const colorMode = this.effectiveColorMode;
-            // Garante que cada tab item tenha um ID único
+            // Identificador de cada aba: o `id` nativo (canônico) tem precedência sobre o alias
+            // legado `tab-item-id`; só sem nenhum dos dois um id é gerado. O item pode ainda não
+            // estar hidratado aqui, então os atributos são a fonte confiável. Depois do render, o
+            // br-tab-item escreve `tab-panel-{tabItemId}` no próprio `id`; esse valor não é do consumidor.
             this.tabItems.forEach((item) => {
-                if (item.tabItemId === undefined ||
-                    item.tabItemId === null ||
-                    (typeof item.tabItemId === 'string' && item.tabItemId === '') ||
-                    item.hasAttribute('tab-item-id') === false) {
+                const legacyId = item.getAttribute('tab-item-id');
+                const consumerId = item.id && item.id !== `tab-panel-${legacyId ?? item.tabItemId}` ? item.id : '';
+                const explicitId = consumerId || legacyId;
+                if (explicitId) {
+                    if (item.tabItemId !== explicitId)
+                        item.tabItemId = explicitId;
+                }
+                else if (typeof item.tabItemId !== 'string' || item.tabItemId === '') {
                     const id = generateUniqueId();
                     item.tabItemId = id;
                     item.setAttribute('tab-item-id', id);
@@ -167,6 +177,9 @@ export class Tab {
                 this.handleKeyNavigation(index, event);
             }
         };
+        this.handleIconSlotChange = () => {
+            this.tabItems = [...this.tabItems];
+        };
     }
     /**
      * Observa mudanças no tab ativo para atualizar os estados
@@ -356,8 +369,22 @@ export class Tab {
             'dark-mode': this.effectiveColorMode === 'dark',
         };
     }
-    renderTabIcon(icon) {
-        return /\s/.test(icon) ? (h("i", { class: icon, "aria-hidden": "true" })) : (h("br-icon", { iconName: icon, width: "16", height: "16" }));
+    hasSlottedIcon(tabItemId) {
+        return Array.from(this.el.children).some((child) => child.getAttribute('slot') === `icon-${tabItemId}`);
+    }
+    /**
+     * Ícone da aba: o slot `icon-{id}` tem precedência; a prop `icon` do item é o fallback e
+     * aceita identificadores Iconify. Classes CSS na prop não funcionam no Shadow DOM e são ignoradas.
+     */
+    renderTabIcon(item) {
+        const hasSlot = this.hasSlottedIcon(item.tabItemId);
+        const icon = item.icon?.trim();
+        if (icon && isIconClassList(icon)) {
+            reportInvalidPropValue(item, 'icon', icon, 'Classes CSS não são exibidas no Shadow DOM do br-tab.', `Use o slot "icon-${item.tabItemId}" no br-tab ou um identificador Iconify, como "fa6-solid:bell".`);
+        }
+        const fallback = icon && !isIconClassList(icon) ? h("br-icon", { iconName: icon, width: "16", height: "16" }) : null;
+        // O slot é sempre renderizado para que um ícone adicionado depois dispare `slotchange`.
+        return (h("span", { class: "icon", hidden: !hasSlot && !fallback }, h("slot", { name: `icon-${item.tabItemId}`, onSlotchange: this.handleIconSlotChange }, fallback)));
     }
     /**
      * Retorna o alinhamento em formato flexbox
@@ -421,12 +448,12 @@ export class Tab {
     render() {
         const hasCounter = this.tabItems.some((item) => item.counter);
         const resolvedHeight = this.getResolvedHeight();
-        return (h(Host, { key: 'c9a65e1efd1a00d6fb810e7e4b44be666ea57101' }, h("div", { key: '1ec7827a93ae3ba4aa07f9220eda037e1401878e', class: this.getCssClassMap(), id: this.customId, part: "container", style: resolvedHeight !== undefined ? { '--br-tab-height': resolvedHeight } : undefined }, h("div", { key: '38745551852b05c04ba3ee034f3b6ff8ed566bbc', class: "tab-nav", role: "tablist", "aria-label": this.label, "data-counter": hasCounter ? 'true' : 'false', part: "nav", style: { justifyContent: this.getAlignItemsStyle() } }, this.tabItems.map((item, index) => {
+        return (h(Host, { key: '8f9bb52658cb37048b10b4c81eb4399771ab28f6' }, h("div", { key: '0aa48a13db1b2229890500afa65bd2e78b24727e', class: this.getCssClassMap(), id: this.customId, part: "container", style: resolvedHeight !== undefined ? { '--br-tab-height': resolvedHeight } : undefined }, h("div", { key: '34bb73421269703b161928f03dc9a22b2d0cf629', class: "tab-nav", role: "tablist", "aria-label": this.label, "data-counter": hasCounter ? 'true' : 'false', part: "nav", style: { justifyContent: this.getAlignItemsStyle() } }, this.tabItems.map((item, index) => {
             const isActive = item.tabItemId === this.activeTabId;
             const showOnlyIcon = item.iconOnly ?? (item.onlyIcon || item.hasAttribute('only-icon'));
             const itemLabel = item.label ?? item.tabItemTitle;
-            return (h("div", { key: item.tabItemId, class: this.getTabItemCssClassMap(isActive), role: "none" }, h("button", { type: "button", id: `tab-button-${item.tabItemId}`, part: "button", role: "tab", "aria-selected": isActive ? 'true' : 'false', tabindex: isActive ? 0 : -1, "aria-setsize": this.tabItems.length, "aria-posinset": index + 1, "aria-label": `${itemLabel}${item.counter ? ` (${item.counter})` : ''}`, title: item.getAttribute('title') || undefined, "data-tab-id": item.tabItemId, "data-tab-index": index, onClick: this.handleTabButtonClick, onKeyDown: this.handleTabButtonKeyDown }, h("span", { class: "name" }, item.icon && h("span", { class: "icon" }, this.renderTabIcon(item.icon)), !showOnlyIcon && h("span", null, itemLabel))), isActive && h("span", { class: "tab-indicator", part: "indicator", "aria-hidden": "true" }), item.counter && (h("span", { id: `tab-counter-${item.tabItemId}`, class: "results" }, item.counter))));
-        })), h("br-divider", { key: 'a4e612a078864d3aa8e0488401402570cf2730b0', "color-mode": this.effectiveColorMode }), h("div", { key: 'ff1ade0a0392741dad66552ed1941d5991c608cc', class: "tab-content", part: "content" }, h("slot", { key: '91d9e7d59b104935d91d78a401d7e0c8e7862ba2', ref: (el) => {
+            return (h("div", { key: item.tabItemId, class: this.getTabItemCssClassMap(isActive), role: "none" }, h("button", { type: "button", id: `tab-button-${item.tabItemId}`, part: "button", role: "tab", "aria-selected": isActive ? 'true' : 'false', tabindex: isActive ? 0 : -1, "aria-setsize": this.tabItems.length, "aria-posinset": index + 1, "aria-label": `${itemLabel}${item.counter ? ` (${item.counter})` : ''}`, title: item.getAttribute('title') || undefined, "data-tab-id": item.tabItemId, "data-tab-index": index, onClick: this.handleTabButtonClick, onKeyDown: this.handleTabButtonKeyDown }, h("span", { class: "name" }, this.renderTabIcon(item), !showOnlyIcon && h("span", null, itemLabel))), isActive && h("span", { class: "tab-indicator", part: "indicator", "aria-hidden": "true" }), item.counter && (h("span", { id: `tab-counter-${item.tabItemId}`, class: "results" }, item.counter))));
+        })), h("br-divider", { key: '379d4698cf962821440ba0db49f6ad6c4f4d9672', "color-mode": this.effectiveColorMode }), h("div", { key: 'ae45441ee380aff00b3d10ce204468d9d5337161', class: "tab-content", part: "content" }, h("slot", { key: 'fd27af7f71c2b8ab6aceee196764b03cf53efbe0', ref: (el) => {
                 this.slotElement = el;
             }, onSlotchange: this.registerTabItems })))));
     }

package/dist/collection/pages/components/select/remote.js

@@ -0,0 +1,33 @@
+const select = document.querySelector('#select-remote-example');
+const status = document.querySelector('#select-remote-status');
+const options = [
+  { label: 'SERPRO', value: 'serpro' },
+  { label: 'Controladoria-Geral da União', value: 'cgu' },
+  { label: 'Instituto Brasileiro de Geografia e Estatística', value: 'ibge' },
+  { label: 'Instituto Nacional do Seguro Social', value: 'inss' },
+  { label: 'Tesouro Nacional', value: 'tesouro' },
+];
+let requestId = 0;
+
+select?.addEventListener('brSelectSearch', ({ detail: { query } }) => {
+  const currentRequest = ++requestId;
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  select.loading = true;
+  if (status) status.textContent = 'Consultando opções…';
+
+  window.setTimeout(async () => {
+    if (currentRequest !== requestId) return;
+
+    const result = normalizedQuery
+      ? options.filter(({ label, value }) => `${label} ${value}`.toLocaleLowerCase().includes(normalizedQuery))
+      : options;
+
+    await select.setOptions(result);
+    if (currentRequest !== requestId) return;
+
+    select.loading = false;
+    if (status) {
+      status.textContent = result.length ? `${result.length} opção(ões) encontrada(s).` : 'Nenhuma opção encontrada.';
+    }
+  }, 350);
+});

package/dist/collection/pages/components/select/virtualized.js

@@ -0,0 +1,13 @@
+const select = document.querySelector('#select-virtualized-example');
+await customElements.whenDefined('br-select');
+
+const options = Array.from({ length: 1000 }, (_, index) => {
+  const number = String(index + 1).padStart(4, '0');
+  return {
+    label: `Serviço público ${number}`,
+    value: `servico-${number}`,
+  };
+});
+
+await select?.setOptions(options);
+await select?.show();

package/dist/collection/pages/components/upload/handler.js

@@ -0,0 +1,25 @@
+// Simula um envio para demonstrar o contrato de `uploadHandler`: a aplicação
+// recebe `file`, `signal` e `onProgress`, e resolve/rejeita a Promise conforme
+// o resultado real do envio. Aqui não há backend, então o progresso é simulado.
+function enviarArquivoSimulado({ signal, onProgress }) {
+  return new Promise((resolve, reject) => {
+    let progress = 0;
+
+    const interval = setInterval(() => {
+      progress = Math.min(progress + 20, 100);
+      onProgress(progress);
+      if (progress === 100) {
+        clearInterval(interval);
+        resolve();
+      }
+    }, 300);
+
+    signal.addEventListener('abort', () => {
+      clearInterval(interval);
+      reject(signal.reason);
+    });
+  });
+}
+
+const upload = document.getElementById('upload-handler-example');
+upload.uploadHandler = ({ file, signal, onProgress }) => enviarArquivoSimulado({ file, signal, onProgress });

package/dist/collection/pages/scripts/component-controls.js

@@ -90,7 +90,14 @@
     const select = document.createElement('br-select');
     select.setAttribute('aria-label', label);
     select.setAttribute('density', 'small');
-    select.options = options;
+    // Opções declarativas com br-select-option (a propriedade `options` é legada).
+    options.forEach(({ label: optionLabel, value: optionValue, selected }) => {
+      const option = document.createElement('br-select-option');
+      option.setAttribute('value', optionValue);
+      option.setAttribute('label', optionLabel);
+      if (selected) option.setAttribute('selected', '');
+      select.appendChild(option);
+    });
     setControlValue(select, value);
     return select;
   };
@@ -212,19 +219,12 @@
     });
   };
 
-  const applyPropertyUpdate = ({ event, input, prop, definition, getHtml, selected, setHtml }) => {
+  const applyPropertyUpdate = ({ input, prop, definition, getHtml, selected, setHtml }) => {
     const nextDoc = parseHtml(getHtml());
     const target = getTargetElement(nextDoc, selected);
     if (!target) return;
 
-    const value =
-      prop.control === 'checkbox'
-        ? event.type === 'checkedChange'
-          ? event.detail
-          : input.checked
-        : event.detail !== undefined
-          ? event.detail
-          : input.value;
+    const value = prop.control === 'checkbox' ? input.checked : input.value;
     updateProperty(target, prop, value);
 
     const booleanAttributes = getBooleanAttributes(definition);
@@ -234,9 +234,8 @@
   const createPropertyRow = ({ prop, definition, getHtml, selected, selectedElement, setHtml }) => {
     const rawValue = getPropertyValue(selectedElement, prop);
     const input = createPropertyControl(prop, rawValue, selectedElement);
-    const update = (event) =>
+    const update = () =>
       applyPropertyUpdate({
-        event,
         input,
         prop,
         definition,
@@ -244,7 +243,8 @@
         selected,
         setHtml,
       });
-    input.addEventListener(prop.control === 'checkbox' ? 'checkedChange' : 'valueChange', update);
+    // Eventos nativos: `change` em checkbox e select; `input` em campos de texto.
+    input.addEventListener(prop.control === 'checkbox' || prop.control === 'select' ? 'change' : 'input', update);
 
     const tr = document.createElement('tr');
     const nameTd = document.createElement('td');
@@ -429,7 +429,6 @@
         row.hidden = value.length > 0 && !row.dataset.propertySearch.includes(value);
       });
     };
-    filter.addEventListener('valueChange', applyFilter);
     filter.addEventListener('input', applyFilter);
     table.appendChild(tbody);
     appendField(section, table);
@@ -523,8 +522,8 @@
       }),
       value: state.selected,
     });
-    select.addEventListener('valueChange', (event) => {
-      state.selected = event.detail;
+    select.addEventListener('change', () => {
+      state.selected = select.value;
       scheduleRenderControls(root, state);
     });
     field.appendChild(select);

package/dist/collection/pages/scripts/menu.js

@@ -233,7 +233,6 @@ async function initializeMenu() {
   setLinks();
   if (MENU_FILTER) {
     MENU_FILTER.addEventListener('input', filterMenu);
-    MENU_FILTER.addEventListener('valueChange', filterMenu);
     MENU_FILTER.addEventListener('click', (e) => {
       const path = e.composedPath();
       const isActionClick = path.some(