@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779921691.1777274a

package/dist/cjs/ion-app_8.cjs.entry.js

@@ -3,26 +3,23 @@
  */
 'use strict';
 
-var index = require('./index-CzcLEdQ5.js');
-var focusVisible = require('./focus-visible-BIj-I3-C.js');
-var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
-var helpers = require('./helpers-DJYxKN5U.js');
+var focusVisible = require('./index-BDthk8R7.js');
+var ionicGlobal = require('./ionic-global-DMWqcBn0.js');
 var dir = require('./dir-Cn0z1rJH.js');
-var theme = require('./theme-IlOsGAz7.js');
-var index$1 = require('./index-BJrpF9T3.js');
-var keyboardController = require('./keyboard-controller-tqGDP9SU.js');
+var index = require('./index-DhXmkpe3.js');
+var keyboardController = require('./keyboard-controller-CPJ4vSr0.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
-var frameworkDelegate = require('./framework-delegate-Dx9FrqAC.js');
+var frameworkDelegate = require('./framework-delegate-C1LqXDzY.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var index$2 = require('./index-D_mPAIqF.js');
-require('./keyboard-Dsczf-iT.js');
-require('./capacitor-BnRBm_ys.js');
+var index$1 = require('./index-cV9SaEZV.js');
+require('./keyboard-Jy7okGc5.js');
+require('./capacitor-F7SUc7Ly.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 App = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
     }
     /**
      * Used to set focus on an element that uses `ion-focusable`.
@@ -44,13 +41,13 @@ const App = class {
     }
     render() {
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '3b7e84c7c4187287123413f90838cda89136b2a4', class: {
+        return (focusVisible.h(focusVisible.Host, { key: '3b7e84c7c4187287123413f90838cda89136b2a4', class: {
                 [theme]: true,
                 'ion-page': true,
-                'force-statusbar-padding': index.config.getBoolean('_forceStatusbarPadding'),
+                'force-statusbar-padding': focusVisible.config.getBoolean('_forceStatusbarPadding'),
             } }));
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
 };
 App.style = appCss();
 
@@ -62,7 +59,7 @@ const buttonsMdCss = () => `.sc-ion-buttons-md-h{display:-ms-flexbox;display:fle
 
 const Buttons = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
         /**
          * If true, buttons will disappear when its
          * parent toolbar has fully collapsed if the toolbar
@@ -79,10 +76,10 @@ const Buttons = class {
     }
     render() {
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '95c107ba7871c801a5ef14c636dc8e2fe69debf3', class: {
+        return (focusVisible.h(focusVisible.Host, { key: '95c107ba7871c801a5ef14c636dc8e2fe69debf3', class: {
                 [theme]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, index.h("slot", { key: '58669abfce458e1344b84286d4200e305017b958' })));
+            } }, focusVisible.h("slot", { key: '58669abfce458e1344b84286d4200e305017b958' })));
     }
 };
 Buttons.style = {
@@ -91,14 +88,14 @@ Buttons.style = {
     md: buttonsMdCss()
 };
 
-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) + var(--ion-content-safe-area-padding-bottom, 0px));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{--internal-keyboard-offset:0px;--internal-offset-top:0px;--internal-offset-bottom:0px;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-content-font-family, inherit);contain:size style}.inner-scroll{right:0px;left:0px;top:calc(var(--internal-offset-top) * -1);bottom:calc(var(--internal-offset-bottom) * -1);-webkit-padding-start:var(--padding-start, var(--ion-content-padding-start, 0px));padding-inline-start:var(--padding-start, var(--ion-content-padding-start, 0px));-webkit-padding-end:var(--padding-end, var(--ion-content-padding-end, 0px));padding-inline-end:var(--padding-end, var(--ion-content-padding-end, 0px));padding-top:calc(var(--padding-top, var(--ion-content-padding-top, 0px)) + var(--internal-offset-top));padding-bottom:calc(       var(--padding-bottom, var(--ion-content-padding-bottom, 0px)) + var(--internal-keyboard-offset) + var(--internal-offset-bottom) + var(--ion-content-safe-area-padding-bottom, 0px)     );position:absolute;color:var(--ion-content-default-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}:host(.ion-color) .inner-scroll{background:var(--ion-content-semantic-default-background);color:var(--ion-content-semantic-default-color)}.scroll-y,.scroll-x{z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--ion-content-overflow, auto);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--ion-content-overflow, auto);overscroll-behavior-x:contain}#background-content{right:0px;left:0px;top:calc(var(--internal-offset-top) * -1);bottom:calc(var(--internal-offset-bottom) * -1);position:absolute;background:var(--ion-content-default-background)}.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(--internal-offset-top) * -1);margin-bottom:calc(var(--internal-offset-bottom) * -1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}.transition-effect{inset-inline-start:-100%}.transition-cover{position:absolute;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)}.transition-shadow{inset-inline-end:0}:host(.content-rtl) .transition-shadow{-webkit-transform:scaleX(-1);transform:scaleX(-1)}`;
 
 const Content = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.ionScrollStart = index.createEvent(this, "ionScrollStart", 7);
-        this.ionScroll = index.createEvent(this, "ionScroll", 7);
-        this.ionScrollEnd = index.createEvent(this, "ionScrollEnd", 7);
+        focusVisible.registerInstance(this, hostRef);
+        this.ionScrollStart = focusVisible.createEvent(this, "ionScrollStart", 7);
+        this.ionScroll = focusVisible.createEvent(this, "ionScroll", 7);
+        this.ionScrollEnd = focusVisible.createEvent(this, "ionScrollEnd", 7);
         this.watchDog = null;
         this.isScrolling = false;
         this.lastScroll = 0;
@@ -159,7 +156,7 @@ const Content = class {
         this.scrollEvents = false;
     }
     componentWillLoad() {
-        this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
+        this.inheritedAttributes = focusVisible.inheritAriaAttributes(this.el);
     }
     connectedCallback() {
         this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
@@ -171,7 +168,7 @@ const Content = class {
          * event to fire. This does not impact dist-custom-elements
          * because there is no hydration there.
          */
-        if (helpers.hasLazyBuild(this.el)) {
+        if (focusVisible.hasLazyBuild(this.el)) {
             /**
              * We need to cache the reference to the tabs.
              * If just the content is unmounted then we won't
@@ -200,7 +197,7 @@ const Content = class {
     }
     disconnectedCallback() {
         this.onScrollEnd();
-        if (helpers.hasLazyBuild(this.el)) {
+        if (focusVisible.hasLazyBuild(this.el)) {
             /**
              * The event listener and tabs caches need to
              * be cleared otherwise this will create a memory
@@ -265,15 +262,15 @@ const Content = class {
          * The `hydrateDocument` function in `@stencil/core` will render the `ion-content`, but
          * `forceUpdate` will trigger another render, locking up the server.
          *
-         * TODO: Remove if STENCIL-834 determines Stencil will account for this.
+         * TODO(STENCIL-834): Remove if Stencil will account for this.
          */
         {
             if (this.fullscreen) {
-                index.readTask(() => this.readDimensions());
+                focusVisible.readTask(() => this.readDimensions());
             }
             else if (this.cTop !== 0 || this.cBottom !== 0) {
                 this.cTop = this.cBottom = 0;
-                index.forceUpdate(this);
+                focusVisible.forceUpdate(this);
             }
         }
     }
@@ -284,7 +281,7 @@ const Content = class {
      * @internal
      */
     async recalculateDimensions() {
-        index.readTask(() => this.readDimensions());
+        focusVisible.readTask(() => this.readDimensions());
     }
     readDimensions() {
         const page = getPageElement(this.el);
@@ -294,7 +291,7 @@ const Content = class {
         if (dirty) {
             this.cTop = top;
             this.cBottom = bottom;
-            index.forceUpdate(this);
+            focusVisible.forceUpdate(this);
         }
     }
     onScroll(ev) {
@@ -306,7 +303,7 @@ const Content = class {
         }
         if (!this.queued && this.scrollEvents) {
             this.queued = true;
-            index.readTask((ts) => {
+            focusVisible.readTask((ts) => {
                 this.queued = false;
                 this.detail.event = ev;
                 updateScrollDetail(this.detail, this.scrollEl, ts, shouldStart);
@@ -328,9 +325,9 @@ const Content = class {
          * scrollEl won't be defined yet with the custom elements build, so wait for it to load in.
          */
         if (!this.scrollEl) {
-            await new Promise((resolve) => helpers.componentOnReady(this.el, resolve));
+            await focusVisible.waitForComponentReady(this.el);
         }
-        return Promise.resolve(this.scrollEl);
+        return this.scrollEl;
     }
     /**
      * Returns the background content element.
@@ -338,9 +335,9 @@ const Content = class {
      */
     async getBackgroundElement() {
         if (!this.backgroundContentEl) {
-            await new Promise((resolve) => helpers.componentOnReady(this.el, resolve));
+            await focusVisible.waitForComponentReady(this.el);
         }
-        return Promise.resolve(this.backgroundContentEl);
+        return this.backgroundContentEl;
     }
     /**
      * Scroll to the top of the component.
@@ -451,28 +448,30 @@ const Content = class {
     render() {
         const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
         const rtl = dir.isRTL(el) ? 'rtl' : 'ltr';
-        const theme$1 = ionicGlobal.getIonTheme(this);
-        const mode = ionicGlobal.getIonMode(this, theme$1);
+        const mode = ionicGlobal.getIonMode(this);
         const forceOverscroll = this.shouldForceOverscroll(mode);
-        const transitionShadow = theme$1 === 'ios';
+        /**
+         * The transition shadow effect is only animated by the iOS transition
+         * builder, so these elements are only rendered in iOS mode.
+         */
+        const transitionShadow = mode === 'ios';
         this.resize();
-        return (index.h(index.Host, Object.assign({ key: 'd7f325c30b698dc42ec5e8c45b29e82749743cf4', role: isMainContent ? 'main' : undefined, class: theme.createColorClasses(this.color, {
-                [theme$1]: true,
+        return (focusVisible.h(focusVisible.Host, Object.assign({ key: '17824a110a0ca47f8bbc6614100c8409f447c75d', role: isMainContent ? 'main' : undefined, class: focusVisible.createColorClasses(this.color, {
                 'content-fullscreen': this.fullscreen,
-                'content-sizing': theme.hostContext('ion-popover', this.el),
-                overscroll: forceOverscroll,
+                'content-sizing': focusVisible.hostContext('ion-popover', this.el),
                 [`content-${rtl}`]: true,
+                overscroll: forceOverscroll,
             }), style: {
-                '--offset-top': `${this.cTop}px`,
-                '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), index.h("div", { key: 'c93b2c622a69c7fd153bbe9b0c6f8c24d85ed969', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? index.h("slot", { name: "fixed" }) : null, index.h("div", { key: '1700cc94e464ad1ab1c6672270f9649e90be3a5e', class: {
+                '--internal-offset-top': `${this.cTop}px`,
+                '--internal-offset-bottom': `${this.cBottom}px`,
+            } }, inheritedAttributes), focusVisible.h("div", { key: '41f32530395575c8dd8e18ed141c723b9fcf2ff1', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? focusVisible.h("slot", { name: "fixed" }) : null, focusVisible.h("div", { key: 'c4ff0449c4e5a1168d1edbcd8c0379ae508d97b9', 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" }, index.h("slot", { key: 'bff713ead4f61730e3f36b5af4b771ae62bde6cd' })), transitionShadow ? (index.h("div", { class: "transition-effect" }, index.h("div", { class: "transition-cover" }), index.h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? index.h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, focusVisible.h("slot", { key: '90325c23154a4a35cf6827337bb49edbd7bc3f20' })), transitionShadow ? (focusVisible.h("div", { class: "transition-effect" }, focusVisible.h("div", { class: "transition-cover" }), focusVisible.h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? focusVisible.h("slot", { name: "fixed" }) : null));
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
 };
 const getParentElement = (el) => {
     var _a;
@@ -496,7 +495,7 @@ 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 appRootSelector = index.config.get('appRootSelector', 'ion-app');
+    const appRootSelector = focusVisible.config.get('appRootSelector', 'ion-app');
     const page = el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner, .popover-content`);
     if (page) {
         return page;
@@ -533,7 +532,7 @@ const updateScrollDetail = (detail, el, timestamp, shouldStart) => {
 Content.style = contentCss();
 
 const handleFooterFade = (scrollEl, baseEl) => {
-    index.readTask(() => {
+    focusVisible.readTask(() => {
         const scrollTop = scrollEl.scrollTop;
         const maxScroll = scrollEl.scrollHeight - scrollEl.clientHeight;
         /**
@@ -554,8 +553,8 @@ const handleFooterFade = (scrollEl, baseEl) => {
          */
         const fadeStart = maxScroll - fadeDuration;
         const distanceToStart = scrollTop - fadeStart;
-        const scale = helpers.clamp(0, 1 - distanceToStart / fadeDuration, 1);
-        index.writeTask(() => {
+        const scale = focusVisible.clamp(0, 1 - distanceToStart / fadeDuration, 1);
+        focusVisible.writeTask(() => {
             baseEl.style.setProperty('--opacity-scale', scale.toString());
         });
     });
@@ -569,7 +568,7 @@ const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-o
 
 const Footer = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
         this.keyboardVisible = false;
@@ -591,18 +590,18 @@ const Footer = class {
             const hasFade = collapse === 'fade';
             this.destroyCollapsibleFooter();
             if (hasFade) {
-                const appRootSelector = index.config.get('appRootSelector', 'ion-app');
+                const appRootSelector = focusVisible.config.get('appRootSelector', 'ion-app');
                 const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
-                const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
+                const contentEl = pageEl ? index.findIonContent(pageEl) : null;
                 if (!contentEl) {
-                    index$1.printIonContentErrorMsg(this.el);
+                    index.printIonContentErrorMsg(this.el);
                     return;
                 }
                 this.setupFadeFooter(contentEl);
             }
         };
         this.setupFadeFooter = async (contentEl) => {
-            const scrollEl = (this.scrollEl = await index$1.getScrollElement(contentEl));
+            const scrollEl = (this.scrollEl = await index.getScrollElement(contentEl));
             /**
              * Handle fading of toolbars on scroll
              */
@@ -667,7 +666,7 @@ const Footer = class {
         const theme = ionicGlobal.getIonTheme(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (index.h(index.Host, { key: '4a2989a177b47ee26ffa23e2c9f5418773584796', role: "contentinfo", class: {
+        return (focusVisible.h(focusVisible.Host, { key: '4a2989a177b47ee26ffa23e2c9f5418773584796', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
@@ -675,9 +674,9 @@ const Footer = class {
                 [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && index.h("div", { key: 'c644963db3e06254014e398ea02189d6127ccf61', class: "footer-background" }), index.h("slot", { key: '839e33c6c30f5c1c703239a19458ff10da9a5e76' })));
+            } }, theme === 'ios' && translucent && focusVisible.h("div", { key: 'c644963db3e06254014e398ea02189d6127ccf61', class: "footer-background" }), focusVisible.h("slot", { key: '839e33c6c30f5c1c703239a19458ff10da9a5e76' })));
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
 };
 Footer.style = {
     ionic: ionicFooterMdCss(),
@@ -719,13 +718,13 @@ const createHeaderIndex = (headerEl) => {
     };
 };
 const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
-    index.readTask(() => {
+    focusVisible.readTask(() => {
         const scrollTop = scrollEl.scrollTop;
-        const scale = helpers.clamp(1, 1 + -scrollTop / 500, 1.1);
+        const scale = focusVisible.clamp(1, 1 + -scrollTop / 500, 1.1);
         // Native refresher should not cause titles to scale
         const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
         if (nativeRefresher === null) {
-            index.writeTask(() => {
+            focusVisible.writeTask(() => {
                 scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
             });
         }
@@ -773,7 +772,7 @@ const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
  */
 const handleToolbarIntersection = (ev, // TODO(FW-2832): type (IntersectionObserverEntry[] triggers errors which should be sorted)
 mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
-    index.writeTask(() => {
+    focusVisible.writeTask(() => {
         const scrollTop = scrollEl.scrollTop;
         handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
         const event = ev[0];
@@ -862,7 +861,7 @@ const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
     });
 };
 const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
-    index.readTask(() => {
+    focusVisible.readTask(() => {
         const scrollTop = scrollEl.scrollTop;
         const baseElHeight = baseEl.clientHeight;
         const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
@@ -885,8 +884,8 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
         }
         const distanceToStart = scrollTop - fadeStart;
         const fadeDuration = 10;
-        const scale = helpers.clamp(0, distanceToStart / fadeDuration, 1);
-        index.writeTask(() => {
+        const scale = focusVisible.clamp(0, distanceToStart / fadeDuration, 1);
+        focusVisible.writeTask(() => {
             scrollEl.style.removeProperty('clip-path');
             baseEl.style.setProperty('--opacity-scale', scale.toString());
         });
@@ -925,7 +924,7 @@ const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-o
 
 const Header = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
         this.inheritedAttributes = {};
         /**
          * If `true`, the header will have a line at the bottom.
@@ -942,7 +941,7 @@ const Header = class {
          */
         this.translucent = false;
         this.setupFadeHeader = async (contentEl, condenseHeader) => {
-            const scrollEl = (this.scrollEl = await index$1.getScrollElement(contentEl));
+            const scrollEl = (this.scrollEl = await index.getScrollElement(contentEl));
             /**
              * Handle fading of toolbars on scroll
              */
@@ -954,7 +953,7 @@ const Header = class {
         };
     }
     componentWillLoad() {
-        this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
+        this.inheritedAttributes = focusVisible.inheritAriaAttributes(this.el);
     }
     componentDidLoad() {
         this.checkCollapsibleHeader();
@@ -974,12 +973,12 @@ const Header = class {
         const hasCondense = collapse === 'condense';
         const hasFade = collapse === 'fade';
         this.destroyCollapsibleHeader();
-        const appRootSelector = index.config.get('appRootSelector', 'ion-app');
+        const appRootSelector = focusVisible.config.get('appRootSelector', 'ion-app');
         if (hasCondense) {
             const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
-            const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
+            const contentEl = pageEl ? index.findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
-            index.writeTask(() => {
+            focusVisible.writeTask(() => {
                 const title = cloneElement('ion-title');
                 title.size = 'large';
                 cloneElement('ion-back-button');
@@ -988,9 +987,9 @@ const Header = class {
         }
         else if (hasFade) {
             const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
-            const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
+            const contentEl = pageEl ? index.findIonContent(pageEl) : null;
             if (!contentEl) {
-                index$1.printIonContentErrorMsg(this.el);
+                index.printIonContentErrorMsg(this.el);
                 return;
             }
             const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
@@ -1013,13 +1012,13 @@ const Header = class {
     }
     async setupCondenseHeader(contentEl, pageEl) {
         if (!contentEl || !pageEl) {
-            index$1.printIonContentErrorMsg(this.el);
+            index.printIonContentErrorMsg(this.el);
             return;
         }
         if (typeof IntersectionObserver === 'undefined') {
             return;
         }
-        this.scrollEl = await index$1.getScrollElement(contentEl);
+        this.scrollEl = await index.getScrollElement(contentEl);
         const headers = pageEl.querySelectorAll('ion-header');
         this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
         if (!this.collapsibleMainHeader) {
@@ -1055,7 +1054,7 @@ const Header = class {
             handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
         };
         this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
-        index.writeTask(() => {
+        focusVisible.writeTask(() => {
             if (this.collapsibleMainHeader !== undefined) {
                 this.collapsibleMainHeader.classList.add('header-collapse-main');
             }
@@ -1063,22 +1062,22 @@ const Header = class {
     }
     render() {
         const { translucent, inheritedAttributes, divider } = this;
-        const theme$1 = ionicGlobal.getIonTheme(this);
+        const theme = ionicGlobal.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(theme.hostContext('ion-menu', this.el), isCondensed, theme$1);
-        return (index.h(index.Host, Object.assign({ key: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
-                [theme$1]: true,
+        const roleType = getRoleType(focusVisible.hostContext('ion-menu', this.el), isCondensed, theme);
+        return (focusVisible.h(focusVisible.Host, Object.assign({ key: '658d5746920c349cc9fe85666c7215f2edc3c794', role: roleType, class: {
+                [theme]: true,
                 // Used internally for styling
-                [`header-${theme$1}`]: true,
+                [`header-${theme}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${theme$1}`]: this.translucent,
+                [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme$1 !== 'md' && translucent && index.h("div", { key: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), index.h("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && focusVisible.h("div", { key: '4a1470d86e1aac6f8d545fe01e75b4dce665fb70', class: "header-background" }), focusVisible.h("slot", { key: '3b02661242bda5834c4e13e4eb61bf79b53ba33e' })));
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
 };
 Header.style = {
     ionic: headerIonicCss(),
@@ -1090,10 +1089,10 @@ const routerOutletCss = () => `:host{right:0;left:0;top:0;bottom:0;position:abso
 
 const RouterOutlet = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.ionNavWillLoad = index.createEvent(this, "ionNavWillLoad", 7);
-        this.ionNavWillChange = index.createEvent(this, "ionNavWillChange", 3);
-        this.ionNavDidChange = index.createEvent(this, "ionNavDidChange", 3);
+        focusVisible.registerInstance(this, hostRef);
+        this.ionNavWillLoad = focusVisible.createEvent(this, "ionNavWillLoad", 7);
+        this.ionNavWillChange = focusVisible.createEvent(this, "ionNavWillChange", 3);
+        this.ionNavDidChange = focusVisible.createEvent(this, "ionNavDidChange", 3);
         this.lockController = lockController.createLockController();
         this.gestureOrAnimationInProgress = false;
         /**
@@ -1117,7 +1116,7 @@ const RouterOutlet = class {
                 this.swipeHandler.onStart();
             }
         };
-        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-jJFi5KCB.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
+        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-CMubrxt-.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
             if (this.ani) {
                 this.ani.onFinish(() => {
                     this.gestureOrAnimationInProgress = false;
@@ -1167,7 +1166,7 @@ const RouterOutlet = class {
             changed = await this.transition(enteringEl, leavingEl, opts);
         }
         catch (e) {
-            index.printIonError('[ion-router-outlet] - Exception in commit:', e);
+            focusVisible.printIonError('[ion-router-outlet] - Exception in commit:', e);
         }
         unlock();
         return changed;
@@ -1196,7 +1195,7 @@ const RouterOutlet = class {
             : undefined;
     }
     async setRoot(component, params, opts) {
-        if (this.activeComponent === component && helpers.shallowEqualStringMap(params, this.activeParams)) {
+        if (this.activeComponent === component && focusVisible.shallowEqualStringMap(params, this.activeParams)) {
             return false;
         }
         // attach entering view to DOM
@@ -1217,9 +1216,9 @@ const RouterOutlet = class {
         // emit nav will change event
         this.ionNavWillChange.emit();
         const { el, mode } = this;
-        const animated = this.animated && index.config.getBoolean('animated', true);
-        const animationBuilder = opts.animationBuilder || this.animation || index.config.get('navAnimation');
-        await index$2.transition(Object.assign(Object.assign({ mode,
+        const animated = this.animated && focusVisible.config.getBoolean('animated', true);
+        const animationBuilder = opts.animationBuilder || this.animation || focusVisible.config.get('navAnimation');
+        await index$1.transition(Object.assign(Object.assign({ mode,
             animated,
             enteringEl,
             leavingEl, baseEl: el,
@@ -1228,7 +1227,7 @@ const RouterOutlet = class {
              * to be ready only when using the lazy
              * loaded bundle.
              */
-            deepWait: helpers.hasLazyBuild(el), progressCallback: opts.progressAnimation
+            deepWait: focusVisible.hasLazyBuild(el), progressCallback: opts.progressAnimation
                 ? (ani) => {
                     /**
                      * Because this progress callback is called asynchronously
@@ -1263,9 +1262,9 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return index.h("slot", { key: '56e3d06ed939755796058e30ef19fbc7f7cb490d' });
+        return focusVisible.h("slot", { key: '3f107f085a977b4d27c7266771a9564e3219f736' });
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
     static get watchers() { return {
         "swipeHandler": [{
                 "swipeHandlerChanged": 0
@@ -1282,8 +1281,8 @@ const titleMdCss = () => `:host{--color:initial;display:-ms-flexbox;display:flex
 
 const ToolbarTitle = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.ionStyle = index.createEvent(this, "ionStyle", 7);
+        focusVisible.registerInstance(this, hostRef);
+        this.ionStyle = focusVisible.createEvent(this, "ionStyle", 7);
     }
     sizeChanged() {
         this.emitStyle();
@@ -1301,15 +1300,15 @@ const ToolbarTitle = class {
         return this.size !== undefined ? this.size : 'default';
     }
     render() {
-        const theme$1 = ionicGlobal.getIonTheme(this);
+        const theme = ionicGlobal.getIonTheme(this);
         const size = this.getSize();
-        return (index.h(index.Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: theme.createColorClasses(this.color, {
-                [theme$1]: true,
+        return (focusVisible.h(focusVisible.Host, { key: '8db3e5f9dbd8b1762a9919eaeef29c98649dfb25', class: focusVisible.createColorClasses(this.color, {
+                [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, index.h("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, index.h("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
+            }) }, focusVisible.h("div", { key: 'a31ebae2c494a51d2145eec69d0b1bc635108a01', class: "toolbar-title" }, focusVisible.h("slot", { key: 'f5975b44b3e3afbf98dcbdb53fc78447b49407b3' }))));
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
     static get watchers() { return {
         "size": [{
                 "sizeChanged": 0
@@ -1324,13 +1323,13 @@ ToolbarTitle.style = {
 
 const toolbarIonicCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--border-color:currentColor;--padding-top:var(--token-space-200, var(--token-scale-200, 8px));--padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));--padding-start:var(--token-space-200, var(--token-scale-200, 8px));--padding-end:var(--token-space-200, var(--token-scale-200, 8px));--min-height:var(--token-scale-1400, 56px)}.toolbar-container{gap:var(--token-space-400, var(--token-scale-400, 16px));z-index:10}.toolbar-background{z-index:-1}.toolbar-content{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0}:host(.toolbar-searchbar) ::slotted(ion-searchbar){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}::slotted(ion-buttons){gap:var(--token-space-200, var(--token-scale-200, 8px))}::slotted(ion-title){-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px))}:host(.toolbar-title-large) ::slotted(ion-title){-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px))}:host(.has-end-content) slot[name=end],:host(.show-end) slot[name=end]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-start-content) slot[name=start],:host(.show-start) slot[name=start]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0)}:host(.has-primary-content) slot[name=primary],:host(.show-primary) slot[name=primary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-secondary-content) slot[name=secondary],:host(.show-secondary) slot[name=secondary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0)}:host(.toolbar-title-placement-start) ::slotted(ion-title){text-align:start}:host(.toolbar-title-placement-center) ::slotted(ion-title){text-align:center}:host(.toolbar-title-placement-end) ::slotted(ion-title){text-align:end}`;
 
-const toolbarIosCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:4;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:-ms-inline-flexbox;display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){-ms-flex-item-align:start;align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:3;order:3}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{-ms-flex:1;flex:1;-ms-flex-order:8;order:8;min-width:100%}`;
+const toolbarIosCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-background-color-step-50, #f7f7f7));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:4;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:-ms-inline-flexbox;display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){-ms-flex-item-align:start;align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:3;order:3}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{-ms-flex:1;flex:1;-ms-flex-order:8;order:8;min-width:100%}`;
 
-const toolbarMdCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:3;order:3;min-width:0;max-width:100%}::slotted(.buttons-first-slot){-webkit-margin-start:4px;margin-inline-start:4px}::slotted(.buttons-last-slot){-webkit-margin-end:4px;margin-inline-end:4px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:4;order:4}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}`;
+const toolbarMdCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-background-color-step-150, #c1c4cd)));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:3;order:3;min-width:0;max-width:100%}::slotted(.buttons-first-slot){-webkit-margin-start:4px;margin-inline-start:4px}::slotted(.buttons-last-slot){-webkit-margin-end:4px;margin-inline-end:4px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:4;order:4}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}`;
 
 const Toolbar = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
         this.childrenStyles = new Map();
         this.slotClasses = [
             'has-start-content',
@@ -1543,23 +1542,23 @@ const Toolbar = class {
         });
         if (hasStyleChange) {
             this.childrenStyles.set(tagName, newStyles);
-            index.forceUpdate(this);
+            focusVisible.forceUpdate(this);
         }
     }
     render() {
-        const theme$1 = ionicGlobal.getIonTheme(this);
+        const theme = ionicGlobal.getIonTheme(this);
         const childStyles = {};
         this.childrenStyles.forEach((style) => {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (index.h(index.Host, { key: 'bcb621674157410d7eaeb006779bdd677346587e', class: Object.assign(Object.assign({}, theme.createColorClasses(this.color, {
-                [theme$1]: true,
-                'in-toolbar': theme.hostContext('ion-toolbar', this.el),
+        return (focusVisible.h(focusVisible.Host, { key: 'a2103857ffb26f517b4190bb01a8fa170a042e45', class: Object.assign(Object.assign({}, focusVisible.createColorClasses(this.color, {
+                [theme]: true,
+                'in-toolbar': focusVisible.hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, index.h("div", { key: '0d31a98b2571b9a0ae142fbdfd83e2ebdcd8e069', class: "toolbar-background", part: "background" }), index.h("div", { key: 'de938534c487c6cb4060dac44b40c2d872130f50', class: "toolbar-container", part: "container" }, index.h("slot", { key: 'a337150d353e439eae67c31ff86e383ed51f3d8f', name: "start", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: '02effd3ce0cdad5ec5645fa58ccb329321449190', name: "secondary", onSlotchange: () => this.updateSlotClasses }), index.h("div", { key: '3e22f5feda2aea02117bdea2fe8a4b8905ba82f6', class: "toolbar-content", part: "content" }, index.h("slot", { key: 'ebf828643ff05a8bf662a54715d21d0859168d31' })), index.h("slot", { key: 'a6940648dfe25a7aa8792a1bd9267437274f333c', name: "primary", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: 'afb1d61aa0e430fcf483ba482af64762474e06fe', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, focusVisible.h("div", { key: '288b74048d260c9279d6e60c8733e26105ee0098', class: "toolbar-background", part: "background" }), focusVisible.h("div", { key: 'fa4b8cfb32f3bfb84f451cf3a2420b37fc75533c', class: "toolbar-container", part: "container" }, focusVisible.h("slot", { key: 'fe9414ab3fa2ca84d424a400ba91ec8239d700ff', name: "start", onSlotchange: () => this.updateSlotClasses }), focusVisible.h("slot", { key: 'c633cd1b6eef87adbfccfa61857518dcf62ac550', name: "secondary", onSlotchange: () => this.updateSlotClasses }), focusVisible.h("div", { key: 'aff3a3d8acbc480e9daec864aeb85d168ab2c447', class: "toolbar-content", part: "content" }, focusVisible.h("slot", { key: '52b45c5abbfe695e862c857163e7aa00c1c2af9a' })), focusVisible.h("slot", { key: '3157c16fcfe428230998f218c6233d114b550a6f', name: "primary", onSlotchange: () => this.updateSlotClasses }), focusVisible.h("slot", { key: '4b74dff5b832ea0f3030efa319c63c876c3e90e2', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
     static get watchers() { return {
         "titlePlacement": [{
                 "titlePlacementChanged": 0