voyager-ionic-core 7.6.0 → 7.6.3

package/dist/collection/components/datetime/test/manipulation.spec.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, } from "../utils/manipulation";
+import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, getClosestValidDate, } from "../utils/manipulation";
 describe('addDays()', () => {
     it('should correctly add days', () => {
         expect(addDays({
@@ -431,3 +431,135 @@ describe('validateParts()', () => {
         })).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
     });
 });
+describe('getClosestValidDate()', () => {
+    it('should match a date with only month/day/year', () => {
+        // October 10, 2023
+        const refParts = { month: 10, day: 10, year: 2023 };
+        // April 10, 2021
+        const minParts = { month: 4, day: 10, year: 2021 };
+        // September 14, 2021
+        const maxParts = { month: 9, day: 14, year: 2021 };
+        // September 4, 2021
+        const expected = { month: 9, day: 4, year: 2021, dayOfWeek: undefined };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [2, 3, 7, 9, 10],
+            dayValues: [4, 15, 25],
+            yearValues: [2020, 2021, 2023],
+            maxParts,
+            minParts,
+        })).toEqual(expected);
+    });
+    it('should match a date when the reference date is before the min', () => {
+        // April 2, 2020 3:20 PM
+        const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
+        // September 10, 2021 10:10 AM
+        const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+        // September 14, 2021 10:11 AM
+        const maxParts = { month: 9, day: 14, year: 2021, hour: 10, minute: 11 };
+        // September 11, 2021 11:15 AM
+        const expected = {
+            year: 2021,
+            day: 11,
+            month: 9,
+            hour: 11,
+            minute: 15,
+            ampm: 'am',
+            dayOfWeek: undefined,
+        };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [4, 9, 11],
+            dayValues: [11, 12, 13, 14],
+            yearValues: [2020, 2021, 2023],
+            hourValues: [9, 10, 11],
+            minuteValues: [11, 12, 13, 14, 15],
+            maxParts,
+            minParts,
+        })).toEqual(expected);
+    });
+    it('should match a date when the reference date is before the min', () => {
+        // April 2, 2020 3:20 PM
+        const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
+        // September 10, 2021 10:10 AM
+        const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+        // September 10, 2021 10:15 AM
+        const maxParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 15 };
+        // September 10, 2021 10:15 AM
+        const expected = {
+            month: 9,
+            day: 10,
+            year: 2021,
+            hour: 10,
+            minute: 15,
+            ampm: 'am',
+            dayOfWeek: undefined,
+        };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [4, 9, 11],
+            dayValues: [10, 12, 13, 14],
+            yearValues: [2020, 2021, 2023],
+            hourValues: [9, 10, 11],
+            minuteValues: [11, 12, 13, 14, 15],
+            minParts,
+            maxParts,
+        })).toEqual(expected);
+    });
+    it('should only clamp minutes if within the same day and hour as min/max', () => {
+        // April 2, 2020 9:16 AM
+        const refParts = { month: 4, day: 2, year: 2020, hour: 9, minute: 16 };
+        // September 10, 2021 10:10 AM
+        const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+        // September 10, 2021 11:15 AM
+        const maxParts = { month: 9, day: 10, year: 2021, hour: 11, minute: 15 };
+        // September 10, 2021 10:16 AM
+        const expected = {
+            month: 9,
+            day: 10,
+            year: 2021,
+            hour: 10,
+            minute: 16,
+            ampm: 'am',
+            dayOfWeek: undefined,
+        };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [4, 9, 11],
+            dayValues: [10, 12, 13, 14],
+            yearValues: [2020, 2021, 2023],
+            hourValues: [9, 10, 11],
+            minuteValues: [10, 15, 16],
+            minParts,
+            maxParts,
+        })).toEqual(expected);
+    });
+    it('should return the closest valid date after adjusting the allowed year', () => {
+        // April 2, 2022 9:16 AM
+        const refParts = { month: 4, day: 2, year: 2022, hour: 9, minute: 16 };
+        // September 10, 2021 10:10 AM
+        const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+        // September 10, 2023 11:15 AM
+        const maxParts = { month: 9, day: 10, year: 2023, hour: 11, minute: 15 };
+        // April 2, 2022 9:16 AM
+        const expected = {
+            month: 4,
+            day: 2,
+            year: 2022,
+            hour: 9,
+            minute: 16,
+            ampm: 'am',
+            dayOfWeek: undefined,
+        };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [4, 9, 11],
+            dayValues: [2, 10, 12, 13, 14],
+            yearValues: [2020, 2021, 2022, 2023],
+            hourValues: [9, 10, 11],
+            minuteValues: [10, 15, 16],
+            minParts,
+            maxParts,
+        })).toEqual(expected);
+    });
+});

package/dist/collection/components/datetime/test/prefer-wheel/datetime.spec.js

@@ -0,0 +1,27 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Datetime } from "../../datetime";
+describe('datetime: preferWheel', () => {
+    beforeEach(() => {
+        const mockIntersectionObserver = jest.fn();
+        mockIntersectionObserver.mockReturnValue({
+            observe: () => null,
+            unobserve: () => null,
+            disconnect: () => null,
+        });
+        global.IntersectionObserver = mockIntersectionObserver;
+    });
+    it('should select the working day when clicking the confirm button', async () => {
+        const page = await newSpecPage({
+            components: [Datetime],
+            html: '<ion-datetime prefer-wheel="true" max="2021" show-default-buttons="true"></ion-datetime>',
+        });
+        const datetime = page.body.querySelector('ion-datetime');
+        const confirmButton = datetime.shadowRoot.querySelector('#confirm-button');
+        confirmButton.click();
+        await page.waitForChanges();
+        expect(datetime.value).toBe('2021-12-31T23:59:00');
+    });
+});

package/dist/collection/components/datetime/utils/manipulation.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isSameDay } from "./comparison";
+import { isAfter, isBefore, isSameDay } from "./comparison";
 import { getNumDaysInMonth } from "./helpers";
 import { clampDate, parseAmPm } from "./parse";
 const twoDigit = (val) => {
@@ -355,32 +355,82 @@ export const validateParts = (parts, minParts, maxParts) => {
  * Returns the closest date to refParts
  * that also meets the constraints of
  * the *Values params.
- * @param refParts The reference date
- * @param monthValues The allowed month values
- * @param dayValues The allowed day (of the month) values
- * @param yearValues The allowed year values
- * @param hourValues The allowed hour values
- * @param minuteValues The allowed minute values
  */
-export const getClosestValidDate = (refParts, monthValues, dayValues, yearValues, hourValues, minuteValues) => {
+export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValues, hourValues, minuteValues, minParts, maxParts, }) => {
     const { hour, minute, day, month, year } = refParts;
     const copyParts = Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined });
+    if (yearValues !== undefined) {
+        // Filters out years that are out of the min/max bounds
+        const filteredYears = yearValues.filter((year) => {
+            if (minParts !== undefined && year < minParts.year) {
+                return false;
+            }
+            if (maxParts !== undefined && year > maxParts.year) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.year = findClosestValue(year, filteredYears);
+    }
     if (monthValues !== undefined) {
-        copyParts.month = findClosestValue(month, monthValues);
+        // Filters out months that are out of the min/max bounds
+        const filteredMonths = monthValues.filter((month) => {
+            if (minParts !== undefined && copyParts.year === minParts.year && month < minParts.month) {
+                return false;
+            }
+            if (maxParts !== undefined && copyParts.year === maxParts.year && month > maxParts.month) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.month = findClosestValue(month, filteredMonths);
     }
     // Day is nullable but cannot be undefined
     if (day !== null && dayValues !== undefined) {
-        copyParts.day = findClosestValue(day, dayValues);
-    }
-    if (yearValues !== undefined) {
-        copyParts.year = findClosestValue(year, yearValues);
+        // Filters out days that are out of the min/max bounds
+        const filteredDays = dayValues.filter((day) => {
+            if (minParts !== undefined && isBefore(Object.assign(Object.assign({}, copyParts), { day }), minParts)) {
+                return false;
+            }
+            if (maxParts !== undefined && isAfter(Object.assign(Object.assign({}, copyParts), { day }), maxParts)) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.day = findClosestValue(day, filteredDays);
     }
     if (hour !== undefined && hourValues !== undefined) {
-        copyParts.hour = findClosestValue(hour, hourValues);
+        // Filters out hours that are out of the min/max bounds
+        const filteredHours = hourValues.filter((hour) => {
+            if ((minParts === null || minParts === void 0 ? void 0 : minParts.hour) !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
+                return false;
+            }
+            if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.hour) !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.hour = findClosestValue(hour, filteredHours);
         copyParts.ampm = parseAmPm(copyParts.hour);
     }
     if (minute !== undefined && minuteValues !== undefined) {
-        copyParts.minute = findClosestValue(minute, minuteValues);
+        // Filters out minutes that are out of the min/max bounds
+        const filteredMinutes = minuteValues.filter((minute) => {
+            if ((minParts === null || minParts === void 0 ? void 0 : minParts.minute) !== undefined &&
+                isSameDay(copyParts, minParts) &&
+                copyParts.hour === minParts.hour &&
+                minute < minParts.minute) {
+                return false;
+            }
+            if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.minute) !== undefined &&
+                isSameDay(copyParts, maxParts) &&
+                copyParts.hour === maxParts.hour &&
+                minute > maxParts.minute) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.minute = findClosestValue(minute, filteredMinutes);
     }
     return copyParts;
 };

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

@@ -666,10 +666,12 @@
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -810,4 +812,22 @@
 :host(.legacy-input) .native-input[disabled],
 :host(.input-disabled) {
   opacity: 0.3;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  aspect-ratio: 1;
 }

package/dist/collection/components/input/input.js

@@ -269,15 +269,34 @@ export class Input {
         if (!this.shouldClearOnEdit()) {
             return;
         }
+        /**
+         * The following keys do not modify the
+         * contents of the input. As a result, pressing
+         * them should not edit the input.
+         *
+         * We can't check to see if the value of the input
+         * was changed because we call checkClearOnEdit
+         * in a keydown listener, and the key has not yet
+         * been added to the input.
+         */
+        const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+        const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
         /**
          * Clear the input if the control has not been previously cleared during focus.
          * Do not clear if the user hitting enter to submit a form.
          */
-        if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') {
+        if (!this.didInputClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
             this.value = '';
             this.emitInputChange(ev);
         }
-        this.didInputClearOnEdit = true;
+        /**
+         * Pressing an IGNORED_KEYS first and
+         * then an allowed key will cause the input to not
+         * be cleared.
+         */
+        if (!pressedIgnoredKey) {
+            this.didInputClearOnEdit = true;
+        }
     }
     hasValue() {
         return this.getValue().length > 0;
@@ -658,7 +677,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\"."
+                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 }
             },
             "debounce": {

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

@@ -666,10 +666,12 @@
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -1422,4 +1424,23 @@
 
 :host(.input-shape-round) {
   --border-radius: 16px;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  aspect-ratio: 1;
+  min-height: 40px;
 }

package/dist/collection/components/input/test/clear-on-edit/input.e2e.js

@@ -3,6 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { test, configs } from "../../../../utils/test/playwright/index";
+const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('input: clearOnEdit'), () => {
         test('should clear when typed into', async ({ page }) => {
@@ -13,21 +14,40 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await ionInput.next();
             await expect(input).toHaveJSProperty('value', 'h');
         });
-        test('should not clear when enter is pressed', async ({ page }) => {
-            await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
+        test('should not clear the input if it does not have an initial value when typing', async ({ page }) => {
+            await page.setContent(`<ion-input label="input" value="" clear-on-edit="true"></ion-input>`, config);
             const input = page.locator('ion-input');
-            await input.locator('input').focus();
-            await page.keyboard.press('Enter');
-            await page.waitForChanges();
-            await expect(input).toHaveJSProperty('value', 'abc');
+            await input.click();
+            await input.type('hello world');
+            await expect(input).toHaveJSProperty('value', 'hello world');
+        });
+        IGNORED_KEYS.forEach((ignoredKey) => {
+            test(`should not clear when ${ignoredKey} is pressed`, async ({ page, skip }) => {
+                skip.browser((browserName) => browserName === 'firefox' && ignoredKey === 'Meta', 'Firefox incorrectly adds "OS" to the input when pressing the Meta key on Linux');
+                await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
+                const input = page.locator('ion-input');
+                await input.locator('input').focus();
+                await page.keyboard.press(ignoredKey);
+                await page.waitForChanges();
+                await expect(input).toHaveJSProperty('value', 'abc');
+            });
         });
-        test('should not clear when tab is pressed', async ({ page }) => {
+        test('should clear after when pressing valid key after pressing ignored key', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28633',
+            });
             await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
             const input = page.locator('ion-input');
             await input.locator('input').focus();
-            await page.keyboard.press('Tab');
+            // ignored
+            await page.keyboard.press('Shift');
             await page.waitForChanges();
             await expect(input).toHaveJSProperty('value', 'abc');
+            // allowed
+            await page.keyboard.press('a');
+            await page.waitForChanges();
+            await expect(input).toHaveJSProperty('value', 'a');
         });
     });
 });

package/dist/collection/components/input/test/slot/input.e2e.js

@@ -9,7 +9,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `, config);
             const input = page.locator('ion-input');
@@ -19,7 +21,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `, config);
             const input = page.locator('ion-input');

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

@@ -418,6 +418,12 @@ button, a {
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
   width: min-content;
+  /**
+   * We allow labels in the default
+   * slot to grow. However, we do not
+   * want them to grow indefinitely.
+   */
+  max-width: 100%;
 }
 
 :host(.item-input) {

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

@@ -418,6 +418,12 @@ button, a {
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
   width: min-content;
+  /**
+   * We allow labels in the default
+   * slot to grow. However, we do not
+   * want them to grow indefinitely.
+   */
+  max-width: 100%;
 }
 
 :host(.item-input) {

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

@@ -64,3 +64,28 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('label: text wrapping in item'), () => {
+        test('long text should not cause label to expand infinitely', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          div {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+        </style>
+        <ion-item>
+          <ion-label>
+            <!-- This text should be truncated with ellipses -->
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </div>
+          </ion-label>
+        </ion-item>
+      `, config);
+            const item = page.locator('ion-item');
+            await expect(item).toHaveScreenshot(screenshot(`label-item-wrap`));
+        });
+    });
+});

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

@@ -305,14 +305,13 @@ ion-backdrop {
   left: 0;
   right: 0;
   width: auto;
-  /* stylelint-disable declaration-no-important */
-  transform: none !important;
-  box-shadow: none !important;
+  transform: none;
+  box-shadow: none;
 }
 
 :host(.menu-pane-visible) ion-backdrop {
+  /* stylelint-disable-next-line declaration-no-important */
   display: hidden !important;
-  /* stylelint-enable declaration-no-important */
 }
 
 /**

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

@@ -305,14 +305,13 @@ ion-backdrop {
   left: 0;
   right: 0;
   width: auto;
-  /* stylelint-disable declaration-no-important */
-  transform: none !important;
-  box-shadow: none !important;
+  transform: none;
+  box-shadow: none;
 }
 
 :host(.menu-pane-visible) ion-backdrop {
+  /* stylelint-disable-next-line declaration-no-important */
   display: hidden !important;
-  /* stylelint-enable declaration-no-important */
 }
 
 /**

package/dist/collection/components/menu/test/custom/menu.e2e.js

@@ -0,0 +1,61 @@
+/*!
+ * (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 directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+    test.describe(title('menu: custom'), () => {
+        test('should allow styling the menu box shadow when inside a split pane', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/21530',
+            });
+            await page.setContent(`
+        <style>
+          ion-split-pane {
+            --side-width: 200px;
+            --side-min-width: 200px;
+          }
+
+          ion-menu {
+            box-shadow: 10px 5px 5px red;
+            z-index: 1;
+          }
+        </style>
+
+        <ion-app>
+          <ion-split-pane when="xs" id="splitPane" content-id="split-content">
+            <ion-menu side="start" content-id="split-content">
+              <ion-header>
+                <ion-toolbar color="secondary">
+                  <ion-title>Menu</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Menu Content</ion-content>
+            </ion-menu>
+
+            <div class="ion-page" id="split-content">
+              <ion-header>
+                <ion-toolbar>
+                  <ion-buttons slot="start">
+                    <ion-menu-button></ion-menu-button>
+                  </ion-buttons>
+
+                  <ion-title>Content</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Main Content</ion-content>
+            </div>
+          </ion-split-pane>
+        </ion-app>
+      `, config);
+            const app = page.locator('ion-app');
+            await expect(app).toHaveScreenshot(screenshot(`menu-custom-split-pane`));
+        });
+    });
+});

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

@@ -1003,7 +1003,7 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss."
+                    "text": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 },
                 "attribute": "can-dismiss",
                 "reflect": false,