@ionic/core 8.8.16-dev.11784913436.1a334b43 → 8.8.16-dev.11784914346.10d0804c

package/dist/collection/components/modal/modal.ios.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/modal.js

@@ -8,12 +8,13 @@ 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 { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
+import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
 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";
@@ -25,7 +26,8 @@ import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeArea
 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.
  *
@@ -77,20 +79,13 @@ export class Modal {
         /**
          * The interaction behavior for the sheet modal when the handle is 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).
+         * 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.
          *
-         * 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"`.
+         * 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).
          */
-        this.handleBehavior = 'cycle';
+        this.handleBehavior = 'none';
         /**
          * If `true`, the modal will be dismissed when the backdrop is clicked.
          */
@@ -198,18 +193,9 @@ 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;
-            /**
-             * 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) {
+            // Only handle focus if the modal itself was focused (not a child element)
+            if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
                 dragHandleEl.focus();
             }
         };
@@ -291,10 +277,6 @@ 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;
@@ -471,11 +453,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();
@@ -558,6 +541,7 @@ 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) => {
@@ -565,7 +549,7 @@ export class Modal {
                 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.gesture.enable(true);
@@ -837,6 +821,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) {
@@ -1178,15 +1174,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: 'bebb9c8e49837531a2d60c96cf6b5e995ac90ffa', "no-router": true,
+        return (h(Host, Object.assign({ key: '942426c1823a35d3862650f04bccba188ba06f20', "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: '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',
+            }, 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',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1199,22 +1196,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: 'd1ec5c16efb4ebff3a876d4b8d3fedb3d3879ac6', 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: '7f7fef1fb41f6fdd68080ce46ae938fa08757c34', 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: '60043d897c085b0d21cc3870990634b6179b7769', 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: 'e6e1fe6fa25a6dc2f2c2c0f7a33f24a6d603c875', 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() {
@@ -1473,13 +1472,13 @@ export class Modal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "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\"`."
+                    "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)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "handle-behavior",
-                "defaultValue": "'cycle'"
+                "defaultValue": "'none'"
             },
             "component": {
                 "type": "string",
@@ -1761,6 +1760,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"
             }
         };
     }