@govbr-ds/webcomponents 2.1.3 → 2.2.0

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

@@ -8,12 +8,44 @@ import { getFormValidationState, isFormControlDisabled, safeSetFormValue, syncNa
 import { formatBytes } from "../../shared/utils/format-bytes";
 import { generateUniqueId } from "../../shared/utils/id";
 import { setPartAttributes } from "../../shared/utils/parts";
+import { reportInvalidPropValue } from "../../shared/utils/prop-warning";
+import { resolveAllowedPropValue, resolveIntegerPropValue } from "../../shared/utils/props";
 import { hasAssignedSlotContent } from "../../shared/utils/slot";
 import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
+const UPLOAD_CAPTURE_VALUES = ['', 'user', 'environment'];
+const UPLOAD_STATES = ['info', 'warning', 'danger', 'success'];
 /**
- * ## Design System
+ * O componente `br-upload` é o elemento oficial do GovBR-DS para seleção, anexação e envio de arquivos em formulários, com suporte a seleção múltipla, área de arrastar-e-soltar (drag-and-drop) e acompanhamento de progresso.
  *
- * @category Formulários
+ * ### Para que serve
+ *
+ * - **Seleção e anexação de arquivos:** Permite anexar documentos, planilhas, imagens ou outros formatos através do seletor nativo do sistema operacional ou por arrastar e soltar.
+ * - **Validação de tipos e tamanhos:** Valida extensões permitidas (`accept`) e tamanho máximo por arquivo (`max-file-size`), informando erros de validação de forma acessível.
+ * - **Listagem visual e remoção:** Exibe a lista de arquivos selecionados com nome, tamanho formatado (KB/MB), barra de progresso individual e botão de exclusão.
+ * - **Integração com formulários:** Integrado nativamente via `formAssociated`, permitindo submissão tradicional de formulários ou upload assíncrono programático.
+ *
+ * ### Quando utilizar
+ *
+ * - **Utilize quando:**
+ *   - A pessoa usuária precisar enviar comprovantes, relatórios, fotografias ou documentos digitais.
+ *   - For necessário limitar e validar os tipos de arquivo e o tamanho máximo antes do envio ao servidor.
+ * - **Evite e prefira outro componente quando:**
+ *   - A captura for exclusivamente de texto ou URLs externas (prefira `br-input`).
+ *
+ * ### Estrutura e Slots
+ *
+ * O `br-upload` possui estrutura rica com múltiplos slots:
+ * - `default`: Slot para texto personalizado do botão de upload (padrão: "Selecione o arquivo").
+ * - `upload-list`: Slot opcional para substituição da área padrão de listagem de arquivos.
+ * - `label`: Slot para personalização do rótulo do campo.
+ * - `helper`: Slot para instruções ou restrições de formato/tamanho exibidas abaixo do campo.
+ * - `feedback`: Slot para mensagens de validação e erro (como `br-message`).
+ * - `loading`: Slot para indicador exibido durante o envio assíncrono dos arquivos.
+ *
+ * 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/upload?tab=designer).
+ *
+
+ * @category Formulários, Dados
  * @status stable
  * @slot default - Texto personalizado para o botão de upload. Se não fornecido, será exibido "Selecione o arquivo" como texto padrão.
  *                 Use este slot para personalizar o texto do botão de acordo com o contexto do upload, por exemplo: "Anexar documentos",
@@ -81,9 +113,15 @@ export class Upload {
         this.label = 'Envio de arquivo';
         /**
          * Lista de arquivos já enviados (para edição ou pré-visualização).
-         * Pode ser uma string JSON ou um array de objetos IUploadFile.
+         * Pode ser uma string JSON ou um array de objetos IUploadFile. Cada item deve ter `name` não vazio e `size` numérico não negativo opcional; itens inválidos são ignorados.
+         *
+         * @example
+         * ```html
+         * <!-- Compatibilidade legada; prefira existing-files. -->
+         * <br-upload upload-files='[{"name":"relatorio.pdf","size":204800}]'></br-upload>
+         * ```
+         * @deprecated Use `existingFiles`.
          */
-        /** @deprecated Use `existingFiles`. */
         this.uploadFiles = [];
         /**
          * Desabilita a interação com o componente.
@@ -99,11 +137,11 @@ export class Upload {
          * Quando definido como `true`, o usuário pode selecionar mais de um arquivo para upload.
          */
         this.multiple = false;
-        /** Quantidade mínima de arquivos, incluindo arquivos já enviados. */
+        /** Quantidade mínima de arquivos, incluindo arquivos já enviados. Deve ser um inteiro não negativo; valores inválidos usam `0`. */
         this.minFiles = 0;
-        /** Quantidade máxima de arquivos. Zero significa sem limite. */
+        /** Quantidade máxima de arquivos. Zero significa sem limite. Deve ser um inteiro não negativo; valores inválidos usam `0`. */
         this.maxFiles = 0;
-        /** Tamanho máximo permitido para cada arquivo, em bytes. Zero significa sem limite. */
+        /** Tamanho máximo permitido para cada arquivo, em bytes. Zero significa sem limite. Deve ser um inteiro não negativo; valores inválidos usam `0`. */
         this.maxFileSize = 0;
         /** Lista de arquivos selecionados, equivalente a `HTMLInputElement.files`. */
         this.files = null;
@@ -173,12 +211,12 @@ export class Upload {
     uploadFilesHandler(newValue) {
         if (this.existingFiles !== undefined)
             return;
-        this.parseExistingFiles(newValue);
+        this.parseExistingFiles(newValue, 'uploadFiles');
     }
     existingFilesHandler(newValue) {
-        this.parseExistingFiles(newValue ?? this.uploadFiles);
+        this.parseExistingFiles(newValue ?? this.uploadFiles, newValue === undefined ? 'uploadFiles' : 'existingFiles');
     }
-    parseExistingFiles(newValue) {
+    parseExistingFiles(newValue, propertyName) {
         if (!newValue || (typeof newValue === 'string' && newValue.trim() === '')) {
             this.parsedUploadFiles = [];
             this.updateAllFilesCached();
@@ -187,27 +225,54 @@ export class Upload {
         if (typeof newValue === 'string') {
             try {
                 const parsed = JSON.parse(newValue);
-                this.parsedUploadFiles = Array.isArray(parsed) ? parsed : [];
+                this.parsedUploadFiles = this.normalizeExistingFiles(parsed, propertyName);
             }
             catch (e) {
-                console.error('Erro ao fazer parse de uploadFiles:', e);
+                console.error(`Erro ao fazer parse de ${propertyName}:`, e);
+                reportInvalidPropValue(this.el, propertyName, newValue, 'Informe um array de arquivos ou uma string JSON válida com arquivos existentes.', 'Aplicando fallback [].');
                 this.parsedUploadFiles = [];
             }
         }
         else if (Array.isArray(newValue)) {
-            this.parsedUploadFiles = [...newValue];
+            this.parsedUploadFiles = this.normalizeExistingFiles(newValue, propertyName);
         }
         else {
+            reportInvalidPropValue(this.el, propertyName, newValue, 'Informe um array de arquivos ou uma string JSON válida com arquivos existentes.', 'Aplicando fallback [].');
             this.parsedUploadFiles = [];
         }
         this.updateAllFilesCached();
     }
+    normalizeExistingFiles(value, propertyName) {
+        if (!Array.isArray(value)) {
+            reportInvalidPropValue(this.el, propertyName, value, 'Informe um array de arquivos ou uma string JSON válida com arquivos existentes.', 'Aplicando fallback [].');
+            return [];
+        }
+        const validFiles = value.filter((file) => typeof file === 'object' &&
+            file !== null &&
+            typeof file.name === 'string' &&
+            file.name.trim().length > 0);
+        const hasInvalidSizes = validFiles.some((file) => {
+            const size = file.size;
+            return size !== undefined && (typeof size !== 'number' || !Number.isFinite(size) || size < 0);
+        });
+        const normalizedFiles = validFiles.map((file) => {
+            const size = file.size;
+            return {
+                ...file,
+                size: typeof size === 'number' && Number.isFinite(size) && size >= 0 ? size : undefined,
+            };
+        });
+        if (validFiles.length !== value.length || hasInvalidSizes) {
+            reportInvalidPropValue(this.el, propertyName, value, 'Cada arquivo deve ter `name` string não vazio e `size` numérico não negativo opcional.', 'Ignorando arquivos inválidos e removendo tamanhos inválidos.');
+        }
+        return normalizedFiles;
+    }
     filesSelectedHandler() {
         this.updateAllFilesCached();
     }
     componentWillLoad() {
         this.filesSelected = this.files;
-        this.parseExistingFiles(this.existingFiles ?? this.uploadFiles);
+        this.parseExistingFiles(this.existingFiles ?? this.uploadFiles, this.existingFiles !== undefined ? 'existingFiles' : 'uploadFiles');
         this.initialUploadFiles = [...this.parsedUploadFiles];
         this.syncFormState();
     }
@@ -363,16 +428,16 @@ export class Upload {
         if (!this.nativeInput)
             return;
         const files = this.allFilesCached.map((entry) => entry.file);
-        const minimum = Math.max(this.required ? 1 : 0, this.minFiles);
+        const minimum = Math.max(this.required ? 1 : 0, this.effectiveMinFiles);
         const countMessage = minimum > 0 && files.length < minimum
             ? `Selecione pelo menos ${minimum} arquivo(s).`
-            : this.maxFiles > 0 && files.length > this.maxFiles
-                ? `Selecione no máximo ${this.maxFiles} arquivo(s).`
+            : this.effectiveMaxFiles > 0 && files.length > this.effectiveMaxFiles
+                ? `Selecione no máximo ${this.effectiveMaxFiles} arquivo(s).`
                 : '';
-        const oversized = this.maxFileSize > 0 && files.some((file) => (file.size ?? 0) > this.maxFileSize);
+        const oversized = this.effectiveMaxFileSize > 0 && files.some((file) => (file.size ?? 0) > this.effectiveMaxFileSize);
         const rejectedType = files.some((file) => file instanceof File && !this.isAcceptedFile(file));
         const domainMessage = oversized
-            ? `Cada arquivo deve ter no máximo ${formatBytes(this.maxFileSize)}.`
+            ? `Cada arquivo deve ter no máximo ${formatBytes(this.effectiveMaxFileSize)}.`
             : rejectedType
                 ? 'O tipo de um ou mais arquivos não é permitido.'
                 : countMessage;
@@ -397,12 +462,34 @@ export class Upload {
         });
     }
     getCssClassMap() {
+        const state = this.effectiveState;
         return {
             'br-upload': true,
-            [this.feedbackState ?? this.state]: true,
+            ...(state ? { [state]: true } : {}),
             dragging: this.dragging,
         };
     }
+    get effectiveCapture() {
+        return resolveAllowedPropValue(this.el, 'capture', this.capture, UPLOAD_CAPTURE_VALUES, undefined, {
+            allowUndefined: true,
+        });
+    }
+    get effectiveState() {
+        const value = this.feedbackState ?? this.state;
+        const propertyName = this.feedbackState !== undefined ? 'feedbackState' : 'state';
+        return resolveAllowedPropValue(this.el, propertyName, value, UPLOAD_STATES, undefined, {
+            allowUndefined: true,
+        });
+    }
+    get effectiveMinFiles() {
+        return resolveIntegerPropValue(this.el, 'minFiles', this.minFiles, 0, Number.MAX_SAFE_INTEGER, 0);
+    }
+    get effectiveMaxFiles() {
+        return resolveIntegerPropValue(this.el, 'maxFiles', this.maxFiles, 0, Number.MAX_SAFE_INTEGER, 0);
+    }
+    get effectiveMaxFileSize() {
+        return resolveIntegerPropValue(this.el, 'maxFileSize', this.maxFileSize, 0, Number.MAX_SAFE_INTEGER, 0);
+    }
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: método trata remoção em múltiplos cenários (FileList nativo, fallback e arquivos externos).
     handleRemoveFileSelection(file) {
         // Se for um objeto File nativo (novo upload)
@@ -537,14 +624,14 @@ export class Upload {
     render() {
         const hasFiles = (this.filesSelected && this.filesSelected.length > 0) ||
             (this.parsedUploadFiles && this.parsedUploadFiles.length > 0);
-        return (h(Host, { key: 'b2354be16c7963909ce2939d1bd24e99475cc6ef', "aria-busy": this.uploading || this.isValidating ? 'true' : null }, h("div", { key: '78808e8f2c3eacce3deb6542ab5e2d9d60bd7e7e', class: this.getCssClassMap(), id: this.customId, part: "container" }, h("label", { key: '5881d7133d9118d3c9e1637932adfac7e58fb3b5', id: `label-${this.customId}`, class: "upload-label", htmlFor: `single-file-${this.customId}`, part: "label" }, h("span", { key: '7e1c9a04a4f88c06007c2d16ee2df1a7d0ca1956' }, h("slot", { key: '1043fac29600fdf581bf8a6fde3928a4b9140bdd', name: "label" }, this.label))), h("input", { key: 'acc7aeb2294edb18ff1495ae335f71420f5f55d5', ref: (el) => {
+        return (h(Host, { key: '413b14defe67839f0c2740133db51bd852a59010', "aria-busy": this.uploading || this.isValidating ? 'true' : null }, h("div", { key: '252a9e99359289d4f27423c236ffc1d4f0fe5ff8', class: this.getCssClassMap(), id: this.customId, part: "container" }, h("label", { key: 'bfd2fab6e613d227d30030f4390fce6519aa3c61', id: `label-${this.customId}`, class: "upload-label", htmlFor: `single-file-${this.customId}`, part: "label" }, h("span", { key: 'c62976caa6256378e3ce97fc8021c960d61deef2' }, h("slot", { key: 'bb2a6bb5de485abd5a7c81ef885e277fc636478d', name: "label" }, this.label))), h("input", { key: '7253801d41351bab72b9fefb0e3e34855ba9ba13', ref: (el) => {
                 this.nativeInput = el;
                 el.addEventListener('input', this.handleNativeInput);
-            }, class: "upload-input", id: `single-file-${this.customId}`, type: "file", onChange: this.handleInputChange, onCancel: this.handleNativeCancel, multiple: this.multiple, disabled: this.isDisabled(), required: this.required, accept: this.accept, capture: this.capture, "aria-labelledby": `label-${this.customId}`, "aria-busy": this.uploading || this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+            }, class: "upload-input", id: `single-file-${this.customId}`, type: "file", onChange: this.handleInputChange, onCancel: this.handleNativeCancel, multiple: this.multiple, disabled: this.isDisabled(), required: this.required, accept: this.accept, capture: this.effectiveCapture, "aria-labelledby": `label-${this.customId}`, "aria-busy": this.uploading || this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
                 ? `${this.customId}-feedback`
                 : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
                 ? `${this.customId}-feedback`
-                : null, part: "input" }), h("button", { key: 'd52437779c26e2e41a8fa944325385dca9fab5db', class: "upload-button", type: "button", disabled: this.isDisabled(), onClick: () => this.handleFileSelection(), onDragEnter: (event) => this.handleDragEnter(event), onDragLeave: (event) => this.handleDragLeave(event), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event), "aria-describedby": `label-${this.customId}`, part: "button" }, h("br-icon", { key: '5b9514f5bfdfa32c5bbf73443f215454d669a71e', iconName: "fa-solid:upload", width: "20", height: "20", "aria-hidden": "true" }), h("slot", { key: '00684193f001d54a684261a9dca1e5c35ba2bcba' }, h("span", { key: 'af97d6116a296ae574b5de7c0e26c78a783983b4' }, "Selecione o arquivo"))), h("div", { key: '9db7490ea790b63348952dffc52dc67dd8c54a82', class: "upload-help", part: "helper" }, h("slot", { key: 'f831bae068bae343d40067922c07431fce1e2295', name: "helper" }, this.multiple ? 'Clique ou arraste os arquivos para cima do componente Upload.' : null)), this.renderUploadStatus(), h("slot", { key: 'e6cae25855b7e30f797d51aae53448fc8be7cbf5', name: "upload-list" }, hasFiles && (h("br-list", { key: '90c912ba21f3dff6f9c28cf53886414aa0582c4a', id: `${this.customId}-list-files`, class: "upload-list", listRole: "list", density: "small", part: "file-list" }, this.renderFilesUploaded())))), this.renderUploadError(), this.renderFeedback()));
+                : null, part: "input" }), h("button", { key: 'e01c9f655f0d4c95471d2c99ce2a05251cb3d75c', class: "upload-button", type: "button", disabled: this.isDisabled(), onClick: () => this.handleFileSelection(), onDragEnter: (event) => this.handleDragEnter(event), onDragLeave: (event) => this.handleDragLeave(event), onDrop: (event) => this.handleDrop(event), onDragOver: (event) => this.handleDragOver(event), "aria-describedby": `label-${this.customId}`, part: "button" }, h("br-icon", { key: 'bce33b5a85715f28c3e123b314932836e335ca5d', iconName: "fa-solid:upload", width: "20", height: "20", "aria-hidden": "true" }), h("slot", { key: '12c9b2ddae82aebf0b9a7e718374990c899a1cd2' }, h("span", { key: 'b701b5e2a6cfd3163975743775e0267c4f439138' }, "Selecione o arquivo"))), h("div", { key: '13c8d0905d9bf98bbed302605ffef0613e6ca285', class: "upload-help", part: "helper" }, h("slot", { key: 'b105732bd8a8e4797dbf0fce47761375e20dee4d', name: "helper" }, this.multiple ? 'Clique ou arraste os arquivos para cima do componente Upload.' : null)), this.renderUploadStatus(), h("slot", { key: 'f531e208439baf498714c31bf8288f2552cd9748', name: "upload-list" }, hasFiles && (h("br-list", { key: '64725748a2814824557bd703d44b20611710a705', id: `${this.customId}-list-files`, class: "upload-list", listRole: "list", density: "small", part: "file-list" }, this.renderFilesUploaded())))), this.renderUploadError(), this.renderFeedback()));
     }
     static get is() { return "br-upload"; }
     static get encapsulation() { return "shadow"; }
@@ -632,7 +719,7 @@ export class Upload {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sugere a c\u00E2mera usada na captura de imagem ou v\u00EDdeo.\nO navegador pode ignorar a prefer\u00EAncia conforme dispositivo e permiss\u00F5es."
+                    "text": "Sugere a c\u00E2mera usada na captura de imagem ou v\u00EDdeo. Valores inv\u00E1lidos s\u00E3o ignorados.\nO navegador pode ignorar a prefer\u00EAncia conforme dispositivo e permiss\u00F5es."
                 },
                 "getter": false,
                 "setter": false,
@@ -678,10 +765,13 @@ export class Upload {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "example",
+                            "text": "```html\n<!-- Compatibilidade legada; prefira existing-files. -->\n<br-upload upload-files='[{\"name\":\"relatorio.pdf\",\"size\":204800}]'></br-upload>\n```"
+                        }, {
                             "name": "deprecated",
                             "text": "Use `existingFiles`."
                         }],
-                    "text": ""
+                    "text": "Lista de arquivos j\u00E1 enviados (para edi\u00E7\u00E3o ou pr\u00E9-visualiza\u00E7\u00E3o).\nPode ser uma string JSON ou um array de objetos IUploadFile. Cada item deve ter `name` n\u00E3o vazio e `size` num\u00E9rico n\u00E3o negativo opcional; itens inv\u00E1lidos s\u00E3o ignorados."
                 },
                 "getter": false,
                 "setter": false,
@@ -707,8 +797,14 @@ export class Upload {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Arquivos j\u00E1 existentes. Quando informada, tem preced\u00EAncia sobre `uploadFiles`."
+                    "tags": [{
+                            "name": "example",
+                            "text": "```html\n<br-upload existing-files='[{\"name\":\"relatorio.pdf\",\"size\":204800}]'></br-upload>\n```"
+                        }, {
+                            "name": "example",
+                            "text": "```js\nconst upload = document.querySelector('br-upload');\nupload.existingFiles = [{ name: 'relatorio.pdf', size: 204800 }];\n```"
+                        }],
+                    "text": "Arquivos j\u00E1 existentes. Quando informada, tem preced\u00EAncia sobre `uploadFiles`.\nCada item deve ter `name` n\u00E3o vazio e `size` num\u00E9rico n\u00E3o negativo opcional.\nUse JSON no atributo HTML ou um array por property binding."
                 },
                 "getter": false,
                 "setter": false,
@@ -774,7 +870,7 @@ export class Upload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Estado visual: 'info', 'warning', 'danger' ou 'success'."
+                    "text": "Estado visual: 'info', 'warning', 'danger' ou 'success'. Valores inv\u00E1lidos n\u00E3o aplicam estado."
                 },
                 "getter": false,
                 "setter": false,
@@ -839,7 +935,7 @@ export class Upload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Quantidade m\u00EDnima de arquivos, incluindo arquivos j\u00E1 enviados."
+                    "text": "Quantidade m\u00EDnima de arquivos, incluindo arquivos j\u00E1 enviados. Deve ser um inteiro n\u00E3o negativo; valores inv\u00E1lidos usam `0`."
                 },
                 "getter": false,
                 "setter": false,
@@ -859,7 +955,7 @@ export class Upload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Quantidade m\u00E1xima de arquivos. Zero significa sem limite."
+                    "text": "Quantidade m\u00E1xima de arquivos. Zero significa sem limite. Deve ser um inteiro n\u00E3o negativo; valores inv\u00E1lidos usam `0`."
                 },
                 "getter": false,
                 "setter": false,
@@ -879,7 +975,7 @@ export class Upload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Tamanho m\u00E1ximo permitido para cada arquivo, em bytes. Zero significa sem limite."
+                    "text": "Tamanho m\u00E1ximo permitido para cada arquivo, em bytes. Zero significa sem limite. Deve ser um inteiro n\u00E3o negativo; valores inv\u00E1lidos usam `0`."
                 },
                 "getter": false,
                 "setter": false,
@@ -905,7 +1001,10 @@ export class Upload {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "example",
+                            "text": "```js\nconst upload = document.querySelector('br-upload');\nupload.validator = (files) =>\n  files.every((file) => file.size <= 5_000_000) ? null : 'Cada arquivo deve ter at\u00E9 5 MB';\n```"
+                        }],
                     "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada \u00E0 lista de arquivos selecionados.\nO componente valida `File[]`, mas n\u00E3o envia arquivos nem interpreta a\nresposta do servidor."
                 },
                 "getter": false,
@@ -929,7 +1028,10 @@ export class Upload {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "example",
+                            "text": "```js\nconst upload = document.querySelector('br-upload');\nupload.uploadHandler = ({ file, signal, onProgress }) =>\n  enviarArquivo({ file, signal, onProgress });\n```"
+                        }],
                     "text": "Fun\u00E7\u00E3o ass\u00EDncrona opcional fornecida pela aplica\u00E7\u00E3o para enviar cada arquivo.\n\nO componente fornece o arquivo, um `AbortSignal` e uma fun\u00E7\u00E3o de progresso,\nmas n\u00E3o conhece endpoint, autentica\u00E7\u00E3o nem formato de resposta."
                 },
                 "getter": false,

package/dist/collection/components/wizard/wizard-panel/wizard-panel.css

@@ -1 +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))}.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-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)}:host{display:none}:host([active]){display:block}.wizard-panel{width:100%}.wizard-panel-content{width:100%}
+*,*::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}:host{display:none}:host([active]){display:block}.wizard-panel{width:100%}.wizard-panel-content{width:100%}

package/dist/collection/components/wizard/wizard-panel/wizard-panel.js

@@ -4,9 +4,20 @@
  */
 import { Host, h } from "@stencil/core";
 /**
- * Wizard Panel (Painel de etapa do Wizard)
- * Representa uma etapa individual dentro do br-wizard.
+ * Subcomponente individual de `br-wizard`, responsável por encapsular o formulário, campos de entrada ou informações pertencentes a uma etapa específica do fluxo guiado.
  *
+ * ### Papel na composição
+ *
+ * - Agrupa todos os campos de formulário e conteúdos daquela etapa.
+ * - Informa o título e subtítulo da etapa que serão refletidos na barra de progresso do wizard.
+ *
+ * ### Regra de uso e relacionamento
+ *
+ * Deve ser declarado no slot padrão do orquestrador `br-wizard`. O componente pai é quem decide qual painel deve estar visível com base na etapa corrente, coordenando os botões de avançar e voltar. Não deve ser instanciado de forma autônoma fora de um `br-wizard`.
+ *
+ * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/wizard?tab=designer).
+ *
+
  * @slot default - Slot para o conteúdo da etapa (formulários, campos ou informações da fase atual).
  *
  * @part panel - Wrapper do painel.
@@ -44,11 +55,24 @@ export class WizardPanel {
     async isActive() {
         return this.active;
     }
+    /**
+     * Move o foco para o primeiro controle interativo do conteúdo do painel.
+     * O wizard usa este método para manter o encapsulamento do Shadow DOM.
+     * @internal
+     * @returns `true` quando um elemento recebeu foco.
+     */
+    async focusFirst() {
+        const focusable = this.el.shadowRoot?.querySelector('br-button, button:not([disabled]), [href], br-item, br-input, input:not([disabled]), br-select, select:not([disabled]), br-textarea, textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        if (!focusable)
+            return false;
+        focusable.focus();
+        return true;
+    }
     render() {
         const hostAttrs = {
             ...(this.active && { active: 'true' }),
         };
-        return (h(Host, { key: 'a6e2b669669cac7ccf64a85b1b9a8686e9ade1fa', ...hostAttrs }, h("div", { key: '934fc90cfbf3e03565f0b0cac52542436945e5e7', class: "wizard-panel", role: "tabpanel", id: `wizard-panel-${this.index}`, part: "panel" }, h("div", { key: 'dc0e32a257ff23ebb58670de95eb14af8f30c5c4', class: "wizard-panel-content", part: "content" }, h("slot", { key: 'b1c7fdecb63f8b13d70ebcfb456b1f37d7031718' })))));
+        return (h(Host, { key: '3fac54a0b3cd81e2e5cc8af97cf94f67b8f77d07', ...hostAttrs }, h("div", { key: '2cf795a7ca7cd52f214f8cf40f740f92326fe72b', class: "wizard-panel", role: "tabpanel", id: `wizard-panel-${this.index}`, part: "panel" }, h("div", { key: '4e26b33a6cf80c85b40077db281264fc4a6ad068', class: "wizard-panel-content", part: "content" }, h("slot", { key: '1eedf41617263ca9ecae4cc4390a29278f786272' })))));
     }
     static get is() { return "br-wizard-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -160,6 +184,33 @@ export class WizardPanel {
                             "text": "M\u00E9todo interno para o wizard pai consultar o estado"
                         }]
                 }
+            },
+            "focusFirst": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Move o foco para o primeiro controle interativo do conte\u00FAdo do painel.\nO wizard usa este m\u00E9todo para manter o encapsulamento do Shadow DOM.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "`true` quando um elemento recebeu foco."
+                        }]
+                }
             }
         };
     }

package/dist/collection/components/wizard/wizard.css

@@ -1 +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))}.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-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)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}:host{--wizard-min-height: 300px;--wizard-max-height: 800px;display:flex;flex-direction:column;height:100%;margin-bottom:var(--spacing-scale-4x);max-height:var(--wizard-max-height);max-width:none;min-height:var(--wizard-min-height)}:host .wizard-progress{background-color:var(--background-alternative);display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));grid-template-rows:none;min-height:164px;overflow-x:auto;overflow-y:hidden;padding-top:var(--spacing-scale-7x);width:100%}@media(max-width: 991px){:host .wizard-progress{max-height:100px;min-height:100px;overflow-y:hidden;padding-top:var(--spacing-scale-3x);position:relative;transition-delay:0s;transition-duration:.25s;transition-property:all;transition-timing-function:linear}:host .wizard-progress::after{background-color:rgba(0,0,0,0);bottom:2px;color:var(--interactive);content:"";display:block;font-family:"Font Awesome 5 Free",sans-serif;font-size:var(--switch-icon-size);font-weight:var(--font-weight-black);height:1em;left:50%;margin-left:-0.5em;position:absolute;top:unset;transition-delay:0s;transition-duration:.25s;transition-property:all;transition-timing-function:linear;width:auto}}@media(max-width: 991px){:host[collapsed] .wizard-progress{max-height:64px;min-height:64px;overflow-y:hidden;padding-bottom:var(--spacing-scale-3x);padding-top:var(--spacing-scale-3x)}:host[collapsed] .wizard-progress::after{margin-top:var(--spacing-scale-4xh)}:host[collapsed] .wizard-form{height:auto}:host[collapsed] .wizard-panel-content{overflow-x:hidden;overflow-y:auto}}:host[vertical]{flex-direction:row}:host[vertical] .wizard-progress{flex:1;float:none;grid-template-columns:1fr;height:auto;max-width:260px;overflow-x:hidden;padding-top:0;position:relative;text-align:right}:host[vertical][scroll] .wizard-progress{overflow-y:auto}:host[vertical][scroll] .wizard-progress::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}:host[vertical][scroll] .wizard-progress::-webkit-scrollbar-track{background:var(--gray-10)}:host[vertical][scroll] .wizard-progress::-webkit-scrollbar-thumb{background:var(--gray-30)}:host[vertical][scroll] .wizard-progress:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}:host[vertical] .wizard-form{float:none;height:auto;width:calc(100% - 260px)}:host[vertical] .wizard-form .wizard-panel .wizard-panel-content{border-top:0}@media(max-width: 991px){:host[vertical] .wizard-progress{max-height:100%;max-width:110px}:host[vertical] .wizard-progress::after{height:1em;left:unset;margin-top:-0.5em;right:2px;top:50%;transform:rotate(-90deg);width:1em}:host[vertical] .wizard-form{height:auto;max-width:calc(100% - 110px);min-width:calc(100% - 110px);transition-delay:0s;transition-duration:.25s;transition-property:all;transition-timing-function:linear}:host[vertical] .wizard-panel{height:100%;max-height:100%}:host[vertical][collapsed] .wizard-progress{max-width:60px;padding-bottom:0;padding-top:0}:host[vertical][collapsed] .wizard-form{max-width:calc(100% - 60px);min-width:calc(100% - 60px)}}:host .wizard-form{display:flex;flex:1;height:auto;overflow:hidden;position:relative}:host .wizard-panel{display:none;flex-direction:column;flex-wrap:nowrap;height:auto;left:0;margin-bottom:0;opacity:0;position:static;top:0;visibility:hidden;width:100%}:host .wizard-panel[active]{display:flex;height:auto;left:0 !important;opacity:1;transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:linear;visibility:visible}@keyframes slide-left{0%{opacity:0;transform:translateX(1%)}100%{opacity:1;transform:translateX(0)}}:host .wizard-panel-content{border-top:1px solid var(--border-color);flex-grow:1;height:auto;max-height:none;overflow-x:auto;overflow-y:auto;padding:var(--spacing-scale-base) var(--spacing-scale-2x)}:host .wizard-panel-content::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}:host .wizard-panel-content::-webkit-scrollbar-track{background:var(--gray-10)}:host .wizard-panel-content::-webkit-scrollbar-thumb{background:var(--gray-30)}:host .wizard-panel-content:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}:host .wizard-panel-content:focus,:host .wizard-panel-content:focus-visible,:host .wizard-panel-content.focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}:host .wizard-panel-content>:last-child{margin-bottom:0}:host .wizard-panel-btn{align-self:flex-end;background-color:var(--background-alternative);border-top:1px solid var(--border-color);height:fit-content;margin-top:1px;padding:var(--spacing-scale-2x) 1.5%;width:100%}:host .wizard-btn-next,:host .wizard-btn,:host .wizard-btn-prev{float:right;margin-left:var(--spacing-scale-2x)}:host .wizard-btn-canc{float:left}@media(max-width: 991px){:host .wizard-form{height:auto}:host .wizard-panel{border-top:0;display:none;flex-wrap:nowrap;margin-bottom:0;max-height:none}:host .wizard-panel-content{height:auto;max-height:100%;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-scale-half) var(--spacing-scale-base);transition-delay:0s;transition-duration:.25s;transition-property:all;transition-timing-function:linear}:host .wizard-panel-btn{align-items:flex-end;background-color:var(--background-alternative);display:flex;flex-wrap:wrap;height:fit-content;justify-content:center;padding:0 !important;position:static;width:100%}:host .wizard-btn-canc,:host .wizard-btn-next,:host .wizard-btn-prev,:host .wizard-btn{float:none;margin:var(--spacing-scale-base) 5%;width:90%}:host .wizard-btn-next,:host .wizard-btn{order:1}}:host.inverted,:host.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.inverted .br-button.primary,:host.inverted .br-button[primary],:host.dark-mode .br-button.primary,:host.dark-mode .br-button[primary]{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--background-dark-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);background-color:var(--interactive-dark);color:var(--background-dark)}:host.inverted .br-button.secondary,:host.inverted .br-button[secondary],:host.dark-mode .br-button.secondary,:host.dark-mode .br-button[secondary]{background-color:var(--background-dark)}:host.inverted .wizard-progress,:host.dark-mode .wizard-progress{background-color:rgba(0,0,0,0)}:host.inverted .wizard-panel .wizard-panel-btn,:host.dark-mode .wizard-panel .wizard-panel-btn{background-color:rgba(0,0,0,0)}:host br-step-item[active]{--step-label-font-weight: var(--font-weight-semi-bold);--step-label-color: var(--active)}:host br-step-item::part(label){display:block;line-height:1em;text-align:center}:host .wizard-progress{place-content:center center;height:auto;padding-top:0}@media(max-width: 991px){:host .wizard-progress br-step-item::part(label){font-size:var(--font-size-scale-down-02, 9.716px)}}:host([collapsed]) br-step-item::part(label){display:none}@media(max-width: 991px){:host([collapsed]) br-step-item::part(label){display:none}:host([collapsed]) .wizard-progress{max-height:64px;min-height:64px;overflow-y:hidden;padding-bottom:var(--spacing-scale-3x);padding-top:var(--spacing-scale-3x)}:host([collapsed]) .wizard-progress::after{margin-top:var(--spacing-scale-4xh)}}:host([vertical]){flex-direction:row}:host([vertical]) .wizard-progress{flex:1;float:none;grid-template-columns:1fr;height:auto;max-width:260px;overflow-x:hidden;padding-top:0;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}@media(max-width: 991px){:host([vertical]) .wizard-progress{max-height:100%;max-width:110px}:host([vertical]) .wizard-progress::after{height:1em;left:unset;margin-top:-0.5em;right:2px;top:50%;transform:rotate(-90deg);width:1em}:host([vertical]) .wizard-form{max-width:calc(100% - 110px);min-width:calc(100% - 110px)}:host([vertical])[collapsed] .wizard-progress{max-width:60px;padding-bottom:0;padding-top:0}}:host(.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(.dark-mode) .br-button.primary,:host(.dark-mode) .br-button[primary]{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--background-dark-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);background-color:var(--interactive-dark);color:var(--background-dark)}:host(.dark-mode) .br-button.secondary,:host(.dark-mode) .br-button[secondary]{background-color:var(--background-dark)}
+*,*::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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}:host{--wizard-min-height: 300px;--wizard-max-height: 800px;display:flex;flex-direction:column;height:100%;margin-bottom:var(--spacing-scale-4x);max-height:var(--wizard-max-height);max-width:none;min-height:var(--wizard-min-height)}:host .wizard-progress{background-color:var(--background-alternative);display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));grid-template-rows:none;min-height:164px;overflow-x:auto;overflow-y:hidden;padding-top:var(--spacing-scale-7x);width:100%}@media(max-width: 991px){:host .wizard-progress{max-height:100px;min-height:100px;overflow-y:hidden;padding-top:var(--spacing-scale-3x);position:relative;transition-delay:0s;transition-duration:.25s;transition-property:all;transition-timing-function:linear}:host .wizard-progress::after{background-color:rgba(0,0,0,0);bottom:2px;color:var(--interactive);content:"";display:block;font-family:"Font Awesome 5 Free",sans-serif;font-size:var(--switch-icon-size);font-weight:var(--font-weight-black);height:1em;left:50%;margin-left:-0.5em;position:absolute;top:unset;transition-delay:0s;transition-duration:.25s;transition-property:all;transition-timing-function:linear;width:auto}}@media(max-width: 991px){:host[collapsed] .wizard-progress{max-height:64px;min-height:64px;overflow-y:hidden;padding-bottom:var(--spacing-scale-3x);padding-top:var(--spacing-scale-3x)}:host[collapsed] .wizard-progress::after{margin-top:var(--spacing-scale-4xh)}:host[collapsed] .wizard-progress-btn{padding-bottom:var(--spacing-scale-base)}:host[collapsed] .wizard-progress-btn .info{display:none}:host[collapsed] .wizard-form{height:auto}:host[collapsed] .wizard-panel-content{overflow-x:hidden;overflow-y:auto}}:host[vertical]{flex-direction:row}:host[vertical] .wizard-progress{flex:1;float:none;grid-template-columns:1fr;height:auto;max-width:260px;overflow-x:hidden;padding-top:0;position:relative;text-align:right}:host[vertical] .wizard-progress-btn{height:100%;line-height:100%;max-height:100%;padding-bottom:0;padding-right:70px;padding-top:0;text-align:right}:host[vertical] .wizard-progress-btn::before{left:calc(100% - 32px);line-height:26px;margin-top:calc(var(--spacing-scale-2x)*-1);position:absolute;text-align:center;top:50%}:host[vertical] .wizard-progress-btn::after{height:calc(100% - 34px);left:calc(100% - 33px);position:absolute;top:calc(-50% + 18px);width:1px}:host[vertical] .wizard-progress-btn[active]::after{width:1px}:host[vertical][scroll] .wizard-progress{overflow-y:auto}:host[vertical][scroll] .wizard-progress::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}:host[vertical][scroll] .wizard-progress::-webkit-scrollbar-track{background:var(--gray-10)}:host[vertical][scroll] .wizard-progress::-webkit-scrollbar-thumb{background:var(--gray-30)}:host[vertical][scroll] .wizard-progress:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}:host[vertical][scroll] .wizard-progress .wizard-progress-btn{min-height:100px}:host[vertical] .wizard-form{float:none;height:auto;width:calc(100% - 260px)}:host[vertical] .wizard-form .wizard-panel .wizard-panel-content{border-top:0}@media(max-width: 991px){:host[vertical] .wizard-progress{max-height:100%;max-width:110px}:host[vertical] .wizard-progress::after{height:1em;left:unset;margin-top:-0.5em;right:2px;top:50%;transform:rotate(-90deg);width:1em}:host[vertical] .wizard-progress-btn{line-height:18px;padding-right:var(--spacing-scale-7x)}:host[vertical] .wizard-progress-btn .info{line-height:1.6em;margin-top:-0.5em;position:absolute;right:54px}:host[vertical] .wizard-form{height:auto;max-width:calc(100% - 110px);min-width:calc(100% - 110px);transition-delay:0s;transition-duration:.25s;transition-property:all;transition-timing-function:linear}:host[vertical] .wizard-panel{height:100%;max-height:100%}:host[vertical][collapsed] .wizard-progress{max-width:60px;padding-bottom:0;padding-top:0}:host[vertical][collapsed] .wizard-progress-btn{padding-right:0}:host[vertical][collapsed] .wizard-progress-btn .info{display:none}:host[vertical][collapsed] .wizard-form{max-width:calc(100% - 60px);min-width:calc(100% - 60px)}}:host .wizard-form{display:flex;flex:1;height:auto;overflow:hidden;position:relative}:host .wizard-panel{display:none;flex-direction:column;flex-wrap:nowrap;height:auto;left:0;margin-bottom:0;opacity:0;position:static;top:0;visibility:hidden;width:100%}:host .wizard-panel[active]{display:flex;height:auto;left:0 !important;opacity:1;transition-delay:0s;transition-duration:.5s;transition-property:all;transition-timing-function:linear;visibility:visible}@keyframes slide-left{0%{opacity:0;transform:translateX(1%)}100%{opacity:1;transform:translateX(0)}}:host .wizard-panel-content{border-top:1px solid var(--border-color);flex-grow:1;height:auto;max-height:none;overflow-x:auto;overflow-y:auto;padding:var(--spacing-scale-base) var(--spacing-scale-2x)}:host .wizard-panel-content::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}:host .wizard-panel-content::-webkit-scrollbar-track{background:var(--gray-10)}:host .wizard-panel-content::-webkit-scrollbar-thumb{background:var(--gray-30)}:host .wizard-panel-content:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}:host .wizard-panel-content:focus,:host .wizard-panel-content:focus-visible,:host .wizard-panel-content.focus-visible{border-color:var(--focus) !important;box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}:host .wizard-panel-content>:last-child{margin-bottom:0}:host .wizard-panel-btn{align-self:flex-end;background-color:var(--background-alternative);border-top:1px solid var(--border-color);height:fit-content;margin-top:1px;padding:var(--spacing-scale-2x) 1.5%;width:100%}:host .wizard-btn-next,:host .wizard-btn,:host .wizard-btn-prev{float:right;margin-left:var(--spacing-scale-2x)}:host .wizard-btn-canc{float:left}@media(max-width: 991px){:host .wizard-form{height:auto}:host .wizard-panel{border-top:0;display:none;flex-wrap:nowrap;margin-bottom:0;max-height:none}:host .wizard-panel-content{height:auto;max-height:100%;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-scale-half) var(--spacing-scale-base);transition-delay:0s;transition-duration:.25s;transition-property:all;transition-timing-function:linear}:host .wizard-panel-btn{align-items:flex-end;background-color:var(--background-alternative);display:flex;flex-wrap:wrap;height:fit-content;justify-content:center;padding:0 !important;position:static;width:100%}:host .wizard-btn-canc,:host .wizard-btn-next,:host .wizard-btn-prev,:host .wizard-btn{float:none;margin:var(--spacing-scale-base) 5%;width:90%}:host .wizard-btn-next,:host .wizard-btn{order:1}}:host.inverted,:host.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.inverted .br-button.primary,:host.inverted .br-button[primary],:host.dark-mode .br-button.primary,:host.dark-mode .br-button[primary]{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--background-dark-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);background-color:var(--interactive-dark);color:var(--background-dark)}:host.inverted .br-button.secondary,:host.inverted .br-button[secondary],:host.dark-mode .br-button.secondary,:host.dark-mode .br-button[secondary]{background-color:var(--background-dark)}:host.inverted .wizard-progress,:host.dark-mode .wizard-progress{background-color:rgba(0,0,0,0)}:host.inverted .wizard-progress-btn[active],:host.dark-mode .wizard-progress-btn[active]{color:var(--color)}:host.inverted .wizard-progress-btn[active]::before,:host.dark-mode .wizard-progress-btn[active]::before{--interactive-rgb: var(--active-rgb);background-color:var(--color);color:var(--active)}:host.inverted .wizard-panel .wizard-panel-btn,:host.dark-mode .wizard-panel .wizard-panel-btn{background-color:rgba(0,0,0,0)}:host br-step-item[active]{--step-label-font-weight: var(--font-weight-semi-bold);--step-label-color: var(--active)}:host br-step-item::part(label){display:block;line-height:1em;text-align:center}:host .wizard-progress{place-content:center center;height:auto;padding-top:0;transition:none}@media(prefers-reduced-motion: no-preference){:host .wizard-progress{transition:none}}@media(max-width: 991px){:host .wizard-progress br-step-item::part(label){font-size:var(--font-size-scale-down-02, 9.716px)}:host .wizard-progress::after{cursor:pointer}}:host .wizard-progress::after,:host .wizard-progress-btn,:host .wizard-form{transition:none}@media(prefers-reduced-motion: no-preference){:host .wizard-progress::after,:host .wizard-progress-btn,:host .wizard-form{transition:none}}:host .wizard-progress-btn::before{transition:none}@media(prefers-reduced-motion: no-preference){:host .wizard-progress-btn::before{transition:background-color var(--duration-very-fast, 100ms) var(--animation-ease-in-out, ease-in-out),border-color var(--duration-very-fast, 100ms) var(--animation-ease-in-out, ease-in-out),color var(--duration-very-fast, 100ms) var(--animation-ease-in-out, ease-in-out),transform var(--duration-very-fast, 100ms) var(--animation-ease-in-out, ease-in-out)}}:host .wizard-progress-btn::after{transition:none}@media(prefers-reduced-motion: no-preference){:host .wizard-progress-btn::after{transition:background-color var(--duration-very-fast, 100ms) var(--animation-ease-in-out, ease-in-out)}}:host .wizard-panel[active]{transition:none}@media(prefers-reduced-motion: no-preference){:host .wizard-panel[active]{transition:none}}:host .wizard-panel[active]{animation:none}@media(prefers-reduced-motion: no-preference){:host .wizard-panel[active]{animation:wizard-panel-open var(--duration-fast, 300ms) var(--animation-ease-out, ease-out) both}}:host .wizard-panel-content{transition:none}@media(prefers-reduced-motion: no-preference){:host .wizard-panel-content{transition:none}}@keyframes wizard-panel-open{from{opacity:0}to{opacity:1}}:host([collapsed]) br-step-item::part(label){display:none}@media(max-width: 991px){:host([collapsed]) br-step-item::part(label){display:none}:host([collapsed]) .wizard-progress{max-height:64px;min-height:64px;overflow-y:hidden;padding-bottom:var(--spacing-scale-3x);padding-top:var(--spacing-scale-3x)}:host([collapsed]) .wizard-progress::after{margin-top:var(--spacing-scale-4xh)}}:host([vertical]){flex-direction:row}:host([vertical]) .wizard-progress{flex:1;float:none;grid-template-columns:1fr;height:auto;max-width:260px;overflow-x:hidden;padding-top:0;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}@media(max-width: 991px){:host([vertical]) .wizard-progress{max-height:100%;max-width:110px}:host([vertical]) .wizard-progress::after{height:1em;left:unset;margin-top:-0.5em;right:2px;top:50%;transform:rotate(-90deg);width:1em}:host([vertical]) .wizard-form{max-width:calc(100% - 110px);min-width:calc(100% - 110px)}:host([vertical])[collapsed] .wizard-progress{max-width:60px;padding-bottom:0;padding-top:0}}:host(.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(.dark-mode) .br-button.primary,:host(.dark-mode) .br-button[primary]{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--background-dark-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);background-color:var(--interactive-dark);color:var(--background-dark)}:host(.dark-mode) .br-button.secondary,:host(.dark-mode) .br-button[secondary]{background-color:var(--background-dark)}