@ionic/core 9.0.10-dev.11792788258.1f71cfee → 9.0.10-dev.11793383958.19a7d413

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

@@ -1,17 +1,21 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Fragment, Host, h } from "@stencil/core";
-import { inheritAriaAttributes } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
+import { Build, Fragment, Host, forceUpdate, h, } from "@stencil/core";
+import { createAttributeController } from "../../utils/attribute-controller";
+import { checkInvalidState } from "../../utils/forms/index";
+import { ariaAttributes } from "../../utils/helpers";
+import { printIonError, printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 export class InputOTP {
     constructor() {
-        this.inheritedAttributes = {};
         this.inputRefs = [];
         this.inputId = `ion-input-otp-${inputIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        this.descriptionId = `${this.inputId}-description`;
         this.parsedSeparators = [];
         /**
          * Tracks whether the user is navigating through input boxes using keyboard navigation
@@ -27,6 +31,7 @@ export class InputOTP {
         this.inputValues = [];
         this.hasFocus = false;
         this.previousInputValues = [];
+        this.isInvalid = false;
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -379,6 +384,10 @@ export class InputOTP {
             this.inputRefs[tabbableIndex]?.focus();
         }
     }
+    // The host keeps these (see `HOST_ARIA_ATTRIBUTES`), so re-render when they change
+    onHostAriaChange() {
+        forceUpdate(this);
+    }
     valueChanged() {
         this.initializeValues();
         this.updateTabIndexes();
@@ -435,13 +444,45 @@ export class InputOTP {
         }
         this.parsedSeparators = separatorValues.filter((pos) => pos <= length);
     }
+    connectedCallback() {
+        const { el } = this;
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    // Force a re-render to update aria-describedby immediately
+                    forceUpdate(this);
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        this.isInvalid = checkInvalidState(el);
+        // Resumes watching after a move, since `componentWillLoad` only runs once
+        this.ariaController?.init();
+    }
+    disconnectedCallback() {
+        this.ariaController?.destroy();
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
+    }
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        // Only read `role` at load so a later host write isn't copied to the group
+        this.ariaController = createAttributeController(this.el, ariaAttributes.filter((attr) => !HOST_ARIA_ATTRIBUTES.includes(attr)), () => forceUpdate(this), ['role']);
         this.processSeparators();
         this.initializeValues();
     }
     componentDidLoad() {
         this.updateTabIndexes();
+        // The description only exists after the first render, so render again to reference it
+        if (this.getDescriptionText()) {
+            forceUpdate(this);
+        }
     }
     componentDidRender() {
         if (this.updateTabIndexesAfterRender) {
@@ -619,14 +660,77 @@ export class InputOTP {
         const { length } = this;
         return this.parsedSeparators.includes(index + 1) && index < length - 1;
     }
+    /**
+     * Returns `undefined` until the first render creates the description container.
+     */
+    getDescriptionText() {
+        return this.el.querySelector('.input-otp-description')?.textContent?.trim();
+    }
+    getHintTextId() {
+        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
+        if (isInvalid && errorText) {
+            return errorTextId;
+        }
+        if (helperText) {
+            return helperTextId;
+        }
+        return undefined;
+    }
+    renderHintText() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        return [
+            h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
+        ];
+    }
+    renderBottomContent() {
+        const { helperText, errorText } = this;
+        if (!helperText && !errorText) {
+            return;
+        }
+        return h("div", { class: "input-otp-bottom" }, this.renderHintText());
+    }
+    /**
+     * A custom formatter is used as is so translators control the whole name.
+     * With a host `aria-labelledby`, each box also references itself so its
+     * position is still read.
+     */
+    getInputLabelAttributes(index, hostAttributes) {
+        const { inputId, inputLabelFormatter, length } = this;
+        const hostLabel = hostAttributes['aria-label'];
+        const hostLabelledBy = hostAttributes['aria-labelledby'];
+        const position = `${index + 1} of ${length}`;
+        if (inputLabelFormatter !== undefined) {
+            try {
+                return { 'aria-label': inputLabelFormatter(index, length) };
+            }
+            catch (e) {
+                printIonError('[ion-input-otp] - Exception in provided `inputLabelFormatter`:', e);
+            }
+        }
+        if (hostLabelledBy) {
+            return { 'aria-label': position, 'aria-labelledby': `${hostLabelledBy} ${inputId}-${index}` };
+        }
+        return { 'aria-label': hostLabel ? `${hostLabel}, ${position}` : `Input ${position}` };
+    }
     render() {
-        const { autocapitalize, color, disabled, el, fill, hasFocus, inheritedAttributes, inputId, inputRefs, inputValues, length, readonly, shape, size, } = this;
+        const { ariaController, autocapitalize, color, descriptionId, disabled, el, fill, hasFocus, inputId, inputRefs, inputValues, isInvalid, length, readonly, shape, size, } = this;
         const mode = getIonMode(this);
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
-        return (h(Host, { key: 'def9fbd4fa135e6f435380c6ea86ac1621b4a111', class: createColorClasses(color, {
+        const descriptionText = this.getDescriptionText();
+        // Keep the description visible until the first render can check it
+        const hasDescription = descriptionText !== '';
+        /**
+         * Screen readers only announce these from the focused input. The
+         * description stays on the group so it isn't repeated for every input.
+         */
+        const { 'aria-errormessage': ariaErrorMessage, 'aria-required': ariaRequired, ...groupAttributes } = ariaController?.attributes ?? {};
+        const hostDescribedBy = el.getAttribute('aria-describedby');
+        const hostInvalid = el.getAttribute('aria-invalid') ?? undefined;
+        const describedBy = [hostDescribedBy, this.getHintTextId()].filter(Boolean).join(' ');
+        return (h(Host, { key: '5b13c3bed3979e269cf4409895954edb171d68f3', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -634,7 +738,7 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", { key: '5d3d7646a3d4fc856b7b2e1f53d29fca47b10baf', 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) => {
+            }) }, h("div", { key: '6db010743f0eb5e059dc00de5822f117a264bb16', role: "group", class: "input-otp-group", ...groupAttributes, "aria-label": groupAttributes['aria-label'] || 'One-time password input', "aria-describedby": descriptionText ? descriptionId : undefined }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, ...this.getInputLabelAttributes(index, groupAttributes), "aria-describedby": describedBy || undefined, "aria-errormessage": ariaErrorMessage, "aria-invalid": isInvalid ? 'true' : hostInvalid, "aria-required": ariaRequired, 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) => {
                 if (el) {
                     inputRefs[index] = el;
                 }
@@ -642,10 +746,10 @@ export class InputOTP {
                     // The input was removed, so drop its ref and any after it.
                     inputRefs.splice(index);
                 }
-            }, 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: '9d72a4ab35b5fdd6bba9701050c385ed253b310f', class: {
+            }, 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: '4d55d7532dcc28fadcb2f860dd2fcd2aa45ccccc', id: descriptionId, class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: '7deb3373c0d4e5deac22fa51577d271b9bb3a6d2' }))));
+            } }, h("slot", { key: '5d6823f48a9786799c9d485ce0d6b9de2ae7f537' })), this.renderBottomContent()));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }
@@ -729,6 +833,25 @@ export class InputOTP {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is placed under the input boxes and displayed when an error is detected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-text"
+            },
             "fill": {
                 "type": "string",
                 "mutable": false,
@@ -749,6 +872,49 @@ export class InputOTP {
                 "attribute": "fill",
                 "defaultValue": "'outline'"
             },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is placed under the input boxes and displayed when no error is detected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "inputLabelFormatter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputOtpLabelFormatter",
+                    "resolved": "((index: number, length: number) => string) | undefined",
+                    "references": {
+                        "InputOtpLabelFormatter": {
+                            "location": "import",
+                            "path": "./input-otp-interface",
+                            "id": "src/components/input-otp/input-otp-interface.ts::InputOtpLabelFormatter",
+                            "referenceLocation": "InputOtpLabelFormatter"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A callback used to format the accessible name of each input box. It\nreceives the 0-based `index` of the box and the total `length`. By default\nthe name is \"Input 1 of 4\", or \"PIN, 1 of 4\" with an `aria-label` of \"PIN\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
+                },
+                "getter": false,
+                "setter": false
+            },
             "inputmode": {
                 "type": "string",
                 "mutable": false,
@@ -932,7 +1098,8 @@ export class InputOTP {
         return {
             "inputValues": {},
             "hasFocus": {},
-            "previousInputValues": {}
+            "previousInputValues": {},
+            "isInvalid": {}
         };
     }
     static get events() {
@@ -1075,6 +1242,12 @@ export class InputOTP {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "aria-describedby",
+                "methodName": "onHostAriaChange"
+            }, {
+                "propName": "aria-invalid",
+                "methodName": "onHostAriaChange"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }, {
@@ -1090,3 +1263,9 @@ export class InputOTP {
     }
 }
 let inputIds = 0;
+/**
+ * The attribute controller removes these from the host, so an app could never
+ * clear them. They stay on the host instead, which only works for global
+ * attributes since the host has no role.
+ */
+const HOST_ARIA_ATTRIBUTES = ['aria-describedby', 'aria-invalid'];

package/dist/collection/components/input-otp/input-otp.md.css

@@ -111,6 +111,7 @@
    * different selectors for different fill variants.
    */
   --highlight-color: var(--highlight-color-focused);
+  --border-color: initial;
   display: block;
   position: relative;
   font-size: 0.875rem;
@@ -148,7 +149,7 @@
   height: var(--height);
   border-width: var(--border-width);
   border-style: solid;
-  border-color: var(--border-color);
+  border-color: var(--border-color, var(--internal-border-color));
   background: var(--background);
   color: var(--color);
   font-size: inherit;
@@ -171,6 +172,30 @@
   display: none;
 }
 
+.input-otp-bottom {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  text-align: center;
+}
+
+.input-otp-bottom .error-text {
+  display: none;
+  color: var(--highlight-color-invalid);
+}
+
+.input-otp-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+}
+
+:host(.ion-touched.ion-invalid) .input-otp-bottom .error-text {
+  display: block;
+}
+
+:host(.ion-touched.ion-invalid) .input-otp-bottom .helper-text {
+  display: none;
+}
+
 .input-otp-separator {
   border-radius: var(--separator-border-radius);
   flex-shrink: 0;
@@ -220,7 +245,7 @@
 }
 
 :host(.input-otp-fill-solid) {
-  --border-color: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --internal-border-color: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
   --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
 }
 
@@ -230,7 +255,7 @@
 
 :host(.input-otp-fill-outline.input-otp-disabled) {
   --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
-  --border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  --internal-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
 }
 
 :host(.input-otp-disabled),
@@ -249,7 +274,7 @@
 
 :host(.input-otp-fill-solid.input-otp-disabled),
 :host(.input-otp-fill-solid.input-otp-readonly) {
-  --border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  --internal-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
   --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
 }
 
@@ -377,5 +402,5 @@
 }
 
 :host(.input-otp-fill-outline) {
-  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
+  --internal-border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
 }

package/dist/collection/components/item/item.js

@@ -4,7 +4,6 @@
 import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { createAttributeController } from "../../utils/attribute-controller";
 import { raf } from "../../utils/helpers";
-import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { chevronForward } from "ionicons/icons";
 import { getIonMode } from "../../global/ionic-global";
@@ -239,7 +238,7 @@ export class Item {
         return controls[0];
     }
     render() {
-        const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection, multipleInputs, el, } = this;
+        const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection, multipleInputs, } = this;
         const inheritedAriaAttributes = this.ariaController?.attributes ?? {};
         const childStyles = {};
         const mode = getIonMode(this);
@@ -316,7 +315,7 @@ export class Item {
          * multi-input item, and in a clickable item, which is a second tab stop.
          */
         const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
-        return (h(Host, { key: 'dedd4fbc4f9e4db557c6f8bd91299778af9aba1c', "aria-disabled": ariaDisabled, class: {
+        return (h(Host, { key: '7fe924642310c19f057ae1bfa29c1acdf5cc7ed6', "aria-disabled": ariaDisabled, class: {
                 ...childStyles,
                 ...labelColorStyles,
                 ...createColorClasses(this.color, {
@@ -331,9 +330,9 @@ export class Item {
                     'item-focus-indicator-room': slottedIndicatorNeedsRoom,
                     'ion-activatable': canActivate,
                     'ion-focusable': this.focusable,
-                    'item-rtl': isRTL(el),
+                    'item-rtl': document.dir === 'rtl',
                 }),
-            }, role: inList ? 'listitem' : null }, h(TagType, { key: '949000f555bbc8b76a227d84a2442defc3577a4e', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: '9fde070c0f830cfed9c7e25ea4d1f1d7ab710d07', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: 'd7ab19b4d7e5d4a7fec2d66e1cb865ff30c609f0', class: "item-inner", part: "inner" }, h("div", { key: 'fdf3f306b98ab6af536e320341985fb34d50ef35', class: "input-wrapper", part: "container" }, h("slot", { key: '06ecb3817c2bdf171f806e2b3e8701d3eb52897e', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '7e401db776cd19b0399004e77920b23e526c551a', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("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' && h("ion-ripple-effect", { key: '7a782fa9c7e74e600191c41c7dd90a4a499de64e' }))));
+            }, role: inList ? 'listitem' : null }, h(TagType, { key: '8fddfb2a076b4b98e45ee8b23579d011dba12acb', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: '7f888b62b2023cf501fd308e32629e7a291c2d05', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '6d5cdde307caa65b131edb65cb0a5f8294cf151c', class: "item-inner", part: "inner" }, h("div", { key: '9fbfffdff4cf51adf1f02d573953cf8b145574b0', class: "input-wrapper", part: "container" }, h("slot", { key: '574c7e61cdaa3959a28bad7353105ef217a76ed9', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'ed7e211960cd65ed17f865a6d50d5bdde069416b', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("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' && h("ion-ripple-effect", { key: '55502ef394db0953144387fa3baebf9fa6a976a9' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-options/item-options.js

@@ -20,8 +20,8 @@ export class ItemOptions {
     }
     render() {
         const mode = getIonMode(this);
-        const isEnd = isEndSide(this.side, this.el);
-        return (h(Host, { key: '47d4bf67ac04745ce2d4990844257320f27908dd', class: {
+        const isEnd = isEndSide(this.side);
+        return (h(Host, { key: '6e60ff004d48bf7701711e518ec0b21264496ae8', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,

package/dist/collection/components/item-sliding/item-sliding.js

@@ -5,7 +5,6 @@ import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
 import { componentOnReady, isEndSide } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
-import { isRTL } from "../../utils/rtl/index";
 import { watchForOptions } from "../../utils/watch-options";
 import { getIonMode } from "../../global/ionic-global";
 const SWIPE_MARGIN = 30;
@@ -121,7 +120,7 @@ export class ItemSliding {
             side = optionsToOpen === this.leftOptions ? 'start' : 'end';
         }
         // In RTL we want to switch the sides
-        side = isEndSide(side, this.el) ? 'end' : 'start';
+        side = isEndSide(side) ? 'end' : 'start';
         const isStartOpen = this.openAmount < 0;
         const isEndOpen = this.openAmount > 0;
         /**
@@ -190,7 +189,7 @@ export 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'), option) ? 'end' : 'start';
+            const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -209,7 +208,7 @@ export class ItemSliding {
          * do not open left side so swipe to go
          * back will still work.
          */
-        const rtl = isRTL(this.el);
+        const rtl = document.dir === 'rtl';
         const atEdge = rtl ? window.innerWidth - gesture.startX < 15 : gesture.startX < 15;
         if (atEdge) {
             return false;
@@ -388,7 +387,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '94e1e3ae3505bc821b4c806a1e99a0c707ffec64', class: {
+        return (h(Host, { key: '02174ca963753d3a51a4249068f3d436f8acb03d', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

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

@@ -2,7 +2,6 @@
  * (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";
 /**
@@ -59,13 +58,13 @@ export class Label {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '5415f57fc93a0b2b82b6d327a8e635876ca5cbf5', class: createColorClasses(this.color, {
+        return (h(Host, { key: '461604c1887f322dc13d7df3d5cdbb7ee1361117', 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': isRTL(this.el),
-            }) }, h("slot", { key: 'b6b65053228525c94a06c20abb0f03c659cdd7dc' })));
+                'label-rtl': document.dir === 'rtl',
+            }) }, h("slot", { key: 'a7005d0a217641278aa8e95144e8e4b9ae87a1c5' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,7 +3,6 @@
  */
 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;
 /**
@@ -22,7 +21,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 rtl = isRTL(baseEl);
+    const isRTL = doc.dir === 'rtl';
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     const arrowEl = root.querySelector('.popover-arrow');
@@ -48,10 +47,10 @@ export const iosEnterAnimation = (baseEl, opts) => {
     const defaultPosition = {
         top: bodyHeight / 2 - contentHeight / 2,
         left: bodyWidth / 2 - contentWidth / 2,
-        originX: rtl ? 'right' : 'left',
+        originX: isRTL ? 'right' : 'left',
         originY: 'top',
     };
-    const results = getPopoverPosition(rtl, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev, zoom);
+    const results = getPopoverPosition(isRTL, 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,7 +3,6 @@
  */
 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;
 /**
@@ -13,7 +12,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 rtl = isRTL(baseEl);
+    const isRTL = doc.dir === 'rtl';
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     /**
@@ -37,10 +36,10 @@ export const mdEnterAnimation = (baseEl, opts) => {
     const defaultPosition = {
         top: bodyHeight / 2 - contentHeight / 2,
         left: bodyWidth / 2 - contentWidth / 2,
-        originX: rtl ? 'right' : 'left',
+        originX: isRTL ? 'right' : 'left',
         originY: 'top',
     };
-    const results = getPopoverPosition(rtl, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev, zoom);
+    const results = getPopoverPosition(isRTL, 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,7 +9,6 @@ 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";
@@ -35,7 +34,6 @@ export class Popover {
         this.lockController = createLockController();
         this.inline = false;
         this.focusDescendantOnPresent = false;
-        this.dirSetOnPresent = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -336,15 +334,6 @@ 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
@@ -465,10 +454,6 @@ 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;
@@ -496,7 +481,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: '083f06f04d2c2657e510b471fba81cc459e0e878', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
+        return (h(Host, { key: 'b5e9c788f58397203976d5f8302dfb89e916efe1', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
@@ -507,7 +492,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: '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' })))));
+            }, 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' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }