From 558ea694af399048629a0bcb66173d4b742f0c5e Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Wed, 2 Jul 2025 15:40:18 -0400
Subject: [PATCH] refactor(cdk-experimental/listbox): create reusable example
 classes

---
 ...cdk-listbox-active-descendant-example.html |  4 +-
 .../cdk-listbox-configurable-example.css      | 40 --------------
 .../cdk-listbox-configurable-example.html     |  7 +--
 ...dk-listbox-disabled-focusable-example.html |  4 +-
 .../cdk-listbox-disabled-skipped-example.html |  4 +-
 .../cdk-listbox-disabled-example.html         |  4 +-
 .../cdk-listbox-horizontal-example.html       |  4 +-
 ...box-multi-select-follow-focus-example.html |  4 +-
 .../cdk-listbox-multi-select-example.html     |  4 +-
 .../cdk-listbox-readonly-example.html         |  4 +-
 .../cdk-listbox-rtl-horizontal-example.html   |  4 +-
 ...ox-single-select-follow-focus-example.html |  4 +-
 .../cdk-listbox-single-select-example.html    |  4 +-
 src/dev-app/BUILD.bazel                       |  1 +
 src/dev-app/common-classes.css                | 53 +++++++++++++++++++
 src/dev-app/index.html                        |  1 +
 16 files changed, 81 insertions(+), 65 deletions(-)
 create mode 100644 src/dev-app/common-classes.css

diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-active-descendant/cdk-listbox-active-descendant-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-active-descendant/cdk-listbox-active-descendant-example.html
index 991e7ada4027..3668430f399b 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-active-descendant/cdk-listbox-active-descendant-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-active-descendant/cdk-listbox-active-descendant-example.html
@@ -3,13 +3,13 @@
   <ul
     cdkListbox
     focusMode="activedescendant"
-    class="example-listbox"
+    class="example-listbox example-parent"
     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"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css
index 18623b6ccfdb..efc62874359a 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css
@@ -31,10 +31,6 @@
   display: block;
 }
 
-.example-listbox[aria-disabled='true'] {
-  opacity: 0.5;
-}
-
 .example-listbox[aria-disabled='true'] .example-option {
   pointer-events: none;
 }
@@ -53,39 +49,3 @@
   align-items: center;
   border-radius: var(--mat-sys-corner-extra-small);
 }
-
-.example-option.cdk-active,
-.example-option[aria-disabled='false']:hover {
-  outline: 1px solid var(--mat-sys-outline);
-  background: var(--mat-sys-surface-container);
-}
-
-.example-option[aria-disabled='false']:focus-within {
-  outline: 2px solid var(--mat-sys-primary);
-  background: var(--mat-sys-surface-container);
-}
-
-.example-option[aria-disabled='false'][aria-selected='true'] {
-  background-color: var(--mat-sys-secondary-container);
-}
-
-.example-option.cdk-active[aria-disabled='true'],
-.example-option[aria-disabled='true']:focus-within {
-  outline: 2px solid var(--mat-sys-outline);
-}
-
-.example-option[aria-disabled='true'] span {
-  opacity: 0.3;
-}
-
-.example-option[aria-disabled='true']::before {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border-radius: var(--mat-sys-corner-extra-small);
-  background-color: var(--mat-sys-on-surface);
-  opacity: var(--mat-sys-focus-state-layer-opacity);
-}
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.html
index 2e7b45026674..720d265f7472 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.html
@@ -51,6 +51,7 @@
 <!-- #docregion listbox -->
 <ul
   cdkListbox
+  #listbox="cdkListbox"
   [value]="selection"
   [wrap]="wrap.value"
   [multi]="multi.value"
@@ -60,7 +61,7 @@
   [orientation]="orientation"
   [focusMode]="focusMode"
   [selectionMode]="selectionMode"
-  class="example-listbox"
+  class="example-listbox example-parent"
 >
   <label class="example-label" id="fruit-example-label">List of Fruits</label>
 
@@ -68,14 +69,14 @@
     @let optionDisabled = disabledOptions.includes(fruit);
 
     <li
-      class="example-option"
+      class="example-option example-stateful example-selectable"
       [disabled]="optionDisabled"
       [value]="fruit"
       cdkOption
       #option="cdkOption"
     >
       <mat-pseudo-checkbox
-        [disabled]="optionDisabled"
+        [disabled]="optionDisabled || listbox.disabled()"
         [state]="option.pattern.selected() ? 'checked' : 'unchecked'"
       ></mat-pseudo-checkbox>
       <span>{{ fruit }}</span>
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-focusable/cdk-listbox-disabled-focusable-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-focusable/cdk-listbox-disabled-focusable-example.html
index 1fa8e3c12ed9..4960a3e244c2 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-focusable/cdk-listbox-disabled-focusable-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-focusable/cdk-listbox-disabled-focusable-example.html
@@ -3,13 +3,13 @@
   <ul
     cdkListbox
     [skipDisabled]="false"
-    class="example-listbox"
+    class="example-listbox example-parent"
     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"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         [disabled]="i % 2 === 0"
         cdkOption
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-skipped/cdk-listbox-disabled-skipped-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-skipped/cdk-listbox-disabled-skipped-example.html
index 2a33af633673..5cba3b6fd552 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-skipped/cdk-listbox-disabled-skipped-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-skipped/cdk-listbox-disabled-skipped-example.html
@@ -3,13 +3,13 @@
   <ul
     cdkListbox
     [skipDisabled]="true"
-    class="example-listbox"
+    class="example-listbox example-parent"
     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"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         [disabled]="i % 2 === 0"
         cdkOption
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.html
index 1a8a6454d028..07a8c6165db0 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.html
@@ -2,13 +2,13 @@
   <ul
     cdkListbox
     [disabled]="true"
-    class="example-listbox"
+    class="example-listbox example-parent"
     aria-labelledby="disabled-label"
   >
     <label class="example-label" id="disabled-label">Disabled Fruits</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-option"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html
index 10534294e3d8..ac244698242d 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html
@@ -3,13 +3,13 @@
   <ul
     cdkListbox
     orientation="horizontal"
-    class="example-listbox"
+    class="example-listbox example-parent"
     aria-labelledby="horizontal-label"
   >
     <label class="example-label" id="horizontal-label">Horizontal Fruits</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-option"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-multi-select-follow-focus/cdk-listbox-multi-select-follow-focus-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-multi-select-follow-focus/cdk-listbox-multi-select-follow-focus-example.html
index 5e432dfecba5..c02c74357291 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-multi-select-follow-focus/cdk-listbox-multi-select-follow-focus-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-multi-select-follow-focus/cdk-listbox-multi-select-follow-focus-example.html
@@ -4,13 +4,13 @@
     cdkListbox
     [multi]="true"
     selectionMode="follow"
-    class="example-listbox"
+    class="example-listbox example-parent"
     aria-labelledby="multi-follow-label"
   >
     <label class="example-label" id="multi-follow-label">Multi Select (Follow Focus) Fruits</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-option"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-multi-select/cdk-listbox-multi-select-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-multi-select/cdk-listbox-multi-select-example.html
index 8e919efe4afa..29e5fde39a7a 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-multi-select/cdk-listbox-multi-select-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-multi-select/cdk-listbox-multi-select-example.html
@@ -4,13 +4,13 @@
     cdkListbox
     [multi]="true"
     selectionMode="explicit"
-    class="example-listbox"
+    class="example-listbox example-parent"
     aria-labelledby="multi-select-label"
   >
     <label class="example-label" id="multi-select-label">Multi Select Fruits</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-option"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-readonly/cdk-listbox-readonly-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-readonly/cdk-listbox-readonly-example.html
index 25d87f9374ae..cf1d393ddc74 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-readonly/cdk-listbox-readonly-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-readonly/cdk-listbox-readonly-example.html
@@ -3,13 +3,13 @@
   <ul
     cdkListbox
     [readonly]="true"
-    class="example-listbox"
+    class="example-listbox example-parent"
     aria-labelledby="readonly-label"
   >
     <label class="example-label" id="readonly-label">Readonly Fruits</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-option"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-rtl-horizontal/cdk-listbox-rtl-horizontal-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-rtl-horizontal/cdk-listbox-rtl-horizontal-example.html
index acbb2687b853..3728f0341aba 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-rtl-horizontal/cdk-listbox-rtl-horizontal-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-rtl-horizontal/cdk-listbox-rtl-horizontal-example.html
@@ -3,13 +3,13 @@
   <ul
     cdkListbox
     orientation="horizontal"
-    class="example-listbox"
+    class="example-listbox example-parent"
     aria-labelledby="rtl-horizontal-label"
   >
     <label class="example-label" id="rtl-horizontal-label">RTL Horizontal Fruits</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-option"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-single-select-follow-focus/cdk-listbox-single-select-follow-focus-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-single-select-follow-focus/cdk-listbox-single-select-follow-focus-example.html
index c89087b2d263..f8a72a5bd1b2 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-single-select-follow-focus/cdk-listbox-single-select-follow-focus-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-single-select-follow-focus/cdk-listbox-single-select-follow-focus-example.html
@@ -4,13 +4,13 @@
     cdkListbox
     [multi]="false"
     selectionMode="follow"
-    class="example-listbox"
+    class="example-listbox example-parent"
     aria-labelledby="single-follow-label"
   >
     <label class="example-label" id="single-follow-label">Single Select (Follow Focus) Fruits</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-option"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-single-select/cdk-listbox-single-select-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox-single-select/cdk-listbox-single-select-example.html
index 08ee0a68084c..9f513f703b96 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-single-select/cdk-listbox-single-select-example.html
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-single-select/cdk-listbox-single-select-example.html
@@ -4,13 +4,13 @@
     cdkListbox
     [multi]="false"
     selectionMode="explicit"
-    class="example-listbox"
+    class="example-listbox example-parent"
     aria-labelledby="single-select-label"
   >
     <label class="example-label" id="single-select-label">Single Select Fruits</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-option"
+        class="example-option example-stateful example-selectable"
         [value]="fruit"
         cdkOption
         #option="cdkOption"
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index 87dc40f20802..bfff3ac9479a 100644
--- a/src/dev-app/BUILD.bazel
+++ b/src/dev-app/BUILD.bazel
@@ -153,6 +153,7 @@ filegroup(
 filegroup(
     name = "dev_app_static_files",
     srcs = [
+        "common-classes.css",
         "favicon.ico",
         "index.html",
         ":theme",
diff --git a/src/dev-app/common-classes.css b/src/dev-app/common-classes.css
new file mode 100644
index 000000000000..2e2c0c6b5ab1
--- /dev/null
+++ b/src/dev-app/common-classes.css
@@ -0,0 +1,53 @@
+.example-surface {
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+}
+
+[aria-disabled='true'] .example-stateful,
+.example-stateful[aria-disabled='true'] {
+  color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
+}
+
+.example-stateful:focus {
+  background: color-mix(
+    in srgb,
+    var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
+    transparent
+  );
+}
+
+.example-stateful:hover {
+  background: color-mix(
+    in srgb,
+    var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+    transparent
+  );
+}
+
+.example-stateful:focus[aria-disabled='true'],
+.example-stateful:hover[aria-disabled='true'],
+[aria-disabled='true'] .example-stateful:focus,
+[aria-disabled='true'] .example-stateful:hover {
+  background: var(--mat-sys-surface);
+}
+
+.example-selectable[aria-selected='true'],
+.example-selectable[aria-checked='true'] {
+  background: color-mix(
+    in srgb,
+    var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%),
+    transparent
+  );
+}
+
+.example-selectable[aria-selected='true']:focus-within,
+.example-selectable[aria-checked='true']:focus-within {
+  outline: var(--mat-sys-primary) solid 2px;
+}
+
+[aria-disabled='true'] .example-selectable[aria-selected='true'],
+.example-selectable[aria-disabled='true'][aria-selected='true'],
+[aria-disabled='true'] .example-selectable[aria-checked='true'],
+.example-selectable[aria-disabled='true'][aria-checked='true'] {
+  background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
+}
diff --git a/src/dev-app/index.html b/src/dev-app/index.html
index f0982521183d..37466cfede07 100644
--- a/src/dev-app/index.html
+++ b/src/dev-app/index.html
@@ -17,6 +17,7 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
       rel="stylesheet"
     />
+    <link href="common-classes.css" rel="stylesheet" />
 
     <!-- FontAwesome for mat-icon demo. -->
     <link