@wwtdev/bsds-css 2.6.0 → 2.7.1

package/dist/wwt-bsds.css

@@ -285,8 +285,8 @@ button {
   --bs-bg-light-to-base: var(--bs-gray-50);
   --bs-bg-medium: var(--bs-gray-100);
   --bs-bg-medium-to-light: var(--bs-gray-100);
-  --bs-bg-invert-base: var(--bs-navy-500);
-  --bs-bg-invert-medium: var(--bs-navy-400);
+  --bs-bg-invert-to-base: var(--bs-navy-500);
+  --bs-bg-invert-to-medium: var(--bs-navy-400);
   --bs-bg-disabled: var(--bs-gray-200);
 
   --bs-hyperlink: var(--bs-purple-400);
@@ -296,7 +296,7 @@ button {
   --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* --bs-gray-400 at .6 */
   --bs-ink-light: var(--bs-gray-400);
   --bs-ink-invert-base: var(--bs-gray-100);
-  --bs-ink-invert-medium: var(--bs-gray-200);
+  --bs-ink-invert-to-medium: var(--bs-gray-200);
   --bs-ink-invert-light: var(--bs-gray-300);
   --bs-ink-medium: var(--bs-gray-500);
 
@@ -364,6 +364,7 @@ button {
   --bs-content-max-width: 72rem;
 
   /* Type */
+  --bs-font-light: 300;
   --bs-font-normal: 400;
   --bs-font-bold: 600;
 
@@ -389,8 +390,8 @@ button {
   --bs-bg-light-to-base: var(--bs-navy-600);
   --bs-bg-medium: var(--bs-navy-400);
   --bs-bg-medium-to-light: var(--bs-navy-500);
-  --bs-bg-invert-base: var(--bs-gray-100);
-  --bs-bg-invert-medium: var(--bs-gray-50);
+  --bs-bg-invert-to-base: var(--bs-gray-100);
+  --bs-bg-invert-to-medium: var(--bs-gray-50);
   --bs-bg-disabled: var(--bs-gray-500);
 
   --bs-hyperlink: var(--bs-purple-200);
@@ -609,6 +610,10 @@ h6,
 [data-weight^='400'] {
   font-weight: 400;
 }
+[data-weight^='light'],
+[data-weight^='300'] {
+  font-weight: 300;
+}
 [data-weight^='bold'],
 [data-weight^='600'] {
   font-weight: 600;
@@ -865,6 +870,439 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 *:where([data-scroll="false"]) {
   overflow: hidden;
 }
+/* Color Utilities */
+.bs-bg-base {
+  background-color: var(--bs-bg-base);
+}
+.bs-bg-base-to-light {
+  background-color: var(--bs-bg-base-to-light);
+}
+.bs-bg-base-to-medium {
+  background-color: var(--bs-bg-base-to-medium);
+}
+.bs-bg-light {
+  background-color: var(--bs-bg-light);
+}
+.bs-bg-light-to-base {
+  background-color: var(--bs-bg-light-to-base);
+}
+.bs-bg-medium {
+  background-color: var(--bs-bg-medium);
+}
+.bs-bg-medium-to-light {
+  background-color: var(--bs-bg-medium-to-light);
+}
+.bs-bg-disabled {
+  background-color: var(--bs-bg-disabled);
+}
+.bs-bg-invert-to-medium {
+  background-color: var(--bs-bg-invert-to-medium);
+}
+.bs-bg-invert-to-base {
+  background-color: var(--bs-bg-invert-to-base);
+}
+.bs-border-light {
+  border-color: var(--bs-border-light);
+}
+.bs-border-medium {
+  border-color: var(--bs-border-medium);
+}
+.bs-border-base {
+  border-color: var(--bs-border-base);
+}
+.bs-border-dark {
+  border-color: var(--bs-border-dark);
+}
+.bs-text-ink-light {
+  color: var(--bs-ink-light);
+}
+.bs-bg-ink-light {
+  background-color: var(--bs-ink-light);
+}
+.bs-text-ink-disabled {
+  color: var(--bs-ink-disabled);
+}
+.bs-bg-ink-disabled {
+  background-color: var(--bs-ink-disabled);
+}
+.bs-text-ink-medium {
+  color: var(--bs-ink-medium);
+}
+.bs-bg-ink-medium {
+  background-color: var(--bs-ink-medium);
+}
+.bs-text-ink-base {
+  color: var(--bs-ink-base);
+}
+.bs-bg-ink-base {
+  background-color: var(--bs-ink-base);
+}
+.bs-text-ink-invert-base {
+  color: var(--bs-ink-invert-base);
+}
+.bs-bg-ink-invert-base {
+  background-color: var(--bs-ink-invert-base);
+}
+.bs-text-ink-invert-medium {
+  color: var(--bs-ink-invert-medium);
+}
+.bs-bg-ink-invert-medium {
+  background-color: var(--bs-ink-invert-medium);
+}
+.bs-text-ink-invert-light {
+  color: var(--bs-ink-invert-light);
+}
+.bs-bg-ink-invert-light {
+  background-color: var(--bs-ink-invert-light);
+}
+.bs-text-ink-accent {
+  color: var(--bs-ink-accent);
+}
+.bs-bg-ink-accent {
+  background-color: var(--bs-ink-accent);
+}
+.bs-text-ink-blue {
+  color: var(--bs-ink-blue);
+}
+.bs-bg-ink-blue {
+  background-color: var(--bs-ink-blue);
+}
+.bs-text-ink-red {
+  color: var(--bs-ink-red);
+}
+.bs-bg-ink-red {
+  background-color: var(--bs-ink-red);
+}
+.bs-text-ink-pink {
+  color: var(--bs-ink-pink);
+}
+.bs-bg-ink-pink {
+  background-color: var(--bs-ink-pink);
+}
+.bs-text-ink-orange {
+  color: var(--bs-ink-orange);
+}
+.bs-bg-ink-orange {
+  background-color: var(--bs-ink-orange);
+}
+.bs-text-ink-purple {
+  color: var(--bs-ink-purple);
+}
+.bs-bg-ink-purple {
+  background-color: var(--bs-ink-purple);
+}
+.bs-text-ink-royal {
+  color: var(--bs-ink-royal);
+}
+.bs-bg-ink-royal {
+  background-color: var(--bs-ink-royal);
+}
+.bs-text-ink-plum {
+  color: var(--bs-ink-plum);
+}
+.bs-bg-ink-plum {
+  background-color: var(--bs-ink-plum);
+}
+.bs-text-ink-violet {
+  color: var(--bs-ink-violet);
+}
+.bs-bg-ink-violet {
+  background-color: var(--bs-ink-violet);
+}
+.bs-text-ink-white {
+  color: var(--bs-ink-white);
+}
+.bs-bg-ink-white {
+  background-color: var(--bs-ink-white);
+}
+.bs-text-red-lightest {
+  color: var(--bs-red-lightest);
+}
+.bs-bg-red-lightest {
+  background-color: var(--bs-red-lightest);
+}
+.bs-text-red-light {
+  color: var(--bs-red-light);
+}
+.bs-bg-red-light {
+  background-color: var(--bs-red-light);
+}
+.bs-text-red-medium {
+  color: var(--bs-red-medium);
+}
+.bs-bg-red-medium {
+  background-color: var(--bs-red-medium);
+}
+.bs-text-red-base {
+  color: var(--bs-red-base);
+}
+.bs-bg-red-base {
+  background-color: var(--bs-red-base);
+}
+.bs-text-purple-lightest {
+  color: var(--bs-purple-lightest);
+}
+.bs-bg-purple-lightest {
+  background-color: var(--bs-purple-lightest);
+}
+.bs-text-purple-light {
+  color: var(--bs-purple-light);
+}
+.bs-bg-purple-light {
+  background-color: var(--bs-purple-light);
+}
+.bs-text-purple-medium {
+  color: var(--bs-purple-medium);
+}
+.bs-bg-purple-medium {
+  background-color: var(--bs-purple-medium);
+}
+.bs-text-purple-base {
+  color: var(--bs-purple-base);
+}
+.bs-bg-purple-base {
+  background-color: var(--bs-purple-base);
+}
+.bs-text-blue-lightest {
+  color: var(--bs-blue-lightest);
+}
+.bs-bg-blue-lightest {
+  background-color: var(--bs-blue-lightest);
+}
+.bs-text-blue-light {
+  color: var(--bs-blue-light);
+}
+.bs-bg-blue-light {
+  background-color: var(--bs-blue-light);
+}
+.bs-text-blue-medium {
+  color: var(--bs-blue-medium);
+}
+.bs-bg-blue-medium {
+  background-color: var(--bs-blue-medium);
+}
+.bs-text-blue-base {
+  color: var(--bs-blue-base);
+}
+.bs-bg-blue-base {
+  background-color: var(--bs-blue-base);
+}
+.bs-text-red-lightest {
+  color: var(--bs-red-lightest);
+}
+.bs-bg-red-lightest {
+  background-color: var(--bs-red-lightest);
+}
+.bs-text-red-light {
+  color: var(--bs-red-light);
+}
+.bs-bg-red-light {
+  background-color: var(--bs-red-light);
+}
+.bs-text-red-medium {
+  color: var(--bs-red-medium);
+}
+.bs-bg-red-medium {
+  background-color: var(--bs-red-medium);
+}
+.bs-text-red-base {
+  color: var(--bs-red-base);
+}
+.bs-bg-red-base {
+  background-color: var(--bs-red-base);
+}
+.bs-text-plum-lightest {
+  color: var(--bs-plum-lightest);
+}
+.bs-bg-plum-lightest {
+  background-color: var(--bs-plum-lightest);
+}
+.bs-text-plum-light {
+  color: var(--bs-plum-light);
+}
+.bs-bg-plum-light {
+  background-color: var(--bs-plum-light);
+}
+.bs-text-plum-medium {
+  color: var(--bs-plum-medium);
+}
+.bs-bg-plum-medium {
+  background-color: var(--bs-plum-medium);
+}
+.bs-text-plum-base {
+  color: var(--bs-plum-base);
+}
+.bs-bg-plum-base {
+  background-color: var(--bs-plum-base);
+}
+.bs-text-white {
+  color: var(--bs-white);
+}
+.bs-bg-white {
+  background-color: var(--bs-white);
+}
+.bs-text-royal-lightest {
+  color: var(--bs-royal-lightest);
+}
+.bs-bg-royal-lightest {
+  background-color: var(--bs-royal-lightest);
+}
+.bs-text-royal-light {
+  color: var(--bs-royal-light);
+}
+.bs-bg-royal-light {
+  background-color: var(--bs-royal-light);
+}
+.bs-text-royal-medium {
+  color: var(--bs-royal-medium);
+}
+.bs-bg-royal-medium {
+  background-color: var(--bs-royal-medium);
+}
+.bs-text-royal-base {
+  color: var(--bs-royal-base);
+}
+.bs-bg-royal-base {
+  background-color: var(--bs-royal-base);
+}
+.bs-text-violet-lightest {
+  color: var(--bs-violet-lightest);
+}
+.bs-bg-violet-lightest {
+  background-color: var(--bs-violet-lightest);
+}
+.bs-text-violet-light {
+  color: var(--bs-violet-light);
+}
+.bs-bg-violet-light {
+  background-color: var(--bs-violet-light);
+}
+.bs-text-violet-medium {
+  color: var(--bs-violet-medium);
+}
+.bs-bg-violet-medium {
+  background-color: var(--bs-violet-medium);
+}
+.bs-text-violet-base {
+  color: var(--bs-violet-base);
+}
+.bs-bg-violet-base {
+  background-color: var(--bs-violet-base);
+}
+.bs-text-navy-lightest {
+  color: var(--bs-navy-lightest);
+}
+.bs-bg-navy-lightest {
+  background-color: var(--bs-navy-lightest);
+}
+.bs-text-navy-light {
+  color: var(--bs-navy-light);
+}
+.bs-bg-navy-light {
+  background-color: var(--bs-navy-light);
+}
+.bs-text-navy-medium {
+  color: var(--bs-navy-medium);
+}
+.bs-bg-navy-medium {
+  background-color: var(--bs-navy-medium);
+}
+.bs-text-navy-base {
+  color: var(--bs-navy-base);
+}
+.bs-bg-navy-base {
+  background-color: var(--bs-navy-base);
+}
+.bs-text-orange-lightest {
+  color: var(--bs-orange-lightest);
+}
+.bs-bg-orange-lightest {
+  background-color: var(--bs-orange-lightest);
+}
+.bs-text-orange-light {
+  color: var(--bs-orange-light);
+}
+.bs-bg-orange-light {
+  background-color: var(--bs-orange-light);
+}
+.bs-text-orange-medium {
+  color: var(--bs-orange-medium);
+}
+.bs-bg-orange-medium {
+  background-color: var(--bs-orange-medium);
+}
+.bs-text-orange-base {
+  color: var(--bs-orange-base);
+}
+.bs-bg-orange-base {
+  background-color: var(--bs-orange-base);
+}
+.bs-text-pink-lightest {
+  color: var(--bs-pink-lightest);
+}
+.bs-bg-pink-lightest {
+  background-color: var(--bs-pink-lightest);
+}
+.bs-text-pink-light {
+  color: var(--bs-pink-light);
+}
+.bs-bg-pink-light {
+  background-color: var(--bs-pink-light);
+}
+.bs-text-pink-medium {
+  color: var(--bs-pink-medium);
+}
+.bs-bg-pink-medium {
+  background-color: var(--bs-pink-medium);
+}
+.bs-text-pink-base {
+  color: var(--bs-pink-base);
+}
+.bs-bg-pink-base {
+  background-color: var(--bs-pink-base);
+}
+.bs-text-gray-lightest {
+  color: var(--bs-gray-lightest);
+}
+.bs-bg-gray-lightest {
+  background-color: var(--bs-gray-lightest);
+}
+.bs-text-gray-light {
+  color: var(--bs-gray-light);
+}
+.bs-bg-gray-light {
+  background-color: var(--bs-gray-light);
+}
+.bs-text-gray-medium {
+  color: var(--bs-gray-medium);
+}
+.bs-bg-gray-medium {
+  background-color: var(--bs-gray-medium);
+}
+.bs-text-gray-base {
+  color: var(--bs-gray-base);
+}
+.bs-bg-gray-base {
+  background-color: var(--bs-gray-base);
+}
+.bs-text-gray-dark {
+  color: var(--bs-gray-dark);
+}
+.bs-bg-gray-dark {
+  background-color: var(--bs-gray-dark);
+}
+.bs-text-black {
+  color: var(--bs-black);
+}
+.bs-bg-black {
+  background-color: var(--bs-black);
+}
+.bs-text-warning {
+  color: var(--bs-warning);
+}
+.bs-bg-warning {
+  background-color: var(--bs-warning);
+}
 /* Component Styles */
 .bs-accordion {
   --accordion-link-color: var(--bs-purple-400);
@@ -1077,6 +1515,158 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
     display: inline-flex;
   }
 }
+.bs-chart {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.bs-chart :where(figure) {
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+  display: grid;
+  font-size: .875rem;
+  grid-template-areas: var(--chart-gridareas, "chart" "legend");
+  grid-template-columns: var(--chart-gridcols, 100%);
+  grid-template-rows: var(--chart-gridrows, minmax(0px, auto) minmax(0px, min-content));
+  height: 100%;
+  margin-block: unset;
+  margin-inline: unset;
+  position: relative;
+  width: 100%;
+}
+.bs-chart :where(figure > :first-child) {
+  grid-area: chart;
+}
+.bs-chart :where(figure > :last-child) {
+  grid-area: legend;
+}
+.bs-chart :where(figure > div) {
+  min-width: 100%;
+  width: 100%;
+}
+.bs-chart :where(canvas) {
+  width: 100%;
+}
+/* --------- Legend Styles --------- */
+.bs-chart :where(figcaption) {
+  background-color: var(--legend-bg-color, transparent);
+  border-radius: .5rem;
+  border: 1px solid var(--legend-border-color, transparent);
+  -webkit-clip-path: var(--legend-clip-path, none);
+          clip-path: var(--legend-clip-path, none);
+  max-height: var(--legend-max-height, 100%);
+  overflow-y: var(--legend-overflow-y, hidden);
+}
+.bs-chart :where(figcaption[data-hidden="true"]) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.bs-chart :where(ul) {
+  align-items: var(--legend-flexalign, center);
+  display: flex;
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+  flex-direction: var(--legend-flexdir, row);
+  flex-wrap: var(--legend-flexwrap, wrap);
+  padding-block: var(--legend-padding-block, .25rem);
+  /* cjs-legend-padding is set dynamically by chart.js for bar charts */
+  padding-inline: var(--legend-padding-inline, var(--cjs-legend-padding-inline, 2.5rem));
+  row-gap: .75rem;
+}
+.bs-chart :where(li, li:focus, li:active, li:focus-visible) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  outline: 0;
+  position: relative;
+  width: var(--legend-item-width, auto);
+}
+.bs-chart :where(li)::after {
+  border: solid var(--focus-color, transparent) 2px;
+  border-radius: 0.25rem;
+  content: '';
+  display: block;
+  inset: -.25rem;
+  position: absolute;
+}
+.bs-chart :where(li:focus-visible) {
+  --focus-color: var(--bs-blue-base);
+}
+.bs-chart :where(li span) {
+  background: var(--legend-item-box-fill);
+  border-color: var(--legend-item-box-stroke);
+  border-radius: var(--legend-item-swatch-radius, 3px);
+  display: inline-block;
+  height: var(--bs-text-f-md);
+  margin-right: 10px;
+  width: var(--bs-text-f-md);
+}
+.bs-chart :where(li p) {
+  color: var(--legend-item-text-color);
+  font-size: var(--bs-text-f-md);
+  margin: 0;
+  padding: 0;
+  -webkit-text-decoration: var(--legend-item-text-decoration);
+          text-decoration: var(--legend-item-text-decoration);
+}
+/* --------- Chart Layout Variants --------- */
+/*
+For now, per design team instructions, these are NOT responsive as we're only to expose these
+variants for a very specific, single use-case that involves horizontal scroll...
+If we want to make these responsive in the future, can wrap in media query.
+*/
+.bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
+  --chart-gridrows: minmax(0px, auto);
+  --legend-bg-color: var(--bs-bg-base);
+  --legend-border-color: var(--bs-gray-light);
+  --legend-clip-path: border-box;
+  --legend-flexalign: start;
+  --legend-flexdir: column;
+  --legend-flexwrap: nowrap;
+  --legend-item-width: 100%;
+  --legend-max-height: 17.1875rem;
+  --legend-overflow-y: auto;
+  --legend-padding-block: .75rem;
+  --legend-padding-inline: .75rem;
+}
+.bs-chart:where([data-layout="chart-left"]) {
+  --chart-gridareas: "chart legend";
+  --chart-gridcols: auto minmax(150px, auto);
+}
+.bs-chart:where([data-layout="chart-right"]) {
+  --chart-gridareas: "legend chart";
+  --chart-gridcols: minmax(150px, auto) auto;
+}
+.bs-chart-table {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+/*
+uncomment to make visible when testing
+.bs-chart-table {
+  clip: none;
+  overflow: auto;
+  height: auto;
+  position: relative;
+  width: auto;
+}
+
+*/
 /* Parent */
 .bs-dropdown-parent {
   display: inline-block;
@@ -1210,6 +1800,17 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
     display: none;
   }
 }
+/* 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);
+}
 /* Option list */
 .bs-dropdown-options {
   display: flex;
@@ -1431,7 +2032,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 }
 :where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible),
 :where(.box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-invert-base);
+  --offset-color: var(--bs-bg-invert-to-base);
 }
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]:not([data-error="false"])),
@@ -1732,7 +2333,9 @@ and issues with box-sizing
   width: 1rem;
 }
 /* -------- 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);
 }
 /* -------- Focus styles -------- */
@@ -2206,7 +2809,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 }
 :where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
 :where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-invert-base);
+  --offset-color: var(--bs-bg-invert-to-base);
 }
 /* Disabled state */
 .bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
@@ -2236,6 +2839,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 :where(label, legend),
 label:where(.bs-label) {
   display: inline-block;
+  position: relative;
   width: 100%;
 }
 .bs-label,
@@ -2259,6 +2863,11 @@ label:where(.bs-label) {
   --label-asterisk-color: transparent;
   --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;
+}
 /*
 --btn-main:  (this is doing too much.. look into backwards-compatible way to break this up)
     background color (base)
@@ -2662,9 +3271,9 @@ a.bs-circle-button {
 /* Color Variants */
 .bs-circle-button:where([data-variant^="color"]) {
   --btn-focus-inset: .125rem;
-  --btn-gap: 0;
+  --btn-gap: .5rem;
   --btn-icon-bg-color: transparent;
-  --btn-icon-padding: .5rem;
+  --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;
@@ -2804,6 +3413,64 @@ button:where(.bs-filter-button) {
   --badge-bg: var(--bs-bg-disabled);
   --badge-text: var(--bs-ink-disabled);
 }
+.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);
+}
 .bs-modal {
   background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
@@ -2854,6 +3521,15 @@ button:where(.bs-filter-button) {
     width: 35rem;
   }
 }
+/* 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;
+}
 .bs-overlay {
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
@@ -2872,6 +3548,15 @@ button:where(.bs-filter-button) {
 .bs-overlay:where([data-shown]:not([data-shown="false"])) {
   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;
+}
 .bs-pagination {
   background-color: var(--bs-bg-base);
   color: var(--bs-ink-base);
@@ -3097,7 +3782,7 @@ button:where(.bs-filter-button) {
   --pill-background: var(--bs-bg-base);
 }
 :where(.box[data-invert]) .bs-pill {
-  --pill-background: var(--bs-bg-invert-base-subtle);
+  --pill-background: var(--bs-bg-invert-to-base-subtle);
   --pill-text: var(--bs-gray-100);
 }
 :where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
@@ -3705,6 +4390,8 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* 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;
@@ -3715,7 +4402,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     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;
@@ -3798,12 +4485,13 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 @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"])) {
@@ -3815,6 +4503,17 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
         flex-direction: row;
     }
 }
+/* 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);
+}
 /* Container for holding all toasts that will be visible */
 .bs-toaster {
     /* Mobile - Center the toasts on the screen */