@ionic/core 8.0.0-dev.11709632212.139b6f63 → 8.0.0-dev.11711408410.14d71406

package/components/index8.js

@@ -1,128 +1,167 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers.js';
-import { b as printRequiredElementError } from './index6.js';
+import { d as doc } from './index5.js';
+import { p as pointerCoord } from './helpers.js';
 
-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();
+const startTapClick = (config) => {
+    if (doc === undefined) {
+        return;
     }
-    return el;
-};
-/**
- * Queries the element matching the selector for IonContent.
- * See ION_CONTENT_SELECTOR for the selector used.
- */
-const findIonContent = (el) => {
+    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);
     /**
-     * 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.
+     * 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.
      */
-    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: durationMs > 0 ? 'smooth' : 'auto',
-    }));
+    doc.addEventListener('pointercancel', cancelActive, true);
 };
-/**
- * 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;
+// TODO(FW-2832): type
+const getActivatableTarget = (ev) => {
+    if (ev.composedPath !== undefined) {
         /**
-         * 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.
+         * 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.
          */
-        return initialScrollY;
+        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;
+            }
+        }
     }
     else {
-        contentEl.style.setProperty('overflow', 'hidden');
-        return true;
+        return ev.target.closest('.ion-activatable');
     }
 };
-const resetContentScrollY = (contentEl, initialScrollY) => {
-    if (isIonContent(contentEl)) {
-        contentEl.scrollY = initialScrollY;
-    }
-    else {
-        contentEl.style.removeProperty('overflow');
+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;
+        }
     }
+    return el.querySelector('ion-ripple-effect');
 };
+const ACTIVATED = 'ion-activated';
+const ADD_ACTIVATED_DEFERS = 100;
+const CLEAR_STATE_DEFERS = 150;
 
-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 };
+export { startTapClick };

package/components/input-shims.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win, d as doc } from './index5.js';
-import { g as getScrollElement, c as scrollByPoint, a as findClosestIonContent } from './index8.js';
+import { g as getScrollElement, c as scrollByPoint, a as findClosestIonContent } from './index7.js';
 import { a as addEventListener, b as removeEventListener, r as raf, c as componentOnReady } from './helpers.js';
 import { a as KeyboardResize, K as Keyboard } from './keyboard.js';
 

package/components/input.utils.js

@@ -3,7 +3,7 @@
  */
 import { w as win } from './index5.js';
 import { r as raf } from './helpers.js';
-import { a as printIonError } from './index6.js';
+import { e as printIonError } from './ionic-global.js';
 
 /**
  * Used to update a scoped component that uses emulated slots. This fires when
@@ -47,6 +47,18 @@ const createSlotMutationController = (el, slotName, mutationCallback) => {
         });
         hostMutationObserver.observe(el, {
             childList: true,
+            /**
+             * This fixes an issue with the `ion-input` and
+             * `ion-textarea` not re-rendering in some cases
+             * when using the label slot functionality.
+             *
+             * HTML element patches in Stencil that are enabled
+             * by the `experimentalSlotFixes` flag in Stencil v4
+             * result in DOM manipulations that won't trigger
+             * the current mutation observer configuration and
+             * callback.
+             */
+            subtree: true,
         });
     }
     /**

package/components/ion-accordion-group.js

@@ -2,8 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as printIonWarning } from './index6.js';
-import { b as getIonMode } from './ionic-global.js';
+import { p as printIonWarning, d as getIonTheme } from './ionic-global.js';
+
+const ionicAccordionGroupMdCss = ":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion){-webkit-box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;border-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous){border-end-end-radius:6px;border-end-start-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next){border-start-start-radius:6px;border-start-end-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
+const IonAccordionGroupIonicStyle0 = ionicAccordionGroupMdCss;
 
 const accordionGroupIosCss = ":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}";
 const IonAccordionGroupIosStyle0 = accordionGroupIosCss;
@@ -205,13 +207,13 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
     }
     render() {
         const { disabled, readonly, expand } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'ac2e26ac91c95d08172bd2b51daa7a711c21db9e', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'e71d4f6391a74fd3fc6551a21c58c80167e8a0ab', class: {
+                [theme]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", { key: '444adc2af5730897eba57095da046d6bdb5af70f' })));
+            }, role: "presentation" }, h("slot", { key: '28f7034ff9e25a2be08a1c9465a1151619ae313d' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -220,6 +222,7 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
         "readonly": ["readonlyChanged"]
     }; }
     static get style() { return {
+        ionic: IonAccordionGroupIonicStyle0,
         ios: IonAccordionGroupIosStyle0,
         md: IonAccordionGroupMdStyle0
     }; }

package/components/ion-accordion.js

@@ -3,10 +3,13 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { r as raf, t as transitionEndAsync, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
-import { c as chevronDown } from './index7.js';
-import { c as config, b as getIonMode } from './ionic-global.js';
+import { c as chevronDown } from './index6.js';
+import { c as config, d as getIonTheme } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
+const ionicAccordionMdCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}";
+const IonAccordionIonicStyle0 = ionicAccordionMdCss;
+
 const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";
 const IonAccordionIosStyle0 = accordionIosCss;
 
@@ -295,13 +298,13 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
     }
     render() {
         const { disabled, readonly } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: '073e1d02c18dcbc20c68648426e87c14750c031d', class: {
-                [mode]: true,
+        return (h(Host, { key: '9194c52382548c03e6277a1c11b5c768a3ec7b2a', class: {
+                [theme]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
                 'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
@@ -311,7 +314,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            } }, h("div", { key: '9b4cf326de8bb6b4033992903c0c1bfd7eea9bcc', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '464c32a37f64655eacf4218284214f5f30b14a1e', name: "header" })), h("div", { key: '8bb52e6a62d7de0106b253201a89a32e79d9a594', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '1d9dfd952ad493754aaeea7a8f625b33c2dd90a0', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '970dfbc55a612d739d0ca3b7b1a08e5c96d0c479', name: "content" })))));
+            } }, h("div", { key: '9c40f20571f4da55407310da535f253739747b13', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '2832eb9df3036722609c49e1ea935906599d04f8', name: "header" })), h("div", { key: '12161651ca3f193906c7f4533d3f6e027a19eca4', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: 'c53cbbb9b5761f367e2915005305f3b823245285', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '68c47cb66583b55d353ba9360dd6bb3b5af69847', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -319,6 +322,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         "value": ["valueChanged"]
     }; }
     static get style() { return {
+        ionic: IonAccordionIonicStyle0,
         ios: IonAccordionIosStyle0,
         md: IonAccordionMdStyle0
     }; }

package/components/ion-app.js

@@ -2,9 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
-import { shoudUseCloseWatcher } from './hardware-back-button.js';
-import { p as printIonWarning } from './index6.js';
-import { b as getIonMode, c as config, a as isPlatform } from './ionic-global.js';
+import { shouldUseCloseWatcher } from './hardware-back-button.js';
+import { d as getIonTheme, c as config, a as isPlatform, p as printIonWarning } from './ionic-global.js';
 
 const appCss = "html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
 const IonAppStyle0 = appCss;
@@ -19,7 +18,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
             rIC(async () => {
                 const isHybrid = isPlatform(window, 'hybrid');
                 if (!config.getBoolean('_testing')) {
-                    import('./index9.js').then((module) => module.startTapClick(config));
+                    import('./index8.js').then((module) => module.startTapClick(config));
                 }
                 if (config.getBoolean('statusTap', isHybrid)) {
                     import('./status-tap.js').then((module) => module.startStatusTap());
@@ -33,7 +32,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
                     import('./input-shims.js').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('./hardware-back-button.js');
-                const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
                 if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
                 }
@@ -42,7 +41,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
                      * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
                      * then the close watcher will not be used.
                      */
-                    if (shoudUseCloseWatcher()) {
+                    if (shouldUseCloseWatcher()) {
                         printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
                     }
                     hardwareBackButtonModule.blockHardwareBackButton();
@@ -70,9 +69,9 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '3535eb5c0dab78a78011e552524a98599b2b650f', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '71b18fe6774029ab0fc53ebab579064f7a2fb908', class: {
+                [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));

package/components/ion-avatar.js

@@ -2,7 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as getIonMode } from './ionic-global.js';
+import { d as getIonTheme } from './ionic-global.js';
+
+const ionicAvatarMdCss = ":host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;-o-object-fit:cover;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:64px;height:64px}";
+const IonAvatarIonicStyle0 = ionicAvatarMdCss;
 
 const avatarIosCss = ":host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;-o-object-fit:cover;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:48px;height:48px}";
 const IonAvatarIosStyle0 = avatarIosCss;
@@ -17,9 +20,13 @@ const Avatar = /*@__PURE__*/ proxyCustomElement(class Avatar extends HTMLElement
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '95d7ca334f9b66e0983cbc1b782ded0b9a54eaa9', class: getIonMode(this) }, h("slot", { key: '011d20189acdb03bee328aa4fa0511826a0b3a36' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'da2881ad023aa8ae16c3caf5e18070eddf4cb48c', class: {
+                [theme]: true,
+            } }, h("slot", { key: '5d1f0a5b8260169a2bafa4838f37cd3203bf8605' })));
     }
     static get style() { return {
+        ionic: IonAvatarIonicStyle0,
         ios: IonAvatarIosStyle0,
         md: IonAvatarMdStyle0
     }; }

package/components/ion-back-button.js

@@ -4,11 +4,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes } from './helpers.js';
 import { o as openURL, c as createColorClasses, h as hostContext } from './theme.js';
-import { a as chevronBack, b as arrowBackSharp } from './index7.js';
-import { c as config, b as getIonMode } from './ionic-global.js';
+import { a as chevronBack, b as arrowBackSharp } from './index6.js';
+import { c as config, d as getIonTheme } from './ionic-global.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
 
+const ionicBackButtonMdCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-kerning:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--border-radius:4px;--background-focused:currentColor;--background-focused-opacity:.12;--background-hover:currentColor;--background-hover-opacity:0.04;--color:currentColor;--icon-margin-end:0;--icon-margin-start:0;--icon-font-size:1.5rem;--icon-font-weight:normal;--min-height:32px;--min-width:44px;--padding-start:12px;--padding-end:12px;font-size:0.875rem;font-weight:500;text-transform:uppercase}:host(.back-button-has-icon-only){--border-radius:50%;min-width:48px;min-height:48px;aspect-ratio:1/1}.button-native{-webkit-box-shadow:none;box-shadow:none}.button-text{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0}ion-icon{line-height:0.67;text-align:start}@media (any-hover: hover){:host(.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}";
+const IonBackButtonIonicStyle0 = ionicBackButtonMdCss;
+
 const backButtonIosCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-kerning:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-hover:transparent;--background-hover-opacity:1;--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #0054e9);--icon-margin-end:1px;--icon-margin-start:-4px;--icon-font-size:1.6em;--min-height:32px;font-size:clamp(17px, 1.0625rem, 21.998px)}.button-native{-webkit-transform:translateZ(0);transform:translateZ(0);overflow:visible;z-index:99}:host(.ion-activated) .button-native{opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}";
 const IonBackButtonIosStyle0 = backButtonIosCss;
 
@@ -49,7 +52,7 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
             // icon is set on the component or by the config
             return icon;
         }
-        if (getIonMode(this) === 'ios') {
+        if (getIonTheme(this) === 'ios') {
             // default ios back button icon
             return config.get('backButtonIcon', chevronBack);
         }
@@ -57,7 +60,7 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
         return config.get('backButtonIcon', arrowBackSharp);
     }
     get backButtonText() {
-        const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
+        const defaultBackButtonText = getIonTheme(this) === 'ios' ? 'Back' : null;
         return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
     }
     get hasIconOnly() {
@@ -74,10 +77,10 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
     render() {
         const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
         const showBackButton = defaultHref !== undefined;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '175fff2d7a41d2deaaf7b781c5ba2aac9311ebf4', onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '01d115b1203a256e0cbd75bb982fd7ef310917ba', onClick: this.onClick, class: createColorClasses(color, {
+                [theme]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
                 'back-button-has-icon-only': hasIconOnly,
@@ -86,10 +89,11 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '59fe30c167ea82e2431e45d46060a01bcb2aea77', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '3d704fb7ef001446361e7a09d43763a771b242b9', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h("button", { key: 'e37e1c79da8337ad4f04cf6e4edd51ad7d4c0d69', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '7cfeae53736e5fbe4c5c31d259d0eb3ec0664643', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     get el() { return this; }
     static get style() { return {
+        ionic: IonBackButtonIonicStyle0,
         ios: IonBackButtonIosStyle0,
         md: IonBackButtonMdStyle0
     }; }

package/components/ion-badge.js

@@ -3,7 +3,10 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createColorClasses } from './theme.js';
-import { b as getIonMode } from './ionic-global.js';
+import { d as getIonTheme } from './ionic-global.js';
+
+const ionicBadgeMdCss = ":host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{--padding-top:3px;--padding-end:4px;--padding-bottom:4px;--padding-start:4px;border-radius:4px}";
+const IonBadgeIonicStyle0 = ionicBadgeMdCss;
 
 const badgeIosCss = ":host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}";
 const IonBadgeIosStyle0 = badgeIosCss;
@@ -19,12 +22,13 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         this.color = undefined;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '043eea016721e53f0af1cbf1371bc08694281204', class: createColorClasses(this.color, {
-                [mode]: true,
-            }) }, h("slot", { key: 'bd510450d6b60f2794491244e68a83049a5ef6dd' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '0834ff32b44532d37e4821e3a324ca7693ff1a99', class: createColorClasses(this.color, {
+                [theme]: true,
+            }) }, h("slot", { key: '8d8a1f093861fa92ebe44af0f24333c732128e92' })));
     }
     static get style() { return {
+        ionic: IonBadgeIonicStyle0,
         ios: IonBadgeIosStyle0,
         md: IonBadgeMdStyle0
     }; }