angular · mattrbeck · May 8, 2026 · May 9, 2026
diff --git 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
@@ -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
diff --git a/adev/package.json b/adev/package.json
@@ -5,17 +5,17 @@
     "@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:*",
     "@angular/compiler-cli": "workspace:*",
     "@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
@@ -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
@@ -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
@@ -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>