diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.css b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.css
index 45e65487e77..49d95aa8645 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.css
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.css
@@ -1,4 +1,6 @@
-html {
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
+:host {
   font-family: var(--inter-font);
 }
 
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.html b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.html
index 267801d0e85..4e0be3065b0 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.html
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox #combobox="ngCombobox" filterMode="auto-select" class="combobox-container">
   <label for="state-input">Select a state:</label>
   <div class="input-container">
diff --git a/adev/src/content/examples/aria/listbox/src/basic/app/app.css b/adev/src/content/examples/aria/listbox/src/basic/app/app.css
index 5f02be34fb5..d52819ab209 100644
--- a/adev/src/content/examples/aria/listbox/src/basic/app/app.css
+++ b/adev/src/content/examples/aria/listbox/src/basic/app/app.css
@@ -1,24 +1,26 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
+:host {
+  display: flex;
+  justify-content: center;
+  font-family: var(--inter-font);
+}
+
+.listbox-container {
+  width: 200px;
+  height: 11rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--septenary-contrast);
+  font-size: 0.9rem;
+}
+
 [ngListbox] {
   gap: 2px;
   height: 100%;
   display: flex;
   overflow: auto;
   flex-direction: column;
-  background: var(--octonary-contrast);
-}
-
-[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] {
@@ -45,20 +47,14 @@
   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;
-}
+}
\ No newline at end of file
diff --git a/adev/src/content/examples/aria/listbox/src/basic/app/app.html b/adev/src/content/examples/aria/listbox/src/basic/app/app.html
index 81843fe8a5f..bcba26d0650 100644
--- a/adev/src/content/examples/aria/listbox/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/listbox/src/basic/app/app.html
@@ -1,10 +1,10 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
-<div ngListbox>
-  @for (option of options; track option) {
-  <div ngOption [value]="option">
-    <span class="option-text">{{ option }}</span>
-    <span class="checkmark-icon material-symbols-outlined">check</span>
+<div class="listbox-container">
+  <div ngListbox value="Option 1">
+    @for (option of options; track option) {
+    <div ngOption [value]="option">
+      <span class="example-option-text">{{ option }}</span>
+      <span class="example-option-check material-symbols-outlined">check</span>
+    </div>
+    }
   </div>
-  }
-</div>
+</div>
\ No newline at end of file
diff --git a/adev/src/content/examples/aria/listbox/src/basic/app/app.ts b/adev/src/content/examples/aria/listbox/src/basic/app/app.ts
index 85ceeb2d5ff..c1e5450af5e 100644
--- a/adev/src/content/examples/aria/listbox/src/basic/app/app.ts
+++ b/adev/src/content/examples/aria/listbox/src/basic/app/app.ts
@@ -1,13 +1,23 @@
 import {Listbox, Option} from '@angular/aria/listbox';
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
   imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class App {
   /** The options available in the listbox. */
-  options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
+  options = [
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4',
+    'Option 5',
+    'Option 6',
+    'Option 7',
+    'Option 8',
+  ];
 }
diff --git a/adev/src/content/examples/aria/listbox/src/basic/material/app/app.css b/adev/src/content/examples/aria/listbox/src/basic/material/app/app.css
new file mode 100644
index 00000000000..22e0fdf91f8
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/basic/material/app/app.css
@@ -0,0 +1,67 @@
+@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;
+}
+
+.material-listbox {
+  width: 200px;
+  height: 13rem;
+  padding: 0.5rem;
+  border-radius: 2rem;
+  background-color: var(--septenary-contrast);
+  font-size: 0.9rem;
+}
+
+[ngListbox] {
+  gap: 2px;
+  padding: 2px;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+}
+
+[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/listbox/src/basic/material/app/app.html b/adev/src/content/examples/aria/listbox/src/basic/material/app/app.html
new file mode 100644
index 00000000000..eec775d493d
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/basic/material/app/app.html
@@ -0,0 +1,10 @@
+<div class="material-listbox">
+  <div ngListbox>
+    @for (option of options; track option) {
+    <div ngOption [value]="option">
+      <span class="example-option-text">{{ option }}</span>
+      <span class="example-option-check material-symbols-outlined">check</span>
+    </div>
+    }
+  </div>
+</div>
diff --git a/adev/src/content/examples/aria/listbox/src/basic/material/app/app.ts b/adev/src/content/examples/aria/listbox/src/basic/material/app/app.ts
new file mode 100644
index 00000000000..c1e5450af5e
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/basic/material/app/app.ts
@@ -0,0 +1,23 @@
+import {Listbox, Option} from '@angular/aria/listbox';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+  imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class App {
+  /** The options available in the listbox. */
+  options = [
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4',
+    'Option 5',
+    'Option 6',
+    'Option 7',
+    'Option 8',
+  ];
+}
diff --git a/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.css b/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.css
new file mode 100644
index 00000000000..7c702a47ba2
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.css
@@ -0,0 +1,68 @@
+@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(--gray-1000));
+  --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-flat-shadow:
+    4px 0px 0px 0px var(--gray-700), 0px 4px 0px 0px var(--gray-700),
+    -4px 0px 0px 0px var(--gray-700), 0px -4px 0px 0px var(--gray-700);
+}
+
+.retro-listbox {
+  width: 200px;
+  height: 11rem;
+  padding: 0.5rem;
+  box-shadow: var(--retro-flat-shadow);
+  background-color: var(--septenary-contrast);
+}
+
+[ngListbox] {
+  gap: 2px;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+}
+
+[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);
+}
+
+[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/listbox/src/basic/retro/app/app.html b/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.html
new file mode 100644
index 00000000000..9b164387c09
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.html
@@ -0,0 +1,10 @@
+<div class="retro-listbox">
+  <div ngListbox>
+    @for (option of options; track option) {
+    <div ngOption [value]="option">
+      <span class="example-option-text">{{ option }}</span>
+      <span class="example-option-check material-symbols-outlined">check</span>
+    </div>
+    }
+  </div>
+</div>
diff --git a/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.ts b/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.ts
new file mode 100644
index 00000000000..c1e5450af5e
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/basic/retro/app/app.ts
@@ -0,0 +1,23 @@
+import {Listbox, Option} from '@angular/aria/listbox';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+  imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class App {
+  /** The options available in the listbox. */
+  options = [
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4',
+    'Option 5',
+    'Option 6',
+    'Option 7',
+    'Option 8',
+  ];
+}
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/app/app.css b/adev/src/content/examples/aria/listbox/src/horizontal/app/app.css
index bc6e9c409ad..4576600e3d0 100644
--- a/adev/src/content/examples/aria/listbox/src/horizontal/app/app.css
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/app/app.css
@@ -1,9 +1,35 @@
-h1 {
-  background: #1e1e1e;
-  color: #e0e0e0;
-  padding: 2rem;
-  margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 2rem;
-  text-align: center;
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
+:host {
+  font-size: 0.8rem;
+  font-family: var(--inter-font);
+}
+
+[ngListbox] {
+  gap: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+[ngOption] {
+  cursor: pointer;
+  border-radius: 1rem;
+  padding: 0.3rem 1rem;
+  color: var(--hot-pink);
+  border: 1px solid var(--hot-pink);
+  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
+}
+
+[ngOption]:focus {
+  outline: 2px solid var(--hot-pink);
+  outline-offset: 2px;
+}
+
+[ngOption]:hover {
+  background-color: color-mix(in srgb, var(--hot-pink) 15%, transparent);
+}
+
+[ngOption][aria-selected='true'] {
+  color: var(--page-background);
+  background-color: var(--hot-pink);
 }
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/app/app.html b/adev/src/content/examples/aria/listbox/src/horizontal/app/app.html
index d39d7de603b..ceafd71c5ce 100644
--- a/adev/src/content/examples/aria/listbox/src/horizontal/app/app.html
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/app/app.html
@@ -1 +1,7 @@
-<h1>PLACEHOLDER</h1>
+<div ngListbox aria-label="Amenities" orientation="horizontal" selectionMode="explicit" multi>
+  @for (amenity of amenities; track amenity) {
+  <div ngOption [value]="amenity" [label]="amenity">
+    <span class="option-label">{{ amenity }}</span>
+  </div>
+  }
+</div>
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts b/adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts
index 183576f2c24..9b235784f25 100644
--- a/adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts
@@ -1,8 +1,14 @@
-import {Component} from '@angular/core';
+import {Listbox, Option} from '@angular/aria/listbox';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
+  imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class App {}
+export class App {
+  /** The options available in the listbox. */
+  amenities = ['Washer / Dryer', 'Ramp access', 'Garden', 'Cats OK', 'Dogs OK', 'Smoke-free'];
+}
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.css b/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.css
new file mode 100644
index 00000000000..921ec5c5b79
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.css
@@ -0,0 +1,51 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
+:host {
+  font-size: 0.8rem;
+  font-family: var(--inter-font);
+}
+
+[ngListbox] {
+  gap: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+[ngOption] {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  border-radius: 0.3rem;
+  padding: 0.3rem 0.5rem;
+  color: var(--hot-pink);
+  border: 1px solid var(--hot-pink);
+  background-color: color-mix(in srgb, var(--hot-pink) 5%, transparent);
+}
+
+[ngOption]:focus {
+  outline: 2px solid var(--hot-pink);
+  outline-offset: 2px;
+}
+
+[ngOption]:hover {
+  background-color: color-mix(in srgb, var(--hot-pink) 15%, transparent);
+}
+
+[ngOption][aria-selected='true'] {
+  color: var(--page-background);
+  background-color: var(--hot-pink);
+}
+
+.check-icon {
+  width: 0;
+  font-size: 1.25rem;
+  overflow: hidden;
+  transition:
+    width 0.2s ease-in-out,
+    padding-right 0.2s ease-in-out;
+}
+
+[ngOption][aria-selected='true'] .check-icon {
+  width: 1.5rem;
+  padding-right: 0.2rem;
+}
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html b/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html
new file mode 100644
index 00000000000..3f69fb9e0ab
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html
@@ -0,0 +1,15 @@
+<div
+  ngListbox
+  class="material-listbox"
+  aria-label="Amenities"
+  orientation="horizontal"
+  selectionMode="explicit"
+  multi
+>
+  @for (amenity of amenities; track amenity) {
+  <div ngOption [value]="amenity" [label]="amenity">
+    <span class="check-icon material-symbols-outlined">check</span>
+    <span class="option-label">{{ amenity }}</span>
+  </div>
+  }
+</div>
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.ts b/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.ts
new file mode 100644
index 00000000000..9b235784f25
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.ts
@@ -0,0 +1,14 @@
+import {Listbox, Option} from '@angular/aria/listbox';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+  imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class App {
+  /** The options available in the listbox. */
+  amenities = ['Washer / Dryer', 'Ramp access', 'Garden', 'Cats OK', 'Dogs OK', 'Smoke-free'];
+}
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.css b/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.css
new file mode 100644
index 00000000000..365a76febc5
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.css
@@ -0,0 +1,62 @@
+@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(--gray-1000));
+  --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-flat-shadow:
+    4px 0px 0px 0px var(--gray-700), 0px 4px 0px 0px var(--gray-700),
+    -4px 0px 0px 0px var(--gray-700), 0px -4px 0px 0px var(--gray-700);
+  --retro-flat-shadow-small:
+    2px 0px 0px 0px var(--gray-700), 0px 2px 0px 0px var(--gray-700),
+    -2px 0px 0px 0px var(--gray-700), 0px -2px 0px 0px var(--gray-700);
+}
+
+.retro-listbox {
+  gap: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.5rem;
+  box-shadow: var(--retro-flat-shadow);
+  background-color: var(--septenary-contrast);
+}
+
+[ngOption] {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.6rem;
+  box-shadow: var(--retro-flat-shadow-small);
+}
+
+[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);
+}
+
+.check-icon {
+  width: 0;
+  font-size: 0.9rem;
+  overflow: hidden;
+  transition: width 0.2s ease-in-out;
+}
+
+[ngOption][aria-selected='true'] .check-icon {
+  width: 1.2rem;
+}
\ No newline at end of file
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html b/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html
new file mode 100644
index 00000000000..81062b6d159
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html
@@ -0,0 +1,8 @@
+<div ngListbox class="retro-listbox" aria-label="Amenities" orientation="horizontal" selectionMode="explicit" multi>
+  @for (amenity of amenities; track amenity) {
+    <div ngOption [value]="amenity" [label]="amenity">
+      <span class="check-icon material-symbols-outlined">check</span>
+      <span class="option-label">{{ amenity }}</span>
+    </div>
+  }
+</div>
diff --git a/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.ts b/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.ts
new file mode 100644
index 00000000000..9b235784f25
--- /dev/null
+++ b/adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.ts
@@ -0,0 +1,14 @@
+import {Listbox, Option} from '@angular/aria/listbox';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+  imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class App {
+  /** The options available in the listbox. */
+  amenities = ['Washer / Dryer', 'Ramp access', 'Garden', 'Cats OK', 'Dogs OK', 'Smoke-free'];
+}
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
index d16df5ed48d..27fc9b1888b 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/basic/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/app/app.html b/adev/src/content/examples/aria/multiselect/src/basic/app/app.html
index 3a79c2c307e..a9ed4814f89 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/basic/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 603b9d2eb0b..d467e8068b1 100644
--- 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
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html b/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html
index e36ac46f9e5..bc80f7d7da5 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox class="material-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 042ff72d536..5eb8edbd1fd 100644
--- 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
@@ -1,3 +1,6 @@
+@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;
diff --git a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html
index 38ef1b37a5a..4fa9554a74c 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html
@@ -1,6 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
-
 <div ngCombobox class="retro-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 548bf7e091d..1b785164d6d 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/icons/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/app/app.html b/adev/src/content/examples/aria/multiselect/src/icons/app/app.html
index 1342f437680..3b6c8d29dd8 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/icons/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 7ebf5237251..447c6e829b7 100644
--- 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
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html b/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html
index 83e2d61ec9d..b94c6e0838d 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox class="material-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 5b1dad729fb..5ee354ffed5 100644
--- 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
@@ -1,3 +1,6 @@
+@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;
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html
index 48b8e80160e..28fccce45a9 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html
@@ -1,6 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
-
 <div ngCombobox class="retro-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index b3bf4c18262..862d37e5b2e 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/limited/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/app/app.html b/adev/src/content/examples/aria/multiselect/src/limited/app/app.html
index 2d491e66c45..0b3dba7937a 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/limited/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 33699dd3f19..8f0d24db670 100644
--- 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
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html b/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html
index 57a4962da3a..f2595b3ad1e 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox class="material-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 1a89b9f663c..508e2930189 100644
--- 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
@@ -1,3 +1,6 @@
+@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;
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html
index 367771dfb0b..6fff8d81c25 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html
+++ b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html
@@ -1,6 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
-
 <div ngCombobox class="retro-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index fcb7f7defed..a6b6fba421f 100644
--- a/adev/src/content/examples/aria/select/src/basic/app/app.css
+++ b/adev/src/content/examples/aria/select/src/basic/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/select/src/basic/app/app.html b/adev/src/content/examples/aria/select/src/basic/app/app.html
index 33b417b2d72..2ec66122e5c 100644
--- a/adev/src/content/examples/aria/select/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/select/src/basic/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 7b43eeb5001..6439b778c88 100644
--- 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
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/select/src/basic/material/app/app.html b/adev/src/content/examples/aria/select/src/basic/material/app/app.html
index 40af7634e6a..7866975d523 100644
--- a/adev/src/content/examples/aria/select/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/select/src/basic/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox class="material-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 4efc6203b4b..651415f9d3c 100644
--- 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
@@ -1,3 +1,6 @@
+@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;
diff --git a/adev/src/content/examples/aria/select/src/basic/retro/app/app.html b/adev/src/content/examples/aria/select/src/basic/retro/app/app.html
index fd5e09e5195..db46b6e1399 100644
--- a/adev/src/content/examples/aria/select/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/select/src/basic/retro/app/app.html
@@ -1,6 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
-
 <div ngCombobox class="retro-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 8e02c086b16..7864bf49303 100644
--- a/adev/src/content/examples/aria/select/src/disabled/app/app.css
+++ b/adev/src/content/examples/aria/select/src/disabled/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/select/src/disabled/app/app.html b/adev/src/content/examples/aria/select/src/disabled/app/app.html
index 7eb56464950..f0abf760d6a 100644
--- a/adev/src/content/examples/aria/select/src/disabled/app/app.html
+++ b/adev/src/content/examples/aria/select/src/disabled/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox readonly disabled>
   <div #origin class="select">
     <span class="combobox-label">
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
index ea884439115..4a3b4e2d23b 100644
--- 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
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/select/src/disabled/material/app/app.html b/adev/src/content/examples/aria/select/src/disabled/material/app/app.html
index 38b5add71f1..4bc36050119 100644
--- a/adev/src/content/examples/aria/select/src/disabled/material/app/app.html
+++ b/adev/src/content/examples/aria/select/src/disabled/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox class="material-select" readonly disabled>
   <div #origin class="select">
     <span class="combobox-label">
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
index 6e8f06dcb84..8b67bbe26a8 100644
--- 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
@@ -1,3 +1,6 @@
+@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;
diff --git a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html
index 59f9b4146d8..e3e4df8f497 100644
--- a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html
+++ b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.html
@@ -1,6 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
-
 <div ngCombobox class="retro-select" readonly disabled>
   <div #origin class="select">
     <span class="combobox-label">
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
index 4a6f9e6a674..660e31d4553 100644
--- a/adev/src/content/examples/aria/select/src/icons/app/app.css
+++ b/adev/src/content/examples/aria/select/src/icons/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/select/src/icons/app/app.html b/adev/src/content/examples/aria/select/src/icons/app/app.html
index f84e4a31f6d..10047ba315a 100644
--- a/adev/src/content/examples/aria/select/src/icons/app/app.html
+++ b/adev/src/content/examples/aria/select/src/icons/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index 6a79de32e02..55ee304a9c8 100644
--- 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
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/select/src/icons/material/app/app.html b/adev/src/content/examples/aria/select/src/icons/material/app/app.html
index 2bdcb0e6337..25d51b32341 100644
--- a/adev/src/content/examples/aria/select/src/icons/material/app/app.html
+++ b/adev/src/content/examples/aria/select/src/icons/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngCombobox class="material-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
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
index b15d7c90e47..77f6393e9ec 100644
--- 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
@@ -1,3 +1,6 @@
+@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;
diff --git a/adev/src/content/examples/aria/select/src/icons/retro/app/app.html b/adev/src/content/examples/aria/select/src/icons/retro/app/app.html
index 2ec638bcd16..ae28644c390 100644
--- a/adev/src/content/examples/aria/select/src/icons/retro/app/app.html
+++ b/adev/src/content/examples/aria/select/src/icons/retro/app/app.html
@@ -1,6 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
-
 <div ngCombobox class="retro-select" readonly>
   <div #origin class="select">
     <span class="combobox-label">
diff --git a/adev/src/content/examples/aria/toolbar/src/basic/app/app.css b/adev/src/content/examples/aria/toolbar/src/basic/app/app.css
index c1a83e5b23d..1fc0cf49bc3 100644
--- a/adev/src/content/examples/aria/toolbar/src/basic/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/basic/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/basic/app/app.html b/adev/src/content/examples/aria/toolbar/src/basic/app/app.html
index a4cb741fa58..10ec3cf0bc7 100644
--- a/adev/src/content/examples/aria/toolbar/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/basic/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/basic/material/app/app.css b/adev/src/content/examples/aria/toolbar/src/basic/material/app/app.css
index 7a54be9d7dd..2cea18afc14 100644
--- a/adev/src/content/examples/aria/toolbar/src/basic/material/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/basic/material/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/basic/material/app/app.html b/adev/src/content/examples/aria/toolbar/src/basic/material/app/app.html
index f7dc3136335..2fc61725789 100644
--- a/adev/src/content/examples/aria/toolbar/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/basic/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar class="material-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
index dad7cf99ee8..d5663ddc23e 100644
--- a/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.html b/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.html
index ed8e05e1816..8e5c561be3e 100644
--- a/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar class="retro-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/app/app.css b/adev/src/content/examples/aria/toolbar/src/disabled/app/app.css
index 88ce9748857..da3cf8b0599 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/app/app.html b/adev/src/content/examples/aria/toolbar/src/disabled/app/app.html
index 17ec24848fc..fde16d597d8 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/app/app/app.css b/adev/src/content/examples/aria/toolbar/src/disabled/app/app/app.css
index 6c0e2a86e0e..ce6755a5f9c 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/app/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/app/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/app/app/app.html b/adev/src/content/examples/aria/toolbar/src/disabled/app/app/app.html
index 76c725a2a84..0631b16e811 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/app/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/app/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar class="disabled-material-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.css b/adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.css
index 31d6b26d00c..ce55a274ba3 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.html b/adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.html
index 76c725a2a84..0631b16e811 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar class="disabled-material-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
index 9b66915a712..073db91df85 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.html b/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.html
index cf233e77f2e..6ea7f36183a 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar class="retro-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/rtl/app/app.css b/adev/src/content/examples/aria/toolbar/src/rtl/app/app.css
index c1a83e5b23d..1fc0cf49bc3 100644
--- a/adev/src/content/examples/aria/toolbar/src/rtl/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/rtl/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/rtl/app/app.html b/adev/src/content/examples/aria/toolbar/src/rtl/app/app.html
index 029d7911e3a..52d825f626d 100644
--- a/adev/src/content/examples/aria/toolbar/src/rtl/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/rtl/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar dir="rtl" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.css b/adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.css
index 6c0e2a86e0e..ce6755a5f9c 100644
--- a/adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.html b/adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.html
index 9f1177a5ce4..7f9c7319101 100644
--- a/adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar dir="rtl" class="rtl-material-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
index dad7cf99ee8..d5663ddc23e 100644
--- a/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: center;
diff --git a/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.html b/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.html
index dc22a12419c..ca878d6295f 100644
--- a/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar dir="rtl" class="rtl-retro-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/app/app.css b/adev/src/content/examples/aria/toolbar/src/vertical/app/app.css
index bbc54c4e0da..77c1dbac2e4 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: flex-start;
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/app/app.html b/adev/src/content/examples/aria/toolbar/src/vertical/app/app.html
index 2024499d6d0..e654ee584fe 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar orientation="vertical" aria-label="Text Formatting Tools">
   <div class="group">
     <button
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.css b/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.css
index da7a9410d41..e19573b9fbe 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: flex-start;
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.html b/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.html
index c0aa47105cc..8230e35e14a 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar orientation="vertical" class="vertical-material-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
@@ -62,47 +60,4 @@
       format_underlined
     </button>
   </div>
-
-  <div class="separator" role="separator"></div>
-
-  <div ngToolbarWidgetGroup role="radiogroup" class="group" aria-label="Text alignment options">
-    <button
-      ngToolbarWidget
-      role="radio"
-      type="button"
-      value="align left"
-      aria-label="align left"
-      #leftAlign="ngToolbarWidget"
-      class="material-symbols-outlined"
-      [aria-checked]="leftAlign.selected()"
-    >
-      format_align_left
-    </button>
-
-    <button
-      ngToolbarWidget
-      role="radio"
-      type="button"
-      value="align center"
-      aria-label="align center"
-      #centerAlign="ngToolbarWidget"
-      class="material-symbols-outlined"
-      [aria-checked]="centerAlign.selected()"
-    >
-      format_align_center
-    </button>
-
-    <button
-      ngToolbarWidget
-      role="radio"
-      type="button"
-      value="align right"
-      aria-label="align right"
-      #rightAlign="ngToolbarWidget"
-      class="material-symbols-outlined"
-      [aria-checked]="rightAlign.selected()"
-    >
-      format_align_right
-    </button>
-  </div>
 </div>
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.ts b/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.ts
index b53e249a983..566bc325946 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.ts
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.ts
@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria/toolbar';
+import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [Toolbar, ToolbarWidget, ToolbarWidgetGroup],
+  imports: [Toolbar, ToolbarWidget],
 })
 export class App {}
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
index f3aae813184..d0fc730319a 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');
+
 :host {
   display: flex;
   justify-content: flex-start;
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.html b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.html
index 0369e05f08e..e2511772bab 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.html
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.html
@@ -1,5 +1,3 @@
-<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
-
 <div ngToolbar orientation="vertical" class="retro-toolbar" aria-label="Text Formatting Tools">
   <div class="group">
     <button
@@ -62,47 +60,4 @@
       format_underlined
     </button>
   </div>
-
-  <div class="separator" role="separator"></div>
-
-  <div ngToolbarWidgetGroup role="radiogroup" class="group" aria-label="Text alignment options">
-    <button
-      ngToolbarWidget
-      role="radio"
-      type="button"
-      value="align left"
-      aria-label="align left"
-      #leftAlign="ngToolbarWidget"
-      class="material-symbols-outlined"
-      [aria-checked]="leftAlign.selected()"
-    >
-      format_align_left
-    </button>
-
-    <button
-      ngToolbarWidget
-      role="radio"
-      type="button"
-      value="align center"
-      aria-label="align center"
-      #centerAlign="ngToolbarWidget"
-      class="material-symbols-outlined"
-      [aria-checked]="centerAlign.selected()"
-    >
-      format_align_center
-    </button>
-
-    <button
-      ngToolbarWidget
-      role="radio"
-      type="button"
-      value="align right"
-      aria-label="align right"
-      #rightAlign="ngToolbarWidget"
-      class="material-symbols-outlined"
-      [aria-checked]="rightAlign.selected()"
-    >
-      format_align_right
-    </button>
-  </div>
 </div>
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.ts b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.ts
index b53e249a983..566bc325946 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.ts
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.ts
@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria/toolbar';
+import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.html',
   styleUrl: 'app.css',
-  imports: [Toolbar, ToolbarWidget, ToolbarWidgetGroup],
+  imports: [Toolbar, ToolbarWidget],
 })
 export class App {}
diff --git a/adev/src/content/guide/aria/listbox.md b/adev/src/content/guide/aria/listbox.md
index 5d37dad350c..752fe4a21cf 100644
--- a/adev/src/content/guide/aria/listbox.md
+++ b/adev/src/content/guide/aria/listbox.md
@@ -5,11 +5,31 @@
 
 A directive that displays a list of options for users to select from, supporting keyboard navigation, single or multiple selection, and screen reader support.
 
-<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/basic/app/app.ts">
-  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/basic/app/app.ts"/>
-  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/basic/app/app.html"/>
-  <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/basic/app/app.css"/>
-</docs-code-multifile>
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
 
 ## Usage
 
@@ -53,10 +73,31 @@ The `values` model signal provides two-way binding to the selected items. With `
 
 Lists sometimes work better horizontally, such as toolbar-like interfaces or tab-style selections. The `orientation` attribute changes both the layout and keyboard navigation direction.
 
-<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts">
-  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts" />
-  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.html" />
-</docs-code-multifile>
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
 
 With `orientation="horizontal"`, left and right arrow keys navigate between options instead of up and down. The listbox automatically handles right-to-left (RTL) languages by reversing navigation direction.