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/test/base/src/views/Inputs.vue

@@ -41,6 +41,10 @@
         <ion-input v-model="input" label="Input"></ion-input>
       </ion-item>
 
+      <ion-item>
+        <ion-input-otp v-model="inputOtp"></ion-input-otp>
+      </ion-item>
+
       <ion-item>
         <ion-range label="Range" :dual-knobs="true" :min="0" :max="100" slot="end" v-model="range"></ion-range>
       </ion-item>
@@ -77,6 +81,7 @@
         Checkbox: {{ checkbox }}<br>
         Toggle: {{ toggle }}<br>
         Input: <span id="input-ref">{{ input }}</span><br>
+        Input OTP: <span id="input-otp-ref">{{ inputOtp }}</span><br>
         Range: {{ range }}<br>
         Textarea: <span id="textarea-ref">{{ textarea }}</span><br>
         Searchbar: <span id="searchbar-ref">{{ searchbar }}</span><br>
@@ -104,6 +109,7 @@ import {
   IonDatetime,
   IonHeader,
   IonInput,
+  IonInputOtp,
   IonItem,
   IonLabel,
   IonPage,
@@ -132,6 +138,7 @@ export default defineComponent({
     IonDatetime,
     IonHeader,
     IonInput,
+    IonInputOtp,
     IonItem,
     IonLabel,
     IonPage,
@@ -152,6 +159,7 @@ export default defineComponent({
     const checkbox = ref(false);
     const toggle = ref(false);
     const input = ref('');
+    const inputOtp = ref('');
     const range = ref({
       lower: 30,
       upper: 70
@@ -167,6 +175,7 @@ export default defineComponent({
       checkbox.value = false;
       toggle.value = false;
       input.value = '';
+      inputOtp.value = '';
       range.value = {
         lower: 30,
         upper: 70
@@ -183,6 +192,7 @@ export default defineComponent({
       checkbox.value = true;
       toggle.value = true;
       input.value = 'Hello World';
+      inputOtp.value = '1234';
       range.value = {
         lower: 10,
         upper: 90
@@ -199,6 +209,7 @@ export default defineComponent({
       checkbox,
       toggle,
       input,
+      inputOtp,
       range,
       textarea,
       searchbar,