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.
@@ -94,7 +99,7 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 <h4 id="version-7x-overlays">Overlays</h4>
 
-Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. 
+Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead.
 
 <h4 id="version-7x-range">Range</h4>
 
@@ -130,7 +135,7 @@ iOS:
 
 - The type signature of `value` supports `string | undefined`. Previously the type signature was `string | null | undefined`.
   - Developers needing to clear the checked segment item should assign a value of `''` instead of `null`.
-  
+
 <h4 id="version-7x-select">Select</h4>
 
 - `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
@@ -488,7 +493,7 @@ Developers must now provide an `ion-router-outlet` inside of `ion-tabs`. Previou
 <script>
   import { IonTabs, IonTabBar } from '@ionic/vue';
   import { defineComponent } from 'vue';
-  
+
   export default defineComponent({
     components: { IonTabs, IonTabBar }
   });
@@ -507,7 +512,7 @@ Developers must now provide an `ion-router-outlet` inside of `ion-tabs`. Previou
 <script>
   import { IonTabs, IonTabBar, IonRouterOutlet } from '@ionic/vue';
   import { defineComponent } from 'vue';
-  
+
   export default defineComponent({
     components: { IonTabs, IonTabBar, IonRouterOutlet }
   });

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)) {
@@ -13,4 +15,4 @@
     background-color: $card-ios-header-translucent-background-color;
     backdrop-filter: $card-ios-header-translucent-filter;
   }
-}
+}

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>