voyager-ionic-core 8.5.0 → 8.5.3

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e236a04.js');
-const helpers = require('./helpers-d0dfbb50.js');
+const helpers = require('./helpers-3a248559.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-073c7cdc.js');

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e236a04.js');
 
-const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}";
+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 IonSegmentContentStyle0 = segmentContentCss;
 
 const SegmentContent = class {

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e236a04.js');
-const helpers = require('./helpers-d0dfbb50.js');
+const helpers = require('./helpers-3a248559.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-acb665ad.js');
@@ -596,61 +596,15 @@ const SegmentButton = class {
     valueChanged() {
         this.updateState();
     }
-    waitForSegmentContent(ionSegment, contentId) {
-        return new Promise((resolve, reject) => {
-            let timeoutId = undefined;
-            let animationFrameId;
-            const check = () => {
-                if (!ionSegment) {
-                    reject(new Error(`Segment not found when looking for Segment Content`));
-                    return;
-                }
-                const segmentView = helpers.getNextSiblingOfType(ionSegment); // Skip the text nodes
-                const segmentContent = segmentView === null || segmentView === void 0 ? void 0 : segmentView.querySelector(`ion-segment-content[id="${contentId}"]`);
-                if (segmentContent && timeoutId) {
-                    clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
-                    cancelAnimationFrame(animationFrameId);
-                    resolve(segmentContent);
-                }
-                else {
-                    animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
-                }
-            };
-            check();
-            // Set a timeout to reject the promise
-            timeoutId = setTimeout(() => {
-                cancelAnimationFrame(animationFrameId);
-                reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
-            }, 1000);
-        });
-    }
-    async connectedCallback() {
+    connectedCallback() {
         const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
         if (segmentEl) {
             this.updateState();
             helpers.addEventListener(segmentEl, 'ionSelect', this.updateState);
             helpers.addEventListener(segmentEl, 'ionStyle', this.updateStyle);
         }
-        // Return if there is no contentId defined
-        if (!this.contentId)
-            return;
-        let segmentContent;
-        try {
-            // Attempt to find the Segment Content by its contentId
-            segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
-        }
-        catch (error) {
-            // If no associated Segment Content exists, log an error and return
-            console.error('Segment Button: ', error.message);
-            return;
-        }
-        // Ensure the found element is a valid ION-SEGMENT-CONTENT
-        if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
-            console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
-            return;
-        }
         // Prevent buttons from being disabled when associated with segment content
-        if (this.disabled) {
+        if (this.contentId && this.disabled) {
             console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
             this.disabled = false;
         }
@@ -665,6 +619,21 @@ const SegmentButton = class {
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, helpers.inheritAttributes(this.el, ['aria-label']));
+        // Return if there is no contentId defined
+        if (!this.contentId)
+            return;
+        // Attempt to find the Segment Content by its contentId
+        const segmentContent = document.getElementById(this.contentId);
+        // If no associated Segment Content exists, log an error and return
+        if (!segmentContent) {
+            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+            return;
+        }
+        // Ensure the found element is a valid ION-SEGMENT-CONTENT
+        if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
+            console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+            return;
+        }
     }
     get hasLabel() {
         return !!this.el.querySelector('ion-label');
@@ -687,7 +656,7 @@ const SegmentButton = class {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = ionicGlobal.getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (index.h(index.Host, { key: 'e1e582b9a142cb07043ba08f02ad25f5a1fa5690', class: {
+        return (index.h(index.Host, { key: 'f2f679a08b131cd35d63f649b9d1f1907df30a89', class: {
                 [mode]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
@@ -703,7 +672,7 @@ const SegmentButton = class {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, index.h("button", Object.assign({ key: '8621a028894fb382854ff28779d0cadd3d9035f7', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), index.h("span", { key: '5c55858dbfb50734fb02d24091ebac3e0d05259f', class: "button-inner" }, index.h("slot", { key: '1f3bb8d76a1039ad648e202c650db06dfca88f79' })), mode === 'md' && index.h("ion-ripple-effect", { key: 'bda74b25bfdd431a8a36f0ee727b9184e9074321' })), index.h("div", { key: 'ff11369e921d6d0a540c75c37f692a3853e903f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, index.h("div", { key: '74ec4ca69331ed3f155fd8a8a356545941887df1', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, index.h("button", Object.assign({ key: '8e887b5031da705a3695c0870be08696d66188de', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), index.h("span", { key: '73b795c39cb09438e50922abf6b3a010e31fa2b6', class: "button-inner" }, index.h("slot", { key: '9769ddc917d7e459bd80dcd81c10c379e73d1b3e' })), mode === 'md' && index.h("ion-ripple-effect", { key: '8e4c06d6bae1034af8cc5db86fcca0ae72d042b1' })), index.h("div", { key: 'ae73ee0e429e54a43269f99b6d3d7e1c6e8f60cc', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, index.h("div", { key: 'd38eabe8161403799cfbad73dd6bf912d965442c', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -7,12 +7,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e236a04.js');
 const ionicGlobal = require('./ionic-global-acb665ad.js');
-const overlays = require('./overlays-737576a2.js');
+const overlays = require('./overlays-32e1b66b.js');
 const theme = require('./theme-d1c573d2.js');
 require('./index-c8d52405.js');
-require('./helpers-d0dfbb50.js');
+require('./helpers-3a248559.js');
 require('./hardware-back-button-5a99001f.js');
-require('./framework-delegate-11b0ba2f.js');
+require('./framework-delegate-50a86d56.js');
 require('./gesture-controller-9436f482.js');
 require('./index-48b2a28e.js');
 

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

@@ -6,10 +6,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e236a04.js');
-const notchController = require('./notch-controller-58d2e557.js');
+const notchController = require('./notch-controller-ae03a497.js');
 const compareWithUtils = require('./compare-with-utils-df1001d7.js');
-const helpers = require('./helpers-d0dfbb50.js');
-const overlays = require('./overlays-737576a2.js');
+const helpers = require('./helpers-3a248559.js');
+const overlays = require('./overlays-32e1b66b.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const watchOptions = require('./watch-options-f5f3e158.js');
@@ -17,7 +17,7 @@ const index$1 = require('./index-073c7cdc.js');
 const ionicGlobal = require('./ionic-global-acb665ad.js');
 require('./index-c8d52405.js');
 require('./hardware-back-button-5a99001f.js');
-require('./framework-delegate-11b0ba2f.js');
+require('./framework-delegate-50a86d56.js');
 require('./gesture-controller-9436f482.js');
 require('./index-48b2a28e.js');
 

package/dist/cjs/ion-tab-bar_2.cjs.entry.js

@@ -9,7 +9,7 @@ const index = require('./index-2e236a04.js');
 const keyboardController = require('./keyboard-controller-c05e747a.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-acb665ad.js');
-const helpers = require('./helpers-d0dfbb50.js');
+const helpers = require('./helpers-3a248559.js');
 require('./index-c8d52405.js');
 require('./keyboard-0272231f.js');
 require('./capacitor-c04564bf.js');

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

@@ -6,8 +6,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e236a04.js');
-const frameworkDelegate = require('./framework-delegate-11b0ba2f.js');
-require('./helpers-d0dfbb50.js');
+const frameworkDelegate = require('./framework-delegate-50a86d56.js');
+require('./helpers-3a248559.js');
 
 const tabCss = ":host(.tab-hidden){display:none !important}";
 const IonTabStyle0 = tabCss;

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

@@ -6,9 +6,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e236a04.js');
-const notchController = require('./notch-controller-58d2e557.js');
-const helpers = require('./helpers-d0dfbb50.js');
-const input_utils = require('./input.utils-2f642324.js');
+const notchController = require('./notch-controller-ae03a497.js');
+const helpers = require('./helpers-3a248559.js');
+const input_utils = require('./input.utils-e82b8ed0.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-acb665ad.js');
 require('./index-c8d52405.js');

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

@@ -7,17 +7,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$3 = require('./index-2e236a04.js');
 const config = require('./config-4f60b98a.js');
-const helpers = require('./helpers-d0dfbb50.js');
+const helpers = require('./helpers-3a248559.js');
 const lockController = require('./lock-controller-6585a42a.js');
 const index$1 = require('./index-48b2a28e.js');
-const overlays = require('./overlays-737576a2.js');
+const overlays = require('./overlays-32e1b66b.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-acb665ad.js');
 const animation = require('./animation-b4fdf128.js');
 const index = require('./index-c8d52405.js');
 const index$2 = require('./index-ee07ed59.js');
 require('./hardware-back-button-5a99001f.js');
-require('./framework-delegate-11b0ba2f.js');
+require('./framework-delegate-50a86d56.js');
 require('./gesture-controller-9436f482.js');
 
 /**

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2e236a04.js');
-const helpers = require('./helpers-d0dfbb50.js');
+const helpers = require('./helpers-3a248559.js');
 const haptic = require('./haptic-f6b37aa3.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');

package/dist/cjs/{ios.transition-f970164c.js → ios.transition-ae7afca9.js}

@@ -4,12 +4,12 @@
 'use strict';
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-f68a486a.js');
+const index = require('./index-e630fd95.js');
 require('./index-c8d52405.js');
 require('./ionic-global-acb665ad.js');
 require('./index-2e236a04.js');
 require('./index-48b2a28e.js');
-require('./helpers-d0dfbb50.js');
+require('./helpers-3a248559.js');
 
 const DURATION = 540;
 // TODO(FW-2832): types

package/dist/cjs/{md.transition-aa8820dd.js → md.transition-26003e25.js}

@@ -4,12 +4,12 @@
 'use strict';
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-f68a486a.js');
+const index = require('./index-e630fd95.js');
 require('./index-c8d52405.js');
 require('./ionic-global-acb665ad.js');
 require('./index-2e236a04.js');
 require('./index-48b2a28e.js');
-require('./helpers-d0dfbb50.js');
+require('./helpers-3a248559.js');
 
 const mdTransitionAnimation = (_, opts) => {
     var _a, _b, _c;

package/dist/cjs/{notch-controller-58d2e557.js → notch-controller-ae03a497.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const helpers = require('./helpers-d0dfbb50.js');
+const helpers = require('./helpers-3a248559.js');
 
 /**
  * A utility to calculate the size of an outline notch

package/dist/cjs/{overlays-737576a2.js → overlays-32e1b66b.js}

@@ -4,10 +4,10 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const helpers = require('./helpers-d0dfbb50.js');
+const helpers = require('./helpers-3a248559.js');
 const hardwareBackButton = require('./hardware-back-button-5a99001f.js');
 const ionicGlobal = require('./ionic-global-acb665ad.js');
-const frameworkDelegate = require('./framework-delegate-11b0ba2f.js');
+const frameworkDelegate = require('./framework-delegate-50a86d56.js');
 const gestureController = require('./gesture-controller-9436f482.js');
 const index$1 = require('./index-48b2a28e.js');
 
@@ -517,8 +517,8 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      */
     if (overlay.el.tagName !== 'ION-TOAST') {
         setRootAriaHidden(true);
+        document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     }
-    document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     hideUnderlyingOverlaysFromScreenReaders(overlay.el);
     hideAnimatingOverlayFromScreenReaders(overlay.el);
     overlay.presented = true;
@@ -622,6 +622,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     if (!overlay.presented) {
         return false;
     }
+    const presentedOverlays = index.doc !== undefined ? getPresentedOverlays(index.doc) : [];
     /**
      * For accessibility, toasts lack focus traps and don’t receive
      * `aria-hidden` on the root element when presented.
@@ -633,7 +634,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      * Therefore, we must remove `aria-hidden` from the root element
      * when the last non-toast overlay is dismissed.
      */
-    const overlaysNotToast = index.doc !== undefined ? getPresentedOverlays(index.doc).filter((o) => o.tagName !== 'ION-TOAST') : [];
+    const overlaysNotToast = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST');
     const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
     /**
      * If this is the last visible overlay that is not a toast

package/dist/cjs/{status-tap-08d1ac81.js → status-tap-03023755.js}

@@ -4,8 +4,8 @@
 'use strict';
 
 const index = require('./index-2e236a04.js');
-const index$1 = require('./index-9b945a2d.js');
-const helpers = require('./helpers-d0dfbb50.js');
+const index$1 = require('./index-509ca0d3.js');
+const helpers = require('./helpers-3a248559.js');
 require('./index-48b2a28e.js');
 require('./ionic-global-acb665ad.js');
 

package/dist/cjs/{swipe-back-5c0003bd.js → swipe-back-652bdd0b.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-d0dfbb50.js');
+const helpers = require('./helpers-3a248559.js');
 const dir = require('./dir-94c21456.js');
 const index = require('./index-ee07ed59.js');
 require('./gesture-controller-9436f482.js');

package/dist/collection/components/checkbox/checkbox.ios.css

@@ -145,23 +145,12 @@
   display: none;
 }
 
+/**
+ * The native input must be hidden with display instead of visibility or 
+ * aria-hidden to avoid accessibility issues with nested interactive elements.
+ */
 input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  clip: rect(0 0 0 0);
-  opacity: 0;
-  overflow: hidden;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  display: none;
 }
 
 .native-wrapper {

package/dist/collection/components/checkbox/checkbox.js

@@ -20,6 +20,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class Checkbox {
     constructor() {
         this.inputId = `ion-cb-${checkboxIds++}`;
+        this.inputLabelId = `${this.inputId}-lbl`;
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.inheritedAttributes = {};
@@ -48,6 +49,14 @@ export class Checkbox {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
+        this.onKeyDown = (ev) => {
+            if (ev.key === ' ') {
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.toggleChecked(ev);
+                }
+            }
+        };
         this.onClick = (ev) => {
             if (this.disabled) {
                 return;
@@ -106,8 +115,11 @@ export class Checkbox {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
+        const hasLabelContent = el.textContent !== '';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '7ac31df89b07c781ddcd30a6a8c109494d0c500a', "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, class: createColorClasses(color, {
+        // The host element must have a checkbox role to ensure proper VoiceOver
+        // support in Safari for accessibility.
+        return (h(Host, { key: '90bb17a4fae17088524555968a002327400807cf', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -117,10 +129,10 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '674e923fe1ec83a33c31d67b0d414d61ba8f9e4b', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'c4866e392fbdf3b76edcd1507cb67f40a213a4e7', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '79cb96e5963b9331a760438ec8cc9e456215de91', class: {
+            }), onClick: this.onClick }, h("label", { key: '58b5762aa358dff81910874631e06620a2ae1561', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '6abe299d690c345d36d6fd76ab113fdccfbbac52', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '2654168e45ccfdbcfe13af8c97e0e21d61ba0150', class: {
                 'label-text-wrapper': true,
-                'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", { key: '896cb26292c9a4a6c105afb39611472b93bf5e90' }), this.renderHintText()), h("div", { key: '52cd22e79fd5db30b45d7b092aa5af3944392336', class: "native-wrapper" }, h("svg", { key: '18d862ab7cc32055eaf200eea560ff1b2b6cbde0', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+                'label-text-wrapper-hidden': !hasLabelContent,
+            }, part: "label", id: this.inputLabelId }, h("slot", { key: 'a91f3f67d9ddd6b616e48799aba11cae3564d1ab' }), this.renderHintText()), h("div", { key: 'd5a9170b084d09df6b02f416e744085b5bcf0dde', class: "native-wrapper" }, h("svg", { key: 'b1968ce4aa9d652a9f2bdc427ea3a65e6c04df51', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

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

@@ -145,23 +145,12 @@
   display: none;
 }
 
+/**
+ * The native input must be hidden with display instead of visibility or 
+ * aria-hidden to avoid accessibility issues with nested interactive elements.
+ */
 input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  clip: rect(0 0 0 0);
-  opacity: 0;
-  overflow: hidden;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  display: none;
 }
 
 .native-wrapper {

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

@@ -1225,7 +1225,7 @@ export class Datetime {
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
+                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
                 ev.stopPropagation();
             } }, hoursData.map((hour) => (h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
@@ -1236,7 +1236,7 @@ export class Datetime {
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
+                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
                 ev.stopPropagation();
             } }, minutesData.map((minute) => (h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
@@ -1250,7 +1250,7 @@ export class Datetime {
         return (h("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
+                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
             } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
     }
@@ -1557,7 +1557,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '7afbb1a7e6c78389b4588999779e5c90e010e85d', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '08d429533a09c600b936ad1e022658051c765595', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1567,7 +1567,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '297c458d4d17154cb297e2ef5926505bcb2d1fce', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: 'f4ff0fcd1e059767a7ef14fcc76ebfd55d23a97b', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isIonContent, findClosestIonContent } from "../../../utils/content/index";
+import { findClosestIonContent, isIonContent } from "../../../utils/content/index";
 import { createGesture } from "../../../utils/gesture/index";
-import { clamp, raf, getElementRoot } from "../../../utils/helpers";
+import { clamp, getElementRoot, raf } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
@@ -34,6 +34,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     let currentBreakpoint = initialBreakpoint;
     let offset = 0;
     let canDismissBlocksGesture = false;
+    let cachedScrollEl = null;
     const canDismissMaxStep = 0.95;
     const maxBreakpoint = breakpoints[breakpoints.length - 1];
     const minBreakpoint = breakpoints[0];
@@ -167,6 +168,16 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * Remove undefined check
          */
         canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
+        /**
+         * Cache the scroll element reference when the gesture starts,
+         * this allows us to avoid querying the DOM for the target in onMove,
+         * which would impact performance significantly.
+         */
+        if (!expandToScroll) {
+            const targetEl = findClosestIonContent(detail.event.target);
+            cachedScrollEl =
+                targetEl && isIonContent(targetEl) ? getElementRoot(targetEl).querySelector('.inner-scroll') : targetEl;
+        }
         /**
          * If expandToScroll is disabled, we need to swap
          * the footer visibility to the original, so if the modal
@@ -194,10 +205,10 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     };
     const onMove = (detail) => {
         /**
-         * If `expandToScroll` is disabled, we should not allow the swipe gesture
-         * to continue if the gesture is not pulling down.
+         * If `expandToScroll` is disabled, and an upwards swipe gesture is done within
+         * the scrollable content, we should not allow the swipe gesture to continue.
          */
-        if (!expandToScroll && detail.deltaY <= 0) {
+        if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl) {
             return;
         }
         /**
@@ -246,6 +257,14 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         animation.progressStep(offset);
     };
     const onEnd = (detail) => {
+        /**
+         * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
+         * function to be called if the user is trying to swipe content upwards and the content
+         * is not scrolled to the top.
+         */
+        if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
+            return;
+        }
         /**
          * When the gesture releases, we need to determine
          * the closest breakpoint to snap to.