@ionic/core 7.3.4-dev.11694119374.1415546d → 7.3.4-nightly.20230908

package/dist/collection/components/list-header/list-header.md.css

@@ -1,36 +1,3 @@
-/**
- * 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 list header
@@ -102,72 +69,6 @@
   --inner-border-width: 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 {
   --background: transparent;
   --color: var(--ion-text-color, #000);
@@ -175,7 +76,7 @@
   -webkit-padding-start: calc(var(--ion-safe-area-left, 0) + 16px);
   padding-inline-start: calc(var(--ion-safe-area-left, 0) + 16px);
   min-height: 45px;
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 
 :host(.list-header-lines-full) {

package/dist/collection/components/loading/loading.ios.css

@@ -1,36 +1,3 @@
-/**
- * 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 loading dialog
@@ -92,39 +59,6 @@ ion-spinner {
   color: var(--spinner-color);
 }
 
-/**
- * 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-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
   --max-width: 270px;
@@ -132,7 +66,7 @@ ion-spinner {
   --spinner-color: var(--ion-color-step-600, #666666);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
   color: var(--ion-text-color, #000);
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 
 .loading-wrapper {

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

@@ -1,36 +1,3 @@
-/**
- * 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 loading dialog
@@ -92,39 +59,6 @@ ion-spinner {
   color: var(--spinner-color);
 }
 
-/**
- * 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);
   --max-width: 280px;
@@ -132,7 +66,7 @@ ion-spinner {
   --spinner-color: var(--ion-color-primary, #3880ff);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
   color: var(--ion-color-step-850, #262626);
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 
 .loading-wrapper {

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

@@ -24,22 +24,3 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('loading: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-        <ion-loading message="Loading"></ion-loading>
-      `, config);
-      const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-      const loading = page.locator('ion-loading');
-      await loading.evaluate((el) => el.present());
-      await ionLoadingDidPresent.next();
-      await expect(loading).toHaveScreenshot(screenshot(`loading-scale`));
-    });
-  });
-});

package/dist/collection/components/menu/menu.ios.css

@@ -1,36 +1,3 @@
-/**
- * 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 menu
@@ -80,6 +47,18 @@
 }
 
 :host(.menu-side-start) .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * LTR:
+    * The left side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The right side of the menu is not touching the screen edge. Padding is not
+    * applied to the right side of the menu. A value of 0 is set.
+    */
   --ion-safe-area-right: 0px;
   top: 0;
   bottom: 0;
@@ -110,8 +89,55 @@
     }
   }
 }
+:host-context([dir=rtl]):host(.menu-side-start) .menu-inner, :host-context([dir=rtl]).menu-side-start .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * RTL:
+    * The right side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The left side of the menu is not touching the screen edge. Padding is not
+    * applied to the left side of the menu. A value of 0 is set.
+    */
+  --ion-safe-area-right: env(safe-area-inset-right);
+  --ion-safe-area-left: 0px;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.menu-side-start) .menu-inner:dir(rtl) {
+    /**
+      * Menu does not cover the whole screen so we need to set the safe area for the
+      * side that touches the screen edge only. Since safe area is not logical, it
+      * needs to be applied to the correct side depending on the language direction.
+      * Otherwise, the content will have less space on both sides.
+      *
+      * RTL:
+      * The right side of the menu touches the screen edge. The safe area padding has
+      * already been set in the core styles, so there's no need to set it again.
+      * The left side of the menu is not touching the screen edge. Padding is not
+      * applied to the left side of the menu. A value of 0 is set.
+      */
+    --ion-safe-area-right: env(safe-area-inset-right);
+    --ion-safe-area-left: 0px;
+  }
+}
 
 :host(.menu-side-end) .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * LTR:
+    * The right side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The left side of the menu is not touching the screen edge. Padding is not
+    * applied to the left side of the menu. A value of 0 is set.
+    */
   --ion-safe-area-left: 0px;
   top: 0;
   bottom: 0;
@@ -142,6 +168,41 @@
     }
   }
 }
+:host-context([dir=rtl]):host(.menu-side-end) .menu-inner, :host-context([dir=rtl]).menu-side-end .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * RTL:
+    * The left side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The right side of the menu is not touching the screen edge. Padding is not
+    * applied to the right side of the menu. A value of 0 is set.
+    */
+  --ion-safe-area-left: env(safe-area-inset-left);
+  --ion-safe-area-right: 0px;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.menu-side-end) .menu-inner:dir(rtl) {
+    /**
+      * Menu does not cover the whole screen so we need to set the safe area for the
+      * side that touches the screen edge only. Since safe area is not logical, it
+      * needs to be applied to the correct side depending on the language direction.
+      * Otherwise, the content will have less space on both sides.
+      *
+      * RTL:
+      * The left side of the menu touches the screen edge. The safe area padding has
+      * already been set in the core styles, so there's no need to set it again.
+      * The right side of the menu is not touching the screen edge. Padding is not
+      * applied to the right side of the menu. A value of 0 is set.
+      */
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-right: 0px;
+  }
+}
 
 ion-backdrop {
   display: none;
@@ -191,39 +252,6 @@ ion-backdrop {
   /* stylelint-enable declaration-no-important */
 }
 
-/**
- * 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(.menu-type-push) {
   z-index: 1000;
 }