feat(input-otp): add hint text and input label formatter

core/api.txt

@@ -794,7 +794,10 @@ ion-input-otp,scoped
 ion-input-otp,prop,autocapitalize,string,'off',false,false
 ion-input-otp,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input-otp,prop,disabled,boolean,false,false,true
+ion-input-otp,prop,errorText,string | undefined,undefined,false,false
 ion-input-otp,prop,fill,"outline" | "solid" | undefined,'outline',false,false
+ion-input-otp,prop,helperText,string | undefined,undefined,false,false
+ion-input-otp,prop,inputLabelFormatter,((index: number, length: number) => string) | undefined,undefined,false,false
 ion-input-otp,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input-otp,prop,length,number,4,false,false
 ion-input-otp,prop,pattern,string | undefined,undefined,false,false

core/src/components.d.ts

@@ -18,7 +18,7 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
-import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
+import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail, InputOtpLabelFormatter } from "./components/input-otp/input-otp-interface";
 import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalDragEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -55,7 +55,7 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
-export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
+export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail, InputOtpLabelFormatter } from "./components/input-otp/input-otp-interface";
 export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalDragEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -1468,11 +1468,23 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Text that is placed under the input boxes and displayed when an error is detected.
+         */
+        "errorText"?: string;
         /**
           * 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.
           * @default 'outline'
          */
         "fill"?: 'outline' | 'solid';
+        /**
+          * Text that is placed under the input boxes and displayed when no error is detected.
+         */
+        "helperText"?: string;
+        /**
+          * A callback used to format the accessible name of each input box. It receives the 0-based `index` of the box and the total `length`. By default the name is "Input 1 of 4", or "PIN, 1 of 4" with an `aria-label` of "PIN".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+         */
+        "inputLabelFormatter"?: InputOtpLabelFormatter;
         /**
           * 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"
          */
@@ -6628,11 +6640,23 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Text that is placed under the input boxes and displayed when an error is detected.
+         */
+        "errorText"?: string;
         /**
           * 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.
           * @default 'outline'
          */
         "fill"?: 'outline' | 'solid';
+        /**
+          * Text that is placed under the input boxes and displayed when no error is detected.
+         */
+        "helperText"?: string;
+        /**
+          * A callback used to format the accessible name of each input box. It receives the 0-based `index` of the box and the total `length`. By default the name is "Input 1 of 4", or "PIN, 1 of 4" with an `aria-label` of "PIN".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+         */
+        "inputLabelFormatter"?: InputOtpLabelFormatter;
         /**
           * 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"
          */
@@ -9236,7 +9260,9 @@ declare namespace LocalJSX {
         "autocapitalize": string;
         "color": Color;
         "disabled": boolean;
+        "errorText": string;
         "fill": 'outline' | 'solid';
+        "helperText": string;
         "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         "length": number;
         "pattern": string;

core/src/components/input-otp/input-otp-interface.ts

@@ -17,6 +17,8 @@ export interface InputOtpCompleteEventDetail {
   event?: Event;
 }
 
+export type InputOtpLabelFormatter = (index: number, length: number) => string;
+
 export interface InputOtpCustomEvent<T = InputOtpChangeEventDetail> extends CustomEvent {
   detail: T;
   target: HTMLIonInputOtpElement;

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

@@ -16,5 +16,5 @@
 // --------------------------------------------------
 
 :host(.input-otp-fill-outline) {
-  --border-color: #{$item-ios-border-color};
+  --internal-border-color: #{$item-ios-border-color};
 }

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

@@ -16,5 +16,5 @@
 // --------------------------------------------------
 
 :host(.input-otp-fill-outline) {
-  --border-color: #{$background-color-step-300};
+  --internal-border-color: #{$background-color-step-300};
 }

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

@@ -63,6 +63,9 @@
    */
   --highlight-color: var(--highlight-color-focused);
 
+  // Don't inherit `--border-color` from ancestors like `ion-modal`
+  --border-color: initial;
+
   display: block;
   position: relative;
 
@@ -102,7 +105,9 @@
 
   border-width: var(--border-width);
   border-style: solid;
-  border-color: var(--border-color);
+  // The defaults use `--internal-border-color` since a host
+  // selector can't beat `:host(.input-otp-fill-*)`
+  border-color: var(--border-color, var(--internal-border-color));
 
   background: var(--background);
   color: var(--color);
@@ -134,6 +139,37 @@
   display: none;
 }
 
+// Input Hint Text
+// ----------------------------------------------------------------
+
+.input-otp-bottom {
+  font-size: dynamic-font(12px);
+
+  line-height: dynamic-font(20px);
+
+  text-align: center;
+}
+
+.input-otp-bottom .error-text {
+  display: none;
+
+  color: var(--highlight-color-invalid);
+}
+
+.input-otp-bottom .helper-text {
+  display: block;
+
+  color: $text-color-step-300;
+}
+
+:host(.ion-touched.ion-invalid) .input-otp-bottom .error-text {
+  display: block;
+}
+
+:host(.ion-touched.ion-invalid) .input-otp-bottom .helper-text {
+  display: none;
+}
+
 // Input Separator
 // ----------------------------------------------------------------
 
@@ -198,7 +234,7 @@
 }
 
 :host(.input-otp-fill-solid) {
-  --border-color: #{$background-color-step-50};
+  --internal-border-color: #{$background-color-step-50};
   --background: #{$background-color-step-50};
 }
 
@@ -211,7 +247,7 @@
 
 :host(.input-otp-fill-outline.input-otp-disabled) {
   --background: #{$background-color-step-50};
-  --border-color: #{$background-color-step-100};
+  --internal-border-color: #{$background-color-step-100};
 }
 
 :host(.input-otp-disabled),
@@ -231,7 +267,7 @@
 
 :host(.input-otp-fill-solid.input-otp-disabled),
 :host(.input-otp-fill-solid.input-otp-readonly) {
-  --border-color: #{$background-color-step-100};
+  --internal-border-color: #{$background-color-step-100};
   --background: #{$background-color-step-100};
 }