voyager-ionic-core 7.7.2 → 7.8.6

package/dist/cjs/{overlays-fb7ca451.js → overlays-129dfc13.js}

@@ -4,10 +4,10 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const hardwareBackButton = require('./hardware-back-button-2696acaf.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
-const frameworkDelegate = require('./framework-delegate-a3e6d060.js');
-const helpers = require('./helpers-2e1028fa.js');
+const hardwareBackButton = require('./hardware-back-button-adba3ac7.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
+const frameworkDelegate = require('./framework-delegate-e0e13baa.js');
+const helpers = require('./helpers-da4c0ed1.js');
 const index$1 = require('./index-5915f9b3.js');
 
 let lastOverlayIndex = 0;
@@ -100,32 +100,48 @@ const createOverlay = (tagName, opts) => {
  * valid usage for the disabled property on ion-button.
  */
 const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden');
+/**
+ * Focuses the first descendant in an overlay
+ * that can receive focus. If none exists,
+ * the entire overlay will be focused.
+ */
 const focusFirstDescendant = (ref, overlay) => {
-    let firstInput = ref.querySelector(focusableQueryString);
-    const shadowRoot = firstInput === null || firstInput === void 0 ? void 0 : firstInput.shadowRoot;
-    if (shadowRoot) {
-        // If there are no inner focusable elements, just focus the host element.
-        firstInput = shadowRoot.querySelector(focusableQueryString) || firstInput;
-    }
-    if (firstInput) {
-        helpers.focusElement(firstInput);
-    }
-    else {
-        // Focus overlay instead of letting focus escape
-        overlay.focus();
-    }
+    const firstInput = ref.querySelector(focusableQueryString);
+    focusElementInOverlay(firstInput, overlay);
 };
-const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden');
+/**
+ * Focuses the last descendant in an overlay
+ * that can receive focus. If none exists,
+ * the entire overlay will be focused.
+ */
 const focusLastDescendant = (ref, overlay) => {
     const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
-    let lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    const shadowRoot = lastInput === null || lastInput === void 0 ? void 0 : lastInput.shadowRoot;
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+    focusElementInOverlay(lastInput, overlay);
+};
+/**
+ * Focuses a particular element in an overlay. If the element
+ * doesn't have anything focusable associated with it then
+ * the overlay itself will be focused.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an ion-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of ion-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInOverlay = (hostToFocus, overlay) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
-        lastInput = shadowRoot.querySelector(focusableQueryString) || lastInput;
+        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
     }
-    if (lastInput) {
-        lastInput.focus();
+    if (elementToFocus) {
+        helpers.focusVisibleElement(elementToFocus);
     }
     else {
         // Focus overlay instead of letting focus escape
@@ -176,6 +192,21 @@ const trapKeyboardFocus = (ev, doc) => {
          */
         if (lastOverlay === target) {
             lastOverlay.lastFocus = undefined;
+            /**
+             * Toasts can be presented from an overlay.
+             * However, focus should still be returned to
+             * the overlay when clicking a toast. Normally,
+             * focus would be returned to the last focusable
+             * descendant in the overlay which may not always be
+             * the button that the toast was presented from. In this case,
+             * the focus may be returned to an unexpected element.
+             * To account for this, we make sure to return focus to the
+             * last focused element in the overlay if focus is
+             * moved to the toast.
+             */
+        }
+        else if (target.tagName === 'ION-TOAST') {
+            focusElementInOverlay(lastOverlay.lastFocus, lastOverlay);
             /**
              * Otherwise, we must be focusing an element
              * inside of the overlay. The two possible options
@@ -247,6 +278,21 @@ const trapKeyboardFocus = (ev, doc) => {
          */
         if (lastOverlay.contains(target)) {
             lastOverlay.lastFocus = target;
+            /**
+             * Toasts can be presented from an overlay.
+             * However, focus should still be returned to
+             * the overlay when clicking a toast. Normally,
+             * focus would be returned to the last focusable
+             * descendant in the overlay which may not always be
+             * the button that the toast was presented from. In this case,
+             * the focus may be returned to an unexpected element.
+             * To account for this, we make sure to return focus to the
+             * last focused element in the overlay if focus is
+             * moved to the toast.
+             */
+        }
+        else if (target.tagName === 'ION-TOAST') {
+            focusElementInOverlay(lastOverlay.lastFocus, lastOverlay);
         }
         else {
             /**
@@ -320,7 +366,7 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!hardwareBackButton.shoudUseCloseWatcher()) {
+        if (!hardwareBackButton.shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
@@ -410,15 +456,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         return;
     }
     setRootAriaHidden(true);
-    /**
-     * Hide all other overlays from screen readers so only this one
-     * can be read. Note that presenting an overlay always makes
-     * it the topmost one.
-     */
-    if (index.doc !== undefined) {
-        const presentedOverlays = getPresentedOverlays(index.doc);
-        presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-    }
+    hideOverlaysFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -511,7 +549,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -562,13 +600,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         console.error(err);
     }
     overlay.el.remove();
-    /**
-     * If there are other overlays presented, unhide the new
-     * topmost one from screen readers.
-     */
-    if (index.doc !== undefined) {
-        (_c = getPresentedOverlay(index.doc)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-hidden');
-    }
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -764,6 +796,62 @@ const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (index.doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(index.doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (index.doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(index.doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};
 
 exports.BACKDROP = BACKDROP;
 exports.GESTURE = GESTURE;

package/dist/cjs/{status-tap-692f6d32.js → status-tap-03d82840.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-const index = require('./index-0ffe376d.js');
-const index$1 = require('./index-53d162b2.js');
-const helpers = require('./helpers-2e1028fa.js');
+const index = require('./index-22617dd6.js');
+const index$1 = require('./index-bef98850.js');
+const helpers = require('./helpers-da4c0ed1.js');
 require('./index-5915f9b3.js');
 
 const startStatusTap = () => {

package/dist/cjs/{swipe-back-7a848bb8.js → swipe-back-dcd0d4a9.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-2e1028fa.js');
+const helpers = require('./helpers-da4c0ed1.js');
 const dir = require('./dir-94c21456.js');
 const index = require('./index-d1b59ffa.js');
 require('./gesture-controller-c40c045a.js');

package/dist/collection/collection-manifest.json

@@ -94,8 +94,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.2",
-    "typescriptVersion": "5.3.3"
+    "version": "4.15.0",
+    "typescriptVersion": "5.4.4"
   },
   "collections": [
     {

package/dist/collection/components/action-sheet/action-sheet.js

@@ -191,12 +191,12 @@ export class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: 'cd141d12d7d86d3402fd220c4afb61cdbf064c04', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '49c8b5b3412b5688e44f3e3fa18abcc01c75a770', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'b6a051e2cf5e101edbf59c8a40a04d8f7107fb3c', tappable: this.backdropDismiss }), h("div", { key: '5bfa2b37a417aaff3776f06d92a8544dfcbf714f', tabindex: "0" }), h("div", { key: '77d5a217803fd7be8f8dbedcd0ef5e59f0fd9800', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '3901d56215f05cdab074e2ec321391281a165097', class: "action-sheet-container" }, h("div", { key: '275f5c7981b2ee44fb632b3d137c7209cbfcf45c', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '80b4c279fca194c6d65bbdb8128956641387bb05', tappable: this.backdropDismiss }), h("div", { key: '245cde1873c07ef09267de8ab1a4d6ee51c0a83c', tabindex: "0" }), h("div", { key: '045109bb2118decbe633f45aa3d71b824d37c0fd', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'b053f3a177b6ac7f2f76f5470f7023389f06cfd8', class: "action-sheet-container" }, h("div", { key: '88287aa180c22389747c9fec702112e29f4ec039', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '693e67af994a0018508a6deb867937916913eaa6', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b) }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: '4285893438675be9b40838a93c2ff382a1074cd3', tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { key: '813cbb8d66e46d5a55a6c8bf52c5689882dc7002', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b) }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: 'f99cd10e7d91d3014edac6109c3e6dc128737f7c', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '595c6a39ba04185e80cc3b0705536f93b4f1ebf4' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '1f40403b907c6e925405a8b405ede9f7f9885611', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '75d5398d889fa70b514843b9cc73b2087a0bf1a0', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'cda40def00755c69da9f6a67494eee4dc79550fc' })))))), h("div", { key: '4d9432bae550ef618ba762857144f1558e3e29e7', tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/alert/alert.js

@@ -391,9 +391,9 @@ export class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: '4b7f7880dc5f39aa9b61981af0a821ac0350af7f', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd623baf94bddc6b1932f128f6a605c6232b37fb5', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '961a2684013ac61d59882914fd8d759ddb542fe7', tappable: this.backdropDismiss }), h("div", { key: '2ec08c3719b3cd8a4cae09d2c6ac778ffad5f940', tabindex: "0" }), h("div", { key: 'ee543683d20693c9a9497aca4d41f032aa580c9c', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '55015102b67d080249a8859fc8788f3a82d5ead9', class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'df7bcfb0cb41965f169de05edd631a050d5ce648', tabindex: "0" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'a594ba787a73a33ba10e7a32ca863bd610730cb6', tappable: this.backdropDismiss }), h("div", { key: 'c95ef8332f46ce93fb8d3b7f0168ae5b939c52fd', tabindex: "0" }), h("div", { key: '1895ea338a8e446d01c6151552af658e1e1c841d', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '5156393eb8a8f3e60e7d4bce20b0b85196141b0e', class: "alert-head" }, header && (h("h2", { key: '72ba8253644adfeeb8472531234d3572af28b473', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'eb8d2443170fbea182199bb3b3f5446c98f1c17e', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '13c6fac1a58574156951ae2dfdd24790c0812e11', tabindex: "0" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/alert/test/a11y/alert.e2e.js

@@ -222,6 +222,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
             await alert.evaluate((el) => el.present());
             await ionAlertDidPresent.next();
+            /**
+             * The borders on the text fields may not be visible in the screenshot
+             * when using Safari, this is due to a WebKit rendering quirk.
+             */
             await expect(page).toHaveScreenshot(screenshot(`alert-text-fields-scale`));
         });
     });

package/dist/collection/components/app/app.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
-import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { printIonWarning } from "../../utils/logging/index";
 import { isPlatform } from "../../utils/platform";
 import { config } from "../../global/config";
@@ -27,7 +27,7 @@ export class App {
                     import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-                const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
                 if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
                 }
@@ -36,7 +36,7 @@ export class App {
                      * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
                      * then the close watcher will not be used.
                      */
-                    if (shoudUseCloseWatcher()) {
+                    if (shouldUseCloseWatcher()) {
                         printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
                     }
                     hardwareBackButtonModule.blockHardwareBackButton();
@@ -65,7 +65,7 @@ export class App {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3535eb5c0dab78a78011e552524a98599b2b650f', class: {
+        return (h(Host, { key: '6d7c57453b4be454690e8f1a0721f1e3da8f92aa', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

package/dist/collection/components/avatar/avatar.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Avatar {
     render() {
-        return (h(Host, { key: '95d7ca334f9b66e0983cbc1b782ded0b9a54eaa9', class: getIonMode(this) }, h("slot", { key: '011d20189acdb03bee328aa4fa0511826a0b3a36' })));
+        return (h(Host, { key: 'f6014b524497bb18ae919ba6f6928407310d6870', class: getIonMode(this) }, h("slot", { key: '192ff4a8e10c0b0a4a2ed795ff2675afa8b23449' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/back-button/back-button.js

@@ -72,7 +72,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const mode = getIonMode(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '175fff2d7a41d2deaaf7b781c5ba2aac9311ebf4', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '9e837be314ee8ea487ba2771d36668ef58442faa', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -82,7 +82,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '59fe30c167ea82e2431e45d46060a01bcb2aea77', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '3d704fb7ef001446361e7a09d43763a771b242b9', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h("button", { key: 'c4531348bd80cf6163931c5fb432526aa8127043', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: 'aab8c6d5f0a84aed9f4e4a2532a239b28c7d5589', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '121eae10947b46a3d109709b79f4126b1c40ade4', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '11c28875cc52b99470525d18c1f88f27c390a75a', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '804bf8a06cd033c99d61ec2665c842b3b25945fa', type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/backdrop/backdrop.js

@@ -35,7 +35,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b2adb9dabef01fa49388d67d9e8a4a370931f633', tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: '16b1328f4a058b8d3752e58dc56c44bed556c425', tabindex: "-1", "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,

package/dist/collection/components/badge/badge.js

@@ -13,9 +13,9 @@ export class Badge {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '043eea016721e53f0af1cbf1371bc08694281204', class: createColorClasses(this.color, {
+        return (h(Host, { key: '22d41ceefb76f40dfbf739fd71483f1272a45858', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'bd510450d6b60f2794491244e68a83049a5ef6dd' })));
+            }) }, h("slot", { key: 'e7e65463bac5903971a8f9f6be55515f42b81a83' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -64,7 +64,7 @@ export class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { key: '632efa1bc6dc446e81efe8cd7763cb9b16466563', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '6d354439f90ec3cfab9fbf93cb17a67fb9ca6034', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -74,15 +74,15 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: '6f232cfc590b2e2a23a2e1ee40d6658e7d8b4953' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: 'fec56c6f92c147fbd6273d3efb82b1a6c944699c', name: "start" }), h("slot", { key: '80aa33cdcaab810f544803c6105b489172542846' }), h("slot", { key: '6e1d3f332ae35f5061204bece9756a9bac4aaf4a', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ key: '4782977969bd84af02b1834573a6e51069b798ae' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '7d5fb845e463b8195142099773e7f258fc8ed31d', name: "start" }), h("slot", { key: '6b642ccb9101c12f72124fed5dd0f6362345fb41' }), h("slot", { key: '9fb0841fed712e21d1e84b187e1bc9159cf80b56', name: "end" })), showCollapsedIndicator && (h("button", { key: '4b64544d879224d491447a79da8f8672b994af0b', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
-            } }, h("ion-icon", { "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
+            } }, h("ion-icon", { key: '5a2511b237aa8c401f416e967a831f8315423949', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**
          * Separators should not be announced by narrators.
          * We add aria-hidden on the span so that this applies
          * to any custom separators too.
          */
-        h("span", { class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+        h("span", { key: '348952855dd79eb92f8d370e5839a8d09aff4097', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: '0120f416edb1d776fa6900b5986b2b57eef554b3', name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
     }
     static get is() { return "ion-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -105,12 +105,12 @@ export class Breadcrumbs {
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '35f8a2bffdd85ba6dc31834ebef69602a5a7cca1', class: createColorClasses(color, {
+        return (h(Host, { key: 'cd288d4bf5498f86d086eb999b506993818642f3', class: createColorClasses(color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { key: 'ada062b5d17380d311861d1cf1a22dd62bac5497', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: '73c802065511dbebef3867b01ce929313d24cba2', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.ios.css

@@ -330,11 +330,6 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--color));
 }
 
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-color, var(--color));
-  color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -593,4 +588,9 @@ ion-ripple-effect {
 
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
   background: var(--ion-color-shade);
+}
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-color, var(--color));
+  color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
 }

package/dist/collection/components/button/button.js

@@ -199,7 +199,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: '8533314504b286ec10e26722f93376d86a7ca1c9', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '54569350aae49882123f0e22a720956eddee33f5', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -214,7 +214,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '79bf020fdac0c2ceb2b05547b3e5a9a11e60abb4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '109481ba86102647023b746b054b2718d3c9d92a', class: "button-inner" }, h("slot", { key: 'f824ddd9f988b9bd33136555b16aa790d9291b49', name: "icon-only" }), h("slot", { key: 'd614f4e430792c5f93be4b3a8c57a826d74b9cfd', name: "start" }), h("slot", { key: '95d00c8a980c31cc7f84732f51a17a0cd285a7cb' }), h("slot", { key: 'a228ff52cbe04dc9d2e22bb66611ecc96d130e6f', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: '95c196fc5bf080ef308532c3627e2a9d68f24996' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'e247013b847158187258d28f37ab23905fe49110', class: "button-inner" }, h("slot", { key: '58ac0bd8f643f4392ddbe465fab26eedffe02b7a', name: "icon-only" }), h("slot", { key: '2289d37a37a64472ffe818b3b1126945cebf101e', name: "start" }), h("slot", { key: 'b69a915dff465d251f0466449b91450d4a4048a9' }), h("slot", { key: '594a80d6707fd5edabc03e467f7aae3011d020f6', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'b034770cadefe74922ed6564a17147ddc6c9fdb1', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.md.css

@@ -330,11 +330,6 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--color));
 }
 
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-color, var(--color));
-  color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -515,4 +510,8 @@ ion-ripple-effect {
   :host(.button-outline.ion-color:hover) .button-native::after {
     background: var(--ion-color-base);
   }
+}
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-background, var(--color));
+  color: var(--ion-toolbar-color, var(--background), var(--ion-color-primary-contrast, #fff));
 }

package/dist/collection/components/buttons/buttons.js

@@ -9,7 +9,7 @@ export class Buttons {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '52c0c5535f5688a481746fe8fd92b6c02941526f', class: {
+        return (h(Host, { key: '2929fd8c4469bab2953c23d47f601706acb104f1', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
             } }));

package/dist/collection/components/card/card.js

@@ -49,7 +49,7 @@ export class Card {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9e35c114ce466623024b94dd6797118ad027417d', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b92792294360fd974324b31ed2d3db00d3e2f8cd', class: createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),

package/dist/collection/components/card-content/card-content.js

@@ -9,7 +9,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class CardContent {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'd4da147bb0b0b14684b54d37d04ba5a8f7a7d71d', class: {
+        return (h(Host, { key: 'dd95806f042fcd124b18126679f671be6e32a021', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,

package/dist/collection/components/card-header/card-header.js

@@ -14,11 +14,11 @@ export class CardHeader {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '070294064c4b17c941961c9cccf1ae6592b385b6', class: createColorClasses(this.color, {
+        return (h(Host, { key: '44077ad8e3edf7726d0f7a039046e32dc56a83c9', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'adac918d5e93bf69b07c5bda329ebf8c719bd623' })));
+            }) }, h("slot", { key: '51b6f4048d25521ece18d79e5361c762af41cae7' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -13,10 +13,10 @@ export class CardSubtitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ae115cf349cd13f88d20b1fbab6b8a813a87b925', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: '6f94c9ced239cc945a148e0ecc7ab848fa70d8e3', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'f5dd779b34b5c5c541cbbe56cc8a877e50513252' })));
+            }) }, h("slot", { key: '445f81155799be5e81baa571bd16d57e5149df62' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-title/card-title.js

@@ -13,10 +13,10 @@ export class CardTitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '432d7bf971fda63c30c748986143ec2a8be9e4af', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a9e4190346e7d0a8e6089ec1fe01bca0f5f7200d', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '3c5dcf6ac1bf981c6c0488f0027765269c80db5a' })));
+            }) }, h("slot", { key: '8d87636ad703545b6d2297629205a5a8616eb94e' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -105,7 +105,7 @@ export class Checkbox {
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { class: createColorClasses(color, {
+        return (h(Host, { "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,