@wwtdev/bsds-css 3.2.2 → 3.4.0-rc.0

package/dist/wwt-bsds-components.css

@@ -848,10 +848,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 {
@@ -1073,15 +1073,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);
@@ -1129,7 +1127,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);
@@ -1167,7 +1165,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"])) {
@@ -1199,7 +1197,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) {
@@ -1225,6 +1223,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) {
@@ -1265,6 +1264,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) {
@@ -1447,7 +1447,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);
@@ -1994,8 +1994,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 {
@@ -3318,6 +3318,12 @@ data-autosize-icons="true" - see above
   grid-template-columns: auto 1fr auto auto;
   align-items: center;
   cursor: pointer;
+
+  &:where([data-show-pill-group="true"]) {
+    --input-height: auto;
+    --input-padding-block: var(--bs-space-2);
+    min-height: var(--bs-space-10);
+  }
 }
 /* -- Multiselect Count -- */
 .bs-input-button-count {
@@ -3831,7 +3837,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  */
@@ -4015,8 +4021,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;
@@ -4188,6 +4195,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);
@@ -4359,14 +4383,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% {
@@ -5942,65 +5966,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 {
@@ -6011,18 +6060,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: