@ionic/core 8.8.16-dev.11784914346.10d0804c → 8.8.16-dev.11785274070.1b3387c9

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

@@ -8,13 +8,12 @@ import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../util
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
-import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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";
@@ -26,8 +25,7 @@ import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeArea
 import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed inside of the `.modal-content` element.
  *
@@ -79,13 +77,20 @@ export class Modal {
         /**
          * The interaction behavior for the sheet modal when the handle is pressed.
          *
-         * Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed.
-         * Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
+         * Handle behavior is unavailable when the `handle` property is set to
+         * `false` or when the `breakpoints` property is not set (using a
+         * fullscreen or card modal).
          *
-         * Handle behavior is unavailable when the `handle` property is set to `false` or
-         * when the `breakpoints` property is not set (using a fullscreen or card modal).
+         * Set to `"cycle"` to make the handle focusable and let the sheet modal
+         * cycle between available breakpoints when pressed. This keeps the sheet
+         * operable with assistive technology.
+         *
+         * Set to `"none"` to make the handle purely decorative when pressed and
+         * removed from the tab order.
+         *
+         * Defaults to `"cycle"`.
          */
-        this.handleBehavior = 'none';
+        this.handleBehavior = 'cycle';
         /**
          * If `true`, the modal will be dismissed when the backdrop is clicked.
          */
@@ -193,9 +198,18 @@ export class Modal {
          * if it exists and is focusable, otherwise let the focus trap handle it.
          */
         this.onModalFocus = (ev) => {
+            var _a;
             const { dragHandleEl, el } = this;
-            // Only handle focus if the modal itself was focused (not a child element)
-            if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+            /**
+             * Focus events from inside the shadow DOM are retargeted to the host, so
+             * `ev.target === el` is also true when a shadow child (e.g. the dialog
+             * wrapper that present() focuses for screen readers) receives focus. Use
+             * the shadow root's activeElement to tell the two apart: it is `null` only
+             * when the host itself was focused directly (e.g. tabbing into the modal).
+             * Only then do we redirect to the handle, so the wrapper focus set on
+             * present() is left intact.
+             */
+            if (ev.target === el && ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) == null && dragHandleEl && dragHandleEl.tabIndex !== -1) {
                 dragHandleEl.focus();
             }
         };
@@ -277,6 +291,10 @@ export class Modal {
         // Also called in dismiss() — intentional dual cleanup covers both
         // dismiss-then-remove and direct DOM removal without dismiss.
         this.cleanupSafeAreaOverrides();
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     componentWillLoad() {
         var _a;
@@ -453,12 +471,11 @@ export class Modal {
             this.statusBarStyle = await StatusBar.getStyle();
             setCardStatusBarDark();
         }
-        await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, {
+        await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
             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();
@@ -541,7 +558,6 @@ export class Modal {
             currentBreakpoint: initialBreakpoint,
             backdropBreakpoint,
             expandToScroll: this.expandToScroll,
-            staticBackdropOpacity: getIonTheme(this) === 'ionic',
         }));
         ani.progressStart(true, 1);
         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) => {
@@ -549,7 +565,7 @@ export class Modal {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
             }
-        }, getIonTheme(this) === 'ionic', () => this.onDragStart(), (detail) => this.onDragMove(detail), (detail) => this.onDragEnd(detail));
+        }, () => this.onDragStart(), (detail) => this.onDragMove(detail), (detail) => this.onDragEnd(detail));
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
@@ -821,18 +837,6 @@ 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) {
@@ -1174,16 +1178,15 @@ export class Modal {
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
-        const theme = getIonTheme(this);
-        const isCardModal = presentingElement !== undefined && theme === 'ios';
+        const mode = getIonMode(this);
+        const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        const shape = this.getShape();
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '942426c1823a35d3862650f04bccba188ba06f20', "no-router": true,
+        return (h(Host, Object.assign({ key: 'bebb9c8e49837531a2d60c96cf6b5e995ac90ffa', "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({ [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: 'fb572cbba4efc0f06dad9caa6a8d62a2cb354244', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: '43f414dab4d290afbb936350e41ce14fdf18d22f', class: "modal-shadow" }), h("div", Object.assign({ key: '020e40f58d73119fc96dd341830d20a61b1f336a',
+            }, 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: 'd4d220f3e9901a67e6368a982ec487cc55c3c5b4', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '159457105fd445b3755e19a3f207ac2bbc00cb05', class: "modal-shadow" }), h("div", Object.assign({ key: 'a6659898a35f26aa5576186f9e58365b53f55c3b',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1196,24 +1199,22 @@ 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: '7f7fef1fb41f6fdd68080ce46ae938fa08757c34', 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: 'd1ec5c16efb4ebff3a876d4b8d3fedb3d3879ac6', 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", "data-focus-order": "1", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'e6e1fe6fa25a6dc2f2c2c0f7a33f24a6d603c875', 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", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '60043d897c085b0d21cc3870990634b6179b7769', 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"],
-            "ionic": ["modal.ionic.scss"]
+            "md": ["modal.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["modal.ios.css"],
-            "md": ["modal.md.css"],
-            "ionic": ["modal.ionic.css"]
+            "md": ["modal.md.css"]
         };
     }
     static get properties() {
@@ -1472,13 +1473,13 @@ export class Modal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal)."
+                    "text": "The interaction behavior for the sheet modal when the handle is pressed.\n\nHandle behavior is unavailable when the `handle` property is set to\n`false` or when the `breakpoints` property is not set (using a\nfullscreen or card modal).\n\nSet to `\"cycle\"` to make the handle focusable and let the sheet modal\ncycle between available breakpoints when pressed. This keeps the sheet\noperable with assistive technology.\n\nSet to `\"none\"` to make the handle purely decorative when pressed and\nremoved from the tab order.\n\nDefaults to `\"cycle\"`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "handle-behavior",
-                "defaultValue": "'none'"
+                "defaultValue": "'cycle'"
             },
             "component": {
                 "type": "string",
@@ -1760,25 +1761,6 @@ 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,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -46,12 +79,15 @@
   --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;
-  right: 0;
+  --backdrop-opacity: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -59,6 +95,7 @@
   align-items: center;
   justify-content: center;
   outline: none;
+  color: var(--ion-text-color, #000);
   contain: strict;
 }
 
@@ -102,177 +139,10 @@ 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) {
@@ -282,27 +152,43 @@ ion-backdrop {
   }
 }
 .modal-handle {
-  right: 0px;
   left: 0px;
+  right: 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: "";
 }
 
 /**
@@ -318,12 +204,18 @@ ion-backdrop {
   --height: calc(100% - (var(--ion-modal-offset-top, 0px) + 10px));
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+: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 font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/nav/nav.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -60,8 +54,8 @@
  * }
  */
 :host {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;