@ionic/core 8.8.18-dev.11786399582.1d58c37d → 8.8.18-dev.11786487682.1e6f798f

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

@@ -12,8 +12,9 @@ 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 { ionicEnterAnimation } from "./animations/ionic.enter";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { portraitToLandscapeTransition, landscapeToPortraitTransition } from "./animations/ios.transition";
@@ -21,11 +22,12 @@ import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { createSheetGesture } from "./gestures/sheet";
 import { createSwipeToCloseGesture, SwipeToCloseDefaults } from "./gestures/swipe-to-close";
-import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeAreaOverrides, clearSafeAreaOverrides, getRootSafeAreaTop, onRootSafeAreaTopChange, hasCustomModalDimensions, } from "./safe-area-utils";
+import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeAreaOverrides, clearSafeAreaOverrides, getRootSafeAreaTop, hasCustomModalDimensions, } from "./safe-area-utils";
 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.
  *
@@ -457,11 +459,12 @@ export class Modal {
             this.statusBarStyle = await StatusBar.getStyle();
             setCardStatusBarDark();
         }
-        await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+        await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
             expandToScroll: this.expandToScroll,
+            staticBackdropOpacity: getIonTheme(this) === 'ionic',
         });
         // Update safe-area based on actual position after animation
         this.updateSafeAreaOverrides();
@@ -544,17 +547,17 @@ export class Modal {
             currentBreakpoint: initialBreakpoint,
             backdropBreakpoint,
             expandToScroll: this.expandToScroll,
+            staticBackdropOpacity: getIonTheme(this) === 'ionic',
         }));
         ani.progressStart(true, 1);
-        const { gesture, moveSheetToBreakpoint, resetContentScroll } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, this.expandToScroll, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
+        const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, this.expandToScroll, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
             if (this.currentBreakpoint !== breakpoint) {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
             }
-        }, () => this.onDragStart(), (detail) => this.onDragMove(detail), (detail) => this.onDragEnd(detail));
+        }, getIonTheme(this) === 'ionic', () => this.onDragStart(), (detail) => this.onDragMove(detail), (detail) => this.onDragEnd(detail));
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
-        this.resetSheetContentScroll = resetContentScroll;
         this.gesture.enable(true);
         /**
          * When backdrop interaction is allowed, nested router outlets from child routes
@@ -686,7 +689,7 @@ export class Modal {
      * For example, `cancel` or `backdrop`.
      */
     async dismiss(data, role) {
-        var _a, _b;
+        var _a;
         if (this.gestureAnimationDismissing && role !== GESTURE) {
             return false;
         }
@@ -745,13 +748,6 @@ export class Modal {
             if (this.gesture) {
                 this.gesture.destroy();
             }
-            /**
-             * The sheet gesture turns content scrolling off while the sheet sits below
-             * the top breakpoint. Inline modals reuse the same content on the next
-             * present, so hand it back before the gesture goes away.
-             */
-            (_b = this.resetSheetContentScroll) === null || _b === void 0 ? void 0 : _b.call(this);
-            this.resetSheetContentScroll = undefined;
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
             this.cleanupSafeAreaOverrides();
@@ -831,6 +827,18 @@ export class Modal {
         await this.setCurrentBreakpoint(nextBreakpoint);
         return true;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11167): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     initViewTransitionListener() {
         // Only enable for iOS card modals when no custom animations are provided
         if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
@@ -1055,18 +1063,16 @@ export class Modal {
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
-            this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) => this.updateSheetOffsetTop(safeAreaTop));
         }
     }
     /**
-     * Sets the internal --ion-modal-offset-top property on the host element,
-     * resolving the current root --ion-safe-area-top when no value is given.
-     * Called on present, on resize (e.g., device rotation changes safe-area),
-     * and whenever the root safe-area value itself changes.
+     * Resolves the current root --ion-safe-area-top value and sets the
+     * internal --ion-modal-offset-top property on the host element.
+     * Called on present and on resize (e.g., device rotation changes safe-area).
      */
-    updateSheetOffsetTop(safeAreaTop) {
-        const value = safeAreaTop !== null && safeAreaTop !== void 0 ? safeAreaTop : getRootSafeAreaTop();
-        this.el.style.setProperty('--ion-modal-offset-top', `${value}px`);
+    updateSheetOffsetTop() {
+        const safeAreaTop = getRootSafeAreaTop();
+        this.el.style.setProperty('--ion-modal-offset-top', `${safeAreaTop}px`);
     }
     /**
      * Updates safe-area overrides during dynamic state changes.
@@ -1165,10 +1171,7 @@ export class Modal {
      * Clears all safe-area overrides and padding.
      */
     cleanupSafeAreaOverrides() {
-        var _a;
         clearSafeAreaOverrides(this.el);
-        (_a = this.unsubscribeRootSafeAreaTop) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.unsubscribeRootSafeAreaTop = undefined;
         // Remove internal sheet offset property
         this.el.style.removeProperty('--ion-modal-offset-top');
         const { contentEl } = this.findContentAndFooter();
@@ -1177,15 +1180,16 @@ export class Modal {
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = 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';
+        const shape = this.getShape();
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: 'c4b2713ebc788ac8672e18fdd5069e4253c4da34', "no-router": true,
+        return (h(Host, Object.assign({ key: 'aa0c8c6926534d17df0b76ba0c3bad143f22f577', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, '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, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '2cc0afff8a815954492138afb0fca042243afddd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '9844700b9436f9bfa1a69ba436e9ca46d70cf316', class: "modal-shadow" }), h("div", Object.assign({ key: 'ab1cd56ca956c773c9242fb42ff320bac7627b4b',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, '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, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '9d9421370a86dbe4bb4ff27681f22bea168d7297', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: '9a4e349ed6234bf18c07995fcd97dd0e1d65a2bd', class: "modal-shadow" }), h("div", Object.assign({ key: '3649cb4a4b63f4335f607b7fe7b6048a6742c9c4',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1198,22 +1202,24 @@ export class Modal {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'c7706794e04a962178640e9a9a11c56288c45e08', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'e12aa8cdea0657254dec4534a52d79bd00fa7351', 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", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'c44fd9810cdd3286f096af98e5a4072f8f44c193', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", "data-focus-order": "1", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '744f526d2a1111a936a517dfad4ae0b2551cf834', onSlotchange: this.onSlotChange }))));
     }
     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.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["modal.ios.css"],
-            "md": ["modal.md.css"]
+            "md": ["modal.md.css"],
+            "ionic": ["modal.ionic.css"]
         };
     }
     static get properties() {
@@ -1760,6 +1766,25 @@ export class Modal {
                 "reflect": false,
                 "attribute": "can-dismiss",
                 "defaultValue": "true"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for a modal with slightly rounded corners,\n`\"round\"` for a modal with fully rounded corners, or `\"rectangular\"`\nfor a modal without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape"
             }
         };
     }

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

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -79,15 +46,12 @@
   --min-height: auto;
   --max-height: auto;
   --overflow: hidden;
-  --border-radius: 0;
   --border-width: 0;
   --border-style: none;
   --border-color: transparent;
-  --background: var(--ion-background-color, #fff);
   --box-shadow: none;
-  --backdrop-opacity: 0;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -95,7 +59,6 @@
   align-items: center;
   justify-content: center;
   outline: none;
-  color: var(--ion-text-color, #000);
   contain: strict;
 }
 
@@ -139,10 +102,177 @@ ion-backdrop {
   background: transparent;
 }
 
+.modal-handle {
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  -webkit-margin-end: auto;
+  margin-inline-end: auto;
+  position: absolute;
+  /**
+   * This allows the handle to appear
+   * on top of user content in WebKit.
+   */
+  transform: translateZ(0);
+  border: 0;
+  cursor: pointer;
+  z-index: 11;
+}
+
+.modal-handle::before {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  content: "";
+}
+
+:host(.modal-sheet) .modal-wrapper,
+:host(.modal-sheet) .modal-shadow {
+  position: absolute;
+  bottom: 0;
+}
+
+:host(.modal-sheet.modal-no-expand-scroll) ion-footer {
+  position: absolute;
+  bottom: 0;
+  width: var(--width);
+}
+
+/**
+ * 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
+ * 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.
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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
+ * 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.
+ */
+/**
+ * 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 {
+  --background: var(--ion-background-color, #fff);
+  --border-radius: 0;
+  --backdrop-opacity: 0;
+  color: var(--ion-text-color, #000);
+}
+
 @media only screen and (min-width: 768px) and (min-height: 600px) {
   :host {
     --width: 600px;
     --height: 500px;
+    --ion-safe-area-top: 0px;
+    --ion-safe-area-bottom: 0px;
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: 0px;
   }
 }
 @media only screen and (min-width: 768px) and (min-height: 768px) {
@@ -152,43 +282,27 @@ ion-backdrop {
   }
 }
 .modal-handle {
-  left: 0px;
   right: 0px;
+  left: 0px;
   top: 5px;
   border-radius: 8px;
-  -webkit-margin-start: auto;
-  margin-inline-start: auto;
-  -webkit-margin-end: auto;
-  margin-inline-end: auto;
-  position: absolute;
   width: 36px;
   height: 5px;
-  /**
-   * This allows the handle to appear
-   * on top of user content in WebKit.
-   */
-  transform: translateZ(0);
-  border: 0;
   background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
-  cursor: pointer;
-  z-index: 11;
 }
 .modal-handle::before {
   /**
-   * Adds a 4px tap area to the perimeter
-   * of the handle.
-   */
+  * Adds a 4px tap area to the perimeter
+  * of the handle.
+  */
   -webkit-padding-start: 4px;
   padding-inline-start: 4px;
   -webkit-padding-end: 4px;
   padding-inline-end: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
-  position: absolute;
   width: 36px;
   height: 5px;
-  transform: translate(-50%, -50%);
-  content: "";
 }
 
 /**
@@ -204,18 +318,12 @@ ion-backdrop {
   --height: calc(100% - (var(--ion-modal-offset-top, 0px) + 10px));
 }
 
-:host(.modal-sheet) .modal-wrapper,
-:host(.modal-sheet) .modal-shadow {
-  position: absolute;
-  bottom: 0;
-}
-
-:host(.modal-sheet.modal-no-expand-scroll) ion-footer {
-  position: absolute;
-  bottom: 0;
-  width: var(--width);
-}
-
+/**
+ * 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/safe-area-utils.js

@@ -69,41 +69,6 @@ export const getRootSafeAreaTop = () => {
     }
     return value;
 };
-/**
- * Calls back when the resolved root `--ion-safe-area-top` changes, which no
- * event and no window resize covers. The probe's height tracks the variable, so
- * a change to it becomes a size change the observer can see.
- */
-export const onRootSafeAreaTopChange = (callback) => {
-    const doc = win === null || win === void 0 ? void 0 : win.document;
-    if (!(doc === null || doc === void 0 ? void 0 : doc.body) || typeof ResizeObserver === 'undefined') {
-        return () => undefined;
-    }
-    const probe = doc.createElement('div');
-    probe.style.cssText =
-        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;width:0;' +
-            'height:var(--ion-safe-area-top,0px);';
-    doc.body.appendChild(probe);
-    /**
-     * Seeded with the value the caller has already applied, so a change that
-     * lands before the observer's first delivery still gets reported. Comparing
-     * against an unset value instead would consume that first delivery and treat
-     * the new inset as the baseline.
-     */
-    let lastHeight = getRootSafeAreaTop();
-    const observer = new ResizeObserver((entries) => {
-        const { height } = entries[0].contentRect;
-        if (height !== lastHeight) {
-            lastHeight = height;
-            callback(height);
-        }
-    });
-    observer.observe(probe);
-    return () => {
-        observer.disconnect();
-        probe.remove();
-    };
-};
 /**
  * True when the modal host declares BOTH a non-fullscreen `--width` AND a
  * non-fullscreen `--height` (i.e. a centered-dialog-like modal that doesn't

package/dist/collection/components/nav/nav.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
@@ -54,8 +60,8 @@
  * }
  */
 :host {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;

package/dist/collection/components/nav/nav.js

@@ -7,9 +7,13 @@ import { assert } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { lifecycle, setPageHidden, transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from "./constants";
 import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews, matches } from "./view-controller";
+/**
+ * @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.
+ */
 export class Nav {
     constructor() {
         this.transInstr = [];
@@ -671,11 +675,13 @@ export class Nav {
                 }
             }
             : undefined;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this, theme);
         const enteringEl = enteringView.element;
         // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const leavingEl = leavingView && leavingView.element;
-        const animationOpts = Object.assign(Object.assign({ mode, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
+        const animationOpts = Object.assign(Object.assign({ mode,
+            theme, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
             leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || config.get('navAnimation') });
         const { hasCompleted } = await transition(animationOpts);
         return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
@@ -828,7 +834,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: 'a549286b51b1bb23c9ef51f71148452228d0ab14' });
+        return h("slot", { key: '3dfe9c2a5f3ea75cb6d82b76b240733105cddfad' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -929,7 +935,7 @@ export class Nav {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
+                    "text": "By default `ion-nav` animates transition between pages based on the mode (\"ios\" or \"md\").\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/nav-link/nav-link.js

@@ -3,6 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { navLink } from "./nav-link-utils";
+/**
+ * @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.
+ */
 export class NavLink {
     constructor() {
         /**
@@ -14,7 +18,7 @@ export class NavLink {
         };
     }
     render() {
-        return h(Host, { key: 'd4d80feb51c0d92b0bedf6952c892f9df3002046', onClick: this.onClick });
+        return h(Host, { key: '476bfb5bb6fba4f422ec40315fc3ef466d01f757', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {