voyager-ionic-core 8.8.6 → 8.8.10

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

@@ -28,6 +28,7 @@ export class Alert {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
         this.processedInputs = [];
         this.processedButtons = [];
+        this.isButtonGroupWrapped = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -152,6 +153,13 @@ export class Alert {
         this.processedButtons = buttons.map((btn) => {
             return typeof btn === 'string' ? { text: btn, role: btn.toLowerCase() === 'cancel' ? 'cancel' : undefined } : btn;
         });
+        /**
+         * Reset wrap state so the new button set can be re-evaluated. Without this,
+         * a previously-latched vertical layout would persist even if the new buttons
+         * fit horizontally.
+         */
+        this.isButtonGroupWrapped = false;
+        this.checkButtonGroupWrap();
     }
     inputsChanged() {
         const inputs = this.inputs;
@@ -192,6 +200,12 @@ export class Alert {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
+        /**
+         * If the alert was previously connected and is being reattached, the
+         * ResizeObserver was disconnected. componentDidLoad only fires once per
+         * instance, so re-establish the observer here on reconnect.
+         */
+        this.setupButtonGroupResizeObserver();
     }
     componentWillLoad() {
         var _a;
@@ -202,11 +216,14 @@ export class Alert {
         this.buttonsChanged();
     }
     disconnectedCallback() {
+        var _a;
         this.triggerController.removeClickListener();
         if (this.gesture) {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.buttonGroupResizeObserver = undefined;
     }
     componentDidLoad() {
         /**
@@ -219,6 +236,7 @@ export class Alert {
             this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl) => refEl.classList.contains('alert-button'));
             this.gesture.enable(true);
         }
+        this.setupButtonGroupResizeObserver();
         /**
          * If alert was rendered with isOpen="true"
          * then we should open alert immediately.
@@ -410,14 +428,58 @@ export class Alert {
             }
         })));
     }
+    setupButtonGroupResizeObserver() {
+        var _a;
+        /**
+         * Re-evaluate vertical layout when the button group resizes so a 2-button
+         * group with long text wraps cleanly instead of leaving a stray right-edge
+         * border on the first button.
+         */
+        if (!this.buttonGroupEl || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.buttonGroupResizeObserver = new ResizeObserver(() => this.checkButtonGroupWrap());
+        this.buttonGroupResizeObserver.observe(this.buttonGroupEl);
+        this.checkButtonGroupWrap();
+    }
+    checkButtonGroupWrap() {
+        /**
+         * Defer the layout read out of the ResizeObserver callback so we don't
+         * force synchronous layout and avoid "ResizeObserver loop" warnings when
+         * applying the vertical-layout class itself triggers another resize.
+         */
+        raf(() => {
+            /**
+             * Bail if the alert was disconnected after this raf was queued.
+             * `buttonGroupEl` persists across disconnect so the observer can be
+             * re-attached on reconnect; the observer reference is the disconnect
+             * sentinel.
+             */
+            if (!this.buttonGroupResizeObserver) {
+                return;
+            }
+            const groupEl = this.buttonGroupEl;
+            if (!groupEl) {
+                return;
+            }
+            const buttons = Array.from(groupEl.querySelectorAll('.alert-button'));
+            if (buttons.length < 2) {
+                this.isButtonGroupWrapped = false;
+                return;
+            }
+            const firstTop = buttons[0].offsetTop;
+            this.isButtonGroupWrapped = buttons.some((btn) => btn.offsetTop !== firstTop);
+        });
+    }
     renderAlertButtons() {
         const buttons = this.processedButtons;
         const mode = getIonMode(this);
         const alertButtonGroupClass = {
             'alert-button-group': true,
-            'alert-button-group-vertical': buttons.length > 2,
+            'alert-button-group-vertical': buttons.length > 2 || this.isButtonGroupWrapped,
         };
-        return (h("div", { class: alertButtonGroupClass }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && h("ion-ripple-effect", null))))));
+        return (h("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && h("ion-ripple-effect", null))))));
     }
     renderAlertMessage(msgId) {
         const { customHTMLEnabled, message } = this;
@@ -440,9 +502,9 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
+        return (h(Host, { key: '8d54ccd725ea634be080e67b56fa5efe498f496c', tabindex: "-1", 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: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), h("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '364057a69f25aa88904df17bdcf7e5bf714e7830', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (h("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
+            }, 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: '05a238583342285545587de9dce144a82d779193', tappable: this.backdropDismiss }), h("div", { key: 'e52c53fd9845e66781af01b2a788a291b45a927c', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '8417e52eebca24ff436fab0703666db51072f980', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '5c560d4800b24d41961423718108b54be6cd6f91', class: "alert-head" }, header && (h("h2", { key: '8637b64cd5125b2258115d1c11f3743113658608', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '7a4e61a02c29b16b336d8acaf6569b30de6fe71e', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '30844b6a0a7e3dab46514cd548ecffa86dcd59cb', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '39c824fee1e60ad8d6234c79d22ceb8bba8004af', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
@@ -851,6 +913,11 @@ export class Alert {
             }
         };
     }
+    static get states() {
+        return {
+            "isButtonGroupWrapped": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "didPresent",

package/dist/collection/components/content/content.css

@@ -116,7 +116,7 @@
   -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));
+  padding-bottom: calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom) + var(--internal-content-safe-area-padding-bottom, 0px));
   position: absolute;
   color: var(--color);
   box-sizing: border-box;

package/dist/collection/components/modal/modal.js

@@ -1088,12 +1088,12 @@ export class Modal {
         this.applyFullscreenSafeAreaTo(contentEl, hasFooter);
     }
     /**
-     * Sets --ion-content-safe-area-padding-bottom on the given ion-content
+     * Sets --internal-content-safe-area-padding-bottom on the given ion-content
      * when no footer is present, so ion-content's .inner-scroll includes
      * safe-area-bottom in its scroll padding. This keeps the modal background
      * edge-to-edge while ensuring content scrolls clear of the system nav bar.
      *
-     * --ion-content-safe-area-padding-bottom is an internal CSS property used
+     * --internal-content-safe-area-padding-bottom is an internal CSS property used
      * only by this code path. It is not part of ion-content's public API and
      * should not be set by consumers. The default of 0px makes it a no-op
      * when unset, which is the expected state for ion-content used outside of
@@ -1105,17 +1105,17 @@ export class Modal {
         // padding. Custom modals with raw HTML are developer-controlled.
         if (!contentEl || hasFooter)
             return;
-        contentEl.style.setProperty('--ion-content-safe-area-padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
+        contentEl.style.setProperty('--internal-content-safe-area-padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
     }
     /**
-     * Removes the internal --ion-content-safe-area-padding-bottom property
+     * Removes the internal --internal-content-safe-area-padding-bottom property
      * from an already-located ion-content. Callers do their own
      * findContentAndFooter() so they can also read hasFooter if needed.
      */
     clearContentSafeAreaPadding(contentEl) {
         if (!contentEl)
             return;
-        contentEl.style.removeProperty('--ion-content-safe-area-padding-bottom');
+        contentEl.style.removeProperty('--internal-content-safe-area-padding-bottom');
     }
     /**
      * Finds ion-content and ion-footer among direct children and one level of
@@ -1162,20 +1162,20 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '4bf38aa67df9a3f977163bba5423960bbafd16de', "no-router": true,
+        return (h(Host, Object.assign({ key: 'ab93657f4a5b4c97168d292b398d975e4b5b4af4', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '866da40cc5fc8d3e36637098fb3066a5bc9f4e0f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '5a2a05514ea8592c8feb0465e504aa7c7af17963', class: "modal-shadow" }), h("div", Object.assign({ key: '4d327115306451f57d190b06ab8cbb6191a6f1d7',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: '3f6c61ba60b063592784d76a9594073b3bf210a9',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'd1882835cc049232c0d957e3ba1e79676a07d179', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '7f66b4fdb3dec61a2b9aec4e9dbacf5d013d637c', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '81dc58b09cf7d7022b04cd170f53113604364d5e', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '2dfaaebe3d0b2a46be1224c25f9ab89bf1744332', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -2157,6 +2157,9 @@ export class Modal {
             }, {
                 "propName": "trigger",
                 "methodName": "triggerChanged"
+            }, {
+                "propName": "breakpoints",
+                "methodName": "breakpointsChanged"
             }];
     }
     static get listeners() {

package/dist/collection/components/picker-column-option/picker-column-option.md.css

@@ -86,6 +86,18 @@
   cursor: default;
 }
 
-:host(.option-active) {
+/**
+ * The active option is colored when either:
+ * - picker-column applies the `option-active` class (standalone ion-picker,
+ *   where the column lives in the light DOM), or
+ * - datetime sets `part="... active"` on the option. This is the reliable
+ *   value-based source of truth and keeps the option colored when the column
+ *   lives inside datetime's shadow DOM, where the class can be missed
+ *   (WebKit's elementsFromPoint is unreliable in a shadow root). 
+ *   TODO(FW-6594): Determine if this workaround can be removed when iOS 16 is
+ *   no longer supported.
+ */
+:host(.option-active),
+:host([part~=active]) {
   color: var(--ion-color-base);
 }

package/dist/collection/components/router/router.js

@@ -2,7 +2,7 @@ import { debounce } from "../../utils/helpers";
 import { printIonError, printIonWarning } from "../../utils/logging/index";
 import { ROUTER_INTENT_BACK, ROUTER_INTENT_FORWARD, ROUTER_INTENT_NONE } from "./utils/constants";
 import { printRedirects, printRoutes } from "./utils/debug";
-import { readNavState, waitUntilNavNode, writeNavState } from "./utils/dom";
+import { readNavState, scrollToFragment, waitUntilNavNode, writeNavState } from "./utils/dom";
 import { findChainForIDs, findChainForSegments, findRouteRedirect } from "./utils/matching";
 import { readRedirects, readRoutes } from "./utils/parser";
 import { chainToSegments, generatePath, parsePath, readSegments, writeSegments } from "./utils/path";
@@ -12,6 +12,7 @@ export class Router {
         this.busy = false;
         this.state = 0;
         this.lastState = 0;
+        this.fragmentScrollToken = 0;
         /**
          * The root path to use when matching URLs. By default, this is set to "/", but you can specify
          * an alternate prefix for all URL paths.
@@ -40,12 +41,17 @@ export class Router {
             if (typeof canProceed === 'object') {
                 const { redirect } = canProceed;
                 const path = parsePath(redirect);
-                this.setSegments(path.segments, ROUTER_INTENT_NONE, path.queryString);
-                await this.writeNavStateRoot(path.segments, ROUTER_INTENT_NONE);
+                this.setSegments(path.segments, ROUTER_INTENT_NONE, path.queryString, path.fragment);
+                const result = await this.writeNavStateRoot(path.segments, ROUTER_INTENT_NONE);
+                if (result) {
+                    this.maybeScrollToFragment();
+                }
             }
+            return;
         }
-        else {
-            await this.onRoutesChanged();
+        const result = await this.onRoutesChanged();
+        if (result) {
+            this.maybeScrollToFragment();
         }
     }
     componentDidLoad() {
@@ -64,7 +70,11 @@ export class Router {
                 return false;
             }
         }
-        return this.writeNavStateRoot(segments, direction);
+        const result = await this.writeNavStateRoot(segments, direction);
+        if (result) {
+            this.maybeScrollToFragment();
+        }
+        return result;
     }
     onBackButton(ev) {
         ev.detail.register(0, (processNextHandler) => {
@@ -98,7 +108,7 @@ export class Router {
             const currentPath = (_a = this.previousPath) !== null && _a !== void 0 ? _a : '/';
             // Convert currentPath to an URL by pre-pending a protocol and a host to resolve the relative path.
             const url = new URL(path, `https://host/${currentPath}`);
-            path = url.pathname + url.search;
+            path = url.pathname + url.search + url.hash;
         }
         let parsedPath = parsePath(path);
         const canProceed = await this.runGuards(parsedPath.segments);
@@ -110,8 +120,12 @@ export class Router {
                 return false;
             }
         }
-        this.setSegments(parsedPath.segments, direction, parsedPath.queryString);
-        return this.writeNavStateRoot(parsedPath.segments, direction, animation);
+        this.setSegments(parsedPath.segments, direction, parsedPath.queryString, parsedPath.fragment);
+        const result = await this.writeNavStateRoot(parsedPath.segments, direction, animation);
+        if (result) {
+            this.maybeScrollToFragment();
+        }
+        return result;
     }
     /** Go back to previous page in the window.history. */
     back() {
@@ -141,7 +155,12 @@ export class Router {
             printIonWarning('[ion-router] - Router could not match path because some required param is missing.');
             return false;
         }
-        this.setSegments(segments, direction);
+        // navChanged is an outlet-driven URL sync. Only keep the fragment when
+        // the path is unchanged; on a real navigation it refers to an anchor on
+        // the page being left and would be stale.
+        const newPath = generatePath(segments);
+        const fragment = newPath === this.previousPath ? this.getFragment() : undefined;
+        this.setSegments(segments, direction, undefined, fragment);
         await this.safeWriteNavState(outlet, chain, ROUTER_INTENT_NONE, segments, null, ids.length);
         return true;
     }
@@ -184,8 +203,8 @@ export class Router {
         const redirect = findRouteRedirect(segments, redirects);
         let redirectFrom = null;
         if (redirect) {
-            const { segments: toSegments, queryString } = redirect.to;
-            this.setSegments(toSegments, direction, queryString);
+            const { segments: toSegments, queryString, fragment } = redirect.to;
+            this.setSegments(toSegments, direction, queryString, fragment);
             redirectFrom = redirect.from;
             segments = toSegments;
         }
@@ -265,13 +284,35 @@ export class Router {
         }
         return changed;
     }
-    setSegments(segments, direction, queryString) {
+    setSegments(segments, direction, queryString, fragment) {
         this.state++;
-        writeSegments(window.history, this.root, this.useHash, segments, direction, this.state, queryString);
+        // Every URL write invalidates any in-flight fragment scroll: a newer nav
+        // (with or without a fragment, successful or not) should always supersede.
+        this.fragmentScrollToken++;
+        writeSegments(window.history, this.root, this.useHash, segments, direction, this.state, queryString, fragment);
     }
     getSegments() {
         return readSegments(window.location, this.root, this.useHash);
     }
+    getFragment() {
+        // In hash mode the URL fragment trails a second `#` (e.g. `#/path#anchor`);
+        // parse the routing portion to extract it.
+        const raw = this.useHash ? parsePath(window.location.hash.slice(1)).fragment : window.location.hash.slice(1);
+        return raw ? raw : undefined;
+    }
+    /**
+     * Fires a best-effort scroll to the current URL fragment. The scroll bails
+     * if a newer `setSegments` advances `fragmentScrollToken` mid-flight.
+     */
+    maybeScrollToFragment() {
+        const fragment = this.getFragment();
+        if (!fragment)
+            return;
+        const token = this.fragmentScrollToken;
+        // Fire-and-forget; the returned promise resolves only after the scroll
+        // animation completes, which the caller does not need to await.
+        scrollToFragment(fragment, () => token === this.fragmentScrollToken).catch(() => { });
+    }
     routeChangeEvent(toSegments, redirectFromSegments) {
         const from = this.previousPath;
         const to = generatePath(toSegments);

package/dist/collection/components/router/utils/dom.js

@@ -1,7 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { componentOnReady } from "../../../utils/helpers";
+import { findClosestIonContent, getScrollElement, isIonContent } from "../../../utils/content/index";
+import { componentOnReady, raf } from "../../../utils/helpers";
 import { printIonError } from "../../../utils/logging/index";
 import { ROUTER_INTENT_NONE } from "./constants";
 /**
@@ -66,6 +67,118 @@ export const readNavState = async (root) => {
     }
     return { ids, outlet };
 };
+/** Max animation frames `scrollToFragment` polls while waiting for the target to mount. */
+const FRAGMENT_POLL_FRAMES = 30;
+/** Duration (ms) of the smooth-scroll animation that lands on the fragment target. */
+const FRAGMENT_SCROLL_DURATION = 300;
+const nextFrame = () => new Promise((resolve) => raf(() => resolve()));
+/**
+ * Returns true when `el` lives inside an active `.ion-page`. `ion-page-hidden`
+ * marks nav back-stack entries; `tab-hidden` marks inactive `ion-tab` elements.
+ * Either class on the page's ancestor chain disqualifies it. When no `.ion-page`
+ * exists in the document at all (non-router pages), the candidate is accepted
+ * so plain anchors still work.
+ */
+const isInActivePage = (el) => {
+    const page = el.closest('.ion-page');
+    if (page === null) {
+        return document.querySelector('.ion-page') === null;
+    }
+    return page.closest('.ion-page-hidden, .tab-hidden') === null;
+};
+/**
+ * Polls across animation frames for an element matching `fragment` that lives
+ * in the active page. Scoping by "last `.ion-page:not(.ion-page-hidden)`" is
+ * unreliable: inactive `ion-tab` siblings carry `.ion-page` (gated by
+ * `.tab-hidden`, not `.ion-page-hidden`) and can be ordered after the leaf.
+ * Instead, locate candidates globally and walk them from last to first,
+ * accepting the deepest one whose `.ion-page` ancestor is not hidden. The
+ * last-to-first order preserves leaf-most preference for nested outlets.
+ */
+const findFragmentTarget = async (fragment, shouldContinue) => {
+    // CSS.escape is unavailable on very old WebViews; the fallback path uses
+    // `getElementById` and drops the legacy `<a name>` branch.
+    const canEscape = typeof CSS !== 'undefined' && typeof CSS.escape === 'function';
+    const escaped = canEscape ? CSS.escape(fragment) : null;
+    for (let i = 0; i < FRAGMENT_POLL_FRAMES; i++) {
+        if (!shouldContinue())
+            return null;
+        let candidates = [];
+        if (escaped !== null) {
+            try {
+                candidates = [...document.querySelectorAll(`#${escaped}, a[name="${escaped}"]`)];
+            }
+            catch (_a) {
+                candidates = [...document.querySelectorAll(`#${escaped}`)];
+            }
+        }
+        else {
+            const byId = document.getElementById(fragment);
+            if (byId !== null)
+                candidates = [byId];
+        }
+        for (let j = candidates.length - 1; j >= 0; j--) {
+            if (isInActivePage(candidates[j])) {
+                return candidates[j];
+            }
+        }
+        await nextFrame();
+    }
+    return null;
+};
+/**
+ * Scrolls to the element whose id matches `fragment`, falling back to a legacy
+ * `<a name="...">` target. When the target lives inside an `ion-content`, the
+ * scroll uses its smooth-animated scroll API; otherwise it falls back to
+ * `Element.scrollIntoView`.
+ *
+ * `shouldContinue` lets callers cancel in-flight scrolls when a newer
+ * navigation supersedes this one. It is checked between async steps.
+ */
+export const scrollToFragment = async (fragment, shouldContinue = () => true) => {
+    if (fragment == null || fragment === '') {
+        return false;
+    }
+    // URL fragments are percent-encoded but element ids are not; decode for
+    // matching per the HTML spec's indicated-element resolution.
+    let decoded;
+    try {
+        decoded = decodeURIComponent(fragment);
+    }
+    catch (_a) {
+        decoded = fragment;
+    }
+    const target = await findFragmentTarget(decoded, shouldContinue);
+    if (!target || !shouldContinue()) {
+        return false;
+    }
+    // Best-effort scroll: swallow exceptions if the page tears down mid-animation.
+    try {
+        const contentHost = findClosestIonContent(target);
+        if (contentHost && isIonContent(contentHost)) {
+            const content = contentHost;
+            const scrollEl = await getScrollElement(content);
+            // Yield one frame so the newly mounted target's layout is stable
+            // before we measure its rect.
+            await nextFrame();
+            if (!shouldContinue())
+                return false;
+            const targetRect = target.getBoundingClientRect();
+            const scrollRect = scrollEl.getBoundingClientRect();
+            const top = targetRect.top - scrollRect.top + scrollEl.scrollTop;
+            // Preserve scrollLeft so RTL and horizontally-scrolling pages aren't reset.
+            await content.scrollToPoint(scrollEl.scrollLeft, top, FRAGMENT_SCROLL_DURATION);
+        }
+        else {
+            target.scrollIntoView({ behavior: 'smooth' });
+        }
+        return true;
+    }
+    catch (e) {
+        printIonError('[ion-router] - Exception in scrollToFragment:', e);
+        return false;
+    }
+};
 export const waitUntilNavNode = () => {
     if (searchNavNode(document.body)) {
         return Promise.resolve();

package/dist/collection/components/router/utils/path.js

@@ -7,7 +7,7 @@ export const generatePath = (segments) => {
     const path = segments.filter((s) => s.length > 0).join('/');
     return '/' + path;
 };
-const generateUrl = (segments, useHash, queryString) => {
+const generateUrl = (segments, useHash, queryString, fragment) => {
     let url = generatePath(segments);
     if (useHash) {
         url = '#' + url;
@@ -15,10 +15,13 @@ const generateUrl = (segments, useHash, queryString) => {
     if (queryString !== undefined) {
         url += '?' + queryString;
     }
+    if (fragment !== undefined) {
+        url += '#' + fragment;
+    }
     return url;
 };
-export const writeSegments = (history, root, useHash, segments, direction, state, queryString) => {
-    const url = generateUrl([...parsePath(root).segments, ...segments], useHash, queryString);
+export const writeSegments = (history, root, useHash, segments, direction, state, queryString, fragment) => {
+    const url = generateUrl([...parsePath(root).segments, ...segments], useHash, queryString, fragment);
     if (direction === ROUTER_INTENT_FORWARD) {
         history.pushState(state, '', url);
     }
@@ -85,12 +88,21 @@ export const readSegments = (loc, root, useHash) => {
 /**
  * Parses the path to:
  * - segments an array of '/' separated parts,
- * - queryString (undefined when no query string).
+ * - queryString (undefined when no query string),
+ * - fragment (undefined when no `#`).
  */
 export const parsePath = (path) => {
     let segments = [''];
     let queryString;
+    let fragment;
     if (path != null) {
+        // The fragment ("#") starts a section that runs to the end of the URL.
+        // Anything inside it (including "?") is part of the fragment per RFC 3986.
+        const fragStart = path.indexOf('#');
+        if (fragStart > -1) {
+            fragment = path.substring(fragStart + 1);
+            path = path.substring(0, fragStart);
+        }
         const qsStart = path.indexOf('?');
         if (qsStart > -1) {
             queryString = path.substring(qsStart + 1);
@@ -104,5 +116,5 @@ export const parsePath = (path) => {
             segments = [''];
         }
     }
-    return { segments, queryString };
+    return { segments, queryString, fragment };
 };

package/dist/collection/components/split-pane/split-pane.js

@@ -206,7 +206,7 @@ export class SplitPane {
                 "setter": false,
                 "reflect": false,
                 "attribute": "when",
-                "defaultValue": "QUERY['lg']"
+                "defaultValue": "'(min-width: 992px)'"
             }
         };
     }

package/dist/collection/utils/input-shims/hacks/scroll-assist.js

@@ -3,7 +3,6 @@
  */
 import { win } from "../../browser/index";
 import { getScrollElement, scrollByPoint } from "../../content";
-import { raf } from "../../helpers";
 import { KeyboardResize } from "../../native/keyboard";
 import { relocateInput, SCROLL_AMOUNT_PADDING } from "./common";
 import { getScrollData } from "./scroll-data";
@@ -193,12 +192,6 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
     // at this point the native text input still does not have focus
     relocateInput(componentEl, inputEl, true, scrollData.inputSafeY, disableClonedInput);
     setManualFocus(inputEl);
-    /**
-     * Relocating/Focusing input causes the
-     * click event to be cancelled, so
-     * manually fire one here.
-     */
-    raf(() => componentEl.click());
     /**
      * If enabled, we can add scroll padding to
      * the bottom of the content so that scroll assist

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2026-05-07T03:54:05",
+  "timestamp": "2026-06-12T22:12:03",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.0",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "components": [
@@ -33097,10 +33097,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "QUERY['lg']"
+              "text": "'(min-width: 992px)'"
             }
           ],
-          "default": "QUERY['lg']",
+          "default": "'(min-width: 992px)'",
           "values": [
             {
               "type": "boolean"

package/dist/esm/{animation-CnGMT4ji.js → animation-DLJpuoEz.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { j as printIonError } from './index-IGIE5vDm.js';
+import { j as printIonError } from './index-tcQvqkiX.js';
 import { w as win } from './index-ZjP4CjeZ.js';
 
 let animationPrefix;

package/dist/esm/{app-globals-DhZjtldk.js → app-globals-D0C5S4hU.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-DfbeLwcV.js';
+import { i as initialize } from './ionic-global-Cp_eT4sZ.js';
 
 const appGlobalScript = initialize || (() => {});
 const globalScripts = appGlobalScript;

package/dist/esm/{button-active-BBx21brx.js → button-active-BSpTQmS9.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-IGIE5vDm.js';
+import { w as writeTask } from './index-tcQvqkiX.js';
 import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-DzAMWJuk.js';
 import { createGesture } from './index-CfgBF1SE.js';