@govbr-ds/webcomponents 2.1.0 → 2.1.1

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

@@ -0,0 +1,706 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-C2RBydfd.js';
+import { g as generateUniqueId } from './id-BkS6ujyf.js';
+import { U as UniversalSwipe } from './swipe-Dmfk7eEe.js';
+
+const wizardCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.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)}`;
+
+const Wizard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.brWizardStepChange = createEvent(this, "brWizardStepChange", 7);
+        this.brWizardBeforeStepChange = createEvent(this, "brWizardBeforeStepChange", 7);
+        this.brWizardComplete = createEvent(this, "brWizardComplete", 7);
+        this.brWizardCancel = createEvent(this, "brWizardCancel", 7);
+        this.brWizardNavigationBlocked = createEvent(this, "brWizardNavigationBlocked", 7);
+        /**
+         * Mensagem de status para leitores de tela (aria-live)
+         */
+        this.ariaLiveMessage = '';
+        /**
+         * Estado collapsed para recolher/expandir barra de progresso (mobile)
+         */
+        this.collapsed = false;
+        /**
+         * Etapa atual sendo exibida.
+         * Gerenciado internamente pelo componente.
+         */
+        this.currentStep = 1;
+        /** Estado mobile para detecção responsiva */
+        this.isMobile = false;
+        /**
+         * Lista de painéis filhos (br-wizard-panel).
+         * Descobertos automaticamente via slot.
+         */
+        this.panels = [];
+        /** Etapa atual (numeração 1-indexada). Reflete para atributo step. */
+        this.step = 1;
+        /**
+         * Índice da etapa inicial do wizard.
+         * Define qual etapa será exibida ao carregar o componente.
+         * A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc).
+         * @deprecated Use `initialIndex`.
+         */
+        this.initialStep = 1;
+        /**
+         * Orientação visual do wizard.
+         * Define se os indicadores de progresso serão exibidos horizontalmente ou verticalmente.
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Tipo de progressão entre etapas.
+         * - `linear`: O usuário deve completar cada etapa sequencialmente. Não é possível pular etapas futuras.
+         * - `nonlinear`: O usuário pode navegar livremente entre qualquer etapa.
+         */
+        this.progressionType = 'nonlinear';
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Referência ao componente br-step.
+         */
+        this.stepRef = null;
+        /**
+         * Flag para evitar loop quando sincronizamos programaticamente com br-step.
+         */
+        this.isSyncingWithStep = false;
+        /**
+         * Instância do Swipe para gestos mobile na barra de progresso.
+         */
+        this.progressBarSwipe = null;
+        /**
+         * Referência ao elemento DOM da barra de progresso.
+         */
+        this.progressBarRef = null;
+        /**
+         * Referência ao elemento DOM do formulário/painel ativo.
+         */
+        this.formRef = null;
+        /**
+         * Timer para limpar mensagens aria-live.
+         */
+        this.ariaLiveTimeout = null;
+        /**
+         * Tempo de espera para limpar mensagens aria-live (em ms).
+         */
+        this.ARIA_LIVE_CLEANUP_DELAY = 5000;
+        /**
+         * Seletor de elementos focáveis dentro dos painéis.
+         */
+        this.FOCUSABLE_SELECTOR = 'br-button, button, [href], br-item, br-input, input, br-select, select, br-textarea, textarea, [tabindex]:not([tabindex="-1"])';
+        /**
+         * Handler de resize da janela.
+         * Alterna entre modos mobile/desktop e configura/limpa gestos swipe.
+         */
+        this.handleResize = () => {
+            const wasMobile = this.isMobile;
+            this.isMobile = window.innerWidth <= 992;
+            if (this.isMobile && !wasMobile) {
+                this.collapsed = true;
+                this.setupSwipeListeners();
+            }
+            else if (!this.isMobile && wasMobile) {
+                this.cleanupSwipeListeners();
+                this.collapsed = false;
+            }
+        };
+        /**
+         * Handler de toque no formulário.
+         * Recolhe automaticamente a barra de progresso.
+         */
+        this.handleFormTouchStart = () => {
+            this.collapseSteps();
+        };
+        /**
+         * Handler do botão "Avançar" ou "Concluir".
+         * Se for a última etapa, valida e emite evento de conclusão.
+         * Caso contrário, avança para a próxima etapa.
+         */
+        this.handleNext = async () => {
+            if (this.currentStep === this.panels.length) {
+                // Última etapa: validar antes de completar
+                const eventResult = this.brWizardBeforeStepChange.emit(this.currentStep);
+                // Se preventDefault() foi chamado, bloqueia conclusão
+                if (!eventResult.defaultPrevented) {
+                    this.brWizardComplete.emit();
+                }
+            }
+            else {
+                await this.nextStep();
+            }
+        };
+        /**
+         * Handler do botão "Voltar".
+         * Navega para a etapa anterior.
+         */
+        this.handlePrevious = async () => {
+            await this.previousStep();
+        };
+        /**
+         * Handler do botão "Cancelar".
+         * Emite evento de cancelamento do wizard.
+         */
+        this.handleCancel = () => {
+            this.brWizardCancel.emit();
+        };
+    }
+    /**
+     * Observa mudanças no tipo de progressão.
+     * Atualiza a navegação dos painéis quando muda entre linear/nonlinear.
+     */
+    handleProgressionTypeChange() {
+        this.updatePanels();
+    }
+    /**
+     * Observa mudanças na etapa inicial.
+     * Reinicializa o wizard quando a prop initialStep é alterada externamente.
+     */
+    async handleInitialStepChange() {
+        this.setInitialStep();
+        await this.syncWithBrStep();
+        this.updatePanels();
+    }
+    async handleInitialIndexChange() {
+        this.setInitialStep();
+        await this.syncWithBrStep();
+        this.updatePanels();
+    }
+    async handleCurrentIndexChange(newIndex) {
+        if (newIndex !== undefined && newIndex + 1 !== this.currentStep)
+            await this.navigateToStep(newIndex + 1, true);
+    }
+    async handleStepChangeProp(newStep) {
+        if (newStep !== undefined && newStep !== this.currentStep) {
+            await this.navigateToStep(newStep, true);
+        }
+    }
+    /**
+     * Observa mudanças na etapa atual (fonte única de verdade).
+     * Sincroniza com br-step, atualiza painéis, anuncia mudança e move foco.
+     * @param newStep - Nova etapa
+     * @param oldStep - Etapa anterior
+     */
+    async handleCurrentStepChange(newStep, oldStep) {
+        if (newStep !== oldStep) {
+            this.step = newStep;
+            this.el.setAttribute('step', String(newStep));
+            if (this.currentIndex !== undefined && this.currentIndex !== newStep - 1)
+                this.currentIndex = newStep - 1;
+            await this.syncWithBrStep();
+            this.updatePanels();
+            this.announceStepChange(newStep, oldStep);
+            this.setFocusOnActivePanel();
+        }
+    }
+    /**
+     * Lifecycle: limpa listeners quando componente é removido.
+     */
+    disconnectedCallback() {
+        this.cleanupMobileDetection();
+        this.cleanupSwipeListeners();
+        this.clearAriaLiveTimeout();
+    }
+    /**
+     * Lifecycle: inicializa painéis antes da renderização.
+     */
+    componentWillLoad() {
+        this.panels = Array.from(this.el.querySelectorAll('br-wizard-panel'));
+        this.setInitialStep();
+    }
+    /**
+     * Lifecycle: carrega painéis e configura estado inicial.
+     * Sincroniza com br-step, atualiza painéis e configura detecção mobile.
+     */
+    async componentDidLoad() {
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot !== null && typeof slot !== 'undefined') {
+            const assignedElements = slot.assignedElements();
+            const slotPanels = assignedElements.filter((el) => el.tagName.toLowerCase() === 'br-wizard-panel');
+            if (slotPanels.length > 0) {
+                this.panels = slotPanels;
+            }
+        }
+        await this.syncWithBrStep();
+        this.updatePanels();
+        this.setupMobileDetection();
+        if (this.isMobile) {
+            this.collapsed = true;
+        }
+    }
+    /**
+     * Detecta quando o slot muda (painéis adicionados/removidos dinamicamente).
+     * Redescobre os painéis e ressincroniza o estado.
+     * @param event - Evento slotchange
+     */
+    async handleSlotChange(event) {
+        const slot = event.target;
+        this.discoverPanelsFromSlot(slot);
+        await this.syncWithBrStep();
+        this.updatePanels();
+    }
+    /**
+     * Detecta quando o br-step muda de etapa ativa.
+     * Valida e sincroniza a navegação com o componente interno br-step.
+     * @param event - Evento customizado do br-step
+     */
+    async handleStepChange(event) {
+        if (this.isSyncingWithStep) {
+            return;
+        }
+        const requestedStep = event.detail.activeStep + 1;
+        const success = await this.navigateToStep(requestedStep);
+        if (!success) {
+            event.stopPropagation();
+            await this.syncWithBrStep();
+        }
+    }
+    /**
+     * Avança para a próxima etapa.
+     * Executa validação via evento `brWizardBeforeStepChange` antes de navegar.
+     * @returns Promise<boolean> - true se navegou com sucesso, false se bloqueado
+     */
+    async nextStep() {
+        return await this.navigateToStep(this.currentStep + 1);
+    }
+    /** Avança para a próxima etapa. */
+    async next() {
+        return await this.nextStep();
+    }
+    /**
+     * Volta para a etapa anterior.
+     * Não executa validação ao retornar.
+     * @returns Promise<boolean> - true se navegou com sucesso, false se bloqueado
+     */
+    async previousStep() {
+        return await this.navigateToStep(this.currentStep - 1);
+    }
+    /** Retorna para a etapa anterior. */
+    async previous() {
+        return await this.previousStep();
+    }
+    /**
+     * Navega para uma etapa específica.
+     * Executa validação se estiver avançando (etapa alvo > etapa atual).
+     * @param stepNumber - Número da etapa de destino (numeração começa em 1)
+     * @returns Promise<boolean> - true se navegou com sucesso, false se bloqueado
+     */
+    async goToStep(stepNumber) {
+        return await this.navigateToStep(stepNumber);
+    }
+    /**
+     * Retorna à primeira etapa do wizard.
+     * Não executa validação (útil para reiniciar o fluxo).
+     * @returns Promise<void>
+     */
+    async reset() {
+        await this.navigateToStep(1, true);
+    }
+    /**
+     * Retorna o elemento HTML do painel ativo no momento.
+     * @returns Promise<HTMLElement | null>
+     */
+    async getCurrentStep() {
+        return this.panels[this.currentStep - 1] || null;
+    }
+    /**
+     * Retorna todos os painéis do wizard.
+     * @returns Promise<HTMLElement[]>
+     */
+    async getAllSteps() {
+        return [...this.panels];
+    }
+    /**
+     * Retorna um painel específico pelo índice.
+     * @param stepNumber - Número da etapa (numeração começa em 1)
+     * @returns Promise<HTMLElement | null>
+     */
+    async getStepByIndex(stepNumber) {
+        return this.panels[stepNumber - 1] || null;
+    }
+    /**
+     * Retorna o índice (número) da etapa atual.
+     * A numeração começa em 1 (primeira etapa = 1, segunda = 2, etc).
+     * @returns Promise<number>
+     */
+    async getCurrentStepIndex() {
+        return this.currentStep;
+    }
+    /**
+     * Retorna o número total de etapas do wizard.
+     * @returns Promise<number>
+     */
+    async getTotalSteps() {
+        return this.panels.length;
+    }
+    /**
+     * Método privado central que gerencia toda a navegação com validação.
+     *
+     * Comportamento unificado para linear e nonlinear:
+     * - Linear: Valida ao avançar, não permite pular steps
+     * - Nonlinear: Valida ao avançar, permite pular steps livremente
+     *
+     * @param targetStep - Número da etapa de destino (numeração começa em 1)
+     * @param skipValidation - Se true, pula validação (útil para reset/programático)
+     * @returns Promise<boolean> - true se navegou com sucesso, false se bloqueado
+     */
+    async navigateToStep(targetStep, skipValidation = false) {
+        /**
+         * VALIDAÇÕES BÁSICAS
+         * 1. Verifica se targetStep está dentro dos limites válidos
+         * 2. Se já estamos na etapa alvo, retorna sucesso imediatamente
+         */
+        if (targetStep < 1 || targetStep > this.panels.length) {
+            return false;
+        }
+        if (targetStep === this.currentStep) {
+            return true;
+        }
+        /**
+         * MODO LINEAR: RESTRIÇÕES
+         * No modo linear, não é permitido pular para etapas futuras não visitadas.
+         * É possível voltar, mas não avançar além da próxima etapa sequencial.
+         */
+        if (this.progressionType === 'linear') {
+            if (targetStep > this.currentStep + 1) {
+                const message = `Não é possível pular etapas. Complete a etapa ${this.currentStep + 1} antes de avançar.`;
+                this.announceToScreenReader(message);
+                this.brWizardNavigationBlocked.emit('linear-progression');
+                return false;
+            }
+        }
+        /**
+         * VALIDAÇÃO CUSTOMIZADA
+         * Emite evento brWizardBeforeStepChange APENAS se:
+         * 1. Não estamos pulando validação (skipValidation=false)
+         * 2. Estamos AVANÇANDO (targetStep > currentStep)
+         *
+         * Observações:
+         * - Voltar não precisa validar
+         * - Validação se aplica a ambos os modos (linear e nonlinear)
+         */
+        const shouldValidate = !skipValidation && targetStep > this.currentStep;
+        if (shouldValidate) {
+            const eventResult = this.brWizardBeforeStepChange.emit(targetStep);
+            /**
+             * Se preventDefault() foi chamado no listener do evento,
+             * bloqueia a navegação e retorna false
+             */
+            if (eventResult.defaultPrevented) {
+                const message = 'Não é possível avançar. Verifique os campos obrigatórios da etapa atual.';
+                this.announceToScreenReader(message);
+                this.brWizardNavigationBlocked.emit('validation-failed');
+                return false;
+            }
+        }
+        /**
+         * EXECUTA NAVEGAÇÃO
+         * Atualiza o estado interno e emite evento de confirmação
+         */
+        this.currentStep = targetStep;
+        this.brWizardStepChange.emit(this.currentStep);
+        return true;
+    }
+    /**
+     * Sincroniza estado do wizard com o br-step.
+     *
+     * O br-step já gerencia completamente os atributos 'active' via componentShouldUpdate
+     * e requestAnimationFrame, então apenas chamamos os métodos de navegação dele.
+     */
+    async syncWithBrStep() {
+        if (this.stepRef === null)
+            return;
+        if (typeof this.stepRef.GetActiveStep !== 'function') {
+            return;
+        }
+        this.isSyncingWithStep = true;
+        try {
+            const targetStepIndex = this.currentStep - 1;
+            const currentActiveStep = await this.stepRef.GetActiveStep();
+            if (currentActiveStep !== targetStepIndex) {
+                const diff = targetStepIndex - currentActiveStep;
+                if (diff > 0) {
+                    for (let i = 0; i < diff; i++) {
+                        await this.stepRef.ProceedToNextStep();
+                    }
+                }
+                else {
+                    for (let i = 0; i < Math.abs(diff); i++) {
+                        await this.stepRef.BackToPreviousStep();
+                    }
+                }
+            }
+        }
+        finally {
+            this.isSyncingWithStep = false;
+        }
+    }
+    /**
+     * Descobre painéis filhos usando assigned elements do slot.
+     * @param slot - Elemento slot do shadow DOM
+     */
+    discoverPanelsFromSlot(slot) {
+        const assignedElements = slot.assignedElements();
+        this.panels = assignedElements.filter((el) => el.tagName.toLowerCase() === 'br-wizard-panel');
+    }
+    /**
+     * Atualiza estados de todos os painéis.
+     * Define o índice e o estado ativo de cada painel.
+     */
+    async updatePanels() {
+        for (let idx = 0; idx < this.panels.length; idx++) {
+            const panel = this.panels[idx];
+            const stepNumber = idx + 1;
+            const isActive = stepNumber === this.currentStep;
+            await panel.setIndex(stepNumber);
+            await panel.setActive(isActive);
+        }
+    }
+    /**
+     * Define etapa inicial baseada na prop initialStep.
+     * Garante que o valor esteja dentro dos limites válidos.
+     */
+    setInitialStep() {
+        const initialStep = this.initialIndex === undefined ? this.initialStep : this.initialIndex + 1;
+        this.currentStep = Math.max(1, Math.min(initialStep, this.panels.length));
+        this.step = this.currentStep;
+        this.el.setAttribute('step', String(this.currentStep));
+        if (this.currentIndex !== undefined)
+            this.currentIndex = this.currentStep - 1;
+    }
+    /**
+     * Anuncia mensagem para leitores de tela via aria-live.
+     * Limpa automaticamente após 5 segundos para evitar poluição.
+     * @param message - Mensagem a ser anunciada
+     */
+    announceToScreenReader(message) {
+        this.ariaLiveMessage = '';
+        requestAnimationFrame(() => {
+            this.ariaLiveMessage = message;
+            this.clearAriaLiveTimeout();
+            this.ariaLiveTimeout = window.setTimeout(() => {
+                this.ariaLiveMessage = '';
+            }, this.ARIA_LIVE_CLEANUP_DELAY);
+        });
+    }
+    /**
+     * Anuncia mudança de etapa para leitores de tela.
+     * Informa direção da navegação e progresso atual.
+     * @param newStep - Nova etapa
+     * @param oldStep - Etapa anterior
+     */
+    announceStepChange(newStep, oldStep) {
+        const totalSteps = this.panels.length;
+        let direction = '';
+        if (newStep > oldStep) {
+            direction = 'Avançando para';
+        }
+        else if (newStep < oldStep) {
+            direction = 'Retornando para';
+        }
+        const message = `${direction}, etapa ${newStep} de ${totalSteps}`;
+        this.announceToScreenReader(message);
+    }
+    /**
+     * Limpa o timeout de mensagens aria-live.
+     */
+    clearAriaLiveTimeout() {
+        if (this.ariaLiveTimeout !== null) {
+            clearTimeout(this.ariaLiveTimeout);
+            this.ariaLiveTimeout = null;
+        }
+    }
+    /**
+     * Move foco para o primeiro elemento do painel ativo.
+     *
+     */
+    setFocusOnActivePanel() {
+        requestAnimationFrame(() => {
+            const activePanel = this.panels[this.currentStep - 1];
+            if (typeof activePanel === 'undefined')
+                return;
+            const panelElement = activePanel.shadowRoot?.querySelector('.wizard-panel-content');
+            if (typeof panelElement === 'undefined' || panelElement === null)
+                return;
+            const focusableElements = panelElement.querySelectorAll(this.FOCUSABLE_SELECTOR);
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+        });
+    }
+    /**
+     * Configura detecção de viewport mobile.
+     * Ativa listeners de resize e configura gestos swipe.
+     */
+    setupMobileDetection() {
+        this.isMobile = window.innerWidth <= 992;
+        window.addEventListener('resize', this.handleResize);
+        if (this.isMobile) {
+            if (this.orientation === 'vertical') {
+                this.collapsed = true;
+            }
+            this.setupSwipeListeners();
+        }
+    }
+    /**
+     * Remove listeners de detecção mobile.
+     */
+    cleanupMobileDetection() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    /**
+     * Configura gestos swipe para mobile.
+     */
+    setupSwipeListeners() {
+        if (!this.isMobile)
+            return;
+        requestAnimationFrame(() => {
+            this.progressBarRef = this.el.shadowRoot?.querySelector('.wizard-progress') || null;
+            this.formRef = this.el.shadowRoot?.querySelector('.wizard-form') || null;
+            if (this.progressBarRef !== null) {
+                const direction = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+                this.progressBarSwipe = new UniversalSwipe(this.progressBarRef, { direction });
+                if (this.orientation === 'horizontal') {
+                    this.progressBarSwipe.on('SWIPE_DOWN', () => this.expandSteps());
+                    this.progressBarSwipe.on('SWIPE_UP', () => this.collapseSteps());
+                }
+                else {
+                    this.progressBarSwipe.on('SWIPE_RIGHT', () => this.expandSteps());
+                    this.progressBarSwipe.on('SWIPE_LEFT', () => this.collapseSteps());
+                }
+            }
+            if (this.formRef !== null) {
+                this.formRef.addEventListener('touchstart', this.handleFormTouchStart, { passive: true });
+            }
+        });
+    }
+    /**
+     * Remove listeners de gestos swipe.
+     */
+    cleanupSwipeListeners() {
+        if (this.progressBarSwipe !== null) {
+            this.progressBarSwipe.off('SWIPE_DOWN', this.expandSteps);
+            this.progressBarSwipe.off('SWIPE_UP', this.collapseSteps);
+            this.progressBarSwipe.off('SWIPE_RIGHT', this.expandSteps);
+            this.progressBarSwipe.off('SWIPE_LEFT', this.collapseSteps);
+            this.progressBarSwipe.destroy();
+            this.progressBarSwipe = null;
+        }
+        if (this.formRef !== null) {
+            this.formRef.removeEventListener('touchstart', this.handleFormTouchStart);
+        }
+    }
+    /**
+     * Recolhe a barra de progresso (mobile).
+     * Adiciona o atributo 'collapsed' ao host.
+     */
+    collapseSteps() {
+        if (this.isMobile) {
+            this.collapsed = true;
+        }
+    }
+    /**
+     * Expande a barra de progresso (mobile).
+     * Remove o atributo 'collapsed' do host.
+     */
+    expandSteps() {
+        if (this.isMobile) {
+            this.collapsed = false;
+        }
+    }
+    /**
+     * Retorna classes CSS do container principal.
+     * @returns CssClassMap - Mapa de classes CSS
+     */
+    getHostClassMap() {
+        return {
+            'br-wizard': true,
+        };
+    }
+    /**
+     * Renderiza indicadores de progresso usando br-step.
+     * @returns JSX.Element | null - Elemento de progresso ou null se não houver painéis
+     */
+    renderProgress() {
+        if (this.panels.length === 0) {
+            return null;
+        }
+        return (h("div", { class: "wizard-progress", part: "progress" }, h("br-step", { ref: (el) => (this.stepRef = el), "initial-step": String(this.currentStep - 1), layout: this.orientation, "label-position": this.orientation === 'vertical' ? 'bottom' : 'bottom', "progression-type": this.progressionType, mode: "step" }, this.panels.map((panel, index) => {
+            const label = panel.getAttribute('label') || '';
+            return (h("br-step-item", { key: panel.id || panel.getAttribute('custom-id') || `wizard-panel-${index}`, label: label }));
+        }))));
+    }
+    /**
+     * Renderiza conteúdo dos painéis via slot.
+     * @returns JSX.Element - Container com slot dos painéis
+     */
+    renderPanelContent() {
+        return (h("div", { class: "wizard-panel-content", part: "content" }, h("slot", null)));
+    }
+    /**
+     * Renderiza botões de navegação do wizard.
+     * Adapta-se ao contexto: primeira etapa, última etapa, mobile/desktop.
+     * @returns JSX.Element - Container com botões de navegação
+     */
+    renderPanelButtons() {
+        const isFirst = this.currentStep === 1;
+        const isLast = this.currentStep === this.panels.length;
+        const buttonShape = this.isMobile ? 'block' : undefined;
+        return (h("div", { class: "wizard-panel-btn", part: "buttons" }, h("br-button", { class: "wizard-btn-canc", type: "button", shape: buttonShape, emphasis: "tertiary", "prop:ariaLabel": "Cancelar", onClick: this.handleCancel }, h("slot", { name: "cancel-button" }, "Cancelar")), h("br-button", { class: isLast ? 'wizard-btn' : 'wizard-btn-next', emphasis: "primary", type: "button", shape: buttonShape, "prop:ariaLabel": isLast ? 'Concluir' : 'Avançar', onClick: this.handleNext }, h("slot", { name: "next-button" }, isLast ? 'Concluir' : 'Avançar')), !isFirst && (h("br-button", { class: "wizard-btn-prev", emphasis: "secondary", type: "button", shape: buttonShape, "prop:ariaLabel": "Voltar", onClick: this.handlePrevious }, h("slot", { name: "previous-button" }, "Voltar")))));
+    }
+    /**
+     * Renderiza região de anúncios para leitores de tela.
+     * Usa aria-live para comunicar mudanças de estado de forma acessível.
+     * @returns JSX.Element - Elemento sr-only com aria-live
+     */
+    renderAriaLiveRegion() {
+        return (h("div", { class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.ariaLiveMessage));
+    }
+    /**
+     * Método de renderização principal do componente.
+     * Monta a estrutura completa do wizard com acessibilidade integrada.
+     * @returns JSX.Element - Estrutura completa do wizard
+     */
+    render() {
+        const hostClass = this.getHostClassMap();
+        const verticalAttr = this.orientation === 'vertical' ? { vertical: '' } : {};
+        const collapsedAttr = this.collapsed ? { collapsed: '' } : {};
+        const activePanelAttr = { active: '' };
+        // Atributos ARIA para o painel ativo
+        const totalSteps = this.panels.length;
+        const currentPanel = this.panels[this.currentStep - 1];
+        const stepLabel = currentPanel?.getAttribute('label') || `Etapa ${this.currentStep}`;
+        return (h(Host, { key: 'f01acdc3c90053109123a756711e0d37b2dc77d7', class: hostClass, ...verticalAttr, ...collapsedAttr, step: String(this.currentStep) }, this.renderAriaLiveRegion(), this.renderProgress(), h("div", { key: '7c79f3c8404807e951b85f9916e42c16a964a41d', class: "wizard-form", role: "region", "aria-label": `Wizard: ${stepLabel}`, part: "form" }, h("div", { key: '21e0bf5935d80f9b6f40d1bcd1783de6cc771298', class: "wizard-panel", ...activePanelAttr, role: "group", "aria-label": `${stepLabel}, etapa ${this.currentStep} de ${totalSteps}`, part: "panel" }, this.renderPanelContent(), this.renderPanelButtons()))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "progressionType": [{
+                "handleProgressionTypeChange": 0
+            }],
+        "initialStep": [{
+                "handleInitialStepChange": 0
+            }],
+        "initialIndex": [{
+                "handleInitialIndexChange": 0
+            }],
+        "currentIndex": [{
+                "handleCurrentIndexChange": 0
+            }],
+        "step": [{
+                "handleStepChangeProp": 0
+            }],
+        "currentStep": [{
+                "handleCurrentStepChange": 0
+            }]
+    }; }
+};
+Wizard.style = wizardCss();
+
+export { Wizard as br_wizard };