@ionic/core 8.6.5-nightly.20250711 → 8.6.5-nightly.20250715

package/components/ion-input-otp.js

@@ -33,6 +33,7 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
         this.isKeyboardNavigation = false;
         this.inputValues = [];
         this.hasFocus = false;
+        this.previousInputValues = [];
         /**
          * 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"`.
@@ -133,19 +134,12 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
             }
         };
         /**
-         * Handles keyboard navigation and input for the OTP component.
+         * Handles keyboard navigation for the OTP component.
          *
          * Navigation:
          * - Backspace: Clears current input and moves to previous box if empty
          * - Arrow Left/Right: Moves focus between input boxes
          * - Tab: Allows normal tab navigation between components
-         *
-         * Input Behavior:
-         * - Validates input against the allowed pattern
-         * - When entering a key in a filled box:
-         *   - Shifts existing values right if there is room
-         *   - Updates the value of the input group
-         *   - Prevents default behavior to avoid automatic focus shift
          */
         this.onKeyDown = (index) => (event) => {
             const { length } = this;
@@ -200,30 +194,31 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
                 // Let all tab events proceed normally
                 return;
             }
-            // If the input box contains a value and the key being
-            // entered is a valid key for the input box update the value
-            // and shift the values to the right if there is room.
-            if (this.inputValues[index] && this.validKeyPattern.test(event.key)) {
-                if (!this.inputValues[length - 1]) {
-                    for (let i = length - 1; i > index; i--) {
-                        this.inputValues[i] = this.inputValues[i - 1];
-                        this.inputRefs[i].value = this.inputValues[i] || '';
-                    }
-                }
-                this.inputValues[index] = event.key;
-                this.inputRefs[index].value = event.key;
-                this.updateValue(event);
-                // Prevent default to avoid the browser from
-                // automatically moving the focus to the next input
-                event.preventDefault();
-            }
         };
+        /**
+         * Processes all input scenarios for each input box.
+         *
+         * This function manages:
+         * 1. Autofill handling
+         * 2. Input validation
+         * 3. Full selection replacement or typing in an empty box
+         * 4. Inserting in the middle with available space (shifting)
+         * 5. Single character replacement
+         */
         this.onInput = (index) => (event) => {
+            var _a, _b;
             const { length, validKeyPattern } = this;
-            const value = event.target.value;
-            // If the value is longer than 1 character (autofill), split it into
-            // characters and filter out invalid ones
-            if (value.length > 1) {
+            const input = event.target;
+            const value = input.value;
+            const previousValue = this.previousInputValues[index] || '';
+            // 1. Autofill handling
+            // If the length of the value increases by more than 1 from the previous
+            // value, treat this as autofill. This is to prevent the case where the
+            // user is typing a single character into an input box containing a value
+            // as that will trigger this function with a value length of 2 characters.
+            const isAutofill = value.length - previousValue.length > 1;
+            if (isAutofill) {
+                // Distribute valid characters across input boxes
                 const validChars = value
                     .split('')
                     .filter((char) => validKeyPattern.test(char))
@@ -238,8 +233,10 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
                         });
                     });
                 }
-                // Update the value of the input group and emit the input change event
-                this.value = validChars.join('');
+                for (let i = 0; i < length; i++) {
+                    this.inputValues[i] = validChars[i] || '';
+                    this.inputRefs[i].value = validChars[i] || '';
+                }
                 this.updateValue(event);
                 // Focus the first empty input box or the last input box if all boxes
                 // are filled after a small delay to ensure the input boxes have been
@@ -249,20 +246,79 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
                     const nextIndex = validChars.length < length ? validChars.length : length - 1;
                     (_a = this.inputRefs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
                 }, 20);
+                this.previousInputValues = [...this.inputValues];
                 return;
             }
-            // Only allow input if it matches the pattern
-            if (value.length > 0 && !validKeyPattern.test(value)) {
-                this.inputRefs[index].value = '';
-                this.inputValues[index] = '';
+            // 2. Input validation
+            // If the character entered is invalid (does not match the pattern),
+            // restore the previous value and exit
+            if (value.length > 0 && !validKeyPattern.test(value[value.length - 1])) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
                 return;
             }
-            // For single character input, fill the current box
-            this.inputValues[index] = value;
-            this.updateValue(event);
-            if (value.length > 0) {
+            // 3. Full selection replacement or typing in an empty box
+            // If the user selects all text in the input box and types, or if the
+            // input box is empty, replace only this input box. If the box is empty,
+            // move to the next box, otherwise stay focused on this box.
+            const isAllSelected = input.selectionStart === 0 && input.selectionEnd === value.length;
+            const isEmpty = !this.inputValues[index];
+            if (isAllSelected || isEmpty) {
+                this.inputValues[index] = value;
+                input.value = value;
+                this.updateValue(event);
                 this.focusNext(index);
+                this.previousInputValues = [...this.inputValues];
+                return;
             }
+            // 4. Inserting in the middle with available space (shifting)
+            // If typing in a filled input box and there are empty boxes at the end,
+            // shift all values starting at the current box to the right, and insert
+            // the new character at the current box.
+            const hasAvailableBoxAtEnd = this.inputValues[this.inputValues.length - 1] === '';
+            if (this.inputValues[index] && hasAvailableBoxAtEnd && value.length === 2) {
+                // Get the inserted character (from event or by diffing value/previousValue)
+                let newChar = event.data;
+                if (!newChar) {
+                    newChar = value.split('').find((c, i) => c !== previousValue[i]) || value[value.length - 1];
+                }
+                // Validate the new character before shifting
+                if (!validKeyPattern.test(newChar)) {
+                    input.value = this.inputValues[index] || '';
+                    this.previousInputValues = [...this.inputValues];
+                    return;
+                }
+                // Shift values right from the end to the insertion point
+                for (let i = this.inputValues.length - 1; i > index; i--) {
+                    this.inputValues[i] = this.inputValues[i - 1];
+                    this.inputRefs[i].value = this.inputValues[i] || '';
+                }
+                this.inputValues[index] = newChar;
+                this.inputRefs[index].value = newChar;
+                this.updateValue(event);
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            // 5. Single character replacement
+            // Handles replacing a single character in a box containing a value based
+            // on the cursor position. We need the cursor position to determine which
+            // character was the last character typed. For example, if the user types "2"
+            // in an input box with the cursor at the beginning of the value of "6",
+            // the value will be "26", but we want to grab the "2" as the last character
+            // typed.
+            const cursorPos = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : value.length;
+            const newCharIndex = cursorPos - 1;
+            const newChar = (_b = value[newCharIndex]) !== null && _b !== void 0 ? _b : value[0];
+            // Check if the new character is valid before updating the value
+            if (!validKeyPattern.test(newChar)) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            this.inputValues[index] = newChar;
+            input.value = newChar;
+            this.updateValue(event);
+            this.previousInputValues = [...this.inputValues];
         };
         /**
          * Handles pasting text into the input OTP component.
@@ -272,7 +328,7 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
          * the next empty input after pasting.
          */
         this.onPaste = (event) => {
-            var _a, _b, _c;
+            var _a, _b;
             const { inputRefs, length, validKeyPattern } = this;
             event.preventDefault();
             const pastedText = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
@@ -299,13 +355,8 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
             this.updateValue(event);
             // Focus the next empty input after pasting
             // If all boxes are filled, focus the last input
-            const nextEmptyIndex = validChars.length;
-            if (nextEmptyIndex < length) {
-                (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-            else {
-                (_c = inputRefs[length - 1]) === null || _c === void 0 ? void 0 : _c.focus();
-            }
+            const nextEmptyIndex = validChars.length < length ? validChars.length : length - 1;
+            (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
         };
     }
     /**
@@ -444,6 +495,7 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
         });
         // Update the value without emitting events
         this.value = this.inputValues.join('');
+        this.previousInputValues = [...this.inputValues];
     }
     /**
      * Updates the value of the input group.
@@ -565,7 +617,7 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         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: 'df8fca036cedea0812185a02e3b655d7d76285e0', class: createColorClasses(color, {
+        return (h(Host, { key: 'f15a29fb17b681ef55885ca36d3d5f899cbaca83', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -573,10 +625,10 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: '831be3f939cf037f0eb8d7e37e0afd4ef9a3c2c5', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (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: '5311fedc34f7af3efd5f69e5a3d768055119c4f1', class: {
+            }) }, h("div", Object.assign({ key: 'd7e1d4edd8aafcf2ed4313301287282e90fc7e82', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (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: '3724a3159d02860971879a906092f9965f5a7c47', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: '9e8afa2f7fa76c3092582dc27770fdf565a1b9ba' }))));
+            } }, h("slot", { key: '11baa2624926a08274508afe0833d9237a8dc35c' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -604,6 +656,7 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
         "value": [1032],
         "inputValues": [32],
         "hasFocus": [32],
+        "previousInputValues": [32],
         "setFocus": [64]
     }, undefined, {
         "value": ["valueChanged"],

package/components/modal.js

@@ -1652,6 +1652,26 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
                 dragHandleEl.focus();
             }
         };
+        /**
+         * When the slot changes, we need to find all the modals in the slot
+         * and set the data-parent-ion-modal attribute on them so we can find them
+         * and dismiss them when we get dismissed.
+         * We need to do it this way because when a modal is opened, it's moved to
+         * the end of the body and is no longer an actual child of the modal.
+         */
+        this.onSlotChange = ({ target }) => {
+            const slot = target;
+            slot.assignedElements().forEach((el) => {
+                el.querySelectorAll('ion-modal').forEach((childModal) => {
+                    // We don't need to write to the DOM if the modal is already tagged
+                    // If this is a deeply nested modal, this effect should cascade so we don't
+                    // need to worry about another modal claiming the same child.
+                    if (childModal.getAttribute('data-parent-ion-modal') === null) {
+                        childModal.setAttribute('data-parent-ion-modal', this.el.id);
+                    }
+                });
+            });
+        };
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -1690,6 +1710,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     disconnectedCallback() {
         this.triggerController.removeClickListener();
         this.cleanupViewTransitionListener();
+        this.cleanupParentRemovalObserver();
     }
     componentWillLoad() {
         var _a;
@@ -1697,6 +1718,10 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
         const attributesToInherit = ['aria-label', 'role'];
         this.inheritedAttributes = inheritAttributes(el, attributesToInherit);
+        // Cache original parent before modal gets moved to body during presentation
+        if (el.parentNode) {
+            this.cachedOriginalParent = el.parentNode;
+        }
         /**
          * When using a controller modal you can set attributes
          * using the htmlAttributes property. Since the above attributes
@@ -1902,6 +1927,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         }
         // Initialize view transition listener for iOS card modals
         this.initViewTransitionListener();
+        // Initialize parent removal observer
+        this.initParentRemovalObserver();
         unlock();
     }
     initSwipeToClose() {
@@ -2015,6 +2042,12 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
          * in case the dismiss transition does run.
          */
         const unlock = await this.lockController.lock();
+        /**
+         * Dismiss all child modals. This is especially important in
+         * Angular and React because it's possible to lose control of a child
+         * modal when the parent modal is dismissed.
+         */
+        await this.dismissNestedModals();
         /**
          * If a canDismiss handler is responsible
          * for calling the dismiss method, we should
@@ -2056,6 +2089,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
                 this.gesture.destroy();
             }
             this.cleanupViewTransitionListener();
+            this.cleanupParentRemovalObserver();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -2233,6 +2267,59 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             }
         }
     }
+    async dismissNestedModals() {
+        const nestedModals = document.querySelectorAll(`ion-modal[data-parent-ion-modal="${this.el.id}"]`);
+        nestedModals === null || nestedModals === void 0 ? void 0 : nestedModals.forEach(async (modal) => {
+            await modal.dismiss(undefined, 'parent-dismissed');
+        });
+    }
+    initParentRemovalObserver() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // Only observe if we have a cached parent and are in browser environment
+        if (typeof window === 'undefined' || !this.cachedOriginalParent) {
+            return;
+        }
+        // Don't observe document or fragment nodes as they can't be "removed"
+        if (this.cachedOriginalParent.nodeType === Node.DOCUMENT_NODE ||
+            this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return;
+        }
+        this.parentRemovalObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+                    // Check if our cached original parent was removed
+                    const cachedParentWasRemoved = Array.from(mutation.removedNodes).some((node) => {
+                        var _a, _b;
+                        const isDirectMatch = node === this.cachedOriginalParent;
+                        const isContainedMatch = this.cachedOriginalParent
+                            ? (_b = (_a = node).contains) === null || _b === void 0 ? void 0 : _b.call(_a, this.cachedOriginalParent)
+                            : false;
+                        return isDirectMatch || isContainedMatch;
+                    });
+                    // Also check if parent is no longer connected to DOM
+                    const cachedParentDisconnected = this.cachedOriginalParent && !this.cachedOriginalParent.isConnected;
+                    if (cachedParentWasRemoved || cachedParentDisconnected) {
+                        this.dismiss(undefined, 'parent-removed');
+                        // Release the reference to the cached original parent
+                        // so we don't have a memory leak
+                        this.cachedOriginalParent = undefined;
+                    }
+                }
+            });
+        });
+        // Observe document body with subtree to catch removals at any level
+        this.parentRemovalObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    cleanupParentRemovalObserver() {
+        var _a;
+        (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentRemovalObserver = undefined;
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -2240,20 +2327,20 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '1980fa23331381c568a2be8091d888e09754fc52', "no-router": true,
+        return (h(Host, Object.assign({ key: 'f274213df23995f7d3495648c828dbab6d040a53', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'ba94b055c064e2907eabbe6d7a43cb52adff1048', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '991f47859250d2143275ebb9b0b01a6ea8c491c0', class: "modal-shadow" }), h("div", Object.assign({ key: '02ecf8ac6a5bdb309ff993cc74a3911e99502a89',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '8893496a8ce7364b3695a628eb4e6bd8c275f78e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '66ceabd642566503f2c75e84ef7f643d73a97428', class: "modal-shadow" }), h("div", Object.assign({ key: '4cb89ce5b84219271d0d203babf066348a4c5433',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '0180a4d6952e41bfd736272d1a49d47d86ca7fef', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '9062f7bcd45203642ce7ca0521b2bb0bf1f77192', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'd062f330675f730ad70c23267baed200ca9b43b0' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '34a29599e80254186c6d7d77b3161abcda76eab7', onSlotchange: this.onSlotChange }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -32,6 +32,7 @@ const InputOTP = class {
         this.isKeyboardNavigation = false;
         this.inputValues = [];
         this.hasFocus = false;
+        this.previousInputValues = [];
         /**
          * 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"`.
@@ -132,19 +133,12 @@ const InputOTP = class {
             }
         };
         /**
-         * Handles keyboard navigation and input for the OTP component.
+         * Handles keyboard navigation for the OTP component.
          *
          * Navigation:
          * - Backspace: Clears current input and moves to previous box if empty
          * - Arrow Left/Right: Moves focus between input boxes
          * - Tab: Allows normal tab navigation between components
-         *
-         * Input Behavior:
-         * - Validates input against the allowed pattern
-         * - When entering a key in a filled box:
-         *   - Shifts existing values right if there is room
-         *   - Updates the value of the input group
-         *   - Prevents default behavior to avoid automatic focus shift
          */
         this.onKeyDown = (index) => (event) => {
             const { length } = this;
@@ -199,30 +193,31 @@ const InputOTP = class {
                 // Let all tab events proceed normally
                 return;
             }
-            // If the input box contains a value and the key being
-            // entered is a valid key for the input box update the value
-            // and shift the values to the right if there is room.
-            if (this.inputValues[index] && this.validKeyPattern.test(event.key)) {
-                if (!this.inputValues[length - 1]) {
-                    for (let i = length - 1; i > index; i--) {
-                        this.inputValues[i] = this.inputValues[i - 1];
-                        this.inputRefs[i].value = this.inputValues[i] || '';
-                    }
-                }
-                this.inputValues[index] = event.key;
-                this.inputRefs[index].value = event.key;
-                this.updateValue(event);
-                // Prevent default to avoid the browser from
-                // automatically moving the focus to the next input
-                event.preventDefault();
-            }
         };
+        /**
+         * Processes all input scenarios for each input box.
+         *
+         * This function manages:
+         * 1. Autofill handling
+         * 2. Input validation
+         * 3. Full selection replacement or typing in an empty box
+         * 4. Inserting in the middle with available space (shifting)
+         * 5. Single character replacement
+         */
         this.onInput = (index) => (event) => {
+            var _a, _b;
             const { length, validKeyPattern } = this;
-            const value = event.target.value;
-            // If the value is longer than 1 character (autofill), split it into
-            // characters and filter out invalid ones
-            if (value.length > 1) {
+            const input = event.target;
+            const value = input.value;
+            const previousValue = this.previousInputValues[index] || '';
+            // 1. Autofill handling
+            // If the length of the value increases by more than 1 from the previous
+            // value, treat this as autofill. This is to prevent the case where the
+            // user is typing a single character into an input box containing a value
+            // as that will trigger this function with a value length of 2 characters.
+            const isAutofill = value.length - previousValue.length > 1;
+            if (isAutofill) {
+                // Distribute valid characters across input boxes
                 const validChars = value
                     .split('')
                     .filter((char) => validKeyPattern.test(char))
@@ -237,8 +232,10 @@ const InputOTP = class {
                         });
                     });
                 }
-                // Update the value of the input group and emit the input change event
-                this.value = validChars.join('');
+                for (let i = 0; i < length; i++) {
+                    this.inputValues[i] = validChars[i] || '';
+                    this.inputRefs[i].value = validChars[i] || '';
+                }
                 this.updateValue(event);
                 // Focus the first empty input box or the last input box if all boxes
                 // are filled after a small delay to ensure the input boxes have been
@@ -248,20 +245,79 @@ const InputOTP = class {
                     const nextIndex = validChars.length < length ? validChars.length : length - 1;
                     (_a = this.inputRefs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
                 }, 20);
+                this.previousInputValues = [...this.inputValues];
                 return;
             }
-            // Only allow input if it matches the pattern
-            if (value.length > 0 && !validKeyPattern.test(value)) {
-                this.inputRefs[index].value = '';
-                this.inputValues[index] = '';
+            // 2. Input validation
+            // If the character entered is invalid (does not match the pattern),
+            // restore the previous value and exit
+            if (value.length > 0 && !validKeyPattern.test(value[value.length - 1])) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
                 return;
             }
-            // For single character input, fill the current box
-            this.inputValues[index] = value;
-            this.updateValue(event);
-            if (value.length > 0) {
+            // 3. Full selection replacement or typing in an empty box
+            // If the user selects all text in the input box and types, or if the
+            // input box is empty, replace only this input box. If the box is empty,
+            // move to the next box, otherwise stay focused on this box.
+            const isAllSelected = input.selectionStart === 0 && input.selectionEnd === value.length;
+            const isEmpty = !this.inputValues[index];
+            if (isAllSelected || isEmpty) {
+                this.inputValues[index] = value;
+                input.value = value;
+                this.updateValue(event);
                 this.focusNext(index);
+                this.previousInputValues = [...this.inputValues];
+                return;
             }
+            // 4. Inserting in the middle with available space (shifting)
+            // If typing in a filled input box and there are empty boxes at the end,
+            // shift all values starting at the current box to the right, and insert
+            // the new character at the current box.
+            const hasAvailableBoxAtEnd = this.inputValues[this.inputValues.length - 1] === '';
+            if (this.inputValues[index] && hasAvailableBoxAtEnd && value.length === 2) {
+                // Get the inserted character (from event or by diffing value/previousValue)
+                let newChar = event.data;
+                if (!newChar) {
+                    newChar = value.split('').find((c, i) => c !== previousValue[i]) || value[value.length - 1];
+                }
+                // Validate the new character before shifting
+                if (!validKeyPattern.test(newChar)) {
+                    input.value = this.inputValues[index] || '';
+                    this.previousInputValues = [...this.inputValues];
+                    return;
+                }
+                // Shift values right from the end to the insertion point
+                for (let i = this.inputValues.length - 1; i > index; i--) {
+                    this.inputValues[i] = this.inputValues[i - 1];
+                    this.inputRefs[i].value = this.inputValues[i] || '';
+                }
+                this.inputValues[index] = newChar;
+                this.inputRefs[index].value = newChar;
+                this.updateValue(event);
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            // 5. Single character replacement
+            // Handles replacing a single character in a box containing a value based
+            // on the cursor position. We need the cursor position to determine which
+            // character was the last character typed. For example, if the user types "2"
+            // in an input box with the cursor at the beginning of the value of "6",
+            // the value will be "26", but we want to grab the "2" as the last character
+            // typed.
+            const cursorPos = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : value.length;
+            const newCharIndex = cursorPos - 1;
+            const newChar = (_b = value[newCharIndex]) !== null && _b !== void 0 ? _b : value[0];
+            // Check if the new character is valid before updating the value
+            if (!validKeyPattern.test(newChar)) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            this.inputValues[index] = newChar;
+            input.value = newChar;
+            this.updateValue(event);
+            this.previousInputValues = [...this.inputValues];
         };
         /**
          * Handles pasting text into the input OTP component.
@@ -271,7 +327,7 @@ const InputOTP = class {
          * the next empty input after pasting.
          */
         this.onPaste = (event) => {
-            var _a, _b, _c;
+            var _a, _b;
             const { inputRefs, length, validKeyPattern } = this;
             event.preventDefault();
             const pastedText = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
@@ -298,13 +354,8 @@ const InputOTP = class {
             this.updateValue(event);
             // Focus the next empty input after pasting
             // If all boxes are filled, focus the last input
-            const nextEmptyIndex = validChars.length;
-            if (nextEmptyIndex < length) {
-                (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-            else {
-                (_c = inputRefs[length - 1]) === null || _c === void 0 ? void 0 : _c.focus();
-            }
+            const nextEmptyIndex = validChars.length < length ? validChars.length : length - 1;
+            (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
         };
     }
     /**
@@ -443,6 +494,7 @@ const InputOTP = class {
         });
         // Update the value without emitting events
         this.value = this.inputValues.join('');
+        this.previousInputValues = [...this.inputValues];
     }
     /**
      * Updates the value of the input group.
@@ -564,7 +616,7 @@ const InputOTP = class {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         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 (index.h(index.Host, { key: 'df8fca036cedea0812185a02e3b655d7d76285e0', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'f15a29fb17b681ef55885ca36d3d5f899cbaca83', class: theme.createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -572,10 +624,10 @@ const InputOTP = class {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, index.h("div", Object.assign({ key: '831be3f939cf037f0eb8d7e37e0afd4ef9a3c2c5', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper" }, index.h("input", { class: "native-input", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && index.h("div", { class: "input-otp-separator" }))))), index.h("div", { key: '5311fedc34f7af3efd5f69e5a3d768055119c4f1', class: {
+            }) }, index.h("div", Object.assign({ key: 'd7e1d4edd8aafcf2ed4313301287282e90fc7e82', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper" }, index.h("input", { class: "native-input", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && index.h("div", { class: "input-otp-separator" }))))), index.h("div", { key: '3724a3159d02860971879a906092f9965f5a7c47', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, index.h("slot", { key: '9e8afa2f7fa76c3092582dc27770fdf565a1b9ba' }))));
+            } }, index.h("slot", { key: '11baa2624926a08274508afe0833d9237a8dc35c' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {