@ionic/core 8.6.0 → 8.6.1-dev.11749483665.140e610d

package/components/index8.js

@@ -1,128 +1,167 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers.js';
-import { e as printRequiredElementError } from './index4.js';
+import { d as doc } from './ionic-global.js';
+import { q 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: 'smooth' ,
-    }));
+    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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win, d as doc } from './index9.js';
-import { g as getScrollElement, c as scrollByPoint, a as findClosestIonContent } from './index8.js';
+import { w as win, d as doc } from './ionic-global.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 './keyboard2.js';
 

package/components/input.utils.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index9.js';
+import { w as win } from './ionic-global.js';
 import { r as raf } from './helpers.js';
 import { a as printIonError } from './index4.js';
 

package/components/ion-accordion-group.js

@@ -3,7 +3,9 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { p as printIonWarning } from './index4.js';
-import { b as getIonMode } from './ionic-global.js';
+import { b as getIonTheme } from './ionic-global.js';
+
+const accordionGroupIonicCss = ":host{display:block}:host{min-width:calc(var(--ion-scale-6200, 248px) + var(--ion-space-600, var(--ion-scale-600, 24px)));background-color:var(--ion-bg-neutral-subtlest-default, var(--ion-primitives-base-white, #ffffff))}:host(.accordion-group-expand-inset){-webkit-padding-start:var(--ion-space-100, var(--ion-scale-100, 4px));padding-inline-start:var(--ion-space-100, var(--ion-scale-100, 4px));-webkit-padding-end:var(--ion-space-100, var(--ion-scale-100, 4px));padding-inline-end:var(--ion-space-100, var(--ion-scale-100, 4px));padding-top:var(--ion-space-100, var(--ion-scale-100, 4px));padding-bottom:var(--ion-space-100, var(--ion-scale-100, 4px))}:host(.accordion-group-expand-inset.accordion-group-shape-round){--border-radius:var(--ion-border-radius-400, var(--ion-scale-400, 16px));border-radius:var(--ion-border-radius-400, var(--ion-scale-400, 16px))}:host(.accordion-group-expand-inset.accordion-group-shape-soft){--border-radius:var(--ion-border-radius-200, var(--ion-scale-200, 8px));border-radius:var(--ion-border-radius-200, var(--ion-scale-200, 8px))}:host(.accordion-group-expand-inset.accordion-group-shape-rectangular){--border-radius:var(--ion-border-radius-0, var(--ion-scale-0, 0px));border-radius:var(--ion-border-radius-0, var(--ion-scale-0, 0px))}";
 
 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}";
 
@@ -216,15 +218,29 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
     async getAccordions() {
         return Array.from(this.el.querySelectorAll(':scope > ion-accordion'));
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11328): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     render() {
         const { disabled, readonly, expand } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'd1a79a93179474fbba66fcf11a92f4871dacc975', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
+        return (h(Host, { key: '3ff9248922382f2fe2eb9eb2fd895bb9aa91ef2f', class: {
+                [theme]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", { key: 'e6b8954b686d1fbb4fc92adb07fddc97a24b0a31' })));
+                [`accordion-group-shape-${shape}`]: shape !== undefined,
+            }, role: "presentation" }, h("slot", { key: 'aaa96bfa504bb020c7897e44ac1502b12bb81faf' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -233,6 +249,7 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
         "readonly": ["readonlyChanged"]
     }; }
     static get style() { return {
+        ionic: accordionGroupIonicCss,
         ios: accordionGroupIosCss,
         md: accordionGroupMdCss
     }; }
@@ -243,6 +260,7 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
         "disabled": [4],
         "readonly": [4],
         "expand": [1],
+        "shape": [1],
         "requestAccordionToggle": [64],
         "getAccordions": [64]
     }, [[0, "keydown", "onKeydown"]], {

package/components/ion-accordion.js

@@ -2,15 +2,19 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as caretDownSvg } from './caret-down.js';
 import { g as getElementRoot, r as raf, a as addEventListener, b as removeEventListener, t as transitionEndAsync } from './helpers.js';
+import { h as hostContext } from './theme.js';
 import { c as chevronDown } from './index6.js';
 import { c as config } from './index4.js';
-import { b as getIonMode } from './ionic-global.js';
+import { b as getIonTheme } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-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 accordionIonicCss = ":host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#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}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--ion-space-400, var(--ion-scale-400, 16px));margin-inline-start:var(--ion-space-400, var(--ion-scale-400, 16px));-webkit-margin-end:var(--ion-space-400, var(--ion-scale-400, 16px));margin-inline-end:var(--ion-space-400, var(--ion-scale-400, 16px));right:0;left:0;bottom:0;display:block;position:absolute;height:var(--ion-border-size-025, var(--ion-scale-025, 1px));background-color:var(--ion-border-default, var(--ion-primitives-neutral-400, #d5d5d5));content:\"\";z-index:3}: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)}::slotted(ion-item[slot=header]){--border-radius:inherit;--color:var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));--border-width:var(--ion-border-size-0, var(--ion-scale-0, 0px));--inner-border-width:var(--ion-scale-0, 0px);--min-height:var(--ion-scale-700, 28px);--padding-top:var(--ion-space-300, var(--ion-scale-300, 12px));--padding-end:var(--ion-space-400, var(--ion-scale-400, 16px));--padding-bottom:var(--ion-space-300, var(--ion-scale-300, 12px));--padding-start:var(--ion-space-400, var(--ion-scale-400, 16px));font-size:var(--ion-font-size-450, 1.125rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-700, var(--ion-scale-700, 28px));text-decoration:none;text-transform:none}#content-wrapper{-webkit-padding-start:var(--ion-space-400, var(--ion-scale-400, 16px));padding-inline-start:var(--ion-space-400, var(--ion-scale-400, 16px));-webkit-padding-end:var(--ion-space-400, var(--ion-scale-400, 16px));padding-inline-end:var(--ion-space-400, var(--ion-scale-400, 16px));padding-bottom:var(--ion-space-300, var(--ion-scale-300, 12px));font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, var(--ion-scale-600, 24px));text-decoration:none;text-transform:none;color:var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424))}:host(.accordion-disabled)::before{border-radius:inherit;right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none;z-index:2}";
 
-const accordionMdCss = ":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 accordionIosCss = ":host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#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}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}: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)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";
+
+const accordionMdCss = ":host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#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}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}: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)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}";
 
 const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
     constructor() {
@@ -35,12 +39,6 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
          * but does not alter the opacity.
          */
         this.readonly = false;
-        /**
-         * The toggle icon to use. This icon will be
-         * rotated when the accordion is expanded
-         * or collapsed.
-         */
-        this.toggleIcon = chevronDown;
         /**
          * The slot inside of `ion-item` to
          * place the toggle icon. Defaults to `"end"`.
@@ -108,7 +106,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             if (!ionItem) {
                 return;
             }
-            const { toggleIconSlot, toggleIcon } = this;
+            const { accordionToggleIcon, toggleIconSlot } = this;
             /**
              * Check if there already is a toggle icon.
              * If so, do not add another one.
@@ -121,7 +119,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             iconEl.slot = toggleIconSlot;
             iconEl.lazy = false;
             iconEl.classList.add('ion-accordion-toggle-icon');
-            iconEl.icon = toggleIcon;
+            iconEl.icon = accordionToggleIcon;
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
@@ -241,9 +239,6 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             }
         };
         this.getNextSibling = () => {
-            if (!this.el) {
-                return;
-            }
             const nextSibling = this.el.nextElementSibling;
             if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.tagName) !== 'ION-ACCORDION') {
                 return;
@@ -251,9 +246,6 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             return nextSibling;
         };
         this.getPreviousSibling = () => {
-            if (!this.el) {
-                return;
-            }
             const previousSibling = this.el.previousElementSibling;
             if ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.tagName) !== 'ION-ACCORDION') {
                 return;
@@ -295,6 +287,23 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             this.setAria(expanded);
         });
     }
+    get accordionToggleIcon() {
+        // Return the icon if it is explicitly set
+        if (this.toggleIcon != null) {
+            return this.toggleIcon;
+        }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronDown,
+            ionic: caretDownSvg,
+            md: chevronDown,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured accordion toggle icon or the default icon
+        return config.get('accordionToggleIcon', defaultIcon);
+    }
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
@@ -314,13 +323,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: 'fa0868a83fe0858d01eb2926790bcfc7635a647d', class: {
+                [theme]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
                 'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
@@ -330,7 +339,8 @@ 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" })))));
+                'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
+            } }, h("div", { key: '386fcbc4f5cd8a5b04d2e8b3adcfc8b692c75c48', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '831deb179fdaada595982566e08ec380a17cf058', name: "header" })), h("div", { key: 'c4d51f29c3797705392119b2369d941f752e50f2', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: 'fc45f0b7b7057f5f99d4ff99950ab95b5e137045', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'f59d8e00a6d6fa7fe5291217c4b649499d759349', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -338,6 +348,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         "value": ["valueChanged"]
     }; }
     static get style() { return {
+        ionic: accordionIonicCss,
         ios: accordionIosCss,
         md: accordionMdCss
     }; }

package/components/ion-app.js

@@ -1,10 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
-import { shouldUseCloseWatcher } from './hardware-back-button.js';
-import { c as config, p as printIonWarning } from './index4.js';
-import { b as getIonMode, a as isPlatform } from './ionic-global.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { focusElements } from './focus-visible.js';
+import { c as config } from './index4.js';
+import { b as getIonTheme } 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}";
 
@@ -13,46 +13,6 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
         super();
         this.__registerHost();
     }
-    componentDidLoad() {
-        if (Build.isBrowser) {
-            rIC(async () => {
-                const isHybrid = isPlatform(window, 'hybrid');
-                if (!config.getBoolean('_testing')) {
-                    import('./index7.js').then((module) => module.startTapClick(config));
-                }
-                if (config.getBoolean('statusTap', isHybrid)) {
-                    import('./status-tap.js').then((module) => module.startStatusTap());
-                }
-                if (config.getBoolean('inputShims', needInputShims())) {
-                    /**
-                     * needInputShims() ensures that only iOS and Android
-                     * platforms proceed into this block.
-                     */
-                    const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
-                    import('./input-shims.js').then((module) => module.startInputShims(config, platform));
-                }
-                const hardwareBackButtonModule = await import('./hardware-back-button.js');
-                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
-                if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
-                    hardwareBackButtonModule.startHardwareBackButton();
-                }
-                else {
-                    /**
-                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
-                     * then the close watcher will not be used.
-                     */
-                    if (shouldUseCloseWatcher()) {
-                        printIonWarning('[ion-app] - 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();
-                }
-                if (typeof window !== 'undefined') {
-                    import('./keyboard.js').then((module) => module.startKeyboardAssist(window));
-                }
-                import('./focus-visible.js').then((module) => (this.focusVisible = module.startFocusVisible()));
-            });
-        }
-    }
     /**
      * 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
@@ -61,16 +21,20 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
      * 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.
      */
     async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
+        /**
+         * The focus-visible utility is used to set focus on an
+         * element that uses `ion-focusable`.
+         */
+        focusElements(elements);
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '25667e21b2fffa03ccf013044c340e96bd7faad9', class: {
+                [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
@@ -80,33 +44,6 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
 }, [0, "ion-app", {
         "setFocus": [64]
     }]);
-const needInputShims = () => {
-    /**
-     * iOS always needs input shims
-     */
-    const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
-    if (needsShimsIOS) {
-        return true;
-    }
-    /**
-     * Android only needs input shims when running
-     * in the browser and only if the browser is using the
-     * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
-     */
-    const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
-    if (isAndroidMobileWeb) {
-        return true;
-    }
-    return false;
-};
-const rIC = (callback) => {
-    if ('requestIdleCallback' in window) {
-        window.requestIdleCallback(callback);
-    }
-    else {
-        setTimeout(callback, 32);
-    }
-};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;