refactor(cdk-experimental/radio-group): use shared example classes (#31496)

Author: wagnermaciel

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

@@ -8,7 +8,7 @@
     <label class="example-label" id="active-descendant-radio-label">Favorite Fruit (Active Descendant)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         cdkRadioButton
         #radioButton="cdkRadioButton"

src/components-examples/cdk-experimental/radio-group/cdk-radio-group-configurable/cdk-radio-group-configurable-example.html

@@ -37,12 +37,17 @@
   [skipDisabled]="skipDisabled.value"
   [orientation]="orientation"
   [focusMode]="focusMode"
-  class="example-radio-group"
+  class="example-radio-group example-parent"
   aria-label="Select your favorite fruit"
 >
   @for (fruit of fruits; track fruit) {
     @let optionDisabled = disabledOptions.includes(fruit);
-    <li cdkRadioButton [value]="fruit" [disabled]="optionDisabled" class="example-radio-button">
+    <li
+      cdkRadioButton
+      [value]="fruit"
+      [disabled]="optionDisabled"
+      class="example-radio-button example-stateful example-selectable"
+    >
       <span class="example-radio-indicator"></span>
       <span>{{ fruit }}</span>
     </li>

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

@@ -2,13 +2,13 @@
   <ul
     cdkRadioGroup
     [skipDisabled]="false"
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="disabled-focusable-radio-label"
   >
     <label class="example-label" id="disabled-focusable-radio-label">Favorite Fruit (Disabled are Focusable)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         [disabled]="disabledFruits.includes(fruit)"
         cdkRadioButton

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

@@ -1,13 +1,13 @@
 <div class="example-container">
   <ul
     cdkRadioGroup
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="disabled-skipped-radio-label"
   >
     <label class="example-label" id="disabled-skipped-radio-label">Select a Fruit (Disabled are Skipped)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         [disabled]="disabledFruits.includes(fruit)"
         cdkRadioButton

src/components-examples/cdk-experimental/radio-group/cdk-radio-group-disabled/cdk-radio-group-disabled-example.html

@@ -2,12 +2,12 @@
   <ul
     cdkRadioGroup
     [disabled]="true"
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="disabled-radio-label"
   >
     <label class="example-label" id="disabled-radio-label">Favorite Fruit (Disabled)</label>
     @for (fruit of fruits; track fruit) {
-      <li class="example-radio-button" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
+      <li class="example-radio-button example-stateful example-selectable" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
         <span
           class="example-radio-indicator"
           [class.example-radio-checked]="radioButton.pattern.selected()"

src/components-examples/cdk-experimental/radio-group/cdk-radio-group-horizontal/cdk-radio-group-horizontal-example.html

@@ -2,13 +2,13 @@
   <ul
     cdkRadioGroup
     orientation="horizontal"
-    class="example-radio-group example-radio-group-horizontal"
+    class="example-radio-group example-radio-group-horizontal example-parent"
     aria-labelledby="horizontal-radio-label"
   >
     <label class="example-label" id="horizontal-radio-label">Favorite Fruit (Horizontal)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         cdkRadioButton
         #radioButton="cdkRadioButton"

src/components-examples/cdk-experimental/radio-group/cdk-radio-group-readonly/cdk-radio-group-readonly-example.html

@@ -2,13 +2,13 @@
   <ul
     cdkRadioGroup
     [readonly]="true"
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="readonly-radio-label"
   >
     <label class="example-label" id="readonly-radio-label">Favorite Fruit (Readonly)</label>
     @for (fruit of fruits; track fruit) {
       <li
-        class="example-radio-button"
+        class="example-radio-button example-stateful example-selectable"
         [value]="fruit"
         cdkRadioButton
         #radioButton="cdkRadioButton"

src/components-examples/cdk-experimental/radio-group/cdk-radio-group-standard/cdk-radio-group-standard-example.html

@@ -1,12 +1,12 @@
 <div class="example-container">
   <ul
     cdkRadioGroup
-    class="example-radio-group"
+    class="example-radio-group example-parent"
     aria-labelledby="standard-radio-label"
   >
     <label class="example-label" id="standard-radio-label">Favorite Fruit</label>
     @for (fruit of fruits; track fruit) {
-      <li class="example-radio-button" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
+      <li class="example-radio-button example-stateful example-selectable" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
         <span
           class="example-radio-indicator"
           [class.example-radio-checked]="radioButton.pattern.selected()"

src/components-examples/cdk-experimental/radio-group/radio-common.css

@@ -23,7 +23,6 @@
 }
 
 .example-radio-group[aria-disabled='true'] {
-  background-color: var(--mat-sys-surface-dim);
   pointer-events: none;
 }
 
@@ -73,30 +72,10 @@
   background-color: var(--mat-sys-outline);
 }
 
-.example-radio-button.cdk-active,
-.example-radio-button[aria-disabled='false']:hover {
-  outline: 1px solid var(--mat-sys-outline);
-  background: var(--mat-sys-surface-container);
-}
-
-.example-radio-button[aria-disabled='false']:focus-within {
-  outline: 2px solid var(--mat-sys-primary);
-  background: var(--mat-sys-surface-container);
-}
-
-.example-radio-button.cdk-active[aria-disabled='true'],
-.example-radio-button[aria-disabled='true']:focus-within {
-  outline: 2px solid var(--mat-sys-outline);
-}
-
 .example-radio-button[aria-disabled='true'] {
   cursor: default;
 }
 
-.example-radio-button[aria-disabled='true'] span:not(.example-radio-indicator) {
-  opacity: 0.3;
-}
-
 .example-radio-button[aria-disabled='true']::before {
   content: '';
   position: absolute;