refactor(multiple): add comprehensive simple-combobox examples and refine behavior

- Adds new examples for simple-combobox: auto-select, highlight, disabled, readonly, and dialog popups.
- Refactors existing datepicker and grid examples for better interaction patterns.
- Introduces alwaysExpanded input to SimpleCombobox for persistent popup states.
- Refines selection behavior in ListboxPattern when followFocus is enabled.
- Cleans up unused inline-suggestion examples and console logs.

Author: tjshiu

src/aria/private/grid/widget.ts

@@ -75,7 +75,6 @@ export class GridCellWidgetPattern {
     // However, it does need to capture Enter key and trigger a click on the host element
     // since the browser won't do it for us in activedescendant mode.
     if (this.inputs.widgetType() === 'simple') {
-      console.log('simple widget keydown');
       manager.on('Enter', () => this.element().click());
       return manager;
     }
@@ -114,7 +113,6 @@ export class GridCellWidgetPattern {
   /** Handles keydown events for the widget. */
   onKeydown(event: KeyboardEvent): void {
     if (this.disabled()) return;
-    console.log('keydown of widget.ts');
 
     this.keydown().handle(event);
   }

src/aria/private/listbox/listbox.ts

@@ -264,6 +264,9 @@ export class ListboxPattern<V> {
 
     if (firstItem) {
       this.inputs.activeItem.set(firstItem);
+      if (this.followFocus()) {
+        this.listBehavior.select();
+      }
     }
   }
 

src/aria/private/simple-combobox/simple-combobox.ts

@@ -7,12 +7,15 @@
  */
 
 import {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';
-import {computed, signal, untracked} from '@angular/core';
+import {afterRenderEffect, computed, signal, untracked} from '@angular/core';
 import {SignalLike, WritableSignalLike} from '../behaviors/signal-like/signal-like';
 import {ExpansionItem} from '../behaviors/expansion/expansion';
 
 /** Represents the required inputs for a simple combobox. */
 export interface SimpleComboboxInputs extends ExpansionItem {
+  /** Whether the combobox should always remain expanded. */
+  alwaysExpanded: SignalLike<boolean>;
+
   /** The value of the combobox. */
   value: WritableSignalLike<string>;
 
@@ -123,7 +126,11 @@ export class SimpleComboboxPattern {
       .on('Enter', e => this.keyboardEventRelay.set(e))
       .on('PageUp', e => this.keyboardEventRelay.set(e))
       .on('PageDown', e => this.keyboardEventRelay.set(e))
-      .on('Escape', () => this.expanded.set(false));
+      .on('Escape', () => {
+        if (!this.inputs.alwaysExpanded()) {
+          this.expanded.set(false);
+        }
+      });
 
     if (!this.isEditable()) {
       manager
@@ -150,6 +157,12 @@ export class SimpleComboboxPattern {
   constructor(readonly inputs: SimpleComboboxInputs) {
     this.expanded = inputs.expanded;
     this.value = inputs.value;
+
+    afterRenderEffect(() => {
+      if (this.inputs.alwaysExpanded()) {
+        this.expanded.set(true);
+      }
+    });
   }
 
   /** Handles keydown events for the combobox. */
@@ -226,7 +239,7 @@ export class SimpleComboboxPattern {
     const expanded = this.expanded();
     const comboboxFocused = this.isFocused();
     const popupFocused = !!this.inputs.popup()?.isFocused();
-    if (expanded && !comboboxFocused && !popupFocused) {
+    if (expanded && !this.inputs.alwaysExpanded() && !comboboxFocused && !popupFocused) {
       this.expanded.set(false);
     }
   }

src/aria/simple-combobox/simple-combobox.ts

@@ -78,6 +78,9 @@ export class Combobox extends DeferredContentAware {
   /** Whether the combobox is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
 
+  /** Whether the combobox should always remain expanded. */
+  readonly alwaysExpanded = input(false, {transform: booleanAttribute});
+
   /** Whether the combobox is expanded. */
   readonly expanded = model<boolean>(false);
 

src/components-examples/aria/simple-combobox/index.ts

@@ -1,6 +1,14 @@
 export {SimpleComboboxListboxExample} from './simple-combobox-listbox/simple-combobox-listbox-example';
-export {SimpleComboboxListboxInlineExample} from './simple-combobox-listbox-inline/simple-combobox-listbox-inline-example';
 export {SimpleComboboxTreeExample} from './simple-combobox-tree/simple-combobox-tree-example';
 export {SimpleComboboxSelectExample} from './simple-combobox-select/simple-combobox-select-example';
 export {SimpleComboboxGridExample} from './simple-combobox-grid/simple-combobox-grid-example';
 export {SimpleComboboxDatepickerExample} from './simple-combobox-datepicker/simple-combobox-datepicker-example';
+export {SimpleComboboxAutoSelectExample} from './simple-combobox-auto-select/simple-combobox-auto-select-example';
+export {SimpleComboboxHighlightExample} from './simple-combobox-highlight/simple-combobox-highlight-example';
+export {SimpleComboboxDisabledExample} from './simple-combobox-disabled/simple-combobox-disabled-example';
+export {SimpleComboboxReadonlyDisabledExample} from './simple-combobox-readonly-disabled/simple-combobox-readonly-disabled-example';
+export {SimpleComboboxReadonlyMultiselectExample} from './simple-combobox-readonly-multiselect/simple-combobox-readonly-multiselect-example';
+export {SimpleComboboxDialogExample} from './simple-combobox-dialog/simple-combobox-dialog-example';
+export {SimpleComboboxTreeAutoSelectExample} from './simple-combobox-tree-auto-select/simple-combobox-tree-auto-select-example';
+export {SimpleComboboxTreeHighlightExample} from './simple-combobox-tree-highlight/simple-combobox-tree-highlight-example';
+// Force watcher update

src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.html

@@ -0,0 +1,47 @@
+<div class="example-combobox-container">
+  <div #origin class="example-combobox-input-container">
+    <span class="material-symbols-outlined example-icon example-search-icon">search</span>
+    <input
+      ngCombobox
+      #combobox="ngCombobox"
+      class="example-combobox-input"
+      placeholder="Search states..."
+      [(value)]="searchString"
+      [(expanded)]="popupExpanded"
+    />
+  </div>
+
+  <ng-template
+    [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
+    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayDisableClose]="true"
+  >
+    <ng-template ngComboboxPopup [combobox]="combobox">
+        <div
+          ngListbox
+          ngComboboxWidget
+          class="example-listbox example-popup"
+          focusMode="activedescendant"
+          [(value)]="selectedOption"
+          (click)="onCommit()"
+          (keydown.enter)="onCommit()"
+        >
+          @for (option of options(); track option) {
+            <div
+              class="example-option example-selectable example-stateful"
+              ngOption
+              [value]="option"
+              [label]="option"
+            >
+              <span>{{option}}</span>
+              <span
+                aria-hidden="true"
+                class="material-symbols-outlined example-icon example-selected-icon"
+                >check</span
+              >
+            </div>
+          }
+        </div>
+    </ng-template>
+  </ng-template>
+</div>

src/components-examples/aria/simple-combobox/simple-combobox-auto-select/simple-combobox-auto-select-example.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/simple-combobox';
+import {Listbox, Option} from '@angular/aria/listbox';
+import {afterRenderEffect, Component, computed, signal, viewChild, untracked} from '@angular/core';
+import {OverlayModule} from '@angular/cdk/overlay';
+
+/** @title Simple Combobox Auto Select */
+@Component({
+  selector: 'simple-combobox-auto-select-example',
+  templateUrl: 'simple-combobox-auto-select-example.html',
+  styleUrl: '../simple-combobox-examples.css',
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
+})
+export class SimpleComboboxAutoSelectExample {
+  readonly listbox = viewChild(Listbox);
+
+  popupExpanded = signal(false);
+  searchString = signal('');
+  selectedOption = signal<string[]>([]);
+
+  options = computed(() =>
+    states.filter(state => state.toLowerCase().startsWith(this.searchString().toLowerCase())),
+  );
+
+  constructor() {
+    afterRenderEffect(() => {
+      this.listbox()?.scrollActiveItemIntoView();
+    });
+  }
+
+  onCommit() {
+    const selectedOption = this.selectedOption();
+    if (selectedOption.length > 0) {
+      this.searchString.set(selectedOption[0]);
+    }
+    this.popupExpanded.set(false);
+  }
+}
+
+const states = [
+  'Alabama',
+  'Alaska',
+  'Arizona',
+  'Arkansas',
+  'California',
+  'Colorado',
+  'Connecticut',
+  'Delaware',
+  'Florida',
+  'Georgia',
+  'Hawaii',
+  'Idaho',
+  'Illinois',
+  'Indiana',
+  'Iowa',
+  'Kansas',
+  'Kentucky',
+  'Louisiana',
+  'Maine',
+  'Maryland',
+  'Massachusetts',
+  'Michigan',
+  'Minnesota',
+  'Mississippi',
+  'Missouri',
+  'Montana',
+  'Nebraska',
+  'Nevada',
+  'New Hampshire',
+  'New Jersey',
+  'New Mexico',
+  'New York',
+  'North Carolina',
+  'North Dakota',
+  'Ohio',
+  'Oklahoma',
+  'Oregon',
+  'Pennsylvania',
+  'Rhode Island',
+  'South Carolina',
+  'South Dakota',
+  'Tennessee',
+  'Texas',
+  'Utah',
+  'Vermont',
+  'Virginia',
+  'Washington',
+  'West Virginia',
+  'Wisconsin',
+  'Wyoming',
+];

src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.css

@@ -85,24 +85,22 @@
   background-color: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
 }
 
-/* Show circular focus ring on the day button when active using box-shadow */
-/* Subdued grey by default when navigating from the input */
-.example-datepicker-cell[data-active='true'] .example-datepicker-day-button {
-  box-shadow: 0 0 0 2px var(--mat-sys-outline);
+.example-datepicker-cell:focus-within {
+  outline: 2px solid var(--mat-sys-primary);
+  outline-offset: -2px;
 }
 
-/* Highlight circle with primary color when the grid has actual focus */
-.example-datepicker-grid:focus .example-datepicker-cell[data-active='true'] .example-datepicker-day-button,
-.example-datepicker-grid:focus-within .example-datepicker-cell[data-active='true'] .example-datepicker-day-button {
-  box-shadow: 0 0 0 2px var(--mat-sys-primary);
-}
-
-/* Hide all grid focus indicators when focus is in the header navigation */
-.example-datepicker-header:focus-within~.example-datepicker-grid .example-datepicker-cell[data-active='true'] .example-datepicker-day-button {
-  box-shadow: none;
+.example-datepicker-day-button:focus {
+  outline: none;
 }
 
 .example-datepicker-cell[aria-selected='true'] .example-datepicker-day-button {
   background-color: var(--mat-sys-primary);
   color: var(--mat-sys-on-primary);
-}
+}
+
+.example-combobox-hint {
+  font-size: 0.75rem;
+  color: var(--mat-sys-on-surface-variant);
+  margin-top: 4px;
+}