@wwtdev/bsds-css 2.5.2 → 2.7.0

package/dist/components/_buttons.scss

@@ -1,22 +1,48 @@
 @mixin buttons() {
-  .bs-button {
-  --btn-main: var(--bs-blue-400);
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-highlight: var(--bs-blue-100);
-  --btn-padding: .25rem .75rem;
+  /*
+--btn-main:  (this is doing too much.. look into backwards-compatible way to break this up)
+    background color (base)
+    focus ring color
+
+background colors:
+--btn-secondary: background color (active, hover)
+--btn-light: background color (ghost hover, ghost focus)
+
+border / box-shadow:
+--btn-ghost-ink: the box shadow color for ghost buttons is synced to ink
+--btn-highlight: box shadow color (w/ --btn-main) (active)
+
+padding:
+--btn-padding: padding (changes by size, and on text btns)
+
+text color:
+--btn-ink: text color
+--btn-ghost-ink: text color (ghost)
+
+*/
+
+.bs-button {
   --btn-focus-pseudo-width: calc(100% + 0.5rem);
   --btn-ghost-ink: var(--bs-ink-blue);
+  --btn-highlight: var(--bs-blue-100);
   --btn-ink: var(--bs-white);
+  --btn-main: var(--bs-blue-400);
+  --btn-padding: .25rem .75rem;
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-text-size: var(--bs-text-md);
+  --btn-weight: 600;
+  --btn-height: 2.5rem;
   align-items: center;
   background-color: var(--btn-main);
   border: none;
   border-radius: 0.25rem;
   color: var(--btn-ink);
+  column-gap: var(--bs-space-2);
   cursor: pointer;
   display: inline-flex;
-  font-size: var(--btn-text-size, var(--bs-text-md));
-  font-weight: var(--btn-weight, 600);
-  height: var(--btn-height, 2.5rem);
+  font-size: var(--btn-text-size);
+  font-weight: var(--btn-weight);
+  height: var(--btn-height);
   justify-content: center;
   line-height: 1.5;
   outline: 2px solid transparent;
@@ -33,9 +59,9 @@
 
 .bs-button:active {
   background-color: var(--btn-secondary);
-  transform: scale(0.97);
-  transform-origin: center;
   box-shadow: inset 0px 0px 4px 1px var(--btn-main);
+  transform-origin: center;
+  transform: scale(0.97);
 }
 
 /* ------------ Focus Styles ------------ */
@@ -74,7 +100,7 @@
   --btn-light: var(--bs-blue-10);
   --btn-secondary: var(--bs-blue-10);
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--btn-main);
+  box-shadow: inset 0 0 0 1px var(--btn-ghost-ink);
 }
 .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
   border-radius: 0.4375rem;
@@ -91,46 +117,73 @@
 
 /* ------------ VARIANTS ------------ */
 .bs-button:where([data-variant^='secondary']) {
+  --btn-ghost-ink: var(--bs-ink-plum);
+  --btn-highlight: var(--bs-plum-100);
+  --btn-light: var(--bs-plum-10);
   --btn-main: var(--bs-plum-400);
   --btn-secondary: var(--bs-plum-medium);
-  --btn-light: var(--bs-plum-10);
-  --btn-highlight: var(--bs-plum-100);
-  --btn-ghost-ink: var(--bs-ink-plum);
 }
 .dark .bs-button:where([data-variant^='secondary']) {
+  --btn-highlight: var(--bs-plum-400);
+  --btn-light: var(--bs-navy-400);
   --btn-main: var(--bs-plum-200);
   --btn-secondary: var(--bs-plum-300);
-  --btn-light: var(--bs-navy-400);
-  --btn-highlight: var(--bs-plum-400);
 }
 .bs-button:where([data-variant^='positive']) {
+  --btn-ghost-ink: var(--bs-ink-purple);
+  --btn-highlight: var(--bs-purple-100);
+  --btn-light: var(--bs-purple-10);
   --btn-main: var(--bs-purple-400);
   --btn-secondary: var(--bs-purple-medium);
-  --btn-light: var(--bs-purple-10);
-  --btn-highlight: var(--bs-purple-100);
-  --btn-ghost-ink: var(--bs-ink-purple);
 }
 .bs-button:where([data-variant^='warning']) {
+  --btn-ghost-ink: var(--bs-ink-orange);
+  --btn-highlight: var(--bs-orange-100);
+  --btn-light: var(--bs-orange-10);
   --btn-main: var(--bs-orange-warning);
   --btn-secondary: var(--bs-orange-base);
-  --btn-light: var(--bs-orange-10);
-  --btn-highlight: var(--bs-orange-100);
-  --btn-ghost-ink: var(--bs-ink-orange);
 }
 .bs-button:where([data-variant^='negative']) {
+  --btn-ghost-ink: var(--bs-ink-red);
+  --btn-highlight: var(--bs-red-100);
+  --btn-light: var(--bs-red-10);
   --btn-main: var(--bs-red-400);
   --btn-secondary: var(--bs-red-medium);
-  --btn-light: var(--bs-red-10);
-  --btn-highlight: var(--bs-red-100);
-  --btn-ghost-ink: var(--bs-ink-red);
+}
+
+/* pink variant */
+.bs-button:where([data-variant^='pink']) {
+  --btn-ghost-ink: var(--bs-ink-pink);
+  --btn-highlight: var(--bs-pink-400);
+  --btn-light: var(--bs-pink-10);
+  --btn-main: var(--bs-pink-400);
+  --btn-secondary: var(--bs-pink-300);
+}
+
+/* royal blue variant */
+.bs-button:where([data-variant^='royal']) {
+  --btn-ghost-ink: var(--bs-ink-royal);
+  --btn-highlight: var(--bs-royal-400);
+  --btn-light: var(--bs-royal-10);
+  --btn-main: var(--bs-royal-400);
+  --btn-secondary: var(--bs-royal-300);
+}
+
+/* white variant - for dark backgrounds + ghost btn only */
+.bs-button:where([data-variant^='white'][data-ghost]:not([data-ghost="false"])) {
+  --btn-ghost-ink: var(--bs-ink-white);
+  --btn-highlight: var(--bs-ink-white);
+  --btn-light: var(--bs-white-10);
+  --btn-main: var(--bs-ink-white);
 }
 
 /* ------------ Text Button ------------ */
 .bs-button:where([data-text]:not([data-text="false"])) {
+  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-height: auto;
   --btn-ink: var(--bs-ink-blue);
   --btn-padding: 0;
-  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
+  --btn-secondary: transparent;
   --btn-text-size: var(--bs-text-md);
   --btn-weight: 400;
   background-color: transparent;
@@ -150,6 +203,11 @@
   transform: none;
 }
 
+.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
+.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])):hover {
+  --btn-ink: var(--bs-ink-red);
+}
+
 /* ------------ Button Sizes, Media-based Text Sizing -------------- */
 /* Std button: Mobile text size, DT text size */
 .bs-button {
@@ -205,7 +263,7 @@
 
 .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
 .bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
-  box-shadow: inset 0 0 0 1px var(--bs-gray-400);
+  --btn-ghost-ink: var(--bs-ink-disabled);
 }
 
 .bs-button:where([data-text]:not([data-text="false"])):disabled,

package/dist/components/_circle-buttons.scss

@@ -1,24 +1,49 @@
 @mixin circle-buttons() {
-  .bs-circle-button {
-  --btn-main: var(--bs-blue-base);
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-highlight: var(--bs-blue-lightest);
+  /*
+Properties : Defaults // Description
+====================================
+--btn-icon-bg-color: var(--btn-main); // icon bg color (base state)
+--btn-icon-padding: .75rem; // padding around icon svg
+--btn-icon-size: 1.5rem; // svg width and height
+--btn-icon-stroke-color: var(--bs-white);
+--btn-main: var(--bs-blue-base); // many things... should probably break this up
+--btn-text-color: var(--bs-ink-base);
+--btn-text-size: var(--bs-text-md);
+
+--btn-border-color: transparent;  //  focus state outline color - transparent base state, --btn-main base focus state
+--btn-border-color-focused: var(--btn-main); // focus state ring color set on variants
+--btn-secondary: var(--bs-blue-medium); // hover state icon bg
+--btn-shadow-color-active: var(--btn-main); // active state shadow color (icon bg)
+--btn-text-color-hovered: var(--bs-ink-base); // hover state text color
+*/
+
+:where(.bs-circle-button) {
+  --btn-border-color-focused: var(--btn-main);
   --btn-border-color: transparent;
-  --btn-border-radius: 50%;
+  --btn-focus-inset: -0.25rem;
+  --btn-gap: .5rem;
   --btn-icon-bg-color: var(--btn-main);
   --btn-icon-padding: .75rem;
   --btn-icon-size: 1.5rem;
   --btn-icon-stroke-color: var(--bs-white);
+  --btn-main: var(--bs-blue-base);
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-shadow-color-active: var(--btn-main);
+  --btn-text-color-hovered: var(--bs-ink-base);
   --btn-text-color: var(--bs-ink-base);
-  --btn-text-size: var(--bs-text-md);
+  --btn-text-size: 1.125rem;
+  --btn-text-weight: 400;
+}
+
+.bs-circle-button {
   align-items: center;
   background-color: transparent;
-  border-radius: var(--btn-border-radius);
   color: var(--btn-text-color);
   cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-text-size);
-  gap: .5rem;
+  font-weight: var(--btn-text-weight);
+  gap: var(--btn-gap);
   outline: none;
   position: relative;
   vertical-align: middle;
@@ -31,18 +56,6 @@ a.bs-circle-button {
   text-decoration: none;
 }
 
-.bs-circle-button :where(.bs-circle-button-icon)::before {
-  border-color: var(--btn-border-color);
-  border-radius: var(--btn-border-radius);
-  border-style: solid;
-  border-width: 0.125rem;
-  height: calc(100% + 0.5rem);
-  inset: -0.25rem;
-  position: absolute;
-  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
-  width: calc(100% + 0.5rem);
-}
-
 .bs-circle-button :where(.bs-circle-button-icon) {
   align-items: center;
   background-color: var(--btn-icon-bg-color);
@@ -57,6 +70,17 @@ a.bs-circle-button {
   transition: all 100ms ease-in-out;
 }
 
+.bs-circle-button :where(.bs-circle-button-icon)::before {
+  border-color: var(--btn-border-color);
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0.125rem;
+  content: '';
+  inset: var(--btn-focus-inset);
+  position: absolute;
+  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
+}
+
 .bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
   --icon-size: var(--btn-icon-size);
 }
@@ -76,27 +100,21 @@ a.bs-circle-button {
 
 /* Ghost Buttons */
 .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-blue-10);
   --btn-secondary: var(--bs-blue-10);
 }
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) :where(.bs-circle-button-icon) {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px transparent;
-  color: var(--btn-icon-stroke-color);
-}
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) :where(.bs-circle-button-icon)::before {
-  border-radius: 50%;
-}
 
 /* Active, Hover, Focus states */
 .bs-circle-button:active, .bs-circle-button:hover {
   --btn-icon-bg-color: var(--btn-secondary);
+  --btn-text-color: var(--btn-text-color-hovered);
 }
 .bs-circle-button:active :where(.bs-circle-button-icon) {
-  transform: scale(0.97);
+  box-shadow: inset 0px 0px 4px 1px var(--btn-shadow-color-active);
   transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
+  transform: scale(0.97);
 }
 
 .bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
@@ -108,22 +126,12 @@ a.bs-circle-button {
   transform: translateX(-.25rem);
 }
 
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover :where(.bs-circle-button-icon) {
-  background-color: var(--btn-light);
-}
-
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):active {
-  box-shadow:
-    inset 0 0 0 1px var(--btn-main),
-    inset 0px 0px 4px 1px var(--btn-highlight);
+.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover {
+  --btn-icon-bg-color: var(--btn-light);
 }
 
 .bs-circle-button:where(:focus-visible) {
-  --btn-border-color: var(--btn-main);
-}
-
-.bs-circle-button:where(:focus-visible) :where(.bs-circle-button-icon)::before {
-  content: '';
+  --btn-border-color: var(--btn-border-color-focused);
 }
 
 /* Disabled State */
@@ -132,28 +140,79 @@ a.bs-circle-button {
   --btn-text-color: var(--bs-ink-disabled);
   pointer-events: none;
 }
-.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
-  background-color: var(--bs-bg-disabled);
+.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
+  --btn-icon-bg-color: var(--bs-bg-disabled);
 }
 
-
 /* Button Size */
 .bs-circle-button:where([data-size^='sm']) {
   --btn-icon-padding: .375rem;
   --btn-icon-size: .75rem;
-  --btn-text-size: var(--bs-text-sm);
+  --btn-text-size: .875rem;
 }
 
 .bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
   --btn-icon-padding: .3125rem;
   --btn-icon-size: .625rem;
-  --btn-text-size: var(--bs-text-base);
+  --btn-text-size: 1rem;
 }
 
 .bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
   --btn-icon-padding: .25rem;
   --btn-icon-size: .5rem;
-  --btn-text-size: var(--bs-text-sm);
+  --btn-text-size: .875rem;
+}
+
+/* Color Variants */
+.bs-circle-button:where([data-variant^="color"]) {
+  --btn-focus-inset: .125rem;
+  --btn-gap: .5rem;
+  --btn-icon-bg-color: transparent;
+  --btn-icon-padding: 0;
+  --btn-icon-size: .75rem; /* stays the same for all sizes */
+  --btn-icon-stroke-color: var(--btn-text-color);
+  --btn-secondary: transparent;
+  --btn-shadow-color-active: transparent;
+}
+.bs-circle-button:where([data-variant="color-blue"]) {
+  --btn-border-color-focused: var(--bs-ink-blue);
+  --btn-text-color: var(--bs-ink-blue);
+  --btn-text-color-hovered: var(--bs-blue-base);
+}
+
+.bs-circle-button:where([data-variant="color-royal"]) {
+  --btn-border-color-focused: var(--bs-ink-royal);
+  --btn-text-color: var(--bs-ink-royal);
+  --btn-text-color-hovered: var(--bs-royal-medium);
+}
+
+.bs-circle-button:where([data-variant="color-purple"]) {
+  --btn-border-color-focused: var(--bs-purple-400);
+  --btn-text-color: var(--bs-ink-purple);
+  --btn-text-color-hovered: var(--bs-purple-medium);
+}
+
+.bs-circle-button:where([data-variant="color-pink"]) {
+  --btn-border-color-focused: var(--bs-pink-400);
+  --btn-text-color: var(--bs-ink-pink);
+  --btn-text-color-hovered: var(--bs-pink-base);
+}
+
+.bs-circle-button:where([data-variant="color-red"]) {
+  --btn-border-color-focused: var(--bs-ink-red);
+  --btn-text-color: var(--bs-ink-red);
+  --btn-text-color-hovered: var(--bs-red-base);
+}
+
+.bs-circle-button:where([data-variant^="color"]):where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
+  --btn-icon-bg-color: transparent;
+  --btn-text-color: var(--bs-ink-disabled);
+}
+
+/* size XXS only supported for color variants */
+.bs-circle-button:where([data-variant^="color"]):where([data-size='xxs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: .75rem;
+  --btn-text-weight: 600;
 }
 
   }

package/dist/components/_dropdown.scss

@@ -150,5 +150,18 @@
   }
 }
 
+/* Vue Transition Styles - Only used in Vue component */
+.bs-dropdown:where(.bs-dropdown-enter-from),
+.bs-dropdown:where(.bs-dropdown-leave-to) {
+  opacity: 0;
+  transform: var(--dropdown-transform);
+}
+
+.bs-dropdown:where(.bs-dropdown-enter-to),
+.bs-dropdown:where(.bs-dropdown-leave-from) {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
   }
   

package/dist/components/_filter-buttons.scss

@@ -11,25 +11,32 @@ custom properties:
 */
 
 button:where(.bs-filter-button) {
+  --filterbtn-caret-size: 1rem;
+  --filterbtn-caret-transform: rotate(0deg);
+  --filterbtn-color: var(--bs-ink-blue);
+  --filterbtn-focus-color: transparent;
+  --filterbtn-height: 1.5rem;
+  --filterbtn-text-size: var(--bs-text-base);
+  --filterbtn-weight: 400;
   flex-shrink: 0;
   position: relative;
 }
 
 .bs-filter-button {
   align-items: center;
-  color: var(--filterbtn-color, var(--bs-ink-blue));
+  color: var(--filterbtn-color);
   column-gap: 0.5rem;
   cursor: pointer;
   display: inline-flex;
-  font-size: var(--filterbtn-text-size, var(--bs-text-base));
-  font-weight: var(--filterbtn-weight, 400);
-  height: var(--filterbtn-height, 1.5rem);
+  font-size: var(--filterbtn-text-size);
+  font-weight: var(--filterbtn-weight);
+  height: var(--filterbtn-height);
   line-height: 1.5;
   transition: outline-color 100ms ease-in-out;
   width: max-content;
 }
 .bs-filter-button::after {
-  border: solid var(--filterbtn-focus-color, transparent) 2px;
+  border: solid var(--filterbtn-focus-color) 2px;
   border-radius: 0.25rem;
   content: '';
   display: block;
@@ -42,12 +49,12 @@ button:where(.bs-filter-button) {
 .bs-filter-button :where(.bs-icon),
 .bs-filter-button :where(span:has(svg:only-child)) {
   display: block;
-  height: var(--filterbtn-caret-size, 1rem);
+  height: var(--filterbtn-caret-size);
   line-height: 1;
-  transform: var(--filterbtn-caret-transform, rotate(0deg));
+  transform: var(--filterbtn-caret-transform);
   transform-origin: center;
   transition: var(--bs-trans-rotate180);
-  width: var(--filterbtn-caret-size, 1rem);
+  width: var(--filterbtn-caret-size);
 }
 
 .bs-filter-button:where([data-size="sm"],[data-size="xs"]) {

package/dist/components/_flyout.scss

@@ -0,0 +1,71 @@
+@mixin flyout() {
+  .bs-flyout {
+  background-color: var(--bs-bg-base-to-light);
+  box-shadow: var(--bs-shadow-drawerRight);
+  height: 100%;
+  left: 0;
+  margin: 0;
+  max-width: 100vw;
+  opacity: 0;
+  padding: 1.5rem;
+  position: fixed;
+  top: 0;
+  transform: translateX(-100%);
+  transition-duration: 300ms;
+  transition-property: opacity, transform;
+  transition-timing-function: ease;
+  width: 360px;
+  z-index: 1000;
+}
+
+.bs-flyout:where([data-absolute="true"]) {
+  position: absolute;
+}
+
+.bs-flyout:where([data-position="right"]) {
+  box-shadow: var(--bs-shadow-drawerLeft);
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
+}
+
+.bs-flyout:where([data-size="lg"]) {
+  width: 535px;
+}
+
+.bs-flyout:where([data-shown="true"]) {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bs-flyout :where(.bs-flyout-close-container) {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bs-flyout :where(.bs-flyout-close-container button) {
+  cursor: pointer;
+  outline-offset: 2px;
+  padding: 2px;
+}
+
+/* Vue Transition Styles - Only used in Vue component */
+.bs-flyout:where(.bs-flyout-enter-from),
+.bs-flyout:where(.bs-flyout-leave-to) {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.bs-flyout:where([data-position="right"].bs-flyout-enter-from),
+.bs-flyout:where([data-position="right"].bs-flyout-leave-to) {
+  transform: translateX(100%);
+}
+
+.bs-flyout:where(.bs-flyout-enter-to),
+.bs-flyout:where(.bs-flyout-leave-from) {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+  }
+  

package/dist/components/_form-input-composite.scss

@@ -173,7 +173,9 @@ and issues with box-sizing
 }
 
 /* -------- Hover styles -------- */
-.bs-input-addon:hover {
+.bs-input-addon:hover,
+:where(label):hover + .bs-input-addon,
+:where(label):hover + * .bs-input-addon:where(:not(label .bs-input-addon, label + .bs-input-addon)) {
   --input-bg: var(--bs-bg-input-hover);
 }
 

package/dist/components/_form-labels.scss

@@ -2,6 +2,7 @@
   :where(label, legend),
 label:where(.bs-label) {
   display: inline-block;
+  position: relative;
   width: 100%;
 }
 
@@ -29,5 +30,11 @@ label:where(.bs-label) {
   --label-color: var(--bs-ink-disabled);
 }
 
+.bs-label:where(:has(+ input), :has(+ .bs-input-addon), :has(+ :not(label) .bs-input-addon))::after {
+  content: '';
+  inset: 0 0 -.25rem 0;
+  position: absolute;
+}
+
   }
   

package/dist/components/_modal.scss

@@ -56,5 +56,16 @@
   }
 }
 
+/* Vue Transition Styles - Only used in Vue component */
+.bs-modal:where(.bs-modal-enter-from),
+.bs-modal:where(.bs-modal-leave-to) {
+  opacity: 0;
+}
+
+.bs-modal:where(.bs-modal-enter-to),
+.bs-modal:where(.bs-modal-leave-from) {
+  opacity: 1;
+}
+
   }
   

package/dist/components/_overlay.scss

@@ -19,5 +19,16 @@
   opacity: 1;
 }
 
+/* Vue Transition Styles - Only used in Vue component */
+.bs-overlay:where(.bs-overlay-enter-from),
+.bs-overlay:where(.bs-overlay-leave-to) {
+  opacity: 0;
+}
+
+.bs-overlay:where(.bs-overlay-enter-to),
+.bs-overlay:where(.bs-overlay-leave-from) {
+  opacity: 1;
+}
+
   }
   

package/dist/components/_toast.scss

@@ -1,6 +1,8 @@
 @mixin toast() {
   /* Base Toast Styles */
 .bs-toast {
+    --toast-transform: translate(0, calc(100% + 1.5rem));
+
     background-color: var(--bs-bg-base-elevated);
     border-top: 4px solid var(--bs-blue-base);
     bottom: 1.5rem;
@@ -11,7 +13,7 @@
     opacity: 0;
     position: fixed;
     right: 0;
-    transform: translate(0, calc(100% + 1.5rem));
+    transform: var(--toast-transform);
     transition-duration: 200ms;
     transition-property: transform, opacity;
     transition-timing-function: ease;
@@ -111,12 +113,13 @@
 
 @media (min-width: 440px) {
     .bs-toast {
+        --toast-transform: translate(calc(100% + 1.5rem), 0);
+
         left: auto;
         margin-left: 0;
         margin-right: 0;
         opacity: 0;
         right: 1.5rem;
-        transform: translate(calc(100% + 1.5rem), 0);
     }
 
     .bs-toast:where([data-shown]:not([data-shown="false"])) {
@@ -129,5 +132,18 @@
     }
 }
 
+/* Vue Transition Styles - Only used in Vue component */
+.bs-toast:where(.bs-toast-enter-from),
+.bs-toast:where(.bs-toast-leave-to) {
+    opacity: 0;
+    transform: var(--toast-transform);
+}
+
+.bs-toast:where(.bs-toast-enter-to),
+.bs-toast:where(.bs-toast-leave-from) {
+    opacity: 1;
+    transform: translate(0, 0);
+}
+
   }