ng-primitives 0.37.0 → 0.38.0

package/meter/meter-indicator/meter-indicator.d.ts

@@ -2,9 +2,9 @@ import * as i0 from "@angular/core";
 export declare class NgpMeterIndicator {
     /** Access the meter */
     protected readonly meter: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly valueLabel: import("@angular/core").InputSignal<import("../meter/meter").NgpMeterValueTextFn>;
         readonly label: import("@angular/core").WritableSignal<import("ng-primitives/meter").NgpMeterLabel | null>;
         readonly percentage: import("@angular/core").Signal<number>;

package/meter/meter-label/meter-label.d.ts

@@ -2,9 +2,9 @@ import * as i0 from "@angular/core";
 export declare class NgpMeterLabel {
     /** Access the meter */
     protected readonly meter: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly valueLabel: import("@angular/core").InputSignal<import("../meter/meter").NgpMeterValueTextFn>;
         readonly label: import("@angular/core").WritableSignal<NgpMeterLabel | null>;
         readonly percentage: import("@angular/core").Signal<number>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "ng-primitives",
   "description": "Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. ",
   "license": "Apache-2.0",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "keywords": [
     "angular",
     "primitives",
@@ -67,14 +67,14 @@
       "types": "./a11y/index.d.ts",
       "default": "./fesm2022/ng-primitives-a11y.mjs"
     },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "default": "./fesm2022/ng-primitives-accordion.mjs"
-    },
     "./autofill": {
       "types": "./autofill/index.d.ts",
       "default": "./fesm2022/ng-primitives-autofill.mjs"
     },
+    "./accordion": {
+      "types": "./accordion/index.d.ts",
+      "default": "./fesm2022/ng-primitives-accordion.mjs"
+    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/ng-primitives-avatar.mjs"
@@ -99,14 +99,14 @@
       "types": "./date-time/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-time.mjs"
     },
-    "./date-time-luxon": {
-      "types": "./date-time-luxon/index.d.ts",
-      "default": "./fesm2022/ng-primitives-date-time-luxon.mjs"
-    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "default": "./fesm2022/ng-primitives-dialog.mjs"
     },
+    "./date-time-luxon": {
+      "types": "./date-time-luxon/index.d.ts",
+      "default": "./fesm2022/ng-primitives-date-time-luxon.mjs"
+    },
     "./file-upload": {
       "types": "./file-upload/index.d.ts",
       "default": "./fesm2022/ng-primitives-file-upload.mjs"

package/pagination/pagination/pagination-state.d.ts

@@ -11,9 +11,9 @@ export declare const providePaginationState: (options?: import("ng-primitives/st
  * Injects the Pagination state.
  */
 export declare const injectPaginationState: <U = {
-    readonly page: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+    readonly page: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
     readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
-    readonly pageCount: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+    readonly pageCount: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly firstPage: import("@angular/core").Signal<boolean>;
     readonly lastPage: import("@angular/core").Signal<boolean>;

package/pagination/pagination-first/pagination-first.d.ts

@@ -9,9 +9,9 @@ export declare class NgpPaginationFirst {
      * Access the pagination state.
      */
     protected readonly paginationState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly page: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly page: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly pageCount: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly pageCount: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
         readonly firstPage: import("@angular/core").Signal<boolean>;
         readonly lastPage: import("@angular/core").Signal<boolean>;

package/pagination/pagination-next/pagination-next.d.ts

@@ -9,9 +9,9 @@ export declare class NgpPaginationNext {
      * Access the pagination state.
      */
     protected readonly paginationState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly page: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly page: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly pageCount: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly pageCount: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
         readonly firstPage: import("@angular/core").Signal<boolean>;
         readonly lastPage: import("@angular/core").Signal<boolean>;

package/pagination/pagination-previous/pagination-previous.d.ts

@@ -9,9 +9,9 @@ export declare class NgpPaginationPrevious {
      * Access the pagination state.
      */
     protected readonly paginationState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly page: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly page: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly pageCount: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly pageCount: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
         readonly firstPage: import("@angular/core").Signal<boolean>;
         readonly lastPage: import("@angular/core").Signal<boolean>;

package/popover/popover/popover.d.ts

@@ -1,5 +1,4 @@
-import { FocusOrigin, InteractivityChecker } from '@angular/cdk/a11y';
-import { NgpFocusTrap } from 'ng-primitives/focus-trap';
+import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/focus-trap";
 import * as i2 from "ng-primitives/internal";
@@ -19,35 +18,6 @@ export declare class NgpPopover {
      * Access the focus monitor.
      */
     private readonly focusMonitor;
-    /**
-     * Access the focus trap.
-     * @internal
-     */
-    readonly focusTrap: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly focusTrap: {
-            active: boolean;
-            activate(): void;
-            deactivate(): void;
-        };
-        readonly interactivityChecker: import("@angular/cdk/a11y-module.d-DrV0SO0k").InteractivityChecker;
-        readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
-        readonly ngZone: import("@angular/core").NgZone;
-        mutationObserver: MutationObserver | null;
-        lastFocusedElement: HTMLElement | null;
-        readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-        readonly state: import("ng-primitives/state").CreatedState<NgpFocusTrap>;
-        ngOnInit: () => void;
-        ngOnDestroy: () => void;
-        handleFocusIn: (event: FocusEvent) => void;
-        handleFocusOut: (event: FocusEvent) => void;
-        handleMutations: (mutations: MutationRecord[]) => void;
-        handleKeyDown: (event: KeyboardEvent) => void;
-        getTabbableEdges: (container: HTMLElement) => readonly [HTMLElement | null, HTMLElement | null];
-        getTabbableCandidates: (container: HTMLElement) => HTMLElement[];
-        findVisible: (elements: HTMLElement[]) => HTMLElement | null;
-        focus: (element?: HTMLElement | null) => void;
-        focusFirst: () => void;
-    }>>;
     /**
      * Access the trigger instance.
      */

package/progress/index.d.ts

@@ -1,3 +1,6 @@
 export { NgpProgressIndicator } from './progress-indicator/progress-indicator';
-export { NgpProgress, NgpProgressValueLabelFn } from './progress/progress';
+export { NgpProgressLabel } from './progress-label/progress-label';
+export { NgpProgressTrack } from './progress-track/progress-track';
+export { NgpProgressValue } from './progress-value/progress-value';
+export { NgpProgress, NgpProgressValueTextFn } from './progress/progress';
 export { injectProgressState, provideProgressState } from './progress/progress-state';

package/progress/progress/progress-state.d.ts

@@ -11,11 +11,15 @@ export declare const provideProgressState: (options?: import("ng-primitives/stat
  * Injects the Progress state.
  */
 export declare const injectProgressState: <U = {
-    readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-    readonly valueLabel: import("@angular/core").InputSignal<import("./progress").NgpProgressValueLabelFn>;
-    readonly dataState: import("@angular/core").Signal<"indeterminate" | "complete" | "loading">;
-    readonly label: import("@angular/core").Signal<string>;
+    readonly value: import("@angular/core").InputSignalWithTransform<number | null, import("@angular/cdk/coercion").NumberInput>;
+    readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+    readonly valueLabel: import("@angular/core").InputSignal<import("./progress").NgpProgressValueTextFn>;
+    readonly indeterminate: import("@angular/core").Signal<boolean>;
+    readonly progressing: import("@angular/core").Signal<boolean>;
+    readonly complete: import("@angular/core").Signal<boolean>;
+    readonly valueText: import("@angular/core").Signal<string>;
+    readonly label: import("@angular/core").WritableSignal<import("ng-primitives/progress").NgpProgressLabel | null>;
     readonly state: import("ng-primitives/state").CreatedState<NgpProgress>;
 }>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**

package/progress/progress/progress.d.ts

@@ -1,4 +1,5 @@
 import { NumberInput } from '@angular/cdk/coercion';
+import { NgpProgressLabel } from '../progress-label/progress-label';
 import * as i0 from "@angular/core";
 /**
  * Apply the `ngpProgress` directive to an element that represents the progress bar.
@@ -7,7 +8,12 @@ export declare class NgpProgress {
     /**
      * Define the progress value.
      */
-    readonly value: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    readonly value: import("@angular/core").InputSignalWithTransform<number | null, NumberInput>;
+    /**
+     * Define the progress min value.
+     * @default '0'
+     */
+    readonly min: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
     /**
      * Define the progress max value.
      * @default 100
@@ -19,23 +25,37 @@ export declare class NgpProgress {
      * @param max The maximum value
      * @returns The value label
      */
-    readonly valueLabel: import("@angular/core").InputSignal<NgpProgressValueLabelFn>;
+    readonly valueLabel: import("@angular/core").InputSignal<NgpProgressValueTextFn>;
+    /**
+     * Determine if the progress is indeterminate.
+     * @internal
+     */
+    readonly indeterminate: import("@angular/core").Signal<boolean>;
     /**
-     * Get the state of the progress bar.
-     * @returns 'indeterminate' | 'loading' | 'complete'
+     * Determine if the progress is in a progressing state.
      * @internal
      */
-    protected readonly dataState: import("@angular/core").Signal<"indeterminate" | "complete" | "loading">;
+    readonly progressing: import("@angular/core").Signal<boolean>;
     /**
-     * Get the progress value label.
+     * Determine if the progress is complete.
+     * @internal
+     */
+    readonly complete: import("@angular/core").Signal<boolean>;
+    /**
+     * Get the progress value text.
+     */
+    protected readonly valueText: import("@angular/core").Signal<string>;
+    /**
+     * The label associated with the progress bar.
+     * @internal
      */
-    protected readonly label: import("@angular/core").Signal<string>;
+    readonly label: import("@angular/core").WritableSignal<NgpProgressLabel | null>;
     /**
      * The state of the progress bar.
      * @internal
      */
     protected readonly state: import("ng-primitives/state").CreatedState<NgpProgress>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpProgress, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpProgress, "[ngpProgress]", never, { "value": { "alias": "ngpProgressValue"; "required": false; "isSignal": true; }; "max": { "alias": "ngpProgressMax"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "ngpProgressValueLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpProgress, "[ngpProgress]", never, { "value": { "alias": "ngpProgressValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpProgressMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpProgressMax"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "ngpProgressValueLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-export type NgpProgressValueLabelFn = (value: number, max: number) => string;
+export type NgpProgressValueTextFn = (value: number, max: number) => string;

package/progress/progress-indicator/progress-indicator.d.ts

@@ -8,13 +8,21 @@ export declare class NgpProgressIndicator {
      * Access the progress state.
      */
     protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly valueLabel: import("@angular/core").InputSignal<import("ng-primitives/progress").NgpProgressValueLabelFn>;
-        readonly dataState: import("@angular/core").Signal<"indeterminate" | "complete" | "loading">;
-        readonly label: import("@angular/core").Signal<string>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number | null, import("@angular/cdk/coercion").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly valueLabel: import("@angular/core").InputSignal<import("ng-primitives/progress").NgpProgressValueTextFn>;
+        readonly indeterminate: import("@angular/core").Signal<boolean>;
+        readonly progressing: import("@angular/core").Signal<boolean>;
+        readonly complete: import("@angular/core").Signal<boolean>;
+        readonly valueText: import("@angular/core").Signal<string>;
+        readonly label: import("@angular/core").WritableSignal<import("ng-primitives/progress").NgpProgressLabel | null>;
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/progress").NgpProgress>;
     }>>;
+    /**
+     * Get the percentage of the progress value.
+     */
+    protected readonly percentage: import("@angular/core").Signal<number | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpProgressIndicator, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpProgressIndicator, "[ngpProgressIndicator]", never, {}, {}, never, never, true, never>;
 }

package/progress/progress-label/progress-label.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+export declare class NgpProgressLabel {
+    /**
+     * Access the progress state.
+     */
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
+        readonly value: import("@angular/core").InputSignalWithTransform<number | null, import("@angular/cdk/coercion").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly valueLabel: import("@angular/core").InputSignal<import("ng-primitives/progress").NgpProgressValueTextFn>;
+        readonly indeterminate: import("@angular/core").Signal<boolean>;
+        readonly progressing: import("@angular/core").Signal<boolean>;
+        readonly complete: import("@angular/core").Signal<boolean>;
+        readonly valueText: import("@angular/core").Signal<string>;
+        readonly label: import("@angular/core").WritableSignal<NgpProgressLabel | null>;
+        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/progress").NgpProgress>;
+    }>>;
+    /**
+     * The unique identifier for the progress label.
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpProgressLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpProgressLabel, "[ngpProgressLabel]", ["ngpProgressLabel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/progress/progress-track/progress-track.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+export declare class NgpProgressTrack {
+    /**
+     * Access the progress state.
+     */
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
+        readonly value: import("@angular/core").InputSignalWithTransform<number | null, import("@angular/cdk/coercion").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly valueLabel: import("@angular/core").InputSignal<import("ng-primitives/progress").NgpProgressValueTextFn>;
+        readonly indeterminate: import("@angular/core").Signal<boolean>;
+        readonly progressing: import("@angular/core").Signal<boolean>;
+        readonly complete: import("@angular/core").Signal<boolean>;
+        readonly valueText: import("@angular/core").Signal<string>;
+        readonly label: import("@angular/core").WritableSignal<import("ng-primitives/progress").NgpProgressLabel | null>;
+        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/progress").NgpProgress>;
+    }>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpProgressTrack, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpProgressTrack, "[ngpProgressTrack]", ["ngpProgressTrack"], {}, {}, never, never, true, never>;
+}

package/progress/progress-value/progress-value.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+export declare class NgpProgressValue {
+    /**
+     * Access the progress state.
+     */
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
+        readonly value: import("@angular/core").InputSignalWithTransform<number | null, import("@angular/cdk/coercion").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly valueLabel: import("@angular/core").InputSignal<import("ng-primitives/progress").NgpProgressValueTextFn>;
+        readonly indeterminate: import("@angular/core").Signal<boolean>;
+        readonly progressing: import("@angular/core").Signal<boolean>;
+        readonly complete: import("@angular/core").Signal<boolean>;
+        readonly valueText: import("@angular/core").Signal<string>;
+        readonly label: import("@angular/core").WritableSignal<import("ng-primitives/progress").NgpProgressLabel | null>;
+        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/progress").NgpProgress>;
+    }>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpProgressValue, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpProgressValue, "[ngpProgressValue]", ["ngpProgressValue"], {}, {}, never, never, true, never>;
+}

package/roving-focus/roving-focus-group/roving-focus-group-state.d.ts

@@ -11,7 +11,7 @@ export declare const provideRovingFocusGroupState: (options?: import("ng-primiti
  * Injects the RovingFocusGroup state.
  */
 export declare const injectRovingFocusGroupState: <U = {
-    readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").Directionality;
+    readonly directionality: import("@angular/cdk/bidi").Directionality;
     readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
     readonly wrap: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly homeEnd: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
@@ -22,11 +22,11 @@ export declare const injectRovingFocusGroupState: <U = {
     readonly state: import("ng-primitives/state").CreatedState<NgpRovingFocusGroup>;
     register: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem) => void;
     unregister: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem) => void;
-    setActiveItem: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem | null, origin?: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-    activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-    activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-    activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-    activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
+    setActiveItem: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem | null, origin?: import("@angular/cdk/a11y").FocusOrigin) => void;
+    activateFirstItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+    activateLastItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+    activateNextItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+    activatePreviousItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
     onKeydown: (event: KeyboardEvent) => void;
 }>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**

package/schematics/ng-generate/templates/progress/progress.__fileSuffix@dasherize__.ts.template

@@ -1,5 +1,12 @@
-import { Component } from '@angular/core';
-import { injectProgressState, NgpProgress, NgpProgressIndicator } from 'ng-primitives/progress';
+import { NumberInput } from '@angular/cdk/coercion';
+import { Component, input, numberAttribute } from '@angular/core';
+import {
+  NgpProgress,
+  NgpProgressIndicator,
+  NgpProgressLabel,
+  NgpProgressTrack,
+  NgpProgressValue,
+} from 'ng-primitives/progress';
 
 @Component({
   selector: '<%= prefix %>-progress',
@@ -9,15 +16,44 @@ import { injectProgressState, NgpProgress, NgpProgressIndicator } from 'ng-primi
       inputs: ['ngpProgressValue:value', 'ngpProgressMax:max', 'ngpProgressValueLabel:valueLabel'],
     },
   ],
-  imports: [NgpProgressIndicator],
+  imports: [NgpProgressIndicator, NgpProgressTrack, NgpProgressLabel, NgpProgressValue],
   template: `
-    <div [style.width.%]="state().value()" ngpProgressIndicator></div>
+    <span ngpProgressLabel>{{ label() }}</span>
+    <span ngpProgressValue>{{ value() }}%</span>
+
+    <div ngpProgressTrack>
+      <div ngpProgressIndicator></div>
+    </div>
   `,
   styles: `
 /* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
 
     :host {
-      display: block;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-row-gap: 0.5rem;
+      width: 200px;
+      box-sizing: border-box;
+      padding: 0.5rem;
+    }
+
+    [ngpProgressLabel] {
+      color: var(--ngp-text-emphasis);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    [ngpProgressValue] {
+      color: var(--ngp-text-secondary);
+      font-size: 14px;
+      font-weight: 500;
+      text-align: right;
+      grid-column-start: 2;
+      text-align: end;
+    }
+
+    [ngpProgressTrack] {
+      grid-column: 1 / 3;
       position: relative;
       height: 12px;
       width: 100%;
@@ -37,6 +73,11 @@ import { injectProgressState, NgpProgress, NgpProgressIndicator } from 'ng-primi
   `,
 })
 export class Progress<%= componentSuffix %> {
-  /** Access the progress state */
-  protected readonly state = injectProgressState();
+  /** The value of the progress. */
+  readonly value = input<number, NumberInput>(0, {
+    transform: numberAttribute,
+  });
+
+  /** The label of the progress. */
+  readonly label = input.required<string>();
 }

package/slider/slider/slider-state.d.ts

@@ -11,11 +11,11 @@ export declare const provideSliderState: (options?: import("ng-primitives/state"
  * Injects the Slider state.
  */
 export declare const injectSliderState: <U = {
-    readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+    readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
     readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-    readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-    readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+    readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+    readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
     readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly track: import("@angular/core").WritableSignal<import("ng-primitives/slider").NgpSliderTrack | undefined>;

package/slider/slider-range/slider-range.d.ts

@@ -7,11 +7,11 @@ export declare class NgpSliderRange {
      * Access the slider state.
      */
     protected readonly sliderState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
         readonly track: import("@angular/core").WritableSignal<import("ng-primitives/slider").NgpSliderTrack | undefined>;

package/slider/slider-thumb/slider-thumb.d.ts

@@ -7,11 +7,11 @@ export declare class NgpSliderThumb {
      * Access the slider state.
      */
     protected readonly sliderState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
         readonly track: import("@angular/core").WritableSignal<import("ng-primitives/slider").NgpSliderTrack | undefined>;

package/slider/slider-track/slider-track.d.ts

@@ -7,11 +7,11 @@ export declare class NgpSliderTrack {
      * Access the slider state.
      */
     protected readonly sliderState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
-        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
         readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
         readonly track: import("@angular/core").WritableSignal<NgpSliderTrack | undefined>;

package/tabs/tab-button/tab-button.d.ts

@@ -13,7 +13,7 @@ export declare class NgpTabButton implements OnInit {
     protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
         readonly config: import("ng-primitives/tabs").NgpTabsConfig;
         readonly rovingFocusGroupState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-            readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").Directionality;
+            readonly directionality: import("@angular/cdk/bidi").Directionality;
             readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
             readonly wrap: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
             readonly homeEnd: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
@@ -24,11 +24,11 @@ export declare class NgpTabButton implements OnInit {
             readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/roving-focus").NgpRovingFocusGroup>;
             register: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem) => void;
             unregister: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem) => void;
-            setActiveItem: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem | null, origin?: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-            activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-            activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-            activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-            activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
+            setActiveItem: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem | null, origin?: import("@angular/cdk/a11y").FocusOrigin) => void;
+            activateFirstItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+            activateLastItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+            activateNextItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+            activatePreviousItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
             onKeydown: (event: KeyboardEvent) => void;
         }>>;
         readonly id: import("@angular/core").InputSignal<string>;

package/tabs/tab-list/tab-list.d.ts

@@ -9,7 +9,7 @@ export declare class NgpTabList {
     protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
         readonly config: import("ng-primitives/tabs").NgpTabsConfig;
         readonly rovingFocusGroupState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-            readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").Directionality;
+            readonly directionality: import("@angular/cdk/bidi").Directionality;
             readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
             readonly wrap: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
             readonly homeEnd: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
@@ -20,11 +20,11 @@ export declare class NgpTabList {
             readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/roving-focus").NgpRovingFocusGroup>;
             register: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem) => void;
             unregister: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem) => void;
-            setActiveItem: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem | null, origin?: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-            activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-            activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-            activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
-            activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
+            setActiveItem: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem | null, origin?: import("@angular/cdk/a11y").FocusOrigin) => void;
+            activateFirstItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+            activateLastItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+            activateNextItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+            activatePreviousItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
             onKeydown: (event: KeyboardEvent) => void;
         }>>;
         readonly id: import("@angular/core").InputSignal<string>;