voyager-ionic-core 7.4.4 → 7.5.1

package/dist/collection/components/item/item.md.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the item
@@ -61,7 +94,7 @@
   --show-full-highlight: 0;
   --show-inset-highlight: 0;
   --detail-icon-color: initial;
-  --detail-icon-font-size: 20px;
+  --detail-icon-font-size: 1.25em;
   --detail-icon-opacity: 0.25;
   --color-activated: var(--color);
   --color-focused: var(--color);
@@ -454,7 +487,7 @@ ion-ripple-effect {
 ::slotted([slot=error]),
 .item-counter {
   padding-top: 5px;
-  font-size: 12px;
+  font-size: 0.75rem;
   z-index: 1;
 }
 
@@ -472,6 +505,105 @@ ion-ripple-effect {
     transition: none;
   }
 }
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --min-height: 48px;
   --background: var(--ion-item-background, var(--ion-background-color, #fff));
@@ -491,7 +623,7 @@ ion-ripple-effect {
   --highlight-color-focused: var(--ion-color-primary, #3880ff);
   --highlight-color-valid: var(--ion-color-success, #2dd36f);
   --highlight-color-invalid: var(--ion-color-danger, #eb445a);
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: normal;
   text-transform: none;
 }
@@ -650,7 +782,7 @@ ion-ripple-effect {
 
 ::slotted(ion-icon) {
   color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
-  font-size: 24px;
+  font-size: 1.5em;
 }
 
 :host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(ion-icon) {
@@ -692,7 +824,7 @@ ion-ripple-effect {
   margin-top: 0;
   margin-bottom: 0;
   align-self: flex-start;
-  font-size: 11px;
+  font-size: 0.6875rem;
 }
 
 ::slotted(ion-note[slot]:not([slot=helper]):not([slot=error])) {
@@ -769,7 +901,7 @@ ion-ripple-effect {
   --padding-start: .6em;
   --padding-end: .6em;
   min-height: 25px;
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 :host(.item-label-floating),

package/dist/collection/components/item/test/a11y/item.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('item: axe'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.goto(`/src/components/item/test/a11y`, config);
@@ -25,4 +25,119 @@ configs().forEach(({ title, config }) => {
       expect(await item2.getAttribute('aria-label')).toEqual('test');
     });
   });
+  test.describe(title('item: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-item>
+          <ion-label>Item</ion-label>
+        </ion-item>
+      `, config);
+      const item = page.locator('ion-item');
+      await expect(item).toHaveScreenshot(screenshot(`item-scale`));
+    });
+    test('should scale slotted icons on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-item>
+          <ion-icon slot="start" name="star"></ion-icon>
+          <ion-label>Item</ion-label>
+          <ion-icon slot="end" name="flag"></ion-icon>
+        </ion-item>
+      `, config);
+      const item = page.locator('ion-item');
+      await expect(item).toHaveScreenshot(screenshot(`item-icons-scale`));
+    });
+    test('should scale detail icon on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-item detail="true">
+          <ion-label>Item</ion-label>
+        </ion-item>
+      `, config);
+      const item = page.locator('ion-item');
+      await expect(item).toHaveScreenshot(screenshot(`item-detail-icon-scale`));
+    });
+    test('should scale counter text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-item counter="true">
+          <ion-label position="stacked">Counter</ion-label>
+          <ion-input maxlength="20"></ion-input>
+        </ion-item>
+      `, config);
+      const item = page.locator('ion-item');
+      await expect(item).toHaveScreenshot(screenshot(`item-counter-text-scale`));
+    });
+    test('should scale helper and error text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-list>
+          <ion-item>
+            <ion-label>Helper</ion-label>
+            <ion-input></ion-input>
+            <ion-note slot="helper">Helper Text</ion-note>
+          </ion-item>
+          <ion-item class="ion-invalid">
+            <ion-label>Error</ion-label>
+            <ion-input></ion-input>
+            <ion-note slot="error">Error Text</ion-note>
+          </ion-item>
+        </ion-list>
+      `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`item-helper-error-text-scale`));
+    });
+    test('should scale buttons in an item on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-list>
+          <ion-item>
+            <ion-label>Item</ion-label>
+            <ion-button>Default</ion-button>
+          </ion-item>
+          <ion-item>
+            <ion-label>Item</ion-label>
+            <ion-button size="small">Small</ion-button>
+          </ion-item>
+          <ion-item>
+            <ion-label>Item</ion-label>
+            <ion-button size="large">Large</ion-button>
+          </ion-item>
+        </ion-list>
+      `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`item-buttons-scale`));
+    });
+  });
 });

package/dist/collection/components/item-divider/item-divider.ios.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the item divider
@@ -87,6 +120,72 @@
   overflow: hidden;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --background: var(--ion-color-step-100, #e6e6e6);
   --color: var(--ion-color-step-850, #262626);
@@ -95,7 +194,7 @@
   border-radius: 0;
   position: relative;
   min-height: 28px;
-  font-size: 17px;
+  font-size: 1.0625rem;
   font-weight: 600;
 }
 
@@ -119,8 +218,6 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
-  font-size: 24px;
-  font-weight: normal;
 }
 
 ::slotted(h2) {
@@ -128,8 +225,6 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
-  font-size: 17px;
-  font-weight: normal;
 }
 
 ::slotted(h3),
@@ -140,9 +235,6 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 3px;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: normal;
 }
 
 ::slotted(p) {
@@ -151,7 +243,7 @@
   margin-top: 0;
   margin-bottom: 2px;
   color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: normal;
   text-overflow: inherit;
   overflow: inherit;

package/dist/collection/components/item-divider/item-divider.md.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the item divider
@@ -87,6 +120,72 @@
   overflow: hidden;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --background: var(--ion-background-color, #fff);
   --color: var(--ion-color-step-400, #999999);
@@ -94,7 +193,7 @@
   --inner-padding-end: 16px;
   min-height: 30px;
   border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 ::slotted([slot=start]) {
@@ -116,7 +215,7 @@
 
 ::slotted(ion-icon) {
   color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
-  font-size: 24px;
+  font-size: 1.7142857143em;
 }
 
 :host(.ion-color) ::slotted(ion-icon) {
@@ -144,7 +243,7 @@
   margin-top: 0;
   margin-bottom: 0;
   align-self: flex-start;
-  font-size: 11px;
+  font-size: 0.6875rem;
 }
 
 ::slotted(ion-note[slot]) {
@@ -196,8 +295,6 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
-  font-size: 24px;
-  font-weight: normal;
 }
 
 ::slotted(h2) {
@@ -205,8 +302,6 @@
   margin-right: 0;
   margin-top: 2px;
   margin-bottom: 2px;
-  font-size: 16px;
-  font-weight: normal;
 }
 
 ::slotted(h3, h4, h5, h6) {
@@ -214,9 +309,6 @@
   margin-right: 0;
   margin-top: 2px;
   margin-bottom: 2px;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: normal;
 }
 
 ::slotted(p) {
@@ -225,7 +317,7 @@
   margin-top: 0;
   margin-bottom: 2px;
   color: var(--ion-color-step-600, #666666);
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: normal;
   text-overflow: inherit;
   overflow: inherit;

package/dist/collection/components/item-divider/test/a11y/item-divider.e2e.js

@@ -0,0 +1,44 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-divider: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-item-divider>
+          <ion-label>Item Divider</ion-label>
+        </ion-item-divider>
+      `, config);
+      const itemDivider = page.locator('ion-item-divider');
+      await expect(itemDivider).toHaveScreenshot(screenshot(`item-divider-scale`));
+    });
+    test('should scale text on larger font sizes when item divider contains headings and paragraphs', async ({ page, }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-item-divider>
+          <ion-label>
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <p>Paragraph</p>
+          </ion-label>
+        </ion-item-divider>
+      `, config);
+      const itemDivider = page.locator('ion-item-divider');
+      await expect(itemDivider).toHaveScreenshot(screenshot(`item-divider-headings-scale`));
+    });
+  });
+});