@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/button/button.js

@@ -0,0 +1,546 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { generateUniqueId } from "../../shared/utils/id";
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/button?tab=designer).
+ *
+ * @category Ações
+ * @status stable
+ * @slot default - Slot para o rótulo ou conteúdo do botão.
+ * @part button - Parte para o elemento button interno, usada para estilos customizados via ::part(button).
+ */
+export class Button {
+    constructor() {
+        this.formDisabled = false;
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Define a densidade visual do componente.
+         *
+         * - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).
+         * - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.
+         * - `large`: Baixa densidade (componente maior, mais espaçamento e altura).
+         *
+         */
+        this.density = 'medium';
+        /**
+         * Desabilita a interação com o componente.
+         *
+         */
+        this.disabled = false;
+        /**
+         * Indica se o botão está no estado ativo.
+         * Se definido como verdadeiro, o botão será exibido como ativo.
+         */
+        /** @deprecated Use `active`. */
+        this.isActive = false;
+        /**
+         * Aplica o estado de "progresso" ao botão.
+         * O botão exibirá um indicador de carregamento ou progresso.
+         */
+        /** @deprecated Use `loading`. */
+        this.isLoading = false;
+        /**
+         * Define o rótulo acessível usado por tecnologias assistivas.
+         *
+         */
+        this.ariaLabel = null;
+        /**
+         * Define o estado de pressionado do botão.
+         * Este atributo é usado para indicar se o botão está atualmente pressionado ou não.
+         * É especialmente útil para botões que podem ser alternados entre os estados pressionado e não pressionado.
+         * O valor deve ser 'true' ou 'false'.
+         */
+        this.ariaPressed = null;
+        /**
+         * Indica se um elemento controlado pelo botão está expandido ou recolhido.
+         * Use em botões que abrem menus, acordeões ou outros painéis expansíveis.
+         * O valor deve ser 'true' ou 'false'.
+         */
+        this.ariaExpanded = null;
+        /**
+         * Referência ao ID do elemento que o botão controla.
+         * Use em conjunto com `ariaExpanded` para relacionar o botão ao painel que ele expande/recolhe.
+         */
+        this.ariaControls = null;
+        /**
+         * Indica que o botão abre um menu, listbox, tree, grid ou dialog.
+         * Os valores permitidos são: 'true', 'menu', 'listbox', 'tree', 'grid' ou 'dialog'.
+         */
+        this.ariaHaspopup = null;
+        this.handleClick = () => {
+            const form = this.elementInternals.form;
+            if (this.disabled || this.formDisabled || (this.loading ?? this.isLoading) || !form)
+                return;
+            if (this.type === 'submit') {
+                form.requestSubmit();
+            }
+            if (this.type === 'reset') {
+                form.reset();
+            }
+        };
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+        if (this.nativeButton) {
+            const effectiveDisabled = this.disabled || disabled;
+            this.nativeButton.disabled = effectiveDisabled;
+            this.nativeButton.toggleAttribute('aria-disabled', effectiveDisabled);
+        }
+    }
+    componentDidLoad() {
+        if (this.shape === 'circle' && !this.ariaLabel?.trim()) {
+            console.warn('[br-button]: Botões circulares devem conter um aria-label.');
+        }
+    }
+    getCssClassMap() {
+        return {
+            'br-button': true,
+            primary: this.emphasis === 'primary',
+            secondary: this.emphasis === 'secondary',
+            large: this.density === 'large',
+            small: this.density === 'small',
+            block: this.shape === 'block',
+            circle: this.shape === 'circle',
+            active: this.active ?? this.isActive,
+            loading: this.loading ?? this.isLoading,
+            'dark-mode': this.colorMode === 'dark',
+        };
+    }
+    render() {
+        const disabled = this.disabled || this.formDisabled;
+        return (h(Host, { key: 'd59dfa798c552d854f2b37fa1910521218873570' }, h("button", { key: '52677428235b45ba020609fd054be70d100e35fa', ref: (element) => (this.nativeButton = element), part: "button", "aria-label": this.ariaLabel || null, "aria-pressed": this.ariaPressed || null, "aria-disabled": disabled ? 'true' : null, "aria-busy": (this.loading ?? this.isLoading) ? 'true' : null, "aria-expanded": this.ariaExpanded || null, "aria-haspopup": this.ariaHaspopup || null, "aria-controls": this.ariaControls || null, class: this.getCssClassMap(), type: this.type, id: this.customId, disabled: disabled, value: this.value, tabindex: this.el.hasAttribute('tabindex') ? this.el.tabIndex : this.customTabIndex, onClick: this.handleClick }, (this.loading ?? this.isLoading) && h("span", { key: '400227d2366b400e5a99914e119cd268c9a3417e', class: "loading-sr-only" }, "Carregando"), h("slot", { key: '58a02db78b9f18285c20f9817087a94067959180' }))));
+    }
+    static get is() { return "br-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colorMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonColorMode",
+                    "resolved": "\"dark\"",
+                    "references": {
+                        "ButtonColorMode": {
+                            "location": "import",
+                            "path": "./button.types",
+                            "id": "src/components/button/button.types.ts::ButtonColorMode",
+                            "referenceLocation": "ButtonColorMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o bot\u00E3o usar\u00E1 um esquema de cores escuro."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color-mode"
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "ButtonDensity": {
+                            "location": "import",
+                            "path": "./button.types",
+                            "id": "src/components/button/button.types.ts::ButtonDensity",
+                            "referenceLocation": "ButtonDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espa\u00E7amento).\n- `medium`: Densidade intermedi\u00E1ria, padr\u00E3o recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espa\u00E7amento e altura)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita a intera\u00E7\u00E3o com o componente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonEmphasis",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {
+                        "ButtonEmphasis": {
+                            "location": "import",
+                            "path": "./button.types",
+                            "id": "src/components/button/button.types.ts::ButtonEmphasis",
+                            "referenceLocation": "ButtonEmphasis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a \u00EAnfase do bot\u00E3o, alterando sua apar\u00EAncia para criar hierarquia visual e destacar a\u00E7\u00F5es importantes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "emphasis"
+            },
+            "isActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `active`."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-active",
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado ativo can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `isActive`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `loading`."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-loading",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado de carregamento can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `isLoading`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonShape",
+                    "resolved": "\"block\" | \"circle\" | \"pill\"",
+                    "references": {
+                        "ButtonShape": {
+                            "location": "import",
+                            "path": "./button.types",
+                            "id": "src/components/button/button.types.ts::ButtonShape",
+                            "referenceLocation": "ButtonShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o formato do bot\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "./button.types",
+                            "id": "src/components/button/button.types.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o tipo de bot\u00E3o, especificando seu comportamento padr\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o valor inicial do bot\u00E3o em um formul\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "customTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use o atributo/propriedade nativo `tabIndex` do host."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-tab-index"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o r\u00F3tulo acess\u00EDvel usado por tecnologias assistivas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "ariaPressed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado de pressionado do bot\u00E3o.\nEste atributo \u00E9 usado para indicar se o bot\u00E3o est\u00E1 atualmente pressionado ou n\u00E3o.\n\u00C9 especialmente \u00FAtil para bot\u00F5es que podem ser alternados entre os estados pressionado e n\u00E3o pressionado.\nO valor deve ser 'true' ou 'false'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-pressed",
+                "defaultValue": "null"
+            },
+            "ariaExpanded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se um elemento controlado pelo bot\u00E3o est\u00E1 expandido ou recolhido.\nUse em bot\u00F5es que abrem menus, acorde\u00F5es ou outros pain\u00E9is expans\u00EDveis.\nO valor deve ser 'true' ou 'false'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-expanded",
+                "defaultValue": "null"
+            },
+            "ariaControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Refer\u00EAncia ao ID do elemento que o bot\u00E3o controla.\nUse em conjunto com `ariaExpanded` para relacionar o bot\u00E3o ao painel que ele expande/recolhe."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-controls",
+                "defaultValue": "null"
+            },
+            "ariaHaspopup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AriaHasPopup | null",
+                    "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | \"true\"",
+                    "references": {
+                        "AriaHasPopup": {
+                            "location": "import",
+                            "path": "./button.types",
+                            "id": "src/components/button/button.types.ts::AriaHasPopup",
+                            "referenceLocation": "AriaHasPopup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica que o bot\u00E3o abre um menu, listbox, tree, grid ou dialog.\nOs valores permitidos s\u00E3o: 'true', 'menu', 'listbox', 'tree', 'grid' ou 'dialog'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-haspopup",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}

package/dist/collection/components/button/button.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/card/card.css

@@ -0,0 +1 @@
+*,*::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}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,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))}}@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))}}@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-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.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}.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)}.help{font-size:var(--font-size-scale-base)}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)}*[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)}.br-card{--card-padding: var(--spacing-scale-2x);--card-height-fixed: 250px;background:var(--background);box-shadow:var(--surface-shadow-sm);color:var(--color);margin-bottom:var(--spacing-scale-2x)}.br-card .card-content{padding:var(--card-padding)}.br-card .card-content *:last-child{margin-bottom:0}.br-card .card-header{padding:var(--card-padding) var(--card-padding) 0}.br-card .card-footer{padding:0 var(--card-padding) var(--card-padding)}.br-card.hover:hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-card.inverted,.br-card.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)}:host{display:block}