@wwtdev/bsds-css 3.2.1 → 3.3.0

package/dist/wwt-bsds.css

@@ -33,7 +33,7 @@
   --bs-gold-500: #997958;
   --bs-gray-50: #f7f7fc;
   --bs-gray-100: #f0f0fa;
-  --bs-gray-150: #e4e4eb;
+  --bs-gray-150: #dcdde9;
   --bs-gray-200: #c9cad9;
   --bs-gray-300: #a3a4b7;
   --bs-gray-400: #4e4f5f;
@@ -227,28 +227,29 @@
     rgba(22, 47, 180, 0.05) 283.2deg,
     rgba(227, 28, 121, 0.05) 414.4deg
   );
-  --bs-space-0: 0;
-  --bs-space-1: 0.25rem;
-  --bs-space-2: 0.5rem;
-  --bs-space-3: 0.75rem;
-  --bs-space-4: 1rem;
-  --bs-space-6: 1.5rem;
-  --bs-space-8: 2rem;
-  --bs-space-12: 3rem;
-  --bs-space-16: 4rem;
-  --bs-space-24: 6rem;
-  --bs-space-32: 8rem;
-  --bs-space-none: 0;
-  --bs-space-3xs: 0.25rem;
-  --bs-space-2xs: 0.5rem;
-  --bs-space-xs: 0.75rem;
-  --bs-space-sm: 1rem;
-  --bs-space-md: 1.5rem;
-  --bs-space-lg: 2rem;
-  --bs-space-xl: 3rem;
-  --bs-space-2xl: 4rem;
-  --bs-space-3xl: 6rem;
-  --bs-space-4xl: 8rem;
+  --bs-space-0: calc(var(--bs-space) * 0);
+  --bs-space-1: calc(var(--bs-space) * 1);
+  --bs-space-2: calc(var(--bs-space) * 2);
+  --bs-space-3: calc(var(--bs-space) * 3);
+  --bs-space-4: calc(var(--bs-space) * 4);
+  --bs-space-6: calc(var(--bs-space) * 6);
+  --bs-space-8: calc(var(--bs-space) * 8);
+  --bs-space-12: calc(var(--bs-space) * 12);
+  --bs-space-16: calc(var(--bs-space) * 16);
+  --bs-space-24: calc(var(--bs-space) * 24);
+  --bs-space-32: calc(var(--bs-space) * 32);
+  --bs-space: 0.25rem;
+  --bs-space-none: var(--bs-space-0);
+  --bs-space-3xs: var(--bs-space-1);
+  --bs-space-2xs: var(--bs-space-2);
+  --bs-space-xs: var(--bs-space-3);
+  --bs-space-sm: var(--bs-space-4);
+  --bs-space-md: var(--bs-space-6);
+  --bs-space-lg: var(--bs-space-8);
+  --bs-space-xl: var(--bs-space-12);
+  --bs-space-2xl: var(--bs-space-16);
+  --bs-space-3xl: var(--bs-space-24);
+  --bs-space-4xl: var(--bs-space-32);
   --bs-text-xs: 0.75rem;
   --bs-text-sm: 0.875rem;
   --bs-text-base: 1rem;
@@ -302,6 +303,9 @@
   /* Dynamic width set by the navigation component for page layout */
   --bs-page-nav-width: 0px;
 
+  /* Pill */
+  --bs-pill-height: 1.5rem;
+
   /* Table */
   --bs-table-cell-padding-xs: var(--bs-space-2);
   --bs-table-cell-padding-sm: var(--bs-space-3);
@@ -405,7 +409,7 @@ html:where(:has(.dark, [data-theme="wwt-dark"])),
   /* Ink */
   --bs-ink-base: var(--bs-white);
   --bs-ink-medium: var(--bs-gray-100);
-  --bs-ink-light: var(--bs-gray-200);
+  --bs-ink-light: var(--bs-gray-150);
   --bs-ink-disabled: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
   --bs-ink-primary: var(--bs-blue-100);
   --bs-ink-secondary: var(--bs-plum-100);
@@ -570,7 +574,7 @@ html:where(:has(.dark, [data-theme="wwt-dark"])),
   --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* gray-400 at 60% */
   --bs-ink-invert-base: var(--bs-white);
   --bs-ink-invert-medium: var(--bs-gray-100);
-  --bs-ink-invert-light: var(--bs-gray-200);
+  --bs-ink-invert-light: var(--bs-gray-150);
   --bs-ink-primary: var(--bs-blue-500);
   --bs-ink-secondary: var(--bs-plum-400);
   --bs-ink-accent-1: var(--bs-royal-400);
@@ -1395,7 +1399,7 @@ table {
 }
 thead {
   color: var(--bs-ink-base);
-  font-size: var(--bs-font-base);
+  font-size: var(--bs-text-base);
   font-weight: 600;
 }
 tbody {
@@ -2305,10 +2309,10 @@ Custom properties:
 }
 /* Negative Toast Styles */
 .bs-toast-deprecated:where([data-variant^='negative']) {
-    border-top: 4px solid var(--bs-negative-dark);
+    border-top: 4px solid var(--bs-negative-base);
 }
 .bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
-    color: var(--bs-negative-dark);
+    color: var(--bs-negative-base);
 }
 @media (min-width: 440px) {
     .bs-toast-deprecated {
@@ -2530,15 +2534,13 @@ This must go last to properly override the other classes
   transform: translateY(-50%) scale(0.5);
 }
 .bs-accordion {
-  --accordion-link-color: var(--bs-positive-base-fixed);
-  --accordion-link-outline-color: var(--bs-primary-base);
   --accordion-outline-color: transparent;
   --accordion-padding-inline: 0;
   --accordion-text-size: var(--bs-text-sm);
   border-block: 1px solid var(--bs-border-base);
   display: block;
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-accordion {
     --accordion-padding-inline: var(--bs-space-2);
     --accordion-text-size: var(--bs-text-base);
@@ -2586,7 +2588,7 @@ This must go last to properly override the other classes
 .bs-accordion > :where(header) > :where(button) > * {
   vertical-align: middle;
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-accordion :where(.bs-accordion-toggle) > * ,
   .bs-accordion > :where(header) > :where(button) > * {
     margin-right: var(--bs-space-3);
@@ -2624,7 +2626,7 @@ This must go last to properly override the other classes
 }
 .bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
   grid-template-rows: 1fr;
-  padding-block-end: var(--bs-space-f-2);
+  padding-block-end: var(--bs-space-2);
 }
 /* Accordion Group */
 :where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
@@ -2656,7 +2658,7 @@ This must go last to properly override the other classes
   .bs-alert:where([data-horizontal="true"]) {
     padding: 1rem 1.5rem;
     grid-template-areas: "icon title action close";
-    grid-template-columns: 1.125rem max-content 1fr 1rem;
+    grid-template-columns: 1.125rem auto 1fr 1rem;
   }
 }
 .bs-alert :where(.bs-alert-icon) {
@@ -2682,6 +2684,7 @@ This must go last to properly override the other classes
   .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
     font-size: 1.125rem;
     line-height: 1.5;
+    overflow-wrap: break-word;
   }
 
   .bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
@@ -2722,6 +2725,7 @@ This must go last to properly override the other classes
 .bs-alert :where(.bs-alert-action) {
   grid-area: action;
   margin-top: 1rem;
+  white-space: nowrap;
 }
 @media (min-width: 752px) {
   .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
@@ -2904,7 +2908,7 @@ This must go last to properly override the other classes
 .bs-banner:where([data-variant="negative"]) {
   --banner-bg: var(--bs-accent-6-medium);
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-banner {
     --banner-icon-display: inline-flex;
     --banner-padding: var(--banner-padding-dt);
@@ -3451,8 +3455,8 @@ a.bs-circle-button {
 .bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
   --btn-icon-bg-color: transparent;
   --btn-icon-stroke-color: var(--btn-main);
-  --btn-light: var(--bs-primary-10);
-  --btn-secondary: var(--bs-primary-10);
+  --btn-light: transparent;
+  --btn-secondary: transparent;
 }
 /* Active, Hover, Focus states */
 .bs-circle-button:active, .bs-circle-button:hover {
@@ -5288,7 +5292,7 @@ label:where(.bs-label) {
 .bs-option:where(:not([data-multiple="true"])[aria-selected="true"]) {
   --description-color: var(--bs-ink-primary);
   background: var(--bs-bg-medium-to-light);
-  border-left-color: var(--bs-ink-primary);
+  border-left-color: var(--bs-primary-base);
   color: var(--bs-ink-primary);
 }
 /* selected yet disabled...should be a very rare scenario, but need to handle it  */
@@ -5472,8 +5476,9 @@ label:where(.bs-label) {
   font-family: inherit;
   font-size: var(--bs-text-sm);
   gap: var(--pill-gap);
-  height: 1.5rem;
   line-height: 1rem;
+  max-width: 100%;
+  min-height: var(--bs-pill-height);
   padding: 0 .375rem;
   position: relative;
   text-decoration: none;
@@ -5645,6 +5650,23 @@ label:where(.bs-label) {
 .bs-pill:where([data-variant^="filter"])[data-active="false"]:is(:disabled, [aria-disabled="true"]) {
   --pill-border: var(--bs-gray-400);
 }
+.bs-pill-group {
+  --pill-group-max-lines: 3;
+}
+.bs-pill-group-pills {
+  /* Mainly for css-component-only usage */
+  --default-max-height: calc(var(--pill-group-max-lines) * (var(--bs-pill-height) + var(--bs-space-2)));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bs-space-2);
+  max-height: var(--pill-group-max-height, var(--default-max-height));
+  overflow: hidden;
+}
+.bs-pill-group-pills:where([data-expanded="true"]) {
+  margin-bottom: var(--bs-space-2);
+  max-height: none;
+  overflow: visible;
+}
 .bs-profile-details {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-sm);
@@ -5816,14 +5838,14 @@ a.bs-profile:where([data-layout]):hover {
   --bs-spinner-color-1: white;
   --bs-spinner-color-2: white;
 }
-:where(#bs-spinner-gradient stop) {
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop) {
   stop-color: var(--bs-secondary-base-fixed);
 }
-:where(#bs-spinner-gradient stop:first-child) {
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop:first-child) {
   stop-color: var(--bs-primary-base-fixed);
 }
-:where(#bs-spinner-gradient stop:last-child) {
-  stop-color: var(--bs-negative-dark);
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop:last-child) {
+  stop-color: var(--bs-negative-base);
 }
 @keyframes bs-spin {
   0% {
@@ -7399,65 +7421,90 @@ a.bs-text-button {
   --bs-pop-header-padding: var(--bs-space-6);
   --bs-pop-body-padding: var(--bs-space-6);
   --bs-pop-footer-padding: var(--bs-space-6);
-  margin: 0;
+  --bs-popover-height: 100dvh;
+  --bs-popover-width: 100dvw;
   border-radius: 0;
+  margin: 0;
+  max-height: unset;
+  max-width: 100dvw;
+
+  /* -- SHADOWS -- */
+  &:where([data-place-self="left"]) {
+    box-shadow: var(--bs-shadow-drawerRight);
+  }
+
+  &:where([data-place-self="right"]) {
+    box-shadow: var(--bs-shadow-drawerLeft);
+  }
+
+  /* -- RESIZING -- */
+  &:where([data-resize]) {
+    /* using clip instead of hidden, to allow resizer hover target
+    to extend outside of the flyout bounds via overflow-clip-margin  */
+    overflow: clip;
+  }
+
+  /* right flyout */
+  &:where([data-resize="right"]) {
+    overflow-clip-margin: 5px;
+  }
+
+  /* left flyout - not using same as right flyout, to avoid overlapping potential scrollbar too much */
+  &:where([data-resize="left"]) {
+    overflow-clip-margin: 7px;
+  }
+
+  /*
+    Everything below is desktop-only. Sizing and resize values are gated to
+    widths above the mobile breakpoint, so at mobile widths the flyout falls
+    back to the full-screen defaults above with no JS cleanup needed. The
+    resizer writes its values to the --bs-flyout-resize-* custom properties.
+  */
+  @media (min-width: 752px) {
+    &:where([data-size="sm"]) {
+      --bs-popover-width: 22.5rem; /* 360px */
+    }
+
+    &:where([data-size="md"]) {
+      --bs-popover-width: 28.75rem; /* 460px */
+    }
+
+    &:where([data-size="lg"]) {
+      --bs-popover-width: 33.4375rem; /* 535px */
+    }
+
+    &:where([data-size="fit-content"]) {
+      --bs-popover-width: fit-content;
+    }
+
+    &:where([data-resize]) {
+      max-width: var(--bs-flyout-resize-max);
+      min-width: var(--bs-flyout-resize-min);
+      transform: translateX(var(--bs-flyout-resize-pushed, 0px));
+      width: var(--bs-flyout-resize-width, var(--bs-popover-width));
+    }
+  }
 }
 /* targeting header too, so consumer could just do: <BsPopHeader>My Title</BsPopHeader> */
 .bs-flyout :where(.bs-pop-header, .bs-pop-title) {
   font-size: var(--bs-text-lg);
 }
-/* -- SIZING -- */
-.bs-flyout {
-  --bs-popover-height: 100dvh;
-  max-height: unset;
-  max-width: 100dvw;
-}
-.bs-flyout:where([data-size="sm"]) {
-  --bs-popover-width: 22.5rem; /* 360px */
-}
-.bs-flyout:where([data-size="md"]) {
-  --bs-popover-width: 28.75rem; /* 460px */
-}
-.bs-flyout:where([data-size="lg"]) {
-  --bs-popover-width: 33.4375rem; /* 535px */
-}
-/* -- RESIZING -- */
-.bs-flyout:where([data-resize]) {
-  /* using clip instead of hidden, to allow resizer hover target
-  to extend outside of the flyout bounds via overflow-clip-margin  */
-  overflow: clip;
-  transform: translateX(var(--bs-flyout-resize-pushed, 0px));
-}
+/* -- RESIZER -- */
 .bs-flyout-resizer {
   cursor: col-resize;
   inset-block: 0;
   position: absolute;
-  width: 10px;
-  z-index: 1;
   /* prevents browser from trying to hijack touch interactions to handle on its own */
   touch-action: none;
-}
-/* right flyout */
-.bs-flyout:where([data-resize="right"]) {
-  overflow-clip-margin: 5px;
+  width: 10px;
+  z-index: 1;
 }
 .bs-flyout:where([data-resize="right"]) :where(.bs-flyout-resizer) {
   left: -5px;
 }
-/* left flyout - not using same as right flyout, to avoid overlapping potential scrollbar too much */
-.bs-flyout:where([data-resize="left"]) {
-  overflow-clip-margin: 7px;
-}
 .bs-flyout:where([data-resize="left"]) :where(.bs-flyout-resizer) {
   right: -7px;
 }
-/* -- SHADOWS -- */
-.bs-flyout:where([data-place-self="left"]) {
-  box-shadow: var(--bs-shadow-drawerRight);
-}
-.bs-flyout:where([data-place-self="right"]) {
-  box-shadow: var(--bs-shadow-drawerLeft);
-}
 /* -- TRANSITIONS -- */
 .bs-flyout-enter-active,
 .bs-flyout-leave-active {
@@ -7468,18 +7515,27 @@ a.bs-text-button {
 }
 .bs-flyout-enter-active .bs-flyout,
 .bs-flyout-leave-active .bs-flyout {
-  transition-property: transform;
   transition-duration: var(--bs-popover-transition-duration);
+  transition-property: transform;
   transition-timing-function: var(--bs-transition-cubic);
 }
 /* The 105% is so the huge shadow on the flyout ends-up off-screen too, otherwise at 100%, you notice it cut out when the panel closes */
 .bs-flyout-enter-from .bs-flyout[data-place-self="left"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="left"] {
-  transform: translate(calc(-105% + var(--bs-flyout-resize-pushed, 0px)));
+  transform: translate(-105%);
+
+  /* preserve any resize push offset while sliding in/out (desktop-only, matching the resize sizing above) */
+  @media (min-width: 752px) {
+    transform: translate(calc(-105% + var(--bs-flyout-resize-pushed, 0px)));
+  }
 }
 .bs-flyout-enter-from .bs-flyout[data-place-self="right"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="right"] {
-  transform: translate(calc(105% + var(--bs-flyout-resize-pushed, 0px)));
+  transform: translate(105%);
+
+  @media (min-width: 752px) {
+    transform: translate(calc(105% + var(--bs-flyout-resize-pushed, 0px)));
+  }
 }
 /*
   HEADS-UP:
@@ -8849,12 +8905,6 @@ a.bs-text-button {
 .bs-bg-ink-positive {
   background-color: var(--bs-ink-positive);
 }
-.bs-text-ink-ecomm-positive {
-  color: var(--bs-ink-ecomm-positive);
-}
-.bs-bg-ink-ecomm-positive {
-  background-color: var(--bs-ink-ecomm-positive);
-}
 .bs-text-ink-warning {
   color: var(--bs-ink-warning);
 }