@malva-ui/core 0.1.13 → 0.1.14

package/types/malva-ui-core-skeleton.d.ts

@@ -0,0 +1,64 @@
+import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/** Visual shape variant of the skeleton loader. */
+type MlvSkeletonVariant = 'text' | 'circle' | 'rectangle';
+/**
+ * Skeleton loader component (`mlv-skeleton`) used as a placeholder while content is loading.
+ *
+ * Renders a pulsing placeholder that communicates the shape of the incoming content.
+ * Width and height are bound directly on the host element via `[style.width]` and
+ * `[style.height]`. The component is always `aria-hidden="true"` — it carries no
+ * semantic meaning for assistive technology.
+ *
+ * @example
+ * ```html
+ * <!-- Default rectangle -->
+ * <mlv-skeleton />
+ *
+ * <!-- Circle avatar placeholder -->
+ * <mlv-skeleton variant="circle" width="2.5rem" height="2.5rem" />
+ *
+ * <!-- Text line placeholder -->
+ * <mlv-skeleton variant="text" width="60%" />
+ * ```
+ */
+declare class MlvSkeleton {
+    /**
+     * Visual shape variant of the skeleton.
+     * - `'rectangle'` (default) — rectangular block
+     * - `'text'` — short rounded pill mimicking a line of text
+     * - `'circle'` — fully rounded circle for avatar/icon placeholders
+     */
+    readonly variant: _angular_core.InputSignal<MlvSkeletonVariant>;
+    /**
+     * CSS width applied to the host element.
+     * Accepts any valid CSS width value (e.g. `'100%'`, `'12rem'`, `'200px'`).
+     * Defaults to `'100%'`.
+     */
+    readonly width: _angular_core.InputSignal<string>;
+    /**
+     * CSS height applied to the host element.
+     * Accepts any valid CSS height value (e.g. `'1rem'`, `'48px'`).
+     * Defaults to `'1rem'`.
+     */
+    readonly height: _angular_core.InputSignal<string>;
+    /**
+     * Whether the pulsing animation is active.
+     * Set to `false` to render a static placeholder (e.g. for reduced-motion or loading states
+     * that should not draw attention). Defaults to `true`.
+     */
+    readonly animated: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * CSS duration for the shimmer animation (e.g. `'1s'`, `'0.8s'`, `'2s'`).
+     * Passed as the `--mlv-skeleton-duration` CSS custom property on the host, which
+     * controls the `animation-duration` of the shimmer keyframe.
+     * Defaults to `'2s'` for a slow, professional feel.
+     */
+    readonly animationDuration: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvSkeleton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvSkeleton, "mlv-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "animated": { "alias": "animated"; "required": false; "isSignal": true; }; "animationDuration": { "alias": "animationDuration"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MlvSkeleton };
+export type { MlvSkeletonVariant };

package/types/malva-ui-core-slider.d.ts

@@ -0,0 +1,219 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _malva_ui_i18n from '@malva-ui/i18n';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvSignalFormControlBase, MlvFormControl } from '@malva-ui/core/form-utils';
+import * as i1 from '@malva-ui/cdk/density';
+
+/**
+ * Identifies the thumb whose tooltip is being rendered.
+ *
+ * Single-value sliders use `'value'`; range sliders use `'min'` and `'max'`.
+ */
+type MlvSliderTooltipThumb = 'value' | 'min' | 'max';
+/**
+ * Context provided to a custom `[mlvSliderTooltipDef]` template.
+ */
+interface MlvSliderTooltipDefContext {
+    /** Current thumb value, also exposed as `let-value`. */
+    $implicit: number;
+    /** Current thumb value exposed as the named `value` property. */
+    value: number;
+    /** Semantic identity of the thumb being rendered. */
+    thumb: MlvSliderTooltipThumb;
+}
+/**
+ * Structural directive that provides custom slider tooltip text.
+ *
+ * @example
+ * ```html
+ * <mlv-slider tooltip>
+ *   <ng-template mlvSliderTooltipDef let-value>
+ *     {{ value }}%
+ *   </ng-template>
+ * </mlv-slider>
+ * ```
+ */
+declare class MlvSliderTooltipDef {
+    /** Template used to render the current thumb value. */
+    readonly templateRef: TemplateRef<any>;
+    /** Type guard for `let-value`, `let-value="value"`, and `let-thumb="thumb"`. */
+    static ngTemplateContextGuard(_dir: MlvSliderTooltipDef, _ctx: unknown): _ctx is MlvSliderTooltipDefContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvSliderTooltipDef, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvSliderTooltipDef, "[mlvSliderTooltipDef]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * The value type for the slider in single-thumb mode (number) or
+ * dual-thumb range mode ([number, number]).
+ */
+type MlvSliderValue = number | [number, number];
+declare class MlvSlider extends MlvSignalFormControlBase<MlvSliderValue> implements MlvFormControl {
+    /** @protected The component's i18n strings signal. */
+    protected readonly _i18n: _angular_core.Signal<_malva_ui_i18n.MlvSliderI18n>;
+    /**
+     * Orientation of the slider.
+     * In `'vertical'` mode the track runs bottom-to-top, thumbs are positioned
+     * with `bottom`, and the host must have an explicit height set.
+     */
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /** Minimum value of the slider. */
+    readonly min: _angular_core.InputSignalWithTransform<number, MlvSliderValue | null | undefined>;
+    /** Maximum value of the slider. */
+    readonly max: _angular_core.InputSignalWithTransform<number, MlvSliderValue | null | undefined>;
+    /** Step increment between values. */
+    readonly step: _angular_core.InputSignalWithTransform<number, number | null | undefined>;
+    /** Whether to display tick marks at each step interval. */
+    readonly showTicks: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** When true, the slider operates in dual-thumb range mode. */
+    readonly range: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Shows the current value in a tooltip while a thumb is hovered, dragged,
+     * or keyboard-focused.
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** The selected scalar or range value used by all Angular forms APIs. */
+    readonly value: _angular_core.ModelSignal<MlvSliderValue>;
+    /** @protected Optional consumer template used to render tooltip text. */
+    protected readonly _tooltipDef: _angular_core.Signal<MlvSliderTooltipDef | undefined>;
+    /** @private True when orientation is vertical. */
+    protected readonly _isVertical: _angular_core.Signal<boolean>;
+    /** @private Low (or sole) thumb value derived directly from the forms model. */
+    protected readonly _lowValue: _angular_core.Signal<number>;
+    /** @private High thumb value derived directly from the forms model. */
+    protected readonly _highValue: _angular_core.Signal<number>;
+    /** @protected Template context for the low or single-value thumb tooltip. */
+    protected readonly _lowTooltipContext: _angular_core.Signal<MlvSliderTooltipDefContext>;
+    /** @protected Template context for the high thumb tooltip in range mode. */
+    protected readonly _highTooltipContext: _angular_core.Signal<MlvSliderTooltipDefContext>;
+    /**
+     * @private The thumb currently being dragged: 'low', 'high', or null.
+     */
+    protected readonly _activeDragThumb: _angular_core.WritableSignal<"low" | "high" | null>;
+    /**
+     * @private Raw drag position (0–100%) for the low thumb while dragging.
+     * Null when not dragging — thumb reverts to the snapped value's position.
+     */
+    private readonly _lowDragPercent;
+    private readonly _rtlService;
+    /**
+     * @private Effective direction of this slider, tracking the global direction
+     * and any `[dir]` scope above the host. Mirrors pointer-to-value mapping.
+     */
+    private readonly _direction;
+    /**
+     * @private Raw drag position (0–100%) for the high thumb while dragging.
+     * Null when not dragging — thumb reverts to the snapped value's position.
+     */
+    private readonly _highDragPercent;
+    /**
+     * @private Visual percentage position of the low thumb.
+     * Uses the raw drag position while dragging for a smooth feel;
+     * snaps back to the step-aligned position on pointer release.
+     */
+    protected readonly _lowPercent: _angular_core.Signal<number>;
+    /**
+     * @private Visual percentage position of the high thumb.
+     * Uses the raw drag position while dragging for a smooth feel;
+     * snaps back to the step-aligned position on pointer release.
+     */
+    protected readonly _highPercent: _angular_core.Signal<number>;
+    /**
+     * @private Computed percentage for the fill region start (0–100%).
+     * In single mode this is always 0; in range mode it tracks the low thumb visual position.
+     */
+    protected readonly _fillStart: _angular_core.Signal<string>;
+    /**
+     * @private Computed percentage for the fill region end (0–100%).
+     * Tracks the visual (drag or snapped) position of the active thumb.
+     */
+    protected readonly _fillEnd: _angular_core.Signal<string>;
+    /**
+     * @private Array of tick positions (percentages) shown when showTicks is true.
+     */
+    protected readonly _ticks: _angular_core.Signal<number[]>;
+    constructor();
+    /** @private Host element ref for pointer-to-value calculation. */
+    private _elementRef;
+    /** @private Renderer2 for SSR-safe + auto-cleanup window listeners during drag. */
+    private _renderer;
+    /** @private DestroyRef so a destroy mid-drag releases the listeners. */
+    private _destroyRef;
+    /**
+     * @private The `.mlv-slider__track` element — a static child of this
+     * component's own template, so it is resolved via a signal `viewChild` query
+     * (repo rule: no `querySelector` for own-template elements) rather than a DOM
+     * lookup on the host.
+     */
+    private readonly _trackRef;
+    /**
+     * @private Track bounding rect captured at pointerdown and reused for the whole
+     * drag, so `_pointerToPercent` does not force a `getBoundingClientRect` layout
+     * read on every pointermove. Dropped when the pointer ends or is cancelled.
+     */
+    private _dragTrackRect;
+    /** Whether the control holds a clearable value — A slider always carries a numeric value. */
+    readonly hasValue: _angular_core.Signal<boolean>;
+    /**
+     * @protected Handles keydown events on the low thumb.
+     */
+    protected _onLowThumbKeydown(event: KeyboardEvent): void;
+    /**
+     * @protected Handles keydown events on the high thumb (range mode only).
+     */
+    protected _onHighThumbKeydown(event: KeyboardEvent): void;
+    /**
+     * @protected Handles pointerdown events on the track area to begin thumb dragging.
+     */
+    protected _onTrackPointerDown(event: PointerEvent): void;
+    /**
+     * @private Attaches pointermove/end listeners on the window for drag tracking.
+     * During drag the thumb follows the pointer freely (no step snapping) while the
+     * emitted value snaps to the nearest step on every move. On pointer release the
+     * raw drag position is cleared so the thumb animates to the snapped position.
+     */
+    private _attachPointerListeners;
+    /**
+     * @private Converts a keyboard event into a new value, or null if unhandled.
+     */
+    private _computeKeyValue;
+    /**
+     * @private Converts a pointer event position to a clamped percentage (0–100).
+     * Horizontal: left → 0%, right → 100%.
+     * Vertical: bottom → 0%, top → 100% (inverted Y axis).
+     * Does not snap — use this for free drag tracking.
+     */
+    private _pointerToPercent;
+    /**
+     * @private Converts a pointer event's X position to a clamped, snapped slider value.
+     * Used for track clicks (immediate snap) — not for drag moves.
+     */
+    private _pointerEventToValue;
+    /**
+     * @private Converts a value to a percentage between 0 and 100.
+     */
+    private _valueToPercent;
+    /**
+     * @private Clamps a value to [min, max].
+     */
+    private _clamp;
+    /**
+     * @private Snaps a value to the nearest step.
+     */
+    private _snap;
+    /** @private Writes the low/sole thumb while preserving the range shape. */
+    private _setLowValue;
+    /** @private Writes the high thumb while preserving the current low value. */
+    private _setHighValue;
+    /**
+     * @private Writes the current value through the signal-forms model.
+     */
+    private _emitChange;
+    /** @protected Marks the control touched when either thumb loses focus. */
+    protected _onThumbBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvSlider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvSlider, "mlv-slider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showTicks": { "alias": "showTicks"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["_tooltipDef"], never, true, [{ directive: typeof i1.MlvCompactComfortableDensity; inputs: { "mlvDensity": "mlvDensity"; }; outputs: {}; }]>;
+}
+
+export { MlvSlider, MlvSliderTooltipDef };
+export type { MlvSliderTooltipDefContext, MlvSliderTooltipThumb, MlvSliderValue };

package/types/malva-ui-core-split-pane.d.ts

@@ -0,0 +1,149 @@
+import * as _angular_core from '@angular/core';
+import { AfterContentInit, ElementRef } from '@angular/core';
+
+/**
+ * Orientation of the split pane.
+ *
+ * - `'horizontal'` — panes are side by side (left | right), drag handle is vertical
+ * - `'vertical'` — panes are stacked (top | bottom), drag handle is horizontal
+ */
+type MlvSplitPaneOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Split pane container that divides space into two or more resizable panels.
+ *
+ * Panels are declared as `<mlv-split-pane-panel>` children. The component
+ * automatically inserts a drag handle between each adjacent pair. Sizes are
+ * managed via CSS `grid-template-columns` (horizontal) or
+ * `grid-template-rows` (vertical), ensuring the DOM always reflects the true
+ * rendered widths/heights.
+ *
+ * @example Basic 2-panel
+ * ```html
+ * <mlv-split-pane style="height: 300px;">
+ *   <mlv-split-pane-panel [size]="30">Sidebar</mlv-split-pane-panel>
+ *   <mlv-split-pane-panel>Main</mlv-split-pane-panel>
+ * </mlv-split-pane>
+ * ```
+ *
+ * @example 3-panel
+ * ```html
+ * <mlv-split-pane style="height: 300px;">
+ *   <mlv-split-pane-panel [size]="20">Nav</mlv-split-pane-panel>
+ *   <mlv-split-pane-panel>Editor</mlv-split-pane-panel>
+ *   <mlv-split-pane-panel [size]="25">Properties</mlv-split-pane-panel>
+ * </mlv-split-pane>
+ * ```
+ */
+declare class MlvSplitPane implements AfterContentInit {
+    /**
+     * Orientation of the split. `'horizontal'` places panels side-by-side;
+     * `'vertical'` stacks them top to bottom.
+     */
+    readonly orientation: _angular_core.InputSignal<MlvSplitPaneOrientation>;
+    /** @protected Whether a drag is currently in progress. Drives the `--dragging` modifier class. */
+    protected readonly _isDragging: _angular_core.WritableSignal<boolean>;
+    /** @private Queried panel children. */
+    private readonly _panels;
+    /** @private Current sizes of each panel in `fr` units (≈ percentage). */
+    private readonly _sizes;
+    /**
+     * @private Latest sizes produced during an active pointer drag. The drag
+     * stream runs outside Angular and mutates the grid template imperatively; this
+     * buffer holds the running value so it can be committed to the `_sizes` signal
+     * exactly once, on pointerup, inside the zone.
+     */
+    private _dragSizes;
+    /** @private The inserted drag-handle elements, indexed by the pair they split. */
+    private readonly _handles;
+    /** @private Host element reference. */
+    private readonly _elementRef;
+    /** @private Angular Renderer2 for all DOM mutations. */
+    private readonly _renderer;
+    /** @private DestroyRef for observable cleanup. */
+    private readonly _destroyRef;
+    /** @private Angular zone — the drag stream runs outside it to avoid a change-detection pass per pointermove. */
+    private readonly _ngZone;
+    private readonly _rtlService;
+    /**
+     * @private Effective direction of this split pane, tracking the global
+     * direction and any `[dir]` scope above the host. Mirrors drag geometry:
+     * panel[0] is the inline-first panel, which sits on the right in RTL.
+     */
+    private readonly _direction;
+    ngAfterContentInit(): void;
+    /**
+     * @private Calculates the initial size for each panel.
+     * Panels with an explicit `size` input use that value.
+     * Panels without one share the remaining percentage equally.
+     */
+    private _computeInitialSizes;
+    /**
+     * @private Updates `grid-template-columns` (horizontal) or `grid-template-rows`
+     * (vertical) so each panel occupies its current `fr` share. Handles always
+     * occupy a fixed `0.125rem` track, so they never eat into panel space.
+     */
+    private _applyGridTemplate;
+    /**
+     * @private Syncs the ARIA window-splitter values on every drag handle.
+     * A focusable `role="separator"` is a window splitter and therefore requires
+     * `aria-valuenow` (with `aria-valuemin`/`aria-valuemax`). `aria-valuenow`
+     * tracks the leading panel's size (%), bounded by the two adjacent panels'
+     * `minSize` values.
+     */
+    private _updateHandleAria;
+    /**
+     * @private Creates and returns a drag handle DOM element for the given handle index.
+     * The grip visual is drawn entirely with CSS — no Angular directives required.
+     */
+    private _createHandle;
+    /**
+     * @private Wires pointer-capture drag behavior for a single handle.
+     * Only the two panels adjacent to the handle change size during drag;
+     * all other panels remain fixed.
+     */
+    private _initDragForHandle;
+    /**
+     * @protected Keyboard handler on each dynamically created handle.
+     * Arrow keys move by 1%, Home/End jump to the adjacent panel's minSize.
+     */
+    private _onHandleKeydown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvSplitPane, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvSplitPane, "mlv-split-pane", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, ["_panels"], ["*"], true, never>;
+}
+
+/**
+ * Individual panel inside a `mlv-split-pane`.
+ *
+ * Panels are placed side-by-side (horizontal) or stacked (vertical) with a
+ * draggable handle between each pair. The parent component manages all sizes
+ * and inserts the handles automatically.
+ *
+ * @example
+ * ```html
+ * <mlv-split-pane>
+ *   <mlv-split-pane-panel [size]="30">Sidebar</mlv-split-pane-panel>
+ *   <mlv-split-pane-panel>Main content</mlv-split-pane-panel>
+ * </mlv-split-pane>
+ * ```
+ */
+declare class MlvSplitPanePanel {
+    /** @internal Direct reference to the host element, used by the parent for DOM measurement. */
+    readonly _elementRef: ElementRef<any>;
+    /**
+     * Initial size of this panel as a percentage of the container.
+     * When omitted the panel shares the remaining space equally with other unsized panels.
+     */
+    readonly size: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Minimum size of this panel as a percentage.
+     * Drag and keyboard resize will not reduce this panel below this value.
+     * Defaults to `5`.
+     */
+    readonly minSize: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvSplitPanePanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvSplitPanePanel, "mlv-split-pane-panel", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { MlvSplitPane, MlvSplitPanePanel };
+export type { MlvSplitPaneOrientation };

package/types/malva-ui-core-status-indicator.d.ts

@@ -0,0 +1,65 @@
+import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvTone } from '@malva-ui/cdk/utils';
+
+/**
+ * Available tone variants for the status indicator.
+ * Extends the shared {@link MlvTone} semantic vocabulary with neutral and
+ * brand options — mirroring `MlvBadgeTone` / `MlvChipTone` — so a dot's colour stays
+ * consistent with the badge/chip it commonly sits beside.
+ */
+type MlvStatusIndicatorTone = MlvTone | 'default' | 'primary' | 'secondary' | 'accent';
+/**
+ * Small circular status dot for conveying presence, health, or state (online,
+ * busy, error, …). Renders a `0.5rem` (8px) coloured dot using the same
+ * semantic {@link MlvStatusIndicatorTone} vocabulary as `mlv-badge` / `mlv-chip`,
+ * with an optional infinite ripple pulse.
+ *
+ * Decorative by default (`aria-hidden`); provide {@link MlvStatusIndicator.ariaLabel}
+ * to expose an accessible name (`role="img"`) when the dot carries meaning that
+ * is not conveyed by adjacent text.
+ *
+ * @example
+ * ```html
+ * <mlv-status-indicator tone="success" pulse />
+ * <mlv-status-indicator tone="danger" ariaLabel="Offline" />
+ * <span><mlv-status-indicator tone="warning" /> Degraded</span>
+ * ```
+ */
+declare class MlvStatusIndicator {
+    /**
+     * The semantic tone of the dot, mapped to a solid fill colour token.
+     * Defaults to `'default'` (neutral grey).
+     */
+    readonly tone: _angular_core.InputSignal<MlvStatusIndicatorTone>;
+    /**
+     * When `true`, an expanding ripple ring animates outward from the dot on an
+     * infinite loop to draw attention (e.g. "live"/"recording" states).
+     * Respects `prefers-reduced-motion: reduce`, which suppresses the ripple.
+     * Supports attribute usage: `<mlv-status-indicator pulse>`.
+     */
+    readonly pulse: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Diameter of the dot in pixels. Defaults to `8` (`0.5rem`), matching the
+     * design spec. Converted to `rem` internally so the dot scales with the
+     * user's root font-size. Overridable per-instance (e.g. `[size]="4"`).
+     */
+    readonly size: _angular_core.InputSignal<number>;
+    /**
+     * Optional accessible name. When set, the dot is exposed to assistive
+     * technology as `role="img"` with this label; when omitted, the dot is purely
+     * decorative (`aria-hidden`) on the assumption that adjacent text conveys the
+     * status. Use this only when the colour/pulse is the sole carrier of meaning.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @protected Dot size expressed in `rem` for the `--mlv-status-indicator-size`
+     * custom property (keeps the value scalable rather than binding raw px).
+     */
+    protected readonly _sizeVar: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvStatusIndicator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvStatusIndicator, "mlv-status-indicator", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "pulse": { "alias": "pulse"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MlvStatusIndicator };
+export type { MlvStatusIndicatorTone };

package/types/malva-ui-core-stepper.d.ts

@@ -0,0 +1,168 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, AfterContentInit, InjectionToken } from '@angular/core';
+import * as _malva_ui_i18n from '@malva-ui/i18n';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/** State of a single step. */
+type MlvStepState = 'pending' | 'active' | 'completed' | 'error';
+/** MlvLayout orientation of the stepper. */
+type MlvStepperOrientation = 'horizontal' | 'vertical';
+
+/**
+ * `mlv-step` — a step definition component. Declare steps as children of
+ * `mlv-stepper`. The stepper renders the headers and content panels itself;
+ * the projected content of each `<mlv-step>` is shown in the active panel.
+ */
+declare class MlvStep {
+    /**
+     * Step label displayed in the step header.
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Optional descriptive sub-label shown below the main label.
+     */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Explicit state override. When provided, takes precedence over the derived
+     * state from the stepper's `activeIndex`.
+     */
+    readonly state: _angular_core.InputSignal<MlvStepState | undefined>;
+    /**
+     * When `true`, this step is optional and can be skipped even in linear mode.
+     */
+    readonly optional: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, this step represents an alternative/deviative path.
+     * The connector after this step is rendered with a dashed warning-color border,
+     * and the indicator receives a visual warning badge overlay.
+     */
+    readonly deviative: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, marks this deviative step's deviation as resolved.
+     * The connector AFTER this step reverts to the normal (solid, neutral) style
+     * instead of dashed/warning. Has no visual effect unless `deviative` is also true.
+     * When the user returns to this step and `deviationResolved` becomes false again,
+     * the connector reverts to the dashed/warning style.
+     */
+    readonly deviationResolved: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * 0-based index assigned by the parent `MlvStepper` after content init.
+     * @internal
+     */
+    _index: number;
+    /** @internal Template reference holding this step's projected content. */
+    readonly contentTpl: _angular_core.Signal<TemplateRef<unknown>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvStep, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvStep, "mlv-step", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "deviative": { "alias": "deviative"; "required": false; "isSignal": true; }; "deviationResolved": { "alias": "deviationResolved"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * `mlv-stepper` — a multi-step workflow container.
+ *
+ * Usage:
+ * ```html
+ * <mlv-stepper>
+ *   <mlv-step label="Account">...</mlv-step>
+ *   <mlv-step label="Profile">...</mlv-step>
+ *   <mlv-step label="Review">...</mlv-step>
+ * </mlv-stepper>
+ * ```
+ */
+declare class MlvStepper implements AfterContentInit {
+    /** @protected The component's i18n strings signal. */
+    protected readonly _i18n: _angular_core.Signal<_malva_ui_i18n.MlvStepperI18n>;
+    /** @private Used to tear down the FocusKeyManager. */
+    private readonly _destroyRef;
+    /**
+     * MlvLayout orientation of the stepper.
+     * `'horizontal'` renders step headers side-by-side with a connector line.
+     * `'vertical'` stacks each step header and its content in a column.
+     */
+    readonly orientation: _angular_core.InputSignal<MlvStepperOrientation>;
+    /**
+     * When `true`, users must complete each step in order before proceeding.
+     * Only completed and the next pending step are clickable.
+     */
+    readonly linear: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Zero-based index of the initially active step.
+     */
+    readonly initialIndex: _angular_core.InputSignal<number>;
+    /**
+     * Accessible label for the stepper container announced by screen readers.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emits the new zero-based active step index after navigation.
+     */
+    readonly activeIndexChange: _angular_core.OutputEmitterRef<number>;
+    /** @private Zero-based index of the currently active step (internal signal). */
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    /** @private Projected step definition components. */
+    private readonly _steps;
+    /** @protected Iterable step array for the template. */
+    protected readonly _stepList: _angular_core.Signal<readonly MlvStep[]>;
+    /** @protected CSS class list applied to the host. */
+    protected readonly _hostClasses: _angular_core.Signal<string>;
+    /** @private Step-header trigger directives rendered in the current orientation. */
+    private readonly _headers;
+    /** @private Drives arrow-key navigation + roving tabindex over the step headers. */
+    private _keyManager;
+    /** @private Supplies the current inline direction to the horizontal key manager. */
+    private readonly _rtlService;
+    constructor();
+    ngAfterContentInit(): void;
+    /**
+     * @protected Keydown handler on the step-header tablist. Delegates arrow /
+     * Home / End navigation to the FocusKeyManager (roving tabindex + focus),
+     * leaving Enter/Space activation to the individual headers.
+     */
+    protected _onHeaderKeydown(event: KeyboardEvent): void;
+    /**
+     * @private Resolve the index of the step header containing `target`, or `-1`.
+     */
+    private _focusedHeaderIndex;
+    /**
+     * Navigate to the next step (no-op if already at the last step).
+     */
+    next(): void;
+    /**
+     * Navigate to the previous step (no-op if already at the first step).
+     */
+    previous(): void;
+    /**
+     * Navigate directly to the step at `index`.
+     * In linear mode, forward navigation beyond the active step is blocked.
+     */
+    selectStep(index: number): void;
+    /** @protected Resolve the effective state for a given step. */
+    protected _stateFor(step: MlvStep): MlvStepState;
+    /** @protected Returns `true` if a step header is clickable. */
+    protected _isClickable(step: MlvStep): boolean;
+    /** @private Emit and update the active index. */
+    private _navigate;
+    /** @private Assign sequential indices to child step components. */
+    private _assignIndices;
+    /**
+     * @private Reflect the FocusKeyManager's active item into the roving
+     * tabindex: the active header is tabbable (`0`), all others are `-1`.
+     */
+    private _syncTabIndices;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvStepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvStepper, "mlv-stepper", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "initialIndex": { "alias": "initialIndex"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "activeIndexChange": "activeIndexChange"; }, ["_steps"], never, true, never>;
+}
+
+/** Interface exposed by the stepper container to child step components. */
+interface MlvStepperAccessor {
+    /** Current active step index (0-based). */
+    readonly activeIndex: () => number;
+    /** Orientation of the stepper layout. */
+    readonly orientation: () => MlvStepperOrientation;
+    /** Called by a step when the user clicks on its header to navigate. */
+    selectStep(index: number): void;
+}
+/** Injection token for `MlvStepper` → `MlvStep` communication. */
+declare const MLV_STEPPER: InjectionToken<MlvStepperAccessor>;
+
+export { MLV_STEPPER, MlvStep, MlvStepper };
+export type { MlvStepState, MlvStepperAccessor, MlvStepperOrientation };