feat(input-otp): add new input-otp component (#30386)

Adds a new component `ion-input-otp` which provides the OTP input functionality

- Displays as an input group with multiple boxes accepting a single character
- Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display
- Supports changing the displayed keyboard using the `inputmode` property
- Accepts a `length` property to control the number of input boxes
- Accepts the following properties to change the design: `fill`, `shape`, `size`, `color`
- Accepts a `separators` property to show a separator between 1 or more input boxes
- Supports the `disabled`, `readonly` and invalid states
- Supports limiting the accepted input via the `pattern` property
- Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus`
- Exposes the following method: `setFocus`

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Shane <shane@shanessite.net>

packages/vue/src/index.ts

@@ -80,6 +80,10 @@ export {
   InfiniteScrollCustomEvent,
   InputCustomEvent,
   InputChangeEventDetail,
+  InputOtpCustomEvent,
+  InputOtpChangeEventDetail,
+  InputOtpCompleteEventDetail,
+  InputOtpInputEventDetail,
   ItemReorderEventDetail,
   ItemReorderCustomEvent,
   ItemSlidingCustomEvent,

packages/vue/src/proxies.ts

@@ -35,6 +35,7 @@ import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-
 import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
 import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
 import { defineCustomElement as defineIonInput } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineIonInputOtp } from '@ionic/core/components/ion-input-otp.js';
 import { defineCustomElement as defineIonInputPasswordToggle } from '@ionic/core/components/ion-input-password-toggle.js';
 import { defineCustomElement as defineIonItem } from '@ionic/core/components/ion-item.js';
 import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
@@ -491,6 +492,35 @@ export const IonInput: StencilVueComponent<JSX.IonInput, JSX.IonInput["value"]>
 'value', 'ion-input');
 
 
+export const IonInputOtp: StencilVueComponent<JSX.IonInputOtp, JSX.IonInputOtp["value"]> = /*@__PURE__*/ defineContainer<JSX.IonInputOtp, JSX.IonInputOtp["value"]>('ion-input-otp', defineIonInputOtp, [
+  'autocapitalize',
+  'color',
+  'disabled',
+  'fill',
+  'inputmode',
+  'length',
+  'pattern',
+  'readonly',
+  'separators',
+  'shape',
+  'size',
+  'type',
+  'value',
+  'ionInput',
+  'ionChange',
+  'ionComplete',
+  'ionBlur',
+  'ionFocus'
+], [
+  'ionInput',
+  'ionChange',
+  'ionComplete',
+  'ionBlur',
+  'ionFocus'
+],
+'value', 'ion-input');
+
+
 export const IonInputPasswordToggle: StencilVueComponent<JSX.IonInputPasswordToggle> = /*@__PURE__*/ defineContainer<JSX.IonInputPasswordToggle>('ion-input-password-toggle', defineIonInputPasswordToggle, [
   'color',
   'showIcon',