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

package/hydrate/index.mjs

@@ -6000,7 +6000,7 @@ const isRTL$1 = (hostEl) => {
             return false;
         }
     }
-    return hostEl.ownerDocument?.dir?.toLowerCase() === 'rtl';
+    return document?.dir?.toLowerCase() === 'rtl';
 };
 
 const transitionEndAsync = (el, expectedDuration = 0) => {
@@ -6302,7 +6302,8 @@ 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, falling back to the document.
+ * it or its nearest ancestor that declares one. When omitted, the direction
+ * is resolved from the document.
  */
 const isEndSide = (side, hostEl) => {
     const rtl = isRTL$1(hostEl);
@@ -11282,14 +11283,6 @@ 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);
         };
@@ -11317,6 +11310,14 @@ 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.
          */
@@ -11626,7 +11627,7 @@ class Alert {
             };
             const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox');
             const defaultJustify = getOverlayLabelJustify(mode, 'checkbox');
-            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: {
+            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: {
                     ...getClassMap(i.cssClass),
                     'alert-tappable': true,
                     'alert-checkbox': true,
@@ -11776,14 +11777,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: '5d0b4ff618d956178aa5a1cd869f9ed28dc629ee', tabindex: "-1", style: {
+        return (hAsync(Host, { key: '083b5250dc4c76e85240e0225abcb7ca2b66de2f', 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: '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" })));
+            }, 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" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13929,28 +13930,27 @@ class Col {
             [modifier]: amount,
         };
     }
-    calculateOffset(rtl) {
-        return this.calculatePosition('offset', rtl ? 'margin-right' : 'margin-left');
+    calculateOffset(isRTL) {
+        return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
     }
-    calculatePull(rtl) {
-        return this.calculatePosition('pull', rtl ? 'left' : 'right');
+    calculatePull(isRTL) {
+        return this.calculatePosition('pull', isRTL ? 'left' : 'right');
     }
-    calculatePush(rtl) {
-        return this.calculatePosition('push', rtl ? 'right' : 'left');
+    calculatePush(isRTL) {
+        return this.calculatePosition('push', isRTL ? 'right' : 'left');
     }
     render() {
-        const rtl = isRTL$1(this.el);
+        const isRTL = document.dir === 'rtl';
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '98f3c88ee5408120539e3daf097982dea1b4842a', class: {
+        return (hAsync(Host, { key: 'e12293a4315cb474bbde73421dd0b4129f1df1cc', class: {
                 [mode]: true,
             }, style: {
-                ...this.calculateOffset(rtl),
-                ...this.calculatePull(rtl),
-                ...this.calculatePush(rtl),
+                ...this.calculateOffset(isRTL),
+                ...this.calculatePull(isRTL),
+                ...this.calculatePush(isRTL),
                 ...this.calculateSize(),
-            } }, hAsync("slot", { key: '14e2f0c30bc3fea9aa9683e3bd4ed5dd4a3be05c' })));
+            } }, hAsync("slot", { key: '869317ea6574111a57a7a9d096c53d264c335d28' })));
     }
-    get el() { return getElement(this); }
     static get style() { return colCss(); }
     static get cmpMeta() { return {
         "$flags$": 265,
@@ -17986,12 +17986,13 @@ 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);
-        const hostDir = isRTL$1(this.el) ? 'rtl' : 'ltr';
+        // 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;
         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", { 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) => {
+            }, 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) => {
             return hAsync("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -18308,7 +18309,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: '465c9c22bccabc4a82ea4054c536c6086b85ddf9', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+        return (hAsync(Host, { key: 'e9b99bb5610fc7fe879200a56dcc865c6e2f1404', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
                 ...createColorClasses$1(color, {
                     [mode]: true,
                     ['datetime-readonly']: readonly,
@@ -18320,7 +18321,7 @@ class Datetime {
                     [`datetime-prefer-wheel`]: hasWheelVariant,
                     [`datetime-grid`]: isGridStyle,
                 }),
-            } }, hAsync("div", { key: '9732b003440a0ca23520bc8a09e73125d88fd565', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            } }, hAsync("div", { key: 'a5e61be2989468dc24ec8fb394116d9339b7824c', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21443,9 +21444,9 @@ class Input {
 }
 let inputIds$1 = 0;
 
-const inputOtpIosCss = () => `.sc-ion-input-otp-ios-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-ios{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-ios{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-description-hidden.sc-ion-input-otp-ios{display:none}.input-otp-separator.sc-ion-input-otp-ios{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-ios-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:8px}.input-otp-size-medium.sc-ion-input-otp-ios-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-ios-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios,.input-otp-size-large.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:12px}.input-otp-shape-round.sc-ion-input-otp-ios-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-ios-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-ios-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-ios-h{--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))}.input-otp-disabled.sc-ion-input-otp-ios-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-ios-h{--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))}.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-disabled.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-ios-h{--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))}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-ios-h,.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-ios-h{--border-width:0.55px}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-width:1px}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}`;
+const inputOtpIosCss = () => `.sc-ion-input-otp-ios-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);--border-color:initial;display:block;position:relative;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-ios{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-ios{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color, var(--internal-border-color));background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-description-hidden.sc-ion-input-otp-ios{display:none}.input-otp-bottom.sc-ion-input-otp-ios{font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-bottom.sc-ion-input-otp-ios .error-text.sc-ion-input-otp-ios{display:none;color:var(--highlight-color-invalid)}.input-otp-bottom.sc-ion-input-otp-ios .helper-text.sc-ion-input-otp-ios{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h .input-otp-bottom.sc-ion-input-otp-ios .error-text.sc-ion-input-otp-ios{display:block}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h .input-otp-bottom.sc-ion-input-otp-ios .helper-text.sc-ion-input-otp-ios{display:none}.input-otp-separator.sc-ion-input-otp-ios{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-ios-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:8px}.input-otp-size-medium.sc-ion-input-otp-ios-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-ios-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios,.input-otp-size-large.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:12px}.input-otp-shape-round.sc-ion-input-otp-ios-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-ios-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-ios-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-ios-h{--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))}.input-otp-disabled.sc-ion-input-otp-ios-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--internal-border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-disabled.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-ios-h{--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))}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-ios-h,.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-ios-h{--border-width:0.55px}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-width:1px}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--internal-border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}`;
 
-const inputOtpMdCss = () => `.sc-ion-input-otp-md-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-md{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-md{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-md{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-description-hidden.sc-ion-input-otp-md{display:none}.input-otp-separator.sc-ion-input-otp-md{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-md-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:8px}.input-otp-size-medium.sc-ion-input-otp-md-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-md-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md,.input-otp-size-large.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:12px}.input-otp-shape-round.sc-ion-input-otp-md-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-md-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-md-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-md-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-md-h{--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))}.input-otp-disabled.sc-ion-input-otp-md-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-md-h{--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))}.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-disabled.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-md-h{--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))}.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-md-h,.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-md-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-md-h{--border-width:1px}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-width:2px}.input-otp-fill-outline.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3))}`;
+const inputOtpMdCss = () => `.sc-ion-input-otp-md-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);--border-color:initial;display:block;position:relative;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-md{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-md{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color, var(--internal-border-color));background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-md{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-description-hidden.sc-ion-input-otp-md{display:none}.input-otp-bottom.sc-ion-input-otp-md{font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-bottom.sc-ion-input-otp-md .error-text.sc-ion-input-otp-md{display:none;color:var(--highlight-color-invalid)}.input-otp-bottom.sc-ion-input-otp-md .helper-text.sc-ion-input-otp-md{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-input-otp-md-h .input-otp-bottom.sc-ion-input-otp-md .error-text.sc-ion-input-otp-md{display:block}.ion-touched.ion-invalid.sc-ion-input-otp-md-h .input-otp-bottom.sc-ion-input-otp-md .helper-text.sc-ion-input-otp-md{display:none}.input-otp-separator.sc-ion-input-otp-md{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-md-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:8px}.input-otp-size-medium.sc-ion-input-otp-md-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-md-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md,.input-otp-size-large.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:12px}.input-otp-shape-round.sc-ion-input-otp-md-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-md-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-md-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-md-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-md-h{--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))}.input-otp-disabled.sc-ion-input-otp-md-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--internal-border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-disabled.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-md-h{--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))}.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-md-h,.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-md-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-md-h{--border-width:1px}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-width:2px}.input-otp-fill-outline.sc-ion-input-otp-md-h{--internal-border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3))}`;
 
 class InputOTP {
     constructor(hostRef) {
@@ -21455,9 +21456,11 @@ class InputOTP {
         this.ionComplete = createEvent(this, "ionComplete", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.ionFocus = createEvent(this, "ionFocus", 7);
-        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
@@ -21473,6 +21476,7 @@ 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"`.
@@ -21825,6 +21829,9 @@ class InputOTP {
             this.inputRefs[tabbableIndex]?.focus();
         }
     }
+    // The host keeps these (see `HOST_ARIA_ATTRIBUTES`), so re-render when they change
+    onHostAriaChange() {
+    }
     valueChanged() {
         this.initializeValues();
         this.updateTabIndexes();
@@ -21881,13 +21888,29 @@ class InputOTP {
         }
         this.parsedSeparators = separatorValues.filter((pos) => pos <= length);
     }
+    connectedCallback() {
+        const { el } = this;
+        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(), ['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()) ;
     }
     componentDidRender() {
         if (this.updateTabIndexesAfterRender) {
@@ -22065,14 +22088,77 @@ 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 [
+            hAsync("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            hAsync("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
+        ];
+    }
+    renderBottomContent() {
+        const { helperText, errorText } = this;
+        if (!helperText && !errorText) {
+            return;
+        }
+        return hAsync("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$1(this);
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
-        return (hAsync(Host, { key: 'def9fbd4fa135e6f435380c6ea86ac1621b4a111', class: createColorClasses$1(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 (hAsync(Host, { key: '5b13c3bed3979e269cf4409895954edb171d68f3', class: createColorClasses$1(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -22080,7 +22166,7 @@ class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, hAsync("div", { key: '5d3d7646a3d4fc856b7b2e1f53d29fca47b10baf', role: "group", "aria-label": "One-time password input", class: "input-otp-group", ...inheritedAttributes }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("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) => {
+            }) }, hAsync("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) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("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;
                 }
@@ -22088,13 +22174,19 @@ 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) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("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) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("div", { key: '4d55d7532dcc28fadcb2f860dd2fcd2aa45ccccc', id: descriptionId, class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, hAsync("slot", { key: '7deb3373c0d4e5deac22fa51577d271b9bb3a6d2' }))));
+            } }, hAsync("slot", { key: '5d6823f48a9786799c9d485ce0d6b9de2ae7f537' })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "aria-describedby": [{
+                "onHostAriaChange": 0
+            }],
+        "aria-invalid": [{
+                "onHostAriaChange": 0
+            }],
         "value": [{
                 "valueChanged": 0
             }],
@@ -22118,7 +22210,10 @@ class InputOTP {
             "autocapitalize": [1],
             "color": [513],
             "disabled": [516],
+            "errorText": [1, "error-text"],
             "fill": [1],
+            "helperText": [1, "helper-text"],
+            "inputLabelFormatter": [16],
             "inputmode": [1],
             "length": [2],
             "pattern": [1],
@@ -22131,6 +22226,7 @@ class InputOTP {
             "inputValues": [32],
             "hasFocus": [32],
             "previousInputValues": [32],
+            "isInvalid": [32],
             "setFocus": [64]
         },
         "$listeners$": undefined,
@@ -22139,6 +22235,12 @@ 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'];
 
 const iosInputPasswordToggleCss = () => ``;
 
@@ -22458,7 +22560,7 @@ 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$1(this);
@@ -22535,7 +22637,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: 'dedd4fbc4f9e4db557c6f8bd91299778af9aba1c', "aria-disabled": ariaDisabled, class: {
+        return (hAsync(Host, { key: '7fe924642310c19f057ae1bfa29c1acdf5cc7ed6', "aria-disabled": ariaDisabled, class: {
                 ...childStyles,
                 ...labelColorStyles,
                 ...createColorClasses$1(this.color, {
@@ -22550,9 +22652,9 @@ class Item {
                     'item-focus-indicator-room': slottedIndicatorNeedsRoom,
                     'ion-activatable': canActivate,
                     'ion-focusable': this.focusable,
-                    'item-rtl': isRTL$1(el),
+                    'item-rtl': document.dir === 'rtl',
                 }),
-            }, 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' }))));
+            }, 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' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22779,8 +22881,8 @@ class ItemOptions {
     }
     render() {
         const mode = getIonMode$1(this);
-        const isEnd = isEndSide(this.side, this.el);
-        return (hAsync(Host, { key: '47d4bf67ac04745ce2d4990844257320f27908dd', class: {
+        const isEnd = isEndSide(this.side);
+        return (hAsync(Host, { key: '6e60ff004d48bf7701711e518ec0b21264496ae8', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -22974,7 +23076,7 @@ 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;
         /**
@@ -23043,7 +23145,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'), option) ? 'end' : 'start';
+            const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -23062,7 +23164,7 @@ class ItemSliding {
          * do not open left side so swipe to go
          * back will still work.
          */
-        const rtl = isRTL$1(this.el);
+        const rtl = document.dir === 'rtl';
         const atEdge = rtl ? window.innerWidth - gesture.startX < 15 : gesture.startX < 15;
         if (atEdge) {
             return false;
@@ -23241,7 +23343,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '94e1e3ae3505bc821b4c806a1e99a0c707ffec64', class: {
+        return (hAsync(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,
@@ -23353,13 +23455,13 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '5415f57fc93a0b2b82b6d327a8e635876ca5cbf5', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '461604c1887f322dc13d7df3d5cdbb7ee1361117', 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': isRTL$1(this.el),
-            }) }, hAsync("slot", { key: 'b6b65053228525c94a06c20abb0f03c659cdd7dc' })));
+                'label-rtl': document.dir === 'rtl',
+            }) }, hAsync("slot", { key: 'a7005d0a217641278aa8e95144e8e4b9ae87a1c5' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31746,7 +31848,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 rtl = isRTL$1(baseEl);
+    const isRTL = doc.dir === 'rtl';
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     const arrowEl = root.querySelector('.popover-arrow');
@@ -31772,10 +31874,10 @@ const iosEnterAnimation$1 = (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'
@@ -31896,7 +31998,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 rtl = isRTL$1(baseEl);
+    const isRTL = doc.dir === 'rtl';
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     /**
@@ -31920,10 +32022,10 @@ const mdEnterAnimation$1 = (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.
@@ -32043,7 +32145,6 @@ class Popover {
         this.lockController = createLockController();
         this.inline = false;
         this.focusDescendantOnPresent = false;
-        this.dirSetOnPresent = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -32344,15 +32445,6 @@ 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
@@ -32473,10 +32565,6 @@ class Popover {
              */
             const { delegate } = this.getDelegate();
             await detachComponent(delegate, this.usersElement);
-            if (this.dirSetOnPresent) {
-                this.el.removeAttribute('dir');
-                this.dirSetOnPresent = false;
-            }
         }
         unlock();
         return shouldDismiss;
@@ -32504,7 +32592,7 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, { key: '083f06f04d2c2657e510b471fba81cc459e0e878', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
+        return (hAsync(Host, { key: 'b5e9c788f58397203976d5f8302dfb89e916efe1', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
@@ -32515,7 +32603,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: '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' })))));
+            }, 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' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32621,20 +32709,19 @@ class ProgressBar {
         this.buffer = 1;
     }
     render() {
-        const { color, type, reversed, value, buffer, el } = this;
+        const { color, type, reversed, value, buffer } = 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: '0a5c76361cf8df0c294e0fb2477892e23ecebe38', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'd53d39a3e2c0198164a9face62d3775f357b6914', 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': isRTL$1(el) ? !reversed : reversed,
+                'progress-bar-reversed': document.dir === 'rtl' ? !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()
@@ -35749,6 +35836,14 @@ class Route {
          *
          * Accepts paths similar to expressjs so that you can define parameters
          * in the url /foo/:bar where bar would be available in incoming props.
+         *
+         * A url ending in `*`, such as `*` or `/admin/*`, matches any remaining path,
+         * including none, so `/admin/*` also matches `/admin`. It only wins over a
+         * route that matches the whole path when it has more fixed segments, so
+         * `/admin/*` wins over `/:section/:id` but not over `/admin/:id`. It always
+         * wins over a route that matches by ignoring trailing segments, such as
+         * `/admin` for `/admin/users`. The matched path is passed in the `pathMatch`
+         * prop without a leading `/`. A `*` on a route with child routes is ignored.
          */
         this.url = '';
     }
@@ -35837,6 +35932,8 @@ class RouteRedirect {
 const ROUTER_INTENT_NONE = 'root';
 const ROUTER_INTENT_FORWARD = 'forward';
 const ROUTER_INTENT_BACK = 'back';
+/** Param that holds the path matched by a trailing `*` in an `ion-route` url. */
+const WILDCARD_PARAM = 'pathMatch';
 
 /** Join the non empty segments with "/". */
 const generatePath = (segments) => {
@@ -35870,12 +35967,13 @@ const writeSegments = (history, root, useHash, segments, direction, state, query
  *
  * Notes:
  * - parameter segments of the form :param are replaced with their value,
- * - null is returned when a value is missing for any parameter segment.
+ * - null is returned when a value is missing for any parameter segment,
+ * - a trailing wildcard is replaced with the path it matched.
  */
 const chainToSegments = (chain) => {
     const segments = [];
     for (const route of chain) {
-        for (const segment of route.segments) {
+        for (const segment of withoutWildcard(route.segments)) {
             if (segment[0] === ':') {
                 const param = route.params && route.params[segment.slice(1)];
                 if (!param) {
@@ -35887,9 +35985,22 @@ const chainToSegments = (chain) => {
                 segments.push(segment);
             }
         }
+        segments.push(...wildcardSegments(route));
     }
     return segments;
 };
+/** Only a `*` in the last segment of a route url is a wildcard. Elsewhere it's matched literally. */
+const endsWithWildcard = (segments) => {
+    return segments[segments.length - 1] === '*';
+};
+/** Returns the path segments matched by the trailing wildcard of the route. */
+const wildcardSegments = (route) => {
+    const pathMatch = endsWithWildcard(route.segments) ? route.params?.[WILDCARD_PARAM] : undefined;
+    return pathMatch ? pathMatch.split('/').filter((s) => s.length > 0) : [];
+};
+const withoutWildcard = (segments) => {
+    return endsWithWildcard(segments) ? segments.slice(0, -1) : segments;
+};
 /**
  * Removes the prefix segments from the path segments.
  *
@@ -36222,6 +36333,10 @@ const matchesIDs = (ids, chain) => {
         if (routeId.id.toLowerCase() !== routeChain.id) {
             break;
         }
+        // Weight a wildcard route when the outlet reports its `pathMatch`
+        if (routeId.params?.[WILDCARD_PARAM] !== undefined && endsWithWildcard(routeChain.segments)) {
+            score++;
+        }
         if (routeId.params) {
             const routeIdParams = Object.keys(routeId.params);
             // Only compare routes with the chain that have the same number of parameters.
@@ -36277,21 +36392,28 @@ const matchesSegments = (segments, chain) => {
             matchesDefault = true;
         }
         else {
-            for (const segment of chainSegments) {
+            const params = {};
+            for (const segment of withoutWildcard(chainSegments)) {
                 const data = inputSegments.next();
                 // data param
                 if (segment[0] === ':') {
                     if (data === '') {
                         return null;
                     }
-                    allparams = allparams || [];
-                    const params = allparams[i] || (allparams[i] = {});
                     params[segment.slice(1)] = data;
                 }
                 else if (data !== segment) {
                     return null;
                 }
             }
+            // A trailing `*` on a parent route has no effect. Its children match the rest of the path.
+            if (i === chain.length - 1 && endsWithWildcard(chainSegments)) {
+                params[WILDCARD_PARAM] = inputSegments.rest().join('/');
+            }
+            if (Object.keys(params).length > 0) {
+                allparams = allparams || [];
+                allparams[i] = params;
+            }
             matchesDefault = false;
         }
     }
@@ -36323,25 +36445,38 @@ const mergeParams = (a, b) => {
  * Returns the best match or null when no match is found.
  * When a chain is returned the parameters are updated from the RouteIDs.
  * That is they contain both the componentProps of the <ion-route> and the parameter segment.
+ *
+ * When a wildcard route ties with other routes, a route without a wildcard that can build a url wins,
+ * then the wildcard route. Otherwise the first route declared wins a tie.
  */
 const findChainForIDs = (ids, chains) => {
-    let match = null;
     let maxMatches = 0;
+    let tied = [];
     for (const chain of chains) {
         const score = matchesIDs(ids, chain);
         if (score > maxMatches) {
-            match = chain;
             maxMatches = score;
+            tied = [chain];
+        }
+        else if (score > 0 && score === maxMatches) {
+            tied.push(chain);
         }
     }
-    if (match) {
-        return match.map((route, i) => ({
-            id: route.id,
-            segments: route.segments,
-            params: mergeParams(route.params, ids[i]?.params),
-        }));
+    const matches = tied.map((chain) => chain.map((route, i) => ({
+        id: route.id,
+        segments: route.segments,
+        params: mergeParams(route.params, ids[i]?.params),
+    })));
+    if (!matches.some(chainEndsWithWildcard)) {
+        return matches.length > 0 ? matches[0] : null;
     }
-    return null;
+    return matches.reduce((best, chain) => (tieRank(chain) > tieRank(best) ? chain : best));
+};
+const tieRank = (chain) => {
+    if (chainEndsWithWildcard(chain)) {
+        return 1;
+    }
+    return chainToSegments(chain) !== null ? 2 : 0;
 };
 /**
  * Finds the best match for the segments in the chains.
@@ -36349,10 +36484,17 @@ const findChainForIDs = (ids, chains) => {
  * Returns the best match or null when no match is found.
  * When a chain is returned the parameters are updated from the segments.
  * That is they contain both the componentProps of the <ion-route> and the parameter segments.
+ *
+ * When wildcard routes match, the one with the most fixed segments wins if it has more fixed segments than every
+ * route that matched the whole path. Routes that only matched by ignoring trailing segments don't count.
  */
 const findChainForSegments = (segments, chains) => {
     let match = null;
     let bestScore = 0;
+    let fullMatch = null;
+    let bestFullScore = 0;
+    let maxFullFixed = -1;
+    let wildcard = null;
     for (const chain of chains) {
         const matchedChain = matchesSegments(segments, chain);
         if (matchedChain !== null) {
@@ -36361,9 +36503,51 @@ const findChainForSegments = (segments, chains) => {
                 bestScore = score;
                 match = matchedChain;
             }
+            if (chainEndsWithWildcard(matchedChain)) {
+                if (wildcard === null || winsWildcard(matchedChain, wildcard)) {
+                    wildcard = matchedChain;
+                }
+            }
+            else if (!isPartialMatch(segments, matchedChain)) {
+                if (score > bestFullScore) {
+                    bestFullScore = score;
+                    fullMatch = matchedChain;
+                }
+                maxFullFixed = Math.max(maxFullFixed, countFixedSegments(matchedChain));
+            }
         }
     }
-    return match;
+    // Without a wildcard to match the rest of the path, routes can still ignore trailing segments.
+    if (wildcard === null) {
+        return match;
+    }
+    // Compare fixed segments rather than priority, since nesting under default routes raises the priority
+    return countFixedSegments(wildcard) > maxFullFixed ? wildcard : fullMatch;
+};
+/** Returns whether the chain matched the path segments only by ignoring some trailing segments. */
+const isPartialMatch = (segments, chain) => {
+    const matched = chainToSegments(chain);
+    return matched !== null && matched.length < segments.filter((s) => s !== '').length;
+};
+const chainEndsWithWildcard = (chain) => {
+    return endsWithWildcard(chain[chain.length - 1].segments);
+};
+/** Returns whether the wildcard chain beats `best` by fixed segments, then by priority. */
+const winsWildcard = (chain, best) => {
+    const chainFixed = countFixedSegments(chain);
+    const bestFixed = countFixedSegments(best);
+    return chainFixed > bestFixed || (chainFixed === bestFixed && computePriority(chain) > computePriority(best));
+};
+const countFixedSegments = (chain) => {
+    let count = 0;
+    for (const route of chain) {
+        for (const segment of withoutWildcard(route.segments)) {
+            if (segment !== '' && segment[0] !== ':') {
+                count++;
+            }
+        }
+    }
+    return count;
 };
 /**
  * Computes the priority of a chain.
@@ -36375,12 +36559,14 @@ const findChainForSegments = (segments, chains) => {
  * - /path/to/page
  *
  * The second one will be given a higher priority because "page" is a fixed segment (vs ":where", a parameter segment).
+ *
+ * A trailing wildcard is not counted.
  */
 const computePriority = (chain) => {
     let score = 1;
     let level = 1;
     for (const route of chain) {
-        for (const segment of route.segments) {
+        for (const segment of withoutWildcard(route.segments)) {
             if (segment[0] === ':') {
                 score += Math.pow(1, level);
             }
@@ -36402,6 +36588,12 @@ class RouterSegments {
         }
         return '';
     }
+    /** Consumes and returns the remaining non empty segments. */
+    rest() {
+        const rest = this.segments.filter((s) => s !== '');
+        this.segments = [];
+        return rest;
+    }
 }
 
 const readProp = (el, prop) => {
@@ -42816,11 +43008,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: '8d17feb9f9dcb9eb8e3b8ae6e831bdedb890771c', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'c5f0b913ff0a22d9bf02da48a313a613c2ac8fe7', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
-                'title-rtl': isRTL$1(this.el),
-            }) }, hAsync("div", { key: '0346aae3fca1e3ae443b1b511c44ab1f803cb103', class: "toolbar-title" }, hAsync("slot", { key: 'e1945845df471d5eb8c3cdeb568c478abf5ad70e' }))));
+                'title-rtl': document.dir === 'rtl',
+            }) }, hAsync("div", { key: '5253b9e39fb764bfe1e57370719139f8a83e9904', class: "toolbar-title" }, hAsync("slot", { key: 'e38b1eccb0175c36f8cab211aee7ce4d61fc9035' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -43308,9 +43500,9 @@ const iosTransitionAnimation = (navEl, opts) => {
         const TRANSFORM = 'transform';
         const CENTER = '0%';
         const OFF_OPACITY = 0.8;
-        const rtl = isRTL$1(navEl);
-        const OFF_RIGHT = rtl ? '-99.5%' : '99.5%';
-        const OFF_LEFT = rtl ? '33%' : '-33%';
+        const isRTL = navEl.ownerDocument.dir === 'rtl';
+        const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';
+        const OFF_LEFT = isRTL ? '33%' : '-33%';
         const enteringEl = opts.enteringEl;
         const leavingEl = opts.leavingEl;
         const backDirection = opts.direction === 'back';
@@ -43375,7 +43567,7 @@ const iosTransitionAnimation = (navEl, opts) => {
             }
         }
         const enteringContentHasLargeTitle = enteringEl.querySelector('ion-header.header-collapse-condense');
-        const { forward, backward } = createLargeTitleTransition(rootAnimation, rtl, backDirection, enteringEl, leavingEl);
+        const { forward, backward } = createLargeTitleTransition(rootAnimation, isRTL, backDirection, enteringEl, leavingEl);
         enteringToolBarEls.forEach((enteringToolBarEl) => {
             const enteringToolBar = createAnimation();
             enteringToolBar.addElement(enteringToolBarEl);
@@ -43439,7 +43631,7 @@ const iosTransitionAnimation = (navEl, opts) => {
                     enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
                 }
                 else {
-                    enteringToolBarBg.fromTo('transform', rtl ? 'translateX(-100%)' : 'translateX(100%)', 'translateX(0px)');
+                    enteringToolBarBg.fromTo('transform', isRTL ? 'translateX(-100%)' : 'translateX(100%)', 'translateX(0px)');
                 }
                 // forward direction, entering page has a back button
                 if (!forward) {
@@ -43449,7 +43641,7 @@ const iosTransitionAnimation = (navEl, opts) => {
                     const enteringBackBtnText = createAnimation();
                     enteringBackBtnText
                         .addElement(shadow(backButtonEl).querySelector('.button-text')) // REVIEW
-                        .fromTo(`transform`, rtl ? 'translateX(-100px)' : 'translateX(100px)', 'translateX(0px)');
+                        .fromTo(`transform`, isRTL ? 'translateX(-100px)' : 'translateX(100px)', 'translateX(0px)');
                     enteringToolBar.addAnimation(enteringBackBtnText);
                 }
             }
@@ -43472,7 +43664,7 @@ const iosTransitionAnimation = (navEl, opts) => {
                 // leaving content, back direction
                 leavingContent
                     .beforeClearStyles([OPACITY])
-                    .fromTo('transform', `translateX(${CENTER})`, rtl ? 'translateX(-100%)' : 'translateX(100%)');
+                    .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
                 const leavingPage = getIonPageElement(leavingEl);
                 rootAnimation.afterAddWrite(() => {
                     if (rootAnimation.getDirection() === 'normal') {
@@ -43552,10 +43744,10 @@ const iosTransitionAnimation = (navEl, opts) => {
                     if (!inactiveHeader) {
                         // leaving toolbar, back direction
                         leavingTitle
-                            .fromTo('transform', `translateX(${CENTER})`, rtl ? 'translateX(-100%)' : 'translateX(100%)')
+                            .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)')
                             .fromTo(OPACITY, 0.99, 0);
                     }
-                    leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, rtl ? 'translateX(-100%)' : 'translateX(100%)');
+                    leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, isRTL ? '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
@@ -43564,13 +43756,13 @@ const iosTransitionAnimation = (navEl, opts) => {
                         leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
                     }
                     else {
-                        leavingToolBarBg.fromTo('transform', 'translateX(0px)', rtl ? 'translateX(-100%)' : 'translateX(100%)');
+                        leavingToolBarBg.fromTo('transform', 'translateX(0px)', isRTL ? 'translateX(-100%)' : 'translateX(100%)');
                     }
                     if (backButtonEl && !backward) {
                         const leavingBackBtnText = createAnimation();
                         leavingBackBtnText
                             .addElement(shadow(backButtonEl).querySelector('.button-text')) // REVIEW
-                            .fromTo('transform', `translateX(${CENTER})`, `translateX(${(rtl ? -124 : 124) + 'px'})`);
+                            .fromTo('transform', `translateX(${CENTER})`, `translateX(${(isRTL ? -124 : 124) + 'px'})`);
                         leavingToolBar.addAnimation(leavingBackBtnText);
                     }
                 }