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

package/dist/wwt-bsds-components.css

@@ -142,7 +142,7 @@
 }
 /* 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"]) {
@@ -847,12 +847,6 @@ Custom properties:
 .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
     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-deprecated-icon) {
-    color: var(--bs-positive-light);
-}
 /* Negative Toast Styles */
 .bs-toast-deprecated:where([data-variant^='negative']) {
     border-top: 4px solid var(--bs-negative-dark);
@@ -1312,16 +1306,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;
 }
@@ -1449,10 +1443,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 {
@@ -1467,7 +1458,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);
@@ -1568,50 +1559,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);
@@ -2064,36 +2072,72 @@ a.bs-circle-button {
   --btn-secondary: transparent;
   --btn-shadow-color-active: transparent;
 }
+.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-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-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-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-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-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-medium);
+}
 .bs-circle-button:where([data-variant="color-white"]) {
   --btn-border-color-focused: var(--bs-ink-white);
   --btn-text-color: var(--bs-ink-white);
@@ -2111,7 +2155,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);
@@ -2832,7 +2876,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;
@@ -2853,11 +2897,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;
@@ -2883,45 +2927,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) {
@@ -3028,7 +3037,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 {
@@ -3122,7 +3131,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;
@@ -3325,8 +3334,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
@@ -3425,73 +3434,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;
 }
-/* Filter variant */
-.bs-input-search:where([data-variant="filter"]) {
+/* -- Disabled -- */
+.bs-input-search:where(:has(:disabled)) {
+  color: var(--bs-ink-disabled);
+}
+/* -- 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;
 }
@@ -3724,11 +3748,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(:first-child) {
+  padding-top: 0;
+  border-top: none;
 }
-.bs-option-group:where(:last-child) {
+.bs-option-group:where(:nth-last-child(1 of [data-visible="true"])) {
   margin-bottom: 0;
 }
 .bs-option-group:where(:has(.bs-option-group-title)) {
@@ -3744,27 +3774,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 -- */
@@ -3950,10 +4000,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;
@@ -3975,33 +4026,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 {
@@ -4021,37 +4063,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);
+/* 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^="complete"]) {
-  --status-color: var(--bs-positive-base-fixed);
-}
-.bs-pill:where([data-status^="disabled"]) {
-  --status-color: var(--bs-ink-disabled);
-}
-.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"]) {
@@ -4065,6 +4117,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 {
@@ -4083,7 +4139,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;
@@ -4110,6 +4166,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;
@@ -4123,6 +4181,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);
@@ -5077,7 +5136,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);
@@ -5093,11 +5152,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);
@@ -5124,6 +5183,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);
@@ -5147,30 +5227,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);
   }
 
@@ -5201,7 +5276,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 */
 }
@@ -5211,11 +5286,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);
@@ -5231,18 +5306,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) {
@@ -5272,7 +5347,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) {
@@ -5280,7 +5355,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) {
@@ -5303,11 +5378,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;
@@ -5337,13 +5407,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 */
@@ -5352,7 +5422,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 */
@@ -5361,7 +5431,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) {
@@ -5372,7 +5442,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 */
@@ -5385,10 +5455,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);
@@ -5406,7 +5487,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) */
@@ -5415,6 +5495,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;
@@ -5465,7 +5550,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 */
@@ -5478,7 +5563,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 */
@@ -5492,6 +5576,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;
@@ -5563,9 +5657,6 @@ 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;
@@ -5655,13 +5746,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;
 }
@@ -5798,13 +5882,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;
 }
@@ -5880,13 +5957,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;
 }
@@ -5972,10 +6042,6 @@ a.bs-text-button {
   --toast-icon-color: var(--bs-ink-positive);
   --toast-variant-color: var(--bs-positive-base);
 }
-.dark :where(.bs-toast[data-variant="positive"]) {
-  --toast-icon-color: var(--bs-positive-light);
-  --toast-variant-color: var(--bs-positive-light);
-}
 .bs-toast:where([data-variant="negative"]) {
   --toast-icon: var(--toast-icon-warning);
   --toast-icon-color: var(--bs-negative-dark);
@@ -6018,52 +6084,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 {
@@ -6087,14 +6286,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:
@@ -6102,16 +6306,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;