test(cdk-experimental/listbox): add use case examples for the listbox

src/components-examples/cdk-experimental/listbox/cdk-listbox-active-descendant/cdk-listbox-active-descendant-example.html

@@ -0,0 +1,24 @@
+<!-- Active Descendant -->
+<div class="example-container">
+  <ul
+    cdkListbox
+    focusMode="activedescendant"
+    class="example-listbox"
+    aria-labelledby="active-descendant-label"
+  >
+    <label class="example-label" id="active-descendant-label">Active Descendant Fruits</label>
+    @for (fruit of fruits; track fruit) {
+      <li
+        class="example-option"
+        [value]="fruit"
+        cdkOption
+        #option="cdkOption"
+      >
+        <mat-pseudo-checkbox
+          [state]="option.pattern.selected() ? 'checked' : 'unchecked'"
+        ></mat-pseudo-checkbox>
+        <span>{{ fruit }}</span>
+      </li>
+    }
+  </ul>
+</div>

src/components-examples/cdk-experimental/listbox/cdk-listbox-active-descendant/cdk-listbox-active-descendant-example.ts

@@ -0,0 +1,52 @@
+import {Component} from '@angular/core';
+import {CdkListbox, CdkOption} from '@angular/cdk-experimental/listbox';
+import {MatPseudoCheckbox} from '@angular/material/core';
+
+/**
+ * @title Listbox with active descendant.
+ */
+@Component({
+  selector: 'cdk-listbox-active-descendant-example',
+  exportAs: 'cdkListboxActiveDescendantExample',
+  templateUrl: 'cdk-listbox-active-descendant-example.html',
+  styleUrl: '../cdk-listbox-configurable/cdk-listbox-configurable-example.css',
+  standalone: true,
+  imports: [CdkListbox, CdkOption, MatPseudoCheckbox],
+})
+export class CdkListboxActiveDescendantExample {
+  fruits = [
+    'Apple',
+    'Apricot',
+    'Banana',
+    'Blackberry',
+    'Blueberry',
+    'Cantaloupe',
+    'Cherry',
+    'Clementine',
+    'Cranberry',
+    'Dates',
+    'Figs',
+    'Grapes',
+    'Grapefruit',
+    'Guava',
+    'Kiwi',
+    'Kumquat',
+    'Lemon',
+    'Lime',
+    'Mandarin',
+    'Mango',
+    'Nectarine',
+    'Orange',
+    'Papaya',
+    'Passion',
+    'Peach',
+    'Pear',
+    'Pineapple',
+    'Plum',
+    'Pomegranate',
+    'Raspberries',
+    'Strawberry',
+    'Tangerine',
+    'Watermelon',
+  ];
+}

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

@@ -9,7 +9,7 @@
   gap: 4px;
   margin: 0;
   padding: 8px;
-  max-height: 50vh;
+  max-height: 300px;
   border: 1px solid var(--mat-sys-outline);
   border-radius: var(--mat-sys-corner-extra-small);
   display: flex;
@@ -31,6 +31,14 @@
   display: block;
 }
 
+.example-listbox[aria-disabled='true'] {
+  opacity: 0.5;
+}
+
+.example-listbox[aria-disabled='true'] .example-option {
+  pointer-events: none;
+}
+
 .example-label {
   padding: 16px;
   flex-shrink: 0;

src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.html

@@ -0,0 +1,85 @@
+<div class="example-listbox-controls">
+  <mat-checkbox [formControl]="wrap">Wrap</mat-checkbox>
+  <mat-checkbox [formControl]="multi">Multi</mat-checkbox>
+  <mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
+  <mat-checkbox [formControl]="readonly">Readonly</mat-checkbox>
+  <mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Selection</mat-label>
+    <mat-select [(value)]="selection" multiple>
+      @for (fruit of fruits; track fruit) {
+        <mat-option [value]="fruit">{{fruit}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Disabled Options</mat-label>
+    <mat-select [(value)]="disabledOptions" multiple>
+      @for (fruit of fruits; track fruit) {
+        <mat-option [value]="fruit">{{fruit}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Orientation</mat-label>
+    <mat-select [(value)]="orientation">
+      <mat-option value="vertical">Vertical</mat-option>
+      <mat-option value="horizontal">Horizontal</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Selection strategy</mat-label>
+    <mat-select [(value)]="selectionMode">
+      <mat-option value="explicit">Explicit</mat-option>
+      <mat-option value="follow">Follow Focus</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Focus strategy</mat-label>
+    <mat-select [(value)]="focusMode">
+      <mat-option value="roving tabindex">Roving Tabindex</mat-option>
+      <mat-option value="activedescendant">Active Descendant</mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+
+<!-- #docregion listbox -->
+<ul
+  cdkListbox
+  [value]="selection"
+  [wrap]="wrap.value"
+  [multi]="multi.value"
+  [readonly]="readonly.value"
+  [disabled]="disabled.value"
+  [skipDisabled]="skipDisabled.value"
+  [orientation]="orientation"
+  [focusMode]="focusMode"
+  [selectionMode]="selectionMode"
+  class="example-listbox"
+>
+  <label class="example-label" id="fruit-example-label">List of Fruits</label>
+
+  @for (fruit of fruits; track fruit) {
+    @let optionDisabled = disabledOptions.includes(fruit);
+
+    <li
+      class="example-option"
+      [disabled]="optionDisabled"
+      [value]="fruit"
+      cdkOption
+      #option="cdkOption"
+    >
+      <mat-pseudo-checkbox
+        [disabled]="optionDisabled"
+        [state]="option.pattern.selected() ? 'checked' : 'unchecked'"
+      ></mat-pseudo-checkbox>
+      <span>{{ fruit }}</span>
+    </li>
+  }
+</ul>
+<!-- #enddocregion listbox -->

src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.ts → src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.ts

@@ -6,12 +6,13 @@ import {MatSelectModule} from '@angular/material/select';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {MatPseudoCheckbox} from '@angular/material/core';
 
-/** @title Listbox using UI Patterns. */
+/** @title Configurable Listbox. */
 @Component({
-  selector: 'cdk-listbox-example',
-  exportAs: 'cdkListboxExample',
-  templateUrl: 'cdk-listbox-example.html',
-  styleUrl: 'cdk-listbox-example.css',
+  selector: 'cdk-listbox-configurable-example',
+  exportAs: 'cdkListboxConfigurableExample',
+  templateUrl: 'cdk-listbox-configurable-example.html',
+  styleUrl: 'cdk-listbox-configurable-example.css',
+  standalone: true,
   imports: [
     CdkListbox,
     CdkOption,
@@ -22,7 +23,7 @@ import {MatPseudoCheckbox} from '@angular/material/core';
     MatPseudoCheckbox,
   ],
 })
-export class CdkListboxExample {
+export class CdkListboxConfigurableExample {
   orientation: 'vertical' | 'horizontal' = 'vertical';
   focusMode: 'roving' | 'activedescendant' = 'roving';
   selectionMode: 'explicit' | 'follow' = 'explicit';

src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-focusable/cdk-listbox-disabled-focusable-example.html

@@ -0,0 +1,25 @@
+<!-- Disabled Options are Focusable -->
+<div class="example-container">
+  <ul
+    cdkListbox
+    [skipDisabled]="false"
+    class="example-listbox"
+    aria-labelledby="disabled-focusable-label"
+  >
+    <label class="example-label" id="disabled-focusable-label">Disabled Focusable Fruits</label>
+    @for (fruit of fruits; track fruit; let i = $index) {
+      <li
+        class="example-option"
+        [value]="fruit"
+        [disabled]="i % 2 === 0"
+        cdkOption
+        #option="cdkOption"
+      >
+        <mat-pseudo-checkbox
+          [state]="option.pattern.selected() ? 'checked' : 'unchecked'"
+        ></mat-pseudo-checkbox>
+        <span>{{ fruit }}</span>
+      </li>
+    }
+  </ul>
+</div>

src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-focusable/cdk-listbox-disabled-focusable-example.ts

@@ -0,0 +1,52 @@
+import {Component} from '@angular/core';
+import {CdkListbox, CdkOption} from '@angular/cdk-experimental/listbox';
+import {MatPseudoCheckbox} from '@angular/material/core';
+
+/**
+ * @title Listbox with focusable disabled options.
+ */
+@Component({
+  selector: 'cdk-listbox-disabled-focusable-example',
+  exportAs: 'cdkListboxDisabledFocusableExample',
+  templateUrl: 'cdk-listbox-disabled-focusable-example.html',
+  styleUrl: '../cdk-listbox-configurable/cdk-listbox-configurable-example.css',
+  standalone: true,
+  imports: [CdkListbox, CdkOption, MatPseudoCheckbox],
+})
+export class CdkListboxDisabledFocusableExample {
+  fruits = [
+    'Apple',
+    'Apricot',
+    'Banana',
+    'Blackberry',
+    'Blueberry',
+    'Cantaloupe',
+    'Cherry',
+    'Clementine',
+    'Cranberry',
+    'Dates',
+    'Figs',
+    'Grapes',
+    'Grapefruit',
+    'Guava',
+    'Kiwi',
+    'Kumquat',
+    'Lemon',
+    'Lime',
+    'Mandarin',
+    'Mango',
+    'Nectarine',
+    'Orange',
+    'Papaya',
+    'Passion',
+    'Peach',
+    'Pear',
+    'Pineapple',
+    'Plum',
+    'Pomegranate',
+    'Raspberries',
+    'Strawberry',
+    'Tangerine',
+    'Watermelon',
+  ];
+}

src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-skipped/cdk-listbox-disabled-skipped-example.html

@@ -0,0 +1,25 @@
+<!-- Disabled Options are Skipped -->
+<div class="example-container">
+  <ul
+    cdkListbox
+    [skipDisabled]="true"
+    class="example-listbox"
+    aria-labelledby="disabled-skipped-label"
+  >
+    <label class="example-label" id="disabled-skipped-label">Disabled Skipped Fruits</label>
+    @for (fruit of fruits; track fruit; let i = $index) {
+      <li
+        class="example-option"
+        [value]="fruit"
+        [disabled]="i % 2 === 0"
+        cdkOption
+        #option="cdkOption"
+      >
+        <mat-pseudo-checkbox
+          [state]="option.pattern.selected() ? 'checked' : 'unchecked'"
+        ></mat-pseudo-checkbox>
+        <span>{{ fruit }}</span>
+      </li>
+    }
+  </ul>
+</div>

src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-skipped/cdk-listbox-disabled-skipped-example.ts

@@ -0,0 +1,52 @@
+import {Component} from '@angular/core';
+import {CdkListbox, CdkOption} from '@angular/cdk-experimental/listbox';
+import {MatPseudoCheckbox} from '@angular/material/core';
+
+/**
+ * @title Listbox with skipped disabled options.
+ */
+@Component({
+  selector: 'cdk-listbox-disabled-skipped-example',
+  exportAs: 'cdkListboxDisabledSkippedExample',
+  templateUrl: 'cdk-listbox-disabled-skipped-example.html',
+  styleUrl: '../cdk-listbox-configurable/cdk-listbox-configurable-example.css',
+  standalone: true,
+  imports: [CdkListbox, CdkOption, MatPseudoCheckbox],
+})
+export class CdkListboxDisabledSkippedExample {
+  fruits = [
+    'Apple',
+    'Apricot',
+    'Banana',
+    'Blackberry',
+    'Blueberry',
+    'Cantaloupe',
+    'Cherry',
+    'Clementine',
+    'Cranberry',
+    'Dates',
+    'Figs',
+    'Grapes',
+    'Grapefruit',
+    'Guava',
+    'Kiwi',
+    'Kumquat',
+    'Lemon',
+    'Lime',
+    'Mandarin',
+    'Mango',
+    'Nectarine',
+    'Orange',
+    'Papaya',
+    'Passion',
+    'Peach',
+    'Pear',
+    'Pineapple',
+    'Plum',
+    'Pomegranate',
+    'Raspberries',
+    'Strawberry',
+    'Tangerine',
+    'Watermelon',
+  ];
+}

src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.html

@@ -0,0 +1,23 @@
+<div class="example-container">
+  <ul
+    cdkListbox
+    [disabled]="true"
+    class="example-listbox"
+    aria-labelledby="disabled-label"
+  >
+    <label class="example-label" id="disabled-label">Disabled Fruits</label>
+    @for (fruit of fruits; track fruit) {
+      <li
+        class="example-option"
+        [value]="fruit"
+        cdkOption
+        #option="cdkOption"
+      >
+        <mat-pseudo-checkbox
+          [state]="option.pattern.selected() ? 'checked' : 'unchecked'"
+        ></mat-pseudo-checkbox>
+        <span>{{ fruit }}</span>
+      </li>
+    }
+  </ul>
+</div>