@qrsln/lootstrap 22.6.4-beta.0 → 22.6.5-beta.0

package/dist/css/lootstrap.css

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 /*!
- * CSS Compiled on: 2022-06-04
+ * CSS Compiled on: 2022-06-05
  *
- * Lootstrap v22.6.4-beta.0 (https://github.com/krsln/Lootstrap/)
+ * Lootstrap v22.6.5-beta.0 (https://github.com/krsln/Lootstrap/)
  * Copyright 2022 Qrsln.
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
 */
@@ -1117,8 +1117,8 @@ progress {
   background-color: hsla(var(--ls-contrast-hsl),16%)
 }
 .Alert {
-  --ls-alert-bg: var(--ls-bg-hue, hsl(0deg, 0%, 100%));
-  --ls-alert-color: var(--ls-fg-hue, hsl(0deg, 0%, 0%));
+  --ls-alert-bg: var(--ls-bg-hue);
+  --ls-alert-color: var(--ls-fg-hue);
   --ls-alert-border-color: hsla(var(--ls-bg-accent-hsl), 0.5);
   --ls-alert-icon-color: hsla(var(--ls-bg-accent-hsl), 0.5);
   --ls-alert-border: 1px solid var(--ls-alert-border-color);
@@ -1538,13 +1538,13 @@ progress {
   --ls-breadcrumb-padding-y: 0.25rem;
   --ls-breadcrumb-margin-bottom: 0.5rem;
   --ls-breadcrumb-font-size: inherit;
-  --ls-breadcrumb-bg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
-  --ls-breadcrumb-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
+  --ls-breadcrumb-bg: var(--ls-bg-surface);
+  --ls-breadcrumb-color: var(--ls-fg-surface);
   --ls-breadcrumb-border: none;
   --ls-breadcrumb-border-radius: 0;
   --ls-breadcrumb-hover-border-color: hsla(var(--ls-bg-accent-hsl), 0.25);
   --ls-breadcrumb-hover-bg: hsla(var(--ls-bg-accent-hsl), 0.01);
-  --ls-breadcrumb-divider-color: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-breadcrumb-divider-color: var(--ls-bg-accent);
   --ls-breadcrumb-link-padding: 0.25rem;
   --ls-breadcrumb-item-padding-x: 0.5rem;
   --ls-breadcrumb-item-active-color: inherit;
@@ -2358,8 +2358,8 @@ fieldset:disabled .Btn {
   transition: 0s
 }
 .Calendar {
-  --ls-calendar-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
-  --ls-calendar-bg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
+  --ls-calendar-color: var(--ls-fg-surface);
+  --ls-calendar-bg: var(--ls-bg-surface);
   --ls-calendar-border-width: 1px;
   --ls-calendar-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
   --ls-calendar-margin-bottom: 1rem;
@@ -2373,13 +2373,13 @@ fieldset:disabled .Btn {
   --ls-calendar-weekday-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
   --ls-calendar-available-hover-bg: hsla(var(--ls-bg-accent-hsl), 0.25);
   --ls-calendar-available-hover-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
-  --ls-calendar-today-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
-  --ls-calendar-today-bg: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-calendar-today-color: var(--ls-fg-accent);
+  --ls-calendar-today-bg: var(--ls-bg-accent);
   --ls-calendar-today-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
-  --ls-calendar-range-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
-  --ls-calendar-range-bg: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-calendar-range-color: var(--ls-fg-accent);
+  --ls-calendar-range-bg: var(--ls-bg-accent);
   --ls-calendar-range-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
-  --ls-calendar-ranged-between-color: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-calendar-ranged-between-color: var(--ls-bg-accent);
   --ls-calendar-ranged-between-bg: hsla(var(--ls-bg-accent-hsl), 0.05);
   display: block;
   position: relative;
@@ -2533,8 +2533,8 @@ fieldset:disabled .Btn {
   word-wrap: break-word;
   overflow: visible;
   font-family: var(--ls-font-sans-serif);
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
   background-clip: border-box;
   border: none;
   border-radius: .25rem;
@@ -2669,7 +2669,7 @@ fieldset:disabled .Btn {
   --ls-caret-border-width: 1px;
   --ls-caret-size: 8px;
   --ls-caret-pseudo-before-bg: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
-  --ls-caret-pseudo-after-fg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
+  --ls-caret-pseudo-after-fg: var(--ls-bg-surface);
   position: relative;
   overflow: visible;
   border: var(--ls-caret-border-width) solid var(--ls-caret-border-color)
@@ -2811,7 +2811,7 @@ fieldset:disabled .Btn {
 }
 .Caret-accent {
   --ls-caret-pseudo-before-bg: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
-  --ls-caret-pseudo-after-fg: var(--ls-bg-accent, hsl(217deg, 96%, 52%))
+  --ls-caret-pseudo-after-fg: var(--ls-bg-accent)
 }
 .Caret-0 {
   --ls-caret-size: 0!important
@@ -3031,7 +3031,7 @@ fieldset:disabled .Btn {
 .Redacted span:after {
   position: absolute;
   content: " ";
-  background: var(--ls-bg-accent,hsl(217deg,96%,52%));
+  background: var(--ls-bg-accent);
   border-radius: .25em;
   box-shadow: 0 0 1px hsla(var(--ls-bg-accent-hsl),.35);
   width: 100%;
@@ -3040,8 +3040,8 @@ fieldset:disabled .Btn {
   transform: skewY(-10deg) rotate(10deg)
 }
 .Redacted-soft span {
-  color: var(--ls-bg-accent,hsl(217deg,96%,52%));
-  background: var(--ls-bg-accent,hsl(217deg,96%,52%));
+  color: var(--ls-bg-accent);
+  background: var(--ls-bg-accent);
   height: 1.2em;
   white-space: break-spaces
 }
@@ -3058,23 +3058,23 @@ fieldset:disabled .Btn {
   height: auto
 }
 .List {
-  --ls-list-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
-  --ls-list-bg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
-  --ls-list-active-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
-  --ls-list-active-bg: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
-  --ls-list-active-border-color: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-list-color: var(--ls-fg-surface);
+  --ls-list-bg: var(--ls-bg-surface);
+  --ls-list-active-color: var(--ls-fg-accent);
+  --ls-list-active-bg: var(--ls-bg-accent);
+  --ls-list-active-border-color: var(--ls-bg-accent);
   --ls-list-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
   --ls-list-border-width: 1px;
   --ls-list-border-radius: 0.25rem;
   --ls-list-item-padding-y: 0.5rem;
   --ls-list-item-padding-x: 1rem;
-  --ls-list-action-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
-  --ls-list-action-hover-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
+  --ls-list-action-color: var(--ls-fg-surface);
+  --ls-list-action-hover-color: var(--ls-fg-surface);
   --ls-list-action-hover-bg: hsla(var(--ls-bg-accent-hsl), 0.08);
-  --ls-list-action-active-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
-  --ls-list-action-active-bg: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-list-action-active-color: var(--ls-fg-accent);
+  --ls-list-action-active-bg: var(--ls-bg-accent);
   --ls-list-disabled-color: hsl(213deg, 11%, 69%);
-  --ls-list-disabled-bg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
+  --ls-list-disabled-bg: var(--ls-bg-surface);
   display: flex;
   flex-direction: column;
   font-family: var(--ls-font-sans-serif);
@@ -3454,8 +3454,8 @@ fieldset:disabled .Btn {
   --ls-modal-width: 500px;
   --ls-modal-padding: 0.75rem;
   --ls-modal-margin: 0.5rem;
-  --ls-modal-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
-  --ls-modal-bg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
+  --ls-modal-color: var(--ls-fg-surface);
+  --ls-modal-bg: var(--ls-bg-surface);
   --ls-modal-border-color: transparent;
   --ls-modal-border-width: 0;
   --ls-modal-border-radius: 0.5rem;
@@ -3587,11 +3587,11 @@ fieldset:disabled .Btn {
   --ls-nav-link-font-size: 12px;
   --ls-nav-link-font-weight: 500;
   --ls-nav-link-color: #0d6efd;
-  --ls-nav-link-bg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
+  --ls-nav-link-bg: var(--ls-bg-surface);
   --ls-nav-link-disabled-color: hsl(213deg, 11%, 69%);
-  --ls-nav-link-active-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
-  --ls-nav-link-active-bg: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
-  --ls-nav-link-active-border-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
+  --ls-nav-link-active-color: var(--ls-fg-accent);
+  --ls-nav-link-active-bg: var(--ls-bg-accent);
+  --ls-nav-link-active-border-color: var(--ls-fg-accent);
   display: flex;
   flex-wrap: wrap;
   font-family: var(--ls-font-sans-serif);
@@ -3989,9 +3989,9 @@ fieldset:disabled .Btn {
   --ls-nav-link-hover-bg: hsla(var(--ls-contrast-hsl), 0.02);
   --ls-nav-link-hover-color: hsla(var(--ls-contrast-hsl), 1);
   --ls-nav-link-hover-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
-  --ls-nav-link-active-color: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-nav-link-active-color: var(--ls-bg-accent);
   --ls-nav-link-active-bg: transparent;
-  --ls-nav-link-active-border-color: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-nav-link-active-border-color: var(--ls-bg-accent);
   border-bottom: 0
 }
 .Nav-tabs .Nav-link {
@@ -4049,9 +4049,9 @@ fieldset:disabled .Btn {
 }
 .Nav-tabs-classic .Nav-item.Show .Nav-link,
 .Nav-tabs-classic .Nav-link.Active {
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
-  border-color: hsla(var(--ls-border-hsl),var(--ls-border-alpha)) hsla(var(--ls-border-hsl),var(--ls-border-alpha)) var(--ls-bg-surface,hsl(0deg,0%,100%))
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
+  border-color: hsla(var(--ls-border-hsl),var(--ls-border-alpha)) hsla(var(--ls-border-hsl),var(--ls-border-alpha)) var(--ls-bg-surface)
 }
 .Pagination {
   --ls-pagination-padding-x: 0.75rem;
@@ -4062,15 +4062,15 @@ fieldset:disabled .Btn {
   --ls-pagination-border-width: 1px;
   --ls-pagination-border-color: hsla(var(--ls-bg-accent-hsl), 0.03);
   --ls-pagination-border-radius: 0.25rem;
-  --ls-pagination-hover-color: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-pagination-hover-color: var(--ls-bg-accent);
   --ls-pagination-hover-bg: hsla(var(--ls-bg-accent-hsl), 0.1);
   --ls-pagination-hover-border-color: hsla(var(--ls-bg-accent-hsl), 0.2);
   --ls-pagination-focus-color: #0c54c8;
   --ls-pagination-focus-bg: hsla(var(--ls-bg-accent-hsl), 0.2);
   --ls-pagination-focus-box-shadow: 0 3px 6px hsla(var(--ls-shadow-hsl), 0.15),0 3px 6px hsla(var(--ls-shadow-hsl), 0.24);
-  --ls-pagination-active-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
-  --ls-pagination-active-bg: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
-  --ls-pagination-active-border-color: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-pagination-active-color: var(--ls-fg-accent);
+  --ls-pagination-active-bg: var(--ls-bg-accent);
+  --ls-pagination-active-border-color: var(--ls-bg-accent);
   --ls-pagination-arrow-color: hsla(var(--ls-bg-accent-hsl), 0.5);
   --ls-pagination-arrow-bg: inherit;
   --ls-pagination-disabled-color: hsl(213deg, 11%, 69%);
@@ -4216,7 +4216,7 @@ fieldset:disabled .Btn {
   clear: both
 }
 .Placeholder-paragraph .Placeholder:last-child {
-  width: 53%
+  width: 76%
 }
 .Placeholder-paragraph .Placeholder:nth-child(1n) {
   -webkit-animation-delay: .7s;
@@ -4262,16 +4262,16 @@ fieldset:disabled .Btn {
   background-color: transparent
 }
 .Placeholder-textual .Placeholder:nth-child(1n) {
-  background-image: linear-gradient(90deg,currentColor 5%,transparent calc(5% + 1px),transparent calc(5% + 6px),currentColor calc(5% + 6px),currentColor 79%,transparent calc(79% + 1px),transparent calc(79% + 6px),currentColor calc(79% + 6px),currentColor 86%,transparent calc(86% + 1px),transparent calc(86% + 6px),currentColor calc(86% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 8%,transparent calc(8% + 1px),transparent calc(8% + 6px),currentColor calc(8% + 6px),currentColor 37%,transparent calc(37% + 1px),transparent calc(37% + 6px),currentColor calc(37% + 6px),currentColor 71%,transparent calc(71% + 1px),transparent calc(71% + 6px),currentColor calc(71% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(2n) {
-  background-image: linear-gradient(90deg,currentColor 19%,transparent calc(19% + 1px),transparent calc(19% + 6px),currentColor calc(19% + 6px),currentColor 60%,transparent calc(60% + 1px),transparent calc(60% + 6px),currentColor calc(60% + 6px),currentColor 80%,transparent calc(80% + 1px),transparent calc(80% + 6px),currentColor calc(80% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 14%,transparent calc(14% + 1px),transparent calc(14% + 6px),currentColor calc(14% + 6px),currentColor 66%,transparent calc(66% + 1px),transparent calc(66% + 6px),currentColor calc(66% + 6px),currentColor 81%,transparent calc(81% + 1px),transparent calc(81% + 6px),currentColor calc(81% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(3n) {
-  background-image: linear-gradient(90deg,currentColor 12%,transparent calc(12% + 1px),transparent calc(12% + 6px),currentColor calc(12% + 6px),currentColor 44%,transparent calc(44% + 1px),transparent calc(44% + 6px),currentColor calc(44% + 6px),currentColor 80%,transparent calc(80% + 1px),transparent calc(80% + 6px),currentColor calc(80% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 5%,transparent calc(5% + 1px),transparent calc(5% + 6px),currentColor calc(5% + 6px),currentColor 34%,transparent calc(34% + 1px),transparent calc(34% + 6px),currentColor calc(34% + 6px),currentColor 74%,transparent calc(74% + 1px),transparent calc(74% + 6px),currentColor calc(74% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(4n) {
-  background-image: linear-gradient(90deg,currentColor 17%,transparent calc(17% + 1px),transparent calc(17% + 6px),currentColor calc(17% + 6px),currentColor 60%,transparent calc(60% + 1px),transparent calc(60% + 6px),currentColor calc(60% + 6px),currentColor 80%,transparent calc(80% + 1px),transparent calc(80% + 6px),currentColor calc(80% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 8%,transparent calc(8% + 1px),transparent calc(8% + 6px),currentColor calc(8% + 6px),currentColor 47%,transparent calc(47% + 1px),transparent calc(47% + 6px),currentColor calc(47% + 6px),currentColor 70%,transparent calc(70% + 1px),transparent calc(70% + 6px),currentColor calc(70% + 6px),currentColor)
 }
 .Placeholder-xs,
 .Placeholder-xs .Placeholder {
@@ -4337,8 +4337,8 @@ fieldset:disabled .Btn {
   --ls-progress-bg: #eee;
   --ls-progress-border-radius: 0.25rem;
   --ls-progress-box-shadow: inset 0 1px 3px hsla(var(--ls-shadow-hsl), 0.12),inset 0 1px 2px hsla(var(--ls-shadow-hsl), 0.24);
-  --ls-progress-bar-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
-  --ls-progress-bar-bg: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-progress-bar-color: var(--ls-fg-accent);
+  --ls-progress-bar-bg: var(--ls-bg-accent);
   --ls-progress-bar-transition: width 0.6s ease;
   display: flex;
   overflow: hidden;
@@ -4392,8 +4392,8 @@ fieldset:disabled .Btn {
 .Rating-base {
   --ls-rating-color: hsla(var(--ls-contrast-hsl), 1);
   --ls-rating-bg: whitesmoke;
-  --ls-rating-active-color: var(--ls-fg-accent, hsl(0deg, 0%, 100%));
-  --ls-rating-active-bg: var(--ls-bg-accent, hsl(217deg, 96%, 52%));
+  --ls-rating-active-color: var(--ls-fg-accent);
+  --ls-rating-active-bg: var(--ls-bg-accent);
   --ls-rating-fraction-gradient: linear-gradient(to right, var(--ls-rating-active-bg) 0%, var(--ls-rating-bg) 100%);
   --ls-rating-fraction-color: hsla(var(--ls-contrast-hsl), 1);
   display: flex;
@@ -4500,7 +4500,7 @@ fieldset:disabled .Btn {
   background-clip: padding-box
 }
 .Scrollbar::-webkit-scrollbar-thumb:active {
-  background: var(--ls-bg-accent,hsl(217deg,96%,52%))
+  background: var(--ls-bg-accent)
 }
 .Scrollbar:hover::-webkit-scrollbar-track {
   box-shadow: inset 0 0 6px hsla(var(--ls-bg-accent-hsl),.15)
@@ -4513,7 +4513,7 @@ fieldset:disabled .Btn {
   border-color: hsla(var(--ls-bg-accent-hsl),.9)
 }
 .Scrollbar {
-  scrollbar-face-color: var(--ls-bg-accent,hsl(217deg,96%,52%));
+  scrollbar-face-color: var(--ls-bg-accent);
   scrollbar-track-color: hsla(var(--ls-bg-accent-hsl),0.04)
 }
 .Scrollbar-rounded {
@@ -4726,14 +4726,14 @@ fieldset:disabled .Btn {
 .Table {
   --ls-table-accent-bg: transparent;
   --ls-table-bg: transparent;
-  --ls-table-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
+  --ls-table-color: var(--ls-fg-surface);
   --ls-table-border-color: hsla(var(--ls-border-hsl), 1);
   --ls-table-striped-bg: rgba(0, 0, 0, 0.05);
-  --ls-table-striped-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
+  --ls-table-striped-color: var(--ls-fg-surface);
   --ls-table-active-bg: rgba(0, 0, 0, 0.1);
-  --ls-table-active-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
+  --ls-table-active-color: var(--ls-fg-surface);
   --ls-table-hover-bg: rgba(0, 0, 0, 0.075);
-  --ls-table-hover-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
+  --ls-table-hover-color: var(--ls-fg-surface);
   width: 100%;
   margin-bottom: 1rem;
   vertical-align: top;
@@ -4930,8 +4930,8 @@ fieldset:disabled .Btn {
   position: relative;
   font-family: var(--ls-font-sans-serif);
   min-width: 0;
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
   background-clip: border-box;
   padding: 0;
   margin-bottom: 1.5rem
@@ -4991,14 +4991,14 @@ fieldset:disabled .Btn {
   --ls-toast-min-width: 200px;
   --ls-toast-max-width: 350px;
   --ls-toast-font-size: 0.875rem;
-  --ls-toast-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
-  --ls-toast-bg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
+  --ls-toast-color: var(--ls-fg-surface);
+  --ls-toast-bg: var(--ls-bg-surface);
   --ls-toast-border-color: hsla(var(--ls-bg-accent-hsl), 0.25);
   --ls-toast-border-width: 1px;
   --ls-toast-border-radius: 0.25rem;
   --ls-toast-box-shadow: 0 1px 3px hsla(var(--ls-shadow-hsl), 0.12),0 1px 2px hsla(var(--ls-shadow-hsl), 0.24);
-  --ls-toast-header-color: var(--ls-fg-hue, hsl(0deg, 0%, 0%));
-  --ls-toast-header-bg: var(--ls-bg-hue, hsl(0deg, 0%, 100%));
+  --ls-toast-header-color: var(--ls-fg-hue);
+  --ls-toast-header-bg: var(--ls-bg-hue);
   --ls-toast-header-border-color: hsla(var(--ls-bg-accent-hsl), 0.5);
   --ls-toast-header-icon-color: hsla(var(--ls-bg-accent-hsl), 0.5);
   position: relative;
@@ -5172,8 +5172,8 @@ fieldset:disabled .Btn {
 .Tooltip {
   --ls-tooltip-padding-y: 0.3125rem;
   --ls-tooltip-padding-x: 0.625rem;
-  --ls-tooltip-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
-  --ls-tooltip-bg: var(--ls-bg-surface, hsl(0deg, 0%, 100%));
+  --ls-tooltip-color: var(--ls-fg-surface);
+  --ls-tooltip-bg: var(--ls-bg-surface);
   --ls-tooltip-border-width: 1px;
   --ls-tooltip-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha));
   --ls-tooltip-border-radius: 0;
@@ -5190,7 +5190,7 @@ fieldset:disabled .Btn {
   box-shadow: var(--ls-tooltip-box-shadow)
 }
 .Tooltip.Tooltip-outline {
-  --ls-tooltip-color: var(--ls-fg-surface, hsl(0deg, 0%, 0%));
+  --ls-tooltip-color: var(--ls-fg-surface);
   --ls-tooltip-bg: transparent;
   --ls-tooltip-border-color: hsla(var(--ls-border-hsl), var(--ls-border-alpha))
 }
@@ -5364,12 +5364,12 @@ fieldset:disabled .Btn {
   background-color: hsla(var(--ls-bg-accent-hsl),.05)
 }
 .Tree-branch.Active {
-  color: var(--ls-fg-accent,hsl(0deg,0%,100%));
-  background-color: var(--ls-bg-accent,hsl(217deg,96%,52%));
-  border-color: var(--ls-bg-accent,hsl(217deg,96%,52%))
+  color: var(--ls-fg-accent);
+  background-color: var(--ls-bg-accent);
+  border-color: var(--ls-bg-accent)
 }
 .Tree-branch.Active .Tree-leaf--icon {
-  color: var(--ls-fg-accent,hsl(0deg,0%,100%))!important
+  color: var(--ls-fg-accent)!important
 }
 .Tree-branch.Disabled {
   cursor: not-allowed;
@@ -5383,7 +5383,7 @@ fieldset:disabled .Btn {
   display: flex;
   flex: 1 auto;
   margin-left: -20px;
-  color: var(--ls-bg-accent,hsl(217deg,96%,52%))
+  color: var(--ls-bg-accent)
 }
 .Tree-branch .Tree-chevron .gg-chevron-down {
   box-sizing: border-box;
@@ -5446,7 +5446,7 @@ fieldset:disabled .Btn {
 }
 .Tree-branch .Tree-leaf .Tree-leaf--content .Tree-leaf--icon {
   margin-right: .25rem;
-  color: var(--ls-bg-accent,hsl(217deg,96%,52%))
+  color: var(--ls-bg-accent)
 }
 .Tree-branch .Tree-leaf .Tree-leaf--content .Tree-leaf--caption {
   margin-left: auto!important
@@ -6094,7 +6094,7 @@ fieldset:disabled .Btn {
   height: 0
 }
 .Switch-beta label input[type=checkbox]:checked ~ .Lever {
-  background-color: var(--ls-bg-lighter)
+  background-color: var(--ls-bg-surface)
 }
 .Switch-beta label input[type=checkbox]:checked ~ .Lever:after {
   background-color: var(--ls-bg-accent);
@@ -6122,7 +6122,7 @@ fieldset:disabled .Btn {
   position: relative;
   width: 40px;
   height: 15px;
-  background-color: var(--ls-bg-lightest);
+  background-color: hsla(var(--ls-contrast-hsl),.02);
   border-radius: 15px;
   transition: background .3s ease;
   vertical-align: middle;
@@ -6259,14 +6259,19 @@ fieldset:disabled .Btn {
 .Form.Form-lg .Form-select + .Form-label {
   font-size: 1.25rem
 }
+.Form,
 .Form-material {
   position: relative;
   margin: 1rem 0;
   line-height: 1.5
 }
+.Form textarea,
 .Form-material textarea {
   padding: 5px
 }
+.Form input,
+.Form select,
+.Form textarea,
 .Form-material input,
 .Form-material select,
 .Form-material textarea {
@@ -6281,20 +6286,38 @@ fieldset:disabled .Btn {
   border-bottom: 1px solid hsla(var(--ls-border-hsl),var(--ls-border-alpha));
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
 }
+.Form .Form-control:focus:not([readonly]),
+.Form .Form-select:focus:not([readonly]),
+.Form .Form-textarea:focus:not([readonly]),
 .Form-material .Form-control:focus:not([readonly]),
 .Form-material .Form-select:focus:not([readonly]),
 .Form-material .Form-textarea:focus:not([readonly]) {
   box-shadow: inset 0 1px 3px hsla(var(--ls-shadow-hsl),.12),inset 0 1px 2px hsla(var(--ls-shadow-hsl),.24);
   border-color: var(--ls-bg-accent)
 }
+.Form .Form-control:focus:not([readonly]) + label,
+.Form .Form-select:focus:not([readonly]) + label,
+.Form .Form-textarea:focus:not([readonly]) + label,
 .Form-material .Form-control:focus:not([readonly]) + label,
 .Form-material .Form-select:focus:not([readonly]) + label,
 .Form-material .Form-textarea:focus:not([readonly]) + label {
   color: var(--ls-bg-accent)
 }
-.Form-material .Form-control:-moz-placeholder-shown ~ .Form-label, .Form-material .Form-select:-moz-placeholder-shown ~ .Form-label, .Form-material .Form-textarea:-moz-placeholder-shown ~ .Form-label {
+.Form .Form-control:-moz-placeholder-shown ~ .Form-label, .Form .Form-select:-moz-placeholder-shown ~ .Form-label, .Form .Form-textarea:-moz-placeholder-shown ~ .Form-label, .Form-material .Form-control:-moz-placeholder-shown ~ .Form-label, .Form-material .Form-select:-moz-placeholder-shown ~ .Form-label, .Form-material .Form-textarea:-moz-placeholder-shown ~ .Form-label {
   transform: translateY(-85%)
 }
+.Form .Form-control:focus ~ .Form-label,
+.Form .Form-control:not(:required) ~ .Form-label,
+.Form .Form-control:placeholder-shown ~ .Form-label,
+.Form .Form-control:required:valid ~ .Form-label,
+.Form .Form-select:focus ~ .Form-label,
+.Form .Form-select:not(:required) ~ .Form-label,
+.Form .Form-select:placeholder-shown ~ .Form-label,
+.Form .Form-select:required:valid ~ .Form-label,
+.Form .Form-textarea:focus ~ .Form-label,
+.Form .Form-textarea:not(:required) ~ .Form-label,
+.Form .Form-textarea:placeholder-shown ~ .Form-label,
+.Form .Form-textarea:required:valid ~ .Form-label,
 .Form-material .Form-control:focus ~ .Form-label,
 .Form-material .Form-control:not(:required) ~ .Form-label,
 .Form-material .Form-control:placeholder-shown ~ .Form-label,
@@ -6309,64 +6332,85 @@ fieldset:disabled .Btn {
 .Form-material .Form-textarea:required:valid ~ .Form-label {
   transform: translateY(-85%)
 }
-.Form-material .Form-control:not(:disabled):not(:-moz-read-only):hover, .Form-material .Form-select:not(:disabled):not(:-moz-read-only):hover, .Form-material .Form-textarea:not(:disabled):not(:-moz-read-only):hover {
+.Form .Form-control:not(:disabled):not(:-moz-read-only):hover, .Form .Form-select:not(:disabled):not(:-moz-read-only):hover, .Form .Form-textarea:not(:disabled):not(:-moz-read-only):hover, .Form-material .Form-control:not(:disabled):not(:-moz-read-only):hover, .Form-material .Form-select:not(:disabled):not(:-moz-read-only):hover, .Form-material .Form-textarea:not(:disabled):not(:-moz-read-only):hover {
   border-bottom-color: var(--ls-bg-accent)
 }
+.Form .Form-control:not(:disabled):not(:read-only):hover,
+.Form .Form-select:not(:disabled):not(:read-only):hover,
+.Form .Form-textarea:not(:disabled):not(:read-only):hover,
 .Form-material .Form-control:not(:disabled):not(:read-only):hover,
 .Form-material .Form-select:not(:disabled):not(:read-only):hover,
 .Form-material .Form-textarea:not(:disabled):not(:read-only):hover {
   border-bottom-color: var(--ls-bg-accent)
 }
-.Form-material .Form-control:not(:disabled):not(:-moz-read-only):focus + .Form-label, .Form-material .Form-select:not(:disabled):not(:-moz-read-only):focus + .Form-label, .Form-material .Form-textarea:not(:disabled):not(:-moz-read-only):focus + .Form-label {
+.Form .Form-control:not(:disabled):not(:-moz-read-only):focus + .Form-label, .Form .Form-select:not(:disabled):not(:-moz-read-only):focus + .Form-label, .Form .Form-textarea:not(:disabled):not(:-moz-read-only):focus + .Form-label, .Form-material .Form-control:not(:disabled):not(:-moz-read-only):focus + .Form-label, .Form-material .Form-select:not(:disabled):not(:-moz-read-only):focus + .Form-label, .Form-material .Form-textarea:not(:disabled):not(:-moz-read-only):focus + .Form-label {
   color: var(--ls-bg-accent)
 }
+.Form .Form-control:not(:disabled):not(:read-only):focus + .Form-label,
+.Form .Form-select:not(:disabled):not(:read-only):focus + .Form-label,
+.Form .Form-textarea:not(:disabled):not(:read-only):focus + .Form-label,
 .Form-material .Form-control:not(:disabled):not(:read-only):focus + .Form-label,
 .Form-material .Form-select:not(:disabled):not(:read-only):focus + .Form-label,
 .Form-material .Form-textarea:not(:disabled):not(:read-only):focus + .Form-label {
   color: var(--ls-bg-accent)
 }
+.Form .Form-control:disabled,
+.Form .Form-select:disabled,
+.Form .Form-textarea:disabled,
 .Form-material .Form-control:disabled,
 .Form-material .Form-select:disabled,
 .Form-material .Form-textarea:disabled {
   color: hsl(213deg,11%,69%)
 }
+.Form .Form-control:disabled + .Form-label,
+.Form .Form-select:disabled + .Form-label,
+.Form .Form-textarea:disabled + .Form-label,
 .Form-material .Form-control:disabled + .Form-label,
 .Form-material .Form-select:disabled + .Form-label,
 .Form-material .Form-textarea:disabled + .Form-label {
   color: hsl(213deg,11%,69%)
 }
+.Form .Form-select,
 .Form-material .Form-select {
   padding: 5px
 }
+.Form .Form-select > option,
 .Form-material .Form-select > option {
-  color: var(--ls-fg-lightest);
-  background: var(--ls-bg-lightest);
+  color: var(--ls-fg-surface);
+  background: var(--ls-bg-surface);
   padding: .5rem;
   margin: 3px 0;
   box-shadow: inset 0 1px 3px hsla(var(--ls-shadow-hsl),.12),inset 0 1px 2px hsla(var(--ls-shadow-hsl),.24)
 }
+.Form .Form-select > option:checked,
 .Form-material .Form-select > option:checked {
   background: var(--ls-bg-accent);
   color: var(--ls-fg-accent)
 }
+.Form .Form-select > option:active,
+.Form .Form-select > option:hover,
 .Form-material .Form-select > option:active,
 .Form-material .Form-select > option:hover {
-  color: var(--ls-fg-lighter);
-  background-color: var(--ls-bg-lighter)
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface)
 }
+.Form .Form-select ~ .Form-label,
 .Form-material .Form-select ~ .Form-label {
   transform: translateY(-85%)
 }
+.Form .Form-textarea,
 .Form-material .Form-textarea {
   --ls-border-alpha: .3;
   line-height: 2em;
   background-image: linear-gradient(transparent,transparent calc(2em - 1px),hsla(var(--ls-border-hsl),var(--ls-border-alpha)) 0);
   background-size: 100% 2em
 }
+.Form .Form-textarea:focus:not([readonly]),
 .Form-material .Form-textarea:focus:not([readonly]) {
   background-image: linear-gradient(transparent,transparent calc(2em - 1px),hsla(var(--ls-border-hsl),var(--ls-border-alpha)) 0);
   background-size: 100% 2em
 }
+.Form .Form-label,
 .Form-material .Form-label {
   position: absolute;
   display: block;
@@ -6571,8 +6615,8 @@ fieldset:disabled .Btn {
 }
 .Form-outline .Form-select > option:active,
 .Form-outline .Form-select > option:hover {
-  color: var(--ls-fg-lighter);
-  background-color: var(--ls-bg-lighter)
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface)
 }
 .Form-outline .Form-select ~ .Form-label {
   line-height: 15px
@@ -6608,8 +6652,8 @@ fieldset:disabled .Btn {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
   background-clip: padding-box;
   border: 1px solid hsla(var(--ls-border-hsl),var(--ls-border-alpha));
   -webkit-appearance: none;
@@ -6630,8 +6674,8 @@ fieldset:disabled .Btn {
   cursor: pointer
 }
 .Form-control:focus {
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
   border-color: hsla(var(--ls-border-hsl),var(--ls-border-alpha));
   outline: 0;
   box-shadow: 0 0 0 .25rem hsla(var(--ls-bg-accent-hsl),.25)
@@ -6662,8 +6706,8 @@ fieldset:disabled .Btn {
   margin: -.375rem -.75rem;
   -webkit-margin-end: .75rem;
           margin-inline-end: .75rem;
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
@@ -6678,8 +6722,8 @@ fieldset:disabled .Btn {
   margin: -.375rem -.75rem;
   -webkit-margin-end: .75rem;
           margin-inline-end: .75rem;
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
@@ -6698,10 +6742,10 @@ fieldset:disabled .Btn {
   }
 }
 .Form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%))
+  background-color: var(--ls-bg-surface)
 }
 .Form-control:hover:not(:disabled):not([readonly])::file-selector-button {
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%))
+  background-color: var(--ls-bg-surface)
 }
 .Form-control-plaintext {
   display: block;
@@ -6810,7 +6854,7 @@ textarea.Form-control-lg {
   height: 1em;
   margin-top: .25em;
   vertical-align: top;
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
+  background-color: var(--ls-bg-surface);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -6834,19 +6878,19 @@ textarea.Form-control-lg {
   box-shadow: 0 0 0 .25rem hsla(var(--ls-bg-accent-hsl),.25)
 }
 .Form-check-input:checked {
-  background-color: var(--ls-bg-accent,hsl(217deg,96%,52%));
-  border-color: var(--ls-bg-accent,hsl(217deg,96%,52%))
+  background-color: var(--ls-bg-accent);
+  border-color: var(--ls-bg-accent)
 }
 .Form-check-input:checked[type=checkbox] {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='var(--ls-fg-accent, hsl(0deg, 0%25, 100%25))' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E")
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='var(--ls-fg-accent)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E")
 }
 .Form-check-input:checked[type=radio] {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='var(--ls-fg-accent, hsl(0deg, 0%25, 100%25))'/%3E%3C/svg%3E")
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='var(--ls-fg-accent)'/%3E%3C/svg%3E")
 }
 .Form-check-input[type=checkbox]:indeterminate {
-  background-color: var(--ls-bg-accent,hsl(217deg,96%,52%));
-  border-color: var(--ls-bg-accent,hsl(217deg,96%,52%));
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='var(--ls-fg-accent, hsl(0deg, 0%25, 100%25))' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3E%3C/svg%3E")
+  background-color: var(--ls-bg-accent);
+  border-color: var(--ls-bg-accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='var(--ls-fg-accent)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3E%3C/svg%3E")
 }
 .Form-check-input:disabled {
   pointer-events: none;
@@ -6879,7 +6923,7 @@ textarea.Form-control-lg {
 }
 .Form-switch .Form-check-input:checked {
   background-position: right center;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='var(--ls-fg-accent, hsl(0deg, 0%25, 100%25))'/%3E%3C/svg%3E")
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='var(--ls-fg-accent)'/%3E%3C/svg%3E")
 }
 .Form-switch.Form-check-reverse {
   padding-right: 2.5em;
@@ -6913,9 +6957,9 @@ textarea.Form-control-lg {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='var(--ls-fg-surface, hsl(0deg, 0%25, 0%25))' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='var(--ls-fg-surface)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px;
@@ -6946,7 +6990,7 @@ textarea.Form-control-lg {
 }
 .Form-select:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 var(--ls-fg-surface,hsl(0deg,0%,0%))
+  text-shadow: 0 0 0 var(--ls-fg-surface)
 }
 .Form-select-sm {
   padding-top: .25rem;
@@ -6975,10 +7019,10 @@ textarea.Form-control-lg {
   outline: 0
 }
 .Form-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px var(--ls-bg-surface,hsl(0deg,0%,100%)),0 0 0 .25rem hsla(var(--ls-bg-accent-hsl),.25)
+  box-shadow: 0 0 0 1px var(--ls-bg-surface),0 0 0 .25rem hsla(var(--ls-bg-accent-hsl),.25)
 }
 .Form-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px var(--ls-bg-surface,hsl(0deg,0%,100%)),0 0 0 .25rem hsla(var(--ls-bg-accent-hsl),.25)
+  box-shadow: 0 0 0 1px var(--ls-bg-surface),0 0 0 .25rem hsla(var(--ls-bg-accent-hsl),.25)
 }
 .Form-range::-moz-focus-outer {
   border: 0
@@ -7002,7 +7046,7 @@ textarea.Form-control-lg {
   }
 }
 .Form-range::-webkit-slider-thumb:active {
-  background-color: var(--ls-bg-accent,hsl(217deg,96%,52%))
+  background-color: var(--ls-bg-accent)
 }
 .Form-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -7031,7 +7075,7 @@ textarea.Form-control-lg {
   }
 }
 .Form-range::-moz-range-thumb:active {
-  background-color: var(--ls-bg-accent,hsl(217deg,96%,52%))
+  background-color: var(--ls-bg-accent)
 }
 .Form-range::-moz-range-track {
   width: 100%;
@@ -7084,10 +7128,10 @@ textarea.Form-control-lg {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%));
+  color: var(--ls-fg-surface);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--ls-bg-surface,hsl(0deg,0%,100%));
+  background-color: var(--ls-bg-surface);
   border: 1px solid hsla(var(--ls-border-hsl),var(--ls-border-alpha));
   border-radius: .375rem
 }
@@ -7128,7 +7172,7 @@ textarea.Form-control-lg {
 }
 .Form-label {
   margin-bottom: .5rem;
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%))
+  color: var(--ls-fg-surface)
 }
 .Col-form-label {
   padding-top: calc(.375rem + 1px);
@@ -7136,7 +7180,7 @@ textarea.Form-control-lg {
   margin-bottom: 0;
   font-size: inherit;
   line-height: 1.5;
-  color: var(--ls-fg-surface,hsl(0deg,0%,0%))
+  color: var(--ls-fg-surface)
 }
 .Col-form-label-lg {
   padding-top: calc(.5rem + 1px);