Angular Stepper Component | ng-hub-ui-stepper

Version 22.8.2 - 9/6/26, 12:00 AM

added: Unit specs for the seven building blocks that had none: StepComponent, the nextButton, previousButton and submitButton directives, StepperNavDirective, StepTriggerDirective and StepperThemeService. Coverage stopped at StepperComponent, so every regression in the pieces around it reached a release: an input signal compared instead of read left the projected controls permanently disabled, and a selector written with a descendant combinator stopped matching altogether. The suite now catches both kinds of break on its own, instead of waiting for someone to click through the documentation page.

fixed: Projected nextButton and previousButton controls no longer arrive permanently disabled. Both directives compared the adjacent step disabled input signal itself instead of reading its value, so the expression was a function and therefore always truthy whenever an adjacent step existed. Every custom navigation button a consumer projected was inert and only the built-in controls worked, which is the opposite of what the directives exist for.

fixed: StepComponent.isAccessible() now answers for the step it is asked about. It negated the disabled input signal rather than its value, so it returned false for every step, enabled or not, contradicting the contract its own documentation states.

fixed: The variants "secondary", "neutral", "light" and "dark" are resolved by the stylesheet like the other five built-ins. The component built-in list had stayed at the five variants that predate 22.2.0, so the four added then took the custom-accent branch and were written as an inline style, which outranks both a consumer rule and the hub-stepper-theme() mixin. The rendered colour was already correct; what changes is that overriding the accent now behaves identically for all nine documented variants.

removed: The console.warn for a step declared without a title and the console.error for an out-of-range goTo() are gone. Neither was guarded, so both shipped inside the published bundle and wrote into the console of every consuming application, the first once per untitled step on every render pass that created one. A library has no business logging into the console of its host. Navigation is unchanged: goTo() still ignores an index outside the steps collection.

deprecated: StepperModule and StepperModule.forRoot() are deprecated and will be removed in 23.0.0. The module only re-exports the seven standalone building blocks, so importing them directly is the whole migration. forRoot() needs a word more: it is the only thing that registers the bundled en, es, ca, eu, gl, ast, an, de, zh and ar dictionaries, and those dictionaries are not part of the public API. A standalone application names the three built-in controls through the backLabel, continueLabel and submitLabel inputs of hub-stepper, or registers its own dictionary under HUBUI.STEPPER with provideHubTranslation() from ng-hub-ui-utils, which is also what supplies the HubTranslationService the translate pipe injects. See BREAKING_CHANGES.md.

Version 22.8.1 - 9/1/26, 12:00 AM

changed: The homepage in the manifest points at this library's own documentation page rather than at the site root. It is the link a registry shows beside the package and the one a reader clicks from it, and landing on a front page they then have to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only — no code, no types, no styles change, and nothing a consumer imports is affected.

Version 22.8.0 - 8/14/26, 12:00 AM

changed: Default action labels now resolve HUBUI.STEPPER.* before the legacy flat keys. The component provides the namespace through HUB_TRANSLATION_PREFIX, so an application dictionary can feed the built-in navigation labels via provideHubTranslationAdapter() without reserving generic top-level keys. Existing flat dictionaries keep working — the bare key is still the fallback.

added: README documentation for the application-wide translation adapter (provideHubTranslationAdapter() from ng-hub-ui-utils).

removed: Removed the @angular/animations peer dependency. The package is deprecated upstream and the library never used it. Applications that installed it only for ng-hub-ui-stepper can drop it.

Version 22.7.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.7.0 - 7/29/26, 12:00 AM

added: --hub-stepper-indicator-size — the canonical step-indicator diameter (calc(var(--hub-ref-space-3, 1rem) * 2)). The built-in nav is text-only; this is the published metric custom trigger templates and companion step/lifecycle tracks read, space-derived so a density re-theme moves it with the paddings and font sizes that already scale.

Version 22.6.0 - 7/28/26, 12:00 AM

added: WAI-ARIA tablist semantics on the step rail: the rail is role="tablist" with aria-orientation, each trigger is role="tab" with aria-selected / aria-current="step" / aria-disabled, and each step content is a role="tabpanel" wired to its tab through stable generated ids.

added: Keyboard navigation on the rail with a roving tabindex (single Tab stop): Arrow keys move between enabled tabs (skipping disabled ones, wrapping), Home/End jump to the first/last enabled tab, and Enter/Space activates the focused step under the same permission model as clicking.

added: New railLabel input: accessible name of the step rail tablist (default 'Steps').

fixed: Default rail triggers now declare type="button", so a stepper rendered inside a <form> no longer submits it when a step trigger is clicked.

Version 22.5.1 - 7/26/26, 12:00 AM

fixed: StepTriggerDirective selector used a descendant combinator and never instantiated; it now matches either attribute and captures its TemplateRef (groundwork — the stepper does not render custom triggers yet).

changed: Declared the real ng-hub-ui-utils peer range (>=22.7.0); the previous >=1.2.0 floor allowed installs that fail at runtime.

Version 22.5.0 - 7/7/26, 12:00 AM

changed: BREAKING (packaging) — the SCSS now builds to dist/stepper/styles/… instead of dist/stepper/src/lib/styles/…, so @use 'ng-hub-ui-stepper/styles' resolves. Update any @use that reached into src/lib/styles.

changed: The variant input accepts any colour. On top of the built-in semantic accents it now takes a registered custom accent or a literal colour (#ff0000, rgb(…), oklch(…), a CSS named colour), resolved through resolveHubAccent from ng-hub-ui-utils: a bareword becomes var(--hub-sys-color-<name>, <name>) and a literal is used as is.

changed: Internal — host bindings moved from the @HostBinding / @HostListener decorators to the host metadata object, per the Angular style guide. No public API or behaviour change.

Version 22.4.0 - 7/6/26, 12:00 AM

removed: BREAKING — the legacy ng80-stepper / ng80-step element selectors are gone. The components match only hub-stepper / hub-ui-stepper and hub-step / hub-ui-step; replace any <ng80-stepper> / <ng80-step> markup. The major stays at 22 because it tracks the supported Angular major, so this breaking removal ships as a minor.

fixed: CSS variable fallbacks realigned to the ds light defaults (--hub-sys-color-primary: #009ef7 → #0d6efd). Fallbacks only apply when ng-hub-ui-ds is not loaded.

fixed: The default values in docs/css-variables-reference.md and the README theming example were resynchronized with the actual declarations.

Version 22.3.0 - 6/30/26, 12:00 AM

added: New truncateTitles input: each rail title is clipped to --hub-stepper-nav-title-max-width (default 12rem) and reveals its full text on hover when it overflows. The tooltip is agnostic — the hub-ui one by default, swappable with provideHubTooltip. Off by default. Requires ng-hub-ui-utils >= 22.6.0 and @use 'ng-hub-ui-utils/styles/tooltip'.

Version 22.2.0 - 6/26/26, 12:00 AM

added: Open-set accent variants. variant now covers primary, secondary, success, danger, warning, info, neutral, light and dark out of the box, and any other name works with no recompile — define a single --hub-sys-color-<name> and the stepper derives its treatment from it.

added: Derived accent roles --hub-stepper-accent-emphasis, --hub-stepper-accent-subtle and --hub-stepper-accent-on, mixed locally from the single --hub-stepper-accent slot. The active pill and the next / submit controls take their text colour from the on-accent role instead of a hardcoded white, so a light custom accent stays legible.

changed: The accent role family is mixed in the OKLCH colour space for perceptually even tints across every accent, and hub-stepper-theme() re-derives it whenever $accent is passed.

Version 22.1.1 - 6/25/26, 12:00 AM

fixed: Design-token consistency pass: inline fallbacks aligned with the canonical ng-hub-ui-ds values, and hardcoded literals (z-index, font-weight, line-height, radii, theme-aware colours) routed through their --hub-sys-* / --hub-ref-* tokens so they follow the active theme. No visual change when the ds tokens are loaded.

Version 22.1.0 - 6/24/26, 12:00 AM

added: New variant input on <hub-stepper> selecting a semantic accent, and the new --hub-stepper-accent token it re-bases. Defaults to primary, so nothing changes visually until you set it.

added: New hub-stepper-theme() Sass mixin: accent, surfaces, nav pills, controls, spacing and the sidebar width in one call. Every parameter is optional, so only the ones you pass are emitted as --hub-stepper-* overrides. The styles/ folder now ships inside the package.

changed: BREAKING — the --hub-stepper-content-padding and --hub-stepper-nav-padding shorthands were replaced by the canonical directional -padding-x / -padding-y tokens. No visual change; set the directional pair instead of the removed shorthand.

Version 22.0.0 - 6/17/26, 12:00 AM

changed: Aligned with Angular 22 and standardized the README documentation.

Version 21.2.1 - 6/13/26, 12:00 AM

fixed: StepperThemeService.setTheme no longer reaches for the global document, which threw ReferenceError: document is not defined during server-side rendering. It injects the DOCUMENT token instead, making runtime theming SSR-safe.

Version 21.2.0 - 3/19/26, 12:00 AM

added: StepperAnimationDirection enum exported for typed animation direction values.

added: Step indexes are now automatically assigned by StepperComponent via a reactive effect — no manual [index] binding required.

changed: StepComponent.index is now an internal writable signal. Remove all [index]="N" bindings from hub-step templates.

changed: StepComponent.disabled simplified to a direct signal input (input(false)), removing the getter/setter and disabled$ backing signal.

changed: StepperComponent.currentIndex is now a writable signal — call as currentIndex() instead of the previous getter.

changed: Renamed internal signals: removed $ suffix from currentIndex, contentAnimating, animationDirection.

removed: StepComponent.disabled$ backing signal removed. Use the disabled signal input directly.

removed: [index] template binding removed from StepComponent — managed internally.

Version 21.1.0 - 3/18/26, 12:00 AM

added: Angular 21 support with Signals-based architecture.

added: contentChild and contentChildren for step and directive discovery.

changed: All components and directives converted to standalone.

fixed: Fixed step indices and validation during dynamic step additions.