@egose/shadcn-theme-ng-tw 0.6.0 → 0.6.2

package/stepper/README.md

@@ -123,20 +123,38 @@ Lazy body (attached only when the step is first selected):
 
 ### `HlmStepper` — selector `hlm-stepper` (component, extends `CdkStepper`)
 
-| Input                   | Type                            | Default                 | Description                                                      |
-| ----------------------- | ------------------------------- | ----------------------- | ---------------------------------------------------------------- |
-| `orientation`           | forwarded to `CdkStepper`       | —                       | `'horizontal' \| 'vertical'`.                                    |
-| `linear`                | forwarded to `CdkStepper`       | —                       | Current step must be valid (via `stepControl`) before advancing. |
-| `selectedIndex`         | forwarded to `CdkStepper`       | —                       | Controlled selected-step index.                                  |
-| `labelPosition`         | `'end' \| 'bottom'`             | `'end'`                 | Horizontal layout: label beside vs. below the indicator.         |
-| `headerPosition`        | `'top' \| 'bottom'`             | `'top'`                 | Horizontal layout: headers above vs. below the content panel.    |
-| `indicatorMode`         | `'number' \| 'state' \| 'icon'` | from config (`'state'`) | Indicator rendering (see below).                                 |
-| `stepperAriaLabel`      | `string \| null`                | `'Progress'`            | `aria-label` for the tablist (ignored when labelledby is set).   |
-| `stepperAriaLabelledby` | `string \| null`                | `null`                  | `aria-labelledby` for the tablist.                               |
-| `animationsEnabled`     | `boolean`                       | from config (`true`)    | Toggle step transitions per instance.                            |
-| `animationDuration`     | `number` (ms)                   | from config (`300`)     | Transition duration per instance.                                |
-
-`next()` is overridden to `markAllAsTouched()` + `updateValueAndValidity()` on the current `stepControl` first, so linear steppers surface validation errors before denying the transition.
+| Input                   | Type                            | Default                 | Description                                                         |
+| ----------------------- | ------------------------------- | ----------------------- | ------------------------------------------------------------------- |
+| `orientation`           | forwarded to `CdkStepper`       | —                       | `'horizontal' \| 'vertical'`.                                       |
+| `linear`                | forwarded to `CdkStepper`       | —                       | CDK checks preceding steps, honoring optional/completion overrides. |
+| `selectedIndex`         | forwarded to `CdkStepper`       | —                       | Controlled selected-step index.                                     |
+| `labelPosition`         | `'end' \| 'bottom'`             | `'end'`                 | Horizontal layout: label beside vs. below the indicator.            |
+| `headerPosition`        | `'top' \| 'bottom'`             | `'top'`                 | Horizontal layout: headers above vs. below the content panel.       |
+| `indicatorMode`         | `'number' \| 'state' \| 'icon'` | from config (`'state'`) | Indicator rendering (see below).                                    |
+| `stepperAriaLabel`      | `string \| null`                | `'Progress'`            | `aria-label` for the tablist (ignored when labelledby is set).      |
+| `stepperAriaLabelledby` | `string \| null`                | `null`                  | `aria-labelledby` for the tablist.                                  |
+| `animationsEnabled`     | `boolean`                       | from config (`true`)    | Toggle step transitions per instance.                               |
+| `animationDuration`     | `number` (ms)                   | from config (`300`)     | Transition duration per instance.                                   |
+
+`next()` and `button[hlmStepperNext]` call `markAllAsTouched()` + `updateValueAndValidity()` on the current classic reactive-forms `stepControl` before delegating navigation to CDK. This preserves touch/validation feedback even when navigation is denied, and also runs for optional, completed, and non-linear steps. Signal-form Fields are passed through to CDK without this classic-control touch pass.
+
+CDK determines eligibility for Next, header selection, and direct index changes:
+
+- In linear mode, all preceding required steps must satisfy CDK's interaction and validation rules. Invalid or pending controls block advancement unless their step is optional or explicitly `[completed]="true"`.
+- Optional steps can be skipped while invalid or pending. Explicit completion also permits advancement in those states.
+- Without a `stepControl`, CDK uses `completed` (by default, whether the step was interacted with). Explicit `[completed]="false"` blocks a required control-less step. With a control, CDK uses its validation state; `[completed]="false"` does not veto an otherwise valid, interacted control.
+- Non-linear navigation is not blocked by invalid/pending forms. CDK's backward-navigation `editable` rule still applies.
+
+Header/direct selection retains CDK's interaction behavior and does not run Next's form-touch/revalidation pass. Next revalidation can restart a validator attached to the current control, so pending eligibility is evaluated after that pass.
+
+Header `aria-disabled`, disabled styling and active state preview the same transition that CDK will attempt, in both orientations:
+
+- An unvisited destination is enabled when its predecessors permit entry; the destination's own incomplete/invalid control does not block entry. A completed destination cannot bypass a blocked predecessor.
+- The preview accounts for CDK marking the **current** step interacted on an attempt to leave it. It does not mark steps interacted while rendering. Other unvisited required predecessors still block skipping ahead unless optional or explicitly completed.
+- Backward selection requires the destination's `editable` input and, in linear mode, eligible predecessors **before that destination**. The current step's invalid/pending state does not itself prevent going back.
+- The selected header stays enabled as a no-op, including vertically; selecting it neither collapses the panel nor marks the step interacted.
+
+Actual clicks and Enter/Space selection remain delegated to CDK. Disabled headers remain discoverable by keyboard focus; attempted keyboard selection cannot change the selected index, but retains CDK's current-step interaction notification. Header attempts do not touch or revalidate form controls. Classic-form status notifications (including async validator completion) refresh the affordance; Signal Field validity is read reactively.
 
 ### `HlmStep` — selector `hlm-step` (component, extends `CdkStep`)
 
@@ -145,7 +163,9 @@ Lazy body (attached only when the step is first selected):
 | `label`           | forwarded to `CdkStep`                   | —                                            | Step title (string, or rich template via `hlmStepLabel`).                |
 | `icon`            | `string \| null`                         | `null`                                       | Icon name rendered when `indicatorMode="icon"`.                          |
 | `stepControl`     | forwarded to `CdkStep`                   | —                                            | Form group driving `linear` validation.                                  |
-| `optional`        | forwarded to `CdkStep`                   | —                                            | Shows an "Optional" caption in the header.                               |
+| `optional`        | forwarded to `CdkStep`                   | —                                            | Permits skipping in linear mode and shows an "Optional" caption.         |
+| `completed`       | forwarded to `CdkStep`                   | —                                            | Explicit completion override; see CDK navigation rules above.            |
+| `editable`        | forwarded to `CdkStep`                   | `true`                                       | Allows returning to this step; enforced in linear and non-linear modes.  |
 | `errorMessage`    | forwarded to `CdkStep`                   | —                                            | Header error caption when the step state is `error`.                     |
 | `hasError`        | forwarded to `CdkStep`                   | —                                            | Forces the error state (pair with `STEPPER_GLOBAL_OPTIONS` `showError`). |
 | `tooltip`         | `string \| TemplateRef<unknown> \| null` | `null` (falls back to the full string label) | Styled header tooltip override; rich templates allowed.                  |
@@ -263,7 +283,7 @@ export class DemoResponsive {
 
 ### 4. Linear stepper with validation
 
-With `linear`, the current step must be valid before advancing — `HlmStepper.next()` marks the step form touched first:
+With `linear`, required steps normally need valid, non-pending controls before advancing. `HlmStepper.next()` marks the current step form touched first; optional and explicitly completed steps follow the exceptions above:
 
 ```ts
 import { Component, inject } from '@angular/core';
@@ -361,9 +381,9 @@ Steps using `<ng-template hlmStepLabel>` have no string to fall back to — pass
 
 - Horizontal headers get `role="tab"` semantics inside a `role="tablist"` (labelled `Progress` by default — override with `stepperAriaLabel` / `stepperAriaLabelledby`); panels get `role="tabpanel"` wired via `aria-labelledby` / `aria-controls`.
 - Vertical headers use `role="button"` with `aria-expanded` / `aria-current="step"`.
-- Keyboard: `HlmStepper` inherits CDK arrow-key navigation (`_onKeydown`). Headers are focusable via roving `tabIndex`.
-- Disabled steps (`linear` + not navigable) get `aria-disabled` and `data-disabled` styling — explain in the label why a step is unavailable.
-- In `linear` mode, failed validation marks fields touched so screen readers announce the errors.
+- Keyboard: CDK manages roving `tabIndex`, horizontal Left/Right (direction-aware), vertical Up/Down, Home/End, wrapping, and Enter/Space activation. Focus movement does not select a step. Disabled headers can receive keyboard focus so their labels and unavailable state remain discoverable.
+- Headers that CDK cannot select get matching `aria-disabled="true"` and `data-disabled="true"` pointer/opacity styling, including non-editable backward destinations in non-linear mode. Explain in the label why a step is unavailable. Eligible unvisited destinations and the selected header are not disabled.
+- Next marks classic form controls touched so applications can display validation feedback. Associate error text with the relevant controls; touching alone does not guarantee a screen-reader announcement.
 
 ## Theming / CSS variables
 

package/stepper/fesm2022/stepper.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, input, booleanAttribute, contentChild, effect, untracked, ChangeDetectionStrategy, Component, InjectionToken, numberAttribute, computed, signal, NgModule } from '@angular/core';
+import { inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, input, booleanAttribute, contentChild, effect, untracked, ChangeDetectionStrategy, Component, InjectionToken, numberAttribute, computed, QueryList, signal, ViewChildren, NgModule } from '@angular/core';
 import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/stepper';
 import { CdkStepLabel, CdkStep, CdkStepHeader, CdkStepper, CdkStepperModule, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCircleAlert, lucideCheck } from '@ng-icons/lucide';
 import { buttonVariants } from '@egose/shadcn-theme-ng-tw/button';
 import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { HlmTooltip } from '@egose/shadcn-theme-ng-tw/tooltip';
 import { cva } from 'class-variance-authority';
 import { tap } from 'rxjs/operators';
@@ -42,6 +42,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
 class HlmStep extends CdkStep {
     _viewContainerRef = inject(ViewContainerRef);
     _destroyRef = inject(DestroyRef);
+    _hasCompletionOverride = false;
+    _controlSubscription;
+    ngOnChanges() {
+        super.ngOnChanges();
+        this._controlSubscription?.unsubscribe();
+        const control = this.stepControl;
+        if (control && typeof control !== 'function') {
+            // Classic form status getters are not reactive template dependencies, unlike Signal Fields.
+            this._controlSubscription = control.statusChanges
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => this._stepper._stateChanged());
+        }
+    }
+    get completed() {
+        return super.completed;
+    }
+    set completed(value) {
+        // Track input presence through the supported accessor, not CDK's internal override field.
+        this._hasCompletionOverride = value != null;
+        super.completed = value;
+    }
+    /** @internal Read-only preview of CDK's predecessor check after leaving the current step. */
+    _canExit(leaving) {
+        if (this.optional || this.completed) {
+            return true;
+        }
+        const interacted = this.interacted || leaving;
+        const control = this.stepControl;
+        if (!control) {
+            return interacted && !this._hasCompletionOverride;
+        }
+        const invalid = typeof control === 'function' ? control().invalid() : control.invalid;
+        const pending = typeof control === 'function' ? control().pending() : control.pending;
+        return interacted && !invalid && !pending;
+    }
     icon = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     /** Styled header tooltip override. Falls back to the full string label when unset. */
@@ -81,7 +116,7 @@ class HlmStep extends CdkStep {
                 provide: CdkStep,
                 useExisting: HlmStep,
             },
-        ], queries: [{ propertyName: "stepLabelContent", first: true, predicate: HlmStepLabel, descendants: true, isSignal: true }, { propertyName: "_lazyContent", first: true, predicate: HlmStepContent, descendants: true, isSignal: true }], exportAs: ["hlmStep"], usesInheritance: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "stepLabelContent", first: true, predicate: HlmStepLabel, descendants: true, isSignal: true }, { propertyName: "_lazyContent", first: true, predicate: HlmStepContent, descendants: true, isSignal: true }], exportAs: ["hlmStep"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <ng-template>
       <ng-content></ng-content>
       <ng-template [cdkPortalOutlet]="portal"></ng-template>
@@ -292,6 +327,8 @@ const stepTransition = cva('', {
 });
 class HlmStepper extends CdkStepper {
     _config = injectHlmStepperConfig();
+    // Headers are rendered in this component's view, not in CDK's projected content query.
+    _stepHeader = new QueryList();
     labelPosition = input('end', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
     headerPosition = input('top', /* @ts-ignore */
@@ -319,23 +356,35 @@ class HlmStepper extends CdkStepper {
         }), takeUntilDestroyed())
             .subscribe();
     }
+    /** Touch and revalidate the current reactive form, then let CDK decide whether navigation is allowed. */
     next() {
         const stepControl = this.selected?.stepControl;
         if (stepControl && typeof stepControl !== 'function') {
-            // Classic reactive-forms control: surface validation errors before a denied linear transition.
-            // Signal `Field` controls expose validity through invocation and need no touch pass.
+            // Preserve validation feedback for classic controls. Signal Fields are handled by CDK.
             stepControl.markAllAsTouched();
             stepControl.updateValueAndValidity();
         }
-        const invalid = !!stepControl && (typeof stepControl === 'function' ? stepControl().invalid() : stepControl.invalid);
-        if (this.linear && invalid) {
-            return;
-        }
+        // CDK applies optional/completion overrides and checks all preceding controls, including pending ones.
         super.next();
     }
     stepIcon(step) {
         return step instanceof HlmStep ? step.icon() : null;
     }
+    /** Preview selection without touching forms or marking steps interacted; activation stays with CDK. */
+    _isHeaderEnabled(step) {
+        const index = step.index();
+        if (index === this.selectedIndex) {
+            return true;
+        }
+        if (index < this.selectedIndex && !step.editable) {
+            return false;
+        }
+        return (!this.linear ||
+            this.steps
+                .toArray()
+                .slice(0, index)
+                .every((previous) => previous instanceof HlmStep && previous._canExit(previous === this.selected)));
+    }
     _headerTooltip(step) {
         const override = step instanceof HlmStep ? step.tooltip() : null;
         if (override === null || override === undefined) {
@@ -375,7 +424,7 @@ class HlmStepper extends CdkStepper {
         return hlm('tw:ms-4 tw:overflow-hidden tw:ps-6', showConnector && 'tw:border-s', this.animationsEnabled() && this.selectedIndex === index && stepTransition({ motion: 'enter-bottom' }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmStepper, isStandalone: true, selector: "hlm-stepper", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, indicatorMode: { classPropertyName: "indicatorMode", publicName: "indicatorMode", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabel: { classPropertyName: "stepperAriaLabel", publicName: "stepperAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabelledby: { classPropertyName: "stepperAriaLabelledby", publicName: "stepperAriaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, animationsEnabled: { classPropertyName: "animationsEnabled", publicName: "animationsEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: HlmStepper }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmStepper, isStandalone: true, selector: "hlm-stepper", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, indicatorMode: { classPropertyName: "indicatorMode", publicName: "indicatorMode", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabel: { classPropertyName: "stepperAriaLabel", publicName: "stepperAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabelledby: { classPropertyName: "stepperAriaLabelledby", publicName: "stepperAriaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, animationsEnabled: { classPropertyName: "animationsEnabled", publicName: "animationsEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: HlmStepper }], viewQueries: [{ propertyName: "_stepHeader", predicate: CdkStepHeader, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     @switch (orientation) {
       @case ('horizontal') {
         <div class="tw:flex tw:w-full tw:flex-col tw:gap-6">
@@ -421,6 +470,7 @@ class HlmStepper extends CdkStepper {
     }
 
     <ng-template #stepHeaderTemplate let-step="step">
+      @let enabled = _isHeaderEnabled(step);
       <hlm-step-header
         cdkStepHeader
         class="tw:min-w-0"
@@ -437,16 +487,16 @@ class HlmStepper extends CdkStepper {
         [attr.aria-controls]="_getStepContentId(step.index())"
         [attr.aria-label]="step.ariaLabel || null"
         [attr.aria-labelledby]="!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null"
-        [attr.aria-disabled]="!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null"
+        [attr.aria-disabled]="enabled ? null : 'true'"
         [index]="step.index()"
         [state]="step.indicatorType()"
         [label]="step.stepLabelContent() || step.label"
         [selected]="step.isSelected()"
         [reached]="step.index() < selectedIndex"
-        [active]="step.isNavigable()"
+        [active]="enabled"
         [optional]="step.optional"
         [errorMessage]="step.errorMessage"
-        [disabled]="linear && !step.isNavigable()"
+        [disabled]="!enabled"
         [labelPosition]="orientation === 'horizontal' ? labelPosition() : 'end'"
         [indicatorMode]="indicatorMode()"
         [icon]="stepIcon(step)"
@@ -554,6 +604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     }
 
     <ng-template #stepHeaderTemplate let-step="step">
+      @let enabled = _isHeaderEnabled(step);
       <hlm-step-header
         cdkStepHeader
         class="tw:min-w-0"
@@ -570,16 +621,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
         [attr.aria-controls]="_getStepContentId(step.index())"
         [attr.aria-label]="step.ariaLabel || null"
         [attr.aria-labelledby]="!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null"
-        [attr.aria-disabled]="!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null"
+        [attr.aria-disabled]="enabled ? null : 'true'"
         [index]="step.index()"
         [state]="step.indicatorType()"
         [label]="step.stepLabelContent() || step.label"
         [selected]="step.isSelected()"
         [reached]="step.index() < selectedIndex"
-        [active]="step.isNavigable()"
+        [active]="enabled"
         [optional]="step.optional"
         [errorMessage]="step.errorMessage"
-        [disabled]="linear && !step.isNavigable()"
+        [disabled]="!enabled"
         [labelPosition]="orientation === 'horizontal' ? labelPosition() : 'end'"
         [indicatorMode]="indicatorMode()"
         [icon]="stepIcon(step)"
@@ -634,7 +685,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], indicatorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorMode", required: false }] }], stepperAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabel", required: false }] }], stepperAriaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabelledby", required: false }] }], animationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationsEnabled", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { _stepHeader: [{
+                type: ViewChildren,
+                args: [CdkStepHeader]
+            }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], indicatorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorMode", required: false }] }], stepperAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabel", required: false }] }], stepperAriaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabelledby", required: false }] }], animationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationsEnabled", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
 
 /** Button that moves to the next step in a stepper workflow. */
 class HlmStepperNext extends CdkStepperNext {

package/stepper/types/stepper.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ValueProvider, TemplateRef } from '@angular/core';
+import { ValueProvider, TemplateRef, QueryList } from '@angular/core';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CdkStepLabel, CdkStep, CdkStepHeader, CdkStepper, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
 
@@ -23,6 +23,13 @@ declare function injectHlmStepperConfig(): HlmStepperConfig;
 declare class HlmStep extends CdkStep {
     private readonly _viewContainerRef;
     private readonly _destroyRef;
+    private _hasCompletionOverride;
+    private _controlSubscription?;
+    ngOnChanges(): void;
+    get completed(): boolean;
+    set completed(value: boolean);
+    /** @internal Read-only preview of CDK's predecessor check after leaving the current step. */
+    _canExit(leaving: boolean): boolean;
     readonly icon: _angular_core.InputSignal<string | null>;
     /** Styled header tooltip override. Falls back to the full string label when unset. */
     readonly tooltip: _angular_core.InputSignal<string | TemplateRef<unknown> | null>;
@@ -77,6 +84,7 @@ declare class HlmStepHeader extends CdkStepHeader {
 
 declare class HlmStepper extends CdkStepper {
     private readonly _config;
+    _stepHeader: QueryList<CdkStepHeader>;
     readonly labelPosition: _angular_core.InputSignal<HlmStepperLabelPosition>;
     readonly headerPosition: _angular_core.InputSignal<HlmStepperHeaderPosition>;
     readonly indicatorMode: _angular_core.InputSignal<HlmStepperIndicatorMode>;
@@ -87,8 +95,11 @@ declare class HlmStepper extends CdkStepper {
     protected readonly _animationDirection: _angular_core.WritableSignal<"forward" | "backward">;
     protected readonly _hasSelectionChanged: _angular_core.WritableSignal<boolean>;
     constructor();
+    /** Touch and revalidate the current reactive form, then let CDK decide whether navigation is allowed. */
     next(): void;
     protected stepIcon(step: CdkStep): string | null;
+    /** Preview selection without touching forms or marking steps interacted; activation stays with CDK. */
+    protected _isHeaderEnabled(step: HlmStep): boolean;
     protected _headerTooltip(step: CdkStep): string | TemplateRef<void> | null;
     protected _headerTooltipPosition(step: CdkStep): HlmStepTooltipPosition;
     protected _headerTooltipDisabled(step: CdkStep): boolean;