fix(card-header): reverse order of title and subtitle on ios (#26084)

BREAKING CHANGE:

- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.

BREAKING.md

@@ -15,6 +15,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [Browser and Platform Support](#version-7x-browser-platform-support)
 - [Components](#version-7x-components)
   - [Accordion Group](#version-7x-accordion-group)
+  - [Card Header](#version-7x-card-header)
   - [Checkbox](#version-7x-checkbox)
   - [Datetime](#version-7x-datetime)
   - [Input](#version-7x-input)
@@ -69,6 +70,10 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 - Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
 
+<h4 id="version-7x-card-header">Card Header</h4>
+
+- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.
+
 <h4 id="version-7x-checkbox">Checkbox</h4>
 
 `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.

core/src/components/card-header/card-header.ios.scss

@@ -6,6 +6,8 @@
 
 :host {
   @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
+
+  flex-direction: column-reverse;
 }
 
 @supports (backdrop-filter: blur(0)) {

core/src/components/card-header/card-header.scss

@@ -7,9 +7,11 @@
   --background: transparent;
   --color: inherit;
 
-  display: block;
+  display: flex;
   position: relative;
 
+  flex-direction: column;
+
   background: var(--background);
   color: var(--color);
 }

core/src/components/card-header/test/basic/index.html

@@ -24,31 +24,38 @@
 
       <ion-content id="content">
         <ion-card-header>
-          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
           <ion-card-title>Card Title</ion-card-title>
-          <ion-card-subtitle class="custom-color">Custom Subtitle</ion-card-subtitle>
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+        </ion-card-header>
+
+        <ion-card-header>
           <ion-card-title class="custom-color">Custom Title</ion-card-title>
-          <ion-card-subtitle color="secondary" class="custom-color">Color Subtitle</ion-card-subtitle>
+          <ion-card-subtitle class="custom-color">Custom Subtitle</ion-card-subtitle>
+        </ion-card-header>
+
+        <ion-card-header>
           <ion-card-title color="danger" class="custom-color">Color Title</ion-card-title>
+          <ion-card-subtitle color="secondary" class="custom-color">Color Subtitle</ion-card-subtitle>
         </ion-card-header>
 
         <ion-card class="custom-background">
           <ion-card-header class="custom-header">
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
             <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
           </ion-card-header>
           <ion-card-content> This is Card Content </ion-card-content>
         </ion-card>
 
         <ion-card class="custom-background">
           <ion-card-header color="secondary">
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
             <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
           </ion-card-header>
           <ion-card-content> Custom background, color=secondary on ion-card-header </ion-card-content>
         </ion-card>
       </ion-content>
     </ion-app>
+
     <style>
       .custom-background {
         --background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAARQAQMAAAA2ut43AAAABlBMVEXMzMz////TjRV2AAAEPUlEQVR42u3RMREAMBDDsPAn/eXhavOq87Ztu7u7+6eBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBf2hvgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgatgn4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGr7S0wMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDBwFewzMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcLW9BQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq6CfQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgautrfAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAVbDPwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNX2FhgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGLgK9hkYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBi42t4CAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV8E+AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1fbW2BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYOAq2GdgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGDgansLDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMXAX7DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDFxtb4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGrYJ+BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq+0tMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcBXsMzAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMHC1vQUGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgaugn0GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGjvYD5WuYrpZqdmcAAAAASUVORK5CYII=)

core/src/components/card/test/basic/card.e2e.ts

@@ -7,8 +7,8 @@ test.describe('card: basic', () => {
       await page.setContent(`
         <ion-card>
           <ion-card-header>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
             <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
           </ion-card-header>
 
           <ion-card-content>
@@ -56,8 +56,8 @@ test.describe('card: basic', () => {
             <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
           </div>
           <ion-card-header translucent="true">
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
             <ion-card-title> Title </ion-card-title>
+            <ion-card-subtitle> Subtitle </ion-card-subtitle>
           </ion-card-header>
 
           <ion-card-content style="min-height: 20px"></ion-card-content>
@@ -72,8 +72,8 @@ test.describe('card: basic', () => {
       await page.setContent(`
         <ion-card disabled="true">
           <ion-card-header>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
             <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
           </ion-card-header>
 
           <ion-card-content>
@@ -90,8 +90,8 @@ test.describe('card: basic', () => {
       await page.setContent(`
         <ion-card color="danger">
           <ion-card-header>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
             <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
           </ion-card-header>
 
           <ion-card-content>