From 53a795d759c36c194f7aeda01801edfeb4ba055a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 28 Oct 2025 15:13:29 -0400
Subject: [PATCH 1/6] feat(card): convert card-content to shadow DOM

---
 core/api.txt                                              | 4 ++--
 core/src/components/card-content/card-content.common.scss | 2 +-
 core/src/components/card-content/card-content.ionic.scss  | 6 +-----
 core/src/components/card-content/card-content.ios.scss    | 6 +-----
 core/src/components/card-content/card-content.md.scss     | 6 +-----
 core/src/components/card-content/card-content.native.scss | 2 +-
 core/src/components/card-content/card-content.tsx         | 8 ++++----
 core/src/css/core.scss                                    | 4 ++++
 8 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index e4597ef5934..e5b8c739316 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -179,7 +179,7 @@ ion-alert,css-prop,--width,ionic
 ion-alert,css-prop,--width,ios
 ion-alert,css-prop,--width,md
 
-ion-app,none
+ion-app,shadow
 ion-app,prop,mode,"ios" | "md",undefined,false,false
 ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
@@ -504,7 +504,7 @@ ion-card,css-prop,--color,ios
 ion-card,css-prop,--color,md
 ion-card,part,native
 
-ion-card-content,none
+ion-card-content,shadow
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
 ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
diff --git a/core/src/components/card-content/card-content.common.scss b/core/src/components/card-content/card-content.common.scss
index 499a6b5a87b..81bf1f72690 100644
--- a/core/src/components/card-content/card-content.common.scss
+++ b/core/src/components/card-content/card-content.common.scss
@@ -1,6 +1,6 @@
 // Card Content
 // --------------------------------------------------
 
-ion-card-content {
+:host {
   position: relative;
 }
diff --git a/core/src/components/card-content/card-content.ionic.scss b/core/src/components/card-content/card-content.ionic.scss
index 83504d47a12..4e91504ec96 100644
--- a/core/src/components/card-content/card-content.ionic.scss
+++ b/core/src/components/card-content/card-content.ionic.scss
@@ -4,7 +4,7 @@
 // Ionic Card Content
 // --------------------------------------------------
 
-.card-content-ionic {
+:host {
   @include globals.padding(globals.$ion-space-400);
   @include globals.typography(globals.$ion-body-md-regular);
 
@@ -18,7 +18,3 @@
     @include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
   }
 }
-
-ion-card-header + .card-content-ionic {
-  padding-top: 0;
-}
diff --git a/core/src/components/card-content/card-content.ios.scss b/core/src/components/card-content/card-content.ios.scss
index 0b772b9d45c..d8cafc28c18 100644
--- a/core/src/components/card-content/card-content.ios.scss
+++ b/core/src/components/card-content/card-content.ios.scss
@@ -4,7 +4,7 @@
 // iOS Card Header
 // --------------------------------------------------
 
-.card-content-ios {
+:host {
   @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);
 
   font-size: $card-ios-font-size;
@@ -41,7 +41,3 @@
     font-size: dynamic-font(14px);
   }
 }
-
-ion-card-header + .card-content-ios {
-  padding-top: 0;
-}
diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss
index ed780fb8e4c..2de1cae70cb 100644
--- a/core/src/components/card-content/card-content.md.scss
+++ b/core/src/components/card-content/card-content.md.scss
@@ -4,7 +4,7 @@
 // Material Design Card Content
 // --------------------------------------------------
 
-.card-content-md {
+:host {
   @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);
 
   font-size: $card-md-font-size;
@@ -44,7 +44,3 @@
     line-height: 1.5;
   }
 }
-
-ion-card-header + .card-content-md {
-  padding-top: 0;
-}
diff --git a/core/src/components/card-content/card-content.native.scss b/core/src/components/card-content/card-content.native.scss
index 4bb2efe89d2..8db97f01fd5 100644
--- a/core/src/components/card-content/card-content.native.scss
+++ b/core/src/components/card-content/card-content.native.scss
@@ -4,6 +4,6 @@
 // Card Content
 // --------------------------------------------------
 
-ion-card-content {
+:host {
   display: block;
 }
diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx
index e39bead08ae..56e8acb3b1b 100644
--- a/core/src/components/card-content/card-content.tsx
+++ b/core/src/components/card-content/card-content.tsx
@@ -14,6 +14,7 @@ import { getIonTheme } from '../../global/ionic-global';
     md: 'card-content.md.scss',
     ionic: 'card-content.ionic.scss',
   },
+  shadow: true,
 })
 export class CardContent implements ComponentInterface {
   render() {
@@ -22,11 +23,10 @@ export class CardContent implements ComponentInterface {
       <Host
         class={{
           [theme]: true,
-
-          // Used internally for styling
-          [`card-content-${theme}`]: true,
         }}
-      ></Host>
+      >
+        <slot></slot>
+      </Host>
     );
   }
 }
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 3d7a727592e..328598d703c 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -424,3 +424,7 @@ h1[tabindex="-1"]:focus,
     overflow: hidden;
   }
 }
+
+ion-card-header + ion-card-content {
+  padding-top: 0;
+}

From 11d8e67bd00b7619c6eaa4801989a21141389081 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 28 Oct 2025 15:40:56 -0400
Subject: [PATCH 2/6] chore: remove change to app done during testing

---
 core/api.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/api.txt b/core/api.txt
index e5b8c739316..38c1f188fc6 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -179,7 +179,7 @@ ion-alert,css-prop,--width,ionic
 ion-alert,css-prop,--width,ios
 ion-alert,css-prop,--width,md
 
-ion-app,shadow
+ion-app,none
 ion-app,prop,mode,"ios" | "md",undefined,false,false
 ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>

From d2ecc6843bf3d0ac3d67afd6e778a271cb7836c4 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 5 Nov 2025 10:30:05 -0500
Subject: [PATCH 3/6] refactor(card): convert styles to shadow

TODO font size does not work due to global styles
---
 .../card-content/card-content.ionic.scss      |  6 +--
 .../card-content/card-content.ios.scss        | 44 ++++++++---------
 .../card-content/card-content.md.scss         | 48 +++++++++----------
 3 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/core/src/components/card-content/card-content.ionic.scss b/core/src/components/card-content/card-content.ionic.scss
index 4e91504ec96..6bb1e965684 100644
--- a/core/src/components/card-content/card-content.ionic.scss
+++ b/core/src/components/card-content/card-content.ionic.scss
@@ -13,8 +13,8 @@
   flex-direction: column;
 
   gap: globals.$ion-space-400;
+}
 
-  img {
-    @include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
-  }
+::slotted(img) {
+  @include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
 }
diff --git a/core/src/components/card-content/card-content.ios.scss b/core/src/components/card-content/card-content.ios.scss
index d8cafc28c18..51dc074b5ef 100644
--- a/core/src/components/card-content/card-content.ios.scss
+++ b/core/src/components/card-content/card-content.ios.scss
@@ -10,34 +10,34 @@
   font-size: $card-ios-font-size;
 
   line-height: 1.4;
+}
 
-  h1 {
-    @include margin(0, 0, 2px);
+::slotted(h1) {
+  @include margin(0, 0, 2px);
 
-    font-size: dynamic-font(24px);
-    font-weight: normal;
-  }
+  font-size: dynamic-font(24px);
+  font-weight: normal;
+}
 
-  h2 {
-    @include margin(2px, 0);
+::slotted(h2) {
+  @include margin(2px, 0);
 
-    font-size: dynamic-font(16px);
-    font-weight: normal;
-  }
+  font-size: dynamic-font(16px);
+  font-weight: normal;
+}
 
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include margin(2px, 0);
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
+  @include margin(2px, 0);
 
-    font-size: dynamic-font(14px);
-    font-weight: normal;
-  }
+  font-size: dynamic-font(14px);
+  font-weight: normal;
+}
 
-  p {
-    @include margin(0, 0, 2px);
+::slotted(p) {
+  @include margin(0, 0, 2px);
 
-    font-size: dynamic-font(14px);
-  }
+  font-size: dynamic-font(14px);
 }
diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss
index 2de1cae70cb..f8d123f5e9d 100644
--- a/core/src/components/card-content/card-content.md.scss
+++ b/core/src/components/card-content/card-content.md.scss
@@ -10,37 +10,37 @@
   font-size: $card-md-font-size;
 
   line-height: $card-md-line-height;
+}
 
-  h1 {
-    @include margin(0, 0, 2px);
+::slotted(h1) {
+  @include margin(0, 0, 2px);
 
-    font-size: dynamic-font(24px);
-    font-weight: normal;
-  }
+  font-size: dynamic-font(24px);
+  font-weight: normal;
+}
 
-  h2 {
-    @include margin(2px, 0);
+::slotted(h2) {
+  @include margin(2px, 0);
 
-    font-size: dynamic-font(16px);
-    font-weight: normal;
-  }
+  font-size: dynamic-font(16px);
+  font-weight: normal;
+}
 
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include margin(2px, 0);
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
+  @include margin(2px, 0);
 
-    font-size: dynamic-font(14px);
-    font-weight: normal;
-  }
+  font-size: dynamic-font(14px);
+  font-weight: normal;
+}
 
-  p {
-    @include margin(0, 0, 2px);
+::slotted(p) {
+  @include margin(0, 0, 2px);
 
-    font-size: dynamic-font(14px);
-    font-weight: normal;
+  font-size: dynamic-font(14px);
+  font-weight: normal;
 
-    line-height: 1.5;
-  }
+  line-height: 1.5;
 }

From 4cc90d8852a92ef810c053146b3f3c74ba1f06c5 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 5 Nov 2025 10:31:36 -0500
Subject: [PATCH 4/6] test(card): add headings to basic test

---
 core/src/components/card/test/basic/index.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/core/src/components/card/test/basic/index.html b/core/src/components/card/test/basic/index.html
index 58c780a49bc..e3cbee7b989 100644
--- a/core/src/components/card/test/basic/index.html
+++ b/core/src/components/card/test/basic/index.html
@@ -34,6 +34,23 @@
             in the woods. Wash your spirit clean.
           </ion-card-content>
         </ion-card>
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <h4>Heading 4</h4>
+            <h5>Heading 5</h5>
+            <h6>Heading 6</h6>
+            <p>This is a paragraph</p>
+          </ion-card-content>
+        </ion-card>
       </ion-content>
     </ion-app>
   </body>

From 0139a046ad9a0adbbb045d7cd3e289712e54e05d Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 5 Nov 2025 10:36:12 -0500
Subject: [PATCH 5/6] docs(breaking): add the card-content update to shadow

---
 BREAKING.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index 3575a2a4387..5402d334613 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -28,7 +28,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 <h4 id="version-9x-card">Card</h4>
 
-- The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+- **ion-card**: The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+
+- **ion-card-content**: The `ion-card-content` component has been updated to Shadow DOM. With this update, all card-related components now use Shadow DOM for style encapsulation.
 
 <h4 id="version-9x-chip">Chip</h4>
 
@@ -134,4 +136,4 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
     </ion-col>
   </ion-row>
 </ion-grid>
-```
\ No newline at end of file
+```

From 1a9f99fda58856542c0bd442eb5462a4823e067a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 5 Nov 2025 10:38:10 -0500
Subject: [PATCH 6/6] docs: formatting

---
 BREAKING.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/BREAKING.md b/BREAKING.md
index 5402d334613..65569e4660c 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -43,6 +43,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 <h5>Example 1: Swap two columns</h5>
 
 **Version up to 8.x**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -52,7 +53,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -64,9 +67,11 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ```
 
 <h5>Example 2: Reorder columns with specific sizes</h5>
+
 To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
 
 **Version up to 8.x**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -75,7 +80,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -84,7 +91,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 <h5>Example 3: Push</h5>
+
 ```html
 <ion-grid>
   <ion-row>
@@ -97,7 +106,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -112,6 +123,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 ```
 
 <h5>Example 4: Push and Pull</h5>
+
 ```html
 <ion-grid>
   <ion-row>
@@ -124,7 +136,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>