@unlk/keymaster 1.2.6 → 1.2.7

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.2.7] - 2025-11-13
+
+### Add
+- Icon and Icon Outline Button
+
 ## [1.2.6] - 2025-11-10
 
 ### Update

package/dist/css/keymaster.css

@@ -35746,23 +35746,6 @@ textarea.form-control-lg {
   margin-left: 0.5rem;
 }
 
-.btn-link-action {
-  --bs-btn-color: rgb(19.3, 19.7, 20.4);
-  --bs-btn-bg: transparent;
-  --bs-btn-border-color: transparent;
-  --bs-btn-hover-color: rgb(19.3, 19.7, 20.4);
-  --bs-btn-hover-bg: rgb(229.5, 232.9, 255);
-  --bs-btn-hover-border-color: transparent;
-  --bs-btn-active-bg: rgb(0, 20.4, 153);
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-border-color: transparent;
-  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-color: rgb(217.8, 220.2, 224.4);
-  --bs-btn-disabled-border-color: transparent;
-  --bs-btn-focus-shadow-rgb: 65, 65, 105;
-  text-decoration: none;
-}
-
 .btn-primary {
   --bs-btn-color: #fff;
   --bs-btn-bg: #1f1f4f;
@@ -35780,6 +35763,47 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #1f1f4f;
 }
 
+.btn-icon-primary {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  text-align: center;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #1f1f4f;
+  --bs-btn-border-color: #1f1f4f;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: rgb(24.8, 24.8, 63.2);
+  --bs-btn-hover-border-color: rgb(24.8, 24.8, 63.2);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(18.6, 18.6, 47.4);
+  --bs-btn-active-border-color: rgb(18.6, 18.6, 47.4);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #1f1f4f;
+}
+
+.btn-icon-outline-primary {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #1f1f4f;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: #1f1f4f;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #1f1f4f;
+  --bs-btn-hover-border-color: #1f1f4f;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(18.6, 18.6, 47.4);
+  --bs-btn-active-border-color: rgb(18.6, 18.6, 47.4);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #1f1f4f;
+}
+
 .btn-secondary {
   --bs-btn-color: rgb(19.3, 19.7, 20.4);
   --bs-btn-bg: #fbcd18;
@@ -35797,6 +35821,47 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #fbcd18;
 }
 
+.btn-icon-secondary {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  text-align: center;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #fbcd18;
+  --bs-btn-border-color: #fbcd18;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: rgb(251.8, 215, 70.2);
+  --bs-btn-hover-border-color: rgb(251.8, 215, 70.2);
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: rgb(252.6, 225, 116.4);
+  --bs-btn-active-border-color: rgb(252.6, 225, 116.4);
+  --bs-btn-disabled-color: rgb(19.3, 19.7, 20.4);
+  --bs-btn-disabled-border-color: #fbcd18;
+}
+
+.btn-icon-outline-secondary {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #fbcd18;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: #fbcd18;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #fbcd18;
+  --bs-btn-hover-border-color: #fbcd18;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: rgb(150.6, 123, 14.4);
+  --bs-btn-active-border-color: rgb(150.6, 123, 14.4);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #fbcd18;
+}
+
 .btn-success {
   --bs-btn-color: #000;
   --bs-btn-bg: #09cc8b;
@@ -35814,6 +35879,64 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #09cc8b;
 }
 
+.btn-icon-success {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  text-align: center;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #09cc8b;
+  --bs-btn-border-color: #09cc8b;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: rgb(7.2, 163.2, 111.2);
+  --bs-btn-hover-border-color: rgb(7.2, 163.2, 111.2);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(5.4, 122.4, 83.4);
+  --bs-btn-active-border-color: rgb(5.4, 122.4, 83.4);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #09cc8b;
+}
+
+.btn-icon-outline-success {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #09cc8b;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: #09cc8b;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #09cc8b;
+  --bs-btn-hover-border-color: #09cc8b;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(5.4, 122.4, 83.4);
+  --bs-btn-active-border-color: rgb(5.4, 122.4, 83.4);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #09cc8b;
+}
+
+.btn-link-action {
+  --bs-btn-color: rgb(19.3, 19.7, 20.4);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-color: rgb(19.3, 19.7, 20.4);
+  --bs-btn-hover-bg: rgb(229.5, 232.9, 255);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-bg: rgb(0, 20.4, 153);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-border-color: transparent;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-color: rgb(217.8, 220.2, 224.4);
+  --bs-btn-disabled-border-color: transparent;
+  --bs-btn-focus-shadow-rgb: 65, 65, 105;
+  text-decoration: none;
+}
+
 .btn-action {
   --bs-btn-color: #fff;
   --bs-btn-bg: #02f;
@@ -35831,6 +35954,47 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #0022ff;
 }
 
+.btn-icon-action {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  text-align: center;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #02f;
+  --bs-btn-border-color: #02f;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: rgb(0, 27.2, 204);
+  --bs-btn-hover-border-color: rgb(0, 27.2, 204);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(0, 20.4, 153);
+  --bs-btn-active-border-color: rgb(0, 20.4, 153);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #0022ff;
+}
+
+.btn-icon-outline-action {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #02f;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: #02f;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #02f;
+  --bs-btn-hover-border-color: #02f;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(0, 20.4, 153);
+  --bs-btn-active-border-color: rgb(0, 20.4, 153);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #0022ff;
+}
+
 .btn-warning {
   --bs-btn-color: #000;
   --bs-btn-bg: #ff6a1a;
@@ -35848,6 +36012,47 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #ff6a1a;
 }
 
+.btn-icon-warning {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  text-align: center;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #ff6a1a;
+  --bs-btn-border-color: #ff6a1a;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: rgb(204, 84.8, 20.8);
+  --bs-btn-hover-border-color: rgb(204, 84.8, 20.8);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(153, 63.6, 15.6);
+  --bs-btn-active-border-color: rgb(153, 63.6, 15.6);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #ff6a1a;
+}
+
+.btn-icon-outline-warning {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #ff6a1a;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: #ff6a1a;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #ff6a1a;
+  --bs-btn-hover-border-color: #ff6a1a;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(153, 63.6, 15.6);
+  --bs-btn-active-border-color: rgb(153, 63.6, 15.6);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #ff6a1a;
+}
+
 .btn-danger {
   --bs-btn-color: #fff;
   --bs-btn-bg: #e4263e;
@@ -35865,6 +36070,47 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #e4263e;
 }
 
+.btn-icon-danger {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  text-align: center;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #e4263e;
+  --bs-btn-border-color: #e4263e;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: rgb(182.4, 30.4, 49.6);
+  --bs-btn-hover-border-color: rgb(182.4, 30.4, 49.6);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(136.8, 22.8, 37.2);
+  --bs-btn-active-border-color: rgb(136.8, 22.8, 37.2);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #e4263e;
+}
+
+.btn-icon-outline-danger {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #e4263e;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: #e4263e;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #e4263e;
+  --bs-btn-hover-border-color: #e4263e;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(136.8, 22.8, 37.2);
+  --bs-btn-active-border-color: rgb(136.8, 22.8, 37.2);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: #e4263e;
+}
+
 .btn-light {
   --bs-btn-color: #000;
   --bs-btn-bg: #fff;
@@ -35882,6 +36128,47 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: white;
 }
 
+.btn-icon-light {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  text-align: center;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #fff;
+  --bs-btn-border-color: #fff;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #cccccc;
+  --bs-btn-hover-border-color: #cccccc;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #999999;
+  --bs-btn-active-border-color: #999999;
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: white;
+}
+
+.btn-icon-outline-light {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #fff;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: #fff;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #fff;
+  --bs-btn-hover-border-color: #fff;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #999999;
+  --bs-btn-active-border-color: #999999;
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: white;
+}
+
 .btn-dark {
   --bs-btn-color: #fff;
   --bs-btn-bg: rgb(38.6, 39.4, 40.8);
@@ -35899,6 +36186,84 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: rgb(38.6, 39.4, 40.8);
 }
 
+.btn-icon-dark {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  text-align: center;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: #fff;
+  --bs-btn-bg: rgb(38.6, 39.4, 40.8);
+  --bs-btn-border-color: rgb(38.6, 39.4, 40.8);
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: rgb(30.88, 31.52, 32.64);
+  --bs-btn-hover-border-color: rgb(30.88, 31.52, 32.64);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(23.16, 23.64, 24.48);
+  --bs-btn-active-border-color: rgb(23.16, 23.64, 24.48);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: rgb(38.6, 39.4, 40.8);
+}
+
+.btn-icon-outline-dark {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 1;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-color: rgb(38.6, 39.4, 40.8);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: rgb(38.6, 39.4, 40.8);
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: rgb(38.6, 39.4, 40.8);
+  --bs-btn-hover-border-color: rgb(38.6, 39.4, 40.8);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(23.16, 23.64, 24.48);
+  --bs-btn-active-border-color: rgb(23.16, 23.64, 24.48);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-border-color: rgb(38.6, 39.4, 40.8);
+}
+
+[class*=btn-icon-].btn-sm, .btn-group-sm > [class*=btn-icon-].btn,
+[class*=btn-icon-outline-].btn-sm,
+.btn-group-sm > [class*=btn-icon-outline-].btn {
+  width: 2rem;
+  height: 2rem;
+  --bs-btn-padding-x: 0;
+  --bs-btn-padding-y: 0;
+}
+[class*=btn-icon-].btn-lg, .btn-group-lg > [class*=btn-icon-].btn,
+[class*=btn-icon-outline-].btn-lg,
+.btn-group-lg > [class*=btn-icon-outline-].btn {
+  width: 3rem;
+  height: 3rem;
+}
+
+.btn-sm > i + *, .btn-group-sm > .btn > i + *,
+.btn-sm > .icon + *,
+.btn-group-sm > .btn > .icon + * {
+  margin-left: 0.375rem;
+}
+.btn-sm > * + i, .btn-group-sm > .btn > * + i,
+.btn-sm > * + .icon,
+.btn-group-sm > .btn > * + .icon {
+  margin-left: 0.375rem;
+}
+
+.btn-lg > i + *, .btn-group-lg > .btn > i + *,
+.btn-lg > .icon + *,
+.btn-group-lg > .btn > .icon + * {
+  margin-left: 0.625rem;
+}
+.btn-lg > * + i, .btn-group-lg > .btn > * + i,
+.btn-lg > * + .icon,
+.btn-group-lg > .btn > * + .icon {
+  margin-left: 0.625rem;
+}
+
 .accordion {
   --bs-accordion-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   border-radius: var(--bs-accordion-border-radius);