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

package/dist/wwt-bsds.css

@@ -25,6 +25,7 @@
   --bs-cobalt-200: #948be1;
   --bs-cobalt-300: #5f52d3;
   --bs-cobalt-400: #2918c4;
+  --bs-gold-10: rgba(235, 223, 212, 0.1);
   --bs-gold-100: #f9f5f1;
   --bs-gold-200: #ebdfd4;
   --bs-gold-300: #e0c7ac;
@@ -110,98 +111,79 @@
   --bs-yellow-100: #fdeed3;
   --bs-yellow-200: #fcdea7;
   --bs-yellow-300: #f8c464;
-  --bs-yellow-400: #ffb834;
-  --bs-yellow-450: #c18300;
+  --bs-yellow-400: #c18300;
   --bs-yellow-500: #805a14;
   --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%,
-    #ee282a 35%,
-    #ffffff 50%,
+    #ee282a 35.01%,
+    #fff 49.99%,
     #0086ea 65%,
     #1c0087 100%
   );
   --bs-gradient-light: linear-gradient(
     90deg,
     #1c0087 0%,
-    #ee282a 20%,
-    #ee282a 40%,
-    #1c0087 50%,
+    #ee282a 19.93%,
+    #ee282a 39.91%,
+    #1c0087 49.9%,
     #0086ea 60%,
-    #0086ea 80%,
+    #0086ea 79.99%,
     #1c0087 100%
   );
   --bs-gradient-line: linear-gradient(
     90deg,
     #ee282a 0%,
-    #1c0087 50%,
+    #1c0087 49.35%,
     #0086ea 100%
   );
-  --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%,
+  --bs-gradient-blue-center: radial-gradient(
+    154.77% 52.27% at 47.08% 49.86%,
     #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%,
+  --bs-gradient-blue-mid-left: linear-gradient(
+    90deg,
     #162fb4 0%,
-    #1d1e48 100%
+    #1d1e48 98.9%
   );
-  --bs-gradient-blue-mid-left: radial-gradient(
-    347.1% 117.22% at -9.27% 49.86%,
-    #162fb4 8.19%,
-    #1d1e48 100%
+  --bs-gradient-blue-mid-right: linear-gradient(
+    90deg,
+    #1d1e48 0%,
+    #162fb4 99.27%
   );
-  --bs-gradient-blue-mid-right: radial-gradient(
-    347.1% 117.22% at 109.27% 49.86%,
-    #162fb4 8.19%,
-    #1d1e48 100%
+  --bs-gradient-blue-bottom-center: radial-gradient(
+    100% 100% at 50% 0%,
+    #1d1e48 0%,
+    #162fb4 100%
   );
-  --bs-gradient-blue-center: radial-gradient(
-    172.57% 58.28% at 50% 49.86%,
-    #162fb4 0%,
+  --bs-gradient-blue-top-center: radial-gradient(
+    96.7% 96.7% at 50% 0%,
+    #162fb4 5%,
     #1d1e48 100%
   );
-  --bs-gradient-blue-bottom-left: radial-gradient(
-    312.54% 141.42% at 0% 100%,
+  --bs-gradient-blue-top-left: radial-gradient(
+    312.54% 141.42% at 0% 0%,
     #162fb4 0%,
     #1d1e48 100%
   );
-  --bs-gradient-blue-bottom-center: radial-gradient(
-    201.14% 201.14% at 50% 151.28%,
-    #162fb4 26.06%,
-    #1d1e48 100%
-  );
   --bs-gradient-blue-bottom-right: radial-gradient(
-    312.54% 141.42% at 100% 100%,
+    312.54% 141.42% at 0% 0%,
+    #1d1e48 0%,
+    #162fb4 100%
+  );
+  --bs-gradient-blue-top-right: radial-gradient(
+    312.54% 141.42% at 100% 0%,
     #162fb4 0%,
     #1d1e48 100%
   );
+  --bs-gradient-blue-bottom-left: radial-gradient(
+    312.54% 141.42% at 100% 0%,
+    #1d1e48 0%,
+    #162fb4 100%
+  );
   --bs-gradient-light-blue-transparent: radial-gradient(
     236% 114.71% at 94.24% 7.6%,
     rgba(153, 207, 247, 0.2) 0%,
@@ -214,8 +196,8 @@
   );
   --bs-gradient-light-gray: linear-gradient(
     180deg,
-    #f7f7fc 24.82%,
-    #f0f0fa 100%
+    var(--background-light, #f7f7fc) 24.82%,
+    var(--background-medium, #f0f0fa) 100%
   );
   --bs-gradient-softchoice-light: linear-gradient(
     252deg,
@@ -227,6 +209,24 @@
     #ff5100 66.87%,
     #7d00ff 97.9%
   );
+  --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-space-0: var(--bs-space-none);
   --bs-space-1: var(--bs-space-3xs);
   --bs-space-2: var(--bs-space-2xs);
@@ -263,6 +263,7 @@
   --bs-font-light: 300;
   --bs-font-normal: 400;
   --bs-font-semibold: 600;
+  --bs-font-bold: 600;
   --bs-leading-none: 1;
   --bs-leading-sm: 1.1;
   --bs-leading-regular: 1.3;
@@ -297,8 +298,8 @@
   /* Navigation */
   --bs-horizontal-nav-height: 48px;
   --bs-vertical-nav-narrow-width: 4.5rem;
-  --bs-vertical-nav-width: 9.875rem;
-  --bs-vertical-nav-collapsed-width: 4rem;
+  --bs-vertical-nav-width: 11.25rem;
+  --bs-vertical-nav-collapsed-width: 4.5rem;
   /* Dynamic width set by the navigation component for page layout */
   --bs-page-nav-width: 0px;
 
@@ -318,7 +319,7 @@
   --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-disabled: rgba(78, 79, 95, 0.6); /* gray-400 at 60% */
   --bs-ink-invert-base: var(--bs-white);
   --bs-ink-invert-medium: var(--bs-gray-100);
   --bs-ink-invert-light: var(--bs-gray-200);
@@ -327,37 +328,12 @@
   --bs-ink-accent-1: var(--bs-royal-400);
   --bs-ink-accent-2: var(--bs-violet-400);
   --bs-ink-accent-3: var(--bs-pink-500);
-  --bs-ink-negative: var(--bs-red-500);
-  --bs-ink-ecomm-positive: var(--bs-green-500);
-  --bs-ink-positive: var(--bs-purple-400);
+  --bs-ink-accent-4: var(--bs-purple-400);
+  --bs-ink-positive: var(--bs-green-500);
   --bs-ink-warning: var(--bs-orange-500);
+  --bs-ink-negative: var(--bs-red-500);
   --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);
-
   /* Primary */
   --bs-primary-base-fixed: var(--bs-blue-400);
   --bs-primary-base: var(--bs-blue-400);
@@ -374,13 +350,6 @@
   --bs-secondary-lightest: var(--bs-plum-100);
   --bs-secondary-highlight: var(--bs-plum-10);
 
-  /* Neutral */
-  --bs-neutral-dark: var(--bs-gray-500);
-  --bs-neutral-base: var(--bs-gray-400);
-  --bs-neutral-medium: var(--bs-gray-300);
-  --bs-neutral-light: var(--bs-gray-200);
-  --bs-neutral-lightest: var(--bs-gray-100);
-
   /* Accent 1 */
   --bs-accent-1-base-fixed: var(--bs-royal-400);
   --bs-accent-1-base: var(--bs-royal-400);
@@ -406,46 +375,91 @@
   --bs-accent-3-highlight: var(--bs-pink-10);
 
   /* Accent 4 */
-  --bs-accent-4-base: var(--bs-navy-400);
-  --bs-accent-4-medium: var(--bs-navy-300);
-  --bs-accent-4-light: var(--bs-navy-200);
-  --bs-accent-4-lightest: var(--bs-navy-100);
-  --bs-accent-4-highlight: var(--bs-navy-10);
+  --bs-accent-4-base-fixed: var(--bs-purple-400);
+  --bs-accent-4-base: var(--bs-purple-400);
+  --bs-accent-4-medium: var(--bs-purple-300);
+  --bs-accent-4-light: var(--bs-purple-200);
+  --bs-accent-4-lightest: var(--bs-purple-100);
+  --bs-accent-4-highlight: var(--bs-purple-10);
+
+  /* Accent 5 */
+  --bs-accent-5-base: var(--bs-orange-400);
+  --bs-accent-5-medium: var(--bs-orange-300);
+  --bs-accent-5-light: var(--bs-orange-200);
+  --bs-accent-5-lightest: var(--bs-orange-100);
+  --bs-accent-5-highlight: var(--bs-orange-10);
+
+  /* Accent 6 */
+  --bs-accent-6-base: var(--bs-red-400);
+  --bs-accent-6-medium: var(--bs-red-300);
+  --bs-accent-6-light: var(--bs-red-200);
+  --bs-accent-6-lightest: var(--bs-red-100);
+  --bs-accent-6-highlight: var(--bs-red-10);
+
+  /* Accent 7 */
+  --bs-accent-7-base: var(--bs-navy-400);
+  --bs-accent-7-medium: var(--bs-navy-300);
+  --bs-accent-7-light: var(--bs-navy-200);
+  --bs-accent-7-lightest: var(--bs-navy-100);
+  --bs-accent-7-highlight: var(--bs-navy-10);
+
+  /* Neutral */
+  --bs-neutral-dark: var(--bs-gray-500);
+  --bs-neutral-base: var(--bs-gray-400);
+  --bs-neutral-medium: var(--bs-gray-300);
+  --bs-neutral-light: var(--bs-gray-200);
+  --bs-neutral-lightest: var(--bs-gray-100);
 
   /* Positive */
-  --bs-positive-base-fixed: var(--bs-purple-400);
-  --bs-positive-base: var(--bs-purple-400);
-  --bs-positive-medium: var(--bs-purple-300);
-  --bs-positive-light: var(--bs-purple-200);
-  --bs-positive-lightest: var(--bs-purple-100);
-  --bs-positive-highlight: var(--bs-purple-10);
-
-  /* Ecommerce Positive */
-  --bs-ecomm-positive-base-fixed: var(--bs-green-400);
-  --bs-ecomm-positive-base: var(--bs-green-400);
-  --bs-ecomm-positive-medium: var(--bs-green-300);
-  --bs-ecomm-positive-light: var(--bs-green-200);
-  --bs-ecomm-positive-lightest: var(--bs-green-100);
-  --bs-ecomm-positive-highlight: var(--bs-green-10);
+  --bs-positive-base: var(--bs-green-400);
+  --bs-positive-medium: var(--bs-green-300);
+  --bs-positive-highlight: var(--bs-green-10);
 
   /* Warning */
-  --bs-warning-dark: var(--bs-orange-500);
-  --bs-warning-base: var(--bs-orange-400);
+  --bs-warning-base: var(--bs-orange-500);
   --bs-warning-medium: var(--bs-orange-300);
-  --bs-warning-light: var(--bs-orange-200);
-  --bs-warning-lightest: var(--bs-orange-100);
   --bs-warning-highlight: var(--bs-orange-10);
 
   /* Negative */
-  --bs-negative-dark: var(--bs-red-500);
-  --bs-negative-base: var(--bs-red-400);
+  --bs-negative-base: var(--bs-red-500);
   --bs-negative-medium: var(--bs-red-300);
-  --bs-negative-light: var(--bs-red-200);
-  --bs-negative-lightest: var(--bs-red-100);
   --bs-negative-highlight: var(--bs-red-10);
 
-  
+  /* 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-dark: var(--bs-gray-300);
+  --bs-border-base: var(--bs-gray-200);
+  --bs-border-medium: var(--bs-gray-150);
+  --bs-border-light: var(--bs-gray-100);
+  --bs-border-medium-to-light: var(--bs-gray-150);
+  --bs-border-input: rgba(99, 66, 145, 0.75); /* violet-300 at 75% */
+  --bs-border-active: var(--bs-blue-400);
+  --bs-border-error: var(--bs-red-500);
+
   /* -------------- Deprecated Color Tokens -------------- */
+  /* Ink */
+  --bs-ink-blue: var(--bs-blue-500); /* replaced by Ink Primary */
+  --bs-ink-orange: var(--bs-orange-500); /* replaced by Ink Warning */
+  --bs-ink-pink: var(--bs-pink-500); /* replaced by Ink Accent 3 */
+  --bs-ink-plum: var(--bs-plum-400); /* replaced by Ink Secondary */
+  --bs-ink-purple: var(--bs-purple-400); /* replaced by Ink Accent 4 */
+  --bs-ink-red: var(--bs-red-500); /* replaced by Ink Negative */
+  --bs-ink-royal: var(--bs-royal-400); /* replaced by Ink Accent 1 */
+  --bs-ink-violet: var(--bs-violet-400); /* replaced by Ink Accent 2 */
 
   /* Blue (replaced by Primary) */
   --bs-blue-base: var(--bs-blue-400);
@@ -460,7 +474,7 @@
   --bs-gray-light: var(--bs-gray-200);
   --bs-gray-lightest: var(--bs-gray-100);
 
-  /* Navy (replaced by Accent 4) */
+  /* Navy (replaced by Accent 7) */
   --bs-navy-base: var(--bs-navy-400);
   --bs-navy-medium: var(--bs-navy-300);
   --bs-navy-light: var(--bs-navy-200);
@@ -485,7 +499,7 @@
   --bs-plum-light: var(--bs-plum-200);
   --bs-plum-lightest: var(--bs-plum-100);
 
-  /* Purple (replaced by Positive) */
+  /* Purple (replaced by Accent 4) */
   --bs-purple-base: var(--bs-purple-400);
   --bs-purple-medium: var(--bs-purple-300);
   --bs-purple-light: var(--bs-purple-200);
@@ -508,121 +522,107 @@
   --bs-violet-medium: var(--bs-violet-300);
   --bs-violet-light: var(--bs-violet-200);
   --bs-violet-lightest: var(--bs-violet-100);
-
-
-  /* ------------ Deprecated Ink Color Tokens ------------ */
-
-  /* Ink Blue (replaced by Ink Primary) */
-  --bs-ink-blue: var(--bs-blue-500);
-
-  /* Ink Orange (replaced by Ink Warning) */
-  --bs-ink-orange: var(--bs-orange-500);
-
-  /* Ink Pink (replaced by Ink Accent 3) */
-  --bs-ink-pink: var(--bs-pink-500);
-
-  /* Ink Plum (replaced by Ink Secondary) */
-  --bs-ink-plum: var(--bs-plum-400);
-
-  /* Ink Purple (replaced by Ink Positive) */
-  --bs-ink-purple: var(--bs-purple-400);
-
-  /* Ink Red (replaced by Ink Negative) */
-  --bs-ink-red: var(--bs-red-500);
-
-  /* Ink Royal (replaced by Ink Accent 1) */
-  --bs-ink-royal: var(--bs-royal-400);
-
-  /* Ink Violet (replaced by Ink Accent 2) */
-  --bs-ink-violet: var(--bs-violet-400);
 }
-/* Token Overrides */
+/* put browser scrollbars into dark mode */
+/* html selector needed since .dark class gets added to body, but scrolling may be on <html> */
+html:where(:has(.dark)),
+.dark {
+  color-scheme: dark;
+}
 .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-medium: var(--bs-gray-500);
-  --bs-ink-invert-light: var(--bs-gray-400);
+  --bs-ink-disabled: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
   --bs-ink-primary: var(--bs-blue-100);
   --bs-ink-secondary: var(--bs-plum-100);
   --bs-ink-accent-1: var(--bs-royal-200);
-  --bs-ink-accent-2: var(--bs-violet-200);
+  --bs-ink-accent-2: var(--bs-violet-100);
   --bs-ink-accent-3: var(--bs-pink-200);
-  --bs-ink-negative: var(--bs-red-200);
-  --bs-ink-ecomm-positive: var(--bs-green-200);
-  --bs-ink-positive: var(--bs-purple-200);
+  --bs-ink-accent-4: var(--bs-purple-200);
+  --bs-ink-positive: var(--bs-green-200);
   --bs-ink-warning: var(--bs-orange-200);
+  --bs-ink-negative: var(--bs-red-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);
+  --bs-ink-invert-base: var(--bs-black);
+  --bs-ink-invert-medium: var(--bs-gray-500);
+  --bs-ink-invert-light: var(--bs-gray-400);
 
   /* Primary */
   --bs-primary-base: var(--bs-blue-300);
+  --bs-primary-medium: var(--bs-blue-200);
 
   /* Secondary */
   --bs-secondary-base: var(--bs-plum-300);
   --bs-secondary-medium: var(--bs-plum-200);
 
-  /* Neutral */
-  --bs-neutral-dark: var(--bs-gray-100);
-  --bs-neutral-base: var(--bs-gray-200);
-  --bs-neutral-medium: var(--bs-gray-300);
-  --bs-neutral-light: var(--bs-gray-400);
-  --bs-neutral-lightest: var(--bs-gray-500);
-
   /* Accent 1 */
   --bs-accent-1-base: var(--bs-royal-300);
   --bs-accent-1-medium: var(--bs-royal-200);
 
   /* Accent 2 */
   --bs-accent-2-base: var(--bs-violet-300);
+  --bs-accent-2-medium: var(--bs-violet-200);
 
   /* Accent 3 */
   --bs-accent-3-base: var(--bs-pink-300);
+  --bs-accent-3-medium: var(--bs-pink-200);
 
   /* Accent 4 */
-  --bs-accent-4-base: var(--bs-navy-200);
+  --bs-accent-4-base: var(--bs-purple-300);
+  --bs-accent-4-medium: var(--bs-purple-200);
 
-  /* Positive */
-  --bs-positive-base: var(--bs-purple-300);
+  /* Accent 5 */
+  --bs-accent-5-base: var(--bs-orange-300);
+  --bs-accent-5-medium: var(--bs-orange-200);
 
-  /* Ecommerce Positive */
-  --bs-ecomm-positive-base: var(--bs-green-300);
+  /* Accent 6 */
+  --bs-accent-6-base: var(--bs-red-300);
+
+  /* Accent 7 */
+  --bs-accent-7-base: var(--bs-navy-300);
+  --bs-accent-7-medium: var(--bs-navy-200);
+
+  /* Neutral */
+  --bs-neutral-dark: var(--bs-gray-100);
+  --bs-neutral-base: var(--bs-gray-200);
+  --bs-neutral-medium: var(--bs-gray-300);
+  --bs-neutral-light: var(--bs-gray-400);
+  --bs-neutral-lightest: var(--bs-gray-500);
 
   /* Warning */
-  --bs-warning-dark: var(--bs-orange-400);
-  --bs-warning-base: var(--bs-orange-300);
+  --bs-warning-base: var(--bs-orange-400);
+  --bs-warning-medium: var(--bs-orange-200);
 
   /* Negative */
-  --bs-negative-dark: var(--bs-red-400);
   --bs-negative-base: var(--bs-red-300);
+  --bs-negative-medium: var(--bs-red-200);
 
+  /* 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); /* gray-400 at 30% */
+  --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-dark: var(--bs-gray-300);
+  --bs-border-base: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
+  --bs-border-medium: var(--bs-gray-400);
+  --bs-border-light: rgba(78, 79, 95, 0.5); /* gray-400 at 50% */
+  --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* gray-400 at 50% */
+  --bs-border-input: var(--bs-violet-200);
+  --bs-border-active: var(--bs-blue-300);
+  --bs-border-error: var(--bs-red-300);
 
   /* 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);
@@ -640,9 +640,16 @@
   --bs-shadow-drawerRight: 16px 20px 40px 0 #000;
   --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
 
-
-
   /* -------------- Deprecated Color Tokens -------------- */
+  /* Ink */
+  --bs-ink-blue: var(--bs-blue-200); /* replaced by Ink Primary */
+  --bs-ink-orange: var(--bs-orange-200); /* replaced by Ink Warning */
+  --bs-ink-pink: var(--bs-pink-200); /* replaced by Ink Accent 3 */
+  --bs-ink-plum: var(--bs-plum-100); /* replaced by Ink Secondary */
+  --bs-ink-purple: var(--bs-purple-200); /* replaced by Ink Accent 4 */
+  --bs-ink-red: var(--bs-red-200); /* replaced by Ink Negative */
+  --bs-ink-royal: var(--bs-royal-200); /* replaced by Ink Accent 1 */
+  --bs-ink-violet: var(--bs-violet-200); /* replaced by Ink Accent 2 */
 
   /* Blue (replaced by Primary) */
   --bs-blue-base: var(--bs-blue-300);
@@ -653,7 +660,7 @@
   --bs-gray-light: var(--bs-gray-400);
   --bs-gray-lightest: var(--bs-gray-500);
 
-  /* Navy (replaced by Accent 4) */
+  /* Navy (replaced by Accent 7) */
   --bs-navy-base: var(--bs-navy-200);
 
   /* Orange (replaced by Warning) */
@@ -667,7 +674,7 @@
   --bs-plum-base: var(--bs-plum-300);
   --bs-plum-medium: var(--bs-plum-200);
 
-  /* Purple (replaced by Positive) */
+  /* Purple (replaced by Accent 4) */
   --bs-purple-base: var(--bs-purple-300);
 
   /* Red (replaced by Negative) */
@@ -679,52 +686,16 @@
 
   /* Violet (replaced by Accent 2) */
   --bs-violet-base: var(--bs-violet-300);
-
-
-  /* ------------ Deprecated Ink Color Tokens ------------ */
-
-  /* Ink Blue (replaced by Ink Primary) */
-  --bs-ink-blue: var(--bs-blue-200);
-
-  /* Ink Orange (replaced by Ink Warning) */
-  --bs-ink-orange: var(--bs-orange-200);
-
-  /* Ink Pink (replaced by Ink Accent 3) */
-  --bs-ink-pink: var(--bs-pink-200);
-
-  /* Ink Plum (replaced by Ink Secondary) */
-  --bs-ink-plum: var(--bs-plum-100);
-
-  /* Ink Purple (replaced by Ink Positive) */
-  --bs-ink-purple: var(--bs-purple-200);
-
-  /* Ink Red (replaced by Ink Negative) */
-  --bs-ink-red: var(--bs-red-200);
-
-  /* Ink Royal (replaced by Ink Accent 1) */
-  --bs-ink-royal: var(--bs-royal-200);
-
-  /* Ink Violet (replaced by Ink Accent 2) */
-  --bs-ink-violet: var(--bs-violet-200);
 }
-/* Token Overrides (Softchoice branding) */
 .softchoice {
   /* Ink */
   --bs-ink-primary: var(--bs-cobalt-400);
-  --bs-ink-secondary: var(--bs-midnight-400);
-  --bs-ink-accent-1: var(--bs-orange-500);
-  --bs-ink-negative: var(--bs-maroon-500);
+  --bs-ink-secondary: var(--bs-orange-500);
+  --bs-ink-accent-1: var(--bs-midnight-400);
+  --bs-ink-accent-4: var(--bs-orchid-400);
   --bs-ink-positive: var(--bs-green-500);
   --bs-ink-warning: var(--bs-yellow-500);
-
-  /* Background */
-  --bs-bg-light: var(--bs-charcoal-100);
-  --bs-bg-medium: var(--bs-charcoal-200);
-  --bs-bg-disabled: var(--bs-charcoal-300);
-  --bs-bg-medium-to-base: var(--bs-charcoal-200);
-  --bs-bg-medium-to-light: var(--bs-charcoal-200);
-  --bs-bg-light-to-base: var(--bs-charcoal-100);
-  --bs-bg-light-to-medium: var(--bs-charcoal-100);
+  --bs-ink-negative: var(--bs-maroon-500);
 
   /* Primary */
   --bs-primary-base-fixed: var(--bs-cobalt-400);
@@ -735,12 +706,35 @@
   --bs-primary-highlight: var(--bs-cobalt-10);
 
   /* Secondary */
-  --bs-secondary-base-fixed: var(--bs-midnight-400);
-  --bs-secondary-base: var(--bs-midnight-400);
-  --bs-secondary-medium: var(--bs-midnight-300);
-  --bs-secondary-light: var(--bs-midnight-200);
-  --bs-secondary-lightest: var(--bs-midnight-100);
-  --bs-secondary-highlight: var(--bs-midnight-10);
+  --bs-secondary-base-fixed: var(--bs-orange-400);
+  --bs-secondary-base: var(--bs-orange-400);
+  --bs-secondary-medium: var(--bs-orange-300);
+  --bs-secondary-light: var(--bs-orange-200);
+  --bs-secondary-lightest: var(--bs-orange-100);
+  --bs-secondary-highlight: var(--bs-orange-10);
+
+  /* Accent 1 */
+  --bs-accent-1-base-fixed: var(--bs-midnight-400);
+  --bs-accent-1-base: var(--bs-midnight-400);
+  --bs-accent-1-medium: var(--bs-midnight-300);
+  --bs-accent-1-light: var(--bs-midnight-200);
+  --bs-accent-1-lightest: var(--bs-midnight-100);
+  --bs-accent-1-highlight: var(--bs-midnight-10);
+
+  /* Accent 4 */
+  --bs-accent-4-base-fixed: var(--bs-orchid-400);
+  --bs-accent-4-base: var(--bs-orchid-400);
+  --bs-accent-4-medium: var(--bs-orchid-300);
+  --bs-accent-4-light: var(--bs-orchid-200);
+  --bs-accent-4-lightest: var(--bs-orchid-100);
+  --bs-accent-4-highlight: var(--bs-orchid-10);
+
+  /* Accent 5 */
+  --bs-accent-5-base: var(--bs-gold-400);
+  --bs-accent-5-medium: var(--bs-gold-300);
+  --bs-accent-5-light: var(--bs-gold-200);
+  --bs-accent-5-lightest: var(--bs-gold-100);
+  --bs-accent-5-highlight: var(--bs-gold-10);
 
   /* Neutral */
   --bs-neutral-dark: var(--bs-charcoal-500);
@@ -749,37 +743,28 @@
   --bs-neutral-light: var(--bs-charcoal-200);
   --bs-neutral-lightest: var(--bs-charcoal-100);
 
-  /* Accent 1 */
-  --bs-accent-1-base-fixed: var(--bs-cobalt-400);
-  --bs-accent-1-base: var(--bs-cobalt-400);
-  --bs-accent-1-medium: var(--bs-cobalt-300);
-  --bs-accent-1-light: var(--bs-cobalt-200);
-  --bs-accent-1-lightest: var(--bs-cobalt-100);
-  --bs-accent-1-highlight: var(--bs-cobalt-10);
-
-  /* Positive */
-  --bs-positive-base-fixed: var(--bs-green-400);
-  --bs-positive-base: var(--bs-green-400);
-  --bs-positive-medium: var(--bs-green-300);
-  --bs-positive-light: var(--bs-green-200);
-  --bs-positive-lightest: var(--bs-green-100);
-  --bs-positive-highlight: var(--bs-green-10);
-
   /* Warning */
-  --bs-warning-dark: var(--bs-yellow-450);
   --bs-warning-base: var(--bs-yellow-400);
   --bs-warning-medium: var(--bs-yellow-300);
-  --bs-warning-light: var(--bs-yellow-200);
-  --bs-warning-lightest: var(--bs-yellow-100);
   --bs-warning-highlight: var(--bs-yellow-10);
 
   /* Negative */
-  --bs-negative-dark: var(--bs-maroon-500);
-  --bs-negative-base: var(--bs-maroon-400);
+  --bs-negative-base: var(--bs-maroon-500);
   --bs-negative-medium: var(--bs-maroon-300);
-  --bs-negative-light: var(--bs-maroon-200);
-  --bs-negative-lightest: var(--bs-maroon-100);
   --bs-negative-highlight: var(--bs-maroon-10);
+
+  /* Background */
+  --bs-bg-light: var(--bs-charcoal-100);
+  --bs-bg-medium: var(--bs-charcoal-200);
+  --bs-bg-disabled: var(--bs-charcoal-300);
+  --bs-bg-medium-to-base: var(--bs-charcoal-200);
+  --bs-bg-medium-to-light: var(--bs-charcoal-200);
+  --bs-bg-light-to-base: var(--bs-charcoal-100);
+  --bs-bg-light-to-medium: var(--bs-charcoal-100);
+
+  /* Borders */
+  --bs-border-active: var(--bs-cobalt-400);
+  --bs-border-error: var(--bs-maroon-500);
 }
 /* Reset */
 /* Provides the minimum reset needed for CSS components to function properly */
@@ -1104,8 +1089,8 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
 }
 /* ---------- Error state ----------- */
 input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])) {
-  --box-shadow: var(--bs-negative-base);
-  --outline-color: var(--bs-negative-base);
+  --box-shadow: var(--bs-ink-negative);
+  --outline-color: var(--bs-ink-negative);
 }
 /* !! Styles duplicated from components/input-general.css !! */
 /* Includes text inputs & textarea */
@@ -1235,9 +1220,6 @@ a {
   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-secondary);
 }
@@ -1249,17 +1231,6 @@ a:where(:focus-visible) {
 a:where(:focus:not(:focus-visible)) {
   outline: none;
 }
-/* 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);
-}
 /* !! Styles duplicated from components/_deprecated/select.css !! */
 /*
 Custom properties:
@@ -1589,7 +1560,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* data-variant="negative" list option keyboard navigation focus */
 .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
-  --focus-border-color: var(--bs-negative-light);
+  --focus-border-color: var(--bs-red-light);
 }
 /* Multi-select divider */
 .bs-dropdown-options-deprecated :where(li[role="separator"]) {
@@ -2212,129 +2183,125 @@ Custom properties:
 }
 /* Base Toast Styles */
 .bs-toast-deprecated {
-  --toast-transform: translate(0, calc(100% + 1.5rem));
+    --toast-transform: translate(0, calc(100% + 1.5rem));
 
-  background-color: var(--bs-bg-base-to-light);
-  border-top: 4px solid var(--bs-primary-base);
-  bottom: 1.5rem;
-  box-shadow: var(--bs-shadow-contentMedium);
-  left: 0;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-  opacity: 0;
-  position: fixed;
-  right: 0;
-  transform: var(--toast-transform);
-  transition-duration: var(--bs-transition-medium);
-  transition-property: transform, opacity;
-  transition-timing-function: var(--bs-transition-ease);
-  /* Clamp width for mobile -> full screen */
-  width: clamp(17rem, calc(100vw - 3rem), 25rem);
-  z-index: 999;
+    background-color: var(--bs-bg-base-elevated);
+    border-top: 4px solid var(--bs-primary-base);
+    bottom: 1.5rem;
+    box-shadow: var(--bs-shadow-contentMedium);
+    left: 0;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    transform: var(--toast-transform);
+    transition-duration: 200ms;
+    transition-property: transform, opacity;
+    transition-timing-function: ease;
+    /* Clamp width for mobile -> full screen */
+    width: clamp(17rem, calc(100vw - 3rem), 25rem);
+    z-index: 999;
 }
 .bs-toast-deprecated:where([data-stacked]:not([data-stacked="false"])) {
-  bottom: auto;
-  left: auto;
-  position: static;
-  right: auto;
-  z-index: auto;
+    bottom: auto;
+    left: auto;
+    position: static;
+    right: auto;
+    z-index: auto;
 }
 /* Mobile - Toast comes up from bottom */
 .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
-  opacity: 1;
-  transform: translate(0, 0);
+    opacity: 1;
+    transform: translate(0, 0);
 }
 .bs-toast-header-deprecated {
-  align-items: center;
-  color: var(--bs-ink-base);
-  display: flex;
-  gap: 0.5rem;
-  padding: 1rem;
+    align-items: center;
+    color: var(--bs-ink-base);
+    display: flex;
+    gap: 0.5rem;
+    padding: 1rem;
 }
-.bs-toast-header-deprecated :where(.bs-toast-header-icon-deprecated) {
-  color: var(--bs-primary-base);
+.bs-toast-header-deprecated :where(.bs-toast-header-deprecated-icon) {
+    color: var(--bs-primary-base);
 }
-.bs-toast-header-deprecated :where(h5) {
-  font-weight: 400;
+.bs-toast-header-deprecated :where(.bs-toast-header-deprecated-text) {
+    font-size: var(--bs-text-md);
+    font-weight: var(--bs-font-normal);
+    line-height: var(--bs-leading-lg);
 }
 .bs-toast-body-deprecated {
-  border-bottom: 1px solid var(--bs-border-base);
-  color: var(--bs-ink-light);
-  padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+    border-bottom: 1px solid var(--bs-border-base);
+    color: var(--bs-ink-light);
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
 }
 .bs-toast-actions-deprecated {
-  /* Mobile - Buttons will be stacked */
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
+    /* Mobile - Buttons will be stacked */
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: flex-end;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
 }
 .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
-  flex-direction: column-reverse;
+    flex-direction: column-reverse;
 }
 /* Warning Toast Styles */
 .bs-toast-deprecated:where([data-variant^='warning']) {
-  border-top: 4px solid var(--bs-warning-base);
+    border-top: 4px solid var(--bs-warning-base);
 }
-.bs-toast-deprecated:where([data-variant^='warning']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-ink-warning);
+.bs-toast-deprecated:where([data-variant^='warning']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
+    color: var(--bs-ink-warning);
 }
 /* Positive Toast Styles */
 .bs-toast-deprecated:where([data-variant^='positive']) {
-  border-top: 4px solid var(--bs-positive-base);
+    border-top: 4px solid var(--bs-positive-base);
 }
-.bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-ink-positive);
-}
-:where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) {
-  border-top: 4px solid var(--bs-positive-light);
-}
-:where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-positive-light);
+.bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
+    color: var(--bs-ink-positive);
 }
 /* Negative Toast Styles */
 .bs-toast-deprecated:where([data-variant^='negative']) {
-  border-top: 4px solid var(--bs-negative-dark);
+    border-top: 4px solid var(--bs-negative-dark);
 }
-.bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-negative-dark);
+.bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
+    color: var(--bs-negative-dark);
 }
 @media (min-width: 440px) {
-  .bs-toast-deprecated {
-      --toast-transform: translate(calc(100% + 1.5rem), 0);
+    .bs-toast-deprecated {
+        --toast-transform: translate(calc(100% + 1.5rem), 0);
 
-      left: auto;
-      margin-left: 0;
-      margin-right: 0;
-      opacity: 0;
-      right: 1.5rem;
-  }
+        left: auto;
+        margin-left: 0;
+        margin-right: 0;
+        opacity: 0;
+        right: 1.5rem;
+    }
 
-  .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
-      opacity: 1;
-      transform: translate(0, 0);
-  }
+    .bs-toast-deprecated:where([data-shown]:not([data-shown="false"])) {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
 
-  .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
-      flex-direction: row;
-  }
+    .bs-toast-actions-deprecated:where([data-stacked]:not([data-stacked="false"])) {
+        flex-direction: row;
+    }
 }
 /* Vue Transition Styles - Only used in Vue component */
-.bs-toast-deprecated:where(.bs-toast-enter-from),
-.bs-toast-deprecated:where(.bs-toast-leave-to) {
-  opacity: 0;
-  transform: var(--toast-transform);
+.bs-toast-deprecated:where(.bs-toast-deprecated-enter-from),
+.bs-toast-deprecated:where(.bs-toast-deprecated-leave-to) {
+    opacity: 0;
+    transform: var(--toast-transform);
 }
-.bs-toast-deprecated:where(.bs-toast-enter-to),
-.bs-toast-deprecated:where(.bs-toast-leave-from) {
-  opacity: 1;
-  transform: translate(0, 0);
+.bs-toast-deprecated:where(.bs-toast-deprecated-enter-to),
+.bs-toast-deprecated:where(.bs-toast-deprecated-leave-from) {
+    opacity: 1;
+    transform: translate(0, 0);
 }
 /* Container for holding all toasts that will be visible */
 .bs-toaster-deprecated {
@@ -2757,16 +2724,16 @@ This must go last to properly override the other classes
   -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));
+  transition-property: opacity;
+  transition-duration: var(--bs-backdrop-transition-duration);
+  transition-timing-function: var(--bs-transition-cubic);
+}
+.bs-backdrop-enter-from,
+.bs-backdrop-leave-to {
+  opacity: 0;
 }
 .bs-badge {
-  --badge-bg: var(--bs-negative-dark);
+  --badge-bg: var(--bs-accent-6-base);
   --badge-text: var(--bs-white);
   display: inline-block;
 }
@@ -2894,10 +2861,7 @@ This must go last to properly override the other classes
   text-decoration: none;
 }
 .bs-banner:where([data-variant="negative"]) {
-  --banner-bg: var(--bs-red-300);
-}
-:where(.softchoice) .bs-banner:where([data-variant="negative"]) {
-  --banner-bg: var(--bs-maroon-400);
+  --banner-bg: var(--bs-accent-6-medium);
 }
 @media (min-width: 957px) {
   .bs-banner {
@@ -2912,7 +2876,7 @@ This must go last to properly override the other classes
   --btn-ghost-ink: var(--bs-ink-primary);
   --btn-highlight: var(--bs-primary-lightest);
   --btn-ink: var(--bs-white);
-  --btn-main: var(--bs-primary-base-fixed);
+  --btn-main: var(--bs-primary-base);
   --btn-padding: .25rem .75rem;
   --btn-secondary: var(--bs-primary-medium);
   --btn-text-size: var(--bs-text-md);
@@ -3013,50 +2977,67 @@ See: https://github.wwt.com/custom-apps/wwt-blue-steel/pull/917
   --btn-ghost-ink: var(--bs-ink-secondary);
   --btn-highlight: var(--bs-secondary-lightest);
   --btn-light: var(--bs-secondary-highlight);
-  --btn-main: var(--bs-secondary-base-fixed);
+  --btn-main: var(--bs-secondary-base);
   --btn-secondary: var(--bs-secondary-medium);
 }
-.dark .bs-button:where([data-variant^='secondary']) {
-  --btn-highlight: var(--bs-secondary-base-fixed);
-  --btn-light: var(--bs-navy-400);
-}
 .bs-button:where([data-variant^='positive']) {
   --btn-ghost-ink: var(--bs-ink-positive);
-  --btn-highlight: var(--bs-positive-lightest);
+  --btn-highlight: var(--bs-positive-highlight);
   --btn-light: var(--bs-positive-highlight);
-  --btn-main: var(--bs-positive-base-fixed);
+  --btn-main: var(--bs-positive-base);
   --btn-secondary: var(--bs-positive-medium);
 }
 .bs-button:where([data-variant^='warning']) {
   --btn-ghost-ink: var(--bs-ink-warning);
-  --btn-highlight: var(--bs-warning-lightest);
+  --btn-highlight: var(--bs-warning-highlight);
   --btn-light: var(--bs-warning-highlight);
-  --btn-main: var(--bs-warning-dark);
+  --btn-main: var(--bs-warning-base);
   --btn-secondary: var(--bs-warning-medium);
 }
 .bs-button:where([data-variant^='negative']) {
   --btn-ghost-ink: var(--bs-ink-negative);
-  --btn-highlight: var(--bs-negative-lightest);
+  --btn-highlight: var(--bs-negative-highlight);
   --btn-light: var(--bs-negative-highlight);
-  --btn-main: var(--bs-negative-dark);
+  --btn-main: var(--bs-negative-base);
   --btn-secondary: var(--bs-negative-medium);
 }
-/* pink variant */
-.bs-button:where([data-variant^='pink']) {
-  --btn-ghost-ink: var(--bs-ink-accent-3);
-  --btn-highlight: var(--bs-accent-3-base-fixed);
-  --btn-light: var(--bs-accent-3-highlight);
-  --btn-main: var(--bs-accent-3-base-fixed);
-  --btn-secondary: var(--bs-accent-3-medium);
+.bs-button:where([data-variant^='accent-1']) {
+  --btn-ghost-ink: var(--bs-ink-accent-1);
+  --btn-highlight: var(--bs-accent-1-base);
+  --btn-light: var(--bs-accent-1-highlight);
+  --btn-main: var(--bs-accent-1-base);
+  --btn-secondary: var(--bs-accent-1-medium);
 }
-/* royal blue variant */
+/* DEPRECATED - royal blue variant (use accent-1 instead) */
 .bs-button:where([data-variant^='royal']) {
   --btn-ghost-ink: var(--bs-ink-accent-1);
-  --btn-highlight: var(--bs-accent-1-base-fixed);
+  --btn-highlight: var(--bs-accent-1-base);
   --btn-light: var(--bs-accent-1-highlight);
-  --btn-main: var(--bs-accent-1-base-fixed);
+  --btn-main: var(--bs-accent-1-base);
   --btn-secondary: var(--bs-accent-1-medium);
 }
+.bs-button:where([data-variant^='accent-2']) {
+  --btn-ghost-ink: var(--bs-ink-accent-2);
+  --btn-highlight: var(--bs-accent-2-base);
+  --btn-light: var(--bs-accent-2-highlight);
+  --btn-main: var(--bs-accent-2-base);
+  --btn-secondary: var(--bs-accent-2-medium);
+}
+.bs-button:where([data-variant^='accent-3']) {
+  --btn-ghost-ink: var(--bs-ink-accent-3);
+  --btn-highlight: var(--bs-accent-3-base);
+  --btn-light: var(--bs-accent-3-highlight);
+  --btn-main: var(--bs-accent-3-base);
+  --btn-secondary: var(--bs-accent-3-medium);
+}
+/* DEPRECATED - pink variant (use accent-3 instead) */
+.bs-button:where([data-variant^='pink']) {
+  --btn-ghost-ink: var(--bs-ink-accent-3);
+  --btn-highlight: var(--bs-accent-3-base);
+  --btn-light: var(--bs-accent-3-highlight);
+  --btn-main: var(--bs-accent-3-base);
+  --btn-secondary: var(--bs-accent-3-medium);
+}
 /* white variant - for dark backgrounds + ghost btn or text btn only */
 .bs-button:where([data-variant^='white'][data-ghost]:not([data-ghost="false"])) {
   --btn-ghost-ink: var(--bs-ink-white);
@@ -3509,35 +3490,71 @@ a.bs-circle-button {
   --btn-secondary: transparent;
   --btn-shadow-color-active: transparent;
 }
-.bs-circle-button:where([data-variant="color-blue"]) {
-  --btn-border-color-focused: var(--bs-ink-primary);
-  --btn-text-color: var(--bs-ink-primary);
-  --btn-text-color-hovered: var(--bs-primary-base);
+.bs-circle-button:where([data-variant="color-primary"]) {
+  --btn-border-color-focused: var(--bs-ink-primary);
+  --btn-text-color: var(--bs-ink-primary);
+  --btn-text-color-hovered: var(--bs-primary-base);
+}
+/* DEPRECATED - blue variant (use primary instead) */
+.bs-circle-button:where([data-variant="color-blue"]) {
+  --btn-border-color-focused: var(--bs-ink-primary);
+  --btn-text-color: var(--bs-ink-primary);
+  --btn-text-color-hovered: var(--bs-primary-base);
+}
+.bs-circle-button:where([data-variant="color-positive"]) {
+  --btn-border-color-focused: var(--bs-positive-base);
+  --btn-text-color: var(--bs-ink-positive);
+  --btn-text-color-hovered: var(--bs-positive-medium);
+}
+/* DEPRECATED - purple variant (use positive instead) */
+.bs-circle-button:where([data-variant="color-purple"]) {
+  --btn-border-color-focused: var(--bs-positive-base);
+  --btn-text-color: var(--bs-ink-positive);
+  --btn-text-color-hovered: var(--bs-positive-medium);
+}
+.bs-circle-button:where([data-variant="color-warning"]) {
+  --btn-border-color-focused: var(--bs-ink-warning);
+  --btn-text-color: var(--bs-ink-warning);
+  --btn-text-color-hovered: var(--bs-warning-base);
+}
+/* DEPRECATED - orange variant (use warning instead) */
+.bs-circle-button:where([data-variant="color-orange"]) {
+  --btn-border-color-focused: var(--bs-ink-warning);
+  --btn-text-color: var(--bs-ink-warning);
+  --btn-text-color-hovered: var(--bs-warning-base);
+}
+.bs-circle-button:where([data-variant="color-negative"]) {
+  --btn-border-color-focused: var(--bs-ink-negative);
+  --btn-text-color: var(--bs-ink-negative);
+  --btn-text-color-hovered: var(--bs-negative-base);
+}
+/* DEPRECATED - red variant (use negative instead) */
+.bs-circle-button:where([data-variant="color-red"]) {
+  --btn-border-color-focused: var(--bs-ink-regative);
+  --btn-text-color: var(--bs-ink-negative);
+  --btn-text-color-hovered: var(--bs-negative-base);
+}
+.bs-circle-button:where([data-variant="color-accent-1"]) {
+  --btn-border-color-focused: var(--bs-ink-accent-1);
+  --btn-text-color: var(--bs-ink-accent-1);
+  --btn-text-color-hovered: var(--bs-accent-1-medium);
 }
+/* DEPRECATED - royal blue variant (use accent-1 instead) */
 .bs-circle-button:where([data-variant="color-royal"]) {
   --btn-border-color-focused: var(--bs-ink-accent-1);
   --btn-text-color: var(--bs-ink-accent-1);
   --btn-text-color-hovered: var(--bs-accent-1-medium);
 }
-.bs-circle-button:where([data-variant="color-purple"]) {
-  --btn-border-color-focused: var(--bs-positive-base);
-  --btn-text-color: var(--bs-ink-positive);
-  --btn-text-color-hovered: var(--bs-positive-medium);
+.bs-circle-button:where([data-variant="color-accent-3"]) {
+  --btn-border-color-focused: var(--bs-accent-3-base);
+  --btn-text-color: var(--bs-ink-accent-3);
+  --btn-text-color-hovered: var(--bs-accent-3-medium);
 }
+/* DEPRECATED - pink variant (use accent-3 instead) */
 .bs-circle-button:where([data-variant="color-pink"]) {
   --btn-border-color-focused: var(--bs-accent-3-base);
   --btn-text-color: var(--bs-ink-accent-3);
-  --btn-text-color-hovered: var(--bs-accent-3-base);
-}
-.bs-circle-button:where([data-variant="color-orange"]) {
-  --btn-border-color-focused: var(--bs-ink-warning);
-  --btn-text-color: var(--bs-ink-warning);
-  --btn-text-color-hovered: var(--bs-warning-base);
-}
-.bs-circle-button:where([data-variant="color-red"]) {
-  --btn-border-color-focused: var(--bs-ink-regative);
-  --btn-text-color: var(--bs-ink-negative);
-  --btn-text-color-hovered: var(--bs-negative-base);
+  --btn-text-color-hovered: var(--bs-accent-3-medium);
 }
 .bs-circle-button:where([data-variant="color-white"]) {
   --btn-border-color-focused: var(--bs-ink-white);
@@ -3556,7 +3573,7 @@ a.bs-circle-button {
 }
 .bs-empty-state {
   --bs-empty-state-description-color: var(--bs-ink-light);
-  --bs-empty-state-icon-color: var(--bs-violet-300);
+  --bs-empty-state-icon-color: var(--bs-accent-2-medium);
   --bs-empty-state-title-color: var(--bs-ink-base);
   --col-gap: var(--bs-space-6);
   --cta-spacing: var(--bs-space-4);
@@ -4277,7 +4294,7 @@ button:where(.bs-filter-button) {
   border-color: transparent;
   border-radius: var(--bs-space-1);
   border: 1px solid transparent;
-  color: var(--bs-royal-400);
+  color: var(--bs-ink-accent-1);
   cursor: pointer;
   display: inline-flex;
   font-family: inherit;
@@ -4298,11 +4315,11 @@ button:where(.bs-filter-button) {
 }
 /* Hover */
 .bs-inline-tab:where(:not([data-selected]):hover) {
-  border-color: var(--bs-royal-400);
+  border-color: var(--bs-ink-accent-1);
 }
 /* Keyboard Focus */
 .bs-inline-tab:where(:focus-visible) {
-  outline: 2px solid var(--bs-royal-400);
+  outline: 2px solid var(--bs-ink-accent-1);
 
   &:where([data-selected]) {
     outline-offset: 2px;
@@ -4328,45 +4345,10 @@ button:where(.bs-filter-button) {
 /* -- Dark Mode Overrides -- */
 :where(.dark .bs-inline-tab) {
 
-  /* Ink */
-  &:not([data-selected], :disabled, [aria-disabled="true"]) {
-    color: var(--bs-royal-200);
-  }
-
   /* Selected & Disabled */
   &[data-selected]:where(:disabled, [aria-disabled="true"]) {
     color: var(--bs-ink-invert-base);
   }
-
-  /* Keyboard Focus */
-  &:not([disabled]):where(:focus-visible) {
-    outline-color: var(--bs-royal-200);
-  }
-
-  /* Hover */
-  &:not([disabled]):where(:not([data-selected]):hover) {
-    border-color: var(--bs-royal-200);
-  }
-
-}
-/* -- Softchoice Mode Overrides -- */
-:where(.softchoice .bs-inline-tab) {
-
-  /* Ink */
-  &:not([data-selected], :disabled, [aria-disabled="true"]) {
-    color: var(--bs-cobalt-400);
-  }
-
-  /* Keyboard Focus */
-  &:not([disabled]):where(:focus-visible) {
-    outline-color: var(--bs-cobalt-400);
-  }
-
-  /* Hover */
-  &:not([disabled]):where(:not([data-selected]):hover) {
-    border-color: var(--bs-cobalt-400);
-  }
-
 }
 /* 0 0 1 for width to allow e.g. tailwind override */
 :is(div, *):where(.bs-input-addon) {
@@ -4473,7 +4455,7 @@ and issues with box-sizing
 /* -------- Inner-bordered styles -------- */
 /** Inner borders should be straight; shown only if variant: "inner-bordered" */
 .bs-input-addon:where([data-variant="inner-bordered"]) {
-  --input-addon-nested-border: var(--bs-violet-200);
+  --input-addon-nested-border: var(--bs-border-input);
 }
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
 .bs-input-addon > :where(:not(:last-child, :focus-within, [data-part="right"]))::after {
@@ -4567,7 +4549,7 @@ and issues with box-sizing
 /* Straight-lined ::before border to fill the gap below the rounded ::after border */
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(:focus-within)::before {
   border-bottom-width: 1px;
-  border-color: var(--bs-violet-300);
+  border-color: var(--bs-border-input);
   border-radius: 0;
   border-top-width: 1px;
   z-index: 1;
@@ -4770,8 +4752,8 @@ data-autosize-icons="true" - see above
 .bs-boolean :where(input[data-error="true"]), /* deprecate this one in favor of next line */
 .bs-boolean:where([data-error="true"]),
 .bs-checkbox:where([data-error="true"]) {
-  --box-shadow: var(--bs-negative-base);
-  --outline-color: var(--bs-negative-base);
+  --box-shadow: var(--bs-ink-negative);
+  --outline-color: var(--bs-ink-negative);
 }
 /*
  HEADS-UP! Styling to look like an input is inherited from .bs-input
@@ -4870,73 +4852,88 @@ data-autosize-icons="true" - see above
 .bs-input-phone ul:where(.bs-dropdown-options-deprecated) {
   min-width: 7.5rem;
 }
-:where(.bs-input-search) {
-  display: inline-block;
+.bs-input-search {
+  display: grid;
+  grid-template-columns: 1fr 2.5rem;
+  align-items: center;
   width: 100%;
+  height: var(--input-search-height, 2.5rem);
 }
-.bs-input-search :where(.bs-icon svg) {
-  box-sizing: content-box;
-}
-.bs-input-search :where([data-component="bs-icon-search"]) {
+/* -- Icon -- */
+.bs-input-search-icon {
   --icon-size: var(--search-icon-size, 1.75rem);
+  position: relative;
+  grid-area: 1 / 1;
   padding: var(--search-icon-padding, 0 0 0 .75rem);
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
 }
-/* Clear Button */
-.bs-input-search button {
-  align-items: center;
-  background-color: transparent;
-  border-color: transparent;
-  color: inherit;
-  cursor: pointer;
+.bs-input-search-icon :where(svg) {
+  box-sizing: content-box;
+}
+/* -- Input -- */
+.bs-input-search-input {
+  --input-padding-inline: .75rem;
+  grid-area: 1 / 1 / 1 / -1;
+  pointer-events: auto;
+}
+/* make room for search icon */
+/* can't use 0,1,0 here due to :is() usage in input-text.css trumping it */
+.bs-input-search-icon + .bs-input-search-input {
+  padding-inline-start: 2.25rem;
+}
+/* make room for X button (so text doesn't overlap) */
+/* can't use 0,1,0 here due to :is() usage in input-text.css trumping it */
+.bs-input-search-input:has(+ .bs-input-search-button) {
+  padding-inline-end: 2.25rem;
+}
+.bs-input-search:where(:focus-within) :where(.bs-input-search-input) {
+  --input-border: var(--bs-blue-base);
+}
+/* -- Button -- */
+.bs-input-search-button {
+  grid-area: 1 / 2 / 1 / -1;
   display: flex;
-  font-family: inherit;
-  font-size: var(--bs-text-base);
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  padding-bottom: var(--bs-space-0);
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: var(--bs-space-0);
-  position: relative;
-  text-decoration: none;
+  cursor: pointer;
+  background-color: inherit;
   transition: transform var(--bs-transition-fast) var(--bs-transition-ease);
 }
-.bs-input-search button:where(:active) {
-  transform: scale(0.97);
-  transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--bs-primary-base);
-}
-.bs-input-search button:where(:focus) {
+.bs-input-search-button:where(:focus-visible) {
+  outline: none;
   border-radius: .25rem;
-  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
-  z-index: 1;
+  box-shadow: var(--bs-blue-base) 0px 0px 0px 1px inset;
+}
+/* -- Disabled -- */
+.bs-input-search:where(:has(:disabled)) {
+  color: var(--bs-ink-disabled);
 }
-/* Filter variant */
-.bs-input-search:where([data-variant="filter"]) {
+/* -- Filter Variant -- */
+.bs-input-search:where([data-variant="filter"]) :where(.bs-input-search-input) {
   --focus-border: transparent;
   --input-border: transparent;
   --input-addon-height: 1.5rem;
-  --input-caret: var(--bs-primary-base);
+  --input-caret: var(--bs-blue-base);
   --input-padding-block: 0 0.125rem;
-  --input-padding-inline: 0.5rem;
+  --input-padding-inline: 2.5rem 0.5rem;
   --input-placeholder: var(--bs-ink-light);
   --input-text-size: var(--bs-text-sm);
   --search-icon-size: 1rem;
   --search-icon-padding: 0;
 }
-/* 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);
+.bs-input-search:where([data-variant="filter"]):where(:focus-within) .bs-input-search-input {
+  --input-border: transparent;
 }
-:where(.dark) .bs-input-search:where([data-variant="filter"]) :is(input.bs-input)::placeholder {
+:where(.dark) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::-moz-placeholder {
   --input-placeholder: var(--bs-ink-light);
 }
-/* Filter variant: cancels out base hover state styles */
-.bs-input-addon:where([data-variant="filter"]):hover {
-  --input-bg: var(--bs-bg-base);
+:where(.dark) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::placeholder {
+  --input-placeholder: var(--bs-ink-light);
 }
-/* -------- Disabled styles -------- */
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {
+.bs-input-search:where([data-variant="filter"]):where(:has(:disabled)) .bs-input-search-input {
   --input-bg: var(--bs-bg-base);
   --input-border: transparent;
 }
@@ -5169,11 +5166,17 @@ label:where(.bs-label) {
   }
 }
 .bs-option-group {
-  margin: var(--bs-space-3) 0;
+  margin-bottom: var(--bs-space-6);
   padding-top: var(--bs-space-3);
   border-top: 1px solid var(--bs-border-base);
+  display: flex;
+  flex-direction: column;
 }
-.bs-option-group:where(:last-child) {
+.bs-option-group:where(:first-child) {
+  padding-top: 0;
+  border-top: none;
+}
+.bs-option-group:where(:nth-last-child(1 of [data-visible="true"])) {
   margin-bottom: 0;
 }
 .bs-option-group:where(:has(.bs-option-group-title)) {
@@ -5189,27 +5192,47 @@ label:where(.bs-label) {
   display: flex;
   font-size: var(--bs-text-xs);
   font-weight: var(--bs-font-semibold);
-  margin: 0 0 var(--bs-space-3);
-  min-height: var(--bs-space-8);
-  padding: var(--bs-space-1) var(--bs-space-3);
+  height: var(--bs-space-8);
+  margin: 0 0 var(--bs-space-2);
+  padding: var(--bs-space-1) var(--bs-space-3) var(--bs-space-1) 1.75rem;
   position: sticky;
   top: 0;
+  order: -2;
+  z-index: 1;
+}
+/* Separator for multiple selected options */
+.bs-option-group-multiple-hr {
+  margin: 0 var(--bs-space-3) var(--bs-space-3);
+  border-bottom: 0.0625rem solid var(--bs-border-base);
+}
+@media (min-width: 1166px) {
+  .bs-option-group-title {
+    padding: var(--bs-space-1) var(--bs-space-3);
+  }
 }
 .bs-option {
-  padding: var(--bs-space-1) var(--bs-space-2);
-  color: var(--bs-ink-base);
   --description-color: var(--bs-ink-light);
-  cursor: pointer;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
+  color: var(--bs-ink-base);
+  cursor: pointer;
   overflow-wrap: break-word;
+  padding: var(--bs-space-1) var(--bs-space-3) var(--bs-space-1) var(--bs-space-6);
   scroll-margin-bottom: var(--bs-space-3);
+  /* Make sure options are visible when scrolling with group title */
+  /* This is group title height + margin + padding + border */
+  scroll-margin-top: 2.5rem;
+}
+@media (min-width: 1166px) {
+  .bs-option {
+    padding: var(--bs-space-1) var(--bs-space-2);
+  }
 }
 .bs-option {
   margin-bottom: var(--bs-space-2); /* ask ux: 12px is too much, can't see many menu options in view */
 }
-/* is basically doing a last visible child selector, since filtered options and groups are hidden by v-show */
-.bs-option:where(:not(:has(~ [data-visible="true"]))) {
+/* is basically doing a last visible child selector ignoring selectToTop, since filtered options and groups are hidden by v-show */
+.bs-option:where(:nth-last-child(1 of [data-visible="true"][data-selected-to-top="false"])) {
   margin-bottom: 0;
 }
 /* -- DISABLED -- */
@@ -5395,10 +5418,11 @@ label:where(.bs-label) {
   padding-right: 2px;
   width: auto;
 }
+/* todo: waiting to hear back from UX on disabled, but there is at least 1 exmple in code of a pill w/ disable */
 .bs-pill {
   --pill-background: var(--bs-bg-medium);
   --pill-border: transparent;
-  --pill-text: var(--bs-royal-400);
+  --pill-text: var(--bs-ink-accent-1);
   --pill-gap: var(--bs-space-2);
 
   align-items: center;
@@ -5420,33 +5444,24 @@ label:where(.bs-label) {
   position: relative;
   text-decoration: none;
 }
-:where(.bs-pill .bs-icon) {
-  height: 1rem;
-  width: 1rem;
-}
-/* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
-:where(.dark) .bs-pill {
-  --pill-text: var(--bs-royal-200);
+.bs-pill-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pill-gap);
 }
-/* ------------------------------- Softchoice mode (basic & status types only) ------------------------------- */
-:where(.softchoice) .bs-pill {
-  --pill-text: var(--bs-cobalt-400);
+.bs-pill :where(.bs-icon) {
+  height: 0.75rem;
+  width: 0.75rem;
+  flex-shrink: 0;
 }
 /* ------------------------------ Auto-truncation for content ------------------------------ */
 .bs-pill:has([data-truncate="true"]) {
   max-width: 100%;
 }
-.bs-pill > :where([data-truncate="true"]) {
-  display: inline-block;
+.bs-pill-content:where([data-truncate="true"]) {
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* If false, pass thru .bs-pill display styles */
-.bs-pill > :where([data-truncate="false"]) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pill-gap);
 }
 /* ------------------------------ Button and Link Styles ------------------------------ */
 :is(a, button).bs-pill {
@@ -5466,37 +5481,47 @@ label:where(.bs-label) {
 }
 /* ------------------------------ Status Styles ------------------------------ */
 .bs-pill:where([data-status]) {
-  --status-color: var(--bs-primary-base-fixed);
-}
-.bs-pill:where([data-status])::before {
-  background-color: var(--status-color);
-  border-radius: 100%;
-  content: '';
-  height: 12px;
-  width: 12px;
+  font-size: var(--bs-text-xs);
+  font-weight: var(--bs-font-semibold);
+  color: var(--status-color);
 }
 /* ----- Status Colors ----- */
-.bs-pill:where([data-status^="active"]) {
-  --status-color: var(--bs-primary-base-fixed);
-}
-.bs-pill:where([data-status^="complete"]) {
-  --status-color: var(--bs-positive-base-fixed);
-}
-.bs-pill:where([data-status^="disabled"]) {
-  --status-color: var(--bs-ink-disabled);
+/* Disabled is being renamed to Neutral */
+.bs-pill:where([data-status^="neutral"], [data-status^="disabled"]) {
+  --status-color: var(--bs-ink-light);
+  --pill-background: var(--bs-accent-7-highlight);
 }
-.bs-pill:where([data-status^="error"]) {
-  --status-color: var(--bs-negative-dark);
+.bs-pill:where([data-status^="active"]) {
+  --status-color: var(--bs-ink-primary);
+  --pill-background: var(--bs-primary-highlight);
 }
 .bs-pill:where([data-status^="positive"]) {
-  --status-color:  var(--bs-ecomm-positive-base-fixed);
+  --status-color: var(--bs-ink-positive);
+  --pill-background: var(--bs-positive-highlight);
 }
 .bs-pill:where([data-status^="warning"]) {
-  --status-color: var(--bs-warning-dark);
+  --status-color: var(--bs-ink-warning);
+  --pill-background: var(--bs-warning-highlight);
+}
+/* Error is being renamed to Negative */
+.bs-pill:where([data-status^="negative"],[data-status^="error"]) {
+  --status-color: var(--bs-ink-negative);
+  --pill-background: var(--bs-negative-highlight);
 }
 /* Deprecated; use "data-status disabled" instead */
 .bs-pill:where([data-status^="inactive"]) {
-  --status-color: var(--bs-gray-300);
+  --status-color: var(--bs-gray-400);
+  --pill-background: var(--bs-gray-100);
+}
+/* Deprecated; use "data-status positive" instead */
+.bs-pill:where([data-status^="complete"]) {
+  --status-color: var(--bs-purple-500);
+  --pill-background: var(--bs-purple-100);
+}
+/* Dark mode selector for complete */
+:where(.dark) .bs-pill:where([data-status^="complete"]) {
+  --status-color: var(--bs-purple-100);
+  --pill-background: var(--bs-purple-500);
 }
 /* ------------------------------ Filter Styles ------------------------------ */
 .bs-pill:where([data-variant^="filter"]) {
@@ -5510,6 +5535,10 @@ label:where(.bs-label) {
 :is(a, button).bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
   --pill-border: var(--bs-ink-base);
 }
+/* ------------------------------ Variant: "White" Styles ------------------------------ */
+.bs-pill:where([data-variant="white"]) {
+  background-color: var(--bs-bg-base-to-medium);
+}
 /* ------------------------------ Variant: "Filter Add" Styles ------------------------------ */
 /* Black + */
 .bs-pill:where([data-variant^="filter"][data-variant*="add"])::after {
@@ -5528,7 +5557,7 @@ label:where(.bs-label) {
 :where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled="true"])::after {
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
 }
-/* ------------------------------ Variant: "Filter Active" Styles ------------------------------ */
+/* ------------------------------ Variant: "Filter Active" Styles DEPRECATED ------------------------------ */
 .bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])) {
   --pill-background: var(--bs-primary-base-fixed);
   --pill-border: transparent;
@@ -5555,6 +5584,8 @@ label:where(.bs-label) {
   --pill-text: var(--bs-white);
   --pill-gap: var(--bs-space-1);
   text-transform: uppercase;
+  font-size: var(--bs-text-xs);
+  font-weight: var(--bs-font-semibold);
 }
 .bs-pill:where([data-variant^="live"]):hover {
   --pill-border: transparent;
@@ -5568,6 +5599,7 @@ label:where(.bs-label) {
   width: 12px;
 }
 /* ------------------------------ Variant: "Inactive" Styles ------------------------------ */
+/* Deprecated; use Status Neutral instead */
 .bs-pill:where([data-variant^="inactive"]) {
   --pill-background: var(--bs-neutral-base);
   --pill-text: var(--bs-ink-invert-base);
@@ -6522,7 +6554,7 @@ a.bs-text-button {
 /* ------------ Status colors ------------ */
 .bs-timeline :where(.bs-step-item[data-status="in-progress"]) {
   --step-color: var(--bs-ink-base);
-  --progress-step-bg: var(--bs-positive-light);
+  --progress-step-bg: var(--bs-accent-4-base);
 }
 .bs-progress-bar :where(.bs-step-item[data-status="not-started"]) {
   --step-color: var(--bs-ink-light);
@@ -6538,11 +6570,11 @@ a.bs-text-button {
 .bs-timeline :where(.bs-step-item[data-status="complete"]),
 .bs-timeline :where(.bs-step-item[data-status="paused"]),
 .bs-timeline :where(.bs-step-item[data-status="ongoing"]) {
-  --step-color: var(--bs-ink-positive);
-  --progress-step-bg: var(--bs-positive-medium);
+  --step-color: var(--bs-ink-accent-4);
+  --progress-step-bg: var(--bs-accent-4-medium);
 }
 :is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="base"]) {
-  --progress-step-bg: var(--bs-positive-base);
+  --progress-step-bg: var(--bs-accent-4-base);
 }
 .bs-timeline :where(.bs-step-item[data-status="warning"]) {
   --step-color: var(--bs-ink-warning);
@@ -6569,6 +6601,27 @@ a.bs-text-button {
   --toggle-color: var(--bs-white);
   --top-offset: 48px;
 }
+.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"]) {
+  --active-color: var(--bs-blue-10);
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-medium);
+  --text-color: var(--bs-ink-medium);
+  --link-color: var(--bs-ink-medium);
+  --link-hover-color: var(--bs-ink-blue);
+  --link-active-color: var(--bs-ink-blue);
+  --toggle-bg-color: var(--bs-bg-base);
+  --toggle-color: var(--bs-ink-medium);
+}
+.dark :where(.bs-vertical-nav-wrapper),
+.dark :where(.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"])) {
+  --active-color: rgba(255, 255, 255, 0.25);
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-medium);
+  --text-color: var(--bs-white);
+  --link-color: var(--bs-white);
+  --link-hover-color: var(--bs-white);
+  --link-active-color: var(--bs-white);
+}
 .bs-vertical-nav {
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   background-color: var(--bg-color);
@@ -6592,30 +6645,25 @@ a.bs-text-button {
   /* Slight delay for visibility to change prior to opacity */
   transition: opacity var(--bs-transition-medium) var(--bs-transition-ease) 10ms;
   visibility: hidden;
+  pointer-events: none;
   width: auto;
-  z-index: 1000;
+  z-index: 999;
 }
 .bs-vertical-nav:where([data-mobile-shown="true"]) {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
 .bs-vertical-nav:where([data-collapsible="true"]) {
   transition: opacity 200ms ease 10ms, width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.dark .bs-vertical-nav-wrapper {
-  --active-color: rgba(255, 255, 255, 0.25);
-  --bg-color: var(--bs-bg-base);
-  --border-color: var(--bs-border-medium);
-}
 @media (min-width: 1166px) {
   .bs-vertical-nav {
     opacity: 1;
-    padding-bottom: 1rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 1rem;
+    padding: 1rem;
     right: auto;
     visibility: visible;
+    pointer-events: auto;
     width: var(--bs-vertical-nav-width);
   }
 
@@ -6646,7 +6694,7 @@ a.bs-text-button {
   position: fixed;
   left: calc(var(--bs-vertical-nav-width) - 0.5rem);
   pointer-events: auto; /* Ensure button is clickable */
-  top: calc(var(--top-offset) + 3rem); /* top-offset + 3rem */
+  top: calc(var(--top-offset) + 1.125rem); /* top-offset + 18px */
   transition: left 300ms ease-out, opacity 100ms ease-out;
   z-index: 1002; /* Above nav to prevent hover conflicts */
 }
@@ -6656,11 +6704,11 @@ a.bs-text-button {
     opacity: 1;
     transition: left 300ms ease-out, opacity 100ms ease-out;
   }
-  
+
   .bs-vertical-nav-toggle:where([data-collapsed="true"]) {
     left: calc(var(--bs-vertical-nav-collapsed-width) - 0.5rem);
   }
-  
+
   /* Adjust position for narrow variant when NOT collapsed */
   .bs-vertical-nav-toggle:where([data-narrow="true"]:not([data-collapsed="true"])) {
     left: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem);
@@ -6676,18 +6724,18 @@ a.bs-text-button {
 }
 /* ===== Sections ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-section) {
-  border-top: 2px solid var(--border-color);
+  border-top: 1px solid var(--border-color);
   margin-top: 0.5rem;
   padding-top: 0.5rem;
 }
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-section) {
-    margin-top: 0.25rem;
+    margin-top: 0.5rem;
   }
 }
 /* Divider-only sections have no additional padding since no toggle button */
 .bs-vertical-nav :where(.bs-vertical-nav-section[data-divider-only="true"]) {
-  padding-top: 0.25rem;
+  padding-top: 0.5rem;
 }
 /* Don't show border if the very first item is a section */
 .bs-vertical-nav :where(ul li:first-child) {
@@ -6717,7 +6765,7 @@ a.bs-text-button {
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
   }
 
   .bs-vertical-nav :where(.bs-vertical-nav-section-toggle span:first-child) {
@@ -6725,7 +6773,7 @@ a.bs-text-button {
     text-align: start;
     text-overflow: ellipsis;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding - caret width */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.75rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem - 0.75rem);
   }
 }
 .bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
@@ -6748,11 +6796,6 @@ a.bs-text-button {
   margin-top: 0;
   padding-left: 0;
 }
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(ul) {
-    gap: 0.25rem;
-  }
-}
 /* ===== Nav List Items / Links */
 .bs-vertical-nav :where(ul li a) {
   align-items: center;
@@ -6782,13 +6825,13 @@ a.bs-text-button {
     min-height: 2.5rem; /* Fixed minimum height to prevent height changes */
     padding: 0.5rem 0.75rem; /* Explicit padding for consistency */
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
   }
 
   /* Collapsed state width */
   .bs-vertical-nav:where([data-collapsed="true"]) :where(ul li a) {
     /* collapsed width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-collapsed-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-collapsed-width) - 1rem - 1rem);
   }
 
   /* Text overflow - normal width - no icon */
@@ -6797,7 +6840,7 @@ a.bs-text-button {
     text-overflow: ellipsis;
     white-space: nowrap;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem);
   }
 
   /* Text overflow - normal width - with icon */
@@ -6806,7 +6849,7 @@ a.bs-text-button {
     text-overflow: ellipsis;
     white-space: nowrap;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding - icon width - icon gap */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 1rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem - 1rem - 0.5rem);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
@@ -6817,7 +6860,7 @@ a.bs-text-button {
     padding: 0.5rem 0.75rem; /* 8px 12px - matches Figma */
     text-align: center;
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-narrow-width) - 1rem - 1rem);
   }
 
   /* Text overflow - narrow width */
@@ -6830,10 +6873,21 @@ a.bs-text-button {
     width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
   }
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) {
+  padding-top: 1rem;
+}
+.bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a) {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
 .bs-vertical-nav :where(ul li a:hover) {
   color: var(--link-hover-color);
   font-weight: 600;
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a:hover) {
+  color: var(--bs-ink-blue);
+}
 .bs-vertical-nav :where(ul li a[data-active="true"]) {
   background-color: var(--active-color);
   color: var(--link-active-color);
@@ -6851,7 +6905,6 @@ a.bs-text-button {
   .bs-vertical-nav:not([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
     height: 0.875rem;
     width: 0.875rem;
-    margin-left: 0.25rem; /* Visual centering adjustment */
   }
 
   /* Narrow variant icons - 16px (inherits from base) */
@@ -6860,6 +6913,11 @@ a.bs-text-button {
     width: 1rem;
   }
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) .bs-vertical-nav-link-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-left: 0;
+}
 /* Default: Show text on mobile */
 .bs-vertical-nav :where(ul li a > span:last-child) {
   opacity: 1;
@@ -6910,7 +6968,7 @@ a.bs-text-button {
 
   /* Expand link widths on hover when collapsed */
   .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(ul li a) {
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
   }
 
   /* Narrow variant links should respect narrow width on hover */
@@ -6923,7 +6981,6 @@ a.bs-text-button {
     opacity: 1;
     visibility: visible;
     width: auto;
-    overflow: visible;
   }
 
   /* Hide toggle button on hover when collapsed - but NOT when hovering the button itself */
@@ -6937,6 +6994,16 @@ a.bs-text-button {
     display: flex;
   }
 }
+/* ===== Top Content ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-top-content) {
+  margin-bottom: 0.5rem;
+  padding: 0;
+}
+@media (min-width: 1166px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-top-content) {
+    margin-bottom: 0.75rem;
+  }
+}
 /* ===== End Items ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-end-items) {
   display: flex;
@@ -6988,8 +7055,13 @@ a.bs-text-button {
   transition: margin-inline-start 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 /*
-  POP SYSTEM COMPONENTS
-  Components that are built on top of BsPopover. The popover.css must come first.
+  POP SYSTEM COMPONENTS (the order matters)
+  - Components that are built on top of BsPopover
+  - The popover.css must come first
+  - In the future, could refactor this file to use @layer instead
+*/
+/*
+  HEADS-UP: BsPopover and its styles are the base for all popover-based components and their styles
 */
 #bs-popover-teleport-target {
   z-index: var(--bs-popover-z-index);
@@ -7003,39 +7075,27 @@ a.bs-text-button {
   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;
+  display: flex;
+  flex-direction: column;
   width: var(--bs-popover-width, -moz-fit-content);
   width: var(--bs-popover-width, fit-content);
   height: var(--bs-popover-height, -moz-fit-content);
   height: var(--bs-popover-height, fit-content);
   max-width: calc(100dvw - 3rem);
   max-height: calc(100dvh - 3rem);
-  padding: var(--bs-space-6);
   background-color: var(--bs-bg-base-to-light);
   border-radius: var(--bs-space-1);
   box-shadow: var(--bs-shadow-contentLowCenter);
   pointer-events: auto;  /* due to `pointer-events: none` on bs-popover-wrap */
+  overflow: hidden;
 }
-.bs-popover-close-button {
-  background-color: inherit;
-  background: transparent;
-  border-color: transparent;
-  color: inherit;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--bs-text-base);
-  padding: var(--bs-space-2); /* to make a bit nicer hit target */
-  position: absolute;
-  right: var(--bs-space-2);
-  text-decoration: none;
-  top: var(--bs-space-2);
+.bs-popover:where(:not(:has(.bs-pop-header, .bs-pop-body, .bs-pop-footer))) {
+  padding: var(--bs-space-6);
 }
 /* -- SIZING -- */
 .bs-popover:where([data-size="sm"]) {
@@ -7104,13 +7164,6 @@ a.bs-text-button {
 .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;
 }
@@ -7126,95 +7179,105 @@ a.bs-text-button {
   transform: scale(.95);
 }
 /*
-  HEADS-UP:
-  Most BsFlyout base styles come from its BsPopover root element,
-  so some of these styles are there to override those defaults.
+  Used in BsPopover, but exists as its own thing in case
+  consumers need/want to use it for custom layout cases.
 */
-.bs-flyout {
-  --bs-flyout-padding: var(--bs-space-6);
-  --bs-flyout-padding-top: 2.75rem;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  border-radius: 0;
+.bs-pop-x-button {
+  background-color: inherit;
+  background: transparent;
+  border-color: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--bs-text-base);
+  padding: var(--bs-space-3); /* to make a bit nicer hit target */
+  position: absolute;
+  right: var(--bs-pop-x-btn-right, var(--bs-space-1));
+  text-decoration: none;
+  top: var(--bs-pop-x-btn-top, var(--bs-space-1));
 }
-/* -- CLOSE BUTTON -- */
-/* calc() adjusts for default .5rem padding .bs-popover-close-button has, which exists for a nicer hit target */
-.bs-flyout :where(.bs-popover-close-button) {
-  top: calc(var(--bs-flyout-padding) - .5rem);
-  right: calc(var(--bs-flyout-padding) - .5rem);
+.bs-popover:where(:has(.bs-pop-header)) {
+  --bs-pop-x-btn-right: var(--bs-space-4);
+  --bs-pop-x-btn-top: var(--bs-space-4);
 }
-/* -- HEADER -- */
-.bs-flyout-header {
+.bs-pop-header {
+  color: var(--bs-ink-base);
+  font-size: var(--bs-text-md);
   flex-shrink: 0;
-  padding: var(--bs-flyout-padding-top) var(--bs-flyout-padding) var(--bs-flyout-padding);
-}
-/* with border */
-.bs-flyout-header:where([data-border="true"]) {
-  border-bottom: 1px solid var(--bs-border-base);
-}
-.bs-flyout-title {
-  display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-  margin: 0 var(--bs-space-6) 0 0;
-  font-size: var(--bs-text-lg);
-  font-weight: normal;
+  padding: var(--bs-pop-header-padding, var(--bs-space-6));
   line-height: var(--bs-leading-regular);
 }
-.bs-flyout-subtitle {
+.bs-pop-header:where(:not(:has(.bs-pop-title, .bs-pop-subtitle))) {
   display: flex;
   align-items: center;
   gap: var(--bs-space-2);
-  margin: var(--bs-space-2) 0 0 0;
-  font-size: var(--bs-text-sm);
-  font-weight: normal;
-  line-height: var(--bs-leading-lg);
 }
-.bs-flyout-header:where([data-border="true"]) {
+.bs-pop-header:where([data-border="true"]) {
   border-bottom: 1px solid var(--bs-border-base);
 }
-/* -- BODY -- */
-.bs-flyout-body {
+.bs-pop-body {
   flex: 1;
-  padding: 0 var(--bs-flyout-padding);
   overflow-y: auto;
   overscroll-behavior: contain;
+  padding: var(--bs-pop-body-padding, var(--bs-space-6));
 }
-/* no header exists */
-.bs-flyout:where(:not(:has(.bs-flyout-header))) :where(.bs-flyout-body) {
-  padding-top: var(--bs-flyout-padding-top);
+.bs-pop-body:where([data-background="true"]) {
+  background-color: var(--bs-bg-light);
 }
-/* no footer exists */
-.bs-flyout:where(:not(:has(.bs-flyout-footer))) :where(.bs-flyout-body) {
-  padding-bottom: var(--bs-flyout-padding);
+.bs-pop-header:where(:not([data-border="true"])) + :where(.bs-pop-body:not([data-background="true"])) {
+  padding-top: 0;
 }
-/* header border exists */
-.bs-flyout:where(:has(.bs-flyout-header[data-border="true"])) :where(.bs-flyout-body) {
-  padding-top: var(--bs-flyout-padding);
+.bs-pop-footer {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--bs-space-6);
+  justify-content: flex-end;
+  padding: var(--bs-pop-footer-padding, var(--bs-space-4) var(--bs-space-6));
 }
-/* footer border exists */
-.bs-flyout:where(:has(.bs-flyout-footer[data-border="true"])) :where(.bs-flyout-body) {
-  padding-bottom: var(--bs-flyout-padding);
+.bs-pop-footer:where([data-border="true"]) {
+  border-top: 1px solid var(--bs-border-base);
 }
-/* -- FOOTER -- */
-.bs-flyout-footer {
+.bs-pop-title {
+  align-items: center;
   display: flex;
-  justify-content: flex-end;
+  font-size: var(--bs-text-md);
+  font-weight: normal;
+  gap: var(--bs-space-2);
+  line-height: var(--bs-leading-regular);
+  margin: 0 var(--bs-space-12) 0 0;
+}
+.bs-pop-subtitle {
   align-items: center;
-  gap: var(--bs-space-6);
-  flex-shrink: 0;
-  padding: var(--bs-space-6);
+  color: var(--bs-ink-light);
+  display: flex;
+  font-size: var(--bs-text-sm);
+  font-weight: normal;
+  gap: var(--bs-space-2);
+  line-height: var(--bs-leading-lg);
+  margin: var(--bs-space-2) 0 0 0;
 }
-/* with border */
-.bs-flyout-footer:where([data-border="true"]) {
-  border-top: 1px solid var(--bs-border-base);
+/*
+  HEADS-UP:
+  Most BsFlyout base styles come from its BsPopover root element,
+  so some of these styles are there to override those defaults.
+*/
+.bs-flyout {
+  --bs-pop-header-padding: var(--bs-space-6);
+  --bs-pop-body-padding: var(--bs-space-6);
+  --bs-pop-footer-padding: var(--bs-space-6);
+  margin: 0;
+  border-radius: 0;
+}
+/* targeting header too, so consumer could just do: <BsPopHeader>My Title</BsPopHeader> */
+.bs-flyout :where(.bs-pop-header, .bs-pop-title) {
+  font-size: var(--bs-text-lg);
 }
 /* -- SIZING -- */
 .bs-flyout {
   --bs-popover-height: 100dvh;
   max-height: unset;
+  max-width: 100dvw;
 }
 .bs-flyout:where([data-size="sm"]) {
   --bs-popover-width: 22.5rem; /* 360px */
@@ -7237,13 +7300,6 @@ a.bs-text-button {
 .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;
 }
@@ -7268,142 +7324,50 @@ a.bs-text-button {
   ...so some of these styles override those defaults.
 */
 .bs-modal {
-  --bs-modal-sm-width: 21.25rem; /* 340px */
-  --bs-modal-md-width: 35rem; /* 560px */
-  --bs-modal-lg-width: 45.3125rem; /* 725px */
-  --bs-modal-padding: 1.5rem; /* 24px */
-  --bs-modal-lg-padding: 2rem; /* 32px */
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
+  --bs-pop-header-padding: var(--bs-modal-padding);
+  --bs-pop-body-padding: var(--bs-modal-padding);
+  --bs-pop-footer-padding: var(--bs-space-4) var(--bs-modal-padding);
+  --bs-modal-padding: var(--bs-space-6);
+  --bs-modal-lg-padding: var(--bs-space-8);
   background-color: var(--bs-bg-base-to-medium);
   box-shadow: var(--bs-shadow-contentHigh);
-  overflow: hidden;
-}
-/* -- CLOSE BUTTON -- */
-/* calc() adjusts for default .5rem padding .bs-popover-close-button has, which exists for a nicer hit target */
-.bs-modal :where(.bs-popover-close-button) {
-  top: calc(var(--bs-modal-padding) - .5rem);
-  right: calc(var(--bs-modal-padding) - .5rem);
-}
-.bs-modal:where([data-size="lg"]) :where(.bs-popover-close-button) {
-  top: calc(var(--bs-modal-lg-padding) - .5rem);
-  right: calc(var(--bs-modal-lg-padding) - .5rem);
-}
-/* -- HEADER -- */
-.bs-modal-header {
-  flex-shrink: 0;
-  padding: var(--bs-modal-padding);
-}
-/* with border */
-.bs-modal-header:where([data-border="true"]) {
-  border-bottom: 1px solid var(--bs-border-base);
-}
-/* large size, no border */
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-header) {
-  padding: var(--bs-modal-lg-padding);
-}
-/* large size, with border */
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-header[data-border="true"]) {
-  padding: var(--bs-modal-lg-padding);
-  padding-bottom: var(--bs-modal-padding);
+  margin: 0;
 }
-.bs-modal-title {
-  display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-  margin: 0 var(--bs-space-6) 0 0;
+/* targeting header too, so consumer could just do: <BsPopHeader>My Title</BsPopHeader> */
+.bs-modal :where(.bs-pop-header, .bs-pop-title) {
   font-size: var(--bs-text-lg);
-  font-weight: normal;
-  line-height: var(--bs-leading-regular);
-}
-.bs-modal-subtitle {
-  display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-  margin: var(--bs-space-2) 0 0 0;
-  font-size: var(--bs-text-sm);
-  font-weight: normal;
-  line-height: var(--bs-leading-lg);
-}
-/* -- BODY -- */
-.bs-modal-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 var(--bs-modal-padding);
-  overscroll-behavior: contain;
-}
-/* large size */
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-body) {
-  padding: 0 var(--bs-modal-lg-padding);
-}
-/* no header exists */
-.bs-modal:where(:not(:has(.bs-modal-header))) :where(.bs-modal-body) {
-  padding-top: var(--bs-modal-padding);
-}
-/* large size, no header exists */
-.bs-modal:where([data-size="lg"]):where(:not(:has(.bs-modal-header))) :where(.bs-modal-body) {
-  padding-top: var(--bs-modal-lg-padding);
-}
-/* no footer exists */
-.bs-modal:where(:not(:has(.bs-modal-footer))) :where(.bs-modal-body) {
-  padding-bottom: var(--bs-modal-padding);
-}
-/* large size, no footer exists */
-.bs-modal:where([data-size="lg"]):where(:not(:has(.bs-modal-footer))) :where(.bs-modal-body) {
-  padding-bottom: var(--bs-modal-lg-padding);
-}
-/* header border exists */
-.bs-modal:where(:has(.bs-modal-header[data-border="true"])) :where(.bs-modal-body) {
-  padding-top: var(--bs-modal-padding);
 }
-/* footer border exists */
-.bs-modal:where(:has(.bs-modal-footer[data-border="true"])) :where(.bs-modal-body) {
-  padding-bottom: var(--bs-modal-padding);
+.bs-modal:where([data-size="lg"]) {
+  --bs-pop-x-btn-right: var(--bs-space-6);
+  --bs-pop-header-padding: var(--bs-modal-lg-padding) var(--bs-modal-lg-padding) var(--bs-modal-padding);
+  --bs-pop-body-padding: var(--bs-modal-padding) var(--bs-modal-lg-padding);
+  --bs-pop-footer-padding: var(--bs-space-4) var(--bs-modal-lg-padding);
 }
-/* -- 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);
+.bs-modal:where([data-size="lg"]:has(.bs-pop-header)) {
+  --bs-pop-x-btn-right: var(--bs-space-6);
+  --bs-pop-x-btn-top: var(--bs-space-6);
 }
 /* -- SIZING -- */
 .bs-modal {
-  max-width: calc(100dvw - 3rem);
+  --bs-popover-width: calc(100dvw - 3rem);
   max-height: calc(100dvh - 3rem);
 }
 @media (min-width: 752px) {
   .bs-modal {
+    --bs-popover-width: fit-content;
     max-height: min(calc(100dvh - 3rem), 40.625rem);
   }
 
   .bs-modal:where([data-size="sm"]) {
-    --bs-popover-width: var(--bs-modal-sm-width);
+    --bs-popover-width: 21.25rem; /* 340px */
   }
 
   .bs-modal:where([data-size="md"]) {
-    --bs-popover-width: var(--bs-modal-md-width);
+    --bs-popover-width: 35rem; /* 560px */
   }
 
   .bs-modal:where([data-size="lg"]) {
-    --bs-popover-width: var(--bs-modal-lg-width);
+    --bs-popover-width: 45.3125rem; /* 725px */
   }
 }
 /* -- TRANSITIONS -- */
@@ -7411,13 +7375,6 @@ a.bs-text-button {
 .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;
 }
@@ -7457,84 +7414,72 @@ a.bs-text-button {
 }
 /* Toast */
 .bs-toast {
+  --bs-pop-header-padding: var(--bs-space-4);
+  --bs-pop-body-padding: var(--bs-space-4);
+  --bs-pop-footer-padding: var(--bs-space-2) var(--bs-space-4);
   --bs-popover-width: min(23rem, calc(100dvw - 3rem));
   --toast-transform: translate(0, calc(100% + 1.5rem));
   --toast-variant-color: var(--bs-primary-base);
+  --toast-icon: var(--toast-icon-base);
+  --toast-icon-color: var(--bs-ink-primary);
+  --toast-icon-base: url('https://cdn.apps.wwt.com/static/wwt-blue-steel-icons/icon-circle-info.svg');
+  --toast-icon-warning: url('https://cdn.apps.wwt.com/static/wwt-blue-steel-icons/icon-warning.svg');
+  --toast-icon-positive: url('https://cdn.apps.wwt.com/static/wwt-blue-steel-icons/icon-thumbs-up-stroke.svg');
   background-color: var(--bs-bg-base-to-light);
   border-radius: 0;
   border-top: 4px solid var(--toast-variant-color);
   box-shadow: var(--bs-shadow-contentMedium);
   margin: 0;
   order: var(--toast-order, 0);
-  padding: 0;
+}
+/* Toast Footer Mobile - Buttons will be stacked */
+.bs-toast :where(.bs-pop-footer) {
+  align-items: stretch;
+  flex-direction: column-reverse;
+  gap: var(--bs-space-2);
 }
 @media (min-width: 440px) {
   .bs-toast {
     --toast-transform: translate(calc(100% + 1.5rem), 0);
   }
+
+  .bs-toast :where(.bs-pop-footer) {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--bs-space-6);
+  }
 }
+/* Toast Variants */
 .bs-toast:where([data-variant="warning"]) {
+  --toast-icon: var(--toast-icon-warning);
+  --toast-icon-color: var(--bs-ink-warning);
   --toast-variant-color: var(--bs-warning-base);
-
-  .bs-toast-header-icon {
-    color: var(--bs-ink-warning);
-  }
 }
 .bs-toast:where([data-variant="positive"]) {
+  --toast-icon: var(--toast-icon-positive);
+  --toast-icon-color: var(--bs-ink-positive);
   --toast-variant-color: var(--bs-positive-base);
-
-  .bs-toast-header-icon {
-    color: var(--bs-ink-positive);
-  }
 }
 .bs-toast:where([data-variant="negative"]) {
-  --toast-variant-color: var(--bs-negative-base);
-
-  .bs-toast-header-icon {
-    color: var(--bs-ink-negative);
-  }
-}
-/* Toast Header */
-.bs-toast :where(.bs-toast-header) {
-  align-items: center;
-  color: var(--bs-ink-base);
-  display: flex;
-  gap: 0.5rem;
-  padding: 1rem;
+  --toast-icon: var(--toast-icon-warning);
+  --toast-icon-color: var(--bs-negative-dark);
+  --toast-variant-color: var(--bs-negative-dark);
 }
-.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
-  color: var(--bs-ink-primary);
-}
-.bs-toast :where(.bs-toast-header .bs-toast-header-text) {
-  font-size: var(--bs-text-md);
-  font-weight: var(--bs-font-normal);
-  line-height: var(--bs-leading-lg);
+/* Toast Header - auto-add the icon */
+.bs-toast :where(.bs-pop-header:not(:has(.bs-pop-title, .bs-pop-subtitle)))::before,
+.bs-toast :where(.bs-pop-header .bs-pop-title)::before {
+  display: block;
+  content: '';
+  background-color: var(--toast-icon-color);
+  -webkit-mask: var(--toast-icon) center/contain no-repeat;
+  mask: var(--toast-icon) center/contain no-repeat;
+  flex-shrink: 0;
+  height: var(--bs-space-4);
+  width: var(--bs-space-4);
 }
 /* Toast Body */
-.bs-toast :where(.bs-toast-body) {
-  border-bottom: 1px solid var(--bs-border-base);
+.bs-toast :where(.bs-pop-body) {
   color: var(--bs-ink-light);
-  padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.bs-toast :where(:not(:has(.bs-toast-header)) .bs-toast-body) {
-  padding-top: 1rem;
-}
-/* Toast Footer */
-.bs-toast :where(.bs-toast-footer) {
-  /* Mobile - Buttons will be stacked */
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-}
-.bs-toast :where(.bs-toast-footer):where([data-stacked]:not([data-stacked="false"])) {
-  flex-direction: column-reverse;
 }
 /* Vue Transition Styles */
 .bs-toast-enter-active,
@@ -7557,52 +7502,185 @@ a.bs-text-button {
   BsDropdown inherits base styles from its BsPopover root element
   ...so some of these styles override those defaults.
 */
+/* -- DROPDOWN -- */
+/* Note: Assumes mobile sheet by default */
+/* Note: Some heights for reference */
+/* filter (desktop):                        4rem (64px) */
+/* filter (mobile sheet):                   5.5rem (88px) */
+/* mobile header (heading and description): 6rem (96px) */
+/* mobile header (just heading text):       4.25rem (68px) */
+/* mobile sheet footer:                     3rem (48px) */
 .bs-dropdown {
+  --bs-popover-width: 100dvw;
   background-color: var(--bs-bg-base-to-medium);
-  max-height: 20rem;
+  height: 60dvh;
+  margin: 0;
+  max-width: 100dvw;
   padding: 0;
 }
-/* filter could be "display: none" if mounted for it's logic, yet hidden due to using an outside input/model */
-.bs-dropdown:where(:has(.bs-dropdown-filter:not([style*="display: none"]))) {
-  padding-top: 0;
+/* Don't use mobile sheet at any breakpoint */
+.bs-dropdown:where(:not([data-mobile-sheet])) {
+  --bs-popover-width: 20rem;
+  height: unset;
+  max-height: 20rem; /* 320px */
+  max-width: calc(100dvw - 3rem);
 }
-.bs-dropdown :where(hr) {
-  margin: var(--bs-space-3) 0;
+@media (min-width: 752px) {
+  /* Remove bottom drawer at tablet breakpoint */
+  .bs-dropdown:where([data-mobile-sheet="mobile"]) {
+    --bs-popover-width: 20rem;
+    height: unset;
+    max-height: 20rem; /* 320px */
+    max-width: calc(100dvw - 3rem);
+  }
 }
-.bs-dropdown:where(:focus-visible) {
-  outline: none;
+@media (min-width: 1166px) {
+  /* Remove bottom drawer at desktop breakpoint */
+  .bs-dropdown:where([data-mobile-sheet="tablet"]) {
+    --bs-popover-width: 20rem;
+    height: unset;
+    max-height: 20rem; /* 320px */
+    max-width: calc(100dvw - 3rem);
+  }
+}
+/* Here if a consumer adds their own hr between BsOptions.  Just don't override the internal option group separator. */
+.bs-dropdown :where(hr:not(.bs-option-group-multiple-hr)) {
+  margin: var(--bs-space-3) 0;
 }
+/* -- LIST -- */
 .bs-dropdown-list {
-  max-height: 20rem;
+  display: flex;
+  flex-direction: column;
+}
+/* Only add padding, etc when there is at least one child visible */
+.bs-dropdown-list:where(:has(.bs-option[data-visible="true"], .bs-option-group[data-visible="true"])) {
+  flex: 1;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: var(--bs-space-3) 0;
 }
+.bs-dropdown-list:where(:has( .bs-option-group)) {
+  padding-top: 0;
+}
 .bs-dropdown-list:where(:focus-visible) {
   outline: none;
 }
 .bs-dropdown:where(:has(.bs-dropdown-filter)) :where(.bs-dropdown-list) {
   padding-top: 0;
-  /* filter input is 4rem, so 20rem (default) - 4rem = 16rem */
-  max-height: 16rem;
+}
+/* Move selected options to the top */
+.bs-dropdown-list:where([aria-multiselectable="true"]) :where(.bs-option:where([data-selected-to-top="true"])) {
+  order: -1;
+}
+/* Separator for multiple selected options */
+.bs-dropdown-multiple-hr {
+  margin: 0 var(--bs-space-3) var(--bs-space-3);
+  border-bottom: 0.0625rem solid var(--bs-accent-7-light);
+}
+/* -- MOBILE HEADER -- */
+/* Mobile sheet header */
+.bs-dropdown :where(.bs-dropdown-mobile-header) {
+  border-bottom: 1px solid var(--bs-border-base);
+  padding: var(--bs-space-6);
+}
+/* Hide header if not using mobile sheet */
+.bs-dropdown:where(:not([data-mobile-sheet])) :where(.bs-dropdown-mobile-header) {
+  display: none;
+}
+/* Hide header at tablet breakpoint if only using mobile sheet */
+@media (min-width: 752px) {
+  .bs-dropdown:where([data-mobile-sheet="mobile"]) :where(.bs-dropdown-mobile-header) {
+    display: none;
+  }
+}
+/* Hide header at desktop breakpoint if only using tablet sheet */
+@media (min-width: 1166px) {
+  .bs-dropdown:where([data-mobile-sheet="tablet"]) :where(.bs-dropdown-mobile-header) {
+    display: none;
+  }
+}
+.bs-dropdown :where(.bs-dropdown-mobile-heading) {
+  font-size: var(--bs-text-lg);
+  line-height: var(--bs-leading-none);
+}
+.bs-dropdown :where(.bs-dropdown-mobile-description) {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-base);
+  padding-top: var(--bs-space-1);
+}
+/* -- MOBILE FOOTER -- */
+/* Mobile sheet footer, show by default */
+.bs-dropdown-mobile-footer {
+  display: flex;
+}
+/* Hide footer if not using mobile sheet */
+.bs-dropdown:where(:not([data-mobile-sheet])) :where(.bs-dropdown-mobile-footer) {
+  display: none;
+}
+@media (min-width: 752px) {
+  /* Hide footer at tablet breakpoint if only using mobile sheet */
+  .bs-dropdown:where([data-mobile-sheet="mobile"]) :where(.bs-dropdown-mobile-footer) {
+    display: none;
+  }
+}
+@media (min-width: 1166px) {
+  /* Hide footer at desktop breakpoint if only using tablet sheet */
+  .bs-dropdown:where([data-mobile-sheet="tablet"]) :where(.bs-dropdown-mobile-footer) {
+    display: none;
+  }
+}
+.bs-dropdown-mobile-footer :where(.bs-button) {
+  margin: var(--bs-space-2) var(--bs-space-6);
+  width: 100%;
+}
+/* -- CLOSE BUTTON -- */
+/* Override popover button positioning for mobile drawer */
+.bs-dropdown :where(.bs-popover-close-button) {
+  right: var(--bs-space-4);
+  top: var(--bs-space-4);
 }
 /* -- FILTER -- */
 .bs-dropdown-filter {
   position: sticky;
   top: 0;
-  padding: var(--bs-space-3);
-  /* fade to transparent in bottom padding area, so scrolling menu items under filter looks better */
-  background-image: linear-gradient(
-    var(--bs-bg-base-to-medium) calc(100% - var(--bs-space-3)),
-    transparent 100%
-  );
+  padding: var(--bs-space-6) var(--bs-space-3);
   z-index: 1;
 }
+/* No mobile sheet, so always use desktop padding */
+.bs-dropdown:where(:not([data-mobile-sheet])) :where(.bs-dropdown-filter) {
+  padding: var(--bs-space-3);
+}
+/* Mobile sheet, so use desktop padding at tablet breakpoint */
+@media (min-width: 752px) {
+  .bs-dropdown:where([data-mobile-sheet="mobile"]) :where(.bs-dropdown-filter) {
+    padding: var(--bs-space-3);
+  }
+}
+/* Tablet sheet, so use desktop padding at desktop breakpoint */
+@media (min-width: 1166px) {
+  .bs-dropdown:where([data-mobile-sheet="tablet"]) :where(.bs-dropdown-filter) {
+    padding: var(--bs-space-3);
+  }
+}
+.bs-dropdown-filter:where([data-hide-input="true"]) {
+  padding-top: 0;
+}
 .bs-dropdown-filter-icon {
   margin-left: var(--bs-space-3);
 }
 .bs-dropdown-filter-input {
+  overflow: hidden;
   padding-inline: var(--bs-space-2);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bs-dropdown-filter-hint {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-xs);
+  padding-top: var(--bs-space-2);
+}
+.bs-dropdown-filter:where([data-hide-input="true"]) :where(.bs-dropdown-filter-hint) {
+  padding-top: var(--bs-space-4);
 }
 /* override form-text-fields.css style that hides placeholder when inputs are focused */
 .bs-dropdown-filter-input::-moz-placeholder {
@@ -7626,14 +7704,19 @@ a.bs-text-button {
   box-shadow: 0px 0px 0px 1px inset var(--bs-primary-base);
 }
 /* -- SIZING -- */
-.bs-dropdown:where([data-size="sm"]) {
-  --bs-popover-width: 10rem; /* 160px */
-}
-.bs-dropdown:where([data-size="md"]) {
-  --bs-popover-width: 20rem; /* 320px */
-}
-.bs-dropdown:where([data-size="lg"]) {
-  --bs-popover-width: 28rem; /* 448px */
+/* Only applies to non-mobile */
+@media (min-width: 1166px) {
+  .bs-dropdown:where([data-size="sm"]) {
+    --bs-popover-width: 10rem; /* 160px */
+  }
+
+  .bs-dropdown:where([data-size="md"]) {
+    --bs-popover-width: 20rem; /* 320px */
+  }
+
+  .bs-dropdown:where([data-size="lg"]) {
+    --bs-popover-width: 28rem; /* 448px */
+  }
 }
 /*
   HEADS-UP:
@@ -7641,16 +7724,14 @@ a.bs-text-button {
   so some of these styles are there to override those defaults.
 */
 .bs-tooltip {
+  display: block;
   padding: var(--bs-space-4);
   font-size: var(--bs-text-sm);
-  color: var(--bs-ink-violet);
+  color: var(--bs-ink-accent-2);
   text-align: center;
   line-height: var(--bs-leading-lg);
   background-color: var(--bs-bg-base-to-medium);
 }
-.dark :where(.bs-tooltip) {
-  color: var(--bs-ink-base);
-}
 /* Prevent tiny empty tooltip from showing if empty string is rendered into slot. */
 .bs-tooltip:where(:empty) {
   display: none;
@@ -8764,6 +8845,12 @@ a.bs-text-button {
 .bs-bg-accent-3-highlight {
   background-color: var(--bs-accent-3-highlight);
 }
+.bs-text-accent-4-base-fixed {
+  color: var(--bs-accent-4-base-fixed);
+}
+.bs-bg-accent-4-base-fixed {
+  background-color: var(--bs-accent-4-base-fixed);
+}
 .bs-text-accent-4-base {
   color: var(--bs-accent-4-base);
 }
@@ -8794,84 +8881,114 @@ a.bs-text-button {
 .bs-bg-accent-4-highlight {
   background-color: var(--bs-accent-4-highlight);
 }
-/* Status Colors */
-.bs-text-positive-base-fixed {
-  color: var(--bs-positive-base-fixed);
+.bs-text-accent-5-base {
+  color: var(--bs-accent-5-base);
 }
-.bs-bg-positive-base-fixed {
-  background-color: var(--bs-positive-base-fixed);
+.bs-bg-accent-5-base {
+  background-color: var(--bs-accent-5-base);
 }
-.bs-text-positive-base {
-  color: var(--bs-positive-base);
+.bs-text-accent-5-medium {
+  color: var(--bs-accent-5-medium);
 }
-.bs-bg-positive-base {
-  background-color: var(--bs-positive-base);
+.bs-bg-accent-5-medium {
+  background-color: var(--bs-accent-5-medium);
 }
-.bs-text-positive-medium {
-  color: var(--bs-positive-medium);
+.bs-text-accent-5-light {
+  color: var(--bs-accent-5-light);
 }
-.bs-bg-positive-medium {
-  background-color: var(--bs-positive-medium);
+.bs-bg-accent-5-light {
+  background-color: var(--bs-accent-5-light);
 }
-.bs-text-positive-light {
-  color: var(--bs-positive-light);
+.bs-text-accent-5-lightest {
+  color: var(--bs-accent-5-lightest);
 }
-.bs-bg-positive-light {
-  background-color: var(--bs-positive-light);
+.bs-bg-accent-5-lightest {
+  background-color: var(--bs-accent-5-lightest);
 }
-.bs-text-positive-lightest {
-  color: var(--bs-positive-lightest);
+.bs-text-accent-5-highlight {
+  color: var(--bs-accent-5-highlight);
 }
-.bs-bg-positive-lightest {
-  background-color: var(--bs-positive-lightest);
+.bs-bg-accent-5-highlight {
+  background-color: var(--bs-accent-5-highlight);
 }
-.bs-text-positive-highlight {
-  color: var(--bs-positive-highlight);
+.bs-text-accent-6-base {
+  color: var(--bs-accent-6-base);
 }
-.bs-bg-positive-highlight {
-  background-color: var(--bs-positive-highlight);
+.bs-bg-accent-6-base {
+  background-color: var(--bs-accent-6-base);
+}
+.bs-text-accent-6-medium {
+  color: var(--bs-accent-6-medium);
 }
-.bs-text-ecomm-positive-base-fixed {
-  color: var(--bs-ecomm-positive-base-fixed);
+.bs-bg-accent-6-medium {
+  background-color: var(--bs-accent-6-medium);
 }
-.bs-bg-ecomm-positive-base-fixed {
-  background-color: var(--bs-ecomm-positive-base-fixed);
+.bs-text-accent-6-light {
+  color: var(--bs-accent-6-light);
 }
-.bs-text-ecomm-positive-base {
-  color: var(--bs-ecomm-positive-base);
+.bs-bg-accent-6-light {
+  background-color: var(--bs-accent-6-light);
 }
-.bs-bg-ecomm-positive-base {
-  background-color: var(--bs-ecomm-positive-base);
+.bs-text-accent-6-lightest {
+  color: var(--bs-accent-6-lightest);
 }
-.bs-text-ecomm-positive-medium {
-  color: var(--bs-ecomm-positive-medium);
+.bs-bg-accent-6-lightest {
+  background-color: var(--bs-accent-6-lightest);
 }
-.bs-bg-ecomm-positive-medium {
-  background-color: var(--bs-ecomm-positive-medium);
+.bs-text-accent-6-highlight {
+  color: var(--bs-accent-6-highlight);
 }
-.bs-text-ecomm-positive-light {
-  color: var(--bs-ecomm-positive-light);
+.bs-bg-accent-6-highlight {
+  background-color: var(--bs-accent-6-highlight);
 }
-.bs-bg-ecomm-positive-light {
-  background-color: var(--bs-ecomm-positive-light);
+.bs-text-accent-7-base {
+  color: var(--bs-accent-7-base);
 }
-.bs-text-ecomm-positive-lightest {
-  color: var(--bs-ecomm-positive-lightest);
+.bs-bg-accent-7-base {
+  background-color: var(--bs-accent-7-base);
 }
-.bs-bg-ecomm-positive-lightest {
-  background-color: var(--bs-ecomm-positive-lightest);
+.bs-text-accent-7-medium {
+  color: var(--bs-accent-7-medium);
 }
-.bs-text-ecomm-positive-highlight {
-  color: var(--bs-ecomm-positive-highlight);
+.bs-bg-accent-7-medium {
+  background-color: var(--bs-accent-7-medium);
 }
-.bs-bg-ecomm-positive-highlight {
-  background-color: var(--bs-ecomm-positive-highlight);
+.bs-text-accent-7-light {
+  color: var(--bs-accent-7-light);
 }
-.bs-text-warning-dark {
-  color: var(--bs-warning-dark);
+.bs-bg-accent-7-light {
+  background-color: var(--bs-accent-7-light);
 }
-.bs-bg-warning-dark {
-  background-color: var(--bs-warning-dark);
+.bs-text-accent-7-lightest {
+  color: var(--bs-accent-7-lightest);
+}
+.bs-bg-accent-7-lightest {
+  background-color: var(--bs-accent-7-lightest);
+}
+.bs-text-accent-7-highlight {
+  color: var(--bs-accent-7-highlight);
+}
+.bs-bg-accent-7-highlight {
+  background-color: var(--bs-accent-7-highlight);
+}
+/* Status Colors */
+.bs-text-positive-base {
+  color: var(--bs-positive-base);
+}
+.bs-bg-positive-base {
+  background-color: var(--bs-positive-base);
+}
+.bs-text-positive-medium {
+  color: var(--bs-positive-medium);
+}
+.bs-bg-positive-medium {
+  background-color: var(--bs-positive-medium);
+}
+.bs-text-positive-highlight {
+  color: var(--bs-positive-highlight);
+}
+.bs-bg-positive-highlight {
+  background-color: var(--bs-positive-highlight);
 }
 .bs-text-warning-base {
   color: var(--bs-warning-base);
@@ -8885,30 +9002,12 @@ a.bs-text-button {
 .bs-bg-warning-medium {
   background-color: var(--bs-warning-medium);
 }
-.bs-text-warning-light {
-  color: var(--bs-warning-light);
-}
-.bs-bg-warning-light {
-  background-color: var(--bs-warning-light);
-}
-.bs-text-warning-lightest {
-  color: var(--bs-warning-lightest);
-}
-.bs-bg-warning-lightest {
-  background-color: var(--bs-warning-lightest);
-}
 .bs-text-warning-highlight {
   color: var(--bs-warning-highlight);
 }
 .bs-bg-warning-highlight {
   background-color: var(--bs-warning-highlight);
 }
-.bs-text-negative-dark {
-  color: var(--bs-negative-dark);
-}
-.bs-bg-negative-dark {
-  background-color: var(--bs-negative-dark);
-}
 .bs-text-negative-base {
   color: var(--bs-negative-base);
 }
@@ -8921,18 +9020,6 @@ a.bs-text-button {
 .bs-bg-negative-medium {
   background-color: var(--bs-negative-medium);
 }
-.bs-text-negative-light {
-  color: var(--bs-negative-light);
-}
-.bs-bg-negative-light {
-  background-color: var(--bs-negative-light);
-}
-.bs-text-negative-lightest {
-  color: var(--bs-negative-lightest);
-}
-.bs-bg-negative-lightest {
-  background-color: var(--bs-negative-lightest);
-}
 .bs-text-negative-highlight {
   color: var(--bs-negative-highlight);
 }