@styloviz/stepper 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# @styloviz/stepper
+
+> 6 visual variants — default, pill, minimal, icon, dot, line — all free, plus horizontal/vertical orientation. Linear wizard mode, guard rules, and telemetry are available in the Pro package.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/stepper
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvStepperComponent } from '@styloviz/stepper';
+
+@Component({
+  standalone: true,
+  imports: [SvStepperComponent],
+  template: `
+    <sv-stepper [items]="steps" [activeIndex]="step" (stepChange)="step = $event" />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `StepperItem[]` | `[]` | The steps to render (label, optional description, state). |
+| `activeIndex` | `number (two-way)` | `0` | 0-based active step index. Supports two-way binding via `[(activeIndex)]`. |
+| `orientation` | `StepperOrientation` | `'horizontal'` | Layout: horizontal or vertical. |
+| `variant` | `StepperVariant` | `'default'` | Visual variant (default, icon, dot, line, pill, minimal…). |
+| `size` | `StepperSize` | `'md'` | Step size: sm, md or lg. |
+| `mode` | `StepperMode` | `'standard'` | Navigation mode: standard sequence, or branch (conditional paths via `activeBranch`). |
+| `interactive` | `boolean` | `true` | Whether users can click steps to navigate. |
+| `showDescriptions` | `boolean` | `true` | Show step descriptions under labels. |
+| `showConnectors` | `boolean` | `true` | Render connectors between steps. |
+| `enableHotkeys` | `boolean` | `false` | Enables advanced keyboard shortcuts for rapid step navigation. |
+| `activeBranch` | `string \| null (two-way)` | `null` | Active branch key used in `mode='branch'`. Supports two-way binding. |
+| `customClass` | `string` | `''` | Extra CSS classes for the root element. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `stepChange` | `StepperChangeEvent` | Emitted when the active step changes. |
+| `stepClick` | `{ index: number; step: StepperItem }` | Emitted when a step is clicked. |
+| `stepBlocked` | `StepperBlockedEvent` | Emitted when navigation to a step is blocked (e.g. linear validation). |
+| `branchChange` | `StepperBranchChangeEvent` | Emitted when the active branch changes (branch mode). |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/stepper
+
+## License
+
+MIT

package/fesm2022/styloviz-stepper.mjs

@@ -0,0 +1,336 @@
+import * as i0 from '@angular/core';
+import { input, model, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * Stepper — multi-step progress and workflow navigation component.
+ *
+ * Features:
+ * - 6 visual variants: default, pill, minimal, icon, dot, line
+ * - Horizontal and vertical orientation
+ * - Branch mode for conditional workflows (`mode="branch"`, `activeBranch`)
+ * - Validation states: complete, current, warning, error, disabled
+ * - Two-way active index via `[(activeIndex)]`
+ * - Full keyboard and screen-reader friendly semantics
+ *
+ * For linear (wizard-gated) sequencing, per-step guard rules, and telemetry
+ * events, see the Pro Stepper (`@styloviz-pro/stepper`).
+ */
+class SvStepperComponent {
+    // ── Inputs ────────────────────────────────────────────────────────────────
+    /** The steps to render (label, optional description, state). */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** 0-based active step index. Supports two-way binding via `[(activeIndex)]`. */
+    activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Layout: horizontal or vertical. @default 'horizontal' */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Visual variant (default, icon, dot, line, pill, minimal…). @default 'default' */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Step size: sm, md or lg. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Navigation mode: standard sequence, or branch (conditional paths via `activeBranch`). @default 'standard' */
+    mode = input('standard', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Whether users can click steps to navigate. */
+    interactive = input(true, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /** Show step descriptions under labels. */
+    showDescriptions = input(true, ...(ngDevMode ? [{ debugName: "showDescriptions" }] : /* istanbul ignore next */ []));
+    /** Render connectors between steps. */
+    showConnectors = input(true, ...(ngDevMode ? [{ debugName: "showConnectors" }] : /* istanbul ignore next */ []));
+    /** Enables advanced keyboard shortcuts for rapid step navigation. */
+    enableHotkeys = input(false, ...(ngDevMode ? [{ debugName: "enableHotkeys" }] : /* istanbul ignore next */ []));
+    /** Active branch key used in `mode='branch'`. Supports two-way binding. */
+    activeBranch = model(null, ...(ngDevMode ? [{ debugName: "activeBranch" }] : /* istanbul ignore next */ []));
+    /** Extra CSS classes for the root element. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ───────────────────────────────────────────────────────────────
+    /** Emitted when the active step changes. */
+    stepChange = output();
+    /** Emitted when a step is clicked. */
+    stepClick = output();
+    /** Emitted when navigation to a step is blocked (e.g. linear validation). */
+    stepBlocked = output();
+    /** Emitted when the active branch changes (branch mode). */
+    branchChange = output();
+    branchShift = signal(false, ...(ngDevMode ? [{ debugName: "branchShift" }] : /* istanbul ignore next */ []));
+    // ── Computed ──────────────────────────────────────────────────────────────
+    visibleItems = computed(() => {
+        const branch = this.activeBranch();
+        if (this.mode() !== 'branch')
+            return this.items();
+        return this.items().filter(item => !item.branch || item.branch === branch);
+    }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    normalizedSteps = computed(() => {
+        const current = this.clampedActiveIndex();
+        return this.visibleItems().map((item, index) => {
+            const state = this.resolveState(item, index, current);
+            return { index, item, state };
+        });
+    }, ...(ngDevMode ? [{ debugName: "normalizedSteps" }] : /* istanbul ignore next */ []));
+    clampedActiveIndex = computed(() => {
+        const max = this.visibleItems().length - 1;
+        if (max < 0)
+            return 0;
+        return Math.max(0, Math.min(this.activeIndex(), max));
+    }, ...(ngDevMode ? [{ debugName: "clampedActiveIndex" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => {
+        const isVertical = this.orientation() === 'vertical';
+        const base = isVertical ? 'flex flex-col gap-0' : 'flex items-start';
+        return [base, this.customClass()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    // ── State helpers ─────────────────────────────────────────────────────────
+    resolveState(item, index, current) {
+        if (item.status)
+            return item.status;
+        if (index < current)
+            return 'complete';
+        if (index === current)
+            return 'current';
+        return 'pending';
+    }
+    isClickable(step) {
+        if (!this.interactive())
+            return false;
+        return this.blockReason(step) === null;
+    }
+    blockReason(step) {
+        if (!this.interactive())
+            return null;
+        if (step.state === 'disabled')
+            return 'disabled';
+        return null;
+    }
+    onSelect(step) {
+        this.stepClick.emit({ index: step.index, step: step.item });
+        const reason = this.blockReason(step);
+        if (reason) {
+            this.stepBlocked.emit({ index: step.index, step: step.item, reason });
+            return;
+        }
+        if (step.item.selectsBranch && this.activeBranch() !== step.item.selectsBranch) {
+            this.activeBranch.set(step.item.selectsBranch);
+            this.branchChange.emit({ branch: step.item.selectsBranch, step: step.item });
+            this.triggerBranchShift();
+        }
+        const previous = this.clampedActiveIndex();
+        if (previous === step.index)
+            return;
+        this.activeIndex.set(step.index);
+        this.stepChange.emit({ previousIndex: previous, currentIndex: step.index, step: step.item });
+    }
+    onStepKeydown(event, step) {
+        if (!this.enableHotkeys())
+            return;
+        const list = this.normalizedSteps();
+        if (!list.length)
+            return;
+        const key = event.key;
+        if (/^[1-9]$/.test(key)) {
+            const target = Number(key) - 1;
+            if (target < list.length) {
+                event.preventDefault();
+                this.onSelect(list[target]);
+                this.focusStep(list[target].item.id);
+            }
+            return;
+        }
+        const isVertical = this.orientation() === 'vertical';
+        let target;
+        if ((isVertical && key === 'ArrowDown') || (!isVertical && key === 'ArrowRight')) {
+            target = list[Math.min(list.length - 1, step.index + 1)];
+        }
+        if ((isVertical && key === 'ArrowUp') || (!isVertical && key === 'ArrowLeft')) {
+            target = list[Math.max(0, step.index - 1)];
+        }
+        if (key === 'Home')
+            target = list[0];
+        if (key === 'End')
+            target = list[list.length - 1];
+        if (target) {
+            event.preventDefault();
+            this.onSelect(target);
+            this.focusStep(target.item.id);
+        }
+    }
+    // ── Class helpers ─────────────────────────────────────────────────────────
+    indicatorClass(step) {
+        const size = this.indicatorSizeClass();
+        const variant = this.variant();
+        const base = [
+            'inline-flex shrink-0 items-center justify-center font-semibold transition-colors duration-200',
+            size,
+            this.shapeClass(variant),
+        ];
+        switch (step.state) {
+            case 'complete':
+                base.push('bg-accent-500 text-white dark:bg-accent-500');
+                break;
+            case 'current':
+                base.push('bg-primary-600 text-white ring-4 ring-primary-100 dark:bg-primary-500 dark:ring-primary-900/50');
+                break;
+            case 'error':
+                base.push('bg-danger-500 text-white dark:bg-danger-500');
+                break;
+            case 'warning':
+                base.push('bg-warning-500 text-white dark:bg-warning-500');
+                break;
+            case 'disabled':
+                base.push('bg-gray-200 text-gray-400 dark:bg-gray-800 dark:text-gray-500');
+                break;
+            default:
+                base.push('bg-white text-gray-500 ring-1 ring-gray-300 dark:bg-gray-900 dark:text-gray-400 dark:ring-gray-700');
+                break;
+        }
+        if (variant === 'minimal') {
+            base.push('ring-0');
+            if (step.state === 'current') {
+                base.push('bg-primary-500');
+            }
+        }
+        return base.join(' ');
+    }
+    connectorClass(step) {
+        if (step.state === 'complete')
+            return 'bg-accent-400 dark:bg-accent-500';
+        if (step.state === 'error')
+            return 'bg-danger-300 dark:bg-danger-500/70';
+        if (step.state === 'warning')
+            return 'bg-warning-300 dark:bg-warning-500/70';
+        return 'bg-gray-200 dark:bg-gray-700';
+    }
+    /** Connector thickness — `line` renders a bold, continuous progress bar; every other variant uses a thin hairline. */
+    connectorSizeClass() {
+        return this.variant() === 'line' ? 'h-1' : 'h-px';
+    }
+    verticalRowPaddingClass() {
+        if (this.size() === 'sm')
+            return 'pl-11';
+        if (this.size() === 'lg')
+            return 'pl-16';
+        return 'pl-14';
+    }
+    verticalConnectorLayoutClass() {
+        const width = this.variant() === 'line' ? 'w-1' : 'w-0.5';
+        if (this.size() === 'sm')
+            return `left-[13px] top-7 h-[calc(100%-1rem)] ${width}`;
+        if (this.size() === 'lg')
+            return `left-[19px] top-10 h-[calc(100%-1.35rem)] ${width}`;
+        return `left-[15px] top-8 h-[calc(100%-1.15rem)] ${width}`;
+    }
+    labelClass(step) {
+        const base = [this.labelSizeClass(), 'font-medium tracking-tight'];
+        switch (step.state) {
+            case 'current':
+                base.push('text-gray-900 dark:text-white');
+                break;
+            case 'complete':
+                base.push('text-accent-700 dark:text-accent-400');
+                break;
+            case 'error':
+                base.push('text-danger-700 dark:text-danger-400');
+                break;
+            case 'warning':
+                base.push('text-warning-700 dark:text-warning-400');
+                break;
+            case 'disabled':
+                base.push('text-gray-500 dark:text-gray-400');
+                break;
+            default:
+                base.push('text-gray-600 dark:text-gray-300');
+                break;
+        }
+        return base.join(' ');
+    }
+    descriptionClass(step) {
+        const base = [this.descriptionSizeClass(), 'mt-1 leading-relaxed'];
+        if (step.state === 'disabled') {
+            base.push('text-gray-500 dark:text-gray-400');
+        }
+        else {
+            base.push('text-gray-500 dark:text-gray-400');
+        }
+        return base.join(' ');
+    }
+    shapeClass(variant) {
+        switch (variant) {
+            case 'pill':
+                return 'rounded-xl px-2.5';
+            case 'dot':
+            case 'minimal':
+                return 'rounded-full';
+            default:
+                return 'rounded-full';
+        }
+    }
+    indicatorSizeClass() {
+        const size = this.size();
+        const variant = this.variant();
+        if (variant === 'dot' || variant === 'minimal') {
+            return size === 'sm' ? 'h-2.5 w-2.5' : size === 'lg' ? 'h-4 w-4' : 'h-3 w-3';
+        }
+        if (variant === 'pill') {
+            return size === 'sm' ? 'h-7 min-w-7 text-xs' : size === 'lg' ? 'h-10 min-w-10 text-base' : 'h-8 min-w-8 text-sm';
+        }
+        return size === 'sm' ? 'h-7 w-7 text-xs' : size === 'lg' ? 'h-10 w-10 text-base' : 'h-8 w-8 text-sm';
+    }
+    labelSizeClass() {
+        return this.size() === 'sm' ? 'text-xs' : this.size() === 'lg' ? 'text-base' : 'text-sm';
+    }
+    descriptionSizeClass() {
+        return this.size() === 'sm' ? 'text-[11px]' : 'text-xs';
+    }
+    // ── Icon/text helpers ─────────────────────────────────────────────────────
+    shouldShowText(_step) {
+        return !(this.variant() === 'dot' || this.variant() === 'minimal');
+    }
+    shouldShowIcon(step) {
+        if (step.state === 'complete' || step.state === 'error' || step.state === 'warning')
+            return true;
+        return this.variant() === 'icon' && !!step.item.iconPath;
+    }
+    iconPath(step) {
+        if (step.state === 'complete')
+            return 'M5 13l4 4L19 7';
+        if (step.state === 'error')
+            return 'M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z';
+        if (step.state === 'warning')
+            return 'M12 8v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z';
+        return step.item.iconPath ?? '';
+    }
+    indicatorText(step) {
+        return String(step.index + 1);
+    }
+    shouldShowBadge(step) {
+        return !!step.item.badge || !!step.item.selectsBranch;
+    }
+    badgeText(step) {
+        return step.item.badge ?? step.item.selectsBranch ?? '';
+    }
+    branchShiftClass() {
+        return this.branchShift() ? 'stp-branch-shift' : '';
+    }
+    triggerBranchShift() {
+        this.branchShift.set(false);
+        queueMicrotask(() => {
+            this.branchShift.set(true);
+            setTimeout(() => this.branchShift.set(false), 280);
+        });
+    }
+    focusStep(id) {
+        const el = document.getElementById(`stepper-item-${id}`);
+        el?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvStepperComponent, isStandalone: true, selector: "sv-stepper", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, showDescriptions: { classPropertyName: "showDescriptions", publicName: "showDescriptions", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, enableHotkeys: { classPropertyName: "enableHotkeys", publicName: "enableHotkeys", isSignal: true, isRequired: false, transformFunction: null }, activeBranch: { classPropertyName: "activeBranch", publicName: "activeBranch", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", activeBranch: "activeBranchChange", stepChange: "stepChange", stepClick: "stepClick", stepBlocked: "stepBlocked", branchChange: "branchChange" }, ngImport: i0, template: "<div [ngClass]=\"[rootClasses(), branchShiftClass()]\" role=\"list\" aria-label=\"Progress steps\">\n\n  @if (orientation() === 'horizontal') {\n    @for (step of normalizedSteps(); track step.item.id; let last = $last) {\n      <div class=\"flex min-w-0 flex-1\" role=\"listitem\">\n        <button\n          [id]=\"'stepper-item-' + step.item.id\"\n          type=\"button\"\n          class=\"group flex min-w-0 flex-1 flex-col items-start gap-2 text-left\"\n          [class.cursor-pointer]=\"isClickable(step)\"\n          [class.cursor-not-allowed]=\"!isClickable(step)\"\n          [class.opacity-70]=\"!isClickable(step)\"\n          [attr.aria-current]=\"step.index === clampedActiveIndex() ? 'step' : null\"\n          [attr.aria-disabled]=\"!isClickable(step)\"\n          [attr.tabindex]=\"step.index === clampedActiveIndex() ? 0 : -1\"\n          (click)=\"onSelect(step)\"\n          (keydown)=\"onStepKeydown($event, step)\"\n        >\n          <div class=\"flex w-full items-center\">\n            <span [ngClass]=\"indicatorClass(step)\" aria-hidden=\"true\">\n              @if (shouldShowIcon(step)) {\n                <svg class=\"h-[65%] w-[65%]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path [attr.d]=\"iconPath(step)\" />\n                </svg>\n              } @else if (shouldShowText(step)) {\n                {{ indicatorText(step) }}\n              }\n            </span>\n\n            @if (showConnectors() && !last) {\n              <span\n                class=\"ml-3 flex-1 rounded-full\"\n                [ngClass]=\"[connectorClass(step), connectorSizeClass()]\"\n                aria-hidden=\"true\"\n              ></span>\n            }\n          </div>\n\n          @if (variant() !== 'dot') {\n            <span class=\"min-w-0 pt-0.5\">\n              <span [ngClass]=\"labelClass(step)\">{{ step.item.label }}</span>\n              @if (shouldShowBadge(step)) {\n                <span class=\"ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                  {{ badgeText(step) }}\n                </span>\n              }\n              @if (step.item.optional) {\n                <span class=\"ml-2 text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400\">Optional</span>\n              }\n              @if (showDescriptions() && step.item.description) {\n                <p [ngClass]=\"descriptionClass(step)\">{{ step.item.description }}</p>\n              }\n            </span>\n          }\n        </button>\n      </div>\n    }\n  } @else {\n    @for (step of normalizedSteps(); track step.item.id; let last = $last) {\n      <div class=\"relative pb-6 last:pb-0\" [ngClass]=\"verticalRowPaddingClass()\" role=\"listitem\">\n        @if (showConnectors() && !last) {\n          <span\n            class=\"absolute rounded-full\"\n            [ngClass]=\"[verticalConnectorLayoutClass(), connectorClass(step)]\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n\n        <button\n          [id]=\"'stepper-item-' + step.item.id\"\n          type=\"button\"\n          class=\"group flex w-full items-start gap-3 text-left\"\n          [class.cursor-pointer]=\"isClickable(step)\"\n          [class.cursor-not-allowed]=\"!isClickable(step)\"\n          [class.opacity-70]=\"!isClickable(step)\"\n          [attr.aria-current]=\"step.index === clampedActiveIndex() ? 'step' : null\"\n          [attr.aria-disabled]=\"!isClickable(step)\"\n          [attr.tabindex]=\"step.index === clampedActiveIndex() ? 0 : -1\"\n          (click)=\"onSelect(step)\"\n          (keydown)=\"onStepKeydown($event, step)\"\n        >\n          <span [ngClass]=\"indicatorClass(step)\" aria-hidden=\"true\">\n            @if (shouldShowIcon(step)) {\n              <svg class=\"h-[65%] w-[65%]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"iconPath(step)\" />\n              </svg>\n            } @else if (shouldShowText(step)) {\n              {{ indicatorText(step) }}\n            }\n          </span>\n\n          @if (variant() !== 'dot') {\n            <span class=\"min-w-0 pt-0.5\">\n              <span [ngClass]=\"labelClass(step)\">{{ step.item.label }}</span>\n              @if (shouldShowBadge(step)) {\n                <span class=\"ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                  {{ badgeText(step) }}\n                </span>\n              }\n              @if (step.item.optional) {\n                <span class=\"ml-2 text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400\">Optional</span>\n              }\n              @if (showDescriptions() && step.item.description) {\n                <p [ngClass]=\"descriptionClass(step)\">{{ step.item.description }}</p>\n              }\n            </span>\n          }\n        </button>\n      </div>\n    }\n  }\n\n</div>\n", styles: ["@keyframes stepper-branch-shift{0%{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.stp-branch-shift{animation:stepper-branch-shift .26s cubic-bezier(.22,1,.36,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-stepper', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"[rootClasses(), branchShiftClass()]\" role=\"list\" aria-label=\"Progress steps\">\n\n  @if (orientation() === 'horizontal') {\n    @for (step of normalizedSteps(); track step.item.id; let last = $last) {\n      <div class=\"flex min-w-0 flex-1\" role=\"listitem\">\n        <button\n          [id]=\"'stepper-item-' + step.item.id\"\n          type=\"button\"\n          class=\"group flex min-w-0 flex-1 flex-col items-start gap-2 text-left\"\n          [class.cursor-pointer]=\"isClickable(step)\"\n          [class.cursor-not-allowed]=\"!isClickable(step)\"\n          [class.opacity-70]=\"!isClickable(step)\"\n          [attr.aria-current]=\"step.index === clampedActiveIndex() ? 'step' : null\"\n          [attr.aria-disabled]=\"!isClickable(step)\"\n          [attr.tabindex]=\"step.index === clampedActiveIndex() ? 0 : -1\"\n          (click)=\"onSelect(step)\"\n          (keydown)=\"onStepKeydown($event, step)\"\n        >\n          <div class=\"flex w-full items-center\">\n            <span [ngClass]=\"indicatorClass(step)\" aria-hidden=\"true\">\n              @if (shouldShowIcon(step)) {\n                <svg class=\"h-[65%] w-[65%]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path [attr.d]=\"iconPath(step)\" />\n                </svg>\n              } @else if (shouldShowText(step)) {\n                {{ indicatorText(step) }}\n              }\n            </span>\n\n            @if (showConnectors() && !last) {\n              <span\n                class=\"ml-3 flex-1 rounded-full\"\n                [ngClass]=\"[connectorClass(step), connectorSizeClass()]\"\n                aria-hidden=\"true\"\n              ></span>\n            }\n          </div>\n\n          @if (variant() !== 'dot') {\n            <span class=\"min-w-0 pt-0.5\">\n              <span [ngClass]=\"labelClass(step)\">{{ step.item.label }}</span>\n              @if (shouldShowBadge(step)) {\n                <span class=\"ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                  {{ badgeText(step) }}\n                </span>\n              }\n              @if (step.item.optional) {\n                <span class=\"ml-2 text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400\">Optional</span>\n              }\n              @if (showDescriptions() && step.item.description) {\n                <p [ngClass]=\"descriptionClass(step)\">{{ step.item.description }}</p>\n              }\n            </span>\n          }\n        </button>\n      </div>\n    }\n  } @else {\n    @for (step of normalizedSteps(); track step.item.id; let last = $last) {\n      <div class=\"relative pb-6 last:pb-0\" [ngClass]=\"verticalRowPaddingClass()\" role=\"listitem\">\n        @if (showConnectors() && !last) {\n          <span\n            class=\"absolute rounded-full\"\n            [ngClass]=\"[verticalConnectorLayoutClass(), connectorClass(step)]\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n\n        <button\n          [id]=\"'stepper-item-' + step.item.id\"\n          type=\"button\"\n          class=\"group flex w-full items-start gap-3 text-left\"\n          [class.cursor-pointer]=\"isClickable(step)\"\n          [class.cursor-not-allowed]=\"!isClickable(step)\"\n          [class.opacity-70]=\"!isClickable(step)\"\n          [attr.aria-current]=\"step.index === clampedActiveIndex() ? 'step' : null\"\n          [attr.aria-disabled]=\"!isClickable(step)\"\n          [attr.tabindex]=\"step.index === clampedActiveIndex() ? 0 : -1\"\n          (click)=\"onSelect(step)\"\n          (keydown)=\"onStepKeydown($event, step)\"\n        >\n          <span [ngClass]=\"indicatorClass(step)\" aria-hidden=\"true\">\n            @if (shouldShowIcon(step)) {\n              <svg class=\"h-[65%] w-[65%]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"iconPath(step)\" />\n              </svg>\n            } @else if (shouldShowText(step)) {\n              {{ indicatorText(step) }}\n            }\n          </span>\n\n          @if (variant() !== 'dot') {\n            <span class=\"min-w-0 pt-0.5\">\n              <span [ngClass]=\"labelClass(step)\">{{ step.item.label }}</span>\n              @if (shouldShowBadge(step)) {\n                <span class=\"ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                  {{ badgeText(step) }}\n                </span>\n              }\n              @if (step.item.optional) {\n                <span class=\"ml-2 text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400\">Optional</span>\n              }\n              @if (showDescriptions() && step.item.description) {\n                <p [ngClass]=\"descriptionClass(step)\">{{ step.item.description }}</p>\n              }\n            </span>\n          }\n        </button>\n      </div>\n    }\n  }\n\n</div>\n", styles: ["@keyframes stepper-branch-shift{0%{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.stp-branch-shift{animation:stepper-branch-shift .26s cubic-bezier(.22,1,.36,1)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], showDescriptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescriptions", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], enableHotkeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHotkeys", required: false }] }], activeBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBranch", required: false }] }, { type: i0.Output, args: ["activeBranchChange"] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], stepBlocked: [{ type: i0.Output, args: ["stepBlocked"] }], branchChange: [{ type: i0.Output, args: ["branchChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvStepperComponent };
+//# sourceMappingURL=styloviz-stepper.mjs.map

package/fesm2022/styloviz-stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-stepper.mjs","sources":["../../../../projects/stepper-free/src/lib/stepper.component.ts","../../../../projects/stepper-free/src/lib/stepper.component.html","../../../../projects/stepper-free/src/styloviz-stepper.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type StepperOrientation = 'horizontal' | 'vertical';\nexport type StepperVariant = 'default' | 'pill' | 'minimal' | 'icon' | 'dot' | 'line';\nexport type StepperSize = 'sm' | 'md' | 'lg';\nexport type StepperMode = 'standard' | 'branch';\n\nexport type StepperStepStatus =\n  | 'pending'\n  | 'current'\n  | 'complete'\n  | 'error'\n  | 'warning'\n  | 'disabled';\n\nexport interface StepperItem {\n  id: string;\n  label: string;\n  description?: string;\n  iconPath?: string;\n  optional?: boolean;\n  status?: StepperStepStatus;\n  /** Branch key to which this step belongs (advanced branch mode). */\n  branch?: string;\n  /** Selecting this step sets the active branch to the provided value. */\n  selectsBranch?: string;\n  /** Optional short badge next to the step label. */\n  badge?: string;\n}\n\nexport interface StepperChangeEvent {\n  previousIndex: number;\n  currentIndex: number;\n  step: StepperItem;\n}\n\nexport interface StepperBlockedEvent {\n  index: number;\n  step: StepperItem;\n  reason: 'disabled';\n}\n\nexport interface StepperBranchChangeEvent {\n  branch: string | null;\n  step: StepperItem;\n}\n\n\ninterface NormalizedStep {\n  index: number;\n  item: StepperItem;\n  state: StepperStepStatus;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * Stepper — multi-step progress and workflow navigation component.\n *\n * Features:\n * - 6 visual variants: default, pill, minimal, icon, dot, line\n * - Horizontal and vertical orientation\n * - Branch mode for conditional workflows (`mode=\"branch\"`, `activeBranch`)\n * - Validation states: complete, current, warning, error, disabled\n * - Two-way active index via `[(activeIndex)]`\n * - Full keyboard and screen-reader friendly semantics\n *\n * For linear (wizard-gated) sequencing, per-step guard rules, and telemetry\n * events, see the Pro Stepper (`@styloviz-pro/stepper`).\n */\n@Component({\n  selector: 'sv-stepper',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './stepper.component.html',\n  styleUrl: './stepper.component.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvStepperComponent {\n  // ── Inputs ────────────────────────────────────────────────────────────────\n\n  /** The steps to render (label, optional description, state). */\n  items = input<StepperItem[]>([]);\n\n  /** 0-based active step index. Supports two-way binding via `[(activeIndex)]`. */\n  activeIndex = model<number>(0);\n\n  /** Layout: horizontal or vertical. @default 'horizontal' */\n  orientation = input<StepperOrientation>('horizontal');\n  /** Visual variant (default, icon, dot, line, pill, minimal…). @default 'default' */\n  variant = input<StepperVariant>('default');\n  /** Step size: sm, md or lg. @default 'md' */\n  size = input<StepperSize>('md');\n  /** Navigation mode: standard sequence, or branch (conditional paths via `activeBranch`). @default 'standard' */\n  mode = input<StepperMode>('standard');\n\n\n  /** Whether users can click steps to navigate. */\n  interactive = input<boolean>(true);\n\n  /** Show step descriptions under labels. */\n  showDescriptions = input<boolean>(true);\n\n  /** Render connectors between steps. */\n  showConnectors = input<boolean>(true);\n\n  /** Enables advanced keyboard shortcuts for rapid step navigation. */\n  enableHotkeys = input<boolean>(false);\n\n\n  /** Active branch key used in `mode='branch'`. Supports two-way binding. */\n  activeBranch = model<string | null>(null);\n\n  /** Extra CSS classes for the root element. */\n  customClass = input<string>('');\n\n  // ── Outputs ───────────────────────────────────────────────────────────────\n\n  /** Emitted when the active step changes. */\n  stepChange = output<StepperChangeEvent>();\n  /** Emitted when a step is clicked. */\n  stepClick = output<{ index: number; step: StepperItem }>();\n  /** Emitted when navigation to a step is blocked (e.g. linear validation). */\n  stepBlocked = output<StepperBlockedEvent>();\n  /** Emitted when the active branch changes (branch mode). */\n  branchChange = output<StepperBranchChangeEvent>();\n\n  private readonly branchShift = signal(false);\n\n  // ── Computed ──────────────────────────────────────────────────────────────\n\n  visibleItems = computed<StepperItem[]>(() => {\n    const branch = this.activeBranch();\n    if (this.mode() !== 'branch') return this.items();\n    return this.items().filter(item => !item.branch || item.branch === branch);\n  });\n\n  normalizedSteps = computed<NormalizedStep[]>(() => {\n    const current = this.clampedActiveIndex();\n    return this.visibleItems().map((item, index) => {\n      const state = this.resolveState(item, index, current);\n      return { index, item, state };\n    });\n  });\n\n  clampedActiveIndex = computed(() => {\n    const max = this.visibleItems().length - 1;\n    if (max < 0) return 0;\n    return Math.max(0, Math.min(this.activeIndex(), max));\n  });\n\n  rootClasses = computed(() => {\n    const isVertical = this.orientation() === 'vertical';\n    const base = isVertical ? 'flex flex-col gap-0' : 'flex items-start';\n    return [base, this.customClass()].filter(Boolean).join(' ');\n  });\n\n  // ── State helpers ─────────────────────────────────────────────────────────\n\n  private resolveState(item: StepperItem, index: number, current: number): StepperStepStatus {\n    if (item.status) return item.status;\n    if (index < current) return 'complete';\n    if (index === current) return 'current';\n    return 'pending';\n  }\n\n  isClickable(step: NormalizedStep): boolean {\n    if (!this.interactive()) return false;\n    return this.blockReason(step) === null;\n  }\n\n  private blockReason(step: NormalizedStep): 'disabled' | null {\n    if (!this.interactive()) return null;\n    if (step.state === 'disabled') return 'disabled';\n\n    return null;\n  }\n\n  onSelect(step: NormalizedStep): void {\n    this.stepClick.emit({ index: step.index, step: step.item });\n\n    const reason = this.blockReason(step);\n    if (reason) {\n      this.stepBlocked.emit({ index: step.index, step: step.item, reason });\n      return;\n    }\n\n    if (step.item.selectsBranch && this.activeBranch() !== step.item.selectsBranch) {\n      this.activeBranch.set(step.item.selectsBranch);\n      this.branchChange.emit({ branch: step.item.selectsBranch, step: step.item });\n      this.triggerBranchShift();\n    }\n\n    const previous = this.clampedActiveIndex();\n    if (previous === step.index) return;\n\n    this.activeIndex.set(step.index);\n    this.stepChange.emit({ previousIndex: previous, currentIndex: step.index, step: step.item });\n  }\n\n  onStepKeydown(event: KeyboardEvent, step: NormalizedStep): void {\n    if (!this.enableHotkeys()) return;\n\n    const list = this.normalizedSteps();\n    if (!list.length) return;\n\n    const key = event.key;\n\n    if (/^[1-9]$/.test(key)) {\n      const target = Number(key) - 1;\n      if (target < list.length) {\n        event.preventDefault();\n        this.onSelect(list[target]);\n        this.focusStep(list[target].item.id);\n      }\n      return;\n    }\n\n    const isVertical = this.orientation() === 'vertical';\n    let target: NormalizedStep | undefined;\n\n    if ((isVertical && key === 'ArrowDown') || (!isVertical && key === 'ArrowRight')) {\n      target = list[Math.min(list.length - 1, step.index + 1)];\n    }\n\n    if ((isVertical && key === 'ArrowUp') || (!isVertical && key === 'ArrowLeft')) {\n      target = list[Math.max(0, step.index - 1)];\n    }\n\n    if (key === 'Home') target = list[0];\n    if (key === 'End') target = list[list.length - 1];\n\n    if (target) {\n      event.preventDefault();\n      this.onSelect(target);\n      this.focusStep(target.item.id);\n    }\n  }\n\n  // ── Class helpers ─────────────────────────────────────────────────────────\n\n  indicatorClass(step: NormalizedStep): string {\n    const size = this.indicatorSizeClass();\n    const variant = this.variant();\n\n    const base = [\n      'inline-flex shrink-0 items-center justify-center font-semibold transition-colors duration-200',\n      size,\n      this.shapeClass(variant),\n    ];\n\n    switch (step.state) {\n      case 'complete':\n        base.push('bg-accent-500 text-white dark:bg-accent-500');\n        break;\n      case 'current':\n        base.push('bg-primary-600 text-white ring-4 ring-primary-100 dark:bg-primary-500 dark:ring-primary-900/50');\n        break;\n      case 'error':\n        base.push('bg-danger-500 text-white dark:bg-danger-500');\n        break;\n      case 'warning':\n        base.push('bg-warning-500 text-white dark:bg-warning-500');\n        break;\n      case 'disabled':\n        base.push('bg-gray-200 text-gray-400 dark:bg-gray-800 dark:text-gray-500');\n        break;\n      default:\n        base.push('bg-white text-gray-500 ring-1 ring-gray-300 dark:bg-gray-900 dark:text-gray-400 dark:ring-gray-700');\n        break;\n    }\n\n    if (variant === 'minimal') {\n      base.push('ring-0');\n      if (step.state === 'current') {\n        base.push('bg-primary-500');\n      }\n    }\n\n    return base.join(' ');\n  }\n\n  connectorClass(step: NormalizedStep): string {\n    if (step.state === 'complete') return 'bg-accent-400 dark:bg-accent-500';\n    if (step.state === 'error') return 'bg-danger-300 dark:bg-danger-500/70';\n    if (step.state === 'warning') return 'bg-warning-300 dark:bg-warning-500/70';\n    return 'bg-gray-200 dark:bg-gray-700';\n  }\n\n  /** Connector thickness — `line` renders a bold, continuous progress bar; every other variant uses a thin hairline. */\n  connectorSizeClass(): string {\n    return this.variant() === 'line' ? 'h-1' : 'h-px';\n  }\n\n  verticalRowPaddingClass(): string {\n    if (this.size() === 'sm') return 'pl-11';\n    if (this.size() === 'lg') return 'pl-16';\n    return 'pl-14';\n  }\n\n  verticalConnectorLayoutClass(): string {\n    const width = this.variant() === 'line' ? 'w-1' : 'w-0.5';\n    if (this.size() === 'sm') return `left-[13px] top-7 h-[calc(100%-1rem)] ${width}`;\n    if (this.size() === 'lg') return `left-[19px] top-10 h-[calc(100%-1.35rem)] ${width}`;\n    return `left-[15px] top-8 h-[calc(100%-1.15rem)] ${width}`;\n  }\n\n  labelClass(step: NormalizedStep): string {\n    const base = [this.labelSizeClass(), 'font-medium tracking-tight'];\n\n    switch (step.state) {\n      case 'current':\n        base.push('text-gray-900 dark:text-white');\n        break;\n      case 'complete':\n        base.push('text-accent-700 dark:text-accent-400');\n        break;\n      case 'error':\n        base.push('text-danger-700 dark:text-danger-400');\n        break;\n      case 'warning':\n        base.push('text-warning-700 dark:text-warning-400');\n        break;\n      case 'disabled':\n        base.push('text-gray-500 dark:text-gray-400');\n        break;\n      default:\n        base.push('text-gray-600 dark:text-gray-300');\n        break;\n    }\n\n    return base.join(' ');\n  }\n\n  descriptionClass(step: NormalizedStep): string {\n    const base = [this.descriptionSizeClass(), 'mt-1 leading-relaxed'];\n\n    if (step.state === 'disabled') {\n      base.push('text-gray-500 dark:text-gray-400');\n    } else {\n      base.push('text-gray-500 dark:text-gray-400');\n    }\n\n    return base.join(' ');\n  }\n\n  private shapeClass(variant: StepperVariant): string {\n    switch (variant) {\n      case 'pill':\n        return 'rounded-xl px-2.5';\n      case 'dot':\n      case 'minimal':\n        return 'rounded-full';\n      default:\n        return 'rounded-full';\n    }\n  }\n\n  private indicatorSizeClass(): string {\n    const size = this.size();\n    const variant = this.variant();\n\n    if (variant === 'dot' || variant === 'minimal') {\n      return size === 'sm' ? 'h-2.5 w-2.5' : size === 'lg' ? 'h-4 w-4' : 'h-3 w-3';\n    }\n\n    if (variant === 'pill') {\n      return size === 'sm' ? 'h-7 min-w-7 text-xs' : size === 'lg' ? 'h-10 min-w-10 text-base' : 'h-8 min-w-8 text-sm';\n    }\n\n    return size === 'sm' ? 'h-7 w-7 text-xs' : size === 'lg' ? 'h-10 w-10 text-base' : 'h-8 w-8 text-sm';\n  }\n\n  private labelSizeClass(): string {\n    return this.size() === 'sm' ? 'text-xs' : this.size() === 'lg' ? 'text-base' : 'text-sm';\n  }\n\n  private descriptionSizeClass(): string {\n    return this.size() === 'sm' ? 'text-[11px]' : 'text-xs';\n  }\n\n  // ── Icon/text helpers ─────────────────────────────────────────────────────\n\n  shouldShowText(_step: NormalizedStep): boolean {\n    return !(this.variant() === 'dot' || this.variant() === 'minimal');\n  }\n\n  shouldShowIcon(step: NormalizedStep): boolean {\n    if (step.state === 'complete' || step.state === 'error' || step.state === 'warning') return true;\n    return this.variant() === 'icon' && !!step.item.iconPath;\n  }\n\n  iconPath(step: NormalizedStep): string {\n    if (step.state === 'complete') return 'M5 13l4 4L19 7';\n    if (step.state === 'error') return 'M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z';\n    if (step.state === 'warning') return 'M12 8v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z';\n    return step.item.iconPath ?? '';\n  }\n\n  indicatorText(step: NormalizedStep): string {\n    return String(step.index + 1);\n  }\n\n  shouldShowBadge(step: NormalizedStep): boolean {\n    return !!step.item.badge || !!step.item.selectsBranch;\n  }\n\n  badgeText(step: NormalizedStep): string {\n    return step.item.badge ?? step.item.selectsBranch ?? '';\n  }\n\n  branchShiftClass(): string {\n    return this.branchShift() ? 'stp-branch-shift' : '';\n  }\n\n  private triggerBranchShift(): void {\n    this.branchShift.set(false);\n    queueMicrotask(() => {\n      this.branchShift.set(true);\n      setTimeout(() => this.branchShift.set(false), 280);\n    });\n  }\n\n  private focusStep(id: string): void {\n    const el = document.getElementById(`stepper-item-${id}`);\n    el?.focus();\n  }\n}\n","<div [ngClass]=\"[rootClasses(), branchShiftClass()]\" role=\"list\" aria-label=\"Progress steps\">\n\n  @if (orientation() === 'horizontal') {\n    @for (step of normalizedSteps(); track step.item.id; let last = $last) {\n      <div class=\"flex min-w-0 flex-1\" role=\"listitem\">\n        <button\n          [id]=\"'stepper-item-' + step.item.id\"\n          type=\"button\"\n          class=\"group flex min-w-0 flex-1 flex-col items-start gap-2 text-left\"\n          [class.cursor-pointer]=\"isClickable(step)\"\n          [class.cursor-not-allowed]=\"!isClickable(step)\"\n          [class.opacity-70]=\"!isClickable(step)\"\n          [attr.aria-current]=\"step.index === clampedActiveIndex() ? 'step' : null\"\n          [attr.aria-disabled]=\"!isClickable(step)\"\n          [attr.tabindex]=\"step.index === clampedActiveIndex() ? 0 : -1\"\n          (click)=\"onSelect(step)\"\n          (keydown)=\"onStepKeydown($event, step)\"\n        >\n          <div class=\"flex w-full items-center\">\n            <span [ngClass]=\"indicatorClass(step)\" aria-hidden=\"true\">\n              @if (shouldShowIcon(step)) {\n                <svg class=\"h-[65%] w-[65%]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path [attr.d]=\"iconPath(step)\" />\n                </svg>\n              } @else if (shouldShowText(step)) {\n                {{ indicatorText(step) }}\n              }\n            </span>\n\n            @if (showConnectors() && !last) {\n              <span\n                class=\"ml-3 flex-1 rounded-full\"\n                [ngClass]=\"[connectorClass(step), connectorSizeClass()]\"\n                aria-hidden=\"true\"\n              ></span>\n            }\n          </div>\n\n          @if (variant() !== 'dot') {\n            <span class=\"min-w-0 pt-0.5\">\n              <span [ngClass]=\"labelClass(step)\">{{ step.item.label }}</span>\n              @if (shouldShowBadge(step)) {\n                <span class=\"ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                  {{ badgeText(step) }}\n                </span>\n              }\n              @if (step.item.optional) {\n                <span class=\"ml-2 text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400\">Optional</span>\n              }\n              @if (showDescriptions() && step.item.description) {\n                <p [ngClass]=\"descriptionClass(step)\">{{ step.item.description }}</p>\n              }\n            </span>\n          }\n        </button>\n      </div>\n    }\n  } @else {\n    @for (step of normalizedSteps(); track step.item.id; let last = $last) {\n      <div class=\"relative pb-6 last:pb-0\" [ngClass]=\"verticalRowPaddingClass()\" role=\"listitem\">\n        @if (showConnectors() && !last) {\n          <span\n            class=\"absolute rounded-full\"\n            [ngClass]=\"[verticalConnectorLayoutClass(), connectorClass(step)]\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n\n        <button\n          [id]=\"'stepper-item-' + step.item.id\"\n          type=\"button\"\n          class=\"group flex w-full items-start gap-3 text-left\"\n          [class.cursor-pointer]=\"isClickable(step)\"\n          [class.cursor-not-allowed]=\"!isClickable(step)\"\n          [class.opacity-70]=\"!isClickable(step)\"\n          [attr.aria-current]=\"step.index === clampedActiveIndex() ? 'step' : null\"\n          [attr.aria-disabled]=\"!isClickable(step)\"\n          [attr.tabindex]=\"step.index === clampedActiveIndex() ? 0 : -1\"\n          (click)=\"onSelect(step)\"\n          (keydown)=\"onStepKeydown($event, step)\"\n        >\n          <span [ngClass]=\"indicatorClass(step)\" aria-hidden=\"true\">\n            @if (shouldShowIcon(step)) {\n              <svg class=\"h-[65%] w-[65%]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"iconPath(step)\" />\n              </svg>\n            } @else if (shouldShowText(step)) {\n              {{ indicatorText(step) }}\n            }\n          </span>\n\n          @if (variant() !== 'dot') {\n            <span class=\"min-w-0 pt-0.5\">\n              <span [ngClass]=\"labelClass(step)\">{{ step.item.label }}</span>\n              @if (shouldShowBadge(step)) {\n                <span class=\"ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600 dark:bg-gray-800 dark:text-gray-300\">\n                  {{ badgeText(step) }}\n                </span>\n              }\n              @if (step.item.optional) {\n                <span class=\"ml-2 text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400\">Optional</span>\n              }\n              @if (showDescriptions() && step.item.description) {\n                <p [ngClass]=\"descriptionClass(step)\">{{ step.item.description }}</p>\n              }\n            </span>\n          }\n        </button>\n      </div>\n    }\n  }\n\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@styloviz/stepper",
+  "version": "0.1.1",
+  "description": "6 visual variants — default, pill, minimal, icon, dot, line — all free, plus horizontal/vertical orientation. Linear wizard mode, guard rules, and telemetry are available in the Pro package.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/stepper-free"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-stepper.mjs",
+  "typings": "types/styloviz-stepper.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-stepper.d.ts",
+      "default": "./fesm2022/styloviz-stepper.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-stepper.d.ts

@@ -0,0 +1,127 @@
+import * as _angular_core from '@angular/core';
+
+type StepperOrientation = 'horizontal' | 'vertical';
+type StepperVariant = 'default' | 'pill' | 'minimal' | 'icon' | 'dot' | 'line';
+type StepperSize = 'sm' | 'md' | 'lg';
+type StepperMode = 'standard' | 'branch';
+type StepperStepStatus = 'pending' | 'current' | 'complete' | 'error' | 'warning' | 'disabled';
+interface StepperItem {
+    id: string;
+    label: string;
+    description?: string;
+    iconPath?: string;
+    optional?: boolean;
+    status?: StepperStepStatus;
+    /** Branch key to which this step belongs (advanced branch mode). */
+    branch?: string;
+    /** Selecting this step sets the active branch to the provided value. */
+    selectsBranch?: string;
+    /** Optional short badge next to the step label. */
+    badge?: string;
+}
+interface StepperChangeEvent {
+    previousIndex: number;
+    currentIndex: number;
+    step: StepperItem;
+}
+interface StepperBlockedEvent {
+    index: number;
+    step: StepperItem;
+    reason: 'disabled';
+}
+interface StepperBranchChangeEvent {
+    branch: string | null;
+    step: StepperItem;
+}
+interface NormalizedStep {
+    index: number;
+    item: StepperItem;
+    state: StepperStepStatus;
+}
+/**
+ * Stepper — multi-step progress and workflow navigation component.
+ *
+ * Features:
+ * - 6 visual variants: default, pill, minimal, icon, dot, line
+ * - Horizontal and vertical orientation
+ * - Branch mode for conditional workflows (`mode="branch"`, `activeBranch`)
+ * - Validation states: complete, current, warning, error, disabled
+ * - Two-way active index via `[(activeIndex)]`
+ * - Full keyboard and screen-reader friendly semantics
+ *
+ * For linear (wizard-gated) sequencing, per-step guard rules, and telemetry
+ * events, see the Pro Stepper (`@styloviz-pro/stepper`).
+ */
+declare class SvStepperComponent {
+    /** The steps to render (label, optional description, state). */
+    items: _angular_core.InputSignal<StepperItem[]>;
+    /** 0-based active step index. Supports two-way binding via `[(activeIndex)]`. */
+    activeIndex: _angular_core.ModelSignal<number>;
+    /** Layout: horizontal or vertical. @default 'horizontal' */
+    orientation: _angular_core.InputSignal<StepperOrientation>;
+    /** Visual variant (default, icon, dot, line, pill, minimal…). @default 'default' */
+    variant: _angular_core.InputSignal<StepperVariant>;
+    /** Step size: sm, md or lg. @default 'md' */
+    size: _angular_core.InputSignal<StepperSize>;
+    /** Navigation mode: standard sequence, or branch (conditional paths via `activeBranch`). @default 'standard' */
+    mode: _angular_core.InputSignal<StepperMode>;
+    /** Whether users can click steps to navigate. */
+    interactive: _angular_core.InputSignal<boolean>;
+    /** Show step descriptions under labels. */
+    showDescriptions: _angular_core.InputSignal<boolean>;
+    /** Render connectors between steps. */
+    showConnectors: _angular_core.InputSignal<boolean>;
+    /** Enables advanced keyboard shortcuts for rapid step navigation. */
+    enableHotkeys: _angular_core.InputSignal<boolean>;
+    /** Active branch key used in `mode='branch'`. Supports two-way binding. */
+    activeBranch: _angular_core.ModelSignal<string | null>;
+    /** Extra CSS classes for the root element. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Emitted when the active step changes. */
+    stepChange: _angular_core.OutputEmitterRef<StepperChangeEvent>;
+    /** Emitted when a step is clicked. */
+    stepClick: _angular_core.OutputEmitterRef<{
+        index: number;
+        step: StepperItem;
+    }>;
+    /** Emitted when navigation to a step is blocked (e.g. linear validation). */
+    stepBlocked: _angular_core.OutputEmitterRef<StepperBlockedEvent>;
+    /** Emitted when the active branch changes (branch mode). */
+    branchChange: _angular_core.OutputEmitterRef<StepperBranchChangeEvent>;
+    private readonly branchShift;
+    visibleItems: _angular_core.Signal<StepperItem[]>;
+    normalizedSteps: _angular_core.Signal<NormalizedStep[]>;
+    clampedActiveIndex: _angular_core.Signal<number>;
+    rootClasses: _angular_core.Signal<string>;
+    private resolveState;
+    isClickable(step: NormalizedStep): boolean;
+    private blockReason;
+    onSelect(step: NormalizedStep): void;
+    onStepKeydown(event: KeyboardEvent, step: NormalizedStep): void;
+    indicatorClass(step: NormalizedStep): string;
+    connectorClass(step: NormalizedStep): string;
+    /** Connector thickness — `line` renders a bold, continuous progress bar; every other variant uses a thin hairline. */
+    connectorSizeClass(): string;
+    verticalRowPaddingClass(): string;
+    verticalConnectorLayoutClass(): string;
+    labelClass(step: NormalizedStep): string;
+    descriptionClass(step: NormalizedStep): string;
+    private shapeClass;
+    private indicatorSizeClass;
+    private labelSizeClass;
+    private descriptionSizeClass;
+    shouldShowText(_step: NormalizedStep): boolean;
+    shouldShowIcon(step: NormalizedStep): boolean;
+    iconPath(step: NormalizedStep): string;
+    indicatorText(step: NormalizedStep): string;
+    shouldShowBadge(step: NormalizedStep): boolean;
+    badgeText(step: NormalizedStep): string;
+    branchShiftClass(): string;
+    private triggerBranchShift;
+    private focusStep;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvStepperComponent, "sv-stepper", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "showDescriptions": { "alias": "showDescriptions"; "required": false; "isSignal": true; }; "showConnectors": { "alias": "showConnectors"; "required": false; "isSignal": true; }; "enableHotkeys": { "alias": "enableHotkeys"; "required": false; "isSignal": true; }; "activeBranch": { "alias": "activeBranch"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; "activeBranch": "activeBranchChange"; "stepChange": "stepChange"; "stepClick": "stepClick"; "stepBlocked": "stepBlocked"; "branchChange": "branchChange"; }, never, never, true, never>;
+}
+
+export { SvStepperComponent };
+export type { StepperBlockedEvent, StepperBranchChangeEvent, StepperChangeEvent, StepperItem, StepperMode, StepperOrientation, StepperSize, StepperStepStatus, StepperVariant };