fix(input-otp): move separator next to native wrapper to properly collapse input width

Author: brandyscarney

core/src/components/input-otp/input-otp.scss

@@ -113,7 +113,7 @@
 .input-otp-separator {
   @include border-radius(var(--separator-border-radius));
 
-  flex: 1 0 auto;
+  flex-shrink: 0;
 
   width: var(--separator-width);
   height: var(--separator-height);
@@ -131,8 +131,7 @@
   font-size: 0.875em;
 }
 
-:host(.input-otp-size-small) .input-otp-group,
-:host(.input-otp-size-small) .native-wrapper {
+:host(.input-otp-size-small) .input-otp-group {
   gap: 8px;
 }
 
@@ -151,9 +150,7 @@
 }
 
 :host(.input-otp-size-medium) .input-otp-group,
-:host(.input-otp-size-medium) .native-wrapper,
-:host(.input-otp-size-large) .input-otp-group,
-:host(.input-otp-size-large) .native-wrapper {
+:host(.input-otp-size-large) .input-otp-group {
   gap: 12px;
 }
 

core/src/components/input-otp/input-otp.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, State, h, Watch } from '@stencil/core';
+import { Component, Element, Event, Fragment, Host, Prop, State, h, Watch } from '@stencil/core';
 import { printIonWarning } from '@utils/logging';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
@@ -683,8 +683,8 @@ export class InputOTP implements ComponentInterface {
         })}
       >
         <div role="group" aria-label="One-time password input" class="input-otp-group">
-          {Array.from({ length }).map((_, index) => {
-            return (
+          {Array.from({ length }).map((_, index) => (
+            <Fragment>
               <div class="native-wrapper">
                 <input
                   class="native-input"
@@ -706,10 +706,10 @@ export class InputOTP implements ComponentInterface {
                   onKeyDown={this.onKeyDown(index)}
                   onPaste={this.onPaste}
                 />
-                {this.showSeparator(index) && <div class="input-otp-separator" />}
               </div>
-            );
-          })}
+              {this.showSeparator(index) && <div class="input-otp-separator" />}
+            </Fragment>
+          ))}
         </div>
         <div class="input-otp-description">
           <slot></slot>

core/tsconfig.json

@@ -10,6 +10,7 @@
     "assumeChangesOnlyAffectDirectDependencies": true,
     "jsx": "react",
     "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
     "lib": [
       "dom",
       "dom.iterable",