voyager-ionic-core 7.4.3 → 7.5.0

package/dist/collection/components/action-sheet/action-sheet.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 action sheet group
@@ -106,7 +139,9 @@
   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 {
@@ -170,6 +205,39 @@
     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);
@@ -253,7 +321,7 @@
   padding-top: 14px;
   padding-bottom: 13px;
   color: var(--color, var(--ion-color-step-400, #999999));
-  font-size: 13px;
+  font-size: max(13px, 0.8125rem);
   font-weight: 400;
   text-align: center;
 }
@@ -267,26 +335,26 @@
   padding-right: 0;
   padding-top: 6px;
   padding-bottom: 0;
-  font-size: 13px;
+  font-size: max(13px, 0.8125rem);
   font-weight: 400;
 }
 
 .action-sheet-button {
-  -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;
+  -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;
 }
 
 .action-sheet-button .action-sheet-icon {
   -webkit-margin-end: 0.3em;
   margin-inline-end: 0.3em;
-  font-size: 28px;
+  font-size: max(28px, 1.75rem);
   pointer-events: none;
 }
 

package/dist/collection/components/action-sheet/action-sheet.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 action sheet group
@@ -106,7 +139,9 @@
   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 {
@@ -170,6 +205,39 @@
     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);
@@ -204,7 +272,7 @@
   padding-bottom: 17px;
   min-height: 60px;
   color: var(--color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));
-  font-size: 16px;
+  font-size: 1rem;
   text-align: start;
 }
 
@@ -213,7 +281,7 @@
   padding-right: 0;
   padding-top: 16px;
   padding-bottom: 0;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .action-sheet-group:first-child {
@@ -229,13 +297,13 @@
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;
   padding-inline-end: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 12px;
+  padding-bottom: 12px;
   position: relative;
-  height: 52px;
-  font-size: 16px;
+  min-height: 52px;
+  font-size: 1rem;
   text-align: start;
-  contain: strict;
+  contain: content;
   overflow: hidden;
 }
 
@@ -247,7 +315,7 @@
   margin-top: 0;
   margin-bottom: 0;
   color: var(--color);
-  font-size: 24px;
+  font-size: 1.5rem;
 }
 
 .action-sheet-button-inner {

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

@@ -61,3 +61,30 @@ 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,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 alert
@@ -125,8 +158,8 @@
   margin-bottom: 0;
   display: block;
   border: 0;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   z-index: 0;
 }
 
@@ -192,11 +225,86 @@ 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: 270px;
+  --max-width: clamp(270px, 16.875rem, 324px);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
-  font-size: 14px;
+  font-size: max(14px, 0.875rem);
 }
 
 .alert-wrapper {
@@ -228,13 +336,13 @@ textarea.alert-input {
 .alert-title {
   margin-top: 8px;
   color: var(--ion-text-color, #000);
-  font-size: 17px;
+  font-size: max(17px, 1.0625rem);
   font-weight: 600;
 }
 
 .alert-sub-title {
   color: var(--ion-color-step-600, #666666);
-  font-size: 14px;
+  font-size: max(14px, 0.875rem);
 }
 
 .alert-message,
@@ -246,7 +354,7 @@ textarea.alert-input {
   padding-top: 0;
   padding-bottom: 21px;
   color: var(--ion-text-color, #000);
-  font-size: 13px;
+  font-size: max(13px, 0.8125rem);
   text-align: center;
 }
 
@@ -378,9 +486,9 @@ textarea.alert-input {
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
-  width: 24px;
-  height: 24px;
-  border-width: 1px;
+  width: min(1.5rem, 66px);
+  height: min(1.5rem, 66px);
+  border-width: 0.0625rem;
   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));
@@ -393,12 +501,12 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-checkbox-inner {
-  top: 4px;
+  top: calc(min(1.5rem, 66px) / 6);
   position: absolute;
-  width: 5px;
-  height: 12px;
+  width: calc(min(1.5rem, 66px) / 6 + 1px);
+  height: calc(min(1.5rem, 66px) * 0.5);
   transform: rotate(45deg);
-  border-width: 1px;
+  border-width: 0.0625rem;
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
@@ -406,28 +514,28 @@ textarea.alert-input {
 }
 @supports (inset-inline-start: 0) {
   [aria-checked=true] .alert-checkbox-inner {
-    inset-inline-start: 9px;
+    inset-inline-start: calc(min(1.5rem, 66px) / 3 + 1px);
   }
 }
 @supports not (inset-inline-start: 0) {
   [aria-checked=true] .alert-checkbox-inner {
-    left: 9px;
+    left: calc(min(1.5rem, 66px) / 3 + 1px);
   }
   :host-context([dir=rtl]) [aria-checked=true] .alert-checkbox-inner {
     left: unset;
     right: unset;
-    right: 9px;
+    right: calc(min(1.5rem, 66px) / 3 + 1px);
   }
   [dir=rtl] [aria-checked=true] .alert-checkbox-inner {
     left: unset;
     right: unset;
-    right: 9px;
+    right: calc(min(1.5rem, 66px) / 3 + 1px);
   }
   @supports selector(:dir(rtl)) {
     [aria-checked=true] .alert-checkbox-inner:dir(rtl) {
       left: unset;
       right: unset;
-      right: 9px;
+      right: calc(min(1.5rem, 66px) / 3 + 1px);
     }
   }
 }
@@ -439,6 +547,15 @@ 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;
@@ -446,12 +563,12 @@ textarea.alert-input {
   border-radius: 0;
   flex: 1 1 auto;
   min-width: 50%;
-  height: 44px;
+  height: max(44px, 2.75rem);
   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: 17px;
+  font-size: max(17px, 1.0625rem);
   overflow: hidden;
 }
 

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

@@ -73,6 +73,14 @@ 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') ||