@ionic/core 8.2.3-dev.11719513154.1075733b → 8.2.3-dev.11719565135.1ab35bb2

package/dist/collection/components/menu-button/menu-button.js

@@ -1,16 +1,18 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { menuOutline, menuSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { updateVisibility } from "../menu-toggle/menu-toggle-util";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part icon - The menu button icon (uses ion-icon).
@@ -37,17 +39,29 @@ export class MenuButton {
     async visibilityChanged() {
         this.visible = await updateVisibility(this.menu);
     }
+    get menuIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: menuOutline,
+            ionic: listRegular,
+            md: menuSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured menu icon or the default icon
+        return config.get('menuIcon', defaultIcon);
+    }
     render() {
-        const { color, disabled, inheritedAttributes } = this;
-        const mode = getIonMode(this);
-        const menuIcon = config.get('menuIcon', mode === 'ios' ? menuOutline : menuSharp);
+        const { color, disabled, inheritedAttributes, menuIcon } = this;
+        const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
         const attrs = {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '95a8b9f09c7fae9713a8dc003ed277f6f31403da', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '8debcdf5b236259af6e23623c07c545b29ec716d', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+                [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
                 'menu-button-disabled': disabled,
@@ -55,20 +69,22 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '39f3ce20c400d2fac4890a042e8e44426709fca5' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '310978dc1cdef668de6720cde2a2304253679176', class: "button-inner" }, h("slot", { key: '2a2b9de524c1fc3c526fe9559cb077b976852725' }, h("ion-icon", { key: '9c22d7ea9fc3d76c32ec1c1b4b13d982c60b8c2d', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: 'c58c9e29c763070383472f65a9d322a684bcb564', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '477feadcbc8dfbea019ef2f6bdef6f5943be76ca' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '5064d465103cdd781b251d40802e8bb20e3d965d', class: "button-inner" }, h("slot", { key: 'd20bfb97c1546ce69c382af5ab48207e52ca1a5d' }, h("ion-icon", { key: '502d5519b75e288ecf77f992f2cb870f90f0c64e', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '9fc6ec08f647b65db6baa6d03297153c0ad264b0', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["menu-button.ios.scss"],
-            "md": ["menu-button.md.scss"]
+            "md": ["menu-button.md.scss"],
+            "ionic": ["menu-button.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["menu-button.ios.css"],
-            "md": ["menu-button.md.css"]
+            "md": ["menu-button.md.css"],
+            "ionic": ["menu-button.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/menu-button/menu-button.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -108,6 +120,28 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --border-radius: Border radius of the menu button
@@ -143,18 +177,18 @@
 
 .button-native {
   border-radius: var(--border-radius);
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -216,12 +250,6 @@ ion-icon {
   display: none;
 }
 
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -231,8 +259,8 @@ ion-icon {
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -249,19 +277,25 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.ion-color) .button-native {
-  color: var(--ion-color-base);
-}
-
 :host(.in-toolbar:not(.in-toolbar-color)) {
   color: var(--ion-toolbar-color, var(--color));
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.ion-color) .button-native {
+  color: var(--ion-color-base);
+}
+
 :host {
   --background-focused: currentColor;
-  --background-focused-opacity: .12;
+  --background-focused-opacity: 0.12;
   --background-hover: currentColor;
-  --background-hover-opacity: .04;
+  --background-hover-opacity: 0.04;
   --border-radius: 50%;
   --color: initial;
   --padding-start: 8px;

package/dist/collection/components/menu-button/test/a11y/menu-button.e2e.js

@@ -0,0 +1,48 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * Only ios mode uses ion-color() for the menu button
+ */
+configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('menu-button: a11y for ion-color()'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-menu-button auto-hide="false"></ion-menu-button>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('menu-button: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto('/src/components/menu-button/test/a11y', config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+    test.describe(title('menu-button: font scaling'), () => {
+        test('should scale text on larger font sizes', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+        </ion-toolbar>
+      `, config);
+            const menuButton = page.locator('ion-menu-button');
+            await expect(menuButton).toHaveScreenshot(screenshot(`menu-button-scale`));
+        });
+    });
+});

package/dist/collection/components/menu-button/test/async/menu-button.e2e.js

@@ -0,0 +1,23 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('menu button: async'), () => {
+        test('menu button should be visible if menu is moved', async ({ page }) => {
+            await page.goto(`/src/components/menu-button/test/async`, config);
+            const menu = page.locator('ion-menu');
+            const menuButton = page.locator('ion-menu-button');
+            const triggerButton = page.locator('#trigger');
+            await expect(menu).not.toBeAttached();
+            await expect(menuButton).toBeHidden();
+            await triggerButton.click();
+            await expect(menu).toBeAttached();
+            await expect(menuButton).toBeVisible();
+        });
+    });
+});

package/dist/collection/components/menu-button/test/basic/menu-button.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * (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('menu-button: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/menu-button/test/basic`, config);
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`menu-button-diff`));
+        });
+    });
+});

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -3,9 +3,12 @@
  */
 import { Host, h } from "@stencil/core";
 import { menuController } from "../../utils/menu-controller/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { updateVisibility } from "./menu-toggle-util";
 /**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
  * @slot - Content is placed inside the toggle to act as the click target.
  */
 export class MenuToggle {
@@ -24,12 +27,12 @@ export class MenuToggle {
         this.visible = await updateVisibility(this.menu);
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '90e621f09792383f1badcc1b402b1ac7d08c5f98', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
-                [mode]: true,
+        return (h(Host, { key: '67420de69745897b0a7092d24983dcd42c29b6e6', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+                [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: 'c0abdd1d91e9d80ee3704e3e374ebe1f29078460' })));
+            } }, h("slot", { key: '2c4782f5bfbade9daa50a0dedb511bb7fda3bad5' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-toggle/test/basic/menu-toggle.e2e.js

@@ -0,0 +1,43 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('menu-toggle: basic'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto(`/src/components/menu-toggle/test/basic`, config);
+        });
+        test('should open selected menu by side', async ({ page }) => {
+            const startMenu = page.locator('[menu-id="start-menu"]');
+            const endMenu = page.locator('[menu-id="end-menu"]');
+            const menuToggle = page.locator('ion-menu-toggle');
+            // do this outside testMenu since passing params to eval callback is tricky due to execution context
+            await menuToggle.evaluate((el) => (el.menu = 'start'));
+            await testMenu(page, startMenu);
+            await menuToggle.evaluate((el) => (el.menu = 'end'));
+            await testMenu(page, endMenu);
+        });
+        test('should open selected menu by menu-id', async ({ page }) => {
+            const startMenu = page.locator('[menu-id="start-menu"]');
+            const endMenu = page.locator('[menu-id="end-menu"]');
+            const menuToggle = page.locator('ion-menu-toggle');
+            // do this outside testMenu since passing params to eval callback is tricky due to execution context
+            await menuToggle.evaluate((el) => (el.menu = 'start-menu'));
+            await testMenu(page, startMenu);
+            await menuToggle.evaluate((el) => (el.menu = 'end-menu'));
+            await testMenu(page, endMenu);
+        });
+    });
+});
+async function testMenu(page, menu) {
+    const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+    const ionDidClose = await page.spyOnEvent('ionDidClose');
+    await page.click('ion-menu-toggle');
+    await ionDidOpen.next();
+    await expect(menu).toHaveClass(/show-menu/);
+    await menu.evaluate(async (el) => {
+        await el.close();
+    });
+    await ionDidClose.next();
+}

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -86,8 +92,8 @@
   --background: var(--ion-background-color, #fff);
   --box-shadow: none;
   --backdrop-opacity: 0;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -148,8 +154,8 @@ ion-backdrop {
   }
 }
 .modal-handle {
-  left: 0px;
   right: 0px;
+  left: 0px;
   top: 5px;
   border-radius: 8px;
   -webkit-margin-start: auto;
@@ -201,6 +207,12 @@ ion-backdrop {
   bottom: 0;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/modal/modal.js

@@ -12,7 +12,7 @@ import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, creat
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { KEYBOARD_DID_OPEN } from "../../utils/keyboard/keyboard";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
@@ -23,7 +23,8 @@ import { createSwipeToCloseGesture } from "./gestures/swipe-to-close";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed inside of the `.modal-content` element.
  *
@@ -560,34 +561,36 @@ export class Modal {
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
         const showHandle = handle !== false && isSheetModal;
-        const mode = getIonMode(this);
-        const isCardModal = presentingElement !== undefined && mode === 'ios';
+        const theme = getIonTheme(this);
+        const isCardModal = presentingElement !== undefined && theme === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: 'fe6fd17cf857127f89d652b9aa3e9473d28c55db', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'cbba5234526282eec06c2edca606e97cbde5c1ea', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '0f3a31363c2717e5483bc0412c25804897d4aff8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '0e5ed59162ff08fe0a9f757e06bdacc75f65c0ed', class: "modal-shadow" }), h("div", Object.assign({ key: '35cdbe2238765e5f346ad7be64f7eefa8c78f0c0',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '995ac308c884fab933d83e54c46e1097dbbc7342', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: '38777922d1451e008e47586e1b7f238788ab1e41', class: "modal-shadow" }), h("div", Object.assign({ key: 'f13a1ebaa364be659252e1bedfa3bf401579e1c2',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '7a4031eaebf9a098f4c4220a5fe9d1c25cc0ec92', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '2707fd00af586e4ec4b63127f549766c24152aa1', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '534adc8e5bd850199fe2e9e16f0e7c19217d8486' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '31579849570471f6c3b7c0294fed0004bb138f11' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["modal.ios.scss"],
-            "md": ["modal.md.scss"]
+            "md": ["modal.md.scss"],
+            "ionic": ["modal.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["modal.ios.css"],
-            "md": ["modal.md.css"]
+            "md": ["modal.md.css"],
+            "ionic": ["modal.md.css"]
         };
     }
     static get properties() {

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -86,8 +92,8 @@
   --background: var(--ion-background-color, #fff);
   --box-shadow: none;
   --backdrop-opacity: 0;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -148,8 +154,8 @@ ion-backdrop {
   }
 }
 .modal-handle {
-  left: 0px;
   right: 0px;
+  left: 0px;
   top: 5px;
   border-radius: 8px;
   -webkit-margin-start: auto;
@@ -201,6 +207,12 @@ ion-backdrop {
   bottom: 0;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -0,0 +1,21 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('modal: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto(`/src/components/modal/test/a11y`, config);
+            const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+            const button = page.locator('#open-modal');
+            const modal = page.locator('ion-modal .modal-wrapper');
+            await expect(modal).toHaveAttribute('role', 'dialog');
+            await button.click();
+            await ionModalDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

package/dist/collection/components/modal/test/animations/modal.e2e.js

@@ -0,0 +1,36 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+    test.describe(title('modal: animations'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.setContent(`
+        <ion-modal is-open="true" trigger="open-modal"></ion-modal>
+      `, config);
+        });
+        test('card modal should clean up animations on dismiss', async ({ page }, testInfo) => {
+            testInfo.annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28352',
+            });
+            const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+            const modal = page.locator('ion-modal');
+            const initialAnimations = await modal.evaluate((el) => {
+                return el.shadowRoot.getAnimations();
+            });
+            // While the modal is open, it should have animations
+            expect(initialAnimations.length).toBeGreaterThan(0);
+            await modal.evaluate((el) => {
+                el.dismiss();
+            });
+            await ionModalDidDismiss.next();
+            const currentAnimations = await modal.evaluate((el) => {
+                return el.shadowRoot.getAnimations();
+            });
+            // Once the modal has finished closing, there should be no animations
+            expect(currentAnimations.length).toBe(0);
+        });
+    });
+});