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"