@unlk/keymaster 1.0.6 → 1.0.8

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8] - 2025-05-12
+
+### Updated
+- Tiled Radio and Checkbox Validation
+
+## [1.0.7] - 2025-05-06
+
+### Added
+- Tiled Radio and Checkbox
+
+### Updated
+- Floating label functionality for Selects
+- Tooltip Border Radius
+
+
 ## [1.0.6] - 2025-05-02
 
 ### Updated

package/dist/css/keymaster.css

@@ -245,7 +245,7 @@ hr {
   opacity: 0.25;
 }
 
-h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
+h6, .h6, h5, .h5, .form-check-tiled .form-check-label:has(span), h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-family: "Neulis Neue";
@@ -290,7 +290,7 @@ h4, .h4 {
   }
 }
 
-h5, .h5 {
+h5, .h5, .form-check-tiled .form-check-label:has(span) {
   font-size: 1.25rem;
 }
 
@@ -3015,7 +3015,7 @@ textarea.form-control-lg {
   font-size: 0.875rem;
   color: #fff;
   background-color: var(--bs-success);
-  border-radius: var(--bs-border-radius);
+  border-radius: var(--bs-border-radius-xs);
 }
 
 .was-validated :valid ~ .valid-feedback,
@@ -3085,7 +3085,7 @@ textarea.form-control-lg {
   font-size: 0.875rem;
   color: #fff;
   background-color: var(--bs-danger);
-  border-radius: var(--bs-border-radius);
+  border-radius: var(--bs-border-radius-xs);
 }
 
 .was-validated :invalid ~ .invalid-feedback,
@@ -6124,7 +6124,7 @@ textarea.form-control-lg {
   --bs-tooltip-font-size: 0.875rem;
   --bs-tooltip-color: var(--bs-body-bg);
   --bs-tooltip-bg: var(--bs-primary);
-  --bs-tooltip-border-radius: var(--bs-border-radius);
+  --bs-tooltip-border-radius: var(--bs-border-radius-xs);
   --bs-tooltip-opacity: 0.9;
   --bs-tooltip-arrow-width: 0.8rem;
   --bs-tooltip-arrow-height: 0.4rem;
@@ -8818,7 +8818,7 @@ textarea.form-control-lg {
   font-family: var(--bs-font-monospace) !important;
 }
 
-.fs-1 {
+.fs-1, .form-check-tiled .form-check-label i {
   font-size: 1.25rem !important;
 }
 
@@ -8826,7 +8826,7 @@ textarea.form-control-lg {
   font-size: 1.125rem !important;
 }
 
-.fs-3 {
+.fs-3, .form-check-tiled .form-check-label span {
   font-size: 1rem !important;
 }
 
@@ -38965,8 +38965,119 @@ readers do not read off random characters that represent icons */
   --bs-btn-close-media-bg: url("data:image/svg+xml, %3csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e.cls-1{fill:rgb%28205.4, 208.6, 214.2%29}.cls-2{fill:%23fff}.cls-3{fill:%231d1f50}%3c/style%3e%3cpath class='cls-1' d='M20 1.25C22.4623 1.25 24.9005 1.73498 27.1753 2.67726C29.4502 3.61953 31.5172 5.00065 33.2583 6.74175C34.9994 8.48285 36.3805 10.5498 37.3227 12.8247C38.265 15.0995 38.75 17.5377 38.75 20C38.75 22.4623 38.265 24.9005 37.3227 27.1753C36.3805 29.4502 34.9994 31.5172 33.2583 33.2583C31.5172 34.9994 29.4502 36.3805 27.1753 37.3227C24.9005 38.265 22.4623 38.75 20 38.75C17.5377 38.75 15.0995 38.265 12.8247 37.3227C10.5498 36.3805 8.48285 34.9994 6.74175 33.2583C5.00065 31.5172 3.61953 29.4502 2.67726 27.1753C1.73498 24.9005 1.25 22.4623 1.25 20C1.25 17.5377 1.73498 15.0995 2.67726 12.8247C3.61953 10.5498 5.00065 8.48285 6.74175 6.74175C8.48285 5.00065 10.5498 3.61953 12.8247 2.67726C15.0995 1.73498 17.5377 1.25 20 1.25ZM20 40C25.3043 40 30.3914 37.8929 34.1421 34.1421C37.8929 30.3914 40 25.3043 40 20C40 14.6957 37.8929 9.60859 34.1421 5.85786C30.3914 2.10714 25.3043 0 20 0C14.6957 0 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40Z'/%3e%3cpath class='cls-2' d='M1.25 20C1.25 22.4623 1.73498 24.9005 2.67726 27.1753C3.61953 29.4502 5.00065 31.5172 6.74175 33.2583C8.48285 34.9994 10.5498 36.3805 12.8247 37.3227C15.0995 38.265 17.5377 38.75 20 38.75C22.4623 38.75 24.9005 38.265 27.1753 37.3227C29.4502 36.3805 31.5172 34.9994 33.2583 33.2583C34.9994 31.5172 36.3805 29.4502 37.3227 27.1753C38.265 24.9005 38.75 22.4623 38.75 20C38.75 17.5377 38.265 15.0995 37.3227 12.8247C36.3805 10.5498 34.9994 8.48285 33.2583 6.74175C31.5172 5.00065 29.4502 3.61953 27.1753 2.67726C24.9005 1.73498 22.4623 1.25 20 1.25C17.5377 1.25 15.0995 1.73498 12.8247 2.67726C10.5498 3.61953 8.48285 5.00065 6.74175 6.74175C5.00065 8.48285 3.61953 10.5498 2.67726 12.8247C1.73498 15.0995 1.25 17.5377 1.25 20ZM13.9297 13.9297C14.1719 13.6875 14.5703 13.6875 14.8125 13.9297L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9375 14.8203C13.6953 14.5781 13.6953 14.1797 13.9375 13.9375L13.9297 13.9297Z'/%3e%3cpath class='cls-3' d='M13.9297 14.8125C13.6875 14.5703 13.6875 14.1719 13.9297 13.9297L13.9375 13.9375C14.1797 13.6953 14.5781 13.6953 14.8203 13.9375L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9297 14.8125Z'/%3e%3c/svg%3e");
 }
 
+.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-form-valid-color);
+  border-color: var(--bs-form-valid-color);
+}
+.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 {
+  border-color: var(--bs-form-valid-color);
+}
+
+.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-form-invalid-color);
+  border-color: var(--bs-form-invalid-color);
+}
+.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 {
+  border-color: var(--bs-form-invalid-color);
+}
+
 .form-control {
   box-shadow: none;
 }
 
+.form-check-tiled {
+  position: relative;
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+.form-check-tiled input:checked label {
+  border-color: #3e51a2;
+}
+.form-check-tiled .form-check-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  white-space: nowrap;
+}
+.form-check-tiled .form-check-input:checked ~ .form-check-label {
+  border-color: #3e51a2;
+}
+.form-check-tiled .form-check-input:checked ~ .form-check-label::before {
+  background-color: #3e51a2;
+  border-color: #3e51a2;
+  opacity: 1;
+  transform: scale(1);
+}
+.form-check-tiled .form-check-label {
+  width: 100%;
+  margin-bottom: 0;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+  border: 0.125rem solid rgb(217.8, 220.2, 224.4);
+  border-radius: 0.375rem;
+  transition: all 0.15s ease-in-out;
+  padding: 1rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-check-tiled .form-check-label {
+    transition: none;
+  }
+}
+.form-check-tiled .form-check-label span {
+  display: block;
+  font-family: "Wix MadeFor Display";
+  font-weight: 400;
+}
+.form-check-tiled .form-check-label::before {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  width: 18px;
+  height: 18px;
+  content: "";
+  background-image: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23fff'%3e%3cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 11px;
+  border: 0.125rem solid rgb(205.4, 208.6, 214.2);
+  opacity: 0;
+  transform: scale(0);
+  border-radius: 50rem;
+  transition: 0.25s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .form-check-tiled .form-check-label::before {
+    transition: none;
+  }
+}
+.form-check-tiled .form-check-label i {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+.form-check-tiled .form-check-label:hover {
+  border-color: #3e51a2;
+}
+.form-check-tiled .form-check-label:hover::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.form-floating > .form-select:not(:focus):has(option[value=""]:checked) {
+  text-indent: 100%;
+  white-space: nowrap;
+}
+.form-floating > .form-select:not(:focus):has(option[value=""]:checked) ~ label {
+  opacity: 1;
+  transform: none;
+}
+
 /*# sourceMappingURL=keymaster.css.map */