@ionic/core 7.3.4-dev.11694102380.128deb56 → 7.3.4-dev.11694112678.19eab0c5

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

@@ -0,0 +1,61 @@
+/*!
+ * (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('title: font scaling'), () => {
+    test('should scale default title text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Title</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `, config);
+      const title = page.locator('ion-title');
+      await expect(title).toHaveScreenshot(screenshot(`title-default-scale`));
+    });
+    test('should scale small title text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title size="small">Title</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `, config);
+      const title = page.locator('ion-title');
+      await expect(title).toHaveScreenshot(screenshot(`title-small-scale`));
+    });
+  });
+});
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('title: font scaling for large attribute'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title size="large">Title</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `, config);
+      const title = page.locator('ion-title');
+      await expect(title).toHaveScreenshot(screenshot(`title-large-scale`));
+    });
+  });
+});

package/dist/collection/components/title/title.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 --color: Text color of the title
@@ -39,7 +72,7 @@
   width: 100%;
   height: 100%;
   transform: translateZ(0);
-  font-size: 17px;
+  font-size: min(1.0625rem, 20.4px);
   font-weight: 600;
   text-align: center;
   box-sizing: border-box;
@@ -76,22 +109,22 @@
   padding-top: 6px;
   padding-bottom: 16px;
   position: relative;
-  font-size: 13px;
+  font-size: min(0.8125rem, 23.4px);
   font-weight: normal;
 }
 
 :host(.title-large) {
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
   transform-origin: left center;
-  bottom: 0;
+  position: static;
   align-items: flex-end;
   min-width: 100%;
-  font-size: 34px;
+  font-size: min(2.125rem, 61.2px);
   font-weight: 700;
   text-align: start;
 }

package/dist/collection/components/title/title.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 --color: Text color of the title
@@ -34,7 +67,7 @@
   padding-inline-end: 20px;
   padding-top: 0;
   padding-bottom: 0;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 500;
   letter-spacing: 0.0125em;
 }
@@ -42,6 +75,6 @@
 :host(.title-small) {
   width: 100%;
   height: 100%;
-  font-size: 15px;
+  font-size: 0.9375rem;
   font-weight: normal;
 }

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

@@ -7,7 +7,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This test does not check LTR vs RTL layouts
  */
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toast: a11y'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/toast/test/a11y`, config);
@@ -45,4 +45,101 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await expect(toastButton).toHaveAttribute('aria-label', 'close button');
     });
   });
+  test.describe(title('toast: font scaling'), () => {
+    test('should scale header text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" header="Testing" message="Hello world"></ion-toast>
+      `, config);
+      const toast = page.locator('ion-toast');
+      await expect(toast).toBeVisible();
+      const toastWrapper = toast.locator('.toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot('toast-header-scale'));
+    });
+    test('should scale message text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" message="Hello world"></ion-toast>
+      `, config);
+      const toast = page.locator('ion-toast');
+      await expect(toast).toBeVisible();
+      const toastWrapper = toast.locator('.toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot('toast-message-scale'));
+    });
+    test('should scale content icon on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" message="Hello world" icon="alert"></ion-toast>
+      `, config);
+      const toast = page.locator('ion-toast');
+      await expect(toast).toBeVisible();
+      const toastWrapper = toast.locator('.toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot('toast-icon-scale'));
+    });
+    test('should scale button text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" message="Hello world"></ion-toast>
+      `, config);
+      const toast = page.locator('ion-toast');
+      toast.evaluate((el) => {
+        el.buttons = [
+          {
+            text: 'Cancel',
+          },
+        ];
+      });
+      await expect(toast).toBeVisible();
+      const toastWrapper = toast.locator('.toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot('toast-buttons-scale'));
+    });
+    test('should scale buttons and icons on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" message="Hello world"></ion-toast>
+      `, config);
+      const toast = page.locator('ion-toast');
+      toast.evaluate((el) => {
+        el.buttons = [
+          {
+            text: 'Cancel',
+            icon: 'close',
+          },
+        ];
+      });
+      await expect(toast).toBeVisible();
+      /**
+       * Linux incorrectly clips the screenshot when capturing the toast container
+       * with the inset styling.
+       *
+       * We capture the entire toast container (entire page) to avoid this issue.
+       */
+      await expect(toast).toHaveScreenshot(screenshot('toast-buttons-icon-scale'));
+    });
+  });
 });

package/dist/collection/components/toast/toast.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 toast
@@ -160,6 +193,10 @@
   margin-inline-start: 16px;
 }
 
+.toast-content {
+  min-width: 0;
+}
+
 .toast-message {
   flex: 1;
   white-space: var(--white-space);
@@ -196,15 +233,49 @@
     cursor: pointer;
   }
 }
+/**
+ * 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-50, #f2f2f2);
   --border-radius: 14px;
   --button-color: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-step-850, #262626);
   --max-width: 700px;
+  --max-height: 478px;
   --start: 10px;
   --end: 10px;
-  font-size: 14px;
+  font-size: clamp(14px, 0.875rem, 43.4px);
 }
 
 .toast-wrapper {
@@ -263,12 +334,12 @@
   padding-inline-end: 15px;
   padding-top: 10px;
   padding-bottom: 10px;
-  height: 44px;
+  min-height: 44px;
   transition: background-color, opacity 100ms linear;
   border: 0;
   background-color: transparent;
   font-family: var(--ion-font-family);
-  font-size: 17px;
+  font-size: clamp(17px, 1.0625rem, 21.998px);
   font-weight: 500;
   overflow: hidden;
 }

package/dist/collection/components/toast/toast.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 toast
@@ -160,6 +193,10 @@
   margin-inline-start: 16px;
 }
 
+.toast-content {
+  min-width: 0;
+}
+
 .toast-message {
   flex: 1;
   white-space: var(--white-space);
@@ -196,6 +233,39 @@
     cursor: pointer;
   }
 }
+/**
+ * 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-800, #333333);
   --border-radius: 4px;
@@ -205,7 +275,7 @@
   --max-width: 700px;
   --start: 8px;
   --end: 8px;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .toast-wrapper {
@@ -233,11 +303,11 @@
 .toast-header {
   margin-bottom: 2px;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.25rem;
 }
 
 .toast-message {
-  line-height: 20px;
+  line-height: 1.25rem;
 }
 
 .toast-layout-baseline .toast-button-group-start {
@@ -272,7 +342,7 @@
   position: relative;
   background-color: transparent;
   font-family: var(--ion-font-family);
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   letter-spacing: 0.84px;
   text-transform: uppercase;

package/dist/collection/components/toggle/toggle.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 --track-background: Background of the toggle track
@@ -305,6 +338,72 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
 }
 
+/**
+ * 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 {
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);
   --track-background-checked: var(--ion-color-primary, #3880ff);