@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-stat.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-stat.mjs","sources":["../../../projects/ngx-tw/stat/stat.ts","../../../projects/ngx-tw/stat/cdevhub-ngx-tw-stat.ts"],"sourcesContent":["import {\n  afterRenderEffect,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  Directive,\n  type ElementRef,\n  inject,\n  input,\n  Injector,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { tv } from 'tailwind-variants';\nimport type { TwSize } from '@cdevhub/ngx-tw/core';\nimport { SkeletonComponent } from '@cdevhub/ngx-tw/skeleton';\n\n/** Surface treatment for the stat tile. */\nexport type StatVariant = 'plain' | 'outlined' | 'elevated' | 'filled';\n\n/** Direction of trend conveyed by the delta indicator. */\nexport type StatDeltaDirection = 'up' | 'down' | 'neutral';\n\n/** Display style of the trend delta. */\nexport type StatDeltaVariant = 'badge' | 'inline' | 'icon-only';\n\n// ── Slot marker directives (DOM projection) ───────────────────────────\n\n/** Label slot — short caption (\"Revenue\", \"Active users\"). Projected into `<dt>`. */\n@Directive({ selector: '[twStatLabel]' })\nexport class StatLabelDirective {}\n\n/** Value slot — the dominant numeric/text element. Projected into `<dd>`. */\n@Directive({ selector: '[twStatValue]' })\nexport class StatValueDirective {}\n\n/** Description slot — optional secondary text under the value. Projected into a second `<dd>`. */\n@Directive({ selector: '[twStatDescription]' })\nexport class StatDescriptionDirective {}\n\n/** Icon slot — optional leading icon. Triggers the icon-leading layout. */\n@Directive({ selector: '[twStatIcon]' })\nexport class StatIconDirective {}\n\n/** Footer slot — optional auxiliary region (sparklines, tags, metadata). Always renders, even during loading. */\n@Directive({ selector: '[twStatFooter]' })\nexport class StatFooterDirective {}\n\n// ── Stat tile tv() config ─────────────────────────────────────────────\n\nconst statTile = tv(\n  {\n    slots: {\n      root: 'block text-fg',\n      iconFlex: 'flex items-start gap-3',\n      iconWrapper: 'shrink-0 text-fg-muted',\n      contentStack: 'min-w-0 flex-1',\n      dl: 'flex flex-col',\n      label: 'text-fg-muted font-medium',\n      valueRow: 'flex items-baseline gap-2 flex-wrap',\n      value: 'text-fg block tabular-nums font-semibold',\n      description: 'text-fg-muted',\n      delta: 'inline-flex items-center',\n      footer: 'mt-3 pt-3 border-t border-border',\n    },\n    variants: {\n      variant: {\n        plain: { root: 'bg-transparent' },\n        outlined: { root: 'bg-surface border border-border rounded-lg' },\n        elevated: {\n          root: 'bg-surface-raised border border-border rounded-lg shadow hover:shadow-md transition-shadow duration-200 motion-reduce:transition-none',\n        },\n        filled: { root: 'bg-surface-muted rounded-lg' },\n      },\n      size: {\n        xs: {\n          root: 'p-2',\n          dl: 'gap-1',\n          label: 'text-2xs',\n          value: 'text-xs',\n          description: 'text-2xs',\n          delta: 'mt-1',\n        },\n        sm: {\n          root: 'p-3',\n          dl: 'gap-1',\n          label: 'text-xs',\n          value: 'text-sm',\n          description: 'text-xs',\n          delta: 'mt-1',\n        },\n        md: {\n          root: 'p-4',\n          dl: 'gap-1.5',\n          label: 'text-xs',\n          value: 'text-base',\n          description: 'text-xs',\n          delta: 'mt-1',\n        },\n        // lg/xl `value` uses `text-base` per the KPI-value carve-out\n        // (CLAUDE.md typography). The dominant numeric needs to outrank the\n        // `text-sm` label/description in visual hierarchy.\n        lg: {\n          root: 'p-6',\n          dl: 'gap-2',\n          label: 'text-sm',\n          value: 'text-base font-bold',\n          description: 'text-sm',\n          delta: 'mt-2',\n        },\n        xl: {\n          root: 'p-8',\n          dl: 'gap-2',\n          label: 'text-sm',\n          value: 'text-base font-extrabold',\n          description: 'text-sm',\n          delta: 'mt-2',\n        },\n      },\n    },\n    defaultVariants: {\n      variant: 'outlined',\n      size: 'md',\n    },\n  },\n  { twMerge: true },\n);\n\n// ── Delta tv() config ─────────────────────────────────────────────────\n\nconst statDelta = tv(\n  {\n    slots: {\n      root: 'relative inline-flex items-center gap-1 font-medium tabular-nums',\n      icon: 'shrink-0',\n      text: 'inline-flex items-center',\n      comparison: 'text-fg-muted',\n    },\n    variants: {\n      variant: {\n        badge: {\n          root: 'px-2 py-0.5 rounded-md text-xs',\n        },\n        inline: {\n          root: 'text-xs',\n        },\n        'icon-only': {\n          // size-6 (24px) — square interactive-target scale at xs density per\n          // CLAUDE.md icon sub-scale; here it just centres the chevron.\n          root: 'justify-center size-6 rounded-md',\n          // Text and comparison stay in the DOM so the composed aria-label\n          // still picks them up; `sr-only` removes them visually.\n          text: 'sr-only',\n          comparison: 'sr-only',\n        },\n      },\n      effectiveColor: {\n        success: {},\n        error: {},\n        neutral: {},\n      },\n    },\n    compoundVariants: [\n      // ===== badge (soft chip) =====\n      {\n        variant: 'badge',\n        effectiveColor: 'success',\n        class: { root: 'bg-success-soft text-success-soft-fg' },\n      },\n      {\n        variant: 'badge',\n        effectiveColor: 'error',\n        class: { root: 'bg-error-soft text-error-soft-fg' },\n      },\n      // Neutral pinned explicitly to surface/fg tokens (advisor: never use\n      // `text-neutral-700` or template through neutral via -soft-fg chain).\n      {\n        variant: 'badge',\n        effectiveColor: 'neutral',\n        class: { root: 'bg-surface-muted text-fg-muted' },\n      },\n\n      // ===== inline (no chip) =====\n      {\n        variant: 'inline',\n        effectiveColor: 'success',\n        class: { root: 'text-success-700' },\n      },\n      {\n        variant: 'inline',\n        effectiveColor: 'error',\n        class: { root: 'text-error-700' },\n      },\n      {\n        variant: 'inline',\n        effectiveColor: 'neutral',\n        class: { root: 'text-fg-muted' },\n      },\n\n      // ===== icon-only =====\n      {\n        variant: 'icon-only',\n        effectiveColor: 'success',\n        class: { root: 'bg-success-soft text-success-soft-fg' },\n      },\n      {\n        variant: 'icon-only',\n        effectiveColor: 'error',\n        class: { root: 'bg-error-soft text-error-soft-fg' },\n      },\n      {\n        variant: 'icon-only',\n        effectiveColor: 'neutral',\n        class: { root: 'bg-surface-muted text-fg-muted' },\n      },\n    ],\n    defaultVariants: {\n      variant: 'badge',\n      effectiveColor: 'neutral',\n    },\n  },\n  { twMerge: true },\n);\n\n// ── Stat delta component ──────────────────────────────────────────────\n\n/**\n * Compact trend indicator — direction + projected delta text + optional\n * comparison label. Usable standalone or projected into a `<tw-stat>` tile.\n *\n * Sentiment is conveyed by both icon direction and color; consumers running\n * \"lower is better\" metrics (bounce rate, latency, churn) set `inverted` to\n * swap the success/error color mapping without changing the literal direction\n * or the announced verb.\n */\n@Component({\n  selector: 'tw-stat-delta',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    role: 'img',\n    '[class]': 'rootClasses()',\n    '[attr.aria-label]': 'composedAriaLabel()',\n  },\n  template: `\n    <svg\n      [class]=\"iconClasses() + ' ' + iconSizeClass()\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (direction()) {\n        @case ('up') { <path d=\"M4 10l4-4 4 4\" /> }\n        @case ('down') { <path d=\"M4 6l4 4 4-4\" /> }\n        @default { <path d=\"M3 8h10\" /> }\n      }\n    </svg>\n    <span #textEl [class]=\"textClasses()\"><ng-content /></span>\n    @if (comparisonLabel(); as comp) {\n      <span [class]=\"comparisonClasses()\">{{ comp }}</span>\n    }\n  `,\n})\nexport class StatDeltaComponent {\n  /** Direction of change. `'up'` renders an up-chevron and (by default) the `success` color; `'down'` renders a down-chevron and the `error` color; `'neutral'` renders a horizontal-line glyph and the neutral color. Defaults to `'neutral'`. */\n  readonly direction = input<StatDeltaDirection>('neutral');\n\n  /** When true, swaps success/error semantics so `down` reads as success and `up` reads as error — use for metrics where lower is better (bounce rate, error rate, latency, churn). `neutral` direction is unaffected. Defaults to `false`. */\n  readonly inverted = input(false, { transform: booleanAttribute });\n\n  /** Display style. `'badge'` (default) wraps the delta in a pill chip; `'inline'` is icon + text only with no chip; `'icon-only'` shows just the chevron for ultra-dense layouts. */\n  readonly variant = input<StatDeltaVariant>('badge');\n\n  /** Optional comparison label rendered next to the delta value (e.g. `\"vs last week\"`, `\"since launch\"`). Defaults to `undefined`. */\n  readonly comparisonLabel = input<string>();\n\n  /** Explicit accessible label. When omitted, the component composes one from `direction` + projected text + `comparisonLabel`. Override when projected content is purely symbolic or already localized. Defaults to `undefined`. */\n  readonly ariaLabel = input<string>();\n\n  /** @internal */\n  protected readonly textEl = viewChild<ElementRef<HTMLElement>>('textEl');\n\n  /** @internal */\n  protected readonly projectedText = signal('');\n\n  constructor() {\n    const injector = inject(Injector);\n    // Read the projected text via the wrapper span's textContent. textContent\n    // is recursive across projected children, so this resolves the consumer's\n    // string even when wrapped in arbitrary markup. afterRenderEffect runs\n    // after each render so projection changes are captured.\n    afterRenderEffect(\n      () => {\n        const el = this.textEl()?.nativeElement;\n        if (!el) {\n          this.projectedText.set('');\n          return;\n        }\n        const text = (el.textContent ?? '').trim();\n        this.projectedText.set(text);\n      },\n      { injector },\n    );\n  }\n\n  /** @internal */\n  protected readonly effectiveColor = computed<'success' | 'error' | 'neutral'>(() => {\n    const dir = this.direction();\n    if (dir === 'neutral') return 'neutral';\n    const inv = this.inverted();\n    if (dir === 'up') return inv ? 'error' : 'success';\n    return inv ? 'success' : 'error';\n  });\n\n  /** @internal */\n  protected readonly iconSizeClass = computed(() => {\n    // Glyph sub-scale: size-3 (12px) at the badge/inline xs/sm density,\n    // size-4 (16px) at md+. The delta lives inside text-xs, so size-3 holds.\n    // Larger contexts (md / lg / xl on the parent tile) get size-4.\n    return this.variant() === 'icon-only' ? 'size-4' : 'size-3';\n  });\n\n  /** @internal */\n  protected readonly composedAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const dir = this.direction();\n    const verb = dir === 'up' ? 'increased' : dir === 'down' ? 'decreased' : 'unchanged';\n    const text = this.projectedText();\n    const comp = this.comparisonLabel();\n    const parts: string[] = [];\n    if (text) {\n      parts.push(`${verb} by ${text}`);\n    } else {\n      parts.push(verb);\n    }\n    if (comp) parts.push(comp);\n    return parts.join(' ');\n  });\n\n  private readonly variantResult = computed(() =>\n    statDelta({ variant: this.variant(), effectiveColor: this.effectiveColor() }),\n  );\n\n  protected readonly rootClasses = computed(() => this.variantResult().root());\n  protected readonly iconClasses = computed(() => this.variantResult().icon());\n  protected readonly textClasses = computed(() => this.variantResult().text());\n  protected readonly comparisonClasses = computed(() => this.variantResult().comparison());\n}\n\n// ── Stat tile component ───────────────────────────────────────────────\n\n/**\n * KPI tile — a compact display tile surfacing a single key performance\n * indicator with an optional trend delta. Composes a `<dl>` / `<dt>` / `<dd>`\n * definition list internally so the label-to-value pairing is announced\n * naturally by assistive technology.\n *\n * Slots:\n * - `[twStatLabel]` — caption (rendered as `<dt>`).\n * - `[twStatValue]` — dominant value (rendered as `<dd>`).\n * - `[twStatDescription]` — optional secondary text (second `<dd>`).\n * - `[twStatIcon]` — optional leading icon (switches to icon-leading layout).\n * - `[twStatFooter]` — optional auxiliary region (sparklines, tags).\n * - `<tw-stat-delta>` — projected trend indicator alongside the value.\n *\n * Loading state replaces label/value/delta with `<tw-skeleton>` placeholders\n * sized to match the density. Footer always renders during loading so\n * consumers can compose their own skeleton charts.\n */\n@Component({\n  selector: 'tw-stat',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkeletonComponent, NgTemplateOutlet],\n  host: {\n    '[class]': 'rootClasses()',\n    // Permanent live region — `aria-busy` toggle alone signals state change\n    // so assistive tech announces the resolved content on loading→loaded\n    // without the live region being torn down mid-transition.\n    'aria-live': 'polite',\n    '[attr.aria-busy]': 'loading() ? \"true\" : null',\n  },\n  template: `\n    @if (iconLeading()) {\n      <div [class]=\"iconFlexClasses()\">\n        <div [class]=\"iconWrapperClasses()\">\n          <ng-content select=\"[twStatIcon]\" />\n        </div>\n        <div [class]=\"contentStackClasses()\">\n          <ng-container [ngTemplateOutlet]=\"dlBlock\" />\n        </div>\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"dlBlock\" />\n    }\n\n    @if (hasFooter()) {\n      <div [class]=\"footerClasses()\">\n        <ng-content select=\"[twStatFooter]\" />\n      </div>\n    }\n\n    <ng-template #dlBlock>\n      <dl [class]=\"dlClasses()\">\n        @if (loading()) {\n          <dt [class]=\"labelClasses()\">\n            <tw-skeleton width=\"40%\" height=\"0.75rem\" />\n          </dt>\n        } @else if (hasLabel()) {\n          <dt [class]=\"labelClasses()\">\n            <ng-content select=\"[twStatLabel]\" />\n          </dt>\n        }\n\n        <dd [class]=\"valueRowClasses()\">\n          @if (loading()) {\n            <tw-skeleton [width]=\"loadingValueWidth()\" [height]=\"loadingValueHeight()\" />\n          } @else if (hasValue()) {\n            <span [class]=\"valueClasses()\">\n              <ng-content select=\"[twStatValue]\" />\n            </span>\n          }\n\n          @if (loading()) {\n            <span [class]=\"deltaClasses()\">\n              <tw-skeleton width=\"3rem\" height=\"1.25rem\" />\n            </span>\n          } @else if (hasDelta()) {\n            <span [class]=\"deltaClasses()\">\n              <ng-content select=\"tw-stat-delta\" />\n            </span>\n          }\n        </dd>\n\n        @if (!loading() && hasDescription()) {\n          <dd [class]=\"descriptionClasses()\">\n            <ng-content select=\"[twStatDescription]\" />\n          </dd>\n        }\n      </dl>\n    </ng-template>\n  `,\n})\nexport class StatComponent {\n  /** Surface treatment. `'plain'` removes border and background; `'outlined'` (default) adds a border on the surface token; `'elevated'` adds shadow and uses the raised surface; `'filled'` uses the muted surface with no border. */\n  readonly variant = input<StatVariant>('outlined');\n\n  /** Density scale — drives padding, internal gaps, value/label typography, and the skeleton placeholder dimensions. Defaults to `'md'`. */\n  readonly size = input<TwSize>('md');\n\n  /** When true, replaces label, value, and delta regions with `<tw-skeleton>` placeholders and toggles `aria-busy=\"true\"` on the host. Projected footer content still renders. Defaults to `false`. */\n  readonly loading = input(false, { transform: booleanAttribute });\n\n  /** @internal */\n  protected readonly labelSlot = contentChild(StatLabelDirective);\n  /** @internal */\n  protected readonly valueSlot = contentChild(StatValueDirective);\n  /** @internal */\n  protected readonly descriptionSlot = contentChild(StatDescriptionDirective);\n  /** @internal */\n  protected readonly iconSlot = contentChild(StatIconDirective);\n  /** @internal */\n  protected readonly footerSlot = contentChild(StatFooterDirective);\n  /** @internal */\n  protected readonly deltaSlot = contentChild(StatDeltaComponent);\n\n  protected readonly hasLabel = computed(() => !!this.labelSlot());\n  protected readonly hasValue = computed(() => !!this.valueSlot());\n  protected readonly hasDescription = computed(() => !!this.descriptionSlot());\n  protected readonly hasIcon = computed(() => !!this.iconSlot());\n  protected readonly hasFooter = computed(() => !!this.footerSlot());\n  protected readonly hasDelta = computed(() => !!this.deltaSlot());\n\n  protected readonly iconLeading = computed(() => this.hasIcon());\n\n  /** Skeleton width during loading state — scales with the size axis. */\n  protected readonly loadingValueWidth = computed(() => {\n    switch (this.size()) {\n      case 'xs': return '4rem';\n      case 'sm': return '5rem';\n      case 'md': return '6rem';\n      case 'lg': return '8rem';\n      case 'xl': return '10rem';\n    }\n  });\n\n  /** Skeleton height during loading state — matches the value font size. */\n  protected readonly loadingValueHeight = computed(() => {\n    switch (this.size()) {\n      case 'xs': return '0.75rem';\n      case 'sm': return '0.875rem';\n      case 'md': return '1rem';\n      case 'lg': return '1rem';\n      case 'xl': return '1rem';\n    }\n  });\n\n  private readonly variantResult = computed(() =>\n    statTile({ variant: this.variant(), size: this.size() }),\n  );\n\n  protected readonly rootClasses = computed(() => this.variantResult().root());\n  protected readonly iconFlexClasses = computed(() => this.variantResult().iconFlex());\n  protected readonly iconWrapperClasses = computed(() => this.variantResult().iconWrapper());\n  protected readonly contentStackClasses = computed(() => this.variantResult().contentStack());\n  protected readonly dlClasses = computed(() => this.variantResult().dl());\n  protected readonly labelClasses = computed(() => this.variantResult().label());\n  protected readonly valueRowClasses = computed(() => this.variantResult().valueRow());\n  protected readonly valueClasses = computed(() => this.variantResult().value());\n  protected readonly descriptionClasses = computed(() => this.variantResult().description());\n  protected readonly deltaClasses = computed(() => this.variantResult().delta());\n  protected readonly footerClasses = computed(() => this.variantResult().footer());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/cdevhub-ngx-tw-stepper.mjs

@@ -0,0 +1,443 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, contentChildren, ChangeDetectionStrategy, Component, DestroyRef, signal, computed } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgTemplateOutlet } from '@angular/common';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import * as i1 from '@angular/cdk/stepper';
+import { CdkStepLabel, CdkStep, CdkStepper, STEPPER_GLOBAL_OPTIONS, STEP_STATE, CdkStepHeader, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
+export { STEPPER_GLOBAL_OPTIONS, STEP_STATE, StepperSelectionEvent } from '@angular/cdk/stepper';
+import { tv } from 'tailwind-variants';
+
+// ── tv() config ──
+const stepperVariants = tv({
+    slots: {
+        root: 'flex',
+        header: 'flex',
+        stepItem: 'flex',
+        stepHeader: 'group relative inline-flex items-center gap-2 cursor-pointer transition-colors duration-normal motion-reduce:transition-none rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:cursor-not-allowed',
+        stepIndicator: 'inline-flex items-center justify-center shrink-0 rounded-full font-medium transition-[color,background-color,border-color,box-shadow] duration-normal motion-reduce:transition-none',
+        stepNumber: 'leading-none',
+        stepIconSlot: 'inline-flex items-center justify-center',
+        stepLabelWrapper: 'flex flex-col min-w-0 text-left',
+        stepLabel: 'leading-tight',
+        stepDescription: 'text-xs text-fg-muted leading-tight mt-0.5',
+        stepOptionalHint: 'text-xs text-fg-subtle ml-1 font-normal',
+        stepConnector: 'shrink-0 transition-colors duration-normal motion-reduce:transition-none',
+        stepPanel: 'min-w-0',
+    },
+    variants: {
+        variant: {
+            default: {},
+            dot: {
+                stepNumber: 'hidden',
+                stepIconSlot: 'hidden',
+            },
+            simple: {
+                stepLabelWrapper: 'sr-only',
+            },
+        },
+        size: {
+            xs: {
+                stepIndicator: 'size-6 text-xs',
+                stepLabel: 'text-xs',
+            },
+            sm: {
+                stepIndicator: 'size-7 text-xs',
+                stepLabel: 'text-sm',
+            },
+            md: {
+                stepIndicator: 'size-8 text-sm',
+                stepLabel: 'text-sm',
+            },
+            // lg/xl step labels use `text-base` per the trigger font-size scale
+            // (CLAUDE.md typography). Steps are interactive trigger elements.
+            lg: {
+                stepIndicator: 'size-10 text-base',
+                stepLabel: 'text-base',
+            },
+            xl: {
+                stepIndicator: 'size-12 text-base',
+                stepLabel: 'text-base',
+            },
+        },
+        orientation: {
+            horizontal: {
+                root: 'flex-col w-full',
+                header: 'flex-row items-center w-full',
+                stepItem: 'flex-row items-center flex-1 last:flex-none',
+                stepConnector: 'flex-1 h-px mx-2',
+                stepLabelWrapper: 'ml-2',
+                stepPanel: 'mt-4 rounded-lg outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 motion-reduce:transition-none',
+            },
+            vertical: {
+                root: 'flex-col',
+                header: 'flex-col items-stretch',
+                stepItem: 'flex-col items-start w-full',
+                stepConnector: 'w-px min-h-6 ml-4 my-1 flex-1',
+                stepLabelWrapper: 'ml-3',
+                stepPanel: 'ml-11 mt-2 mb-4 rounded-lg outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 motion-reduce:transition-none',
+            },
+        },
+    },
+    compoundVariants: [
+        // Dot variant indicator sizing
+        { variant: 'dot', size: 'xs', class: { stepIndicator: 'size-2' } },
+        { variant: 'dot', size: 'sm', class: { stepIndicator: 'size-2.5' } },
+        { variant: 'dot', size: 'md', class: { stepIndicator: 'size-2.5' } },
+        { variant: 'dot', size: 'lg', class: { stepIndicator: 'size-3' } },
+        { variant: 'dot', size: 'xl', class: { stepIndicator: 'size-3' } },
+        // Thicker connectors for lg / xl
+        {
+            orientation: 'horizontal',
+            size: 'lg',
+            class: { stepConnector: 'h-0.5' },
+        },
+        {
+            orientation: 'horizontal',
+            size: 'xl',
+            class: { stepConnector: 'h-0.5' },
+        },
+        { orientation: 'vertical', size: 'lg', class: { stepConnector: 'w-0.5' } },
+        { orientation: 'vertical', size: 'xl', class: { stepConnector: 'w-0.5' } },
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+        orientation: 'horizontal',
+    },
+}, { twMerge: true });
+const INDICATOR_PENDING = 'bg-surface-muted text-fg-muted border border-border';
+const INDICATOR_DISABLED = 'bg-surface-muted text-fg-subtle border border-border opacity-60';
+const INDICATOR_ERROR = 'bg-error-solid text-error-solid-fg border border-error-border-strong';
+// Slot tokens own light/dark contrast — no `dark:`, no shade picks.
+// The active-state ring uses `{role}-soft` (low-chroma in light, deep-tinted in
+// dark) so the halo reads consistently against the surface in both modes.
+const INDICATOR_ACTIVE = {
+    primary: 'bg-primary-solid text-primary-solid-fg border border-primary-border-strong ring-4 ring-primary-soft',
+    secondary: 'bg-secondary-solid text-secondary-solid-fg border border-secondary-border-strong ring-4 ring-secondary-soft',
+    accent: 'bg-accent-solid text-accent-solid-fg border border-accent-border-strong ring-4 ring-accent-soft',
+    neutral: 'bg-neutral-solid text-neutral-solid-fg border border-neutral-border-strong ring-4 ring-neutral-soft',
+    info: 'bg-info-solid text-info-solid-fg border border-info-border-strong ring-4 ring-info-soft',
+    success: 'bg-success-solid text-success-solid-fg border border-success-border-strong ring-4 ring-success-soft',
+    warning: 'bg-warning-solid text-warning-solid-fg border border-warning-border-strong ring-4 ring-warning-soft',
+    error: 'bg-error-solid text-error-solid-fg border border-error-border-strong ring-4 ring-error-soft',
+};
+const INDICATOR_COMPLETED = {
+    primary: 'bg-primary-solid text-primary-solid-fg border border-primary-border-strong',
+    secondary: 'bg-secondary-solid text-secondary-solid-fg border border-secondary-border-strong',
+    accent: 'bg-accent-solid text-accent-solid-fg border border-accent-border-strong',
+    neutral: 'bg-neutral-solid text-neutral-solid-fg border border-neutral-border-strong',
+    info: 'bg-info-solid text-info-solid-fg border border-info-border-strong',
+    success: 'bg-success-solid text-success-solid-fg border border-success-border-strong',
+    warning: 'bg-warning-solid text-warning-solid-fg border border-warning-border-strong',
+    error: 'bg-error-solid text-error-solid-fg border border-error-border-strong',
+};
+const LABEL_PENDING = 'text-fg-muted';
+const LABEL_COMPLETED = 'text-fg';
+const LABEL_DISABLED = 'text-fg-subtle';
+const LABEL_ERROR = 'text-error-fg font-semibold';
+const LABEL_ACTIVE = {
+    primary: 'text-primary-fg font-semibold',
+    secondary: 'text-secondary-fg font-semibold',
+    accent: 'text-accent-fg font-semibold',
+    neutral: 'text-fg font-semibold',
+    info: 'text-info-fg font-semibold',
+    success: 'text-success-fg font-semibold',
+    warning: 'text-warning-fg font-semibold',
+    error: 'text-error-fg font-semibold',
+};
+const CONNECTOR_DEFAULT = 'bg-border';
+const CONNECTOR_ERROR = 'bg-error-border-strong';
+const CONNECTOR_REACHED = {
+    primary: 'bg-primary-border-strong',
+    secondary: 'bg-secondary-border-strong',
+    accent: 'bg-accent-border-strong',
+    neutral: 'bg-neutral-border-strong',
+    info: 'bg-info-border-strong',
+    success: 'bg-success-border-strong',
+    warning: 'bg-warning-border-strong',
+    error: 'bg-error-border-strong',
+};
+function resolveIndicatorClasses(state, color) {
+    switch (state) {
+        case 'pending':
+            return INDICATOR_PENDING;
+        case 'disabled':
+            return INDICATOR_DISABLED;
+        case 'error':
+            return INDICATOR_ERROR;
+        case 'active':
+            return INDICATOR_ACTIVE[color];
+        case 'completed':
+            return INDICATOR_COMPLETED[color];
+    }
+}
+function resolveLabelClasses(state, color) {
+    switch (state) {
+        case 'pending':
+            return LABEL_PENDING;
+        case 'completed':
+            return LABEL_COMPLETED;
+        case 'disabled':
+            return LABEL_DISABLED;
+        case 'error':
+            return LABEL_ERROR;
+        case 'active':
+            return LABEL_ACTIVE[color];
+    }
+}
+function resolveConnectorClasses(state, color) {
+    if (state === 'error')
+        return CONNECTOR_ERROR;
+    if (state === 'completed' || state === 'active')
+        return CONNECTOR_REACHED[color];
+    return CONNECTOR_DEFAULT;
+}
+// ── StepperIconDirective ──
+/**
+ * Structural-style directive on an `<ng-template>` that replaces the default
+ * indicator icon for a given step state.
+ */
+class StepperIconDirective {
+    /** Step state this template overrides. Matches CDK's `StepState` values (`'number' | 'edit' | 'done' | 'error'`). */
+    state = input(undefined, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: StepperIconDirective, isStandalone: true, selector: "ng-template[twStepperIcon]", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[twStepperIcon]',
+                }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+// ── StepLabelDirective ──
+/**
+ * Structural-style directive on an `<ng-template>` used as a custom step header
+ * label. Consumers write `<ng-template twStepLabel>…</ng-template>` inside `<tw-step>`.
+ */
+class StepLabelDirective extends CdkStepLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: StepLabelDirective, isStandalone: true, selector: "ng-template[twStepLabel]", providers: [{ provide: CdkStepLabel, useExisting: StepLabelDirective }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[twStepLabel]',
+                    providers: [{ provide: CdkStepLabel, useExisting: StepLabelDirective }],
+                }]
+        }] });
+// ── StepComponent ──
+class StepComponent extends CdkStep {
+    /** Optional descriptive text shown under the step label in the `'default'` variant. */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** @internal Custom indicator icon templates (one per state) projected into this step. */
+    iconTemplates = contentChildren(StepperIconDirective, ...(ngDevMode ? [{ debugName: "iconTemplates" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: StepComponent, isStandalone: true, selector: "tw-step", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStep, useExisting: StepComponent }], queries: [{ propertyName: "iconTemplates", predicate: StepperIconDirective, isSignal: true }], exportAs: ["twStep"], usesInheritance: true, ngImport: i0, template: '<ng-template><ng-content/></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-step',
+                    template: '<ng-template><ng-content/></ng-template>',
+                    exportAs: 'twStep',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: CdkStep, useExisting: StepComponent }],
+                }]
+        }], propDecorators: { description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], iconTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StepperIconDirective), { isSignal: true }] }] } });
+// ── StepperComponent ──
+class StepperComponent extends CdkStepper {
+    /** Visual style of the indicator strip. `'default'` = numbered circles, `'dot'` = compact filled dots, `'simple'` = indicators only (labels hidden visually). Defaults to `'default'`. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Semantic color for active and completed indicators and connectors. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Controls indicator size and label typography. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, steps with `hasError` render error styling, icon, and `aria-invalid`. Defaults to `true`. */
+    // TRUE-default: error states must be visible by default — silently swallowing
+    // a stepped flow's failure state is a UX regression. Consumers opt out per step.
+    showError = input(true, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    /** When true, clicking a navigable step header selects it. Set to `false` to only allow advancement via `twStepperNext` / `twStepperPrevious`. Defaults to `true`. */
+    // TRUE-default: free-navigation is the standard stepper UX; restricted flows
+    // (e.g. wizards that must complete in order) explicitly opt out.
+    headerInteractive = input(true, ...(ngDevMode ? [{ debugName: "headerInteractive" }] : /* istanbul ignore next */ []));
+    _liveAnnouncer = inject(LiveAnnouncer);
+    _destroyRef = inject(DestroyRef);
+    _globalOptions = inject(STEPPER_GLOBAL_OPTIONS, { optional: true });
+    /**
+     * CdkStepper exposes its state via class properties (selectedIndex,
+     * previousIndex, orientation), not signals. We mirror those into signals so
+     * templates can react via @if/@for and OnPush change detection works without
+     * manual `markForCheck`. Sync happens in the property setters and lifecycle
+     * hooks below — keep these mirrors in lock-step with the CDK fields.
+     */
+    _orientationSignal = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientationSignal" }] : /* istanbul ignore next */ []));
+    _selectedIndexSignal = signal(0, ...(ngDevMode ? [{ debugName: "_selectedIndexSignal" }] : /* istanbul ignore next */ []));
+    _previousIndexSignal = signal(0, ...(ngDevMode ? [{ debugName: "_previousIndexSignal" }] : /* istanbul ignore next */ []));
+    /** @internal Reactive mirror of CDK's `orientation` input. */
+    orientationValue = this._orientationSignal.asReadonly();
+    /** @internal Reactive mirror of CDK's `selectedIndex`. */
+    selectedIndexValue = this._selectedIndexSignal.asReadonly();
+    set orientation(value) {
+        super.orientation = value;
+        this._orientationSignal.set(value);
+    }
+    get orientation() {
+        return super.orientation;
+    }
+    _variantResult = computed(() => stepperVariants({
+        variant: this.variant(),
+        size: this.size(),
+        orientation: this._orientationSignal(),
+    }), ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this._variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    headerClasses = computed(() => this._variantResult().header(), ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
+    stepItemClasses = computed(() => this._variantResult().stepItem(), ...(ngDevMode ? [{ debugName: "stepItemClasses" }] : /* istanbul ignore next */ []));
+    stepHeaderClasses = computed(() => this._variantResult().stepHeader(), ...(ngDevMode ? [{ debugName: "stepHeaderClasses" }] : /* istanbul ignore next */ []));
+    stepIndicatorBaseClasses = computed(() => this._variantResult().stepIndicator(), ...(ngDevMode ? [{ debugName: "stepIndicatorBaseClasses" }] : /* istanbul ignore next */ []));
+    stepNumberClasses = computed(() => this._variantResult().stepNumber(), ...(ngDevMode ? [{ debugName: "stepNumberClasses" }] : /* istanbul ignore next */ []));
+    stepIconSlotClasses = computed(() => this._variantResult().stepIconSlot(), ...(ngDevMode ? [{ debugName: "stepIconSlotClasses" }] : /* istanbul ignore next */ []));
+    stepLabelWrapperClasses = computed(() => this._variantResult().stepLabelWrapper(), ...(ngDevMode ? [{ debugName: "stepLabelWrapperClasses" }] : /* istanbul ignore next */ []));
+    stepLabelBaseClasses = computed(() => this._variantResult().stepLabel(), ...(ngDevMode ? [{ debugName: "stepLabelBaseClasses" }] : /* istanbul ignore next */ []));
+    stepDescriptionClasses = computed(() => this._variantResult().stepDescription(), ...(ngDevMode ? [{ debugName: "stepDescriptionClasses" }] : /* istanbul ignore next */ []));
+    stepOptionalHintClasses = computed(() => this._variantResult().stepOptionalHint(), ...(ngDevMode ? [{ debugName: "stepOptionalHintClasses" }] : /* istanbul ignore next */ []));
+    stepConnectorBaseClasses = computed(() => this._variantResult().stepConnector(), ...(ngDevMode ? [{ debugName: "stepConnectorBaseClasses" }] : /* istanbul ignore next */ []));
+    stepPanelClasses = computed(() => this._variantResult().stepPanel(), ...(ngDevMode ? [{ debugName: "stepPanelClasses" }] : /* istanbul ignore next */ []));
+    panelAnimationClass = computed(() => {
+        if (this._orientationSignal() === 'vertical')
+            return null;
+        return this._selectedIndexSignal() >= this._previousIndexSignal()
+            ? 'step-panel-enter-forward'
+            : 'step-panel-enter-backward';
+    }, ...(ngDevMode ? [{ debugName: "panelAnimationClass" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this._orientationSignal.set(this.orientation);
+        this._selectedIndexSignal.set(this.selectedIndex);
+        this._previousIndexSignal.set(this.selectedIndex);
+        this.selectionChange
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            this._previousIndexSignal.set(event.previouslySelectedIndex);
+            this._selectedIndexSignal.set(event.selectedIndex);
+            this._orientationSignal.set(this.orientation);
+            const total = this.steps.length;
+            const label = event.selectedStep.label || `Step ${event.selectedIndex + 1}`;
+            this._liveAnnouncer.announce(`${label}, step ${event.selectedIndex + 1} of ${total}`);
+        });
+    }
+    /** @internal Typed view of projected steps. */
+    get twSteps() {
+        return this.steps.toArray();
+    }
+    /** @internal Resolves the visual state of a step for color/theming purposes. */
+    getStepStyleState(step, index) {
+        if (this.shouldRenderError(step))
+            return 'error';
+        if (index === this._selectedIndexSignal())
+            return 'active';
+        const itype = step.indicatorType();
+        if (itype === STEP_STATE.DONE || itype === STEP_STATE.EDIT)
+            return 'completed';
+        if (this.linear && !step.isNavigable())
+            return 'disabled';
+        return 'pending';
+    }
+    /** @internal */
+    getIndicatorClass(step, index) {
+        const state = this.getStepStyleState(step, index);
+        return `${this.stepIndicatorBaseClasses()} ${resolveIndicatorClasses(state, this.color())}`;
+    }
+    /** @internal */
+    getLabelClass(step, index) {
+        const state = this.getStepStyleState(step, index);
+        return `${this.stepLabelBaseClasses()} ${resolveLabelClasses(state, this.color())}`;
+    }
+    /** @internal */
+    getConnectorClass(step, index) {
+        const state = this.getStepStyleState(step, index);
+        return `${this.stepConnectorBaseClasses()} ${resolveConnectorClasses(state, this.color())}`;
+    }
+    /** @internal Resolves which indicator glyph to render for a step. */
+    getIndicatorType(step) {
+        if (this.shouldRenderError(step))
+            return STEP_STATE.ERROR;
+        return step.indicatorType();
+    }
+    /** @internal Looks up a consumer-supplied custom template for a given indicator state. */
+    resolveIconTemplate(step, state) {
+        const templates = step.iconTemplates();
+        const match = templates.find((t) => t.state() === state);
+        return match ? match.templateRef : null;
+    }
+    /** @internal Context supplied to custom icon templates. */
+    iconContext(index) {
+        return {
+            $implicit: {
+                index,
+                active: index === this._selectedIndexSignal(),
+            },
+        };
+    }
+    /** @internal Click handler for the step header button. */
+    onHeaderClick(step, index) {
+        if (!this.headerInteractive())
+            return;
+        if (!step.isNavigable())
+            return;
+        this.selectedIndex = index;
+    }
+    /** @internal Whether the stepper should render the error state for a step. */
+    shouldRenderError(step) {
+        if (!this.showError())
+            return false;
+        if (this._globalOptions?.showError === false)
+            return false;
+        return step.hasError;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: StepperComponent, isStandalone: true, selector: "tw-stepper", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, headerInteractive: { classPropertyName: "headerInteractive", publicName: "headerInteractive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "rootClasses()" } }, providers: [{ provide: CdkStepper, useExisting: StepperComponent }], exportAs: ["twStepper"], usesInheritance: true, ngImport: i0, template: "<!-- Header strip + inline panels (vertical) / header-only (horizontal) -->\n<div\n  [class]=\"headerClasses()\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientationValue()\"\n  (keydown)=\"_onKeydown($event)\"\n>\n  @for (step of twSteps; track $index; let i = $index; let last = $last) {\n    <div [class]=\"stepItemClasses()\">\n      <!-- Step header button -->\n      <button\n        type=\"button\"\n        cdkStepHeader\n        role=\"tab\"\n        [class]=\"stepHeaderClasses()\"\n        [class.pointer-events-none]=\"!headerInteractive() || !step.isNavigable()\"\n        [class.opacity-60]=\"!step.isNavigable()\"\n        [id]=\"_getStepLabelId(i)\"\n        [attr.aria-controls]=\"_getStepContentId(i)\"\n        [attr.aria-selected]=\"selectedIndexValue() === i\"\n        [attr.aria-current]=\"selectedIndexValue() === i ? 'step' : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || null\"\n        [attr.aria-invalid]=\"shouldRenderError(step) || null\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"step.ariaLabelledby || null\"\n        (click)=\"onHeaderClick(step, i)\"\n      >\n        <!-- Indicator (number / icon / dot) -->\n        <span [class]=\"getIndicatorClass(step, i)\">\n          @let indicatorType = getIndicatorType(step);\n          @let customIcon = resolveIconTemplate(step, indicatorType);\n\n          @if (customIcon) {\n            <span [class]=\"stepIconSlotClasses()\">\n              <ng-container\n                [ngTemplateOutlet]=\"customIcon\"\n                [ngTemplateOutletContext]=\"iconContext(i)\"\n              />\n            </span>\n          } @else {\n            @switch (indicatorType) {\n              @case ('number') {\n                <span [class]=\"stepNumberClasses()\">{{ i + 1 }}</span>\n              }\n              @case ('done') {\n                <span [class]=\"stepIconSlotClasses()\">\n                  <svg\n                    class=\"size-3/5 shrink-0\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </span>\n              }\n              @case ('edit') {\n                <span [class]=\"stepIconSlotClasses()\">\n                  <svg\n                    class=\"size-3/5 shrink-0\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      d=\"M13.586 3.586a2 2 0 1 1 2.828 2.828l-.793.793-2.828-2.828.793-.793Zm-2.207 2.207 2.828 2.828-7.07 7.071a2 2 0 0 1-.83.5l-3.086.926a.5.5 0 0 1-.62-.621l.926-3.086a2 2 0 0 1 .5-.83l7.352-7.788Z\"\n                    />\n                  </svg>\n                </span>\n              }\n              @case ('error') {\n                <span [class]=\"stepIconSlotClasses()\">\n                  <svg\n                    class=\"size-3/5 shrink-0\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-11.25a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </span>\n              }\n            }\n          }\n        </span>\n\n        <!-- Label + description -->\n        <span [class]=\"stepLabelWrapperClasses()\">\n          <span [class]=\"getLabelClass(step, i)\">\n            @if (step.stepLabel) {\n              <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n            } @else {\n              {{ step.label }}\n            }\n            @if (step.optional && !step.completed) {\n              <span [class]=\"stepOptionalHintClasses()\">(Optional)</span>\n            }\n          </span>\n\n          @if (step.description() && variant() === 'default') {\n            <span [class]=\"stepDescriptionClasses()\">{{ step.description() }}</span>\n          }\n\n          @if (shouldRenderError(step) && step.errorMessage) {\n            <span class=\"sr-only\">{{ step.errorMessage }}</span>\n          }\n        </span>\n      </button>\n\n      <!-- Connector (between step i and i+1) -->\n      @if (!last) {\n        <span\n          [class]=\"getConnectorClass(step, i)\"\n          aria-hidden=\"true\"\n        ></span>\n      }\n\n      <!-- Vertical: panel is rendered inline under each selected step -->\n      @if (orientationValue() === 'vertical' && selectedIndexValue() === i && step.content) {\n        <div\n          role=\"tabpanel\"\n          [id]=\"_getStepContentId(i)\"\n          [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n          [class]=\"stepPanelClasses()\"\n          tabindex=\"0\"\n        >\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Horizontal: single panel rendered below the strip -->\n@if (orientationValue() === 'horizontal') {\n  @let activeStep = twSteps[selectedIndexValue()];\n  @if (activeStep && activeStep.content) {\n    <div\n      role=\"tabpanel\"\n      [id]=\"_getStepContentId(selectedIndexValue())\"\n      [attr.aria-labelledby]=\"_getStepLabelId(selectedIndexValue())\"\n      [class]=\"stepPanelClasses()\"\n      [animate.enter]=\"panelAnimationClass()\"\n      tabindex=\"0\"\n    >\n      <ng-container [ngTemplateOutlet]=\"activeStep.content\" />\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkStepHeader, selector: "[cdkStepHeader]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tw-stepper', exportAs: 'twStepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, CdkStepHeader], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], host: {
+                        '[class]': 'rootClasses()',
+                    }, template: "<!-- Header strip + inline panels (vertical) / header-only (horizontal) -->\n<div\n  [class]=\"headerClasses()\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientationValue()\"\n  (keydown)=\"_onKeydown($event)\"\n>\n  @for (step of twSteps; track $index; let i = $index; let last = $last) {\n    <div [class]=\"stepItemClasses()\">\n      <!-- Step header button -->\n      <button\n        type=\"button\"\n        cdkStepHeader\n        role=\"tab\"\n        [class]=\"stepHeaderClasses()\"\n        [class.pointer-events-none]=\"!headerInteractive() || !step.isNavigable()\"\n        [class.opacity-60]=\"!step.isNavigable()\"\n        [id]=\"_getStepLabelId(i)\"\n        [attr.aria-controls]=\"_getStepContentId(i)\"\n        [attr.aria-selected]=\"selectedIndexValue() === i\"\n        [attr.aria-current]=\"selectedIndexValue() === i ? 'step' : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || null\"\n        [attr.aria-invalid]=\"shouldRenderError(step) || null\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"step.ariaLabelledby || null\"\n        (click)=\"onHeaderClick(step, i)\"\n      >\n        <!-- Indicator (number / icon / dot) -->\n        <span [class]=\"getIndicatorClass(step, i)\">\n          @let indicatorType = getIndicatorType(step);\n          @let customIcon = resolveIconTemplate(step, indicatorType);\n\n          @if (customIcon) {\n            <span [class]=\"stepIconSlotClasses()\">\n              <ng-container\n                [ngTemplateOutlet]=\"customIcon\"\n                [ngTemplateOutletContext]=\"iconContext(i)\"\n              />\n            </span>\n          } @else {\n            @switch (indicatorType) {\n              @case ('number') {\n                <span [class]=\"stepNumberClasses()\">{{ i + 1 }}</span>\n              }\n              @case ('done') {\n                <span [class]=\"stepIconSlotClasses()\">\n                  <svg\n                    class=\"size-3/5 shrink-0\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </span>\n              }\n              @case ('edit') {\n                <span [class]=\"stepIconSlotClasses()\">\n                  <svg\n                    class=\"size-3/5 shrink-0\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      d=\"M13.586 3.586a2 2 0 1 1 2.828 2.828l-.793.793-2.828-2.828.793-.793Zm-2.207 2.207 2.828 2.828-7.07 7.071a2 2 0 0 1-.83.5l-3.086.926a.5.5 0 0 1-.62-.621l.926-3.086a2 2 0 0 1 .5-.83l7.352-7.788Z\"\n                    />\n                  </svg>\n                </span>\n              }\n              @case ('error') {\n                <span [class]=\"stepIconSlotClasses()\">\n                  <svg\n                    class=\"size-3/5 shrink-0\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-11.25a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </span>\n              }\n            }\n          }\n        </span>\n\n        <!-- Label + description -->\n        <span [class]=\"stepLabelWrapperClasses()\">\n          <span [class]=\"getLabelClass(step, i)\">\n            @if (step.stepLabel) {\n              <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n            } @else {\n              {{ step.label }}\n            }\n            @if (step.optional && !step.completed) {\n              <span [class]=\"stepOptionalHintClasses()\">(Optional)</span>\n            }\n          </span>\n\n          @if (step.description() && variant() === 'default') {\n            <span [class]=\"stepDescriptionClasses()\">{{ step.description() }}</span>\n          }\n\n          @if (shouldRenderError(step) && step.errorMessage) {\n            <span class=\"sr-only\">{{ step.errorMessage }}</span>\n          }\n        </span>\n      </button>\n\n      <!-- Connector (between step i and i+1) -->\n      @if (!last) {\n        <span\n          [class]=\"getConnectorClass(step, i)\"\n          aria-hidden=\"true\"\n        ></span>\n      }\n\n      <!-- Vertical: panel is rendered inline under each selected step -->\n      @if (orientationValue() === 'vertical' && selectedIndexValue() === i && step.content) {\n        <div\n          role=\"tabpanel\"\n          [id]=\"_getStepContentId(i)\"\n          [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n          [class]=\"stepPanelClasses()\"\n          tabindex=\"0\"\n        >\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Horizontal: single panel rendered below the strip -->\n@if (orientationValue() === 'horizontal') {\n  @let activeStep = twSteps[selectedIndexValue()];\n  @if (activeStep && activeStep.content) {\n    <div\n      role=\"tabpanel\"\n      [id]=\"_getStepContentId(selectedIndexValue())\"\n      [attr.aria-labelledby]=\"_getStepLabelId(selectedIndexValue())\"\n      [class]=\"stepPanelClasses()\"\n      [animate.enter]=\"panelAnimationClass()\"\n      tabindex=\"0\"\n    >\n      <ng-container [ngTemplateOutlet]=\"activeStep.content\" />\n    </div>\n  }\n}\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], headerInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerInteractive", required: false }] }] } });
+// ── Next / Previous directives (hostDirectives over CDK) ──
+class StepperNextDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperNextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: StepperNextDirective, isStandalone: true, selector: "button[twStepperNext]", hostDirectives: [{ directive: i1.CdkStepperNext, inputs: ["type", "type"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperNextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[twStepperNext]',
+                    hostDirectives: [{ directive: CdkStepperNext, inputs: ['type'] }],
+                }]
+        }] });
+class StepperPreviousDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperPreviousDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: StepperPreviousDirective, isStandalone: true, selector: "button[twStepperPrevious]", hostDirectives: [{ directive: i1.CdkStepperPrevious, inputs: ["type", "type"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperPreviousDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[twStepperPrevious]',
+                    hostDirectives: [{ directive: CdkStepperPrevious, inputs: ['type'] }],
+                }]
+        }] });
+// ── Provider helper ──
+/** Provides app-wide stepper defaults via `STEPPER_GLOBAL_OPTIONS`. */
+function provideTwStepperOptions(options) {
+    return [{ provide: STEPPER_GLOBAL_OPTIONS, useValue: options }];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StepComponent, StepLabelDirective, StepperComponent, StepperIconDirective, StepperNextDirective, StepperPreviousDirective, provideTwStepperOptions };
+//# sourceMappingURL=cdevhub-ngx-tw-stepper.mjs.map