feat(cdk-experimental/listbox): add cdk-active class (#30932)

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -140,6 +140,7 @@ export class CdkListbox<V> implements AfterViewInit {
   host: {
     'role': 'option',
     'class': 'cdk-option',
+    '[class.cdk-active]': 'pattern.active()',
     '[attr.tabindex]': 'pattern.tabindex()',
     '[attr.aria-selected]': 'pattern.selected()',
     '[attr.aria-disabled]': 'pattern.disabled()',

src/cdk-experimental/ui-patterns/listbox/option.ts

@@ -48,6 +48,9 @@ export class OptionPattern<V> {
         .findIndex(i => i.id() === this.id()) ?? -1,
   );
 
+  /** Whether the option is active. */
+  active = computed(() => this.listbox()?.focusManager.activeItem() === this);
+
   /** Whether the option is selected. */
   selected = computed(() => this.listbox()?.selection.inputs.value().includes(this.value()));
 

src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.css

@@ -46,8 +46,8 @@
   border-radius: var(--mat-sys-corner-extra-small);
 }
 
-.example-option[aria-disabled='false']:hover,
-.example-option[tabindex='0'] {
+.example-option.cdk-active,
+.example-option[aria-disabled='false']:hover {
   outline: 1px solid var(--mat-sys-outline);
   background: var(--mat-sys-surface-container);
 }
@@ -61,8 +61,8 @@
   background-color: var(--mat-sys-secondary-container);
 }
 
-.example-option[aria-disabled='true']:focus-within,
-.example-option[aria-disabled='true'][tabindex='0'] {
+.example-option.cdk-active[aria-disabled='true'],
+.example-option[aria-disabled='true']:focus-within {
   outline: 2px solid var(--mat-sys-outline);
 }