@qrsln/lootstrap 22.2.2-beta.0 → 22.2.7-beta.0

package/dist/css/lootstrap.css

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 /*!
- * CSS Compiled on: 2022-02-02
+ * CSS Compiled on: 2022-02-07
  *
- * Lootstrap v22.2.2-beta.0 (https://github.com/krsln/Lootstrap/)
+ * Lootstrap v22.2.7-beta.0 (https://github.com/krsln/Lootstrap/)
  * Copyright 2022 Qrsln.
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
 */
@@ -1609,6 +1609,184 @@ progress {
 .After-border-night:after {
   border-color: hsla(0deg,0%,35%,var(--ls-border-alpha,1))!important
 }
+.F-red {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(31%) sepia(83%) saturate(1382%) hue-rotate(325deg) brightness(87%) contrast(93%)!important
+}
+.F-lime {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(70%) sepia(52%) saturate(6787%) hue-rotate(83deg) brightness(127%) contrast(120%)!important
+}
+.F-blue {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(23%) sepia(98%) saturate(1650%) hue-rotate(198deg) brightness(104%) contrast(105%)!important
+}
+.F-yellow {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(68%) sepia(88%) saturate(529%) hue-rotate(354deg) brightness(101%) contrast(103%)!important
+}
+.F-cyan {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(74%) sepia(89%) saturate(1247%) hue-rotate(131deg) brightness(106%) contrast(109%)!important
+}
+.F-magenta {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(17%) sepia(100%) saturate(3641%) hue-rotate(296deg) brightness(117%) contrast(124%)!important
+}
+.F-purple {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(28%) sepia(68%) saturate(1773%) hue-rotate(242deg) brightness(88%) contrast(88%)!important
+}
+.F-green {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(52%) sepia(15%) saturate(2202%) hue-rotate(82deg) brightness(99%) contrast(86%)!important
+}
+.F-maroon {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(10%) sepia(85%) saturate(3597%) hue-rotate(317deg) brightness(96%) contrast(92%)!important
+}
+.F-navy {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(10%) sepia(15%) saturate(7084%) hue-rotate(187deg) brightness(100%) contrast(104%)!important
+}
+.F-teal {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(72%) sepia(9%) saturate(3292%) hue-rotate(110deg) brightness(91%) contrast(85%)!important
+}
+.F-olive {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(37%) sepia(91%) saturate(1164%) hue-rotate(40deg) brightness(94%) contrast(100%)!important
+}
+.F-orange {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(42%) sepia(21%) saturate(5566%) hue-rotate(2deg) brightness(104%) contrast(93%)!important
+}
+.F-pink {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(40%) sepia(65%) saturate(3659%) hue-rotate(302deg) brightness(103%) contrast(83%)!important
+}
+.F-brown {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(20%) sepia(12%) saturate(6107%) hue-rotate(327deg) brightness(103%) contrast(71%)!important
+}
+.F-indigo {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(4%) sepia(86%) saturate(7495%) hue-rotate(259deg) brightness(101%) contrast(101%)!important
+}
+.F-white {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(1) grayscale(100%) brightness(200%)!important
+}
+.F-silver {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(89%) sepia(0%) saturate(7%) hue-rotate(172deg) brightness(91%) contrast(82%)!important
+}
+.F-gray {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(46%) sepia(2%) saturate(2321%) hue-rotate(174deg) brightness(94%) contrast(86%)!important
+}
+.F-primary {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(24%) sepia(68%) saturate(6878%) hue-rotate(257deg) brightness(66%) contrast(115%)!important
+}
+.F-secondary {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(49%) sepia(8%) saturate(443%) hue-rotate(166deg) brightness(91%) contrast(91%)!important
+}
+.F-success {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(52%) sepia(15%) saturate(2202%) hue-rotate(82deg) brightness(99%) contrast(86%)!important
+}
+.F-info {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(23%) sepia(98%) saturate(1650%) hue-rotate(198deg) brightness(104%) contrast(105%)!important
+}
+.F-warning {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(68%) sepia(88%) saturate(529%) hue-rotate(354deg) brightness(101%) contrast(103%)!important
+}
+.F-danger {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(31%) sepia(83%) saturate(1382%) hue-rotate(325deg) brightness(87%) contrast(93%)!important
+}
+.F-light {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(100%) sepia(14%) saturate(445%) hue-rotate(176deg) brightness(100%) contrast(97%)!important
+}
+.F-dark {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(21%) sepia(10%) saturate(581%) hue-rotate(169deg) brightness(96%) contrast(92%)!important
+}
+.F-none {
+  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(21%) sepia(10%) saturate(581%) hue-rotate(169deg) brightness(96%) contrast(92%)!important
+}
+.F-blur {
+  filter: blur(var(--filter-blur, 0))
+}
+.F-blur-0 {
+  --filter-blur: 0
+}
+.F-blur-1 {
+  --filter-blur: 2px
+}
+.F-blur-2 {
+  --filter-blur: 4px
+}
+.F-blur-3 {
+  --filter-blur: 6px
+}
+.F-blur-4 {
+  --filter-blur: 8px
+}
+.F-shadow {
+  filter: var(--drop-shadow, drop-shadow(0 0 #0000))
+}
+.F-shadow-0 {
+  --drop-shadow: drop-shadow(0 0 #0000)
+}
+.F-shadow {
+  --drop-shadow: drop-shadow(0px 1px 1px rgba(var(--ls-shadow-color-rgb), 0.72)) drop-shadow(0px 2px 2px rgba(var(--ls-shadow-color-rgb), 0.48)) drop-shadow(0px 4px 6px rgba(var(--ls-shadow-color-rgb), 0.24))
+}
+.F-shadow-2x {
+  --drop-shadow: drop-shadow(0px 1px 1px rgba(var(--ls-shadow-color-rgb), 0.72)) drop-shadow(0px 2px 3px rgba(var(--ls-shadow-color-rgb), 0.48)) drop-shadow(0px 6px 9px rgba(var(--ls-shadow-color-rgb), 0.24))
+}
+.F-shadow-3x {
+  --drop-shadow: drop-shadow(0px 2px 2px rgba(var(--ls-shadow-color-rgb), 0.72)) drop-shadow(0px 3px 4px rgba(var(--ls-shadow-color-rgb), 0.48)) drop-shadow(0px 9px 12px rgba(var(--ls-shadow-color-rgb), 0.24))
+}
+.Position-static {
+  position: static!important
+}
+.Position-relative {
+  position: relative!important
+}
+.Position-absolute {
+  position: absolute!important
+}
+.Position-fixed {
+  position: fixed!important
+}
+.Position-sticky {
+  position: -webkit-sticky!important;
+  position: sticky!important
+}
+.Top-0 {
+  top: 0!important
+}
+.Top-50 {
+  top: 50%!important
+}
+.Top-100 {
+  top: 100%!important
+}
+.Bottom-0 {
+  bottom: 0!important
+}
+.Bottom-50 {
+  bottom: 50%!important
+}
+.Bottom-100 {
+  bottom: 100%!important
+}
+.Start-0 {
+  left: 0!important
+}
+.Start-50 {
+  left: 50%!important
+}
+.Start-100 {
+  left: 100%!important
+}
+.End-0 {
+  right: 0!important
+}
+.End-50 {
+  right: 50%!important
+}
+.End-100 {
+  right: 100%!important
+}
+.Translate-middle {
+  transform: translate(-50%,-50%)!important
+}
+.Translate-middle-x {
+  transform: translateX(-50%)!important
+}
+.Translate-middle-y {
+  transform: translateY(-50%)!important
+}
 .M-0 {
   margin: 0!important
 }
@@ -5011,120 +5189,6 @@ progress {
     padding-left: 3rem!important
   }
 }
-.F-red {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(31%) sepia(83%) saturate(1382%) hue-rotate(325deg) brightness(87%) contrast(93%)!important
-}
-.F-lime {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(70%) sepia(52%) saturate(6787%) hue-rotate(83deg) brightness(127%) contrast(120%)!important
-}
-.F-blue {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(23%) sepia(98%) saturate(1650%) hue-rotate(198deg) brightness(104%) contrast(105%)!important
-}
-.F-yellow {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(68%) sepia(88%) saturate(529%) hue-rotate(354deg) brightness(101%) contrast(103%)!important
-}
-.F-cyan {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(74%) sepia(89%) saturate(1247%) hue-rotate(131deg) brightness(106%) contrast(109%)!important
-}
-.F-magenta {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(17%) sepia(100%) saturate(3641%) hue-rotate(296deg) brightness(117%) contrast(124%)!important
-}
-.F-purple {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(28%) sepia(68%) saturate(1773%) hue-rotate(242deg) brightness(88%) contrast(88%)!important
-}
-.F-green {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(52%) sepia(15%) saturate(2202%) hue-rotate(82deg) brightness(99%) contrast(86%)!important
-}
-.F-maroon {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(10%) sepia(85%) saturate(3597%) hue-rotate(317deg) brightness(96%) contrast(92%)!important
-}
-.F-navy {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(10%) sepia(15%) saturate(7084%) hue-rotate(187deg) brightness(100%) contrast(104%)!important
-}
-.F-teal {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(72%) sepia(9%) saturate(3292%) hue-rotate(110deg) brightness(91%) contrast(85%)!important
-}
-.F-olive {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(37%) sepia(91%) saturate(1164%) hue-rotate(40deg) brightness(94%) contrast(100%)!important
-}
-.F-orange {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(42%) sepia(21%) saturate(5566%) hue-rotate(2deg) brightness(104%) contrast(93%)!important
-}
-.F-pink {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(40%) sepia(65%) saturate(3659%) hue-rotate(302deg) brightness(103%) contrast(83%)!important
-}
-.F-brown {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(20%) sepia(12%) saturate(6107%) hue-rotate(327deg) brightness(103%) contrast(71%)!important
-}
-.F-indigo {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(4%) sepia(86%) saturate(7495%) hue-rotate(259deg) brightness(101%) contrast(101%)!important
-}
-.F-white {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(1) grayscale(100%) brightness(200%)!important
-}
-.F-silver {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(89%) sepia(0%) saturate(7%) hue-rotate(172deg) brightness(91%) contrast(82%)!important
-}
-.F-gray {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(46%) sepia(2%) saturate(2321%) hue-rotate(174deg) brightness(94%) contrast(86%)!important
-}
-.F-primary {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(24%) sepia(68%) saturate(6878%) hue-rotate(257deg) brightness(66%) contrast(115%)!important
-}
-.F-secondary {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(49%) sepia(8%) saturate(443%) hue-rotate(166deg) brightness(91%) contrast(91%)!important
-}
-.F-success {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(52%) sepia(15%) saturate(2202%) hue-rotate(82deg) brightness(99%) contrast(86%)!important
-}
-.F-info {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(23%) sepia(98%) saturate(1650%) hue-rotate(198deg) brightness(104%) contrast(105%)!important
-}
-.F-warning {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(68%) sepia(88%) saturate(529%) hue-rotate(354deg) brightness(101%) contrast(103%)!important
-}
-.F-danger {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(31%) sepia(83%) saturate(1382%) hue-rotate(325deg) brightness(87%) contrast(93%)!important
-}
-.F-light {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(100%) sepia(14%) saturate(445%) hue-rotate(176deg) brightness(100%) contrast(97%)!important
-}
-.F-dark {
-  filter: blur(var(--filter-blur, 0)) var(--drop-shadow, drop-shadow(0 0 #0000)) invert(21%) sepia(10%) saturate(581%) hue-rotate(169deg) brightness(96%) contrast(92%)!important
-}
-.F-blur {
-  filter: blur(var(--filter-blur, 0))
-}
-.F-blur-0 {
-  --filter-blur: 0
-}
-.F-blur-1 {
-  --filter-blur: 2px
-}
-.F-blur-2 {
-  --filter-blur: 4px
-}
-.F-blur-3 {
-  --filter-blur: 6px
-}
-.F-blur-4 {
-  --filter-blur: 8px
-}
-.F-shadow {
-  filter: var(--drop-shadow, drop-shadow(0 0 #0000))
-}
-.F-shadow-0 {
-  --drop-shadow: drop-shadow(0 0 #0000)
-}
-.F-shadow {
-  --drop-shadow: drop-shadow(0px 1px 1px rgba(var(--ls-shadow-color-rgb), 0.72)) drop-shadow(0px 2px 2px rgba(var(--ls-shadow-color-rgb), 0.48)) drop-shadow(0px 4px 6px rgba(var(--ls-shadow-color-rgb), 0.24))
-}
-.F-shadow-2x {
-  --drop-shadow: drop-shadow(0px 1px 1px rgba(var(--ls-shadow-color-rgb), 0.72)) drop-shadow(0px 2px 3px rgba(var(--ls-shadow-color-rgb), 0.48)) drop-shadow(0px 6px 9px rgba(var(--ls-shadow-color-rgb), 0.24))
-}
-.F-shadow-3x {
-  --drop-shadow: drop-shadow(0px 2px 2px rgba(var(--ls-shadow-color-rgb), 0.72)) drop-shadow(0px 3px 4px rgba(var(--ls-shadow-color-rgb), 0.48)) drop-shadow(0px 9px 12px rgba(var(--ls-shadow-color-rgb), 0.24))
-}
 .FST-italic {
   font-style: italic!important
 }
@@ -5858,32 +5922,64 @@ progress {
 .Hidden {
   visibility: hidden!important
 }
-.Themed-body {
-  color: var(--ls-fg-body,var(--ls-fg-body));
-  background-color: var(--ls-bg-body,var(--ls-bg-body));
-  padding: 1rem
-}
 .Themed {
-  color: var(--ls-fg-surface,var(--ls-fg-surface));
-  background-color: var(--ls-bg-surface,var(--ls-bg-surface));
   border: 1px solid var(--ls-border-color,var(--ls-border-color));
   box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color-rgb,var(--ls-shadow-color-rgb)),.18),0 2px 2px 0 rgba(var(--ls-shadow-color-rgb,var(--ls-shadow-color-rgb)),.12),0 4px 6px 0 rgba(var(--ls-shadow-color-rgb,var(--ls-shadow-color-rgb)),.06);
   padding: .5rem
 }
-.Themed.Themed-outline {
+.Themed-body {
+  color: var(--ls-fg-body,var(--ls-fg-body));
+  background-color: var(--ls-bg-body,var(--ls-bg-body))
+}
+.Themed-outline {
   color: var(--ls-fg-lightest,var(--ls-fg-lightest));
   background-color: var(--ls-bg-lightest,var(--ls-bg-lightest));
   border-color: var(--ls-bg-darkest,var(--ls-bg-darkest))
 }
-.Themed .Themed-title {
+.Themed-active {
+  color: var(--ls-fg-active,var(--ls-fg-active));
+  background-color: var(--ls-bg-active,var(--ls-bg-active))
+}
+.Themed-surface {
+  color: var(--ls-fg-surface,var(--ls-fg-surface));
+  background-color: var(--ls-bg-surface,var(--ls-bg-surface))
+}
+.Themed-dark {
   color: var(--ls-fg-dark,var(--ls-fg-dark));
-  background-color: var(--ls-bg-dark,var(--ls-bg-dark));
-  padding: .5rem
+  background-color: var(--ls-bg-dark,var(--ls-bg-dark))
+}
+.Themed-darkest {
+  color: var(--ls-fg-darkest,var(--ls-fg-darkest));
+  background-color: var(--ls-bg-darkest,var(--ls-bg-darkest))
 }
-.Themed .Themed-footer {
+.Themed-light {
+  color: var(--ls-fg-light,var(--ls-fg-light));
+  background-color: var(--ls-bg-light,var(--ls-bg-light))
+}
+.Themed-lightest {
   color: var(--ls-fg-lightest,var(--ls-fg-lightest));
-  background-color: var(--ls-bg-lightest,var(--ls-bg-lightest));
-  padding: .5rem
+  background-color: var(--ls-bg-lightest,var(--ls-bg-lightest))
+}
+.Alert.Brand-facebook {
+  background: linear-gradient(to bottom right,#3b5998,#6d84b4)
+}
+.Alert.Brand-github {
+  background: linear-gradient(to bottom right,#333,#373737)
+}
+.Alert.Brand-instagram {
+  background: linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)
+}
+.Alert.Brand-linkedin {
+  background: linear-gradient(to bottom right,#0077b5,#00a0dc)
+}
+.Alert.Brand-twitter {
+  background: linear-gradient(to bottom right,#1da1f2,#0084b4)
+}
+.Alert.Brand-wikipedia {
+  background: linear-gradient(to bottom right,#636466,#000)
+}
+.Alert.Brand-youtube {
+  background: linear-gradient(to bottom right,red,#e62117)
 }
 .Alert {
   display: flex;
@@ -5893,38 +5989,59 @@ progress {
   background-color: var(--ls-alert-bg-darkest,var(--ls-bg-darkest));
   border: 1px solid var(--ls-alert-border-color,var(--ls-border-color));
   box-shadow: 0 1px 1px -1px rgba(var(--ls-alert-shadow-color-rgb,var(--ls-shadow-color-rgb)),.18),0 2px 2px 0 rgba(var(--ls-alert-shadow-color-rgb,var(--ls-shadow-color-rgb)),.12),0 4px 6px 0 rgba(var(--ls-alert-shadow-color-rgb,var(--ls-shadow-color-rgb)),.06);
-  min-width: 200px;
   margin-bottom: .5rem;
   padding: .5rem;
-  align-items: center
+  min-width: 200px;
+  align-items: center;
+  margin-right: auto!important;
+  margin-left: auto!important
+}
+.Alert.Alert-gradient {
+  background: linear-gradient(180deg,var(--ls-alert-bg-light,var(--ls-bg-light)) 0,var(--ls-alert-bg-dark,var(--ls-bg-dark)) 35%,var(--ls-alert-bg-darkest,var(--ls-bg-darkest)) 100%)
+}
+.Alert.Alert-gradient.Alert-outline {
+  background: linear-gradient(180deg,var(--ls-alert-bg-surface,var(--ls-bg-surface)) 0,var(--ls-alert-bg-light,var(--ls-bg-light)) 35%,var(--ls-alert-bg-lightest,var(--ls-bg-lightest)) 100%)
 }
 .Alert.Alert-outline {
   color: var(--ls-alert-fg-lightest,var(--ls-fg-lightest));
   background-color: var(--ls-alert-bg-lightest,var(--ls-bg-lightest));
-  border: 1px solid var(--ls-alert-bg-darkest,var(--ls-bg-darkest))
+  border: 1px solid hsla(var(--ls-alert-bg-active-hsl,var(--ls-bg-active-hsl)),.5)
+}
+.Alert.Alert-outline .Alert-icon {
+  color: var(--ls-alert-bg-active,var(--ls-bg-active))
+}
+.Alert.Alert-outline .Alert-right .Countdown {
+  color: var(--ls-alert-bg-active,var(--ls-bg-active));
+  background-color: var(--ls-alert-fg-active,var(--ls-fg-active));
+  border-color: hsla(var(--ls-alert-bg-active-hsl,var(--ls-bg-active-hsl)),.5)
 }
 .Alert .Alert-icon {
   display: flex;
-  font-size: medium
+  font-size: medium;
+  color: #fff
 }
 .Alert .Alert-right {
   margin-left: auto;
   order: 2
 }
-.Alert .Alert-right small:first-child,
-.Alert .Alert-right span:first-child {
+.Alert .Alert-right .Countdown {
   position: absolute;
-  font-size: 12px;
-  top: .7rem;
-  right: 2rem
+  padding: 0 .25rem;
+  font-size: .65em;
+  top: 0;
+  right: 0;
+  color: var(--ls-alert-fg-dark,var(--ls-fg-dark));
+  background-color: var(--ls-alert-bg-dark,var(--ls-bg-dark));
+  border-left: 1px solid var(--ls-alert-border-color,var(--ls-border-color));
+  border-bottom: 1px solid var(--ls-alert-border-color,var(--ls-border-color))
 }
 .Alert .Alert-right .Btn-close {
-  position: absolute;
-  top: .5rem;
-  right: .5rem
+  z-index: auto
 }
 .Alert .Alert-body {
-  padding: .4rem
+  padding: .25rem;
+  margin-left: 5px;
+  margin-right: 5px
 }
 .Alert .Alert-body .Alert-heading {
   display: block
@@ -5940,6 +6057,25 @@ progress {
 .Alert .Progress .Progress-bar {
   background-color: var(--ls-alert-bg-active,var(--ls-bg-active))
 }
+.Badge {
+  display: inline-block;
+  padding: .35em .65em;
+  font-size: .75em;
+  font-weight: 700;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--ls-border-radius)
+}
+.Badge:empty {
+  display: none
+}
+.Btn .Badge {
+  position: relative;
+  top: -1px
+}
 .Breadcrumb {
   display: flex;
   position: relative;
@@ -6508,25 +6644,25 @@ progress {
   border-width: var(--caret-size,10px)
 }
 .Caret-b:after,
-.Caret-darker-b:after,
-.Caret-darker-t:after,
+.Caret-filled-b:after,
+.Caret-filled-t:after,
 .Caret-t:after {
   left: calc(50% - var(--caret-size,10px))
 }
 .Caret-b:before,
-.Caret-darker-b:before,
-.Caret-darker-t:before,
+.Caret-filled-b:before,
+.Caret-filled-t:before,
 .Caret-t:before {
   left: calc(50% - var(--caret-size,10px))
 }
-.Caret-darker-l:after,
-.Caret-darker-r:after,
+.Caret-filled-l:after,
+.Caret-filled-r:after,
 .Caret-l:after,
 .Caret-r:after {
   top: calc(50% - var(--caret-size,10px))
 }
-.Caret-darker-l:before,
-.Caret-darker-r:before,
+.Caret-filled-l:before,
+.Caret-filled-r:before,
 .Caret-l:before,
 .Caret-r:before {
   top: calc(50% - var(--caret-size,10px))
@@ -6563,35 +6699,35 @@ progress {
   right: calc(100% + 1px);
   border-color: transparent var(--ls-caret-border-color,var(--ls-border-color)) transparent transparent
 }
-.Caret-darker-t:after {
+.Caret-filled-t:after {
   bottom: 100%;
   border-color: transparent transparent var(--ls-caret-bg-active,var(--ls-bg-active)) transparent
 }
-.Caret-darker-t:before {
+.Caret-filled-t:before {
   bottom: calc(100% + 1px);
   border-color: transparent transparent var(--ls-caret-border-color,var(--ls-border-color)) transparent
 }
-.Caret-darker-r:after {
+.Caret-filled-r:after {
   left: 100%;
   border-color: transparent transparent transparent var(--ls-caret-bg-active,var(--ls-bg-active))
 }
-.Caret-darker-r:before {
+.Caret-filled-r:before {
   left: calc(100% + 1px);
   border-color: transparent transparent transparent var(--ls-caret-border-color,var(--ls-border-color))
 }
-.Caret-darker-b:after {
+.Caret-filled-b:after {
   top: 100%;
   border-color: var(--ls-caret-bg-active,var(--ls-bg-active)) transparent transparent transparent
 }
-.Caret-darker-b:before {
+.Caret-filled-b:before {
   top: calc(100% + 1px);
   border-color: var(--ls-caret-border-color,var(--ls-border-color)) transparent transparent transparent
 }
-.Caret-darker-l:after {
+.Caret-filled-l:after {
   right: 100%;
   border-color: transparent var(--ls-caret-bg-active,var(--ls-bg-active)) transparent transparent
 }
-.Caret-darker-l:before {
+.Caret-filled-l:before {
   right: calc(100% + 1px);
   border-color: transparent var(--ls-caret-border-color,var(--ls-border-color)) transparent transparent
 }
@@ -7046,6 +7182,8 @@ progress {
   display: flex;
   position: relative;
   overflow: hidden;
+  align-items: center;
+  justify-content: center;
   color: var(--ls-fg-surface);
   background-color: var(--ls-bg-surface)
 }
@@ -7053,6 +7191,8 @@ progress {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  max-width: 42px;
+  max-height: 42px;
   border: 1px solid transparent;
   border-radius: var(--ls-border-radius);
   transition: border-color .2s cubic-bezier(.3, 0, .5, 1)
@@ -7061,10 +7201,10 @@ progress {
 .Pagination .Square:nth-last-of-type(-n+2) {
   font-size: 1.3em
 }
-.Pagination .Square:not(.disabled):not(.active) {
+.Pagination .Square:not(.Disabled):not(.Active) {
   cursor: pointer
 }
-.Pagination .Square:hover:not(.active):not(.disabled) {
+.Pagination .Square:hover:not(.Active):not(.Disabled) {
   text-decoration: none;
   border-color: var(--ls-border-color);
   color: var(--ls-fg-dark);
@@ -7549,12 +7689,40 @@ progress {
   border: 1px solid var(--ls-toast-border-color,var(--ls-border-color));
   box-shadow: 0 1px 1px -1px rgba(var(--ls-toast-shadow-color-rgb,var(--ls-shadow-color-rgb)),.18),0 2px 2px 0 rgba(var(--ls-toast-shadow-color-rgb,var(--ls-shadow-color-rgb)),.12),0 4px 6px 0 rgba(var(--ls-toast-shadow-color-rgb,var(--ls-shadow-color-rgb)),.06);
   min-width: 200px;
-  margin-bottom: .5rem
+  margin-bottom: .5rem;
+  align-items: center;
+  margin-right: auto!important;
+  margin-left: auto!important
+}
+.Toast.Toast-gradient .Toast-header {
+  background: linear-gradient(180deg,var(--ls-toast-bg-light,var(--ls-bg-light)) 0,var(--ls-toast-bg-dark,var(--ls-bg-dark)) 35%,var(--ls-toast-bg-darkest,var(--ls-bg-darkest)) 100%)
+}
+.Toast.Toast-gradient.Toast-outline .Toast-header {
+  background: linear-gradient(180deg,var(--ls-toast-bg-surface,var(--ls-bg-surface)) 0,var(--ls-toast-bg-light,var(--ls-bg-light)) 35%,var(--ls-toast-bg-lightest,var(--ls-bg-lightest)) 100%)
+}
+.Toast.Toast-outline {
+  border: 1px solid hsla(var(--ls-toast-bg-active-hsl,var(--ls-bg-active-hsl)),.5)
+}
+.Toast.Toast-outline .Toast-header {
+  color: var(--ls-toast-fg-surface,var(--ls-fg-surface));
+  background-color: var(--ls-toast-bg-surface,var(--ls-bg-surface))
+}
+.Toast.Toast-outline .Toast-header .Toast-icon {
+  color: var(--ls-toast-bg-active,var(--ls-bg-active))
+}
+.Toast.Toast-outline .Toast-header .Toast-right .Countdown {
+  color: var(--ls-toast-bg-active,var(--ls-bg-active));
+  background-color: var(--ls-toast-fg-active,var(--ls-fg-active));
+  border-color: hsla(var(--ls-toast-bg-active-hsl,var(--ls-bg-active-hsl)),.5)
+}
+.Toast.Toast-outline .Toast-body {
+  color: #000;
+  background-color: #fff
 }
 .Toast .Toast-header {
   display: flex;
   border-bottom: 1px solid var(--ls-toast-border-color,var(--ls-border-color));
-  padding: .4rem;
+  padding: .3rem;
   align-items: center;
   color: var(--ls-toast-fg-darkest,var(--ls-fg-darkest));
   background-color: var(--ls-toast-bg-darkest,var(--ls-bg-darkest))
@@ -7562,21 +7730,29 @@ progress {
 .Toast .Toast-header .Toast-icon {
   display: flex;
   font-size: medium;
-  padding-right: .4rem
+  padding-right: .4rem;
+  color: #fff
 }
 .Toast .Toast-header .Toast-right {
   margin-left: auto;
   order: 2
 }
-.Toast .Toast-header .Toast-right small:first-child,
-.Toast .Toast-header .Toast-right span:first-child {
+.Toast .Toast-header .Toast-right .Countdown {
+  position: relative;
+  display: inline;
   vertical-align: top;
-  padding-right: .2rem
+  font-size: .65em;
+  padding: 0 .25rem;
+  margin-right: 3px;
+  top: 6px;
+  color: var(--ls-toast-fg-dark,var(--ls-fg-dark));
+  background-color: var(--ls-toast-bg-dark,var(--ls-bg-dark));
+  border: 1px solid var(--ls-toast-border-color,var(--ls-border-color))
 }
 .Toast .Toast-body {
   color: var(--ls-toast-fg-surface,var(--ls-fg-surface));
   background-color: var(--ls-toast-bg-surface,var(--ls-bg-surface));
-  padding: 1rem
+  padding: .75rem
 }
 .Toast .Progress {
   background-color: var(--ls-toast-bg-lightest,var(--ls-bg-lightest))
@@ -7584,6 +7760,84 @@ progress {
 .Toast .Progress .Progress-bar {
   background-color: var(--ls-toast-bg-active,var(--ls-bg-active))
 }
+.Tooltip {
+  position: absolute;
+  display: flex;
+  z-index: 1000;
+  padding: .25rem .5rem;
+  color: var(--ls-caret-fg-dark,var(--ls-fg-dark));
+  background-color: var(--ls-caret-bg-dark,var(--ls-bg-dark));
+  border: 1px solid var(--ls-caret-bg-darkest,var(--ls-bg-darkest));
+  box-shadow: 0 1px 1px -1px rgba(var(--ls-caret-shadow-color-rgb,var(--ls-shadow-color-rgb)),.18),0 2px 2px 0 rgba(var(--ls-caret-shadow-color-rgb,var(--ls-shadow-color-rgb)),.12),0 4px 6px 0 rgba(var(--ls-caret-shadow-color-rgb,var(--ls-shadow-color-rgb)),.06)
+}
+.Tooltip.Tooltip-outline {
+  color: var(--ls-caret-fg-lightest,var(--ls-fg-lightest));
+  background-color: var(--ls-caret-bg-lightest,var(--ls-bg-lightest));
+  border: 1px solid var(--ls-caret-bg-darkest,var(--ls-bg-darkest))
+}
+.Tooltip:after,
+.Tooltip:before {
+  content: "";
+  display: block;
+  position: absolute;
+  border-style: solid;
+  width: 0;
+  height: 0;
+  z-index: 1;
+  clear: both;
+  border-width: 6px
+}
+.Tooltip-rounded {
+  border-radius: var(--ls-border-radius)
+}
+.Tooltip-b:after,
+.Tooltip-t:after {
+  left: calc(50% - 6px)
+}
+.Tooltip-b:before,
+.Tooltip-t:before {
+  left: calc(50% - 6px)
+}
+.Tooltip-l:after,
+.Tooltip-r:after {
+  top: calc(50% - 6px)
+}
+.Tooltip-l:before,
+.Tooltip-r:before {
+  top: calc(50% - 6px)
+}
+.Tooltip-t:after {
+  bottom: 100%;
+  border-color: transparent transparent var(--ls-caret-bg-dark,var(--ls-bg-dark)) transparent
+}
+.Tooltip-t:before {
+  bottom: calc(100% + 1px);
+  border-color: transparent transparent var(--ls-caret-bg-darkest,var(--ls-bg-darkest)) transparent
+}
+.Tooltip-r:after {
+  left: 100%;
+  border-color: transparent transparent transparent var(--ls-caret-bg-dark,var(--ls-bg-dark))
+}
+.Tooltip-r:before {
+  left: calc(100% + 1px);
+  border-color: transparent transparent transparent var(--ls-caret-bg-darkest,var(--ls-bg-darkest))
+}
+.Tooltip-b:after {
+  top: 100%;
+  border-color: var(--ls-caret-bg-dark,var(--ls-bg-dark)) transparent transparent transparent
+}
+.Tooltip-b:before {
+  top: calc(100% + 1px);
+  border-color: var(--ls-caret-bg-darkest,var(--ls-bg-darkest)) transparent transparent transparent
+}
+.Tooltip-l:after {
+  right: 100%;
+  border-color: transparent var(--ls-caret-bg-dark,var(--ls-bg-dark)) transparent transparent
+}
+.Tooltip-l:before {
+  right: calc(100% + 1px);
+  border-color: transparent var(--ls-caret-bg-darkest,var(--ls-bg-darkest)) transparent transparent
+}
 .TreeView {
   position: relative;
   padding: 5px 0;
@@ -10011,38 +10265,50 @@ progress {
   -webkit-mask-clip: inherit;
           mask-clip: inherit
 }
+.Anim-dur-100ms {
+  --ls-anim-dur: 100ms
+}
+.Anim-dur-200ms {
+  --ls-anim-dur: 200ms
+}
+.Anim-dur-300ms {
+  --ls-anim-dur: 300ms
+}
 .Anim-dur-500ms {
-  --anim-dur: 500ms
+  --ls-anim-dur: 500ms
 }
 .Anim-dur-750ms {
-  --anim-dur: 750ms
+  --ls-anim-dur: 750ms
+}
+.Anim-dur-1000ms {
+  --ls-anim-dur: 1000ms
 }
-.Anim-dur-2000ms {
-  --anim-dur: 2000ms
+.Anim-dur-1500ms {
+  --ls-anim-dur: 1500ms
 }
-.Anim-dur-3000ms {
-  --anim-dur: 3000ms
+.Anim-repeat-infinite {
+  --ls-anim-iteration: infinite
 }
 .Anim-repeat-1 {
-  --anim-iteration: 1
+  --ls-anim-iteration: 1
 }
 .Anim-repeat-2 {
-  --anim-iteration: 2
+  --ls-anim-iteration: 2
 }
 .Anim-repeat-3 {
-  --anim-iteration: 3
+  --ls-anim-iteration: 3
 }
 .Anim-repeat-4 {
-  --anim-iteration: 4
+  --ls-anim-iteration: 4
 }
 .Anim-repeat-5 {
-  --anim-iteration: 5
+  --ls-anim-iteration: 5
 }
 .Anim {
-  -webkit-animation-duration: var(--anim-dur, 1s);
-          animation-duration: var(--anim-dur, 1s);
-  -webkit-animation-iteration-count: var(--anim-iteration,infinite);
-          animation-iteration-count: var(--anim-iteration,infinite);
+  -webkit-animation-duration: var(--ls-anim-dur, 500ms);
+          animation-duration: var(--ls-anim-dur, 500ms);
+  -webkit-animation-iteration-count: var(--ls-anim-iteration,1);
+          animation-iteration-count: var(--ls-anim-iteration,1);
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear;
   -webkit-animation-fill-mode: both;