fix(many): disabled control in item does not receive active/hover states (#26867)

Resolves #26706

core/src/components/radio/radio.tsx

@@ -164,16 +164,23 @@ export class Radio implements ComponentInterface {
     }
   }
 
-  @Watch('color')
   @Watch('checked')
+  @Watch('color')
   @Watch('disabled')
-  emitStyle() {
+  protected styleChanged() {
+    this.emitStyle();
+  }
+
+  private emitStyle() {
+    const style: StyleEventDetail = {
+      'interactive-disabled': this.disabled,
+    };
+
     if (this.legacyFormController.hasLegacyControl()) {
-      this.ionStyle.emit({
-        'radio-checked': this.checked,
-        'interactive-disabled': this.disabled,
-      });
+      style['radio-checked'] = this.checked;
     }
+
+    this.ionStyle.emit(style);
   }
 
   private updateState = () => {

core/src/components/radio/test/item/index.html

@@ -154,6 +154,17 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>States</h1>
+        <div class="grid">
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio disabled="true">Enable Notifications</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        </div>
       </ion-content>
     </ion-app>
   </body>