diff --git a/.github/actions/deploy-docs-site/main.js b/.github/actions/deploy-docs-site/main.js
index ace8a95c1d44..a28fff577ee1 100644
--- a/.github/actions/deploy-docs-site/main.js
+++ b/.github/actions/deploy-docs-site/main.js
@@ -40191,6 +40191,8 @@ var require_Alias = __commonJS2({
        * instance of the `source` anchor before this node.
        */
       resolve(doc, ctx) {
+        if (ctx?.maxAliasCount === 0)
+          throw new ReferenceError("Alias resolution is disabled");
         let nodes;
         if (ctx?.aliasResolveCache) {
           nodes = ctx.aliasResolveCache;
@@ -41243,18 +41245,18 @@ var require_merge = __commonJS2({
     };
     var isMergeKey = (ctx, key) => (merge22.identify(key) || identity.isScalar(key) && (!key.type || key.type === Scalar.Scalar.PLAIN) && merge22.identify(key.value)) && ctx?.doc.schema.tags.some((tag) => tag.tag === merge22.tag && tag.default);
     function addMergeToJSMap(ctx, map, value) {
-      value = ctx && identity.isAlias(value) ? value.resolve(ctx.doc) : value;
-      if (identity.isSeq(value))
-        for (const it of value.items)
+      const source = resolveAliasValue(ctx, value);
+      if (identity.isSeq(source))
+        for (const it of source.items)
           mergeValue(ctx, map, it);
-      else if (Array.isArray(value))
-        for (const it of value)
+      else if (Array.isArray(source))
+        for (const it of source)
           mergeValue(ctx, map, it);
       else
-        mergeValue(ctx, map, value);
+        mergeValue(ctx, map, source);
     }
     function mergeValue(ctx, map, value) {
-      const source = ctx && identity.isAlias(value) ? value.resolve(ctx.doc) : value;
+      const source = resolveAliasValue(ctx, value);
       if (!identity.isMap(source))
         throw new Error("Merge sources must be maps or map aliases");
       const srcMap = source.toJSON(null, ctx, Map);
@@ -41275,6 +41277,9 @@ var require_merge = __commonJS2({
       }
       return map;
     }
+    function resolveAliasValue(ctx, value) {
+      return ctx && identity.isAlias(value) ? value.resolve(ctx.doc, ctx) : value;
+    }
     exports.addMergeToJSMap = addMergeToJSMap;
     exports.isMergeKey = isMergeKey;
     exports.merge = merge22;
@@ -41890,7 +41895,7 @@ var require_stringifyNumber = __commonJS2({
       if (!isFinite(num))
         return isNaN(num) ? ".nan" : num < 0 ? "-.inf" : ".inf";
       let n = Object.is(value, -0) ? "-0" : JSON.stringify(value);
-      if (!format3 && minFractionDigits && (!tag || tag === "tag:yaml.org,2002:float") && /^\d/.test(n)) {
+      if (!format3 && minFractionDigits && (!tag || tag === "tag:yaml.org,2002:float") && /^-?\d/.test(n) && !n.includes("e")) {
         let i = n.indexOf(".");
         if (i < 0) {
           i = n.length;
@@ -44200,7 +44205,7 @@ var require_resolve_flow_scalar = __commonJS2({
             while (next === " " || next === "	")
               next = source[++i + 1];
           } else if (next === "x" || next === "u" || next === "U") {
-            const length = { x: 2, u: 4, U: 8 }[next];
+            const length = next === "x" ? 2 : next === "u" ? 4 : 8;
             res += parseCharCode(source, i + 1, length, onError);
             i += length;
           } else {
@@ -44275,12 +44280,13 @@ var require_resolve_flow_scalar = __commonJS2({
       const cc = source.substr(offset, length);
       const ok = cc.length === length && /^[0-9a-fA-F]+$/.test(cc);
       const code = ok ? parseInt(cc, 16) : NaN;
-      if (isNaN(code)) {
+      try {
+        return String.fromCodePoint(code);
+      } catch {
         const raw = source.substr(offset - 2, length + 2);
         onError(offset - 2, "BAD_DQ_ESCAPE", `Invalid escape sequence ${raw}`);
         return raw;
       }
-      return String.fromCodePoint(code);
     }
     exports.resolveFlowScalar = resolveFlowScalar;
   }
@@ -51631,7 +51637,7 @@ undici/lib/web/websocket/frame.js:
      *)
   *)
 
-@angular/ng-dev/bundles/chunk-PTDPQBIK.mjs:
+@angular/ng-dev/bundles/chunk-ISGQ6N6G.mjs:
   (*! Bundled license information:
   
   @octokit/request-error/dist-src/index.js:
diff --git a/MODULE.bazel b/MODULE.bazel
index d256c4fdfd50..8ba831840e34 100644
--- a/MODULE.bazel
+++ b/MODULE.bazel
@@ -18,28 +18,28 @@ bazel_dep(name = "yq.bzl", version = "0.3.6")
 bazel_dep(name = "rules_angular")
 git_override(
     module_name = "rules_angular",
-    commit = "b1d295334e70335dab7ac9984a989fae0a9c9dc2",
+    commit = "19914e2fb677d50b16360dcea8740a1b0dd46172",
     remote = "https://github.com/angular/rules_angular.git",
 )
 
 bazel_dep(name = "devinfra")
 git_override(
     module_name = "devinfra",
-    commit = "fcf9aad99710835428e0e9859bf060689045a131",
+    commit = "f91b383e3128872b21f709d2ae7543344c65526d",
     remote = "https://github.com/angular/dev-infra.git",
 )
 
 bazel_dep(name = "rules_sass")
 git_override(
     module_name = "rules_sass",
-    commit = "a65d937fabd87672f7245aeaa5eb5a0c5a2abead",
+    commit = "846437db57b03761ac6af22415919a9763b7be65",
     remote = "https://github.com/angular/rules_sass.git",
 )
 
 bazel_dep(name = "rules_browsers")
 git_override(
     module_name = "rules_browsers",
-    commit = "b03f09ef28a08f8ae07482851cf5ecbf6ac23a2a",
+    commit = "bf27ea46fdbb0209526ca821f1500d4337eb8299",
     remote = "https://github.com/angular/rules_browsers.git",
 )
 
diff --git a/MODULE.bazel.lock b/MODULE.bazel.lock
index 945312c64874..5dc39011cb47 100644
--- a/MODULE.bazel.lock
+++ b/MODULE.bazel.lock
@@ -24,12 +24,10 @@
     "https://bcr.bazel.build/modules/aspect_rules_jasmine/2.0.4/MODULE.bazel": "fbb819eb8b7e5d7f67fdd38f7cecb413e287594cd666ce192c72c8828527775a",
     "https://bcr.bazel.build/modules/aspect_rules_jasmine/2.0.4/source.json": "81ffb708333cd98ec3c0b4cc004f4d5cf92a16914b5196a2892c45141bba7cff",
     "https://bcr.bazel.build/modules/aspect_rules_js/2.0.0/MODULE.bazel": "b45b507574aa60a92796e3e13c195cd5744b3b8aff516a9c0cb5ae6a048161c5",
-    "https://bcr.bazel.build/modules/aspect_rules_js/3.0.3/MODULE.bazel": "28a30e8fc33bf64a67835d64d124f6e05a7d59648dcb27b110fb3502f761e503",
     "https://bcr.bazel.build/modules/aspect_rules_js/3.1.1/MODULE.bazel": "b83cf3ee44837345f1c926d70b96453deb5e244de43d08dcd7acad8d381c275a",
     "https://bcr.bazel.build/modules/aspect_rules_js/3.1.1/source.json": "2806c2d7ce5993f68b74df5f3e2de45d4b2a5798afedd459d88e37c75562da97",
     "https://bcr.bazel.build/modules/aspect_rules_rollup/2.0.1/MODULE.bazel": "296e3a053658c2af989ba9bd62a205e6d1fa84bdd6dd5249196546e6b84770ec",
     "https://bcr.bazel.build/modules/aspect_rules_rollup/2.0.1/source.json": "2fe8ac1ccb4de74bf884761e070010280b272d94e3997205b361b91c75409726",
-    "https://bcr.bazel.build/modules/aspect_rules_ts/3.8.8/MODULE.bazel": "b52b929a948438665809d49af610f58d1b14f63d6d21ab748f47b6050be4c1f6",
     "https://bcr.bazel.build/modules/aspect_rules_ts/3.8.9/MODULE.bazel": "bd5f9ebf517cfcd377eaa7ce1cb16035d167f00774b77789909590c53bc6f20c",
     "https://bcr.bazel.build/modules/aspect_rules_ts/3.8.9/source.json": "59e66656561571ed82ccff56c75c43d0bc79f0065ca8d17be2752d4f648d40c9",
     "https://bcr.bazel.build/modules/aspect_tools_telemetry/0.2.6/MODULE.bazel": "cafb8781ad591bc57cc765dca5fefab08cf9f65af363d162b79d49205c7f8af7",
@@ -90,7 +88,8 @@
     "https://bcr.bazel.build/modules/jsoncpp/1.9.5/source.json": "4108ee5085dd2885a341c7fab149429db457b3169b86eb081fa245eadf69169d",
     "https://bcr.bazel.build/modules/libpfm/4.11.0/MODULE.bazel": "45061ff025b301940f1e30d2c16bea596c25b176c8b6b3087e92615adbd52902",
     "https://bcr.bazel.build/modules/package_metadata/0.0.2/MODULE.bazel": "fb8d25550742674d63d7b250063d4580ca530499f045d70748b1b142081ebb92",
-    "https://bcr.bazel.build/modules/package_metadata/0.0.2/source.json": "e53a759a72488d2c0576f57491ef2da0cf4aab05ac0997314012495935531b73",
+    "https://bcr.bazel.build/modules/package_metadata/0.0.3/MODULE.bazel": "77890552ecea9e284b5424c9de827a58099348763a4359e975c359a83d4faa83",
+    "https://bcr.bazel.build/modules/package_metadata/0.0.3/source.json": "742075a428ad12a3fa18a69014c2f57f01af910c6d9d18646c990200853e641a",
     "https://bcr.bazel.build/modules/platforms/0.0.10/MODULE.bazel": "8cb8efaf200bdeb2150d93e162c40f388529a25852b332cec879373771e48ed5",
     "https://bcr.bazel.build/modules/platforms/0.0.11/MODULE.bazel": "0daefc49732e227caa8bfa834d65dc52e8cc18a2faf80df25e8caea151a9413f",
     "https://bcr.bazel.build/modules/platforms/0.0.4/MODULE.bazel": "9b328e31ee156f53f3c416a64f8491f7eb731742655a47c9eec4703a71644aee",
@@ -99,7 +98,8 @@
     "https://bcr.bazel.build/modules/platforms/0.0.7/MODULE.bazel": "72fd4a0ede9ee5c021f6a8dd92b503e089f46c227ba2813ff183b71616034814",
     "https://bcr.bazel.build/modules/platforms/0.0.8/MODULE.bazel": "9f142c03e348f6d263719f5074b21ef3adf0b139ee4c5133e2aa35664da9eb2d",
     "https://bcr.bazel.build/modules/platforms/1.0.0/MODULE.bazel": "f05feb42b48f1b3c225e4ccf351f367be0371411a803198ec34a389fb22aa580",
-    "https://bcr.bazel.build/modules/platforms/1.0.0/source.json": "f4ff1fd412e0246fd38c82328eb209130ead81d62dcd5a9e40910f867f733d96",
+    "https://bcr.bazel.build/modules/platforms/1.1.0/MODULE.bazel": "1c0c09f5bdcf4b3f924720d2478a3711cb39f4977019ca5988685e5b7e18b3d2",
+    "https://bcr.bazel.build/modules/platforms/1.1.0/source.json": "fcf351c47596c939140ab0d333dfdd08ed1ea6ce33c2fe70c12493a301cf1344",
     "https://bcr.bazel.build/modules/protobuf/21.7/MODULE.bazel": "a5a29bb89544f9b97edce05642fac225a808b5b7be74038ea3640fae2f8e66a7",
     "https://bcr.bazel.build/modules/protobuf/27.0/MODULE.bazel": "7873b60be88844a0a1d8f80b9d5d20cfbd8495a689b8763e76c6372998d3f64c",
     "https://bcr.bazel.build/modules/protobuf/27.1/MODULE.bazel": "703a7b614728bb06647f965264967a8ef1c39e09e8f167b3ca0bb1fd80449c0d",
@@ -197,7 +197,6 @@
     "https://bcr.bazel.build/modules/stardoc/0.7.1/MODULE.bazel": "3548faea4ee5dda5580f9af150e79d0f6aea934fc60c1cc50f4efdd9420759e7",
     "https://bcr.bazel.build/modules/stardoc/0.7.2/MODULE.bazel": "fc152419aa2ea0f51c29583fab1e8c99ddefd5b3778421845606ee628629e0e5",
     "https://bcr.bazel.build/modules/stardoc/0.7.2/source.json": "58b029e5e901d6802967754adf0a9056747e8176f017cfe3607c0851f4d42216",
-    "https://bcr.bazel.build/modules/tar.bzl/0.10.1/MODULE.bazel": "bf5fda5b5ccef8c3c4a5f4886144377386e0baa382972f257acb42dcf40ea908",
     "https://bcr.bazel.build/modules/tar.bzl/0.10.4/MODULE.bazel": "e8f9ff79199e8d9eaad7f1b0a77ad74b30bb82d794b87d8ca942bead5de83ae9",
     "https://bcr.bazel.build/modules/tar.bzl/0.10.4/source.json": "20143442376c03426f6135292ba02d825cb75308aa47e6bf42dd4cc5a435c2ff",
     "https://bcr.bazel.build/modules/tar.bzl/0.2.1/MODULE.bazel": "52d1c00a80a8cc67acbd01649e83d8dd6a9dc426a6c0b754a04fe8c219c76468",
diff --git a/adev/package.json b/adev/package.json
index 200080a99eba..a2e8a041a548 100644
--- a/adev/package.json
+++ b/adev/package.json
@@ -5,9 +5,9 @@
     "@algolia/requester-browser-xhr": "5.52.0",
     "@algolia/requester-node-http": "5.52.0",
     "@angular/animations": "workspace:*",
-    "@angular/aria": "22.0.0-next.7",
+    "@angular/aria": "22.0.0-next.8",
     "@angular/build": "22.0.0-next.7",
-    "@angular/cdk": "22.0.0-next.7",
+    "@angular/cdk": "22.0.0-next.8",
     "@angular/cli": "22.0.0-next.7",
     "@angular/common": "workspace:*",
     "@angular/compiler": "workspace:*",
@@ -15,7 +15,7 @@
     "@angular/core": "workspace:*",
     "@angular/docs": "workspace:*",
     "@angular/forms": "workspace:*",
-    "@angular/material": "22.0.0-next.7",
+    "@angular/material": "22.0.0-next.8",
     "@angular/platform-browser": "workspace:*",
     "@angular/platform-server": "workspace:*",
     "@angular/router": "workspace:*",
diff --git a/adev/shared-docs/components/select/select.component.html b/adev/shared-docs/components/select/select.component.html
index ebf8c0966bce..ef87c18c9b5b 100644
--- a/adev/shared-docs/components/select/select.component.html
+++ b/adev/shared-docs/components/select/select.component.html
@@ -1,7 +1,6 @@
-<div ngCombobox #outerCombobox="ngCombobox" [readonly]="true" [disabled]="disabled()">
+<div ngCombobox #outerCombobox="ngCombobox" [disabled]="disabled()">
   <div class="docs-select-input-container">
     <input
-      ngComboboxInput
       [attr.id]="id()"
       [attr.name]="name()"
       [value]="displayValue()"
@@ -13,49 +12,44 @@
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
-    <dialog ngComboboxDialog class="docs-select-dialog">
-      <div ngCombobox #innerCombobox="ngCombobox" filterMode="manual" [alwaysExpanded]="true">
-        <div class="docs-select-search-container">
-          <span
-            class="material-symbols-outlined docs-select-search-icon"
-            translate="no"
-            aria-hidden="true"
-            >search</span
-          >
-          <input
-            ngComboboxInput
-            class="docs-select-search-input"
-            placeholder="Search..."
-            [(value)]="searchString"
-          />
-        </div>
+  <ng-template ngComboboxPopup [combobox]="outerCombobox">
+    <dialog ngComboboxWidget #dialogWidget="ngComboboxWidget" class="docs-select-dialog">
+      <div class="docs-select-search-container">
+        <span
+          class="material-symbols-outlined docs-select-search-icon"
+          translate="no"
+          aria-hidden="true"
+          >search</span
+        >
+        <input
+          ngCombobox
+          #innerCombobox="ngCombobox"
+          [alwaysExpanded]="true"
+          class="docs-select-search-input"
+          placeholder="Search..."
+          [(value)]="searchString"
+        />
+      </div>
 
-        <ng-template ngComboboxPopupContainer>
-          @if (filteredOptions().length === 0) {
-            <div class="docs-select-no-results">No results found</div>
-          }
+      <ng-template ngComboboxPopup [combobox]="innerCombobox">
+        @if (filteredOptions().length === 0) {
+          <div class="docs-select-no-results">No results found</div>
+        }
 
-          <div ngListbox [(value)]="selectedValues" class="docs-select-listbox">
-            @for (option of filteredOptions(); track option.value) {
-              <div
-                ngOption
-                [value]="option.value"
-                [label]="option.label"
-                class="docs-select-option"
+        <div ngListbox ngComboboxWidget [(value)]="selectedValues" class="docs-select-listbox">
+          @for (option of filteredOptions(); track option.value) {
+            <div ngOption [value]="option.value" [label]="option.label" class="docs-select-option">
+              <span class="docs-select-option-label">{{ option.label }}</span>
+              <span
+                class="material-symbols-outlined docs-select-check-icon"
+                translate="no"
+                aria-hidden="true"
+                >check</span
               >
-                <span class="docs-select-option-label">{{ option.label }}</span>
-                <span
-                  class="material-symbols-outlined docs-select-check-icon"
-                  translate="no"
-                  aria-hidden="true"
-                  >check</span
-                >
-              </div>
-            }
-          </div>
-        </ng-template>
-      </div>
+            </div>
+          }
+        </div>
+      </ng-template>
     </dialog>
   </ng-template>
 </div>
diff --git a/adev/shared-docs/components/select/select.component.ts b/adev/shared-docs/components/select/select.component.ts
index 1ff0554a8d28..2cb793e27308 100644
--- a/adev/shared-docs/components/select/select.component.ts
+++ b/adev/shared-docs/components/select/select.component.ts
@@ -6,12 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {
-  Combobox,
-  ComboboxDialog,
-  ComboboxInput,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {
   afterRenderEffect,
@@ -35,15 +30,7 @@ export interface SelectOption {
 
 @Component({
   selector: 'docs-select',
-  imports: [
-    Combobox,
-    ComboboxDialog,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    FormsModule,
-    Listbox,
-    Option,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, FormsModule, Listbox, Option],
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.scss'],
 })
@@ -55,9 +42,9 @@ export class Select implements FormValueControl<string | null> {
   readonly options = input.required<SelectOption[]>();
   readonly disabled = input(false);
 
-  readonly dialog = viewChild(ComboboxDialog);
+  readonly dialog = viewChild<ComboboxWidget>('dialogWidget');
   readonly listbox = viewChild<Listbox<SelectOptionValue>>(Listbox);
-  readonly combobox = viewChild<Combobox<SelectOptionValue>>(Combobox);
+  readonly combobox = viewChild(Combobox);
 
   readonly searchString = signal('');
 
@@ -91,7 +78,7 @@ export class Select implements FormValueControl<string | null> {
     afterRenderEffect(() => {
       const selected = this.selectedValues();
       if (selected.length > 0) {
-        untracked(() => this.dialog()?.close());
+        untracked(() => this.combobox()?.expanded.set(false));
         this.value.set(selected[0] as string);
         this.searchString.set('');
       }
@@ -108,7 +95,7 @@ export class Select implements FormValueControl<string | null> {
       return;
     }
 
-    const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
+    const comboboxRect = combobox.element.getBoundingClientRect();
     const scrollY = window.scrollY;
 
     if (comboboxRect) {
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html
index 583ced285ed4..40ac81e01083 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox filterMode="auto-select">
+<div ngCombobox #combobox="ngCombobox" filterMode="auto-select">
   <div #origin class="autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html
index 0f2b696936a7..55747666f372 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox filterMode="auto-select">
+<div ngCombobox #combobox="ngCombobox" filterMode="auto-select">
   <div #origin class="material-autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html
index f3dac2851118..d0c991739272 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox filterMode="auto-select">
+<div ngCombobox #combobox="ngCombobox" filterMode="auto-select">
   <div #origin class="retro-autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html
index 814e3ece9f4f..d4e33ec18c70 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox filterMode="highlight">
+<div ngCombobox #combobox="ngCombobox" filterMode="highlight">
   <div #origin class="autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html
index 776d3676d95c..1ac67c009d36 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox filterMode="highlight">
+<div ngCombobox #combobox="ngCombobox" filterMode="highlight">
   <div #origin class="material-autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html
index c3ad881c85bb..7f1cc1596238 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox filterMode="highlight">
+<div ngCombobox #combobox="ngCombobox" filterMode="highlight">
   <div #origin class="retro-autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html
index dd94d75f34cf..eea47ac97b21 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox focusMode="manual">
+<div ngCombobox #combobox="ngCombobox" focusMode="manual">
   <div #origin class="autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html
index c0b9048f5e1a..48f8d3d9f8a4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox focusMode="manual">
+<div ngCombobox #combobox="ngCombobox" focusMode="manual">
   <div #origin class="material-autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html
index 3b387d4c955a..8a26a099ced0 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox focusMode="manual">
+<div ngCombobox #combobox="ngCombobox" focusMode="manual">
   <div #origin class="retro-autocomplete">
     <span class="search-icon material-symbols-outlined" translate="no" aria-hidden="true"
       >search</span
     >
-    <input
-      aria-label="Label dropdown"
-      placeholder="Select a country"
-      [(ngModel)]="query"
-      ngComboboxInput
-    />
+    <input aria-label="Label dropdown" placeholder="Select a country" [(ngModel)]="query" />
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="popup">
+      <div ngComboboxWidget [activeDescendant]="listbox.activeDescendant()" class="popup">
         @if (countries().length === 0) {
           <div class="no-results">No results found</div>
         }
 
-        <div ngListbox>
+        <div ngListbox #listbox="ngListbox">
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
               <span class="option-label">{{ country }}</span>
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts
index 135575be95bf..c58df54be2f4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts
@@ -1,4 +1,4 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {
@@ -15,15 +15,7 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -33,7 +25,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The query string used to filter the list of countries. */
   query = signal('');
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/app/app.html b/adev/src/content/examples/aria/combobox/src/dialog/app/app.html
index eb2994d38381..704310d2b82f 100644
--- a/adev/src/content/examples/aria/combobox/src/dialog/app/app.html
+++ b/adev/src/content/examples/aria/combobox/src/dialog/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox #combobox="ngCombobox" [readonly]="true">
+<div ngCombobox #combobox="ngCombobox">
   <div class="combobox-input-container">
-    <input ngComboboxInput placeholder="Select a country..." [value]="value()" />
+    <input placeholder="Select a country..." [value]="value()" />
     <span class="material-symbols-outlined icon arrow-icon" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
-    <dialog ngComboboxDialog class="dialog">
-      <div ngCombobox #combobox="ngCombobox" filterMode="manual" [alwaysExpanded]="true">
+  <ng-template ngComboboxPopup [combobox]="combobox">
+    <dialog ngComboboxWidget #dialogWidget="ngComboboxWidget" class="dialog">
+      <div ngCombobox #innerCombobox="ngCombobox" filterMode="manual" [alwaysExpanded]="true">
         <div class="combobox-input-container">
           <span class="material-symbols-outlined icon search-icon" translate="no" aria-hidden="true"
             >search</span
           >
-          <input
-            ngComboboxInput
-            class="combobox-input"
-            placeholder="Search..."
-            [(value)]="searchString"
-          />
+          <input class="combobox-input" placeholder="Search..." [(value)]="searchString" />
         </div>
 
-        <ng-template ngComboboxPopupContainer>
+        <ng-template ngComboboxPopup [combobox]="innerCombobox">
           @if (options().length === 0) {
             <div class="no-results">No results found</div>
           }
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/app/app.ts b/adev/src/content/examples/aria/combobox/src/dialog/app/app.ts
index ca035fdf4cf0..f4a0577aeafe 100644
--- a/adev/src/content/examples/aria/combobox/src/dialog/app/app.ts
+++ b/adev/src/content/examples/aria/combobox/src/dialog/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxDialog,
-  ComboboxInput,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {afterRenderEffect, Component, computed, signal, untracked, viewChild} from '@angular/core';
 import {FormsModule} from '@angular/forms';
@@ -12,20 +7,12 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    ComboboxDialog,
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    FormsModule,
-  ],
+  imports: [ComboboxWidget, Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, FormsModule],
 })
 export class App {
-  dialog = viewChild(ComboboxDialog);
+  dialog = viewChild<ComboboxWidget>('dialogWidget');
   listbox = viewChild<Listbox<string>>(Listbox);
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   value = signal('');
   searchString = signal('');
@@ -48,7 +35,7 @@ export class App {
 
     afterRenderEffect(() => {
       if (this.selectedCountries().length > 0) {
-        untracked(() => this.dialog()?.close());
+        untracked(() => this.combobox()?.expanded.set(false));
         this.value.set(this.selectedCountries()[0]);
         this.searchString.set('');
       }
@@ -60,14 +47,14 @@ export class App {
   // TODO(wagnermaciel): Switch to using the CDK for positioning.
 
   positionDialog() {
-    const dialog = this.dialog()!;
+    const dialog = this.dialog();
     const combobox = this.combobox()!;
 
-    const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
+    const comboboxRect = combobox.element.getBoundingClientRect();
 
     const scrollY = window.scrollY;
 
-    if (comboboxRect) {
+    if (dialog && comboboxRect) {
       dialog.element.style.width = `${comboboxRect.width}px`;
       dialog.element.style.top = `${comboboxRect.bottom + scrollY + 4}px`;
       dialog.element.style.left = `${comboboxRect.left - 1}px`;
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.html b/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.html
index fc47b3978f78..83ebace46a40 100644
--- a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.html
+++ b/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox #combobox="ngCombobox" [readonly]="true" class="material-combobox">
+<div ngCombobox #combobox="ngCombobox" class="material-combobox">
   <div class="combobox-input-container">
-    <input ngComboboxInput placeholder="Select a country..." [value]="value()" />
+    <input placeholder="Select a country..." [value]="value()" />
     <span class="material-symbols-outlined icon arrow-icon" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
-    <dialog ngComboboxDialog class="dialog">
-      <div ngCombobox #combobox="ngCombobox" filterMode="manual" [alwaysExpanded]="true">
+  <ng-template ngComboboxPopup [combobox]="combobox">
+    <dialog ngComboboxWidget #dialogWidget="ngComboboxWidget" class="dialog">
+      <div ngCombobox #innerCombobox="ngCombobox" filterMode="manual" [alwaysExpanded]="true">
         <div class="combobox-input-container">
           <span class="material-symbols-outlined icon search-icon" translate="no" aria-hidden="true"
             >search</span
           >
-          <input
-            ngComboboxInput
-            class="combobox-input"
-            placeholder="Search..."
-            [(value)]="searchString"
-          />
+          <input class="combobox-input" placeholder="Search..." [(value)]="searchString" />
         </div>
 
-        <ng-template ngComboboxPopupContainer>
+        <ng-template ngComboboxPopup [combobox]="innerCombobox">
           @if (options().length === 0) {
             <div class="no-results">No results found</div>
           }
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.ts b/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.ts
index ca035fdf4cf0..f4a0577aeafe 100644
--- a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.ts
+++ b/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxDialog,
-  ComboboxInput,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {afterRenderEffect, Component, computed, signal, untracked, viewChild} from '@angular/core';
 import {FormsModule} from '@angular/forms';
@@ -12,20 +7,12 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    ComboboxDialog,
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    FormsModule,
-  ],
+  imports: [ComboboxWidget, Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, FormsModule],
 })
 export class App {
-  dialog = viewChild(ComboboxDialog);
+  dialog = viewChild<ComboboxWidget>('dialogWidget');
   listbox = viewChild<Listbox<string>>(Listbox);
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   value = signal('');
   searchString = signal('');
@@ -48,7 +35,7 @@ export class App {
 
     afterRenderEffect(() => {
       if (this.selectedCountries().length > 0) {
-        untracked(() => this.dialog()?.close());
+        untracked(() => this.combobox()?.expanded.set(false));
         this.value.set(this.selectedCountries()[0]);
         this.searchString.set('');
       }
@@ -60,14 +47,14 @@ export class App {
   // TODO(wagnermaciel): Switch to using the CDK for positioning.
 
   positionDialog() {
-    const dialog = this.dialog()!;
+    const dialog = this.dialog();
     const combobox = this.combobox()!;
 
-    const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
+    const comboboxRect = combobox.element.getBoundingClientRect();
 
     const scrollY = window.scrollY;
 
-    if (comboboxRect) {
+    if (dialog && comboboxRect) {
       dialog.element.style.width = `${comboboxRect.width}px`;
       dialog.element.style.top = `${comboboxRect.bottom + scrollY + 4}px`;
       dialog.element.style.left = `${comboboxRect.left - 1}px`;
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.html b/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.html
index 093cca1382f1..08e7050e68a7 100644
--- a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.html
+++ b/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.html
@@ -1,27 +1,22 @@
-<div ngCombobox #combobox="ngCombobox" [readonly]="true" class="retro-combobox">
+<div ngCombobox #combobox="ngCombobox" class="retro-combobox">
   <div class="combobox-input-container">
-    <input ngComboboxInput placeholder="Select a country..." [value]="value()" />
+    <input placeholder="Select a country..." [value]="value()" />
     <span class="material-symbols-outlined icon arrow-icon" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
-    <dialog ngComboboxDialog class="dialog">
-      <div ngCombobox #combobox="ngCombobox" filterMode="manual" [alwaysExpanded]="true">
+  <ng-template ngComboboxPopup [combobox]="combobox">
+    <dialog ngComboboxWidget #dialogWidget="ngComboboxWidget" class="dialog">
+      <div ngCombobox #innerCombobox="ngCombobox" filterMode="manual" [alwaysExpanded]="true">
         <div class="combobox-input-container">
           <span class="material-symbols-outlined icon search-icon" translate="no" aria-hidden="true"
             >search</span
           >
-          <input
-            ngComboboxInput
-            class="combobox-input"
-            placeholder="Search..."
-            [(value)]="searchString"
-          />
+          <input class="combobox-input" placeholder="Search..." [(value)]="searchString" />
         </div>
 
-        <ng-template ngComboboxPopupContainer>
+        <ng-template ngComboboxPopup [combobox]="innerCombobox">
           <div ngListbox [(value)]="selectedCountries">
             @for (option of options(); track option) {
               <div ngOption [value]="option" [label]="option">
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.ts b/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.ts
index ca035fdf4cf0..f4a0577aeafe 100644
--- a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.ts
+++ b/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxDialog,
-  ComboboxInput,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {afterRenderEffect, Component, computed, signal, untracked, viewChild} from '@angular/core';
 import {FormsModule} from '@angular/forms';
@@ -12,20 +7,12 @@ import {FormsModule} from '@angular/forms';
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    ComboboxDialog,
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    FormsModule,
-  ],
+  imports: [ComboboxWidget, Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, FormsModule],
 })
 export class App {
-  dialog = viewChild(ComboboxDialog);
+  dialog = viewChild<ComboboxWidget>('dialogWidget');
   listbox = viewChild<Listbox<string>>(Listbox);
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   value = signal('');
   searchString = signal('');
@@ -48,7 +35,7 @@ export class App {
 
     afterRenderEffect(() => {
       if (this.selectedCountries().length > 0) {
-        untracked(() => this.dialog()?.close());
+        untracked(() => this.combobox()?.expanded.set(false));
         this.value.set(this.selectedCountries()[0]);
         this.searchString.set('');
       }
@@ -60,14 +47,14 @@ export class App {
   // TODO(wagnermaciel): Switch to using the CDK for positioning.
 
   positionDialog() {
-    const dialog = this.dialog()!;
+    const dialog = this.dialog();
     const combobox = this.combobox()!;
 
-    const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
+    const comboboxRect = combobox.element.getBoundingClientRect();
 
     const scrollY = window.scrollY;
 
-    if (comboboxRect) {
+    if (dialog && comboboxRect) {
       dialog.element.style.width = `${comboboxRect.width}px`;
       dialog.element.style.top = `${comboboxRect.bottom + scrollY + 4}px`;
       dialog.element.style.left = `${comboboxRect.left - 1}px`;
diff --git a/adev/src/content/examples/aria/listbox/src/basic/app/app.html b/adev/src/content/examples/aria/listbox/src/basic/app/app.html
index fe16527f6974..6ea070d6054d 100644
--- a/adev/src/content/examples/aria/listbox/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/listbox/src/basic/app/app.html
@@ -1,5 +1,5 @@
 <div class="listbox-container">
-  <div ngListbox [value]="['Option 1']">
+  <div ngListbox #listbox="ngListbox" [value]="['Option 1']">
     @for (option of options; track option) {
       <div ngOption [value]="option">
         <span class="example-option-text">{{ option }}</span>
diff --git a/adev/src/content/examples/aria/listbox/src/basic/material/app/app.html b/adev/src/content/examples/aria/listbox/src/basic/material/app/app.html
index 10ed07bef1f5..9e2792b61928 100644
--- a/adev/src/content/examples/aria/listbox/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/listbox/src/basic/material/app/app.html
@@ -1,5 +1,5 @@
 <div class="material-listbox">
-  <div ngListbox>
+  <div ngListbox #listbox="ngListbox">
     @for (option of options; track option) {
       <div ngOption [value]="option">
         <span class="example-option-text">{{ option }}</span>
diff --git a/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.html b/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.html
index 658a9b614340..47f900084027 100644
--- a/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.html
@@ -1,5 +1,5 @@
 <div class="retro-listbox">
-  <div ngListbox>
+  <div ngListbox #listbox="ngListbox">
     @for (option of options; track option) {
       <div ngOption [value]="option">
         <span class="example-option-text">{{ option }}</span>
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/app/app.html b/adev/src/content/examples/aria/listbox/src/horizontal/app/app.html
index ba7d0ea8d403..ada2fa8b8edc 100644
--- a/adev/src/content/examples/aria/listbox/src/horizontal/app/app.html
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/app/app.html
@@ -1,4 +1,11 @@
-<div ngListbox aria-label="Amenities" orientation="horizontal" selectionMode="explicit" multi>
+<div
+  ngListbox
+  #listbox="ngListbox"
+  aria-label="Amenities"
+  orientation="horizontal"
+  selectionMode="explicit"
+  multi
+>
   @for (amenity of amenities; track amenity) {
     <div ngOption [value]="amenity" [label]="amenity">
       <span class="option-label">{{ amenity }}</span>
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html b/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html
index c17fa2af8891..78b354a0f7af 100644
--- a/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html
@@ -1,5 +1,6 @@
 <div
   ngListbox
+  #listbox="ngListbox"
   class="material-listbox"
   aria-label="Amenities"
   orientation="horizontal"
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html b/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html
index 055f3babd2eb..ebec166daf1e 100644
--- a/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html
@@ -1,5 +1,6 @@
 <div
   ngListbox
+  #listbox="ngListbox"
   class="retro-listbox"
   aria-label="Amenities"
   orientation="horizontal"
diff --git a/adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.html b/adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.html
index fbae516e2b5e..90eae58b0626 100644
--- a/adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.html
+++ b/adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.html
@@ -1,5 +1,6 @@
 <div
   ngListbox
+  #listbox="ngListbox"
   aria-label="Amenities_explicit"
   orientation="horizontal"
   selectionMode="explicit"
diff --git a/adev/src/content/examples/aria/listbox/src/modes/app/follow/app.html b/adev/src/content/examples/aria/listbox/src/modes/app/follow/app.html
index 399b1fca91fb..83775bafd4ea 100644
--- a/adev/src/content/examples/aria/listbox/src/modes/app/follow/app.html
+++ b/adev/src/content/examples/aria/listbox/src/modes/app/follow/app.html
@@ -1,5 +1,6 @@
 <div
   ngListbox
+  #listbox="ngListbox"
   aria-label="Amenities_explicit"
   orientation="horizontal"
   selectionMode="follow"
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/app/app.html b/adev/src/content/examples/aria/multiselect/src/basic/app/app.html
index 189e09d3d9ef..2a8833a7bc92 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/basic/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox readonly>
+<div ngCombobox #combobox="ngCombobox">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/app/app.ts b/adev/src/content/examples/aria/multiselect/src/basic/app/app.ts
index 96d3efa57227..3f10477c9005 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/basic/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html b/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html
index 20d7fe0cb1c3..be358e639bda 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox class="material-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="material-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.ts b/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.ts
index 96d3efa57227..3f10477c9005 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html
index b24917977519..80f39282464b 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox class="retro-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="retro-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.ts b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.ts
index 96d3efa57227..3f10477c9005 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/app/app.html b/adev/src/content/examples/aria/multiselect/src/icons/app/app.html
index d0b79deee2fd..7a7bef818079 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/icons/app/app.html
@@ -1,4 +1,4 @@
-<div ngCombobox readonly>
+<div ngCombobox #combobox="ngCombobox">
   <div #origin class="select">
     <span class="combobox-label">
       <span
@@ -9,19 +9,23 @@
       >
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value">
               <span
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/app/app.ts b/adev/src/content/examples/aria/multiselect/src/icons/app/app.ts
index 1090b8700497..773079eab312 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/icons/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The icon that is displayed in the combobox. */
   displayIcon = computed(() => {
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html b/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html
index 01c6162c98c1..ff36e56617d4 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html
@@ -1,4 +1,4 @@
-<div ngCombobox class="material-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="material-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span
@@ -9,19 +9,23 @@
       >
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value">
               <span
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts b/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts
index 1090b8700497..773079eab312 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The icon that is displayed in the combobox. */
   displayIcon = computed(() => {
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html
index b1e4b18c32a6..1595ee627ada 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html
@@ -1,4 +1,4 @@
-<div ngCombobox class="retro-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="retro-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span
@@ -9,19 +9,23 @@
       >
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value">
               <span
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts
index 1090b8700497..773079eab312 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The icon that is displayed in the combobox. */
   displayIcon = computed(() => {
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/app/app.html b/adev/src/content/examples/aria/multiselect/src/limited/app/app.html
index 1e446f9aeb35..c340e63f83b2 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/limited/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox readonly>
+<div ngCombobox #combobox="ngCombobox">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value" [disabled]="label.disabled()">
               <span class="example-option-text">{{ label.value }}</span>
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/app/app.ts b/adev/src/content/examples/aria/multiselect/src/limited/app/app.ts
index 1f1dfeac7730..1a62f40d0ab8 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/limited/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html b/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html
index 98280b61b85a..9b21f5f22293 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox class="material-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="material-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value" [disabled]="label.disabled()">
               <span class="example-option-text">{{ label.value }}</span>
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.ts b/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.ts
index 1f1dfeac7730..1a62f40d0ab8 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html
index 5466a0c1956e..5990616b1f50 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox class="retro-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="retro-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox multi>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox" multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value" [disabled]="label.disabled()">
               <span class="example-option-text">{{ label.value }}</span>
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.ts b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.ts
index 1f1dfeac7730..1a62f40d0ab8 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.ts
+++ b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/basic/app/app.html b/adev/src/content/examples/aria/select/src/basic/app/app.html
index c210f87afb30..bd87b889cd09 100644
--- a/adev/src/content/examples/aria/select/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/select/src/basic/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox readonly>
+<div ngCombobox #combobox="ngCombobox">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/select/src/basic/app/app.ts b/adev/src/content/examples/aria/select/src/basic/app/app.ts
index 0fa10f839850..c3b29c1a68c4 100644
--- a/adev/src/content/examples/aria/select/src/basic/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/basic/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/basic/material/app/app.html b/adev/src/content/examples/aria/select/src/basic/material/app/app.html
index 654cbaf55358..3510ac457fa6 100644
--- a/adev/src/content/examples/aria/select/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/select/src/basic/material/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox class="material-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="material-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/select/src/basic/material/app/app.ts b/adev/src/content/examples/aria/select/src/basic/material/app/app.ts
index 0fa10f839850..c3b29c1a68c4 100644
--- a/adev/src/content/examples/aria/select/src/basic/material/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/basic/material/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/basic/retro/app/app.html b/adev/src/content/examples/aria/select/src/basic/retro/app/app.html
index b6e6aaba4c72..fe52706364bc 100644
--- a/adev/src/content/examples/aria/select/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/select/src/basic/retro/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox class="retro-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="retro-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/select/src/basic/retro/app/app.ts b/adev/src/content/examples/aria/select/src/basic/retro/app/app.ts
index 0fa10f839850..c3b29c1a68c4 100644
--- a/adev/src/content/examples/aria/select/src/basic/retro/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/basic/retro/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/disabled/app/app.html b/adev/src/content/examples/aria/select/src/disabled/app/app.html
index fcb529285adc..ea37c94bef46 100644
--- a/adev/src/content/examples/aria/select/src/disabled/app/app.html
+++ b/adev/src/content/examples/aria/select/src/disabled/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox readonly disabled>
+<div ngCombobox #combobox="ngCombobox" disabled>
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/select/src/disabled/app/app.ts b/adev/src/content/examples/aria/select/src/disabled/app/app.ts
index 0fa10f839850..c3b29c1a68c4 100644
--- a/adev/src/content/examples/aria/select/src/disabled/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/disabled/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/disabled/material/app/app.html b/adev/src/content/examples/aria/select/src/disabled/material/app/app.html
index 9f9a3007e5af..9457c01062e3 100644
--- a/adev/src/content/examples/aria/select/src/disabled/material/app/app.html
+++ b/adev/src/content/examples/aria/select/src/disabled/material/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox class="material-select" readonly disabled>
+<div ngCombobox #combobox="ngCombobox" class="material-select" disabled>
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/select/src/disabled/material/app/app.ts b/adev/src/content/examples/aria/select/src/disabled/material/app/app.ts
index 0fa10f839850..c3b29c1a68c4 100644
--- a/adev/src/content/examples/aria/select/src/disabled/material/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/disabled/material/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html
index ab6d36df9cae..cbe03c221496 100644
--- a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html
+++ b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html
@@ -1,21 +1,25 @@
-<div ngCombobox class="retro-select" readonly disabled>
+<div ngCombobox #combobox="ngCombobox" class="retro-select" disabled>
   <div #origin class="select">
     <span class="combobox-label">
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
               <span class="example-option-text">{{ label }}</span>
diff --git a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.ts b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.ts
index 0fa10f839850..c3b29c1a68c4 100644
--- a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The string that is displayed in the combobox. */
   displayValue = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/icons/app/app.html b/adev/src/content/examples/aria/select/src/icons/app/app.html
index dbdfc53444fa..1e55069667c8 100644
--- a/adev/src/content/examples/aria/select/src/icons/app/app.html
+++ b/adev/src/content/examples/aria/select/src/icons/app/app.html
@@ -1,4 +1,4 @@
-<div ngCombobox readonly>
+<div ngCombobox #combobox="ngCombobox">
   <div #origin class="select">
     <span class="combobox-label">
       <span
@@ -9,19 +9,23 @@
       >
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value">
               <span
diff --git a/adev/src/content/examples/aria/select/src/icons/app/app.ts b/adev/src/content/examples/aria/select/src/icons/app/app.ts
index 67f25b45bbb2..9d2cfcef9b05 100644
--- a/adev/src/content/examples/aria/select/src/icons/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/icons/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The icon that is displayed in the combobox. */
   displayIcon = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/icons/material/app/app.html b/adev/src/content/examples/aria/select/src/icons/material/app/app.html
index a65655204670..14dd76246593 100644
--- a/adev/src/content/examples/aria/select/src/icons/material/app/app.html
+++ b/adev/src/content/examples/aria/select/src/icons/material/app/app.html
@@ -1,4 +1,4 @@
-<div ngCombobox class="material-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="material-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span
@@ -9,19 +9,23 @@
       >
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value">
               <span
diff --git a/adev/src/content/examples/aria/select/src/icons/material/app/app.ts b/adev/src/content/examples/aria/select/src/icons/material/app/app.ts
index 67f25b45bbb2..9d2cfcef9b05 100644
--- a/adev/src/content/examples/aria/select/src/icons/material/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/icons/material/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The icon that is displayed in the combobox. */
   displayIcon = computed(() => {
diff --git a/adev/src/content/examples/aria/select/src/icons/retro/app/app.html b/adev/src/content/examples/aria/select/src/icons/retro/app/app.html
index bf0533149646..87d5dbaddc8b 100644
--- a/adev/src/content/examples/aria/select/src/icons/retro/app/app.html
+++ b/adev/src/content/examples/aria/select/src/icons/retro/app/app.html
@@ -1,4 +1,4 @@
-<div ngCombobox class="retro-select" readonly>
+<div ngCombobox #combobox="ngCombobox" class="retro-select">
   <div #origin class="select">
     <span class="combobox-label">
       <span
@@ -9,19 +9,23 @@
       >
       <span class="selected-label-text">{{ displayValue() }}</span>
     </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
+    <input aria-label="Label dropdown" placeholder="Select a label" />
     <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </div>
 
-  <ng-template ngComboboxPopupContainer>
+  <ng-template ngComboboxPopup [combobox]="combobox">
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
       [cdkConnectedOverlayOpen]="true"
     >
-      <div class="example-popup-container">
-        <div ngListbox>
+      <div
+        ngComboboxWidget
+        [activeDescendant]="listbox.activeDescendant()"
+        class="example-popup-container"
+      >
+        <div ngListbox #listbox="ngListbox">
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value">
               <span
diff --git a/adev/src/content/examples/aria/select/src/icons/retro/app/app.ts b/adev/src/content/examples/aria/select/src/icons/retro/app/app.ts
index 67f25b45bbb2..9d2cfcef9b05 100644
--- a/adev/src/content/examples/aria/select/src/icons/retro/app/app.ts
+++ b/adev/src/content/examples/aria/select/src/icons/retro/app/app.ts
@@ -1,9 +1,4 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} from '@angular/aria/combobox';
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@angular/core';
@@ -12,15 +7,7 @@ import {afterRenderEffect, Component, computed, viewChild, viewChildren} from '@
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
+  imports: [Combobox, ComboboxPopup, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class App {
   /** The combobox listbox popup. */
@@ -30,7 +17,7 @@ export class App {
   options = viewChildren<Option<string>>(Option);
 
   /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
+  combobox = viewChild(Combobox);
 
   /** The icon that is displayed in the combobox. */
   displayIcon = computed(() => {
diff --git a/integration/animations/package.json b/integration/animations/package.json
index 407374dd9c90..507eb4e1d03c 100644
--- a/integration/animations/package.json
+++ b/integration/animations/package.json
@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "22.0.0-next.7",
+    "@angular/cdk": "22.0.0-next.8",
     "@angular/common": "link:./in-existing-linked-by-bazel",
     "@angular/compiler": "link:./in-existing-linked-by-bazel",
     "@angular/core": "link:./in-existing-linked-by-bazel",
diff --git a/integration/animations/pnpm-lock.yaml b/integration/animations/pnpm-lock.yaml
index 019f235fc19f..9bbf1955adae 100644
--- a/integration/animations/pnpm-lock.yaml
+++ b/integration/animations/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@angular/cdk':
-        specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(@angular/common@in-existing-linked-by-bazel)(@angular/core@in-existing-linked-by-bazel)(@angular/platform-browser@in-existing-linked-by-bazel)(rxjs@7.8.2)
+        specifier: 22.0.0-next.8
+        version: 22.0.0-next.8(@angular/common@in-existing-linked-by-bazel)(@angular/core@in-existing-linked-by-bazel)(@angular/platform-browser@in-existing-linked-by-bazel)(rxjs@7.8.2)
       '@angular/common':
         specifier: link:./in-existing-linked-by-bazel
         version: link:in-existing-linked-by-bazel
@@ -256,8 +256,8 @@ packages:
       vitest:
         optional: true
 
-  '@angular/cdk@22.0.0-next.7':
-    resolution: {integrity: sha512-dAJexPGuFn6LwHNRJU2UVNcv0pL8VZzGdcaTs77dPKAR0W8V42/EhFR02SvondsYMA7kpfLLBjVdH5ckwsTCkA==}
+  '@angular/cdk@22.0.0-next.8':
+    resolution: {integrity: sha512-6H/A2ExBPz1KpxqrB2C3U2c9Dcsvq9Xgttpv2ap73h8EVyWqilxmt6lsCl8JefcovEMjnL40srHnvPJnI+Ri1g==}
     peerDependencies:
       '@angular/common': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
       '@angular/core': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
@@ -4924,7 +4924,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/cdk@22.0.0-next.7(@angular/common@in-existing-linked-by-bazel)(@angular/core@in-existing-linked-by-bazel)(@angular/platform-browser@in-existing-linked-by-bazel)(rxjs@7.8.2)':
+  '@angular/cdk@22.0.0-next.8(@angular/common@in-existing-linked-by-bazel)(@angular/core@in-existing-linked-by-bazel)(@angular/platform-browser@in-existing-linked-by-bazel)(rxjs@7.8.2)':
     dependencies:
       '@angular/common': link:in-existing-linked-by-bazel
       '@angular/core': link:in-existing-linked-by-bazel
diff --git a/package.json b/package.json
index 385b570c8acf..4c6d6c7ab7e4 100644
--- a/package.json
+++ b/package.json
@@ -59,10 +59,10 @@
     "@angular-devkit/core": "22.0.0-next.7",
     "@angular-devkit/schematics": "22.0.0-next.7",
     "@angular/animations": "workspace:*",
-    "@angular/aria": "22.0.0-next.7",
+    "@angular/aria": "22.0.0-next.8",
     "@angular/benchpress": "workspace: *",
     "@angular/build": "22.0.0-next.7",
-    "@angular/cdk": "22.0.0-next.7",
+    "@angular/cdk": "22.0.0-next.8",
     "@angular/cli": "22.0.0-next.7",
     "@angular/common": "workspace:*",
     "@angular/compiler": "workspace:*",
@@ -72,7 +72,7 @@
     "@angular/forms": "workspace:*",
     "@angular/language-service": "workspace: *",
     "@angular/localize": "workspace: *",
-    "@angular/material": "22.0.0-next.7",
+    "@angular/material": "22.0.0-next.8",
     "@angular/platform-browser": "workspace:*",
     "@angular/platform-browser-dynamic": "workspace:*",
     "@angular/platform-server": "workspace:*",
@@ -139,7 +139,7 @@
   "devDependencies": {
     "@actions/core": "^3.0.0",
     "@actions/github": "^9.0.0",
-    "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#df5bcf2c22735628d01f1e9cdb45d336bec4cfdf",
+    "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#f084e2e88e71cdca8098489e6104ffcdbd9a8eda",
     "@babel/plugin-transform-async-generator-functions": "^7.27.1",
     "@bazel/bazelisk": "^1.7.5",
     "@bazel/buildifier": "^8.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index baaef4127d8c..542d28cda69f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,7 +17,7 @@ importers:
     dependencies:
       '@angular-devkit/build-angular':
         specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(@angular/compiler-cli@packages+compiler-cli)(@angular/compiler@packages+compiler)(@angular/core@packages+core)(@angular/localize@packages+localize)(@angular/platform-browser@packages+platform-browser)(@angular/platform-server@packages+platform-server)(@angular/service-worker@packages+service-worker)(@angular/ssr@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-server@packages+platform-server)(@angular/router@packages+router))(@types/node@20.19.39)(bufferutil@4.1.0)(chokidar@5.0.0)(jiti@2.6.1)(karma@6.4.4(bufferutil@4.1.0))(lightningcss@1.32.0)(ng-packagr@22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3))(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tsx@4.21.0)(typescript@6.0.3)(vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(yaml@2.8.3)
+        version: 22.0.0-next.7(@angular/compiler-cli@packages+compiler-cli)(@angular/compiler@packages+compiler)(@angular/core@packages+core)(@angular/localize@packages+localize)(@angular/platform-browser@packages+platform-browser)(@angular/platform-server@packages+platform-server)(@angular/service-worker@packages+service-worker)(@angular/ssr@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-server@packages+platform-server)(@angular/router@packages+router))(@types/node@20.19.39)(bufferutil@4.1.0)(chokidar@5.0.0)(jiti@2.6.1)(karma@6.4.4(bufferutil@4.1.0))(lightningcss@1.32.0)(ng-packagr@22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3))(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tsx@4.21.0)(typescript@6.0.3)(vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))(yaml@2.8.4)
       '@angular-devkit/core':
         specifier: 22.0.0-next.7
         version: 22.0.0-next.7(chokidar@5.0.0)
@@ -28,17 +28,17 @@ importers:
         specifier: workspace:*
         version: link:packages/animations
       '@angular/aria':
-        specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/core@packages+core)
+        specifier: 22.0.0-next.8
+        version: 22.0.0-next.8(@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/core@packages+core)
       '@angular/benchpress':
         specifier: 'workspace: *'
         version: link:packages/benchpress
       '@angular/build':
         specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(7c763da64c525edd2622f1aac4f6d836)
+        version: 22.0.0-next.7(3ebc34fc8832bb103613be52d2fb67d2)
       '@angular/cdk':
-        specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
+        specifier: 22.0.0-next.8
+        version: 22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
       '@angular/cli':
         specifier: 22.0.0-next.7
         version: 22.0.0-next.7(@cfworker/json-schema@4.1.1)(@types/node@20.19.39)(chokidar@5.0.0)
@@ -67,8 +67,8 @@ importers:
         specifier: 'workspace: *'
         version: link:packages/localize
       '@angular/material':
-        specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(@angular/forms@packages+forms)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
+        specifier: 22.0.0-next.8
+        version: 22.0.0-next.8(@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(@angular/forms@packages+forms)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
       '@angular/platform-browser':
         specifier: workspace:*
         version: link:packages/platform-browser
@@ -260,8 +260,8 @@ importers:
         specifier: ^9.0.0
         version: 9.1.0
       '@angular/ng-dev':
-        specifier: https://github.com/angular/dev-infra-private-ng-dev-builds.git#df5bcf2c22735628d01f1e9cdb45d336bec4cfdf
-        version: https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/df5bcf2c22735628d01f1e9cdb45d336bec4cfdf(@modelcontextprotocol/sdk@1.29.0(@cfworker/json-schema@4.1.1))
+        specifier: https://github.com/angular/dev-infra-private-ng-dev-builds.git#f084e2e88e71cdca8098489e6104ffcdbd9a8eda
+        version: https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/f084e2e88e71cdca8098489e6104ffcdbd9a8eda(@modelcontextprotocol/sdk@1.29.0(@cfworker/json-schema@4.1.1))
       '@babel/plugin-transform-async-generator-functions':
         specifier: ^7.27.1
         version: 7.29.0(@babel/core@7.29.0)
@@ -359,14 +359,14 @@ importers:
         specifier: workspace:*
         version: link:../packages/animations
       '@angular/aria':
-        specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/core@packages+core)
+        specifier: 22.0.0-next.8
+        version: 22.0.0-next.8(@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/core@packages+core)
       '@angular/build':
         specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(ac31ff1104952532ece8b9c1ddb25bc4)
+        version: 22.0.0-next.7(3a40ffef6ab236564b7661e07dc1fa32)
       '@angular/cdk':
-        specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
+        specifier: 22.0.0-next.8
+        version: 22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
       '@angular/cli':
         specifier: 22.0.0-next.7
         version: 22.0.0-next.7(@cfworker/json-schema@4.1.1)(@types/node@24.12.2)(chokidar@5.0.0)
@@ -389,8 +389,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/forms
       '@angular/material':
-        specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(@angular/forms@packages+forms)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
+        specifier: 22.0.0-next.8
+        version: 22.0.0-next.8(@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(@angular/forms@packages+forms)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
       '@angular/platform-browser':
         specifier: workspace:*
         version: link:../packages/platform-browser
@@ -579,7 +579,7 @@ importers:
         version: 11.14.0
       ngx-progressbar:
         specifier: 14.0.0
-        version: 14.0.0(@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(rxjs@7.8.2)
+        version: 14.0.0(@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(rxjs@7.8.2)
       open-in-idx:
         specifier: 0.1.1
         version: 0.1.1
@@ -640,7 +640,7 @@ importers:
         version: 8.5.13
       tailwindcss:
         specifier: 3.4.19
-        version: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
+        version: 3.4.19(tsx@4.21.0)(yaml@2.8.4)
 
   adev/shared-docs:
     dependencies:
@@ -737,7 +737,7 @@ importers:
     devDependencies:
       '@angular/build':
         specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(60f4048b267b714e474710aeaf6edd47)
+        version: 22.0.0-next.7(4212d5e6b5a601afd11304866347924f)
       '@angular/cli':
         specifier: 22.0.0-next.7
         version: 22.0.0-next.7(@cfworker/json-schema@4.1.1)(@types/node@24.12.2)(chokidar@5.0.0)
@@ -752,7 +752,7 @@ importers:
         version: 6.0.3
       vitest:
         specifier: ^4.0.0
-        version: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.0.2)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+        version: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.0.2)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
 
   devtools:
     dependencies:
@@ -837,7 +837,7 @@ importers:
         version: link:../packages/benchpress
       '@angular/build':
         specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(ac31ff1104952532ece8b9c1ddb25bc4)
+        version: 22.0.0-next.7(3a40ffef6ab236564b7661e07dc1fa32)
       '@angular/common':
         specifier: workspace:*
         version: link:../packages/common
@@ -1019,7 +1019,7 @@ importers:
         version: link:../../../animations
       '@angular/build':
         specifier: 22.0.0-next.7
-        version: 22.0.0-next.7(ac31ff1104952532ece8b9c1ddb25bc4)
+        version: 22.0.0-next.7(3a40ffef6ab236564b7661e07dc1fa32)
       '@angular/common':
         specifier: workspace:*
         version: link:../../../common
@@ -1277,7 +1277,7 @@ importers:
         version: 2.8.1
       vitest:
         specifier: ^4.0.0
-        version: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+        version: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
 
   packages/zone.js/test/typings:
     dependencies:
@@ -1381,8 +1381,8 @@ importers:
         version: 7.8.2
     devDependencies:
       ng-packagr:
-        specifier: 22.0.0-next.3
-        version: 22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3)
+        specifier: 22.0.0-next.4
+        version: 22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3)
       typescript:
         specifier: 6.0.3
         version: 6.0.3
@@ -1621,10 +1621,10 @@ packages:
     resolution: {integrity: sha512-ydkUDJo0JDlEei8PDSNK4Sw18m/gRwlisqcion4FZYO1R8wHyOo8ydxLz/5q1NgcRRpz1X+4uF6Ba8hxmltGdQ==}
     engines: {node: ^22.22.0 || >=24.13.1, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
 
-  '@angular/aria@22.0.0-next.7':
-    resolution: {integrity: sha512-P3aofXzSbMBvdnVH4stn+n6Z8/urnvXfIZSDHLb3D7fZarf0dGLRspQt5oo9LgEVzud1MNtWW0PAfn5oxJqQSg==}
+  '@angular/aria@22.0.0-next.8':
+    resolution: {integrity: sha512-UUlOeSo3vbGS4lp/GkFRRK0DR9SIu0EpIJOW0h6nrwFVTAdhN87/crBf32xI/IxgqI8Daxv153IXkrsLhByb3w==}
     peerDependencies:
-      '@angular/cdk': 22.0.0-next.7
+      '@angular/cdk': 22.0.0-next.8
       '@angular/core': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
 
   '@angular/build@22.0.0-next.7':
@@ -1676,8 +1676,8 @@ packages:
       vitest:
         optional: true
 
-  '@angular/cdk@22.0.0-next.7':
-    resolution: {integrity: sha512-dAJexPGuFn6LwHNRJU2UVNcv0pL8VZzGdcaTs77dPKAR0W8V42/EhFR02SvondsYMA7kpfLLBjVdH5ckwsTCkA==}
+  '@angular/cdk@22.0.0-next.8':
+    resolution: {integrity: sha512-6H/A2ExBPz1KpxqrB2C3U2c9Dcsvq9Xgttpv2ap73h8EVyWqilxmt6lsCl8JefcovEMjnL40srHnvPJnI+Ri1g==}
     peerDependencies:
       '@angular/common': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
       '@angular/core': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
@@ -1699,23 +1699,23 @@ packages:
         optional: true
 
   '@angular/domino@https://codeload.github.com/angular/domino/tar.gz/928dffb9d9431b2cd2a73d7b940d1575f221e072':
-    resolution: {gitHosted: true, tarball: https://codeload.github.com/angular/domino/tar.gz/928dffb9d9431b2cd2a73d7b940d1575f221e072}
+    resolution: {gitHosted: true, integrity: sha512-kLqqpAWmXwNEicdkKrMuH7/M6+JRVzWsrV9aUovLTi6dNe0P8lyDAjqmEXhMowyaqa1ZXVsh7XE7wz6xPR6L5g==, tarball: https://codeload.github.com/angular/domino/tar.gz/928dffb9d9431b2cd2a73d7b940d1575f221e072}
     version: 2.1.6
     engines: {npm: Please use pnpm instead of NPM to install dependencies, pnpm: 10.31.0, yarn: Please use pnpm instead of Yarn to install dependencies}
 
-  '@angular/material@22.0.0-next.7':
-    resolution: {integrity: sha512-yRmvcm7qrR43GTG33czQ988bCnvspZBadOpA8uci1UHsLF76T/v6U1BNVeM8bZYUofURtvLjyGDlggJmGYqRtg==}
+  '@angular/material@22.0.0-next.8':
+    resolution: {integrity: sha512-sQUXI2gzVv8DCryapqzYTgJNrCAh+p9ugEkUtUVORvVTyBG95pqYZ5SU9UZFkqoSR/FHGDlbD7Fry/Jyuvrm0g==}
     peerDependencies:
-      '@angular/cdk': 22.0.0-next.7
+      '@angular/cdk': 22.0.0-next.8
       '@angular/common': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
       '@angular/core': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
       '@angular/forms': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
       '@angular/platform-browser': ^22.0.0-0 || ^22.1.0-0 || ^22.2.0-0 || ^22.3.0-0 || ^23.0.0-0
       rxjs: ^6.5.3 || ^7.4.0
 
-  '@angular/ng-dev@https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/df5bcf2c22735628d01f1e9cdb45d336bec4cfdf':
-    resolution: {gitHosted: true, integrity: sha512-fJN+IduwPg4PK2cLL/v1zd2Kfws2KhFpxV/a9PXG/SDj25V4XuB8NKbss80tplCkUX3UbjDg1x+Rp5Nr3JGY0w==, tarball: https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/df5bcf2c22735628d01f1e9cdb45d336bec4cfdf}
-    version: 0.0.0-fcf9aad99710835428e0e9859bf060689045a131
+  '@angular/ng-dev@https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/f084e2e88e71cdca8098489e6104ffcdbd9a8eda':
+    resolution: {gitHosted: true, integrity: sha512-yJ5B4S2Im4agSQUttxnwYDmGRJmC2g+76iT/vVtMN/p8oupukiVXaTk14X7q29Nk+eKEnMJWlGAcAEsnZ83d9w==, tarball: https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/f084e2e88e71cdca8098489e6104ffcdbd9a8eda}
+    version: 0.0.0-ba993c8a28db88485a5474bf9cc387dffd3eabd9
     hasBin: true
 
   '@angular/ssr@22.0.0-next.7':
@@ -3192,8 +3192,8 @@ packages:
     resolution: {integrity: sha512-IJn+8A3QZJfe7FUtWqHVNo3xJs7KFpurCWGWCiCz3oEh+BkRymKZ1QxfAbU2yGMDzTytLGQ2IV6T2r3cuo75/w==}
     engines: {node: '>=18'}
 
-  '@google/genai@1.50.1':
-    resolution: {integrity: sha512-YbkX7H9+1Pt8wOt7DDREy8XSoiL6fRDzZQRyaVBarFf8MR3zHGqVdvM4cLbDXqPhxqvegZShgfxb8kw9C7YhAQ==}
+  '@google/genai@1.52.0':
+    resolution: {integrity: sha512-gwSvbpiN/17O9TbsqSsE/OzZcpv5Fo4RQjdngGgogtuB9RsyJ8ZHhX5KjHj1bp5N9snN2eK8LDGXSaWW2hof8Q==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       '@modelcontextprotocol/sdk': ^1.25.2
@@ -4544,277 +4544,139 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.60.1':
-    resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==}
-    cpu: [arm]
-    os: [android]
-
   '@rollup/rollup-android-arm-eabi@4.60.2':
     resolution: {integrity: sha512-dnlp69efPPg6Uaw2dVqzWRfAWRnYVb1XJ8CyyhIbZeaq4CA5/mLeZ1IEt9QqQxmbdvagjLIm2ZL8BxXv5lH4Yw==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.60.1':
-    resolution: {integrity: sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==}
-    cpu: [arm64]
-    os: [android]
-
   '@rollup/rollup-android-arm64@4.60.2':
     resolution: {integrity: sha512-OqZTwDRDchGRHHm/hwLOL7uVPB9aUvI0am/eQuWMNyFHf5PSEQmyEeYYheA0EPPKUO/l0uigCp+iaTjoLjVoHg==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.60.1':
-    resolution: {integrity: sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==}
-    cpu: [arm64]
-    os: [darwin]
-
   '@rollup/rollup-darwin-arm64@4.60.2':
     resolution: {integrity: sha512-UwRE7CGpvSVEQS8gUMBe1uADWjNnVgP3Iusyda1nSRwNDCsRjnGc7w6El6WLQsXmZTbLZx9cecegumcitNfpmA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.60.1':
-    resolution: {integrity: sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==}
-    cpu: [x64]
-    os: [darwin]
-
   '@rollup/rollup-darwin-x64@4.60.2':
     resolution: {integrity: sha512-gjEtURKLCC5VXm1I+2i1u9OhxFsKAQJKTVB8WvDAHF+oZlq0GTVFOlTlO1q3AlCTE/DF32c16ESvfgqR7343/g==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.60.1':
-    resolution: {integrity: sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==}
-    cpu: [arm64]
-    os: [freebsd]
-
   '@rollup/rollup-freebsd-arm64@4.60.2':
     resolution: {integrity: sha512-Bcl6CYDeAgE70cqZaMojOi/eK63h5Me97ZqAQoh77VPjMysA/4ORQBRGo3rRy45x4MzVlU9uZxs8Uwy7ZaKnBw==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.60.1':
-    resolution: {integrity: sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==}
-    cpu: [x64]
-    os: [freebsd]
-
   '@rollup/rollup-freebsd-x64@4.60.2':
     resolution: {integrity: sha512-LU+TPda3mAE2QB0/Hp5VyeKJivpC6+tlOXd1VMoXV/YFMvk/MNk5iXeBfB4MQGRWyOYVJ01625vjkr0Az98OJQ==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.60.1':
-    resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==}
-    cpu: [arm]
-    os: [linux]
-    libc: [glibc]
-
   '@rollup/rollup-linux-arm-gnueabihf@4.60.2':
     resolution: {integrity: sha512-2QxQrM+KQ7DAW4o22j+XZ6RKdxjLD7BOWTP0Bv0tmjdyhXSsr2Ul1oJDQqh9Zf5qOwTuTc7Ek83mOFaKnodPjg==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.60.1':
-    resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==}
-    cpu: [arm]
-    os: [linux]
-    libc: [musl]
-
   '@rollup/rollup-linux-arm-musleabihf@4.60.2':
     resolution: {integrity: sha512-TbziEu2DVsTEOPif2mKWkMeDMLoYjx95oESa9fkQQK7r/Orta0gnkcDpzwufEcAO2BLBsD7mZkXGFqEdMRRwfw==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.60.1':
-    resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@rollup/rollup-linux-arm64-gnu@4.60.2':
     resolution: {integrity: sha512-bO/rVDiDUuM2YfuCUwZ1t1cP+/yqjqz+Xf2VtkdppefuOFS2OSeAfgafaHNkFn0t02hEyXngZkxtGqXcXwO8Rg==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.60.1':
-    resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@rollup/rollup-linux-arm64-musl@4.60.2':
     resolution: {integrity: sha512-hr26p7e93Rl0Za+JwW7EAnwAvKkehh12BU1Llm9Ykiibg4uIr2rbpxG9WCf56GuvidlTG9KiiQT/TXT1yAWxTA==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-loong64-gnu@4.60.1':
-    resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==}
-    cpu: [loong64]
-    os: [linux]
-    libc: [glibc]
-
   '@rollup/rollup-linux-loong64-gnu@4.60.2':
     resolution: {integrity: sha512-pOjB/uSIyDt+ow3k/RcLvUAOGpysT2phDn7TTUB3n75SlIgZzM6NKAqlErPhoFU+npgY3/n+2HYIQVbF70P9/A==}
     cpu: [loong64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-loong64-musl@4.60.1':
-    resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==}
-    cpu: [loong64]
-    os: [linux]
-    libc: [musl]
-
   '@rollup/rollup-linux-loong64-musl@4.60.2':
     resolution: {integrity: sha512-2/w+q8jszv9Ww1c+6uJT3OwqhdmGP2/4T17cu8WuwyUuuaCDDJ2ojdyYwZzCxx0GcsZBhzi3HmH+J5pZNXnd+Q==}
     cpu: [loong64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.60.1':
-    resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
   '@rollup/rollup-linux-ppc64-gnu@4.60.2':
     resolution: {integrity: sha512-11+aL5vKheYgczxtPVVRhdptAM2H7fcDR5Gw4/bTcteuZBlH4oP9f5s9zYO9aGZvoGeBpqXI/9TZZihZ609wKw==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-ppc64-musl@4.60.1':
-    resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [musl]
-
   '@rollup/rollup-linux-ppc64-musl@4.60.2':
     resolution: {integrity: sha512-i16fokAGK46IVZuV8LIIwMdtqhin9hfYkCh8pf8iC3QU3LpwL+1FSFGej+O7l3E/AoknL6Dclh2oTdnRMpTzFQ==}
     cpu: [ppc64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.60.1':
-    resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
   '@rollup/rollup-linux-riscv64-gnu@4.60.2':
     resolution: {integrity: sha512-49FkKS6RGQoriDSK/6E2GkAsAuU5kETFCh7pG4yD/ylj9rKhTmO3elsnmBvRD4PgJPds5W2PkhC82aVwmUcJ7A==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.60.1':
-    resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
   '@rollup/rollup-linux-riscv64-musl@4.60.2':
     resolution: {integrity: sha512-mjYNkHPfGpUR00DuM1ZZIgs64Hpf4bWcz9Z41+4Q+pgDx73UwWdAYyf6EG/lRFldmdHHzgrYyge5akFUW0D3mQ==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-s390x-gnu@4.60.1':
-    resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
   '@rollup/rollup-linux-s390x-gnu@4.60.2':
     resolution: {integrity: sha512-ALyvJz965BQk8E9Al/JDKKDLH2kfKFLTGMlgkAbbYtZuJt9LU8DW3ZoDMCtQpXAltZxwBHevXz5u+gf0yA0YoA==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.60.1':
-    resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@rollup/rollup-linux-x64-gnu@4.60.2':
     resolution: {integrity: sha512-UQjrkIdWrKI626Du8lCQ6MJp/6V1LAo2bOK9OTu4mSn8GGXIkPXk/Vsp4bLHCd9Z9Iz2OTEaokUE90VweJgIYQ==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.60.1':
-    resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@rollup/rollup-linux-x64-musl@4.60.2':
     resolution: {integrity: sha512-bTsRGj6VlSdn/XD4CGyzMnzaBs9bsRxy79eTqTCBsA8TMIEky7qg48aPkvJvFe1HyzQ5oMZdg7AnVlWQSKLTnw==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-openbsd-x64@4.60.1':
-    resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==}
-    cpu: [x64]
-    os: [openbsd]
-
   '@rollup/rollup-openbsd-x64@4.60.2':
     resolution: {integrity: sha512-6d4Z3534xitaA1FcMWP7mQPq5zGwBmGbhphh2DwaA1aNIXUu3KTOfwrWpbwI4/Gr0uANo7NTtaykFyO2hPuFLg==}
     cpu: [x64]
     os: [openbsd]
 
-  '@rollup/rollup-openharmony-arm64@4.60.1':
-    resolution: {integrity: sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==}
-    cpu: [arm64]
-    os: [openharmony]
-
   '@rollup/rollup-openharmony-arm64@4.60.2':
     resolution: {integrity: sha512-NetAg5iO2uN7eB8zE5qrZ3CSil+7IJt4WDFLcC75Ymywq1VZVD6qJ6EvNLjZ3rEm6gB7XW5JdT60c6MN35Z85Q==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.60.1':
-    resolution: {integrity: sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==}
-    cpu: [arm64]
-    os: [win32]
-
   '@rollup/rollup-win32-arm64-msvc@4.60.2':
     resolution: {integrity: sha512-NCYhOotpgWZ5kdxCZsv6Iudx0wX8980Q/oW4pNFNihpBKsDbEA1zpkfxJGC0yugsUuyDZ7gL37dbzwhR0VI7pQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.60.1':
-    resolution: {integrity: sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==}
-    cpu: [ia32]
-    os: [win32]
-
   '@rollup/rollup-win32-ia32-msvc@4.60.2':
     resolution: {integrity: sha512-RXsaOqXxfoUBQoOgvmmijVxJnW2IGB0eoMO7F8FAjaj0UTywUO/luSqimWBJn04WNgUkeNhh7fs7pESXajWmkg==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.60.1':
-    resolution: {integrity: sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==}
-    cpu: [x64]
-    os: [win32]
-
   '@rollup/rollup-win32-x64-gnu@4.60.2':
     resolution: {integrity: sha512-qdAzEULD+/hzObedtmV6iBpdL5TIbKVztGiK7O3/KYSf+HIzU257+MX1EXJcyIiDbMAqmbwaufcYPvyRryeZtA==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.60.1':
-    resolution: {integrity: sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==}
-    cpu: [x64]
-    os: [win32]
-
   '@rollup/rollup-win32-x64-msvc@4.60.2':
     resolution: {integrity: sha512-Nd/SgG27WoA9e+/TdK74KnHz852TLa94ovOYySo/yMPuTmpckK/jIF2jSwS3g7ELSKXK13/cVdmg1Z/DaCWKxA==}
     cpu: [x64]
@@ -9759,9 +9621,9 @@ packages:
     resolution: {integrity: sha512-eonl3sLUha+S1GzTPxychyhnUzKyeQkZ7jLjKrBagJgPla13F+uQ71HgpFefyHgqrjEbCPkDArxYsjY8/+gLKA==}
     engines: {node: '>= 0.4.0'}
 
-  ng-packagr@22.0.0-next.3:
-    resolution: {integrity: sha512-M4h0PxrWLJSlJ8TCaH5Y5ZDBeRJvSQTe9FlsyMVMSjo/1fPYG16a/qkMbv/EYO0+LCrooRS+DdRjKx13b6P15A==}
-    engines: {node: ^22.22.0 || >=24.13.1}
+  ng-packagr@22.0.0-next.4:
+    resolution: {integrity: sha512-rZorWpYgRUHJ6DVgHb+Ele+spOTH/lQu6u0HA3HL4N8a+vIipEIZ/JUPXNfAhcGd0yhj7jhuokD7akIjiL3zzg==}
+    engines: {node: ^22.22.0 || ^24.13.1 || >=26.0.0}
     hasBin: true
     peerDependencies:
       '@angular/compiler-cli': ^22.0.0-next.3
@@ -9786,8 +9648,8 @@ packages:
       '@angular/core': '>=17.3.0'
       rxjs: '>=7.0.0'
 
-  nock@14.0.13:
-    resolution: {integrity: sha512-SCPsQmGVNY8h1rfS3aU0MzOGYY+wKIFukHEsoSIwPRCYocZkya7MFIlWIEYPWQZj+Gaksg6EyUaY255ZDqpQuA==}
+  nock@14.0.14:
+    resolution: {integrity: sha512-PKk7tex0O3RRXUZC5XDKJ9yM3rYRPS13myduT85VIIYDBnib42Fpxoe6KxRSzqB4iL2NDxkcJ2yiskZ18hGLEQ==}
     engines: {node: '>=18.20.0 <20 || >=20.12.1'}
 
   node-abi@3.89.0:
@@ -10902,11 +10764,6 @@ packages:
       '@types/node':
         optional: true
 
-  rollup@4.60.1:
-    resolution: {integrity: sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
-
   rollup@4.60.2:
     resolution: {integrity: sha512-J9qZyW++QK/09NyN/zeO0dG/1GdGfyp9lV8ajHnRVLfo/uFsbji5mHnDgn/qYdUHyCkM2N+8VyspgZclfAh0eQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -12640,6 +12497,11 @@ packages:
     engines: {node: '>= 14.6'}
     hasBin: true
 
+  yaml@2.8.4:
+    resolution: {integrity: sha512-ml/JPOj9fOQK8RNnWojA67GbZ0ApXAUlN2UQclwv2eVgTgn7O9gg9o7paZWKMp4g0H3nTLtS9LVzhkpOFIKzog==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
   yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
@@ -12943,13 +12805,13 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  ? '@angular-devkit/build-angular@22.0.0-next.7(@angular/compiler-cli@packages+compiler-cli)(@angular/compiler@packages+compiler)(@angular/core@packages+core)(@angular/localize@packages+localize)(@angular/platform-browser@packages+platform-browser)(@angular/platform-server@packages+platform-server)(@angular/service-worker@packages+service-worker)(@angular/ssr@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-server@packages+platform-server)(@angular/router@packages+router))(@types/node@20.19.39)(bufferutil@4.1.0)(chokidar@5.0.0)(jiti@2.6.1)(karma@6.4.4(bufferutil@4.1.0))(lightningcss@1.32.0)(ng-packagr@22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3))(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tsx@4.21.0)(typescript@6.0.3)(vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(yaml@2.8.3)'
+  ? '@angular-devkit/build-angular@22.0.0-next.7(@angular/compiler-cli@packages+compiler-cli)(@angular/compiler@packages+compiler)(@angular/core@packages+core)(@angular/localize@packages+localize)(@angular/platform-browser@packages+platform-browser)(@angular/platform-server@packages+platform-server)(@angular/service-worker@packages+service-worker)(@angular/ssr@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-server@packages+platform-server)(@angular/router@packages+router))(@types/node@20.19.39)(bufferutil@4.1.0)(chokidar@5.0.0)(jiti@2.6.1)(karma@6.4.4(bufferutil@4.1.0))(lightningcss@1.32.0)(ng-packagr@22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3))(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tsx@4.21.0)(typescript@6.0.3)(vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))(yaml@2.8.4)'
   : dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2200.0-next.7(chokidar@5.0.0)
       '@angular-devkit/build-webpack': 0.2200.0-next.7(chokidar@5.0.0)(webpack-dev-server@5.2.3(bufferutil@4.1.0)(tslib@2.8.1)(webpack@5.106.2(esbuild@0.28.0)))(webpack@5.106.2(esbuild@0.28.0))
       '@angular-devkit/core': 22.0.0-next.7(chokidar@5.0.0)
-      '@angular/build': 22.0.0-next.7(abeb7411b31a32f8f090594a4d0a9097)
+      '@angular/build': 22.0.0-next.7(d429062e989247d151c1f28c9069db1c)
       '@angular/compiler-cli': link:packages/compiler-cli
       '@babel/core': 7.29.0
       '@babel/generator': 7.29.1
@@ -13009,8 +12871,8 @@ snapshots:
       '@angular/ssr': 22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-server@packages+platform-server)(@angular/router@packages+router)
       esbuild: 0.28.0
       karma: 6.4.4(bufferutil@4.1.0)(utf-8-validate@6.0.6)
-      ng-packagr: 22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3)
-      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
+      ng-packagr: 22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3)
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.4)
     transitivePeerDependencies:
       - '@angular/compiler'
       - '@rspack/core'
@@ -13064,13 +12926,13 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@angular/aria@22.0.0-next.7(@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/core@packages+core)':
+  '@angular/aria@22.0.0-next.8(@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/core@packages+core)':
     dependencies:
-      '@angular/cdk': 22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
+      '@angular/cdk': 22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
       '@angular/core': link:packages/core
       tslib: 2.8.1
 
-  '@angular/build@22.0.0-next.7(60f4048b267b714e474710aeaf6edd47)':
+  '@angular/build@22.0.0-next.7(3a40ffef6ab236564b7661e07dc1fa32)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2200.0-next.7(chokidar@5.0.0)
@@ -13080,7 +12942,7 @@ snapshots:
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-split-export-declaration': 7.24.7
       '@inquirer/confirm': 6.0.12(@types/node@24.12.2)
-      '@vitejs/plugin-basic-ssl': 2.3.0(vite@7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitejs/plugin-basic-ssl': 2.3.0(vite@7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))
       beasties: 0.4.2
       browserslist: 4.28.2
       esbuild: 0.28.0
@@ -13099,7 +12961,7 @@ snapshots:
       tinyglobby: 0.2.16
       tslib: 2.8.1
       typescript: 6.0.3
-      vite: 7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
       watchpack: 2.5.1
     optionalDependencies:
       '@angular/core': link:packages/core
@@ -13112,10 +12974,10 @@ snapshots:
       karma: 6.4.4(bufferutil@4.1.0)(utf-8-validate@6.0.6)
       less: 4.6.4
       lmdb: 3.5.4
-      ng-packagr: 22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3)
+      ng-packagr: 22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3)
       postcss: 8.5.13
-      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
-      vitest: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.0.2)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.4)
+      vitest: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
     transitivePeerDependencies:
       - '@types/node'
       - chokidar
@@ -13129,7 +12991,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/build@22.0.0-next.7(7c763da64c525edd2622f1aac4f6d836)':
+  '@angular/build@22.0.0-next.7(3ebc34fc8832bb103613be52d2fb67d2)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2200.0-next.7(chokidar@5.0.0)
@@ -13139,7 +13001,7 @@ snapshots:
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-split-export-declaration': 7.24.7
       '@inquirer/confirm': 6.0.12(@types/node@20.19.39)
-      '@vitejs/plugin-basic-ssl': 2.3.0(vite@7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitejs/plugin-basic-ssl': 2.3.0(vite@7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))
       beasties: 0.4.2
       browserslist: 4.28.2
       esbuild: 0.28.0
@@ -13158,7 +13020,7 @@ snapshots:
       tinyglobby: 0.2.16
       tslib: 2.8.1
       typescript: 6.0.3
-      vite: 7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
       watchpack: 2.5.1
     optionalDependencies:
       '@angular/core': link:packages/core
@@ -13171,10 +13033,10 @@ snapshots:
       karma: 6.4.4(bufferutil@4.1.0)(utf-8-validate@6.0.6)
       less: 4.6.4
       lmdb: 3.5.4
-      ng-packagr: 22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3)
+      ng-packagr: 22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3)
       postcss: 8.5.13
-      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
-      vitest: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.4)
+      vitest: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
     transitivePeerDependencies:
       - '@types/node'
       - chokidar
@@ -13188,7 +13050,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/build@22.0.0-next.7(abeb7411b31a32f8f090594a4d0a9097)':
+  '@angular/build@22.0.0-next.7(4212d5e6b5a601afd11304866347924f)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2200.0-next.7(chokidar@5.0.0)
@@ -13197,8 +13059,8 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-split-export-declaration': 7.24.7
-      '@inquirer/confirm': 6.0.12(@types/node@20.19.39)
-      '@vitejs/plugin-basic-ssl': 2.3.0(vite@7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@inquirer/confirm': 6.0.12(@types/node@24.12.2)
+      '@vitejs/plugin-basic-ssl': 2.3.0(vite@7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))
       beasties: 0.4.2
       browserslist: 4.28.2
       esbuild: 0.28.0
@@ -13217,7 +13079,7 @@ snapshots:
       tinyglobby: 0.2.16
       tslib: 2.8.1
       typescript: 6.0.3
-      vite: 7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
       watchpack: 2.5.1
     optionalDependencies:
       '@angular/core': link:packages/core
@@ -13230,10 +13092,10 @@ snapshots:
       karma: 6.4.4(bufferutil@4.1.0)(utf-8-validate@6.0.6)
       less: 4.6.4
       lmdb: 3.5.4
-      ng-packagr: 22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3)
-      postcss: 8.5.10
-      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
-      vitest: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      ng-packagr: 22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3)
+      postcss: 8.5.13
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.4)
+      vitest: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.0.2)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
     transitivePeerDependencies:
       - '@types/node'
       - chokidar
@@ -13247,7 +13109,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/build@22.0.0-next.7(ac31ff1104952532ece8b9c1ddb25bc4)':
+  '@angular/build@22.0.0-next.7(d429062e989247d151c1f28c9069db1c)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2200.0-next.7(chokidar@5.0.0)
@@ -13256,8 +13118,8 @@ snapshots:
       '@babel/core': 7.29.0
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-split-export-declaration': 7.24.7
-      '@inquirer/confirm': 6.0.12(@types/node@24.12.2)
-      '@vitejs/plugin-basic-ssl': 2.3.0(vite@7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@inquirer/confirm': 6.0.12(@types/node@20.19.39)
+      '@vitejs/plugin-basic-ssl': 2.3.0(vite@7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))
       beasties: 0.4.2
       browserslist: 4.28.2
       esbuild: 0.28.0
@@ -13276,7 +13138,7 @@ snapshots:
       tinyglobby: 0.2.16
       tslib: 2.8.1
       typescript: 6.0.3
-      vite: 7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
       watchpack: 2.5.1
     optionalDependencies:
       '@angular/core': link:packages/core
@@ -13289,10 +13151,10 @@ snapshots:
       karma: 6.4.4(bufferutil@4.1.0)(utf-8-validate@6.0.6)
       less: 4.6.4
       lmdb: 3.5.4
-      ng-packagr: 22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3)
-      postcss: 8.5.13
-      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
-      vitest: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      ng-packagr: 22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3)
+      postcss: 8.5.10
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.4)
+      vitest: 4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
     transitivePeerDependencies:
       - '@types/node'
       - chokidar
@@ -13306,7 +13168,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)':
+  '@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)':
     dependencies:
       '@angular/common': link:packages/common
       '@angular/core': link:packages/core
@@ -13377,9 +13239,9 @@ snapshots:
 
   '@angular/domino@https://codeload.github.com/angular/domino/tar.gz/928dffb9d9431b2cd2a73d7b940d1575f221e072': {}
 
-  '@angular/material@22.0.0-next.7(@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(@angular/forms@packages+forms)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)':
+  '@angular/material@22.0.0-next.8(@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(@angular/forms@packages+forms)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)':
     dependencies:
-      '@angular/cdk': 22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
+      '@angular/cdk': 22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
       '@angular/common': link:packages/common
       '@angular/core': link:packages/core
       '@angular/forms': link:packages/forms
@@ -13387,12 +13249,12 @@ snapshots:
       rxjs: 7.8.2
       tslib: 2.8.1
 
-  '@angular/ng-dev@https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/df5bcf2c22735628d01f1e9cdb45d336bec4cfdf(@modelcontextprotocol/sdk@1.29.0(@cfworker/json-schema@4.1.1))':
+  '@angular/ng-dev@https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/f084e2e88e71cdca8098489e6104ffcdbd9a8eda(@modelcontextprotocol/sdk@1.29.0(@cfworker/json-schema@4.1.1))':
     dependencies:
       '@actions/core': 3.0.1
       '@conventional-changelog/git-client': 2.7.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)
       '@google-cloud/spanner': 8.0.0(supports-color@10.2.2)
-      '@google/genai': 1.50.1(@modelcontextprotocol/sdk@1.29.0(@cfworker/json-schema@4.1.1))(bufferutil@4.1.0)(supports-color@10.2.2)(utf-8-validate@6.0.6)
+      '@google/genai': 1.52.0(@modelcontextprotocol/sdk@1.29.0(@cfworker/json-schema@4.1.1))(bufferutil@4.1.0)(supports-color@10.2.2)(utf-8-validate@6.0.6)
       '@inquirer/prompts': 8.4.2(@types/node@24.12.2)
       '@inquirer/type': 4.0.5(@types/node@24.12.2)
       '@octokit/auth-app': 8.2.0
@@ -13432,7 +13294,7 @@ snapshots:
       jsonc-parser: 3.3.1
       minimatch: 10.2.5
       multimatch: 8.0.0
-      nock: 14.0.13
+      nock: 14.0.14
       semver: 7.7.4
       supports-color: 10.2.2
       tsx: 4.21.0
@@ -13440,7 +13302,7 @@ snapshots:
       typescript: 6.0.3
       utf-8-validate: 6.0.6
       which: 6.0.1
-      yaml: 2.8.3
+      yaml: 2.8.4
       yargs: 18.0.0
       zod: 4.3.6
     transitivePeerDependencies:
@@ -15197,7 +15059,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@google/genai@1.50.1(@modelcontextprotocol/sdk@1.29.0(@cfworker/json-schema@4.1.1))(bufferutil@4.1.0)(supports-color@10.2.2)(utf-8-validate@6.0.6)':
+  '@google/genai@1.52.0(@modelcontextprotocol/sdk@1.29.0(@cfworker/json-schema@4.1.1))(bufferutil@4.1.0)(supports-color@10.2.2)(utf-8-validate@6.0.6)':
     dependencies:
       google-auth-library: 10.6.2(supports-color@10.2.2)
       p-retry: 4.6.2
@@ -16724,11 +16586,11 @@ snapshots:
     optionalDependencies:
       rollup: 4.60.2
 
-  '@rollup/plugin-json@6.1.0(rollup@4.60.1)':
+  '@rollup/plugin-json@6.1.0(rollup@4.60.2)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.60.1)
+      '@rollup/pluginutils': 5.3.0(rollup@4.60.2)
     optionalDependencies:
-      rollup: 4.60.1
+      rollup: 4.60.2
 
   '@rollup/plugin-node-resolve@16.0.3(rollup@4.60.2)':
     dependencies:
@@ -16740,14 +16602,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.60.2
 
-  '@rollup/pluginutils@5.3.0(rollup@4.60.1)':
-    dependencies:
-      '@types/estree': 1.0.8
-      estree-walker: 2.0.2
-      picomatch: 4.0.4
-    optionalDependencies:
-      rollup: 4.60.1
-
   '@rollup/pluginutils@5.3.0(rollup@4.60.2)':
     dependencies:
       '@types/estree': 1.0.8
@@ -16756,153 +16610,78 @@ snapshots:
     optionalDependencies:
       rollup: 4.60.2
 
-  '@rollup/rollup-android-arm-eabi@4.60.1':
-    optional: true
-
   '@rollup/rollup-android-arm-eabi@4.60.2':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.60.1':
-    optional: true
-
   '@rollup/rollup-android-arm64@4.60.2':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.60.1':
-    optional: true
-
   '@rollup/rollup-darwin-arm64@4.60.2':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.60.1':
-    optional: true
-
   '@rollup/rollup-darwin-x64@4.60.2':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.60.1':
-    optional: true
-
   '@rollup/rollup-freebsd-arm64@4.60.2':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.60.1':
-    optional: true
-
   '@rollup/rollup-freebsd-x64@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-arm-gnueabihf@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-arm-musleabihf@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-arm64-gnu@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-arm64-musl@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-loong64-gnu@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-loong64-musl@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-loong64-musl@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-ppc64-gnu@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-musl@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-ppc64-musl@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-riscv64-gnu@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-riscv64-musl@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-s390x-gnu@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-x64-gnu@4.60.2':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.60.1':
-    optional: true
-
   '@rollup/rollup-linux-x64-musl@4.60.2':
     optional: true
 
-  '@rollup/rollup-openbsd-x64@4.60.1':
-    optional: true
-
   '@rollup/rollup-openbsd-x64@4.60.2':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.60.1':
-    optional: true
-
   '@rollup/rollup-openharmony-arm64@4.60.2':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.60.1':
-    optional: true
-
   '@rollup/rollup-win32-arm64-msvc@4.60.2':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.60.1':
-    optional: true
-
   '@rollup/rollup-win32-ia32-msvc@4.60.2':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.60.1':
-    optional: true
-
   '@rollup/rollup-win32-x64-gnu@4.60.2':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.60.1':
-    optional: true
-
   '@rollup/rollup-win32-x64-msvc@4.60.2':
     optional: true
 
@@ -17621,13 +17400,13 @@ snapshots:
       d3-selection: 3.0.0
       d3-transition: 3.0.1(d3-selection@3.0.0)
 
-  '@vitejs/plugin-basic-ssl@2.3.0(vite@7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
+  '@vitejs/plugin-basic-ssl@2.3.0(vite@7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))':
     dependencies:
-      vite: 7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
 
-  '@vitejs/plugin-basic-ssl@2.3.0(vite@7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
+  '@vitejs/plugin-basic-ssl@2.3.0(vite@7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))':
     dependencies:
-      vite: 7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
 
   '@vitest/expect@4.1.4':
     dependencies:
@@ -17638,22 +17417,22 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.4(vite@8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
+  '@vitest/mocker@4.1.4(vite@8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))':
     dependencies:
       '@vitest/spy': 4.1.4
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
     optional: true
 
-  '@vitest/mocker@4.1.4(vite@8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))':
+  '@vitest/mocker@4.1.4(vite@8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))':
     dependencies:
       '@vitest/spy': 4.1.4
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
 
   '@vitest/pretty-format@4.1.4':
     dependencies:
@@ -22833,11 +22612,11 @@ snapshots:
 
   netmask@2.1.1: {}
 
-  ng-packagr@22.0.0-next.3(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3))(tslib@2.8.1)(typescript@6.0.3):
+  ng-packagr@22.0.0-next.4(@angular/compiler-cli@packages+compiler-cli)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4))(tslib@2.8.1)(typescript@6.0.3):
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular/compiler-cli': link:packages/compiler-cli
-      '@rollup/plugin-json': 6.1.0(rollup@4.60.1)
+      '@rollup/plugin-json': 6.1.0(rollup@4.60.2)
       '@rollup/wasm-node': 4.60.2
       ajv: 8.18.0
       browserslist: 4.28.2
@@ -22852,15 +22631,15 @@ snapshots:
       ora: 9.3.0
       piscina: 5.1.4
       postcss: 8.5.13
-      rollup-plugin-dts: 6.4.1(rollup@4.60.1)(typescript@6.0.3)
+      rollup-plugin-dts: 6.4.1(rollup@4.60.2)(typescript@6.0.3)
       rxjs: 7.8.2
       sass: 1.99.0
       tinyglobby: 0.2.16
       tslib: 2.8.1
       typescript: 6.0.3
     optionalDependencies:
-      rollup: 4.60.1
-      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.3)
+      rollup: 4.60.2
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.4)
 
   ngx-flamegraph@0.1.1(@angular/common@packages+common)(@angular/core@packages+core):
     dependencies:
@@ -22868,15 +22647,15 @@ snapshots:
       '@angular/core': link:packages/core
       tslib: 2.8.1
 
-  ngx-progressbar@14.0.0(@angular/cdk@22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(rxjs@7.8.2):
+  ngx-progressbar@14.0.0(@angular/cdk@22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2))(@angular/common@packages+common)(@angular/core@packages+core)(rxjs@7.8.2):
     dependencies:
-      '@angular/cdk': 22.0.0-next.7(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
+      '@angular/cdk': 22.0.0-next.8(@angular/common@packages+common)(@angular/core@packages+core)(@angular/platform-browser@packages+platform-browser)(rxjs@7.8.2)
       '@angular/common': link:packages/common
       '@angular/core': link:packages/core
       rxjs: 7.8.2
       tslib: 2.8.1
 
-  nock@14.0.13:
+  nock@14.0.14:
     dependencies:
       '@mswjs/interceptors': 0.41.4
       json-stringify-safe: 5.0.1
@@ -23522,14 +23301,14 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.5.13
 
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.13)(tsx@4.21.0)(yaml@2.8.3):
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.13)(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 1.21.7
       postcss: 8.5.13
       tsx: 4.21.0
-      yaml: 2.8.3
+      yaml: 2.8.4
 
   postcss-loader@8.2.1(postcss@8.5.10)(typescript@6.0.3)(webpack@5.106.2(esbuild@0.28.0)):
     dependencies:
@@ -24092,17 +23871,6 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.16
       '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.16
 
-  rollup-plugin-dts@6.4.1(rollup@4.60.1)(typescript@6.0.3):
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      '@jridgewell/sourcemap-codec': 1.5.5
-      convert-source-map: 2.0.0
-      magic-string: 0.30.21
-      rollup: 4.60.1
-      typescript: 6.0.3
-    optionalDependencies:
-      '@babel/code-frame': 7.29.0
-
   rollup-plugin-dts@6.4.1(rollup@4.60.2)(typescript@6.0.3):
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -24121,37 +23889,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.39
 
-  rollup@4.60.1:
-    dependencies:
-      '@types/estree': 1.0.8
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.60.1
-      '@rollup/rollup-android-arm64': 4.60.1
-      '@rollup/rollup-darwin-arm64': 4.60.1
-      '@rollup/rollup-darwin-x64': 4.60.1
-      '@rollup/rollup-freebsd-arm64': 4.60.1
-      '@rollup/rollup-freebsd-x64': 4.60.1
-      '@rollup/rollup-linux-arm-gnueabihf': 4.60.1
-      '@rollup/rollup-linux-arm-musleabihf': 4.60.1
-      '@rollup/rollup-linux-arm64-gnu': 4.60.1
-      '@rollup/rollup-linux-arm64-musl': 4.60.1
-      '@rollup/rollup-linux-loong64-gnu': 4.60.1
-      '@rollup/rollup-linux-loong64-musl': 4.60.1
-      '@rollup/rollup-linux-ppc64-gnu': 4.60.1
-      '@rollup/rollup-linux-ppc64-musl': 4.60.1
-      '@rollup/rollup-linux-riscv64-gnu': 4.60.1
-      '@rollup/rollup-linux-riscv64-musl': 4.60.1
-      '@rollup/rollup-linux-s390x-gnu': 4.60.1
-      '@rollup/rollup-linux-x64-gnu': 4.60.1
-      '@rollup/rollup-linux-x64-musl': 4.60.1
-      '@rollup/rollup-openbsd-x64': 4.60.1
-      '@rollup/rollup-openharmony-arm64': 4.60.1
-      '@rollup/rollup-win32-arm64-msvc': 4.60.1
-      '@rollup/rollup-win32-ia32-msvc': 4.60.1
-      '@rollup/rollup-win32-x64-gnu': 4.60.1
-      '@rollup/rollup-win32-x64-msvc': 4.60.1
-      fsevents: 2.3.3
-
   rollup@4.60.2:
     dependencies:
       '@types/estree': 1.0.8
@@ -24936,7 +24673,7 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.3):
+  tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -24955,7 +24692,7 @@ snapshots:
       postcss: 8.5.13
       postcss-import: 15.1.0(postcss@8.5.13)
       postcss-js: 4.1.0(postcss@8.5.13)
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.13)(tsx@4.21.0)(yaml@2.8.3)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.13)(tsx@4.21.0)(yaml@2.8.4)
       postcss-nested: 6.2.0(postcss@8.5.13)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.12
@@ -25656,7 +25393,7 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  vite@7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
+  vite@7.3.2(@types/node@20.19.39)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       esbuild: 0.27.7
       fdir: 6.5.0(picomatch@4.0.4)
@@ -25673,9 +25410,9 @@ snapshots:
       sass: 1.99.0
       terser: 5.46.1
       tsx: 4.21.0
-      yaml: 2.8.3
+      yaml: 2.8.4
 
-  vite@7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
+  vite@7.3.2(@types/node@24.12.2)(jiti@2.6.1)(less@4.6.4)(lightningcss@1.32.0)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       esbuild: 0.27.7
       fdir: 6.5.0(picomatch@4.0.4)
@@ -25692,9 +25429,9 @@ snapshots:
       sass: 1.99.0
       terser: 5.46.1
       tsx: 4.21.0
-      yaml: 2.8.3
+      yaml: 2.8.4
 
-  vite@8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
+  vite@8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -25710,10 +25447,10 @@ snapshots:
       sass: 1.99.0
       terser: 5.46.1
       tsx: 4.21.0
-      yaml: 2.8.3
+      yaml: 2.8.4
     optional: true
 
-  vite@8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
+  vite@8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -25729,12 +25466,12 @@ snapshots:
       sass: 1.99.0
       terser: 5.46.1
       tsx: 4.21.0
-      yaml: 2.8.3
+      yaml: 2.8.4
 
-  vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
+  vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       '@vitest/expect': 4.1.4
-      '@vitest/mocker': 4.1.4(vite@8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/mocker': 4.1.4(vite@8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))
       '@vitest/pretty-format': 4.1.4
       '@vitest/runner': 4.1.4
       '@vitest/snapshot': 4.1.4
@@ -25751,7 +25488,7 @@ snapshots:
       tinyexec: 1.1.1
       tinyglobby: 0.2.16
       tinyrainbow: 3.1.0
-      vite: 8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@20.19.39)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
@@ -25772,10 +25509,10 @@ snapshots:
       - yaml
     optional: true
 
-  vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.0.2)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
+  vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.0.2)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       '@vitest/expect': 4.1.4
-      '@vitest/mocker': 4.1.4(vite@8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/mocker': 4.1.4(vite@8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))
       '@vitest/pretty-format': 4.1.4
       '@vitest/runner': 4.1.4
       '@vitest/snapshot': 4.1.4
@@ -25792,7 +25529,7 @@ snapshots:
       tinyexec: 1.1.1
       tinyglobby: 0.2.16
       tinyrainbow: 3.1.0
-      vite: 8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
@@ -25812,10 +25549,10 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3):
+  vitest@4.1.4(@opentelemetry/api@1.9.1)(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(jsdom@29.1.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4):
     dependencies:
       '@vitest/expect': 4.1.4
-      '@vitest/mocker': 4.1.4(vite@8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+      '@vitest/mocker': 4.1.4(vite@8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4))
       '@vitest/pretty-format': 4.1.4
       '@vitest/runner': 4.1.4
       '@vitest/snapshot': 4.1.4
@@ -25832,7 +25569,7 @@ snapshots:
       tinyexec: 1.1.1
       tinyglobby: 0.2.16
       tinyrainbow: 3.1.0
-      vite: 8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+      vite: 8.0.9(@types/node@24.12.2)(esbuild@0.28.0)(jiti@2.6.1)(less@4.6.4)(sass@1.99.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.4)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
@@ -26315,6 +26052,8 @@ snapshots:
 
   yaml@2.8.3: {}
 
+  yaml@2.8.4: {}
+
   yargs-parser@18.1.3:
     dependencies:
       camelcase: 5.3.1
diff --git a/vscode-ng-language-service/integration/project/package.json b/vscode-ng-language-service/integration/project/package.json
index 4ccb43cb9c62..892f9bebac2f 100644
--- a/vscode-ng-language-service/integration/project/package.json
+++ b/vscode-ng-language-service/integration/project/package.json
@@ -9,7 +9,7 @@
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "ng-packagr": "22.0.0-next.3",
+    "ng-packagr": "22.0.0-next.4",
     "typescript": "6.0.3"
   },
   "scripts": {