ng-primitives 0.124.0 → 0.125.0

package/types/ng-primitives-meter.d.ts

@@ -24,19 +24,26 @@ declare class NgpMeter {
      * Define a function that returns the meter value label.
      * @param value The current value
      * @param max The maximum value
+     * @param min The minimum value
      * @returns The value label
      */
     readonly valueLabel: _angular_core.InputSignal<NgpMeterValueTextFn>;
     /** @internal Store the label instance */
     readonly label: _angular_core.WritableSignal<NgpMeterLabel | null>;
-    /** @internal The percentage of the meter. */
+    /** @internal The percentage of the meter, used for the visual indicator width. */
     readonly percentage: _angular_core.Signal<number>;
+    /**
+     * @internal
+     * The raw value exposed via `aria-valuenow`, clamped to the [min, max] range.
+     * Per the ARIA meter pattern, `aria-valuenow` is the actual value, not a percentage.
+     */
+    readonly valueNow: _angular_core.Signal<number>;
     /** The state of the meter. */
     private readonly state;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMeter, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMeter, "[ngpMeter]", ["ngpMeter"], { "value": { "alias": "ngpMeterValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpMeterMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpMeterMax"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "ngpMeterValueLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-type NgpMeterValueTextFn = (value: number, max: number) => string;
+type NgpMeterValueTextFn = (value: number, max: number, min: number) => string;
 
 /**
  * Provides the Meter state.

package/types/ng-primitives-pagination.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
 import { WritableSignal, Signal } from '@angular/core';
 import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
+import * as ng_primitives_state from 'ng-primitives/state';
+import { SetterOptions } from 'ng-primitives/state';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
-import * as ng_primitives_state from 'ng-primitives/state';
 
 /**
  * The `NgpPaginationButton` directive is used to create a pagination button.
@@ -144,9 +145,11 @@ declare class NgpPagination {
         page: _angular_core.WritableSignal<number>;
         pageCount: _angular_core.Signal<number>;
         pageChange: rxjs.Observable<number>;
-        disabled: _angular_core.Signal<boolean>;
+        disabled: _angular_core.WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
         firstPage: _angular_core.Signal<boolean>;
         lastPage: _angular_core.Signal<boolean>;
+        setPage: (value: number, options?: ng_primitives_state.SetterOptions) => void;
         goToPage: (page: number) => void;
     };
     /**
@@ -171,6 +174,11 @@ interface NgpPaginationState {
      * Whether the pagination is disabled.
      */
     readonly disabled: Signal<boolean>;
+    /**
+     * Set the disabled state (e.g. from a form control).
+     * @param disabled The disabled state.
+     */
+    setDisabled: (disabled: boolean) => void;
     /**
      * Determine if we are on the first page.
      * @internal
@@ -185,6 +193,12 @@ interface NgpPaginationState {
      * The event that is fired when the page changes.
      */
     readonly pageChange: Observable<number>;
+    /**
+     * Set the current page directly (no bounds navigation logic).
+     * @param page The page to set.
+     * @param options Setter options, e.g. `{ emit: false }` to suppress change emission.
+     */
+    setPage: (page: number, options?: SetterOptions) => void;
     /**
      * Go to the specified page.
      * @param page The page to go to.
@@ -216,18 +230,22 @@ declare const NgpPaginationStateToken: _angular_core.InjectionToken<WritableSign
     page: WritableSignal<number>;
     pageCount: Signal<number>;
     pageChange: Observable<number>;
-    disabled: Signal<boolean>;
+    disabled: WritableSignal<boolean>;
+    setDisabled: (value: boolean) => void;
     firstPage: Signal<boolean>;
     lastPage: Signal<boolean>;
+    setPage: (value: number, options?: SetterOptions) => void;
     goToPage: (page: number) => void;
 }>>;
 declare const ngpPagination: ({ page: _page, defaultPage: _defaultPage, pageCount: _pageCount, disabled: _disabled, onPageChange, }: NgpPaginationProps) => {
     page: WritableSignal<number>;
     pageCount: Signal<number>;
     pageChange: Observable<number>;
-    disabled: Signal<boolean>;
+    disabled: WritableSignal<boolean>;
+    setDisabled: (value: boolean) => void;
     firstPage: Signal<boolean>;
     lastPage: Signal<boolean>;
+    setPage: (value: number, options?: SetterOptions) => void;
     goToPage: (page: number) => void;
 };
 declare const injectPaginationState: {
@@ -235,35 +253,43 @@ declare const injectPaginationState: {
         page: WritableSignal<number>;
         pageCount: Signal<number>;
         pageChange: Observable<number>;
-        disabled: Signal<boolean>;
+        disabled: WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
         firstPage: Signal<boolean>;
         lastPage: Signal<boolean>;
+        setPage: (value: number, options?: SetterOptions) => void;
         goToPage: (page: number) => void;
     }>;
     (options: ng_primitives_state.StateInjectionOptions): Signal<{
         page: WritableSignal<number>;
         pageCount: Signal<number>;
         pageChange: Observable<number>;
-        disabled: Signal<boolean>;
+        disabled: WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
         firstPage: Signal<boolean>;
         lastPage: Signal<boolean>;
+        setPage: (value: number, options?: SetterOptions) => void;
         goToPage: (page: number) => void;
     } | null>;
     (options?: ng_primitives_state.StateInjectionOptions): Signal<{
         page: WritableSignal<number>;
         pageCount: Signal<number>;
         pageChange: Observable<number>;
-        disabled: Signal<boolean>;
+        disabled: WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
         firstPage: Signal<boolean>;
         lastPage: Signal<boolean>;
+        setPage: (value: number, options?: SetterOptions) => void;
         goToPage: (page: number) => void;
     }> | Signal<{
         page: WritableSignal<number>;
         pageCount: Signal<number>;
         pageChange: Observable<number>;
-        disabled: Signal<boolean>;
+        disabled: WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
         firstPage: Signal<boolean>;
         lastPage: Signal<boolean>;
+        setPage: (value: number, options?: SetterOptions) => void;
         goToPage: (page: number) => void;
     } | null>;
 };

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

@@ -81,6 +81,7 @@ declare class NgpProgress {
      * Define a function that returns the progress value label.
      * @param value The current value
      * @param max The maximum value
+     * @param min The minimum value
      * @returns The value label
      */
     readonly valueLabel: _angular_core.InputSignal<NgpProgressValueTextFn>;
@@ -100,7 +101,7 @@ declare class NgpProgress {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpProgress, never>;
     static ɵdir: _angular_core.ɵɵ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; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-type NgpProgressValueTextFn = (value: number, max: number) => string;
+type NgpProgressValueTextFn = (value: number, max: number, min: number) => string;
 
 interface NgpProgressProps {
     /**
@@ -149,7 +150,8 @@ interface NgpProgressState {
      */
     readonly max: WritableSignal<number>;
     /**
-     * Get the progress value text.
+     * Get the progress value text. An empty string while the progress is
+     * indeterminate (the `aria-valuetext` attribute is omitted in that case).
      */
     readonly valueText: Signal<string>;
     /**

package/types/ng-primitives-roving-focus.d.ts

@@ -142,6 +142,13 @@ interface NgpRovingFocusGroupState {
      * @param origin The origin of the focus change
      */
     setActiveItem(id: string | null, origin?: FocusOrigin): void;
+    /**
+     * Set which item holds the tab stop without moving focus. Used by items that
+     * declare themselves active (e.g. the selected tab) to claim the tab stop
+     * without stealing focus.
+     * @param id The id of the item that should hold the tab stop.
+     */
+    setTabStop(id: string | null): void;
     /**
      * Register an item with the roving focus group.
      * @param item The item to register

package/types/ng-primitives-slider.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal, WritableSignal, ElementRef } from '@angular/core';
 import * as ng_primitives_state from 'ng-primitives/state';
+import { SetterOptions } from 'ng-primitives/state';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as ng_primitives_slider from 'ng-primitives/slider';
 import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
@@ -162,7 +163,7 @@ declare class NgpSlider {
     /**
      * Set the value of the slider.
      */
-    setValue(value: number): void;
+    setValue(value: number, options?: SetterOptions): void;
     /**
      * Set the disabled state.
      */
@@ -226,7 +227,7 @@ interface NgpSliderState {
     /**
      * Set the current value (clamped).
      */
-    setValue(value: number): void;
+    setValue(value: number, options?: SetterOptions): void;
     /**
      * Register the track element.
      */
@@ -598,11 +599,11 @@ interface NgpRangeSliderState {
     /**
      * Updates the low value, ensuring it doesn't exceed the high value.
      */
-    setLowValue(value: number): void;
+    setLowValue(value: number, options?: SetterOptions): void;
     /**
      * Updates the high value, ensuring it doesn't go below the low value.
      */
-    setHighValue(value: number): void;
+    setHighValue(value: number, options?: SetterOptions): void;
     /**
      * Determines which thumb should be moved based on the position clicked.
      */

package/types/ng-primitives-switch.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal, WritableSignal } from '@angular/core';
 import * as ng_primitives_state from 'ng-primitives/state';
+import { SetterOptions } from 'ng-primitives/state';
 import * as ng_primitives_switch from 'ng-primitives/switch';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Observable } from 'rxjs';
@@ -64,6 +65,11 @@ declare class NgpSwitch {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the switch is required.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * The switch state.
      * @internal
@@ -76,13 +82,13 @@ declare class NgpSwitch {
     /**
      * Update the checked value.
      */
-    setChecked(value: boolean): void;
+    setChecked(value: boolean, options?: SetterOptions): void;
     /**
      * Update the disabled value.
      */
     setDisabled(value: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSwitch, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; "required": { "alias": "ngpSwitchRequired"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -112,7 +118,7 @@ interface NgpSwitchState {
     /**
      * Update the checked value.
      */
-    setChecked(value: boolean): void;
+    setChecked(value: boolean, options?: SetterOptions): void;
     /**
      * Update the disabled value.
      */
@@ -134,12 +140,16 @@ interface NgpSwitchProps {
      * Whether the switch is disabled.
      */
     readonly disabled?: Signal<boolean>;
+    /**
+     * Whether the switch is required.
+     */
+    readonly required?: Signal<boolean>;
     /**
      * Callback fired when the checked state changes.
      */
     readonly onCheckedChange?: (checked: boolean) => void;
 }
-declare const ngpSwitch: ({ id, checked: _checked, disabled: _disabled, onCheckedChange, }: NgpSwitchProps) => NgpSwitchState;
+declare const ngpSwitch: ({ id, checked: _checked, disabled: _disabled, required: _required, onCheckedChange, }: NgpSwitchProps) => NgpSwitchState;
 declare const injectSwitchState: {
     (): Signal<NgpSwitchState>;
     (options: ng_primitives_state.StateInjectionOptions): Signal<NgpSwitchState | null>;

package/types/ng-primitives-tabs.d.ts

@@ -277,6 +277,11 @@ declare class NgpTabset {
      * Whether tabs should activate on focus
      */
     readonly activateOnFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether keyboard focus should wrap around the tab list.
+     * @default true (from the global tabs config)
+     */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     private readonly state;
     /**
      * @internal
@@ -294,7 +299,7 @@ declare class NgpTabset {
      */
     setOrientation(orientation: NgpOrientation): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTabset, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabset, "[ngpTabset]", ["ngpTabset"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpTabsetValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpTabsetOrientation"; "required": false; "isSignal": true; }; "activateOnFocus": { "alias": "ngpTabsetActivateOnFocus"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpTabsetValueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabset, "[ngpTabset]", ["ngpTabset"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpTabsetValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpTabsetOrientation"; "required": false; "isSignal": true; }; "activateOnFocus": { "alias": "ngpTabsetActivateOnFocus"; "required": false; "isSignal": true; }; "wrap": { "alias": "ngpTabsetWrap"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpTabsetValueChange"; }, never, never, true, never>;
 }
 
 /**

package/types/ng-primitives-toggle-group.d.ts

@@ -3,7 +3,7 @@ import { Provider, OnInit, Signal, WritableSignal } from '@angular/core';
 import { NgpOrientation } from 'ng-primitives/common';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as ng_primitives_state from 'ng-primitives/state';
-import { SetterOptions } from 'ng-primitives/state';
+import { SetterOptions, StateInjectionOptions } from 'ng-primitives/state';
 import * as ng_primitives_toggle_group from 'ng-primitives/toggle-group';
 import { Observable } from 'rxjs';
 
@@ -36,20 +36,20 @@ interface NgpToggleGroupConfig {
  */
 declare function provideToggleGroupConfig(config: Partial<NgpToggleGroupConfig>): Provider[];
 
-declare class NgpToggleGroupItem implements OnInit {
+declare class NgpToggleGroupItem<T = string> implements OnInit {
     /**
      * The value of the item.
      * @required
      */
-    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly value: _angular_core.InputSignal<T | undefined>;
     /**
      * Whether the item is disabled.
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     constructor();
     ngOnInit(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroupItem, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroupItem, "[ngpToggleGroupItem]", ["ngpToggleGroupItem"], { "value": { "alias": "ngpToggleGroupItemValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupItemDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroupItem<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroupItem<any>, "[ngpToggleGroupItem]", ["ngpToggleGroupItem"], { "value": { "alias": "ngpToggleGroupItemValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupItemDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -62,17 +62,17 @@ interface NgpToggleGroupItemState {
 /**
  * The props interface for the ToggleGroupItem pattern.
  */
-interface NgpToggleGroupItemProps {
+interface NgpToggleGroupItemProps<T = string> {
     /**
      * The value of the toggle group item.
      */
-    value: Signal<string>;
+    value: Signal<T>;
     /**
      * Whether the toggle group item is disabled.
      */
     disabled?: Signal<boolean>;
 }
-declare const ngpToggleGroupItem: ({ value, disabled }: NgpToggleGroupItemProps) => NgpToggleGroupItemState;
+declare const ngpToggleGroupItem: <T = string>({ value, disabled, }: NgpToggleGroupItemProps<T>) => NgpToggleGroupItemState;
 declare const injectToggleGroupItemState: {
     (): Signal<NgpToggleGroupItemState>;
     (options: ng_primitives_state.StateInjectionOptions): Signal<NgpToggleGroupItemState | null>;
@@ -82,7 +82,7 @@ declare const provideToggleGroupItemState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
 
-declare class NgpToggleGroup {
+declare class NgpToggleGroup<T = string> {
     /**
      * Access the global toggle group configuration.
      */
@@ -108,16 +108,22 @@ declare class NgpToggleGroup {
     /**
      * The selected value(s) of the toggle group.
      */
-    readonly value: _angular_core.InputSignal<string[] | undefined>;
+    readonly value: _angular_core.InputSignal<T[] | undefined>;
     /**
      * The default selected value(s) for uncontrolled usage.
      * @default []
      */
-    readonly defaultValue: _angular_core.InputSignal<string[]>;
+    readonly defaultValue: _angular_core.InputSignal<T[]>;
     /**
      * Emits when the value of the toggle group changes.
      */
-    readonly valueChange: _angular_core.OutputEmitterRef<string[]>;
+    readonly valueChange: _angular_core.OutputEmitterRef<T[]>;
+    /**
+     * The comparator used to determine whether two values are equal.
+     * Useful when values are objects and equality should be checked by value rather than by reference.
+     * @default (a, b) => a === b
+     */
+    readonly compareWith: _angular_core.InputSignal<(a: T, b: T) => boolean>;
     /**
      * Whether the toggle group is disabled.
      */
@@ -125,19 +131,19 @@ declare class NgpToggleGroup {
     /**
      * The state of the toggle group.
      */
-    protected readonly state: ng_primitives_toggle_group.NgpToggleGroupState;
+    protected readonly state: ng_primitives_toggle_group.NgpToggleGroupState<T>;
     /**
      * Toggle a value in the toggle group.
      */
-    toggle(value: string): void;
+    toggle(value: T): void;
     /**
      * Set the value(s) of the toggle group.
      */
-    setValue(newValue: string[], options?: SetterOptions): void;
+    setValue(newValue: T[], options?: SetterOptions): void;
     /**
      * Set the default value(s) of the toggle group.
      */
-    setDefaultValue(defaultValue: string[]): void;
+    setDefaultValue(defaultValue: T[]): void;
     /**
      * Set the disabled state of the toggle group.
      */
@@ -146,22 +152,22 @@ declare class NgpToggleGroup {
      * Set the orientation of the toggle group.
      */
     setOrientation(newOrientation: NgpOrientation): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroup, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroup, "[ngpToggleGroup]", ["ngpToggleGroup"], { "orientation": { "alias": "ngpToggleGroupOrientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "ngpToggleGroupWrap"; "required": false; "isSignal": true; }; "allowDeselection": { "alias": "ngpToggleGroupAllowDeselection"; "required": false; "isSignal": true; }; "type": { "alias": "ngpToggleGroupType"; "required": false; "isSignal": true; }; "value": { "alias": "ngpToggleGroupValue"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "ngpToggleGroupDefaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroup<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroup<any>, "[ngpToggleGroup]", ["ngpToggleGroup"], { "orientation": { "alias": "ngpToggleGroupOrientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "ngpToggleGroupWrap"; "required": false; "isSignal": true; }; "allowDeselection": { "alias": "ngpToggleGroupAllowDeselection"; "required": false; "isSignal": true; }; "type": { "alias": "ngpToggleGroupType"; "required": false; "isSignal": true; }; "value": { "alias": "ngpToggleGroupValue"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "ngpToggleGroupDefaultValue"; "required": false; "isSignal": true; }; "compareWith": { "alias": "ngpToggleGroupCompareWith"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, never>;
 }
 
 /**
  * The state interface for the ToggleGroup pattern.
  */
-interface NgpToggleGroupState {
+interface NgpToggleGroupState<T = string> {
     /**
      * The current value(s) of the toggle group.
      */
-    readonly value: WritableSignal<string[]>;
+    readonly value: WritableSignal<T[]>;
     /**
      * Emit when the value changes.
      */
-    readonly valueChange: Observable<string[]>;
+    readonly valueChange: Observable<T[]>;
     /**
      * Whether the toggle group is disabled.
      */
@@ -170,30 +176,34 @@ interface NgpToggleGroupState {
      * The orientation of the toggle group.
      */
     readonly orientation: WritableSignal<NgpOrientation>;
+    /**
+     * The type of the toggle group, whether only one item can be selected or multiple.
+     */
+    readonly type: Signal<'single' | 'multiple'>;
     /**
      * Select a value in the toggle group.
      */
-    select(selection: string): void;
+    select(selection: T): void;
     /**
      * De-select a value in the toggle group.
      */
-    deselect(selection: string): void;
+    deselect(selection: T): void;
     /**
      * Check if a value is selected in the toggle group.
      */
-    isSelected(selection: string): boolean;
+    isSelected(selection: T): boolean;
     /**
      * Toggle a value in the toggle group.
      */
-    toggle(selection: string): void;
+    toggle(selection: T): void;
     /**
      * Set the value(s) of the toggle group.
      */
-    setValue(newValue: string[], options?: SetterOptions): void;
+    setValue(newValue: T[], options?: SetterOptions): void;
     /**
      * Set the default value(s) of the toggle group.
      */
-    setDefaultValue(defaultValue: string[]): void;
+    setDefaultValue(defaultValue: T[]): void;
     /**
      * Set the disabled state of the toggle group.
      */
@@ -206,7 +216,7 @@ interface NgpToggleGroupState {
 /**
  * The props interface for the ToggleGroup pattern.
  */
-interface NgpToggleGroupProps {
+interface NgpToggleGroupProps<T = string> {
     /**
      * The orientation of the toggle-group.
      */
@@ -226,29 +236,33 @@ interface NgpToggleGroupProps {
     /**
      * The value(s) of the toggle-group.
      */
-    readonly value: Signal<string[] | undefined>;
+    readonly value: Signal<T[] | undefined>;
     /**
      * The default value(s) of the toggle-group for uncontrolled usage.
      */
-    readonly defaultValue?: Signal<string[]>;
+    readonly defaultValue?: Signal<T[]>;
     /**
      * Whether the toggle-group is disabled.
      */
     readonly disabled?: Signal<boolean>;
+    /**
+     * The comparator used to determine whether two values are equal.
+     * @default (a, b) => a === b
+     */
+    readonly compareWith?: Signal<(a: T, b: T) => boolean>;
     /**
      * Emit when the value changes.
      */
-    readonly onValueChange?: (value: string[]) => void;
+    readonly onValueChange?: (value: T[]) => void;
 }
-declare const ngpToggleGroup: ({ orientation: _orientation, wrap: _wrap, allowDeselection: _allowDeselection, type: _type, value: _value, defaultValue: _defaultValue, disabled: _disabled, onValueChange, }: NgpToggleGroupProps) => NgpToggleGroupState;
-declare const injectToggleGroupState: {
-    (): Signal<NgpToggleGroupState>;
-    (options: ng_primitives_state.StateInjectionOptions): Signal<NgpToggleGroupState | null>;
-    (options?: ng_primitives_state.StateInjectionOptions): Signal<NgpToggleGroupState> | Signal<NgpToggleGroupState | null>;
-};
+declare const ngpToggleGroup: <T = string>({ orientation: _orientation, wrap: _wrap, allowDeselection: _allowDeselection, type: _type, value: _value, defaultValue: _defaultValue, disabled: _disabled, compareWith: _compareWith, onValueChange, }: NgpToggleGroupProps<T>) => NgpToggleGroupState<T>;
 declare const provideToggleGroupState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
+/**
+ * Injects the ToggleGroup state, typed to the value type `T`.
+ */
+declare function injectToggleGroupState<T = string>(options?: StateInjectionOptions): Signal<NgpToggleGroupState<T>>;
 
 export { NgpToggleGroup, NgpToggleGroupItem, injectToggleGroupItemState, injectToggleGroupState, ngpToggleGroup, ngpToggleGroupItem, provideToggleGroupConfig, provideToggleGroupItemState, provideToggleGroupState };
 export type { NgpToggleGroupConfig, NgpToggleGroupItemProps, NgpToggleGroupItemState, NgpToggleGroupProps, NgpToggleGroupState };