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/BUILD.bazel b/adev/shared-docs/components/select/BUILD.bazel
index 9ee74aaa8c50..48e5d609162b 100644
--- a/adev/shared-docs/components/select/BUILD.bazel
+++ b/adev/shared-docs/components/select/BUILD.bazel
@@ -16,6 +16,7 @@ ng_project(
     ],
     deps = [
         "//adev:node_modules/@angular/aria",
+        "//adev:node_modules/@angular/cdk",
         "//adev:node_modules/@angular/common",
         "//adev:node_modules/@angular/core",
         "//adev:node_modules/@angular/forms",
diff --git a/adev/shared-docs/components/select/select.component.html b/adev/shared-docs/components/select/select.component.html
index ebf8c0966bce..da98bd4a0b38 100644
--- a/adev/shared-docs/components/select/select.component.html
+++ b/adev/shared-docs/components/select/select.component.html
@@ -1,61 +1,93 @@
-<div ngCombobox #outerCombobox="ngCombobox" [readonly]="true" [disabled]="disabled()">
-  <div class="docs-select-input-container">
+<div ngCombobox #combobox="ngCombobox" class="docs-combobox-container" [(expanded)]="popupExpanded">
+  <div #origin class="docs-select-input-container">
     <input
-      ngComboboxInput
       [attr.id]="id()"
       [attr.name]="name()"
       [value]="displayValue()"
-      placeholder="Select an option..."
+      placeholder="Select an option"
       readonly
+      [tabindex]="-1"
     />
     <span class="material-symbols-outlined docs-select-arrow" translate="no" aria-hidden="true"
       >arrow_drop_down</span
     >
   </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
+    [cdkConnectedOverlay]="{origin: combobox.element, usePopover: 'inline', matchWidth: true}"
+    [cdkConnectedOverlayOpen]="popupExpanded()"
+    [cdkConnectedOverlayDisableClose]="false"
+    (overlayOutsideClick)="popupExpanded.set(false)"
+  >
+    <ng-template ngComboboxPopup [combobox]="combobox" popupType="dialog">
+      <div class="docs-select-popover">
+        <div class="docs-select-dialog" ngComboboxWidget>
+          <div class="example-combobox-container">
+            <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"
+                #searchInput
+                class="docs-select-search-input"
+                placeholder="Search..."
+                [(value)]="searchString"
+                [alwaysExpanded]="true"
+                (keydown.escape)="onSearchEscape($event)"
+              />
+            </div>
 
-        <ng-template ngComboboxPopupContainer>
-          @if (filteredOptions().length === 0) {
-            <div class="docs-select-no-results">No results found</div>
-          }
+            <div aria-live="polite" class="cdk-visually-hidden">
+              {{ filteredOptions().length === 0 ? 'No results found for ' + searchString() : '' }}
+            </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"
-              >
-                <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
+            <ng-template ngComboboxPopup [combobox]="innerCombobox">
+              <div class="example-popup example-popup-no-margin">
+                @if (filteredOptions().length === 0) {
+                  <div class="docs-select-no-results">No results found</div>
+                }
+                <div
+                  #listbox="ngListbox"
+                  ngListbox
+                  [(value)]="selectedValues"
+                  [multi]="false"
+                  ngComboboxWidget
+                  class="example-listbox"
+                  focusMode="activedescendant"
+                  tabindex="-1"
+                  selectionMode="explicit"
+                  (click)="onCommit()"
+                  (keydown.enter)="onCommit()"
+                  [activeDescendant]="listbox.activeDescendant()"
+                  [class.example-empty]="filteredOptions().length === 0"
                 >
+                  @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
+                      >
+                    </div>
+                  }
+                </div>
               </div>
-            }
+            </ng-template>
           </div>
-        </ng-template>
+        </div>
       </div>
-    </dialog>
+    </ng-template>
   </ng-template>
 </div>
diff --git a/adev/shared-docs/components/select/select.component.scss b/adev/shared-docs/components/select/select.component.scss
index cc9d81910c4f..90a88ae091f5 100644
--- a/adev/shared-docs/components/select/select.component.scss
+++ b/adev/shared-docs/components/select/select.component.scss
@@ -1,8 +1,6 @@
 :host {
   --border-color: color-mix(in srgb, var(--full-contrast) 20%, var(--page-background));
-}
 
-[ngCombobox] {
   position: relative;
   width: 100%;
   display: flex;
@@ -16,15 +14,25 @@
   position: relative;
   align-items: center;
   border-radius: 0.25rem;
-}
-
-[ngComboboxInput] {
-  border-radius: 0.25rem;
-}
 
-[ngComboboxInput][readonly='true'] {
-  cursor: pointer;
-  padding: 0.7rem 1rem;
+  input {
+    width: 100%;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    padding: 0.7rem 1rem 0.7rem;
+    background-color: var(--septenary-contrast);
+    color: var(--primary-contrast);
+
+    &[readonly] {
+      cursor: pointer;
+      padding: 0.7rem 1rem;
+    }
+
+    &[aria-expanded='true'] + .docs-select-arrow {
+      transform: rotate(180deg);
+    }
+  }
 }
 
 [ngCombobox]:focus-within [ngComboboxInput]:not(.docs-select-search-input) {
@@ -32,6 +40,10 @@
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink) 25%, transparent);
 }
 
+.docs-select-popover {
+  width: 100%;
+}
+
 .docs-select-arrow {
   width: 24px;
   height: 24px;
@@ -46,16 +58,11 @@
   transition: transform 0.2s ease;
 }
 
-[ngComboboxInput][aria-expanded='true'] + .docs-select-arrow {
-  transform: rotate(180deg);
-}
-
-[ngComboboxInput] {
-  width: 100%;
+[ngComboboxInput] [ngCombobox] {
   border: none;
   outline: none;
   font-size: 1rem;
-  padding: 0.7rem 1rem 0.7rem 2.5rem;
+  padding: 0.7rem 1rem 0.7rem;
   background-color: var(--septenary-contrast);
   color: var(--primary-contrast);
 }
diff --git a/adev/shared-docs/components/select/select.component.ts b/adev/shared-docs/components/select/select.component.ts
index 1ff0554a8d28..99b0cf00a6a9 100644
--- a/adev/shared-docs/components/select/select.component.ts
+++ b/adev/shared-docs/components/select/select.component.ts
@@ -1,4 +1,4 @@
-/*!
+/**
  * @license
  * Copyright Google LLC All Rights Reserved.
  *
@@ -6,13 +6,9 @@
  * 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 {OverlayModule} from '@angular/cdk/overlay';
 import {
   afterRenderEffect,
   Component,
@@ -20,13 +16,11 @@ import {
   input,
   model,
   signal,
-  untracked,
   viewChild,
 } from '@angular/core';
-import {FormsModule} from '@angular/forms';
 import {FormValueControl} from '@angular/forms/signals';
 
-type SelectOptionValue = string | number | boolean;
+type SelectOptionValue = string;
 
 export interface SelectOption {
   label: string;
@@ -35,17 +29,9 @@ export interface SelectOption {
 
 @Component({
   selector: 'docs-select',
-  imports: [
-    Combobox,
-    ComboboxDialog,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    FormsModule,
-    Listbox,
-    Option,
-  ],
-  templateUrl: './select.component.html',
-  styleUrls: ['./select.component.scss'],
+  templateUrl: 'select.component.html',
+  styleUrl: 'select.component.css',
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
 })
 export class Select implements FormValueControl<string | null> {
   readonly value = model<string | null>(null);
@@ -55,12 +41,12 @@ export class Select implements FormValueControl<string | null> {
   readonly options = input.required<SelectOption[]>();
   readonly disabled = input(false);
 
-  readonly dialog = viewChild(ComboboxDialog);
-  readonly listbox = viewChild<Listbox<SelectOptionValue>>(Listbox);
-  readonly combobox = viewChild<Combobox<SelectOptionValue>>(Combobox);
+  readonly listbox = viewChild(Listbox);
+  readonly combobox = viewChild(Combobox);
 
   readonly searchString = signal('');
 
+  readonly popupExpanded = signal(false);
   readonly filteredOptions = computed(() => {
     const search = this.searchString().toLowerCase();
     if (!search) {
@@ -82,39 +68,36 @@ export class Select implements FormValueControl<string | null> {
 
   constructor() {
     afterRenderEffect(() => {
-      if (this.dialog() && this.combobox()?.expanded()) {
-        untracked(() => this.listbox()?.gotoFirst());
-        this.positionDialog();
-      }
+      this.listbox()?.scrollActiveItemIntoView();
     });
-
-    afterRenderEffect(() => {
-      const selected = this.selectedValues();
-      if (selected.length > 0) {
-        untracked(() => this.dialog()?.close());
-        this.value.set(selected[0] as string);
-        this.searchString.set('');
-      }
-    });
-
-    afterRenderEffect(() => this.listbox()?.scrollActiveItemIntoView());
   }
-  // TODO: Improve once CDK overlay is fixed https://github.com/angular/components/issues/32504
-  private positionDialog(): void {
-    const dialog = this.dialog();
-    const combobox = this.combobox();
 
-    if (!dialog || !combobox) {
-      return;
+  onCommit() {
+    const values = this.selectedValues();
+    if (values.length) {
+      this.value.set(values[0]);
+      //this.popupExpanded.set(false);
     }
+  }
 
-    const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
-    const scrollY = window.scrollY;
+  /** Dismisses the dialog overlay on Escape key. */
+  onSearchEscape(event: Event) {
+    this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
+  }
 
-    if (comboboxRect) {
-      dialog.element.style.width = `${comboboxRect.width}px`;
-      dialog.element.style.top = `${comboboxRect.bottom + scrollY + 4}px`;
-      dialog.element.style.left = `${comboboxRect.left}px`;
+  /** Handles keydown events on the clear button. */
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      this.clear();
+      this.popupExpanded.set(false);
+      event.stopPropagation();
     }
   }
+
+  /** Clears the search query and all selected options. */
+  clear(): void {
+    this.searchString.set('');
+    this.value.set(null);
+  }
 }
diff --git a/adev/src/content/examples/aria/autocomplete/src/assets/autocomplete.css b/adev/src/content/examples/aria/autocomplete/src/assets/autocomplete.css
deleted file mode 100644
index 45e65487e775..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/assets/autocomplete.css
+++ /dev/null
@@ -1,89 +0,0 @@
-html {
-  font-family: var(--inter-font);
-}
-
-.combobox-container {
-  max-width: 400px;
-  margin: 20px;
-}
-
-label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: #e0e0e0;
-}
-
-.input-container {
-  position: relative;
-}
-
-.combobox-input {
-  width: 100%;
-  padding: 10px 12px;
-  border: 1px solid #404040;
-  border-radius: 4px;
-  font-size: 16px;
-  box-sizing: border-box;
-  background-color: #1a1a1a;
-  color: #e0e0e0;
-}
-
-.combobox-input::placeholder {
-  color: #888;
-}
-
-.combobox-input:focus {
-  outline: none;
-  border-color: #4a9eff;
-  background-color: #1f1f1f;
-}
-
-.popover {
-  margin: 0;
-  padding: 0;
-  border: 1px solid #404040;
-  border-radius: 4px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  background: #1a1a1a;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.listbox {
-  padding: 4px 0;
-}
-
-.option {
-  padding: 10px 12px;
-  cursor: pointer;
-  user-select: none;
-  color: #e0e0e0;
-}
-
-.option:hover {
-  background-color: #2a2a2a;
-}
-
-.option[data-active] {
-  background-color: #2d4a6e;
-  color: #ffffff;
-}
-
-.option[aria-selected='true'] {
-  background-color: #4a9eff;
-  color: #000000;
-}
-
-.info {
-  margin: 20px;
-  padding: 16px;
-  background-color: #1f1f1f;
-  border-radius: 4px;
-  border-left: 4px solid #4a9eff;
-  color: #e0e0e0;
-}
-
-.info p {
-  margin: 8px 0;
-}
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.css b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.css
deleted file mode 100644
index c7aee9916952..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.css
+++ /dev/null
@@ -1,101 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: var(--quaternary-contrast);
-}
-
-[ngComboboxInput] {
-  width: 13rem;
-  font-size: 1rem;
-  border-radius: 0.25rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: var(--primary-contrast);
-  outline-color: var(--hot-pink);
-  border: 1px solid var(--quinary-contrast);
-  background-color: var(--page-background);
-}
-
-[ngComboboxInput]::placeholder {
-  color: var(--quaternary-contrast);
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 8px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
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
deleted file mode 100644
index 583ced285ed4..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.css b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.css
deleted file mode 100644
index c41ab594e7f3..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.css
+++ /dev/null
@@ -1,108 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-}
-
-.material-autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: var(--quaternary-contrast);
-}
-
-[ngComboboxInput] {
-  width: 13rem;
-  font-size: 1rem;
-  border-radius: 3rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: var(--primary-contrast);
-  outline-color: var(--primary);
-  border: 1px solid var(--quinary-contrast);
-  background-color: var(--page-background);
-}
-
-[ngComboboxInput]::placeholder {
-  color: var(--quaternary-contrast);
-}
-
-[ngCombobox]:focus-within [ngComboboxInput] {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 8px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
\ No newline at end of file
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
deleted file mode 100644
index 0f2b696936a7..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css
deleted file mode 100644
index 300e0178fdcd..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css
+++ /dev/null
@@ -1,130 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.6rem;
-  font-family: 'Press Start 2P';
-
-  --retro-button-color: #fff;
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.retro-autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: #000;
-  z-index: 1;
-}
-
-[ngComboboxInput] {
-  width: 15rem;
-  font-size: 0.6rem;
-  border-radius: 0;
-  font-family: 'Press Start 2P';
-  word-spacing: -5px;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: #000;
-  border: none;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--retro-button-color);
-}
-
-[ngComboboxInput]::placeholder {
-  color: #000;
-  opacity: 0.7;
-}
-
-[ngComboboxInput]:focus {
-  outline: none;
-  transform: translate(1px, 1px);
-  box-shadow: var(--retro-pressed-shadow);
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 20px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 0;
-  background-color: var(--septenary-contrast);
-  box-shadow: var(--retro-flat-shadow);
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
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
deleted file mode 100644
index f3dac2851118..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.css b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.css
deleted file mode 100644
index c7aee9916952..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.css
+++ /dev/null
@@ -1,101 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: var(--quaternary-contrast);
-}
-
-[ngComboboxInput] {
-  width: 13rem;
-  font-size: 1rem;
-  border-radius: 0.25rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: var(--primary-contrast);
-  outline-color: var(--hot-pink);
-  border: 1px solid var(--quinary-contrast);
-  background-color: var(--page-background);
-}
-
-[ngComboboxInput]::placeholder {
-  color: var(--quaternary-contrast);
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 8px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
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
deleted file mode 100644
index 814e3ece9f4f..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.css b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.css
deleted file mode 100644
index c41ab594e7f3..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.css
+++ /dev/null
@@ -1,108 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-}
-
-.material-autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: var(--quaternary-contrast);
-}
-
-[ngComboboxInput] {
-  width: 13rem;
-  font-size: 1rem;
-  border-radius: 3rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: var(--primary-contrast);
-  outline-color: var(--primary);
-  border: 1px solid var(--quinary-contrast);
-  background-color: var(--page-background);
-}
-
-[ngComboboxInput]::placeholder {
-  color: var(--quaternary-contrast);
-}
-
-[ngCombobox]:focus-within [ngComboboxInput] {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 8px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
\ No newline at end of file
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
deleted file mode 100644
index 776d3676d95c..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.css b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.css
deleted file mode 100644
index 300e0178fdcd..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.css
+++ /dev/null
@@ -1,130 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.6rem;
-  font-family: 'Press Start 2P';
-
-  --retro-button-color: #fff;
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.retro-autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: #000;
-  z-index: 1;
-}
-
-[ngComboboxInput] {
-  width: 15rem;
-  font-size: 0.6rem;
-  border-radius: 0;
-  font-family: 'Press Start 2P';
-  word-spacing: -5px;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: #000;
-  border: none;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--retro-button-color);
-}
-
-[ngComboboxInput]::placeholder {
-  color: #000;
-  opacity: 0.7;
-}
-
-[ngComboboxInput]:focus {
-  outline: none;
-  transform: translate(1px, 1px);
-  box-shadow: var(--retro-pressed-shadow);
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 20px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 0;
-  background-color: var(--septenary-contrast);
-  box-shadow: var(--retro-flat-shadow);
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
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
deleted file mode 100644
index c3ad881c85bb..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.css b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.css
deleted file mode 100644
index c7aee9916952..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.css
+++ /dev/null
@@ -1,101 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: var(--quaternary-contrast);
-}
-
-[ngComboboxInput] {
-  width: 13rem;
-  font-size: 1rem;
-  border-radius: 0.25rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: var(--primary-contrast);
-  outline-color: var(--hot-pink);
-  border: 1px solid var(--quinary-contrast);
-  background-color: var(--page-background);
-}
-
-[ngComboboxInput]::placeholder {
-  color: var(--quaternary-contrast);
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 8px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
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
deleted file mode 100644
index dd94d75f34cf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.css b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.css
deleted file mode 100644
index c41ab594e7f3..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.css
+++ /dev/null
@@ -1,108 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-}
-
-.material-autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: var(--quaternary-contrast);
-}
-
-[ngComboboxInput] {
-  width: 13rem;
-  font-size: 1rem;
-  border-radius: 3rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: var(--primary-contrast);
-  outline-color: var(--primary);
-  border: 1px solid var(--quinary-contrast);
-  background-color: var(--page-background);
-}
-
-[ngComboboxInput]::placeholder {
-  color: var(--quaternary-contrast);
-}
-
-[ngCombobox]:focus-within [ngComboboxInput] {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 8px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
\ No newline at end of file
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
deleted file mode 100644
index c0b9048f5e1a..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.css b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.css
deleted file mode 100644
index 300e0178fdcd..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.css
+++ /dev/null
@@ -1,130 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.6rem;
-  font-family: 'Press Start 2P';
-
-  --retro-button-color: #fff;
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.retro-autocomplete {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.material-symbols-outlined {
-  font-size: 1.25rem;
-  pointer-events: none;
-}
-
-.search-icon {
-  left: 0.75rem;
-  position: absolute;
-  color: #000;
-  z-index: 1;
-}
-
-[ngComboboxInput] {
-  width: 15rem;
-  font-size: 0.6rem;
-  border-radius: 0;
-  font-family: 'Press Start 2P';
-  word-spacing: -5px;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: #000;
-  border: none;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--retro-button-color);
-}
-
-[ngComboboxInput]::placeholder {
-  color: #000;
-  opacity: 0.7;
-}
-
-[ngComboboxInput]:focus {
-  outline: none;
-  transform: translate(1px, 1px);
-  box-shadow: var(--retro-pressed-shadow);
-}
-
-[ngCombobox]:has([aria-expanded='false']) .popup {
-  display: none;
-}
-
-.popup {
-  width: 100%;
-  margin-top: 20px;
-  padding: 0.5rem;
-  max-height: 11rem;
-  border-radius: 0;
-  background-color: var(--septenary-contrast);
-  box-shadow: var(--retro-flat-shadow);
-}
-
-.no-results {
-  padding: 1rem;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
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
deleted file mode 100644
index 3b387d4c955a..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div 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
-    />
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="popup">
-        @if (countries().length === 0) {
-          <div class="no-results">No results found</div>
-        }
-
-        <div ngListbox>
-          @for (country of countries(); track country) {
-            <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{ country }}</span>
-              <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 135575be95bf..000000000000
--- a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
-import {Listbox, Option} from '@angular/aria/listbox';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {
-  afterRenderEffect,
-  Component,
-  computed,
-  signal,
-  viewChild,
-  viewChildren,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.html',
-  styleUrl: 'app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-    FormsModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The query string used to filter the list of countries. */
-  query = signal('');
-
-  /** The list of countries filtered by the query. */
-  countries = computed(() =>
-    ALL_COUNTRIES.filter((country) => country.toLowerCase().startsWith(this.query().toLowerCase())),
-  );
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/combobox/src/auto-select/app/app.css b/adev/src/content/examples/aria/combobox/src/auto-select/app/app.css
deleted file mode 100644
index bc6e9c409adb..000000000000
--- a/adev/src/content/examples/aria/combobox/src/auto-select/app/app.css
+++ /dev/null
@@ -1,9 +0,0 @@
-h1 {
-  background: #1e1e1e;
-  color: #e0e0e0;
-  padding: 2rem;
-  margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 2rem;
-  text-align: center;
-}
diff --git a/adev/src/content/examples/aria/combobox/src/auto-select/app/app.html b/adev/src/content/examples/aria/combobox/src/auto-select/app/app.html
deleted file mode 100644
index d39d7de603bc..000000000000
--- a/adev/src/content/examples/aria/combobox/src/auto-select/app/app.html
+++ /dev/null
@@ -1 +0,0 @@
-<h1>PLACEHOLDER</h1>
diff --git a/adev/src/content/examples/aria/combobox/src/auto-select/app/app.ts b/adev/src/content/examples/aria/combobox/src/auto-select/app/app.ts
deleted file mode 100644
index 183576f2c249..000000000000
--- a/adev/src/content/examples/aria/combobox/src/auto-select/app/app.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-})
-export class App {}
diff --git a/adev/src/content/examples/aria/combobox/src/basic/app/app.css b/adev/src/content/examples/aria/combobox/src/basic/app/app.css
deleted file mode 100644
index bc6e9c409adb..000000000000
--- a/adev/src/content/examples/aria/combobox/src/basic/app/app.css
+++ /dev/null
@@ -1,9 +0,0 @@
-h1 {
-  background: #1e1e1e;
-  color: #e0e0e0;
-  padding: 2rem;
-  margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 2rem;
-  text-align: center;
-}
diff --git a/adev/src/content/examples/aria/combobox/src/basic/app/app.html b/adev/src/content/examples/aria/combobox/src/basic/app/app.html
deleted file mode 100644
index d39d7de603bc..000000000000
--- a/adev/src/content/examples/aria/combobox/src/basic/app/app.html
+++ /dev/null
@@ -1 +0,0 @@
-<h1>PLACEHOLDER</h1>
diff --git a/adev/src/content/examples/aria/combobox/src/basic/app/app.ts b/adev/src/content/examples/aria/combobox/src/basic/app/app.ts
deleted file mode 100644
index 183576f2c249..000000000000
--- a/adev/src/content/examples/aria/combobox/src/basic/app/app.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-})
-export class App {}
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/app/app.css b/adev/src/content/examples/aria/combobox/src/dialog/app/app.css
deleted file mode 100644
index d2fb9cd08940..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/app/app.css
+++ /dev/null
@@ -1,175 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font, system-ui, sans-serif);
-  --border-color: color-mix(in srgb, var(--full-contrast, #000) 20%, var(--page-background, #fff));
-}
-
-[ngCombobox] {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--border-color);
-  border-radius: 0.25rem;
-}
-
-[ngCombobox]:has([readonly='true']) {
-  width: 15rem;
-}
-
-.combobox-input-container {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: 0.25rem;
-}
-
-[ngComboboxInput] {
-  border-radius: 0.25rem;
-}
-
-[ngComboboxInput][readonly='true'] {
-  cursor: pointer;
-  padding: 0.7rem 1rem;
-}
-
-[ngCombobox]:focus-within [ngComboboxInput] {
-  outline: none;
-  box-shadow: none;
-}
-
-.icon {
-  width: 24px;
-  height: 24px;
-  font-size: 20px;
-  display: grid;
-  place-items: center;
-  pointer-events: none;
-}
-
-.search-icon {
-  padding: 0 0.5rem;
-  position: absolute;
-  opacity: 0.8;
-}
-
-.arrow-icon {
-  padding: 0 0.5rem;
-  position: absolute;
-  right: 0;
-  opacity: 0.8;
-  transition: transform 0.2s ease;
-}
-
-[ngComboboxInput][aria-expanded='true'] + .arrow-icon {
-  transform: rotate(180deg);
-}
-
-[ngComboboxInput] {
-  width: 100%;
-  border: none;
-  outline: none;
-  font-size: 1rem;
-  padding: 0.7rem 1rem 0.7rem 2.5rem;
-  background-color: var(--septenary-contrast, #f5f5f5);
-  color: var(--primary-contrast, #1a1a1a);
-}
-
-.popover {
-  margin: 0;
-  padding: 0;
-  border: 1px solid var(--border-color);
-  border-radius: 0.25rem;
-  background-color: var(--septenary-contrast, #f5f5f5);
-}
-
-[ngListbox] {
-  gap: 2px;
-  max-height: 200px;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast, #1a1a1a) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--vivid-pink, #f542a4);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--vivid-pink, #f542a4);
-  background-color: color-mix(in srgb, var(--vivid-pink, #f542a4) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
-
-.dialog {
-  position: absolute;
-  left: auto;
-  right: auto;
-  top: auto;
-  bottom: auto;
-  padding: 0;
-  border: 1px solid var(--border-color);
-  border-radius: 0.25rem;
-  background-color: var(--septenary-contrast, #f5f5f5);
-  color: inherit;
-}
-
-.dialog .combobox-input-container {
-  border-radius: 0;
-}
-
-.dialog [ngCombobox],
-.dialog .combobox-input-container {
-  border: none;
-}
-
-.dialog [ngComboboxInput] {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-[ngCombobox]:focus-within [ngComboboxInput]:not(.combobox-input) {
-  outline: 1.5px solid var(--vivid-pink);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink) 25%, transparent);
-}
-
-.dialog .combobox-input-container {
-  border-bottom: 1px solid var(--border-color);
-}
-
-.dialog::backdrop {
-  opacity: 0;
-}
-
-.no-results {
-  padding: 1rem;
-}
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
deleted file mode 100644
index eb2994d38381..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/app/app.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ngCombobox #combobox="ngCombobox" [readonly]="true">
-  <div class="combobox-input-container">
-    <input ngComboboxInput 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">
-        <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"
-          />
-        </div>
-
-        <ng-template ngComboboxPopupContainer>
-          @if (options().length === 0) {
-            <div class="no-results">No results found</div>
-          }
-
-          <div ngListbox [(value)]="selectedCountries">
-            @for (option of options(); track option) {
-              <div ngOption [value]="option" [label]="option">
-                <span class="option-label">{{ option }}</span>
-                <span
-                  class="material-symbols-outlined icon check-icon"
-                  translate="no"
-                  aria-hidden="true"
-                  >check</span
-                >
-              </div>
-            }
-          </div>
-        </ng-template>
-      </div>
-    </dialog>
-  </ng-template>
-</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
deleted file mode 100644
index ca035fdf4cf0..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/app/app.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import {
-  Combobox,
-  ComboboxDialog,
-  ComboboxInput,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    ComboboxDialog,
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    FormsModule,
-  ],
-})
-export class App {
-  dialog = viewChild(ComboboxDialog);
-  listbox = viewChild<Listbox<string>>(Listbox);
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  value = signal('');
-  searchString = signal('');
-
-  options = computed(() =>
-    ALL_COUNTRIES.filter((country) =>
-      country.toLowerCase().startsWith(this.searchString().toLowerCase()),
-    ),
-  );
-
-  selectedCountries = signal<string[]>([]);
-
-  constructor() {
-    afterRenderEffect(() => {
-      if (this.dialog() && this.combobox()?.expanded()) {
-        untracked(() => this.listbox()?.gotoFirst());
-        this.positionDialog();
-      }
-    });
-
-    afterRenderEffect(() => {
-      if (this.selectedCountries().length > 0) {
-        untracked(() => this.dialog()?.close());
-        this.value.set(this.selectedCountries()[0]);
-        this.searchString.set('');
-      }
-    });
-
-    afterRenderEffect(() => this.listbox()?.scrollActiveItemIntoView());
-  }
-
-  // TODO(wagnermaciel): Switch to using the CDK for positioning.
-
-  positionDialog() {
-    const dialog = this.dialog()!;
-    const combobox = this.combobox()!;
-
-    const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
-
-    const scrollY = window.scrollY;
-
-    if (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`;
-    }
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.css b/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.css
deleted file mode 100644
index 8d5cb7d28645..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.css
+++ /dev/null
@@ -1,165 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font, system-ui, sans-serif);
-  --border-color: color-mix(in srgb, var(--full-contrast, #000) 20%, var(--page-background, #fff));
-  --primary: var(--vivid-pink, #f542a4);
-}
-
-[ngCombobox] {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-}
-
-[ngCombobox]:has([readonly='true']) {
-  width: 15rem;
-}
-
-.combobox-input-container {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: 1rem;
-}
-
-[ngComboboxInput] {
-  border-radius: 1rem;
-}
-
-[ngComboboxInput][readonly='true'] {
-  cursor: pointer;
-  padding: 0.7rem 1rem;
-}
-
-[ngCombobox]:focus-within [ngComboboxInput] {
-  outline: none;
-  box-shadow: none;
-}
-
-.icon {
-  width: 24px;
-  height: 24px;
-  font-size: 20px;
-  display: grid;
-  place-items: center;
-  pointer-events: none;
-}
-
-.search-icon {
-  padding: 0 0.5rem;
-  position: absolute;
-  opacity: 0.8;
-}
-
-.arrow-icon {
-  padding: 0 0.5rem;
-  position: absolute;
-  right: 0;
-  opacity: 0.8;
-  transition: transform 0.2s ease;
-}
-
-[ngComboboxInput][aria-expanded='true'] + .arrow-icon {
-  transform: rotate(180deg);
-}
-
-[ngComboboxInput] {
-  width: 100%;
-  border: none;
-  outline: none;
-  font-size: 1rem;
-  padding: 0.7rem 1rem 0.7rem 2.5rem;
-  background-color: var(--septenary-contrast, #f5f5f5);
-  color: var(--primary-contrast, #1a1a1a);
-}
-
-[ngListbox] {
-  gap: 2px;
-  max-height: 10rem;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 1rem;
-  min-height: 1rem;
-  border-radius: 1rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast, #1a1a1a) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .check-icon {
-  display: none;
-}
-
-.option-label {
-  flex: 1;
-}
-
-.check-icon {
-  font-size: 0.9rem;
-}
-
-.dialog {
-  padding: none;
-  position: absolute;
-  left: auto;
-  right: auto;
-  top: auto;
-  bottom: auto;
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  background-color: var(--septenary-contrast, #f5f5f5);
-  color: inherit;
-}
-
-.dialog .combobox-input-container {
-  border-radius: 0;
-}
-
-.dialog [ngCombobox],
-.dialog .combobox-input-container {
-  border: none;
-}
-
-.dialog [ngComboboxInput] {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-[ngCombobox]:focus-within [ngComboboxInput]:not(.combobox-input) {
-  outline: 1.5px solid var(--vivid-pink);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink) 25%, transparent);
-}
-
-.dialog::backdrop {
-  opacity: 0;
-}
-
-.no-results {
-  padding: 1rem;
-}
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
deleted file mode 100644
index fc47b3978f78..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ngCombobox #combobox="ngCombobox" [readonly]="true" class="material-combobox">
-  <div class="combobox-input-container">
-    <input ngComboboxInput 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">
-        <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"
-          />
-        </div>
-
-        <ng-template ngComboboxPopupContainer>
-          @if (options().length === 0) {
-            <div class="no-results">No results found</div>
-          }
-
-          <div ngListbox [(value)]="selectedCountries">
-            @for (option of options(); track option) {
-              <div ngOption [value]="option" [label]="option">
-                <span class="option-label">{{ option }}</span>
-                <span
-                  class="material-symbols-outlined icon check-icon"
-                  translate="no"
-                  aria-hidden="true"
-                  >check</span
-                >
-              </div>
-            }
-          </div>
-        </ng-template>
-      </div>
-    </dialog>
-  </ng-template>
-</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
deleted file mode 100644
index ca035fdf4cf0..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import {
-  Combobox,
-  ComboboxDialog,
-  ComboboxInput,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    ComboboxDialog,
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    FormsModule,
-  ],
-})
-export class App {
-  dialog = viewChild(ComboboxDialog);
-  listbox = viewChild<Listbox<string>>(Listbox);
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  value = signal('');
-  searchString = signal('');
-
-  options = computed(() =>
-    ALL_COUNTRIES.filter((country) =>
-      country.toLowerCase().startsWith(this.searchString().toLowerCase()),
-    ),
-  );
-
-  selectedCountries = signal<string[]>([]);
-
-  constructor() {
-    afterRenderEffect(() => {
-      if (this.dialog() && this.combobox()?.expanded()) {
-        untracked(() => this.listbox()?.gotoFirst());
-        this.positionDialog();
-      }
-    });
-
-    afterRenderEffect(() => {
-      if (this.selectedCountries().length > 0) {
-        untracked(() => this.dialog()?.close());
-        this.value.set(this.selectedCountries()[0]);
-        this.searchString.set('');
-      }
-    });
-
-    afterRenderEffect(() => this.listbox()?.scrollActiveItemIntoView());
-  }
-
-  // TODO(wagnermaciel): Switch to using the CDK for positioning.
-
-  positionDialog() {
-    const dialog = this.dialog()!;
-    const combobox = this.combobox()!;
-
-    const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
-
-    const scrollY = window.scrollY;
-
-    if (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`;
-    }
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.css b/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.css
deleted file mode 100644
index 7c744b428fa4..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.css
+++ /dev/null
@@ -1,188 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.6rem;
-  font-family: 'Press Start 2P';
-
-  --retro-button-color: #fff;
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-[ngComboboxInput] {
-  width: 15rem;
-  font-size: 0.6rem;
-  border-radius: 0;
-  font-family: 'Press Start 2P';
-  word-spacing: -5px;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
-  color: #000;
-  border: none;
-}
-
-[ngComboboxInput]::placeholder {
-  color: #000;
-  opacity: 0.7;
-}
-
-[ngCombobox]:has([readonly='true']) {
-  width: 15rem;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--retro-button-color);
-}
-
-.combobox-input-container {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-[ngComboboxInput][readonly='true'] {
-  cursor: pointer;
-  padding: 0.7rem 1rem;
-}
-
-[ngCombobox]:focus-within [ngComboboxInput] {
-  outline: none;
-  box-shadow: none;
-}
-
-.icon {
-  width: 24px;
-  height: 24px;
-  font-size: 20px;
-  display: grid;
-  place-items: center;
-  pointer-events: none;
-}
-
-.search-icon {
-  padding: 0 0.5rem;
-  position: absolute;
-  opacity: 0.8;
-  color: #000;
-}
-
-.arrow-icon {
-  padding: 0 0.5rem;
-  position: absolute;
-  right: 0;
-  opacity: 0.8;
-  transition: transform 0.2s ease;
-  color: #000;
-}
-
-[ngComboboxInput][aria-expanded='true'] + .arrow-icon {
-  transform: rotate(180deg);
-}
-
-[ngListbox] {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  max-height: 10rem;
-  padding: 0.5rem;
-  gap: 4px;
-  font-size: 0.9rem;
-}
-
-[ngOption] {
-  cursor: pointer;
-  padding: 0.3rem 1rem;
-  display: flex;
-  overflow: hidden;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  font-size: 0.6rem;
-}
-
-.checkbox-blank-icon,
-[ngOption][aria-selected='true'] .checkbox-filled-icon {
-  display: flex;
-  align-items: center;
-}
-
-.checkbox-filled-icon,
-[ngOption][aria-selected='true'] .checkbox-blank-icon {
-  display: none;
-}
-
-.checkbox-blank-icon {
-  opacity: 0.6;
-}
-
-.selected-icon {
-  visibility: hidden;
-}
-
-[ngOption][aria-selected='true'] .selected-icon {
-  visibility: visible;
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--vivid-pink, #f542a4);
-  background-color: color-mix(in srgb, var(--vivid-pink, #f542a4) 10%, transparent);
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--mat-sys-on-surface, #1a1a1a) 10%, transparent);
-}
-
-[ngCombobox]:focus-within [data-active='true'] {
-  outline: 2px dashed var(--vivid-pink, #f542a4);
-  outline-offset: -2px;
-}
-
-.dialog {
-  margin-top: 8px;
-  position: absolute;
-  left: auto;
-  right: auto;
-  top: auto;
-  bottom: auto;
-  padding: 0;
-  border: none;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--septenary-contrast, #f5f5f5);
-  color: inherit;
-}
-
-.dialog .combobox-input-container {
-  border-radius: 0;
-}
-
-.dialog [ngCombobox],
-.dialog .combobox-input-container {
-  border: none;
-}
-
-.dialog [ngComboboxInput] {
-  border-bottom: 4px solid var(--tertiary-contrast, #374151);
-}
-
-[ngCombobox]:focus-within [ngComboboxInput]:not(.combobox-input) {
-  outline: 1.5px solid var(--vivid-pink);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink) 25%, transparent);
-}
-
-.dialog::backdrop {
-  opacity: 0;
-}
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
deleted file mode 100644
index 093cca1382f1..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<div ngCombobox #combobox="ngCombobox" [readonly]="true" class="retro-combobox">
-  <div class="combobox-input-container">
-    <input ngComboboxInput 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">
-        <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"
-          />
-        </div>
-
-        <ng-template ngComboboxPopupContainer>
-          <div ngListbox [(value)]="selectedCountries">
-            @for (option of options(); track option) {
-              <div ngOption [value]="option" [label]="option">
-                <span>{{ option }}</span>
-                <span
-                  class="material-symbols-outlined icon selected-icon"
-                  translate="no"
-                  aria-hidden="true"
-                  >check</span
-                >
-              </div>
-            }
-          </div>
-        </ng-template>
-      </div>
-    </dialog>
-  </ng-template>
-</div>
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
deleted file mode 100644
index ca035fdf4cf0..000000000000
--- a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import {
-  Combobox,
-  ComboboxDialog,
-  ComboboxInput,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    ComboboxDialog,
-    Combobox,
-    ComboboxInput,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    FormsModule,
-  ],
-})
-export class App {
-  dialog = viewChild(ComboboxDialog);
-  listbox = viewChild<Listbox<string>>(Listbox);
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  value = signal('');
-  searchString = signal('');
-
-  options = computed(() =>
-    ALL_COUNTRIES.filter((country) =>
-      country.toLowerCase().startsWith(this.searchString().toLowerCase()),
-    ),
-  );
-
-  selectedCountries = signal<string[]>([]);
-
-  constructor() {
-    afterRenderEffect(() => {
-      if (this.dialog() && this.combobox()?.expanded()) {
-        untracked(() => this.listbox()?.gotoFirst());
-        this.positionDialog();
-      }
-    });
-
-    afterRenderEffect(() => {
-      if (this.selectedCountries().length > 0) {
-        untracked(() => this.dialog()?.close());
-        this.value.set(this.selectedCountries()[0]);
-        this.searchString.set('');
-      }
-    });
-
-    afterRenderEffect(() => this.listbox()?.scrollActiveItemIntoView());
-  }
-
-  // TODO(wagnermaciel): Switch to using the CDK for positioning.
-
-  positionDialog() {
-    const dialog = this.dialog()!;
-    const combobox = this.combobox()!;
-
-    const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
-
-    const scrollY = window.scrollY;
-
-    if (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`;
-    }
-  }
-}
-
-const ALL_COUNTRIES = [
-  'Afghanistan',
-  'Albania',
-  'Algeria',
-  'Andorra',
-  'Angola',
-  'Antigua and Barbuda',
-  'Argentina',
-  'Armenia',
-  'Australia',
-  'Austria',
-  'Azerbaijan',
-  'Bahamas',
-  'Bahrain',
-  'Bangladesh',
-  'Barbados',
-  'Belarus',
-  'Belgium',
-  'Belize',
-  'Benin',
-  'Bhutan',
-  'Bolivia',
-  'Bosnia and Herzegovina',
-  'Botswana',
-  'Brazil',
-  'Brunei',
-  'Bulgaria',
-  'Burkina Faso',
-  'Burundi',
-  'Cabo Verde',
-  'Cambodia',
-  'Cameroon',
-  'Canada',
-  'Central African Republic',
-  'Chad',
-  'Chile',
-  'China',
-  'Colombia',
-  'Comoros',
-  'Congo (Congo-Brazzaville)',
-  'Costa Rica',
-  "Côte d'Ivoire",
-  'Croatia',
-  'Cuba',
-  'Cyprus',
-  'Czechia (Czech Republic)',
-  'Democratic Republic of the Congo',
-  'Denmark',
-  'Djibouti',
-  'Dominica',
-  'Dominican Republic',
-  'Ecuador',
-  'Egypt',
-  'El Salvador',
-  'Equatorial Guinea',
-  'Eritrea',
-  'Estonia',
-  'Eswatini (fmr. ""Swaziland"")',
-  'Ethiopia',
-  'Fiji',
-  'Finland',
-  'France',
-  'Gabon',
-  'Gambia',
-  'Georgia',
-  'Germany',
-  'Ghana',
-  'Greece',
-  'Grenada',
-  'Guatemala',
-  'Guinea',
-  'Guinea-Bissau',
-  'Guyana',
-  'Haiti',
-  'Holy See',
-  'Honduras',
-  'Hungary',
-  'Iceland',
-  'India',
-  'Indonesia',
-  'Iran',
-  'Iraq',
-  'Ireland',
-  'Israel',
-  'Italy',
-  'Jamaica',
-  'Japan',
-  'Jordan',
-  'Kazakhstan',
-  'Kenya',
-  'Kiribati',
-  'Kuwait',
-  'Kyrgyzstan',
-  'Laos',
-  'Latvia',
-  'Lebanon',
-  'Lesotho',
-  'Liberia',
-  'Libya',
-  'Liechtenstein',
-  'Lithuania',
-  'Luxembourg',
-  'Madagascar',
-  'Malawi',
-  'Malaysia',
-  'Maldives',
-  'Mali',
-  'Malta',
-  'Marshall Islands',
-  'Mauritania',
-  'Mauritius',
-  'Mexico',
-  'Micronesia',
-  'Moldova',
-  'Monaco',
-  'Mongolia',
-  'Montenegro',
-  'Morocco',
-  'Mozambique',
-  'Myanmar (formerly Burma)',
-  'Namibia',
-  'Nauru',
-  'Nepal',
-  'Netherlands',
-  'New Zealand',
-  'Nicaragua',
-  'Niger',
-  'Nigeria',
-  'North Korea',
-  'North Macedonia',
-  'Norway',
-  'Oman',
-  'Pakistan',
-  'Palau',
-  'Palestine State',
-  'Panama',
-  'Papua New Guinea',
-  'Paraguay',
-  'Peru',
-  'Philippines',
-  'Poland',
-  'Portugal',
-  'Qatar',
-  'Romania',
-  'Russia',
-  'Rwanda',
-  'Saint Kitts and Nevis',
-  'Saint Lucia',
-  'Saint Vincent and the Grenadines',
-  'Samoa',
-  'San Marino',
-  'Sao Tome and Principe',
-  'Saudi Arabia',
-  'Senegal',
-  'Serbia',
-  'Seychelles',
-  'Sierra Leone',
-  'Singapore',
-  'Slovakia',
-  'Slovenia',
-  'Solomon Islands',
-  'Somalia',
-  'South Africa',
-  'South Korea',
-  'South Sudan',
-  'Spain',
-  'Sri Lanka',
-  'Sudan',
-  'Suriname',
-  'Sweden',
-  'Switzerland',
-  'Syria',
-  'Tajikistan',
-  'Tanzania',
-  'Thailand',
-  'Timor-Leste',
-  'Togo',
-  'Tonga',
-  'Trinidad and Tobago',
-  'Tunisia',
-  'Turkey',
-  'Turkmenistan',
-  'Tuvalu',
-  'Uganda',
-  'Ukraine',
-  'United Arab Emirates',
-  'United Kingdom',
-  'United States of America',
-  'Uruguay',
-  'Uzbekistan',
-  'Vanuatu',
-  'Venezuela',
-  'Vietnam',
-  'Yemen',
-  'Zambia',
-  'Zimbabwe',
-];
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/app/app.css b/adev/src/content/examples/aria/multiselect/src/basic/app/app.css
deleted file mode 100644
index 27fc9b1888bb..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/app/app.css
+++ /dev/null
@@ -1,133 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: color-mix(in srgb, var(--hot-pink) 90%, var(--primary-contrast));
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-  border-radius: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--hot-pink) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--hot-pink) 15%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 2.5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1.5rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index 189e09d3d9ef..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox multi>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 96d3efa57227..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/app/app.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select a label';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} + ${values.length - 1} more`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.css b/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.css
deleted file mode 100644
index d467e8068b10..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.css
+++ /dev/null
@@ -1,141 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-  --on-primary: var(--page-background);
-}
-
-.docs-light-mode {
-  --on-primary: #fff;
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: 3rem;
-  color: var(--on-primary);
-  background-color: var(--primary);
-  border: 1px solid color-mix(in srgb, var(--primary) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--primary) 90%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  border: none;
-  cursor: pointer;
-  height: 3rem;
-  padding: 0 2.5rem;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1.5rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 13rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  padding: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index 20d7fe0cb1c3..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox class="material-select" readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox multi>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 96d3efa57227..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select a label';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} + ${values.length - 1} more`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css
deleted file mode 100644
index d5065fa84dfa..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css
+++ /dev/null
@@ -1,172 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.8rem;
-
-  font-family: 'Press Start 2P';
-  --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-clickable-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 8px 8px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: var(--page-background);
-  background-color: var(--hot-pink);
-  box-shadow: var(--retro-clickable-shadow);
-}
-
-.select:hover,
-.select:focus-within {
-  transform: translate(1px, 1px);
-}
-
-.select:active {
-  transform: translate(4px, 4px);
-  box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-.select:has([ngComboboxInput][aria-expanded='false']):focus-within {
-  outline-offset: 8px;
-  outline: 4px dashed var(--hot-pink);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 20px;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--septenary-contrast);
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  font-size: 0.6rem;
-  min-height: 2.25rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index b24917977519..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox class="retro-select" readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox multi>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 96d3efa57227..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select a label';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} + ${values.length - 1} more`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/app/app.css b/adev/src/content/examples/aria/multiselect/src/icons/app/app.css
deleted file mode 100644
index 1b785164d6de..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/app/app.css
+++ /dev/null
@@ -1,143 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: color-mix(in srgb, var(--hot-pink) 90%, var(--primary-contrast));
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-  border-radius: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--hot-pink) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--hot-pink) 15%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 3.5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index d0b79deee2fd..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/app/app.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ngCombobox readonly>
-  <div #origin class="select">
-    <span class="combobox-label">
-      <span
-        class="selected-label-icon material-symbols-outlined"
-        translate="no"
-        aria-hidden="true"
-        >{{ displayIcon() }}</span
-      >
-      <span class="selected-label-text">{{ displayValue() }}</span>
-    </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox multi>
-          @for (label of labels; track label.value) {
-            <div ngOption [value]="label.value" [label]="label.value">
-              <span
-                class="example-option-icon material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >{{ label.icon }}</span
-              >
-              <span class="example-option-text">{{ label.value }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 1090b8700497..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/app/app.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The icon that is displayed in the combobox. */
-  displayIcon = computed(() => {
-    const values = this.listbox()?.value() || [];
-    const label = this.labels.find((label) => label.value === values[0]);
-    return label ? label.icon : '';
-  });
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select a label';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} + ${values.length - 1} more`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', icon: 'label'},
-    {value: 'Starred', icon: 'star'},
-    {value: 'Work', icon: 'work'},
-    {value: 'Personal', icon: 'person'},
-    {value: 'To Do', icon: 'checklist'},
-    {value: 'Later', icon: 'schedule'},
-    {value: 'Read', icon: 'menu_book'},
-    {value: 'Travel', icon: 'flight'},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.css b/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.css
deleted file mode 100644
index 447c6e829b71..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.css
+++ /dev/null
@@ -1,151 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-  --on-primary: var(--page-background);
-}
-
-.docs-light-mode {
-  --on-primary: #fff;
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: 3rem;
-  color: var(--on-primary);
-  background-color: var(--primary);
-  border: 1px solid color-mix(in srgb, var(--primary) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--primary) 90%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  border: none;
-  cursor: pointer;
-  height: 3rem;
-  padding: 0 3.5rem;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 13rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  padding: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index 01c6162c98c1..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ngCombobox class="material-select" readonly>
-  <div #origin class="select">
-    <span class="combobox-label">
-      <span
-        class="selected-label-icon material-symbols-outlined"
-        translate="no"
-        aria-hidden="true"
-        >{{ displayIcon() }}</span
-      >
-      <span class="selected-label-text">{{ displayValue() }}</span>
-    </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox multi>
-          @for (label of labels; track label.value) {
-            <div ngOption [value]="label.value" [label]="label.value">
-              <span
-                class="example-option-icon material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >{{ label.icon }}</span
-              >
-              <span class="example-option-text">{{ label.value }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 1090b8700497..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The icon that is displayed in the combobox. */
-  displayIcon = computed(() => {
-    const values = this.listbox()?.value() || [];
-    const label = this.labels.find((label) => label.value === values[0]);
-    return label ? label.icon : '';
-  });
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select a label';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} + ${values.length - 1} more`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', icon: 'label'},
-    {value: 'Starred', icon: 'star'},
-    {value: 'Work', icon: 'work'},
-    {value: 'Personal', icon: 'person'},
-    {value: 'To Do', icon: 'checklist'},
-    {value: 'Later', icon: 'schedule'},
-    {value: 'Read', icon: 'menu_book'},
-    {value: 'Travel', icon: 'flight'},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css
deleted file mode 100644
index db95d3c14c13..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css
+++ /dev/null
@@ -1,172 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.8rem;
-
-  font-family: 'Press Start 2P';
-  --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-clickable-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 8px 8px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: var(--page-background);
-  background-color: var(--hot-pink);
-  box-shadow: var(--retro-clickable-shadow);
-}
-
-.select:hover,
-.select:focus-within {
-  transform: translate(1px, 1px);
-}
-
-.select:active {
-  transform: translate(4px, 4px);
-  box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 6rem;
-  height: 2.5rem;
-  border: none;
-}
-
-.select:has([ngComboboxInput][aria-expanded='false']):focus-within {
-  outline-offset: 8px;
-  outline: 4px dashed var(--hot-pink);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 20px;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--septenary-contrast);
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  font-size: 0.6rem;
-  min-height: 2.25rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index b1e4b18c32a6..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ngCombobox class="retro-select" readonly>
-  <div #origin class="select">
-    <span class="combobox-label">
-      <span
-        class="selected-label-icon material-symbols-outlined"
-        translate="no"
-        aria-hidden="true"
-        >{{ displayIcon() }}</span
-      >
-      <span class="selected-label-text">{{ displayValue() }}</span>
-    </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox multi>
-          @for (label of labels; track label.value) {
-            <div ngOption [value]="label.value" [label]="label.value">
-              <span
-                class="example-option-icon material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >{{ label.icon }}</span
-              >
-              <span class="example-option-text">{{ label.value }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 1090b8700497..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The icon that is displayed in the combobox. */
-  displayIcon = computed(() => {
-    const values = this.listbox()?.value() || [];
-    const label = this.labels.find((label) => label.value === values[0]);
-    return label ? label.icon : '';
-  });
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select a label';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} + ${values.length - 1} more`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', icon: 'label'},
-    {value: 'Starred', icon: 'star'},
-    {value: 'Work', icon: 'work'},
-    {value: 'Personal', icon: 'person'},
-    {value: 'To Do', icon: 'checklist'},
-    {value: 'Later', icon: 'schedule'},
-    {value: 'Read', icon: 'menu_book'},
-    {value: 'Travel', icon: 'flight'},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/app/app.css b/adev/src/content/examples/aria/multiselect/src/limited/app/app.css
deleted file mode 100644
index 862d37e5b2e1..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/app/app.css
+++ /dev/null
@@ -1,142 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: color-mix(in srgb, var(--hot-pink) 90%, var(--primary-contrast));
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-  border-radius: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--hot-pink) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--hot-pink) 15%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 2.5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1.5rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-[ngOption][aria-disabled='true'] {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngOption][aria-disabled='true']:hover {
-  background-color: transparent;
-}
-
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index 1e446f9aeb35..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div 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>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 1f1dfeac7730..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/app/app.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select 2 labels';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} & ${values[1]}`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', disabled: computed(() => this.isOptionDisabled('Important'))},
-    {value: 'Starred', disabled: computed(() => this.isOptionDisabled('Starred'))},
-    {value: 'Work', disabled: computed(() => this.isOptionDisabled('Work'))},
-    {value: 'Personal', disabled: computed(() => this.isOptionDisabled('Personal'))},
-    {value: 'To Do', disabled: computed(() => this.isOptionDisabled('To Do'))},
-    {value: 'Later', disabled: computed(() => this.isOptionDisabled('Later'))},
-    {value: 'Read', disabled: computed(() => this.isOptionDisabled('Read'))},
-    {value: 'Travel', disabled: computed(() => this.isOptionDisabled('Travel'))},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-
-  isOptionDisabled(value: string) {
-    const values = this.listbox()?.value();
-
-    if (!values || values.length < 2) {
-      return false;
-    }
-
-    return !values.includes(value);
-  }
-}
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.css b/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.css
deleted file mode 100644
index 8f0d24db6702..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.css
+++ /dev/null
@@ -1,150 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-  --on-primary: var(--page-background);
-}
-
-.docs-light-mode {
-  --on-primary: #fff;
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: 3rem;
-  color: var(--on-primary);
-  background-color: var(--primary);
-  border: 1px solid color-mix(in srgb, var(--primary) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--primary) 90%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  border: none;
-  cursor: pointer;
-  height: 3rem;
-  padding: 0 2.5rem;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1.5rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 13rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  padding: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-[ngOption][aria-disabled='true'] {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngOption][aria-disabled='true']:hover {
-  background-color: transparent;
-}
-
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index 98280b61b85a..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox class="material-select" readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div 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>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 1f1dfeac7730..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select 2 labels';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} & ${values[1]}`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', disabled: computed(() => this.isOptionDisabled('Important'))},
-    {value: 'Starred', disabled: computed(() => this.isOptionDisabled('Starred'))},
-    {value: 'Work', disabled: computed(() => this.isOptionDisabled('Work'))},
-    {value: 'Personal', disabled: computed(() => this.isOptionDisabled('Personal'))},
-    {value: 'To Do', disabled: computed(() => this.isOptionDisabled('To Do'))},
-    {value: 'Later', disabled: computed(() => this.isOptionDisabled('Later'))},
-    {value: 'Read', disabled: computed(() => this.isOptionDisabled('Read'))},
-    {value: 'Travel', disabled: computed(() => this.isOptionDisabled('Travel'))},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-
-  isOptionDisabled(value: string) {
-    const values = this.listbox()?.value();
-
-    if (!values || values.length < 2) {
-      return false;
-    }
-
-    return !values.includes(value);
-  }
-}
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css
deleted file mode 100644
index 401ece6a51e4..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css
+++ /dev/null
@@ -1,181 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.8rem;
-
-  font-family: 'Press Start 2P';
-  --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-clickable-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 8px 8px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: var(--page-background);
-  background-color: var(--hot-pink);
-  box-shadow: var(--retro-clickable-shadow);
-}
-
-.select:hover,
-.select:focus-within {
-  transform: translate(1px, 1px);
-}
-
-.select:active {
-  transform: translate(4px, 4px);
-  box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-.select:has([ngComboboxInput][aria-expanded='false']):focus-within {
-  outline-offset: 8px;
-  outline: 4px dashed var(--hot-pink);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 20px;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--septenary-contrast);
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  font-size: 0.6rem;
-  min-height: 2.25rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-[ngOption][aria-disabled='true'] {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngOption][aria-disabled='true']:hover {
-  background-color: transparent;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index 5466a0c1956e..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox class="retro-select" readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div 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>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 1f1dfeac7730..000000000000
--- a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    if (values.length === 0) {
-      return 'Select 2 labels';
-    }
-    if (values.length === 1) {
-      return values[0];
-    }
-    return `${values[0]} & ${values[1]}`;
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', disabled: computed(() => this.isOptionDisabled('Important'))},
-    {value: 'Starred', disabled: computed(() => this.isOptionDisabled('Starred'))},
-    {value: 'Work', disabled: computed(() => this.isOptionDisabled('Work'))},
-    {value: 'Personal', disabled: computed(() => this.isOptionDisabled('Personal'))},
-    {value: 'To Do', disabled: computed(() => this.isOptionDisabled('To Do'))},
-    {value: 'Later', disabled: computed(() => this.isOptionDisabled('Later'))},
-    {value: 'Read', disabled: computed(() => this.isOptionDisabled('Read'))},
-    {value: 'Travel', disabled: computed(() => this.isOptionDisabled('Travel'))},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-
-  isOptionDisabled(value: string) {
-    const values = this.listbox()?.value();
-
-    if (!values || values.length < 2) {
-      return false;
-    }
-
-    return !values.includes(value);
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/basic/app/app.css b/adev/src/content/examples/aria/select/src/basic/app/app.css
deleted file mode 100644
index a6b6fba421fa..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/app/app.css
+++ /dev/null
@@ -1,133 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: color-mix(in srgb, var(--hot-pink) 90%, var(--primary-contrast));
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-  border-radius: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--hot-pink) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--hot-pink) 15%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 1.5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1.5rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index c210f87afb30..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 0fa10f839850..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/app/app.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/basic/material/app/app.css b/adev/src/content/examples/aria/select/src/basic/material/app/app.css
deleted file mode 100644
index 6439b778c88a..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/material/app/app.css
+++ /dev/null
@@ -1,141 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-  --on-primary: var(--page-background);
-}
-
-.docs-light-mode {
-  --on-primary: #fff;
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: 3rem;
-  color: var(--on-primary);
-  background-color: var(--primary);
-  border: 1px solid color-mix(in srgb, var(--primary) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--primary) 90%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  border: none;
-  cursor: pointer;
-  height: 3rem;
-  padding: 0 1.5rem;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1.5rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 13rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  padding: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index 654cbaf55358..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/material/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox class="material-select" readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 0fa10f839850..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/material/app/app.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/basic/retro/app/app.css b/adev/src/content/examples/aria/select/src/basic/retro/app/app.css
deleted file mode 100644
index b6534a06d4fd..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/retro/app/app.css
+++ /dev/null
@@ -1,172 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.8rem;
-
-  font-family: 'Press Start 2P';
-  --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-clickable-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 8px 8px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: var(--page-background);
-  background-color: var(--hot-pink);
-  box-shadow: var(--retro-clickable-shadow);
-}
-
-.select:hover,
-.select:focus-within {
-  transform: translate(1px, 1px);
-}
-
-.select:active {
-  transform: translate(4px, 4px);
-  box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 3.5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-.select:has([ngComboboxInput][aria-expanded='false']):focus-within {
-  outline-offset: 8px;
-  outline: 4px dashed var(--hot-pink);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 20px;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--septenary-contrast);
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  font-size: 0.6rem;
-  min-height: 2.25rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index b6e6aaba4c72..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/retro/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox class="retro-select" readonly>
-  <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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 0fa10f839850..000000000000
--- a/adev/src/content/examples/aria/select/src/basic/retro/app/app.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/disabled/app/app.css b/adev/src/content/examples/aria/select/src/disabled/app/app.css
deleted file mode 100644
index 7864bf49303f..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/app/app.css
+++ /dev/null
@@ -1,132 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: color-mix(in srgb, var(--hot-pink) 90%, var(--primary-contrast));
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-  border-radius: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--hot-pink) 80%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 1.5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-[ngComboboxInput][aria-disabled='true'] {
-  cursor: default;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1.5rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index fcb529285adc..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox readonly 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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 0fa10f839850..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/app/app.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/disabled/material/app/app.css b/adev/src/content/examples/aria/select/src/disabled/material/app/app.css
deleted file mode 100644
index 4a3b4e2d23b8..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/material/app/app.css
+++ /dev/null
@@ -1,140 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-  --on-primary: var(--page-background);
-}
-
-.docs-light-mode {
-  --on-primary: #fff;
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: 3rem;
-  color: var(--on-primary);
-  background-color: var(--primary);
-  border: 1px solid color-mix(in srgb, var(--primary) 80%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  border: none;
-  cursor: pointer;
-  height: 3rem;
-  padding: 0 1.5rem;
-}
-
-[ngComboboxInput][aria-disabled='true'] {
-  cursor: default;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1.5rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 13rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  padding: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index 9f9a3007e5af..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/material/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox class="material-select" readonly 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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 0fa10f839850..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/material/app/app.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css
deleted file mode 100644
index abece90832da..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css
+++ /dev/null
@@ -1,164 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.8rem;
-
-  font-family: 'Press Start 2P';
-  --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-clickable-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 8px 8px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: var(--page-background);
-  background-color: var(--hot-pink);
-  box-shadow: var(--retro-clickable-shadow);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 3.5rem;
-  height: 2.5rem;
-  border: none;
-}
-
-[ngComboboxInput][aria-disabled='true'] {
-  cursor: default;
-}
-
-.select:has([ngComboboxInput][aria-expanded='false']):focus-within {
-  outline-offset: 8px;
-  outline: 4px dashed var(--hot-pink);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 20px;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--septenary-contrast);
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  font-size: 0.6rem;
-  min-height: 2.25rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index ab6d36df9cae..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div ngCombobox class="retro-select" readonly 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 />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label) {
-            <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{ label }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 0fa10f839850..000000000000
--- a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = ['Important', 'Starred', 'Work', 'Personal', 'To Do', 'Later', 'Read', 'Travel'];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/icons/app/app.css b/adev/src/content/examples/aria/select/src/icons/app/app.css
deleted file mode 100644
index 660e31d4553b..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/app/app.css
+++ /dev/null
@@ -1,143 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: color-mix(in srgb, var(--hot-pink) 90%, var(--primary-contrast));
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-  border-radius: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--hot-pink) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--hot-pink) 15%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 3rem;
-  height: 2.5rem;
-  border: none;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 0.5rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  margin: 1px;
-  padding: 0 1rem;
-  min-height: 2.25rem;
-  border-radius: 0.5rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid color-mix(in srgb, var(--hot-pink) 50%, transparent);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index dbdfc53444fa..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/app/app.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ngCombobox readonly>
-  <div #origin class="select">
-    <span class="combobox-label">
-      <span
-        class="selected-label-icon material-symbols-outlined"
-        translate="no"
-        aria-hidden="true"
-        >{{ displayIcon() }}</span
-      >
-      <span class="selected-label-text">{{ displayValue() }}</span>
-    </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label.value) {
-            <div ngOption [value]="label.value" [label]="label.value">
-              <span
-                class="example-option-icon material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >{{ label.icon }}</span
-              >
-              <span class="example-option-text">{{ label.value }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 67f25b45bbb2..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/app/app.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The icon that is displayed in the combobox. */
-  displayIcon = computed(() => {
-    const values = this.listbox()?.value() || [];
-    const label = this.labels.find((label) => label.value === values[0]);
-    return label ? label.icon : '';
-  });
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', icon: 'label'},
-    {value: 'Starred', icon: 'star'},
-    {value: 'Work', icon: 'work'},
-    {value: 'Personal', icon: 'person'},
-    {value: 'To Do', icon: 'checklist'},
-    {value: 'Later', icon: 'schedule'},
-    {value: 'Read', icon: 'menu_book'},
-    {value: 'Travel', icon: 'flight'},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/icons/material/app/app.css b/adev/src/content/examples/aria/select/src/icons/material/app/app.css
deleted file mode 100644
index 55ee304a9c8e..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/material/app/app.css
+++ /dev/null
@@ -1,151 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-family: var(--inter-font);
-  --primary: var(--hot-pink);
-  --on-primary: var(--page-background);
-}
-
-.docs-light-mode {
-  --on-primary: #fff;
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: 3rem;
-  color: var(--on-primary);
-  background-color: var(--primary);
-  border: 1px solid color-mix(in srgb, var(--primary) 80%, transparent);
-}
-
-.select:hover {
-  background-color: color-mix(in srgb, var(--primary) 90%, transparent);
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  border: none;
-  cursor: pointer;
-  height: 3rem;
-  padding: 0 3rem;
-}
-
-[ngCombobox]:focus-within .select {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 8px;
-  border-radius: 2rem;
-  background-color: var(--septenary-contrast);
-  font-size: 0.9rem;
-
-  max-height: 13rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  padding: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  min-height: 3rem;
-  border-radius: 3rem;
-}
-
-[ngOption]:hover,
-[ngOption][data-active='true'] {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px solid var(--primary);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--primary);
-  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index a65655204670..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/material/app/app.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ngCombobox class="material-select" readonly>
-  <div #origin class="select">
-    <span class="combobox-label">
-      <span
-        class="selected-label-icon material-symbols-outlined"
-        translate="no"
-        aria-hidden="true"
-        >{{ displayIcon() }}</span
-      >
-      <span class="selected-label-text">{{ displayValue() }}</span>
-    </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label.value) {
-            <div ngOption [value]="label.value" [label]="label.value">
-              <span
-                class="example-option-icon material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >{{ label.icon }}</span
-              >
-              <span class="example-option-text">{{ label.value }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 67f25b45bbb2..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/material/app/app.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The icon that is displayed in the combobox. */
-  displayIcon = computed(() => {
-    const values = this.listbox()?.value() || [];
-    const label = this.labels.find((label) => label.value === values[0]);
-    return label ? label.icon : '';
-  });
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', icon: 'label'},
-    {value: 'Starred', icon: 'star'},
-    {value: 'Work', icon: 'work'},
-    {value: 'Personal', icon: 'person'},
-    {value: 'To Do', icon: 'checklist'},
-    {value: 'Later', icon: 'schedule'},
-    {value: 'Read', icon: 'menu_book'},
-    {value: 'Travel', icon: 'flight'},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/examples/aria/select/src/icons/retro/app/app.css b/adev/src/content/examples/aria/select/src/icons/retro/app/app.css
deleted file mode 100644
index 843cb304db5b..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/retro/app/app.css
+++ /dev/null
@@ -1,172 +0,0 @@
-@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
-
-:host {
-  display: flex;
-  justify-content: center;
-  font-size: 0.8rem;
-
-  font-family: 'Press Start 2P';
-  --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
-  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
-  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
-  --retro-elevated-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-flat-shadow:
-    4px 0px 0px 0px var(--tertiary-contrast), 0px 4px 0px 0px var(--tertiary-contrast),
-    -4px 0px 0px 0px var(--tertiary-contrast), 0px -4px 0px 0px var(--tertiary-contrast);
-  --retro-clickable-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-light),
-    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 8px 8px 0px 0px var(--tertiary-contrast);
-  --retro-pressed-shadow:
-    inset 4px 4px 0px 0px var(--retro-shadow-dark),
-    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--tertiary-contrast),
-    0px 4px 0px 0px var(--tertiary-contrast), -4px 0px 0px 0px var(--tertiary-contrast),
-    0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
-}
-
-.select {
-  display: flex;
-  position: relative;
-  align-items: center;
-  color: var(--page-background);
-  background-color: var(--hot-pink);
-  box-shadow: var(--retro-clickable-shadow);
-}
-
-.select:hover,
-.select:focus-within {
-  transform: translate(1px, 1px);
-}
-
-.select:active {
-  transform: translate(4px, 4px);
-  box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
-}
-
-.select:has([ngComboboxInput][aria-disabled='true']) {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.selected-label-icon {
-  font-size: 1.25rem;
-}
-
-[ngComboboxInput] {
-  opacity: 0;
-  cursor: pointer;
-  padding: 0 4rem;
-  height: 2.5rem;
-  border: none;
-}
-
-.select:has([ngComboboxInput][aria-expanded='false']):focus-within {
-  outline-offset: 8px;
-  outline: 4px dashed var(--hot-pink);
-}
-
-.combobox-label {
-  gap: 1rem;
-  left: 1rem;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  pointer-events: none;
-}
-
-.example-arrow {
-  right: 1rem;
-  position: absolute;
-  pointer-events: none;
-  transition: transform 150ms ease-in-out;
-}
-
-[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
-  transform: rotate(180deg);
-}
-
-.example-popup-container {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 20px;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--septenary-contrast);
-
-  max-height: 11rem;
-  opacity: 1;
-  visibility: visible;
-  transition:
-    max-height 150ms ease-out,
-    visibility 0s,
-    opacity 25ms ease-out;
-}
-
-[ngListbox] {
-  gap: 2px;
-  height: 100%;
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
-  max-height: 0;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    max-height 150ms ease-in,
-    visibility 0s 150ms,
-    opacity 150ms ease-in;
-}
-
-[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
-  display: flex;
-}
-
-[ngOption] {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  padding: 0 1rem;
-  font-size: 0.6rem;
-  min-height: 2.25rem;
-}
-
-[ngOption]:hover {
-  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
-}
-
-[ngOption][data-active='true'] {
-  outline-offset: -2px;
-  outline: 2px dashed var(--hot-pink);
-}
-
-[ngOption][aria-selected='true'] {
-  color: var(--hot-pink);
-  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
-}
-
-.example-option-icon {
-  font-size: 1.25rem;
-  padding-right: 1rem;
-}
-
-[ngOption]:not([aria-selected='true']) .example-option-check {
-  display: none;
-}
-
-.example-option-icon,
-.example-option-check {
-  font-size: 0.9rem;
-}
-
-.example-option-text {
-  flex: 1;
-}
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
deleted file mode 100644
index bf0533149646..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/retro/app/app.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ngCombobox class="retro-select" readonly>
-  <div #origin class="select">
-    <span class="combobox-label">
-      <span
-        class="selected-label-icon material-symbols-outlined"
-        translate="no"
-        aria-hidden="true"
-        >{{ displayIcon() }}</span
-      >
-      <span class="selected-label-text">{{ displayValue() }}</span>
-    </span>
-    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
-    <span class="example-arrow material-symbols-outlined" translate="no" aria-hidden="true"
-      >arrow_drop_down</span
-    >
-  </div>
-
-  <ng-template ngComboboxPopupContainer>
-    <ng-template
-      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-      [cdkConnectedOverlayOpen]="true"
-    >
-      <div class="example-popup-container">
-        <div ngListbox>
-          @for (label of labels; track label.value) {
-            <div ngOption [value]="label.value" [label]="label.value">
-              <span
-                class="example-option-icon material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >{{ label.icon }}</span
-              >
-              <span class="example-option-text">{{ label.value }}</span>
-              <span
-                class="example-option-check material-symbols-outlined"
-                translate="no"
-                aria-hidden="true"
-                >check</span
-              >
-            </div>
-          }
-        </div>
-      </div>
-    </ng-template>
-  </ng-template>
-</div>
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
deleted file mode 100644
index 67f25b45bbb2..000000000000
--- a/adev/src/content/examples/aria/select/src/icons/retro/app/app.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopup,
-  ComboboxPopupContainer,
-} 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';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css',
-  imports: [
-    Combobox,
-    ComboboxInput,
-    ComboboxPopup,
-    ComboboxPopupContainer,
-    Listbox,
-    Option,
-    OverlayModule,
-  ],
-})
-export class App {
-  /** The combobox listbox popup. */
-  listbox = viewChild<Listbox<string>>(Listbox);
-
-  /** The options available in the listbox. */
-  options = viewChildren<Option<string>>(Option);
-
-  /** A reference to the ng aria combobox. */
-  combobox = viewChild<Combobox<string>>(Combobox);
-
-  /** The icon that is displayed in the combobox. */
-  displayIcon = computed(() => {
-    const values = this.listbox()?.value() || [];
-    const label = this.labels.find((label) => label.value === values[0]);
-    return label ? label.icon : '';
-  });
-
-  /** The string that is displayed in the combobox. */
-  displayValue = computed(() => {
-    const values = this.listbox()?.value() || [];
-    return values.length ? values[0] : 'Select a label';
-  });
-
-  /** The labels that are available for selection. */
-  labels = [
-    {value: 'Important', icon: 'label'},
-    {value: 'Starred', icon: 'star'},
-    {value: 'Work', icon: 'work'},
-    {value: 'Personal', icon: 'person'},
-    {value: 'To Do', icon: 'checklist'},
-    {value: 'Later', icon: 'schedule'},
-    {value: 'Read', icon: 'menu_book'},
-    {value: 'Travel', icon: 'flight'},
-  ];
-
-  constructor() {
-    // Scrolls to the active item when the active option changes.
-    // The slight delay here is to ensure animations are done before scrolling.
-    afterRenderEffect(() => {
-      const option = this.options().find((opt) => opt.active());
-      setTimeout(() => option?.element.scrollIntoView({block: 'nearest'}), 50);
-    });
-
-    // Resets the listbox scroll position when the combobox is closed.
-    afterRenderEffect(() => {
-      if (!this.combobox()?.expanded()) {
-        setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
-      }
-    });
-  }
-}
diff --git a/adev/src/content/guide/aria/autocomplete.md b/adev/src/content/guide/aria/autocomplete.md
index 73f2ab7a445c..8646256a97db 100644
--- a/adev/src/content/guide/aria/autocomplete.md
+++ b/adev/src/content/guide/aria/autocomplete.md
@@ -5,7 +5,7 @@
 
 An accessible input field that filters and suggests options as users type, helping them find and select values from a list.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts"/>
@@ -29,7 +29,7 @@ An accessible input field that filters and suggests options as users type, helpi
       <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 ## Usage
 
@@ -63,7 +63,7 @@ Angular's autocomplete provides a fully accessible combobox implementation with:
 
 Users typing partial text expect immediate confirmation that their input matches an available option. Auto-select mode updates the input value to match the first filtered option as users type, reducing the number of keystrokes needed and providing instant feedback that their search is on the right track.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts"/>
@@ -87,13 +87,13 @@ Users typing partial text expect immediate confirmation that their input matches
       <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 ### Manual selection mode
 
 Manual selection mode keeps the typed text unchanged while users navigate the suggestion list, preventing confusion from automatic updates. The input only changes when users explicitly confirm their choice with Enter or a click.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts"/>
@@ -117,13 +117,13 @@ Manual selection mode keeps the typed text unchanged while users navigate the su
       <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 ### Highlight mode
 
 Highlight mode allows the user to navigate options with arrow keys without changing the input value as they browse until they explicitly select a new option with Enter or click.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts"/>
@@ -147,7 +147,7 @@ Highlight mode allows the user to navigate options with arrow keys without chang
       <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 ## APIs
 
diff --git a/adev/src/content/guide/aria/combobox.md b/adev/src/content/guide/aria/combobox.md
index 38681f5d814d..c787c2d2fa65 100644
--- a/adev/src/content/guide/aria/combobox.md
+++ b/adev/src/content/guide/aria/combobox.md
@@ -10,7 +10,7 @@
 
 A directive that coordinates a text input with a popup, providing the primitive directive for autocomplete, select, and multiselect patterns.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts"/>
@@ -34,7 +34,7 @@ A directive that coordinates a text input with a popup, providing the primitive
       <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 ## Usage
 
@@ -70,7 +70,7 @@ Angular's combobox provides a fully accessible input-popup coordination system w
 
 An accessible input field that filters and suggests options as users type, helping them find and select values from a list.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts"/>
@@ -94,7 +94,7 @@ An accessible input field that filters and suggests options as users type, helpi
       <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 The `filterMode="manual"` setting gives complete control over filtering and selection. The input updates a signal that filters the options list. Users navigate with arrow keys and select with Enter or click. This mode provides the most flexibility for custom filtering logic. See the [Autocomplete guide](guide/aria/autocomplete) for complete filtering patterns and examples.
 
@@ -102,7 +102,7 @@ The `filterMode="manual"` setting gives complete control over filtering and sele
 
 A pattern that combines a readonly combobox with listbox to create single-selection dropdowns with keyboard navigation and screen reader support.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/app/app.ts"/>
@@ -126,7 +126,7 @@ A pattern that combines a readonly combobox with listbox to create single-select
       <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 The `readonly` attribute prevents typing in the input field. The popup opens on click or arrow keys. Users navigate options with keyboard and select with Enter or click.
 
@@ -136,7 +136,7 @@ This configuration provides the foundation for the [Select](guide/aria/select) a
 
 Popups sometimes need modal behavior with a backdrop and focus trap. The combobox dialog directive provides this pattern for specialized use cases.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/combobox/src/dialog/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/combobox/src/dialog/app/app.ts"/>
@@ -160,7 +160,7 @@ Popups sometimes need modal behavior with a backdrop and focus trap. The combobo
       <docs-code header="app.css" path="adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 The `ngComboboxDialog` directive creates a modal popup using the native dialog element. This provides backdrop behavior and focus trapping. Use dialog popups when the selection interface requires modal interaction or when the popup content is complex enough to warrant full-screen focus.
 
diff --git a/adev/src/content/guide/aria/multiselect.md b/adev/src/content/guide/aria/multiselect.md
index dc27f4a676a2..f823eb57721d 100644
--- a/adev/src/content/guide/aria/multiselect.md
+++ b/adev/src/content/guide/aria/multiselect.md
@@ -5,7 +5,7 @@
 
 A pattern that combines readonly combobox with multi-enabled listbox to create multiple-selection dropdowns with keyboard navigation and screen reader support.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/icons/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/icons/app/app.ts"/>
@@ -29,7 +29,7 @@ A pattern that combines readonly combobox with multi-enabled listbox to create m
       <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 ## Usage
 
@@ -67,7 +67,7 @@ The multiselect pattern combines [Combobox](guide/aria/combobox) and [Listbox](g
 
 Users need to select multiple items from a list of options. A readonly combobox paired with a multi-enabled listbox provides familiar multiselect functionality with full accessibility support.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/basic/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/basic/app/app.ts"/>
@@ -91,7 +91,7 @@ Users need to select multiple items from a list of options. A readonly combobox
       <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 The `multi` attribute on `ngListbox` enables multiple selection. Press Space to toggle options, and the popup remains open for additional selections. The display shows the first selected item plus a count of remaining selections.
 
@@ -99,7 +99,7 @@ The `multi` attribute on `ngListbox` enables multiple selection. Press Space to
 
 Options often need visual indicators like icons or colors to help users identify choices. Custom templates within options allow rich formatting while the display value shows a compact summary.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/icons/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/icons/app/app.ts"/>
@@ -123,7 +123,7 @@ Options often need visual indicators like icons or colors to help users identify
       <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 Each option displays an icon alongside its label. The display value updates to show the first selection's icon and text, followed by a count of additional selections. Selected options show a checkmark for clear visual feedback.
 
@@ -131,7 +131,7 @@ Each option displays an icon alongside its label. The display value updates to s
 
 Forms sometimes need to limit the number of selections or validate user choices. Programmatic control over selection enables these constraints while maintaining accessibility.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/limited/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/limited/app/app.ts"/>
@@ -155,7 +155,7 @@ Forms sometimes need to limit the number of selections or validate user choices.
       <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 This example limits selections to three items. When the limit is reached, unselected options become disabled, preventing additional selections. A message informs users about the constraint.
 
diff --git a/adev/src/content/guide/aria/select.md b/adev/src/content/guide/aria/select.md
index fa7f431c4c72..ae2b824a4a7e 100644
--- a/adev/src/content/guide/aria/select.md
+++ b/adev/src/content/guide/aria/select.md
@@ -5,7 +5,7 @@
 
 A pattern that combines readonly combobox with listbox to create single-selection dropdowns with keyboard navigation and screen reader support.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/app/app.ts"/>
@@ -29,7 +29,7 @@ A pattern that combines readonly combobox with listbox to create single-selectio
       <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 ## Usage
 
@@ -67,7 +67,7 @@ The select pattern combines [Combobox](guide/aria/combobox) and [Listbox](guide/
 
 Users need a standard dropdown to choose from a list of values. A readonly combobox paired with a listbox provides the familiar select experience with full accessibility support.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/basic/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/basic/app/app.ts"/>
@@ -91,7 +91,7 @@ Users need a standard dropdown to choose from a list of values. A readonly combo
       <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/basic/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 The `readonly` attribute on `ngCombobox` prevents text input while preserving keyboard navigation. Users interact with the dropdown using arrow keys and Enter, just like a native select element.
 
@@ -99,7 +99,7 @@ The `readonly` attribute on `ngCombobox` prevents text input while preserving ke
 
 Options often need visual indicators like icons or badges to help users identify choices quickly. Custom templates within options allow rich formatting while maintaining accessibility.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/app/app.ts"/>
@@ -123,7 +123,7 @@ Options often need visual indicators like icons or badges to help users identify
       <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 Each option displays an icon alongside the label. The selected value updates to show the chosen option's icon and text, providing clear visual feedback.
 
@@ -131,7 +131,7 @@ Each option displays an icon alongside the label. The selected value updates to
 
 Selects can be disabled to prevent user interaction when certain form conditions aren't met. The disabled state provides visual feedback and prevents keyboard interaction.
 
-<docs-tab-group>
+<!-- <docs-tab-group>
   <docs-tab label="Basic">
     <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/disabled/app/app.ts">
       <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/disabled/app/app.ts"/>
@@ -155,7 +155,7 @@ Selects can be disabled to prevent user interaction when certain form conditions
       <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/disabled/retro/app/app.css"/>
     </docs-code-multifile>
   </docs-tab>
-</docs-tab-group>
+</docs-tab-group> -->
 
 When disabled, the select shows a disabled visual state and blocks all user interaction. Screen readers announce the disabled state to assistive technology users.
 
diff --git a/package.json b/package.json
index 385b570c8acf..af5744982063 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:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index baaef4127d8c..a35543c02000 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,8 +28,8 @@ 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
@@ -37,8 +37,8 @@ importers:
         specifier: 22.0.0-next.7
         version: 22.0.0-next.7(7c763da64c525edd2622f1aac4f6d836)
       '@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
@@ -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)
       '@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
@@ -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
@@ -1703,10 +1703,10 @@ packages:
     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
@@ -13064,9 +13064,9 @@ 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
 
@@ -13306,7 +13306,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 +13377,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
@@ -22868,9 +22868,9 @@ 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