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

package/dist/types/utils/helpers.d.ts

@@ -113,10 +113,9 @@ export declare const pointerCoord: (ev: any) => {
  *
  * @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 declare const isEndSide: (side: Side, hostEl?: HTMLElement) => boolean;
+export declare const isEndSide: (side: Side, hostEl: HTMLElement) => boolean;
 export declare const deferEvent: (event: EventEmitter) => EventEmitter;
 export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
 export declare const debounce: (func: (...args: any[]) => void, wait?: number) => (...args: any[]) => any;

package/dist/types/utils/rtl/dir.d.ts

@@ -9,4 +9,4 @@
  *
  * @param hostEl the element to resolve the direction for.
  */
-export declare const isRTL: (hostEl?: Element | null) => boolean;
+export declare const isRTL: (hostEl: Element) => boolean;

package/hydrate/index.js

@@ -6002,7 +6002,7 @@ const isRTL$1 = (hostEl) => {
             return false;
         }
     }
-    return document?.dir?.toLowerCase() === 'rtl';
+    return hostEl.ownerDocument?.dir?.toLowerCase() === 'rtl';
 };
 
 const transitionEndAsync = (el, expectedDuration = 0) => {
@@ -6304,8 +6304,7 @@ const assert = (actual, reason) => {
  *
  * @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$1(hostEl);
@@ -11285,6 +11284,14 @@ class Alert {
          * the alert dismisses. You will need to do that in your code.
          */
         this.isOpen = false;
+        /**
+         * Prevent Enter from toggling the checkbox, which only Space should do.
+         */
+        this.onCheckboxKeydown = (ev) => {
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+            }
+        };
         this.onBackdropTap = () => {
             this.dismiss(undefined, BACKDROP);
         };
@@ -11312,14 +11319,6 @@ class Alert {
     }
     onKeydown(ev) {
         const inputTypes = new Set(this.processedInputs.map((i) => i.type));
-        /**
-         * Based on keyboard navigation requirements, the
-         * checkbox should not respond to the enter keydown event.
-         */
-        if (inputTypes.has('checkbox') && ev.key === 'Enter') {
-            ev.preventDefault();
-            return;
-        }
         /**
          * Ensure when alert container is being focused, and the user presses the tab + shift keys, the focus will be set to the last alert button.
          */
@@ -11629,7 +11628,7 @@ class Alert {
             };
             const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox');
             const defaultJustify = getOverlayLabelJustify(mode, 'checkbox');
-            return (hAsync("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: {
+            return (hAsync("button", { type: "button", onClick: () => this.cbClick(i), onKeyDown: this.onCheckboxKeydown, "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: {
                     ...getClassMap(i.cssClass),
                     'alert-tappable': true,
                     'alert-checkbox': true,
@@ -11779,14 +11778,14 @@ class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, { key: '083b5250dc4c76e85240e0225abcb7ca2b66de2f', tabindex: "-1", style: {
+        return (hAsync(Host, { key: '5d0b4ff618d956178aa5a1cd869f9ed28dc629ee', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
                 [mode]: true,
                 'overlay-hidden': true,
                 'alert-translucent': this.translucent,
-            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '65c92a956d998ae9016396dd2a29c42ab7376d0e', tappable: this.backdropDismiss }), hAsync("div", { key: 'f2288fa0b7ef9d0bf031c168fe78c48422cf91c8', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'dbb109435c378f77c6b0231e58756f8a0467732d', 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 }, hAsync("div", { key: '075597f94719673cf1f894a8566e1036849afa75', class: "alert-head" }, header && (hAsync("h2", { key: 'f96f4b1db8473c62040beed6e96108c733978d73', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: 'dbd824ef19a07bddde4eb928f11de7c7cadf98b8', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '4774fa13700dd23aec7930492acae80de3bdf5d1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '5c728b7457e231f64294bbec821bdb547c6437dd', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '77ed27df27261f6784d7f7858da88c58d3f21ea3', tappable: this.backdropDismiss }), hAsync("div", { key: '0f7c74fd5368f215075a3cb8f2dcb0908953e274', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '67b88fc531ce9232e7ec7188722bfd8991689dad', 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 }, hAsync("div", { key: 'e3d63359996f815c33aad28cf1dc0afbfbe6d6b1', class: "alert-head" }, header && (hAsync("h2", { key: 'd7675c3948806229429c698b3b4aef47afe8421d', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: 'd87035599cf1c30a2ddf85cd5ea3618ce64ec749', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'bf1d4fdecf73a9ed838bb4202e2d33bd36bd07b3', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'a843f27506320d9136c0fd3346473a52328477c7', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13932,27 +13931,28 @@ class Col {
             [modifier]: amount,
         };
     }
-    calculateOffset(isRTL) {
-        return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
+    calculateOffset(rtl) {
+        return this.calculatePosition('offset', rtl ? 'margin-right' : 'margin-left');
     }
-    calculatePull(isRTL) {
-        return this.calculatePosition('pull', isRTL ? 'left' : 'right');
+    calculatePull(rtl) {
+        return this.calculatePosition('pull', rtl ? 'left' : 'right');
     }
-    calculatePush(isRTL) {
-        return this.calculatePosition('push', isRTL ? 'right' : 'left');
+    calculatePush(rtl) {
+        return this.calculatePosition('push', rtl ? 'right' : 'left');
     }
     render() {
-        const isRTL = document.dir === 'rtl';
+        const rtl = isRTL$1(this.el);
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'e12293a4315cb474bbde73421dd0b4129f1df1cc', class: {
+        return (hAsync(Host, { key: '98f3c88ee5408120539e3daf097982dea1b4842a', class: {
                 [mode]: true,
             }, style: {
-                ...this.calculateOffset(isRTL),
-                ...this.calculatePull(isRTL),
-                ...this.calculatePush(isRTL),
+                ...this.calculateOffset(rtl),
+                ...this.calculatePull(rtl),
+                ...this.calculatePush(rtl),
                 ...this.calculateSize(),
-            } }, hAsync("slot", { key: '869317ea6574111a57a7a9d096c53d264c335d28' })));
+            } }, hAsync("slot", { key: '14e2f0c30bc3fea9aa9683e3bd4ed5dd4a3be05c' })));
     }
+    get el() { return getElement(this); }
     static get style() { return colCss(); }
     static get cmpMeta() { return {
         "$flags$": 265,
@@ -17988,13 +17988,12 @@ class Datetime {
         const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
         const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
-        // don't use the inheritAttributes util because it removes dir from the host, and we still need that
-        const hostDir = this.el.getAttribute('dir') || undefined;
+        const hostDir = isRTL$1(this.el) ? 'rtl' : 'ltr';
         return (hAsync("div", { class: "calendar-header", part: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("button", { class: {
                 'calendar-month-year-toggle': true,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, hAsync("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && hAsync("ion-ripple-effect", null))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth(), part: "navigation-button previous-button" }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth(), part: "navigation-button next-button" }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true", part: "calendar-days-of-week" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, hAsync("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && hAsync("ion-ripple-effect", null))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth(), part: "navigation-button previous-button" }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth(), part: "navigation-button next-button" }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true", part: "calendar-days-of-week" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return hAsync("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -18311,7 +18310,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: 'e9b99bb5610fc7fe879200a56dcc865c6e2f1404', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+        return (hAsync(Host, { key: '465c9c22bccabc4a82ea4054c536c6086b85ddf9', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
                 ...createColorClasses$1(color, {
                     [mode]: true,
                     ['datetime-readonly']: readonly,
@@ -18323,7 +18322,7 @@ class Datetime {
                     [`datetime-prefer-wheel`]: hasWheelVariant,
                     [`datetime-grid`]: isGridStyle,
                 }),
-            } }, hAsync("div", { key: 'a5e61be2989468dc24ec8fb394116d9339b7824c', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            } }, hAsync("div", { key: '9732b003440a0ca23520bc8a09e73125d88fd565', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22461,7 +22460,7 @@ class Item {
         return controls[0];
     }
     render() {
-        const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection, multipleInputs, } = this;
+        const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection, multipleInputs, el, } = this;
         const inheritedAriaAttributes = this.ariaController?.attributes ?? {};
         const childStyles = {};
         const mode = getIonMode$1(this);
@@ -22538,7 +22537,7 @@ class Item {
          * multi-input item, and in a clickable item, which is a second tab stop.
          */
         const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
-        return (hAsync(Host, { key: '7fe924642310c19f057ae1bfa29c1acdf5cc7ed6', "aria-disabled": ariaDisabled, class: {
+        return (hAsync(Host, { key: 'dedd4fbc4f9e4db557c6f8bd91299778af9aba1c', "aria-disabled": ariaDisabled, class: {
                 ...childStyles,
                 ...labelColorStyles,
                 ...createColorClasses$1(this.color, {
@@ -22553,9 +22552,9 @@ class Item {
                     'item-focus-indicator-room': slottedIndicatorNeedsRoom,
                     'ion-activatable': canActivate,
                     'ion-focusable': this.focusable,
-                    'item-rtl': document.dir === 'rtl',
+                    'item-rtl': isRTL$1(el),
                 }),
-            }, role: inList ? 'listitem' : null }, hAsync(TagType, { key: '8fddfb2a076b4b98e45ee8b23579d011dba12acb', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, hAsync("slot", { key: '7f888b62b2023cf501fd308e32629e7a291c2d05', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), hAsync("div", { key: '6d5cdde307caa65b131edb65cb0a5f8294cf151c', class: "item-inner", part: "inner" }, hAsync("div", { key: '9fbfffdff4cf51adf1f02d573953cf8b145574b0', class: "input-wrapper", part: "container" }, hAsync("slot", { key: '574c7e61cdaa3959a28bad7353105ef217a76ed9', onSlotchange: this.updateInteractivityOnSlotChange })), hAsync("slot", { key: 'ed7e211960cd65ed17f865a6d50d5bdde069416b', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (hAsync("ion-icon", { key: '2847bb21f42e9d5ab8ea86262b2bc1c3b3f7c902', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && hAsync("ion-ripple-effect", { key: '55502ef394db0953144387fa3baebf9fa6a976a9' }))));
+            }, role: inList ? 'listitem' : null }, hAsync(TagType, { key: '949000f555bbc8b76a227d84a2442defc3577a4e', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, hAsync("slot", { key: '9fde070c0f830cfed9c7e25ea4d1f1d7ab710d07', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), hAsync("div", { key: 'd7ab19b4d7e5d4a7fec2d66e1cb865ff30c609f0', class: "item-inner", part: "inner" }, hAsync("div", { key: 'fdf3f306b98ab6af536e320341985fb34d50ef35', class: "input-wrapper", part: "container" }, hAsync("slot", { key: '06ecb3817c2bdf171f806e2b3e8701d3eb52897e', onSlotchange: this.updateInteractivityOnSlotChange })), hAsync("slot", { key: '7e401db776cd19b0399004e77920b23e526c551a', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (hAsync("ion-icon", { key: '1dac0a6d5a1ce811731fd5b81b92440de8725989', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && hAsync("ion-ripple-effect", { key: '7a782fa9c7e74e600191c41c7dd90a4a499de64e' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22782,8 +22781,8 @@ class ItemOptions {
     }
     render() {
         const mode = getIonMode$1(this);
-        const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: '6e60ff004d48bf7701711e518ec0b21264496ae8', class: {
+        const isEnd = isEndSide(this.side, this.el);
+        return (hAsync(Host, { key: '47d4bf67ac04745ce2d4990844257320f27908dd', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -22977,7 +22976,7 @@ class ItemSliding {
             side = optionsToOpen === this.leftOptions ? 'start' : 'end';
         }
         // In RTL we want to switch the sides
-        side = isEndSide(side) ? 'end' : 'start';
+        side = isEndSide(side, this.el) ? 'end' : 'start';
         const isStartOpen = this.openAmount < 0;
         const isEndOpen = this.openAmount > 0;
         /**
@@ -23046,7 +23045,7 @@ class ItemSliding {
         // Reset left and right options in case they were removed
         this.leftOptions = this.rightOptions = undefined;
         for (const option of options) {
-            const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
+            const side = isEndSide(option.side ?? option.getAttribute('side'), option) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -23065,7 +23064,7 @@ class ItemSliding {
          * do not open left side so swipe to go
          * back will still work.
          */
-        const rtl = document.dir === 'rtl';
+        const rtl = isRTL$1(this.el);
         const atEdge = rtl ? window.innerWidth - gesture.startX < 15 : gesture.startX < 15;
         if (atEdge) {
             return false;
@@ -23244,7 +23243,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '02174ca963753d3a51a4249068f3d436f8acb03d', class: {
+        return (hAsync(Host, { key: '94e1e3ae3505bc821b4c806a1e99a0c707ffec64', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -23356,13 +23355,13 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '461604c1887f322dc13d7df3d5cdbb7ee1361117', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '5415f57fc93a0b2b82b6d327a8e635876ca5cbf5', class: createColorClasses$1(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',
-            }) }, hAsync("slot", { key: 'a7005d0a217641278aa8e95144e8e4b9ae87a1c5' })));
+                'label-rtl': isRTL$1(this.el),
+            }) }, hAsync("slot", { key: 'b6b65053228525c94a06c20abb0f03c659cdd7dc' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24331,7 +24330,7 @@ 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();
         }
@@ -24370,8 +24369,8 @@ 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();
         }
@@ -24569,6 +24568,24 @@ 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();
     }
@@ -24811,21 +24828,21 @@ class Menu {
         }
     }
     render() {
-        const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
+        const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
         const mode = getIonMode$1(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 (hAsync(Host, { key: '5cf26df26d4e539860cbeaea98ec621b98c3fcfc', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(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),
-            } }, hAsync("div", { key: 'f337016e293bb8665c99762e0c389dd6c372bb33', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '4c3fe331aa42cd57d7ad9bd1f5910f8eeb62d7da' })), hAsync("ion-backdrop", { key: '61af7ea876d81574841e1dd3e81e2352e555d096', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+                'split-pane-side': this.getSplitPane() !== null,
+            } }, hAsync("div", { key: '8ac2f0f531db944a46e5fef016d0b18bd7b804cc', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '1ac3e13ccccf1adb7915b739fc794f2889b626ce' })), hAsync("ion-backdrop", { key: 'f8becbf4de1a13feb57fb87973befecb88510bab', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31731,7 +31748,7 @@ const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
 const iosEnterAnimation$1 = (baseEl, opts) => {
     const { event: ev, size, trigger, reference, side, align } = opts;
     const doc = baseEl.ownerDocument;
-    const isRTL = doc.dir === 'rtl';
+    const rtl = isRTL$1(baseEl);
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     const arrowEl = root.querySelector('.popover-arrow');
@@ -31757,10 +31774,10 @@ const iosEnterAnimation$1 = (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'
@@ -31881,7 +31898,7 @@ const POPOVER_MD_BODY_PADDING = 12;
 const mdEnterAnimation$1 = (baseEl, opts) => {
     const { event: ev, size, trigger, reference, side, align } = opts;
     const doc = baseEl.ownerDocument;
-    const isRTL = doc.dir === 'rtl';
+    const rtl = isRTL$1(baseEl);
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     /**
@@ -31905,10 +31922,10 @@ const mdEnterAnimation$1 = (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.
@@ -32028,6 +32045,7 @@ class Popover {
         this.lockController = createLockController();
         this.inline = false;
         this.focusDescendantOnPresent = false;
+        this.dirSetOnPresent = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -32328,6 +32346,15 @@ 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$1(el) ? 'rtl' : 'ltr');
+            this.dirSetOnPresent = true;
+        }
         /**
          * Emit ionMount so JS Frameworks have an opportunity
          * to add the child component to the DOM. The child
@@ -32448,6 +32475,10 @@ class Popover {
              */
             const { delegate } = this.getDelegate();
             await detachComponent(delegate, this.usersElement);
+            if (this.dirSetOnPresent) {
+                this.el.removeAttribute('dir');
+                this.dirSetOnPresent = false;
+            }
         }
         unlock();
         return shouldDismiss;
@@ -32475,7 +32506,7 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, { key: 'b5e9c788f58397203976d5f8302dfb89e916efe1', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
+        return (hAsync(Host, { key: '083f06f04d2c2657e510b471fba81cc459e0e878', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
@@ -32486,7 +32517,7 @@ 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 && hAsync("ion-backdrop", { key: 'f3977833c5b2c0087c286ee54363b478d69eb115', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '1059893d6fd2932ca8adcdf8d45a5d66f4794727', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '24d7988bdd95882ad77fcaa7112aeda55878bee4', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '4d6992e0a9d629f11763045f9199f9a77fa521ab', class: "popover-content", part: "content" }, hAsync("slot", { key: 'b29747419620a01a6c34e9e846cd529b0b210145' })))));
+            }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && hAsync("ion-backdrop", { key: 'afd9bfa3edfde061603acfc251eb8ac54c85ec6f', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '04314c9b510342f152027a6d62394b74d2888b88', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: 'e1bc715a4ca37012d109b512e2288c932485bf45', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '5ab527ca65b483865954005239618de7daf2c621', class: "popover-content", part: "content" }, hAsync("slot", { key: '4d3abb569347f6156d426f98b897e79ffd6b53bc' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32592,19 +32623,20 @@ 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$1(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (hAsync(Host, { key: 'd53d39a3e2c0198164a9face62d3775f357b6914', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '0a5c76361cf8df0c294e0fb2477892e23ecebe38', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
-                'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
+                'progress-bar-reversed': isRTL$1(el) ? !reversed : reversed,
                 'progress-bar-solid': progressSolid,
             }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
     }
+    get el() { return getElement(this); }
     static get style() { return {
         ios: progressBarIosCss(),
         md: progressBarMdCss()
@@ -42786,11 +42818,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: 'c5f0b913ff0a22d9bf02da48a313a613c2ac8fe7', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8d17feb9f9dcb9eb8e3b8ae6e831bdedb890771c', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
-                'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: '5253b9e39fb764bfe1e57370719139f8a83e9904', class: "toolbar-title" }, hAsync("slot", { key: 'e38b1eccb0175c36f8cab211aee7ce4d61fc9035' }))));
+                'title-rtl': isRTL$1(this.el),
+            }) }, hAsync("div", { key: '0346aae3fca1e3ae443b1b511c44ab1f803cb103', class: "toolbar-title" }, hAsync("slot", { key: 'e1945845df471d5eb8c3cdeb568c478abf5ad70e' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -43278,9 +43310,9 @@ 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$1(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';
@@ -43345,7 +43377,7 @@ 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);
@@ -43409,7 +43441,7 @@ 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) {
@@ -43419,7 +43451,7 @@ 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);
                 }
             }
@@ -43442,7 +43474,7 @@ 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') {
@@ -43522,10 +43554,10 @@ 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
@@ -43534,13 +43566,13 @@ 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);
                     }
                 }