@wwtdev/bsds-css 3.2.2 → 3.4.0-rc.0

package/dist/wwt-bsds.css

@@ -25,15 +25,14 @@
   --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;
-  --bs-gold-400: #cca175;
-  --bs-gold-500: #997958;
+  --bs-gold-10: rgba(224, 199, 172, 0.1);
+  --bs-gold-100: #ebdfd4;
+  --bs-gold-200: #e0c7ac;
+  --bs-gold-300: #cca175;
+  --bs-gold-400: #997958;
   --bs-gray-50: #f7f7fc;
   --bs-gray-100: #f0f0fa;
-  --bs-gray-150: #e4e4eb;
+  --bs-gray-150: #dcdde9;
   --bs-gray-200: #c9cad9;
   --bs-gray-300: #a3a4b7;
   --bs-gray-400: #4e4f5f;
@@ -44,7 +43,7 @@
   --bs-green-300: #39a283;
   --bs-green-400: #008b5d;
   --bs-green-500: #00744d;
-  --bs-maroon-10: rgba(195, 91, 91, 0.1);
+  --bs-maroon-10: rgba(215, 145, 145, 0.1);
   --bs-maroon-100: #ebc8c8;
   --bs-maroon-200: #d79191;
   --bs-maroon-300: #c35b5b;
@@ -64,7 +63,7 @@
   --bs-orange-100: #f3c4a8;
   --bs-orange-200: #f7a17b;
   --bs-orange-300: #f97c4c;
-  --bs-orange-400: #fb550e;
+  --bs-orange-400: #ed5615;
   --bs-orange-500: #c33d04;
   --bs-orange-brand: #ff5100;
   --bs-orchid-10: rgba(190, 128, 255, 0.1);
@@ -227,28 +226,53 @@
     rgba(22, 47, 180, 0.05) 283.2deg,
     rgba(227, 28, 121, 0.05) 414.4deg
   );
-  --bs-space-0: 0;
-  --bs-space-1: 0.25rem;
-  --bs-space-2: 0.5rem;
-  --bs-space-3: 0.75rem;
-  --bs-space-4: 1rem;
-  --bs-space-6: 1.5rem;
-  --bs-space-8: 2rem;
-  --bs-space-12: 3rem;
-  --bs-space-16: 4rem;
-  --bs-space-24: 6rem;
-  --bs-space-32: 8rem;
-  --bs-space-none: 0;
-  --bs-space-3xs: 0.25rem;
-  --bs-space-2xs: 0.5rem;
-  --bs-space-xs: 0.75rem;
-  --bs-space-sm: 1rem;
-  --bs-space-md: 1.5rem;
-  --bs-space-lg: 2rem;
-  --bs-space-xl: 3rem;
-  --bs-space-2xl: 4rem;
-  --bs-space-3xl: 6rem;
-  --bs-space-4xl: 8rem;
+  --bs-space-0: calc(var(--bs-space) * 0);
+  --bs-space-1: calc(var(--bs-space) * 1);
+  --bs-space-2: calc(var(--bs-space) * 2);
+  --bs-space-3: calc(var(--bs-space) * 3);
+  --bs-space-4: calc(var(--bs-space) * 4);
+  --bs-space-5: calc(var(--bs-space) * 5);
+  --bs-space-6: calc(var(--bs-space) * 6);
+  --bs-space-7: calc(var(--bs-space) * 7);
+  --bs-space-8: calc(var(--bs-space) * 8);
+  --bs-space-9: calc(var(--bs-space) * 9);
+  --bs-space-10: calc(var(--bs-space) * 10);
+  --bs-space-11: calc(var(--bs-space) * 11);
+  --bs-space-12: calc(var(--bs-space) * 12);
+  --bs-space-14: calc(var(--bs-space) * 14);
+  --bs-space-16: calc(var(--bs-space) * 16);
+  --bs-space-20: calc(var(--bs-space) * 20);
+  --bs-space-24: calc(var(--bs-space) * 24);
+  --bs-space-28: calc(var(--bs-space) * 28);
+  --bs-space-32: calc(var(--bs-space) * 32);
+  --bs-space-36: calc(var(--bs-space) * 36);
+  --bs-space-40: calc(var(--bs-space) * 40);
+  --bs-space-44: calc(var(--bs-space) * 44);
+  --bs-space-48: calc(var(--bs-space) * 48);
+  --bs-space-52: calc(var(--bs-space) * 52);
+  --bs-space-56: calc(var(--bs-space) * 56);
+  --bs-space-60: calc(var(--bs-space) * 60);
+  --bs-space-64: calc(var(--bs-space) * 64);
+  --bs-space-72: calc(var(--bs-space) * 72);
+  --bs-space-80: calc(var(--bs-space) * 80);
+  --bs-space-96: calc(var(--bs-space) * 96);
+  --bs-space: 0.25rem;
+  --bs-space-px: 1px;
+  --bs-space-0_5: calc(var(--bs-space) * 0.5);
+  --bs-space-1_5: calc(var(--bs-space) * 1.5);
+  --bs-space-2_5: calc(var(--bs-space) * 2.5);
+  --bs-space-3_5: calc(var(--bs-space) * 3.5);
+  --bs-space-none: var(--bs-space-0);
+  --bs-space-3xs: var(--bs-space-1);
+  --bs-space-2xs: var(--bs-space-2);
+  --bs-space-xs: var(--bs-space-3);
+  --bs-space-sm: var(--bs-space-4);
+  --bs-space-md: var(--bs-space-6);
+  --bs-space-lg: var(--bs-space-8);
+  --bs-space-xl: var(--bs-space-12);
+  --bs-space-2xl: var(--bs-space-16);
+  --bs-space-3xl: var(--bs-space-24);
+  --bs-space-4xl: var(--bs-space-32);
   --bs-text-xs: 0.75rem;
   --bs-text-sm: 0.875rem;
   --bs-text-base: 1rem;
@@ -302,6 +326,9 @@
   /* Dynamic width set by the navigation component for page layout */
   --bs-page-nav-width: 0px;
 
+  /* Pill */
+  --bs-pill-height: 1.5rem;
+
   /* Table */
   --bs-table-cell-padding-xs: var(--bs-space-2);
   --bs-table-cell-padding-sm: var(--bs-space-3);
@@ -393,6 +420,202 @@
   --bs-border-active: var(--bs-cobalt-400);
   --bs-border-error: var(--bs-maroon-500);
 }
+html:where(:has([data-theme="softchoice-dark"])),
+[data-theme="softchoice-dark"] {
+  color-scheme: dark;
+}
+[data-theme="softchoice-dark"] {
+  /* Ink */
+  --bs-ink-base: var(--bs-white);
+  --bs-ink-medium: var(--bs-gray-100);
+  --bs-ink-light: var(--bs-gray-150);
+  --bs-ink-disabled: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
+  --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-primary: var(--bs-cobalt-100);
+  --bs-ink-secondary: var(--bs-orange-200);
+  --bs-ink-accent-1: var(--bs-midnight-100);
+  --bs-ink-accent-2: var(--bs-violet-100);
+  --bs-ink-accent-3: var(--bs-pink-200);
+  --bs-ink-accent-4: var(--bs-orchid-200);
+  --bs-ink-positive: var(--bs-green-200);
+  --bs-ink-warning: var(--bs-yellow-300);
+  --bs-ink-negative: var(--bs-maroon-200);
+
+  /* Primary */
+  --bs-primary-base-fixed: var(--bs-cobalt-400);
+  --bs-primary-base: var(--bs-cobalt-300);
+  --bs-primary-medium: var(--bs-cobalt-200);
+  --bs-primary-light: var(--bs-cobalt-200);
+  --bs-primary-lightest: var(--bs-cobalt-100);
+  --bs-primary-highlight: var(--bs-cobalt-10);
+
+  /* Secondary */
+  --bs-secondary-base-fixed: var(--bs-orange-400);
+  --bs-secondary-base: var(--bs-orange-300);
+  --bs-secondary-medium: var(--bs-orange-200);
+  --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-300);
+  --bs-accent-1-medium: var(--bs-midnight-200);
+  --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 2 */
+  --bs-accent-2-base: var(--bs-violet-300);
+  --bs-accent-2-medium: var(--bs-violet-200);
+  --bs-accent-2-light: 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-fixed: var(--bs-orchid-400);
+  --bs-accent-4-base: var(--bs-orchid-300);
+  --bs-accent-4-medium: var(--bs-orchid-200);
+  --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-300);
+  --bs-accent-5-medium: var(--bs-gold-200);
+  --bs-accent-5-light: var(--bs-gold-200);
+  --bs-accent-5-lightest: var(--bs-gold-100);
+  --bs-accent-5-highlight: var(--bs-gold-10);
+
+  /* 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-charcoal-100);
+  --bs-neutral-base: var(--bs-charcoal-200);
+  --bs-neutral-medium: var(--bs-charcoal-300);
+  --bs-neutral-light: var(--bs-charcoal-400);
+  --bs-neutral-lightest: var(--bs-charcoal-500);
+
+  /* Warning */
+  --bs-warning-base: var(--bs-yellow-400);
+  --bs-warning-medium: var(--bs-yellow-300);
+  --bs-warning-highlight: var(--bs-yellow-10);
+
+  /* Negative */
+  --bs-negative-base: var(--bs-maroon-300);
+  --bs-negative-medium: var(--bs-maroon-200);
+  --bs-negative-highlight: var(--bs-maroon-10);
+
+  /* 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-charcoal-100);
+  --bs-bg-invert-medium: var(--bs-charcoal-200);
+  --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); /* 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-cobalt-300);
+  --bs-border-error: var(--bs-maroon-200);
+
+  /* Atom gradients */
+  --bs-gradient-atom-ai-bg: conic-gradient(from 180deg at 50% 50%, rgba(83, 101, 196, 0.2) -96.8deg, rgba(228, 94, 155, 0.2) 74.2deg, rgba(51, 158, 238, 0.2) 98.8deg, rgba(249, 124, 76, 0.2) 259.6deg, rgba(83, 101, 196, 0.2) 283.2deg, rgba(228, 94, 155, 0.2) 414.4deg);
+  --bs-gradient-atom-ai-border: conic-gradient(from 180deg at 50% 50%, var(--bs-royal-300) -96.8deg, var(--bs-pink-300) 74.2deg, var(--bs-blue-300) 98.8deg, var(--bs-orange-300) 259.6deg, var(--bs-royal-300) 283.2deg, var(--bs-pink-300) 414.4deg);
+
+  /* Shadows */
+  --bs-shadow-secondary: rgba(10, 11, 25, 0.60);
+  --bs-shadow-dark: -16px 20px 40px 0 #000;
+  --bs-shadow-contentLow: var(--bs-shadow-dark);
+  --bs-shadow-contentLowCenter: var(--bs-shadow-dark);
+  --bs-shadow-contentMedium: var(--bs-shadow-dark);
+  --bs-shadow-contentHigh: var(--bs-shadow-dark);
+  --bs-shadow-drawerLeft: var(--bs-shadow-dark);
+  --bs-shadow-drawerRight: 16px 20px 40px 0 #000;
+  --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
+
+  /* -------------- Deprecated Color Tokens -------------- */
+ /* Ink */
+  --bs-ink-blue: var(--bs-cobalt-100); /* replaced by Ink Primary */
+  --bs-ink-orange: var(--bs-yellow-300); /* replaced by Ink Warning */
+  --bs-ink-pink: var(--bs-pink-200); /* replaced by Ink Accent 3 */
+  --bs-ink-plum: var(--bs-orange-200); /* replaced by Ink Secondary */
+  --bs-ink-purple: var(--bs-orchid-200); /* replaced by Ink Accent 4 */
+  --bs-ink-red: var(--bs-maroon-200); /* replaced by Ink Negative */
+  --bs-ink-royal: var(--bs-midnight-100); /* replaced by Ink Accent 1 */
+  --bs-ink-violet: var(--bs-violet-100); /* replaced by Ink Accent 2 */
+  --bs-bg-invert-to-medium: var(--bs-gray-500); /* removed in v3 */
+  --bs-ink-accent: var(--bs-orange-200); /* removed in v3 */
+
+  /* Blue (replaced by Primary) */
+  --bs-blue-base: var(--bs-cobalt-300);
+  --bs-blue-medium: var(--bs-cobalt-200);
+  --bs-blue-light: var(--bs-cobalt-200);
+  --bs-blue-lightest: var(--bs-cobalt-100);
+
+  /* Gray (replaced by Neutral) */
+  --bs-gray-dark: var(--bs-charcoal-100);
+  --bs-gray-base: var(--bs-charcoal-200);
+  --bs-gray-medium: var(--bs-charcoal-300);
+  --bs-gray-light: var(--bs-charcoal-400);
+  --bs-gray-lightest: var(--bs-charcoal-500);
+
+  /* Navy (replaced by Accent 7) */
+  --bs-navy-base: var(--bs-navy-300);
+  --bs-navy-medium: var(--bs-navy-200);
+
+  /* Orange (replaced by Warning) */
+  --bs-warning: var(--bs-yellow-400);
+  --bs-orange-base: var(--bs-yellow-300);
+
+  /* Pink (replaced by Accent 3) */
+  --bs-pink-base: var(--bs-pink-300);
+  --bs-pink-medium: var(--bs-pink-200);
+
+  /* Plum (replaced by Secondary) */
+  --bs-plum-base: var(--bs-orange-300);
+  --bs-plum-medium: var(--bs-orange-200);
+
+  /* Purple (replaced by Accent 4) */
+  --bs-purple-base: var(--bs-orchid-300);
+  --bs-purple-medium: var(--bs-orchid-200);
+  --bs-purple-light: var(--bs-orchid-200);
+  --bs-purple-lightest: var(--bs-orchid-100);
+
+  /* Red (replaced by Negative) */
+  --bs-red-base: var(--bs-maroon-300);
+  --bs-red-medium: var(--bs-maroon-200);
+
+  /* Royal Blue (replaced by Accent 1) */
+  --bs-royal-base: var(--bs-midnight-300);
+  --bs-royal-medium: var(--bs-midnight-200);
+  --bs-royal-light: var(--bs-midnight-200);
+  --bs-royal-lightest: var(--bs-midnight-100);
+
+  /* Violet (replaced by Accent 2) */
+  --bs-violet-base: var(--bs-violet-300);
+  --bs-violet-medium: var(--bs-violet-200);
+}
 /* put browser scrollbars into dark mode */
 /* html selector needed since data-theme gets added to body, but scrolling may be on <html> */
 html:where(:has(.dark, [data-theme="wwt-dark"])),
@@ -405,7 +628,7 @@ html:where(:has(.dark, [data-theme="wwt-dark"])),
   /* Ink */
   --bs-ink-base: var(--bs-white);
   --bs-ink-medium: var(--bs-gray-100);
-  --bs-ink-light: var(--bs-gray-200);
+  --bs-ink-light: var(--bs-gray-150);
   --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);
@@ -570,7 +793,7 @@ html:where(:has(.dark, [data-theme="wwt-dark"])),
   --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);
+  --bs-ink-invert-light: var(--bs-gray-150);
   --bs-ink-primary: var(--bs-blue-500);
   --bs-ink-secondary: var(--bs-plum-400);
   --bs-ink-accent-1: var(--bs-royal-400);
@@ -1395,7 +1618,7 @@ table {
 }
 thead {
   color: var(--bs-ink-base);
-  font-size: var(--bs-font-base);
+  font-size: var(--bs-text-base);
   font-weight: 600;
 }
 tbody {
@@ -2305,10 +2528,10 @@ Custom properties:
 }
 /* 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-base);
 }
 .bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
-    color: var(--bs-negative-dark);
+    color: var(--bs-negative-base);
 }
 @media (min-width: 440px) {
     .bs-toast-deprecated {
@@ -2530,15 +2753,13 @@ This must go last to properly override the other classes
   transform: translateY(-50%) scale(0.5);
 }
 .bs-accordion {
-  --accordion-link-color: var(--bs-positive-base-fixed);
-  --accordion-link-outline-color: var(--bs-primary-base);
   --accordion-outline-color: transparent;
   --accordion-padding-inline: 0;
   --accordion-text-size: var(--bs-text-sm);
   border-block: 1px solid var(--bs-border-base);
   display: block;
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-accordion {
     --accordion-padding-inline: var(--bs-space-2);
     --accordion-text-size: var(--bs-text-base);
@@ -2586,7 +2807,7 @@ This must go last to properly override the other classes
 .bs-accordion > :where(header) > :where(button) > * {
   vertical-align: middle;
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-accordion :where(.bs-accordion-toggle) > * ,
   .bs-accordion > :where(header) > :where(button) > * {
     margin-right: var(--bs-space-3);
@@ -2624,7 +2845,7 @@ This must go last to properly override the other classes
 }
 .bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
   grid-template-rows: 1fr;
-  padding-block-end: var(--bs-space-f-2);
+  padding-block-end: var(--bs-space-2);
 }
 /* Accordion Group */
 :where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
@@ -2656,7 +2877,7 @@ This must go last to properly override the other classes
   .bs-alert:where([data-horizontal="true"]) {
     padding: 1rem 1.5rem;
     grid-template-areas: "icon title action close";
-    grid-template-columns: 1.125rem max-content 1fr 1rem;
+    grid-template-columns: 1.125rem auto 1fr 1rem;
   }
 }
 .bs-alert :where(.bs-alert-icon) {
@@ -2682,6 +2903,7 @@ This must go last to properly override the other classes
   .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
     font-size: 1.125rem;
     line-height: 1.5;
+    overflow-wrap: break-word;
   }
 
   .bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
@@ -2722,6 +2944,7 @@ This must go last to properly override the other classes
 .bs-alert :where(.bs-alert-action) {
   grid-area: action;
   margin-top: 1rem;
+  white-space: nowrap;
 }
 @media (min-width: 752px) {
   .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
@@ -2904,7 +3127,7 @@ This must go last to properly override the other classes
 .bs-banner:where([data-variant="negative"]) {
   --banner-bg: var(--bs-accent-6-medium);
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-banner {
     --banner-icon-display: inline-flex;
     --banner-padding: var(--banner-padding-dt);
@@ -3451,8 +3674,8 @@ a.bs-circle-button {
 .bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
   --btn-icon-bg-color: transparent;
   --btn-icon-stroke-color: var(--btn-main);
-  --btn-light: var(--bs-primary-10);
-  --btn-secondary: var(--bs-primary-10);
+  --btn-light: transparent;
+  --btn-secondary: transparent;
 }
 /* Active, Hover, Focus states */
 .bs-circle-button:active, .bs-circle-button:hover {
@@ -4775,6 +4998,12 @@ data-autosize-icons="true" - see above
   grid-template-columns: auto 1fr auto auto;
   align-items: center;
   cursor: pointer;
+
+  &:where([data-show-pill-group="true"]) {
+    --input-height: auto;
+    --input-padding-block: var(--bs-space-2);
+    min-height: var(--bs-space-10);
+  }
 }
 /* -- Multiselect Count -- */
 .bs-input-button-count {
@@ -5288,7 +5517,7 @@ label:where(.bs-label) {
 .bs-option:where(:not([data-multiple="true"])[aria-selected="true"]) {
   --description-color: var(--bs-ink-primary);
   background: var(--bs-bg-medium-to-light);
-  border-left-color: var(--bs-ink-primary);
+  border-left-color: var(--bs-primary-base);
   color: var(--bs-ink-primary);
 }
 /* selected yet disabled...should be a very rare scenario, but need to handle it  */
@@ -5472,8 +5701,9 @@ label:where(.bs-label) {
   font-family: inherit;
   font-size: var(--bs-text-sm);
   gap: var(--pill-gap);
-  height: 1.5rem;
   line-height: 1rem;
+  max-width: 100%;
+  min-height: var(--bs-pill-height);
   padding: 0 .375rem;
   position: relative;
   text-decoration: none;
@@ -5645,6 +5875,23 @@ label:where(.bs-label) {
 .bs-pill:where([data-variant^="filter"])[data-active="false"]:is(:disabled, [aria-disabled="true"]) {
   --pill-border: var(--bs-gray-400);
 }
+.bs-pill-group {
+  --pill-group-max-lines: 3;
+}
+.bs-pill-group-pills {
+  /* Mainly for css-component-only usage */
+  --default-max-height: calc(var(--pill-group-max-lines) * (var(--bs-pill-height) + var(--bs-space-2)));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bs-space-2);
+  max-height: var(--pill-group-max-height, var(--default-max-height));
+  overflow: hidden;
+}
+.bs-pill-group-pills:where([data-expanded="true"]) {
+  margin-bottom: var(--bs-space-2);
+  max-height: none;
+  overflow: visible;
+}
 .bs-profile-details {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-sm);
@@ -5816,14 +6063,14 @@ a.bs-profile:where([data-layout]):hover {
   --bs-spinner-color-1: white;
   --bs-spinner-color-2: white;
 }
-:where(#bs-spinner-gradient stop) {
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop) {
   stop-color: var(--bs-secondary-base-fixed);
 }
-:where(#bs-spinner-gradient stop:first-child) {
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop:first-child) {
   stop-color: var(--bs-primary-base-fixed);
 }
-:where(#bs-spinner-gradient stop:last-child) {
-  stop-color: var(--bs-negative-dark);
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop:last-child) {
+  stop-color: var(--bs-negative-base);
 }
 @keyframes bs-spin {
   0% {
@@ -7399,65 +7646,90 @@ a.bs-text-button {
   --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;
+  --bs-popover-height: 100dvh;
+  --bs-popover-width: 100dvw;
   border-radius: 0;
+  margin: 0;
+  max-height: unset;
+  max-width: 100dvw;
+
+  /* -- SHADOWS -- */
+  &:where([data-place-self="left"]) {
+    box-shadow: var(--bs-shadow-drawerRight);
+  }
+
+  &:where([data-place-self="right"]) {
+    box-shadow: var(--bs-shadow-drawerLeft);
+  }
+
+  /* -- RESIZING -- */
+  &:where([data-resize]) {
+    /* using clip instead of hidden, to allow resizer hover target
+    to extend outside of the flyout bounds via overflow-clip-margin  */
+    overflow: clip;
+  }
+
+  /* right flyout */
+  &:where([data-resize="right"]) {
+    overflow-clip-margin: 5px;
+  }
+
+  /* left flyout - not using same as right flyout, to avoid overlapping potential scrollbar too much */
+  &:where([data-resize="left"]) {
+    overflow-clip-margin: 7px;
+  }
+
+  /*
+    Everything below is desktop-only. Sizing and resize values are gated to
+    widths above the mobile breakpoint, so at mobile widths the flyout falls
+    back to the full-screen defaults above with no JS cleanup needed. The
+    resizer writes its values to the --bs-flyout-resize-* custom properties.
+  */
+  @media (min-width: 752px) {
+    &:where([data-size="sm"]) {
+      --bs-popover-width: 22.5rem; /* 360px */
+    }
+
+    &:where([data-size="md"]) {
+      --bs-popover-width: 28.75rem; /* 460px */
+    }
+
+    &:where([data-size="lg"]) {
+      --bs-popover-width: 33.4375rem; /* 535px */
+    }
+
+    &:where([data-size="fit-content"]) {
+      --bs-popover-width: fit-content;
+    }
+
+    &:where([data-resize]) {
+      max-width: var(--bs-flyout-resize-max);
+      min-width: var(--bs-flyout-resize-min);
+      transform: translateX(var(--bs-flyout-resize-pushed, 0px));
+      width: var(--bs-flyout-resize-width, var(--bs-popover-width));
+    }
+  }
 }
 /* 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 */
-}
-.bs-flyout:where([data-size="md"]) {
-  --bs-popover-width: 28.75rem; /* 460px */
-}
-.bs-flyout:where([data-size="lg"]) {
-  --bs-popover-width: 33.4375rem; /* 535px */
-}
-/* -- RESIZING -- */
-.bs-flyout:where([data-resize]) {
-  /* using clip instead of hidden, to allow resizer hover target
-  to extend outside of the flyout bounds via overflow-clip-margin  */
-  overflow: clip;
-  transform: translateX(var(--bs-flyout-resize-pushed, 0px));
-}
+/* -- RESIZER -- */
 .bs-flyout-resizer {
   cursor: col-resize;
   inset-block: 0;
   position: absolute;
-  width: 10px;
-  z-index: 1;
   /* prevents browser from trying to hijack touch interactions to handle on its own */
   touch-action: none;
-}
-/* right flyout */
-.bs-flyout:where([data-resize="right"]) {
-  overflow-clip-margin: 5px;
+  width: 10px;
+  z-index: 1;
 }
 .bs-flyout:where([data-resize="right"]) :where(.bs-flyout-resizer) {
   left: -5px;
 }
-/* left flyout - not using same as right flyout, to avoid overlapping potential scrollbar too much */
-.bs-flyout:where([data-resize="left"]) {
-  overflow-clip-margin: 7px;
-}
 .bs-flyout:where([data-resize="left"]) :where(.bs-flyout-resizer) {
   right: -7px;
 }
-/* -- SHADOWS -- */
-.bs-flyout:where([data-place-self="left"]) {
-  box-shadow: var(--bs-shadow-drawerRight);
-}
-.bs-flyout:where([data-place-self="right"]) {
-  box-shadow: var(--bs-shadow-drawerLeft);
-}
 /* -- TRANSITIONS -- */
 .bs-flyout-enter-active,
 .bs-flyout-leave-active {
@@ -7468,18 +7740,27 @@ a.bs-text-button {
 }
 .bs-flyout-enter-active .bs-flyout,
 .bs-flyout-leave-active .bs-flyout {
-  transition-property: transform;
   transition-duration: var(--bs-popover-transition-duration);
+  transition-property: transform;
   transition-timing-function: var(--bs-transition-cubic);
 }
 /* The 105% is so the huge shadow on the flyout ends-up off-screen too, otherwise at 100%, you notice it cut out when the panel closes */
 .bs-flyout-enter-from .bs-flyout[data-place-self="left"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="left"] {
-  transform: translate(calc(-105% + var(--bs-flyout-resize-pushed, 0px)));
+  transform: translate(-105%);
+
+  /* preserve any resize push offset while sliding in/out (desktop-only, matching the resize sizing above) */
+  @media (min-width: 752px) {
+    transform: translate(calc(-105% + var(--bs-flyout-resize-pushed, 0px)));
+  }
 }
 .bs-flyout-enter-from .bs-flyout[data-place-self="right"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="right"] {
-  transform: translate(calc(105% + var(--bs-flyout-resize-pushed, 0px)));
+  transform: translate(105%);
+
+  @media (min-width: 752px) {
+    transform: translate(calc(105% + var(--bs-flyout-resize-pushed, 0px)));
+  }
 }
 /*
   HEADS-UP:
@@ -8849,12 +9130,6 @@ a.bs-text-button {
 .bs-bg-ink-positive {
   background-color: var(--bs-ink-positive);
 }
-.bs-text-ink-ecomm-positive {
-  color: var(--bs-ink-ecomm-positive);
-}
-.bs-bg-ink-ecomm-positive {
-  background-color: var(--bs-ink-ecomm-positive);
-}
 .bs-text-ink-warning {
   color: var(--bs-ink-warning);
 }