ng-hub-ui-stepper 21.1.0 → 22.1.1

package/README.md

@@ -1,26 +1,46 @@
 # ng-hub-ui-stepper
 
+[Español](./README.es.md) | **English**
+
 [![npm version](https://img.shields.io/npm/v/ng-hub-ui-stepper.svg)](https://www.npmjs.com/package/ng-hub-ui-stepper)
 [![license](https://img.shields.io/npm/l/ng-hub-ui-stepper.svg)](https://github.com/carlos-morcillo/ng-hub-ui-stepper/blob/main/LICENSE)
 
 A flexible, customizable, and accessible stepper component for Angular 21+. Perfect for multi-step forms, wizards, and guided user experiences with a focus on developer experience and modern standards.
 
 > [!IMPORTANT]
-> This version (21.1.0) is built for **Angular 21** and uses the new **Signals** architecture.
+> This version (21.2.1) is built for **Angular 21** and uses the new **Signals** architecture.
+
+## Documentation and Live Examples
+
+This package is part of [Hub UI](https://hubui.dev/), a collection of Angular component libraries for standalone apps.
+
+- Docs: https://hubui.dev/stepper/overview/
+- Live examples: https://hubui.dev/stepper/examples/
+- Hub UI: https://hubui.dev/
 
 ## 🧩 Library Family `ng-hub-ui`
 
 This library is part of the **ng-hub-ui** ecosystem:
 
-- [**ng-hub-ui-accordion**](https://www.npmjs.com/package/ng-hub-ui-accordion)
+- [**ng-hub-ui-accordion**](https://www.npmjs.com/package/ng-hub-ui-accordion) (deprecated — use ng-hub-ui-panels)
+- [**ng-hub-ui-action-sheet**](https://www.npmjs.com/package/ng-hub-ui-action-sheet)
 - [**ng-hub-ui-avatar**](https://www.npmjs.com/package/ng-hub-ui-avatar)
 - [**ng-hub-ui-board**](https://www.npmjs.com/package/ng-hub-ui-board)
 - [**ng-hub-ui-breadcrumbs**](https://www.npmjs.com/package/ng-hub-ui-breadcrumbs)
 - [**ng-hub-ui-calendar**](https://www.npmjs.com/package/ng-hub-ui-calendar)
+- [**ng-hub-ui-dropdown**](https://www.npmjs.com/package/ng-hub-ui-dropdown)
+- [**ng-hub-ui-ds**](https://www.npmjs.com/package/ng-hub-ui-ds)
+- [**ng-hub-ui-forms**](https://www.npmjs.com/package/ng-hub-ui-forms)
+- [**ng-hub-ui-history**](https://www.npmjs.com/package/ng-hub-ui-history)
+- [**ng-hub-ui-milestones**](https://www.npmjs.com/package/ng-hub-ui-milestones)
 - [**ng-hub-ui-modal**](https://www.npmjs.com/package/ng-hub-ui-modal)
+- [**ng-hub-ui-nav**](https://www.npmjs.com/package/ng-hub-ui-nav)
 - [**ng-hub-ui-paginable**](https://www.npmjs.com/package/ng-hub-ui-paginable)
+- [**ng-hub-ui-panels**](https://www.npmjs.com/package/ng-hub-ui-panels)
 - [**ng-hub-ui-portal**](https://www.npmjs.com/package/ng-hub-ui-portal)
-- [**ng-hub-ui-stepper**](https://www.npmjs.com/package/ng-hub-ui-stepper)
+- [**ng-hub-ui-skeleton**](https://www.npmjs.com/package/ng-hub-ui-skeleton)
+- [**ng-hub-ui-sortable**](https://www.npmjs.com/package/ng-hub-ui-sortable)
+- [**ng-hub-ui-stepper**](https://www.npmjs.com/package/ng-hub-ui-stepper) ← You are here
 - [**ng-hub-ui-utils**](https://www.npmjs.com/package/ng-hub-ui-utils)
 
 ## Table of Contents
@@ -75,17 +95,17 @@ In your template:
 
 ```html
 <hub-stepper>
-  <hub-step [index]="0" title="Account Setup">
+  <hub-step title="Account Setup">
     <h3>Welcome!</h3>
     <p>Setup your account details here.</p>
   </hub-step>
-  
-  <hub-step [index]="1" title="Personal Info">
+
+  <hub-step title="Personal Info">
     <h3>Profile Data</h3>
     <p>Tell us more about yourself.</p>
   </hub-step>
 
-  <hub-step [index]="2" title="Review">
+  <hub-step title="Review">
     <h3>Save & Finalize</h3>
     <p>Ready to go?</p>
   </hub-step>
@@ -100,12 +120,12 @@ Control navigation by enabling/disabling steps programmatically.
 
 ```html
 <hub-stepper (completed)="onFinish()">
-  <hub-step [index]="0" title="Step 1">
-     <!-- Step 1 Content -->
+  <hub-step title="Step 1">
+    <!-- Step 1 Content -->
   </hub-step>
-  
-  <hub-step [index]="1" title="Step 2" [disabled]="!isStep1Valid()">
-     <!-- Step 2 Content -->
+
+  <hub-step title="Step 2" [disabled]="!isStep1Valid()">
+    <!-- Step 2 Content -->
   </hub-step>
 </hub-stepper>
 ```
@@ -118,16 +138,16 @@ Provide your own navigation template using the `stepperNavTpt` property.
 <hub-stepper>
   <nav *stepperNav="let steps = steps; let currentIndex = currentIndex" class="my-custom-nav">
      @for (step of steps; track step; let i = $index) {
-       <button 
-         [class.active]="i === currentIndex" 
+       <button
+         [class.active]="i === currentIndex"
          (click)="goTo(i)">
          {{ step.title() }}
        </button>
      }
   </nav>
 
-  <hub-step [index]="0" title="A">...</hub-step>
-  <hub-step [index]="1" title="B">...</hub-step>
+  <hub-step title="A">...</hub-step>
+  <hub-step title="B">...</hub-step>
 </hub-stepper>
 ```
 
@@ -137,8 +157,8 @@ Project your own buttons to override the default footer.
 
 ```html
 <hub-stepper>
-  <hub-step [index]="0">...</hub-step>
-  
+  <hub-step>...</hub-step>
+
   <button previousButton class="btn-back">Go back</button>
   <button nextButton class="btn-next">Next step</button>
   <button submitButton class="btn-done">Complete</button>
@@ -154,6 +174,7 @@ Project your own buttons to override the default footer.
 | `backLabel` | `string` | `'Back'` | Label for the back button. |
 | `continueLabel` | `string` | `'Continue'` | Label for the continue button. |
 | `submitLabel` | `string` | `'Submit'` | Label for the submit button. |
+| `variant` | `string` | `'primary'` | Semantic accent for the active step pill and the next / submit controls. Built-in values: `primary`, `success`, `danger`, `warning`, `info`. Any other string is also accepted and resolves through `--hub-sys-color-<variant>`. |
 | `options` | `StepperOptions` | `{}` | Visual and layout configuration. |
 
 | Output | Type | Description |
@@ -166,7 +187,6 @@ Project your own buttons to override the default footer.
 
 | Input | Type | Default | Description |
 |---|---|---|---|
-| `index` | `number` | `required` | Position of the step (0-indexed). |
 | `title` | `string` | `optional` | Text displayed in navigation. |
 | `disabled` | `boolean` | `false` | Prevents navigation to this step. |
 
@@ -199,6 +219,33 @@ Customize the component using CSS variables. For a complete list of available to
 }
 ```
 
+### Semantic accent
+
+The `--hub-stepper-accent` token drives the active step pill and the next / submit controls. It defaults to `var(--hub-sys-color-primary)`. The easiest way to set it is the `variant` input (see [API Reference](#steppercomponent)), but you can also override the token directly:
+
+```css
+.my-stepper {
+  --hub-stepper-accent: var(--hub-sys-color-success);
+}
+```
+
+### Sass mixin
+
+For full theming in a single call, the package ships a `hub-stepper-theme()` Sass mixin. Every parameter is optional and defaults to `null`, so only the ones you pass are emitted as `--hub-stepper-*` overrides:
+
+```scss
+@use 'ng-hub-ui-stepper/styles/mixins/stepper-theme' as *;
+
+.checkout-stepper {
+  @include hub-stepper-theme(
+    $accent: var(--hub-sys-color-success),
+    $gap: 1.5rem,
+    $nav-link-active-color: #fff,
+    $sidebar-width: 220px
+  );
+}
+```
+
 ## Contributing
 
 We welcome contributions! Please follow our [Commit Guidelines](https://github.com/carlos-morcillo/ng-hub-ui/blob/main/CONTRIBUTING.md).
@@ -218,4 +265,3 @@ If you find this project helpful, consider supporting its development:
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-