ng-primitives 0.36.0 → 0.37.0

package/popover/popover/popover.d.ts

@@ -1,4 +1,5 @@
-import { FocusOrigin } from '@angular/cdk/a11y';
+import { FocusOrigin, InteractivityChecker } from '@angular/cdk/a11y';
+import { NgpFocusTrap } from 'ng-primitives/focus-trap';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/focus-trap";
 import * as i2 from "ng-primitives/internal";
@@ -18,6 +19,35 @@ 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/progress/progress-state.d.ts

@@ -11,8 +11,8 @@ 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/coercion").NumberInput>;
-    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+    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>;

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

@@ -8,8 +8,8 @@ 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/coercion").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        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>;

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").Directionality;
+    readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").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/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;
+    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;
     onKeydown: (event: KeyboardEvent) => void;
 }>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**

package/schematics/ng-generate/schema.d.ts

@@ -24,7 +24,8 @@ export interface AngularPrimitivesComponentSchema {
     | 'search'
     | 'toast'
     | 'toolbar'
-    | 'tooltip';
+    | 'tooltip'
+    | 'meter';
 
   /**
    * The path where the component files should be created, relative to the current workspace.

package/schematics/ng-generate/schema.json

@@ -20,6 +20,7 @@
         "form-field",
         "input",
         "listbox",
+        "meter",
         "pagination",
         "progress",
         "radio",

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

@@ -0,0 +1,78 @@
+import { NumberInput } from '@angular/cdk/coercion';
+import { Component, input, numberAttribute } from '@angular/core';
+import {
+  NgpMeter,
+  NgpMeterIndicator,
+  NgpMeterLabel,
+  NgpMeterTrack,
+  NgpMeterValue,
+} from 'ng-primitives/meter';
+
+@Component({
+  selector: '<%= prefix %>-meter',
+  hostDirectives: [
+    { directive: NgpMeter, inputs: ['ngpMeterValue:value', 'ngpMeterMin:min', 'ngpMeterMax:max'] },
+  ],
+  imports: [NgpMeterIndicator, NgpMeterLabel, NgpMeterValue, NgpMeterTrack],
+  template: `
+    <span ngpMeterLabel>{{ label() }}</span>
+    <span ngpMeterValue>{{ value() }}%</span>
+
+    <div ngpMeterTrack>
+      <div ngpMeterIndicator></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: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-row-gap: 0.5rem;
+      width: 200px;
+      box-sizing: border-box;
+      padding: 0.5rem;
+    }
+
+    [ngpMeterLabel] {
+      color: var(--ngp-text-emphasis);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    [ngpMeterValue] {
+      color: var(--ngp-text-secondary);
+      font-size: 14px;
+      font-weight: 500;
+      text-align: right;
+      grid-column-start: 2;
+      text-align: end;
+    }
+
+    [ngpMeterTrack] {
+      grid-column: 1 / 3;
+      overflow: hidden;
+      background-color: var(--ngp-background);
+      box-shadow: var(--ngp-shadow-border);
+      border-radius: 4px;
+      height: 8px;
+    }
+
+    [ngpMeterIndicator] {
+      background-color: var(--ngp-background-success);
+      height: 100%;
+      transition: width 0.2s ease-in-out;
+      inset-inline-start: 0px;
+      border-radius: 4px;
+    }
+  `,
+})
+export class Meter<%= componentSuffix %> {
+  /** The value of the meter. */
+  readonly value = input<number, NumberInput>(0, {
+    transform: numberAttribute,
+  });
+
+  /** The label of the meter. */
+  readonly label = input.required<string>();
+}

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

@@ -51,39 +51,39 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
   template: `
     <ul>
       <li>
-        <a ngpPaginationFirst aria-label="First Page">
+        <button ngpPaginationFirst aria-label="First Page">
           <ng-icon name="heroChevronDoubleLeft" />
-        </a>
+        </button>
       </li>
 
       <li>
-        <a ngpPaginationPrevious aria-label="Previous Page">
+        <button ngpPaginationPrevious aria-label="Previous Page">
           <ng-icon name="heroChevronLeft" />
-        </a>
+        </button>
       </li>
 
       @for (page of pages(); track page) {
         <li>
-          <a
+          <button
             [ngpPaginationButtonPage]="page"
             [attr.aria-label]="'Page ' + page"
             ngpPaginationButton
           >
             {{ page }}
-          </a>
+          </button>
         </li>
       }
 
       <li>
-        <a ngpPaginationNext aria-label="Next Page">
+        <button ngpPaginationNext aria-label="Next Page">
           <ng-icon name="heroChevronRight" />
-        </a>
+        </button>
       </li>
 
       <li>
-        <a ngpPaginationLast aria-label="Last Page">
+        <button ngpPaginationLast aria-label="Last Page">
           <ng-icon name="heroChevronDoubleRight" />
-        </a>
+        </button>
       </li>
     </ul>
   `,
@@ -116,7 +116,7 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
       background-color: var(--ngp-background);
       box-shadow: var(--ngp-button-shadow);
       cursor: pointer;
-      transition: all 0.2s;
+      transition: background-color 0.2s;
 
       &[data-hover]:not([data-disabled]):not([data-selected]) {
         background-color: var(--ngp-background-hover);

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import {
   injectSliderState,
@@ -24,12 +24,12 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
     },
   ],
   imports: [NgpSliderTrack, NgpSliderRange, NgpSliderThumb],
-  viewProviders: [provideValueAccessor(Slider<%= componentSuffix %>)],
+  providers: [provideValueAccessor(Slider<%= componentSuffix %>)],
   template: `
     <div ngpSliderTrack>
       <div ngpSliderRange></div>
     </div>
-    <div ngpSliderThumb></div>
+    <div [ariaLabel]="ariaLabel()" ngpSliderThumb></div>
   `,
   styles: `
 /* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
@@ -84,6 +84,11 @@ export class Slider<%= componentSuffix %> implements ControlValueAccessor {
   /** Access the slider state */
   private readonly state = injectSliderState();
 
+  /** Forward the aria-label to the thumb */
+  readonly ariaLabel = input<string | null>(null, {
+    alias: 'aria-label',
+  });
+
   /**
    * The onChange callback function.
    */

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NgpToolbar } from 'ng-primitives/toolbar';
+import { injectToolbarState, NgpToolbar } from 'ng-primitives/toolbar';
 
 @Component({
   selector: '<%= prefix %>-toolbar',
@@ -26,4 +26,12 @@ import { NgpToolbar } from 'ng-primitives/toolbar';
     }
   `,
 })
-export class Toolbar<%= componentSuffix %> {}
+export class Toolbar<%= componentSuffix %> {
+  /** Access the toolbar state */
+  private readonly toolbar = injectToolbarState();
+
+  constructor() {
+    // default to horizontal orientation
+    this.toolbar().orientation.set('horizontal');
+  }
+}

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/coercion").NumberInput>;
+    readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
     readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-    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 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 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/coercion").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
         readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        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 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 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/coercion").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
         readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        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 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 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/coercion").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
         readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        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 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 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").Directionality;
+            readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").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/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;
+            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;
             onKeydown: (event: KeyboardEvent) => void;
         }>>;
         readonly id: import("@angular/core").InputSignal<string>;
@@ -39,7 +39,6 @@ export declare class NgpTabButton implements OnInit {
         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>;
-        ngOnInit: () => void;
         select: (value: string) => void;
         registerTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
         unregisterTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
@@ -62,7 +61,7 @@ export declare class NgpTabButton implements OnInit {
      * Determine a unique id for the tab button if not provided
      * @internal
      */
-    readonly defaultId: import("@angular/core").Signal<string>;
+    readonly buttonId: import("@angular/core").Signal<string>;
     /**
      * Determine the aria-controls of the tab button
      * @internal

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").Directionality;
+            readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").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/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;
+            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;
             onKeydown: (event: KeyboardEvent) => void;
         }>>;
         readonly id: import("@angular/core").InputSignal<string>;
@@ -35,7 +35,6 @@ export declare class NgpTabList {
         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>;
-        ngOnInit: () => void;
         select: (value: string) => void;
         registerTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
         unregisterTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;

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

@@ -10,10 +10,13 @@ export declare class NgpTabPanel implements OnInit, OnDestroy {
     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").Directionality;
+            readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").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>;
+            readonly homeEnd: import("@angular/core" /**
+             * Determine the id of the tab panel
+             * @internal
+             */).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[];
@@ -21,11 +24,11 @@ export declare class NgpTabPanel implements OnInit, OnDestroy {
             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/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;
+            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;
             onKeydown: (event: KeyboardEvent) => void;
         }>>;
         readonly id: import("@angular/core").InputSignal<string>;
@@ -36,7 +39,6 @@ export declare class NgpTabPanel implements OnInit, OnDestroy {
         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>;
-        ngOnInit: () => void;
         select: (value: string) => void;
         registerTab: (tab: NgpTabPanel) => void;
         unregisterTab: (tab: NgpTabPanel) => void;
@@ -54,7 +56,7 @@ export declare class NgpTabPanel implements OnInit, OnDestroy {
      * Determine a unique id for the tab panel if not provided
      * @internal
      */
-    protected readonly defaultId: import("@angular/core").Signal<string>;
+    protected readonly panelId: import("@angular/core").Signal<string>;
     /**
      * Determine the aria-labelledby of the tab panel
      * @internal

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

@@ -13,7 +13,7 @@ export declare const provideTabsetState: (options?: import("ng-primitives/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").Directionality;
+        readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").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 const injectTabsetState: <U = {
         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/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;
+        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;
         onKeydown: (event: KeyboardEvent) => void;
     }>>;
     readonly id: import("@angular/core").InputSignal<string>;
@@ -39,7 +39,6 @@ export declare const injectTabsetState: <U = {
     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>;
-    ngOnInit: () => void;
     select: (value: string) => void;
     registerTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;
     unregisterTab: (tab: import("ng-primitives/tabs").NgpTabPanel) => void;

package/tabs/tabset/tabset.d.ts

@@ -1,5 +1,4 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { OnInit } from '@angular/core';
 import { NgpOrientation } from 'ng-primitives/common';
 import type { NgpTabPanel } from '../tab-panel/tab-panel';
 import * as i0 from "@angular/core";
@@ -7,7 +6,7 @@ import * as i1 from "ng-primitives/roving-focus";
 /**
  * Apply the `ngpTabset` directive to an element to manage the tabs.
  */
-export declare class NgpTabset implements OnInit {
+export declare class NgpTabset {
     /**
      * Access the global tabset configuration
      */
@@ -51,7 +50,7 @@ export declare class NgpTabset implements OnInit {
      * The state of the tabset
      */
     protected readonly state: import("ng-primitives/state").CreatedState<NgpTabset>;
-    ngOnInit(): void;
+    constructor();
     /**
      * Select a tab by its value
      * @param value The value of the tab to select
@@ -68,5 +67,5 @@ export declare class NgpTabset implements OnInit {
      */
     unregisterTab(tab: NgpTabPanel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpTabset, never>;
-    static ɵdir: i0.ɵɵ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, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: { "ngpRovingFocusGroupOrientation": "ngpTabsetOrientation"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵ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, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: {}; outputs: {}; }]>;
 }

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

@@ -12,7 +12,7 @@ export declare const provideToggleGroupState: (options?: import("ng-primitives/s
  */
 export declare const injectToggleGroupState: <U = {
     readonly rovingFocusGroupState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly directionality: import("@angular/cdk/bidi").Directionality;
+        readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").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>;
@@ -23,11 +23,11 @@ export declare const injectToggleGroupState: <U = {
         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/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;
+        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;
         onKeydown: (event: KeyboardEvent) => void;
     }>>;
     readonly config: import("ng-primitives/toggle-group").NgpToggleGroupConfig;

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

@@ -55,5 +55,5 @@ export declare class NgpToggleGroup {
      */
     toggle(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpToggleGroup, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpToggleGroup, "[ngpToggleGroup]", ["ngpToggleGroup"], { "orientation": { "alias": "ngpToggleGroupOrientation"; "required": false; "isSignal": true; }; "type": { "alias": "ngpToggleGroupType"; "required": false; "isSignal": true; }; "value": { "alias": "ngpToggleGroupValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: { "ngpRovingFocusGroupOrientation": "ngpToggleGroupOrientation"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpToggleGroup, "[ngpToggleGroup]", ["ngpToggleGroup"], { "orientation": { "alias": "ngpToggleGroupOrientation"; "required": false; "isSignal": true; }; "type": { "alias": "ngpToggleGroupType"; "required": false; "isSignal": true; }; "value": { "alias": "ngpToggleGroupValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: {}; outputs: {}; }]>;
 }