@unlk/keymaster 1.7.3 → 1.7.4

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.7.4] - 2026-09-21
+
+### Add
+- Placeholder for Floating Inputs
+- Input Group for Floating Inputs and Standard Inputs
+
+### Updated
+- Input border width and color
+
 ## [1.7.3] - 2026-09-14
 
 ### Updated

package/dist/css/keymaster.css

@@ -18806,9 +18806,9 @@
   --bs-code-color: #d63384;
   --bs-highlight-color: #1c1d1e;
   --bs-highlight-bg: #fff3cd;
-  --bs-border-width: 2px;
+  --bs-border-width: 1px;
   --bs-border-style: solid;
-  --bs-border-color: #a1a5ad;
+  --bs-border-color: #b9bcc1;
   --bs-border-color-translucent: #0000002d;
   --bs-border-radius: .5rem;
   --bs-border-radius-sm: .375rem;
@@ -21173,22 +21173,22 @@ progress {
 }
 
 .col-form-label {
+  padding-top: calc(.375rem + var(--bs-border-width));
+  padding-bottom: calc(.375rem + var(--bs-border-width));
   font-size: inherit;
   margin-bottom: 0;
-  padding-top: .5rem;
-  padding-bottom: .5rem;
   line-height: 1.5;
 }
 
 .col-form-label-lg {
-  padding-top: .625rem;
-  padding-bottom: .625rem;
+  padding-top: calc(.5rem + var(--bs-border-width));
+  padding-bottom: calc(.5rem + var(--bs-border-width));
   font-size: 1.125rem;
 }
 
 .col-form-label-sm {
-  padding-top: .375rem;
-  padding-bottom: .375rem;
+  padding-top: calc(.25rem + var(--bs-border-width));
+  padding-bottom: calc(.25rem + var(--bs-border-width));
   font-size: .875rem;
 }
 
@@ -21203,10 +21203,10 @@ progress {
   color: var(--bs-body-color);
   appearance: none;
   background-color: var(--bs-body-bg);
+  border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius-xs);
   box-shadow: var(--bs-box-shadow-inset);
   background-clip: padding-box;
-  border: .125rem solid #6e727a;
   padding: .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
@@ -21266,7 +21266,7 @@ progress {
   border-color: inherit;
   border-style: solid;
   border-width: 0;
-  border-inline-end-width: .125rem;
+  border-inline-end-width: var(--bs-border-width);
   border-radius: 0;
   margin-inline-end: .75rem;
   padding: .375rem .75rem;
@@ -21287,8 +21287,8 @@ progress {
   width: 100%;
   color: var(--bs-body-color);
   border: solid #0000;
+  border-width: var(--bs-border-width) 0;
   background-color: #0000;
-  border-width: .125rem 0;
   margin-bottom: 0;
   padding: .375rem 0;
   line-height: 1.5;
@@ -21305,8 +21305,8 @@ progress {
 }
 
 .form-control-sm {
+  min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
   border-radius: var(--bs-border-radius-xs);
-  min-height: calc(1.5em + .75rem);
   padding: .25rem .5rem;
   font-size: .875rem;
 }
@@ -21318,8 +21318,8 @@ progress {
 }
 
 .form-control-lg {
+  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
   border-radius: var(--bs-border-radius-sm);
-  min-height: calc(1.5em + 1.25rem);
   padding: .5rem 1rem;
   font-size: 1.125rem;
 }
@@ -21331,20 +21331,20 @@ progress {
 }
 
 textarea.form-control {
-  min-height: calc(1.5em + 1rem);
+  min-height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
 }
 
 textarea.form-control-sm {
-  min-height: calc(1.5em + .75rem);
+  min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
 }
 
 textarea.form-control-lg {
-  min-height: calc(1.5em + 1.25rem);
+  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
 }
 
 .form-control-color {
   width: 3rem;
-  height: calc(1.5em + 1rem);
+  height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
   padding: .375rem;
 }
 
@@ -21363,11 +21363,11 @@ textarea.form-control-lg {
 }
 
 .form-control-color.form-control-sm {
-  height: calc(1.5em + .75rem);
+  height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
 }
 
 .form-control-color.form-control-lg {
-  height: calc(1.5em + 1.25rem);
+  height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
 }
 
 .form-select {
@@ -21377,12 +21377,12 @@ textarea.form-control-lg {
   appearance: none;
   background-color: var(--bs-body-bg);
   background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+  border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius-xs);
   box-shadow: var(--bs-box-shadow-inset);
   background-position: right .75rem center;
   background-repeat: no-repeat;
   background-size: 16px 12px;
-  border: .125rem solid #6e727a;
   padding: .375rem 2.25rem .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
@@ -21692,8 +21692,8 @@ textarea.form-control-lg {
 }
 
 .form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
-  height: 3.75rem;
-  min-height: 3.75rem;
+  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
+  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
   line-height: 1.25;
 }
 
@@ -21706,8 +21706,8 @@ textarea.form-control-lg {
   text-overflow: ellipsis;
   white-space: nowrap;
   pointer-events: none;
+  border: var(--bs-border-width) solid transparent;
   transform-origin: 0 0;
-  border: .125rem solid #0000;
   padding: 1rem .75rem;
   transition: opacity .1s ease-in-out, transform .1s ease-in-out;
   position: absolute;
@@ -21769,7 +21769,7 @@ textarea.form-control-lg {
 }
 
 .form-floating > .form-control-plaintext ~ label {
-  border-width: .125rem 0;
+  border-width: var(--bs-border-width) 0;
 }
 
 .form-floating > :disabled ~ label, .form-floating > .form-control:disabled ~ label {
@@ -21809,8 +21809,8 @@ textarea.form-control-lg {
   text-align: center;
   white-space: nowrap;
   background-color: var(--bs-tertiary-bg);
+  border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius-xs);
-  border: .125rem solid #6e727a;
   align-items: center;
   padding: .375rem .75rem;
   font-size: 1rem;
@@ -21841,9 +21841,9 @@ textarea.form-control-lg {
 }
 
 .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  margin-left: calc(-1 * var(--bs-border-width));
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  margin-left: -.125rem;
 }
 
 .input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .form-select {
@@ -21996,7 +21996,7 @@ textarea.form-control-lg {
   --bs-btn-line-height: 1.5;
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-bg: transparent;
-  --bs-btn-border-width: .125rem;
+  --bs-btn-border-width: var(--bs-border-width);
   --bs-btn-border-color: transparent;
   --bs-btn-border-radius: var(--bs-border-radius);
   --bs-btn-hover-border-color: transparent;
@@ -22549,7 +22549,7 @@ textarea.form-control-lg {
 }
 
 .btn-group > :not(.btn-check:first-child) + .btn, .btn-group > .btn-group:not(:first-child) {
-  margin-left: -.125rem;
+  margin-left: calc(-1 * var(--bs-border-width));
 }
 
 .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn {
@@ -22604,7 +22604,7 @@ textarea.form-control-lg {
 }
 
 .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) {
-  margin-top: -.125rem;
+  margin-top: calc(-1 * var(--bs-border-width));
 }
 
 .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn {
@@ -35489,6 +35489,20 @@ textarea.form-control-lg {
   background-color: #e6e9ff;
 }
 
+.form-floating > .form-control::placeholder, .form-floating > .form-control-plaintext::placeholder {
+  transition: color .2s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-floating > .form-control::placeholder, .form-floating > .form-control-plaintext::placeholder {
+    transition: none;
+  }
+}
+
+.form-floating > .form-control:focus::placeholder, .form-floating > .form-control-plaintext:focus::placeholder {
+  color: rgba(var(--bs-body-color-rgb), .4);
+}
+
 .form-floating > .form-select:not(:focus):has(option[value=""]:checked) {
   text-indent: 100%;
   white-space: nowrap;
@@ -35500,9 +35514,9 @@ textarea.form-control-lg {
 }
 
 .form-floating > .form-control-sm {
+  height: calc(2.5rem + calc(var(--bs-border-width) * 2));
+  min-height: calc(2.5rem + calc(var(--bs-border-width) * 2));
   border-radius: var(--bs-border-radius-xs);
-  height: 2.75rem;
-  min-height: 2.75rem;
   padding: .625rem .5rem;
   line-height: 1.25;
 }
@@ -35531,9 +35545,9 @@ textarea.form-control-lg {
 }
 
 .form-floating > .form-select-sm {
+  height: calc(2.5rem + calc(var(--bs-border-width) * 2));
+  min-height: calc(2.5rem + calc(var(--bs-border-width) * 2));
   border-radius: var(--bs-border-radius-xs);
-  height: 2.75rem;
-  min-height: 2.75rem;
   padding-top: 1.125rem;
   padding-bottom: .25rem;
   padding-left: .5rem;
@@ -35583,12 +35597,12 @@ textarea.form-control-lg {
 }
 
 .otp .otp-slot {
-  width: calc(1.5em + 1rem);
-  height: calc(1.5em + 1rem);
+  width: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
+  height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
+  border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius-xs);
-  border: .125rem solid #6e727a;
   justify-content: center;
   align-items: center;
   font-size: 1rem;
@@ -35630,10 +35644,10 @@ textarea.form-control-lg {
 }
 
 .otp .otp-separator {
+  font-size: 1rem;
+  line-height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
   color: var(--bs-secondary-color);
   margin: 0 .25rem;
-  font-size: 1rem;
-  line-height: calc(1.5em + 1rem);
 }
 
 .otp:has(.otp-slots.disabled) .otp-slots {
@@ -35646,27 +35660,27 @@ textarea.form-control-lg {
 }
 
 .otp.otp-sm .otp-slot {
+  width: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
+  height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
   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);
+  line-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
 }
 
 .otp.otp-lg .otp-slot {
+  width: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
+  height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
   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);
+  line-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
 }
 
 @keyframes otp-blink {