@angular/aria 22.0.0-next.6 → 22.0.0-next.8

package/types/combobox.d.ts

@@ -1,224 +1,128 @@
 import * as _angular_core from '@angular/core';
-import * as _angular_cdk_bidi from '@angular/cdk/bidi';
-import { ComboboxListboxControls, ComboboxTreeControls, ComboboxDialogPattern, ComboboxPattern } from './_combobox-chunk.js';
-import { DeferredContentAware, DeferredContent } from './_deferred-content-chunk.js';
-import './_keyboard-event-manager-chunk.js';
-import './_signal-like-chunk.js';
-import './_pointer-event-manager-chunk.js';
-import './_list-chunk.js';
-import './_list-navigation-chunk.js';
+import { OnInit, OnDestroy } from '@angular/core';
+import * as i1 from '@angular/aria/private';
+import { ComboboxPopupPattern, DeferredContentAware, ComboboxPattern } from '@angular/aria/private';
+export { DeferredContent as ɵɵDeferredContent, DeferredContentAware as ɵɵDeferredContentAware } from './_deferred-content-chunk.js';
 
 /**
- * Identifies an element as a popup for an `ngCombobox`.
+ * Identifies an element as a widget within a combobox popup.
  *
- * This directive acts as a bridge, allowing the `ngCombobox` to discover and interact
- * with the underlying control (e.g., `ngListbox`, `ngTree`, or `ngComboboxDialog`) that
- * manages the options. It's primarily used as a host directive and is responsible for
- * exposing the popup's control pattern to the parent combobox.
- *
- * @developerPreview 21.0
- *
- * @see [Combobox](guide/aria/combobox)
- * @see [Select](guide/aria/select)
- * @see [Multiselect](guide/aria/multiselect)
- * @see [Autocomplete](guide/aria/autocomplete)
- */
-declare class ComboboxPopup<V> {
-    /** The combobox that the popup belongs to. */
-    readonly combobox: Combobox<V> | null;
-    /** The popup controls exposed to the combobox. */
-    readonly _controls: _angular_core.WritableSignal<ComboboxListboxControls<any, V> | ComboboxTreeControls<any, V> | ComboboxDialogPattern | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxPopup<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxPopup<any>, "[ngComboboxPopup]", ["ngComboboxPopup"], {}, {}, never, never, true, never>;
-}
-
-/**
- * The container element that wraps a combobox input and popup, and orchestrates its behavior.
- *
- * The `ngCombobox` directive is the main entry point for creating a combobox and customizing its
- * behavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which
- * is defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the
- * `CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.
- *
- * ```html
- * <div ngCombobox filterMode="highlight">
- *   <input
- *     ngComboboxInput
- *     placeholder="Search for a state..."
- *     [(value)]="searchString"
- *   />
- *
- *   <ng-template ngComboboxPopupContainer>
- *     <div ngListbox [(value)]="selectedValue">
- *       @for (option of filteredOptions(); track option) {
- *         <div ngOption [value]="option" [label]="option">
- *           <span>{{option}}</span>
- *         </div>
- *       }
- *     </div>
- *   </ng-template>
- * </div>
- * ```
- *
- * @developerPreview 21.0
- *
- * @see [Combobox](guide/aria/combobox)
- * @see [Select](guide/aria/select)
- * @see [Multiselect](guide/aria/multiselect)
- * @see [Autocomplete](guide/aria/autocomplete)
+ * This directive should be applied to the element that contains the options or content
+ * of the popup. It handles the communication of ID and active descendant information
+ * to the combobox.
  */
-declare class Combobox<V> {
-    /** A signal wrapper for directionality. */
-    protected readonly textDirection: _angular_core.Signal<_angular_cdk_bidi.Direction>;
-    /** The element that the combobox is attached to. */
+declare class ComboboxWidget implements OnInit, OnDestroy {
+    /** The element that the popup widget is attached to. */
     private readonly _elementRef;
-    /** A reference to the combobox element. */
+    private readonly _popup;
+    /** A reference to the popup widget element. */
     readonly element: HTMLElement;
-    /** The DeferredContentAware host directive. */
-    private readonly _deferredContentAware;
-    /** The combobox popup. */
-    readonly popup: _angular_core.Signal<ComboboxPopup<V> | undefined>;
-    /**
-     * The filter mode for the combobox.
-     * - `manual`: The consumer is responsible for filtering the options.
-     * - `auto-select`: The combobox automatically selects the first matching option.
-     * - `highlight`: The combobox highlights matching text in the options without changing selection.
-     */
-    readonly filterMode: _angular_core.InputSignal<"manual" | "auto-select" | "highlight">;
-    /** Whether the combobox is disabled. */
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Whether the combobox is read-only. */
-    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** The value of the first matching item in the popup. */
-    readonly firstMatch: _angular_core.InputSignal<V | undefined>;
-    /** Whether the combobox is expanded. */
-    readonly expanded: _angular_core.Signal<boolean>;
-    /** Whether the combobox popup should always be expanded, regardless of user interaction. */
-    readonly alwaysExpanded: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Input element connected to the combobox, if any. */
-    readonly inputElement: _angular_core.Signal<HTMLInputElement | undefined>;
-    /** The combobox ui pattern. */
-    readonly _pattern: ComboboxPattern<any, V>;
+    /** The ID of the popup widget. */
+    readonly popupId: _angular_core.WritableSignal<string | undefined>;
+    /** The ID of the active descendant in the widget. */
+    readonly activeDescendant: _angular_core.InputSignal<string | undefined>;
+    private _observer;
     constructor();
-    /** Opens the combobox to the selected item. */
-    open(): void;
-    /** Closes the combobox. */
-    close(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Combobox<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Combobox<any>, "[ngCombobox]", ["ngCombobox"], { "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "firstMatch": { "alias": "firstMatch"; "required": false; "isSignal": true; }; "alwaysExpanded": { "alias": "alwaysExpanded"; "required": false; "isSignal": true; }; }, {}, ["popup"], never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Handles focus in events for the widget. */
+    onFocusin(): void;
+    /** Handles focus out events for the widget. */
+    onFocusout(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxWidget, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxWidget, "[ngComboboxWidget]", ["ngComboboxWidget"], { "activeDescendant": { "alias": "activeDescendant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
- * Integrates a native `<dialog>` element with the combobox, allowing for
- * a modal or non-modal popup experience. It handles the opening and closing of the dialog
- * based on the combobox's expanded state.
+ * A structural directive that marks the `ng-template` to be used as the popup
+ * for a combobox. This content is conditionally rendered.
+ *
+ * The content of the popup can be any element with the `ngComboboxWidget` directive.
  *
  * ```html
- * <ng-template ngComboboxPopupContainer>
- *   <dialog ngComboboxDialog class="example-dialog">
- *     <!-- ... dialog content ... -->
- *   </dialog>
+ * <ng-template ngComboboxPopup>
+ *   <div ngComboboxWidget>
+ *     <!-- ... options ... -->
+ *   </div>
  * </ng-template>
  * ```
- *
- * @developerPreview 21.0
- *
- * @see [Combobox](guide/aria/combobox)
- * @see [Select](guide/aria/select)
- * @see [Multiselect](guide/aria/multiselect)
- * @see [Autocomplete](guide/aria/autocomplete)
  */
-declare class ComboboxDialog {
-    /** The dialog element. */
-    private readonly _elementRef;
-    /** A reference to the dialog element. */
-    readonly element: HTMLElement;
-    /** The combobox that the dialog belongs to. */
-    readonly combobox: Combobox<any>;
-    /** A reference to the parent combobox popup, if one exists. */
-    private readonly _popup;
-    readonly _pattern: ComboboxDialogPattern;
-    constructor();
-    close(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxDialog, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxDialog, "dialog[ngComboboxDialog]", ["ngComboboxDialog"], {}, {}, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
+declare class ComboboxPopup implements OnInit, OnDestroy {
+    private readonly _deferredContent;
+    /** The combobox that the popup belongs to. */
+    readonly combobox: _angular_core.InputSignal<Combobox>;
+    /** The widget contained within the popup. */
+    readonly _widget: _angular_core.WritableSignal<ComboboxWidget | undefined>;
+    /** The element that serves as the control target for the popup. */
+    readonly controlTarget: _angular_core.Signal<HTMLElement | undefined>;
+    /** The ID of the popup. */
+    readonly popupId: _angular_core.Signal<string | undefined>;
+    /** The ID of the active descendant in the popup. */
+    readonly activeDescendant: _angular_core.Signal<string | undefined>;
+    /** The type of the popup (e.g., listbox, tree, grid, dialog). */
+    readonly popupType: _angular_core.InputSignal<"listbox" | "tree" | "grid" | "dialog">;
+    /** The popup pattern. */
+    readonly _pattern: ComboboxPopupPattern;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Registers a widget with the popup. */
+    _registerWidget(widget: ComboboxWidget): void;
+    /** Unregisters the widget from the popup. */
+    _unregisterWidget(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxPopup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxPopup, "ng-template[ngComboboxPopup]", ["ngComboboxPopup"], { "combobox": { "alias": "combobox"; "required": true; "isSignal": true; }; "popupType": { "alias": "popupType"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.DeferredContent; inputs: {}; outputs: {}; }]>;
 }
 
 /**
- * An input that is part of a combobox. It is responsible for displaying the
- * current value and handling user input for filtering and selection.
+ * The container element that wraps a combobox input and popup, and orchestrates its behavior.
  *
- * This directive should be applied to an `<input>` element within an `ngCombobox`
- * container. It automatically handles keyboard interactions, such as opening the
- * popup and navigating through the options.
+ * The `ngCombobox` directive is the main entry point for creating a combobox and customizing its
+ * behavior. It coordinates the interactions between the input and the popup.
  *
  * ```html
- * <input
- *   ngComboboxInput
- *   placeholder="Search..."
- *   [(value)]="searchString"
- * />
- * ```
- *
- * @developerPreview 21.0
+ * <div ngCombobox [(expanded)]="expanded">
+ *   <input ngComboboxInput />
  *
- * @see [Combobox](guide/aria/combobox)
- * @see [Select](guide/aria/select)
- * @see [Multiselect](guide/aria/multiselect)
- * @see [Autocomplete](guide/aria/autocomplete)
+ *   <ng-template ngComboboxPopup>
+ *     <div ngComboboxWidget>
+ *       <!-- ... options ... -->
+ *     </div>
+ *   </ng-template>
+ * </div>
+ * ```
  */
-declare class ComboboxInput {
+declare class Combobox extends DeferredContentAware implements OnInit {
+    private readonly _renderer;
     /** The element that the combobox is attached to. */
     private readonly _elementRef;
     /** A reference to the input element. */
     readonly element: HTMLElement;
-    /** The combobox that the input belongs to. */
-    readonly combobox: Combobox<any>;
-    /** The value of the input. */
+    /** The popup associated with the combobox. */
+    readonly _popup: _angular_core.WritableSignal<ComboboxPopup | undefined>;
+    /** Whether the combobox is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the combobox is soft disabled (remains focusable). */
+    readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the combobox should always remain expanded. */
+    readonly alwaysExpanded: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The tabindex of the combobox. */
+    readonly tabIndex: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /** Whether the combobox is expanded. */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    /** The value of the combobox input. */
     readonly value: _angular_core.ModelSignal<string>;
+    /** An inline suggestion to be displayed in the input. */
+    readonly inlineSuggestion: _angular_core.InputSignal<string | undefined>;
+    /** The combobox ui pattern. */
+    readonly _pattern: ComboboxPattern;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxInput, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxInput, "input[ngComboboxInput]", ["ngComboboxInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
-}
-
-/**
- * A structural directive that marks the `ng-template` to be used as the popup
- * for a combobox. This content is conditionally rendered.
- *
- * The content of the popup can be a `ngListbox`, `ngTree`, or `role="dialog"`, allowing for
- * flexible and complex combobox implementations. The consumer is responsible for
- * implementing the filtering logic based on the `ngComboboxInput`'s value.
- *
- * ```html
- * <ng-template ngComboboxPopupContainer>
- *   <div ngListbox [(value)]="selectedValue">
- *     <!-- ... options ... -->
- *   </div>
- * </ng-template>
- * ```
- *
- * When using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.
- *
- * ```html
- * <ng-template
- *     [cdkConnectedOverlay]="{origin: inputElement, usePopover: 'inline' matchWidth: true}"
- *     [cdkConnectedOverlayOpen]="combobox.expanded()">
- *   <div ngListbox [(value)]="selectedValue">
- *     <!-- ... options ... -->
- *   </div>
- * </ng-template>
- * ```
- *
- * @developerPreview 21.0
- *
- * @see [Combobox](guide/aria/combobox)
- * @see [Select](guide/aria/select)
- * @see [Multiselect](guide/aria/multiselect)
- * @see [Autocomplete](guide/aria/autocomplete)
- */
-declare class ComboboxPopupContainer {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxPopupContainer, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxPopupContainer, "ng-template[ngComboboxPopupContainer]", ["ngComboboxPopupContainer"], {}, {}, never, never, true, [{ directive: typeof DeferredContent; inputs: {}; outputs: {}; }]>;
+    ngOnInit(): void;
+    /** Registers a popup with the combobox. */
+    _registerPopup(popup: ComboboxPopup): void;
+    /** Unregisters the popup from the combobox. */
+    _unregisterPopup(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Combobox, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Combobox, "[ngCombobox]", ["ngCombobox"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "alwaysExpanded": { "alias": "alwaysExpanded"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inlineSuggestion": { "alias": "inlineSuggestion"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "value": "valueChange"; }, never, never, true, never>;
 }
 
-export { Combobox, ComboboxDialog, ComboboxInput, ComboboxPopup, ComboboxPopupContainer, DeferredContent as ɵɵDeferredContent, DeferredContentAware as ɵɵDeferredContentAware };
+export { Combobox, ComboboxPopup, ComboboxWidget };

package/types/grid-testing.d.ts

@@ -0,0 +1,83 @@
+import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate, ComponentHarness } from '@angular/cdk/testing';
+
+/** Filters for locating a `GridCellHarness`. */
+interface GridCellHarnessFilters extends BaseHarnessFilters {
+    /** Only find instances whose text matches the given value. */
+    text?: string | RegExp;
+    /** Only find instances whose selected state matches the given value. */
+    selected?: boolean;
+    /** Only find instances whose disabled state matches the given value. */
+    disabled?: boolean;
+}
+/** Filters for locating a `GridRowHarness`. */
+interface GridRowHarnessFilters extends BaseHarnessFilters {
+}
+/** Filters for locating a `GridHarness`. */
+interface GridHarnessFilters extends BaseHarnessFilters {
+    /** Only find instances whose disabled state matches the given value. */
+    disabled?: boolean;
+}
+
+/** Harness for interacting with a standard ngGridCell in tests. */
+declare class GridCellHarness extends ContentContainerComponentHarness {
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a grid cell with specific attributes.
+     * @param options Options for filtering which cell instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: GridCellHarnessFilters): HarnessPredicate<GridCellHarness>;
+    /** Whether the cell is selected. */
+    isSelected(): Promise<boolean>;
+    /** Whether the cell is disabled. */
+    isDisabled(): Promise<boolean>;
+    /** Gets the text content of the cell. */
+    getText(): Promise<string>;
+    /** Clicks the cell. */
+    click(): Promise<void>;
+    /** Focuses the cell. */
+    focus(): Promise<void>;
+    /** Blurs the cell. */
+    blur(): Promise<void>;
+    /** Whether the cell is active. */
+    isActive(): Promise<boolean>;
+    /** Whether the cell is focused. */
+    isFocused(): Promise<boolean>;
+}
+/** Harness for interacting with a standard ngGridRow in tests. */
+declare class GridRowHarness extends ComponentHarness {
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a grid row with specific attributes.
+     * @param options Options for filtering which row instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: GridRowHarnessFilters): HarnessPredicate<GridRowHarness>;
+    /** Gets all cells in the row. */
+    getCells(filters?: GridCellHarnessFilters): Promise<GridCellHarness[]>;
+    /** Gets the text of the cells in the row. */
+    getCellTextByIndex(filters?: GridCellHarnessFilters): Promise<string[]>;
+}
+/** Harness for interacting with a standard ngGrid in tests. */
+declare class GridHarness extends ComponentHarness {
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a grid with specific attributes.
+     * @param options Options for filtering which grid instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: GridHarnessFilters): HarnessPredicate<GridHarness>;
+    /** Whether the grid is disabled. */
+    isDisabled(): Promise<boolean>;
+    /** Whether the grid is multi-selectable. */
+    isMultiSelectable(): Promise<boolean>;
+    /** Gets all rows in the grid. */
+    getRows(filters?: GridRowHarnessFilters): Promise<GridRowHarness[]>;
+    /** Gets all cells in the grid. */
+    getCells(filters?: GridCellHarnessFilters): Promise<GridCellHarness[]>;
+    /** Gets the text inside the entire grid organized by rows. */
+    getCellTextByIndex(): Promise<string[][]>;
+}
+
+export { GridCellHarness, GridHarness, GridRowHarness };
+export type { GridCellHarnessFilters, GridHarnessFilters, GridRowHarnessFilters };

package/types/grid.d.ts

@@ -1,90 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { Signal, ElementRef } from '@angular/core';
+import { OnInit, OnDestroy, Signal } from '@angular/core';
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
-import { GridPattern, GridCellPattern, GridRowPattern, GridCellWidgetPattern } from './_grid-chunk.js';
-import './_signal-like-chunk.js';
+import { GridCellPattern, GridPattern, GridRowPattern, ElementResolver, GridCellWidgetPattern } from './_grid-chunk.js';
+import { SortedCollection } from './_collection-chunk.js';
 import './_keyboard-event-manager-chunk.js';
-import './_pointer-event-manager-chunk.js';
-
-/**
- * The container for a grid. It provides keyboard navigation and focus management for the grid's
- * rows and cells. It manages the overall behavior of the grid, including focus
- * wrapping, selection, and disabled states.
- *
- * ```html
- * <table ngGrid [multi]="true" [enableSelection]="true">
- *   @for (row of gridData; track row) {
- *     <tr ngGridRow>
- *       @for (cell of row; track cell) {
- *         <td ngGridCell [disabled]="cell.disabled">
- *           {{cell.value}}
- *         </td>
- *       }
- *     </tr>
- *   }
- * </table>
- * ```
- *
- * @developerPreview 21.0
- *
- * @see [Grid](guide/aria/grid)
- */
-declare class Grid {
-    /** A reference to the host element. */
-    private readonly _elementRef;
-    /** A reference to the host element. */
-    readonly element: HTMLElement;
-    /** The rows that make up the grid. */
-    private readonly _rows;
-    /** The UI patterns for the rows in the grid. */
-    private readonly _rowPatterns;
-    /** Text direction. */
-    readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
-    /** Whether selection is enabled for the grid. */
-    readonly enableSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Whether the grid is disabled. */
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /**
-     * Whether to allow disabled items to receive focus. When `true`, disabled items are
-     * focusable but not interactive. When `false`, disabled items are skipped during navigation.
-     */
-    readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /**
-     * The focus strategy used by the grid.
-     * - `roving`: Focus is moved to the active cell using `tabindex`.
-     * - `activedescendant`: Focus remains on the grid container, and `aria-activedescendant` is used to indicate the active cell.
-     */
-    readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
-    /**
-     * The wrapping behavior for keyboard navigation along the row axis.
-     * - `continuous`: Navigation wraps from the last row to the first, and vice-versa.
-     * - `loop`: Navigation wraps within the current row.
-     * - `nowrap`: Navigation stops at the first/last item in the row.
-     */
-    readonly rowWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
-    /**
-     * The wrapping behavior for keyboard navigation along the column axis.
-     * - `continuous`: Navigation wraps from the last column to the first, and vice-versa.
-     * - `loop`: Navigation wraps within the current column.
-     * - `nowrap`: Navigation stops at the first/last item in the column.
-     */
-    readonly colWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
-    /** Whether multiple cells in the grid can be selected. */
-    readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /**
-     * The selection strategy used by the grid.
-     * - `follow`: The focused cell is automatically selected.
-     * - `explicit`: Cells are selected explicitly by the user (e.g., via click or spacebar).
-     */
-    readonly selectionMode: _angular_core.InputSignal<"follow" | "explicit">;
-    /** The UI pattern for the grid. */
-    readonly _pattern: GridPattern;
-    constructor();
-    /** Gets the cell pattern for a given element. */
-    private _getCell;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; }, {}, ["_rows"], never, true, never>;
-}
+import './_click-event-manager-chunk.js';
 
 /**
  * Represents a cell within a grid row. It is the primary focusable element
@@ -101,7 +21,7 @@ declare class Grid {
  *
  * @see [Grid](guide/aria/grid)
  */
-declare class GridCell {
+declare class GridCell implements OnInit, OnDestroy {
     private readonly _elementRef;
     private readonly _renderer;
     /** A reference to the host element. */
@@ -144,6 +64,8 @@ declare class GridCell {
     /** The UI pattern for the grid cell. */
     readonly _pattern: GridCellPattern;
     constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     private _toggleAttribute;
     /** Gets the cell widget pattern for a given element. */
     private _getWidget;
@@ -164,13 +86,13 @@ declare class GridCell {
  *
  * @see [Grid](guide/aria/grid)
  */
-declare class GridRow {
+declare class GridRow implements OnInit, OnDestroy {
     /** A reference to the host element. */
     private readonly _elementRef;
     /** A reference to the host element. */
     readonly element: HTMLElement;
-    /** The cells that make up this row. */
-    private readonly _cells;
+    /** The collection of cells in this row. */
+    readonly _collection: SortedCollection<GridCell>;
     /** The UI patterns for the cells in this row. */
     private readonly _cellPatterns;
     /** The parent grid. */
@@ -181,8 +103,98 @@ declare class GridRow {
     readonly rowIndex: _angular_core.InputSignal<number | undefined>;
     /** The UI pattern for the grid row. */
     readonly _pattern: GridRowPattern;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridRow, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridRow, "[ngGridRow]", ["ngGridRow"], { "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; }, {}, ["_cells"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridRow, "[ngGridRow]", ["ngGridRow"], { "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The container for a grid. It provides keyboard navigation and focus management for the grid's
+ * rows and cells. It manages the overall behavior of the grid, including focus
+ * wrapping, selection, and disabled states.
+ *
+ * ```html
+ * <table ngGrid [multi]="true" [enableSelection]="true">
+ *   @for (row of gridData; track row) {
+ *     <tr ngGridRow>
+ *       @for (cell of row; track cell) {
+ *         <td ngGridCell [disabled]="cell.disabled">
+ *           {{cell.value}}
+ *         </td>
+ *       }
+ *     </tr>
+ *   }
+ * </table>
+ * ```
+ *
+ * @developerPreview 21.0
+ *
+ * @see [Grid](guide/aria/grid)
+ */
+declare class Grid implements OnDestroy {
+    /** A reference to the host element. */
+    private readonly _elementRef;
+    /** A reference to the host element. */
+    readonly element: HTMLElement;
+    /** The collection of rows in the grid. */
+    readonly _collection: SortedCollection<GridRow>;
+    /** The UI patterns for the rows in the grid. */
+    private readonly _rowPatterns;
+    /** Text direction. */
+    readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
+    /** Whether selection is enabled for the grid. */
+    readonly enableSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the grid is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to allow disabled items to receive focus. When `true`, disabled items are
+     * focusable but not interactive. When `false`, disabled items are skipped during navigation.
+     */
+    readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The focus strategy used by the grid.
+     * - `roving`: Focus is moved to the active cell using `tabindex`.
+     * - `activedescendant`: Focus remains on the grid container, and `aria-activedescendant` is used to indicate the active cell.
+     */
+    readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
+    /**
+     * The wrapping behavior for keyboard navigation along the row axis.
+     * - `continuous`: Navigation wraps from the last row to the first, and vice-versa.
+     * - `loop`: Navigation wraps within the current row.
+     * - `nowrap`: Navigation stops at the first/last item in the row.
+     */
+    readonly rowWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
+    /**
+     * The wrapping behavior for keyboard navigation along the column axis.
+     * - `continuous`: Navigation wraps from the last column to the first, and vice-versa.
+     * - `loop`: Navigation wraps within the current column.
+     * - `nowrap`: Navigation stops at the first/last item in the column.
+     */
+    readonly colWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
+    /** Whether multiple cells in the grid can be selected. */
+    readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The selection strategy used by the grid.
+     * - `follow`: The focused cell is automatically selected.
+     * - `explicit`: Cells are selected explicitly by the user (e.g., via click or spacebar).
+     */
+    readonly selectionMode: _angular_core.InputSignal<"follow" | "explicit">;
+    /** The tabindex of the grid. */
+    readonly tabIndex: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    /** The UI pattern for the grid. */
+    readonly _pattern: GridPattern;
+    /** The ID of the active descendant in the grid. */
+    readonly activeDescendant: Signal<string | undefined>;
+    constructor();
+    ngOnDestroy(): void;
+    /** Scrolls the active cell into view. */
+    scrollActiveCellIntoView(options?: ScrollIntoViewOptions): void;
+    /** Gets the cell pattern for a given element. */
+    private _getCell;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -219,7 +231,7 @@ declare class GridCellWidget {
     /** Whether the widget is disabled. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** The target that will receive focus instead of the widget. */
-    readonly focusTarget: _angular_core.InputSignal<ElementRef<any> | HTMLElement | undefined>;
+    readonly focusTarget: _angular_core.InputSignal<ElementResolver<HTMLElement>>;
     /** Emits when the widget is activated. */
     readonly activated: _angular_core.OutputEmitterRef<KeyboardEvent | FocusEvent | undefined>;
     /** Emits when the widget is deactivated. */