ng-primitives 0.47.0 → 0.49.0

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

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { NgpMenu } from 'ng-primitives/menu';
+
+@Component({
+  selector: '<%= prefix %>-menu',
+  hostDirectives: [NgpMenu],
+  template: `
+    <ng-content />
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      width: max-content;
+      background: var(--ngp-background);
+      border: 1px solid var(--ngp-border);
+      box-shadow: var(--ngp-shadow);
+      border-radius: 8px;
+      padding: 4px;
+      animation: menu-show 300ms ease-out;
+    }
+
+    :host[data-exit] {
+      animation: menu-hide 300ms ease-out;
+    }
+
+    @keyframes menu-show {
+      0% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes menu-hide {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+    }
+  `,
+})
+export class Menu<%= componentSuffix %> {}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { injectSwitchState, NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';
 import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
@@ -68,7 +68,7 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
     '(focusout)': 'onTouched?.()',
   },
 })
-export class Switch<%= componentSuffix %> implements OnInit, ControlValueAccessor {
+export class Switch<%= componentSuffix %> implements ControlValueAccessor {
   /** Access the switch state. */
   private readonly switch = injectSwitchState();
 
@@ -78,7 +78,7 @@ export class Switch<%= componentSuffix %> implements OnInit, ControlValueAccesso
   /** The on touched callback */
   protected onTouched?: TouchedFn;
 
-  ngOnInit() {
+  constructor() {
     // Any time the switch changes, update the form value.
     this.switch().checkedChange.subscribe(value => this.onChange?.(value));
   }

package/search/search/search-state.d.ts

@@ -10,15 +10,7 @@ export declare const provideSearchState: (options?: import("ng-primitives/state"
 /**
  * Injects the Search state.
  */
-export declare const injectSearchState: <U = {
-    readonly destroyRef: import("@angular/core").DestroyRef;
-    readonly input: import("@angular/core").WritableSignal<HTMLInputElement | null>;
-    readonly value: import("@angular/core").WritableSignal<string>;
-    readonly empty: import("@angular/core").Signal<boolean>;
-    readonly state: import("ng-primitives/state").CreatedState<NgpSearch>;
-    clear: () => void;
-    registerInput: (input: HTMLInputElement) => void;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+export declare const injectSearchState: <U = NgpSearch>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Search state registration function.
  */

package/search/search-clear/search-clear.d.ts

@@ -6,15 +6,7 @@ export declare class NgpSearchClear {
     /**
      * Access the Search instance.
      */
-    protected readonly search: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly destroyRef: import("@angular/core").DestroyRef;
-        readonly input: import("@angular/core").WritableSignal<HTMLInputElement | null>;
-        readonly value: import("@angular/core").WritableSignal<string>;
-        readonly empty: import("@angular/core").Signal<boolean>;
-        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/search").NgpSearch>;
-        clear: () => void;
-        registerInput: (input: HTMLInputElement) => void;
-    }>>;
+    protected readonly search: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/search").NgpSearch>>;
     /**
      * Clear the input field.
      */

package/select/select/select-state.d.ts

@@ -10,10 +10,7 @@ export declare const provideSelectState: (options?: import("ng-primitives/state"
 /**
  * Injects the Select state.
  */
-export declare const injectSelectState: <U = {
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    readonly state: import("ng-primitives/state").CreatedState<NgpSelect>;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+export declare const injectSelectState: <U = NgpSelect>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Select state registration function.
  */

package/select/select/select.d.ts

@@ -4,6 +4,10 @@ import * as i0 from "@angular/core";
  * Apply the `ngpSelect` directive to a select element that you want to enhance.
  */
 export declare class NgpSelect {
+    /**
+     * The id of the select. If not provided, a unique id will be generated.
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
     /**
      * Whether the select is disabled.
      */
@@ -14,5 +18,5 @@ export declare class NgpSelect {
     private readonly state;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSelect, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSelect, "select[ngpSelect]", ["ngpSelect"], { "disabled": { "alias": "ngpSelectDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSelect, "select[ngpSelect]", ["ngpSelect"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSelectDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -10,18 +10,7 @@ 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-CJVxXUcb").N>;
-    readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-    readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-    readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-    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>;
-    readonly percentage: import("@angular/core").Signal<number>;
-    readonly state: import("ng-primitives/state").CreatedState<NgpSlider>;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+export declare const injectSliderState: <U = NgpSlider>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Slider state registration function.
  */

package/slider/slider/slider.d.ts

@@ -6,6 +6,10 @@ import * as i0 from "@angular/core";
  * Apply the `ngpSlider` directive to an element that represents the slider and contains the track, range, and thumb.
  */
 export declare class NgpSlider {
+    /**
+     * The id of the slider. If not provided, a unique id will be generated.
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
     /**
      * The value of the slider.
      */
@@ -50,5 +54,5 @@ export declare class NgpSlider {
     protected readonly state: import("ng-primitives/state").CreatedState<NgpSlider>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSlider, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSlider, "[ngpSlider]", ["ngpSlider"], { "value": { "alias": "ngpSliderValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpSliderMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpSliderMax"; "required": false; "isSignal": true; }; "step": { "alias": "ngpSliderStep"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpSliderOrientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSliderDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpSliderValueChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSlider, "[ngpSlider]", ["ngpSlider"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpSliderValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpSliderMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpSliderMax"; "required": false; "isSignal": true; }; "step": { "alias": "ngpSliderStep"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpSliderOrientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSliderDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpSliderValueChange"; }, never, never, true, never>;
 }

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

@@ -6,18 +6,7 @@ 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-CJVxXUcb").N>;
-        readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        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>;
-        readonly percentage: import("@angular/core").Signal<number>;
-        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/slider").NgpSlider>;
-    }>>;
+    protected readonly sliderState: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/slider").NgpSlider>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSliderRange, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSliderRange, "[ngpSliderRange]", ["ngpSliderRange"], {}, {}, never, never, true, never>;
 }

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

@@ -6,18 +6,7 @@ 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-CJVxXUcb").N>;
-        readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        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>;
-        readonly percentage: import("@angular/core").Signal<number>;
-        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/slider").NgpSlider>;
-    }>>;
+    protected readonly sliderState: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/slider").NgpSlider>>;
     /**
      * Store the dragging state.
      */

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

@@ -6,18 +6,7 @@ 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-CJVxXUcb").N>;
-        readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
-        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>;
-        readonly percentage: import("@angular/core").Signal<number>;
-        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/slider").NgpSlider>;
-    }>>;
+    protected readonly sliderState: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/slider").NgpSlider>>;
     /**
      * The element that represents the slider track.
      */

package/switch/switch/switch-state.d.ts

@@ -10,16 +10,7 @@ export declare const provideSwitchState: (options?: import("ng-primitives/state"
 /**
  * Injects the Switch state.
  */
-export declare const injectSwitchState: <U = {
-    readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
-    isButton: boolean;
-    readonly checked: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    readonly checkedChange: import("@angular/core").OutputEmitterRef<boolean>;
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    readonly state: import("ng-primitives/state").CreatedState<NgpSwitch>;
-    toggle: () => void;
-    onKeyDown: (event: KeyboardEvent) => void;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+export declare const injectSwitchState: <U = NgpSwitch>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Switch state registration function.
  */

package/switch/switch/switch.d.ts

@@ -1,6 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
-import * as i1 from "ng-primitives/form-field";
 /**
  * Apply the `ngpSwitch` directive to an element to manage the checked state.
  */
@@ -13,6 +12,10 @@ export declare class NgpSwitch {
      * Determine if the switch is a button
      */
     protected isButton: boolean;
+    /**
+     * The id of the switch. If not provided, a unique id will be generated.
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
     /**
      * Determine if the switch is checked.
      * @default false
@@ -42,5 +45,5 @@ export declare class NgpSwitch {
      */
     protected onKeyDown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSwitch, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, [{ directive: typeof i1.NgpFormControl; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵ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>;
 }

package/switch/switch-thumb/switch-thumb.d.ts

@@ -6,16 +6,7 @@ export declare class NgpSwitchThumb {
     /**
      * Access the switch state.
      */
-    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
-        isButton: boolean;
-        readonly checked: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-        readonly checkedChange: import("@angular/core").OutputEmitterRef<boolean>;
-        readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/switch").NgpSwitch>;
-        toggle: () => void;
-        onKeyDown: (event: KeyboardEvent) => void;
-    }>>;
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/switch").NgpSwitch>>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSwitchThumb, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSwitchThumb, "[ngpSwitchThumb]", never, {}, {}, never, never, true, never>;

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

@@ -1,6 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { OnInit } from '@angular/core';
-import { NgpRovingFocusItem } from 'ng-primitives/roving-focus';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/roving-focus";
 /**
@@ -14,41 +13,7 @@ export declare class NgpTabButton implements OnInit {
     /**
      * Access the tabset state
      */
-    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-D-fEBKdS").D;
-            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>;
-            readonly disabled: import("@angular/core" /**
-             * Access the tag host name
-             */).InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-            readonly items: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem[]>;
-            readonly sortedItems: import("ng-primitives/roving-focus").NgpRovingFocusItem[];
-            readonly activeItem: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem | null>;
-            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-CvvJeQRc").F) => void;
-            activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            onKeydown: (event: KeyboardEvent) => void;
-        }>>;
-        readonly id: import("@angular/core").InputSignal<string>;
-        readonly value: import("@angular/core").InputSignal<string | undefined>;
-        readonly valueChange: import("@angular/core").OutputEmitterRef<string | undefined>;
-        readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
-        readonly activateOnFocus: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
-        readonly panels: import("@angular/core").WritableSignal<import("ng-primitives/tabs").NgpTabPanel[]>;
-        readonly selectedTab: import("@angular/core").Signal<string | undefined>;
-        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/tabs").NgpTabset>;
-        select: (value: string) => void;
-        registerTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
-        unregisterTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
-    }>>;
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/tabs").NgpTabset>>;
     /**
      * The value of the tab this trigger controls
      */

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

@@ -6,39 +6,7 @@ export declare class NgpTabList {
     /**
      * Access the tabset state
      */
-    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-D-fEBKdS").D;
-            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>;
-            readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-            readonly items: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem[]>;
-            readonly sortedItems: import("ng-primitives/roving-focus").NgpRovingFocusItem[];
-            readonly activeItem: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem | null>;
-            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-CvvJeQRc").F) => void;
-            activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            onKeydown: (event: KeyboardEvent) => void;
-        }>>;
-        readonly id: import("@angular/core").InputSignal<string>;
-        readonly value: import("@angular/core").InputSignal<string | undefined>;
-        readonly valueChange: import("@angular/core").OutputEmitterRef<string | undefined>;
-        readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
-        readonly activateOnFocus: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-        readonly panels: import("@angular/core").WritableSignal<import("ng-primitives/tabs").NgpTabPanel[]>;
-        readonly selectedTab: import("@angular/core").Signal<string | undefined>;
-        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/tabs").NgpTabset>;
-        select: (value: string) => void;
-        registerTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
-        unregisterTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
-    }>>;
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/tabs").NgpTabset>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpTabList, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTabList, "[ngpTabList]", ["ngpTabList"], {}, {}, never, never, true, never>;
 }

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

@@ -7,39 +7,7 @@ export declare class NgpTabPanel implements OnInit, OnDestroy {
     /**
      * Access the tabset
      */
-    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-D-fEBKdS").D;
-            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>;
-            readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-            readonly items: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem[]>;
-            readonly sortedItems: import("ng-primitives/roving-focus").NgpRovingFocusItem[];
-            readonly activeItem: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem | null>;
-            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-CvvJeQRc").F) => void;
-            activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-            onKeydown: (event: KeyboardEvent) => void;
-        }>>;
-        readonly id: import("@angular/core").InputSignal<string>;
-        readonly value: import("@angular/core").InputSignal<string | undefined>;
-        readonly valueChange: import("@angular/core").OutputEmitterRef<string | undefined>;
-        readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
-        readonly activateOnFocus: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-        readonly panels: import("@angular/core").WritableSignal<NgpTabPanel[]>;
-        readonly selectedTab: import("@angular/core").Signal<string | undefined>;
-        readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/tabs").NgpTabset>;
-        select: (value: string) => void;
-        registerTab: (tab: NgpTabPanel) => void;
-        unregisterTab: (tab: NgpTabPanel) => void;
-    }>>;
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/tabs").NgpTabset>>;
     /**
      * The value of the tab
      */

package/tabs/tabset/tabset-state.d.ts

@@ -10,39 +10,7 @@ export declare const provideTabsetState: (options?: import("ng-primitives/state"
 /**
  * Injects the Tabset state.
  */
-export declare const injectTabsetState: <U = {
-    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-D-fEBKdS").D;
-        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>;
-        readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-        readonly items: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem[]>;
-        readonly sortedItems: import("ng-primitives/roving-focus").NgpRovingFocusItem[];
-        readonly activeItem: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem | null>;
-        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-CvvJeQRc").F) => void;
-        activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-        activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-        activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-        activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-        onKeydown: (event: KeyboardEvent) => void;
-    }>>;
-    readonly id: import("@angular/core").InputSignal<string>;
-    readonly value: import("@angular/core").InputSignal<string | undefined>;
-    readonly valueChange: import("@angular/core").OutputEmitterRef<string | undefined>;
-    readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
-    readonly activateOnFocus: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    readonly panels: import("@angular/core").WritableSignal<import("ng-primitives/tabs").NgpTabPanel[]>;
-    readonly selectedTab: import("@angular/core").Signal<string | undefined>;
-    readonly state: import("ng-primitives/state").CreatedState<NgpTabset>;
-    select: (value: string) => void;
-    registerTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
-    unregisterTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+export declare const injectTabsetState: <U = NgpTabset>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Tabset state registration function.
  */

package/textarea/textarea/textarea-state.d.ts

@@ -10,10 +10,7 @@ export declare const provideTextareaState: (options?: import("ng-primitives/stat
 /**
  * Injects the Textarea state.
  */
-export declare const injectTextareaState: <U = {
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    readonly state: import("ng-primitives/state").CreatedState<NgpTextarea>;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+export declare const injectTextareaState: <U = NgpTextarea>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Textarea state registration function.
  */

package/textarea/textarea/textarea.d.ts

@@ -1,6 +1,10 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
 export declare class NgpTextarea {
+    /**
+     * The id of the textarea. If not provided, a unique id will be generated.
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
     /**
      * Whether the element is disabled.
      */
@@ -11,5 +15,5 @@ export declare class NgpTextarea {
     protected readonly state: import("ng-primitives/state").CreatedState<NgpTextarea>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpTextarea, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTextarea, "[ngpTextarea]", ["ngpTextarea"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTextarea, "[ngpTextarea]", ["ngpTextarea"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/toggle/toggle/toggle-state.d.ts

@@ -10,16 +10,7 @@ export declare const provideToggleState: (options?: import("ng-primitives/state"
 /**
  * Injects the Toggle state.
  */
-export declare const injectToggleState: <U = {
-    readonly element: import("@angular/core").ElementRef<HTMLElement>;
-    readonly selected: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    readonly selectedChange: import("@angular/core").OutputEmitterRef<boolean>;
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    isButton: boolean;
-    readonly state: import("ng-primitives/state").CreatedState<NgpToggle>;
-    toggle: () => void;
-    onKeyDown: (event: KeyboardEvent) => void;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+export declare const injectToggleState: <U = NgpToggle>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Toggle state registration function.
  */

package/toggle-group/toggle-group/toggle-group-state.d.ts

@@ -10,38 +10,7 @@ export declare const provideToggleGroupState: (options?: import("ng-primitives/s
 /**
  * Injects the ToggleGroup state.
  */
-export declare const injectToggleGroupState: <U = {
-    readonly rovingFocusGroupState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly directionality: import("@angular/cdk/bidi-module.d-D-fEBKdS").D;
-        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>;
-        readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-        readonly items: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem[]>;
-        readonly sortedItems: import("ng-primitives/roving-focus").NgpRovingFocusItem[];
-        readonly activeItem: import("@angular/core").WritableSignal<import("ng-primitives/roving-focus").NgpRovingFocusItem | null>;
-        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-CvvJeQRc").F) => void;
-        activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-        activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-        activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-        activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
-        onKeydown: (event: KeyboardEvent) => void;
-    }>>;
-    readonly config: import("ng-primitives/toggle-group").NgpToggleGroupConfig;
-    readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
-    readonly type: import("@angular/core").InputSignal<"single" | "multiple">;
-    readonly value: import("@angular/core").InputSignal<string[]>;
-    readonly valueChange: import("@angular/core").OutputEmitterRef<string[]>;
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    readonly state: import("ng-primitives/state").CreatedState<NgpToggleGroup>;
-    select: (value: string) => void;
-    deselect: (value: string) => void;
-    isSelected: (value: string) => boolean;
-    toggle: (value: string) => void;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+export declare const injectToggleGroupState: <U = NgpToggleGroup>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The ToggleGroup state registration function.
  */