refactor(cdk-experimental/listbox): create reusable example classes (#31487)

Author: wagnermaciel

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"

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);
-}

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,22 +61,22 @@
   [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>
 
   @for (fruit of fruits; track fruit) {
     @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>

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

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

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"

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"

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"

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"

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"

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"

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"

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"

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",

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);
+}

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