voyager-ionic-core 8.8.8 → 8.8.12

package/dist/cjs/{notch-controller-sD-lTpdc.js → notch-controller-18PzRGXd.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 var index = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-CxTYJdbT.js');
+var helpers = require('./helpers-Cv23MFHM.js');
 
 /**
  * A utility to calculate the size of an outline notch

package/dist/cjs/{overlays-C2jiBSNQ.js → overlays-TbKsuC-K.js}

@@ -4,11 +4,11 @@
 'use strict';
 
 var index$1 = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-CxTYJdbT.js');
-var hardwareBackButton = require('./hardware-back-button-C4rMJ5uI.js');
-var index = require('./index-CqT-2gKy.js');
-var ionicGlobal = require('./ionic-global-Bc3kJi1Z.js');
-var frameworkDelegate = require('./framework-delegate-CRgp8o_p.js');
+var helpers = require('./helpers-Cv23MFHM.js');
+var hardwareBackButton = require('./hardware-back-button-iUuF_76h.js');
+var index = require('./index-Ct7gcRif.js');
+var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
+var frameworkDelegate = require('./framework-delegate-BtICZDHr.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 
 /**

package/dist/cjs/{status-tap-CCJk5VgT.js → status-tap-BXX8H8_Y.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-CqT-2gKy.js');
-var index$1 = require('./index-MbaBbWXk.js');
-var helpers = require('./helpers-CxTYJdbT.js');
+var index = require('./index-Ct7gcRif.js');
+var index$1 = require('./index-CIrkNXqJ.js');
+var helpers = require('./helpers-Cv23MFHM.js');
 
 const startStatusTap = () => {
     const win = window;

package/dist/cjs/{swipe-back-CCpyQb6R.js → swipe-back-CCMaNiP2.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var helpers = require('./helpers-CxTYJdbT.js');
+var helpers = require('./helpers-Cv23MFHM.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var index = require('./index-CAvQ7Tka.js');
-require('./index-CqT-2gKy.js');
+require('./index-Ct7gcRif.js');
 require('./gesture-controller-dtqlP_q4.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/collection/collection-manifest.json

@@ -98,9 +98,10 @@
     "components/toggle/toggle.js",
     "components/toolbar/toolbar.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.0",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [

package/dist/collection/components/input-otp/input-otp.js

@@ -620,7 +620,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (h(Host, { key: '5c1386ae6b8038ec33ca94fd818c9353b1b37f75', class: createColorClasses(color, {
+        return (h(Host, { key: 'ffeec6d07b5d3cd375b72d4c9f4fe755d80ac094', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -628,10 +628,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: '9a19129688e55095f8386826c73ef3f9744becff', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '7853819c3610c4691191f1836b947bf4ec17939d', class: {
+            }) }, h("div", Object.assign({ key: 'f42471e4ed8054f07162a52b42a0ca49c3d57bb0', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: 'b06461605b2404476b856785b7116e18b4dbaeaa', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: 'f4674d47d3d3991f21a0a79321ebc323968071dc' }))));
+            } }, h("slot", { key: '5bf9e7dc365f6caf0d4b13ae26e5559cdbbd162c' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }

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

@@ -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: 'd6a271ace939c33703966a1425ab32b7a30bf246', "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: '51e29823c1444059edc1299e2f8509dda4c39008', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '4292a849e82b83570b18b95e3cbdf05af0a4e170', class: "modal-shadow" }), h("div", Object.assign({ key: 'd3131150733c13cd6658545207e4ab49094672b7',
+            }, 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: '3da13bff87602c8c0aa8e3db54375b40d96d3b83', 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: '73b22a4eb7ca2e499b9f843b66751a1dbfef69a9', 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/searchbar/searchbar.js

@@ -243,12 +243,14 @@ export class Searchbar {
         }, 300);
     }
     disconnectedCallback() {
+        var _a;
         if (this.loadTimeout) {
             clearTimeout(this.loadTimeout);
         }
         if (this.clearTimeout) {
             clearTimeout(this.clearTimeout);
         }
+        (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     emitStyle() {
         this.ionStyle.emit({
@@ -346,6 +348,7 @@ export class Searchbar {
             doc.body.appendChild(tempSpan);
             // Get the width of the span then remove it
             raf(() => {
+                var _a, _b;
                 const textWidth = tempSpan.offsetWidth;
                 tempSpan.remove();
                 // Calculate the input padding
@@ -357,7 +360,25 @@ export class Searchbar {
                  * such as Dynamic Type on iOS as well as 8px
                  * of padding.
                  */
-                const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconEl.clientWidth + 8) + 'px)';
+                const iconWidth = iconEl.clientWidth;
+                /**
+                 * Fix for https://github.com/ionic-team/ionic-framework/issues/30434:
+                 * iconEl.clientWidth can very briefly be 0 when this is called from componentDidLoad.
+                 * If it is zero, set up a ResizeObserver and call this function when it observes a width greater than 0.
+                 */
+                if (iconWidth === 0) {
+                    (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                    this.searchIconResizeObserver = new ResizeObserver((entries) => {
+                        var _a;
+                        if (entries[0].contentRect.width > 0) {
+                            (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                            this.positionPlaceholder();
+                        }
+                    });
+                    (_b = this.searchIconResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(iconEl);
+                    return;
+                }
+                const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconWidth + 8) + 'px)';
                 // Set the input padding start and icon margin start
                 if (rtl) {
                     inputEl.style.paddingRight = inputLeft;
@@ -438,8 +459,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '9e9f3a7f6ee66140181f8c3cfa42bbeee75adafc', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '5f83fbcc0708830637815e8c0b69356cad381870', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '219c263c1f3cc63e18bc2d2ba5d672b7806eddd0', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '226b7a676b4819cda4062b8334fa8d4c4cee6f1a', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '89adb4efa17a78c973bbd5527cfac91d99ceb9bb', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '237dd767403dba3cb3d7de8905996e275669da3b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -449,14 +470,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '3f1c25442d6d87c0df67f79482a925b80dcc403d', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'a386fecafda0fab449ea1488906ba6cfc55e2b5c', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '5f81642628335def39a14f0726e0fafdc7203776', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'da3073646f2d7f639261b556517fbadabc3c10e9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '5b4bdf7280bea710304b6975e76390fe6ceb7417', class: "searchbar-input-container" }, h("input", Object.assign({ key: '01a0820a2cf904aec1c7d84b542ab7918d435632', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: 'cd64973206b1cc59d221112861733b7ee25f0323', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '2061fa8449bbc576cf8c5130ea613378ea492944', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '065cd6c707ae462c0767df1bab04ce8045f340a4', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '00df6f7742bff70b1b088d544b8c00e962e7216c', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

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/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2026-06-01T03:46:08",
+  "timestamp": "2026-06-28T16:23:29",
   "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';
 

package/dist/esm/{config-TO1rZH52.js → config-DQCONYYp.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';
 
 /**
  * Does a simple sanitization of all elements

package/dist/esm/{data-B9iGR5YO.js → data-DZI70dKr.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { f as printIonWarning } from './index-IGIE5vDm.js';
+import { f as printIonWarning } from './index-tcQvqkiX.js';
 
 /**
  * Returns true if the selected day is equal to the reference day