From 40757cd940dbf474a5c895ef554b176e66e53887 Mon Sep 17 00:00:00 2001 From: tjshiu <35056071+tjshiu@users.noreply.github.com> Date: Thu, 21 May 2026 15:32:21 -0700 Subject: [PATCH 1/2] docs: add clear buttons inside autocomplete examples --- .../aria/autocomplete/src/basic/app/app.css | 34 +++++++++- .../aria/autocomplete/src/basic/app/app.html | 12 ++++ .../aria/autocomplete/src/basic/app/app.ts | 14 +++++ .../src/basic/material/app/app.css | 39 +++++++++++- .../src/basic/material/app/app.html | 12 ++++ .../src/basic/material/app/app.ts | 14 +++++ .../autocomplete/src/basic/retro/app/app.css | 63 ++++++++++++++++--- .../autocomplete/src/basic/retro/app/app.html | 10 +++ .../autocomplete/src/basic/retro/app/app.ts | 14 +++++ .../autocomplete/src/highlight/app/app.css | 34 +++++++++- .../autocomplete/src/highlight/app/app.html | 12 ++++ .../autocomplete/src/highlight/app/app.ts | 15 +++++ .../src/highlight/material/app/app.css | 39 +++++++++++- .../src/highlight/material/app/app.html | 12 ++++ .../src/highlight/material/app/app.ts | 15 +++++ .../src/highlight/retro/app/app.css | 63 ++++++++++++++++--- .../src/highlight/retro/app/app.html | 10 +++ .../src/highlight/retro/app/app.ts | 15 +++++ .../aria/autocomplete/src/manual/app/app.css | 34 +++++++++- .../aria/autocomplete/src/manual/app/app.html | 12 ++++ .../aria/autocomplete/src/manual/app/app.ts | 14 +++++ .../src/manual/material/app/app.css | 39 +++++++++++- .../src/manual/material/app/app.html | 12 ++++ .../src/manual/material/app/app.ts | 14 +++++ .../autocomplete/src/manual/retro/app/app.css | 63 ++++++++++++++++--- .../src/manual/retro/app/app.html | 10 +++ .../autocomplete/src/manual/retro/app/app.ts | 14 +++++ 27 files changed, 606 insertions(+), 33 deletions(-) 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..c04a8fa5832 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,18 @@ (click)="popupExpanded.set(true)" (focusout)="onBlur()" /> +
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..69b1e961d80 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,19 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -37,6 +50,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..94f54b02649 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,18 @@ (click)="popupExpanded.set(true)" (focusout)="onBlur()" /> +
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..6568a2a6377 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,19 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -37,6 +50,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..0b901b2c6d5 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,16 @@ (click)="popupExpanded.set(true)" (focusout)="onBlur()" /> +
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..06dcb7fedf4 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,19 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -37,6 +50,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..0d431833ed2 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,18 @@ (keydown.arrowup)="navigated.set(true)" [inlineSuggestion]="query() || navigated() ? selectedOption()[0] : undefined" /> +
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..f3615e274d3 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,20 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -45,6 +59,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..d40430af6a7 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,18 @@ (keydown.arrowup)="navigated.set(true)" [inlineSuggestion]="query() || navigated() ? selectedOption()[0] : undefined" /> +
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..df1db7b6567 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,20 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -45,6 +59,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..35af8052564 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,16 @@ (keydown.arrowup)="navigated.set(true)" [inlineSuggestion]="query() || navigated() ? selectedOption()[0] : undefined" /> +
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..bf1e96effb9 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,20 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -45,6 +59,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..02f45057f59 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,18 @@ [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" /> +
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..58d0de5a84e 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,19 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -36,6 +49,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..0b0fdd9f9f9 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,18 @@ [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" /> +
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..5b1e2c291c3 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,19 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -36,6 +49,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..c31a9a52066 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,16 @@ [(expanded)]="popupExpanded" (click)="popupExpanded.set(true)" /> +
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..721476d59f4 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,19 @@ 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); + } + + onKeydown(event: KeyboardEvent) { + if (event.key === 'Enter') { + this.clear(); + event.stopPropagation(); + } + } + readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -36,6 +49,7 @@ export class App { this.query.set(selected[0]); } this.popupExpanded.set(false); + this.combobox()?.element.focus(); } } From 7312ad3ee01128fc88b83ee11d7667e29f103e1b Mon Sep 17 00:00:00 2001 From: tjshiu <35056071+tjshiu@users.noreply.github.com> Date: Thu, 21 May 2026 17:27:49 -0700 Subject: [PATCH 2/2] docs: remove redundant keydown bindings in autocomplete examples --- .../examples/aria/autocomplete/src/basic/app/app.html | 1 - .../examples/aria/autocomplete/src/basic/app/app.ts | 7 ------- .../aria/autocomplete/src/basic/material/app/app.html | 1 - .../aria/autocomplete/src/basic/material/app/app.ts | 7 ------- .../aria/autocomplete/src/basic/retro/app/app.html | 1 - .../examples/aria/autocomplete/src/basic/retro/app/app.ts | 7 ------- .../examples/aria/autocomplete/src/highlight/app/app.html | 1 - .../examples/aria/autocomplete/src/highlight/app/app.ts | 7 ------- .../aria/autocomplete/src/highlight/material/app/app.html | 1 - .../aria/autocomplete/src/highlight/material/app/app.ts | 7 ------- .../aria/autocomplete/src/highlight/retro/app/app.html | 1 - .../aria/autocomplete/src/highlight/retro/app/app.ts | 7 ------- .../examples/aria/autocomplete/src/manual/app/app.html | 1 - .../examples/aria/autocomplete/src/manual/app/app.ts | 7 ------- .../aria/autocomplete/src/manual/material/app/app.html | 1 - .../aria/autocomplete/src/manual/material/app/app.ts | 7 ------- .../aria/autocomplete/src/manual/retro/app/app.html | 1 - .../examples/aria/autocomplete/src/manual/retro/app/app.ts | 7 ------- 18 files changed, 72 deletions(-) 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 c04a8fa5832..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 @@ -19,7 +19,6 @@ aria-label="Clear" (mousedown)="$event.preventDefault()" (click)="clear()" - (keydown)="onKeydown($event)" > 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 06dcb7fedf4..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 @@ -17,13 +17,6 @@ export class App { this.popupExpanded.set(false); } - onKeydown(event: KeyboardEvent) { - if (event.key === 'Enter') { - this.clear(); - event.stopPropagation(); - } - } - readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); 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 0d431833ed2..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 @@ -21,7 +21,6 @@ aria-label="Clear" (mousedown)="$event.preventDefault()" (click)="clear()" - (keydown)="onKeydown($event)" > 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 bf1e96effb9..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 @@ -18,13 +18,6 @@ export class App { this.navigated.set(false); } - onKeydown(event: KeyboardEvent) { - if (event.key === 'Enter') { - this.clear(); - event.stopPropagation(); - } - } - readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); 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 02f45057f59..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 @@ -18,7 +18,6 @@ aria-label="Clear" (mousedown)="$event.preventDefault()" (click)="clear()" - (keydown)="onKeydown($event)" > 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 721476d59f4..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 @@ -17,13 +17,6 @@ export class App { this.popupExpanded.set(false); } - onKeydown(event: KeyboardEvent) { - if (event.key === 'Enter') { - this.clear(); - event.stopPropagation(); - } - } - readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox);