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
index 5ba77d21265..ac7e15c187c 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.css
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.css
@@ -33,7 +33,7 @@
   width: 13rem;
   font-size: 1rem;
   border-radius: 0.25rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: var(--primary-contrast);
   outline: none;
   border: 1px solid var(--quinary-contrast);
@@ -111,3 +111,35 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  color: var(--quaternary-contrast);
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition: background-color 0.15s ease;
+}
+
+.clear-button:hover {
+  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
+}
+
+.clear-button:focus-visible {
+  outline: 2px solid var(--hot-pink);
+  outline-offset: -2px;
+}
+
+.clear-icon {
+  font-size: 1.25rem;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html
index 70f87e13574..ae3deab84c0 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.html
@@ -13,6 +13,17 @@
       (click)="popupExpanded.set(true)"
       (focusout)="onBlur()"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon material-symbols-outlined" translate="no" aria-hidden="true"
+        >close</span
+      >
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts
index f94c55b1c01..490d41e29fa 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts
@@ -11,6 +11,12 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -37,6 +43,7 @@ export class App {
   onCommit() {
     this.commitSelection();
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 
   private commitSelection() {
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
index 00237755e97..8dba0dcfc9f 100644
--- 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
@@ -34,7 +34,7 @@
   width: 13rem;
   font-size: 1rem;
   border-radius: 3rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: var(--primary-contrast);
   outline: none;
   border: 1px solid var(--quinary-contrast);
@@ -112,3 +112,40 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--quaternary-contrast);
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.clear-button:hover {
+  color: var(--primary);
+  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
+}
+
+.clear-button:focus-visible {
+  color: var(--primary);
+  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
+.clear-icon {
+  font-size: 1.25rem;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html
index e2bce42676a..092a6d1ac34 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html
@@ -13,6 +13,17 @@
       (click)="popupExpanded.set(true)"
       (focusout)="onBlur()"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon material-symbols-outlined" translate="no" aria-hidden="true"
+        >close</span
+      >
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts
index fc5c29a32a6..99d47cee520 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts
@@ -11,6 +11,12 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -37,6 +43,7 @@ export class App {
   onCommit() {
     this.commitSelection();
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 
   private commitSelection() {
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
index 42909193677..dd08034bf89 100644
--- 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
@@ -35,6 +35,12 @@
   display: flex;
   position: relative;
   align-items: center;
+  box-shadow: var(--retro-flat-shadow);
+  background-color: var(--retro-button-color);
+}
+
+.retro-autocomplete:focus-within {
+  box-shadow: var(--retro-pressed-shadow);
 }
 
 .material-symbols-outlined {
@@ -55,20 +61,14 @@
   border-radius: 0;
   font-family: 'Press Start 2P';
   word-spacing: -5px;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: #000;
   border: none;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--retro-button-color);
+  background-color: transparent;
+  box-shadow: none;
   outline: none;
 }
 
-.autocomplete-input:focus-visible {
-  outline: none;
-  transform: translate(1px, 1px);
-  box-shadow: var(--retro-pressed-shadow);
-}
-
 .autocomplete-input::placeholder {
   color: #000;
   opacity: 0.7;
@@ -133,3 +133,48 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--win95-gray);
+  color: var(--win95-shadow);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--win95-light) var(--win95-dark-gray) var(--win95-dark-gray) var(--win95-light);
+  box-shadow: 1px 1px 0 var(--win95-shadow);
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  font-family: 'Press Start 2P';
+  font-size: 0.6rem;
+  user-select: none;
+}
+
+.clear-button:hover {
+  background: #e0e0e0;
+  outline: 1px dashed var(--win95-dark-gray);
+  outline-offset: 1px;
+}
+
+.clear-button:active {
+  border-color: var(--win95-dark-gray) var(--win95-light) var(--win95-light) var(--win95-dark-gray);
+  box-shadow: 1px 1px 0 var(--win95-shadow) inset;
+}
+
+.clear-button:focus-visible {
+  outline: 2px dashed var(--hot-pink);
+  outline-offset: 4px;
+}
+
+.clear-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html
index 09305a17d81..cf0b1ded784 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html
@@ -13,6 +13,15 @@
       (click)="popupExpanded.set(true)"
       (focusout)="onBlur()"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon" aria-hidden="true">X</span>
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts
index 928ef15cebc..d582bd67318 100644
--- a/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts
@@ -11,6 +11,12 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -37,6 +43,7 @@ export class App {
   onCommit() {
     this.commitSelection();
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 
   private commitSelection() {
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
index 5ba77d21265..ac7e15c187c 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.css
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.css
@@ -33,7 +33,7 @@
   width: 13rem;
   font-size: 1rem;
   border-radius: 0.25rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: var(--primary-contrast);
   outline: none;
   border: 1px solid var(--quinary-contrast);
@@ -111,3 +111,35 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  color: var(--quaternary-contrast);
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition: background-color 0.15s ease;
+}
+
+.clear-button:hover {
+  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
+}
+
+.clear-button:focus-visible {
+  outline: 2px solid var(--hot-pink);
+  outline-offset: -2px;
+}
+
+.clear-icon {
+  font-size: 1.25rem;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html
index d7d68d56f7e..0f8b42c5615 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html
@@ -15,6 +15,17 @@
       (keydown.arrowup)="navigated.set(true)"
       [inlineSuggestion]="query() || navigated() ? selectedOption()[0] : undefined"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon material-symbols-outlined" translate="no" aria-hidden="true"
+        >close</span
+      >
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts
index 5c9eb0dcf3a..a967c404bb4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts
@@ -11,6 +11,13 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+    this.navigated.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -45,6 +52,7 @@ export class App {
       this.query.set('');
     }
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 }
 
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
index 00237755e97..8dba0dcfc9f 100644
--- 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
@@ -34,7 +34,7 @@
   width: 13rem;
   font-size: 1rem;
   border-radius: 3rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: var(--primary-contrast);
   outline: none;
   border: 1px solid var(--quinary-contrast);
@@ -112,3 +112,40 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--quaternary-contrast);
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.clear-button:hover {
+  color: var(--primary);
+  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
+}
+
+.clear-button:focus-visible {
+  color: var(--primary);
+  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
+.clear-icon {
+  font-size: 1.25rem;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html
index f307c227b01..2015b4bd9d6 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html
@@ -15,6 +15,17 @@
       (keydown.arrowup)="navigated.set(true)"
       [inlineSuggestion]="query() || navigated() ? selectedOption()[0] : undefined"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon material-symbols-outlined" translate="no" aria-hidden="true"
+        >close</span
+      >
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts
index 20d93170f8e..e3108c8678b 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts
@@ -11,6 +11,13 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+    this.navigated.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -45,6 +52,7 @@ export class App {
       this.query.set('');
     }
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 }
 
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
index 42909193677..dd08034bf89 100644
--- 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
@@ -35,6 +35,12 @@
   display: flex;
   position: relative;
   align-items: center;
+  box-shadow: var(--retro-flat-shadow);
+  background-color: var(--retro-button-color);
+}
+
+.retro-autocomplete:focus-within {
+  box-shadow: var(--retro-pressed-shadow);
 }
 
 .material-symbols-outlined {
@@ -55,20 +61,14 @@
   border-radius: 0;
   font-family: 'Press Start 2P';
   word-spacing: -5px;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: #000;
   border: none;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--retro-button-color);
+  background-color: transparent;
+  box-shadow: none;
   outline: none;
 }
 
-.autocomplete-input:focus-visible {
-  outline: none;
-  transform: translate(1px, 1px);
-  box-shadow: var(--retro-pressed-shadow);
-}
-
 .autocomplete-input::placeholder {
   color: #000;
   opacity: 0.7;
@@ -133,3 +133,48 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--win95-gray);
+  color: var(--win95-shadow);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--win95-light) var(--win95-dark-gray) var(--win95-dark-gray) var(--win95-light);
+  box-shadow: 1px 1px 0 var(--win95-shadow);
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  font-family: 'Press Start 2P';
+  font-size: 0.6rem;
+  user-select: none;
+}
+
+.clear-button:hover {
+  background: #e0e0e0;
+  outline: 1px dashed var(--win95-dark-gray);
+  outline-offset: 1px;
+}
+
+.clear-button:active {
+  border-color: var(--win95-dark-gray) var(--win95-light) var(--win95-light) var(--win95-dark-gray);
+  box-shadow: 1px 1px 0 var(--win95-shadow) inset;
+}
+
+.clear-button:focus-visible {
+  outline: 2px dashed var(--hot-pink);
+  outline-offset: 4px;
+}
+
+.clear-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html
index 2ff04f86414..812d907a5b4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html
@@ -15,6 +15,15 @@
       (keydown.arrowup)="navigated.set(true)"
       [inlineSuggestion]="query() || navigated() ? selectedOption()[0] : undefined"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon" aria-hidden="true">X</span>
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts
index 4915fc80e11..96b044253cb 100644
--- a/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts
@@ -11,6 +11,13 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+    this.navigated.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -45,6 +52,7 @@ export class App {
       this.query.set('');
     }
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 }
 
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
index 5ba77d21265..ac7e15c187c 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.css
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.css
@@ -33,7 +33,7 @@
   width: 13rem;
   font-size: 1rem;
   border-radius: 0.25rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: var(--primary-contrast);
   outline: none;
   border: 1px solid var(--quinary-contrast);
@@ -111,3 +111,35 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  color: var(--quaternary-contrast);
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition: background-color 0.15s ease;
+}
+
+.clear-button:hover {
+  background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
+}
+
+.clear-button:focus-visible {
+  outline: 2px solid var(--hot-pink);
+  outline-offset: -2px;
+}
+
+.clear-icon {
+  font-size: 1.25rem;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html
index 8bbf29ff983..8532f8f911a 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.html
@@ -12,6 +12,17 @@
       [(expanded)]="popupExpanded"
       (click)="popupExpanded.set(true)"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon material-symbols-outlined" translate="no" aria-hidden="true"
+        >close</span
+      >
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts
index cc4e7f72f2c..a72d13697ca 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts
@@ -11,6 +11,12 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -36,6 +42,7 @@ export class App {
       this.query.set(selected[0]);
     }
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 }
 
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
index 00237755e97..8dba0dcfc9f 100644
--- 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
@@ -34,7 +34,7 @@
   width: 13rem;
   font-size: 1rem;
   border-radius: 3rem;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: var(--primary-contrast);
   outline: none;
   border: 1px solid var(--quinary-contrast);
@@ -112,3 +112,40 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--quaternary-contrast);
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.clear-button:hover {
+  color: var(--primary);
+  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
+}
+
+.clear-button:focus-visible {
+  color: var(--primary);
+  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
+.clear-icon {
+  font-size: 1.25rem;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html
index bebc39187fc..1988ea40178 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html
@@ -12,6 +12,17 @@
       [(expanded)]="popupExpanded"
       (click)="popupExpanded.set(true)"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon material-symbols-outlined" translate="no" aria-hidden="true"
+        >close</span
+      >
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts
index 79d043ae3a8..13f62a9e791 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts
@@ -11,6 +11,12 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -36,6 +42,7 @@ export class App {
       this.query.set(selected[0]);
     }
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 }
 
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
index 42909193677..43c68f4fee8 100644
--- 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
@@ -35,6 +35,12 @@
   display: flex;
   position: relative;
   align-items: center;
+  box-shadow: var(--retro-flat-shadow);
+  background-color: var(--retro-button-color);
+}
+
+.retro-autocomplete:focus-within {
+  box-shadow: var(--retro-pressed-shadow);
 }
 
 .material-symbols-outlined {
@@ -55,20 +61,14 @@
   border-radius: 0;
   font-family: 'Press Start 2P';
   word-spacing: -5px;
-  padding: 0.75rem 0.5rem 0.75rem 2.5rem;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
   color: #000;
   border: none;
-  box-shadow: var(--retro-flat-shadow);
-  background-color: var(--retro-button-color);
+  background-color: transparent;
+  box-shadow: none;
   outline: none;
 }
 
-.autocomplete-input:focus-visible {
-  outline: none;
-  transform: translate(1px, 1px);
-  box-shadow: var(--retro-pressed-shadow);
-}
-
 .autocomplete-input::placeholder {
   color: #000;
   opacity: 0.7;
@@ -133,3 +133,48 @@
 .check-icon {
   font-size: 0.9rem;
 }
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--win95-gray);
+  color: var(--win95-shadow);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--win95-light) var(--win95-dark-gray) var(--win95-dark-gray) var(--win95-light);
+  box-shadow: 1px 1px 0 var(--win95-shadow);
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  font-family: 'Press Start 2P';
+  font-size: 0.6rem;
+  user-select: none;
+}
+
+.clear-button:hover {
+  background: #e0e0e0;
+  outline: 1px dashed var(--win95-dark-gray);
+  outline-offset: 1px;
+}
+
+.clear-button:active {
+  border-color: var(--win95-dark-gray) var(--win95-light) var(--win95-light) var(--win95-dark-gray);
+  box-shadow: 1px 1px 0 var(--win95-shadow) inset;
+}
+
+.clear-button:focus-visible {
+  outline: 2px dashed var(--hot-pink);
+  outline-offset: 4px;
+}
+
+.clear-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html
index 2db970ae645..d0cdb745074 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html
@@ -12,6 +12,15 @@
       [(expanded)]="popupExpanded"
       (click)="popupExpanded.set(true)"
     />
+    <button
+      type="button"
+      class="clear-button"
+      aria-label="Clear"
+      (mousedown)="$event.preventDefault()"
+      (click)="clear()"
+    >
+      <span class="clear-icon" aria-hidden="true">X</span>
+    </button>
   </div>
 
   <div aria-live="polite" class="cdk-visually-hidden">
diff --git a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts
index d766b47203b..09b6e553fe4 100644
--- a/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts
+++ b/adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts
@@ -11,6 +11,12 @@ import {FormsModule} from '@angular/forms';
   imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
 })
 export class App {
+  clear() {
+    this.query.set('');
+    this.selectedOption.set([]);
+    this.popupExpanded.set(false);
+  }
+
   readonly listbox = viewChild(Listbox);
   readonly combobox = viewChild(Combobox);
 
@@ -36,6 +42,7 @@ export class App {
       this.query.set(selected[0]);
     }
     this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
   }
 }