docs

API reference

Stepper is a headless progress primitive with registered steps, value-driven selection, roving trigger focus, list-based semantics, and reflected state attributes.

`tngStepper`

Attach the root directive to the element that owns the step list. The root controls the current value, orientation, focus loop, and linear activation policy.

<section
  tngStepper
  ariaLabel="Checkout progress"
  defaultValue="shipping"
  linear
  (valueChange)="currentStep = $event"
>
  <ol>
    <li tngStepperItem value="cart" label="Cart" completed>
      <button tngStepperTrigger><span tngStepperLabel>Cart</span></button>
    </li>
    <li tngStepperItem value="shipping" label="Shipping">
      <button tngStepperTrigger>
        <span tngStepperLabel>Shipping</span>
        <span tngStepperDescription>Address and delivery</span>
      </button>
      <section tngStepperPanel>Shipping form</section>
    </li>
  </ol>
</section>

Input / output	Type	Purpose
`value`	`string \| number \| null`	Controlled current step value.
`defaultValue`	`string \| number \| null`	Initial uncontrolled current step value.
`orientation`	`'horizontal' \| 'vertical'`	Controls root `data-orientation` and arrow-key direction.
`linear`	`boolean`	Blocks future incomplete step activation while allowing current and completed steps.
`loopFocus`	`boolean`	Allows arrow focus to wrap between first and last enabled triggers.
`ariaLabel` / `ariaLabelledby`	`string`	Accessible name for the progress flow root.
`valueChange`	`string \| number`	Emits when an allowed activation requests a new current step.
`stepChange`	`{ value, previousValue, trigger }`	Detailed change event with pointer, keyboard, or programmatic source.

`tngStepperItem`

Register each ordered step with a unique value. Item state is reflected onto the item and trigger so styling can key off the same contract.

Input	Type	Purpose
`value`	`string \| number`	Required unique step id; ordering comes from DOM order.
`completed`	`boolean`	Marks the step complete and allows activation in linear mode.
`optional`	`boolean`	Adds optional announcement text and `data-optional`.
`disabled`	`boolean`	Removes the trigger from roving focus and activation.
`error`	`boolean`	Reflects the error state and announcement text.
`label` / `description`	`string`	Accessible trigger text used with generated position and state text.

Trigger and content directives

tngStepperTrigger is the focusable, click and keyboard activatable part.
tngStepperLabel and tngStepperDescription are structural slots for your text.
tngStepperPanel hides inactive content and labels itself from its trigger.
tngStepperConnector mirrors the owning item state for presentational connector lines.

Owner responsibilities

Use an ordered list when visual order communicates sequence.
Keep each step value unique and stable across reorders.
Update controlled value after valueChange if you want the UI to move.
Render visible optional, error, and completed affordances instead of relying on color only.