@radix-ng/primitives 0.51.0 → 1.0.0-beta.0

package/types/radix-ng-primitives-preview-card.d.ts

@@ -0,0 +1,359 @@
+import * as _angular_core from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/presence';
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
+import * as i1$1 from '@radix-ng/primitives/popper';
+import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primitives/popper';
+import * as _radix_ng_primitives_preview_card from '@radix-ng/primitives/preview-card';
+import * as i1$2 from '@radix-ng/primitives/portal';
+import { RdxPortalContainer } from '@radix-ng/primitives/portal';
+import * as i2 from '@radix-ng/primitives/dismissable-layer';
+
+/**
+ * Mounts the portal while the preview-card is open and waits for CSS exit keyframes before unmounting.
+ */
+declare class RdxPreviewCardPortalPresence {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortalPresence, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortalPresence, "ng-template[rdxPreviewCardPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+}
+
+declare class RdxPreviewCardHandle<Payload = unknown> {
+    private readonly rootContext;
+    private readonly triggers;
+    private readonly rootTriggerCleanups;
+    readonly isOpen: _angular_core.Signal<boolean>;
+    open(triggerId: string): void;
+    close(): void;
+    toggle(triggerId: string, event?: Event): void;
+    registerRoot(rootContext: RdxPreviewCardRootContext): () => void;
+    registerTrigger(id: string, trigger: HTMLElement, payload: () => Payload | undefined): () => void;
+    context(): RdxPreviewCardRootContext | undefined;
+}
+declare function createRdxPreviewCardHandle<Payload = unknown>(): RdxPreviewCardHandle<Payload>;
+
+type RdxPreviewCardOpenChangeReason = 'trigger-hover' | 'trigger-focus' | 'trigger-press' | 'outside-press' | 'escape-key' | 'imperative-action' | 'none';
+interface RdxPreviewCardOpenChange {
+    open: boolean;
+    triggerId: string | null;
+    trigger: HTMLElement | undefined;
+    reason: RdxPreviewCardOpenChangeReason;
+    event: Event;
+}
+interface RdxPreviewCardRootContext {
+    contentId: string;
+    isOpen: Signal<boolean>;
+    trigger: Signal<HTMLElement | undefined>;
+    triggers: Signal<HTMLElement[]>;
+    isHoverActive: Signal<boolean>;
+    instant: Signal<boolean>;
+    openChangeReason: Signal<RdxPreviewCardOpenChangeReason>;
+    isPointerDownOnTrigger: Signal<boolean>;
+    close: (reason?: RdxPreviewCardOpenChangeReason, event?: Event) => void;
+    cancelHoverClose: () => void;
+    cancelHoverOpen: () => void;
+    closeOnHover: () => void;
+    payload: Signal<unknown>;
+    open: (trigger?: HTMLElement, payload?: unknown, triggerId?: string, reason?: RdxPreviewCardOpenChangeReason, event?: Event) => void;
+    openWithDelay: (trigger: HTMLElement, payload: unknown, triggerId: string, reason: RdxPreviewCardOpenChangeReason, event: Event) => void;
+    registerTrigger: (id: string, trigger: HTMLElement, payload: () => unknown) => () => void;
+    setPointerDownOnTrigger: (pointerDown: boolean) => void;
+    setHoverDelays: (delay: number, closeDelay: number) => void;
+    registerTransitionElement: (element: HTMLElement) => () => void;
+    transitionStatus: Signal<RdxPreviewCardTransitionStatus>;
+    registerViewport: (onTriggerChange: (previous: HTMLElement, next: HTMLElement) => void) => () => void;
+    toggle: (triggerId: string, trigger: HTMLElement, payload?: unknown, event?: Event) => void;
+}
+declare const injectRdxPreviewCardRootContext: (optional?: boolean) => RdxPreviewCardRootContext | null;
+declare const provideRdxPreviewCardRootContext: (useFactory: () => RdxPreviewCardRootContext) => _angular_core.Provider;
+type RdxPreviewCardTransitionStatus = 'starting' | 'ending' | undefined;
+/**
+ * Groups all parts of the preview-card.
+ */
+declare class RdxPreviewCardRoot {
+    private readonly popper;
+    private readonly destroyRef;
+    /** Shared open/close transition state machine (completes on the real animationend). */
+    private readonly transition;
+    private hasAppliedDefaultOpen;
+    private hasAppliedDefaultTriggerId;
+    private openTimer;
+    private closeTimer;
+    private hoverDelay;
+    private hoverCloseDelay;
+    private instantFrame;
+    readonly isHoverActive: _angular_core.WritableSignal<boolean>;
+    readonly instant: _angular_core.WritableSignal<boolean>;
+    readonly openChangeReason: _angular_core.WritableSignal<RdxPreviewCardOpenChangeReason>;
+    readonly transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
+    /**
+     * Whether the preview-card is currently open.
+     */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the preview-card is initially open.
+     */
+    readonly defaultOpen: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * ID of the trigger associated with a controlled preview-card.
+     */
+    readonly triggerId: _angular_core.ModelSignal<string | null>;
+    /**
+     * ID of the trigger associated with an initially open uncontrolled preview-card.
+     */
+    readonly defaultTriggerId: _angular_core.InputSignal<string | null>;
+    /**
+     * Associates this root with detached trigger elements.
+     */
+    readonly handle: _angular_core.InputSignal<RdxPreviewCardHandle<any> | undefined>;
+    readonly contentId: string;
+    readonly trigger: _angular_core.WritableSignal<HTMLElement | undefined>;
+    readonly triggers: _angular_core.WritableSignal<HTMLElement[]>;
+    readonly payload: _angular_core.WritableSignal<unknown>;
+    readonly isPointerDownOnTrigger: _angular_core.WritableSignal<boolean>;
+    readonly onOpenChange: _angular_core.OutputEmitterRef<RdxPreviewCardOpenChange>;
+    readonly onOpenChangeComplete: _angular_core.OutputEmitterRef<boolean>;
+    private readonly registeredTriggers;
+    private readonly viewportTriggerChange;
+    readonly state: Signal<"open" | "closed">;
+    constructor();
+    show(trigger?: HTMLElement | undefined, payload?: unknown, triggerId?: string, reason?: RdxPreviewCardOpenChangeReason, event?: Event, fromHover?: boolean): void;
+    close(reason?: RdxPreviewCardOpenChangeReason, event?: Event): void;
+    toggle(triggerId: string, trigger: HTMLElement, payload?: unknown, event?: Event): void;
+    openWithDelay(trigger: HTMLElement, payload: unknown, triggerId: string, reason: RdxPreviewCardOpenChangeReason, event: Event): void;
+    closeOnHover(): void;
+    cancelHoverClose(): void;
+    cancelHoverOpen(): void;
+    setHoverDelays(delay: number, closeDelay: number): void;
+    registerTrigger(id: string, trigger: HTMLElement, payload: () => unknown): () => void;
+    registerViewport(onTriggerChange: (previous: HTMLElement, next: HTMLElement) => void): () => boolean;
+    registerTransitionElement(element: HTMLElement): () => void;
+    private syncTriggerId;
+    private emitOpenChange;
+    private clearHoverTimers;
+    private clearOpenTimer;
+    private clearCloseTimer;
+    private scheduleInstantReset;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardRoot, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardRoot, "[rdxPreviewCardRoot]", ["rdxPreviewCardRoot"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "triggerId": { "alias": "triggerId"; "required": false; "isSignal": true; }; "defaultTriggerId": { "alias": "defaultTriggerId"; "required": false; "isSignal": true; }; "handle": { "alias": "handle"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "triggerId": "triggerIdChange"; "onOpenChange": "onOpenChange"; "onOpenChangeComplete": "onOpenChangeComplete"; }, never, never, true, [{ directive: typeof i1$1.RdxPopper; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * A link or element that opens the preview card.
+ */
+declare class RdxPreviewCardTrigger {
+    private readonly parentRootContext;
+    readonly elementRef: ElementRef<HTMLElement>;
+    /**
+     * Associates this trigger with a detached preview-card root.
+     */
+    readonly handle: _angular_core.InputSignal<RdxPreviewCardHandle<any> | undefined>;
+    /**
+     * Data associated with this trigger while it is active.
+     */
+    readonly payload: _angular_core.InputSignal<unknown>;
+    /**
+     * ID used to identify this trigger when opening a detached preview-card imperatively.
+     */
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the trigger should ignore user interaction.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * How long to wait before opening the preview-card on hover, in milliseconds.
+     */
+    readonly delay: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * How long to wait before closing a hover-opened preview-card, in milliseconds.
+     */
+    readonly closeDelay: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    protected readonly triggerId: _angular_core.Signal<string>;
+    protected readonly rootContext: _angular_core.Signal<_radix_ng_primitives_preview_card.RdxPreviewCardRootContext | null>;
+    protected readonly isOpen: _angular_core.Signal<boolean>;
+    protected readonly isPressed: _angular_core.Signal<boolean>;
+    private readonly generatedId;
+    constructor();
+    protected handleClick(event: MouseEvent): void;
+    protected handlePointerEnter(event: PointerEvent): void;
+    protected handlePointerLeave(event: PointerEvent): void;
+    protected handleFocus(event: FocusEvent): void;
+    protected handleBlur(event: FocusEvent): void;
+    protected handlePointerDown(): void;
+    protected handlePointerUp(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardTrigger, "[rdxPreviewCardTrigger]", never, { "handle": { "alias": "handle"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxPopperAnchor; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Moves the preview-card to a different part of the DOM.
+ */
+declare class RdxPreviewCardPortal {
+    protected readonly rootContext: _radix_ng_primitives_preview_card.RdxPreviewCardRootContext;
+    /**
+     * Optional container to portal the content into. Defaults to `document.body`.
+     */
+    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortal, "[rdxPreviewCardPortal]", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$2.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
+}
+
+/**
+ * An optional backdrop rendered behind the popup.
+ */
+declare class RdxPreviewCardBackdrop {
+    protected readonly rootContext: _radix_ng_primitives_preview_card.RdxPreviewCardRootContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardBackdrop, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardBackdrop, "[rdxPreviewCardBackdrop]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Positions the preview-card against its trigger.
+ */
+declare class RdxPreviewCardPositioner {
+    protected readonly rootContext: _radix_ng_primitives_preview_card.RdxPreviewCardRootContext;
+    protected readonly wrapper: RdxPopperContentWrapper;
+    private readonly elementRef;
+    private readonly triggerEl;
+    private readonly containerEl;
+    private readonly graceArea;
+    /**
+     * An element to position the popup against. Defaults to the trigger.
+     */
+    readonly anchor: _angular_core.InputSignal<RdxPopperAnchorElement>;
+    /**
+     * The preferred side of the trigger to render against when open.
+     */
+    readonly side: _angular_core.InputSignal<"top" | "right" | "bottom" | "left">;
+    /**
+     * Distance between the trigger and the popup in pixels.
+     */
+    readonly sideOffset: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * How to align the popup relative to the specified side.
+     */
+    readonly align: _angular_core.InputSignal<"start" | "center" | "end">;
+    /**
+     * An offset in pixels from the `start` or `end` alignment options.
+     */
+    readonly alignOffset: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Minimum distance to maintain between the arrow and the edges of the popup.
+     */
+    readonly arrowPadding: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Whether to override side and alignment preferences to prevent collisions.
+     */
+    readonly avoidCollisions: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The element used as the collision boundary.
+     */
+    readonly collisionBoundary: _angular_core.InputSignal<ElementRef<HTMLElement> | ElementRef<HTMLElement>[] | undefined>;
+    /**
+     * Distance in pixels from the boundary edges where collision detection should occur.
+     */
+    readonly collisionPadding: _angular_core.InputSignal<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
+    /**
+     * The sticky behavior on the alignment axis.
+     */
+    readonly sticky: _angular_core.InputSignal<"always" | "partial">;
+    /**
+     * Whether to hide the popup when the trigger becomes fully occluded.
+     */
+    readonly hideWhenDetached: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The CSS position strategy used by Floating UI.
+     */
+    readonly positionStrategy: _angular_core.InputSignal<"fixed" | "absolute">;
+    /**
+     * Whether to update position on every animation frame.
+     */
+    readonly updatePositionStrategy: _angular_core.InputSignal<"always" | "optimized">;
+    /**
+     * Emits when the popup has been placed.
+     */
+    readonly placed: _angular_core.OutputRef<void>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPositioner, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPositioner, "[rdxPreviewCardPositioner]", never, { "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "sideOffset": { "alias": "sideOffset"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "alignOffset": { "alias": "alignOffset"; "required": false; "isSignal": true; }; "arrowPadding": { "alias": "arrowPadding"; "required": false; "isSignal": true; }; "avoidCollisions": { "alias": "avoidCollisions"; "required": false; "isSignal": true; }; "collisionBoundary": { "alias": "collisionBoundary"; "required": false; "isSignal": true; }; "collisionPadding": { "alias": "collisionPadding"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "hideWhenDetached": { "alias": "hideWhenDetached"; "required": false; "isSignal": true; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; "isSignal": true; }; "updatePositionStrategy": { "alias": "updatePositionStrategy"; "required": false; "isSignal": true; }; }, { "placed": "placed"; }, never, never, true, [{ directive: typeof i1$1.RdxPopperContentWrapper; inputs: { "anchor": "anchor"; "side": "side"; "sideOffset": "sideOffset"; "align": "align"; "alignOffset": "alignOffset"; "arrowPadding": "arrowPadding"; "avoidCollisions": "avoidCollisions"; "collisionBoundary": "collisionBoundary"; "collisionPadding": "collisionPadding"; "sticky": "sticky"; "hideWhenDetached": "hideWhenDetached"; "positionStrategy": "positionStrategy"; "updatePositionStrategy": "updatePositionStrategy"; }; outputs: {}; }]>;
+}
+
+/**
+ * A container for the preview-card contents.
+ */
+declare class RdxPreviewCardPopup {
+    protected readonly rootContext: _radix_ng_primitives_preview_card.RdxPreviewCardRootContext;
+    private readonly dismissableLayer;
+    private readonly wrapper;
+    protected readonly align: _angular_core.Signal<"start" | "center" | "end" | undefined>;
+    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    private dismissDetails;
+    /**
+     * Event handler called when the escape key is down. Can be prevented.
+     */
+    readonly escapeKeyDown: _angular_core.OutputRef<KeyboardEvent>;
+    /**
+     * Event handler called when a pointerdown event happens outside of the popup. Can be prevented.
+     */
+    readonly pointerDownOutside: _angular_core.OutputRef<PointerEvent>;
+    /**
+     * Event handler called when focus moves outside of the popup. Can be prevented.
+     */
+    readonly focusOutside: _angular_core.OutputRef<FocusEvent>;
+    /**
+     * Event handler called when an interaction happens outside of the popup. Can be prevented.
+     */
+    readonly interactOutside: _angular_core.OutputRef<PointerEvent | FocusEvent>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPopup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPopup, "[rdxPreviewCardPopup]", never, {}, { "escapeKeyDown": "escapeKeyDown"; "pointerDownOutside": "pointerDownOutside"; "focusOutside": "focusOutside"; "interactOutside": "interactOutside"; }, never, never, true, [{ directive: typeof i1$1.RdxPopperContent; inputs: {}; outputs: {}; }, { directive: typeof i2.RdxDismissableLayer; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * An optional arrow element rendered alongside the preview-card.
+ */
+declare class RdxPreviewCardArrow {
+    protected readonly rootContext: _radix_ng_primitives_preview_card.RdxPreviewCardRootContext;
+    private readonly wrapper;
+    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly align: _angular_core.Signal<"start" | "center" | "end" | undefined>;
+    protected readonly uncentered: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardArrow, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardArrow, "[rdxPreviewCardArrow]", never, {}, {}, never, never, true, [{ directive: typeof i1$1.RdxPopperArrow; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * A viewport for animating content changes when a preview-card moves between triggers.
+ *
+ * Render one direct child inside the viewport. It is marked with `data-current`;
+ * when the active trigger changes, a DOM snapshot is retained as `data-previous`
+ * until its CSS animation or transition completes.
+ */
+declare class RdxPreviewCardViewport {
+    private readonly rootContext;
+    private readonly elementRef;
+    private readonly destroyRef;
+    private previous;
+    private cleanupTimer;
+    private observer;
+    protected readonly activationDirection: _angular_core.WritableSignal<string | undefined>;
+    protected readonly transitioning: _angular_core.WritableSignal<boolean>;
+    constructor();
+    private startTransition;
+    private markCurrent;
+    private current;
+    private scheduleCleanup;
+    private cleanupPrevious;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardViewport, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardViewport, "[rdxPreviewCardViewport]", never, {}, {}, never, never, true, never>;
+}
+
+declare const previewCardImports: (typeof RdxPreviewCardPortalPresence)[];
+declare class RdxPreviewCardModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPreviewCardModule, never, [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortalPresence, typeof RdxPreviewCardPortal, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport], [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortalPresence, typeof RdxPreviewCardPortal, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxPreviewCardModule>;
+}
+
+export { RdxPreviewCardArrow, RdxPreviewCardBackdrop, RdxPreviewCardHandle, RdxPreviewCardModule, RdxPreviewCardPopup, RdxPreviewCardPortal, RdxPreviewCardPortalPresence, RdxPreviewCardPositioner, RdxPreviewCardRoot, RdxPreviewCardTrigger, RdxPreviewCardViewport, createRdxPreviewCardHandle, injectRdxPreviewCardRootContext, previewCardImports, provideRdxPreviewCardRootContext };
+export type { RdxPreviewCardOpenChange, RdxPreviewCardOpenChangeReason, RdxPreviewCardRootContext, RdxPreviewCardTransitionStatus };

package/types/radix-ng-primitives-progress.d.ts

@@ -1,80 +1,206 @@
-import * as i0 from '@angular/core';
-import { InjectionToken } from '@angular/core';
+import * as _angular_core from '@angular/core';
 import * as _radix_ng_primitives_progress from '@radix-ng/primitives/progress';
 
-declare const RdxProgressToken: InjectionToken<RdxProgressRootDirective>;
-/**
- * Injects the current instance of RdxProgressRootDirective.
- * @returns The instance of RdxProgressRootDirective.
- */
-declare function injectProgress(): RdxProgressRootDirective;
-type ProgressState = 'indeterminate' | 'complete' | 'loading';
+type ProgressState = 'indeterminate' | 'complete' | 'progressing';
+type ProgressValueFormatter = (value: number, min: number, max: number) => string;
 interface ProgressProps {
     value?: number | null;
+    min?: number;
     max?: number;
-    /**
-     * A function to get the accessible label text representing the current value in a human-readable format.
-     *
-     *  If not provided, the value label will be read as the numeric value as a percentage of the max value.
-     */
-    getValueLabel?: (value: number, max: number) => string;
+    valueLabel?: ProgressValueFormatter;
 }
+declare const progressRootContext: () => {
+    labelId: _angular_core.InputSignal<string>;
+    valueId: _angular_core.InputSignal<string>;
+    minState: _angular_core.Signal<number>;
+    maxState: _angular_core.Signal<number>;
+    valueState: _angular_core.Signal<number | null>;
+    percentageState: _angular_core.Signal<number | null>;
+    valueLabelState: _angular_core.Signal<string | undefined>;
+    progressState: _angular_core.Signal<ProgressState>;
+    completeState: _angular_core.Signal<boolean>;
+    progressingState: _angular_core.Signal<boolean>;
+    indeterminateState: _angular_core.Signal<boolean>;
+};
+type RdxProgressRootContext = ReturnType<typeof progressRootContext>;
+declare const injectProgressRootContext: (optional?: boolean) => {
+    labelId: _angular_core.InputSignal<string>;
+    valueId: _angular_core.InputSignal<string>;
+    minState: _angular_core.Signal<number>;
+    maxState: _angular_core.Signal<number>;
+    valueState: _angular_core.Signal<number | null>;
+    percentageState: _angular_core.Signal<number | null>;
+    valueLabelState: _angular_core.Signal<string | undefined>;
+    progressState: _angular_core.Signal<ProgressState>;
+    completeState: _angular_core.Signal<boolean>;
+    progressingState: _angular_core.Signal<boolean>;
+    indeterminateState: _angular_core.Signal<boolean>;
+} | null;
+declare const provideProgressRootContext: (useFactory: () => {
+    labelId: _angular_core.InputSignal<string>;
+    valueId: _angular_core.InputSignal<string>;
+    minState: _angular_core.Signal<number>;
+    maxState: _angular_core.Signal<number>;
+    valueState: _angular_core.Signal<number | null>;
+    percentageState: _angular_core.Signal<number | null>;
+    valueLabelState: _angular_core.Signal<string | undefined>;
+    progressState: _angular_core.Signal<ProgressState>;
+    completeState: _angular_core.Signal<boolean>;
+    progressingState: _angular_core.Signal<boolean>;
+    indeterminateState: _angular_core.Signal<boolean>;
+}) => _angular_core.Provider;
 /**
- * Directive to manage progress bar state and attributes.
- *
- * This directive provides a way to create a progress bar with customizable value and max attributes.
- * It handles aria attributes for accessibility and provides different states like 'indeterminate', 'complete', and 'loading'.
+ * Provides progress state and accessibility attributes.
  *
  * @group Components
  */
 declare class RdxProgressRootDirective {
     /**
-     * The current value of the progress bar.
+     * Current progress value. Set to `null` for indeterminate progress.
+     *
+     * @group Props
+     * @defaultValue null
+     */
+    readonly value: _angular_core.InputSignalWithTransform<number | null, number | null>;
+    /**
+     * Minimum progress value.
+     *
      * @group Props
      * @defaultValue 0
      */
-    readonly value: i0.ModelSignal<number>;
+    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
     /**
-     * The maximum value of the progress bar.
-     * @defaultValue 100
+     * Maximum progress value.
+     *
      * @group Props
+     * @defaultValue 100
      */
-    readonly max: i0.ModelSignal<number>;
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
     /**
-     * Function to generate the value label.
+     * Formats the current value for assistive technologies and `rdxProgressValue`.
+     *
      * @group Props
      */
-    readonly valueLabel: i0.InputSignal<(value: number, max: number) => string>;
-    protected readonly label: i0.Signal<string>;
-    readonly progressState: i0.Signal<ProgressState>;
-    constructor();
-    private validateValue;
-    private validateMax;
-    private defaultGetValueLabel;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxProgressRootDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxProgressRootDirective, "[rdxProgressRoot]", ["rdxProgressRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "max": "maxChange"; }, never, never, true, never>;
+    readonly valueLabel: _angular_core.InputSignal<ProgressValueFormatter>;
+    readonly labelId: _angular_core.InputSignal<string>;
+    readonly valueId: _angular_core.InputSignal<string>;
+    readonly minState: _angular_core.Signal<number>;
+    readonly maxState: _angular_core.Signal<number>;
+    readonly valueState: _angular_core.Signal<number | null>;
+    readonly percentageState: _angular_core.Signal<number | null>;
+    readonly valueLabelState: _angular_core.Signal<string | undefined>;
+    readonly progressState: _angular_core.Signal<ProgressState>;
+    readonly completeState: _angular_core.Signal<boolean>;
+    readonly progressingState: _angular_core.Signal<boolean>;
+    readonly indeterminateState: _angular_core.Signal<boolean>;
+    protected readonly dataAttr: (value: boolean) => "" | undefined;
+    private valueTransform;
+    private defaultValueLabel;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxProgressRootDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxProgressRootDirective, "[rdxProgressRoot]", ["rdxProgressRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; "labelId": { "alias": "labelId"; "required": false; "isSignal": true; }; "valueId": { "alias": "valueId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Labels the progress task.
+ *
+ * @group Components
+ */
+declare class RdxProgressLabelDirective {
+    protected readonly progress: {
+        labelId: _angular_core.InputSignal<string>;
+        valueId: _angular_core.InputSignal<string>;
+        minState: _angular_core.Signal<number>;
+        maxState: _angular_core.Signal<number>;
+        valueState: _angular_core.Signal<number | null>;
+        percentageState: _angular_core.Signal<number | null>;
+        valueLabelState: _angular_core.Signal<string | undefined>;
+        progressState: _angular_core.Signal<_radix_ng_primitives_progress.ProgressState>;
+        completeState: _angular_core.Signal<boolean>;
+        progressingState: _angular_core.Signal<boolean>;
+        indeterminateState: _angular_core.Signal<boolean>;
+    };
+    protected readonly dataAttr: (value: boolean) => "" | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxProgressLabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxProgressLabelDirective, "[rdxProgressLabel]", ["rdxProgressLabel"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Displays the formatted progress value.
+ *
+ * @group Components
+ */
+declare class RdxProgressValueDirective {
+    protected readonly progress: {
+        labelId: _angular_core.InputSignal<string>;
+        valueId: _angular_core.InputSignal<string>;
+        minState: _angular_core.Signal<number>;
+        maxState: _angular_core.Signal<number>;
+        valueState: _angular_core.Signal<number | null>;
+        percentageState: _angular_core.Signal<number | null>;
+        valueLabelState: _angular_core.Signal<string | undefined>;
+        progressState: _angular_core.Signal<_radix_ng_primitives_progress.ProgressState>;
+        completeState: _angular_core.Signal<boolean>;
+        progressingState: _angular_core.Signal<boolean>;
+        indeterminateState: _angular_core.Signal<boolean>;
+    };
+    protected readonly dataAttr: (value: boolean) => "" | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxProgressValueDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxProgressValueDirective, "[rdxProgressValue]", ["rdxProgressValue"], {}, {}, never, never, true, never>;
 }
 
 /**
- * Directive to manage progress indicator state and attributes.
+ * Contains the visual progress indicator.
  *
- * This directive is used to display the progress indicator inside the progress bar.
- * It inherits the state and value from the `RdxProgressRootDirective`.
+ * @group Components
+ */
+declare class RdxProgressTrackDirective {
+    protected readonly progress: {
+        labelId: _angular_core.InputSignal<string>;
+        valueId: _angular_core.InputSignal<string>;
+        minState: _angular_core.Signal<number>;
+        maxState: _angular_core.Signal<number>;
+        valueState: _angular_core.Signal<number | null>;
+        percentageState: _angular_core.Signal<number | null>;
+        valueLabelState: _angular_core.Signal<string | undefined>;
+        progressState: _angular_core.Signal<_radix_ng_primitives_progress.ProgressState>;
+        completeState: _angular_core.Signal<boolean>;
+        progressingState: _angular_core.Signal<boolean>;
+        indeterminateState: _angular_core.Signal<boolean>;
+    };
+    protected readonly dataAttr: (value: boolean) => "" | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxProgressTrackDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxProgressTrackDirective, "[rdxProgressTrack]", ["rdxProgressTrack"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Displays the visual progress fill.
+ *
+ * @group Components
  */
 declare class RdxProgressIndicatorDirective {
-    /**
-     * This allows the directive to access the progress bar state and values.
-     */
-    protected readonly progress: _radix_ng_primitives_progress.RdxProgressRootDirective;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxProgressIndicatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxProgressIndicatorDirective, "[rdxProgressIndicator]", ["rdxProgressIndicator"], {}, {}, never, never, true, never>;
+    protected readonly progress: {
+        labelId: _angular_core.InputSignal<string>;
+        valueId: _angular_core.InputSignal<string>;
+        minState: _angular_core.Signal<number>;
+        maxState: _angular_core.Signal<number>;
+        valueState: _angular_core.Signal<number | null>;
+        percentageState: _angular_core.Signal<number | null>;
+        valueLabelState: _angular_core.Signal<string | undefined>;
+        progressState: _angular_core.Signal<_radix_ng_primitives_progress.ProgressState>;
+        completeState: _angular_core.Signal<boolean>;
+        progressingState: _angular_core.Signal<boolean>;
+        indeterminateState: _angular_core.Signal<boolean>;
+    };
+    protected readonly dataAttr: (value: boolean) => "" | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxProgressIndicatorDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxProgressIndicatorDirective, "[rdxProgressIndicator]", ["rdxProgressIndicator"], {}, {}, never, never, true, never>;
 }
 
 declare class RdxProgressModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxProgressModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxProgressModule, never, [typeof RdxProgressRootDirective, typeof RdxProgressIndicatorDirective], [typeof RdxProgressRootDirective, typeof RdxProgressIndicatorDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<RdxProgressModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxProgressModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxProgressModule, never, [typeof RdxProgressRootDirective, typeof RdxProgressLabelDirective, typeof RdxProgressValueDirective, typeof RdxProgressTrackDirective, typeof RdxProgressIndicatorDirective], [typeof RdxProgressRootDirective, typeof RdxProgressLabelDirective, typeof RdxProgressValueDirective, typeof RdxProgressTrackDirective, typeof RdxProgressIndicatorDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxProgressModule>;
 }
 
-export { RdxProgressIndicatorDirective, RdxProgressModule, RdxProgressRootDirective, RdxProgressToken, injectProgress };
-export type { ProgressProps, ProgressState };
+export { RdxProgressIndicatorDirective, RdxProgressLabelDirective, RdxProgressModule, RdxProgressRootDirective, RdxProgressTrackDirective, RdxProgressValueDirective, injectProgressRootContext, provideProgressRootContext };
+export type { ProgressProps, ProgressState, ProgressValueFormatter, RdxProgressRootContext };