@wwtdev/bsds-css 2.29.0 → 3.0.0-rc.21

package/dist/wwt-bsds.css

@@ -1,6 +1,7 @@
-/* Global Styles */
-/* VARIABLES GENERATED WITH TAILWIND CONFIG.
-    Tokens location: ./tailwind.config.js */
+/* Tokens */
+/* VARIABLES GENERATED USING TAILWIND CONFIG */
+/* DO NOT EDIT THIS FILE DIRECTLY */
+/* Config location: packages/css-framework/src/wwt-bsds-preset.js */
 :root {
   --bs-transparent: transparent;
   --bs-inherit: inherit;
@@ -67,6 +68,8 @@
   --bs-slate-400: #22222e;
   --bs-slate-500: #17171f;
   --bs-slate-600: #0b0b10;
+  --bs-shadow-primary: rgba(0, 0, 0, 0.06);
+  --bs-shadow-secondary: rgba(28, 0, 135, 0.2);
   --bs-gradient-dark: linear-gradient(
     90deg,
     #1c0087 0%,
@@ -91,104 +94,362 @@
     #1c0087 50%,
     #0086ea 100%
   );
-  --bs-space-0: 0px;
-  --bs-space-1: 0.25rem;
-  --bs-space-2: 0.5rem;
-  --bs-space-3: 0.75rem;
-  --bs-space-4: 1rem;
-  --bs-space-5: 1.25rem;
-  --bs-space-6: 1.5rem;
-  --bs-space-7: 1.75rem;
-  --bs-space-8: 2rem;
-  --bs-space-9: 2.25rem;
-  --bs-space-10: 2.5rem;
-  --bs-space-11: 2.75rem;
-  --bs-space-12: 3rem;
-  --bs-space-14: 3.5rem;
-  --bs-space-16: 4rem;
-  --bs-space-20: 5rem;
-  --bs-space-24: 6rem;
-  --bs-space-28: 7rem;
-  --bs-space-32: 8rem;
-  --bs-space-36: 9rem;
-  --bs-space-40: 10rem;
-  --bs-space-44: 11rem;
-  --bs-space-48: 12rem;
-  --bs-space-52: 13rem;
-  --bs-space-56: 14rem;
-  --bs-space-60: 15rem;
-  --bs-space-64: 16rem;
-  --bs-space-72: 18rem;
-  --bs-space-80: 20rem;
-  --bs-space-96: 24rem;
-  --bs-space-px: 1px;
-  --bs-space-0-half: 0.125rem;
-  --bs-space-1-half: 0.375rem;
-  --bs-space-2-half: 0.625rem;
-  --bs-space-3-half: 0.875rem;
-  --bs-space-f-1: clamp(0.25rem, calc(0.13rem + 0.5vw), 0.5rem);
-  --bs-space-f-2: clamp(0.5rem, calc(0.38rem + 0.5vw), 0.75rem);
-  --bs-space-f-3: clamp(0.75rem, calc(0.63rem + 0.5vw), 1rem);
-  --bs-space-f-4: clamp(1rem, calc(0.75rem + 1vw), 1.5rem);
-  --bs-space-f-6: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
-  --bs-space-f-8: clamp(2rem, calc(1.5rem + 2vw), 3rem);
-  --bs-space-f-12: clamp(4rem, calc(3rem + 4vw), 6rem);
-  --bs-space-f-16: clamp(4rem, calc(3rem + 4vw), 6rem);
-  --bs-space-f-24: clamp(6rem, calc(5rem + 4vw), 8rem);
-  --bs-space-f-4to8: clamp(1rem, calc(0.5rem + 2vw), 2rem);
-  --bs-space-f-6to12: clamp(1.5rem, calc(0.75rem + 3vw), 3rem);
-  --bs-space-f-12to24: clamp(3rem, calc(1.5rem + 6vw), 6rem);
+  --bs-gradient-atom-ai-border: conic-gradient(
+    from 180deg at 50% 50%,
+    var(--bs-royal-400) -96.8deg,
+    var(--bs-pink-400) 74.2deg,
+    var(--bs-blue-400) 98.8deg,
+    var(--bs-orange-400) 259.6deg,
+    var(--bs-royal-400) 283.2deg,
+    var(--bs-pink-400) 414.4deg
+  );
+  --bs-gradient-atom-ai-bg: conic-gradient(
+    from 180deg at 50% 50%,
+    rgba(22, 47, 180, 0.05) -96.8deg,
+    rgba(227, 28, 121, 0.05) 74.2deg,
+    rgba(0, 134, 234, 0.05) 98.8deg,
+    rgba(251, 85, 14, 0.05) 259.6deg,
+    rgba(22, 47, 180, 0.05) 283.2deg,
+    rgba(227, 28, 121, 0.05) 414.4deg
+  );
+  --bs-gradient-blue-top-left: radial-gradient(
+    312.54% 141.42% at 0% 0%,
+    #162fb4 0%,
+    #1d1e48 100%
+  );
+  --bs-gradient-blue-top-center: radial-gradient(
+    201.14% 201.14% at 50% -51.28%,
+    #162fb4 26.06%,
+    #1d1e48 100%
+  );
+  --bs-gradient-blue-top-right: radial-gradient(
+    312.54% 141.42% at 100% 0%,
+    #162fb4 0%,
+    #1d1e48 100%
+  );
+  --bs-gradient-blue-mid-left: radial-gradient(
+    347.1% 117.22% at -9.27% 49.86%,
+    #162fb4 8.19%,
+    #1d1e48 100%
+  );
+  --bs-gradient-blue-center: radial-gradient(
+    172.57% 58.28% at 50% 49.86%,
+    #162fb4 0%,
+    #1d1e48 100%
+  );
+  --bs-gradient-light-blue-transparent: radial-gradient(
+    236% 114.71% at 94.24% 7.6%,
+    rgba(153, 207, 247, 0.2) 0%,
+    rgba(203, 192, 218, 0.08) 100%
+  );
+  --bs-gradient-light-blue-opaque: linear-gradient(
+    311deg,
+    #ebf7ff 9.29%,
+    #fbfafc 92%
+  );
+  --bs-gradient-light-gray: linear-gradient(
+    180deg,
+    #f7f7fc 24.82%,
+    #f0f0fa 100%
+  );
+  --bs-space-0: var(--bs-space-none);
+  --bs-space-1: var(--bs-space-3xs);
+  --bs-space-2: var(--bs-space-2xs);
+  --bs-space-3: var(--bs-space-xs);
+  --bs-space-4: var(--bs-space-sm);
+  --bs-space-6: var(--bs-space-md);
+  --bs-space-8: var(--bs-space-lg);
+  --bs-space-12: var(--bs-space-xl);
+  --bs-space-16: var(--bs-space-2xl);
+  --bs-space-24: var(--bs-space-3xl);
+  --bs-space-32: var(--bs-space-4xl);
+  --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-text-xs: 0.75rem;
   --bs-text-sm: 0.875rem;
   --bs-text-base: 1rem;
   --bs-text-md: 1.125rem;
   --bs-text-lg: 1.25rem;
   --bs-text-xl: 1.5rem;
-  --bs-text-2xl: 2rem;
-  --bs-text-3xl: 2.25rem;
-  --bs-text-4xl: 3rem;
-  --bs-text-f-xs: clamp(0.69rem, calc(0.84rem + -0.19vw), 0.79rem);
-  --bs-text-f-sm: clamp(0.83rem, calc(0.92rem + -0.11vw), 0.89rem);
-  --bs-text-f-base: clamp(1rem, calc(1rem + 0vw), 1rem);
-  --bs-text-f-md: clamp(1rem, calc(0.94rem + 0.25vw), 1.125rem);
-  --bs-text-f-lg: clamp(1.125rem, calc(1.06rem + 0.25vw), 1.25rem);
-  --bs-text-f-xl: clamp(1.25rem, calc(1.13rem + 0.5vw), 1.5rem);
-  --bs-text-f-2xl: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
-  --bs-text-f-3xl: clamp(2rem, calc(1.88rem + 0.5vw), 2.25rem);
-  --bs-text-f-4xl: clamp(2.25rem, calc(1.88rem + 1.5vw), 3rem);
-  --bs-leading-3: 0.75rem;
-  --bs-leading-4: 1rem;
-  --bs-leading-5: 1.25rem;
-  --bs-leading-6: 1.5rem;
-  --bs-leading-7: 1.75rem;
-  --bs-leading-8: 2rem;
-  --bs-leading-9: 2.25rem;
-  --bs-leading-10: 2.5rem;
+  --bs-text-2xl: 1.75rem;
+  --bs-text-3xl: 2rem;
+  --bs-text-4xl: 2.25rem;
+  --bs-text-5xl: 2.625rem;
+  --bs-text-6xl: 3rem;
+  --bs-font-light: 300;
+  --bs-font-normal: 400;
+  --bs-font-semibold: 600;
   --bs-leading-none: 1;
-  --bs-leading-tight: 1.25;
-  --bs-leading-snug: 1.375;
-  --bs-leading-normal: 1.5;
-  --bs-leading-relaxed: 1.625;
-  --bs-leading-loose: 2;
-  --bs-leading-sm: 115%;
-  --bs-leading-base: 150%;
-  --bs-leading-regular: 1.33;
-  --bs-shadow: -4px 4px 12px rgba(0, 0, 0, 0.06),
-    -8px 8px 16px rgba(28, 0, 135, 0.2);
-  --bs-shadow-contentLow: -4px 4px 12px rgba(0, 0, 0, 0.06),
-    -8px 8px 16px rgba(28, 0, 135, 0.2);
-  --bs-shadow-contentLowCenter: 0px 0px 12px rgba(0, 0, 0, 0.06),
-    0px 0px 16px rgba(28, 0, 135, 0.2);
-  --bs-shadow-contentMedium: -8px 8px 24px rgba(0, 0, 0, 0.06),
-    -16px 16px 32px rgba(28, 0, 135, 0.2);
-  --bs-shadow-contentHigh: 0px 16px 48px rgba(0, 0, 0, 0.06),
-    0px 32px 64px rgba(28, 0, 135, 0.2);
-  --bs-shadow-drawerLeft: -12px 12px 24px rgba(0, 0, 0, 0.06),
-    -16px 16px 32px rgba(28, 0, 135, 0.2);
-  --bs-shadow-drawerRight: -12px 12px 24px rgba(0, 0, 0, 0.06),
-    16px 16px 32px rgba(28, 0, 135, 0.2);
-  --bs-shadow-profilePhoto: inset 0px 0px 0.5em rgba(28, 0, 135, 0.25);
+  --bs-leading-sm: 1.1;
+  --bs-leading-regular: 1.3;
+  --bs-leading-lg: 1.5;
+  --bs-shadow-contentLow: -4px 4px 12px var(--bs-shadow-primary),
+    -8px 8px 16px var(--bs-shadow-secondary);
+  --bs-shadow-contentLowCenter: 0px 0px 12px var(--bs-shadow-primary),
+    0px 0px 16px var(--bs-shadow-secondary);
+  --bs-shadow-contentMedium: -8px 8px 24px var(--bs-shadow-primary),
+    -16px 16px 32px var(--bs-shadow-secondary);
+  --bs-shadow-contentHigh: 0px 16px 48px var(--bs-shadow-primary),
+    0px 32px 64px var(--bs-shadow-secondary);
+  --bs-shadow-drawerLeft: -12px 12px 24px var(--bs-shadow-primary),
+    -16px 16px 32px var(--bs-shadow-secondary);
+  --bs-shadow-drawerRight: -12px 12px 24px var(--bs-shadow-primary),
+    16px 16px 32px var(--bs-shadow-secondary);
+  --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
+}
+/* Overrides/additions to the generated tokens */
+:root {
+  /* Transitions */
+  --bs-transition-quick: 75ms;
+  --bs-transition-fast: 100ms;
+  --bs-transition-moderate: 150ms;
+  --bs-transition-medium: 200ms;
+  --bs-transition-slow: 250ms;
+  --bs-transition-leisurely: 300ms;
+  --bs-transition-long: 500ms;
+  --bs-transition-ease: ease-in-out;
+  --bs-transition-cubic: cubic-bezier(.15, .4, .49, 1);
+
+  /* Navigation */
+  --bs-horizontal-nav-height: 48px;
+  --bs-vertical-nav-narrow-width: 4.5rem;
+  --bs-vertical-nav-width: 9.875rem;
+
+  /* Table */
+  --bs-table-cell-padding-xs: var(--bs-space-2);
+  --bs-table-cell-padding-sm: var(--bs-space-3);
+  --bs-table-cell-padding-md: var(--bs-space-4);
+  --bs-table-cell-padding-lg: var(--bs-space-6);
+  --bs-table-cell-padding-xl: var(--bs-space-8);
+
+  /* Popover */
+  --bs-popover-z-index: 1000;
+}
+/* Themes */
+:root {
+  /* Ink */
+  --bs-ink-base: var(--bs-black);
+  --bs-ink-medium: var(--bs-gray-500);
+  --bs-ink-light: var(--bs-gray-400);
+  --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* --bs-gray-400 at .6 */
+  --bs-ink-invert-base: var(--bs-gray-100);
+  --bs-ink-invert-light: var(--bs-gray-300);
+  --bs-ink-invert-medium: var(--bs-gray-200);
+  --bs-ink-blue: var(--bs-blue-500);
+  --bs-ink-red: var(--bs-red-500);
+  --bs-ink-pink: var(--bs-pink-500);
+  --bs-ink-orange: var(--bs-orange-500);
+  --bs-ink-purple: var(--bs-purple-400);
+  --bs-ink-royal: var(--bs-royal-400);
+  --bs-ink-plum: var(--bs-plum-400);
+  --bs-ink-violet: var(--bs-violet-400);
+  --bs-ink-white: var(--bs-white);
+
+  /* Background */
+  --bs-bg-base: var(--bs-white);
+  --bs-bg-light: var(--bs-gray-50);
+  --bs-bg-medium: var(--bs-gray-100);
+  --bs-bg-disabled: var(--bs-gray-200);
+  --bs-bg-invert-base: var(--bs-slate-600);
+  --bs-bg-invert-light: var(--bs-slate-500);
+  --bs-bg-invert-medium: var(--bs-slate-400);
+  --bs-bg-base-to-light: var(--bs-white);
+  --bs-bg-base-to-medium: var(--bs-white);
+  --bs-bg-medium-to-base: var(--bs-gray-100);
+  --bs-bg-medium-to-light: var(--bs-gray-100);
+  --bs-bg-light-to-base: var(--bs-gray-50);
+  --bs-bg-light-to-medium: var(--bs-gray-50);
+
+  /* Borders */
+  --bs-border-base: var(--bs-gray-200);
+  --bs-border-medium: var(--bs-gray-150);
+  --bs-border-light: var(--bs-gray-100);
+  --bs-border-dark: var(--bs-gray-400);
+  --bs-border-medium-to-light: var(--bs-gray-150);
+  --bs-border-input: rgba(99, 66, 145, 0.75); /* --bs-violet-300 at .75 opacity */
+  --bs-border-active: var(--bs-blue-400);
+  --bs-border-error: var(--bs-red-500);
+
+  /* Blue */
+  --bs-blue-base: var(--bs-blue-400);
+  --bs-blue-medium: var(--bs-blue-300);
+  --bs-blue-light: var(--bs-blue-200);
+  --bs-blue-lightest: var(--bs-blue-100);
+
+  /* Plum */
+  --bs-plum-base: var(--bs-plum-400);
+  --bs-plum-medium: var(--bs-plum-300);
+  --bs-plum-light: var(--bs-plum-200);
+  --bs-plum-lightest: var(--bs-plum-100);
+
+  /* Red */
+  --bs-red-base: var(--bs-red-400);
+  --bs-red-medium: var(--bs-red-300);
+  --bs-red-light: var(--bs-red-200);
+  --bs-red-lightest: var(--bs-red-100);
+
+  /* Royal */
+  --bs-royal-base: var(--bs-royal-400);
+  --bs-royal-medium: var(--bs-royal-300);
+  --bs-royal-light: var(--bs-royal-200);
+  --bs-royal-lightest: var(--bs-royal-100);
+
+  /* Navy */
+  --bs-navy-base: var(--bs-navy-400);
+  --bs-navy-medium: var(--bs-navy-300);
+  --bs-navy-light: var(--bs-navy-200);
+  --bs-navy-lightest: var(--bs-navy-100);
+
+  /* Pink */
+  --bs-pink-base: var(--bs-pink-400);
+  --bs-pink-medium: var(--bs-pink-300);
+  --bs-pink-light: var(--bs-pink-200);
+  --bs-pink-lightest: var(--bs-pink-100);
+
+  /* Violet */
+  --bs-violet-base: var(--bs-violet-400);
+  --bs-violet-medium: var(--bs-violet-300);
+  --bs-violet-light: var(--bs-violet-200);
+  --bs-violet-lightest: var(--bs-violet-100);
+
+  /* Orange */
+  --bs-warning: var(--bs-orange-500);
+  --bs-orange-base: var(--bs-orange-400);
+  --bs-orange-medium: var(--bs-orange-300);
+  --bs-orange-light: var(--bs-orange-200);
+  --bs-orange-lightest: var(--bs-orange-100);
+
+  /* Purple */
+  --bs-purple-base: var(--bs-purple-400);
+  --bs-purple-medium: var(--bs-purple-300);
+  --bs-purple-light: var(--bs-purple-200);
+  --bs-purple-lightest: var(--bs-purple-100);
+
+  /* Gray */
+  --bs-gray-dark: var(--bs-gray-500);
+  --bs-gray-base: var(--bs-gray-400);
+  --bs-gray-medium: var(--bs-gray-300);
+  --bs-gray-light: var(--bs-gray-200);
+  --bs-gray-lightest: var(--bs-gray-100);
+}
+/* Token Overrides */
+.dark {
+  /* Ink */
+  --bs-ink-base: var(--bs-white);
+  --bs-ink-medium: var(--bs-gray-100);
+  --bs-ink-light: var(--bs-gray-200);
+  --bs-ink-disabled: rgba(163, 164, 183, 0.5); /* --bs-gray-300 at .5 opacity */
+  --bs-ink-invert-base: var(--bs-black);
+  --bs-ink-invert-light: var(--bs-gray-400);
+  --bs-ink-invert-medium: var(--bs-gray-500);
+  --bs-ink-blue: var(--bs-blue-200);
+  --bs-ink-red: var(--bs-red-200);
+  --bs-ink-pink: var(--bs-pink-200);
+  --bs-ink-orange: var(--bs-orange-200);
+  --bs-ink-purple: var(--bs-purple-200);
+  --bs-ink-royal: var(--bs-royal-200);
+  --bs-ink-plum: var(--bs-plum-100);
+  --bs-ink-violet: var(--bs-violet-200);
+  --bs-ink-white: var(--bs-white);
+
+  /* Background */
+  --bs-bg-base: var(--bs-slate-600);
+  --bs-bg-light: var(--bs-slate-500);
+  --bs-bg-medium: var(--bs-slate-400);
+  --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* --bs-gray-400 at .3 opacity */
+  --bs-bg-invert-base: var(--bs-white);
+  --bs-bg-invert-light: var(--bs-gray-50);
+  --bs-bg-invert-medium: var(--bs-gray-100);
+  --bs-bg-base-to-light: var(--bs-slate-500);
+  --bs-bg-base-to-medium: var(--bs-slate-400);
+  --bs-bg-medium-to-base: var(--bs-slate-600);
+  --bs-bg-medium-to-light: var(--bs-slate-500);
+  --bs-bg-light-to-base: var(--bs-slate-600);
+  --bs-bg-light-to-medium: var(--bs-slate-400);
+
+  /* Borders */
+  --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
+  --bs-border-medium: var(--bs-gray-400);
+  --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
+  --bs-border-dark: var(--bs-gray-300);
+  --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
+  --bs-border-input: var(--bs-violet-200);
+  --bs-border-active: var(--bs-blue-400);
+  --bs-border-error: var(--bs-red-200);
+
+  /* Blue */
+  --bs-blue-base: var(--bs-blue-300);
+
+  /* Plum */
+  --bs-plum-base: var(--bs-plum-300);
+  --bs-plum-medium: var(--bs-plum-200);
+
+  /* Red */
+  --bs-red-base: var(--bs-red-300);
+
+  /* Royal */
+  --bs-royal-base: var(--bs-royal-300);
+  --bs-royal-medium: var(--bs-royal-200);
+
+  /* Navy */
+  --bs-navy-base: var(--bs-navy-200);
+
+  /* Pink */
+  --bs-pink-base: var(--bs-pink-300);
+
+  /* Violet */
+  --bs-violet-base: var(--bs-violet-300);
+
+  /* Orange */
+  --bs-warning: var(--bs-orange-400);
+  --bs-orange-base: var(--bs-orange-300);
+
+  /* Purple */
+  --bs-purple-base: var(--bs-purple-300);
+
+  /* Gray */
+  --bs-gray-dark: var(--bs-gray-100);
+  --bs-gray-base: var(--bs-gray-200);
+  --bs-gray-light: var(--bs-gray-400);
+  --bs-gray-lightest: var(--bs-gray-500);
+
+  /* Atom gradients */
+  --bs-gradient-atom-ai-bg: conic-gradient(from 180deg at 50% 50%, rgba(83, 101, 196, 0.2) -96.8deg, rgba(228, 94, 155, 0.2) 74.2deg, rgba(51, 158, 238, 0.2) 98.8deg, rgba(249, 124, 76, 0.2) 259.6deg, rgba(83, 101, 196, 0.2) 283.2deg, rgba(228, 94, 155, 0.2) 414.4deg);
+  --bs-gradient-atom-ai-border: conic-gradient(from 180deg at 50% 50%, var(--bs-royal-300) -96.8deg, var(--bs-pink-300) 74.2deg, var(--bs-blue-300) 98.8deg, var(--bs-orange-300) 259.6deg, var(--bs-royal-300) 283.2deg, var(--bs-pink-300) 414.4deg);
+
+  /* Shadows */
+  /* Have to re-specify so secondary update applies */
+  --bs-shadow-secondary: rgba(10, 11, 25, 0.60);
+  --bs-shadow-dark: -16px 20px 40px 0 #000;
+  --bs-shadow-contentLow: var(--bs-shadow-dark);
+  --bs-shadow-contentLowCenter: var(--bs-shadow-dark);
+  --bs-shadow-contentMedium: var(--bs-shadow-dark);
+  --bs-shadow-contentHigh: var(--bs-shadow-dark);
+  --bs-shadow-drawerLeft: var(--bs-shadow-dark);
+  --bs-shadow-drawerRight: 16px 20px 40px 0 #000;
+  --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
+}
+/* Links */
+.dark :where(a) {
+  color: var(--bs-purple-200);
+  outline-color: var(--bs-blue-300);
+}
+.dark :where(a):where(:hover),
+.dark :where(a):where(:focus),
+.dark :where(a):where(:focus-visible) {
+  color: var(--bs-pink-300);
+  text-decoration-color: var(--bs-purple-200);
 }
+/* Base Styles */
 /*
 1. Prevent padding and border from affecting element width.
 2. Allow adding a border to an element by just adding a border-width. This fixes an issue
@@ -280,625 +541,476 @@ button {
     transition-duration: 0.01ms !important;
   }
 }
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-:root,
-:host {
-  --bs-bg-base: var(--bs-white);
-  --bs-bg-base-to-light: var(--bs-white);
-  --bs-bg-base-to-medium: var(--bs-white);
-  --bs-bg-light: var(--bs-gray-50);
-  --bs-bg-light-to-base: var(--bs-gray-50);
-  --bs-bg-light-to-medium: var(--bs-gray-50);
-  --bs-bg-medium: var(--bs-gray-100);
-  --bs-bg-medium-to-light: var(--bs-gray-100);
-  --bs-bg-medium-to-base: var(--bs-gray-100);
-  --bs-bg-invert-to-light: var(--bs-slate-500);
-  --bs-bg-invert-to-base: var(--bs-slate-600);
-  --bs-bg-invert-to-medium: var(--bs-slate-400);
-  --bs-bg-disabled: var(--bs-gray-200);
-
-  --bs-hyperlink: var(--bs-purple-400);
-
-  --bs-ink-accent: var(--bs-plum-400);
-  --bs-ink-base: var(--bs-black);
-  --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-to-medium: var(--bs-gray-200);
-  --bs-ink-invert-light: var(--bs-gray-300);
-  --bs-ink-medium: var(--bs-gray-500);
-
-  --bs-ink-blue: var(--bs-blue-500);
-  --bs-ink-orange: var(--bs-orange-500);
-  --bs-ink-pink: var(--bs-pink-500);
-  --bs-ink-plum: var(--bs-plum-400);
-  --bs-ink-purple: var(--bs-purple-400);
-  --bs-ink-red: var(--bs-red-500);
-  --bs-ink-royal: var(--bs-royal-400);
-  --bs-ink-violet: var(--bs-violet-400);
-  --bs-ink-white: var(--bs-white);
-
-  --bs-blue-base: var(--bs-blue-400);
-  --bs-blue-medium: var(--bs-blue-300);
-  --bs-blue-light: var(--bs-blue-200);
-  --bs-blue-lightest: var(--bs-blue-100);
-  --bs-plum-base: var(--bs-plum-400);
-  --bs-plum-medium: var(--bs-plum-300);
-  --bs-plum-light: var(--bs-plum-200);
-  --bs-plum-lightest: var(--bs-plum-100);
-  --bs-red-base: var(--bs-red-400);
-  --bs-red-medium: var(--bs-red-300);
-  --bs-red-light: var(--bs-red-200);
-  --bs-red-lightest: var(--bs-red-100);
-  --bs-royal-base: var(--bs-royal-400);
-  --bs-royal-medium: var(--bs-royal-300);
-  --bs-royal-light: var(--bs-royal-200);
-  --bs-royal-lightest: var(--bs-royal-100);
-  --bs-navy-base: var(--bs-navy-400);
-  --bs-navy-medium: var(--bs-navy-300);
-  --bs-navy-light: var(--bs-navy-200);
-  --bs-navy-lightest: var(--bs-navy-100);
-  --bs-pink-base: var(--bs-pink-400);
-  --bs-pink-medium: var(--bs-pink-300);
-  --bs-pink-light: var(--bs-pink-200);
-  --bs-pink-lightest: var(--bs-pink-100);
-  --bs-violet-base: var(--bs-violet-400);
-  --bs-violet-medium: var(--bs-violet-300);
-  --bs-violet-light: var(--bs-violet-200);
-  --bs-violet-lightest: var(--bs-violet-100);
-  --bs-orange-base: var(--bs-orange-400);
-  --bs-orange-medium: var(--bs-orange-300);
-  --bs-orange-light: var(--bs-orange-200);
-  --bs-orange-lightest: var(--bs-orange-100);
-  --bs-purple-base: var(--bs-purple-400);
-  --bs-purple-medium: var(--bs-purple-300);
-  --bs-purple-light: var(--bs-purple-200);
-  --bs-purple-lightest: var(--bs-purple-100);
-  --bs-gray-dark: var(--bs-gray-500);
-  --bs-gray-base: var(--bs-gray-400);
-  --bs-gray-medium: var(--bs-gray-300);
-  --bs-gray-light: var(--bs-gray-200);
-  --bs-gray-lightest: var(--bs-gray-100);
-
-  --bs-warning: var(--bs-orange-500);
-
-  --bs-border-dark: var(--bs-gray-400);
-  --bs-border-base: var(--bs-gray-200);
-  --bs-border-medium: var(--bs-gray-150);
-  --bs-border-medium-to-light: var(--bs-gray-150);
-  --bs-border-light: var(--bs-gray-100);
-  --bs-border-input: rgba(99, 66, 145, 0.75); /* --bs-violet-300 at .75 opacity */
-  --bs-border-active: var(--bs-blue-400);
-  --bs-border-error: var(--bs-red-500);
-
-  /* Spacing */
-  --bs-content-top: 4rem;
-  --bs-content-max-width: 72rem;
-
-  /* Type */
-  --bs-font-light: 300;
-  --bs-font-normal: 400;
-  --bs-font-bold: 600;
-
-  /* Special use cases */
-  --bs-bg-input-hover: rgba(201, 202, 217, 0.20);
-
-  /* deprecate / phase out.. */
-  --bs-bg-base-elevated: var(--bs-white); /* now --bs-bg-base-to-light */
-  --bs-bg-subtle: var(--bs-gray-100);
-  --bs-bg-invert: var(--bs-slate-500);
-  --bs-bg-invert-subtle: var(--bs-slate-400);
-  --bs-border: var(--bs-gray-200);
-  --bs-ink-invert: var(--bs-gray-100);
-  --bs-orange-warning: var(--bs-orange-500);
-  /* now --bs-warning. 👆 mapping to bs-warning directly doesn't autoconvert in dark mode for some reason.  Same for bg-base-to-light.*/
-
-  --bs-bg-atom-ai: conic-gradient(from 180deg at 50% 50%, rgba(22, 47, 180, 0.05) -96.8deg, rgba(227, 28, 121, 0.05) 74.2deg, rgba(0, 134, 234, 0.05) 98.8deg, rgba(251, 85, 14, 0.05) 259.6deg, rgba(22, 47, 180, 0.05) 283.2deg, rgba(227, 28, 121, 0.05) 414.4deg);
-  --bs-atom-ai: conic-gradient(from 180deg at 50% 50%, var(--bs-royal-400) -96.8deg, var(--bs-pink-400) 74.2deg, var(--bs-blue-400) 98.8deg, var(--bs-orange-400) 259.6deg, var(--bs-royal-400) 283.2deg, var(--bs-pink-400) 414.4deg);
-}
-.dark,
-.dark :where(:host) {
-  --bs-bg-base: var(--bs-slate-600);
-  --bs-bg-base-to-light: var(--bs-slate-500);
-  --bs-bg-base-to-medium: var(--bs-slate-400);
-  --bs-bg-light: var(--bs-slate-500);
-  --bs-bg-light-to-base: var(--bs-slate-600);
-  --bs-bg-light-to-medium: var(--bs-slate-400);
-  --bs-bg-medium: var(--bs-slate-400);
-  --bs-bg-medium-to-light: var(--bs-slate-500);
-  --bs-bg-medium-to-base: var(--bs-slate-600);
-  --bs-bg-invert-to-light: var(--bs-gray-50);
-  --bs-bg-invert-to-base: var(--bs-white);
-  --bs-bg-invert-to-medium: var(--bs-gray-100);
-  --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* --bs-gray-400 at .3 opacity */
-
-  --bs-hyperlink: var(--bs-purple-200);
-
-  --bs-ink-accent: var(--bs-gray-100);
-  --bs-ink-base: var(--bs-white);
-  --bs-ink-disabled: rgba(163, 164, 183, 0.5); /* --bs-gray-300 at .5 opacity */
-  --bs-ink-invert-base: var(--bs-black);
-  --bs-ink-invert-medium: var(--bs-gray-500);
-  --bs-ink-invert-light: var(--bs-gray-400);
-  --bs-ink-light: var(--bs-gray-200);
-  --bs-ink-medium: var(--bs-gray-100);
-
-  --bs-ink-blue: var(--bs-blue-200);
-  --bs-ink-orange: var(--bs-orange-200);
-  --bs-ink-pink: var(--bs-pink-200);
-  --bs-ink-plum: var(--bs-plum-100);
-  --bs-ink-purple: var(--bs-purple-200);
-  --bs-ink-red: var(--bs-red-200);
-  --bs-ink-royal: var(--bs-royal-200);
-  --bs-ink-violet: var(--bs-violet-200);
-
-  --bs-blue-base: var(--bs-blue-300);
-  --bs-navy-base: var(--bs-navy-200);
-  --bs-orange-base: var(--bs-orange-300);
-  --bs-pink-base: var(--bs-pink-300);
-  --bs-plum-base: var(--bs-plum-300);
-  --bs-plum-medium: var(--bs-plum-200);
-  --bs-purple-base: var(--bs-purple-300);
-  --bs-red-base: var(--bs-red-300);
-  --bs-royal-base: var(--bs-royal-300);
-  --bs-royal-medium: var(--bs-royal-200);
-  --bs-violet-base: var(--bs-violet-300);
-
-  --bs-gray-dark: var(--bs-gray-100);
-  --bs-gray-base: var(--bs-gray-200);
-  --bs-gray-light: var(--bs-gray-400);
-  --bs-gray-lightest: var(--bs-gray-500);
-
-  --bs-warning: var(--bs-orange-400);
-
-  --bs-border-dark: var(--bs-gray-300);
-  --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
-  --bs-border-medium: var(--bs-gray-400);
-  --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
-  --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
-  --bs-border-input: var(--bs-violet-200);
-  --bs-border-active: var(--bs-blue-400);
-  --bs-border-error: var(--bs-red-200);
-
-  --bs-shadow-base: rgba(0, 0, 0, 0.06);
-  --bs-shadow-invert: rgba(10, 11, 25, 0.60);
-  --bs-shadow: -4px 4px 12px var(--bs-shadow-base),
-    -8px 8px 16px var(--bs-shadow-invert);
-  --bs-shadow-contentLow: -4px 4px 12px var(--bs-shadow-base),
-    -8px 8px 16px var(--bs-shadow-invert);
-  --bs-shadow-contentLowCenter: 0px 0px 12px var(--bs-shadow-base),
-    0px 0px 16px var(--bs-shadow-invert);
-  --bs-shadow-contentMedium: -8px 8px 24px var(--bs-shadow-base),
-    -16px 16px 32px var(--bs-shadow-invert);
-  --bs-shadow-contentHigh: 0px 16px 48px var(--bs-shadow-base),
-    0px 32px 64px var(--bs-shadow-invert);
-  --bs-shadow-drawerLeft: -12px 12px 24px var(--bs-shadow-base),
-    -16px 16px 32px var(--bs-shadow-invert);
-  --bs-shadow-drawerRight: -12px 12px 24px var(--bs-shadow-base),
-    16px 16px 32px var(--bs-shadow-invert);
-
-  /* deprecate / phase out.. */
-  --bs-bg-base-elevated: var(--bs-slate-500); /* now --bs-bg-base-to-light. See notes above in light mode. */
-  --bs-bg-subtle: #2F2F51;
-  --bs-bg-invert: var(--bs-white);
-  --bs-bg-invert-subtle: var(--bs-gray-100);
-  --bs-border: var(--bs-gray-400);
-  --bs-ink-invert: var(--bs-black);
-  --bs-orange-warning: var(--bs-orange-400); /* now --bs-warning. See notes above in light mode. */
-
-  --bs-bg-atom-ai: conic-gradient(from 180deg at 50% 50%, rgba(83, 101, 196, 0.2) -96.8deg, rgba(228, 94, 155, 0.2) 74.2deg, rgba(51, 158, 238, 0.2) 98.8deg, rgba(249, 124, 76, 0.2) 259.6deg, rgba(83, 101, 196, 0.2) 283.2deg, rgba(228, 94, 155, 0.2) 414.4deg);
-  --bs-atom-ai: conic-gradient(from 180deg at 50% 50%, var(--bs-royal-300) -96.8deg, var(--bs-pink-300) 74.2deg, var(--bs-blue-300) 98.8deg, var(--bs-orange-300) 259.6deg, var(--bs-royal-300) 283.2deg, var(--bs-pink-300) 414.4deg);
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
 }
-body,
-:host {
+body {
   background-color: var(--bs-bg-base);
   color: var(--bs-ink-light);
+  font-family: 'Roobert', sans-serif;
+  font-size: var(--bs-text-base);
+  font-weight: var(--bs-font-normal);
 }
 :target {
   scroll-margin-top: var(--bs-content-top);
 }
 ::-moz-selection {
-  background-color: var(--bs-royal-400);
-  color: var(--bs-white);
+  background-color: var(--bs-royal-base);
+  color: var(--bs-ink-white);
 }
 ::selection {
-  background-color: var(--bs-royal-400);
-  color: var(--bs-white);
+  background-color: var(--bs-royal-base);
+  color: var(--bs-ink-white);
+}
+*:where([data-scroll="false"]) {
+  overflow: hidden;
 }
 [hidden] {
   display: none;
 }
 hr {
-  background: var(--bs-border);
+  background: var(--bs-border-base);
   border: 0;
   height: 1px;
 }
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-body {
-  font-family: 'Roobert', sans-serif;
-  font-size: var(--bs-text-base);
-  font-weight: 400;
+blockquote {
+  background-color: var(--bs-bg-medium);
+  border-left: 4px solid var(--bs-blue-base);
+  color: var(--bs-ink-light);
+  font-style: italic;
+  font-weight: var(--bs-font-normal);
+  padding: var(--bs-space-4);
+}
+a {
+  border-radius: 0.25rem;
+  color: var(--bs-ink-blue);
+  cursor: pointer;
+  outline-color: var(--bs-blue-base);
+  text-decoration: none;
+  text-underline-offset: 2px;
+  transition: all var(--bs-transition-quick) var(--bs-transition-ease);
+}
+a:where(:hover) {
+  text-decoration: underline;
+}
+a:where(:visited) {
+  color: var(--bs-ink-plum);
 }
-/* Default Element/data-variant Styles */
-[data-variant^="heading-xl"] {
+a:where(:focus-visible) {
+  outline-offset: var(--bs-space-1);
+  outline-style: solid;
+  outline-width: 2px;
+}
+a:where(:focus:not(:focus-visible)) {
+  outline: none;
+}
+/* h1 - replicates .bs-text-5xl */
+h1 {
+  color: var(--bs-ink-base);
   font-size: var(--bs-text-4xl);
-  font-weight: 400;
+  font-weight: var(--bs-font-light);
   line-height: var(--bs-leading-sm);
 }
-h1,
-[data-variant^="heading-1"] {
+@media (min-width: 1166px) {
+  h1 {
+    font-size: var(--bs-text-5xl);
+    font-weight: var(--bs-font-light);
+    line-height: var(--bs-leading-sm);
+  }
+}
+/* h2 - replicates .bs-text-4xl */
+h2 {
+  color: var(--bs-ink-base);
   font-size: var(--bs-text-3xl);
-  font-weight: 400;
+  font-weight: var(--bs-font-light);
   line-height: var(--bs-leading-sm);
 }
-h2,
-[data-variant^="heading-2"] {
+@media (min-width: 1166px) {
+  h2 {
+    font-size: var(--bs-text-4xl);
+    font-weight: var(--bs-font-light);
+    line-height: var(--bs-leading-sm);
+  }
+}
+/* h3 - replicates .bs-text-3xl */
+h3 {
+  color: var(--bs-ink-base);
   font-size: var(--bs-text-2xl);
-  font-weight: 600;
+  font-weight: var(--bs-font-light);
   line-height: var(--bs-leading-sm);
 }
-h3,
-[data-variant^="heading-3"] {
+@media (min-width: 1166px) {
+  h3 {
+    font-size: var(--bs-text-3xl);
+    font-weight: var(--bs-font-light);
+    line-height: var(--bs-leading-sm);
+  }
+}
+/* h4 - replicates .bs-text-2xl */
+h4 {
+  color: var(--bs-ink-base);
   font-size: var(--bs-text-xl);
-  font-weight: 600;
+  font-weight: var(--bs-font-normal);
   line-height: var(--bs-leading-sm);
 }
-h4,
-[data-variant^="heading-4"] {
+@media (min-width: 1166px) {
+  h4 {
+    font-size: var(--bs-text-2xl);
+    font-weight: var(--bs-font-light);
+    line-height: var(--bs-leading-sm);
+  }
+}
+/* h5 - replicates .bs-text-xl */
+h5 {
+  color: var(--bs-ink-base);
   font-size: var(--bs-text-lg);
-  font-weight: 600;
+  font-weight: var(--bs-font-normal);
+  line-height: var(--bs-leading-regular);
 }
-h5,
-[data-variant^="heading-5"] {
+@media (min-width: 1166px) {
+  h5 {
+    font-size: var(--bs-text-xl);
+    font-weight: var(--bs-font-normal);
+    line-height: var(--bs-leading-sm);
+  }
+}
+/* h6 - replicates .bs-text-lg */
+h6 {
+  color: var(--bs-ink-base);
   font-size: var(--bs-text-md);
-  font-weight: 600;
+  font-weight: var(--bs-font-normal);
+  line-height: var(--bs-leading-lg);
 }
-h6,
-[data-variant^="heading-6"] {
-  font-size: var(--bs-text-base);
-  font-weight: 600;
+@media (min-width: 1166px) {
+  h6 {
+    font-size: var(--bs-text-lg);
+    font-weight: var(--bs-font-normal);
+    line-height: var(--bs-leading-regular);
+  }
 }
-.prose {
-  font-size: var(--bs-text-md);
-  max-width: 70ch;
+/* Utilities */
+.flow > * + * {
+  margin-top: var(--flow-space, 1.25em);
 }
-:where(.prose) :is(h1, h2, h3, h4, h5, h6):where(:not([data-color])) {
-  color: var(--bs-ink-base);
+.flow > :where(h1, h2, h3, h4, h5, h6) {
+  --flow-space: 2em;
 }
-[data-variant^="default"] {
-  font-size: var(--bs-text-base);
+.flow > :where(hr) + * {
+  --flow-space: 1.5em;
 }
-.bs-meta,
-[data-variant^="meta"] {
-  font-size: var(--bs-text-xs);
-  font-weight: 600;
+.flow > :where(h1, h2, h3, h4, h5, h6) + * {
+  --flow-space: 0.5em;
 }
-:where(.prose) blockquote {
-  border-left: 4px solid var(--bs-plum-200);
-  color: var(--bs-plum-200);
-  font-style: italic;
-  font-weight: 400;
-  padding-left: var(--bs-space-4);
+.flow > :where(ul, ol) > :where(li) {
+  margin-top: var(--flow-space, 0.625em);
 }
-.prose:where([data-width="wide"]) {
-  max-width: 90%;
+.bs-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
-.prose:where([data-width="wide"]) > :where(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol) {
-  max-width: 48rem;
+.bs-box {
+  --bg-color: var(--bs-bg-medium-to-light);
+  --border-color: transparent;
+  --box-space: var(--bs-space-6);
+  --text-color: var(--bs-ink-base);
+  background: var(--bg-color);
+  border-radius: 0.25rem;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding-bottom: var(--box-space);
+  padding-left: var(--box-space);
+  padding-right: var(--box-space);
+  padding-top: var(--box-space);
+}
+.bs-box:where([data-invert="true"]) {
+  --bg-color: var(--bs-bg-invert-light);
+  --text-color: var(--bs-ink-invert-base);
+}
+.bs-box:where([data-border="true"]) {
+  --border-color: var(--bs-border-base);
+}
+.bs-cluster {
+  --cluster-space: var(--bs-space-6);
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cluster-space);
+  justify-content: flex-start;
 }
-/* data-font-size Styles */
-[data-font-size^='4xl'] {
-  font-size: var(--bs-text-4xl);
-  line-height: var(--bs-leading-sm);
+.bs-cluster:where([data-brick="true"]) > * {
+  align-self: stretch;
+  flex-grow: 1;
 }
-[data-font-size^='3xl'] {
-  font-size: var(--bs-text-3xl);
-  line-height: var(--bs-leading-sm);
+.bs-cluster:where([data-gap="tight"]) {
+  --cluster-space: var(--bs-space-2);
 }
-[data-font-size^='2xl'] {
-  font-size: var(--bs-text-2xl);
-  line-height: var(--bs-leading-sm);
+.bs-box-shadow-low {
+  box-shadow: var(--bs-shadow-contentLow);
 }
-[data-font-size^='xl'] {
-  font-size: var(--bs-text-xl);
-  line-height: var(--bs-leading-sm);
+.bs-box-shadow-low-center {
+  box-shadow: var(--bs-shadow-contentLowCenter);
 }
-[data-font-size^='lg'] {
-  font-size: var(--bs-text-lg);
+.bs-box-shadow-medium {
+  box-shadow: var(--bs-shadow-contentMedium);
 }
-[data-font-size^='md'] {
-  font-size: var(--bs-text-md);
+.bs-box-shadow-high {
+  box-shadow: var(--bs-shadow-contentHigh);
 }
-[data-font-size^='base'] {
-  font-size: var(--bs-text-base);
+.bs-box-shadow-left-panel {
+  box-shadow: var(--bs-shadow-drawerLeft);
 }
-[data-font-size^='sm'] {
-  font-size: var(--bs-text-sm);
+.bs-box-shadow-right-panel {
+  box-shadow: var(--bs-shadow-drawerRight);
 }
-[data-font-size^='xs'] {
+.bs-box-shadow-profile {
+  box-shadow: var(--bs-shadow-profilePhoto);
+}
+.bs-text-xs {
   font-size: var(--bs-text-xs);
+  font-weight: var(--bs-font-semibold);
+  line-height: var(--bs-leading-lg);
 }
-/* data-color Styles */
-[data-color^='base'] {
-  color: var(--bs-ink-base);
+.bs-text-sm {
+  font-size: var(--bs-text-sm);
+  font-weight: var(--bs-font-normal);
+  line-height: var(--bs-leading-lg);
 }
-[data-color^='medium'] {
-  color: var(--bs-ink-medium);
+.bs-text-base {
+  font-size: var(--bs-text-base);
+  font-weight: var(--bs-font-normal);
+  line-height: var(--bs-leading-lg);
 }
-[data-color^='light'] {
-  color: var(--bs-ink-light);
+.bs-text-md {
+  font-size: var(--bs-text-base);
+  font-weight: var(--bs-font-normal);
+  line-height: var(--bs-leading-lg);
 }
-[data-color^='accent'] {
-  color: var(--bs-ink-accent);
+@media (min-width: 1166px) {
+  .bs-text-md {
+    font-size: var(--bs-text-md);
+  }
 }
-/* data-weight Styles */
-[data-weight^='normal'],
-[data-weight^='400'] {
-  font-weight: 400;
+.bs-text-lg {
+  font-size: var(--bs-text-md);
+  font-weight: var(--bs-font-normal);
+  line-height: var(--bs-leading-regular);
 }
-[data-weight^='light'],
-[data-weight^='300'] {
-  font-weight: 300;
+@media (min-width: 1166px) {
+  .bs-text-lg {
+    font-size: var(--bs-text-lg);
+  }
 }
-[data-weight^='bold'],
-[data-weight^='600'] {
-  font-weight: 600;
+.bs-text-xl {
+  font-size: var(--bs-text-lg);
+  font-weight: var(--bs-font-normal);
+  line-height: var(--bs-leading-sm);
 }
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-:where(body).fluid {
-  font-size: var(--bs-text-f-md);
+@media (min-width: 1166px) {
+  .bs-text-xl {
+    font-size: var(--bs-text-xl);
+  }
 }
-/* Defaults & Variants */
-.fluid :where(h1),
-.fluid :where([data-variant^='heading-1']) {
-  font-size: var(--bs-text-f-3xl);
+.bs-text-2xl {
+  font-size: var(--bs-text-xl);
+  font-weight: var(--bs-font-light);
+  line-height: var(--bs-leading-sm);
 }
-.fluid :where(h2),
-.fluid :where([data-variant^='heading-2']) {
-  font-size: var(--bs-text-f-2xl);
+@media (min-width: 1166px) {
+  .bs-text-2xl {
+    font-size: var(--bs-text-2xl);
+  }
 }
-.fluid :where(h3),
-.fluid :where([data-variant^='heading-3']) {
-  font-size: var(--bs-text-f-xl);
+.bs-text-3xl {
+  font-size: var(--bs-text-2xl);
+  font-weight: var(--bs-font-light);
+  line-height: var(--bs-leading-sm);
 }
-.fluid :where(h4),
-.fluid :where([data-variant^='heading-4']) {
-  font-size: var(--bs-text-f-lg);
+@media (min-width: 1166px) {
+  .bs-text-3xl {
+    font-size: var(--bs-text-3xl);
+  }
 }
-.fluid :where(h5),
-.fluid :where([data-variant^='heading-5']) {
-  font-size: var(--bs-text-f-md);
+.bs-text-4xl {
+  font-size: var(--bs-text-3xl);
+  font-weight: var(--bs-font-light);
+  line-height: var(--bs-leading-sm);
 }
-.fluid :where(h6),
-.fluid :where([data-variant^='heading-6']) {
-  font-size: var(--bs-text-f-sm);
+@media (min-width: 1166px) {
+  .bs-text-4xl {
+    font-size: var(--bs-text-4xl);
+  }
 }
-.fluid:where(.prose),
-.fluid :where(.prose),
-.fluid :where([data-variant^='default']) {
-  font-size: var(--bs-text-f-md);
+.bs-text-5xl {
+  font-size: var(--bs-text-4xl);
+  font-weight: var(--bs-font-light);
+  line-height: var(--bs-leading-sm);
 }
-.fluid :where(.bs-meta),
-.fluid :where([data-variant^='meta']) {
-  font-size: var(--bs-text-f-xs);
+@media (min-width: 1166px) {
+  .bs-text-5xl {
+    font-size: var(--bs-text-5xl);
+  }
 }
-/* Fluid data-font-size Styles */
-.fluid :where([data-font-size^='4xl']) {
-  font-size: var(--bs-text-f-4xl);
+.bs-text-6xl {
+  font-size: var(--bs-text-5xl);
+  font-weight: var(--bs-font-light);
+  line-height: var(--bs-leading-sm);
 }
-.fluid :where([data-font-size^='3xl']) {
-  font-size: var(--bs-text-f-3xl);
+@media (min-width: 1166px) {
+  .bs-text-6xl {
+    font-size: var(--bs-text-6xl);
+  }
 }
-.fluid :where([data-font-size^='2xl']) {
-  font-size: var(--bs-text-f-2xl);
+.bs-font-light {
+  font-weight: var(--bs-font-light);
 }
-.fluid :where([data-font-size^='xl']) {
-  font-size: var(--bs-text-f-xl);
-  line-height: var(--bs-leading-sm);
+.bs-font-normal {
+  font-weight: var(--bs-font-normal);
 }
-.fluid :where([data-font-size^='lg']) {
-  font-size: var(--bs-text-f-lg);
+.bs-font-semibold {
+  font-weight: var(--bs-font-semibold);
 }
-.fluid :where([data-font-size^='md']) {
-  font-size: var(--bs-text-f-md);
+.bs-leading-none {
+  line-height: var(--bs-leading-none);
 }
-.fluid :where([data-font-size^='base']) {
-  font-size: var(--bs-text-f-base);
+.bs-leading-sm {
+  line-height: var(--bs-leading-sm);
 }
-.fluid :where([data-font-size^='sm']) {
-  font-size: var(--bs-text-f-sm);
+.bs-leading-regular {
+  line-height: var(--bs-leading-regular);
 }
-.fluid :where([data-font-size^='xs']) {
-  font-size: var(--bs-text-f-xs);
+.bs-leading-lg {
+  line-height: var(--bs-leading-lg);
 }
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-:where(a) {
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-}
-:where(.prose) a,
-a:where(.bs-link) {
-  border-radius: 0.25rem; /* gives outlines rounded corners in modern browsers */
-  -webkit-box-decoration-break: clone;
-          box-decoration-break: clone;
-  color: var(--bs-purple-400);
-  outline-color: var(--bs-blue-400);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  transition: all 0.15s ease-in-out;
-}
-:where(.prose) a:where(:hover),
-:where(.prose) a:where(:focus),
-:where(.prose) a:where(:focus-visible),
-a:where(.bs-link):where(:hover),
-a:where(.bs-link):where(:focus),
-a:where(.bs-link):where(:focus-visible) {
-  color: var(--bs-plum-400);
-  text-decoration-color: var(--bs-purple-400);
-}
-:where(.prose) a:where(:focus-visible),
-a:where(.bs-link):where(:focus-visible) {
-  outline-offset: var(--bs-space-1);
-  outline-style: solid;
-  outline-width: 2px;
-}
-:where(.prose) a:where(:focus:not(:focus-visible)),
-a:where(.bs-link):where(:focus:not(:focus-visible)) {
-  outline: none;
-}
-/* Dark mode styling */
-:where(.dark .prose) a,
-:where(.dark) a:where(.bs-link) {
-  color: var(--bs-purple-200);
-  outline-color: var(--bs-blue-300);
-}
-:where(.dark .prose) a:where(:hover),
-:where(.dark .prose) a:where(:focus),
-:where(.dark .prose) a:where(:focus-visible),
-:where(.dark) a:where(.bs-link):where(:hover),
-:where(.dark) a:where(.bs-link):where(:focus),
-:where(.dark) a:where(.bs-link):where(:focus-visible) {
-  color: var(--bs-pink-300);
-  text-decoration-color: var(--bs-purple-200);
-}
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-.box-shadow {
-  box-shadow: var(--bs-shadow);
-}
-.box-shadow:where([data-variant="center"]) {
-  box-shadow: var(--bs-shadow-contentLowCenter);
-}
-.box-shadow:where([data-variant="medium"]) {
-  box-shadow: var(--bs-shadow-contentMedium);
-}
-.box-shadow:where([data-variant="high"]) {
-  box-shadow: var(--bs-shadow-contentHigh);
-}
-.box-shadow:where([data-variant="left-panel"]) {
-  box-shadow: var(--bs-shadow-drawerLeft);
-}
-.box-shadow:where([data-variant="right-panel"]) {
-  box-shadow: var(--bs-shadow-drawerRight);
-}
-.box-shadow:where([data-variant="profile"]) {
-  box-shadow: var(--bs-shadow-profilePhoto);
+.bs-prose {
+  --prose-width: 70ch;
+  font-size: var(--bs-text-base);
+  font-weight: var(--bs-font-normal);
+  line-height: var(--bs-leading-lg);
+  max-width: var(--prose-width);
 }
-:root {
-  /* get design sign off on these first
-  --bs-trans-color: color 100ms ease-in-out;
-  --bs-trans-outline-color: outline-color 100ms ease-in-out;
-  */
-
-  --bs-trans-rotate180: transform 200ms ease-in-out;
+@media (min-width: 1166px) {
+  .bs-prose {
+    font-size: var(--bs-text-md);
+  }
 }
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-.box {
-  background: var(--bg-color, var(--bs-bg-medium-to-light));
-  border-radius: 0.25rem;
-  padding: var(--box-space, var(--bs-space-6));
+.bs-prose:where([data-width="wide"]) {
+  --prose-width: 90%;
 }
-.box:where([data-invert]) {
-  --bg-color: var(--bs-bg-invert);
-  color: var(--bs-ink-invert);
+.bs-prose:where([data-width="full"]) {
+  --prose-width: 100%;
 }
-:where(.fluid) .box {
-  padding: var(--box-space, var(--bs-space-f-6));
+.bs-prose > * + * {
+  --prose-space: 1.25em;
+  margin-top: var(--prose-space);
 }
-.cluster {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cluster-space, var(--bs-space-6));
-  justify-content: flex-start;
+/* Prose will use em to base space on element font-size */
+.bs-prose > :where(h1, h2, h3, h4, h5, h6) {
+  --prose-space: 2em;
 }
-.cluster:where([data-variant^="brick"]) > * {
-  align-self: stretch;
-  flex-grow: 1;
+.bs-prose > :where(hr) + * {
+  --prose-space: 1.5em;
 }
-.cluster:where([data-gap="tight"]) {
-  gap: var(--cluster-space, var(--bs-space-2));
+.bs-prose > :where(h1, h2, h3, h4, h5, h6) + * {
+  --prose-space: 0.5em;
 }
-:where(.fluid) .cluster {
-  gap: var(--cluster-space, var(--bs-space-f-6));
+.bs-prose > :where(ul, ol) > :where(li) {
+  --prose-space: 0.625em;
 }
-:where(.fluid) .cluster:where([data-gap="tight"]) {
-  gap: var(--cluster-space, var(--bs-space-f-2));
+.bs-region {
+  --region-space: var(--bs-space-6);
+  padding-top: var(--region-space);
+  padding-bottom: var(--region-space);
 }
-.flow > * + * {
-  margin-top: var(--flow-space, 1.25em);
+.bs-region:where([data-space='sm']) {
+  --region-space: var(--bs-space-3);
 }
-.flow > :where(h1, h2, h3, h4, h5, h6) {
-  --flow-space: 2em;
+.bs-region:where([data-space='lg']) {
+  --region-space: var(--bs-space-12);
 }
-.flow > :where(hr) + * {
-  --flow-space: 1.5em;
+.bs-transition-quick {
+  transition-duration: var(--bs-transition-quick);
 }
-.flow > :where(h1, h2, h3, h4, h5, h6) + * {
-  --flow-space: 0.5em;
+.bs-transition-fast {
+  transition-duration: var(--bs-transition-fast);
 }
-.flow > :where(ul, ol) > :where(li) {
-  margin-top: var(--flow-space, 0.625em);
+.bs-transition-moderate {
+  transition-duration: var(--bs-transition-moderate);
 }
-.region {
-  padding-block: var(--region-space, var(--bs-space-6));
+.bs-transition-medium {
+  transition-duration: var(--bs-transition-medium);
 }
-.region:where([data-space^='sm']) {
-  padding-block: var(--bs-space-3);
+.bs-transition-slow {
+  transition-duration: var(--bs-transition-slow);
 }
-.region:where([data-space^='lg']) {
-  padding-block: var(--bs-space-12);
+.bs-transition-leisurely {
+  transition-duration: var(--bs-transition-leisurely);
 }
-:where(.fluid) .region {
-  padding-block: var(--region-space, var(--bs-space-f-6));
+.bs-transition-long {
+  transition-duration: var(--bs-transition-long);
 }
-:where(.fluid) .region:where([data-space^='sm']) {
-  padding-block: var(--bs-space-f-3);
+.bs-transition-ease {
+  transition-timing-function: var(--bs-transition-ease);
 }
-:where(.fluid) .region:where([data-space^='lg']) {
-  padding-block: var(--bs-space-f-12);
+.bs-transition-cubic {
+  transition-timing-function: var(--bs-transition-cubic);
 }
-.wrapper {
-  margin-inline: auto;
-  max-width: var(--max-width, 75rem);
+.bs-wrapper {
+  --max-width: 75rem;
+  --wrapper-space: var(--bs-space-6);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--max-width);
   min-width: 0;
-  padding-inline: var(--wrapper-space, var(--bs-space-6));
+  padding-left: var(--wrapper-space);
+  padding-right: var(--wrapper-space);
   position: relative;
   width: 100%;
 }
-:where(.fluid) .wrapper {
-  padding-inline: var(--wrapper-space, var(--bs-space-f-6));
+.bs-wrapper:where([data-flush="true"]) {
+  padding-left: 0;
+  padding-right: 0;
 }
-.wrapper:where([data-flush]) {
-  padding-inline: 0;
+/* Colors last so that they override other utilities */
+/* Base Colors */
+.bs-bg-transparent {
+  background-color: var(--bs-transparent);
 }
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+.bs-bg-inherit {
+  background-color: var(--bs-inherit);
 }
-.measure-compact {
-  max-width: 40ch;
+.bs-bg-current {
+  background-color: var(--bs-current);
 }
-.measure-short {
-  max-width: 50ch;
+.bs-bg-base {
+  background-color: var(--bs-bg-base);
 }
-.measure-long {
-  max-width: 70ch;
+.bs-bg-light {
+  background-color: var(--bs-bg-light);
 }
-*:where([data-scroll="false"]) {
-  overflow: hidden;
+.bs-bg-medium {
+  background-color: var(--bs-bg-medium);
 }
-/* Color Utilities */
-.bs-bg-base {
-  background-color: var(--bs-bg-base);
+.bs-bg-disabled {
+  background-color: var(--bs-bg-disabled);
+}
+.bs-bg-invert-base {
+  background-color: var(--bs-bg-invert-base);
+}
+.bs-bg-invert-medium {
+  background-color: var(--bs-bg-invert-medium);
+}
+.bs-bg-invert-light {
+  background-color: var(--bs-bg-invert-light);
 }
 .bs-bg-base-to-light {
   background-color: var(--bs-bg-base-to-light);
@@ -906,8 +1018,11 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-bg-base-to-medium {
   background-color: var(--bs-bg-base-to-medium);
 }
-.bs-bg-light {
-  background-color: var(--bs-bg-light);
+.bs-bg-medium-to-base {
+  background-color: var(--bs-bg-medium-to-base);
+}
+.bs-bg-medium-to-light {
+  background-color: var(--bs-bg-medium-to-light);
 }
 .bs-bg-light-to-base {
   background-color: var(--bs-bg-light-to-base);
@@ -915,45 +1030,54 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-bg-light-to-medium {
   background-color: var(--bs-bg-light-to-medium);
 }
-.bs-bg-medium {
-  background-color: var(--bs-bg-medium);
+.bs-text-blue-base {
+  color: var(--bs-blue-base);
 }
-.bs-bg-medium-to-light {
-  background-color: var(--bs-bg-medium-to-light);
+.bs-bg-blue-base {
+  background-color: var(--bs-blue-base);
 }
-.bs-bg-medium-to-base {
-  background-color: var(--bs-bg-medium-to-base);
+.bs-text-blue-medium {
+  color: var(--bs-blue-medium);
 }
-.bs-bg-disabled {
-  background-color: var(--bs-bg-disabled);
+.bs-bg-blue-medium {
+  background-color: var(--bs-blue-medium);
 }
-.bs-bg-invert-to-light {
-  background-color: var(--bs-bg-invert-to-light);
+.bs-text-blue-light {
+  color: var(--bs-blue-light);
 }
-.bs-bg-invert-to-medium {
-  background-color: var(--bs-bg-invert-to-medium);
+.bs-bg-blue-light {
+  background-color: var(--bs-blue-light);
 }
-.bs-bg-invert-to-base {
-  background-color: var(--bs-bg-invert-to-base);
+.bs-text-blue-lightest {
+  color: var(--bs-blue-lightest);
 }
-.bs-bg-atom-ai {
-  background-image: var(--bs-bg-atom-ai);
+.bs-bg-blue-lightest {
+  background-color: var(--bs-blue-lightest);
 }
-.bs-border-light {
-  border-color: var(--bs-border-light);
+.bs-border-transparent {
+  border-color: var(--bs-transparent);
 }
-.bs-border-medium {
-  border-color: var(--bs-border-medium);
+.bs-border-inherit {
+  border-color: var(--bs-inherit);
 }
-.bs-border-medium-to-light {
-  border-color: var(--bs-border-medium-to-light);
+.bs-border-current {
+  border-color: var(--bs-current);
 }
 .bs-border-base {
   border-color: var(--bs-border-base);
 }
+.bs-border-medium {
+  border-color: var(--bs-border-medium);
+}
+.bs-border-light {
+  border-color: var(--bs-border-light);
+}
 .bs-border-dark {
   border-color: var(--bs-border-dark);
 }
+.bs-border-medium-to-light {
+  border-color: var(--bs-border-medium-to-light);
+}
 .bs-border-input {
   border-color: var(--bs-border-input);
 }
@@ -963,30 +1087,107 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-border-error {
   border-color: var(--bs-border-error);
 }
+/* Atom */
 .bs-border-atom-ai {
   /* border-image (which is needed for the border gradient) cannot be combined with border-radius 🤷‍♂️  */
   /* this uses the background-clip property, which is compatible */
   background: linear-gradient(white, white) padding-box,
-              var(--bs-atom-ai) border-box;
+              var(--bs-gradient-atom-ai-border) border-box;
   border: 2px solid transparent;
 }
-.bs-text-ink-light {
-  color: var(--bs-ink-light);
+.bs-bg-atom-ai {
+  background-image: var(--bs-gradient-atom-ai-bg);
+}
+/* Basic Gradients */
+.bs-bg-gradient-dark {
+  background: var(--bs-gradient-dark);
+}
+.bs-bg-gradient-light {
+  background: var(--bs-gradient-light);
+}
+.bs-bg-gradient-line {
+  background: var(--bs-gradient-line);
+}
+/* Light Blue / Gray Gradients */
+.bs-bg-gradient-light-blue-transparent {
+  background: var(--bs-gradient-light-blue-transparent);
+}
+.bs-bg-gradient-light-blue-opaque {
+  background: var(--bs-gradient-light-blue-opaque);
+}
+.bs-bg-gradient-light-gray {
+  background: var(--bs-gradient-light-gray);
+}
+/* Blue Gradients */
+/* Top */
+.bs-bg-gradient-blue-top-left {
+  background: var(--bs-gradient-blue-top-left);
+}
+.bs-bg-gradient-blue-top-center {
+  background: var(--bs-gradient-blue-top-center);
+}
+.bs-bg-gradient-blue-top-right {
+  background: var(--bs-gradient-blue-top-right);
+}
+/* Mid */
+.bs-bg-gradient-blue-mid-left {
+  background: var(--bs-gradient-blue-mid-left);
+}
+/* .bs-bg-gradient-blue-mid-right {
+  background: var(--bs-gradient-blue-mid-right);
+} */
+/* Center */
+.bs-bg-gradient-blue-center {
+  background: var(--bs-gradient-blue-center);
+}
+/* Bottom */
+/* .bs-bg-gradient-blue-bottom-left {
+  background: var(--bs-gradient-blue-bottom-left);
+} */
+/* .bs-bg-gradient-blue-bottom-center {
+  background: var(--bs-gradient-blue-bottom-center);
+} */
+/* .bs-bg-gradient-blue-bottom-right {
+  background: var(--bs-gradient-blue-bottom-right);
+} */
+.bs-text-gray-dark {
+  color: var(--bs-gray-dark);
 }
-.bs-bg-ink-light {
-  background-color: var(--bs-ink-light);
+.bs-bg-gray-dark {
+  background-color: var(--bs-gray-dark);
 }
-.bs-text-ink-disabled {
-  color: var(--bs-ink-disabled);
+.bs-text-gray-base {
+  color: var(--bs-gray-base);
 }
-.bs-bg-ink-disabled {
-  background-color: var(--bs-ink-disabled);
+.bs-bg-gray-base {
+  background-color: var(--bs-gray-base);
 }
-.bs-text-ink-medium {
-  color: var(--bs-ink-medium);
+.bs-text-gray-medium {
+  color: var(--bs-gray-medium);
 }
-.bs-bg-ink-medium {
-  background-color: var(--bs-ink-medium);
+.bs-bg-gray-medium {
+  background-color: var(--bs-gray-medium);
+}
+.bs-text-gray-light {
+  color: var(--bs-gray-light);
+}
+.bs-bg-gray-light {
+  background-color: var(--bs-gray-light);
+}
+.bs-text-gray-lightest {
+  color: var(--bs-gray-lightest);
+}
+.bs-bg-gray-lightest {
+  background-color: var(--bs-gray-lightest);
+}
+.bs-text-transparent {
+  color: var(--bs-transparent);
+}
+.bs-text-inherit {
+  color: var(--bs-inherit);
+}
+.bs-text-current {
+  color: var(--bs-current);
 }
 .bs-text-ink-base {
   color: var(--bs-ink-base);
@@ -994,6 +1195,24 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-bg-ink-base {
   background-color: var(--bs-ink-base);
 }
+.bs-text-ink-medium {
+  color: var(--bs-ink-medium);
+}
+.bs-bg-ink-medium {
+  background-color: var(--bs-ink-medium);
+}
+.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-invert-base {
   color: var(--bs-ink-invert-base);
 }
@@ -1012,12 +1231,6 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .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);
 }
@@ -1072,101 +1285,101 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-bg-ink-white {
   background-color: var(--bs-ink-white);
 }
-.bs-text-red-lightest {
-  color: var(--bs-red-lightest);
+.bs-text-navy-base {
+  color: var(--bs-navy-base);
 }
-.bs-bg-red-lightest {
-  background-color: var(--bs-red-lightest);
+.bs-bg-navy-base {
+  background-color: var(--bs-navy-base);
 }
-.bs-text-red-light {
-  color: var(--bs-red-light);
+.bs-text-navy-medium {
+  color: var(--bs-navy-medium);
 }
-.bs-bg-red-light {
-  background-color: var(--bs-red-light);
+.bs-bg-navy-medium {
+  background-color: var(--bs-navy-medium);
 }
-.bs-text-red-medium {
-  color: var(--bs-red-medium);
+.bs-text-navy-light {
+  color: var(--bs-navy-light);
 }
-.bs-bg-red-medium {
-  background-color: var(--bs-red-medium);
+.bs-bg-navy-light {
+  background-color: var(--bs-navy-light);
 }
-.bs-text-red-base {
-  color: var(--bs-red-base);
+.bs-text-navy-lightest {
+  color: var(--bs-navy-lightest);
 }
-.bs-bg-red-base {
-  background-color: var(--bs-red-base);
+.bs-bg-navy-lightest {
+  background-color: var(--bs-navy-lightest);
 }
-.bs-text-purple-lightest {
-  color: var(--bs-purple-lightest);
+.bs-text-warning {
+  color: var(--bs-warning);
 }
-.bs-bg-purple-lightest {
-  background-color: var(--bs-purple-lightest);
+.bs-bg-warning {
+  background-color: var(--bs-warning);
 }
-.bs-text-purple-light {
-  color: var(--bs-purple-light);
+.bs-text-orange-base {
+  color: var(--bs-orange-base);
 }
-.bs-bg-purple-light {
-  background-color: var(--bs-purple-light);
+.bs-bg-orange-base {
+  background-color: var(--bs-orange-base);
 }
-.bs-text-purple-medium {
-  color: var(--bs-purple-medium);
+.bs-text-orange-medium {
+  color: var(--bs-orange-medium);
 }
-.bs-bg-purple-medium {
-  background-color: var(--bs-purple-medium);
+.bs-bg-orange-medium {
+  background-color: var(--bs-orange-medium);
 }
-.bs-text-purple-base {
-  color: var(--bs-purple-base);
+.bs-text-orange-light {
+  color: var(--bs-orange-light);
 }
-.bs-bg-purple-base {
-  background-color: var(--bs-purple-base);
+.bs-bg-orange-light {
+  background-color: var(--bs-orange-light);
 }
-.bs-text-blue-lightest {
-  color: var(--bs-blue-lightest);
+.bs-text-orange-lightest {
+  color: var(--bs-orange-lightest);
 }
-.bs-bg-blue-lightest {
-  background-color: var(--bs-blue-lightest);
+.bs-bg-orange-lightest {
+  background-color: var(--bs-orange-lightest);
 }
-.bs-text-blue-light {
-  color: var(--bs-blue-light);
+.bs-text-pink-base {
+  color: var(--bs-pink-base);
 }
-.bs-bg-blue-light {
-  background-color: var(--bs-blue-light);
+.bs-bg-pink-base {
+  background-color: var(--bs-pink-base);
 }
-.bs-text-blue-medium {
-  color: var(--bs-blue-medium);
+.bs-text-pink-medium {
+  color: var(--bs-pink-medium);
 }
-.bs-bg-blue-medium {
-  background-color: var(--bs-blue-medium);
+.bs-bg-pink-medium {
+  background-color: var(--bs-pink-medium);
 }
-.bs-text-blue-base {
-  color: var(--bs-blue-base);
+.bs-text-pink-light {
+  color: var(--bs-pink-light);
 }
-.bs-bg-blue-base {
-  background-color: var(--bs-blue-base);
+.bs-bg-pink-light {
+  background-color: var(--bs-pink-light);
 }
-.bs-text-red-lightest {
-  color: var(--bs-red-lightest);
+.bs-text-pink-lightest {
+  color: var(--bs-pink-lightest);
 }
-.bs-bg-red-lightest {
-  background-color: var(--bs-red-lightest);
+.bs-bg-pink-lightest {
+  background-color: var(--bs-pink-lightest);
 }
-.bs-text-red-light {
-  color: var(--bs-red-light);
+.bs-text-plum-base {
+  color: var(--bs-plum-base);
 }
-.bs-bg-red-light {
-  background-color: var(--bs-red-light);
+.bs-bg-plum-base {
+  background-color: var(--bs-plum-base);
 }
-.bs-text-red-medium {
-  color: var(--bs-red-medium);
+.bs-text-plum-medium {
+  color: var(--bs-plum-medium);
 }
-.bs-bg-red-medium {
-  background-color: var(--bs-red-medium);
+.bs-bg-plum-medium {
+  background-color: var(--bs-plum-medium);
 }
-.bs-text-red-base {
-  color: var(--bs-red-base);
+.bs-text-plum-light {
+  color: var(--bs-plum-light);
 }
-.bs-bg-red-base {
-  background-color: var(--bs-red-base);
+.bs-bg-plum-light {
+  background-color: var(--bs-plum-light);
 }
 .bs-text-plum-lightest {
   color: var(--bs-plum-lightest);
@@ -1174,47 +1387,53 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-bg-plum-lightest {
   background-color: var(--bs-plum-lightest);
 }
-.bs-text-plum-light {
-  color: var(--bs-plum-light);
+.bs-text-purple-base {
+  color: var(--bs-purple-base);
 }
-.bs-bg-plum-light {
-  background-color: var(--bs-plum-light);
+.bs-bg-purple-base {
+  background-color: var(--bs-purple-base);
 }
-.bs-text-plum-medium {
-  color: var(--bs-plum-medium);
+.bs-text-purple-medium {
+  color: var(--bs-purple-medium);
 }
-.bs-bg-plum-medium {
-  background-color: var(--bs-plum-medium);
+.bs-bg-purple-medium {
+  background-color: var(--bs-purple-medium);
 }
-.bs-text-plum-base {
-  color: var(--bs-plum-base);
+.bs-text-purple-light {
+  color: var(--bs-purple-light);
 }
-.bs-bg-plum-base {
-  background-color: var(--bs-plum-base);
+.bs-bg-purple-light {
+  background-color: var(--bs-purple-light);
 }
-.bs-text-white {
-  color: var(--bs-white);
+.bs-text-purple-lightest {
+  color: var(--bs-purple-lightest);
 }
-.bs-bg-white {
-  background-color: var(--bs-white);
+.bs-bg-purple-lightest {
+  background-color: var(--bs-purple-lightest);
 }
-.bs-text-royal-lightest {
-  color: var(--bs-royal-lightest);
+.bs-text-red-base {
+  color: var(--bs-red-base);
 }
-.bs-bg-royal-lightest {
-  background-color: var(--bs-royal-lightest);
+.bs-bg-red-base {
+  background-color: var(--bs-red-base);
 }
-.bs-text-royal-light {
-  color: var(--bs-royal-light);
+.bs-text-red-medium {
+  color: var(--bs-red-medium);
 }
-.bs-bg-royal-light {
-  background-color: var(--bs-royal-light);
+.bs-bg-red-medium {
+  background-color: var(--bs-red-medium);
 }
-.bs-text-royal-medium {
-  color: var(--bs-royal-medium);
+.bs-text-red-light {
+  color: var(--bs-red-light);
 }
-.bs-bg-royal-medium {
-  background-color: var(--bs-royal-medium);
+.bs-bg-red-light {
+  background-color: var(--bs-red-light);
+}
+.bs-text-red-lightest {
+  color: var(--bs-red-lightest);
+}
+.bs-bg-red-lightest {
+  background-color: var(--bs-red-lightest);
 }
 .bs-text-royal-base {
   color: var(--bs-royal-base);
@@ -1222,23 +1441,23 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-bg-royal-base {
   background-color: var(--bs-royal-base);
 }
-.bs-text-violet-lightest {
-  color: var(--bs-violet-lightest);
+.bs-text-royal-medium {
+  color: var(--bs-royal-medium);
 }
-.bs-bg-violet-lightest {
-  background-color: var(--bs-violet-lightest);
+.bs-bg-royal-medium {
+  background-color: var(--bs-royal-medium);
 }
-.bs-text-violet-light {
-  color: var(--bs-violet-light);
+.bs-text-royal-light {
+  color: var(--bs-royal-light);
 }
-.bs-bg-violet-light {
-  background-color: var(--bs-violet-light);
+.bs-bg-royal-light {
+  background-color: var(--bs-royal-light);
 }
-.bs-text-violet-medium {
-  color: var(--bs-violet-medium);
+.bs-text-royal-lightest {
+  color: var(--bs-royal-lightest);
 }
-.bs-bg-violet-medium {
-  background-color: var(--bs-violet-medium);
+.bs-bg-royal-lightest {
+  background-color: var(--bs-royal-lightest);
 }
 .bs-text-violet-base {
   color: var(--bs-violet-base);
@@ -1246,121 +1465,419 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-bg-violet-base {
   background-color: var(--bs-violet-base);
 }
-.bs-text-navy-lightest {
-  color: var(--bs-navy-lightest);
+.bs-text-violet-medium {
+  color: var(--bs-violet-medium);
 }
-.bs-bg-navy-lightest {
-  background-color: var(--bs-navy-lightest);
+.bs-bg-violet-medium {
+  background-color: var(--bs-violet-medium);
 }
-.bs-text-navy-light {
-  color: var(--bs-navy-light);
+.bs-text-violet-light {
+  color: var(--bs-violet-light);
 }
-.bs-bg-navy-light {
-  background-color: var(--bs-navy-light);
+.bs-bg-violet-light {
+  background-color: var(--bs-violet-light);
 }
-.bs-text-navy-medium {
-  color: var(--bs-navy-medium);
+.bs-text-violet-lightest {
+  color: var(--bs-violet-lightest);
 }
-.bs-bg-navy-medium {
-  background-color: var(--bs-navy-medium);
+.bs-bg-violet-lightest {
+  background-color: var(--bs-violet-lightest);
 }
-.bs-text-navy-base {
-  color: var(--bs-navy-base);
+/* Component Styles */
+/*
+---------------------------
+  DEPRECATED BS FLYOUT
+---------------------------
+*/
+.bs-flyout-deprecated {
+  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: var(--bs-transition-leisurely);
+  transition-property: opacity, transform;
+  transition-timing-function: var(--bs-transition-ease);
+  width: 360px;
+  z-index: 1000;
 }
-.bs-bg-navy-base {
-  background-color: var(--bs-navy-base);
+.bs-flyout-deprecated:where([data-absolute="true"]) {
+  position: absolute;
 }
-.bs-text-orange-lightest {
-  color: var(--bs-orange-lightest);
+.bs-flyout-deprecated:where([data-position="right"]) {
+  box-shadow: var(--bs-shadow-drawerLeft);
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
 }
-.bs-bg-orange-lightest {
-  background-color: var(--bs-orange-lightest);
+.bs-flyout-deprecated:where([data-size="lg"]) {
+  width: 535px;
 }
-.bs-text-orange-light {
-  color: var(--bs-orange-light);
+.bs-flyout-deprecated:where([data-shown="true"]) {
+  opacity: 1;
+  /*
+  Needs to be "none" instead of "0" so as not to interfere with calculating
+  "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
+  */
+  transform: none;
 }
-.bs-bg-orange-light {
-  background-color: var(--bs-orange-light);
+.bs-flyout-deprecated :where(.bs-flyout-deprecated-close-container) {
+  display: flex;
+  justify-content: flex-end;
 }
-.bs-text-orange-medium {
-  color: var(--bs-orange-medium);
+.bs-flyout-deprecated :where(.bs-flyout-deprecated-close-container button) {
+  cursor: pointer;
+  outline-offset: 2px;
+  padding: 2px;
 }
-.bs-bg-orange-medium {
-  background-color: var(--bs-orange-medium);
+/* Vue Transition Styles - Only used in Vue component */
+.bs-flyout-deprecated:where(.bs-flyout-deprecated-enter-from),
+.bs-flyout-deprecated:where(.bs-flyout-deprecated-leave-to) {
+  opacity: 0;
+  transform: translateX(-100%);
 }
-.bs-text-orange-base {
-  color: var(--bs-orange-base);
+.bs-flyout-deprecated:where([data-position="right"].bs-flyout-deprecated-enter-from),
+.bs-flyout-deprecated:where([data-position="right"].bs-flyout-deprecated-leave-to) {
+  transform: translateX(100%);
 }
-.bs-bg-orange-base {
-  background-color: var(--bs-orange-base);
+.bs-flyout-deprecated:where(.bs-flyout-deprecated-enter-to),
+.bs-flyout-deprecated:where(.bs-flyout-deprecated-leave-from) {
+  opacity: 1;
+  transform: translateX(0);
 }
-.bs-text-pink-lightest {
-  color: var(--bs-pink-lightest);
+/*
+---------------------------
+  DEPRECATED BS MODAL
+---------------------------
+*/
+.bs-modal-deprecated {
+  --base-modal-width: 35rem; /* 560px */
+  --lg-modal-padding: 2rem; /* 32px */
+  --lg-modal-width: 45.3125rem; /* 725px */
+  --modal-padding: 1.5rem; /* 24px */
+  --sm-modal-width: 21.25rem; /* 340px */
+  background-color: var(--bs-bg-base-to-medium);
+  border-radius: 4px;
+  bottom: 0;
+  box-shadow: var(--bs-shadow-contentHigh);
+  display: flex;
+  flex-direction: column;
+  height: -moz-fit-content;
+  height: fit-content;
+  left: 0;
+  margin: auto;
+  max-height: calc(100% - 3rem);
+  opacity: 0;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition-duration: var(--bs-transition-quick);
+  transition-property: opacity;
+  transition-timing-function: var(--bs-transition-ease);
+  width: calc(100% - 3rem);
+  z-index: 9999;
 }
-.bs-bg-pink-lightest {
-  background-color: var(--bs-pink-lightest);
+@media (min-width: 752px) {
+  .bs-modal-deprecated {
+    max-height: min(calc(100dvh - 3rem), 40.625rem);
+    width: var(--base-modal-width);
+  }
+
+  .bs-modal-deprecated:where([data-size="sm"]) {
+    width: var(--sm-modal-width);
+  }
+
+  .bs-modal-deprecated:where([data-size="lg"]) {
+    width: var(--lg-modal-width);
+  }
 }
-.bs-text-pink-light {
-  color: var(--bs-pink-light);
+.bs-modal-deprecated:where([data-shown="true"]) {
+  opacity: 1;
 }
-.bs-bg-pink-light {
-  background-color: var(--bs-pink-light);
+/* Header Container */
+.bs-modal-deprecated :where(.bs-modal-deprecated-header-container) {
+  padding: var(--modal-padding);
 }
-.bs-text-pink-medium {
-  color: var(--bs-pink-medium);
+.bs-modal-deprecated:where([data-size="lg"]) :where(.bs-modal-deprecated-header-container) {
+  padding: var(--lg-modal-padding);
 }
-.bs-bg-pink-medium {
-  background-color: var(--bs-pink-medium);
+.bs-modal-deprecated:where([data-header-border="true"]) :where(.bs-modal-deprecated-header-container) {
+  border-bottom: 1px solid var(--bs-border-base);
 }
-.bs-text-pink-base {
-  color: var(--bs-pink-base);
+.bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-header-container) {
+  padding-left: 0;
+  padding-right: 0;
 }
-.bs-bg-pink-base {
-  background-color: var(--bs-pink-base);
+/* Header Row */
+.bs-modal-deprecated :where(.bs-modal-deprecated-header) {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
 }
-.bs-text-gray-lightest {
-  color: var(--bs-gray-lightest);
+/* Title */
+.bs-modal-deprecated :where(.bs-modal-deprecated-title) {
+  flex-grow: 1;
+  font-size: var(--bs-text-lg);
+  font-weight: 400;
+  margin-right: 2rem;
 }
-.bs-bg-gray-lightest {
-  background-color: var(--bs-gray-lightest);
+/* Subtitle */
+.bs-modal-deprecated :where(.bs-modal-deprecated-subtitle) {
+  font-size: var(--bs-text-sm);
+  font-weight: 400;
+  margin-top: 0.5rem;
+  width: 100%;
 }
-.bs-text-gray-light {
-  color: var(--bs-gray-light);
+/* Close Button */
+.bs-modal-deprecated :where(.bs-modal-deprecated-close-button) {
+  background-color: transparent;
+  cursor: pointer;
+  z-index: 10000;
 }
-.bs-bg-gray-light {
-  background-color: var(--bs-gray-light);
+.bs-modal-deprecated:where(:not(:has(.bs-modal-deprecated-header-container))) :where(.bs-modal-deprecated-close-button) {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
 }
-.bs-text-gray-medium {
-  color: var(--bs-gray-medium);
+.bs-modal-deprecated:where([data-full-width="true"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-close-button) {
+  margin-right: var(--modal-padding);
 }
-.bs-bg-gray-medium {
-  background-color: var(--bs-gray-medium);
+.bs-modal-deprecated:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-close-button) {
+  margin-right: var(--lg-modal-padding);
 }
-.bs-text-gray-base {
-  color: var(--bs-gray-base);
+/* Progress */
+.bs-modal-deprecated :where(.bs-modal-deprecated-progress) {
+  margin-top: 1.5rem;
+  width: 100%;
+}
+/* Body */
+.bs-modal-deprecated :where(.bs-modal-deprecated-body) {
+  overflow-y: auto;
+  padding: var(--modal-padding);
+}
+.bs-modal-deprecated:where([data-full-height="true"]) :where(.bs-modal-deprecated-body) {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+.bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-body) {
+  padding-left: 0;
+  padding-right: 0;
+}
+/* Has header, but no header border */
+.bs-modal-deprecated:where(:not([data-header-border]):has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-body),
+.bs-modal-deprecated:where([data-header-border="false"]:has(> .bs-modal-deprecated-header-container)) :where(.bs-modal-deprecated-body) {
+  padding-top: 0;
+}
+/* Has footer, but no footer border */
+.bs-modal-deprecated:where(:not([data-footer-border])) :where(.bs-modal-deprecated-body:has(~ .bs-modal-deprecated-footer)),
+.bs-modal-deprecated:where([data-footer-border="false"]) :where(.bs-modal-deprecated-body:has(~ .bs-modal-deprecated-footer)) {
+  padding-bottom: 0;
+}
+.bs-modal-deprecated:where([data-body-background-contrast="true"]) :where(.bs-modal-deprecated-body) {
+  background-color: var(--bs-bg-light);
+}
+/* Footer */
+.bs-modal-deprecated :where(.bs-modal-deprecated-footer) {
+  padding-bottom: 1rem;
+  padding-left: var(--modal-padding);
+  padding-right: var(--modal-padding);
+  padding-top: 1rem;
+}
+.bs-modal-deprecated:where([data-size="lg"]) :where(.bs-modal-deprecated-footer) {
+  padding-bottom: 1.5rem;
+  padding-left: var(--lg-modal-padding);
+  padding-right: var(--lg-modal-padding);
+  padding-top: 1.5rem;
+}
+.bs-modal-deprecated:where([data-footer-border="true"]) :where(.bs-modal-deprecated-footer) {
+  border-top: 1px solid var(--bs-border-base);
+}
+.bs-modal-deprecated:where([data-full-width="true"]) :where(.bs-modal-deprecated-footer) {
+  padding-left: 0;
+  padding-right: 0;
+}
+/* Vue Transition Styles - Only used in Vue component */
+.bs-modal-deprecated:where(.bs-modal-deprecated-enter-from),
+.bs-modal-deprecated:where(.bs-modal-deprecated-leave-to) {
+  opacity: 0;
+}
+.bs-modal-deprecated:where(.bs-modal-deprecated-enter-to),
+.bs-modal-deprecated:where(.bs-modal-deprecated-leave-from) {
+  opacity: 1;
+}
+/*
+---------------------------
+  DEPRECATED BS TOOLTIP
+---------------------------
+*/
+/* -------------------- BASE STYLES -------------------- */
+.bs-tooltip-deprecated {
+    display: inline-block;
+    position: relative;
+}
+.bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text) {
+  align-items: center;
+  background-color: var(--bs-bg-base-to-light);
+  border-radius: 4px;
+  box-shadow: var(--bs-shadow-contentLowCenter);
+  color: var(--bs-ink-violet);
+  display: flex;
+  font-size: var(--bs-text-sm);
+  justify-content: center;
+  max-width: 16rem;
+  min-width: 4rem;
+  opacity: 0;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  position: absolute;
+  transform: scale(0);
+  transition-duration: var(--bs-transition-quick);
+  transition-property: opacity, transform;
+  transition-timing-function: var(--bs-transition-ease);
+  width: -moz-max-content;
+  width: max-content;
+  z-index: 999;
+}
+:where(.dark) .bs-tooltip :where(.bs-tooltip-text) {
+  color: var(--bs-ink-base);
+}
+/* -------------------- POSITION: UNDEFINED / TOP -------------------- */
+.bs-tooltip-deprecated:where(:not([data-position])) :where(.bs-tooltip-deprecated-text),
+.bs-tooltip-deprecated:where([data-position="top"]) :where(.bs-tooltip-deprecated-text) {
+  bottom: calc(100% + 0.5rem);
+  left: 50%;
+  transform-origin: bottom center;
+  transform: translateX(-50%) scale(0);
+}
+/* Active States */
+:where(.bs-tooltip-deprecated:not([data-position])):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="top"]):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated:not([data-position])):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="top"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated:not([data-position]))[data-shown] :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="top"])[data-shown] :where(.bs-tooltip-deprecated-text) {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+/* -------------------- POSITION: BOTTOM -------------------- */
+.bs-tooltip-deprecated:where([data-position="bottom"]) :where(.bs-tooltip-deprecated-text) {
+  left: 50%;
+  top: calc(100% + 0.5rem);
+  transform-origin: top center;
+  transform: translateX(-50%) scale(0);
+}
+/* Active States */
+:where(.bs-tooltip-deprecated[data-position="bottom"]):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="bottom"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="bottom"])[data-shown] :where(.bs-tooltip-deprecated-text) {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+/* -------------------- POSITION: LEFT -------------------- */
+.bs-tooltip-deprecated:where([data-position="left"]) :where(.bs-tooltip-deprecated-text) {
+  right: calc(100% + 0.5rem);
+  top: 50%;
+  transform-origin: center right;
+  transform: translateY(-50%) scale(0);
+}
+/* Active States */
+:where(.bs-tooltip-deprecated[data-position="left"]):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="left"])[data-shown] :where(.bs-tooltip-deprecated-text) {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+/* -------------------- POSITION: RIGHT -------------------- */
+.bs-tooltip-deprecated:where([data-position="right"]) :where(.bs-tooltip-deprecated-text) {
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform-origin: center left;
+  transform: translateY(-50%) scale(0);
+}
+:where(.bs-tooltip-deprecated[data-position="right"]):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="right"])[data-shown] :where(.bs-tooltip-deprecated-text) {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+/* -------------------- POSITION: CORNERS -------------------- */
+/* top-left */
+.bs-tooltip-deprecated:where([data-position="top-left"]) :where(.bs-tooltip-deprecated-text) {
+  bottom: calc(100% + 0.5rem);
+  right: calc(100% + 0.5rem);
+  transform-origin: bottom right;
+}
+/* top-right */
+.bs-tooltip-deprecated:where([data-position="top-right"]) :where(.bs-tooltip-deprecated-text) {
+  bottom: calc(100% + 0.5rem);
+  left: calc(100% + 0.5rem);
+  transform-origin: bottom left;
 }
-.bs-bg-gray-base {
-  background-color: var(--bs-gray-base);
+/* bottom-left */
+.bs-tooltip-deprecated:where([data-position="bottom-left"]) :where(.bs-tooltip-deprecated-text) {
+  right: calc(100% + 0.5rem);
+  top: calc(100% + 0.5rem);
+  transform-origin: top right;
 }
-.bs-text-gray-dark {
-  color: var(--bs-gray-dark);
+/* bottom-right */
+.bs-tooltip-deprecated:where([data-position="bottom-right"]) :where(.bs-tooltip-deprecated-text) {
+  left: calc(100% + 0.5rem);
+  top: calc(100% + 0.5rem);
+  transform-origin: top left;
 }
-.bs-bg-gray-dark {
-  background-color: var(--bs-gray-dark);
+/* Active States */
+:where(.bs-tooltip-deprecated[data-position="top-left"]):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="top-right"]):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="bottom-left"]):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="bottom-right"]):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="top-left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="top-right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="bottom-left"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="bottom-right"]):has(:focus-visible) :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="top-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="top-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="bottom-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-position="bottom-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-deprecated-text) {
+  opacity: 1;
+  transform: scale(1);
 }
-.bs-text-black {
-  color: var(--bs-black);
+/* -------------------- DISABLED -------------------- */
+/*
+Don't display unless data-shown is present
+This must go last to properly override the other classes
+*/
+:where(.bs-tooltip-deprecated[data-disabled]:not([data-disabled="false"]):not([data-shown])):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-disabled]:not([data-disabled="false"]):not([data-shown])):has(:focus-visible) :where(.bs-tooltip-deprecated-text) {
+  opacity: 0;
+  transform: scale(0);
 }
-.bs-bg-black {
-  background-color: var(--bs-black);
+:where(.bs-tooltip-deprecated[data-shown="false"][data-disabled]:not([data-disabled="false"])):hover :where(.bs-tooltip-deprecated-text),
+:where(.bs-tooltip-deprecated[data-shown="false"][data-disabled]:not([data-disabled="false"])):has(:focus-visible) :where(.bs-tooltip-deprecated-text) {
+  opacity: 0;
+  transform: scale(0);
 }
-.bs-text-warning {
-  color: var(--bs-warning);
+/* -------------------- COMPONENT-SPECIFIC STYLES -------------------- */
+.bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped) {
+  opacity: 0;
+  transform: scale(0.5);
 }
-.bs-bg-warning {
-  background-color: var(--bs-warning);
+.bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped-x) {
+  opacity: 0;
+  transform: translateX(-50%) scale(0.5);
+}
+.bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text.escaped-y) {
+  opacity: 0;
+  transform: translateY(-50%) scale(0.5);
 }
-/* Component Styles */
 .bs-accordion {
   --accordion-link-color: var(--bs-purple-400);
   --accordion-link-outline-color: var(--bs-blue-base);
@@ -1393,7 +1910,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   line-height: 1.5;
   outline: 2px solid var(--accordion-outline-color);
   padding: var(--bs-space-0);
-  padding-block: var(--bs-space-f-2);
+  padding-block: clamp(0.5rem, calc(0.38rem + 0.5vw), 0.75rem);
   padding-inline: var(--accordion-padding-inline);
   text-decoration: none;
   width: 100%;
@@ -1437,7 +1954,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-accordion > :where(header) > :where(button) > :where([data-position="end"]) {
   grid-area: end;
   transform: rotate(0);
-  transition: var(--bs-trans-rotate180);
+  transition: transform var(--bs-transition-medium) var(--bs-transition-ease);
 }
 .bs-accordion > :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
   transform: rotate(180deg);
@@ -1449,7 +1966,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   grid-template-rows: 0fr;
   overflow: hidden;
   padding-inline: var(--accordion-padding-inline);
-  transition: grid-template-rows 250ms ease-out;
+  transition: grid-template-rows var(--bs-transition-slow) var(--bs-transition-ease);
 }
 .bs-accordion :where(.bs-accordion-content) > :where(:first-child) {
   overflow: hidden;
@@ -1585,6 +2102,20 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   --btn-text-color: var(--bs-text-base);
   --btn-text-color-hovered: var(--bs-text-base);
 }
+.bs-backdrop {
+  position: fixed;
+  inset: 0;
+  -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
+  background: rgba(29, 30, 72, 0.05);
+  /*
+    Should be very rare, but below is an optional way for consumer to override z-index.
+    See note in popover.css for more info...most often (but still rare) the consumer
+    would override the --bs-popover-z-index instead, which would take care of this bs-backdrop too.
+    Should be a very very rare use case to need to override both independently to different values.
+  */
+  z-index: var(--bs-backdrop-z-index, var(--bs-popover-z-index));
+}
 .bs-badge {
   --badge-bg: var(--bs-red-400);
   --badge-text: var(--bs-white);
@@ -1696,6 +2227,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   padding-right: 1.25rem;
 }
 .bs-banner :where(.bs-banner-content p a) {
+  color: var(--bs-ink-white);
   text-decoration: underline;
 }
 .bs-banner :where(a:hover) {
@@ -1767,7 +2299,7 @@ text color:
   padding: var(--btn-padding);
   position: relative;
   text-decoration: none;
-  transition: all 100ms ease-in-out;
+  transition: all var(--bs-transition-fast) var(--bs-transition-ease);
   vertical-align: middle;
 }
 .bs-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
@@ -1789,7 +2321,7 @@ text color:
   height: calc(100% + 0.5rem);
   inset: var(--btn-focus-inset);
   position: absolute;
-  transition: border-color 0.125s ease-in-out;
+  transition: border-color var(--bs-transition-fast) var(--bs-transition-ease);
   width: var(--btn-focus-pseudo-width);
 }
 .bs-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
@@ -1846,7 +2378,7 @@ text color:
   --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-main: var(--bs-warning);
   --btn-secondary: var(--bs-orange-base);
 }
 .bs-button:where([data-variant^='negative']) {
@@ -1879,6 +2411,7 @@ text color:
   --btn-light: var(--bs-white-10);
   --btn-main: var(--bs-ink-white);
 }
+/* DEPRECATED */
 /* ------------ Text Button ------------ */
 .bs-button:where([data-text]:not([data-text="false"])) {
   --btn-focus-inset: -0.25rem -0.5rem;
@@ -1893,22 +2426,27 @@ text color:
   cursor: pointer;
   line-height: 150%;
 }
+/* DEPRECATED */
 .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-blue-base);
   background-color: transparent;
   text-decoration: underline;
 }
+/* DEPRECATED */
 .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover):has(svg) {
   text-decoration: none;
 }
+/* DEPRECATED */
 .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):active) {
   box-shadow: none;
   transform: none;
 }
+/* DEPRECATED */
 .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
 .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-ink-red);
 }
+/* DEPRECATED */
 .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
 .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-ink-white);
@@ -1930,23 +2468,33 @@ text color:
   /* Std button size="sm" text size is same across all media sizes */
   --btn-text-size: var(--bs-text-sm);
 }
+/* DEPRECATED */
 /* Text buttons: For now, text size not dependent on media size */
 .bs-button:where([data-text]:not([data-text="false"])) {
   --btn-height: auto;
   --btn-padding: 0;
   --btn-text-size: var(--bs-text-md);
 }
+/* DEPRECATED */
 .bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-base);
 }
+/* DEPRECATED */
 /* Size XS & XXS only applies to text buttons */
 .bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-sm);
 }
+/* DEPRECATED */
 .bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
   --btn-text-size: var(--bs-text-xs);
   --btn-weight: 600;
 }
+/* DEPRECATED */
+/* Size SM buttons will shrink icons to 14px */
+.bs-button:where([data-size^='sm']) :where(.bs-icon) {
+  height: 0.875rem;
+  width: 0.875rem;
+}
 /* ------------ Disabled Styling ------------ */
 :where(button:disabled),
 .bs-button:where(:disabled),
@@ -1964,6 +2512,7 @@ text color:
 .bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
   --btn-ghost-ink: var(--bs-ink-disabled);
 }
+/* DEPRECATED */
 .bs-button:where([data-text]:not([data-text="false"])):disabled,
 .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
   --btn-main: transparent;
@@ -2064,13 +2613,13 @@ a.bs-button {
   border-color: var(--legend-item-box-stroke);
   border-radius: var(--legend-item-swatch-radius, 3px);
   display: inline-block;
-  height: var(--bs-text-f-md);
+  height: var(--bs-text-md);
   margin-right: 10px;
-  width: var(--bs-text-f-md);
+  width: var(--bs-text-md);
 }
 .bs-chart :where(li p) {
   color: var(--legend-item-text-color);
-  font-size: var(--bs-text-f-md);
+  font-size: var(--bs-text-md);
   margin: 0;
   padding: 0;
   -webkit-text-decoration: var(--legend-item-text-decoration);
@@ -2190,7 +2739,7 @@ a.bs-circle-button {
   outline: 2px solid transparent;
   padding: var(--btn-icon-padding);
   position: relative;
-  transition: all 100ms ease-in-out;
+  transition: all var(--bs-transition-fast) var(--bs-transition-ease);
 }
 .bs-circle-button :where(.bs-circle-button-icon)::before {
   border-color: var(--btn-border-color);
@@ -2200,7 +2749,7 @@ a.bs-circle-button {
   content: '';
   inset: var(--btn-focus-inset);
   position: absolute;
-  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
+  transition: border-color var(--bs-transition-fast) var(--bs-transition-ease), transform var(--bs-transition-fast) var(--bs-transition-ease);
 }
 .bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
   --icon-size: var(--btn-icon-size);
@@ -2328,7 +2877,7 @@ a.bs-circle-button {
   --btn-text-weight: 600;
 }
 /* Option list */
-.bs-dropdown-options {
+.bs-dropdown-options-deprecated {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -2341,36 +2890,36 @@ a.bs-circle-button {
   padding-left: 0;
   position: relative;
 }
-.bs-dropdown-options:focus-visible {
+.bs-dropdown-options-deprecated:focus-visible {
   outline: none;
 }
 /* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
 @media (min-width: 1166px) {
   /* 5th or 8th child triggers overflow-y (depending on variant) */
-  :where([data-width="content"]) > .bs-dropdown-options:where(:has([data-variant*="description"]:nth-child(5))),
-  :where([data-width="content"]) > .bs-dropdown-options:where(:has(li:not([data-variant*="description"]):nth-child(8))) {
+  :where([data-width="content"]) > .bs-dropdown-options-deprecated:where(:has([data-variant*="description"]:nth-child(5))),
+  :where([data-width="content"]) > .bs-dropdown-options-deprecated:where(:has(li:not([data-variant*="description"]):nth-child(8))) {
     scrollbar-gutter: stable;
   }
 
   /* Fallback for older Firefox+ only if we're not setting data-overflow values */
   @supports not selector(:has(*)) {
-    :where([data-width="content"]) > .bs-dropdown-options {
+    :where([data-width="content"]) > .bs-dropdown-options-deprecated {
       scrollbar-gutter: stable;
     }
   }
 
   /* Also allow this for js solutions if :has not available via data-overflow */
   /* Reset scrollbar gutter when data-overflow is used */
-  :where([data-width="content"]) > .bs-dropdown-options:where([data-overflow]) {
+  :where([data-width="content"]) > .bs-dropdown-options-deprecated:where([data-overflow]) {
     scrollbar-gutter: auto;
   }
 
-  :where([data-width="content"]) > .bs-dropdown-options:where([data-overflow="true"]) {
+  :where([data-width="content"]) > .bs-dropdown-options-deprecated:where([data-overflow="true"]) {
     scrollbar-gutter: stable;
   }
 }
 /* Option list item */
-.bs-dropdown-options :where(li) {
+.bs-dropdown-options-deprecated :where(li) {
   align-items: center;
   border-bottom: 2px solid transparent;
   border-left: 4px solid transparent;
@@ -2389,158 +2938,158 @@ a.bs-circle-button {
   word-wrap: break-word;
 }
 /* Variant: 2-col */
-.bs-dropdown-options :where(li[data-variant~="2-col"]) {
+.bs-dropdown-options-deprecated :where(li[data-variant~="2-col"]) {
   grid-template-columns: min-content 1fr;
 }
 /* Variant: 3-col */
-.bs-dropdown-options :where(li[data-variant~="3-col"]) {
+.bs-dropdown-options-deprecated :where(li[data-variant~="3-col"]) {
   grid-template-columns: min-content min-content 1fr;
 }
 /* Variant: description */
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
+.bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"] > :nth-child(2)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   min-height: 1.125rem;
   line-height: 1.125rem;
 }
 /* Variant: 2-col description */
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
+.bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
   grid-column-start: 2;
 }
 /* Variant: 3-col description */
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
+.bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
   grid-column-start: 3;
 }
 /* Hover or data-selected */
-.bs-dropdown-options :where(li:not([role="separator"]):hover),
-.bs-dropdown-options :where(li[data-selected]) {
+.bs-dropdown-options-deprecated :where(li:not([role="separator"]):hover),
+.bs-dropdown-options-deprecated :where(li[data-selected]) {
   background-color: var(--bs-bg-medium-to-light);
   border-left: 4px solid var(--bs-ink-blue);
   color: var(--bs-ink-blue);
   outline: none;
 }
 /* Variant: negative */
-.bs-dropdown-options :where(li[data-variant~="negative"]:hover),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:hover),
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-selected]),
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-selected]:hover) {
   /* 25% alpha version of --bs-red-400 */
   background-color: rgba(248, 169, 170, 0.25);
   border-left: 4px solid var(--bs-ink-red);
   color: var(--bs-ink-red);
 }
 /* Hover or data-selected for 2-col/3-col/description variants */
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
+.bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
+.bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
   color: var(--bs-ink-blue);
 }
 /* Hover or data-selected for negative + 2-col/3-col/description variants */
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
+.bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
   color: var(--bs-ink-red);
 }
 /* List option keyboard navigation focus */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
+.bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-active]) {
   --focus-border-color: var(--bs-blue-base);
   border: 2px solid var(--focus-border-color);
   outline: none;
   padding-left: 1.375rem;
 }
 /* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
+.bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-selected][data-active]) {
   border-left: 4px solid var(--focus-border-color);
   padding-left: 1.25rem;
 }
 /* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
+.bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
   --focus-border-color: var(--bs-red-200);
 }
 /* Multi-select divider */
-.bs-dropdown-options :where(li[role="separator"]) {
+.bs-dropdown-options-deprecated :where(li[role="separator"]) {
   cursor: default;
   padding-block: 0.125rem;
   padding-right: 1.375rem;
 }
 /* Multi-select divider line */
-.bs-dropdown-options :where(hr) {
+.bs-dropdown-options-deprecated :where(hr) {
   background-color: var(--bs-navy-light);
   height: .0625rem;
   margin-block: 0;
   margin-inline: 0;
 }
 /* Disable hover styles */
-.bs-dropdown-options :where(li[data-no-hover]:hover) {
+.bs-dropdown-options-deprecated :where(li[data-no-hover]:hover) {
   background-color: transparent;
   border-left-color: transparent;
   color: var(--bs-ink-base);
   cursor: default;
 }
 /* Style label to look like other options */
-.bs-dropdown-options :where(li label) {
+.bs-dropdown-options-deprecated :where(li label) {
   cursor: pointer;
   font-size: 1rem;
   font-weight: 400;
 }
 /* Don't change option color when checkbox is present */
-.bs-dropdown-options :where(li[data-variant~="checkbox"]):hover,
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-selected]) {
+.bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"]):hover,
+.bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-selected]) {
   color: var(--bs-ink-base);
 }
 /* Don't change description color when checkbox is present */
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"]):hover > :nth-child(3),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"][data-selected]) > :nth-child(3),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"]):hover > :nth-child(4),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"][data-selected]) > :nth-child(4) {
+.bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"]):hover > :nth-child(3),
+.bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"][data-selected]) > :nth-child(3),
+.bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"]):hover > :nth-child(4),
+.bs-dropdown-options-deprecated :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"][data-selected]) > :nth-child(4) {
   color: var(--bs-ink-light);
 }
 /* Overrides mobile style when not min-width 1166 */
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li) {
+.bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated) :where(li) {
   padding-left: 0.5rem;
   padding-right: 0.75rem;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[role="separator"]) {
+.bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated) :where(li[role="separator"]) {
   padding-right: 0.625rem;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
+.bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated:focus-visible) :where(li[data-active]) {
   padding-left: 0.625rem;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
+.bs-dropdown-deprecated:where([data-no-mobile="true"]) :where(.bs-dropdown-options-deprecated:focus-visible) :where(li[data-selected][data-active]) {
   padding-left: 0.5rem;
 }
 @media (min-width: 1166px)  {
-  .bs-dropdown-options :where(li) {
+  .bs-dropdown-options-deprecated :where(li) {
     padding-left: 0.5rem;
     padding-right: 0.75rem;
   }
 
-  .bs-dropdown-options :where(li[role="separator"]) {
+  .bs-dropdown-options-deprecated :where(li[role="separator"]) {
     padding-right: 0.625rem;
   }
 
-  .bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
+  .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-active]) {
     padding-left: 0.625rem;
   }
 
-  .bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
+  .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-selected][data-active]) {
     padding-left: 0.5rem;
   }
 }
 /* Parent */
-.bs-dropdown-parent {
+.bs-dropdown-deprecated-parent {
   display: inline-block;
   position: relative;
 }
 /* Backdrop for mobile bottom sheet */
-.bs-dropdown-backdrop {
+.bs-dropdown-deprecated-backdrop {
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   background: rgba(29, 30, 72, 0.05);
@@ -2553,7 +3102,7 @@ a.bs-circle-button {
   z-index: 998;
 }
 /* Content */
-.bs-dropdown {
+.bs-dropdown-deprecated {
   --dropdown-bottom: 0;
   --dropdown-left: 0;
   --dropdown-right: auto;
@@ -2575,70 +3124,70 @@ a.bs-circle-button {
   top: var(--dropdown-top);
   transform-origin: center bottom;
   transform: var(--dropdown-transform);
-  transition-duration: 75ms;
+  transition-duration: var(--bs-transition-quick);
   transition-property: opacity, transform;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--bs-transition-ease);
   width: var(--dropdown-width);
   z-index: 999;
 }
 /* Mobile Header */
-.bs-dropdown > :where(header) {
+.bs-dropdown-deprecated > :where(header) {
   border-bottom: 1px solid var(--bs-border-base);
   display: flex;
   justify-content: space-between;
   padding: 1.5rem;
 }
-.bs-dropdown > :where(header) :where(h3) {
+.bs-dropdown-deprecated > :where(header) :where(h3) {
   font-size: 1.25rem;
 }
-.bs-dropdown > :where(header) :where(p) {
+.bs-dropdown-deprecated > :where(header) :where(p) {
   font-size: 1rem;
 }
-.bs-dropdown > :where(header) :where(button) {
+.bs-dropdown-deprecated > :where(header) :where(button) {
   cursor: pointer;
   height: 1rem;
   width: 1rem;
 }
 /* data-shown */
-.bs-dropdown:where([data-shown]:not([data-shown="false"])) {
+.bs-dropdown-deprecated:where([data-shown]:not([data-shown="false"])) {
   --dropdown-transform: translate(0, 0);
   opacity: 1;
 }
 /* Sizing */
-.bs-dropdown:where([data-width="sm"]) {
+.bs-dropdown-deprecated:where([data-width="sm"]) {
   --dropdown-wscreen-width: 10rem;
 }
-.bs-dropdown:where([data-width="md"]),
-.bs-dropdown:where(:not([data-width])) {
+.bs-dropdown-deprecated:where([data-width="md"]),
+.bs-dropdown-deprecated:where(:not([data-width])) {
   --dropdown-wscreen-width: 20rem;
 }
-.bs-dropdown:where([data-width="lg"]) {
+.bs-dropdown-deprecated:where([data-width="lg"]) {
   --dropdown-wscreen-width: 40rem;
 }
-.bs-dropdown:where([data-width="content"]) {
+.bs-dropdown-deprecated:where([data-width="content"]) {
   --dropdown-wscreen-width: max-content;
 }
-.bs-dropdown-parent:where([data-width="anchor"]) :where(.bs-dropdown) {
+.bs-dropdown-deprecated-parent:where([data-width="anchor"]) :where(.bs-dropdown-deprecated) {
   --dropdown-wscreen-width: 100%;
 }
 /* data-top */
-.bs-dropdown:where([data-top]:not([data-top="false"])) {
+.bs-dropdown-deprecated:where([data-top]:not([data-top="false"])) {
   --dropdown-wscreen-bottom: calc(100% + 0.5rem);
   --dropdown-wscreen-top: auto;
 }
 /* data-center */
-.bs-dropdown-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown) {
+.bs-dropdown-deprecated-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown-deprecated) {
   --dropdown-transform: translate(-50%, 0);
   --dropdown-wscreen-left: 50%;
 }
 /* data-right */
-.bs-dropdown-parent:where([data-right]:not([data-right="false"])) :where(.bs-dropdown) {
+.bs-dropdown-deprecated-parent:where([data-right]:not([data-right="false"])) :where(.bs-dropdown-deprecated) {
   --dropdown-transform: translate(0, 0);
   --dropdown-wscreen-left: auto;
   --dropdown-wscreen-right: 0;
 }
 /* Overrides mobile style when not min-width 1166 */
-.bs-dropdown:where([data-no-mobile="true"]) {
+.bs-dropdown-deprecated:where([data-no-mobile="true"]) {
   --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
   --dropdown-left: var(--dropdown-wscreen-left, initial);
   --dropdown-right: var(--dropdown-wscreen-right, initial);
@@ -2648,15 +3197,15 @@ a.bs-circle-button {
 
   position: absolute;
 }
-.bs-dropdown:where([data-no-mobile="true"]) > :where(header) {
+.bs-dropdown-deprecated:where([data-no-mobile="true"]) > :where(header) {
   display: none;
 }
 @media (min-width: 1166px) {
-  .bs-dropdown-backdrop {
+  .bs-dropdown-deprecated-backdrop {
     display: none;
   }
 
-  .bs-dropdown {
+  .bs-dropdown-deprecated {
     --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
     --dropdown-left: var(--dropdown-wscreen-left, initial);
     --dropdown-right: var(--dropdown-wscreen-right, initial);
@@ -2668,31 +3217,31 @@ a.bs-circle-button {
   }
 
   /* Hide the header */
-  .bs-dropdown > :where(header) {
+  .bs-dropdown-deprecated > :where(header) {
     display: none;
   }
 }
 /* Vue Transition Styles - Only used in Vue component */
-.bs-dropdown:where(.bs-dropdown-enter-from),
-.bs-dropdown:where(.bs-dropdown-leave-to) {
+.bs-dropdown-deprecated:where(.bs-dropdown-deprecated-enter-from),
+.bs-dropdown-deprecated:where(.bs-dropdown-deprecated-leave-to) {
   opacity: 0;
   transform: var(--dropdown-transform);
 }
-.bs-dropdown:where(.bs-dropdown-enter-to),
-.bs-dropdown:where(.bs-dropdown-leave-from) {
+.bs-dropdown-deprecated:where(.bs-dropdown-deprecated-enter-to),
+.bs-dropdown-deprecated:where(.bs-dropdown-deprecated-leave-from) {
   opacity: 1;
   transform: translate(0, 0);
 }
-.bs-dropdown :where(.mobile-select-button-container) {
+.bs-dropdown-deprecated :where(.mobile-select-button-container) {
   display: none;
   overflow: hidden;
 }
 @media (max-width: 1166px) {
-  .bs-dropdown :where(.mobile-select-button-container) {
+  .bs-dropdown-deprecated :where(.mobile-select-button-container) {
     display: flex;
   }
 }
-.bs-dropdown :where(.mobile-select-button) {
+.bs-dropdown-deprecated :where(.mobile-select-button) {
   margin: .875rem;
   width: 100%;
 }
@@ -2703,7 +3252,7 @@ a.bs-circle-button {
   --col-gap: var(--bs-space-6);
   --cta-spacing: var(--bs-space-4);
   --description-font-size: var(--bs-text-base);
-  --description-line-height: var(--bs-leading-base);
+  --description-line-height: var(--bs-leading-lg);
   --description-weight: var(--bs-font-normal);
   --icon-size: 3rem;
   --title-font-size: var(--bs-text-lg);
@@ -2761,14 +3310,14 @@ a.bs-circle-button {
   --icon-size: 1.5rem;
   --title-color: var(--bs-ink-light);
   --title-font-size: var(--bs-text-md);
-  --title-line-height: var(--bs-leading-base);
+  --title-line-height: var(--bs-leading-lg);
   --title-spacing: 0;
 }
 .bs-empty-state:where([data-size^='sm']) {
   --description-font-size: var(--bs-text-sm);
   --icon-size: 2rem;
   --title-font-size: var(--bs-text-md);
-  --title-line-height: var(--bs-leading-base);
+  --title-line-height: var(--bs-leading-lg);
   --title-spacing: 0.125rem;
 }
 .bs-empty-state:where([data-size^='lg']) {
@@ -2778,7 +3327,7 @@ a.bs-circle-button {
   --icon-size: 4rem;
   --title-font-size: var(--bs-text-xl);
   --title-line-height: 110%;
-  --title-weight: var(--bs-font-bold);
+  --title-weight: var(--bs-font-semibold);
 }
 /*
 custom properties:
@@ -2812,7 +3361,7 @@ button:where(.bs-filter-button) {
   font-weight: var(--filterbtn-weight);
   height: var(--filterbtn-height);
   line-height: 1.5;
-  transition: outline-color 100ms ease-in-out;
+  transition: outline-color var(--bs-transition-fast) var(--bs-transition-ease);
   width: -moz-max-content;
   width: max-content;
 }
@@ -2833,7 +3382,7 @@ button:where(.bs-filter-button) {
   line-height: 1;
   transform: var(--filterbtn-caret-transform);
   transform-origin: center;
-  transition: var(--bs-trans-rotate180);
+  transition: transform var(--bs-transition-medium) var(--bs-transition-ease);
   width: var(--filterbtn-caret-size);
 }
 .bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
@@ -2880,68 +3429,6 @@ 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;
-  /*
-  Needs to be "none" instead of "0" so as not to interfere with calculating
-  "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
-  */
-  transform: none;
-}
-.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);
-}
 /* Containers and Labels for Checkbox/Radio */
 .bs-boolean {
   display: inline-flex;
@@ -3177,7 +3664,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 .bs-form-container :where(.bs-form-container-header-actions) :where(.bs-icon) {
   color: var(--bs-ink-medium);
   cursor: pointer;
-  transition: transform 200ms ease-in-out, color 100ms ease-in-out;
+  transition: transform var(--bs-transition-medium) var(--bs-transition-ease), color var(--bs-transition-fast) var(--bs-transition-ease);
 
   /* color utilities for specified icons */
   &:where([data-component="bs-icon-caret-down"]) {
@@ -3209,18 +3696,18 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 /* Generally applicable (all input types) */
 :where([data-required]:not([data-required="false"])) {
   color: var(--bs-ink-red);
-  font-weight: var(--bs-font-bold, 600);
+  font-weight: var(--bs-font-semibold);
 }
 :where([data-disabled]:not([data-disabled="false"]), [data-disabled]:not([data-disabled="false"]) [data-required]:not([data-required="false"])) {
   color: var(--bs-gray-400);
 }
-:where(.box) :is(input, textarea, select):where(:focus-visible),
-:where(.box) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
+:where(.bs-box) :is(input, textarea, select):where(:focus-visible),
+:where(.bs-box) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
   --offset-color: var(--bs-bg-medium);
 }
-: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-to-base);
+:where(.bs-box[data-invert]) :is(input, textarea, select):where(:focus-visible),
+:where(.bs-box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
+  --offset-color: var(--bs-bg-invert-base);
 }
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]:not([data-error="false"])),
@@ -3514,7 +4001,7 @@ data-autosize-icons="true" - see above
 }
 .bs-input-addon:where([data-variant="combobox"]) :where(button svg) {
   transform: var(--icon-btn-transform, none);
-  transition: var(--bs-trans-rotate180);
+  transition: transform var(--bs-transition-medium) var(--bs-transition-ease);
 }
 .bs-input-addon:where([data-variant="combobox"]) :where(button[data-open="true"]) {
   --icon-btn-transform: rotate(180deg);
@@ -3542,7 +4029,7 @@ data-autosize-icons="true" - see above
 .bs-input-phone .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) :where(button) :where(span) {
   filter: grayscale(1);
 }
-.bs-input-phone ul:where(.bs-dropdown-options) {
+.bs-input-phone ul:where(.bs-dropdown-options-deprecated) {
   min-width: 7.5rem;
 }
 :where(.bs-input-search) {
@@ -3565,7 +4052,7 @@ data-autosize-icons="true" - see above
   height: 100%;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  transition: transform 100ms ease-in-out;
+  transition: transform var(--bs-transition-fast) var(--bs-transition-ease);
 }
 .bs-input-search button:where(:active) {
   transform: scale(0.97);
@@ -3592,10 +4079,10 @@ data-autosize-icons="true" - see above
 }
 /* Filter variant: persist placeholder text color (`ink-light`) in dark mode */
 :where(.dark) .bs-input-search:where([data-variant="filter"]) :is(input.bs-input)::-moz-placeholder {
-  --input-placeholder: var(--bs-ink-light);  
+  --input-placeholder: var(--bs-ink-light);
 }
 :where(.dark) .bs-input-search:where([data-variant="filter"]) :is(input.bs-input)::placeholder {
-  --input-placeholder: var(--bs-ink-light);  
+  --input-placeholder: var(--bs-ink-light);
 }
 /* Filter variant: cancels out base hover state styles */
 .bs-input-addon:where([data-variant="filter"]):hover {
@@ -3619,7 +4106,7 @@ label:where(.bs-label) {
   color: var(--label-color);
   font-size: var(--bs-text-sm);
   font-weight: 600;
-  line-height: var(--bs-leading-base);
+  line-height: var(--bs-leading-lg);
 }
 /* Required asterisk */
 :where(label, legend) :where([data-required]:not([data-required="false"])),
@@ -3688,7 +4175,7 @@ label:where(.bs-label) {
   padding: 0 var(--inner-text-padding);
   pointer-events: none;
   position: relative;
-  transition: 250ms;
+  transition: var(--bs-transition-slow) var(--bs-transition-ease);
   width: var(--switch-width);
 }
 .bs-switch :where(input:checked) ~ :where(span),
@@ -3755,13 +4242,13 @@ label:where(.bs-label) {
     0 0 0 4px var(--outline-color, var(--bs-blue-base));
   outline: 2px solid transparent;
 }
-:where(.box) .bs-switch :where(input:focus-visible) + :where(span),
-:where(.box) .bs-switch:where(:focus-visible) :where(button span) {
+:where(.bs-box) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.bs-box) .bs-switch:where(:focus-visible) :where(button span) {
   --offset-color: var(--bs-bg-medium);
 }
-: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-to-base);
+:where(.bs-box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.bs-box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
+  --offset-color: var(--bs-bg-invert-base);
 }
 /* Disabled state */
 .bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
@@ -3805,7 +4292,7 @@ select,
   font-size: var(--input-text-size, var(--bs-text-base));
   font-weight: 400;
   height: 2.5rem;
-  line-height: var(--bs-leading-base);
+  line-height: var(--bs-leading-lg);
   padding-block: var(--input-padding-block, 0.0625rem);
   padding-inline: var(--input-padding-inline, 0.75rem);
 }
@@ -3917,7 +4404,7 @@ select,
   background-position: right 0.75rem center;
   background-repeat: no-repeat;
   background-size: 1em 1em;
-  padding-right: var(--bs-space-9);
+  padding-right: 2.25rem;
 }
 select[multiple],
 .bs-select[multiple] {
@@ -3954,16 +4441,13 @@ select[multiple],
 :where(button).bs-select :where(.bs-icon) {
   color: var(--bs-ink-base);
   transform: none;
-  transition-duration: 200ms;
+  transition-duration: var(--bs-transition-medium);
   transition-property: transform;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--bs-transition-ease);
 }
 :where(button).bs-select:where([data-open="true"]) :where(.bs-icon) {
   transform: rotate(180deg);
 }
-:root {
-  --bs-horizontal-nav-height: 48px;
-}
 .bs-horizontal-nav {
   --bg-color: var(--bs-bg-light);
   --top-offset: 48px;
@@ -4010,6 +4494,7 @@ select[multiple],
   width: auto;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-title > a) {
+  color: var(--bs-ink-light);
   cursor: pointer;
   display: inline;
   padding-bottom: 0;
@@ -4048,6 +4533,7 @@ select[multiple],
 }
 .bs-horizontal-nav :where(nav > ul > li > a:hover) {
   color: var(--bs-ink-blue);
+  text-decoration: none;
 }
 .bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]) {
   color: var(--bs-ink-base);
@@ -4055,6 +4541,7 @@ select[multiple],
 }
 .bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]:hover) {
   color: var(--bs-ink-blue);
+  text-decoration: none;
 }
 /* ===== Nested Nav Items ===== */
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle) {
@@ -4068,6 +4555,7 @@ select[multiple],
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle:hover) {
   color: var(--bs-ink-blue);
+  text-decoration: none;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-active="true"]) {
   color: var(--bs-ink-base);
@@ -4075,13 +4563,14 @@ select[multiple],
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-active="true"]:hover) {
   color: var(--bs-ink-blue);
+  text-decoration: none;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle-caret) {
   height: 0.75rem;
   transform: none;
-  transition-duration: 0.2s;
+  transition-duration: var(--bs-transition-medium);
   transition-property: transform;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--bs-transition-ease);
   width: 0.75rem;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle:hover ~ .bs-horizontal-nav-caret) {
@@ -4193,9 +4682,9 @@ select[multiple],
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-caret) {
   height: 0.75rem;
   transform: none;
-  transition-duration: 0.2s;
+  transition-duration: var(--bs-transition-medium);
   transition-property: transform;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--bs-transition-ease);
   width: 0.75rem;
 }
 .bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-toggle-caret) {
@@ -4213,9 +4702,9 @@ select[multiple],
   opacity: 0;
   overflow: scroll;
   scrollbar-width: none;  /* Firefox */
-  transition-duration: 200ms;
+  transition-duration: var(--bs-transition-medium);
   transition-property: opacity;
-  transition-timing-function: ease;
+  transition-timing-function: var(--bs-transition-ease);
 }
 .bs-horizontal-nav-mobile:where([data-hide-toggle="true"]) :where(.bs-horizontal-nav-mobile-menu) {
   max-height: calc(100dvh - var(--top-offset));
@@ -4238,8 +4727,7 @@ select[multiple],
   border-bottom: 1px solid var(--bs-border-base);
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a) {
   color: var(--bs-ink-light);
   cursor: pointer;
   display: flex;
@@ -4250,9 +4738,9 @@ select[multiple],
   padding-top: 0.75rem;
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a:hover),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a:hover),
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a:hover) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a:hover) {
   color: var(--bs-ink-blue);
+  text-decoration: none;
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]),
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]) {
@@ -4262,6 +4750,7 @@ select[multiple],
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]:hover),
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]:hover) {
   color: var(--bs-ink-blue);
+  text-decoration: none;
 }
 /* ===== Nested Nav Items ===== */
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle) {
@@ -4286,13 +4775,14 @@ select[multiple],
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle:hover) {
   color: var(--bs-ink-blue);
+  text-decoration: none;
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle-caret) {
   height: 0.75rem;
   transform: none;
-  transition-duration: 0.2s;
+  transition-duration: var(--bs-transition-medium);
   transition-property: transform;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--bs-transition-ease);
   width: 0.75rem;
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle-caret) {
@@ -4305,20 +4795,6 @@ select[multiple],
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] > .bs-horizontal-nav-mobile-nested-menu) {
   display: block;
 }
-/* ===== External Links ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links) {
-  margin-top: auto;
-  padding-top: 2.25rem;
-}
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-link-icon) {
-  height: 1rem;
-  width: 1rem;
-}
 /* ===== End Items ===== */
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-end-items) {
   display: flex;
@@ -4367,7 +4843,7 @@ select[multiple],
   border: 1px solid transparent;
   outline: none;
   cursor: pointer;
-  transition: all 100ms ease-in-out;
+  transition: all var(--bs-transition-fast) var(--bs-transition-ease);
 }
 /* Variant */
 .bs-inline-tab:where([data-variant="white"]) {
@@ -4419,7 +4895,7 @@ select[multiple],
   &[data-selected]:where(:focus-visible) {
     outline-offset: 0;
   }
-  
+
 }
 .bs-loader {
   --loader-dot-bg: var(--bs-blue-500);
@@ -4454,7 +4930,7 @@ select[multiple],
   --loader-width: 6rem;
 }
 /* ----- loader dots ----- */
-.bs-loader > :where(*:not(.visually-hidden)) {
+.bs-loader > :where(*:not(.bs-visually-hidden)) {
   background-color: var(--loader-dot-bg);
   border-radius: 50%;
   display: block;
@@ -4463,7 +4939,7 @@ select[multiple],
   top: var(--loader-dot-top);
   width: var(--loader-dot-size);
 }
-.bs-loader > :where(*:not(.visually-hidden)) {
+.bs-loader > :where(*:not(.bs-visually-hidden)) {
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 .bs-loader > :where(*:nth-child(1)) {
@@ -4516,162 +4992,6 @@ select[multiple],
     transform: scale(0);
   }
 }
-.bs-modal {
-  --base-modal-width: 35rem; /* 560px */
-  --lg-modal-padding: 2rem; /* 32px */
-  --lg-modal-width: 45.3125rem; /* 725px */
-  --modal-padding: 1.5rem; /* 24px */
-  --sm-modal-width: 21.25rem; /* 340px */
-  background-color: var(--bs-bg-base-to-medium);
-  border-radius: 4px;
-  bottom: 0;
-  box-shadow: var(--bs-shadow-contentHigh);
-  display: flex;
-  flex-direction: column;
-  height: -moz-fit-content;
-  height: fit-content;
-  left: 0;
-  margin: auto;
-  max-height: calc(100% - 3rem);
-  opacity: 0;
-  overflow: auto;
-  position: fixed;
-  right: 0;
-  top: 0;
-  transition-duration: 75ms;
-  transition-property: opacity;
-  transition-timing-function: ease-in-out;
-  width: calc(100% - 3rem);
-  z-index: 9999;
-}
-@media (min-width: 752px) {
-  .bs-modal {
-    max-height: min(calc(100dvh - 3rem), 40.625rem);
-    width: var(--base-modal-width);
-  }
-
-  .bs-modal:where([data-size="sm"]) {
-    width: var(--sm-modal-width);
-  }
-
-  .bs-modal:where([data-size="lg"]) {
-    width: var(--lg-modal-width);
-  }
-}
-.bs-modal:where([data-shown="true"]) {
-  opacity: 1;
-}
-/* Header Container */
-.bs-modal :where(.bs-modal-header-container) {
-  padding: var(--modal-padding);
-}
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
-  padding: var(--lg-modal-padding);
-}
-.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
-  border-bottom: 1px solid var(--bs-border-base);
-}
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-header-container) {
-  padding-left: 0;
-  padding-right: 0;
-}
-/* Header Row */
-.bs-modal :where(.bs-modal-header) {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-/* Title */
-.bs-modal :where(.bs-modal-title) {
-  flex-grow: 1;
-  font-size: var(--bs-text-lg);
-  font-weight: 400;
-  margin-right: 2rem;
-}
-/* Subtitle */
-.bs-modal :where(.bs-modal-subtitle) {
-  font-size: var(--bs-text-sm);
-  font-weight: 400;
-  margin-top: 0.5rem;
-  width: 100%;
-}
-/* Close Button */
-.bs-modal :where(.bs-modal-close-button) {
-  background-color: transparent;
-  cursor: pointer;
-  z-index: 10000;
-}
-.bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-}
-.bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
-  margin-right: var(--modal-padding);
-}
-.bs-modal:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
-  margin-right: var(--lg-modal-padding);
-}
-/* Progress */
-.bs-modal :where(.bs-modal-progress) {
-  margin-top: 1.5rem;
-  width: 100%;
-}
-/* Body */
-.bs-modal :where(.bs-modal-body) {
-  overflow-y: auto;
-  padding: var(--modal-padding);
-}
-.bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
-  padding-bottom: 0;
-  padding-top: 0;
-}
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
-  padding-left: 0;
-  padding-right: 0;
-}
-/* Has header, but no header border */
-.bs-modal:where(:not([data-header-border]):has(.bs-modal-header-container)) :where(.bs-modal-body),
-.bs-modal:where([data-header-border="false"]:has(.bs-modal-header-container)) :where(.bs-modal-body) {
-  padding-top: 0;
-}
-/* Has footer, but no footer border */
-.bs-modal:where(:not([data-footer-border])) :where(.bs-modal-body:has(~ .bs-modal-footer)),
-.bs-modal:where([data-footer-border="false"]) :where(.bs-modal-body:has(~ .bs-modal-footer)) {
-  padding-bottom: 0;
-}
-.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
-  background-color: var(--bs-bg-light);
-}
-/* Footer */
-.bs-modal :where(.bs-modal-footer) {
-  padding-bottom: 1rem;
-  padding-left: var(--modal-padding);
-  padding-right: var(--modal-padding);
-  padding-top: 1rem;
-}
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
-  padding-bottom: 1.5rem;
-  padding-left: var(--lg-modal-padding);
-  padding-right: var(--lg-modal-padding);
-  padding-top: 1.5rem;
-}
-.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
-  border-top: 1px solid var(--bs-border-base);
-}
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
-  padding-left: 0;
-  padding-right: 0;
-}
-/* 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);
@@ -4682,9 +5002,9 @@ select[multiple],
   position: fixed;
   right: 0;
   top: 0;
-  transition-duration: 75ms;
+  transition-duration: var(--bs-transition-quick);
   transition-property: opacity;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--bs-transition-ease);
   z-index: 9998;
 }
 .bs-overlay:where([data-shown]:not([data-shown="false"])) {
@@ -4738,7 +5058,7 @@ select[multiple],
   color: var(--bs-gray-50);
 }
 .bs-pagination:where([data-fixed]:not([data-fixed="false"])) {
-  background-color: var(--bs-bg-base-elevated);
+  background-color: var(--bs-bg-base-to-light);
   bottom: 0;
   left: 0;
   padding: 1rem;
@@ -4817,7 +5137,7 @@ select[multiple],
 :is(a, button).bs-pill {
   color: var(--pill-text);
   cursor: pointer;
-  transition: all 0.15s ease-in-out;
+  transition: all var(--bs-transition-moderate) var(--bs-transition-ease);
 }
 :is(a, button).bs-pill:is(:hover, :focus) {
   --pill-border: var(--bs-royal-base);
@@ -4826,17 +5146,17 @@ select[multiple],
   outline: transparent;
 }
 /* ------------------------------ Background Colors ------------------------------ */
-:where(.box[data-invert]) .bs-pill {
-  --pill-background: var(--bs-bg-invert-to-base-subtle);
+:where(.bs-box[data-invert]) .bs-pill {
+  --pill-background: var(--bs-bg-invert-light);
   --pill-text: var(--bs-gray-100);
 }
-:where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
+:where(.bs-box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
   --pill-border: var(--bs-gray-100);
 }
-:where(.dark .box[data-invert]) .bs-pill {
+:where(.dark .bs-box[data-invert]) .bs-pill {
   --pill-text: var(--bs-royal-400);
 }
-:where(.dark .box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
+:where(.dark .bs-box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
   --pill-border: var(--bs-royal-400);
 }
 /* ------------------ Generally Applicable ::Before Styles ------------------ */
@@ -4871,7 +5191,7 @@ select[multiple],
   --status-color: #16986D;
 }
 .bs-pill:where([data-status^="warning"]) {
-  --status-color: var(--bs-orange-warning);
+  --status-color: var(--bs-warning);
 }
 /* Deprecated; use "data-status disabled" instead */
 .bs-pill:where([data-status^="inactive"]) {
@@ -4949,7 +5269,7 @@ select[multiple],
 /* ------------------------------ Variant: "Inactive" Styles ------------------------------ */
 .bs-pill:where([data-variant^="inactive"]) {
   --pill-background: var(--bs-gray-base);
-  --pill-text: var(--bs-ink-invert);
+  --pill-text: var(--bs-ink-invert-base);
 }
 /* ------------------------------ Disabled Styles ------------------------------ */
 /* ----- Not to be confused with data-status="disabled" or variant "inactive".  These are for link/button/filter pills. ----- */
@@ -4977,7 +5297,7 @@ select[multiple],
 }
 /* Action button aka Follow toggle. */
 .bs-profile-details > :where(button:first-child) {
-  color: var(--profile-action-color, var(--bs-orange-warning));
+  color: var(--profile-action-color, var(--bs-warning));
   font-size: inherit;
 }
 .bs-profile-details > :where(button:first-child:hover) {
@@ -5065,7 +5385,7 @@ select[multiple],
 }
 .bs-profile-img:where([data-img-size^='xl']) {
   --profile-size: 5.75rem;
-  --profile-text: var(--bs-text-2xl);
+  --profile-text: var(--bs-text-3xl);
 }
 /* Profile with User Details */
 .bs-profile:where([data-layout]),
@@ -5113,7 +5433,7 @@ a.bs-profile:where([data-layout]):hover {
   animation: bs-spin 1s linear infinite;
   stroke-linecap: round;
   stroke-width: 10%;
-  transition: all 1s ease-in-out;
+  transition: all 1s var(--bs-transition-ease);
 }
 .bs-spinner:where(:not([data-variant="gradient"])) :where(circle) {
   animation: bs-spin 1s linear infinite, bs-stroke-change 2s linear infinite;
@@ -5172,7 +5492,7 @@ a.bs-profile:where([data-layout]):hover {
   --active-line-max-width: 0;
   --active-line-offset: 0;
   --active-line-scale: 0;
-  --active-line-transition-duration: 300ms;
+  --active-line-transition-duration: var(--bs-transition-leisurely);
   --tab-color: var(--bs-ink-light);
   --tab-cursor: pointer;
   --tab-display: inline-flex;
@@ -5242,7 +5562,7 @@ a.bs-profile:where([data-layout]):hover {
 }
 .bs-tab-list-tabs :where([role="tab"][aria-selected="true"]) {
   --tab-color: var(--bs-ink-base);
-  --tab-weight: var(--bs-font-bold);
+  --tab-weight: var(--bs-font-semibold);
 }
 /* ---- always use DT styles when tabs have yet to be width-adapted (they're invisible during this time) ---- */
 .bs-tab-list:where([data-resizing="true"]) {
@@ -5269,7 +5589,7 @@ a.bs-profile:where([data-layout]):hover {
   position: absolute;
   transform-origin: top left;
   transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
-  transition: transform var(--active-line-transition-duration) ease-in;
+  transition: transform var(--active-line-transition-duration) var(--bs-transition-ease);
   width: 100%;
 }
 /* ------------- Tab Panels ------------- */
@@ -5299,7 +5619,7 @@ a.bs-profile:where([data-layout]):hover {
 }
 .bs-tab-list-toggle:where([data-active="true"]) {
   color: var(--bs-ink-base);
-  font-weight: var(--bs-font-bold);
+  font-weight: var(--bs-font-semibold);
 }
 /* ------ WRAPPER ------ */
 .bs-table-wrap {
@@ -5431,14 +5751,14 @@ a.bs-profile:where([data-layout]):hover {
 /* ------ CELLS ------ */
 :where(.bs-table-head-cell) {
   color: var(--bs-table-head-cell-ink, var(--bs-ink-base));
-  font-weight: var(--bs-font-bold);
+  font-weight: var(--bs-font-semibold);
   border-color: inherit;
 }
 /* Couldn't use :where due to Blue Steel reset styles on <button> imposing font-size.
   Adding inherit in case consumer does custom header cell styles */
 .bs-table-head-cell .bs-sort-toggle {
   font-size: inherit;
-  font-weight: var(--bs-font-bold);
+  font-weight: var(--bs-font-semibold);
   color: inherit;
   line-height: inherit;
   letter-spacing: inherit;
@@ -5447,13 +5767,6 @@ a.bs-profile:where([data-layout]):hover {
   border-color: inherit;
 }
 /* ------ PROP: CELL-PADDING ------ */
-:root {
-  --bs-table-cell-padding-xs: var(--bs-space-2);
-  --bs-table-cell-padding-sm: var(--bs-space-3);
-  --bs-table-cell-padding-md: var(--bs-space-4);
-  --bs-table-cell-padding-lg: var(--bs-space-6);
-  --bs-table-cell-padding-xl: var(--bs-space-8);
-}
 :where(.bs-table-head-cell, .bs-table-cell) {
   padding: var(--bs-table-cell-padding);
 }
@@ -5470,7 +5783,7 @@ a.bs-profile:where([data-layout]):hover {
 /* ------ PROP: ROW HOVER ------ */
 :where(.bs-table-row-hover .bs-table-body-rowgroup .bs-table-row:hover) {
   background: var(--bs-table-row-hover, var(--bs-bg-light));
-  transition: background-color 200ms;
+  transition: background-color var(--bs-transition-medium) var(--bs-transition-ease);
 }
 /* ------ PROP: BORDERS ------ */
 /* -- borders="rows" -- */
@@ -5587,7 +5900,7 @@ th {
   background: var(--bs-bg-base);
 }
 th, td {
-  border-bottom: 1px solid var(--bs-border);
+  border-bottom: 1px solid var(--bs-border-base);
   min-width: -moz-fit-content;
   min-width: fit-content;
   padding: var(--bs-space-2);
@@ -5598,13 +5911,13 @@ table[data-borders^="none"] {
   border: 0;
 }
 table[data-borders^="all"] :where(th, td) {
-  border-left: 1px solid var(--bs-border);
+  border-left: 1px solid var(--bs-border-base);
 }
 table[data-borders^="all"] :where(th, td):last-child {
-  border-right: 1px solid var(--bs-border);
+  border-right: 1px solid var(--bs-border-base);
 }
 table[data-borders^="all"] th {
-  border-top: 1px solid var(--bs-border);
+  border-top: 1px solid var(--bs-border-base);
 }
 /* Table Rows */
 table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
@@ -5741,11 +6054,140 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
   --step-color: var(--bs-ink-red);
   --progress-step-bg: var(--bs-red-base);
 }
+/* ------------ Text Button ------------ */
+.bs-text-button {
+  --btn-focus-inset: -0.25rem -0.5rem;
+  --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-text-size: var(--bs-text-base);
+  --btn-weight: 400;
+  padding: var(--btn-padding);
+  background-color: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--btn-ink);
+  -moz-column-gap: var(--bs-space-2);
+       column-gap: var(--bs-space-2);
+  cursor: pointer;
+  font-size: var(--btn-text-size);
+  font-weight: var(--btn-weight);
+  height: var(--btn-height);
+  line-height: 1.5;
+  outline: 2px solid transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  text-decoration: none;
+  transition: all var(--bs-transition-fast) var(--bs-transition-ease);
+  vertical-align: middle;
+}
+/* ------------ Focus Styles ------------ */
+.bs-text-button::before {
+  border-color: transparent;
+  border-radius: 0.5rem;
+  border-style: solid;
+  border-width: 0.125rem;
+  content: '';
+  height: calc(100% + 0.5rem);
+  inset: var(--btn-focus-inset);
+  position: absolute;
+  transition: border-color var(--bs-transition-fast) var(--bs-transition-ease);
+  width: var(--btn-focus-pseudo-width);
+}
+.bs-text-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
+  border-color: var(--btn-main);
+}
+.bs-text-button:where(:focus-visible:not(:disabled):not([aria-disabled="true"]))::before {
+  border-color: var(--btn-main);
+  box-shadow: none;
+}
+.bs-text-button:where(:focus:not(:focus-visible):not(:disabled):not([aria-disabled="true"]))::before {
+  border-color: transparent;
+  box-shadow: none;
+}
+/* ------------ VARIANTS ------------ */
+.bs-text-button:where([data-variant^='negative']) {
+  --btn-main: var(--bs-ink-red);
+}
+/* white variant - for dark backgrounds only */
+.bs-text-button:where([data-variant^='white']) {
+  --btn-main: var(--bs-ink-white);
+}
+.bs-text-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
+  --btn-ink: var(--bs-blue-base);
+  background-color: transparent;
+  text-decoration: underline;
+}
+.bs-text-button:where([data-size^='xs']) :where(.bs-icon), 
+.bs-text-button:where([data-size^='sm']) :where(.bs-icon) {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+.bs-text-button:where(:not(:disabled):not([aria-disabled="true"]):active) {
+  box-shadow: none;
+  transform: none;
+}
+.bs-text-button:where([data-variant^='negative']),
+.bs-text-button:where([data-variant^='negative']:not(:disabled):not([aria-disabled="true"]):hover) {
+  --btn-ink: var(--bs-ink-red);
+}
+.bs-text-button:where([data-variant^='white']),
+.bs-text-button:where([data-variant^='white']:not(:disabled):not([aria-disabled="true"]):hover) {
+  --btn-ink: var(--bs-ink-white);
+  --btn-main: var(--bs-ink-white);
+}
+.bs-text-button:where([data-variant^='alt-base']) {
+  --btn-ink: var(--bs-ink-light);
+}
+.bs-text-button:where([data-variant^='alt-base']:not(:disabled):not([aria-disabled="true"]):hover) {
+  --btn-ink: var(--bs-ink-blue);
+  text-decoration: none;
+}
+.bs-text-button:where([data-variant^='alt-negative']) {
+  --btn-ink: var(--bs-ink-light);
+}
+.bs-text-button:where([data-variant^='alt-negative']:not(:disabled):not([aria-disabled="true"]):hover) {
+  --btn-ink: var(--bs-ink-red);
+  text-decoration: none;
+}
+.bs-text-button:where([data-size^='xs']) {
+  --btn-text-size: var(--bs-text-xs);
+  --btn-weight: 600;
+}
+.bs-text-button:where([data-size^='sm']) {
+  --btn-text-size: var(--bs-text-sm);
+}
+.bs-text-button:where([data-size^='md']) {
+  --btn-text-size: var(--bs-text-md);
+}
+/* ------------ Disabled Styling ------------ */
+:where(button:disabled),
+.bs-text-button:where(:disabled),
+.bs-text-button:where([aria-disabled="true"]) /* for links as buttons */ {
+  pointer-events: none;
+}
+.bs-text-button:where(:disabled),
+.bs-text-button:where([aria-disabled="true"]) {
+  --btn-ink: var(--bs-ink-disabled);
+  --btn-main: var(--bs-bg-disabled);
+  box-shadow: none;
+  transform: none;
+}
+/* ------------ links as buttons ------------ */
+a.bs-text-button {
+  align-items: center;
+  display: inline-flex;
+  outline: none;
+  vertical-align: middle;
+}
 /* Base Toast Styles */
 .bs-toast {
     --toast-transform: translate(0, calc(100% + 1.5rem));
 
-    background-color: var(--bs-bg-base-elevated);
+    background-color: var(--bs-bg-base-to-light);
     border-top: 4px solid var(--bs-blue-base);
     bottom: 1.5rem;
     box-shadow: var(--bs-shadow-contentMedium);
@@ -5756,9 +6198,9 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     position: fixed;
     right: 0;
     transform: var(--toast-transform);
-    transition-duration: 200ms;
+    transition-duration: var(--bs-transition-medium);
     transition-property: transform, opacity;
-    transition-timing-function: ease;
+    transition-timing-function: var(--bs-transition-ease);
     /* Clamp width for mobile -> full screen */
     width: clamp(17rem, calc(100vw - 3rem), 25rem);
     z-index: 999;
@@ -5789,7 +6231,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     font-weight: 400;
 }
 .bs-toast-body {
-    border-bottom: 1px solid var(--bs-border);
+    border-bottom: 1px solid var(--bs-border-base);
     color: var(--bs-ink-light);
     padding-bottom: 1rem;
     padding-left: 1rem;
@@ -5811,10 +6253,10 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* Warning Toast Styles */
 .bs-toast:where([data-variant^='warning']) {
-    border-top: 4px solid var(--bs-orange-warning);
+    border-top: 4px solid var(--bs-warning);
 }
 .bs-toast:where([data-variant^='warning']) :where(.bs-toast-header .bs-toast-header-icon) {
-    color: var(--bs-orange-warning);
+    color: var(--bs-warning);
 }
 /* Positive Toast Styles */
 .bs-toast:where([data-variant^='positive']) {
@@ -5830,229 +6272,64 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     color: var(--bs-purple-200);
 }
 /* Negative Toast Styles */
-.bs-toast:where([data-variant^='negative']) {
-    border-top: 4px solid var(--bs-red-400);
-}
-.bs-toast:where([data-variant^='negative']) :where(.bs-toast-header .bs-toast-header-icon) {
-    color: var(--bs-red-400);
-}
-@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;
-    }
-
-    .bs-toast:where([data-shown]:not([data-shown="false"])) {
-        opacity: 1;
-        transform: translate(0, 0);
-    }
-
-    .bs-toast-actions:where([data-stacked]:not([data-stacked="false"])) {
-        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 */
-    align-items: center;
-    bottom: 1.5rem;
-    display: flex;
-    flex-direction: column-reverse;
-    gap: 0.5rem;
-    left: 0;
-    position: fixed;
-    right: 0;
-    z-index: 999;
-}
-@media (min-width: 440px) {
-
-    .bs-toaster {
-        /* Non-mobile - Toasts will live on right side of the screen */
-        left: auto;
-        right: 1.5rem;
-    }
-
-}
-/* -------------------- BASE STYLES -------------------- */
-.bs-tooltip {
-    display: inline-block;
-    position: relative;
-}
-.bs-tooltip :where(.bs-tooltip-text) {
-  align-items: center;
-  background-color: var(--bs-bg-base-elevated);
-  border-radius: 4px;
-  box-shadow: var(--bs-shadow-contentLowCenter);
-  color: var(--bs-ink-violet);
-  display: flex;
-  font-size: var(--bs-text-sm);
-  justify-content: center;
-  max-width: 16rem;
-  min-width: 4rem;
-  opacity: 0;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-top: 0.25rem;
-  position: absolute;
-  transform: scale(0);
-  transition-duration: 75ms;
-  transition-property: opacity, transform;
-  transition-timing-function: ease-in-out;
-  width: -moz-max-content;
-  width: max-content;
-  z-index: 999;
-}
-:where(.dark) .bs-tooltip :where(.bs-tooltip-text) {
-  color: var(--bs-ink-base);
-}
-/* -------------------- POSITION: UNDEFINED / TOP -------------------- */
-.bs-tooltip:where(:not([data-position])) :where(.bs-tooltip-text),
-.bs-tooltip:where([data-position="top"]) :where(.bs-tooltip-text) {
-  bottom: calc(100% + 0.5rem);
-  left: 50%;
-  transform-origin: bottom center;
-  transform: translateX(-50%) scale(0);
-}
-/* Active States */
-:where(.bs-tooltip:not([data-position])):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip:not([data-position])):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip:not([data-position]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top"])[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: translateX(-50%) scale(1);
-}
-/* -------------------- POSITION: BOTTOM -------------------- */
-.bs-tooltip:where([data-position="bottom"]) :where(.bs-tooltip-text) {
-  left: 50%;
-  top: calc(100% + 0.5rem);
-  transform-origin: top center;
-  transform: translateX(-50%) scale(0);
-}
-/* Active States */
-:where(.bs-tooltip[data-position="bottom"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom"])[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: translateX(-50%) scale(1);
-}
-/* -------------------- POSITION: LEFT -------------------- */
-.bs-tooltip:where([data-position="left"]) :where(.bs-tooltip-text) {
-  right: calc(100% + 0.5rem);
-  top: 50%;
-  transform-origin: center right;
-  transform: translateY(-50%) scale(0);
-}
-/* Active States */
-:where(.bs-tooltip[data-position="left"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="left"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="left"])[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: translateY(-50%) scale(1);
-}
-/* -------------------- POSITION: RIGHT -------------------- */
-.bs-tooltip:where([data-position="right"]) :where(.bs-tooltip-text) {
-  left: calc(100% + 0.5rem);
-  top: 50%;
-  transform-origin: center left;
-  transform: translateY(-50%) scale(0);
-}
-:where(.bs-tooltip[data-position="right"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="right"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="right"])[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: translateY(-50%) scale(1);
-}
-/* -------------------- POSITION: CORNERS -------------------- */
-/* top-left */
-.bs-tooltip:where([data-position="top-left"]) :where(.bs-tooltip-text) {
-  bottom: calc(100% + 0.5rem);
-  right: calc(100% + 0.5rem);
-  transform-origin: bottom right;
-}
-/* top-right */
-.bs-tooltip:where([data-position="top-right"]) :where(.bs-tooltip-text) {
-  bottom: calc(100% + 0.5rem);
-  left: calc(100% + 0.5rem);
-  transform-origin: bottom left;
-}
-/* bottom-left */
-.bs-tooltip:where([data-position="bottom-left"]) :where(.bs-tooltip-text) {
-  right: calc(100% + 0.5rem);
-  top: calc(100% + 0.5rem);
-  transform-origin: top right;
-}
-/* bottom-right */
-.bs-tooltip:where([data-position="bottom-right"]) :where(.bs-tooltip-text) {
-  left: calc(100% + 0.5rem);
-  top: calc(100% + 0.5rem);
-  transform-origin: top left;
-}
-/* Active States */
-:where(.bs-tooltip[data-position="top-left"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-left"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: scale(1);
-}
-/* -------------------- DISABLED -------------------- */
-/*
-Don't display unless data-shown is present
-This must go last to properly override the other classes
-*/
-:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):has(:focus-visible) :where(.bs-tooltip-text) {
-  opacity: 0;
-  transform: scale(0);
+.bs-toast:where([data-variant^='negative']) {
+    border-top: 4px solid var(--bs-red-400);
 }
-:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):has(:focus-visible) :where(.bs-tooltip-text) {
-  opacity: 0;
-  transform: scale(0);
+.bs-toast:where([data-variant^='negative']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-red-400);
 }
-/* -------------------- COMPONENT-SPECIFIC STYLES -------------------- */
-.bs-tooltip :where(.bs-tooltip-text.escaped) {
-  opacity: 0;
-  transform: scale(0.5);
+@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;
+    }
+
+    .bs-toast:where([data-shown]:not([data-shown="false"])) {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+
+    .bs-toast-actions:where([data-stacked]:not([data-stacked="false"])) {
+        flex-direction: row;
+    }
 }
-.bs-tooltip :where(.bs-tooltip-text.escaped-x) {
-  opacity: 0;
-  transform: translateX(-50%) scale(0.5);
+/* 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-tooltip :where(.bs-tooltip-text.escaped-y) {
-  opacity: 0;
-  transform: translateY(-50%) scale(0.5);
+.bs-toast:where(.bs-toast-enter-to),
+.bs-toast:where(.bs-toast-leave-from) {
+    opacity: 1;
+    transform: translate(0, 0);
 }
-:root {
-  --bs-vertical-nav-width: 9.875rem;
-  --bs-vertical-nav-narrow-width: 4.5rem;
+/* Container for holding all toasts that will be visible */
+.bs-toaster {
+    /* Mobile - Center the toasts on the screen */
+    align-items: center;
+    bottom: 1.5rem;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: 999;
+}
+@media (min-width: 440px) {
+
+    .bs-toaster {
+        /* Non-mobile - Toasts will live on right side of the screen */
+        left: auto;
+        right: 1.5rem;
+    }
+
 }
 .bs-vertical-nav {
   --active-color: rgba(255, 255, 255, 0.25);
@@ -6078,7 +6355,7 @@ This must go last to properly override the other classes
   scrollbar-width: none;  /* Firefox */
   top: var(--top-offset);
   /* Slight delay for visibility to change prior to opacity */
-  transition: opacity 200ms ease 10ms;
+  transition: opacity var(--bs-transition-medium) var(--bs-transition-ease) 10ms;
   visibility: hidden;
   width: auto;
   z-index: 1000;
@@ -6161,9 +6438,9 @@ This must go last to properly override the other classes
 .bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
   height: 0.75rem;
   transform: none;
-  transition-duration: 0.2s;
+  transition-duration: var(--bs-transition-medium);
   transition-property: transform;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--bs-transition-ease);
   width: 0.75rem;
 }
 .bs-vertical-nav :where(.bs-vertical-nav-section[data-collapsed="true"] .bs-vertical-nav-section-toggle-caret) {
@@ -6187,6 +6464,7 @@ This must go last to properly override the other classes
 .bs-vertical-nav :where(ul li a) {
   align-items: center;
   border-radius: 4px;
+  color: var(--bs-white);
   cursor: pointer;
   display: flex;
   font-size: 1rem;
@@ -6199,6 +6477,9 @@ This must go last to properly override the other classes
   padding-top: 0.75rem;
   width: 100%;
 }
+.bs-vertical-nav :where(ul li a:hover) {
+  text-decoration: none;
+}
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(ul li a) {
     font-size: 0.875rem;
@@ -6300,3 +6581,444 @@ This must go last to properly override the other classes
 .bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-end-items) {
   display: none;
 }
+/* 
+  POP SYSTEM COMPONENTS
+  Components that are built on top of BsPopover. The popover.css must come first. 
+*/
+.bs-popover-wrap {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: var(--bs-popover-z-index);
+}
+.bs-popover-wrap .bs-backdrop {
+  z-index: -1;
+}
+.bs-popover {
+  /* absolute positioning is needed for floating-ui, i.e. to anchor to element (is unset if anchored to viewport) */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  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 */
+}
+.bs-popover-close-button {
+  position: absolute;
+  top: var(--bs-space-2);
+  right: var(--bs-space-2);
+  padding: var(--bs-space-2); /* to make a bit nicer hit target */
+  background: transparent;
+  cursor: pointer;
+}
+/* -- SIZING -- */
+/* HJ TODO: These are not final, I just added something quick to get things started. */
+.bs-popover:where([data-size="sm"]) {
+  width: 16rem;
+}
+.bs-popover:where([data-size="md"]) {
+  width: 20rem;
+}
+.bs-popover:where([data-size="lg"]) {
+  width: 24rem;
+}
+/* -- PLACEMENT WHEN ANCHORED TO VIEWPORT -- */
+.bs-popover:where([data-place-self]) {
+  /* undo default absolute positioning required by floating-ui, since anchoring to viewport doesn't use floating-ui */
+  position: relative;
+  top: unset;
+  left: unset;
+  margin: var(--bs-space-6) 2.25rem; 
+}
+/* CENTER */
+.bs-popover:where([data-place-self="center"]) { 
+  place-self: center; 
+}
+/* TOP OPTIONS... */
+.bs-popover:where([data-place-self="top-start"]) { 
+  place-self: start start; 
+}
+.bs-popover:where([data-place-self="top"]) { 
+  place-self: start center; 
+}
+.bs-popover:where([data-place-self="top-end"]) { 
+  place-self: start end; 
+}
+/* RIGHT OPTIONS... */
+.bs-popover:where([data-place-self="right-start"]) { 
+  place-self: start end;
+}
+.bs-popover:where([data-place-self="right"]) {
+  place-self: center end; 
+}
+.bs-popover:where([data-place-self="right-end"]) { 
+  place-self: end end; 
+}
+/* BOTTOM OPTIONS... */
+.bs-popover:where([data-place-self="bottom-start"]) { 
+  place-self: end start; 
+}
+.bs-popover:where([data-place-self="bottom"]) { 
+  place-self: end center; 
+}
+.bs-popover:where([data-place-self="bottom-end"]) { 
+  place-self: end end; 
+}
+/* LEFT OPTIONS... */
+.bs-popover:where([data-place-self="left-start"]) { 
+  place-self: start start; 
+}
+.bs-popover:where([data-place-self="left"]) { 
+  place-self: center start; 
+}
+.bs-popover:where([data-place-self="left-end"]) { 
+  place-self: end start; 
+}
+/* -- TRANSITIONS -- */
+.bs-popover-enter-active,
+.bs-popover-leave-active {
+  transition-duration: var(--bs-popover-transition-duration)
+}
+.bs-popover-enter-active .bs-backdrop,
+.bs-popover-leave-active .bs-backdrop {
+  transition-property: opacity;
+  transition-duration: var(--bs-popover-transition-duration);
+  transition-timing-function: var(--bs-transition-cubic);
+}
+.bs-popover-enter-from .bs-backdrop,
+.bs-popover-leave-to .bs-backdrop {
+  opacity: 0;
+}
+.bs-popover-enter-active .bs-popover,
+.bs-popover-leave-active .bs-popover {
+  transition-property: opacity, transform;
+  transition-duration: var(--bs-popover-transition-duration);
+  transition-timing-function: var(--bs-transition-cubic);
+}
+.bs-popover-enter-from .bs-popover,
+.bs-popover-leave-to .bs-popover {
+  opacity: 0;
+  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.
+*/
+.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;
+}
+/* -- 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);
+}
+/* -- HEADER -- */
+.bs-flyout-header {
+  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;
+  line-height: var(--bs-leading-regular);
+}
+.bs-flyout-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"]) {
+  border-bottom: 1px solid var(--bs-border-base);
+}
+/* -- BODY -- */
+.bs-flyout-body {
+  flex: 1;
+  padding: 0 var(--bs-flyout-padding);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+/* no header exists */
+.bs-flyout:where(:not(:has(.bs-flyout-header))) :where(.bs-flyout-body) {
+  padding-top: var(--bs-flyout-padding-top);
+}
+/* no footer exists */
+.bs-flyout:where(:not(:has(.bs-flyout-footer))) :where(.bs-flyout-body) {
+  padding-bottom: var(--bs-flyout-padding);
+}
+/* header border exists */
+.bs-flyout:where(:has(.bs-flyout-header[data-border="true"])) :where(.bs-flyout-body) {
+  padding-top: var(--bs-flyout-padding);
+}
+/* footer border exists */
+.bs-flyout:where(:has(.bs-flyout-footer[data-border="true"])) :where(.bs-flyout-body) {
+  padding-bottom: var(--bs-flyout-padding);
+}
+/* -- FOOTER -- */
+.bs-flyout-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--bs-space-6);
+  flex-shrink: 0;
+  padding: var(--bs-space-6);
+}
+/* with border */
+.bs-flyout-footer:where([data-border="true"]) {
+  border-top: 1px solid var(--bs-border-base);
+}
+/* -- SIZING -- */
+.bs-flyout {
+  height: 100dvh;
+  max-height: unset;
+}
+.bs-flyout:where([data-size="sm"]) {
+  width: 22.5rem; /* 360px */
+}
+.bs-flyout:where([data-size="md"]) {
+  width: 28.75rem; /* 460px */
+}
+.bs-flyout:where([data-size="lg"]) {
+  width: 33.4375rem /* 535px */;
+}
+/* -- 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 {
+  transition-duration: var(--bs-popover-transition-duration);
+}
+.bs-flyout-enter-active .bs-backdrop,
+.bs-flyout-leave-active .bs-backdrop {
+  transition-property: opacity;
+  transition-duration: var(--bs-transition-leisurely);
+  transition-timing-function: var(--bs-transition-cubic);
+}
+.bs-flyout-enter-from .bs-backdrop,
+.bs-flyout-leave-to .bs-backdrop {
+  opacity: 0;
+}
+.bs-flyout-enter-active .bs-flyout,
+.bs-flyout-leave-active .bs-flyout {
+  transition-property: transform;
+  transition-duration: var(--bs-popover-transition-duration);
+  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: translateX(-105%);
+}
+.bs-flyout-enter-from .bs-flyout[data-place-self="right"],
+.bs-flyout-leave-to .bs-flyout[data-place-self="right"] {
+  transform: translateX(105%);
+}
+/*
+  HEADS-UP:
+  BsModal inherits base styles from its BsPopover root element
+  ...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;
+  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);
+}
+.bs-modal-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;
+  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);
+}
+/* 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);
+}
+/* -- SIZING -- */
+.bs-modal {
+  width: calc(100dvw - 3rem);
+  height: -moz-fit-content;
+  height: fit-content;
+  max-height: calc(100dvh - 3rem);
+}
+@media (min-width: 752px) {
+  .bs-modal {
+    max-height: min(calc(100dvh - 3rem), 40.625rem);
+  }
+
+  .bs-modal:where([data-size="sm"]) {
+    width: var(--bs-modal-sm-width);
+  }
+
+  .bs-modal:where([data-size="md"]) {
+    width: var(--bs-modal-md-width);
+  }
+
+  .bs-modal:where([data-size="lg"]) {
+    width: var(--bs-modal-lg-width);
+  }
+}
+/* -- TRANSITIONS -- */
+.bs-modal-enter-active,
+.bs-modal-leave-active {
+  transition-duration: var(--bs-popover-transition-duration);
+}
+.bs-modal-enter-active .bs-backdrop,
+.bs-modal-leave-active .bs-backdrop {
+  transition-property: opacity;
+  transition-duration: var(--bs-transition-leisurely);
+  transition-timing-function: var(--bs-transition-cubic);
+}
+.bs-modal-enter-from .bs-backdrop,
+.bs-modal-leave-to .bs-backdrop {
+  opacity: 0;
+}
+.bs-modal-enter-active .bs-modal,
+.bs-modal-leave-active .bs-modal {
+  transition-property: opacity, transform;
+  transition-duration: var(--bs-popover-transition-duration);
+  transition-timing-function: var(--bs-transition-cubic);
+}
+.bs-modal-enter-from .bs-modal,
+.bs-modal-leave-to .bs-modal {
+  opacity: 0;
+  transform: scale(.95);
+}
+/*
+    The v3 BsTooltip is css coming soon...
+*/