@ionic/core 8.6.5-nightly.20250715 → 8.6.5

package/components/ion-segment-content.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}";
+const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;min-height:1px;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}";
 
 const SegmentContent = /*@__PURE__*/ proxyCustomElement(class SegmentContent extends HTMLElement {
     constructor() {

package/components/item.js

@@ -23,6 +23,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         this.inheritedAriaAttributes = {};
         this.multipleInputs = false;
         this.focusable = true;
+        this.isInteractive = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -44,6 +45,11 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         this.type = 'button';
+        // slot change listener updates state to reflect how/if item should be interactive
+        this.updateInteractivityOnSlotChange = () => {
+            this.setIsInteractive();
+            this.setMultipleInputs();
+        };
     }
     buttonChanged() {
         // Update the focusable option when the button option is changed
@@ -91,13 +97,11 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
     componentDidLoad() {
         raf(() => {
             this.setMultipleInputs();
+            this.setIsInteractive();
             this.focusable = this.isFocusable();
         });
     }
-    // If the item contains multiple clickable elements and/or inputs, then the item
-    // should not have a clickable input cover over the entire item to prevent
-    // interfering with their individual click events
-    setMultipleInputs() {
+    totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
         const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
         // The following elements can accept focus alongside the previous elements
@@ -106,6 +110,17 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
         // The following elements should also stay clickable when an input with cover is present
         const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
+        return {
+            covers,
+            inputs,
+            clickables,
+        };
+    }
+    // If the item contains multiple clickable elements and/or inputs, then the item
+    // should not have a clickable input cover over the entire item to prevent
+    // interfering with their individual click events
+    setMultipleInputs() {
+        const { covers, inputs, clickables } = this.totalNestedInputs();
         // Check for multiple inputs to change the position of the input cover to relative
         // for all of the covered inputs above
         this.multipleInputs =
@@ -113,6 +128,11 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
                 covers.length + clickables.length > 1 ||
                 (covers.length > 0 && this.isClickable());
     }
+    setIsInteractive() {
+        // If item contains any interactive children, set isInteractive to `true`
+        const { covers, inputs, clickables } = this.totalNestedInputs();
+        this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
+    }
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -214,7 +234,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '15e7d3b674c25232bc2d51573b291c72548690e5', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '24b59935bd8db8b0b7f940582455a42b82cbf762', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -226,7 +246,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'f27ae647501e29db554efe8f12f498b165d1dbf6' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'ba039a321df0e4bd5ce11e7a6e7e174c8623b112', name: "start" }), h("div", { key: 'e67fdf4ad9086d855da8402ca04ffe292cf6ce67', class: "item-inner" }, h("div", { key: '2434348a0b3f10052a340c57a7ac127ddc851729', class: "input-wrapper" }, h("slot", { key: '3e27090ae4dab734541b3fd2c94de0f98c0f0030' })), h("slot", { key: '52dc633b60fe612d48d2efffbf2c4c62692bef85', name: "end" }), showDetail && (h("ion-icon", { key: '4fb7397dc8cf4cecb82f19a6151f85112b73992b', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '09b2413a7a484ecd8ffb00805223727da4d4e344' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'fd77b6e5f3eb2e1857a0cdd45562d71eabd30255' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '8824ac8395aafa3d63c92f2128e947cac8393ac4', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '5c9127e388a432687766d86a9db91fd1663abf03', class: "item-inner" }, h("div", { key: '9dc2d2f58c4067c0143b3963334c346c3c7f77df', class: "input-wrapper" }, h("slot", { key: '8377d9e56dc4b1913f1346111b706e7f14c24d30', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'bc771e106174f4a84ee12e92d14df81ad7ed177d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '45336d121a097cbf71ee8a3f6b554745ba5e0bbf', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '197e244ae3bffebfa6ac9bfe7658d12e1af0ecb1' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -251,7 +271,8 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         "target": [1],
         "type": [1],
         "multipleInputs": [32],
-        "focusable": [32]
+        "focusable": [32],
+        "isInteractive": [32]
     }, [[0, "ionColor", "labelColorChanged"], [0, "ionStyle", "itemStyle"]], {
         "button": ["buttonChanged"]
     }]);

package/components/modal.js

@@ -793,20 +793,20 @@ const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
         // need to care about layering and modal-specific styles.
         const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
         const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0px) scale(1)`;
         presentingAnimation
-            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .addElement(presentingEl)
             .afterStyles({
             transform: toTransform,
         })
             .fromTo('transform', fromTransform, toTransform)
-            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)');
         const shadowAnimation = createAnimation()
             .addElement(presentingElRoot.querySelector('.modal-shadow'))
             .afterStyles({
             transform: toTransform,
+            opacity: '0',
         })
-            .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
             .fromTo('transform', fromTransform, toTransform);
         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
     }
@@ -851,17 +851,8 @@ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
         const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
         presentingAnimation
             .addElement(presentingEl)
-            .beforeStyles({
-            transform: 'translateY(0px) scale(1)',
-            'transform-origin': 'top center',
-            overflow: 'hidden',
-        })
             .afterStyles({
             transform: toTransform,
-            'border-radius': '10px 10px 0 0',
-            filter: 'contrast(0.85)',
-            overflow: 'hidden',
-            'transform-origin': 'top center',
         })
             .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
             .keyframes([
@@ -876,20 +867,19 @@ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
         // to handle layering and modal-specific styles.
         const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
         const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0) scale(1)`;
         presentingAnimation
-            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .addElement(presentingEl)
             .afterStyles({
             transform: toTransform,
         })
-            .fromTo('transform', fromTransform, toTransform)
-            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+            .fromTo('transform', fromTransform, toTransform);
         const shadowAnimation = createAnimation()
             .addElement(presentingElRoot.querySelector('.modal-shadow'))
             .afterStyles({
             transform: toTransform,
+            opacity: '0',
         })
-            .fromTo('opacity', '0', '0') // Shadow stays hidden
             .fromTo('transform', fromTransform, toTransform);
         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
     }
@@ -2253,7 +2243,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             wrapperEl.style.transform = 'translateY(0vh)';
             wrapperEl.style.opacity = '1';
         }
-        if (presentingElement) {
+        if ((presentingElement === null || presentingElement === void 0 ? void 0 : presentingElement.tagName) === 'ION-MODAL') {
             const isPortrait = window.innerWidth < 768;
             if (isPortrait) {
                 const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
@@ -2327,20 +2317,20 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: 'f274213df23995f7d3495648c828dbab6d040a53', "no-router": true,
+        return (h(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "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: '8893496a8ce7364b3695a628eb4e6bd8c275f78e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '66ceabd642566503f2c75e84ef7f643d73a97428', class: "modal-shadow" }), h("div", Object.assign({ key: '4cb89ce5b84219271d0d203babf066348a4c5433',
+            }, 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: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '9062f7bcd45203642ce7ca0521b2bb0bf1f77192', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', 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: '34a29599e80254186c6d7d77b3161abcda76eab7', 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: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/ion-item_8.cjs.entry.js

@@ -20,6 +20,7 @@ const Item = class {
         this.inheritedAriaAttributes = {};
         this.multipleInputs = false;
         this.focusable = true;
+        this.isInteractive = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -41,6 +42,11 @@ const Item = class {
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         this.type = 'button';
+        // slot change listener updates state to reflect how/if item should be interactive
+        this.updateInteractivityOnSlotChange = () => {
+            this.setIsInteractive();
+            this.setMultipleInputs();
+        };
     }
     buttonChanged() {
         // Update the focusable option when the button option is changed
@@ -88,13 +94,11 @@ const Item = class {
     componentDidLoad() {
         helpers.raf(() => {
             this.setMultipleInputs();
+            this.setIsInteractive();
             this.focusable = this.isFocusable();
         });
     }
-    // If the item contains multiple clickable elements and/or inputs, then the item
-    // should not have a clickable input cover over the entire item to prevent
-    // interfering with their individual click events
-    setMultipleInputs() {
+    totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
         const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
         // The following elements can accept focus alongside the previous elements
@@ -103,6 +107,17 @@ const Item = class {
         const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
         // The following elements should also stay clickable when an input with cover is present
         const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
+        return {
+            covers,
+            inputs,
+            clickables,
+        };
+    }
+    // If the item contains multiple clickable elements and/or inputs, then the item
+    // should not have a clickable input cover over the entire item to prevent
+    // interfering with their individual click events
+    setMultipleInputs() {
+        const { covers, inputs, clickables } = this.totalNestedInputs();
         // Check for multiple inputs to change the position of the input cover to relative
         // for all of the covered inputs above
         this.multipleInputs =
@@ -110,6 +125,11 @@ const Item = class {
                 covers.length + clickables.length > 1 ||
                 (covers.length > 0 && this.isClickable());
     }
+    setIsInteractive() {
+        // If item contains any interactive children, set isInteractive to `true`
+        const { covers, inputs, clickables } = this.totalNestedInputs();
+        this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
+    }
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -211,7 +231,7 @@ const Item = class {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (index.h(index.Host, { key: '15e7d3b674c25232bc2d51573b291c72548690e5', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '24b59935bd8db8b0b7f940582455a42b82cbf762', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), theme.createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -223,7 +243,7 @@ const Item = class {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, index.h(TagType, Object.assign({ key: 'f27ae647501e29db554efe8f12f498b165d1dbf6' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), index.h("slot", { key: 'ba039a321df0e4bd5ce11e7a6e7e174c8623b112', name: "start" }), index.h("div", { key: 'e67fdf4ad9086d855da8402ca04ffe292cf6ce67', class: "item-inner" }, index.h("div", { key: '2434348a0b3f10052a340c57a7ac127ddc851729', class: "input-wrapper" }, index.h("slot", { key: '3e27090ae4dab734541b3fd2c94de0f98c0f0030' })), index.h("slot", { key: '52dc633b60fe612d48d2efffbf2c4c62692bef85', name: "end" }), showDetail && (index.h("ion-icon", { key: '4fb7397dc8cf4cecb82f19a6151f85112b73992b', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === index$1.chevronForward }))), canActivate && mode === 'md' && index.h("ion-ripple-effect", { key: '09b2413a7a484ecd8ffb00805223727da4d4e344' }))));
+            })), role: inList ? 'listitem' : null }, index.h(TagType, Object.assign({ key: 'fd77b6e5f3eb2e1857a0cdd45562d71eabd30255' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), index.h("slot", { key: '8824ac8395aafa3d63c92f2128e947cac8393ac4', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), index.h("div", { key: '5c9127e388a432687766d86a9db91fd1663abf03', class: "item-inner" }, index.h("div", { key: '9dc2d2f58c4067c0143b3963334c346c3c7f77df', class: "input-wrapper" }, index.h("slot", { key: '8377d9e56dc4b1913f1346111b706e7f14c24d30', onSlotchange: this.updateInteractivityOnSlotChange })), index.h("slot", { key: 'bc771e106174f4a84ee12e92d14df81ad7ed177d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (index.h("ion-icon", { key: '45336d121a097cbf71ee8a3f6b554745ba5e0bbf', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === index$1.chevronForward }))), canActivate && mode === 'md' && index.h("ion-ripple-effect", { key: '197e244ae3bffebfa6ac9bfe7658d12e1af0ecb1' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-modal.cjs.entry.js

@@ -795,20 +795,20 @@ const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
         // need to care about layering and modal-specific styles.
         const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
         const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0px) scale(1)`;
         presentingAnimation
-            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .addElement(presentingEl)
             .afterStyles({
             transform: toTransform,
         })
             .fromTo('transform', fromTransform, toTransform)
-            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)');
         const shadowAnimation = animation.createAnimation()
             .addElement(presentingElRoot.querySelector('.modal-shadow'))
             .afterStyles({
             transform: toTransform,
+            opacity: '0',
         })
-            .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
             .fromTo('transform', fromTransform, toTransform);
         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
     }
@@ -853,17 +853,8 @@ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
         const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
         presentingAnimation
             .addElement(presentingEl)
-            .beforeStyles({
-            transform: 'translateY(0px) scale(1)',
-            'transform-origin': 'top center',
-            overflow: 'hidden',
-        })
             .afterStyles({
             transform: toTransform,
-            'border-radius': '10px 10px 0 0',
-            filter: 'contrast(0.85)',
-            overflow: 'hidden',
-            'transform-origin': 'top center',
         })
             .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
             .keyframes([
@@ -878,20 +869,19 @@ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
         // to handle layering and modal-specific styles.
         const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
         const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0) scale(1)`;
         presentingAnimation
-            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .addElement(presentingEl)
             .afterStyles({
             transform: toTransform,
         })
-            .fromTo('transform', fromTransform, toTransform)
-            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+            .fromTo('transform', fromTransform, toTransform);
         const shadowAnimation = animation.createAnimation()
             .addElement(presentingElRoot.querySelector('.modal-shadow'))
             .afterStyles({
             transform: toTransform,
+            opacity: '0',
         })
-            .fromTo('opacity', '0', '0') // Shadow stays hidden
             .fromTo('transform', fromTransform, toTransform);
         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
     }
@@ -2253,7 +2243,7 @@ const Modal = class {
             wrapperEl.style.transform = 'translateY(0vh)';
             wrapperEl.style.opacity = '1';
         }
-        if (presentingElement) {
+        if ((presentingElement === null || presentingElement === void 0 ? void 0 : presentingElement.tagName) === 'ION-MODAL') {
             const isPortrait = window.innerWidth < 768;
             if (isPortrait) {
                 const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
@@ -2327,20 +2317,20 @@ const Modal = class {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (index$3.h(index$3.Host, Object.assign({ key: 'f274213df23995f7d3495648c828dbab6d040a53', "no-router": true,
+        return (index$3.h(index$3.Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "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, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: '8893496a8ce7364b3695a628eb4e6bd8c275f78e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '66ceabd642566503f2c75e84ef7f643d73a97428', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '4cb89ce5b84219271d0d203babf066348a4c5433',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '9062f7bcd45203642ce7ca0521b2bb0bf1f77192', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', 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) })), index$3.h("slot", { key: '34a29599e80254186c6d7d77b3161abcda76eab7', 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) })), index$3.h("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index$3.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-segment-content.cjs.entry.js

@@ -5,7 +5,7 @@
 
 var index = require('./index-DODXXb_r.js');
 
-const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}";
+const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;min-height:1px;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}";
 
 const SegmentContent = class {
     constructor(hostRef) {