@unlk/keymaster 1.0.6 → 1.0.8

package/dist/js/keymaster.js

@@ -1,5 +1,5 @@
 /*!
-  * Unlock Keymaster v1.0.6 (https://unlock-com.github.io/keymaster)
+  * Unlock Keymaster v1.0.8 (https://unlock-com.github.io/keymaster)
   * Copyright 2022-2025 Unlk Developers
   */
 (function (global, factory) {

package/dist/js/keymaster.min.js

@@ -1,5 +1,5 @@
 /*!
-  * Unlock Keymaster v1.0.6 (https://unlock-com.github.io/keymaster)
+  * Unlock Keymaster v1.0.8 (https://unlock-com.github.io/keymaster)
   * Copyright 2022-2025 Unlk Developers
   */
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).keymaster={})}(this,(function(e){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(e){if(e.__esModule)return e;var t=Object.defineProperty({},"__esModule",{value:!0});return Object.keys(e).forEach((function(n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})})),t}var n={exports:{}},i={exports:{}},s={exports:{}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "publishConfig": {
     "access": "public"
   },

package/scss/keymaster.scss

@@ -20,6 +20,7 @@
 // Mixins
 @import "theme/mixins/buttons";
 @import "theme/mixins/badge";
+@import "theme/mixins/forms";
 
 // Theme
 @import "theme/variables";

package/scss/theme/_forms.scss

@@ -1 +1,4 @@
+@import "forms/validation";
 @import "forms/form-control";
+@import "forms/form-check";
+@import "forms/floating-labels";

package/scss/theme/_variables-overrides.scss

@@ -459,6 +459,7 @@ $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w
 $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M11.7482 5.87002C12.083 5.52822 12.083 4.97314 11.7482 4.63135L7.4625 0.256348C7.12768 -0.0854492 6.58393 -0.0854492 6.24911 0.256348C5.91429 0.598145 5.91429 1.15322 6.24911 1.49502L9.075 4.37705H0.857143C0.383036 4.37705 0 4.76807 0 5.25205C0 5.73604 0.383036 6.12705 0.857143 6.12705H9.07232L6.25179 9.00908C5.91696 9.35088 5.91696 9.90596 6.25179 10.2478C6.58661 10.5896 7.13036 10.5896 7.46518 10.2478L11.7509 5.87275L11.7482 5.87002Z'/></svg>") !default;
 
 // Tooltips
+$tooltip-border-radius: var(--#{$prefix}border-radius-xs) !default;
 $tooltip-bg: var(--#{$prefix}primary) !default;
 
 // Progress

package/scss/theme/forms/_floating-labels.scss

@@ -0,0 +1,12 @@
+.form-floating {
+  // stylelint-disable-next-line selector-no-qualifying-type
+  > .form-select:not(:focus):has(option[value=""]:checked) {
+    text-indent: 100%;
+    white-space: nowrap;
+
+    ~ label {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}

package/scss/theme/forms/_form-check.scss

@@ -0,0 +1,89 @@
+.form-check-tiled {
+  position: relative;
+  padding-right: $spacer * .25;
+  padding-left: $spacer * .25;
+  margin-bottom: $spacer * .5;
+
+  input:checked {
+    label {
+      border-color: $primary;
+    }
+  }
+
+  .form-check-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    white-space: nowrap;
+
+    &:checked {
+      ~ .form-check-label {
+        border-color: $primary;
+
+        &::before {
+          background-color: $primary;
+          border-color: $primary;
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
+  .form-check-label {
+    width: 100%;
+    margin-bottom: 0;
+    font-weight: $font-weight-bold;
+    text-align: left;
+    cursor: pointer;
+    border: rfs-value(2px) solid $gray-300;
+    @include border-radius($border-radius-sm);
+    @include transition(all .15s ease-in-out);
+    @include padding($spacer);
+    &:has(span) {
+      @extend .h5;
+    }
+    span {
+      display: block;
+      font-family: $font-family-base;
+      font-weight: $font-weight-normal;
+      @extend .fs-3;
+    }
+
+    &::before {
+      position: absolute;
+      top: 8px;
+      right: 12px;
+      width: 18px;
+      height: 18px;
+      content: "";
+      background-image: escape-svg(url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$white}'><path 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'/></svg>"));
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 11px;
+      border: rfs-value(2px) solid $gray-400;
+      opacity: 0;
+      transform: scale(0);
+      @include border-radius($border-radius-pill);
+      @include transition(.25s ease);
+    }
+
+    i {
+      @extend .fs-1;
+      display: block;
+      margin-bottom: $spacer * .5;
+    }
+
+    &:hover {
+      border-color: $primary;
+
+      &::before {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+}

package/scss/theme/forms/_validation.scss

@@ -0,0 +1,5 @@
+@each $state, $data in $form-validation-states {
+  $color: map-get($data, color);
+  $border-color: $color;
+  @include form-check-tiled-validation-state($state, $color, $border-color);
+}

package/scss/theme/mixins/_forms.scss

@@ -0,0 +1,11 @@
+@mixin form-check-tiled-validation-state($state, $color, $border-color: $color) {
+  .form-check.form-check-tiled > .form-check-input:#{$state} ~ .form-check-label,
+  .form-check.form-check-tiled > .form-check-input.is-#{$state} ~ .form-check-label {
+    color: $color;
+    border-color: $border-color;
+
+    &::before {
+      border-color: $border-color;
+    }
+  }
+}