@unlk/keymaster 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
+## [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;
 }
 
@@ -38969,4 +38969,95 @@ readers do not read off random characters that represent icons */
   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 */