feat(list-header): support dynamic type (#27938)

Adds support for dynamic type by converting `font-size` to use `rem` units and setting a max `font-size` which matches native iOS.

core/src/components/list-header/list-header.ios.vars.scss

@@ -8,7 +8,7 @@
 $list-header-ios-padding-start:       $item-ios-padding-start !default;
 
 /// @prop - Font size of the list header
-$list-header-ios-font-size:           22px !default;
+$list-header-ios-font-size:           min(1.375rem, 56px) !default;
 
 /// @prop - Font weight of the list header
 $list-header-ios-font-weight:         700 !default;

core/src/components/list-header/list-header.md.vars.scss

@@ -11,7 +11,7 @@ $list-header-md-padding-start:   $item-md-padding-start !default;
 $list-header-md-min-height:      45px !default;
 
 /// @prop - Font size of the list header
-$list-header-md-font-size:       14px !default;
+$list-header-md-font-size:       0.875rem !default;
 
 /// @prop - Text color of the list header
 $list-header-md-color:           $text-color !default;

core/src/components/list-header/test/a11y/list-header.e2e.ts

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('list-header: font scaling'), () => {
+    test('should scale default list-header text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-list-header>
+          <ion-label>List Header</ion-label>
+        </ion-list-header>
+      `,
+        config
+      );
+
+      const listHeader = page.locator('ion-list-header');
+
+      await expect(listHeader).toHaveScreenshot(screenshot(`list-header-default-scale`));
+    });
+  });
+});