@ionic/core 7.4.4-dev.11699474548.1f806781 → 7.4.4-dev.11699475060.1eee2115

package/dist/collection/components/action-sheet/action-sheet.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 action sheet group
@@ -139,9 +106,7 @@
   flex-flow: column;
   justify-content: flex-end;
   height: 100%;
-  /* Fallback for browsers that do not support dvh */
   max-height: 100vh;
-  max-height: 100dvh;
 }
 
 .action-sheet-group {
@@ -205,39 +170,6 @@
     opacity: var(--button-background-hover-opacity);
   }
 }
-/**
- * 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));
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
@@ -321,7 +253,7 @@
   padding-top: 14px;
   padding-bottom: 13px;
   color: var(--color, var(--ion-color-step-400, #999999));
-  font-size: max(13px, 0.8125rem);
+  font-size: 13px;
   font-weight: 400;
   text-align: center;
 }
@@ -335,26 +267,26 @@
   padding-right: 0;
   padding-top: 6px;
   padding-bottom: 0;
-  font-size: max(13px, 0.8125rem);
+  font-size: 13px;
   font-weight: 400;
 }
 
 .action-sheet-button {
-  -webkit-padding-start: 14px;
-  padding-inline-start: 14px;
-  -webkit-padding-end: 14px;
-  padding-inline-end: 14px;
-  padding-top: 14px;
-  padding-bottom: 14px;
-  min-height: 56px;
-  font-size: max(20px, 1.25rem);
-  contain: content;
+  -webkit-padding-start: 18px;
+  padding-inline-start: 18px;
+  -webkit-padding-end: 18px;
+  padding-inline-end: 18px;
+  padding-top: 18px;
+  padding-bottom: 18px;
+  height: 56px;
+  font-size: 20px;
+  contain: strict;
 }
 
 .action-sheet-button .action-sheet-icon {
   -webkit-margin-end: 0.3em;
   margin-inline-end: 0.3em;
-  font-size: max(28px, 1.75rem);
+  font-size: 28px;
   pointer-events: none;
 }
 

package/dist/collection/components/action-sheet/action-sheet.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 action sheet group
@@ -139,9 +106,7 @@
   flex-flow: column;
   justify-content: flex-end;
   height: 100%;
-  /* Fallback for browsers that do not support dvh */
   max-height: 100vh;
-  max-height: 100dvh;
 }
 
 .action-sheet-group {
@@ -205,39 +170,6 @@
     opacity: var(--button-background-hover-opacity);
   }
 }
-/**
- * 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-background-color, #fff));
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
@@ -272,7 +204,7 @@
   padding-bottom: 17px;
   min-height: 60px;
   color: var(--color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));
-  font-size: 1rem;
+  font-size: 16px;
   text-align: start;
 }
 
@@ -281,7 +213,7 @@
   padding-right: 0;
   padding-top: 16px;
   padding-bottom: 0;
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 
 .action-sheet-group:first-child {
@@ -297,13 +229,13 @@
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;
   padding-inline-end: 16px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding-top: 0;
+  padding-bottom: 0;
   position: relative;
-  min-height: 52px;
-  font-size: 1rem;
+  height: 52px;
+  font-size: 16px;
   text-align: start;
-  contain: content;
+  contain: strict;
   overflow: hidden;
 }
 
@@ -315,7 +247,7 @@
   margin-top: 0;
   margin-bottom: 0;
   color: var(--color);
-  font-size: 1.5rem;
+  font-size: 24px;
 }
 
 .action-sheet-button-inner {

package/dist/collection/components/action-sheet/test/a11y/action-sheet.e2e.js

@@ -61,30 +61,3 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('action-sheet: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-action-sheet></ion-action-sheet>
-
-        <script>
-          const actionSheet = document.querySelector('ion-action-sheet');
-          actionSheet.header = 'Header';
-          actionSheet.subHeader = 'Sub Header';
-          actionSheet.buttons = ['Ok', { role: 'cancel', text: 'Cancel' }];
-        </script>
-      `, config);
-      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-      const actionSheet = page.locator('ion-action-sheet');
-      await actionSheet.evaluate((el) => el.present());
-      await ionActionSheetDidPresent.next();
-      await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-scale`));
-    });
-  });
-});

package/dist/collection/components/alert/alert.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 alert
@@ -158,8 +125,8 @@
   margin-bottom: 0;
   display: block;
   border: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 14px;
+  line-height: 20px;
   z-index: 0;
 }
 
@@ -225,86 +192,11 @@ textarea.alert-input {
   resize: none;
 }
 
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * We want the height of the button to
- * scale with the text so the next never runs
- * into the edge of the button. We change the height
- * instead of adding padding because we would need to offset
- * the height the padding and the border. Since the border uses
- * a hairline (<1px) width, this will cause subpixel rendering
- * differences across browsers.
- */
 :host {
   --background: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
-  --max-width: clamp(270px, 16.875rem, 324px);
+  --max-width: 270px;
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
-  font-size: max(14px, 0.875rem);
+  font-size: 14px;
 }
 
 .alert-wrapper {
@@ -336,13 +228,13 @@ textarea.alert-input {
 .alert-title {
   margin-top: 8px;
   color: var(--ion-text-color, #000);
-  font-size: max(17px, 1.0625rem);
+  font-size: 17px;
   font-weight: 600;
 }
 
 .alert-sub-title {
   color: var(--ion-color-step-600, #666666);
-  font-size: max(14px, 0.875rem);
+  font-size: 14px;
 }
 
 .alert-message,
@@ -354,7 +246,7 @@ textarea.alert-input {
   padding-top: 0;
   padding-bottom: 21px;
   color: var(--ion-text-color, #000);
-  font-size: max(13px, 0.8125rem);
+  font-size: 13px;
   text-align: center;
 }
 
@@ -486,9 +378,9 @@ textarea.alert-input {
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
-  width: min(1.5rem, 66px);
-  height: min(1.5rem, 66px);
-  border-width: 0.0625rem;
+  width: 24px;
+  height: 24px;
+  border-width: 1px;
   border-style: solid;
   border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   background-color: var(--ion-item-background, var(--ion-background-color, #fff));
@@ -501,12 +393,12 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-checkbox-inner {
-  top: calc(min(1.5rem, 66px) / 6);
+  top: 4px;
   position: absolute;
-  width: calc(min(1.5rem, 66px) / 6 + 1px);
-  height: calc(min(1.5rem, 66px) * 0.5);
+  width: 5px;
+  height: 12px;
   transform: rotate(45deg);
-  border-width: 0.0625rem;
+  border-width: 1px;
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
@@ -514,28 +406,28 @@ textarea.alert-input {
 }
 @supports (inset-inline-start: 0) {
   [aria-checked=true] .alert-checkbox-inner {
-    inset-inline-start: calc(min(1.5rem, 66px) / 3 + 1px);
+    inset-inline-start: 9px;
   }
 }
 @supports not (inset-inline-start: 0) {
   [aria-checked=true] .alert-checkbox-inner {
-    left: calc(min(1.5rem, 66px) / 3 + 1px);
+    left: 9px;
   }
   :host-context([dir=rtl]) [aria-checked=true] .alert-checkbox-inner {
     left: unset;
     right: unset;
-    right: calc(min(1.5rem, 66px) / 3 + 1px);
+    right: 9px;
   }
   [dir=rtl] [aria-checked=true] .alert-checkbox-inner {
     left: unset;
     right: unset;
-    right: calc(min(1.5rem, 66px) / 3 + 1px);
+    right: 9px;
   }
   @supports selector(:dir(rtl)) {
     [aria-checked=true] .alert-checkbox-inner:dir(rtl) {
       left: unset;
       right: unset;
-      right: calc(min(1.5rem, 66px) / 3 + 1px);
+      right: 9px;
     }
   }
 }
@@ -547,15 +439,6 @@ textarea.alert-input {
 }
 
 .alert-button {
-  /**
-   * This padding ensures that alerts
-   * with multiple buttons render on separate lines
-   * so the text does not run up against the edge of the button.
-   */
-  -webkit-padding-start: 8px;
-  padding-inline-start: 8px;
-  -webkit-padding-end: 8px;
-  padding-inline-end: 8px;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -563,12 +446,12 @@ textarea.alert-input {
   border-radius: 0;
   flex: 1 1 auto;
   min-width: 50%;
-  height: max(44px, 2.75rem);
+  height: 44px;
   border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   background-color: transparent;
   color: var(--ion-color-primary, #3880ff);
-  font-size: max(17px, 1.0625rem);
+  font-size: 17px;
   overflow: hidden;
 }
 

package/dist/collection/components/alert/alert.js

@@ -73,14 +73,6 @@ export class Alert {
   }
   onKeydown(ev) {
     const inputTypes = new Set(this.processedInputs.map((i) => i.type));
-    /**
-     * Based on keyboard navigation requirements, the
-     * checkbox should not respond to the enter keydown event.
-     */
-    if (inputTypes.has('checkbox') && ev.key === 'Enter') {
-      ev.preventDefault();
-      return;
-    }
     // The only inputs we want to navigate between using arrow keys are the radios
     // ignore the keydown event if it is not on a radio button
     if (!inputTypes.has('radio') ||