@ionic/core 7.5.3-dev.11698859252.15ac163e → 7.5.3-dev.11699994454.1cbf1283

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

@@ -94,13 +94,6 @@ export class Datetime {
       this.workingParts = Object.assign({}, parts);
     };
     this.setActiveParts = (parts, removeDate = false) => {
-      /** if the datetime component is in readonly mode,
-       * allow browsing of the calendar without changing
-       * the set value
-       */
-      if (this.readonly) {
-        return;
-      }
       const { multiple, minParts, maxParts, activeParts } = this;
       /**
        * When setting the active parts, it is possible
@@ -921,13 +914,7 @@ export class Datetime {
    * are rendered independently of presentation.
    */
   renderFooter() {
-    const { disabled, readonly, showDefaultButtons, showClearButton } = this;
-    /**
-     * The cancel, clear, and confirm buttons
-     * should not be interactive if the datetime
-     * is disabled or readonly.
-     */
-    const isButtonDisabled = disabled || readonly;
+    const { showDefaultButtons, showClearButton } = this;
     const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
     if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
       return;
@@ -946,7 +933,7 @@ export class Datetime {
     return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
         ['datetime-action-buttons']: true,
         ['has-clear-button']: this.showClearButton,
-      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
+      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true) }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick() }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true) }, this.doneText)))))))));
   }
   /**
    * Wheel picker render methods
@@ -1237,14 +1224,13 @@ export class Datetime {
    * Grid Render Methods
    */
   renderCalendarHeader(mode) {
-    const { disabled } = this;
     const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
     const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
-    const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
-    const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
+    const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
+    const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
     // don't use the inheritAttributes util because it removes dir from the host, and we still need that
     const hostDir = this.el.getAttribute('dir') || undefined;
-    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
+    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", onClick: () => {
         var _a;
         this.toggleMonthAndYearView();
         /**
@@ -1268,23 +1254,20 @@ export class Datetime {
     }))));
   }
   renderMonth(month, year) {
-    const { disabled, readonly } = this;
     const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
     const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
     const isCalMonthDisabled = !yearAllowed || !monthAllowed;
-    const isDatetimeDisabled = disabled || readonly;
-    const swipeDisabled = disabled ||
-      isMonthDisabled({
-        month,
-        year,
-        day: null,
-      }, {
-        // The day is not used when checking if a month is disabled.
-        // Users should be able to access the min or max month, even if the
-        // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
-        minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
-        maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
-      });
+    const swipeDisabled = isMonthDisabled({
+      month,
+      year,
+      day: null,
+    }, {
+      // The day is not used when checking if a month is disabled.
+      // Users should be able to access the min or max month, even if the
+      // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
+      minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
+      maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+    });
     // The working month should never have swipe disabled.
     // Otherwise the CSS scroll snap will not work and the user
     // can free-scroll the calendar.
@@ -1299,9 +1282,9 @@ export class Datetime {
       const { el, highlightedDates, isDateEnabled, multiple } = this;
       const referenceParts = { month, day, year };
       const isCalendarPadding = day === null;
-      const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
+      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
       const dateIsoString = convertDataToISO(referenceParts);
-      let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
+      let isCalDayDisabled = isCalMonthDisabled || disabled;
       if (!isCalDayDisabled && isDateEnabled !== undefined) {
         try {
           /**
@@ -1315,13 +1298,6 @@ export class Datetime {
           printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
         }
       }
-      /**
-       * Some days are constrained through max & min or allowed dates
-       * and also disabled because the component is readonly or disabled.
-       * These need to be displayed differently.
-       */
-      const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
-      const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
       let dateStyle = undefined;
       /**
        * Custom highlight styles should not override the style for selected dates,
@@ -1348,11 +1324,10 @@ export class Datetime {
             el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
             el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
           }
-        }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
+        }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
           'calendar-day-padding': isCalendarPadding,
           'calendar-day': true,
           'calendar-day-active': isActive,
-          'calendar-day-constrained': isCalDayConstrained,
           'calendar-day-today': isToday,
         }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
           if (isCalendarPadding) {
@@ -1394,7 +1369,7 @@ export class Datetime {
     return h("slot", { name: "time-label" }, "Time");
   }
   renderTimeOverlay() {
-    const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
+    const { hourCycle, isTimePopoverOpen, locale } = this;
     const computedHourCycle = getHourCycle(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
     return [
@@ -1402,7 +1377,7 @@ export class Datetime {
       h("button", { class: {
           'time-body': true,
           'time-body-active': isTimePopoverOpen,
-        }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", disabled: disabled, onClick: async (ev) => {
+        }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", onClick: async (ev) => {
           const { popoverRef } = this;
           if (popoverRef) {
             this.isTimePopoverOpen = true;
@@ -1642,7 +1617,7 @@ export class Datetime {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the datetime appears normal but the selected date cannot be changed."
+          "text": "If `true`, the datetime appears normal but is not interactive."
         },
         "attribute": "readonly",
         "reflect": false,

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

@@ -224,33 +224,13 @@ ion-picker-column-internal {
   display: none;
 }
 
+:host(.datetime-readonly),
 :host(.datetime-disabled) {
   pointer-events: none;
 }
-:host(.datetime-disabled) .calendar-days-of-week,
-:host(.datetime-disabled) .datetime-time {
-  opacity: 0.4;
-}
 
-:host(.datetime-readonly) {
-  pointer-events: none;
-  /**
-   * Allow user to navigate months
-   * while in readonly mode
-   */
-  /**
-   * Disabled buttons should have full opacity
-   * in readonly mode
-   */
-}
-:host(.datetime-readonly) .calendar-action-buttons,
-:host(.datetime-readonly) .calendar-body,
-:host(.datetime-readonly) .datetime-year {
-  pointer-events: initial;
-}
-:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),
-:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled] {
-  opacity: 1;
+:host(.datetime-disabled) {
+  opacity: 0.4;
 }
 
 /**

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

@@ -26,69 +26,3 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
-/**
- * This behavior does not differ across
- * modes/directions.
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('datetime: a11y'), () => {
-    test('datetime should be keyboard navigable', async ({ page, browserName }) => {
-      await page.setContent(`
-        <ion-datetime value="2022-02-22T16:30:00"></ion-datetime>
-    `, config);
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-      const datetime = page.locator('ion-datetime');
-      const monthYearButton = page.locator('.calendar-month-year ion-item');
-      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
-      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
-      await page.keyboard.press(tabKey);
-      await expect(monthYearButton).toBeFocused();
-      await page.keyboard.press(tabKey);
-      await expect(prevButton).toBeFocused();
-      await page.keyboard.press(tabKey);
-      await expect(nextButton).toBeFocused();
-      // check value before & after selecting via keyboard
-      const initialValue = await datetime.evaluate((el) => el.value);
-      expect(initialValue).toBe('2022-02-22T16:30:00');
-      await page.keyboard.press(tabKey);
-      await page.waitForChanges();
-      await page.keyboard.press('ArrowLeft');
-      await page.waitForChanges();
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
-      const newValue = await datetime.evaluate((el) => el.value);
-      expect(newValue).not.toBe('2022-02-22T16:30:00');
-    });
-    test('buttons should be keyboard navigable', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
-    `, config);
-      await page.waitForSelector('.datetime-ready');
-      const clearButton = page.locator('#clear-button button');
-      const selectedDay = page.locator('.calendar-day-active');
-      await expect(selectedDay).toHaveText('22');
-      await clearButton.focus();
-      await page.waitForChanges();
-      await expect(clearButton).toBeFocused();
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
-      await expect(selectedDay).toHaveCount(0);
-    });
-    test('should navigate through months via right arrow key', async ({ page }) => {
-      await page.setContent(`
-
-        <ion-datetime value="2022-02-28"></ion-datetime>
-    `, config);
-      await page.waitForSelector('.datetime-ready');
-      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
-      const calendarBody = page.locator('.calendar-body');
-      await expect(calendarMonthYear).toHaveText('February 2022');
-      await calendarBody.focus();
-      await page.waitForChanges();
-      await page.keyboard.press('ArrowRight');
-      await page.waitForChanges();
-      await expect(calendarMonthYear).toHaveText('March 2022');
-    });
-  });
-});

package/dist/collection/utils/gesture/gesture-controller.js

@@ -189,5 +189,5 @@ class BlockerDelegate {
     this.ctrl = undefined;
   }
 }
-const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+export const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();

package/dist/collection/utils/overlays.js

@@ -5,6 +5,7 @@ import { doc } from "./browser/index";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
+import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
 import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -389,6 +390,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     return;
   }
   setRootAriaHidden(true);
+  document.body.classList.add(BACKDROP_NO_SCROLL);
   overlay.presented = true;
   overlay.willPresent.emit();
   (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -451,12 +453,14 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
   if (!overlay.presented) {
     return false;
   }
+  const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
   /**
    * If this is the last visible overlay then
    * we want to re-add the root to the accessibility tree.
    */
-  if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
+  if (lastOverlay) {
     setRootAriaHidden(false);
+    document.body.classList.remove(BACKDROP_NO_SCROLL);
   }
   overlay.presented = false;
   try {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-11-01T17:23:20",
+  "timestamp": "2023-11-14T20:42:40",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.6.0",
@@ -7477,7 +7477,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the datetime appears normal but the selected date cannot be changed.",
+          "docs": "If `true`, the datetime appears normal but is not interactive.",
           "docsTags": [],
           "default": "false",
           "values": [

package/dist/esm/{button-active-d926d4f4.js → button-active-c0672227.js}

@@ -3,7 +3,7 @@
  */
 import { w as writeTask } from './index-b49b173c.js';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1243b917.js';
-import { createGesture } from './index-ff313b19.js';
+import { createGesture } from './index-32cbee52.js';
 
 const createButtonActiveGesture = (el, isButton) => {
   let currentTouchedButton;

package/dist/esm/{gesture-controller-0fa396c4.js → gesture-controller-3723db7c.js}

@@ -192,4 +192,4 @@ class BlockerDelegate {
 const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 const GESTURE_CONTROLLER = new GestureController();
 
-export { GESTURE_CONTROLLER as G };
+export { BACKDROP_NO_SCROLL as B, GESTURE_CONTROLLER as G };

package/dist/esm/{index-ff313b19.js → index-32cbee52.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { G as GESTURE_CONTROLLER } from './gesture-controller-0fa396c4.js';
-export { G as GESTURE_CONTROLLER } from './gesture-controller-0fa396c4.js';
+import { G as GESTURE_CONTROLLER } from './gesture-controller-3723db7c.js';
+export { G as GESTURE_CONTROLLER } from './gesture-controller-3723db7c.js';
 
 const addEventListener = (el, // TODO(FW-2832): type
 eventName, callback, opts) => {

package/dist/esm/index.js

@@ -6,16 +6,16 @@ export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL
 export { iosTransitionAnimation } from './ios.transition-f1cea7e0.js';
 export { mdTransitionAnimation } from './md.transition-1bf39c32.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
-export { createGesture } from './index-ff313b19.js';
+export { createGesture } from './index-32cbee52.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-246ca78f.js';
 export { c as componentOnReady } from './helpers-3379ba19.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-96c9ace3.js';
 export { o as openURL } from './theme-17531cdf.js';
 export { m as menuController } from './index-aae132ba.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-cec6bac8.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-a25f3692.js';
 import './index-7a14ecec.js';
 import './index-b49b173c.js';
-import './gesture-controller-0fa396c4.js';
+import './gesture-controller-3723db7c.js';
 import './index-595d62c9.js';
 import './hardware-back-button-39299f84.js';
 import './framework-delegate-aa433dea.js';

package/dist/esm/ion-action-sheet.entry.js

@@ -2,18 +2,18 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, d as createEvent, e as readTask, h, H as Host, f as getElement } from './index-b49b173c.js';
-import { c as createButtonActiveGesture } from './button-active-d926d4f4.js';
+import { c as createButtonActiveGesture } from './button-active-c0672227.js';
 import { r as raf } from './helpers-3379ba19.js';
 import { c as createLockController } from './lock-controller-e8c6c051.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-cec6bac8.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-a25f3692.js';
 import { g as getClassMap } from './theme-17531cdf.js';
 import { b as getIonMode } from './ionic-global-246ca78f.js';
 import { c as createAnimation } from './animation-8aa13916.js';
 import './haptic-1243b917.js';
 import './capacitor-b4979570.js';
 import './index-7a14ecec.js';
-import './index-ff313b19.js';
-import './gesture-controller-0fa396c4.js';
+import './index-32cbee52.js';
+import './gesture-controller-3723db7c.js';
 import './framework-delegate-aa433dea.js';
 import './hardware-back-button-39299f84.js';
 import './index-595d62c9.js';

package/dist/esm/ion-alert.entry.js

@@ -3,18 +3,18 @@
  */
 import { r as registerInstance, d as createEvent, i as forceUpdate, h, H as Host, f as getElement } from './index-b49b173c.js';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-96c9ace3.js';
-import { c as createButtonActiveGesture } from './button-active-d926d4f4.js';
+import { c as createButtonActiveGesture } from './button-active-c0672227.js';
 import { r as raf } from './helpers-3379ba19.js';
 import { c as createLockController } from './lock-controller-e8c6c051.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-cec6bac8.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-a25f3692.js';
 import { g as getClassMap } from './theme-17531cdf.js';
 import { c as config, b as getIonMode } from './ionic-global-246ca78f.js';
 import { c as createAnimation } from './animation-8aa13916.js';
 import './haptic-1243b917.js';
 import './capacitor-b4979570.js';
 import './index-7a14ecec.js';
-import './index-ff313b19.js';
-import './gesture-controller-0fa396c4.js';
+import './index-32cbee52.js';
+import './gesture-controller-3723db7c.js';
 import './framework-delegate-aa433dea.js';
 import './hardware-back-button-39299f84.js';
 import './index-595d62c9.js';

package/dist/esm/ion-app_8.entry.js

@@ -131,7 +131,7 @@ Buttons.style = {
   md: buttonsMdCss
 };
 
-const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
+const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
 
 const Content = class {
   constructor(hostRef) {
@@ -1010,7 +1010,7 @@ const RouterOutlet = class {
         this.swipeHandler.onStart();
       }
     };
-    this.gesture = (await import('./swipe-back-0f3bfc8e.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
+    this.gesture = (await import('./swipe-back-cc4c2bcb.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
       if (this.ani) {
         this.ani.onFinish(() => {
           this.gestureOrAnimationInProgress = false;

package/dist/esm/ion-backdrop.entry.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, d as createEvent, h, H as Host } from './index-b49b173c.js';
-import { G as GESTURE_CONTROLLER } from './gesture-controller-0fa396c4.js';
 import { b as getIonMode } from './ionic-global-246ca78f.js';
 
 const backdropIosCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
@@ -13,21 +12,10 @@ const Backdrop = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
-    this.blocker = GESTURE_CONTROLLER.createBlocker({
-      disableScroll: true,
-    });
     this.visible = true;
     this.tappable = true;
     this.stopPropagation = true;
   }
-  connectedCallback() {
-    if (this.stopPropagation) {
-      this.blocker.block();
-    }
-  }
-  disconnectedCallback() {
-    this.blocker.unblock();
-  }
   onMouseDown(ev) {
     this.emitTap(ev);
   }