@ionic/core 8.7.14-dev.11765828575.1dda19db → 8.7.14-dev.11765982433.1ecdbcee

package/components/content.js

@@ -3,11 +3,12 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, readTask, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes, k as hasLazyBuild, c as componentOnReady } from './helpers.js';
-import { b as getIonMode, a as isPlatform } from './ionic-global.js';
+import { a as isPlatform, b as getIonTheme, c as getIonMode } from './ionic-global.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
+import { c as config } from './index4.js';
 
-const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-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:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
+const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-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:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
 
 const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLElement {
     constructor(registerHost) {
@@ -170,9 +171,8 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
             this.resize();
         }, 100);
     }
-    shouldForceOverscroll() {
+    shouldForceOverscroll(mode) {
         const { forceOverscroll } = this;
-        const mode = getIonMode(this);
         return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
     }
     resize() {
@@ -368,24 +368,25 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
     render() {
         const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const mode = getIonMode(this);
-        const forceOverscroll = this.shouldForceOverscroll();
-        const transitionShadow = mode === 'ios';
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this, theme);
+        const forceOverscroll = this.shouldForceOverscroll(mode);
+        const transitionShadow = theme === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, Object.assign({ key: '1f317766050a37fad063ea647314b1726458aa5c', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+                [theme]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '2fdfcbc39fb66f11b6191911f2941c660f4c12e5', class: {
+            } }, inheritedAttributes), h("div", { key: 'c8c734a6941202684d8b770bfab002eda126a52d', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '6f11af05008e74e6627e2b28eefd1444b772e44e', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '8eff9647a62e2a841b92cb3b014111d94327080f' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     get el() { return this; }
     static get style() { return contentCss; }
@@ -427,7 +428,8 @@ const getPageElement = (el) => {
      * between the popover and the edges of the screen. But if the popover contains
      * its own page element, we should use that instead.
      */
-    const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    const page = el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner, .popover-content`);
     if (page) {
         return page;
     }

package/components/data.js

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

package/components/focus-visible.js

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

package/components/framework-delegate.js

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

package/components/header.js

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

package/components/helpers.js

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

package/components/index5.js

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

package/components/index6.js

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