@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11708036667.1fa730de

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

@@ -70,7 +70,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '1a3c381bb81e1c0dfcdfb2e58e1fe74c2c7a56ac', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'b37743b20b93c27ffb0094b35545292533f9d30f', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -82,7 +82,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: 'f12a66bc4f869a25d203a042757ecb331cb1598c' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'e7a5bdec004ae80cc479911ad2aab1e4decff3bc', class: "button-inner" }, h("slot", { key: '07f1d1704fdf3ef45da4b698eaec1164b3fc0bf4' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '7dd2b3aaa96f64a8b7411730ed8b201466a97162' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'cb328541793b6aa469d5d3bff662d2efa56dc977', class: "button-inner" }, h("slot", { key: '904a1b063f481ac86d5bea967a375addc9c96471' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -135,7 +135,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '27416d233c9b2b14498f7d77cd809b26a37da75b', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '19f237ba72e75f5bb7fbe35bee7e91a19566a724', name: "top" }), h("div", { key: '01143ca8a853eec525311c9f9fa521867f06f767', class: "tabs-inner" }, h("slot", { key: '790f8c417135a64e6ee4c8fa5ad309d6d0cd00de' })), h("slot", { key: '016959a52e07dcff0b86e7db0794e2d1747b3609', name: "bottom" })));
+        return (h(Host, { key: 'e2cac6a2e54514f31cfe65692e34e88d530b204f', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '53bc64f37aebb9a68c6e2db2c89ec6d39cd64bbd', name: "top" }), h("div", { key: '72f4f0ae53518631d6c1b6276da3f63147c28cfc', class: "tabs-inner" }, h("slot", { key: '79f1eece652cf00a3dd8359b68e68059816ff704' })), h("slot", { key: '3fbaf52447720ee14c7db06f2bf71a92093847f4', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '03c3424a63ff7c436d73f759c6e5a30133e1871f', class: createColorClasses(this.color, {
+        return (h(Host, { key: '9b5decc6dfca4fbaf0fe42696a9833ffee269a7d', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '0c6c873cf28a093dd45441dff7c3a5b382bc2a9b' })));
+            }) }, h("slot", { key: '5b822dcc0f6255819cec7626d0c0f7f9873aaab9' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -359,7 +359,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '1994b7a16356fc5fcaead042588ceaafcb80a894', class: createColorClasses(this.color, {
+        return (h(Host, { key: '3adbec7986ecb5a274ecf341b938432c3d04705a', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -368,7 +368,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'e7b8610e92ceebe19fd1d17c80134acb5d4f52d1', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '522308f0d38c481b56ed99f43fc7c3747f9c1263', class: "textarea-wrapper-inner" }, h("div", { key: '0e65d62e91815cbb954d3a286813ed75b4dc1500', class: "start-slot-wrapper" }, h("slot", { key: 'e88f83ec1c62c7e9d97837dc9fdcc6f30be6dacc', name: "start" })), h("div", { key: '4d26c34c2468acfd962c6a4a73ad6057342aef44', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e6135e0a61fb5eb2b4f8f7da70ee49a28567c954', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '1946c844cdbeefb989b1a4033050a851b367084f', class: "end-slot-wrapper" }, h("slot", { key: 'ac34fa1edaddb8b377310a2ce88fa651a6e73d3c', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '9df12985193c4fa6a277b71bcac668d7e61f02ac', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'b39ac1d580d3bcaad8cc028e703960cd2277fa10', class: "textarea-wrapper-inner" }, h("div", { key: 'b2d6971c51683fe67121c4d0e4ac8e17723fa59d', class: "start-slot-wrapper" }, h("slot", { key: 'b229d482a4ff208858dffc6ff3a5ad661a2a7288', name: "start" })), h("div", { key: 'b2d2770afa7012f055463df6a302bed685b46107', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'a18150f8d381e0569f6d71867451ce8176157521', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: 'f20f6e5c9b339cff4bdd7bffe59afd27b05ce8b9', class: "end-slot-wrapper" }, h("slot", { key: '64a10ebdb4a89ec1c3d34c29e8c9403d3d788f3b', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: 'a68f3a4857f63f4cf06ec89932e9dc4c434d4a9b', class: getIonMode(this) }, h("slot", { key: 'fd132f56a3ba8928d32d952b27ceb342a0e59aed' })));
+        return (h(Host, { key: '68bac4e80f5d27131690fd20dfabff2618743206', class: getIonMode(this) }, h("slot", { key: '89f46a686288428391cdfaef3384824751ae3d05' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: 'bb4edf1ed209af94f6db20de9a7523c3500f6e32', class: createColorClasses(this.color, {
+        return (h(Host, { key: '53fb524f6763307bd0a1f077ada8e9ee82c865c0', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'd5857d84670a792aa74096a2efe03c3f17b98417', class: "toolbar-title" }, h("slot", { key: '596f3361b3182df48fbc14ef57c11702fac12cd1' }))));
+            }) }, h("div", { key: '5957214d78b666fd0ba988c3f4cc18368a92deac', class: "toolbar-title" }, h("slot", { key: '444b2019e079d5ed6decbfc4db488757fcf70094' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -384,9 +384,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '9575ee7d0195f7f2a95486d4b193beb58d966941', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '883ac055d9c73336b8912bdf25e18d16cc6b81fe', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'cf152835fe8d8cc499214443b5fa23bf5ef076a1', class: wrapperClass }, h("div", { key: 'c0d331df574399e541fcefb3987777692be10e6c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '3d6ffa739935f5c92d81ccaccb673cb46b794472', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'b34cc9f7cfa69a8d9ce343686aa14d0d0c174e97', class: wrapperClass }, h("div", { key: '08ff305e319454116f24a4d354c50949905411d6', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '854f71fc8a2ed078626011b07ee599cd17312a86', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -157,7 +157,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '1ff490557ae9f695646fab73f4e8eb5479c39194', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '3c0acc5498682a610e7a6f095590ad79391e1ba4', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '9ef2ac21e677ef8e06e6265578e84c65268e2f73', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'c39eb29126454211a99be4fad6e421dcdebdae71', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '379d33ef5714e1d69aa7dd4a6fd2576647e768ad', class: {
+            }) }, h("label", { key: '68133afe76d290ebcb8f05883a27875529f0bfff', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'abd6aad2a3e62fbffb80d5c3dbdc57182bc97fab', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '8e70ddd2b4daada4bf16e85e56df9078116933f9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '7dc7e14558361468d5d842e4235b18e09bdd3805' })), h("div", { key: 'ac1cd965163dff435d76db51c69b2285770a1ea0', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: 'eae25cdeefe1e6589f06b3a2568522e74cf44d66' })), h("div", { key: 'df9adddd1d8d73c8a23e1e91261d84c876ac5935', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'da75d7f5702b0afe180387f65ce9e7f9c8309ccc', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'f72d6a7ed20c88ba15d64050acfc20f320569862', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '9c443426f88e2f9be54267ed47f4383c4dfeec7b', class: "toolbar-background" }), h("div", { key: '7c316762df2b307121d6dc596cb3cde9e38242dd', class: "toolbar-container" }, h("slot", { key: '96d29f9768ef136c5f60f69e669e19c44ef9cc05', name: "start" }), h("slot", { key: '5192bf9c9b4c4e4d2025a0e10708360514d42d2b', name: "secondary" }), h("div", { key: '7ba4288f9a2fb6c4e31b22ff9c385252a2827abf', class: "toolbar-content" }, h("slot", { key: 'ad4ffe0ef333456b1369f57952a367b786d9e148' })), h("slot", { key: '633735d0fb620d828e98b1c1eebfd0985a09db6c', name: "primary" }), h("slot", { key: '91af4b9c44e897ecc974a8cc2725791e1939367f', name: "end" }))));
+            })) }, h("div", { key: 'ccf18eea9756ca56ca828b05bd3f86cf8a32e24c', class: "toolbar-background" }), h("div", { key: '1fa699d8e17f57b42a52d47a1bdb793f2cbbfe5d', class: "toolbar-container" }, h("slot", { key: 'ef4d877bad0918eefdc67fa7aa258024a58d26ef', name: "start" }), h("slot", { key: '41858db7a8d58c9165952c9336731d621ec3c2b8', name: "secondary" }), h("div", { key: '577770b9346b48a0fa1412cbdbd9393d553d2286', class: "toolbar-content" }, h("slot", { key: 'ae47b29e1f7d2c3dde7a170c9737b48f075139c2' })), h("slot", { key: 'cfbf7879daf1a38fee434335abff936d8f3690e0', name: "primary" }), h("slot", { key: 'ed3a66248f43e0749f6aef9fb78ea4f5034c0774', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/transition/index.js

@@ -2,7 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, writeTask } from "@stencil/core";
+import { printIonWarning } from "../logging/index";
 import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE, } from "../../components/nav/constants";
+import { config } from "../../global/config";
 import { raf } from "../helpers";
 const iosTransitionAnimation = () => import('./ios.transition');
 const mdTransitionAnimation = () => import('./md.transition');
@@ -24,9 +26,23 @@ export const transition = (opts) => {
         });
     });
 };
+const LAST_FOCUS = 'ion-last-focus';
 const beforeTransition = (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
+    const focusManagerEnabled = config.get('experimentalFocusManagerPriority', false);
+    /**
+     * When going back to a previously visited page
+     * focus should typically be moved back to the
+     * element that was last focused when the user
+     * was on this view.
+     */
+    if (focusManagerEnabled) {
+        const activeEl = document.activeElement;
+        if (activeEl !== null && (leavingEl === null || leavingEl === void 0 ? void 0 : leavingEl.contains(activeEl))) {
+            activeEl.setAttribute(LAST_FOCUS, 'true');
+        }
+    }
     setZIndex(enteringEl, leavingEl, opts.direction);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
@@ -52,6 +68,24 @@ const runTransition = async (opts) => {
     const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation
     return ani;
 };
+/**
+ * Moves focus to a specified element.
+ * Note that we do not remove the tabindex
+ * because that can result in an unintentional
+ * blur. Non-focusables can't be focused, so the
+ * body will get focused again.
+ */
+const moveFocus = (el) => {
+    el.tabIndex = -1;
+    el.focus();
+};
+/**
+ * Elements that are hidden using `display: none` should
+ * not be focused even if they are present in the DOM.
+ */
+const isVisible = (el) => {
+    return el.offsetParent !== null;
+};
 const afterTransition = (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
@@ -61,6 +95,69 @@ const afterTransition = (opts) => {
         leavingEl.classList.remove('ion-page-invisible');
         leavingEl.style.removeProperty('pointer-events');
     }
+    const focusManagerPriorities = config.get('experimentalFocusManagerPriority', false);
+    if (Array.isArray(focusManagerPriorities) && !enteringEl.contains(document.activeElement)) {
+        /**
+         * When going back to a previously visited view
+         * focus should always be moved back to the element
+         * that the user was last focused on when they were on this view.
+         */
+        const lastFocus = enteringEl.querySelector(`[${LAST_FOCUS}]`);
+        if (lastFocus && isVisible(lastFocus)) {
+            moveFocus(lastFocus);
+            return;
+        }
+        for (const priority of focusManagerPriorities) {
+            switch (priority) {
+                case 'content':
+                    /**
+                     * If no level one heading exists then we should at least focus the
+                     * header so focus starts at the top of the page.
+                     */
+                    const content = enteringEl.querySelector('main, [role="main"]');
+                    if (content && isVisible(content)) {
+                        moveFocus(content);
+                        return;
+                    }
+                    break;
+                case 'heading':
+                    /**
+                     * If no last focus exists then we should prefer to focus
+                     * level one headings. We do not prioritize the header yet
+                     * because the header can have non-title elements such as
+                     * a back button which is not necessarily helpful
+                     * to focus first.
+                     */
+                    const headingOne = enteringEl.querySelector('h1, [role="heading"][aria-level="1"]');
+                    if (headingOne && isVisible(headingOne)) {
+                        moveFocus(headingOne);
+                        return;
+                    }
+                    break;
+                case 'banner':
+                    /**
+                     * If no level one heading exists then we should at least focus the
+                     * header so focus starts at the top of the page.
+                     */
+                    const header = enteringEl.querySelector('header, [role="banner"]');
+                    if (header && isVisible(header)) {
+                        moveFocus(header);
+                        return;
+                    }
+                    break;
+                default:
+                    printIonWarning(`Unrecognized focus manager priority value ${priority}`);
+                    break;
+            }
+        }
+        /**
+         * If there is no header then focus the page
+         * so focus at least moves to the correct view.
+         * The browser will then determine where within the
+         * page to move focus to.
+         */
+        moveFocus(enteringEl);
+    }
 };
 const getAnimationBuilder = async (opts) => {
     if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
@@ -93,7 +190,16 @@ const animation = async (animationBuilder, opts) => {
 const noAnimation = async (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
-    await waitForReady(opts, false);
+    const focusManagerEnabled = config.get('experimentalFocusManagerPriority', false);
+    /**
+     * If the focus manager is enabled then we
+     * need to wait for Ionic components to be rendered
+     * otherwise the correct component to focus may not
+     * be focused because it is still hidden.
+     * However, if the manager is not enabled
+     * then there's no need to wait since there will be no animation.
+     */
+    await waitForReady(opts, focusManagerEnabled);
     fireWillEvents(enteringEl, leavingEl);
     fireDidEvents(enteringEl, leavingEl);
     return {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-02-14T17:41:16",
+  "timestamp": "2024-02-15T22:39:30",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.12.0",
@@ -5199,30 +5199,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "legacy",
-          "type": "boolean | undefined",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "legacy",
-          "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "boolean"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
@@ -20631,30 +20607,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "legacy",
-          "type": "boolean | undefined",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "legacy",
-          "reflectToAttr": false,
-          "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "boolean"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
         {
           "name": "max",
           "type": "number",
@@ -29635,11 +29587,6 @@
       "docstring": "",
       "path": "src/components/checkbox/checkbox-interface.ts"
     },
-    "src/interface.d.ts::StyleEventDetail": {
-      "declaration": "export interface StyleEventDetail {\n  [styleName: string]: boolean;\n}",
-      "docstring": "",
-      "path": "src/interface.d.ts"
-    },
     "src/components/content/content-interface.ts::ScrollBaseDetail": {
       "declaration": "export interface ScrollBaseDetail {\n  isScrolling: boolean;\n}",
       "docstring": "",
@@ -29680,6 +29627,11 @@
       "docstring": "",
       "path": "src/components/datetime/datetime-interface.ts"
     },
+    "src/interface.d.ts::StyleEventDetail": {
+      "declaration": "export interface StyleEventDetail {\n  [styleName: string]: boolean;\n}",
+      "docstring": "",
+      "path": "src/interface.d.ts"
+    },
     "src/components/picker-column/picker-column-interfaces.ts::PickerColumnChangeEventDetail": {
       "declaration": "export interface PickerColumnChangeEventDetail {\n  value: PickerColumnValue;\n}",
       "docstring": "",

package/dist/esm/{animation-60dbdd13.js → animation-2b6dd235.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win } from './index-a5d50daf.js';
-import { r as raf } from './helpers-c0b9ca37.js';
+import { r as raf } from './helpers-6f6a912f.js';
 
 let animationPrefix;
 /**

package/dist/esm/{framework-delegate-fed7fe7c.js → framework-delegate-e8bffeeb.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers-c0b9ca37.js';
+import { c as componentOnReady } from './helpers-6f6a912f.js';
 
 // TODO(FW-2832): types
 const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {

package/dist/esm/{helpers-c0b9ca37.js → helpers-6f6a912f.js}

@@ -415,4 +415,4 @@ const shallowEqualStringMap = (map1, map2) => {
     return true;
 };
 
-export { addEventListener as a, removeEventListener as b, componentOnReady as c, renderHiddenInput as d, getAriaLabel as e, focusElement as f, getElementRoot as g, findItemLabel as h, inheritAriaAttributes as i, debounceEvent as j, inheritAttributes as k, clamp as l, hasLazyBuild as m, hasShadowDom as n, assert as o, isEndSide as p, debounce as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t, now as u, pointerCoord as v };
+export { addEventListener as a, removeEventListener as b, componentOnReady as c, renderHiddenInput as d, debounceEvent as e, focusElement as f, getElementRoot as g, inheritAttributes as h, inheritAriaAttributes as i, clamp as j, hasLazyBuild as k, getAriaLabel as l, hasShadowDom as m, assert as n, isEndSide as o, debounce as p, now as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t, pointerCoord as u };

package/dist/esm/{index-48209844.js → index-02ec07ff.js}

@@ -4,9 +4,9 @@
 import { d as doc } from './index-a5d50daf.js';
 import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-f42b9c80.js';
 import { p as printIonWarning } from './index-9b0d46f4.js';
-import { c as componentOnReady } from './helpers-c0b9ca37.js';
+import { c as componentOnReady } from './helpers-6f6a912f.js';
 import { b as getIonMode } from './ionic-global-778b7863.js';
-import { c as createAnimation } from './animation-60dbdd13.js';
+import { c as createAnimation } from './animation-2b6dd235.js';
 
 /**
  * baseAnimation

package/dist/esm/{index-d64f34ea.js → index-1496c7cd.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index-a5d50daf.js';
-import { u as now, v as pointerCoord } from './helpers-c0b9ca37.js';
+import { q as now, u as pointerCoord } from './helpers-6f6a912f.js';
 
 const startTapClick = (config) => {
     if (doc === undefined) {

package/dist/esm/{index-4b98143d.js → index-361e1f35.js}

@@ -2,7 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as writeTask, B as Build } from './index-73881b51.js';
-import { r as raf } from './helpers-c0b9ca37.js';
+import { p as printIonWarning } from './index-9b0d46f4.js';
+import { c as config } from './ionic-global-778b7863.js';
+import { r as raf } from './helpers-6f6a912f.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -10,8 +12,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-7ff7381d.js');
-const mdTransitionAnimation = () => import('./md.transition-28a9a26b.js');
+const iosTransitionAnimation = () => import('./ios.transition-8853da89.js');
+const mdTransitionAnimation = () => import('./md.transition-e0cb5ce0.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {
@@ -30,9 +32,23 @@ const transition = (opts) => {
         });
     });
 };
+const LAST_FOCUS = 'ion-last-focus';
 const beforeTransition = (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
+    const focusManagerEnabled = config.get('experimentalFocusManagerPriority', false);
+    /**
+     * When going back to a previously visited page
+     * focus should typically be moved back to the
+     * element that was last focused when the user
+     * was on this view.
+     */
+    if (focusManagerEnabled) {
+        const activeEl = document.activeElement;
+        if (activeEl !== null && (leavingEl === null || leavingEl === void 0 ? void 0 : leavingEl.contains(activeEl))) {
+            activeEl.setAttribute(LAST_FOCUS, 'true');
+        }
+    }
     setZIndex(enteringEl, leavingEl, opts.direction);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
@@ -58,6 +74,24 @@ const runTransition = async (opts) => {
     const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation
     return ani;
 };
+/**
+ * Moves focus to a specified element.
+ * Note that we do not remove the tabindex
+ * because that can result in an unintentional
+ * blur. Non-focusables can't be focused, so the
+ * body will get focused again.
+ */
+const moveFocus = (el) => {
+    el.tabIndex = -1;
+    el.focus();
+};
+/**
+ * Elements that are hidden using `display: none` should
+ * not be focused even if they are present in the DOM.
+ */
+const isVisible = (el) => {
+    return el.offsetParent !== null;
+};
 const afterTransition = (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
@@ -67,6 +101,69 @@ const afterTransition = (opts) => {
         leavingEl.classList.remove('ion-page-invisible');
         leavingEl.style.removeProperty('pointer-events');
     }
+    const focusManagerPriorities = config.get('experimentalFocusManagerPriority', false);
+    if (Array.isArray(focusManagerPriorities) && !enteringEl.contains(document.activeElement)) {
+        /**
+         * When going back to a previously visited view
+         * focus should always be moved back to the element
+         * that the user was last focused on when they were on this view.
+         */
+        const lastFocus = enteringEl.querySelector(`[${LAST_FOCUS}]`);
+        if (lastFocus && isVisible(lastFocus)) {
+            moveFocus(lastFocus);
+            return;
+        }
+        for (const priority of focusManagerPriorities) {
+            switch (priority) {
+                case 'content':
+                    /**
+                     * If no level one heading exists then we should at least focus the
+                     * header so focus starts at the top of the page.
+                     */
+                    const content = enteringEl.querySelector('main, [role="main"]');
+                    if (content && isVisible(content)) {
+                        moveFocus(content);
+                        return;
+                    }
+                    break;
+                case 'heading':
+                    /**
+                     * If no last focus exists then we should prefer to focus
+                     * level one headings. We do not prioritize the header yet
+                     * because the header can have non-title elements such as
+                     * a back button which is not necessarily helpful
+                     * to focus first.
+                     */
+                    const headingOne = enteringEl.querySelector('h1, [role="heading"][aria-level="1"]');
+                    if (headingOne && isVisible(headingOne)) {
+                        moveFocus(headingOne);
+                        return;
+                    }
+                    break;
+                case 'banner':
+                    /**
+                     * If no level one heading exists then we should at least focus the
+                     * header so focus starts at the top of the page.
+                     */
+                    const header = enteringEl.querySelector('header, [role="banner"]');
+                    if (header && isVisible(header)) {
+                        moveFocus(header);
+                        return;
+                    }
+                    break;
+                default:
+                    printIonWarning(`Unrecognized focus manager priority value ${priority}`);
+                    break;
+            }
+        }
+        /**
+         * If there is no header then focus the page
+         * so focus at least moves to the correct view.
+         * The browser will then determine where within the
+         * page to move focus to.
+         */
+        moveFocus(enteringEl);
+    }
 };
 const getAnimationBuilder = async (opts) => {
     if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
@@ -99,7 +196,16 @@ const animation = async (animationBuilder, opts) => {
 const noAnimation = async (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
-    await waitForReady(opts, false);
+    const focusManagerEnabled = config.get('experimentalFocusManagerPriority', false);
+    /**
+     * If the focus manager is enabled then we
+     * need to wait for Ionic components to be rendered
+     * otherwise the correct component to focus may not
+     * be focused because it is still hidden.
+     * However, if the manager is not enabled
+     * then there's no need to wait since there will be no animation.
+     */
+    await waitForReady(opts, focusManagerEnabled);
     fireWillEvents(enteringEl, leavingEl);
     fireDidEvents(enteringEl, leavingEl);
     return {

package/dist/esm/{index-eb12ef92.js → index-c14233e6.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers-c0b9ca37.js';
+import { c as componentOnReady } from './helpers-6f6a912f.js';
 import { b as printRequiredElementError } from './index-9b0d46f4.js';
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';