@wwtdev/bsds-css 3.0.0-rc.46 → 3.0.0-rc.47

package/dist/wwt-bsds-components.css

@@ -765,129 +765,131 @@ Custom properties:
 }
 /* Base Toast Styles */
 .bs-toast-deprecated {
-  --toast-transform: translate(0, calc(100% + 1.5rem));
+    --toast-transform: translate(0, calc(100% + 1.5rem));
 
-  background-color: var(--bs-bg-base-to-light);
-  border-top: 4px solid var(--bs-primary-base);
-  bottom: 1.5rem;
-  box-shadow: var(--bs-shadow-contentMedium);
-  left: 0;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-  opacity: 0;
-  position: fixed;
-  right: 0;
-  transform: var(--toast-transform);
-  transition-duration: var(--bs-transition-medium);
-  transition-property: transform, opacity;
-  transition-timing-function: var(--bs-transition-ease);
-  /* Clamp width for mobile -> full screen */
-  width: clamp(17rem, calc(100vw - 3rem), 25rem);
-  z-index: 999;
+    background-color: var(--bs-bg-base-elevated);
+    border-top: 4px solid var(--bs-primary-base);
+    bottom: 1.5rem;
+    box-shadow: var(--bs-shadow-contentMedium);
+    left: 0;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    transform: var(--toast-transform);
+    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-deprecated:where([data-stacked]:not([data-stacked="false"])) {
-  bottom: auto;
-  left: auto;
-  position: static;
-  right: auto;
-  z-index: auto;
+    bottom: auto;
+    left: auto;
+    position: static;
+    right: auto;
+    z-index: auto;
 }
 /* Mobile - Toast comes up from bottom */
 .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
-  opacity: 1;
-  transform: translate(0, 0);
+    opacity: 1;
+    transform: translate(0, 0);
 }
 .bs-toast-header-deprecated {
-  align-items: center;
-  color: var(--bs-ink-base);
-  display: flex;
-  gap: 0.5rem;
-  padding: 1rem;
+    align-items: center;
+    color: var(--bs-ink-base);
+    display: flex;
+    gap: 0.5rem;
+    padding: 1rem;
 }
-.bs-toast-header-deprecated :where(.bs-toast-header-icon-deprecated) {
-  color: var(--bs-primary-base);
+.bs-toast-header-deprecated :where(.bs-toast-header-deprecated-icon) {
+    color: var(--bs-primary-base);
 }
-.bs-toast-header-deprecated :where(h5) {
-  font-weight: 400;
+.bs-toast-header-deprecated :where(.bs-toast-header-deprecated-text) {
+    font-size: var(--bs-text-md);
+    font-weight: var(--bs-font-normal);
+    line-height: var(--bs-leading-lg);
 }
 .bs-toast-body-deprecated {
-  border-bottom: 1px solid var(--bs-border-base);
-  color: var(--bs-ink-light);
-  padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+    border-bottom: 1px solid var(--bs-border-base);
+    color: var(--bs-ink-light);
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
 }
 .bs-toast-actions-deprecated {
-  /* Mobile - Buttons will be stacked */
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
+    /* Mobile - Buttons will be stacked */
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: flex-end;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
 }
 .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
-  flex-direction: column-reverse;
+    flex-direction: column-reverse;
 }
 /* Warning Toast Styles */
 .bs-toast-deprecated:where([data-variant^='warning']) {
-  border-top: 4px solid var(--bs-warning-base);
+    border-top: 4px solid var(--bs-warning-base);
 }
-.bs-toast-deprecated:where([data-variant^='warning']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-ink-warning);
+.bs-toast-deprecated:where([data-variant^='warning']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
+    color: var(--bs-ink-warning);
 }
 /* Positive Toast Styles */
 .bs-toast-deprecated:where([data-variant^='positive']) {
-  border-top: 4px solid var(--bs-positive-base);
+    border-top: 4px solid var(--bs-positive-base);
 }
-.bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-ink-positive);
+.bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
+    color: var(--bs-ink-positive);
 }
 :where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) {
-  border-top: 4px solid var(--bs-positive-light);
+    border-top: 4px solid var(--bs-positive-light);
 }
-:where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-positive-light);
+:where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
+    color: var(--bs-positive-light);
 }
 /* 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-dark);
 }
-.bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-negative-dark);
+.bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
+    color: var(--bs-negative-dark);
 }
 @media (min-width: 440px) {
-  .bs-toast-deprecated {
-      --toast-transform: translate(calc(100% + 1.5rem), 0);
+    .bs-toast-deprecated {
+        --toast-transform: translate(calc(100% + 1.5rem), 0);
 
-      left: auto;
-      margin-left: 0;
-      margin-right: 0;
-      opacity: 0;
-      right: 1.5rem;
-  }
+        left: auto;
+        margin-left: 0;
+        margin-right: 0;
+        opacity: 0;
+        right: 1.5rem;
+    }
 
-  .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
-      opacity: 1;
-      transform: translate(0, 0);
-  }
+    .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
 
-  .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
-      flex-direction: row;
-  }
+    .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
+        flex-direction: row;
+    }
 }
 /* Vue Transition Styles - Only used in Vue component */
-.bs-toast-deprecated:where(.bs-toast-enter-from),
-.bs-toast-deprecated:where(.bs-toast-leave-to) {
-  opacity: 0;
-  transform: var(--toast-transform);
+.bs-toast-deprecated:where(.bs-toast-deprecated-enter-from),
+.bs-toast-deprecated:where(.bs-toast-deprecated-leave-to) {
+    opacity: 0;
+    transform: var(--toast-transform);
 }
-.bs-toast-deprecated:where(.bs-toast-enter-to),
-.bs-toast-deprecated:where(.bs-toast-leave-from) {
-  opacity: 1;
-  transform: translate(0, 0);
+.bs-toast-deprecated:where(.bs-toast-deprecated-enter-to),
+.bs-toast-deprecated:where(.bs-toast-deprecated-leave-from) {
+    opacity: 1;
+    transform: translate(0, 0);
 }
 /* Container for holding all toasts that will be visible */
 .bs-toaster-deprecated {
@@ -5541,8 +5543,13 @@ a.bs-text-button {
   transition: margin-inline-start 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 /*
-  POP SYSTEM COMPONENTS
-  Components that are built on top of BsPopover. The popover.css must come first.
+  POP SYSTEM COMPONENTS (the order matters)
+  - Components that are built on top of BsPopover
+  - The popover.css must come first
+  - In the future, could refactor this file to use @layer instead
+*/
+/*
+  HEADS-UP: BsPopover and its styles are the base for all popover-based components and their styles
 */
 #bs-popover-teleport-target {
   z-index: var(--bs-popover-z-index);
@@ -5564,31 +5571,22 @@ a.bs-text-button {
   position: absolute;
   top: 0;
   left: 0;
+  display: flex;
+  flex-direction: column;
   width: var(--bs-popover-width, -moz-fit-content);
   width: var(--bs-popover-width, fit-content);
   height: var(--bs-popover-height, -moz-fit-content);
   height: var(--bs-popover-height, fit-content);
   max-width: calc(100dvw - 3rem);
   max-height: calc(100dvh - 3rem);
-  padding: var(--bs-space-6);
   background-color: var(--bs-bg-base-to-light);
   border-radius: var(--bs-space-1);
   box-shadow: var(--bs-shadow-contentLowCenter);
   pointer-events: auto;  /* due to `pointer-events: none` on bs-popover-wrap */
+  overflow: hidden;
 }
-.bs-popover-close-button {
-  background-color: inherit;
-  background: transparent;
-  border-color: transparent;
-  color: inherit;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--bs-text-base);
-  padding: var(--bs-space-2); /* to make a bit nicer hit target */
-  position: absolute;
-  right: var(--bs-space-2);
-  text-decoration: none;
-  top: var(--bs-space-2);
+.bs-popover:where(:not(:has(.bs-pop-header, .bs-pop-body, .bs-pop-footer))) {
+  padding: var(--bs-space-6);
 }
 /* -- SIZING -- */
 .bs-popover:where([data-size="sm"]) {
@@ -5679,95 +5677,105 @@ a.bs-text-button {
   transform: scale(.95);
 }
 /*
-  HEADS-UP:
-  Most BsFlyout base styles come from its BsPopover root element,
-  so some of these styles are there to override those defaults.
+  Used in BsPopover, but exists as its own thing in case
+  consumers need/want to use it for custom layout cases.
 */
-.bs-flyout {
-  --bs-flyout-padding: var(--bs-space-6);
-  --bs-flyout-padding-top: 2.75rem;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  border-radius: 0;
+.bs-pop-x-button {
+  background-color: inherit;
+  background: transparent;
+  border-color: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--bs-text-base);
+  padding: var(--bs-space-3); /* to make a bit nicer hit target */
+  position: absolute;
+  right: var(--bs-pop-x-btn-right, var(--bs-space-1));
+  text-decoration: none;
+  top: var(--bs-pop-x-btn-top, var(--bs-space-1));
 }
-/* -- CLOSE BUTTON -- */
-/* calc() adjusts for default .5rem padding .bs-popover-close-button has, which exists for a nicer hit target */
-.bs-flyout :where(.bs-popover-close-button) {
-  top: calc(var(--bs-flyout-padding) - .5rem);
-  right: calc(var(--bs-flyout-padding) - .5rem);
+.bs-popover:where(:has(.bs-pop-header)) {
+  --bs-pop-x-btn-right: var(--bs-space-4);
+  --bs-pop-x-btn-top: var(--bs-space-4);
 }
-/* -- HEADER -- */
-.bs-flyout-header {
+.bs-pop-header {
+  color: var(--bs-ink-base);
+  font-size: var(--bs-text-md);
   flex-shrink: 0;
-  padding: var(--bs-flyout-padding-top) var(--bs-flyout-padding) var(--bs-flyout-padding);
-}
-/* with border */
-.bs-flyout-header:where([data-border="true"]) {
-  border-bottom: 1px solid var(--bs-border-base);
-}
-.bs-flyout-title {
-  display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-  margin: 0 var(--bs-space-6) 0 0;
-  font-size: var(--bs-text-lg);
-  font-weight: normal;
+  padding: var(--bs-pop-header-padding, var(--bs-space-6));
   line-height: var(--bs-leading-regular);
 }
-.bs-flyout-subtitle {
+.bs-pop-header:where(:not(:has(.bs-pop-title, .bs-pop-subtitle))) {
   display: flex;
   align-items: center;
   gap: var(--bs-space-2);
-  margin: var(--bs-space-2) 0 0 0;
-  font-size: var(--bs-text-sm);
-  font-weight: normal;
-  line-height: var(--bs-leading-lg);
 }
-.bs-flyout-header:where([data-border="true"]) {
+.bs-pop-header:where([data-border="true"]) {
   border-bottom: 1px solid var(--bs-border-base);
 }
-/* -- BODY -- */
-.bs-flyout-body {
+.bs-pop-body {
   flex: 1;
-  padding: 0 var(--bs-flyout-padding);
   overflow-y: auto;
   overscroll-behavior: contain;
+  padding: var(--bs-pop-body-padding, var(--bs-space-6));
 }
-/* no header exists */
-.bs-flyout:where(:not(:has(.bs-flyout-header))) :where(.bs-flyout-body) {
-  padding-top: var(--bs-flyout-padding-top);
+.bs-pop-body:where([data-background="true"]) {
+  background-color: var(--bs-bg-light);
 }
-/* no footer exists */
-.bs-flyout:where(:not(:has(.bs-flyout-footer))) :where(.bs-flyout-body) {
-  padding-bottom: var(--bs-flyout-padding);
+.bs-pop-header:where(:not([data-border="true"])) + :where(.bs-pop-body:not([data-background="true"])) {
+  padding-top: 0;
 }
-/* header border exists */
-.bs-flyout:where(:has(.bs-flyout-header[data-border="true"])) :where(.bs-flyout-body) {
-  padding-top: var(--bs-flyout-padding);
+.bs-pop-footer {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--bs-space-6);
+  justify-content: flex-end;
+  padding: var(--bs-pop-footer-padding, var(--bs-space-4) var(--bs-space-6));
 }
-/* footer border exists */
-.bs-flyout:where(:has(.bs-flyout-footer[data-border="true"])) :where(.bs-flyout-body) {
-  padding-bottom: var(--bs-flyout-padding);
+.bs-pop-footer:where([data-border="true"]) {
+  border-top: 1px solid var(--bs-border-base);
 }
-/* -- FOOTER -- */
-.bs-flyout-footer {
+.bs-pop-title {
+  align-items: center;
   display: flex;
-  justify-content: flex-end;
+  font-size: var(--bs-text-md);
+  font-weight: normal;
+  gap: var(--bs-space-2);
+  line-height: var(--bs-leading-regular);
+  margin: 0 var(--bs-space-12) 0 0;
+}
+.bs-pop-subtitle {
   align-items: center;
-  gap: var(--bs-space-6);
-  flex-shrink: 0;
-  padding: var(--bs-space-6);
+  color: var(--bs-ink-light);
+  display: flex;
+  font-size: var(--bs-text-sm);
+  font-weight: normal;
+  gap: var(--bs-space-2);
+  line-height: var(--bs-leading-lg);
+  margin: var(--bs-space-2) 0 0 0;
 }
-/* with border */
-.bs-flyout-footer:where([data-border="true"]) {
-  border-top: 1px solid var(--bs-border-base);
+/*
+  HEADS-UP:
+  Most BsFlyout base styles come from its BsPopover root element,
+  so some of these styles are there to override those defaults.
+*/
+.bs-flyout {
+  --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;
+  border-radius: 0;
+}
+/* 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 */
@@ -5821,142 +5829,50 @@ a.bs-text-button {
   ...so some of these styles override those defaults.
 */
 .bs-modal {
-  --bs-modal-sm-width: 21.25rem; /* 340px */
-  --bs-modal-md-width: 35rem; /* 560px */
-  --bs-modal-lg-width: 45.3125rem; /* 725px */
-  --bs-modal-padding: 1.5rem; /* 24px */
-  --bs-modal-lg-padding: 2rem; /* 32px */
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
+  --bs-pop-header-padding: var(--bs-modal-padding);
+  --bs-pop-body-padding: var(--bs-modal-padding);
+  --bs-pop-footer-padding: var(--bs-space-4) var(--bs-modal-padding);
+  --bs-modal-padding: var(--bs-space-6);
+  --bs-modal-lg-padding: var(--bs-space-8);
   background-color: var(--bs-bg-base-to-medium);
   box-shadow: var(--bs-shadow-contentHigh);
-  overflow: hidden;
-}
-/* -- CLOSE BUTTON -- */
-/* calc() adjusts for default .5rem padding .bs-popover-close-button has, which exists for a nicer hit target */
-.bs-modal :where(.bs-popover-close-button) {
-  top: calc(var(--bs-modal-padding) - .5rem);
-  right: calc(var(--bs-modal-padding) - .5rem);
-}
-.bs-modal:where([data-size="lg"]) :where(.bs-popover-close-button) {
-  top: calc(var(--bs-modal-lg-padding) - .5rem);
-  right: calc(var(--bs-modal-lg-padding) - .5rem);
-}
-/* -- HEADER -- */
-.bs-modal-header {
-  flex-shrink: 0;
-  padding: var(--bs-modal-padding);
-}
-/* with border */
-.bs-modal-header:where([data-border="true"]) {
-  border-bottom: 1px solid var(--bs-border-base);
-}
-/* large size, no border */
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-header) {
-  padding: var(--bs-modal-lg-padding);
-}
-/* large size, with border */
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-header[data-border="true"]) {
-  padding: var(--bs-modal-lg-padding);
-  padding-bottom: var(--bs-modal-padding);
+  margin: 0;
 }
-.bs-modal-title {
-  display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-  margin: 0 var(--bs-space-6) 0 0;
+/* targeting header too, so consumer could just do: <BsPopHeader>My Title</BsPopHeader> */
+.bs-modal :where(.bs-pop-header, .bs-pop-title) {
   font-size: var(--bs-text-lg);
-  font-weight: normal;
-  line-height: var(--bs-leading-regular);
-}
-.bs-modal-subtitle {
-  display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-  margin: var(--bs-space-2) 0 0 0;
-  font-size: var(--bs-text-sm);
-  font-weight: normal;
-  line-height: var(--bs-leading-lg);
-}
-/* -- BODY -- */
-.bs-modal-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 var(--bs-modal-padding);
-  overscroll-behavior: contain;
-}
-/* large size */
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-body) {
-  padding: 0 var(--bs-modal-lg-padding);
-}
-/* no header exists */
-.bs-modal:where(:not(:has(.bs-modal-header))) :where(.bs-modal-body) {
-  padding-top: var(--bs-modal-padding);
-}
-/* large size, no header exists */
-.bs-modal:where([data-size="lg"]):where(:not(:has(.bs-modal-header))) :where(.bs-modal-body) {
-  padding-top: var(--bs-modal-lg-padding);
-}
-/* no footer exists */
-.bs-modal:where(:not(:has(.bs-modal-footer))) :where(.bs-modal-body) {
-  padding-bottom: var(--bs-modal-padding);
-}
-/* large size, no footer exists */
-.bs-modal:where([data-size="lg"]):where(:not(:has(.bs-modal-footer))) :where(.bs-modal-body) {
-  padding-bottom: var(--bs-modal-lg-padding);
-}
-/* header border exists */
-.bs-modal:where(:has(.bs-modal-header[data-border="true"])) :where(.bs-modal-body) {
-  padding-top: var(--bs-modal-padding);
-}
-/* footer border exists */
-.bs-modal:where(:has(.bs-modal-footer[data-border="true"])) :where(.bs-modal-body) {
-  padding-bottom: var(--bs-modal-padding);
-}
-/* -- FOOTER -- */
-.bs-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: var(--bs-space-6);
-  flex-shrink: 0;
-  padding: var(--bs-space-6) var(--bs-modal-padding);
-}
-/* with border */
-.bs-modal-footer:where([data-border="true"]) {
-  border-top: 1px solid var(--bs-border-base);
-  padding: var(--bs-space-4) var(--bs-modal-padding);
 }
-/* large size, no border */
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
-  padding: var(--bs-modal-lg-padding);
+.bs-modal:where([data-size="lg"]) {
+  --bs-pop-x-btn-right: var(--bs-space-6);
+  --bs-pop-header-padding: var(--bs-modal-lg-padding) var(--bs-modal-lg-padding) var(--bs-modal-padding);
+  --bs-pop-body-padding: var(--bs-modal-padding) var(--bs-modal-lg-padding);
+  --bs-pop-footer-padding: var(--bs-space-4) var(--bs-modal-lg-padding);
 }
-/* large size, with border */
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer[data-border="true"]) {
-  padding: var(--bs-space-4) var(--bs-modal-lg-padding);
+.bs-modal:where([data-size="lg"]:has(.bs-pop-header)) {
+  --bs-pop-x-btn-right: var(--bs-space-6);
+  --bs-pop-x-btn-top: var(--bs-space-6);
 }
 /* -- SIZING -- */
 .bs-modal {
-  max-width: calc(100dvw - 3rem);
+  --bs-popover-width: calc(100dvw - 3rem);
   max-height: calc(100dvh - 3rem);
 }
 @media (min-width: 752px) {
   .bs-modal {
+    --bs-popover-width: fit-content;
     max-height: min(calc(100dvh - 3rem), 40.625rem);
   }
 
   .bs-modal:where([data-size="sm"]) {
-    --bs-popover-width: var(--bs-modal-sm-width);
+    --bs-popover-width: 21.25rem; /* 340px */
   }
 
   .bs-modal:where([data-size="md"]) {
-    --bs-popover-width: var(--bs-modal-md-width);
+    --bs-popover-width: 35rem; /* 560px */
   }
 
   .bs-modal:where([data-size="lg"]) {
-    --bs-popover-width: var(--bs-modal-lg-width);
+    --bs-popover-width: 45.3125rem; /* 725px */
   }
 }
 /* -- TRANSITIONS -- */
@@ -6010,84 +5926,76 @@ a.bs-text-button {
 }
 /* Toast */
 .bs-toast {
+  --bs-pop-header-padding: var(--bs-space-4);
+  --bs-pop-body-padding: var(--bs-space-4);
+  --bs-pop-footer-padding: var(--bs-space-2) var(--bs-space-4);
   --bs-popover-width: min(23rem, calc(100dvw - 3rem));
   --toast-transform: translate(0, calc(100% + 1.5rem));
   --toast-variant-color: var(--bs-primary-base);
+  --toast-icon: var(--toast-icon-base);
+  --toast-icon-color: var(--bs-ink-primary);
+  --toast-icon-base: url('https://cdn.apps.wwt.com/static/wwt-blue-steel-icons/icon-circle-info.svg');
+  --toast-icon-warning: url('https://cdn.apps.wwt.com/static/wwt-blue-steel-icons/icon-warning.svg');
+  --toast-icon-positive: url('https://cdn.apps.wwt.com/static/wwt-blue-steel-icons/icon-thumbs-up-stroke.svg');
   background-color: var(--bs-bg-base-to-light);
   border-radius: 0;
   border-top: 4px solid var(--toast-variant-color);
   box-shadow: var(--bs-shadow-contentMedium);
   margin: 0;
   order: var(--toast-order, 0);
-  padding: 0;
+}
+/* Toast Footer Mobile - Buttons will be stacked */
+.bs-toast :where(.bs-pop-footer) {
+  align-items: stretch;
+  flex-direction: column-reverse;
+  gap: var(--bs-space-2);
 }
 @media (min-width: 440px) {
   .bs-toast {
     --toast-transform: translate(calc(100% + 1.5rem), 0);
   }
+
+  .bs-toast :where(.bs-pop-footer) {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--bs-space-6);
+  }
 }
+/* Toast Variants */
 .bs-toast:where([data-variant="warning"]) {
+  --toast-icon: var(--toast-icon-warning);
+  --toast-icon-color: var(--bs-ink-warning);
   --toast-variant-color: var(--bs-warning-base);
-
-  .bs-toast-header-icon {
-    color: var(--bs-ink-warning);
-  }
 }
 .bs-toast:where([data-variant="positive"]) {
+  --toast-icon: var(--toast-icon-positive);
+  --toast-icon-color: var(--bs-ink-positive);
   --toast-variant-color: var(--bs-positive-base);
-
-  .bs-toast-header-icon {
-    color: var(--bs-ink-positive);
-  }
 }
-.bs-toast:where([data-variant="negative"]) {
-  --toast-variant-color: var(--bs-negative-base);
-
-  .bs-toast-header-icon {
-    color: var(--bs-ink-negative);
-  }
+.dark :where(.bs-toast[data-variant="positive"]) {
+  --toast-icon-color: var(--bs-positive-light);
+  --toast-variant-color: var(--bs-positive-light);
 }
-/* Toast Header */
-.bs-toast :where(.bs-toast-header) {
-  align-items: center;
-  color: var(--bs-ink-base);
-  display: flex;
-  gap: 0.5rem;
-  padding: 1rem;
-}
-.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
-  color: var(--bs-ink-primary);
+.bs-toast:where([data-variant="negative"]) {
+  --toast-icon: var(--toast-icon-warning);
+  --toast-icon-color: var(--bs-negative-dark);
+  --toast-variant-color: var(--bs-negative-dark);
 }
-.bs-toast :where(.bs-toast-header .bs-toast-header-text) {
-  font-size: var(--bs-text-md);
-  font-weight: var(--bs-font-normal);
-  line-height: var(--bs-leading-lg);
+/* Toast Header - auto-add the icon */
+.bs-toast :where(.bs-pop-header:not(:has(.bs-pop-title, .bs-pop-subtitle)))::before,
+.bs-toast :where(.bs-pop-header .bs-pop-title)::before {
+  display: block;
+  content: '';
+  background-color: var(--toast-icon-color);
+  -webkit-mask: var(--toast-icon) center/contain no-repeat;
+  mask: var(--toast-icon) center/contain no-repeat;
+  flex-shrink: 0;
+  height: var(--bs-space-4);
+  width: var(--bs-space-4);
 }
 /* Toast Body */
-.bs-toast :where(.bs-toast-body) {
-  border-bottom: 1px solid var(--bs-border-base);
+.bs-toast :where(.bs-pop-body) {
   color: var(--bs-ink-light);
-  padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.bs-toast :where(:not(:has(.bs-toast-header)) .bs-toast-body) {
-  padding-top: 1rem;
-}
-/* Toast Footer */
-.bs-toast :where(.bs-toast-footer) {
-  /* Mobile - Buttons will be stacked */
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-}
-.bs-toast :where(.bs-toast-footer):where([data-stacked]:not([data-stacked="false"])) {
-  flex-direction: column-reverse;
 }
 /* Vue Transition Styles */
 .bs-toast-enter-active,