Merge branch 'refactor-otp' into doc-authenticator

# Conflicts:
#	src/BootstrapBlazor/Components/Input/OtpInput.razor
#	src/BootstrapBlazor/Components/Input/OtpInput.razor.cs
#	src/BootstrapBlazor/Components/Input/OtpInput.razor.scss

Author: ArgoZhang

src/BootstrapBlazor/Components/Input/OtpInput.razor

@@ -6,7 +6,19 @@
     {
         if (index < _values.Length)
         {
-            <span class="@SpanClassString">@_values[index]</span>
+            @if (IsReadonly || IsDisabled)
+            {
+                <span class="@ItemClassString">@_values[index]</span>
+            }
+            else
+            {
+                <span class="@ItemClassString">
+                    @{
+                        var charIndex = index;
+                    }
+                    <input type="@TypeString" @bind="@_values[charIndex]" />
+                </span>
+            }
         }
     }
 </div>

src/BootstrapBlazor/Components/Input/OtpInput.razor.cs

@@ -17,7 +17,13 @@ public partial class OtpInput
     public int Digits { get; set; } = 6;
 
     /// <summary>
-    /// 
+    /// Gets or sets whether the OTP input is readonly. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool IsReadonly { get; set; }
+
+    /// <summary>
+    /// Gets or sets the value type of the OTP input. Default is <see cref="OtpInputType.Number"/>.
     /// </summary>
     [Parameter]
     public OtpInputType Type { get; set; }
@@ -26,10 +32,18 @@ public partial class OtpInput
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? SpanClassString => CssBuilder.Default("bb-opt-span")
+    private string? ItemClassString => CssBuilder.Default("bb-opt-item")
+        .AddClass("disabled", IsDisabled)
         .AddClass(ValidCss)
         .Build();
 
+    private string TypeString => Type switch
+    {
+        OtpInputType.Number => "number",
+        OtpInputType.Password => "password",
+        _ => "text"
+    };
+
     private char[] _values = [];
 
     /// <summary>

src/BootstrapBlazor/Components/Input/OtpInput.razor.scss

@@ -1,11 +1,22 @@
-.bb-opt-span {
+.bb-opt-item {
+    --bb-opt-item-padding: #{$bb-opt-item-padding};
+    --bb-opt-item-margin: #{$bb-opt-item-margin};
+    --bb-opt-font-size: #{$bb-opt-font-size};
+    --bb-opt-border-width: #{$bb-opt-border-width};
     display: inline-block;
-    border: 1px solid var(--bs-border-color);
-    font-size: 3em;
-    padding: 0 .5em;
+    border: var(--bb-opt-border-width) solid var(--bs-border-color);
+    font-size: var(--bb-opt-font-size);
+    padding: var(--bb-opt-item-padding);
     border-radius: var(--bs-border-radius);
 
     &:not(:last-child) {
-        margin-right: .5rem;
+        margin-right: var(--bb-opt-item-margin);
+    }
+
+    &.disabled {
+        cursor: not-allowed;
+    }
+
+    > input {
     }
 }

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -314,6 +314,12 @@ $bb-viewer-border-radius: 50%;
 // Ip Address
 $bb-ip-cell-max-width: 30px;
 
+// OptInput
+$bb-opt-item-padding: 0 .5rem;
+$bb-opt-item-margin: .5rem;
+$bb-opt-font-size: 3em;
+$bb-opt-border-width: 1px;
+
 // Layout
 $bb-layout-header-height: 50px;
 $bb-layout-header-background: #0078d4;