@praxisui/editorial-forms 1.0.0-beta.63 → 1.0.0-beta.64

package/fesm2022/praxisui-editorial-forms.mjs

@@ -268,6 +268,9 @@ class EditorialDataCollectionBlockOutletComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "fallbackMessage" }] : []));
     effectiveSurface = computed(() => this.block().surface === 'plain' ? 'plain' : 'card', ...(ngDevMode ? [{ debugName: "effectiveSurface" }] : []));
+    showBlockTitle = computed(() => Boolean(this.block().title) && !this.shouldHideBlockTitle(), ...(ngDevMode ? [{ debugName: "showBlockTitle" }] : []));
+    showBlockDescription = computed(() => Boolean(this.block().description) && !this.shouldHideBlockDescription(), ...(ngDevMode ? [{ debugName: "showBlockDescription" }] : []));
+    showBlockHeader = computed(() => this.showBlockTitle() || this.showBlockDescription(), ...(ngDevMode ? [{ debugName: "showBlockHeader" }] : []));
     constructor() {
         this.destroyRef.onDestroy(() => {
             this.destroyRenderedComponent();
@@ -514,6 +517,28 @@ class EditorialDataCollectionBlockOutletComponent {
     t(key, fallback, params) {
         return this.i18n.t(`praxis.editorialForms.${key}`, params, fallback);
     }
+    shouldHideBlockTitle() {
+        if (this.effectiveSurface() !== 'plain') {
+            return false;
+        }
+        const section = this.getSingleResolvedSection();
+        return !!section && areEquivalentCopy(this.block().title, section.title);
+    }
+    shouldHideBlockDescription() {
+        if (this.effectiveSurface() !== 'plain') {
+            return false;
+        }
+        const section = this.getSingleResolvedSection();
+        return !!section && areEquivalentCopy(this.block().description, section.description);
+    }
+    getSingleResolvedSection() {
+        const sections = this.resolution().formConfig?.sections ?? [];
+        if (sections.length !== 1) {
+            return null;
+        }
+        const [section] = sections;
+        return section ?? null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EditorialDataCollectionBlockOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: EditorialDataCollectionBlockOutletComponent, isStandalone: true, selector: "praxis-editorial-data-collection-block-outlet", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, runtimeContext: { classPropertyName: "runtimeContext", publicName: "runtimeContext", isSignal: true, isRequired: false, transformFunction: null }, solution: { classPropertyName: "solution", publicName: "solution", isSignal: true, isRequired: false, transformFunction: null }, instance: { classPropertyName: "instance", publicName: "instance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeContextChange: "runtimeContextChange", operationalEvent: "operationalEvent" }, viewQueries: [{ propertyName: "adapterHost", first: true, predicate: ["adapterHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     <section
@@ -522,37 +547,43 @@ class EditorialDataCollectionBlockOutletComponent {
       [class.block-plain]="effectiveSurface() === 'plain'"
       [attr.data-surface]="effectiveSurface()"
     >
-      @if (block().title) {
-        <h3>{{ block().title }}</h3>
-      }
-
-      @if (block().description) {
-        <p class="description">{{ block().description }}</p>
-      }
+      @if (showBlockHeader()) {
+        <header class="block-header">
+          @if (showBlockTitle()) {
+            <h3 class="block-title">{{ block().title }}</h3>
+          }
 
-      @if (adapterComponent(); as adapterComponent) {
-        <ng-template #adapterHost></ng-template>
-      } @else if (loadingState(); as loadingState) {
-        <div class="feedback status" role="status" aria-live="polite" aria-atomic="true">
-          <strong>{{ t('dataCollection.loadingTitle', 'Preparando coleta') }}</strong>
-          <p>{{ loadingState.message }}</p>
-        </div>
-      } @else if (errorState(); as errorState) {
-        <div class="feedback error" role="alert" aria-live="assertive" aria-atomic="true">
-          <strong>{{ errorState.title }}</strong>
-          <p>{{ errorState.message }}</p>
-          @if (errorState.details) {
-            <p class="details">{{ errorState.details }}</p>
+          @if (showBlockDescription()) {
+            <p class="description">{{ block().description }}</p>
           }
-        </div>
-      } @else {
-        <div class="feedback status" role="status" aria-live="polite" aria-atomic="true">
-          <strong>{{ t('dataCollection.unavailableTitle', 'Coleta nao disponivel') }}</strong>
-          <p>{{ fallbackMessage() }}</p>
-        </div>
+        </header>
       }
+
+      <div class="block-body">
+        @if (adapterComponent(); as adapterComponent) {
+          <ng-template #adapterHost></ng-template>
+        } @else if (loadingState(); as loadingState) {
+          <div class="feedback status" role="status" aria-live="polite" aria-atomic="true">
+            <strong>{{ t('dataCollection.loadingTitle', 'Preparando coleta') }}</strong>
+            <p>{{ loadingState.message }}</p>
+          </div>
+        } @else if (errorState(); as errorState) {
+          <div class="feedback error" role="alert" aria-live="assertive" aria-atomic="true">
+            <strong>{{ errorState.title }}</strong>
+            <p>{{ errorState.message }}</p>
+            @if (errorState.details) {
+              <p class="details">{{ errorState.details }}</p>
+            }
+          </div>
+        } @else {
+          <div class="feedback status" role="status" aria-live="polite" aria-atomic="true">
+            <strong>{{ t('dataCollection.unavailableTitle', 'Coleta nao disponivel') }}</strong>
+            <p>{{ fallbackMessage() }}</p>
+          </div>
+        }
+      </div>
     </section>
-  `, isInline: true, styles: [":host{display:block}.data-block{display:grid;gap:12px}.block-card{display:grid;gap:12px;padding:18px;border-radius:var(--editorial-card-radius, 18px);background:var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low, #f7f2fa));border:1px solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant, #cac4d0)) 65%,transparent);box-shadow:var(--editorial-card-shadow, none)}.block-plain{padding:0;border:0;background:transparent;box-shadow:none}h3,p{margin:0}.description,.feedback{color:var(--md-sys-color-on-surface-variant, #49454f)}.feedback{display:grid;gap:6px;padding:12px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, #cac4d0) 70%,transparent);background:var(--md-sys-color-surface, #fff)}.feedback strong{color:var(--md-sys-color-on-surface, #1b1b1f)}.error{border-color:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 50%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container, #f9dedc) 35%,var(--md-sys-color-surface, #fff))}.details{font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;color:var(--editorial-text-primary, var(--md-sys-color-on-surface, #1b1b1f))}.data-block{display:grid;gap:16px;font-family:var(--editorial-body-font-family, inherit)}.block-card{display:grid;gap:16px;padding:clamp(18px,2vw,24px);border-radius:var(--editorial-card-radius, 18px);background:var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low, #f7f2fa));border:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant, #cac4d0)) 65%,transparent);box-shadow:var(--editorial-card-shadow, none)}.block-plain{padding:0;border:0;background:transparent;box-shadow:none;gap:0}.block-header{display:grid;gap:8px}.block-plain .block-header{margin-bottom:16px;padding-bottom:4px}.block-body{min-width:0}h3,p{margin:0}.block-title{font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-size:var(--editorial-step-title-size, 1.15rem);line-height:1.15;color:var(--editorial-text-primary, var(--md-sys-color-on-surface, #1b1b1f))}.description,.feedback{color:var(--editorial-text-secondary, var(--md-sys-color-on-surface-variant, #49454f));font-size:var(--editorial-body-size, .95rem);line-height:1.55}.feedback{display:grid;gap:6px;padding:12px 14px;border-radius:var(--editorial-card-radius, 14px);border:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant, #cac4d0)) 70%,transparent);background:color-mix(in srgb,var(--editorial-surface-primary, var(--md-sys-color-surface, #fff)) 94%,var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low, #f7f2fa)) 6%)}.feedback strong{color:var(--editorial-text-primary, var(--md-sys-color-on-surface, #1b1b1f));font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit))}.error{border-color:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 50%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container, #f9dedc) 35%,var(--md-sys-color-surface, #fff))}.details{font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EditorialDataCollectionBlockOutletComponent, decorators: [{
             type: Component,
@@ -563,37 +594,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       [class.block-plain]="effectiveSurface() === 'plain'"
       [attr.data-surface]="effectiveSurface()"
     >
-      @if (block().title) {
-        <h3>{{ block().title }}</h3>
-      }
-
-      @if (block().description) {
-        <p class="description">{{ block().description }}</p>
-      }
+      @if (showBlockHeader()) {
+        <header class="block-header">
+          @if (showBlockTitle()) {
+            <h3 class="block-title">{{ block().title }}</h3>
+          }
 
-      @if (adapterComponent(); as adapterComponent) {
-        <ng-template #adapterHost></ng-template>
-      } @else if (loadingState(); as loadingState) {
-        <div class="feedback status" role="status" aria-live="polite" aria-atomic="true">
-          <strong>{{ t('dataCollection.loadingTitle', 'Preparando coleta') }}</strong>
-          <p>{{ loadingState.message }}</p>
-        </div>
-      } @else if (errorState(); as errorState) {
-        <div class="feedback error" role="alert" aria-live="assertive" aria-atomic="true">
-          <strong>{{ errorState.title }}</strong>
-          <p>{{ errorState.message }}</p>
-          @if (errorState.details) {
-            <p class="details">{{ errorState.details }}</p>
+          @if (showBlockDescription()) {
+            <p class="description">{{ block().description }}</p>
           }
-        </div>
-      } @else {
-        <div class="feedback status" role="status" aria-live="polite" aria-atomic="true">
-          <strong>{{ t('dataCollection.unavailableTitle', 'Coleta nao disponivel') }}</strong>
-          <p>{{ fallbackMessage() }}</p>
-        </div>
+        </header>
       }
+
+      <div class="block-body">
+        @if (adapterComponent(); as adapterComponent) {
+          <ng-template #adapterHost></ng-template>
+        } @else if (loadingState(); as loadingState) {
+          <div class="feedback status" role="status" aria-live="polite" aria-atomic="true">
+            <strong>{{ t('dataCollection.loadingTitle', 'Preparando coleta') }}</strong>
+            <p>{{ loadingState.message }}</p>
+          </div>
+        } @else if (errorState(); as errorState) {
+          <div class="feedback error" role="alert" aria-live="assertive" aria-atomic="true">
+            <strong>{{ errorState.title }}</strong>
+            <p>{{ errorState.message }}</p>
+            @if (errorState.details) {
+              <p class="details">{{ errorState.details }}</p>
+            }
+          </div>
+        } @else {
+          <div class="feedback status" role="status" aria-live="polite" aria-atomic="true">
+            <strong>{{ t('dataCollection.unavailableTitle', 'Coleta nao disponivel') }}</strong>
+            <p>{{ fallbackMessage() }}</p>
+          </div>
+        }
+      </div>
     </section>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.data-block{display:grid;gap:12px}.block-card{display:grid;gap:12px;padding:18px;border-radius:var(--editorial-card-radius, 18px);background:var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low, #f7f2fa));border:1px solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant, #cac4d0)) 65%,transparent);box-shadow:var(--editorial-card-shadow, none)}.block-plain{padding:0;border:0;background:transparent;box-shadow:none}h3,p{margin:0}.description,.feedback{color:var(--md-sys-color-on-surface-variant, #49454f)}.feedback{display:grid;gap:6px;padding:12px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, #cac4d0) 70%,transparent);background:var(--md-sys-color-surface, #fff)}.feedback strong{color:var(--md-sys-color-on-surface, #1b1b1f)}.error{border-color:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 50%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container, #f9dedc) 35%,var(--md-sys-color-surface, #fff))}.details{font-size:.9rem}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;color:var(--editorial-text-primary, var(--md-sys-color-on-surface, #1b1b1f))}.data-block{display:grid;gap:16px;font-family:var(--editorial-body-font-family, inherit)}.block-card{display:grid;gap:16px;padding:clamp(18px,2vw,24px);border-radius:var(--editorial-card-radius, 18px);background:var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low, #f7f2fa));border:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant, #cac4d0)) 65%,transparent);box-shadow:var(--editorial-card-shadow, none)}.block-plain{padding:0;border:0;background:transparent;box-shadow:none;gap:0}.block-header{display:grid;gap:8px}.block-plain .block-header{margin-bottom:16px;padding-bottom:4px}.block-body{min-width:0}h3,p{margin:0}.block-title{font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit));font-size:var(--editorial-step-title-size, 1.15rem);line-height:1.15;color:var(--editorial-text-primary, var(--md-sys-color-on-surface, #1b1b1f))}.description,.feedback{color:var(--editorial-text-secondary, var(--md-sys-color-on-surface-variant, #49454f));font-size:var(--editorial-body-size, .95rem);line-height:1.55}.feedback{display:grid;gap:6px;padding:12px 14px;border-radius:var(--editorial-card-radius, 14px);border:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant, #cac4d0)) 70%,transparent);background:color-mix(in srgb,var(--editorial-surface-primary, var(--md-sys-color-surface, #fff)) 94%,var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low, #f7f2fa)) 6%)}.feedback strong{color:var(--editorial-text-primary, var(--md-sys-color-on-surface, #1b1b1f));font-family:var(--editorial-title-font-family, var(--editorial-body-font-family, inherit))}.error{border-color:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 50%,transparent);background:color-mix(in srgb,var(--md-sys-color-error-container, #f9dedc) 35%,var(--md-sys-color-surface, #fff))}.details{font-size:.9rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { adapterHost: [{ type: i0.ViewChild, args: ['adapterHost', { ...{ read: ViewContainerRef }, isSignal: true }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], runtimeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "runtimeContext", required: false }] }], solution: [{ type: i0.Input, args: [{ isSignal: true, alias: "solution", required: false }] }], instance: [{ type: i0.Input, args: [{ isSignal: true, alias: "instance", required: false }] }], runtimeContextChange: [{ type: i0.Output, args: ["runtimeContextChange"] }], operationalEvent: [{ type: i0.Output, args: ["operationalEvent"] }] } });
 function isSubscribableOutput(candidate) {
     return !!candidate && typeof candidate === 'object' && typeof candidate.subscribe === 'function';
@@ -626,6 +663,15 @@ function readRuntimeFormData(runtimeContext) {
 function isResolvedDataCollectionBlock(block) {
     return 'dataCollectionState' in block;
 }
+function areEquivalentCopy(left, right) {
+    if (!left || !right) {
+        return false;
+    }
+    return normalizeComparableCopy(left) === normalizeComparableCopy(right);
+}
+function normalizeComparableCopy(value) {
+    return value.trim().replace(/\s+/g, ' ').toLocaleLowerCase();
+}
 
 class EditorialIntroHeroBlockComponent {
     block = input.required(...(ngDevMode ? [{ debugName: "block" }] : []));
@@ -1693,6 +1739,7 @@ class EditorialStepperComponent {
     isStepSelectionBlocked = input(() => false, ...(ngDevMode ? [{ debugName: "isStepSelectionBlocked" }] : []));
     stepSelected = output();
     effectiveOrientation = computed(() => this.config()?.orientation ?? this.orientation(), ...(ngDevMode ? [{ debugName: "effectiveOrientation" }] : []));
+    stepperVariant = computed(() => this.config()?.variant ?? 'icon-label', ...(ngDevMode ? [{ debugName: "stepperVariant" }] : []));
     stepperAriaLabel = computed(() => this.t('stepper.ariaLabel', 'Etapas da jornada'), ...(ngDevMode ? [{ debugName: "stepperAriaLabel" }] : []));
     stepState(step) {
         return getStepDisplayState(step, this.steps(), this.activeStepId(), this.progressionBlocked());
@@ -1712,6 +1759,19 @@ class EditorialStepperComponent {
         }
         this.stepSelected.emit(stepId);
     }
+    connectorState(step) {
+        const state = this.stepState(step);
+        if (state === 'completed') {
+            return 'completed';
+        }
+        if (state === 'active') {
+            return 'active';
+        }
+        if (state === 'blocked') {
+            return 'blocked';
+        }
+        return 'pending';
+    }
     buildStepAriaLabel(step) {
         const state = this.stepState(step);
         const status = state === 'completed'
@@ -1732,7 +1792,7 @@ class EditorialStepperComponent {
       class="steps-nav"
       [class.vertical]="effectiveOrientation() === 'vertical'"
       [class.horizontal]="effectiveOrientation() === 'horizontal'"
-      [attr.data-variant]="config()?.variant ?? 'icon-label'"
+      [attr.data-variant]="stepperVariant()"
       [attr.data-align]="config()?.align ?? 'start'"
       [attr.data-size]="config()?.size ?? 'md'"
       [attr.aria-label]="stepperAriaLabel()"
@@ -1751,11 +1811,12 @@ class EditorialStepperComponent {
             [class.completed]="stepState(step) === 'completed'"
             [class.blocked]="stepState(step) === 'blocked'"
             [disabled]="isSelectionBlocked(step.stepId)"
+            [attr.data-state]="stepState(step)"
             [attr.aria-current]="activeStepId() === step.stepId ? 'step' : null"
             [attr.aria-label]="buildStepAriaLabel(step)"
             (click)="onStepClick(step.stepId)"
           >
-            <span class="step-icon" [attr.data-state]="stepState(step)" aria-hidden="true">
+            <span class="step-icon" aria-hidden="true">
               @if (stepState(step) === 'completed') {
                 <mat-icon aria-hidden="true" praxisIcon="check"></mat-icon>
               } @else if (step.icon?.name) {
@@ -1774,12 +1835,16 @@ class EditorialStepperComponent {
             }
           </button>
           @if ((config()?.showConnectors ?? true) && !last) {
-            <span class="step-connector" [attr.data-style]="config()?.connectorStyle ?? 'solid'"></span>
+            <span
+              class="step-connector"
+              [attr.data-state]="connectorState(step)"
+              [attr.data-style]="config()?.connectorStyle ?? 'solid'"
+            ></span>
           }
         </li>
       }
     </ol>
-  `, isInline: true, styles: [":host{display:block}.steps-nav{display:flex;gap:12px;list-style:none;padding:0;margin:0}.steps-nav.horizontal[data-align=center]{justify-content:center}.steps-nav.horizontal[data-align=space-between]{justify-content:space-between}.steps-nav.vertical{flex-direction:column}.stepper-item{display:flex;align-items:center;gap:12px;min-width:0}.steps-nav.vertical .stepper-item{align-items:stretch;flex-direction:column}.step-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:var(--editorial-step-radius, 999px);border:1px solid var(--editorial-border-color, #d9deea);background:var(--editorial-surface-primary, #fff);color:var(--editorial-text-primary, #24324a);cursor:pointer;text-align:left}.steps-nav[data-size=sm] .step-chip{min-height:42px;padding:8px 12px;gap:8px}.steps-nav[data-size=lg] .step-chip{min-height:56px;padding:12px 18px;gap:12px}.step-chip.active{border-color:var(--editorial-step-active, var(--editorial-accent, #264a8a));box-shadow:0 0 0 var(--editorial-active-step-border-width, 2px) color-mix(in srgb,var(--editorial-accent, #264a8a) 24%,transparent)}.step-chip.completed .step-icon{background:var(--editorial-step-completed, var(--editorial-success, #35b37e));color:#fff}.step-chip.blocked .step-icon{background:var(--editorial-step-blocked, #c84b4b);color:#fff}.step-chip[disabled]{opacity:.72;cursor:not-allowed}.step-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:var(--editorial-step-pending, #eef1f7);color:var(--editorial-text-secondary, #7b8aa0);font-size:.75rem;font-weight:700;flex:0 0 auto}.steps-nav[data-size=sm] .step-icon{width:28px;height:28px;font-size:.7rem}.steps-nav[data-size=lg] .step-icon{width:42px;height:42px;font-size:.9rem}.step-icon mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}.step-chip.active .step-icon{background:var(--editorial-step-active, var(--editorial-accent, #264a8a));color:var(--editorial-accent-contrast, #fff)}.step-copy{display:grid;gap:2px;min-width:0}.step-label{font-weight:700;white-space:nowrap}.step-description{color:var(--editorial-text-secondary, #7b8aa0);font-size:.85rem}.step-connector{display:block;flex:1 1 auto;min-width:32px;height:2px;background:var(--editorial-connector, #8fd8c0);border-radius:999px}.steps-nav.vertical .step-connector{width:2px;min-width:2px;min-height:24px;margin-left:16px;height:24px}.step-connector[data-style=dashed]{background:repeating-linear-gradient(90deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.steps-nav.vertical .step-connector[data-style=dashed]{background:repeating-linear-gradient(180deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.steps-nav[data-variant=simple] .step-copy{display:none}.steps-nav[data-variant=simple-circle]{gap:20px}.steps-nav.horizontal[data-variant=simple-circle] .stepper-item{flex:1 1 0;flex-direction:column;align-items:center;gap:10px}.steps-nav.horizontal[data-variant=simple-circle] .step-chip{flex-direction:column;justify-content:flex-start;min-height:auto;padding:0;gap:8px;border:0;background:transparent;box-shadow:none;text-align:center}.steps-nav.horizontal[data-variant=simple-circle] .step-copy{justify-items:center}.steps-nav.horizontal[data-variant=simple-circle] .step-label{white-space:normal;font-size:.92rem}.steps-nav.horizontal[data-variant=simple-circle] .step-connector{width:100%;min-width:56px;margin-top:18px}.steps-nav.horizontal[data-variant=simple-circle][data-size=sm] .step-connector{margin-top:14px}.steps-nav.horizontal[data-variant=simple-circle][data-size=lg] .step-connector{margin-top:22px}.steps-nav.vertical[data-variant=simple-circle] .stepper-item{align-items:start;gap:10px}.steps-nav.vertical[data-variant=simple-circle] .step-chip{padding:0;border:0;background:transparent;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.steps-nav{--step-indicator-size: 42px;--step-copy-padding-block: 12px;--step-copy-padding-inline: 14px;--step-copy-width: minmax(0, 176px);--step-gap: 16px;--step-connector-offset: 26px;--step-connector-size: 4px;display:flex;align-items:flex-start;gap:var(--step-gap);list-style:none;padding:0;margin:0;width:100%}.steps-nav.horizontal[data-align=center]{justify-content:center}.steps-nav.horizontal[data-align=space-between]{justify-content:space-between}.steps-nav.horizontal[data-align=space-between] .stepper-item{flex:1 1 0}.steps-nav.horizontal[data-align=start] .stepper-item,.steps-nav.horizontal[data-align=center] .stepper-item{flex:0 1 196px}.steps-nav.vertical{flex-direction:column;gap:14px}.stepper-item{display:flex;align-items:flex-start;gap:var(--step-gap);min-width:0}.steps-nav.vertical .stepper-item{align-items:stretch;flex-direction:column;gap:10px}.step-chip{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:12px;width:100%;min-width:0;padding:0;border:0;background:transparent;color:var(--editorial-text-primary, #24324a);cursor:pointer;text-align:center;transition:transform .18s ease,opacity .18s ease}.step-chip:hover:not([disabled]){transform:translateY(-1px)}.step-chip:focus-visible{outline:3px solid var(--editorial-step-active, var(--editorial-accent, #264a8a));outline:3px solid color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 32%,white);outline-offset:6px;border-radius:calc(var(--editorial-card-radius, 22px) + 4px)}.steps-nav[data-size=sm]{--step-indicator-size: 34px;--step-copy-padding-block: 9px;--step-copy-padding-inline: 12px;--step-copy-width: minmax(0, 132px);--step-gap: 12px;--step-connector-offset: 21px}.steps-nav[data-size=lg]{--step-indicator-size: 52px;--step-copy-padding-block: 15px;--step-copy-padding-inline: 18px;--step-copy-width: minmax(0, 220px);--step-gap: 20px;--step-connector-offset: 32px}.step-chip[disabled]{opacity:.72;cursor:not-allowed;transform:none}.step-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--step-indicator-size);height:var(--step-indicator-size);border-radius:999px;border:1px solid var(--editorial-border-color, #d9deea);border:1px solid color-mix(in srgb,var(--editorial-border-color, #d9deea) 74%,white);background:var(--editorial-step-pending, #eef1f7);background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--editorial-surface-primary, #fff) 86%,white),color-mix(in srgb,var(--editorial-step-pending, #eef1f7) 92%,white));color:var(--editorial-text-secondary, #7b8aa0);font-size:.82rem;font-weight:700;flex:0 0 auto;box-shadow:inset 0 1px #ffffffeb,0 10px 22px #14274414;transition:background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.step-icon mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}.steps-nav[data-size=lg] .step-icon mat-icon{width:22px;height:22px;font-size:22px;line-height:22px}.step-chip.active .step-icon{border-color:var(--editorial-step-active, var(--editorial-accent, #264a8a));background:var(--editorial-step-active, var(--editorial-accent, #264a8a));border-color:color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 62%,white);color:var(--editorial-accent-contrast, #fff);box-shadow:0 0 0 var(--editorial-active-step-border-width, 2px) color-mix(in srgb,var(--editorial-accent, #264a8a) 20%,transparent),0 16px 28px color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 22%,transparent)}.step-chip.completed .step-icon{border-color:var(--editorial-step-completed, var(--editorial-success, #35b37e));background:var(--editorial-step-completed, var(--editorial-success, #35b37e));border-color:color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 66%,white);color:#fff;box-shadow:0 14px 24px color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 20%,transparent)}.step-chip.blocked .step-icon{border-color:var(--editorial-step-blocked, var(--editorial-warning, #f28c38));background:var(--editorial-step-blocked, var(--editorial-warning, #f28c38));border-color:color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 66%,white);color:#fff;box-shadow:0 14px 24px color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 18%,transparent)}.step-copy{display:grid;gap:4px;min-width:0;width:var(--step-copy-width);padding:var(--step-copy-padding-block) var(--step-copy-padding-inline);border-radius:calc(var(--editorial-card-radius, 22px) - 4px);border:1px solid var(--editorial-border-color, #d9deea);border:1px solid color-mix(in srgb,var(--editorial-border-color, #d9deea) 92%,white);background:var(--editorial-surface-primary, #fff);background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-surface-primary, #fff) 96%,white),color-mix(in srgb,var(--editorial-surface-secondary, #f6f8fc) 74%,white));box-shadow:0 16px 32px #14274414;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.step-chip.active .step-copy{border-color:var(--editorial-step-active, var(--editorial-accent, #264a8a));background:var(--editorial-surface-primary, #fff);border-color:color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 32%,var(--editorial-border-color, #d9deea));background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-surface-primary, #fff) 90%,white),color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 8%,var(--editorial-surface-primary, #fff)));box-shadow:0 18px 36px #1427441a,0 0 0 1px color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 12%,transparent)}.step-chip.completed .step-copy{border-color:var(--editorial-step-completed, var(--editorial-success, #35b37e));background:var(--editorial-surface-primary, #fff);border-color:color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 34%,var(--editorial-border-color, #d9deea));background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-surface-primary, #fff) 88%,white),color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 8%,var(--editorial-surface-primary, #fff)))}.step-chip.blocked .step-copy{border-color:var(--editorial-step-blocked, var(--editorial-warning, #f28c38));background:var(--editorial-surface-primary, #fff);border-color:color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 38%,var(--editorial-border-color, #d9deea));background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-surface-primary, #fff) 90%,white),color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 10%,var(--editorial-surface-primary, #fff)))}.step-label{font-weight:700;line-height:1.25;white-space:normal}.step-description{color:var(--editorial-text-secondary, #7b8aa0);font-size:.85rem;line-height:1.35}.step-connector{display:block;flex:1 1 auto;align-self:flex-start;min-width:40px;margin-top:var(--step-connector-offset);height:var(--step-connector-size);background:var(--editorial-connector, #8fd8c0);background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-border-color, #d9deea) 58%,white),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 72%,white));border-radius:999px;opacity:.92}.steps-nav.vertical .step-connector{width:var(--step-connector-size);min-width:var(--step-connector-size);min-height:28px;margin-top:0;margin-left:calc((var(--step-indicator-size) / 2) - (var(--step-connector-size) / 2));height:32px}.step-connector[data-style=dashed]{background:repeating-linear-gradient(90deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.steps-nav.vertical .step-connector[data-style=dashed]{background:repeating-linear-gradient(180deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.step-connector[data-style=soft]{height:8px;background:var(--editorial-connector, #8fd8c0);background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 88%,white) 55%,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent))}.steps-nav.vertical .step-connector[data-style=soft]{width:8px;min-width:8px;height:32px;background:var(--editorial-connector, #8fd8c0);background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 88%,white) 55%,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent))}.step-connector[data-state=completed]{background:var(--editorial-step-completed, var(--editorial-success, #35b37e));background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 92%,white),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 82%,white))}.step-connector[data-state=active]{background:var(--editorial-step-active, var(--editorial-accent, #264a8a));background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 86%,white),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 84%,white) 60%,color-mix(in srgb,var(--editorial-border-color, #d9deea) 48%,white))}.step-connector[data-state=blocked]{background:var(--editorial-step-blocked, var(--editorial-warning, #f28c38));background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 78%,white),color-mix(in srgb,var(--editorial-border-color, #d9deea) 48%,white))}.steps-nav[data-variant=simple] .step-copy,.steps-nav[data-variant=simple] .step-description,.steps-nav[data-variant=icon] .step-description{display:none}.steps-nav[data-variant=simple] .step-chip,.steps-nav[data-variant=icon] .step-chip{gap:8px}.steps-nav.horizontal[data-variant=simple] .stepper-item,.steps-nav.horizontal[data-variant=icon] .stepper-item{align-items:center}.steps-nav[data-variant=rich] .step-copy{border-radius:var(--editorial-card-radius, 22px);box-shadow:0 20px 36px #14274417,0 0 0 1px #ffffff8c}.steps-nav.horizontal[data-variant=rich] .step-chip{align-items:stretch}.steps-nav.horizontal[data-variant=rich] .step-copy{text-align:left}.steps-nav.vertical .step-chip{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:14px}.steps-nav.vertical .step-copy{width:100%}@media(max-width:860px){.steps-nav.horizontal{flex-direction:column;gap:12px}.steps-nav.horizontal .stepper-item{flex:none}.steps-nav.horizontal .step-chip{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left}.steps-nav.horizontal .step-copy{width:100%}.steps-nav.horizontal .step-connector{width:var(--step-connector-size);min-width:var(--step-connector-size);min-height:24px;margin-top:0;margin-left:calc((var(--step-indicator-size) / 2) - (var(--step-connector-size) / 2));height:24px}.steps-nav.horizontal .step-connector[data-style=dashed]{background:repeating-linear-gradient(180deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.steps-nav.horizontal .step-connector[data-style=soft]{width:8px;min-width:8px;height:24px;background:var(--editorial-connector, #8fd8c0);background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 88%,white) 55%,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent))}}@media(prefers-reduced-motion:reduce){.step-chip,.step-icon,.step-copy{transition:none}.step-chip:hover:not([disabled]){transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EditorialStepperComponent, decorators: [{
             type: Component,
@@ -1788,7 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       class="steps-nav"
       [class.vertical]="effectiveOrientation() === 'vertical'"
       [class.horizontal]="effectiveOrientation() === 'horizontal'"
-      [attr.data-variant]="config()?.variant ?? 'icon-label'"
+      [attr.data-variant]="stepperVariant()"
       [attr.data-align]="config()?.align ?? 'start'"
       [attr.data-size]="config()?.size ?? 'md'"
       [attr.aria-label]="stepperAriaLabel()"
@@ -1807,11 +1872,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             [class.completed]="stepState(step) === 'completed'"
             [class.blocked]="stepState(step) === 'blocked'"
             [disabled]="isSelectionBlocked(step.stepId)"
+            [attr.data-state]="stepState(step)"
             [attr.aria-current]="activeStepId() === step.stepId ? 'step' : null"
             [attr.aria-label]="buildStepAriaLabel(step)"
             (click)="onStepClick(step.stepId)"
           >
-            <span class="step-icon" [attr.data-state]="stepState(step)" aria-hidden="true">
+            <span class="step-icon" aria-hidden="true">
               @if (stepState(step) === 'completed') {
                 <mat-icon aria-hidden="true" praxisIcon="check"></mat-icon>
               } @else if (step.icon?.name) {
@@ -1830,12 +1896,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             }
           </button>
           @if ((config()?.showConnectors ?? true) && !last) {
-            <span class="step-connector" [attr.data-style]="config()?.connectorStyle ?? 'solid'"></span>
+            <span
+              class="step-connector"
+              [attr.data-state]="connectorState(step)"
+              [attr.data-style]="config()?.connectorStyle ?? 'solid'"
+            ></span>
           }
         </li>
       }
     </ol>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.steps-nav{display:flex;gap:12px;list-style:none;padding:0;margin:0}.steps-nav.horizontal[data-align=center]{justify-content:center}.steps-nav.horizontal[data-align=space-between]{justify-content:space-between}.steps-nav.vertical{flex-direction:column}.stepper-item{display:flex;align-items:center;gap:12px;min-width:0}.steps-nav.vertical .stepper-item{align-items:stretch;flex-direction:column}.step-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:var(--editorial-step-radius, 999px);border:1px solid var(--editorial-border-color, #d9deea);background:var(--editorial-surface-primary, #fff);color:var(--editorial-text-primary, #24324a);cursor:pointer;text-align:left}.steps-nav[data-size=sm] .step-chip{min-height:42px;padding:8px 12px;gap:8px}.steps-nav[data-size=lg] .step-chip{min-height:56px;padding:12px 18px;gap:12px}.step-chip.active{border-color:var(--editorial-step-active, var(--editorial-accent, #264a8a));box-shadow:0 0 0 var(--editorial-active-step-border-width, 2px) color-mix(in srgb,var(--editorial-accent, #264a8a) 24%,transparent)}.step-chip.completed .step-icon{background:var(--editorial-step-completed, var(--editorial-success, #35b37e));color:#fff}.step-chip.blocked .step-icon{background:var(--editorial-step-blocked, #c84b4b);color:#fff}.step-chip[disabled]{opacity:.72;cursor:not-allowed}.step-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:var(--editorial-step-pending, #eef1f7);color:var(--editorial-text-secondary, #7b8aa0);font-size:.75rem;font-weight:700;flex:0 0 auto}.steps-nav[data-size=sm] .step-icon{width:28px;height:28px;font-size:.7rem}.steps-nav[data-size=lg] .step-icon{width:42px;height:42px;font-size:.9rem}.step-icon mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}.step-chip.active .step-icon{background:var(--editorial-step-active, var(--editorial-accent, #264a8a));color:var(--editorial-accent-contrast, #fff)}.step-copy{display:grid;gap:2px;min-width:0}.step-label{font-weight:700;white-space:nowrap}.step-description{color:var(--editorial-text-secondary, #7b8aa0);font-size:.85rem}.step-connector{display:block;flex:1 1 auto;min-width:32px;height:2px;background:var(--editorial-connector, #8fd8c0);border-radius:999px}.steps-nav.vertical .step-connector{width:2px;min-width:2px;min-height:24px;margin-left:16px;height:24px}.step-connector[data-style=dashed]{background:repeating-linear-gradient(90deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.steps-nav.vertical .step-connector[data-style=dashed]{background:repeating-linear-gradient(180deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.steps-nav[data-variant=simple] .step-copy{display:none}.steps-nav[data-variant=simple-circle]{gap:20px}.steps-nav.horizontal[data-variant=simple-circle] .stepper-item{flex:1 1 0;flex-direction:column;align-items:center;gap:10px}.steps-nav.horizontal[data-variant=simple-circle] .step-chip{flex-direction:column;justify-content:flex-start;min-height:auto;padding:0;gap:8px;border:0;background:transparent;box-shadow:none;text-align:center}.steps-nav.horizontal[data-variant=simple-circle] .step-copy{justify-items:center}.steps-nav.horizontal[data-variant=simple-circle] .step-label{white-space:normal;font-size:.92rem}.steps-nav.horizontal[data-variant=simple-circle] .step-connector{width:100%;min-width:56px;margin-top:18px}.steps-nav.horizontal[data-variant=simple-circle][data-size=sm] .step-connector{margin-top:14px}.steps-nav.horizontal[data-variant=simple-circle][data-size=lg] .step-connector{margin-top:22px}.steps-nav.vertical[data-variant=simple-circle] .stepper-item{align-items:start;gap:10px}.steps-nav.vertical[data-variant=simple-circle] .step-chip{padding:0;border:0;background:transparent;box-shadow:none}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.steps-nav{--step-indicator-size: 42px;--step-copy-padding-block: 12px;--step-copy-padding-inline: 14px;--step-copy-width: minmax(0, 176px);--step-gap: 16px;--step-connector-offset: 26px;--step-connector-size: 4px;display:flex;align-items:flex-start;gap:var(--step-gap);list-style:none;padding:0;margin:0;width:100%}.steps-nav.horizontal[data-align=center]{justify-content:center}.steps-nav.horizontal[data-align=space-between]{justify-content:space-between}.steps-nav.horizontal[data-align=space-between] .stepper-item{flex:1 1 0}.steps-nav.horizontal[data-align=start] .stepper-item,.steps-nav.horizontal[data-align=center] .stepper-item{flex:0 1 196px}.steps-nav.vertical{flex-direction:column;gap:14px}.stepper-item{display:flex;align-items:flex-start;gap:var(--step-gap);min-width:0}.steps-nav.vertical .stepper-item{align-items:stretch;flex-direction:column;gap:10px}.step-chip{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:12px;width:100%;min-width:0;padding:0;border:0;background:transparent;color:var(--editorial-text-primary, #24324a);cursor:pointer;text-align:center;transition:transform .18s ease,opacity .18s ease}.step-chip:hover:not([disabled]){transform:translateY(-1px)}.step-chip:focus-visible{outline:3px solid var(--editorial-step-active, var(--editorial-accent, #264a8a));outline:3px solid color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 32%,white);outline-offset:6px;border-radius:calc(var(--editorial-card-radius, 22px) + 4px)}.steps-nav[data-size=sm]{--step-indicator-size: 34px;--step-copy-padding-block: 9px;--step-copy-padding-inline: 12px;--step-copy-width: minmax(0, 132px);--step-gap: 12px;--step-connector-offset: 21px}.steps-nav[data-size=lg]{--step-indicator-size: 52px;--step-copy-padding-block: 15px;--step-copy-padding-inline: 18px;--step-copy-width: minmax(0, 220px);--step-gap: 20px;--step-connector-offset: 32px}.step-chip[disabled]{opacity:.72;cursor:not-allowed;transform:none}.step-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--step-indicator-size);height:var(--step-indicator-size);border-radius:999px;border:1px solid var(--editorial-border-color, #d9deea);border:1px solid color-mix(in srgb,var(--editorial-border-color, #d9deea) 74%,white);background:var(--editorial-step-pending, #eef1f7);background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--editorial-surface-primary, #fff) 86%,white),color-mix(in srgb,var(--editorial-step-pending, #eef1f7) 92%,white));color:var(--editorial-text-secondary, #7b8aa0);font-size:.82rem;font-weight:700;flex:0 0 auto;box-shadow:inset 0 1px #ffffffeb,0 10px 22px #14274414;transition:background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.step-icon mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}.steps-nav[data-size=lg] .step-icon mat-icon{width:22px;height:22px;font-size:22px;line-height:22px}.step-chip.active .step-icon{border-color:var(--editorial-step-active, var(--editorial-accent, #264a8a));background:var(--editorial-step-active, var(--editorial-accent, #264a8a));border-color:color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 62%,white);color:var(--editorial-accent-contrast, #fff);box-shadow:0 0 0 var(--editorial-active-step-border-width, 2px) color-mix(in srgb,var(--editorial-accent, #264a8a) 20%,transparent),0 16px 28px color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 22%,transparent)}.step-chip.completed .step-icon{border-color:var(--editorial-step-completed, var(--editorial-success, #35b37e));background:var(--editorial-step-completed, var(--editorial-success, #35b37e));border-color:color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 66%,white);color:#fff;box-shadow:0 14px 24px color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 20%,transparent)}.step-chip.blocked .step-icon{border-color:var(--editorial-step-blocked, var(--editorial-warning, #f28c38));background:var(--editorial-step-blocked, var(--editorial-warning, #f28c38));border-color:color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 66%,white);color:#fff;box-shadow:0 14px 24px color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 18%,transparent)}.step-copy{display:grid;gap:4px;min-width:0;width:var(--step-copy-width);padding:var(--step-copy-padding-block) var(--step-copy-padding-inline);border-radius:calc(var(--editorial-card-radius, 22px) - 4px);border:1px solid var(--editorial-border-color, #d9deea);border:1px solid color-mix(in srgb,var(--editorial-border-color, #d9deea) 92%,white);background:var(--editorial-surface-primary, #fff);background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-surface-primary, #fff) 96%,white),color-mix(in srgb,var(--editorial-surface-secondary, #f6f8fc) 74%,white));box-shadow:0 16px 32px #14274414;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.step-chip.active .step-copy{border-color:var(--editorial-step-active, var(--editorial-accent, #264a8a));background:var(--editorial-surface-primary, #fff);border-color:color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 32%,var(--editorial-border-color, #d9deea));background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-surface-primary, #fff) 90%,white),color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 8%,var(--editorial-surface-primary, #fff)));box-shadow:0 18px 36px #1427441a,0 0 0 1px color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 12%,transparent)}.step-chip.completed .step-copy{border-color:var(--editorial-step-completed, var(--editorial-success, #35b37e));background:var(--editorial-surface-primary, #fff);border-color:color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 34%,var(--editorial-border-color, #d9deea));background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-surface-primary, #fff) 88%,white),color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 8%,var(--editorial-surface-primary, #fff)))}.step-chip.blocked .step-copy{border-color:var(--editorial-step-blocked, var(--editorial-warning, #f28c38));background:var(--editorial-surface-primary, #fff);border-color:color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 38%,var(--editorial-border-color, #d9deea));background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-surface-primary, #fff) 90%,white),color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 10%,var(--editorial-surface-primary, #fff)))}.step-label{font-weight:700;line-height:1.25;white-space:normal}.step-description{color:var(--editorial-text-secondary, #7b8aa0);font-size:.85rem;line-height:1.35}.step-connector{display:block;flex:1 1 auto;align-self:flex-start;min-width:40px;margin-top:var(--step-connector-offset);height:var(--step-connector-size);background:var(--editorial-connector, #8fd8c0);background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-border-color, #d9deea) 58%,white),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 72%,white));border-radius:999px;opacity:.92}.steps-nav.vertical .step-connector{width:var(--step-connector-size);min-width:var(--step-connector-size);min-height:28px;margin-top:0;margin-left:calc((var(--step-indicator-size) / 2) - (var(--step-connector-size) / 2));height:32px}.step-connector[data-style=dashed]{background:repeating-linear-gradient(90deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.steps-nav.vertical .step-connector[data-style=dashed]{background:repeating-linear-gradient(180deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.step-connector[data-style=soft]{height:8px;background:var(--editorial-connector, #8fd8c0);background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 88%,white) 55%,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent))}.steps-nav.vertical .step-connector[data-style=soft]{width:8px;min-width:8px;height:32px;background:var(--editorial-connector, #8fd8c0);background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 88%,white) 55%,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent))}.step-connector[data-state=completed]{background:var(--editorial-step-completed, var(--editorial-success, #35b37e));background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-step-completed, var(--editorial-success, #35b37e)) 92%,white),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 82%,white))}.step-connector[data-state=active]{background:var(--editorial-step-active, var(--editorial-accent, #264a8a));background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-step-active, var(--editorial-accent, #264a8a)) 86%,white),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 84%,white) 60%,color-mix(in srgb,var(--editorial-border-color, #d9deea) 48%,white))}.step-connector[data-state=blocked]{background:var(--editorial-step-blocked, var(--editorial-warning, #f28c38));background:linear-gradient(90deg,color-mix(in srgb,var(--editorial-step-blocked, var(--editorial-warning, #f28c38)) 78%,white),color-mix(in srgb,var(--editorial-border-color, #d9deea) 48%,white))}.steps-nav[data-variant=simple] .step-copy,.steps-nav[data-variant=simple] .step-description,.steps-nav[data-variant=icon] .step-description{display:none}.steps-nav[data-variant=simple] .step-chip,.steps-nav[data-variant=icon] .step-chip{gap:8px}.steps-nav.horizontal[data-variant=simple] .stepper-item,.steps-nav.horizontal[data-variant=icon] .stepper-item{align-items:center}.steps-nav[data-variant=rich] .step-copy{border-radius:var(--editorial-card-radius, 22px);box-shadow:0 20px 36px #14274417,0 0 0 1px #ffffff8c}.steps-nav.horizontal[data-variant=rich] .step-chip{align-items:stretch}.steps-nav.horizontal[data-variant=rich] .step-copy{text-align:left}.steps-nav.vertical .step-chip{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:14px}.steps-nav.vertical .step-copy{width:100%}@media(max-width:860px){.steps-nav.horizontal{flex-direction:column;gap:12px}.steps-nav.horizontal .stepper-item{flex:none}.steps-nav.horizontal .step-chip{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left}.steps-nav.horizontal .step-copy{width:100%}.steps-nav.horizontal .step-connector{width:var(--step-connector-size);min-width:var(--step-connector-size);min-height:24px;margin-top:0;margin-left:calc((var(--step-indicator-size) / 2) - (var(--step-connector-size) / 2));height:24px}.steps-nav.horizontal .step-connector[data-style=dashed]{background:repeating-linear-gradient(180deg,var(--editorial-connector, #8fd8c0) 0 8px,transparent 8px 14px)}.steps-nav.horizontal .step-connector[data-style=soft]{width:8px;min-width:8px;height:24px;background:var(--editorial-connector, #8fd8c0);background:linear-gradient(180deg,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent),color-mix(in srgb,var(--editorial-connector, #8fd8c0) 88%,white) 55%,color-mix(in srgb,var(--editorial-connector, #8fd8c0) 24%,transparent))}}@media(prefers-reduced-motion:reduce){.step-chip,.step-icon,.step-copy{transition:none}.step-chip:hover:not([disabled]){transform:none}}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], activeStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStepId", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], progressionBlocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressionBlocked", required: false }] }], isStepSelectionBlocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStepSelectionBlocked", required: false }] }], stepSelected: [{ type: i0.Output, args: ["stepSelected"] }] } });
 
 function resolveEditorialRuntimeSnapshot(input) {
@@ -2680,6 +2750,8 @@ function buildRuntimeCssVars(theme) {
         ['--editorial-active-step-border-width', theme.borderWidth?.activeStep],
         ['--editorial-title-font-family', theme.typography?.titleFontFamily],
         ['--editorial-body-font-family', theme.typography?.bodyFontFamily],
+        ['--editorial-title-weight', stringifyToken(theme.typography?.titleWeight)],
+        ['--editorial-body-weight', stringifyToken(theme.typography?.bodyWeight)],
         ['--editorial-hero-title-size', theme.typography?.heroTitleSize],
         ['--editorial-step-title-size', theme.typography?.stepTitleSize],
         ['--editorial-body-size', theme.typography?.bodySize],
@@ -2706,6 +2778,12 @@ function buildRuntimeCssVars(theme) {
         .map(([key, value]) => `${key}:${value}`)
         .join(';');
 }
+function stringifyToken(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    return String(value);
+}
 function toRgbTuple(value) {
     if (!value) {
         return undefined;