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

package/types/grid.d.ts

@@ -1,97 +1,11 @@
 import * as _angular_core from '@angular/core';
-import { Signal, EventEmitter } from '@angular/core';
+import { OnInit, OnDestroy, Signal } from '@angular/core';
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
-import { GridPattern, GridCellPattern, GridRowPattern, ElementResolver, 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 './_click-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 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();
-    /** 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; }; }, {}, ["_rows"], never, true, never>;
-}
-
 /**
  * Represents a cell within a grid row. It is the primary focusable element
  * within the grid. It can be disabled and can have its selection state managed
@@ -107,13 +21,11 @@ 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. */
     readonly element: HTMLElement;
-    /** Emits when the cell is activated via Enter/Space (simple widgets only). */
-    readonly activated: EventEmitter<KeyboardEvent>;
     /** Whether the cell is currently active (focused). */
     readonly active: Signal<boolean>;
     /** The widget contained within this cell, if any. */
@@ -152,11 +64,13 @@ 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;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCell, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "activated": "activated"; "selected": "selectedChange"; }, ["_widget"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["_widget"], never, true, never>;
 }
 
 /**
@@ -172,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. */
@@ -189,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>;
 }
 
 /**

package/types/listbox-testing.d.ts

@@ -15,24 +15,49 @@ interface ListboxHarnessFilters extends BaseHarnessFilters {
     disabled?: boolean;
 }
 
+/** Harness for interacting with a standard ngOption in tests. */
 declare class ListboxOptionHarness extends ComponentHarness {
     static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for an option
+     * with specific attributes.
+     * @param options Options for filtering which option instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
     static with(options?: ListboxOptionHarnessFilters): HarnessPredicate<ListboxOptionHarness>;
+    /** Whether the option is selected. */
     isSelected(): Promise<boolean>;
+    /** Whether the option is disabled. */
     isDisabled(): Promise<boolean>;
+    /** Gets the option's text. */
     getText(): Promise<string>;
+    /** Clicks the option to toggle its selected state. */
     click(): Promise<void>;
 }
+/** Harness for interacting with a standard ngListbox in tests. */
 declare class ListboxHarness extends ComponentHarness {
     static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a listbox
+     * with specific attributes.
+     * @param options Options for filtering which listbox instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
     static with(options?: ListboxHarnessFilters): HarnessPredicate<ListboxHarness>;
+    /** Gets the orientation of the listbox. */
     getOrientation(): Promise<'vertical' | 'horizontal'>;
+    /** Whether the listbox is multiselectable. */
     isMulti(): Promise<boolean>;
+    /** Whether the listbox is disabled. */
     isDisabled(): Promise<boolean>;
+    /** Gets the options inside the listbox. */
     getOptions(filters?: ListboxOptionHarnessFilters): Promise<ListboxOptionHarness[]>;
+    /** Focuses the listbox container. */
     focus(): Promise<void>;
     /** Blurs the listbox container. */
     blur(): Promise<void>;
+    /** Gets the ID of the active option. */
+    getActiveDescendantId(): Promise<string | null>;
 }
 
 export { ListboxHarness, ListboxOptionHarness };

package/types/listbox.d.ts

@@ -1,16 +1,59 @@
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
-import { Signal } from '@angular/core';
+import { OnInit, OnDestroy, Signal } from '@angular/core';
 import { OptionPattern, ListboxPattern } from './_listbox-chunk.js';
-import { ComboboxPopup } from './combobox.js';
-export { Combobox as ɵɵCombobox, ComboboxDialog as ɵɵComboboxDialog, ComboboxInput as ɵɵComboboxInput, ComboboxPopupContainer as ɵɵComboboxPopupContainer } from './combobox.js';
-import './_signal-like-chunk.js';
+import { SortedCollection } from './_collection-chunk.js';
 import './_list-chunk.js';
 import './_list-navigation-chunk.js';
 import './_keyboard-event-manager-chunk.js';
 import './_click-event-manager-chunk.js';
-import './_combobox-chunk.js';
-import './_deferred-content-chunk.js';
+
+/**
+ * A selectable option in an `ngListbox`.
+ *
+ * This directive should be applied to an element (e.g., `<li>`, `<div>`) within an
+ * `ngListbox`. The `value` input is used to identify the option, and the `label` input provides
+ * the accessible name for the option.
+ *
+ * ```html
+ * <li ngOption value="item-id" label="Item Name">
+ *   Item Name
+ * </li>
+ * ```
+ *
+ * @developerPreview 21.0
+ *
+ * @see [Listbox](guide/aria/listbox)
+ * @see [Autocomplete](guide/aria/autocomplete)
+ * @see [Select](guide/aria/select)
+ * @see [Multiselect](guide/aria/multiselect)
+ */
+declare class Option<V> implements OnInit, OnDestroy {
+    /** A reference to the host element. */
+    readonly element: HTMLElement;
+    /** Whether the option is currently active (focused). */
+    readonly active: _angular_core.Signal<boolean>;
+    /** The parent Listbox. */
+    private readonly _listbox;
+    /** A unique identifier for the option. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** The parent Listbox UIPattern. */
+    private readonly _listboxPattern;
+    /** The value of the option. */
+    readonly value: _angular_core.InputSignal<V>;
+    /** Whether an item is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The text used by the typeahead search. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Whether the option is selected. */
+    readonly selected: _angular_core.Signal<boolean | undefined>;
+    /** The Option UIPattern. */
+    readonly _pattern: OptionPattern<V>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Option<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Option<any>, "[ngOption]", ["ngOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 
 /**
  * Represents a container used to display a list of items for a user to select from.
@@ -36,21 +79,17 @@ import './_deferred-content-chunk.js';
  * @see [Select](guide/aria/select)
  * @see [Multiselect](guide/aria/multiselect)
  */
-declare class Listbox<V> {
+declare class Listbox<V> implements OnDestroy {
     /** A unique identifier for the listbox. */
     readonly id: _angular_core.InputSignal<string>;
-    /** A reference to the parent combobox popup, if one exists. */
-    private readonly _popup;
     /** A reference to the host element. */
     private readonly _elementRef;
     /** A reference to the host element. */
     readonly element: HTMLElement;
-    /** The Options nested inside of the Listbox. */
-    private readonly _options;
+    /** The collection of Options. */
+    readonly _collection: SortedCollection<Option<V>>;
     /** A signal wrapper for directionality. */
     protected readonly textDirection: Signal<_angular_cdk_bidi.Direction>;
-    /** The Option UIPatterns of the child Options. */
-    protected readonly items: Signal<OptionPattern<V>[]>;
     /** Whether the list is vertically or horizontally oriented. */
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /** Whether multiple items in the list can be selected at once. */
@@ -89,56 +128,12 @@ declare class Listbox<V> {
     /** The ID of the active descendant in the listbox. */
     readonly activeDescendant: Signal<string | undefined>;
     constructor();
+    ngOnDestroy(): void;
     scrollActiveItemIntoView(options?: ScrollIntoViewOptions): void;
     /** Navigates to the first item in the listbox. */
     gotoFirst(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Listbox<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Listbox<any>, "[ngListbox]", ["ngListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["_options"], never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
-}
-
-/**
- * A selectable option in an `ngListbox`.
- *
- * This directive should be applied to an element (e.g., `<li>`, `<div>`) within an
- * `ngListbox`. The `value` input is used to identify the option, and the `label` input provides
- * the accessible name for the option.
- *
- * ```html
- * <li ngOption value="item-id" label="Item Name">
- *   Item Name
- * </li>
- * ```
- *
- * @developerPreview 21.0
- *
- * @see [Listbox](guide/aria/listbox)
- * @see [Autocomplete](guide/aria/autocomplete)
- * @see [Select](guide/aria/select)
- * @see [Multiselect](guide/aria/multiselect)
- */
-declare class Option<V> {
-    /** A reference to the host element. */
-    readonly element: HTMLElement;
-    /** Whether the option is currently active (focused). */
-    readonly active: _angular_core.Signal<boolean>;
-    /** The parent Listbox. */
-    private readonly _listbox;
-    /** A unique identifier for the option. */
-    readonly id: _angular_core.InputSignal<string>;
-    /** The parent Listbox UIPattern. */
-    private readonly _listboxPattern;
-    /** The value of the option. */
-    readonly value: _angular_core.InputSignal<V>;
-    /** Whether an item is disabled. */
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** The text used by the typeahead search. */
-    readonly label: _angular_core.InputSignal<string | undefined>;
-    /** Whether the option is selected. */
-    readonly selected: _angular_core.Signal<boolean | undefined>;
-    /** The Option UIPattern. */
-    readonly _pattern: OptionPattern<V>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Option<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Option<any>, "[ngOption]", ["ngOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Listbox<any>, "[ngListbox]", ["ngListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
-export { Listbox, Option, ComboboxPopup as ɵɵComboboxPopup };
+export { Listbox, Option };

package/types/menu-testing.d.ts

@@ -29,6 +29,10 @@ declare class MenuItemHarness extends ComponentHarness {
     click(): Promise<void>;
     /** Resolves the nested submenu panel associated with this menu item, if any exists. */
     getSubmenu(): Promise<MenuHarness | null>;
+    /** Whether the menu item has focus. */
+    isFocused(): Promise<boolean>;
+    /** Whether the menu item acts as a submenu trigger. */
+    hasSubmenu(): Promise<boolean>;
 }
 /** Harness for interacting with a standard ngMenu or ngMenuBar in tests. */
 declare class MenuHarness extends ComponentHarness {
@@ -38,6 +42,8 @@ declare class MenuHarness extends ComponentHarness {
     _getTrigger(): Promise<TestElement | null>;
     /** Checks whether the menu container is visible. */
     isOpen(): Promise<boolean>;
+    /** Whether the menu is a menu bar. */
+    isMenuBar(): Promise<boolean>;
     /** Opens the menu if it is currently closed. */
     open(): Promise<void>;
     /** Closes the menu if it is currently open. */

package/types/menu.d.ts

@@ -1,9 +1,9 @@
 import * as _angular_core from '@angular/core';
-import { Signal } from '@angular/core';
+import { OnDestroy, OnInit, Signal } from '@angular/core';
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import { MenuBarPattern, MenuItemPattern, MenuPattern, MenuTriggerPattern } from './_menu-chunk.js';
 import { DeferredContentAware, DeferredContent } from './_deferred-content-chunk.js';
-import { SignalLike } from './_signal-like-chunk.js';
+import { SortedCollection, SignalLike } from './_collection-chunk.js';
 import './_keyboard-event-manager-chunk.js';
 import './_list-chunk.js';
 import './_list-navigation-chunk.js';
@@ -37,9 +37,9 @@ import './_list-navigation-chunk.js';
  * @see [Menu](guide/aria/menu)
  * @see [MenuBar](guide/aria/menubar)
  */
-declare class MenuBar<V> {
-    /** The menu items contained in the menubar. */
-    readonly _allItems: _angular_core.Signal<readonly MenuItem<V>[]>;
+declare class MenuBar<V> implements OnDestroy {
+    /** The collection of menu items. */
+    readonly _collection: SortedCollection<MenuItem<V>>;
     readonly _items: SignalLike<MenuItem<V>[]>;
     /** A reference to the host element. */
     private readonly _elementRef;
@@ -64,10 +64,11 @@ declare class MenuBar<V> {
     /** A callback function triggered when a menu item is selected. */
     readonly itemSelected: _angular_core.OutputEmitterRef<V>;
     constructor();
+    ngOnDestroy(): void;
     /** Closes the menubar. */
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuBar<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuBar<any>, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "itemSelected": "itemSelected"; }, ["_allItems"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuBar<any>, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "itemSelected": "itemSelected"; }, never, never, true, never>;
 }
 
 /**
@@ -78,7 +79,7 @@ declare class MenuBar<V> {
  *
  * ```html
  * <div ngMenu (itemSelected)="doAction()">
- *   <div ngMenuItem >Action Item</div>
+ *   <div ngMenuItem>Action Item</div>
  *   <div ngMenuItem [submenu]="anotherMenu">Submenu Trigger</div>
  * </div>
  * ```
@@ -88,14 +89,14 @@ declare class MenuBar<V> {
  * @see [Menu](guide/aria/menu)
  * @see [MenuBar](guide/aria/menubar)
  */
-declare class MenuItem<V> {
+declare class MenuItem<V> implements OnInit, OnDestroy {
     /** A reference to the host element. */
     private readonly _elementRef;
     /** A reference to the host element. */
     readonly element: HTMLElement;
     /** The unique ID of the menu item. */
     readonly id: _angular_core.InputSignal<string>;
-    /** The value of the menu item, used as the default aria-label */
+    /** The value of the menu item. */
     readonly value: _angular_core.InputSignal<V>;
     /** Whether the menu item is disabled. */
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -114,6 +115,8 @@ declare class MenuItem<V> {
     /** The menu item ui pattern instance. */
     readonly _pattern: MenuItemPattern<V>;
     constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     /** Opens the submenu focusing on the first menu item. */
     open(): void;
     /** Closes the submenu. */
@@ -149,11 +152,11 @@ declare class MenuItem<V> {
  * @see [Menu](guide/aria/menu)
  * @see [MenuBar](guide/aria/menubar)
  */
-declare class Menu<V> {
+declare class Menu<V> implements OnDestroy {
     /** The DeferredContentAware host directive. */
     private readonly _deferredContentAware;
-    /** The menu items contained in the menu. */
-    readonly _allItems: Signal<readonly MenuItem<V>[]>;
+    /** The collection of menu items. */
+    readonly _collection: SortedCollection<MenuItem<V>>;
     /** The menu items that are direct children of this menu. */
     readonly _items: Signal<MenuItem<V>[]>;
     /** A reference to the host element. */
@@ -194,10 +197,11 @@ declare class Menu<V> {
     /** The delay in milliseconds before expanding sub-menus on hover. */
     readonly expansionDelay: _angular_core.InputSignal<number>;
     constructor();
+    ngOnDestroy(): void;
     /** Closes the menu. */
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Menu<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Menu<any>, "[ngMenu]", ["ngMenu"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expansionDelay": { "alias": "expansionDelay"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, ["_allItems"], never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Menu<any>, "[ngMenu]", ["ngMenu"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expansionDelay": { "alias": "expansionDelay"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
 }
 
 /**