@unlk/keymaster 1.6.7 → 1.6.8

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.6.8] - 2026-08-17
+
+### Add
+- OTP Field
+
 ## [1.6.7] - 2026-08-04
 
 ### Fix

package/dist/css/keymaster.css

@@ -35221,12 +35221,12 @@ textarea.form-control-lg {
 
 .was-validated .form-check.form-check-tiled > .form-check-input:valid ~ .form-check-label, .form-check.form-check-tiled > .form-check-input.is-valid ~ .form-check-label {
   color: var(--bs-body-color);
-  border-color: var(--bs-form-valid-color);
+  border-color: var(--bs-form-valid-border-color);
 }
 
 .was-validated .form-check.form-check-tiled > .form-check-input:valid ~ .form-check-label:before, .form-check.form-check-tiled > .form-check-input.is-valid ~ .form-check-label:before {
   background-color: var(--bs-form-valid-color);
-  border-color: var(--bs-form-valid-color);
+  border-color: var(--bs-form-valid-border-color);
 }
 
 .was-validated .form-check-encapsulated .form-check-input:valid ~ .form-check-label, .form-check-encapsulated .form-check-input.is-valid ~ .form-check-label {
@@ -35246,14 +35246,32 @@ textarea.form-control-lg {
   box-shadow: var(--bs-box-shadow-inset), 0 0 0 .0625rem var(--bs-form-valid-color);
 }
 
+.was-validated .otp:has(.otp-input:valid) .otp-slot, .otp:has(.otp-input.is-valid) .otp-slot {
+  border-color: var(--bs-form-valid-border-color);
+}
+
+.otp:has(.otp-input:user-valid) .otp-slot {
+  border-color: var(--bs-form-valid-border-color);
+}
+
+.was-validated .otp:has(.otp-input:valid) .otp-slot.otp-slot-active, .otp:has(.otp-input.is-valid) .otp-slot.otp-slot-active {
+  border-color: var(--bs-form-valid-border-color);
+  box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25);
+}
+
+.otp:has(.otp-input:user-valid) .otp-slot.otp-slot-active {
+  border-color: var(--bs-form-valid-border-color);
+  box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25);
+}
+
 .was-validated .form-check.form-check-tiled > .form-check-input:invalid ~ .form-check-label, .form-check.form-check-tiled > .form-check-input.is-invalid ~ .form-check-label {
   color: var(--bs-body-color);
-  border-color: var(--bs-form-invalid-color);
+  border-color: var(--bs-form-invalid-border-color);
 }
 
 .was-validated .form-check.form-check-tiled > .form-check-input:invalid ~ .form-check-label:before, .form-check.form-check-tiled > .form-check-input.is-invalid ~ .form-check-label:before {
   background-color: var(--bs-form-invalid-color);
-  border-color: var(--bs-form-invalid-color);
+  border-color: var(--bs-form-invalid-border-color);
 }
 
 .was-validated .form-check-encapsulated .form-check-input:invalid ~ .form-check-label, .form-check-encapsulated .form-check-input.is-invalid ~ .form-check-label {
@@ -35273,6 +35291,24 @@ textarea.form-control-lg {
   box-shadow: var(--bs-box-shadow-inset), 0 0 0 .0625rem var(--bs-form-invalid-color);
 }
 
+.was-validated .otp:has(.otp-input:invalid) .otp-slot, .otp:has(.otp-input.is-invalid) .otp-slot {
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.otp:has(.otp-input:user-invalid) .otp-slot {
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.was-validated .otp:has(.otp-input:invalid) .otp-slot.otp-slot-active, .otp:has(.otp-input.is-invalid) .otp-slot.otp-slot-active {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
+}
+
+.otp:has(.otp-input:user-invalid) .otp-slot.otp-slot-active {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
+}
+
 .form-control {
   box-shadow: none;
 }
@@ -35492,6 +35528,139 @@ textarea.form-control-lg {
   transform: scale(.85) translateY(-.5rem) translateX(.15rem);
 }
 
+.otp-wrapper {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .375rem;
+  display: flex;
+}
+
+.otp {
+  display: inline-block;
+  position: relative;
+}
+
+.otp .otp-input {
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.otp .otp-slots {
+  cursor: text;
+  -webkit-user-select: none;
+  user-select: none;
+  align-items: center;
+  gap: .375rem;
+  display: flex;
+}
+
+.otp .otp-group {
+  gap: .375rem;
+  display: flex;
+}
+
+.otp .otp-slot {
+  width: calc(1.5em + 1rem);
+  height: calc(1.5em + 1rem);
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-radius: var(--bs-border-radius-xs);
+  border: .125rem solid #6e727a;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  display: flex;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .otp .otp-slot {
+    transition: none;
+  }
+}
+
+.otp .otp-slot.otp-slot-active {
+  border-color: #02f;
+  outline: 0;
+  box-shadow: 0 0 0 .25rem #0022ff40;
+}
+
+.otp .otp-slot.otp-slot-active .otp-cursor {
+  animation: 1s step-end infinite otp-blink;
+}
+
+.otp .otp-slot.otp-slot-filled .otp-cursor {
+  display: none;
+}
+
+.otp .otp-char {
+  line-height: 1;
+}
+
+.otp .otp-cursor {
+  opacity: 0;
+  background-color: currentColor;
+  width: 1px;
+  height: 1.25em;
+  position: absolute;
+}
+
+.otp .otp-separator {
+  color: var(--bs-secondary-color);
+  margin: 0 .25rem;
+  font-size: 1rem;
+  line-height: calc(1.5em + 1rem);
+}
+
+.otp:has(.otp-slots.disabled) .otp-slots {
+  pointer-events: none;
+  cursor: default;
+}
+
+.otp:has(.otp-slots.disabled) .otp-slot {
+  background-color: var(--bs-secondary-bg);
+}
+
+.otp.otp-sm .otp-slot {
+  border-radius: var(--bs-border-radius-xs);
+  width: calc(1.5em + .75rem);
+  height: calc(1.5em + .75rem);
+  font-size: .875rem;
+}
+
+.otp.otp-sm .otp-separator {
+  font-size: .875rem;
+  line-height: calc(1.5em + .75rem);
+}
+
+.otp.otp-lg .otp-slot {
+  border-radius: var(--bs-border-radius-sm);
+  width: calc(1.5em + 1.25rem);
+  height: calc(1.5em + 1.25rem);
+  font-size: 1.125rem;
+}
+
+.otp.otp-lg .otp-separator {
+  font-size: 1.125rem;
+  line-height: calc(1.5em + 1.25rem);
+}
+
+@keyframes otp-blink {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}
+
 .pagination {
   border-radius: var(--bs-border-radius-xs);
   background-color: #f2f4ff;