@ionic/core 8.3.4-dev.11729775016.14d81c8f → 8.3.4-dev.11729882231.1b2e7f13

package/components/index8.js

@@ -0,0 +1,128 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { c as componentOnReady } from './helpers.js';
+import { b as printRequiredElementError } from './index6.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();
+    }
+    return el;
+};
+/**
+ * Queries the element matching the selector for IonContent.
+ * See ION_CONTENT_SELECTOR for the selector used.
+ */
+const findIonContent = (el) => {
+    /**
+     * 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.
+     */
+    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',
+    }));
+};
+/**
+ * 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;
+        /**
+         * 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.
+         */
+        return initialScrollY;
+    }
+    else {
+        contentEl.style.setProperty('overflow', 'hidden');
+        return true;
+    }
+};
+const resetContentScrollY = (contentEl, initialScrollY) => {
+    if (isIonContent(contentEl)) {
+        contentEl.scrollY = initialScrollY;
+    }
+    else {
+        contentEl.style.removeProperty('overflow');
+    }
+};
+
+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 };

package/{dist/esm/index-7f65e865.js → components/index9.js}

@@ -1,9 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { d as doc } from './ionic-global-d7017fd9.js';
-import { p as pointerCoord } from './helpers-d57f52c8.js';
-import './config-0b6b1b3d.js';
+import { d as doc } from './index5.js';
+import { p as pointerCoord } from './helpers.js';
 
 const startTapClick = (config) => {
     if (doc === undefined) {

package/components/input-shims.js

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

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win, e as printIonError } from './ionic-global.js';
+import { w as win } from './index5.js';
 import { r as raf } from './helpers.js';
+import { a as printIonError } from './index6.js';
 
 /**
  * Used to update a scoped component that uses emulated slots. This fires when

package/components/ion-accordion-group.js

@@ -2,10 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as printIonWarning, c as getIonTheme } from './ionic-global.js';
-
-const accordionGroupIonicCss = ":host{display:block}:host{min-width:272px;background-color:var(--ionic-color-base-white, #ffffff)}:host(.accordion-group-expand-inset){border-radius:var(--ionic-border-radius-400, 16px);-webkit-padding-start:var(--ionic-space-100, 4px);padding-inline-start:var(--ionic-space-100, 4px);-webkit-padding-end:var(--ionic-space-100, 4px);padding-inline-end:var(--ionic-space-100, 4px);padding-top:var(--ionic-space-100, 4px);padding-bottom:var(--ionic-space-100, 4px)}";
-const IonAccordionGroupIonicStyle0 = accordionGroupIonicCss;
+import { p as printIonWarning } from './index6.js';
+import { b as getIonMode } from './ionic-global.js';
 
 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;
@@ -207,13 +205,13 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
     }
     render() {
         const { disabled, readonly, expand } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'e71d4f6391a74fd3fc6551a21c58c80167e8a0ab', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '82f3e77066fabb4736638ee4c487ad56efd39c63', class: {
+                [mode]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", { key: '28f7034ff9e25a2be08a1c9465a1151619ae313d' })));
+            }, role: "presentation" }, h("slot", { key: 'a3c791ea887fc640b512f81d429be465ae902b3d' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -222,7 +220,6 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
         "readonly": ["readonlyChanged"]
     }; }
     static get style() { return {
-        ionic: IonAccordionGroupIonicStyle0,
         ios: IonAccordionGroupIosStyle0,
         md: IonAccordionGroupMdStyle0
     }; }

package/components/ion-accordion.js

@@ -2,21 +2,15 @@
  * (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 { r as raf, t as transitionEndAsync, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
-import { h as hostContext } from './theme.js';
-import { c as chevronDown } from './index5.js';
-import { c as config } from './config2.js';
-import { c as getIonTheme } from './ionic-global.js';
+import { c as chevronDown } from './index7.js';
+import { c as config, b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-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(--ionic-space-400, 16px);margin-inline-start:var(--ionic-space-400, 16px);-webkit-margin-end:var(--ionic-space-400, 16px);margin-inline-end:var(--ionic-space-400, 16px);right:0;left:0;bottom:0;display:block;position:absolute;height:var(--ionic-border-size-025, 1px);background-color:var(--ionic-color-neutral-300, #cfcfcf);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:var(--ionic-border-radius-0, 0px);--color:var(--ionic-color-neutral-1200, #242424);--border-width:0;--inner-border-width:0;--min-height:var(--ionic-scale-700, 28px);--padding-top:var(--ionic-space-300, 12px);--padding-end:var(--ionic-space-400, 16px);--padding-bottom:var(--ionic-space-300, 12px);--padding-start:var(--ionic-space-400, 16px);font-size:var(--ionic-font-size-450, 1.125rem);font-weight:var(--ionic-font-weight-medium, 500);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-700, 28px);text-decoration:none;text-transform:none}:host(.in-accordion-group-expand-inset) ::slotted(ion-item[slot=header]){--border-radius:var(--ionic-border-radius-400, 16px)}#content{-webkit-padding-start:var(--ionic-space-400, 16px);padding-inline-start:var(--ionic-space-400, 16px);-webkit-padding-end:var(--ionic-space-400, 16px);padding-inline-end:var(--ionic-space-400, 16px);padding-bottom:var(--ionic-space-300, 12px);font-size:var(--ionic-font-size-350, 0.875rem);font-weight:var(--ionic-font-weight-regular, 400);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-600, 24px);text-decoration:none;text-transform:none;color:var(--ionic-color-neutral-1000, #3b3b3b)}:host(.accordion-disabled)::before{border-radius:inherit;right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none;z-index:2}";
-const IonAccordionIonicStyle0 = accordionIonicCss;
-
-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 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;
 
-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 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 IonAccordionMdStyle0 = accordionMdCss;
 
 const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
@@ -87,7 +81,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             if (!ionItem) {
                 return;
             }
-            const { accordionToggleIcon, toggleIconSlot } = this;
+            const { toggleIconSlot, toggleIcon } = this;
             /**
              * Check if there already is a toggle icon.
              * If so, do not add another one.
@@ -100,7 +94,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             iconEl.slot = toggleIconSlot;
             iconEl.lazy = false;
             iconEl.classList.add('ion-accordion-toggle-icon');
-            iconEl.icon = accordionToggleIcon;
+            iconEl.icon = toggleIcon;
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
@@ -220,6 +214,9 @@ 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;
@@ -227,6 +224,9 @@ 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;
@@ -239,7 +239,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         this.value = `ion-accordion-${accordionIds++}`;
         this.disabled = false;
         this.readonly = false;
-        this.toggleIcon = undefined;
+        this.toggleIcon = chevronDown;
         this.toggleIconSlot = 'end';
     }
     valueChanged() {
@@ -276,23 +276,6 @@ 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)
@@ -312,13 +295,13 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
     }
     render() {
         const { disabled, readonly } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(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: 'fa0868a83fe0858d01eb2926790bcfc7635a647d', class: {
-                [theme]: true,
+        return (h(Host, { key: '073e1d02c18dcbc20c68648426e87c14750c031d', class: {
+                [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
                 'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
@@ -328,8 +311,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-                '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" })))));
+            } }, 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" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -337,7 +319,6 @@ 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

@@ -1,10 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { getOrInitFocusVisibleUtility } from './focus-visible.js';
-import { c as config } from './config2.js';
-import { c as getIonTheme } from './ionic-global.js';
+import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
+import { shouldUseCloseWatcher } 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';
 
 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;
@@ -14,6 +14,46 @@ 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('./index9.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('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('./keyboard2.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
@@ -24,13 +64,14 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
      * presented as a result of keyboard action.)
      */
     async setFocus(elements) {
-        const focusVisible = getOrInitFocusVisibleUtility();
-        focusVisible.setFocus(elements);
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'aa7f465d2fe61cfd40709c0fd388f80a0927376c', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'e95cdeb2709edbc74f4e6ebf77cb110154605b72', class: {
+                [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
@@ -40,6 +81,33 @@ 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;

package/components/ion-avatar.js

@@ -2,10 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as getIonTheme } from './ionic-global.js';
-
-const avatarIonicCss = ":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{--padding-top:var(--ionic-space-0, 0px);--padding-bottom:var(--ionic-space-0, 0px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:var(--ionic-color-neutral-100, #f1f1f1);color:var(--ionic-color-neutral-800, #626262);font-weight:var(--ionic-font-weight-medium, 500);line-height:var(--ionic-line-height-700, 28px)}:host(:not(.avatar-image)){-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);border:var(--ionic-border-size-025, 1px) var(--ionic-border-style-solid, solid) var(--ionic-color-neutral-800, #626262)}:host(.avatar-xxsmall){--padding-end:var(--ionic-space-050, 2px);--padding-start:var(--ionic-space-050, 2px);width:var(--ionic-scale-400, 16px);height:var(--ionic-scale-400, 16px);font-size:var(--ionic-font-size-300, 0.75rem);line-height:var(--ionic-line-height-500, 20px)}:host(.avatar-xsmall){--padding-end:var(--ionic-space-050, 2px);--padding-start:var(--ionic-space-050, 2px);width:var(--ionic-scale-600, 24px);height:var(--ionic-scale-600, 24px);font-size:var(--ionic-font-size-300, 0.75rem);line-height:var(--ionic-line-height-500, 20px)}:host(.avatar-small){--padding-end:var(--ionic-space-150, 6px);--padding-start:var(--ionic-space-150, 6px);width:var(--ionic-scale-800, 32px);height:var(--ionic-scale-800, 32px);font-size:var(--ionic-font-size-400, 1rem);line-height:var(--ionic-line-height-600, 24px)}:host(.avatar-medium){--padding-end:var(--ionic-space-200, 8px);--padding-start:var(--ionic-space-200, 8px);width:var(--ionic-scale-1000, 40px);height:var(--ionic-scale-1000, 40px);font-size:var(--ionic-font-size-450, 1.125rem)}:host(.avatar-large){--padding-end:var(--ionic-space-250, 10px);--padding-start:var(--ionic-space-250, 10px);width:var(--ionic-scale-1200, 48px);height:var(--ionic-scale-1200, 48px);font-size:var(--ionic-font-size-500, 1.25rem)}:host(.avatar-xlarge){--padding-end:var(--ionic-space-300, 12px);--padding-start:var(--ionic-space-300, 12px);width:var(--ionic-scale-1400, 56px);height:var(--ionic-scale-1400, 56px);font-size:var(--ionic-font-size-550, 1.375rem)}:host(.avatar-xxsmall.avatar-soft),:host(.avatar-xsmall.avatar-soft),:host(.avatar-small.avatar-soft){--border-radius:var(--ionic-border-radius-100, 4px)}:host(.avatar-soft){--border-radius:var(--ionic-border-radius-200, 8px)}:host(.avatar-round){--border-radius:var(--ionic-border-radius-full, 999px)}:host(.avatar-rectangular){--border-radius:var(--ionic-border-radius-0, 0px)}:host(.avatar-icon){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.avatar-xsmall) ::slotted(ion-icon){width:var(--ionic-scale-400, 16px);height:var(--ionic-scale-400, 16px)}:host(.avatar-small) ::slotted(ion-icon){width:var(--ionic-scale-500, 20px);height:var(--ionic-scale-500, 20px)}:host(.avatar-medium) ::slotted(ion-icon){width:var(--ionic-scale-600, 24px);height:var(--ionic-scale-600, 24px)}:host(.avatar-large) ::slotted(ion-icon){width:var(--ionic-scale-800, 32px);height:var(--ionic-scale-800, 32px)}:host(.avatar-xlarge) ::slotted(ion-icon){width:var(--ionic-scale-1000, 40px);height:var(--ionic-scale-1000, 40px)}";
-const IonAvatarIonicStyle0 = avatarIonicCss;
+import { b as getIonMode } from './ionic-global.js';
 
 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;
@@ -18,61 +15,15 @@ const Avatar = /*@__PURE__*/ proxyCustomElement(class Avatar extends HTMLElement
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.size = undefined;
-        this.shape = undefined;
-    }
-    get hasImage() {
-        return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
-    }
-    get hasIcon() {
-        return !!this.el.querySelector('ion-icon');
-    }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(ROU-10752): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'medium';
-        }
-        return size;
-    }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-10755): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
     }
     render() {
-        const theme = getIonTheme(this);
-        const size = this.getSize();
-        const shape = this.getShape();
-        return (h(Host, { key: '169f3e804c30f9eedc8c3cf064af9871bead2f5f', class: {
-                [theme]: true,
-                [`avatar-${size}`]: size !== undefined,
-                [`avatar-${shape}`]: shape !== undefined,
-                [`avatar-image`]: this.hasImage,
-                [`avatar-icon`]: this.hasIcon,
-            } }, h("slot", { key: '67bb5a3c1a6bd33af37141df05663f1685c84286' })));
+        return (h(Host, { key: 'dc1e3cd535e419eebe5599574fd2393ebfde8bbc', class: getIonMode(this) }, h("slot", { key: 'edb8441c063ea592b41345ea97d88ecd90cb3052' })));
     }
-    get el() { return this; }
     static get style() { return {
-        ionic: IonAvatarIonicStyle0,
         ios: IonAvatarIosStyle0,
         md: IonAvatarMdStyle0
     }; }
-}, [33, "ion-avatar", {
-        "size": [1],
-        "shape": [1]
-    }]);
+}, [33, "ion-avatar"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;