@ionic/core 7.4.2-dev.11695927273.1323de22 → 7.4.2-dev.11695944163.13e7414e

package/dist/collection/components/toggle/toggle.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 --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.39);
   --track-background-checked: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);

package/dist/collection/components/toolbar/toolbar.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 toolbar
@@ -87,6 +120,39 @@
   position: absolute;
 }
 
+/**
+ * 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-toolbar-background, var(--ion-color-step-50, #f7f7f7));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #000));
@@ -121,10 +187,6 @@
   margin-top: 3px;
 }
 
-:host(.toolbar-searchbar) ::slotted(ion-back-button) {
-  height: 38px;
-}
-
 ::slotted(ion-buttons) {
   min-height: 38px;
 }
@@ -147,16 +209,6 @@
   text-align: end;
 }
 
-/**
- * Ensure there is enough spacing between the large
- * title and any potential content in subsequent
- * toolbars. We do not add padding to the title
- * itself because it is absolutely positioned.
- */
-:host(.toolbar-title-large) {
-  padding-bottom: 7px;
-}
-
 :host(.toolbar-title-large) .toolbar-container {
   flex-wrap: wrap;
   align-items: flex-start;

package/dist/collection/components/toolbar/toolbar.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 toolbar
@@ -87,6 +120,39 @@
   position: absolute;
 }
 
+/**
+ * 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-toolbar-background, var(--ion-background-color, #fff));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #424242));

package/dist/collection/css/test/a11y/typography.e2e.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('typography: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <div>
+          <h1>Heading 1</h1>
+          <h2>Heading 2</h2>
+          <h3>Heading 3</h3>
+          <h4>Heading 4</h4>
+          <h5>Heading 5</h5>
+          <h6>Heading 6</h6>
+          <p>
+            The quick brown fox <ion-text><sup>jumps</sup></ion-text> over the <ion-text><sub>lazy dog</sub></ion-text>
+          </p>
+        </div>
+      `, config);
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`typography-scale`));
+    });
+  });
+});

package/dist/collection/utils/native/haptic.js

@@ -75,7 +75,6 @@ const HapticEngine = {
      * if the browser does not support the Vibrate API.
      */
     if ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.getPlatform()) === 'web') {
-      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
       return typeof navigator !== 'undefined' && navigator.vibrate !== undefined;
     }
     return true;

package/dist/collection/utils/overlays.js

@@ -68,7 +68,6 @@ export const setOverlayId = (el) => {
   return el.id;
 };
 export const createOverlay = (tagName, opts) => {
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     return window.customElements.whenDefined(tagName).then(() => {
       const element = document.createElement(tagName);

package/dist/collection/utils/transition/ios.transition.js

@@ -145,10 +145,10 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
   const BACKWARDS_KEYFRAMES = [
     { offset: 0, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` },
     { offset: 0.1, opacity: 0 },
-    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
+    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
   ];
   const FORWARDS_KEYFRAMES = [
-    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
+    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
     { offset: 0.6, opacity: 0 },
     { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` },
   ];
@@ -168,10 +168,10 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
     [ORIGIN_X]: TITLE_START_OFFSET,
   })
     .beforeAddWrite(() => {
-    largeTitleEl.style.setProperty('display', 'none');
+    largeTitleEl.style.setProperty('opacity', '0');
   })
     .afterAddWrite(() => {
-    largeTitleEl.style.setProperty('display', '');
+    largeTitleEl.style.setProperty('opacity', '');
     clonedTitleEl.style.setProperty('display', 'none');
   })
     .keyframes(KEYFRAMES);
@@ -202,7 +202,6 @@ export const iosTransitionAnimation = (navEl, opts) => {
       .easing(opts.easing || EASING)
       .fill('both')
       .beforeRemoveClass('ion-page-invisible');
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (leavingEl && navEl !== null && navEl !== undefined) {
       const navDecorAnimation = createAnimation();
       navDecorAnimation.addElement(navEl);

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-28T18:57:10",
+  "timestamp": "2023-09-28T23:38:51",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.3.0",
@@ -7108,17 +7108,11 @@
         },
         {
           "name": "hourCycle",
-          "type": "\"h11\" | \"h12\" | \"h23\" | \"h24\" | undefined",
+          "type": "\"h12\" | \"h23\" | undefined",
           "complexType": {
-            "original": "DatetimeHourCycle",
-            "resolved": "\"h11\" | \"h12\" | \"h23\" | \"h24\" | undefined",
-            "references": {
-              "DatetimeHourCycle": {
-                "location": "import",
-                "path": "./datetime-interface",
-                "id": "src/components/datetime/datetime-interface.ts::DatetimeHourCycle"
-              }
-            }
+            "original": "'h23' | 'h12'",
+            "resolved": "\"h12\" | \"h23\" | undefined",
+            "references": {}
           },
           "mutable": false,
           "attr": "hour-cycle",
@@ -7126,10 +7120,6 @@
           "docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.",
           "docsTags": [],
           "values": [
-            {
-              "value": "h11",
-              "type": "string"
-            },
             {
               "value": "h12",
               "type": "string"
@@ -7138,10 +7128,6 @@
               "value": "h23",
               "type": "string"
             },
-            {
-              "value": "h24",
-              "type": "string"
-            },
             {
               "type": "undefined"
             }
@@ -27739,7 +27725,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property.",
+          "docs": "The position of the toast on the screen.",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -27759,38 +27745,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "positionAnchor",
-          "type": "HTMLElement | string | undefined",
-          "complexType": {
-            "original": "HTMLElement | string",
-            "resolved": "HTMLElement | string | undefined",
-            "references": {
-              "HTMLElement": {
-                "location": "global",
-                "id": "global::HTMLElement"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "position-anchor",
-          "reflectToAttr": false,
-          "docs": "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.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "HTMLElement"
-            },
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
         {
           "name": "translucent",
           "type": "boolean",
@@ -27873,9 +27827,8 @@
                 "id": "global::Promise"
               },
               "ToastDismissOptions": {
-                "location": "import",
-                "path": "./toast-interface",
-                "id": "src/components/toast/toast-interface.ts::ToastDismissOptions"
+                "location": "global",
+                "id": "global::ToastDismissOptions"
               }
             },
             "return": "Promise<boolean>"
@@ -27970,14 +27923,9 @@
                 "location": "global",
                 "id": "global::Promise"
               },
-              "HTMLElement": {
-                "location": "global",
-                "id": "global::HTMLElement"
-              },
               "ToastPresentOptions": {
-                "location": "import",
-                "path": "./toast-interface",
-                "id": "src/components/toast/toast-interface.ts::ToastPresentOptions"
+                "location": "global",
+                "id": "global::ToastPresentOptions"
               }
             },
             "return": "Promise<void>"
@@ -29053,11 +29001,6 @@
       "docstring": "",
       "path": "src/components/datetime/datetime-interface.ts"
     },
-    "src/components/datetime/datetime-interface.ts::DatetimeHourCycle": {
-      "declaration": "export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';",
-      "docstring": "",
-      "path": "src/components/datetime/datetime-interface.ts"
-    },
     "src/components/datetime/datetime-interface.ts::DatetimeChangeEventDetail": {
       "declaration": "export interface DatetimeChangeEventDetail {\n  value?: string | string[] | null;\n}",
       "docstring": "",
@@ -29353,16 +29296,6 @@
       "docstring": "",
       "path": "src/components/toast/toast-interface.ts"
     },
-    "src/components/toast/toast-interface.ts::ToastPresentOptions": {
-      "declaration": "export interface ToastPresentOptions {\n  position: ToastPosition;\n  positionAnchor?: HTMLElement;\n}",
-      "docstring": "",
-      "path": "src/components/toast/toast-interface.ts"
-    },
-    "src/components/toast/toast-interface.ts::ToastDismissOptions": {
-      "declaration": "export type ToastPosition = 'top' | 'bottom' | 'middle';",
-      "docstring": "",
-      "path": "src/components/toast/toast-interface.ts"
-    },
     "src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail": {
       "declaration": "export interface ToggleChangeEventDetail<T = any> {\n  value: T;\n  checked: boolean;\n}",
       "docstring": "",

package/dist/esm/{button-active-d2346892.js → button-active-513e9fff.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as writeTask } from './index-2d388930.js';
-import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1243b917.js';
+import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-6447af60.js';
 import { createGesture } from './index-ff313b19.js';
 
 const createButtonActiveGesture = (el, isButton) => {