@ionic/core 8.5.7-dev.11747865624.1ff4bb55 → 8.5.7-dev.11748379940.12698faf

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

@@ -485,22 +485,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '697c6decb1fb8403777db7a37f54853863421ad9', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'd35f44c3afcf8e075f7f845416cb8500606d3546', class: "native-wrapper" }, h("slot", { key: '41ef868873ffd8262d53fd1a5e506c62030dc3f1', name: "start" }), h("input", Object.assign({ key: 'd98e0aaa285b5424e9589ce36ed4f9910a6859cd', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '367d1a1c2eb69d4887fe29ab96ead3230d7dd513', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '697c6decb1fb8403777db7a37f54853863421ad9', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'd35f44c3afcf8e075f7f845416cb8500606d3546', class: "native-wrapper" }, h("slot", { key: '41ef868873ffd8262d53fd1a5e506c62030dc3f1', name: "start" }), h("input", Object.assign({ key: 'd98e0aaa285b5424e9589ce36ed4f9910a6859cd', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '78b3470646ec4fc237d33229a132164b089538a2', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onFocusin: (ev) => {
-                /**
-                 * Prevent the focusin event from bubbling otherwise it will cause the focusin
-                 * event listener in scroll assist to fire. When this fires, focus will be moved
-                 * back to the input even if the clear button was never tapped. This poses issues
-                 * for screen readers as it means users would be unable to swipe past the clear button.
-                 */
-                ev.stopPropagation();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '69afc5c7ea6bfa1bff301635281b536e84277965', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '6f770a0ab703b4d19e936a0e1955274bc9f3e941', name: "end" })), shouldRenderHighlight && h("div", { key: 'a048e240432c4d5e11b2c92fa99a0cff07f9a778', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '686ca853cf0e074ab32d01c077f066b5b4ab2dad', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '354e0bde7c7066a3ce31f852923e334859fedb78', name: "end" })), shouldRenderHighlight && h("div", { key: '5fa78de0aee8883506ccdbdf1c834a3fa8503c87', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -167,6 +167,10 @@
   text-align: center;
 }
 
+.input-otp-description-hidden {
+  display: none;
+}
+
 .input-otp-separator {
   border-radius: var(--separator-border-radius);
   flex-shrink: 0;

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

@@ -2,12 +2,14 @@
  * (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 { 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.parsedSeparators = [];
@@ -196,21 +198,19 @@ export class InputOTP {
                 .split('')
                 .filter((char) => validKeyPattern.test(char))
                 .slice(0, length);
-            // Find the first empty input
-            const startIndex = this.getFirstEmptyIndex();
-            // If all boxes are filled, start at 0
-            const pasteStart = startIndex === -1 ? 0 : startIndex;
+            // Always paste starting at the first box
             validChars.forEach((char, index) => {
-                const targetIndex = pasteStart + index;
-                if (targetIndex < length) {
-                    this.inputRefs[targetIndex].value = char;
-                    this.inputValues[targetIndex] = char;
+                if (index < length) {
+                    this.inputRefs[index].value = char;
+                    this.inputValues[index] = char;
                 }
             });
+            // Update the value so that all input boxes are updated
+            this.value = validChars.join('');
             this.updateValue(event);
             // Focus the next empty input after pasting
             // If all boxes are filled, focus the last input
-            const nextEmptyIndex = pasteStart + validChars.length;
+            const nextEmptyIndex = validChars.length;
             if (nextEmptyIndex < length) {
                 (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
             }
@@ -329,9 +329,13 @@ export class InputOTP {
         this.parsedSeparators = separatorValues.filter((pos) => pos <= length);
     }
     componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
         this.processSeparators();
         this.initializeValues();
     }
+    componentDidLoad() {
+        this.updateTabIndexes();
+    }
     /**
      * Initializes the input values array based on the current value prop.
      * This splits the value into individual characters and validates them against
@@ -339,22 +343,27 @@ export class InputOTP {
      * input boxes and the value of the input group is updated.
      */
     initializeValues() {
-        if (this.value != null && String(this.value).length > 0) {
-            const chars = String(this.value).split('').slice(0, this.length);
-            chars.forEach((char, index) => {
-                if (this.validKeyPattern.test(char)) {
-                    this.inputValues[index] = char;
-                }
-            });
-            // Update the value without emitting events
-            this.value = this.inputValues.join('');
+        // Clear all input values
+        this.inputValues = Array(this.length).fill('');
+        // If the value is null, undefined, or an empty string, return
+        if (this.value == null || String(this.value).length === 0) {
+            return;
         }
+        // Split the value into individual characters and validate
+        // them against the allowed pattern
+        const chars = String(this.value).split('').slice(0, this.length);
+        chars.forEach((char, index) => {
+            if (this.validKeyPattern.test(char)) {
+                this.inputValues[index] = char;
+            }
+        });
+        // Update the value without emitting events
+        this.value = this.inputValues.join('');
     }
     /**
-     * Resets the input values and focus state.
+     * Resets the value and focus state.
      */
     async reset() {
-        this.inputValues = Array(this.length).fill('');
         this.value = '';
         this.focusedValue = null;
         this.hasFocus = false;
@@ -429,6 +438,7 @@ export class InputOTP {
         if (newValue.length === length) {
             this.ionComplete.emit({ value: newValue });
         }
+        this.updateTabIndexes();
     }
     /**
      * Emits an `ionChange` event.
@@ -495,12 +505,14 @@ export class InputOTP {
                 break;
             }
         }
-        // Update tabIndex for all inputs
+        // Update tabIndex and aria-hidden for all inputs
         inputRefs.forEach((input, index) => {
-            // If all boxes are filled, make the last box tabbable
-            // Otherwise, make the first empty box tabbable
             const shouldBeTabbable = firstEmptyIndex === -1 ? index === length - 1 : firstEmptyIndex === index;
             input.tabIndex = shouldBeTabbable ? 0 : -1;
+            // If the input is empty and not the first empty input,
+            // it should be hidden from screen readers.
+            const isEmpty = !inputValues[index] || inputValues[index] === '';
+            input.setAttribute('aria-hidden', isEmpty && !shouldBeTabbable ? 'true' : 'false');
         });
     }
     /**
@@ -527,12 +539,14 @@ export class InputOTP {
         return firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
     }
     render() {
-        const { autocapitalize, color, disabled, fill, hasFocus, inputId, inputRefs, inputValues, length, readonly, shape, size, } = this;
+        var _a, _b;
+        const { autocapitalize, color, disabled, el, fill, hasFocus, inheritedAttributes, inputId, inputRefs, inputValues, length, readonly, shape, size, } = this;
         const mode = getIonMode(this);
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        return (h(Host, { key: '884f6a95d40a90eab486cd17bc3e34ee474fd7aa', class: createColorClasses(color, {
+        const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
+        return (h(Host, { key: '973743fa99d77dbdaaf9b630b64180a189b5d778', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -540,7 +554,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", { key: 'eb7ed18905b9c3c9ffa2b6f2866b459a509c6191', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, 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, maxLength: 1, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: index === 0 ? 'one-time-code' : 'off', ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '796d62711429899348c3e6b8583167113cd610f3', class: "input-otp-description" }, h("slot", { key: '30f1b8fedb63d8e3ed7b96139be218ee4584f73b' }))));
+            }) }, h("div", Object.assign({ key: '3891cbdc07d4fa017ea04590bbb6225ab68deff2', 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, maxLength: 1, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: index === 0 ? 'one-time-code' : 'off', ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '0d3cfa8c081552d0c52a544a1c52c0e3d5d4f532', class: {
+                'input-otp-description': true,
+                'input-otp-description-hidden': !hasDescription,
+            } }, h("slot", { key: '13c3f795956749ccdf396bfb0ff882a9c9e9ce81' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }
@@ -949,7 +966,7 @@ export class InputOTP {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Resets the input values and focus state.",
+                    "text": "Resets the value and focus state.",
                     "tags": []
                 }
             },

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

@@ -167,6 +167,10 @@
   text-align: center;
 }
 
+.input-otp-description-hidden {
+  display: none;
+}
+
 .input-otp-separator {
   border-radius: var(--separator-border-radius);
   flex-shrink: 0;

package/dist/collection/utils/input-shims/hacks/scroll-assist.js

@@ -130,6 +130,7 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
  * focus an input but not have scroll assist run again.
  */
 const setManualFocus = (el) => {
+    var _a;
     /**
      * If element is already focused then
      * a new focusin event will not be dispatched
@@ -138,6 +139,28 @@ const setManualFocus = (el) => {
     if (document.activeElement === el) {
         return;
     }
+    /**
+     * Optimization for scenarios where the currently focused element is a sibling
+     * of the target element. In such cases, we avoid setting `SKIP_SCROLL_ASSIST`.
+     *
+     * This is crucial for accessibility: input elements can now contain focusable
+     * siblings (e.g., clear buttons, slotted elements). If we didn't skip setting
+     * the attribute here, screen readers would be unable to navigate to and interact
+     * with these sibling elements.
+     *
+     * Without this check, we would need to call `ev.stopPropagation()` on the
+     * 'focusin' event of each focusable sibling to prevent the scroll assist
+     * listener from incorrectly moving focus back to the input. That approach
+     * would be less maintainable and more error-prone.
+     */
+    const inputId = el.getAttribute('id');
+    const label = el.closest(`label[for="${inputId}"]`);
+    const activeElLabel = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`label[for="${inputId}"]`);
+    if (label !== null && label === activeElLabel) {
+        // If the label is the same as the active element label, then
+        // we don't need to set the `SKIP_SCROLL_ASSIST` and reset focus.
+        return;
+    }
     el.setAttribute(SKIP_SCROLL_ASSIST, 'true');
     el.focus();
 };

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-05-21T22:15:29",
+  "timestamp": "2025-05-27T21:07:25",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.29.3",
@@ -13530,7 +13530,7 @@
           },
           "signature": "reset() => Promise<void>",
           "parameters": [],
-          "docs": "Resets the input values and focus state.",
+          "docs": "Resets the value and focus state.",
           "docsTags": []
         },
         {

package/dist/esm/{input-shims-qlIPzMSm.js → input-shims-Km36_5AQ.js}

@@ -372,6 +372,7 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
  * focus an input but not have scroll assist run again.
  */
 const setManualFocus = (el) => {
+    var _a;
     /**
      * If element is already focused then
      * a new focusin event will not be dispatched
@@ -380,6 +381,28 @@ const setManualFocus = (el) => {
     if (document.activeElement === el) {
         return;
     }
+    /**
+     * Optimization for scenarios where the currently focused element is a sibling
+     * of the target element. In such cases, we avoid setting `SKIP_SCROLL_ASSIST`.
+     *
+     * This is crucial for accessibility: input elements can now contain focusable
+     * siblings (e.g., clear buttons, slotted elements). If we didn't skip setting
+     * the attribute here, screen readers would be unable to navigate to and interact
+     * with these sibling elements.
+     *
+     * Without this check, we would need to call `ev.stopPropagation()` on the
+     * 'focusin' event of each focusable sibling to prevent the scroll assist
+     * listener from incorrectly moving focus back to the input. That approach
+     * would be less maintainable and more error-prone.
+     */
+    const inputId = el.getAttribute('id');
+    const label = el.closest(`label[for="${inputId}"]`);
+    const activeElLabel = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`label[for="${inputId}"]`);
+    if (label !== null && label === activeElLabel) {
+        // If the label is the same as the active element label, then
+        // we don't need to set the `SKIP_SCROLL_ASSIST` and reset focus.
+        return;
+    }
     el.setAttribute(SKIP_SCROLL_ASSIST, 'true');
     el.focus();
 };

package/dist/esm/ion-app_8.entry.js

@@ -40,7 +40,7 @@ const App = class {
                      * platforms proceed into this block.
                      */
                     const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
-                    import('./input-shims-qlIPzMSm.js').then((module) => module.startInputShims(config, platform));
+                    import('./input-shims-Km36_5AQ.js').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('./hardware-back-button-pnZ0X1YR.js');
                 const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();

package/dist/esm/ion-input-otp.entry.js

@@ -2,14 +2,15 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, h, F as Fragment, d as Host, g as getElement } from './index-3GtB1kQI.js';
+import { i as inheritAriaAttributes } from './helpers-CzIihwFO.js';
 import { p as printIonWarning } from './index-CEo1SqXS.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-Dw-MNnQB.js';
 
-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-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);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 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-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);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 InputOTP = class {
     constructor(hostRef) {
@@ -19,6 +20,7 @@ const InputOTP = class {
         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.parsedSeparators = [];
@@ -207,21 +209,19 @@ const InputOTP = class {
                 .split('')
                 .filter((char) => validKeyPattern.test(char))
                 .slice(0, length);
-            // Find the first empty input
-            const startIndex = this.getFirstEmptyIndex();
-            // If all boxes are filled, start at 0
-            const pasteStart = startIndex === -1 ? 0 : startIndex;
+            // Always paste starting at the first box
             validChars.forEach((char, index) => {
-                const targetIndex = pasteStart + index;
-                if (targetIndex < length) {
-                    this.inputRefs[targetIndex].value = char;
-                    this.inputValues[targetIndex] = char;
+                if (index < length) {
+                    this.inputRefs[index].value = char;
+                    this.inputValues[index] = char;
                 }
             });
+            // Update the value so that all input boxes are updated
+            this.value = validChars.join('');
             this.updateValue(event);
             // Focus the next empty input after pasting
             // If all boxes are filled, focus the last input
-            const nextEmptyIndex = pasteStart + validChars.length;
+            const nextEmptyIndex = validChars.length;
             if (nextEmptyIndex < length) {
                 (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
             }
@@ -340,9 +340,13 @@ const InputOTP = class {
         this.parsedSeparators = separatorValues.filter((pos) => pos <= length);
     }
     componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
         this.processSeparators();
         this.initializeValues();
     }
+    componentDidLoad() {
+        this.updateTabIndexes();
+    }
     /**
      * Initializes the input values array based on the current value prop.
      * This splits the value into individual characters and validates them against
@@ -350,22 +354,27 @@ const InputOTP = class {
      * input boxes and the value of the input group is updated.
      */
     initializeValues() {
-        if (this.value != null && String(this.value).length > 0) {
-            const chars = String(this.value).split('').slice(0, this.length);
-            chars.forEach((char, index) => {
-                if (this.validKeyPattern.test(char)) {
-                    this.inputValues[index] = char;
-                }
-            });
-            // Update the value without emitting events
-            this.value = this.inputValues.join('');
+        // Clear all input values
+        this.inputValues = Array(this.length).fill('');
+        // If the value is null, undefined, or an empty string, return
+        if (this.value == null || String(this.value).length === 0) {
+            return;
         }
+        // Split the value into individual characters and validate
+        // them against the allowed pattern
+        const chars = String(this.value).split('').slice(0, this.length);
+        chars.forEach((char, index) => {
+            if (this.validKeyPattern.test(char)) {
+                this.inputValues[index] = char;
+            }
+        });
+        // Update the value without emitting events
+        this.value = this.inputValues.join('');
     }
     /**
-     * Resets the input values and focus state.
+     * Resets the value and focus state.
      */
     async reset() {
-        this.inputValues = Array(this.length).fill('');
         this.value = '';
         this.focusedValue = null;
         this.hasFocus = false;
@@ -440,6 +449,7 @@ const InputOTP = class {
         if (newValue.length === length) {
             this.ionComplete.emit({ value: newValue });
         }
+        this.updateTabIndexes();
     }
     /**
      * Emits an `ionChange` event.
@@ -506,12 +516,14 @@ const InputOTP = class {
                 break;
             }
         }
-        // Update tabIndex for all inputs
+        // Update tabIndex and aria-hidden for all inputs
         inputRefs.forEach((input, index) => {
-            // If all boxes are filled, make the last box tabbable
-            // Otherwise, make the first empty box tabbable
             const shouldBeTabbable = firstEmptyIndex === -1 ? index === length - 1 : firstEmptyIndex === index;
             input.tabIndex = shouldBeTabbable ? 0 : -1;
+            // If the input is empty and not the first empty input,
+            // it should be hidden from screen readers.
+            const isEmpty = !inputValues[index] || inputValues[index] === '';
+            input.setAttribute('aria-hidden', isEmpty && !shouldBeTabbable ? 'true' : 'false');
         });
     }
     /**
@@ -538,12 +550,14 @@ const InputOTP = class {
         return firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
     }
     render() {
-        const { autocapitalize, color, disabled, fill, hasFocus, inputId, inputRefs, inputValues, length, readonly, shape, size, } = this;
+        var _a, _b;
+        const { autocapitalize, color, disabled, el, fill, hasFocus, inheritedAttributes, inputId, inputRefs, inputValues, length, readonly, shape, size, } = this;
         const mode = getIonMode(this);
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        return (h(Host, { key: '884f6a95d40a90eab486cd17bc3e34ee474fd7aa', class: createColorClasses(color, {
+        const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
+        return (h(Host, { key: '973743fa99d77dbdaaf9b630b64180a189b5d778', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -551,7 +565,10 @@ const InputOTP = class {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", { key: 'eb7ed18905b9c3c9ffa2b6f2866b459a509c6191', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, 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, maxLength: 1, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: index === 0 ? 'one-time-code' : 'off', ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '796d62711429899348c3e6b8583167113cd610f3', class: "input-otp-description" }, h("slot", { key: '30f1b8fedb63d8e3ed7b96139be218ee4584f73b' }))));
+            }) }, h("div", Object.assign({ key: '3891cbdc07d4fa017ea04590bbb6225ab68deff2', 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, maxLength: 1, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: index === 0 ? 'one-time-code' : 'off', ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '0d3cfa8c081552d0c52a544a1c52c0e3d5d4f532', class: {
+                'input-otp-description': true,
+                'input-otp-description-hidden': !hasDescription,
+            } }, h("slot", { key: '13c3f795956749ccdf396bfb0ff882a9c9e9ce81' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-input.entry.js

@@ -489,22 +489,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '697c6decb1fb8403777db7a37f54853863421ad9', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'd35f44c3afcf8e075f7f845416cb8500606d3546', class: "native-wrapper" }, h("slot", { key: '41ef868873ffd8262d53fd1a5e506c62030dc3f1', name: "start" }), h("input", Object.assign({ key: 'd98e0aaa285b5424e9589ce36ed4f9910a6859cd', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '367d1a1c2eb69d4887fe29ab96ead3230d7dd513', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '697c6decb1fb8403777db7a37f54853863421ad9', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'd35f44c3afcf8e075f7f845416cb8500606d3546', class: "native-wrapper" }, h("slot", { key: '41ef868873ffd8262d53fd1a5e506c62030dc3f1', name: "start" }), h("input", Object.assign({ key: 'd98e0aaa285b5424e9589ce36ed4f9910a6859cd', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '78b3470646ec4fc237d33229a132164b089538a2', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onFocusin: (ev) => {
-                /**
-                 * Prevent the focusin event from bubbling otherwise it will cause the focusin
-                 * event listener in scroll assist to fire. When this fires, focus will be moved
-                 * back to the input even if the clear button was never tapped. This poses issues
-                 * for screen readers as it means users would be unable to swipe past the clear button.
-                 */
-                ev.stopPropagation();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '69afc5c7ea6bfa1bff301635281b536e84277965', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '6f770a0ab703b4d19e936a0e1955274bc9f3e941', name: "end" })), shouldRenderHighlight && h("div", { key: 'a048e240432c4d5e11b2c92fa99a0cff07f9a778', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '686ca853cf0e074ab32d01c077f066b5b4ab2dad', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '354e0bde7c7066a3ce31f852923e334859fedb78', name: "end" })), shouldRenderHighlight && h("div", { key: '5fa78de0aee8883506ccdbdf1c834a3fa8503c87', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {