@wwtdev/bsds-css 2.3.4 → 2.4.1

package/dist/wwt-bsds.css

@@ -1557,6 +1557,10 @@ a.bs-circle-button {
   overflow-y: auto;
   padding-block: 0.5rem;
   padding-left: 0;
+  position: relative;
+}
+.bs-dropdown-options:focus-visible {
+  outline: none;
 }
 /* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
 @media (min-width: 752px) {
@@ -1662,28 +1666,20 @@ a.bs-circle-button {
 .bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
   color: var(--bs-red-500);
 }
-/* List option mouse click focus (do not show) */
-.bs-dropdown-options :where(li:focus:not(:focus-visible)){
-  outline: none;
-}
-/* data-variant="negative" list option mouse click focus (do not show) */
-.bs-dropdown-options :where(li[data-variant~="negative"]:focus:not(:focus-visible)) {
-  outline: none;
-}
 /* List option keyboard navigation focus */
-.bs-dropdown-options :where(li:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
   --focus-border-color: var(--bs-blue-base);
   border: 2px solid var(--focus-border-color);
   outline: none;
   padding-left: 1.375rem;
 }
 /* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown-options :where(li[data-selected]:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
   border-left: 4px solid var(--focus-border-color);
   padding-left: 1.25rem;
 }
 /* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
+.bs-dropdown-options:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
   --focus-border-color: var(--bs-red-200);
 }
 /* Multi-select divider */
@@ -1732,10 +1728,10 @@ a.bs-circle-button {
 .bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[role="separator"]) {
   padding-right: 0.625rem;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li:focus-visible) {
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
   padding-left: 0.625rem;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[data-selected]:focus-visible) {
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
   padding-left: 0.5rem;
 }
 @media (min-width: 752px)  {
@@ -1748,11 +1744,11 @@ a.bs-circle-button {
     padding-right: 0.625rem;
   }
 
-  .bs-dropdown-options :where(li:focus-visible) {
+  .bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
     padding-left: 0.625rem;
   }
 
-  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
+  .bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
     padding-left: 0.5rem;
   }
 }
@@ -1768,10 +1764,10 @@ custom properties:
 */
 button:where(.bs-filter-button) {
   flex-shrink: 0;
+  position: relative;
 }
 .bs-filter-button {
   align-items: center;
-  border-radius: 0.25rem;
   color: var(--filterbtn-color, var(--bs-ink-blue));
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -1779,15 +1775,22 @@ button:where(.bs-filter-button) {
   display: inline-flex;
   font-size: var(--filterbtn-text-size, var(--bs-text-base));
   font-weight: var(--filterbtn-weight, 400);
-  height: var(--filterbtn-height, 2rem);
+  height: var(--filterbtn-height, 1.5rem);
   line-height: 1.5;
-  outline: solid var(--filterbtn-focus-color, transparent) .125rem;
-  outline-offset: -.125rem;
-  padding-inline: .5rem;
   transition: outline-color 100ms ease-in-out;
   width: -moz-max-content;
   width: max-content;
 }
+.bs-filter-button::after {
+  border: solid var(--filterbtn-focus-color, transparent) 2px;
+  border-radius: 0.25rem;
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  transform: scale(1.25);
+  width: 100%;
+}
 .bs-filter-button :where(.bs-icon),
 .bs-filter-button :where(span:has(svg:only-child)) {
   display: block;
@@ -1799,7 +1802,7 @@ button:where(.bs-filter-button) {
   width: var(--filterbtn-caret-size, 1rem);
 }
 .bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
-  --filterbtn-height: 1.75rem;
+
   --filterbtn-text-size: var(--bs-text-sm);
   --filterbtn-caret-size: .75rem;
 }
@@ -1816,6 +1819,7 @@ button:where(.bs-filter-button) {
 }
 /* Focus state */
 .bs-filter-button:where(:focus-visible) {
+  outline: none;
   --filterbtn-focus-color: var(--bs-blue-base);
 }
 /* Filter open state */
@@ -3216,6 +3220,85 @@ a.bs-profile:where([data-layout]) {
 a.bs-profile:where([data-layout]):hover {
   --profile-name-decoration: underline;
 }
+:where(.bs-spinner) {
+  display: block;
+}
+/* ------------ Sizes ------------ */
+.bs-spinner {
+  aspect-ratio: 1;
+  fill: none;
+  height: var(--spinner-size, 2rem);
+  width: var(--spinner-size, 2rem);
+}
+.bs-spinner:where([data-size="sm"]) {
+  --spinner-size: 1rem;
+}
+.bs-spinner:where([data-size="md"]) {
+  --spinner-size: 2rem;
+}
+.bs-spinner:where([data-size="lg"]) {
+  --spinner-size: 3rem;
+}
+/* ------------ Color Variants ------------ */
+.bs-spinner :where(circle) {
+  animation: bs-spin 1s linear infinite;
+  stroke-linecap: round;
+  stroke-width: 10%;
+  transition: all 1s ease-in-out;
+}
+.bs-spinner:where(:not([data-variant="gradient"])) :where(circle) {
+  animation: bs-spin 1s linear infinite, bs-stroke-change 2s linear infinite;
+}
+.bs-spinner :where(circle) {
+  --bs-spinner-color-1: var(--bs-blue-400);
+  --bs-spinner-color-2: var(--bs-blue-200);
+}
+.bs-spinner:where([data-variant="white"]) :where(circle) {
+  --bs-spinner-color-1: white;
+  --bs-spinner-color-2: white;
+}
+:where(#bs-spinner-gradient stop) {
+  stop-color: var(--bs-plum-400);
+}
+:where(#bs-spinner-gradient stop:first-child) {
+  stop-color: var(--bs-blue-400);
+}
+:where(#bs-spinner-gradient stop:last-child) {
+  stop-color: var(--bs-red-400);
+}
+@keyframes bs-spin {
+  0% {
+    stroke-dasharray: 0 100;
+    stroke-dashoffset: 0;
+  }
+  25% {
+    stroke-dasharray: 33 67;
+    stroke-dashoffset: -40;
+  }
+  70% {
+    stroke-dasharray: 33 67;
+    stroke-dashoffset: -60;
+  }
+  85% {
+    stroke-dasharray: 17 83;
+    stroke-dashoffset: -77;
+  }
+  100% {
+    stroke-dasharray: 0 100;
+    stroke-dashoffset: -100;
+  }
+}
+@keyframes bs-stroke-change {
+  0% {
+    stroke: var(--bs-spinner-color-1);
+  }
+  33% {
+    stroke: var(--bs-spinner-color-2, var(--bs-spinner-color-1));
+  }
+  100% {
+    stroke: var(--bs-spinner-color-1);
+  }
+}
 :is(.bs-tab-list, bs-tab-list) {
   --active-line-offset: 0;
   --active-line-max-width: 0;
@@ -3392,6 +3475,87 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
   left: 0;
   z-index: 2;
 }
+.bs-progress-bar, .bs-timeline {
+  background-color: var(--bs-bg-base);
+  display: flex;
+  position: relative;
+}
+.bs-progress-bar {
+  gap: .25rem;
+}
+/* ------------ Step Item ------------ */
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item) {
+  background-color: var(--step-bg, inherit);
+  flex-grow: 1;
+  flex-shrink: 0;
+  position: relative;
+}
+/* -- Step Items in Timeline -- */
+.bs-timeline :where(.bs-step-item) {
+  align-items: center;
+  color: var(--step-color, var(--bs-ink-disabled));
+  display: flex;
+  flex-direction: column;
+  padding-inline: 1rem;
+  row-gap: 0.5rem;
+}
+.bs-timeline :where(.bs-step-item *) {
+  text-wrap: nowrap;
+}
+.bs-timeline :where(.bs-step-item .bs-step-icon) {
+  background-color: inherit;
+  height: 1.5rem;
+  text-align: center;
+  width: 1.5rem;
+  z-index: 10;
+}
+.bs-timeline :where(.bs-step-item)::after {
+  border-top: 0.125rem solid var(--bs-border-base);
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0.75rem;
+  width: 100%;
+}
+/* -- Step Items in Progress Bar -- */
+.bs-progress-bar :where(.bs-step-item) {
+  --step-bg: var(--progress-step-bg, var(--bs-bg-disabled));
+  height: .25rem;
+}
+.bs-progress-bar :where(.bs-step-item > *) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+/* ------------ Status colors ------------ */
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="in-progress"]) {
+  --step-color: var(--bs-ink-base);
+  --progress-step-bg: var(--bs-purple-light);
+}
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="complete"]),
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="paused"]),
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="ongoing"]) {
+  --step-color: var(--bs-ink-purple);
+  --progress-step-bg: var(--bs-purple-medium);
+}
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="base"]) {
+  --progress-step-bg: var(--bs-purple-base);
+}
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="warning"]) {
+  --step-color: var(--bs-ink-orange);
+  --progress-step-bg: var(--bs-orange-base);
+}
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="error"]),
+:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="cancelled"]) {
+  --step-color: var(--bs-ink-red);
+  --progress-step-bg: var(--bs-red-base);
+}
 /* Base Toast Styles */
 .bs-toast {
     background-color: var(--bs-bg-base-elevated);