@egose/shadcn-theme-ng 0.5.3 → 0.6.1

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/button';
 import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { HlmTooltip } from '@egose/shadcn-theme-ng/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>
@@ -244,6 +279,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 */
@@ -271,23 +308,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) {
@@ -327,7 +376,7 @@ class HlmStepper extends CdkStepper {
         return hlm("ms-4 overflow-hidden ps-6", showConnector && "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: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"step.isNavigable()\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"linear && !step.isNavigable()\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n        [hlmTooltip]=\"_headerTooltip(step)\"\n        [position]=\"_headerTooltipPosition(step)\"\n        [tooltipDisabled]=\"_headerTooltipDisabled(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: i1.CdkStepHeader, selector: "[cdkStepHeader]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HlmStepHeader, selector: "hlm-step-header", inputs: ["state", "label", "errorMessage", "index", "selected", "reached", "active", "optional", "disabled", "icon", "indicatorMode", "labelPosition"] }, { kind: "directive", type: HlmTooltip, selector: "[hlmTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      @let enabled = _isHeaderEnabled(step);\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"enabled ? null : 'true'\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"enabled\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"!enabled\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n        [hlmTooltip]=\"_headerTooltip(step)\"\n        [position]=\"_headerTooltipPosition(step)\"\n        [tooltipDisabled]=\"_headerTooltipDisabled(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: i1.CdkStepHeader, selector: "[cdkStepHeader]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HlmStepHeader, selector: "hlm-step-header", inputs: ["state", "label", "errorMessage", "index", "selected", "reached", "active", "optional", "disabled", "icon", "indicatorMode", "labelPosition"] }, { kind: "directive", type: HlmTooltip, selector: "[hlmTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepper, decorators: [{
             type: Component,
@@ -336,9 +385,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     imports: [CdkStepperModule, NgTemplateOutlet, HlmStepHeader, HlmTooltip],
                     providers: [{ provide: CdkStepper, useExisting: HlmStepper }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"step.isNavigable()\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"linear && !step.isNavigable()\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n        [hlmTooltip]=\"_headerTooltip(step)\"\n        [position]=\"_headerTooltipPosition(step)\"\n        [tooltipDisabled]=\"_headerTooltipDisabled(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ",
+                    template: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      @let enabled = _isHeaderEnabled(step);\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"enabled ? null : 'true'\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"enabled\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"!enabled\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n        [hlmTooltip]=\"_headerTooltip(step)\"\n        [position]=\"_headerTooltipPosition(step)\"\n        [tooltipDisabled]=\"_headerTooltipDisabled(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ",
                 }]
-        }], 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;

package/table/README.md

@@ -130,6 +130,8 @@ There are **no inputs, outputs, or methods** on any table directive. Each direct
 
 User `class` attributes on the same element are preserved and merged (the `classes()` helper keeps base classes).
 
+`HlmTh`/`HlmTd` take a `size` input (`HlmTableSize`: `sm` / `default` / `lg`) scaling density one step down/up: header height `h-8` / `h-10` / `h-12`, cell padding `p-1` / `p-2` / `p-3`.
+
 ## Examples
 
 ### 1. Basic invoice table

package/table/fesm2022/table.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule } from '@angular/core';
-import { classes } from '@egose/shadcn-theme-ng/utils';
+import { Directive, input, NgModule } from '@angular/core';
+import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
 
 class HlmTableContainer {
     constructor() {
@@ -110,11 +110,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  * within an HlmTable context.
  */
 class HlmTh {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => "text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0");
+        classes(() => hlm("text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0", this.size() === 'sm' ? "h-8" : this.size() === 'lg' ? "h-12" : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTh, isStandalone: true, selector: "th[hlmTh],th[hlmTableHead]", host: { attributes: { "data-slot": "table-head" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTh, isStandalone: true, selector: "th[hlmTh],th[hlmTableHead]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "table-head" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTh, decorators: [{
             type: Directive,
@@ -122,17 +124,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'th[hlmTh],th[hlmTableHead]',
                     host: { 'data-slot': 'table-head' },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Directive to apply Shadcn-like styling to a <td> element
  * within an HlmTable context.
  */
 class HlmTd {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0");
+        classes(() => hlm("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0", this.size() === 'sm' ? "p-1" : this.size() === 'lg' ? "p-3" : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTd, isStandalone: true, selector: "td[hlmTd],td[hlmTableCell]", host: { attributes: { "data-slot": "table-cell" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTd, isStandalone: true, selector: "td[hlmTd],td[hlmTableCell]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "table-cell" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTd, decorators: [{
             type: Directive,
@@ -140,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'td[hlmTd],td[hlmTableCell]',
                     host: { 'data-slot': 'table-cell' },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Directive to apply Shadcn-like styling to a <caption> element
  * within an HlmTable context.

package/table/types/table.d.ts

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
 
+/** Density scale shared by table parts and higher-level components (e.g. data-table). */
+type HlmTableSize = 'sm' | 'default' | 'lg';
 declare class HlmTableContainer {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTableContainer, never>;
@@ -54,18 +56,20 @@ declare class HlmTr {
  * within an HlmTable context.
  */
 declare class HlmTh {
+    readonly size: i0.InputSignal<HlmTableSize>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTh, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTh, "th[hlmTh],th[hlmTableHead]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTh, "th[hlmTh],th[hlmTableHead]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Directive to apply Shadcn-like styling to a <td> element
  * within an HlmTable context.
  */
 declare class HlmTd {
+    readonly size: i0.InputSignal<HlmTableSize>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTd, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTd, "td[hlmTd],td[hlmTableCell]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTd, "td[hlmTd],td[hlmTableCell]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Directive to apply Shadcn-like styling to a <caption> element
@@ -85,3 +89,4 @@ declare class HlmTableModule {
 }
 
 export { HlmCaption, HlmTBody, HlmTFoot, HlmTHead, HlmTable, HlmTableContainer, HlmTableImports, HlmTableModule, HlmTd, HlmTh, HlmTr };
+export type { HlmTableSize };