@ionic/core 8.7.18-dev.11771365900.125bf49c → 8.7.18-dev.11772217280.122eed89

package/dist/collection/components/popover/utils.js

@@ -2,6 +2,58 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { getElementRoot, raf } from "../../utils/helpers";
+/**
+ * Shared per-frame cache for safe-area insets. Avoids creating a temporary
+ * DOM element and forcing a synchronous reflow on every call within the same
+ * frame (e.g., multiple popovers presenting simultaneously). Invalidated
+ * after the next animation frame so values stay fresh across orientation
+ * changes and viewport resizes.
+ */
+let cachedInsets = null;
+let cacheInvalidationScheduled = false;
+/**
+ * Resolves the current --ion-safe-area-* CSS custom property values
+ * to actual pixel numbers. A temporary element is needed because
+ * getComputedStyle on :root returns the declared value of custom
+ * properties (e.g. "env(safe-area-inset-top)") rather than a
+ * resolved number. By assigning them to standard padding properties,
+ * the browser resolves the value.
+ *
+ * Results are cached for the current frame to avoid repeated reflows.
+ */
+export const getSafeAreaInsets = (doc) => {
+    if (cachedInsets !== null) {
+        return cachedInsets;
+    }
+    if (doc.body === null) {
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+    const el = doc.createElement('div');
+    el.style.cssText =
+        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;' +
+            'padding-top:var(--ion-safe-area-top,0px);' +
+            'padding-bottom:var(--ion-safe-area-bottom,0px);' +
+            'padding-left:var(--ion-safe-area-left,0px);' +
+            'padding-right:var(--ion-safe-area-right,0px);';
+    doc.body.appendChild(el);
+    const style = getComputedStyle(el);
+    const insets = {
+        top: parseFloat(style.paddingTop) || 0,
+        bottom: parseFloat(style.paddingBottom) || 0,
+        left: parseFloat(style.paddingLeft) || 0,
+        right: parseFloat(style.paddingRight) || 0,
+    };
+    el.remove();
+    cachedInsets = insets;
+    if (!cacheInvalidationScheduled) {
+        cacheInvalidationScheduled = true;
+        raf(() => {
+            cachedInsets = null;
+            cacheInvalidationScheduled = false;
+        });
+    }
+    return insets;
+};
 /**
  * Returns the dimensions of the popover
  * arrow on `ios` mode. If arrow is disabled
@@ -639,8 +691,10 @@ const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, con
  * Adjusts popover positioning coordinates
  * such that popover does not appear offscreen
  * or overlapping safe area bounds.
+ *
+ * @internal - This is not part of the public API.
  */
-export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
+export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
     let arrowTop = coordArrowTop;
     const arrowLeft = coordArrowLeft;
     let left = coordLeft;
@@ -650,16 +704,19 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
     let originY = contentOriginY;
     let checkSafeAreaLeft = false;
     let checkSafeAreaRight = false;
+    let checkSafeAreaTop = false;
+    let checkSafeAreaBottom = false;
     const triggerTop = triggerCoordinates
         ? triggerCoordinates.top + triggerCoordinates.height
         : bodyHeight / 2 - contentHeight / 2;
     const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
     let addPopoverBottomClass = false;
+    const hideArrow = false;
     /**
      * Adjust popover so it does not
      * go off the left of the screen.
      */
-    if (left < bodyPadding + safeAreaMargin) {
+    if (left < bodyPadding + safeArea.left) {
         left = bodyPadding;
         checkSafeAreaLeft = true;
         originX = 'left';
@@ -668,41 +725,58 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
          * go off the right of the screen.
          */
     }
-    else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
+    else if (contentWidth + bodyPadding + left + safeArea.right > bodyWidth) {
         checkSafeAreaRight = true;
         left = bodyWidth - contentWidth - bodyPadding;
         originX = 'right';
     }
     /**
      * Adjust popover so it does not
-     * go off the top of the screen.
+     * go off the bottom of the screen
+     * or overlap the bottom safe area.
      * If popover is on the left or the right of
      * the trigger, then we should not adjust top
      * margins.
      */
-    if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
-        if (triggerTop - contentHeight > 0) {
+    if (triggerTop + triggerHeight + contentHeight > bodyHeight - safeArea.bottom &&
+        (side === 'top' || side === 'bottom')) {
+        /**
+         * Calculate where the popover top would be if flipped
+         * above the trigger. Check whether that position clears
+         * the top safe area with room for bodyPadding.
+         */
+        const idealFlipTop = triggerTop - contentHeight - triggerHeight - (arrowHeight - 1);
+        if (idealFlipTop >= safeArea.top + bodyPadding) {
             /**
-             * While we strive to align the popover with the trigger
-             * on smaller screens this is not always possible. As a result,
-             * we adjust the popover up so that it does not hang
-             * off the bottom of the screen. However, we do not want to move
-             * the popover up so much that it goes off the top of the screen.
-             *
-             * We chose 12 here so that the popover position looks a bit nicer as
-             * it is not right up against the edge of the screen.
+             * Popover fits above the trigger without overlapping
+             * the top safe area. Use the ideal position directly —
+             * no safe-area CSS vars needed since it clears both edges.
              */
-            top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
+            top = idealFlipTop;
             arrowTop = top + contentHeight;
             originY = 'bottom';
             addPopoverBottomClass = true;
-            /**
-             * If not enough room for popover to appear
-             * above trigger, then cut it off.
-             */
         }
         else {
+            /**
+             * Can't flip above the trigger. Constrain the bottom
+             * edge while keeping the top near the trigger. This
+             * creates a scrollable area anchored to the trigger.
+             */
             bottom = bodyPadding;
+            checkSafeAreaBottom = true;
+            /**
+             * When the trigger is near the bottom of the screen,
+             * the calculated top may be at or past the bottom
+             * constraint, leaving zero visible height. In that
+             * case, pull top up to the top safe area so the
+             * popover fills the available space between safe areas.
+             */
+            const bottomEdge = bodyHeight - safeArea.bottom - bodyPadding;
+            if (top >= bottomEdge) {
+                top = safeArea.top + bodyPadding;
+                checkSafeAreaTop = true;
+            }
         }
     }
     return {
@@ -713,9 +787,12 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
         originY,
         checkSafeAreaLeft,
         checkSafeAreaRight,
+        checkSafeAreaTop,
+        checkSafeAreaBottom,
         arrowTop,
         arrowLeft,
         addPopoverBottomClass,
+        hideArrow,
     };
 };
 export const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {

package/dist/collection/components/radio-group/radio-group.ios.css

@@ -112,10 +112,6 @@ ion-radio-group {
   vertical-align: top;
 }
 
-.radio-group-wrapper {
-  display: inline;
-}
-
 .radio-group-top {
   line-height: 1.5;
 }

package/dist/collection/components/radio-group/radio-group.md.css

@@ -112,10 +112,6 @@ ion-radio-group {
   vertical-align: top;
 }
 
-.radio-group-wrapper {
-  display: inline;
-}
-
 .radio-group-top {
   line-height: 1.5;
 }

package/dist/collection/components/searchbar/searchbar.js

@@ -96,11 +96,14 @@ export class Searchbar {
          * Clears the input field and triggers the control change.
          */
         this.onClearInput = async (shouldFocus) => {
+            if (this.clearTimeout) {
+                clearTimeout(this.clearTimeout);
+            }
             this.ionClear.emit();
             return new Promise((resolve) => {
                 // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
                 // wait for 4 frames
-                setTimeout(() => {
+                this.clearTimeout = setTimeout(() => {
                     const value = this.getValue();
                     if (value !== '') {
                         this.value = '';
@@ -235,10 +238,18 @@ export class Searchbar {
         this.originalIonInput = this.ionInput;
         this.positionElements();
         this.debounceChanged();
-        setTimeout(() => {
+        this.loadTimeout = setTimeout(() => {
             this.noAnimate = false;
         }, 300);
     }
+    disconnectedCallback() {
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+        }
+        if (this.clearTimeout) {
+            clearTimeout(this.clearTimeout);
+        }
+    }
     emitStyle() {
         this.ionStyle.emit({
             searchbar: true,
@@ -427,8 +438,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'bf574336a561a5bf66c771fb606a9b19adbecb68', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '747ad4368bda5044198259d5bc8f7be9e472e5af', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'bcc5b33a2859903ba11bfc5c611c6a2aaa71d06b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '9e9f3a7f6ee66140181f8c3cfa42bbeee75adafc', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '5f83fbcc0708830637815e8c0b69356cad381870', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '219c263c1f3cc63e18bc2d2ba5d672b7806eddd0', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -438,14 +449,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: 'ac0dbf5ddd9c4eb6d714f45c62c44ba3d0bf034d', class: "searchbar-input-container" }, h("input", Object.assign({ key: '4b9fdac1b0d5a7a68bf61a6beb00f166434d3e84', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '32a889c48b3960560a3873061b4ac5a8a5ce532f', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '71222df691ef0b95008e619f755224d069ee9388', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '3f1c25442d6d87c0df67f79482a925b80dcc403d', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'a386fecafda0fab449ea1488906ba6cfc55e2b5c', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '5f81642628335def39a14f0726e0fafdc7203776', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'da3073646f2d7f639261b556517fbadabc3c10e9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'f1c8c0bd8fbb655085875731d3ece387dbe2967e', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '065cd6c707ae462c0767df1bab04ce8045f340a4', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-17T22:06:55",
+  "timestamp": "2026-02-27T18:36:30",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

package/dist/esm/ion-app_8.entry.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, e as config, d as Host, g as getElement, f as printIonWarning, c as createEvent, a as readTask, i as forceUpdate, w as writeTask, j as printIonError } from './index-C8IsBmNU.js';
+import { r as registerInstance, e as config, f as printIonWarning, h, d as Host, g as getElement, c as createEvent, a as readTask, i as forceUpdate, w as writeTask, j as printIonError } from './index-C8IsBmNU.js';
 import { shouldUseCloseWatcher } from './hardware-back-button-CPLxO-Ev.js';
-import { b as getIonMode, a as isPlatform } from './ionic-global-CDrldh-5.js';
+import { a as isPlatform, b as getIonMode } from './ionic-global-CDrldh-5.js';
 import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-DEn3pfjm.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses, h as hostContext } from './theme-DiVJyqlX.js';
@@ -25,7 +25,7 @@ const App = class {
     }
     componentDidLoad() {
         {
-            rIC(async () => {
+            this.rIC(async () => {
                 const isHybrid = isPlatform(window, 'hybrid');
                 if (!config.getBoolean('_testing')) {
                     import('./index-ceb5RaMT.js').then((module) => module.startTapClick(config));
@@ -63,6 +63,11 @@ const App = class {
             });
         }
     }
+    disconnectedCallback() {
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+        }
+    }
     /**
      * Used to set focus on an element that uses `ion-focusable`.
      * Do not use this if focusing the element as a result of a keyboard
@@ -79,9 +84,17 @@ const App = class {
             this.focusVisible.setFocus(elements);
         }
     }
+    rIC(callback) {
+        if ('requestIdleCallback' in window) {
+            window.requestIdleCallback(callback);
+        }
+        else {
+            this.loadTimeout = setTimeout(callback, 32);
+        }
+    }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
+        return (h(Host, { key: '77a7459d3e42b3715a5a7e1cf468e2ebc99e54bb', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -108,14 +121,6 @@ const needInputShims = () => {
     }
     return false;
 };
-const rIC = (callback) => {
-    if ('requestIdleCallback' in window) {
-        window.requestIdleCallback(callback);
-    }
-    else {
-        setTimeout(callback, 32);
-    }
-};
 App.style = appCss;
 
 const buttonsIosCss = ".sc-ion-buttons-ios-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}.sc-ion-buttons-ios-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ios-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-ios-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-ios-s ion-button:not(.button-round){--border-radius:4px}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button{--color:initial;--border-color:initial;--background-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-solid,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-solid{--background:var(--ion-color-contrast);--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12;--background-hover:var(--ion-color-base);--background-hover-opacity:0.45;--color:var(--ion-color-base);--color-focused:var(--ion-color-base)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-clear,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-clear{--color-activated:var(--ion-color-contrast);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-outline,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-outline{--color-activated:var(--ion-color-base);--color-focused:var(--ion-color-contrast);--background-activated:var(--ion-color-contrast)}.sc-ion-buttons-ios-s .button-clear,.sc-ion-buttons-ios-s .button-outline{--background-activated:transparent;--background-focused:currentColor;--background-hover:transparent}.sc-ion-buttons-ios-s .button-solid:not(.ion-color){--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12}.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.65em;line-height:0.67}";
@@ -275,6 +280,10 @@ const Content = class {
             this.tabsElement = null;
             this.tabsLoadCallback = undefined;
         }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = null;
+        }
     }
     /**
      * Rotating certain devices can update
@@ -513,7 +522,7 @@ const Content = class {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '287f5bb78888b0f66394a35ba2a3ad636d8f3412', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -521,12 +530,12 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '2fdfcbc39fb66f11b6191911f2941c660f4c12e5', class: {
+            } }, inheritedAttributes), h("div", { key: '2e70e5e0ab4209478ea711a630058fa0e83af7f8', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '018a83406173ec7f7725f09b4bd1c0d964874ee4', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '6f028eeb7c9dc7e1b82a8e549e1dd8aaf1d15fca' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ion-checkbox.entry.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
+import { r as registerInstance, c as createEvent, h, i as forceUpdate, d as Host, g as getElement } from './index-C8IsBmNU.js';
 import { i as inheritAriaAttributes, a as renderHiddenInput } from './helpers-DEn3pfjm.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import { c as createColorClasses, h as hostContext } from './theme-DiVJyqlX.js';
@@ -198,7 +198,7 @@ const Checkbox = class {
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (h(Host, { key: 'ae0fbd4b21accbac132e6b85c513512ad9179394', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'fca2e80987d5e2e7f9138eeac3314d883ea1252b', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -208,10 +208,10 @@ const Checkbox = class {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '7a3d7f3c27dde514f2dbf2e34f4629fad33ec3bf', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4130d77ddf034271fecccda14e101a5a809921b6', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '5daa74f4e62b0947e37764762524001ee42609d9', class: {
+            }) }, h("label", { key: '5cf50b6abdb9a3ae1f846f18bd8d5345de0ea2e9', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'b8c3c6b01f65ff1b723c0de4b5d6f1b62940f481', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '7b29b18b97b8151f454760d73aca1543c8325e41', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '23ff66138f8c3a2f56f39113fc842d54b2f7952a' }), this.renderHintText()), h("div", { key: 'ab914d9623c19fc46821d5e62db92f1192ebbe7e', class: "native-wrapper" }, h("svg", { key: '66e3f4f5dcaa9756fb0e9452299954f9ed3dcb7b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'ffbce8010274a68b8e67f9c0f19ec012944df484', onSlotchange: () => forceUpdate(this) }), this.renderHintText()), h("div", { key: '8e21fb89c72fbd52df70fa1916367ab5a543f281', class: "native-wrapper" }, h("svg", { key: 'c2519ff1a5c7f69e03ab26197ccfa8718b0951c6', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, 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/esm/ion-datetime_3.entry.js

@@ -1083,6 +1083,9 @@ const Datetime = class {
             this.clearFocusVisible();
             this.clearFocusVisible = undefined;
         }
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -1131,7 +1134,7 @@ const Datetime = class {
          *
          * We schedule this after everything has had a chance to run.
          */
-        setTimeout(() => {
+        this.loadTimeout = setTimeout(() => {
             this.ensureReadyIfVisible();
         }, 100);
         /**
@@ -1889,7 +1892,7 @@ const Datetime = class {
         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: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'b81c3531f4654be3f6948df5f790c0f6ab488000', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1899,7 +1902,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: 'f7f39f8e56146186210d0ab70ae95e829573e549', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-fab_3.entry.js

@@ -177,6 +177,7 @@ const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:calc(100% + 10
 const FabList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.activateTimeouts = [];
         /**
          * If `true`, the fab list will show all fab buttons in the list.
          */
@@ -187,20 +188,26 @@ const FabList = class {
         this.side = 'bottom';
     }
     activatedChanged(activated) {
+        this.activateTimeouts.forEach(clearTimeout);
+        this.activateTimeouts = [];
         const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
         // if showing the fabs add a timeout, else show immediately
         const timeout = activated ? 30 : 0;
         fabs.forEach((fab, i) => {
-            setTimeout(() => (fab.show = activated), i * timeout);
+            this.activateTimeouts.push(setTimeout(() => (fab.show = activated), i * timeout));
         });
     }
+    disconnectedCallback() {
+        this.activateTimeouts.forEach(clearTimeout);
+        this.activateTimeouts = [];
+    }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '64b33366447f66c7f979cfac56307fbb1a6fac1c', class: {
+        return (h(Host, { key: '03a8920c29a93c6df4bab14753a78a8a30722ce8', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: 'd9f474f7f20fd7e813db358fddc720534ca05bb6' })));
+            } }, h("slot", { key: 'd9e1541cb044e209bc2dff14080f3b938a2b84ae' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-img.entry.js

@@ -30,7 +30,16 @@ const Img = class {
     componentDidLoad() {
         this.addIO();
     }
+    disconnectedCallback() {
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+        }
+    }
     addIO() {
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+            this.loadTimeout = undefined;
+        }
         if (this.src === undefined) {
             return;
         }
@@ -54,7 +63,7 @@ const Img = class {
         }
         else {
             // fall back to setTimeout for Safari and IE
-            setTimeout(() => this.load(), 200);
+            this.loadTimeout = setTimeout(() => this.load(), 200);
         }
     }
     load() {
@@ -71,7 +80,7 @@ const Img = class {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: 'da600442894427dee1974a28e545613afac69fca', class: getIonMode(this) }, h("img", { key: '16df0c7069af86c0fa7ce5af598bc0f63b4eb71a', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: getIonMode(this) }, h("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -328,11 +328,16 @@ const Label = class {
     }
     componentDidLoad() {
         if (this.noAnimate) {
-            setTimeout(() => {
+            this.loadTimeout = setTimeout(() => {
                 this.noAnimate = false;
             }, 1000);
         }
     }
+    disconnectedCallback() {
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+        }
+    }
     colorChanged() {
         this.emitColor();
     }
@@ -361,13 +366,13 @@ const Label = class {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '684ddfa719e34d743489ff05a0df067829257c73', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd603670c442213c28737b0c052c094705b8c84ef', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '4aace3e2b36250e832c44f63bea21116d77220fb' })));
+            }) }, h("slot", { key: 'a8c3aed240a20ee5856c423662878481a1e6d4cf' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {