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

Resolves #26706

core/src/components/checkbox/checkbox.tsx

@@ -150,23 +150,22 @@ export class Checkbox implements ComponentInterface {
   }
 
   @Watch('checked')
-  checkedChanged() {
-    this.emitStyle();
-  }
-
   @Watch('disabled')
-  disabledChanged() {
+  protected styleChanged() {
     this.emitStyle();
   }
 
-  // TODO(FW-3100): remove this
   private emitStyle() {
+    const style: StyleEventDetail = {
+      'interactive-disabled': this.disabled,
+    };
+
+    // TODO(FW-3100): remove this
     if (this.legacyFormController.hasLegacyControl()) {
-      this.ionStyle.emit({
-        'checkbox-checked': this.checked,
-        'interactive-disabled': this.disabled,
-      });
+      style['checkbox-checked'] = this.checked;
     }
+
+    this.ionStyle.emit(style);
   }
 
   private setFocus() {

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

@@ -136,6 +136,18 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>States</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Disabled</h2>
+            <ion-list>
+              <ion-item>
+                <ion-checkbox disabled="true">Enable Notifications</ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>