import type { EventEmitter } from '../../stencil-public-runtime';
import type { LocaleProp } from '../../utils/locale';
import type { StepperOrientation, StepperStep, StepperStepClickDetail } from './mud-stepper.types';
/**
* Stepper — visualises a user's position in a multi-step process.
*
* Matches the Figma `progress-tracker` component (page "Progress Tracker
* (Stepper)", node 267:6905) — kept here under the shorter `mud-stepper` name.
*
* Two flavours:
*
* - **Display stepper** (`interactive=false`, default) — read-only. Each step is a
* `
` carrying ARIA semantics. Use for sign-up wizards, KYC flows, document
* submissions where the parent app drives navigation.
* - **Interactive stepper** (`interactive=true`) — each completed (and the current)
* step renders as a `` and emits `mudStepClick`. Pending steps remain
* non-actionable per the WAI-ARIA stepper pattern.
*
* State legend (Figma node 39:25050, unified across orientations):
* - `pending` — neutral grey ring + faded number, non-navigable, neutral label
* - `current` — brand ring + brand number + brand label
* - `completed` — brand filled circle + white checkmark, neutral label
* - `available` — brand outline ring + brand number, neutral label, navigable forward
* - `error` — danger ring + danger cross, neutral label
*
* The component renders an ordered list with `role="list"` for AT compatibility
* (Safari + VoiceOver strip implicit list roles when `list-style: none` is set).
* Set the native `aria-label` attribute on the host for the list landmark's
* accessible name; it defaults to `'Pași'` (ro-MD), following `locale`/`lang`
* like every other built-in string — see `navLabel`.
*
* @element mud-stepper
*
* @slot - (default) Reserved for future slot-mode authoring. Currently unused —
* consumers should pass the `steps` prop.
*/
export declare class MudStepper {
/**
* Layout orientation.
* - `horizontal` (default): steps flow left to right; labels render under indicators.
* - `vertical`: steps stack top to bottom; labels render to the right of indicators.
*/
orientation: StepperOrientation;
/**
* When true, completed, current, and available steps render as `` elements
* and emit `mudStepClick`. Pending and error steps remain non-actionable in this mode.
* @default false
*/
interactive: boolean;
/**
* Compact "dot rail" rendering — the mobile breakpoint from Figma. Hides the
* step numbers and labels, leaving a rail of dots; per-status fills convey
* progress (filled brand + checkmark = completed, hollow ring = current /
* available / pending, danger ring + cross = error). Status icons are kept;
* only the numeric indicators and text labels are hidden. Works in both
* orientations.
* @default false
*/
compact: boolean;
/**
* Declarative step list. Each item: `{ id?, label, supportingText?, status, iconName?, disabled? }`.
* `status` drives the visual state and ARIA semantics — see {@link StepperStepStatus}.
*/
steps?: StepperStep[];
/**
* Optional **zero-based** index of the current step (so the 3rd step is
* `currentStep={2}`). When set it drives the whole progression and the
* per-item `status` in `steps` is ignored: every step **before** the index
* renders `'completed'`, the step **at** the index renders `'current'`, every
* step **after** renders `'pending'`. Pass `currentStep={steps.length}` (one
* past the last index) to mark the flow finished — every step then renders
* `'completed'`.
*
* The one exception: a step whose `status` is `'error'` keeps `'error'`
* regardless of position (a failed step stays failed while you navigate).
* A negative or non-integer value is ignored and the array's own statuses
* stand. Use this for parent-driven flows that track a single number; for
* mixed states (`'available'` future steps, several errors, etc.) drive each
* step through `steps` and leave `currentStep` unset.
*/
currentStep?: number;
/**
* Language of the built-in copy. Unset, the component follows the closest ancestor `lang`
* (`` included), else `ro-MD`.
*/
locale?: LocaleProp;
/**
* Accessible name of the `role="list"` host when no consumer `aria-label` is set.
* Overrides the `locale`'s copy when set to a non-empty string.
* @default 'Pași' (ro-MD)
*/
navLabel?: string;
/**
* Appended to a step's accessible name when its status is `completed`. Overrides the
* `locale`'s copy when set to a non-empty string.
* @default ', finalizat' (ro-MD)
*/
completedSuffix?: string;
/**
* Appended to a step's accessible name when its status is `current`. Overrides the
* `locale`'s copy when set to a non-empty string.
* @default ', curent' (ro-MD)
*/
currentSuffix?: string;
/**
* Appended to a step's accessible name when its status is `available`. Overrides the
* `locale`'s copy when set to a non-empty string.
* @default ', disponibil' (ro-MD)
*/
availableSuffix?: string;
/**
* Appended to a step's accessible name when its status is `error`. Overrides the
* `locale`'s copy when set to a non-empty string.
* @default ', eroare' (ro-MD)
*/
errorSuffix?: string;
/**
* Appended to a step's accessible name when its status is `pending`. Overrides the
* `locale`'s copy when set to a non-empty string.
* @default ', în așteptare' (ro-MD)
*/
pendingSuffix?: string;
/**
* Joins a step's `label` and `supportingText` in its accessible name. Overrides the
* `locale`'s copy when set to a non-empty string.
* @default ' — ' (ro-MD)
*/
supportingSeparator?: string;
/** True when the container is narrower than the auto-compact breakpoint. */
private isNarrow;
host: HTMLMudStepperElement;
/**
* Emitted when an interactive step is activated via mouse, keyboard, or AT.
* Detail carries the `index` and the full `step` object that was clicked.
* Only fires when `interactive=true` and the step is not disabled.
*/
mudStepClick: EventEmitter;
private resizeObserver?;
private hostLabel?;
private stopLang?;
connectedCallback(): void;
disconnectedCallback(): void;
componentWillRender(): void;
/** Built-in strings in the resolved locale, with the override props on top. */
private messages;
/**
* Returns the effective status for a step. With no (or an invalid) `currentStep`
* the array's own `status` stands. With a valid `currentStep` (integer `>= 0`)
* the progression is derived entirely from the index: `< currentStep` →
* `'completed'`, `=== currentStep` → `'current'`, `> currentStep` → `'pending'`
* (so `currentStep >= total` makes every step `'completed'`). A step declared
* `'error'` keeps `'error'` whatever its position.
*/
private effectiveStatus;
/** Whether the step is activatable in interactive mode. */
private isActionable;
/** Pick the right inline indicator (icon name, number, or null for raw text). */
private resolveIconName;
private readonly handleStepClick;
private readonly handleKeyDown;
private renderIndicator;
private renderLabelBlock;
private renderStepBody;
private renderStep;
render(): any;
}