@ionic/core 8.7.5-nightly.20250924 → 8.7.6-dev.11758808200.14faa1a0

package/components/data.js

@@ -1147,20 +1147,20 @@ const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
 // h24 hour system uses 1-24. Midnight starts at 24:00.
 const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0];
 /**
- * Given a locale and a mode,
+ * Given a locale and a theme,
  * return an array with formatted days
- * of the week. iOS should display days
- * such as "Mon" or "Tue".
+ * of the week. iOS and Ionic themes should
+ * display days such as "Mon" or "Tue".
  * MD should display days such as "M"
  * or "T".
  */
-const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
+const getDaysOfWeek = (locale, theme, firstDayOfWeek = 0) => {
     /**
      * Nov 1st, 2020 starts on a Sunday.
      * ion-datetime assumes weeks start on Sunday,
      * but is configurable via `firstDayOfWeek`.
      */
-    const weekdayFormat = mode === 'ios' ? 'short' : 'narrow';
+    const weekdayFormat = theme === 'md' ? 'narrow' : 'short';
     const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
     const startDate = new Date('11/01/2020');
     const daysOfWeek = [];

package/components/focus-visible.js

@@ -17,6 +17,28 @@ const FOCUS_KEYS = [
     'Home',
     'End',
 ];
+let focusVisibleUtility = null;
+const getOrInitFocusVisibleUtility = () => {
+    if (!focusVisibleUtility) {
+        focusVisibleUtility = startFocusVisible();
+    }
+    return focusVisibleUtility;
+};
+/**
+ * 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
+ * event as the focus utility should handle this for us. This method
+ * should be used when we want to programmatically focus an element as
+ * a result of another user action. (Ex: We focus the first element
+ * inside of a popover when the user presents it, but the popover is not always
+ * presented as a result of keyboard action.)
+ *
+ * @param elements - The elements to set focus on.
+ */
+const focusElements = (elements) => {
+    const focusVisible = getOrInitFocusVisibleUtility();
+    focusVisible.setFocus(elements);
+};
 const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;
@@ -72,4 +94,4 @@ const startFocusVisible = (rootEl) => {
     };
 };
 
-export { startFocusVisible };
+export { focusElements, getOrInitFocusVisibleUtility, startFocusVisible };

package/components/framework-delegate.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { c as config } from './index4.js';
 import { c as componentOnReady } from './helpers.js';
 
 // TODO(FW-2832): types
@@ -102,7 +103,8 @@ const CoreDelegate = () => {
          * Get the root of the app and
          * add the overlay there.
          */
-        const app = document.querySelector('ion-app') || document.body;
+        const appRootSelector = config.get('appRootSelector', 'ion-app');
+        const app = document.querySelector(appRootSelector) || document.body;
         /**
          * Create a placeholder comment so that
          * we can return this component to where

package/components/header.js

@@ -2,10 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index8.js';
+import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index7.js';
 import { f as clamp, i as inheritAriaAttributes } from './helpers.js';
 import { h as hostContext } from './theme.js';
-import { b as getIonMode } from './ionic-global.js';
+import { c as config } from './index4.js';
+import { b as getIonTheme } from './ionic-global.js';
 
 const TRANSITION = 'all 0.2s ease-in-out';
 const cloneElement = (tagName) => {
@@ -202,18 +203,25 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     });
 };
 
-const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
+const headerIonicCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{-webkit-box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));z-index:10}ion-header.header-divider{border-bottom:var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-primitives-neutral-300, #e0e0e0)}ion-toolbar+ion-toolbar{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px));backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px))}.header-translucent-ionic ion-toolbar{--opacity:0.7}}";
 
-const headerMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
+const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:0.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
+
+const headerMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
 
 const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.inheritedAttributes = {};
+        /**
+         * If `true`, the header will have a line at the bottom.
+         * TODO(ROU-10855): add support for this prop on ios/md themes
+         */
+        this.divider = false;
         /**
          * If `true`, the header will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          *
          * Note: In order to scroll content behind the header, the `fullscreen`
@@ -245,16 +253,17 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
-        const mode = getIonMode(this);
-        if (mode !== 'ios') {
+        const theme = getIonTheme(this);
+        if (theme !== 'ios') {
             return;
         }
         const { collapse } = this;
         const hasCondense = collapse === 'condense';
         const hasFade = collapse === 'fade';
         this.destroyCollapsibleHeader();
+        const appRootSelector = config.get('appRootSelector', 'ion-app');
         if (hasCondense) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
             writeTask(() => {
@@ -265,7 +274,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
             await this.setupCondenseHeader(contentEl, pageEl);
         }
         else if (hasFade) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
                 printIonContentErrorMsg(this.el);
@@ -340,27 +349,30 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         });
     }
     render() {
-        const { translucent, inheritedAttributes } = this;
-        const mode = getIonMode(this);
+        const { translucent, inheritedAttributes, divider } = this;
+        const theme = getIonTheme(this);
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: 'b6cc27f0b08afc9fcc889683525da765d80ba672', role: roleType, class: {
-                [mode]: true,
+        return (h(Host, Object.assign({ key: 'f5c81cee59b635b407fcad7732c793c651edb91e', role: roleType, class: {
+                [theme]: true,
                 // Used internally for styling
-                [`header-${mode}`]: true,
+                [`header-${theme}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '395766d4dcee3398bc91960db21f922095292f14', class: "header-background" }), h("slot", { key: '09a67ece27b258ff1248805d43d92a49b2c6859a' })));
+                [`header-translucent-${theme}`]: this.translucent,
+                ['header-divider']: divider,
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'd8373a8418756961185de934082142da01b27a26', class: "header-background" }), h("slot", { key: '9fda3dcb16fd09f7f6fa1c345d17cdf130e1e331' })));
     }
     get el() { return this; }
     static get style() { return {
+        ionic: headerIonicCss,
         ios: headerIosCss,
         md: headerMdCss
     }; }
 }, [292, "ion-header", {
         "collapse": [1],
+        "divider": [4],
         "translucent": [4]
     }]);
 function defineCustomElement() {

package/components/helpers.js

@@ -1,7 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { a as printIonError } from './index4.js';
+import { focusElements } from './focus-visible.js';
+import { a as printIonError, c as config } from './index4.js';
 
 const transitionEndAsync = (el, expectedDuration = 0) => {
     return new Promise((resolve) => {
@@ -201,6 +202,17 @@ const raf = (h) => {
 const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
+/**
+ * Focuses a given element while ensuring proper focus management
+ * within the Ionic framework. If the element is marked as `ion-focusable`,
+ * this function will delegate focus handling to `ion-app` or manually
+ * apply focus when a custom app root is used.
+ *
+ * This function helps maintain accessibility and expected focus behavior
+ * in both standard and custom root environments.
+ *
+ * @param el - The element to focus.
+ */
 const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -212,9 +224,36 @@ const focusVisibleElement = (el) => {
      * which will let us explicitly set the elements to focus.
      */
     if (el.classList.contains('ion-focusable')) {
-        const app = el.closest('ion-app');
+        const appRootSelector = config.get('appRootSelector', 'ion-app');
+        const app = el.closest(appRootSelector);
         if (app) {
-            app.setFocus([el]);
+            if (appRootSelector === 'ion-app') {
+                /**
+                 * If the app root is the default, then it will be
+                 * in charge of setting focus. This is because the
+                 * focus-visible utility is attached to the app root
+                 * and will handle setting focus on the correct element.
+                 */
+                app.setFocus([el]);
+            }
+            else {
+                /**
+                 * When using a custom app root selector, the focus-visible
+                 * utility is not available to manage focus automatically.
+                 * If we set focus immediately, the element may not be fully
+                 * rendered or interactive, especially if it was just added
+                 * to the DOM. Using requestAnimationFrame ensures that focus
+                 * is applied on the next frame, allowing the DOM to settle
+                 * before changing focus.
+                 */
+                requestAnimationFrame(() => {
+                    /**
+                     * The focus-visible utility is used to set focus on an
+                     * element that uses `ion-focusable`.
+                     */
+                    focusElements([el]);
+                });
+            }
         }
     }
 };

package/components/index5.js

@@ -1,11 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { d as doc } from './index9.js';
-import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button.js';
+import { c as getIonMode, d as doc, M as MENU_BACK_BUTTON_PRIORITY } from './ionic-global.js';
 import { p as printIonWarning } from './index4.js';
 import { c as componentOnReady } from './helpers.js';
-import { b as getIonMode } from './ionic-global.js';
 import { c as createAnimation } from './animation.js';
 
 /**
@@ -48,10 +46,10 @@ const menuOverlayAnimation = (menu) => {
     }
     menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
     const mode = getIonMode(menu);
-    const isIos = mode === 'ios';
-    const opacity = isIos ? 0.2 : 0.25;
+    const isIOS = mode === 'ios';
+    const opacity = isIOS ? 0.2 : 0.25;
     backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
-    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
+    return baseAnimation(isIOS).addAnimation([menuAnimation, backdropAnimation]);
 };
 
 /**
@@ -64,6 +62,7 @@ const menuPushAnimation = (menu) => {
     let menuClosedX;
     const mode = getIonMode(menu);
     const width = menu.width;
+    const isIOS = mode === 'ios';
     if (menu.isEndSide) {
         contentOpenedX = -width + 'px';
         menuClosedX = width + 'px';
@@ -79,7 +78,7 @@ const menuPushAnimation = (menu) => {
         .addElement(menu.contentEl)
         .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
     const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
-    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+    return baseAnimation(isIOS).addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };
 
 /**
@@ -89,11 +88,12 @@ const menuPushAnimation = (menu) => {
  */
 const menuRevealAnimation = (menu) => {
     const mode = getIonMode(menu);
+    const isIOS = mode === 'ios';
     const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
     const contentOpen = createAnimation()
         .addElement(menu.contentEl) // REVIEW
         .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
-    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
+    return baseAnimation(isIOS).addAnimation(contentOpen);
 };
 
 const createMenuController = () => {

package/components/index6.js

@@ -29,4 +29,4 @@ const reorderTwoSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2
 const searchOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M221.09 64a157.09 157.09 0 1 0 157.09 157.09A157.1 157.1 0 0 0 221.09 64Z' stroke-miterlimit='10' class='ionicon-fill-none ionicon-stroke-width'/><path d='M338.29 338.29 448 448' stroke-linecap='round' stroke-miterlimit='10' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
 const searchSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M464 428 339.92 303.9a160.48 160.48 0 0 0 30.72-94.58C370.64 120.37 298.27 48 209.32 48S48 120.37 48 209.32s72.37 161.32 161.32 161.32a160.48 160.48 0 0 0 94.58-30.72L428 464ZM209.32 319.69a110.38 110.38 0 1 1 110.37-110.37 110.5 110.5 0 0 1-110.37 110.37'/></svg>";
 
-export { chevronBack as a, arrowBackSharp as b, chevronDown as c, chevronForwardOutline as d, ellipsisHorizontal as e, caretUpSharp as f, chevronForward as g, caretDownSharp as h, close as i, closeCircle as j, closeSharp as k, eyeOff as l, eye as m, menuOutline as n, menuSharp as o, arrowDown as p, caretBackSharp as q, reorderThreeOutline as r, reorderTwoSharp as s, searchOutline as t, searchSharp as u, chevronExpand as v, checkmarkOutline as w, removeOutline as x, ellipseOutline as y };
+export { arrowBackSharp as a, chevronBack as b, chevronDown as c, chevronForwardOutline as d, ellipsisHorizontal as e, chevronForward as f, caretDownSharp as g, caretUpSharp as h, close as i, closeSharp as j, closeCircle as k, eyeOff as l, eye as m, menuSharp as n, menuOutline as o, arrowDown as p, caretBackSharp as q, reorderTwoSharp as r, reorderThreeOutline as s, searchSharp as t, searchOutline as u, chevronExpand as v, checkmarkOutline as w, removeOutline as x, ellipseOutline as y };

package/components/index7.js

@@ -1,167 +1,128 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { d as doc } from './index9.js';
-import { q as pointerCoord } from './helpers.js';
+import { c as componentOnReady } from './helpers.js';
+import { e as printRequiredElementError } from './index4.js';
 
-const startTapClick = (config) => {
-    if (doc === undefined) {
-        return;
+const ION_CONTENT_TAG_NAME = 'ION-CONTENT';
+const ION_CONTENT_ELEMENT_SELECTOR = 'ion-content';
+const ION_CONTENT_CLASS_SELECTOR = '.ion-content-scroll-host';
+/**
+ * Selector used for implementations reliant on `<ion-content>` for scroll event changes.
+ *
+ * Developers should use the `.ion-content-scroll-host` selector to target the element emitting
+ * scroll events. With virtual scroll implementations this will be the host element for
+ * the scroll viewport.
+ */
+const ION_CONTENT_SELECTOR = `${ION_CONTENT_ELEMENT_SELECTOR}, ${ION_CONTENT_CLASS_SELECTOR}`;
+const isIonContent = (el) => el.tagName === ION_CONTENT_TAG_NAME;
+/**
+ * Waits for the element host fully initialize before
+ * returning the inner scroll element.
+ *
+ * For `ion-content` the scroll target will be the result
+ * of the `getScrollElement` function.
+ *
+ * For custom implementations it will be the element host
+ * or a selector within the host, if supplied through `scrollTarget`.
+ */
+const getScrollElement = async (el) => {
+    if (isIonContent(el)) {
+        await new Promise((resolve) => componentOnReady(el, resolve));
+        return el.getScrollElement();
     }
-    let lastActivated = 0;
-    let activatableEle;
-    let activeRipple;
-    let activeDefer;
-    const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
-    const clearDefers = new WeakMap();
-    const cancelActive = () => {
-        if (activeDefer)
-            clearTimeout(activeDefer);
-        activeDefer = undefined;
-        if (activatableEle) {
-            removeActivated(false);
-            activatableEle = undefined;
-        }
-    };
-    const pointerDown = (ev) => {
-        // Ignore right clicks
-        if (activatableEle || ev.button === 2) {
-            return;
-        }
-        setActivatedElement(getActivatableTarget(ev), ev);
-    };
-    const pointerUp = (ev) => {
-        setActivatedElement(undefined, ev);
-    };
-    const setActivatedElement = (el, ev) => {
-        // do nothing
-        if (el && el === activatableEle) {
-            return;
-        }
-        if (activeDefer)
-            clearTimeout(activeDefer);
-        activeDefer = undefined;
-        const { x, y } = pointerCoord(ev);
-        // deactivate selected
-        if (activatableEle) {
-            if (clearDefers.has(activatableEle)) {
-                throw new Error('internal error');
-            }
-            if (!activatableEle.classList.contains(ACTIVATED)) {
-                addActivated(activatableEle, x, y);
-            }
-            removeActivated(true);
-        }
-        // activate
-        if (el) {
-            const deferId = clearDefers.get(el);
-            if (deferId) {
-                clearTimeout(deferId);
-                clearDefers.delete(el);
-            }
-            el.classList.remove(ACTIVATED);
-            const callback = () => {
-                addActivated(el, x, y);
-                activeDefer = undefined;
-            };
-            if (isInstant(el)) {
-                callback();
-            }
-            else {
-                activeDefer = setTimeout(callback, ADD_ACTIVATED_DEFERS);
-            }
-        }
-        activatableEle = el;
-    };
-    const addActivated = (el, x, y) => {
-        lastActivated = Date.now();
-        el.classList.add(ACTIVATED);
-        if (!useRippleEffect)
-            return;
-        const rippleEffect = getRippleEffect(el);
-        if (rippleEffect !== null) {
-            removeRipple();
-            activeRipple = rippleEffect.addRipple(x, y);
-        }
-    };
-    const removeRipple = () => {
-        if (activeRipple !== undefined) {
-            activeRipple.then((remove) => remove());
-            activeRipple = undefined;
-        }
-    };
-    const removeActivated = (smooth) => {
-        removeRipple();
-        const active = activatableEle;
-        if (!active) {
-            return;
-        }
-        const time = CLEAR_STATE_DEFERS - Date.now() + lastActivated;
-        if (smooth && time > 0 && !isInstant(active)) {
-            const deferId = setTimeout(() => {
-                active.classList.remove(ACTIVATED);
-                clearDefers.delete(active);
-            }, CLEAR_STATE_DEFERS);
-            clearDefers.set(active, deferId);
-        }
-        else {
-            active.classList.remove(ACTIVATED);
-        }
-    };
-    doc.addEventListener('ionGestureCaptured', cancelActive);
-    doc.addEventListener('pointerdown', pointerDown, true);
-    doc.addEventListener('pointerup', pointerUp, true);
+    return el;
+};
+/**
+ * Queries the element matching the selector for IonContent.
+ * See ION_CONTENT_SELECTOR for the selector used.
+ */
+const findIonContent = (el) => {
     /**
-     * Tap click effects such as the ripple effect should
-     * not happen when scrolling. For example, if a user scrolls
-     * the page but also happens to do a touchstart on a button
-     * as part of the scroll, the ripple effect should not
-     * be dispatched. The ripple effect should only happen
-     * if the button is activated and the page is not scrolling.
-     *
-     * pointercancel is dispatched on a gesture when scrolling
-     * starts, so this lets us avoid having to listen for
-     * ion-content's scroll events.
+     * First we try to query the custom scroll host selector in cases where
+     * the implementation is using an outer `ion-content` with an inner custom
+     * scroll container.
      */
-    doc.addEventListener('pointercancel', cancelActive, true);
+    const customContentHost = el.querySelector(ION_CONTENT_CLASS_SELECTOR);
+    if (customContentHost) {
+        return customContentHost;
+    }
+    return el.querySelector(ION_CONTENT_SELECTOR);
+};
+/**
+ * Queries the closest element matching the selector for IonContent.
+ */
+const findClosestIonContent = (el) => {
+    return el.closest(ION_CONTENT_SELECTOR);
+};
+/**
+ * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
+ * using the public API `scrollToTop` with a duration.
+ */
+const scrollToTop = (el, durationMs) => {
+    if (isIonContent(el)) {
+        const content = el;
+        return content.scrollToTop(durationMs);
+    }
+    return Promise.resolve(el.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth' ,
+    }));
 };
-// TODO(FW-2832): type
-const getActivatableTarget = (ev) => {
-    if (ev.composedPath !== undefined) {
+/**
+ * Scrolls by a specified X/Y distance in the component. If an `ion-content` is found, it will scroll
+ * using the public API `scrollByPoint` with a duration.
+ */
+const scrollByPoint = (el, x, y, durationMs) => {
+    if (isIonContent(el)) {
+        const content = el;
+        return content.scrollByPoint(x, y, durationMs);
+    }
+    return Promise.resolve(el.scrollBy({
+        top: y,
+        left: x,
+        behavior: durationMs > 0 ? 'smooth' : 'auto',
+    }));
+};
+/**
+ * Prints an error informing developers that an implementation requires an element to be used
+ * within either the `ion-content` selector or the `.ion-content-scroll-host` class.
+ */
+const printIonContentErrorMsg = (el) => {
+    return printRequiredElementError(el, ION_CONTENT_ELEMENT_SELECTOR);
+};
+/**
+ * Several components in Ionic need to prevent scrolling
+ * during a gesture (card modal, range, item sliding, etc).
+ * Use this utility to account for ion-content and custom content hosts.
+ */
+const disableContentScrollY = (contentEl) => {
+    if (isIonContent(contentEl)) {
+        const ionContent = contentEl;
+        const initialScrollY = ionContent.scrollY;
+        ionContent.scrollY = false;
         /**
-         * composedPath returns EventTarget[]. However,
-         * objects other than Element can be targets too.
-         * For example, AudioContext can be a target. In this
-         * case, we know that the event is a UIEvent so we
-         * can assume that the path will contain either Element
-         * or ShadowRoot.
+         * This should be passed into resetContentScrollY
+         * so that we can revert ion-content's scrollY to the
+         * correct state. For example, if scrollY = false
+         * initially, we do not want to enable scrolling
+         * when we call resetContentScrollY.
          */
-        const path = ev.composedPath();
-        for (let i = 0; i < path.length - 2; i++) {
-            const el = path[i];
-            if (!(el instanceof ShadowRoot) && el.classList.contains('ion-activatable')) {
-                return el;
-            }
-        }
+        return initialScrollY;
     }
     else {
-        return ev.target.closest('.ion-activatable');
+        contentEl.style.setProperty('overflow', 'hidden');
+        return true;
     }
 };
-const isInstant = (el) => {
-    return el.classList.contains('ion-activatable-instant');
-};
-const getRippleEffect = (el) => {
-    if (el.shadowRoot) {
-        const ripple = el.shadowRoot.querySelector('ion-ripple-effect');
-        if (ripple) {
-            return ripple;
-        }
+const resetContentScrollY = (contentEl, initialScrollY) => {
+    if (isIonContent(contentEl)) {
+        contentEl.scrollY = initialScrollY;
+    }
+    else {
+        contentEl.style.removeProperty('overflow');
     }
-    return el.querySelector('ion-ripple-effect');
 };
-const ACTIVATED = 'ion-activated';
-const ADD_ACTIVATED_DEFERS = 100;
-const CLEAR_STATE_DEFERS = 150;
 
-export { startTapClick };
+export { ION_CONTENT_CLASS_SELECTOR as I, findClosestIonContent as a, ION_CONTENT_ELEMENT_SELECTOR as b, scrollByPoint as c, disableContentScrollY as d, findIonContent as f, getScrollElement as g, isIonContent as i, printIonContentErrorMsg as p, resetContentScrollY as r, scrollToTop as s };