@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -1,19 +1,15 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, f as printIonWarning, h, F as Fragment, d as Host, g as getElement } from './index-C0EQceqV.js';
-import { i as inheritAriaAttributes } from './helpers-DfF5_wJc.js';
-import { r as reportValidityToElementInternals } from './validity-BjW8SOqw.js';
-import { i as isRTL } from './dir-C53feagD.js';
-import { c as createColorClasses } from './theme-DaJxRxSQ.js';
-import { b as getIonMode } from './ionic-global-CEwbmRLz.js';
-import './focus-visible-vXpMhGrs.js';
+import { r as registerInstance, c as createEvent, g as getElement, f as printIonWarning, h, F as Fragment, d as Host } from './index-ChhhtsGZ.js';
+import { i as inheritAriaAttributes } from './helpers-DexiPLIC.js';
+import { i as isRTL } from './dir-B-FxiyeI.js';
+import { c as createColorClasses } from './theme-byZM6qHV.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
 
-const inputOtpIonicCss = () => `:host{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--separator-height:var(--separator-width);--highlight-color:var(--highlight-color-focused);display:block;position:relative}.input-otp-group{-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{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{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);font-family:inherit;font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.has-focus) .native-input{caret-color:var(--highlight-color)}.input-otp-description{text-align:center}.input-otp-description-hidden{display:none}.input-otp-separator{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)}:host(.input-otp-disabled),:host(.input-otp-disabled) .native-input:disabled{cursor:not-allowed}:host(.has-focus) .native-input:focus{--border-color:var(--highlight-color);outline:none}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host{--padding-top:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-0, var(--token-scale-0, 0px));--padding-bottom:var(--token-space-400, var(--token-scale-400, 16px));--padding-start:var(--token-space-0, var(--token-scale-0, 0px));--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--min-width:var(--token-scale-1000, 40px);--border-width:var(--token-border-size-025, var(--token-scale-025, 1px));--border-style:var(--token-border-style-solid, solid);--border-color:var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));--separator-width:var(--token-scale-200, 8px);--separator-border-radius:var(--token-border-radius-full, 999px);--separator-color:var(--token-bg-neutral-subtle-press, var(--token-primitives-neutral-400, #d5d5d5));--highlight-color-focused:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--highlight-color-valid:var(--token-border-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23)));--highlight-color-invalid:var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none}:host(.has-focus) .native-input:focus{--border-width:var(--token-border-size-050, var(--token-scale-050, 2px))}.input-otp-description{font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}:host(.input-otp-size-small){--width:var(--token-scale-1000, 40px);--height:var(--token-scale-1000, 40px)}:host(.input-otp-size-small) .input-otp-group{gap:var(--token-space-200, var(--token-scale-200, 8px))}:host(.input-otp-size-medium){--width:var(--token-scale-1200, 48px);--height:var(--token-scale-1200, 48px)}:host(.input-otp-size-large){--width:var(--token-scale-1400, 56px);--height:var(--token-scale-1400, 56px)}:host(.input-otp-size-medium) .input-otp-group,:host(.input-otp-size-large) .input-otp-group{gap:var(--token-space-300, var(--token-scale-300, 12px))}:host(.input-otp-shape-round){--border-radius:var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)))}:host(.input-otp-shape-soft){--border-radius:var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)))}:host(.input-otp-shape-rectangular){--border-radius:var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.input-otp-fill-outline){--background:var(--token-bg-input-default, var(--token-primitives-base-white, #ffffff))}:host(.input-otp-fill-solid){--border-color:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));--background:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9))}:host(.input-otp-disabled){--color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}:host(.input-otp-fill-outline.input-otp-disabled){--background:var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));--border-color:var(--token-border-disabled, var(--token-primitives-neutral-300, #e0e0e0))}:host(.input-otp-fill-outline.input-otp-readonly){--background:var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3))}:host(.input-otp-fill-solid.input-otp-disabled){--border-color:var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));--background:var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0))}:host(.input-otp-fill-solid.input-otp-readonly){--border-color:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));--background:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0))}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.input-otp-fill-outline.ion-color) .native-input,:host(.input-otp-fill-solid.ion-color) .native-input:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input{border-color:var(--ion-color-danger, var(--token-bg-danger-base-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222))))}:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input{border-color:var(--ion-color-success, var(--token-bg-success-base-default, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23))))}:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input{border-color:rgba(var(--ion-color-base-rgb), 0.3)}`;
+const inputOtpIosCss = () => `.sc-ion-input-otp-ios-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-ios{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-ios{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-description-hidden.sc-ion-input-otp-ios{display:none}.input-otp-separator.sc-ion-input-otp-ios{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-ios-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:8px}.input-otp-size-medium.sc-ion-input-otp-ios-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-ios-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios,.input-otp-size-large.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:12px}.input-otp-shape-round.sc-ion-input-otp-ios-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-ios-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-ios-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-disabled.sc-ion-input-otp-ios-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-disabled.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-ios-h,.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-ios-h{--border-width:0.55px}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-width:1px}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}`;
 
-const inputOtpIosCss = () => `:host{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--separator-height:var(--separator-width);--highlight-color:var(--highlight-color-focused);display:block;position:relative}.input-otp-group{-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{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{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);font-family:inherit;font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.has-focus) .native-input{caret-color:var(--highlight-color)}.input-otp-description{text-align:center}.input-otp-description-hidden{display:none}.input-otp-separator{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)}:host(.input-otp-disabled),:host(.input-otp-disabled) .native-input:disabled{cursor:not-allowed}:host(.has-focus) .native-input:focus{--border-color:var(--highlight-color);outline:none}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host{--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--border-style:solid;--separator-width:8px;--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);font-family:var(--ion-font-family, inherit);font-size:0.875rem}.input-otp-description{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem}:host(.input-otp-size-small){--width:40px;--height:40px}:host(.input-otp-size-small) .input-otp-group{gap:8px}:host(.input-otp-size-medium){--width:48px;--height:48px}:host(.input-otp-size-large){--width:56px;--height:56px}:host(.input-otp-size-medium) .input-otp-group,:host(.input-otp-size-large) .input-otp-group{gap:12px}:host(.input-otp-shape-round){--border-radius:16px}:host(.input-otp-shape-soft){--border-radius:8px}:host(.input-otp-shape-rectangular){--border-radius:0}:host(.input-otp-fill-outline){--background:none}:host(.input-otp-fill-solid){--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))}:host(.input-otp-disabled){--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}:host(.input-otp-fill-outline.input-otp-disabled){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}:host(.input-otp-fill-outline.input-otp-readonly){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}:host(.input-otp-fill-solid.input-otp-disabled),:host(.input-otp-fill-solid.input-otp-readonly){--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.input-otp-fill-outline.ion-color) .native-input,:host(.input-otp-fill-solid.ion-color) .native-input:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input{border-color:var(--ion-color-danger, #c5000f)}:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input{border-color:var(--ion-color-success, #2dd55b)}:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input{border-color:rgba(var(--ion-color-base-rgb), 0.3)}:host{--border-width:0.55px}:host(.has-focus) .native-input:focus{--border-width:1px}:host(.input-otp-fill-outline){--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 = () => `:host{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--separator-height:var(--separator-width);--highlight-color:var(--highlight-color-focused);display:block;position:relative}.input-otp-group{-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{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{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);font-family:inherit;font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.has-focus) .native-input{caret-color:var(--highlight-color)}.input-otp-description{text-align:center}.input-otp-description-hidden{display:none}.input-otp-separator{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)}:host(.input-otp-disabled),:host(.input-otp-disabled) .native-input:disabled{cursor:not-allowed}:host(.has-focus) .native-input:focus{--border-color:var(--highlight-color);outline:none}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host{--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--border-style:solid;--separator-width:8px;--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);font-family:var(--ion-font-family, inherit);font-size:0.875rem}.input-otp-description{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem}:host(.input-otp-size-small){--width:40px;--height:40px}:host(.input-otp-size-small) .input-otp-group{gap:8px}:host(.input-otp-size-medium){--width:48px;--height:48px}:host(.input-otp-size-large){--width:56px;--height:56px}:host(.input-otp-size-medium) .input-otp-group,:host(.input-otp-size-large) .input-otp-group{gap:12px}:host(.input-otp-shape-round){--border-radius:16px}:host(.input-otp-shape-soft){--border-radius:8px}:host(.input-otp-shape-rectangular){--border-radius:0}:host(.input-otp-fill-outline){--background:none}:host(.input-otp-fill-solid){--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))}:host(.input-otp-disabled){--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}:host(.input-otp-fill-outline.input-otp-disabled){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}:host(.input-otp-fill-outline.input-otp-readonly){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}:host(.input-otp-fill-solid.input-otp-disabled),:host(.input-otp-fill-solid.input-otp-readonly){--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.input-otp-fill-outline.ion-color) .native-input,:host(.input-otp-fill-solid.ion-color) .native-input:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input{border-color:var(--ion-color-danger, #c5000f)}:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input{border-color:var(--ion-color-success, #2dd55b)}:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input{border-color:rgba(var(--ion-color-base-rgb), 0.3)}:host{--border-width:1px}:host(.has-focus) .native-input:focus{--border-width:2px}:host(.input-otp-fill-outline){--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) {
@@ -23,372 +19,134 @@ const InputOTP = class {
         this.ionComplete = createEvent(this, "ionComplete", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.ionFocus = createEvent(this, "ionFocus", 7);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-        this.inheritedAttributes = {};
-        this.inputRefs = [];
-        this.inputId = `ion-input-otp-${inputIds++}`;
-        this.parsedSeparators = [];
-        /**
-         * Tracks whether the user is navigating through input boxes using keyboard navigation
-         * (arrow keys, tab) versus mouse clicks. This is used to determine the appropriate
-         * focus behavior when an input box is focused.
-         */
-        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"`.
-         */
-        this.autocapitalize = 'off';
-        /**
-         * If `true`, the user cannot interact with the input.
-         */
-        this.disabled = false;
-        /**
-         * The fill for the input boxes. If `"solid"` the input boxes will have a background. If
-         * `"outline"` the input boxes will be transparent with a border.
-         */
-        this.fill = 'outline';
-        /**
-         * The number of input boxes to display.
-         */
-        this.length = 4;
-        /**
-         * If `true`, the user cannot modify the value.
-         */
-        this.readonly = false;
-        /**
-         * The shape of the input boxes.
-         * If "round" they will have an increased border radius.
-         * If "rectangular" they will have no border radius.
-         * If "soft" they will have a soft border radius.
-         */
-        this.shape = 'round';
-        /**
-         * The size of the input boxes.
-         */
-        this.size = 'medium';
-        /**
-         * The type of input allowed in the input boxes.
-         */
-        this.type = 'number';
-        /**
-         * The value of the input group.
-         */
-        this.value = '';
-        /**
-         * Handles the focus behavior for the input OTP component.
-         *
-         * Focus behavior:
-         * 1. Keyboard navigation: Allow normal focus movement
-         * 2. Mouse click:
-         *    - If clicked box has value: Focus that box
-         *    - If clicked box is empty: Focus first empty box
-         *
-         * Emits the `ionFocus` event when the input group gains focus.
-         */
-        this.onFocus = (index) => (event) => {
-            var _a;
-            const { inputRefs } = this;
-            // Only emit ionFocus and set the focusedValue when the
-            // component first gains focus
-            if (!this.hasFocus) {
-                this.ionFocus.emit(event);
-                this.focusedValue = this.value;
-            }
-            this.hasFocus = true;
-            let finalIndex = index;
-            if (!this.isKeyboardNavigation) {
-                // If the clicked box has a value, focus it
-                // Otherwise focus the first empty box
-                const targetIndex = this.inputValues[index] ? index : this.getFirstEmptyIndex();
-                finalIndex = targetIndex === -1 ? this.length - 1 : targetIndex;
-                // Focus the target box
-                (_a = this.inputRefs[finalIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            // Update tabIndexes to match the focused box
-            inputRefs.forEach((input, i) => {
-                input.tabIndex = i === finalIndex ? 0 : -1;
-            });
-            // Reset the keyboard navigation flag
-            this.isKeyboardNavigation = false;
-        };
-        /**
-         * Handles the blur behavior for the input OTP component.
-         * Emits the `ionBlur` event when the input group loses focus.
-         */
-        this.onBlur = (event) => {
-            const { inputRefs } = this;
-            const relatedTarget = event.relatedTarget;
-            // Do not emit blur if we're moving to another input box in the same component
-            const isInternalFocus = relatedTarget != null && inputRefs.includes(relatedTarget);
-            if (!isInternalFocus) {
-                this.hasFocus = false;
-                // Reset tabIndexes when focus leaves the component
-                this.updateTabIndexes();
-                // Always emit ionBlur when focus leaves the component
-                this.ionBlur.emit(event);
-                // Only emit ionChange if the value has actually changed
-                if (this.focusedValue !== this.value) {
-                    this.emitIonChange(event);
-                }
-            }
-        };
-        /**
-         * 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
-         */
-        this.onKeyDown = (index) => (event) => {
-            const { disabled, length, readonly } = this;
-            const rtl = isRTL(this.el);
-            const input = event.target;
-            if (disabled) {
-                return;
-            }
-            if (readonly) {
-                if (event.key === 'Backspace' || event.key === 'Delete') {
-                    event.preventDefault();
-                    return;
-                }
-            }
-            // Meta shortcuts are used to copy, paste, and select text
-            // We don't want to handle these keys here
-            const metaShortcuts = ['a', 'c', 'v', 'x', 'r', 'z', 'y'];
-            const isTextSelection = input.selectionStart !== input.selectionEnd;
-            // Return if the key is a meta shortcut or the input value
-            // text is selected and let the onPaste / onInput handler manage it
-            if (isTextSelection || ((event.metaKey || event.ctrlKey) && metaShortcuts.includes(event.key.toLowerCase()))) {
-                return;
-            }
-            if (event.key === 'Backspace') {
-                if (this.inputValues[index]) {
-                    // Shift all values to the right of the current index left by one
-                    for (let i = index; i < length - 1; i++) {
-                        this.inputValues[i] = this.inputValues[i + 1];
-                    }
-                    // Clear the last box
-                    this.inputValues[length - 1] = '';
-                    // Update all inputRefs to match inputValues
-                    for (let i = 0; i < length; i++) {
-                        this.inputRefs[i].value = this.inputValues[i] || '';
-                    }
-                    this.updateValue(event);
-                    event.preventDefault();
-                }
-                else if (!this.inputValues[index] && index > 0) {
-                    // If current input is empty, move to previous input
-                    this.focusPrevious(index);
-                }
-            }
-            else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-                this.isKeyboardNavigation = true;
-                event.preventDefault();
-                const isLeft = event.key === 'ArrowLeft';
-                const shouldMoveNext = (isLeft && rtl) || (!isLeft && !rtl);
-                // Only allow moving to the next input if the current has a value
-                if (shouldMoveNext) {
-                    if (this.inputValues[index] && index < length - 1) {
-                        this.focusNext(index);
-                    }
-                }
-                else {
-                    this.focusPrevious(index);
-                }
-            }
-            else if (event.key === 'Tab') {
-                this.isKeyboardNavigation = true;
-                // Let all tab events proceed normally
-                return;
-            }
-        };
-        /**
-         * 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 { disabled, length, readonly, validKeyPattern } = this;
-            const input = event.target;
-            const value = input.value;
-            const previousValue = this.previousInputValues[index] || '';
-            if (disabled || readonly) {
-                return;
-            }
-            // 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))
-                    .slice(0, length);
-                // If there are no valid characters coming from the
-                // autofill, all input refs have to be cleared after the
-                // browser has finished the autofill behavior
-                if (validChars.length === 0) {
-                    requestAnimationFrame(() => {
-                        this.inputRefs.forEach((input) => {
-                            input.value = '';
-                        });
-                    });
-                }
-                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
-                // updated before moving the focus
-                setTimeout(() => {
-                    var _a;
-                    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;
-            }
-            // 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;
-            }
-            // 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.
-         * This function prevents the default paste behavior and
-         * validates the pasted text against the allowed pattern.
-         * It then updates the value of the input group and focuses
-         * the next empty input after pasting.
-         */
-        this.onPaste = (event) => {
-            var _a, _b;
-            const { disabled, inputRefs, length, readonly, validKeyPattern } = this;
-            event.preventDefault();
-            if (disabled || readonly) {
-                return;
-            }
-            const pastedText = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
-            // If there is no pasted text, still emit the input change event
-            // because this is how the native input element behaves
-            // but return early because there is nothing to paste.
-            if (!pastedText) {
-                this.emitIonInput(event);
-                return;
-            }
-            const validChars = pastedText
-                .split('')
-                .filter((char) => validKeyPattern.test(char))
-                .slice(0, length);
-            // Always paste starting at the first box
-            validChars.forEach((char, index) => {
-                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 = validChars.length < length ? validChars.length : length - 1;
-            (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
-        };
     }
+    inheritedAttributes = {};
+    inputRefs = [];
+    inputId = `ion-input-otp-${inputIds++}`;
+    parsedSeparators = [];
     /**
-     * Update element internals when disabled prop changes
+     * Stores the initial value of the input when it receives focus.
+     * Used to determine if the value changed during the focus session
+     * to avoid emitting unnecessary change events on blur.
      */
-    disabledChanged() {
-        this.updateElementInternals();
-    }
+    focusedValue;
+    /**
+     * Tracks whether the user is navigating through input boxes using keyboard navigation
+     * (arrow keys, tab) versus mouse clicks. This is used to determine the appropriate
+     * focus behavior when an input box is focused.
+     */
+    isKeyboardNavigation = false;
+    get el() { return getElement(this); }
+    inputValues = [];
+    hasFocus = false;
+    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"`.
+     */
+    autocapitalize = 'off';
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    disabled = false;
+    /**
+     * The fill for the input boxes. If `"solid"` the input boxes will have a background. If
+     * `"outline"` the input boxes will be transparent with a border.
+     */
+    fill = 'outline';
+    /**
+     * A hint to the browser for which keyboard to display.
+     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+     *
+     * For numbers (type="number"): "numeric"
+     * For text (type="text"): "text"
+     */
+    inputmode;
+    /**
+     * The number of input boxes to display.
+     */
+    length = 4;
+    /**
+     * A regex pattern string for allowed characters. Defaults based on type.
+     *
+     * For numbers (`type="number"`): `"[\p{N}]"`
+     * For text (`type="text"`): `"[\p{L}\p{N}]"`
+     */
+    pattern;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readonly = false;
+    /**
+     * Where separators should be shown between input boxes.
+     * Can be a comma-separated string or an array of numbers.
+     *
+     * For example:
+     * `"3"` will show a separator after the 3rd input box.
+     * `[1,4]` will show a separator after the 1st and 4th input boxes.
+     * `"all"` will show a separator between every input box.
+     */
+    separators;
+    /**
+     * The shape of the input boxes.
+     * If "round" they will have an increased border radius.
+     * If "rectangular" they will have no border radius.
+     * If "soft" they will have a soft border radius.
+     */
+    shape = 'round';
+    /**
+     * The size of the input boxes.
+     */
+    size = 'medium';
+    /**
+     * The type of input allowed in the input boxes.
+     */
+    type = 'number';
+    /**
+     * The value of the input group.
+     */
+    value = '';
+    /**
+     * The `ionInput` event is fired each time the user modifies the input's value.
+     * Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+     * to the input's value. This typically happens for each keystroke as the user types.
+     *
+     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
+     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
+     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
+     * the input is cleared on edit, the type is `null`.
+     */
+    ionInput;
+    /**
+     * The `ionChange` event is fired when the user modifies the input's value.
+     * Unlike the `ionInput` event, the `ionChange` event is only fired when changes
+     * are committed, not as the user types.
+     *
+     * The `ionChange` event fires when the `<ion-input-otp>` component loses
+     * focus after its value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    ionChange;
+    /**
+     * Emitted when all input boxes have been filled with valid values.
+     */
+    ionComplete;
+    /**
+     * Emitted when the input group loses focus.
+     */
+    ionBlur;
+    /**
+     * Emitted when the input group has focus.
+     */
+    ionFocus;
     /**
      * Sets focus to an input box.
      * @param index - The index of the input box to focus (0-based).
@@ -396,20 +154,18 @@ const InputOTP = class {
      * Otherwise, the first empty input box or the last input if all are filled will be focused.
      */
     async setFocus(index) {
-        var _a, _b;
         if (typeof index === 'number') {
             const validIndex = Math.max(0, Math.min(index, this.length - 1));
-            (_a = this.inputRefs[validIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            this.inputRefs[validIndex]?.focus();
         }
         else {
             const tabbableIndex = this.getTabbableIndex();
-            (_b = this.inputRefs[tabbableIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+            this.inputRefs[tabbableIndex]?.focus();
         }
     }
     valueChanged() {
         this.initializeValues();
         this.updateTabIndexes();
-        this.updateElementInternals();
     }
     /**
      * Processes the separators prop into an array of numbers.
@@ -466,7 +222,6 @@ const InputOTP = class {
     }
     componentDidLoad() {
         this.updateTabIndexes();
-        this.updateElementInternals();
     }
     /**
      * Get the regex pattern for allowed characters.
@@ -543,47 +298,6 @@ const InputOTP = class {
             this.ionComplete.emit({ value: newValue });
         }
     }
-    /**
-     * Gets the value of the input group as a string for form submission.
-     * Returns an empty string if the value is null or undefined.
-     */
-    getValue() {
-        return this.value != null ? this.value.toString() : '';
-    }
-    /**
-     * Called when the form state is restored.
-     * Restores the component's value.
-     */
-    formStateRestoreCallback(value) {
-        this.value = value;
-    }
-    /**
-     * Called when the form is reset.
-     * Resets the component's value.
-     */
-    formResetCallback() {
-        this.value = '';
-    }
-    /**
-     * Updates the form value and reports validity state to the browser via
-     * ElementInternals. This should be called when the component loads, when
-     * the disabled prop changes, and when the value changes to ensure the form
-     * value stays in sync and validation state is updated.
-     */
-    updateElementInternals() {
-        var _a;
-        // Disabled form controls should not be included in form data
-        // Pass null to setFormValue when disabled to exclude it from form submission
-        const value = this.disabled ? null : this.getValue();
-        // ElementInternals may not be fully available in test environments
-        // so we need to check if the method exists before calling it
-        if (typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(value);
-        }
-        // Use the first input element for validity reporting since all inputs
-        // share the same validation state
-        reportValidityToElementInternals((_a = this.inputRefs[0]) !== null && _a !== void 0 ? _a : null, this.internals);
-    }
     /**
      * Emits an `ionChange` event.
      * This API should be called for user committed changes.
@@ -606,24 +320,79 @@ const InputOTP = class {
         const newValue = value == null ? value : value.toString();
         this.ionInput.emit({ value: newValue, event });
     }
+    /**
+     * Handles the focus behavior for the input OTP component.
+     *
+     * Focus behavior:
+     * 1. Keyboard navigation: Allow normal focus movement
+     * 2. Mouse click:
+     *    - If clicked box has value: Focus that box
+     *    - If clicked box is empty: Focus first empty box
+     *
+     * Emits the `ionFocus` event when the input group gains focus.
+     */
+    onFocus = (index) => (event) => {
+        const { inputRefs } = this;
+        // Only emit ionFocus and set the focusedValue when the
+        // component first gains focus
+        if (!this.hasFocus) {
+            this.ionFocus.emit(event);
+            this.focusedValue = this.value;
+        }
+        this.hasFocus = true;
+        let finalIndex = index;
+        if (!this.isKeyboardNavigation) {
+            // If the clicked box has a value, focus it
+            // Otherwise focus the first empty box
+            const targetIndex = this.inputValues[index] ? index : this.getFirstEmptyIndex();
+            finalIndex = targetIndex === -1 ? this.length - 1 : targetIndex;
+            // Focus the target box
+            this.inputRefs[finalIndex]?.focus();
+        }
+        // Update tabIndexes to match the focused box
+        inputRefs.forEach((input, i) => {
+            input.tabIndex = i === finalIndex ? 0 : -1;
+        });
+        // Reset the keyboard navigation flag
+        this.isKeyboardNavigation = false;
+    };
+    /**
+     * Handles the blur behavior for the input OTP component.
+     * Emits the `ionBlur` event when the input group loses focus.
+     */
+    onBlur = (event) => {
+        const { inputRefs } = this;
+        const relatedTarget = event.relatedTarget;
+        // Do not emit blur if we're moving to another input box in the same component
+        const isInternalFocus = relatedTarget != null && inputRefs.includes(relatedTarget);
+        if (!isInternalFocus) {
+            this.hasFocus = false;
+            // Reset tabIndexes when focus leaves the component
+            this.updateTabIndexes();
+            // Always emit ionBlur when focus leaves the component
+            this.ionBlur.emit(event);
+            // Only emit ionChange if the value has actually changed
+            if (this.focusedValue !== this.value) {
+                this.emitIonChange(event);
+            }
+        }
+    };
     /**
      * Focuses the next input box.
      */
     focusNext(currentIndex) {
-        var _a;
         const { inputRefs, length } = this;
         if (currentIndex < length - 1) {
-            (_a = inputRefs[currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            inputRefs[currentIndex + 1]?.focus();
         }
     }
     /**
      * Focuses the previous input box.
      */
     focusPrevious(currentIndex) {
-        var _a;
         const { inputRefs } = this;
         if (currentIndex > 0) {
-            (_a = inputRefs[currentIndex - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            inputRefs[currentIndex - 1]?.focus();
         }
     }
     /**
@@ -632,12 +401,11 @@ const InputOTP = class {
      * Returns -1 if all inputs are filled.
      */
     getFirstEmptyIndex() {
-        var _a;
         const { inputValues, length } = this;
         // Create an array of the same length as the input OTP
         // and fill it with the input values
         const values = Array.from({ length }, (_, i) => inputValues[i] || '');
-        return (_a = values.findIndex((value) => !value || value === '')) !== null && _a !== void 0 ? _a : -1;
+        return values.findIndex((value) => !value || value === '') ?? -1;
     }
     /**
      * Returns the index of the input that should be tabbed to.
@@ -674,6 +442,243 @@ const InputOTP = class {
             input.setAttribute('aria-hidden', isEmpty && !shouldBeTabbable ? 'true' : 'false');
         });
     }
+    /**
+     * 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
+     */
+    onKeyDown = (index) => (event) => {
+        const { disabled, length, readonly } = this;
+        const rtl = isRTL(this.el);
+        const input = event.target;
+        if (disabled) {
+            return;
+        }
+        if (readonly) {
+            if (event.key === 'Backspace' || event.key === 'Delete') {
+                event.preventDefault();
+                return;
+            }
+        }
+        // Meta shortcuts are used to copy, paste, and select text
+        // We don't want to handle these keys here
+        const metaShortcuts = ['a', 'c', 'v', 'x', 'r', 'z', 'y'];
+        const isTextSelection = input.selectionStart !== input.selectionEnd;
+        // Return if the key is a meta shortcut or the input value
+        // text is selected and let the onPaste / onInput handler manage it
+        if (isTextSelection || ((event.metaKey || event.ctrlKey) && metaShortcuts.includes(event.key.toLowerCase()))) {
+            return;
+        }
+        if (event.key === 'Backspace') {
+            if (this.inputValues[index]) {
+                // Shift all values to the right of the current index left by one
+                for (let i = index; i < length - 1; i++) {
+                    this.inputValues[i] = this.inputValues[i + 1];
+                }
+                // Clear the last box
+                this.inputValues[length - 1] = '';
+                // Update all inputRefs to match inputValues
+                for (let i = 0; i < length; i++) {
+                    this.inputRefs[i].value = this.inputValues[i] || '';
+                }
+                this.updateValue(event);
+                event.preventDefault();
+            }
+            else if (!this.inputValues[index] && index > 0) {
+                // If current input is empty, move to previous input
+                this.focusPrevious(index);
+            }
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            this.isKeyboardNavigation = true;
+            event.preventDefault();
+            const isLeft = event.key === 'ArrowLeft';
+            const shouldMoveNext = (isLeft && rtl) || (!isLeft && !rtl);
+            // Only allow moving to the next input if the current has a value
+            if (shouldMoveNext) {
+                if (this.inputValues[index] && index < length - 1) {
+                    this.focusNext(index);
+                }
+            }
+            else {
+                this.focusPrevious(index);
+            }
+        }
+        else if (event.key === 'Tab') {
+            this.isKeyboardNavigation = true;
+            // Let all tab events proceed normally
+            return;
+        }
+    };
+    /**
+     * 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
+     */
+    onInput = (index) => (event) => {
+        const { disabled, length, readonly, validKeyPattern } = this;
+        const input = event.target;
+        const value = input.value;
+        const previousValue = this.previousInputValues[index] || '';
+        if (disabled || readonly) {
+            return;
+        }
+        // 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))
+                .slice(0, length);
+            // If there are no valid characters coming from the
+            // autofill, all input refs have to be cleared after the
+            // browser has finished the autofill behavior
+            if (validChars.length === 0) {
+                requestAnimationFrame(() => {
+                    this.inputRefs.forEach((input) => {
+                        input.value = '';
+                    });
+                });
+            }
+            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
+            // updated before moving the focus
+            setTimeout(() => {
+                const nextIndex = validChars.length < length ? validChars.length : length - 1;
+                this.inputRefs[nextIndex]?.focus();
+            }, 20);
+            this.previousInputValues = [...this.inputValues];
+            return;
+        }
+        // 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;
+        }
+        // 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 = input.selectionStart ?? value.length;
+        const newCharIndex = cursorPos - 1;
+        const newChar = value[newCharIndex] ?? 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.
+     * This function prevents the default paste behavior and
+     * validates the pasted text against the allowed pattern.
+     * It then updates the value of the input group and focuses
+     * the next empty input after pasting.
+     */
+    onPaste = (event) => {
+        const { disabled, inputRefs, length, readonly, validKeyPattern } = this;
+        event.preventDefault();
+        if (disabled || readonly) {
+            return;
+        }
+        const pastedText = event.clipboardData?.getData('text');
+        // If there is no pasted text, still emit the input change event
+        // because this is how the native input element behaves
+        // but return early because there is nothing to paste.
+        if (!pastedText) {
+            this.emitIonInput(event);
+            return;
+        }
+        const validChars = pastedText
+            .split('')
+            .filter((char) => validKeyPattern.test(char))
+            .slice(0, length);
+        // Always paste starting at the first box
+        validChars.forEach((char, index) => {
+            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 = validChars.length < length ? validChars.length : length - 1;
+        inputRefs[nextEmptyIndex]?.focus();
+    };
     /**
      * Determines if a separator should be shown for a given index by
      * checking if the index is included in the parsed separators array.
@@ -683,14 +688,13 @@ const InputOTP = class {
         return this.parsedSeparators.includes(index + 1) && index < length - 1;
     }
     render() {
-        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();
-        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: '2bdd205b13281373a43d1a86a25df950a6f36ae1', class: createColorClasses(color, {
+        const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
+        return (h(Host, { key: 'bd37661e13cde21feff30c663e6813ce3fff0d9a', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -698,17 +702,12 @@ const InputOTP = class {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: 'b82d198138929327cd5429bbeb482248935ae88d', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", 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", part: "separator" }))))), h("div", { key: '0bb5444d4e653bb7310abec502f5b1d76e681c37', class: {
+            }) }, h("div", { key: '5e206f870024f1ecfebda999ff31e6e815774deb', 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: 'c268f838ddab2c8d6a612a11c7d38e6ca076436d', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, h("slot", { key: 'f717bda988a6e9b97d67025c1d3163d838f27bb5' }))));
+            } }, h("slot", { key: 'c0736359b26f609b795e399fc1ad9b540632af18' }))));
     }
-    static get formAssociated() { return true; }
-    get el() { return getElement(this); }
     static get watchers() { return {
-        "disabled": [{
-                "disabledChanged": 0
-            }],
         "value": [{
                 "valueChanged": 0
             }],
@@ -722,7 +721,6 @@ const InputOTP = class {
 };
 let inputIds = 0;
 InputOTP.style = {
-    ionic: inputOtpIonicCss(),
     ios: inputOtpIosCss(),
     md: inputOtpMdCss()
 };