@wwtdev/bsds-css 1.9.0 → 1.10.0

package/dist/wwt-bsds.css

@@ -1265,57 +1265,125 @@ a.bs-circle-button {
 }
 /* Content */
 .bs-dropdown {
+  --dropdown-bottom: 0;
+  --dropdown-left: 0;
+  --dropdown-top: auto;
+  --dropdown-width: 100%;
   background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
-  bottom: auto;
+  bottom: var(--dropdown-bottom);
   box-shadow: var(--bs-shadow-contentMedium);
+  left: var(--dropdown-left);
   line-height: 1.5rem;
   margin: 0;
-  max-height: 0;
   opacity: 0;
   overflow-y: auto;
-  position: absolute;
-  top: calc(100% + 0.5rem);
+  position: fixed;
+  top: var(--dropdown-top);
+  transform: translateY(100%);
+  transform-origin: center bottom;
   transition-duration: 75ms;
-  transition-property: opacity, max-height;
+  transition-property: opacity, transform;
   transition-timing-function: ease-in-out;
-  z-index: 999;
+  width: var(--dropdown-width);
+  z-index: -1;
 }
-/* Sizing */
-.bs-dropdown:where([data-width="sm"]) {
-  width: 10rem;
+/* mobile header */
+/* TODO: h3 may not be the right tag to use here... label, possibly? */
+.bs-dropdown > :where(header) {
+  border-bottom: 1px solid var(--bs-border-base);
+  padding: 1.5rem;
 }
-.bs-dropdown:where([data-width="md"]),
-.bs-dropdown:where(:not([data-width])) {
-  width: 20rem;
+.bs-dropdown > :where(header) :where(h3) {
+  font-size: 1.25rem;
 }
-.bs-dropdown:where([data-width="lg"]) {
-  width: 40rem;
+.bs-dropdown > :where(header) :where(p) {
+  font-size: 1rem;
 }
-.bs-dropdown:where([data-width="content"]) {
-  width: auto;
+/* mobile search input */
+.bs-dropdown :where(.bs-dropdown-search) {
+  padding: 1.5rem 1.5rem 0 1.5rem;
 }
-.bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
-  width: 100%;
+.bs-dropdown :where(.bs-dropdown-search bs-input-search) {
+  margin-bottom: 1rem;
+  margin-left: -0.75rem;
+  width: calc(100% + 1.5rem);
+}
+.bs-dropdown:where([data-search]) :where(.bs-dropdown-options) {
+  --options-height-max: 11.5rem;
 }
 /* data-shown */
 .bs-dropdown:where([data-shown]) {
-  max-height: 20rem;
   opacity: 1;
+  transform: translateY(0);
+  z-index: 999;
 }
-/* data-top */
-.bs-dropdown:where([data-top]) {
-  bottom: calc(100% + 0.5rem);
-  top: auto;
-}
-/* data-justify="center" */
-.bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
-  left: 50%;
-  transform: translateX(-50%);
+@media (min-width: 752px) {
+  .bs-dropdown {
+    --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
+    --dropdown-left: var(--dropdown-wscreen-left, initial);
+    --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
+    --dropdown-width: var(--dropdown-wscreen-width, initial);
+    position: absolute;
+    transform: initial;
+  }
+
+  /* Hide the header */
+  .bs-dropdown > :where(header) {
+    display: none;
+  }
+
+  /* Sizing */
+  .bs-dropdown:where([data-width="sm"]) {
+    --dropdown-wscreen-width: 10rem;
+  }
+
+  .bs-dropdown:where([data-width="md"]),
+  .bs-dropdown:where(:not([data-width])) {
+    --dropdown-wscreen-width: 20rem;
+  }
+
+  .bs-dropdown:where([data-width="lg"]) {
+    --dropdown-wscreen-width: 40rem;
+  }
+
+  .bs-dropdown:where([data-width="content"]) {
+    --dropdown-wscreen-width: auto;
+  }
+
+  .bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
+    --dropdown-wscreen-width: 100%;
+  }
+
+  /* data-shown */
+  .bs-dropdown:where([data-shown]) {
+    opacity: 1;
+  }
+
+  /* data-top */
+  .bs-dropdown:where([data-top]) {
+    --dropdown-wscreen-bottom: calc(100% + 0.5rem);
+    --dropdown-wscreen-top: auto;
+  }
+
+  /* data-justify="center" */
+  .bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
+    --dropdown-wscreen-left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .bs-dropdown :where(.bs-dropdown-options) {
+    --options-height-max: 20rem;
+  }
+  .bs-dropdown:where([data-search]) :where(.bs-dropdown-options) {
+    --options-height-max: 17.25rem;
+  }
 }
 /* Option list */
 .bs-dropdown-options {
   list-style: none;
+  max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
+  overflow-y: auto;
   padding: 0;
 }
 .bs-dropdown-options :where(li:first-child) {
@@ -1336,10 +1404,12 @@ a.bs-circle-button {
   display: grid;
   margin-bottom: 0.5rem;
   padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.75rem;
+  padding-left: 1.25rem;
+  padding-right: 1.375rem;
   padding-top: 0.25rem;
   row-gap: 0.125rem;
+  word-break: break-word;
+  word-wrap: break-word;
 }
 /* Variant: 2-col */
 .bs-dropdown-options :where(li[data-variant~="2-col"]) {
@@ -1349,7 +1419,7 @@ a.bs-circle-button {
 .bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
-  height: 1.125rem;
+  min-height: 1.125rem;
   line-height: 1.125rem;
 }
 /* Variant: 2-col description */
@@ -1357,7 +1427,7 @@ a.bs-circle-button {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   grid-column-start: 2;
-  height: 1.125rem;
+  min-height: 1.125rem;
   line-height: 1.125rem;
 }
 /* Hover or data-selected */
@@ -1415,6 +1485,12 @@ a.bs-circle-button {
 .bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
   --focus-border-color: var(--bs-red-200);
 }
+@media (min-width: 752px)  {
+  .bs-dropdown-options :where(li) {
+    padding-left: 0.5rem;
+    padding-right: 0.75rem;
+  }
+}
 :where(label, legend) {
   --label-color: var(--bs-ink-base);
 
@@ -2230,6 +2306,9 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
 .bs-loader:where([data-variant="black"]) {
   --loader-dot-bg: var(--bs-black);
 }
+.bs-loader:where([data-variant="gray"]) {
+  --loader-dot-bg: var(--bs-gray-400);
+}
 .bs-loader:where([data-variant="white"]) {
   --loader-dot-bg: var(--bs-white);
 }
@@ -2618,12 +2697,15 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     opacity: 0;
     position: fixed;
     right: 0;
-    transform: translateY(calc(100% + 1.5rem));
+    transform: translate(0, calc(100% + 1.5rem));
+    transition-duration: 200ms;
+    transition-property: transform, opacity;
+    transition-timing-function: ease;
     /* Clamp width for mobile -> full screen */
     width: clamp(17rem, calc(100vw - 3rem), 25rem);
     z-index: 999;
 }
-.bs-toast[data-stacked] {
+.bs-toast:where([data-stacked]) {
     bottom: auto;
     left: auto;
     position: static;
@@ -2631,39 +2713,9 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     z-index: auto;
 }
 /* Mobile - Toast comes up from bottom */
-@keyframes slideDown {
-    0% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-    100% {
-        opacity: 0;
-        transform: translateY(calc(100% + 1.5rem));
-    }
-}
-@keyframes slideUp {
-    0% {
-        opacity: 0;
-        transform: translateY(calc(100% + 1.5rem));
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
 .bs-toast:where([data-shown]) {
-    /* Small delay on load to alow for HTML element to exist */
-    animation-delay: 10ms;
-    animation-duration: 200ms;
-    animation-fill-mode: forwards;
-    animation-name: slideUp;
-    animation-timing-function: ease;
-}
-.bs-toast:where([data-dismissed]) {
-    animation-duration: 200ms;
-    animation-fill-mode: forwards;
-    animation-name: slideDown;
-    animation-timing-function: ease;
+    opacity: 1;
+    transform: translate(0, 0);
 }
 .bs-toast-header {
     align-items: center;
@@ -2727,53 +2779,18 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     color: var(--bs-red-400);
 }
 @media (min-width: 440px) {
-
     .bs-toast {
         left: auto;
         margin-left: 0;
         margin-right: 0;
         opacity: 0;
         right: 1.5rem;
-        transform: translateX(calc(100% + 1.5rem));
+        transform: translate(calc(100% + 1.5rem), 0);
     }
 
     .bs-toast:where([data-shown]) {
-        /* Small delay on load to alow for HTML element to exist */
-        animation-delay: 10ms;
-        animation-duration: 200ms;
-        animation-fill-mode: forwards;
-        animation-name: slideLeft;
-        animation-timing-function: ease;
-    }
-
-    .bs-toast:where([data-dismissed]) {
-        animation-duration: 200ms;
-        animation-fill-mode: forwards;
-        animation-name: slideRight;
-        animation-timing-function: ease;
-    }
-
-    /* Non-mobile toasts come in from the right */
-    @keyframes slideRight {
-        0% {
-            opacity: 1;
-            transform: translateX(0);
-        }
-        100% {
-            opacity: 0;
-            transform: translateX(calc(100% + 1.5rem));
-        }
-    }
-
-    @keyframes slideLeft {
-        0% {
-            opacity: 0;
-            transform: translateX(calc(100% + 1.5rem));
-        }
-        100% {
-            opacity: 1;
-            transform: translateX(0);
-        }
+        opacity: 1;
+        transform: translate(0, 0);
     }
 
     .bs-toast-actions:where([data-stacked]) {