voyager-ionic-core 7.4.4 → 7.5.1

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/test/position-anchor/toast.e2e.js

@@ -0,0 +1,45 @@
+/*!
+ * (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('toast: positionAnchor'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/toast/test/position-anchor', config);
+      /**
+       * We need to screenshot the whole page to ensure the toasts are positioned
+       * correctly, but we don't need much extra white space between the header
+       * and footer.
+       */
+      await page.setViewportSize({
+        width: 425,
+        height: 425,
+      });
+    });
+    test('should place top-position toast underneath anchor', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      await page.click('#headerAnchor');
+      await ionToastDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`toast-header-anchor`));
+    });
+    test('should place bottom-position toast above anchor', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      await page.click('#footerAnchor');
+      await ionToastDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`toast-footer-anchor`));
+    });
+    test('should ignore anchor for middle-position toast', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      await page.click('#middleAnchor');
+      await ionToastDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`toast-middle-anchor`));
+    });
+    test('should correctly anchor toast when using an element reference', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      await page.click('#headerElAnchor');
+      await ionToastDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`toast-header-el-anchor`));
+    });
+  });
+});

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.js

@@ -15,6 +15,7 @@ import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
+import { getAnimationPosition } from "./animations/utils";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -54,6 +55,7 @@ export class Toast {
     this.message = undefined;
     this.keyboardClose = false;
     this.position = 'bottom';
+    this.positionAnchor = undefined;
     this.buttons = undefined;
     this.translucent = false;
     this.animated = true;
@@ -101,7 +103,19 @@ export class Toast {
   async present() {
     const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
+    const { el, position } = this;
+    const anchor = this.getAnchorElement();
+    const animationPosition = getAnimationPosition(position, anchor, getIonMode(this), el);
+    /**
+     * Cache the calculated position of the toast, so we can re-use it
+     * in the dismiss animation.
+     */
+    this.lastPresentedPosition = animationPosition;
+    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
+      position,
+      top: animationPosition.top,
+      bottom: animationPosition.bottom,
+    });
     /**
      * Content is revealed to screen readers after
      * the transition to avoid jank since this
@@ -123,15 +137,28 @@ export class Toast {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
+    var _a, _b;
     const unlock = await this.lockController.lock();
-    if (this.durationTimeout) {
-      clearTimeout(this.durationTimeout);
+    const { durationTimeout, position, lastPresentedPosition } = this;
+    if (durationTimeout) {
+      clearTimeout(durationTimeout);
     }
-    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
+    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, 
+    /**
+     * Fetch the cached position that was calculated back in the present
+     * animation. We always want to animate the dismiss from the same
+     * position the present stopped at, so the animation looks continuous.
+     */
+    {
+      position,
+      top: (_a = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.top) !== null && _a !== void 0 ? _a : '',
+      bottom: (_b = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.bottom) !== null && _b !== void 0 ? _b : '',
+    });
     if (dismissed) {
       this.delegateController.removeViewFromDom();
       this.revealContentToScreenReader = false;
     }
+    this.lastPresentedPosition = undefined;
     unlock();
     return dismissed;
   }
@@ -155,6 +182,44 @@ export class Toast {
       : [];
     return buttons;
   }
+  /**
+   * Returns the element specified by the positionAnchor prop,
+   * or undefined if prop's value is an ID string and the element
+   * is not found in the DOM.
+   */
+  getAnchorElement() {
+    const { position, positionAnchor, el } = this;
+    /**
+     * If positionAnchor is undefined then
+     * no anchor should be used when presenting the toast.
+     */
+    if (positionAnchor === undefined) {
+      return;
+    }
+    if (position === 'middle' && positionAnchor !== undefined) {
+      printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
+      return undefined;
+    }
+    if (typeof positionAnchor === 'string') {
+      /**
+       * If the anchor is defined as an ID, find the element.
+       * We do this on every present so the toast doesn't need
+       * to account for the surrounding DOM changing since the
+       * last time it was presented.
+       */
+      const foundEl = document.getElementById(positionAnchor);
+      if (foundEl === null) {
+        printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
+        return undefined;
+      }
+      return foundEl;
+    }
+    if (positionAnchor instanceof HTMLElement) {
+      return positionAnchor;
+    }
+    printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
+    return undefined;
+  }
   async buttonClick(button) {
     const role = button.role;
     if (isCancel(role)) {
@@ -517,12 +582,34 @@ export class Toast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The position of the toast on the screen."
+          "text": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property."
         },
         "attribute": "position",
         "reflect": false,
         "defaultValue": "'bottom'"
       },
+      "positionAnchor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement | string",
+          "resolved": "HTMLElement | string | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The element to anchor the toast's position to. Can be set as a direct reference\nor the ID of the element. With `position=\"bottom\"`, the toast will sit above the\nchosen element. With `position=\"top\"`, the toast will sit below the chosen element.\nWith `position=\"middle\"`, the value of `positionAnchor` is ignored."
+        },
+        "attribute": "position-anchor",
+        "reflect": false
+      },
       "buttons": {
         "type": "unknown",
         "mutable": false,
@@ -813,8 +900,9 @@ export class Toast {
               "id": "global::Promise"
             },
             "ToastPresentOptions": {
-              "location": "global",
-              "id": "global::ToastPresentOptions"
+              "location": "import",
+              "path": "./toast-interface",
+              "id": "src/components/toast/toast-interface.ts::ToastPresentOptions"
             }
           },
           "return": "Promise<void>"
@@ -846,8 +934,9 @@ export class Toast {
               "id": "global::Promise"
             },
             "ToastDismissOptions": {
-              "location": "global",
-              "id": "global::ToastDismissOptions"
+              "location": "import",
+              "path": "./toast-interface",
+              "id": "src/components/toast/toast-interface.ts::ToastDismissOptions"
             }
           },
           "return": "Promise<boolean>"

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
@@ -371,6 +404,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);