@ionic/core 9.0.9-nightly.20261021 → 9.0.10-dev.11792788258.1f71cfee

package/dist/collection/components/label/label.js

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 /**
@@ -58,13 +59,13 @@ export class Label {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '461604c1887f322dc13d7df3d5cdbb7ee1361117', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5415f57fc93a0b2b82b6d327a8e635876ca5cbf5', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
-                'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: 'a7005d0a217641278aa8e95144e8e4b9ae87a1c5' })));
+                'label-rtl': isRTL(this.el),
+            }) }, h("slot", { key: 'b6b65053228525c94a06c20abb0f03c659cdd7dc' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/menu/menu.js

@@ -11,7 +11,6 @@ import { printIonError } from "../../utils/logging/index";
 import { menuController } from "../../utils/menu-controller/index";
 import { BACKDROP, GESTURE, getPresentedOverlay } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
-import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
@@ -169,7 +168,7 @@ export class Menu {
          * of the split pane. If the split pane is
          * hidden then the menu should be too.
          */
-        const splitPane = this.el.closest('ion-split-pane');
+        const splitPane = this.getSplitPane();
         if (splitPane !== null) {
             this.isPaneVisible = await splitPane.isVisible();
         }
@@ -208,8 +207,8 @@ export class Menu {
         this.contentEl = undefined;
     }
     onSplitPaneChanged(ev) {
-        const closestSplitPane = this.el.closest('ion-split-pane');
-        if (closestSplitPane !== null && closestSplitPane === ev.target) {
+        const splitPane = this.getSplitPane();
+        if (splitPane !== null && splitPane === ev.target) {
             this.isPaneVisible = ev.detail.visible;
             this.updateState();
         }
@@ -407,6 +406,24 @@ export class Menu {
     _isActive() {
         return !this.disabled && !this.isPaneVisible;
     }
+    /**
+     * Returns the split pane this menu is a side pane of.
+     * A menu inside the split pane's main content, such as one
+     * in a page, is a regular menu. The menu doesn't need to be
+     * a direct child, since it can be wrapped in a component.
+     */
+    getSplitPane() {
+        const splitPane = this.el.closest('ion-split-pane');
+        const main = this.el.closest('.split-pane-main');
+        /**
+         * A split pane can be the main content of an outer split
+         * pane, so only this split pane's main content counts.
+         */
+        if (splitPane === null || (main !== null && main !== splitPane && splitPane.contains(main))) {
+            return null;
+        }
+        return splitPane;
+    }
     canSwipe() {
         return this.swipeGesture && !this.isAnimating && this._isActive();
     }
@@ -650,21 +667,21 @@ export class Menu {
         }
     }
     render() {
-        const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
+        const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
         const mode = getIonMode(this);
         /**
          * If the Close Watcher is enabled then
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '5cf26df26d4e539860cbeaea98ec621b98c3fcfc', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '7481c8a32a135fb0fd6d5591eecbf3fb0a8e8dde', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
-                'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: 'f337016e293bb8665c99762e0c389dd6c372bb33', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '4c3fe331aa42cd57d7ad9bd1f5910f8eeb62d7da' })), h("ion-backdrop", { key: '61af7ea876d81574841e1dd3e81e2352e555d096', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+                'split-pane-side': this.getSplitPane() !== null,
+            } }, h("div", { key: '8ac2f0f531db944a46e5fef016d0b18bd7b804cc', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '1ac3e13ccccf1adb7915b739fc794f2889b626ce' })), h("ion-backdrop", { key: 'f8becbf4de1a13feb57fb87973befecb88510bab', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/animations/ios.enter.js

@@ -3,6 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
+import { isRTL } from "../../../utils/rtl/index";
 import { calculateWindowAdjustment, getArrowDimensions, getElementCSSZoom, getPopoverDimensions, getPopoverPosition, getSafeAreaInsets, shouldShowArrow, } from "../utils";
 const POPOVER_IOS_BODY_PADDING = 5;
 /**
@@ -21,7 +22,7 @@ const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
 export const iosEnterAnimation = (baseEl, opts) => {
     const { event: ev, size, trigger, reference, side, align } = opts;
     const doc = baseEl.ownerDocument;
-    const isRTL = doc.dir === 'rtl';
+    const rtl = isRTL(baseEl);
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     const arrowEl = root.querySelector('.popover-arrow');
@@ -47,10 +48,10 @@ export const iosEnterAnimation = (baseEl, opts) => {
     const defaultPosition = {
         top: bodyHeight / 2 - contentHeight / 2,
         left: bodyWidth / 2 - contentWidth / 2,
-        originX: isRTL ? 'right' : 'left',
+        originX: rtl ? 'right' : 'left',
         originY: 'top',
     };
-    const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev, zoom);
+    const results = getPopoverPosition(rtl, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev, zoom);
     const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
     const rawSafeArea = getSafeAreaInsets(doc);
     const safeArea = size === 'cover'

package/dist/collection/components/popover/animations/md.enter.js

@@ -3,6 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
+import { isRTL } from "../../../utils/rtl/index";
 import { calculateWindowAdjustment, getElementCSSZoom, getPopoverDimensions, getPopoverPosition, getSafeAreaInsets, } from "../utils";
 const POPOVER_MD_BODY_PADDING = 12;
 /**
@@ -12,7 +13,7 @@ const POPOVER_MD_BODY_PADDING = 12;
 export const mdEnterAnimation = (baseEl, opts) => {
     const { event: ev, size, trigger, reference, side, align } = opts;
     const doc = baseEl.ownerDocument;
-    const isRTL = doc.dir === 'rtl';
+    const rtl = isRTL(baseEl);
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     /**
@@ -36,10 +37,10 @@ export const mdEnterAnimation = (baseEl, opts) => {
     const defaultPosition = {
         top: bodyHeight / 2 - contentHeight / 2,
         left: bodyWidth / 2 - contentWidth / 2,
-        originX: isRTL ? 'right' : 'left',
+        originX: rtl ? 'right' : 'left',
         originY: 'top',
     };
-    const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev, zoom);
+    const results = getPopoverPosition(rtl, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev, zoom);
     const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
     // MD mode now applies safe-area insets (previously passed 0, ignoring all safe areas).
     // This is needed for Android edge-to-edge (API 36+) where system bars overlap content.

package/dist/collection/components/popover/popover.js

@@ -9,6 +9,7 @@ import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { BACKDROP, cleanupRootFocusTrapAccessibility, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
+import { isRTL } from "../../utils/rtl/index";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { getIonMode } from "../../global/ionic-global";
@@ -34,6 +35,7 @@ export class Popover {
         this.lockController = createLockController();
         this.inline = false;
         this.focusDescendantOnPresent = false;
+        this.dirSetOnPresent = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -334,6 +336,15 @@ export class Popover {
         }
         const { el } = this;
         const { inline, delegate } = this.getDelegate(true);
+        /**
+         * When presented, ion-popover is hoisted from its place in the element
+         * hierarchy. Copy the current direction onto this element so that child
+         * elements can match.
+         */
+        if (!el.hasAttribute('dir')) {
+            el.setAttribute('dir', isRTL(el) ? 'rtl' : 'ltr');
+            this.dirSetOnPresent = true;
+        }
         /**
          * Emit ionMount so JS Frameworks have an opportunity
          * to add the child component to the DOM. The child
@@ -454,6 +465,10 @@ export class Popover {
              */
             const { delegate } = this.getDelegate();
             await detachComponent(delegate, this.usersElement);
+            if (this.dirSetOnPresent) {
+                this.el.removeAttribute('dir');
+                this.dirSetOnPresent = false;
+            }
         }
         unlock();
         return shouldDismiss;
@@ -481,7 +496,7 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, { key: 'b5e9c788f58397203976d5f8302dfb89e916efe1', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
+        return (h(Host, { key: '083f06f04d2c2657e510b471fba81cc459e0e878', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
@@ -492,7 +507,7 @@ export class Popover {
                 [`popover-side-${side}`]: true,
                 [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
                 'popover-nested': !!parentPopover,
-            }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && h("ion-backdrop", { key: 'f3977833c5b2c0087c286ee54363b478d69eb115', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1059893d6fd2932ca8adcdf8d45a5d66f4794727', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '24d7988bdd95882ad77fcaa7112aeda55878bee4', class: "popover-arrow", part: "arrow" }), h("div", { key: '4d6992e0a9d629f11763045f9199f9a77fa521ab', class: "popover-content", part: "content" }, h("slot", { key: 'b29747419620a01a6c34e9e846cd529b0b210145' })))));
+            }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && h("ion-backdrop", { key: 'afd9bfa3edfde061603acfc251eb8ac54c85ec6f', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '04314c9b510342f152027a6d62394b74d2888b88', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: 'e1bc715a4ca37012d109b512e2288c932485bf45', class: "popover-arrow", part: "arrow" }), h("div", { key: '5ab527ca65b483865954005239618de7daf2c621', class: "popover-content", part: "content" }, h("slot", { key: '4d3abb569347f6156d426f98b897e79ffd6b53bc' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -3,6 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
+import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
@@ -38,16 +39,16 @@ export class ProgressBar {
         this.buffer = 1;
     }
     render() {
-        const { color, type, reversed, value, buffer } = this;
+        const { color, type, reversed, value, buffer, el } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: 'd53d39a3e2c0198164a9face62d3775f357b6914', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: '0a5c76361cf8df0c294e0fb2477892e23ecebe38', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
-                'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
+                'progress-bar-reversed': isRTL(el) ? !reversed : reversed,
                 'progress-bar-solid': progressSolid,
             }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
     }
@@ -175,6 +176,7 @@ export class ProgressBar {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
 const renderIndeterminate = () => {
     return (h("div", { part: "track", class: "progress-buffer-bar" }, h("div", { class: "indeterminate-bar-primary" }, h("span", { part: "progress", class: "progress-indeterminate" })), h("div", { class: "indeterminate-bar-secondary" }, h("span", { part: "progress", class: "progress-indeterminate" }))));

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

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 export class ToolbarTitle {
@@ -23,11 +24,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: 'c5f0b913ff0a22d9bf02da48a313a613c2ac8fe7', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8d17feb9f9dcb9eb8e3b8ae6e831bdedb890771c', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
-                'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '5253b9e39fb764bfe1e57370719139f8a83e9904', class: "toolbar-title" }, h("slot", { key: 'e38b1eccb0175c36f8cab211aee7ce4d61fc9035' }))));
+                'title-rtl': isRTL(this.el),
+            }) }, h("div", { key: '0346aae3fca1e3ae443b1b511c44ab1f803cb103', class: "toolbar-title" }, h("slot", { key: 'e1945845df471d5eb8c3cdeb568c478abf5ad70e' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/helpers.js

@@ -324,8 +324,7 @@ export const pointerCoord = (ev) => {
  *
  * @param side The current side before being redefined based on the direction.
  * @param hostEl The component's host element. The direction is resolved from
- * it or its nearest ancestor that declares one. When omitted, the direction
- * is resolved from the document.
+ * it or its nearest ancestor that declares one, falling back to the document.
  */
 export const isEndSide = (side, hostEl) => {
     const rtl = isRTL(hostEl);

package/dist/collection/utils/input-shims/hacks/common.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { isRTL } from "../../rtl/index";
 const cloneMap = new WeakMap();
 export const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0, disabledClonedInput = false) => {
     if (cloneMap.has(componentEl) === shouldRelocate) {
@@ -59,9 +60,8 @@ const addClone = (componentEl, inputEl, inputRelativeY, disabledClonedInput = fa
      * Position the clone at the same horizontal offset as the native input
      * to prevent the placeholder from overlapping start slot content (e.g., icons).
      */
-    const doc = componentEl.ownerDocument;
-    const isRTL = doc.dir === 'rtl';
-    if (isRTL) {
+    const rtl = isRTL(componentEl);
+    if (rtl) {
         const parentWidth = parentEl.offsetWidth;
         const startOffset = parentWidth - inputEl.offsetLeft - inputEl.offsetWidth;
         clonedEl.style.insetInlineStart = `${startOffset}px`;
@@ -71,7 +71,7 @@ const addClone = (componentEl, inputEl, inputRelativeY, disabledClonedInput = fa
     }
     parentEl.appendChild(clonedEl);
     cloneMap.set(componentEl, clonedEl);
-    const tx = isRTL ? 9999 : -9999;
+    const tx = rtl ? 9999 : -9999;
     componentEl.style.pointerEvents = 'none';
     inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;
 };

package/dist/collection/utils/rtl/dir.js

@@ -22,5 +22,5 @@ export const isRTL = (hostEl) => {
             return false;
         }
     }
-    return document?.dir?.toLowerCase() === 'rtl';
+    return hostEl.ownerDocument?.dir?.toLowerCase() === 'rtl';
 };

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

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { isRTL } from "../rtl/index";
 import { createAnimation } from "../animation/animation";
 import { getIonPageElement } from "../transition";
 const DURATION = 540;
@@ -367,9 +368,9 @@ export const iosTransitionAnimation = (navEl, opts) => {
         const TRANSFORM = 'transform';
         const CENTER = '0%';
         const OFF_OPACITY = 0.8;
-        const isRTL = navEl.ownerDocument.dir === 'rtl';
-        const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';
-        const OFF_LEFT = isRTL ? '33%' : '-33%';
+        const rtl = isRTL(navEl);
+        const OFF_RIGHT = rtl ? '-99.5%' : '99.5%';
+        const OFF_LEFT = rtl ? '33%' : '-33%';
         const enteringEl = opts.enteringEl;
         const leavingEl = opts.leavingEl;
         const backDirection = opts.direction === 'back';
@@ -434,7 +435,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
             }
         }
         const enteringContentHasLargeTitle = enteringEl.querySelector('ion-header.header-collapse-condense');
-        const { forward, backward } = createLargeTitleTransition(rootAnimation, isRTL, backDirection, enteringEl, leavingEl);
+        const { forward, backward } = createLargeTitleTransition(rootAnimation, rtl, backDirection, enteringEl, leavingEl);
         enteringToolBarEls.forEach((enteringToolBarEl) => {
             const enteringToolBar = createAnimation();
             enteringToolBar.addElement(enteringToolBarEl);
@@ -498,7 +499,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
                     enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
                 }
                 else {
-                    enteringToolBarBg.fromTo('transform', isRTL ? 'translateX(-100%)' : 'translateX(100%)', 'translateX(0px)');
+                    enteringToolBarBg.fromTo('transform', rtl ? 'translateX(-100%)' : 'translateX(100%)', 'translateX(0px)');
                 }
                 // forward direction, entering page has a back button
                 if (!forward) {
@@ -508,7 +509,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
                     const enteringBackBtnText = createAnimation();
                     enteringBackBtnText
                         .addElement(shadow(backButtonEl).querySelector('.button-text')) // REVIEW
-                        .fromTo(`transform`, isRTL ? 'translateX(-100px)' : 'translateX(100px)', 'translateX(0px)');
+                        .fromTo(`transform`, rtl ? 'translateX(-100px)' : 'translateX(100px)', 'translateX(0px)');
                     enteringToolBar.addAnimation(enteringBackBtnText);
                 }
             }
@@ -531,7 +532,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
                 // leaving content, back direction
                 leavingContent
                     .beforeClearStyles([OPACITY])
-                    .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
+                    .fromTo('transform', `translateX(${CENTER})`, rtl ? 'translateX(-100%)' : 'translateX(100%)');
                 const leavingPage = getIonPageElement(leavingEl);
                 rootAnimation.afterAddWrite(() => {
                     if (rootAnimation.getDirection() === 'normal') {
@@ -611,10 +612,10 @@ export const iosTransitionAnimation = (navEl, opts) => {
                     if (!inactiveHeader) {
                         // leaving toolbar, back direction
                         leavingTitle
-                            .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)')
+                            .fromTo('transform', `translateX(${CENTER})`, rtl ? 'translateX(-100%)' : 'translateX(100%)')
                             .fromTo(OPACITY, 0.99, 0);
                     }
-                    leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
+                    leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, rtl ? 'translateX(-100%)' : 'translateX(100%)');
                     leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
                     // leaving toolbar, back direction, and there's no entering toolbar
                     // should just slide out, no fading out
@@ -623,13 +624,13 @@ export const iosTransitionAnimation = (navEl, opts) => {
                         leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
                     }
                     else {
-                        leavingToolBarBg.fromTo('transform', 'translateX(0px)', isRTL ? 'translateX(-100%)' : 'translateX(100%)');
+                        leavingToolBarBg.fromTo('transform', 'translateX(0px)', rtl ? 'translateX(-100%)' : 'translateX(100%)');
                     }
                     if (backButtonEl && !backward) {
                         const leavingBackBtnText = createAnimation();
                         leavingBackBtnText
                             .addElement(shadow(backButtonEl).querySelector('.button-text')) // REVIEW
-                            .fromTo('transform', `translateX(${CENTER})`, `translateX(${(isRTL ? -124 : 124) + 'px'})`);
+                            .fromTo('transform', `translateX(${CENTER})`, `translateX(${(rtl ? -124 : 124) + 'px'})`);
                         leavingToolBar.addAnimation(leavingBackBtnText);
                     }
                 }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-10-21T06:17:54",
+  "timestamp": "2026-10-23T20:45:55",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.45.2",

package/dist/esm/{animation-DmtJpz89.js → animation-C_V9lXzL.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { c as printIonError } from './index-BpRUsN_W.js';
-import { w as win } from './helpers-BJqKF1pr.js';
+import { w as win } from './helpers-p94IkmEA.js';
 
 let animationPrefix;
 const getAnimationPrefix = (el) => {

package/dist/esm/{attribute-controller-DPMIcbef.js → attribute-controller-ItNOXNp9.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { b as inheritAttributes, w as win, q as ariaAttributes } from './helpers-BJqKF1pr.js';
+import { b as inheritAttributes, w as win, q as ariaAttributes } from './helpers-p94IkmEA.js';
 
 /**
  * Copies a set of attributes off the host element so they can be applied to an element

package/dist/esm/{button-active-DVk40Sjl.js → button-active-rB-Ct9KZ.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as writeTask } from './index-BpRUsN_W.js';
-import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-WXfMCob9.js';
+import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-ES_sSPLn.js';
 import { createGesture } from './index-BmLuEdV7.js';
 
 const createButtonActiveGesture = (el, isButton) => {

package/dist/esm/{capacitor-CHJaJ9aX.js → capacitor-BY7l8HgR.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './helpers-BJqKF1pr.js';
+import { w as win } from './helpers-p94IkmEA.js';
 
 const getCapacitor = () => {
     if (win !== undefined) {

package/dist/esm/{dir-Dojwmvde.js → dir-Dj4J3LkD.js}

@@ -22,7 +22,7 @@ const isRTL = (hostEl) => {
             return false;
         }
     }
-    return document?.dir?.toLowerCase() === 'rtl';
+    return hostEl.ownerDocument?.dir?.toLowerCase() === 'rtl';
 };
 
 export { isRTL as i };

package/dist/esm/{framework-delegate-CDjM1vRH.js → framework-delegate-CW5_kWfc.js}

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

package/dist/esm/{haptic-WXfMCob9.js → haptic-ES_sSPLn.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { g as getCapacitor } from './capacitor-CHJaJ9aX.js';
+import { g as getCapacitor } from './capacitor-BY7l8HgR.js';
 
 var ImpactStyle;
 (function (ImpactStyle) {

package/dist/esm/{helpers-BJqKF1pr.js → helpers-p94IkmEA.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { c as printIonError } from './index-BpRUsN_W.js';
-import { i as isRTL } from './dir-Dojwmvde.js';
+import { i as isRTL } from './dir-Dj4J3LkD.js';
 
 const win = typeof window !== 'undefined' ? window : undefined;
 const doc = typeof document !== 'undefined' ? document : undefined;
@@ -321,8 +321,7 @@ const pointerCoord = (ev) => {
  *
  * @param side The current side before being redefined based on the direction.
  * @param hostEl The component's host element. The direction is resolved from
- * it or its nearest ancestor that declares one. When omitted, the direction
- * is resolved from the document.
+ * it or its nearest ancestor that declares one, falling back to the document.
  */
 const isEndSide = (side, hostEl) => {
     const rtl = isRTL(hostEl);

package/dist/esm/{index-TkLga3ma.js → index-CBkVO5D0.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers-BJqKF1pr.js';
+import { c as componentOnReady } from './helpers-p94IkmEA.js';
 import { t as printRequiredElementError } from './index-BpRUsN_W.js';
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';

package/dist/esm/{index-Clv8QC5L.js → index-DLDbwWW7.js}

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { n as doc, x as pointerCoord } from './helpers-BJqKF1pr.js';
+import { n as doc, x as pointerCoord } from './helpers-p94IkmEA.js';
 import './index-BpRUsN_W.js';
-import './dir-Dojwmvde.js';
+import './dir-Dj4J3LkD.js';
 
 const startTapClick = (config) => {
     if (doc === undefined) {

package/dist/esm/{index-DIouXecD.js → index-txcXIB3P.js}

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { n as doc, c as componentOnReady } from './helpers-BJqKF1pr.js';
-import { M as MENU_BACK_BUTTON_PRIORITY, q as addCloseWatcherCondition } from './overlays-DmDY-El7.js';
+import { n as doc, c as componentOnReady } from './helpers-p94IkmEA.js';
+import { M as MENU_BACK_BUTTON_PRIORITY, q as addCloseWatcherCondition } from './overlays-BBgMM61s.js';
 import { a as printIonWarning } from './index-BpRUsN_W.js';
 import { b as getIonMode } from './ionic-global-Cep6oYzK.js';
-import { c as createAnimation } from './animation-DmtJpz89.js';
+import { c as createAnimation } from './animation-C_V9lXzL.js';
 
 /**
  * baseAnimation

package/dist/esm/{index-z9vdZN7I.js → index-vgPixHgF.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { i as config, a as printIonWarning, w as writeTask, B as Build } from './index-BpRUsN_W.js';
-import { r as raf } from './helpers-BJqKF1pr.js';
+import { r as raf } from './helpers-p94IkmEA.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -118,8 +118,8 @@ const createFocusController = () => {
 };
 const LAST_FOCUS = 'ion-last-focus';
 
-const iosTransitionAnimation = () => import('./ios.transition-BkUGiDUz.js');
-const mdTransitionAnimation = () => import('./md.transition-B6hlrWjR.js');
+const iosTransitionAnimation = () => import('./ios.transition-CW92wRDL.js');
+const mdTransitionAnimation = () => import('./md.transition-yhfkYX1P.js');
 const focusController = createFocusController();
 // TODO(FW-2832): types
 /**

package/dist/esm/index.js

@@ -1,23 +1,23 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-export { c as createAnimation } from './animation-DmtJpz89.js';
-export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-z9vdZN7I.js';
-export { iosTransitionAnimation } from './ios.transition-BkUGiDUz.js';
-export { mdTransitionAnimation } from './md.transition-B6hlrWjR.js';
+export { c as createAnimation } from './animation-C_V9lXzL.js';
+export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-vgPixHgF.js';
+export { iosTransitionAnimation } from './ios.transition-CW92wRDL.js';
+export { mdTransitionAnimation } from './md.transition-yhfkYX1P.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
 export { createGesture } from './index-BmLuEdV7.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-Cep6oYzK.js';
-export { c as componentOnReady } from './helpers-BJqKF1pr.js';
+export { c as componentOnReady } from './helpers-p94IkmEA.js';
 export { L as LogLevel, c as printIonError, a as printIonWarning } from './index-BpRUsN_W.js';
 export { I as IonicSafeString } from './index-CK8uF0iB.js';
 export { g as getMode, s as setupConfig } from './config-DWCzVL3Y.js';
 export { o as openURL } from './theme-byZM6qHV.js';
-export { m as menuController } from './index-DIouXecD.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as popoverController, t as toastController } from './overlays-DmDY-El7.js';
+export { m as menuController } from './index-txcXIB3P.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as popoverController, t as toastController } from './overlays-BBgMM61s.js';
+import './dir-Dj4J3LkD.js';
 import './gesture-controller-B_gJaBk0.js';
-import './dir-Dojwmvde.js';
-import './framework-delegate-CDjM1vRH.js';
+import './framework-delegate-CW5_kWfc.js';
 
 const IonicSlides = (opts) => {
     const { swiper, extendParams } = opts;