@wwtdev/bsds-css 2.19.0 → 2.20.0

package/dist/wwt-bsds.css

@@ -1684,157 +1684,824 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
     --banner-padding: var(--banner-padding-dt);
   }
 }
+/*
+--btn-main:  (this is doing too much.. look into backwards-compatible way to break this up)
+    background color (base)
+    focus ring color
+
+background colors:
+--btn-secondary: background color (active, hover)
+--btn-light: background color (ghost hover, ghost focus)
+
+border / box-shadow:
+--btn-ghost-ink: the box shadow color for ghost buttons is synced to ink
+--btn-highlight: box shadow color (w/ --btn-main) (active)
+
+padding:
+--btn-padding: padding (changes by size, and on text btns)
+
+text color:
+--btn-ink: text color
+--btn-ghost-ink: text color (ghost)
+
+*/
+.bs-button {
+  --btn-focus-inset: -0.25rem;
+  --btn-focus-pseudo-width: calc(100% + 0.5rem);
+  --btn-ghost-ink: var(--bs-ink-blue);
+  --btn-highlight: var(--bs-blue-100);
+  --btn-ink: var(--bs-white);
+  --btn-main: var(--bs-blue-400);
+  --btn-padding: .25rem .75rem;
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-text-size: var(--bs-text-md);
+  --btn-weight: 600;
+  --btn-height: 2.5rem;
+  align-items: center;
+  background-color: var(--btn-main);
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--btn-ink);
+  -moz-column-gap: var(--bs-space-2);
+       column-gap: var(--bs-space-2);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--btn-text-size);
+  font-weight: var(--btn-weight);
+  height: var(--btn-height);
+  justify-content: center;
+  line-height: 1.5;
+  outline: 2px solid transparent;
+  padding: var(--btn-padding);
+  position: relative;
+  text-decoration: none;
+  transition: all 100ms ease-in-out;
+  vertical-align: middle;
+}
+.bs-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
+  background-color: var(--btn-secondary);
+}
+.bs-button:where(:not(:disabled):not([aria-disabled="true"]):active) {
+  background-color: var(--btn-secondary);
+  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
+  transform-origin: center;
+  transform: scale(0.97);
+}
+/* ------------ Focus Styles ------------ */
+.bs-button::before {
+  border-color: transparent;
+  border-radius: 0.5rem;
+  border-style: solid;
+  border-width: 0.125rem;
+  content: '';
+  height: calc(100% + 0.5rem);
+  inset: var(--btn-focus-inset);
+  position: absolute;
+  transition: border-color 0.125s ease-in-out;
+  width: var(--btn-focus-pseudo-width);
+}
+.bs-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
+  border-color: var(--btn-main);
+}
+.bs-button:where(:focus-visible:not(:disabled):not([aria-disabled="true"]))::before {
+  border-color: var(--btn-main);
+  box-shadow: none;
+}
+.bs-button:where(:focus:not(:focus-visible):not(:disabled):not([aria-disabled="true"]))::before {
+  border-color: transparent;
+  box-shadow: none;
+}
+/* ------------ Ghost Buttons ------------ */
+.bs-button:where([data-ghost]:not([data-ghost="false"])) {
+  --btn-ink: var(--btn-ghost-ink);
+  --btn-light: var(--bs-blue-10);
+  --btn-secondary: var(--bs-blue-10);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--btn-ghost-ink);
+}
+.bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
+  border-radius: 0.4375rem;
+}
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):hover),
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):focus) {
+  background-color: var(--btn-light);
+}
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):active) {
+  box-shadow:
+    inset 0 0 0 1px var(--btn-main),
+    inset 0px 0px 4px 1px var(--btn-highlight);
+}
+/* ------------ VARIANTS ------------ */
+.bs-button:where([data-variant^='secondary']) {
+  --btn-ghost-ink: var(--bs-ink-plum);
+  --btn-highlight: var(--bs-plum-100);
+  --btn-light: var(--bs-plum-10);
+  --btn-main: var(--bs-plum-base);
+  --btn-secondary: var(--bs-plum-medium);
+}
+.dark .bs-button:where([data-variant^='secondary']) {
+  --btn-highlight: var(--bs-plum-400);
+  --btn-light: var(--bs-navy-400);
+}
+.bs-button:where([data-variant^='positive']) {
+  --btn-ghost-ink: var(--bs-ink-purple);
+  --btn-highlight: var(--bs-purple-100);
+  --btn-light: var(--bs-purple-10);
+  --btn-main: var(--bs-purple-400);
+  --btn-secondary: var(--bs-purple-medium);
+}
+.bs-button:where([data-variant^='warning']) {
+  --btn-ghost-ink: var(--bs-ink-orange);
+  --btn-highlight: var(--bs-orange-100);
+  --btn-light: var(--bs-orange-10);
+  --btn-main: var(--bs-orange-warning);
+  --btn-secondary: var(--bs-orange-base);
+}
+.bs-button:where([data-variant^='negative']) {
+  --btn-ghost-ink: var(--bs-ink-red);
+  --btn-highlight: var(--bs-red-100);
+  --btn-light: var(--bs-red-10);
+  --btn-main: var(--bs-red-400);
+  --btn-secondary: var(--bs-red-medium);
+}
+/* pink variant */
+.bs-button:where([data-variant^='pink']) {
+  --btn-ghost-ink: var(--bs-ink-pink);
+  --btn-highlight: var(--bs-pink-400);
+  --btn-light: var(--bs-pink-10);
+  --btn-main: var(--bs-pink-400);
+  --btn-secondary: var(--bs-pink-300);
+}
+/* royal blue variant */
+.bs-button:where([data-variant^='royal']) {
+  --btn-ghost-ink: var(--bs-ink-royal);
+  --btn-highlight: var(--bs-royal-400);
+  --btn-light: var(--bs-royal-10);
+  --btn-main: var(--bs-royal-400);
+  --btn-secondary: var(--bs-royal-300);
+}
+/* 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);
+  --btn-highlight: var(--bs-ink-white);
+  --btn-light: var(--bs-white-10);
+  --btn-main: var(--bs-ink-white);
+}
+/* ------------ Text Button ------------ */
+.bs-button:where([data-text]:not([data-text="false"])) {
+  --btn-focus-inset: -0.25rem -0.5rem;
+  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
+  --btn-height: auto;
+  --btn-ink: var(--bs-ink-blue);
+  --btn-padding: 0;
+  --btn-secondary: transparent;
+  --btn-text-size: var(--bs-text-md);
+  --btn-weight: 400;
+  background-color: transparent;
+  cursor: pointer;
+  line-height: 150%;
+}
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
+  --btn-ink: var(--bs-blue-base);
+  background-color: transparent;
+  text-decoration: underline;
+}
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover):has(svg) {
+  text-decoration: none;
+}
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):active) {
+  box-shadow: none;
+  transform: none;
+}
+.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
+.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
+  --btn-ink: var(--bs-ink-red);
+}
+.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
+.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
+  --btn-ink: var(--bs-ink-white);
+  --btn-main: var(--bs-ink-white);
+}
+/* ------------ Button Sizes, Media-based Text Sizing -------------- */
+/* Std button: Mobile text size, DT text size */
+.bs-button {
+  --btn-text-size: 1rem;
+}
+@media (min-width: 1166px) {
+  .bs-button {
+    --btn-text-size: 1.125rem;
+  }
+}
+.bs-button:where([data-size^='sm']) {
+  --btn-height: 1.75rem;
+  --btn-padding: .25rem .75rem .375rem;
+  /* Std button size="sm" text size is same across all media sizes */
+  --btn-text-size: var(--bs-text-sm);
+}
+/* Text buttons: For now, text size not dependent on media size */
+.bs-button:where([data-text]:not([data-text="false"])) {
+  --btn-height: auto;
+  --btn-padding: 0;
+  --btn-text-size: var(--bs-text-md);
+}
+.bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-base);
+}
+/* Size XS & XXS only applies to text buttons */
+.bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-sm);
+}
+.bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-xs);
+  --btn-weight: 600;
+}
+/* ------------ Disabled Styling ------------ */
+:where(button:disabled),
+.bs-button:where(:disabled),
+.bs-button:where([aria-disabled="true"]) /* for links as buttons */ {
+  pointer-events: none;
+}
+.bs-button:where(:disabled),
+.bs-button:where([aria-disabled="true"]) {
+  --btn-ink: var(--bs-ink-disabled);
+  --btn-main: var(--bs-bg-disabled);
+  box-shadow: none;
+  transform: none;
+}
+.bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
+.bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
+  --btn-ghost-ink: var(--bs-ink-disabled);
+}
+.bs-button:where([data-text]:not([data-text="false"])):disabled,
+.bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
+  --btn-main: transparent;
+}
+/* ------------ links as buttons ------------ */
+a.bs-button {
+  align-items: center;
+  display: inline-flex;
+  outline: none;
+  vertical-align: middle;
+}
 .bs-chart {
   display: block;
-  height: 100%;
-  width: 100%;
+  height: 100%;
+  width: 100%;
+}
+.bs-chart :where(figure) {
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+  display: grid;
+  font-size: .875rem;
+  grid-template-areas: var(--chart-gridareas, "chart" "legend");
+  grid-template-columns: var(--chart-gridcols, 100%);
+  grid-template-rows: var(--chart-gridrows, minmax(0px, auto) minmax(0px, min-content));
+  height: 100%;
+  margin-block: unset;
+  margin-inline: unset;
+  position: relative;
+  width: 100%;
+}
+.bs-chart :where(figure > :first-child) {
+  grid-area: chart;
+}
+.bs-chart :where(figure > :last-child) {
+  grid-area: legend;
+}
+.bs-chart :where(figure > div) {
+  min-width: 100%;
+  width: 100%;
+}
+.bs-chart :where(canvas) {
+  width: 100%;
+}
+/* --------- Legend Styles --------- */
+.bs-chart :where(figcaption) {
+  background-color: var(--legend-bg-color, transparent);
+  border-radius: .5rem;
+  border: 1px solid var(--legend-border-color, transparent);
+  clip-path: var(--legend-clip-path, none);
+  max-height: var(--legend-max-height, 100%);
+  overflow-y: var(--legend-overflow-y, hidden);
+}
+.bs-chart :where(figcaption[data-hidden="true"]) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.bs-chart :where(ul) {
+  align-items: var(--legend-flexalign, center);
+  display: flex;
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+  flex-direction: var(--legend-flexdir, row);
+  flex-wrap: var(--legend-flexwrap, wrap);
+  padding-block: var(--legend-padding-block, .25rem);
+  /* cjs-legend-padding is set dynamically by chart.js for bar charts */
+  padding-inline: var(--legend-padding-inline, var(--cjs-legend-padding-inline, 2.5rem));
+  row-gap: .75rem;
+}
+.bs-chart :where(li, li:focus, li:active, li:focus-visible) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  outline: 0;
+  position: relative;
+  width: var(--legend-item-width, auto);
+}
+.bs-chart :where(li)::after {
+  border: solid var(--focus-color, transparent) 2px;
+  border-radius: 0.25rem;
+  content: '';
+  display: block;
+  inset: -.25rem;
+  position: absolute;
+}
+.bs-chart :where(li:focus-visible) {
+  --focus-color: var(--bs-blue-base);
+}
+.bs-chart :where(li span) {
+  background: var(--legend-item-box-fill);
+  border-color: var(--legend-item-box-stroke);
+  border-radius: var(--legend-item-swatch-radius, 3px);
+  display: inline-block;
+  height: var(--bs-text-f-md);
+  margin-right: 10px;
+  width: var(--bs-text-f-md);
+}
+.bs-chart :where(li p) {
+  color: var(--legend-item-text-color);
+  font-size: var(--bs-text-f-md);
+  margin: 0;
+  padding: 0;
+  -webkit-text-decoration: var(--legend-item-text-decoration);
+          text-decoration: var(--legend-item-text-decoration);
+}
+/* --------- Chart Layout Variants --------- */
+/*
+For now, per design team instructions, these are NOT responsive as we're only to expose these
+variants for a very specific, single use-case that involves horizontal scroll...
+If we want to make these responsive in the future, can wrap in media query.
+*/
+.bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
+  --chart-gridrows: minmax(0px, auto);
+  --legend-bg-color: var(--bs-bg-base);
+  --legend-border-color: var(--bs-gray-light);
+  --legend-clip-path: border-box;
+  --legend-flexalign: start;
+  --legend-flexdir: column;
+  --legend-flexwrap: nowrap;
+  --legend-item-width: 100%;
+  --legend-max-height: 17.1875rem;
+  --legend-overflow-y: auto;
+  --legend-padding-block: .75rem;
+  --legend-padding-inline: .75rem;
+}
+.bs-chart:where([data-layout="chart-left"]) {
+  --chart-gridareas: "chart legend";
+  --chart-gridcols: auto minmax(150px, auto);
+}
+.bs-chart:where([data-layout="chart-right"]) {
+  --chart-gridareas: "legend chart";
+  --chart-gridcols: minmax(150px, auto) auto;
+}
+.bs-chart-table {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+/*
+uncomment to make visible when testing
+.bs-chart-table {
+  clip: none;
+  overflow: auto;
+  height: auto;
+  position: relative;
+  width: auto;
+}
+
+*/
+/*
+Properties : Defaults // Description
+====================================
+--btn-icon-bg-color: var(--btn-main); // icon bg color (base state)
+--btn-icon-padding: .75rem; // padding around icon svg
+--btn-icon-size: 1.5rem; // svg width and height
+--btn-icon-stroke-color: var(--bs-white);
+--btn-main: var(--bs-blue-base); // many things... should probably break this up
+--btn-text-color: var(--bs-ink-base);
+--btn-text-size: var(--bs-text-md);
+
+--btn-border-color: transparent;  //  focus state outline color - transparent base state, --btn-main base focus state
+--btn-border-color-focused: var(--btn-main); // focus state ring color set on variants
+--btn-secondary: var(--bs-blue-medium); // hover state icon bg
+--btn-shadow-color-active: var(--btn-main); // active state shadow color (icon bg)
+--btn-text-color-hovered: var(--bs-ink-base); // hover state text color
+*/
+:where(.bs-circle-button) {
+  --btn-border-color-focused: var(--btn-main);
+  --btn-border-color: transparent;
+  --btn-focus-inset: -0.25rem;
+  --btn-gap: .5rem;
+  --btn-icon-bg-color: var(--btn-main);
+  --btn-icon-padding: .75rem;
+  --btn-icon-size: 1.5rem;
+  --btn-icon-stroke-color: var(--bs-white);
+  --btn-main: var(--bs-blue-base);
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-shadow-color-active: var(--btn-main);
+  --btn-text-color-hovered: var(--bs-ink-base);
+  --btn-text-color: var(--bs-ink-base);
+  --btn-text-size: 1.125rem;
+  --btn-text-weight: 400;
+}
+.bs-circle-button {
+  align-items: center;
+  background-color: transparent;
+  color: var(--btn-text-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--btn-text-size);
+  font-weight: var(--btn-text-weight);
+  gap: var(--btn-gap);
+  outline: none;
+  position: relative;
+  vertical-align: middle;
+}
+a.bs-circle-button {
+  align-items: center;
+  display: inline-flex;
+  outline: none;
+  text-decoration: none;
+}
+.bs-circle-button :where(.bs-circle-button-icon) {
+  align-items: center;
+  background-color: var(--btn-icon-bg-color);
+  border: none;
+  border-radius: 50%;
+  color: var(--btn-icon-stroke-color);
+  display: inline-flex;
+  justify-content: center;
+  outline: 2px solid transparent;
+  padding: var(--btn-icon-padding);
+  position: relative;
+  transition: all 100ms ease-in-out;
+}
+.bs-circle-button :where(.bs-circle-button-icon)::before {
+  border-color: var(--btn-border-color);
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0.125rem;
+  content: '';
+  inset: var(--btn-focus-inset);
+  position: absolute;
+  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
+}
+.bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
+  --icon-size: var(--btn-icon-size);
+}
+/* non-bs-icon svgs */
+.bs-circle-button :where(.bs-circle-button-icon) > :where(svg) {
+  height: var(--btn-icon-size);
+  width: var(--btn-icon-size);
+}
+/* Icon Buttons with Text */
+.bs-circle-button:where([data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-md);
+  --btn-icon-size: 0.75rem;
+  --btn-icon-padding: 0.375rem;
+}
+/* Ghost Buttons */
+.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-blue-10);
+  --btn-secondary: var(--bs-blue-10);
+}
+/* Active, Hover, Focus states */
+.bs-circle-button:active, .bs-circle-button:hover {
+  --btn-icon-bg-color: var(--btn-secondary);
+  --btn-text-color: var(--btn-text-color-hovered);
+}
+.bs-circle-button:active :where(.bs-circle-button-icon) {
+  box-shadow: inset 0px 0px 4px 1px var(--btn-shadow-color-active);
+  transform-origin: center;
+  transform: scale(0.97);
+}
+.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
+.bs-circle-button:where([data-direction="right"]):hover::before {
+  transform: translateX(.25rem);
+}
+.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
+.bs-circle-button:where([data-direction="left"]):hover::before {
+  transform: translateX(-.25rem);
+}
+.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover {
+  --btn-icon-bg-color: var(--btn-light);
+}
+.bs-circle-button:where(:focus-visible) {
+  --btn-border-color: var(--btn-border-color-focused);
+}
+/* Disabled State */
+.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
+  --btn-icon-stroke-color: var(--bs-ink-disabled);
+  --btn-text-color: var(--bs-ink-disabled);
+  pointer-events: none;
+}
+.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
+  --btn-icon-bg-color: var(--bs-bg-disabled);
+}
+/* Button Size */
+.bs-circle-button:where([data-size^='sm']) {
+  --btn-icon-padding: .375rem;
+  --btn-icon-size: .75rem;
+  --btn-text-size: .875rem;
+}
+.bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .3125rem;
+  --btn-icon-size: .625rem;
+  --btn-text-size: 1rem;
+}
+.bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .25rem;
+  --btn-icon-size: .5rem;
+  --btn-text-size: .875rem;
+}
+/* Color Variants */
+.bs-circle-button:where([data-variant^="color"]) {
+  --btn-gap: .5rem;
+  --btn-icon-bg-color: transparent;
+  --btn-icon-padding: 0;
+  --btn-icon-size: .75rem; /* stays the same for all sizes */
+  --btn-icon-stroke-color: var(--btn-text-color);
+  --btn-secondary: transparent;
+  --btn-shadow-color-active: transparent;
+}
+.bs-circle-button:where([data-variant="color-blue"]) {
+  --btn-border-color-focused: var(--bs-ink-blue);
+  --btn-text-color: var(--bs-ink-blue);
+  --btn-text-color-hovered: var(--bs-blue-base);
+}
+.bs-circle-button:where([data-variant="color-royal"]) {
+  --btn-border-color-focused: var(--bs-ink-royal);
+  --btn-text-color: var(--bs-ink-royal);
+  --btn-text-color-hovered: var(--bs-royal-medium);
 }
-.bs-chart :where(figure) {
-  -moz-column-gap: 2.5rem;
-       column-gap: 2.5rem;
-  display: grid;
-  font-size: .875rem;
-  grid-template-areas: var(--chart-gridareas, "chart" "legend");
-  grid-template-columns: var(--chart-gridcols, 100%);
-  grid-template-rows: var(--chart-gridrows, minmax(0px, auto) minmax(0px, min-content));
-  height: 100%;
-  margin-block: unset;
-  margin-inline: unset;
-  position: relative;
-  width: 100%;
+.bs-circle-button:where([data-variant="color-purple"]) {
+  --btn-border-color-focused: var(--bs-purple-400);
+  --btn-text-color: var(--bs-ink-purple);
+  --btn-text-color-hovered: var(--bs-purple-medium);
 }
-.bs-chart :where(figure > :first-child) {
-  grid-area: chart;
+.bs-circle-button:where([data-variant="color-pink"]) {
+  --btn-border-color-focused: var(--bs-pink-400);
+  --btn-text-color: var(--bs-ink-pink);
+  --btn-text-color-hovered: var(--bs-pink-base);
 }
-.bs-chart :where(figure > :last-child) {
-  grid-area: legend;
+.bs-circle-button:where([data-variant="color-orange"]) {
+  --btn-border-color-focused: var(--bs-ink-orange);
+  --btn-text-color: var(--bs-ink-orange);
+  --btn-text-color-hovered: var(--bs-orange-base);
 }
-.bs-chart :where(figure > div) {
-  min-width: 100%;
-  width: 100%;
+.bs-circle-button:where([data-variant="color-red"]) {
+  --btn-border-color-focused: var(--bs-ink-red);
+  --btn-text-color: var(--bs-ink-red);
+  --btn-text-color-hovered: var(--bs-red-base);
 }
-.bs-chart :where(canvas) {
-  width: 100%;
+.bs-circle-button:where([data-variant="color-white"]) {
+  --btn-border-color-focused: var(--bs-ink-white);
+  --btn-text-color: var(--bs-ink-white);
+  /* 80% of --bs-white */
+  --btn-text-color-hovered: rgba(255, 255, 255, 0.8);
 }
-/* --------- Legend Styles --------- */
-.bs-chart :where(figcaption) {
-  background-color: var(--legend-bg-color, transparent);
-  border-radius: .5rem;
-  border: 1px solid var(--legend-border-color, transparent);
-  clip-path: var(--legend-clip-path, none);
-  max-height: var(--legend-max-height, 100%);
-  overflow-y: var(--legend-overflow-y, hidden);
+.bs-circle-button:where([data-variant^="color"]):where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
+  --btn-icon-bg-color: transparent;
+  --btn-text-color: var(--bs-ink-disabled);
 }
-.bs-chart :where(figcaption[data-hidden="true"]) {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+/* size XXS only supported for color variants */
+.bs-circle-button:where([data-variant^="color"]):where([data-size='xxs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: .75rem;
+  --btn-text-weight: 600;
 }
-.bs-chart :where(ul) {
-  align-items: var(--legend-flexalign, center);
+/* Option list */
+.bs-dropdown-options {
   display: flex;
-  -moz-column-gap: 2.5rem;
-       column-gap: 2.5rem;
-  flex-direction: var(--legend-flexdir, row);
-  flex-wrap: var(--legend-flexwrap, wrap);
-  padding-block: var(--legend-padding-block, .25rem);
-  /* cjs-legend-padding is set dynamically by chart.js for bar charts */
-  padding-inline: var(--legend-padding-inline, var(--cjs-legend-padding-inline, 2.5rem));
-  row-gap: .75rem;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem;
+  max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
+  overflow-y: auto;
+  padding-block: 0.5rem;
+  padding-left: 0;
+  position: relative;
 }
-.bs-chart :where(li, li:focus, li:active, li:focus-visible) {
+.bs-dropdown-options:focus-visible {
+  outline: none;
+}
+/* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
+@media (min-width: 1166px) {
+  /* 5th or 8th child triggers overflow-y (depending on variant) */
+  :where([data-width="content"]) > .bs-dropdown-options:where(:has([data-variant*="description"]:nth-child(5))),
+  :where([data-width="content"]) > .bs-dropdown-options:where(:has(li:not([data-variant*="description"]):nth-child(8))) {
+    scrollbar-gutter: stable;
+  }
+
+  /* Fallback for older Firefox+ only if we're not setting data-overflow values */
+  @supports not selector(:has(*)) {
+    :where([data-width="content"]) > .bs-dropdown-options {
+      scrollbar-gutter: stable;
+    }
+  }
+
+  /* Also allow this for js solutions if :has not available via data-overflow */
+  /* Reset scrollbar gutter when data-overflow is used */
+  :where([data-width="content"]) > .bs-dropdown-options:where([data-overflow]) {
+    scrollbar-gutter: auto;
+  }
+
+  :where([data-width="content"]) > .bs-dropdown-options:where([data-overflow="true"]) {
+    scrollbar-gutter: stable;
+  }
+}
+/* Option list item */
+.bs-dropdown-options :where(li) {
   align-items: center;
+  border-bottom: 2px solid transparent;
+  border-left: 4px solid transparent;
+  border-radius: 3px;
+  border-right: 2px solid transparent;
+  border-top: 2px solid transparent;
+  color: var(--bs-ink-base);
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
   cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  outline: 0;
-  position: relative;
-  width: var(--legend-item-width, auto);
+  display: grid;
+  padding-block: 0.25rem;
+  padding-inline: 1.25rem;
+  row-gap: 0.125rem;
+  word-break: break-word;
+  word-wrap: break-word;
 }
-.bs-chart :where(li)::after {
-  border: solid var(--focus-color, transparent) 2px;
-  border-radius: 0.25rem;
-  content: '';
-  display: block;
-  inset: -.25rem;
-  position: absolute;
+/* Variant: 2-col */
+.bs-dropdown-options :where(li[data-variant~="2-col"]) {
+  grid-template-columns: min-content 1fr;
 }
-.bs-chart :where(li:focus-visible) {
-  --focus-color: var(--bs-blue-base);
+/* Variant: 3-col */
+.bs-dropdown-options :where(li[data-variant~="3-col"]) {
+  grid-template-columns: min-content min-content 1fr;
 }
-.bs-chart :where(li span) {
-  background: var(--legend-item-box-fill);
-  border-color: var(--legend-item-box-stroke);
-  border-radius: var(--legend-item-swatch-radius, 3px);
-  display: inline-block;
-  height: var(--bs-text-f-md);
-  margin-right: 10px;
-  width: var(--bs-text-f-md);
+/* Variant: description */
+.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-xs);
+  min-height: 1.125rem;
+  line-height: 1.125rem;
+}
+/* Variant: 2-col description */
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
+  grid-column-start: 2;
+}
+/* Variant: 3-col description */
+.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
+  grid-column-start: 3;
+}
+/* Hover or data-selected */
+.bs-dropdown-options :where(li:not([role="separator"]):hover),
+.bs-dropdown-options :where(li[data-selected]) {
+  background-color: var(--bs-bg-medium-to-light);
+  border-left: 4px solid var(--bs-ink-blue);
+  color: var(--bs-ink-blue);
+  outline: none;
+}
+/* Variant: negative */
+.bs-dropdown-options :where(li[data-variant~="negative"]:hover),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
+  /* 25% alpha version of --bs-red-400 */
+  background-color: rgba(248, 169, 170, 0.25);
+  border-left: 4px solid var(--bs-ink-red);
+  color: var(--bs-ink-red);
+}
+/* Hover or data-selected for 2-col/3-col/description variants */
+.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
+.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
+  color: var(--bs-ink-blue);
+}
+/* Hover or data-selected for negative + 2-col/3-col/description variants */
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
+  color: var(--bs-ink-red);
+}
+/* List option keyboard navigation focus */
+.bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
+  --focus-border-color: var(--bs-blue-base);
+  border: 2px solid var(--focus-border-color);
+  outline: none;
+  padding-left: 1.375rem;
+}
+/* Navigation focus on a selected element should preserve 4px left border */
+.bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
+  border-left: 4px solid var(--focus-border-color);
+  padding-left: 1.25rem;
+}
+/* data-variant="negative" list option keyboard navigation focus */
+.bs-dropdown-options:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
+  --focus-border-color: var(--bs-red-200);
+}
+/* Multi-select divider */
+.bs-dropdown-options :where(li[role="separator"]) {
+  cursor: default;
+  padding-block: 0.125rem;
+  padding-right: 1.375rem;
+}
+/* Multi-select divider line */
+.bs-dropdown-options :where(hr) {
+  background-color: var(--bs-navy-light);
+  height: .0625rem;
+  margin-block: 0;
+  margin-inline: 0;
+}
+/* Disable hover styles */
+.bs-dropdown-options :where(li[data-no-hover]:hover) {
+  background-color: transparent;
+  border-left-color: transparent;
+  color: var(--bs-ink-base);
+  cursor: default;
+}
+/* Style label to look like other options */
+.bs-dropdown-options :where(li label) {
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 400;
 }
-.bs-chart :where(li p) {
-  color: var(--legend-item-text-color);
-  font-size: var(--bs-text-f-md);
-  margin: 0;
-  padding: 0;
-  -webkit-text-decoration: var(--legend-item-text-decoration);
-          text-decoration: var(--legend-item-text-decoration);
+/* Don't change option color when checkbox is present */
+.bs-dropdown-options :where(li[data-variant~="checkbox"]):hover,
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-selected]) {
+  color: var(--bs-ink-base);
 }
-/* --------- Chart Layout Variants --------- */
-/*
-For now, per design team instructions, these are NOT responsive as we're only to expose these
-variants for a very specific, single use-case that involves horizontal scroll...
-If we want to make these responsive in the future, can wrap in media query.
-*/
-.bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
-  --chart-gridrows: minmax(0px, auto);
-  --legend-bg-color: var(--bs-bg-base);
-  --legend-border-color: var(--bs-gray-light);
-  --legend-clip-path: border-box;
-  --legend-flexalign: start;
-  --legend-flexdir: column;
-  --legend-flexwrap: nowrap;
-  --legend-item-width: 100%;
-  --legend-max-height: 17.1875rem;
-  --legend-overflow-y: auto;
-  --legend-padding-block: .75rem;
-  --legend-padding-inline: .75rem;
+/* Don't change description color when checkbox is present */
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"]):hover > :nth-child(3),
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"][data-selected]) > :nth-child(3),
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"]):hover > :nth-child(4),
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"][data-selected]) > :nth-child(4) {
+  color: var(--bs-ink-light);
 }
-.bs-chart:where([data-layout="chart-left"]) {
-  --chart-gridareas: "chart legend";
-  --chart-gridcols: auto minmax(150px, auto);
+/* Overrides mobile style when not min-width 1166 */
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li) {
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
 }
-.bs-chart:where([data-layout="chart-right"]) {
-  --chart-gridareas: "legend chart";
-  --chart-gridcols: minmax(150px, auto) auto;
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[role="separator"]) {
+  padding-right: 0.625rem;
 }
-.bs-chart-table {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
+  padding-left: 0.625rem;
 }
-/*
-uncomment to make visible when testing
-.bs-chart-table {
-  clip: none;
-  overflow: auto;
-  height: auto;
-  position: relative;
-  width: auto;
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
+  padding-left: 0.5rem;
 }
+@media (min-width: 1166px)  {
+  .bs-dropdown-options :where(li) {
+    padding-left: 0.5rem;
+    padding-right: 0.75rem;
+  }
 
-*/
+  .bs-dropdown-options :where(li[role="separator"]) {
+    padding-right: 0.625rem;
+  }
+
+  .bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
+    padding-left: 0.625rem;
+  }
+
+  .bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
+    padding-left: 0.5rem;
+  }
+}
 /* Parent */
 .bs-dropdown-parent {
   display: inline-block;
@@ -1928,360 +2595,492 @@ uncomment to make visible when testing
   --dropdown-wscreen-bottom: calc(100% + 0.5rem);
   --dropdown-wscreen-top: auto;
 }
-/* data-center */
-.bs-dropdown-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown) {
-  --dropdown-transform: translate(-50%, 0);
-  --dropdown-wscreen-left: 50%;
+/* data-center */
+.bs-dropdown-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown) {
+  --dropdown-transform: translate(-50%, 0);
+  --dropdown-wscreen-left: 50%;
+}
+/* data-right */
+.bs-dropdown-parent:where([data-right]:not([data-right="false"])) :where(.bs-dropdown) {
+  --dropdown-transform: translate(0, 0);
+  --dropdown-wscreen-left: auto;
+  --dropdown-wscreen-right: 0;
+}
+/* Overrides mobile style when not min-width 1166 */
+.bs-dropdown:where([data-no-mobile="true"]) {
+  --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
+  --dropdown-left: var(--dropdown-wscreen-left, initial);
+  --dropdown-right: var(--dropdown-wscreen-right, initial);
+  --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
+  --dropdown-width: var(--dropdown-wscreen-width, initial);
+  --dropdown-transform: initial;
+
+  position: absolute;
+}
+.bs-dropdown:where([data-no-mobile="true"]) > :where(header) {
+  display: none;
+}
+@media (min-width: 1166px) {
+  .bs-dropdown-backdrop {
+    display: none;
+  }
+
+  .bs-dropdown {
+    --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
+    --dropdown-left: var(--dropdown-wscreen-left, initial);
+    --dropdown-right: var(--dropdown-wscreen-right, initial);
+    --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
+    --dropdown-width: var(--dropdown-wscreen-width, initial);
+    --dropdown-transform: initial;
+
+    position: absolute;
+  }
+
+  /* Hide the header */
+  .bs-dropdown > :where(header) {
+    display: none;
+  }
+}
+/* Vue Transition Styles - Only used in Vue component */
+.bs-dropdown:where(.bs-dropdown-enter-from),
+.bs-dropdown:where(.bs-dropdown-leave-to) {
+  opacity: 0;
+  transform: var(--dropdown-transform);
+}
+.bs-dropdown:where(.bs-dropdown-enter-to),
+.bs-dropdown:where(.bs-dropdown-leave-from) {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+.bs-dropdown :where(.mobile-select-button-container) {
+  display: none;
+  overflow: hidden;
+}
+@media (max-width: 1166px) {
+  .bs-dropdown :where(.mobile-select-button-container) {
+    display: flex;
+  }
+}
+.bs-dropdown :where(.mobile-select-button) {
+  margin: .875rem;
+  width: 100%;
+}
+.bs-empty-state {
+  --bs-empty-state-description-color: var(--bs-ink-light);
+  --bs-empty-state-icon-color: var(--bs-violet-300);
+  --bs-empty-state-title-color: var(--bs-ink-base);
+  --col-gap: var(--bs-space-6);
+  --cta-spacing: var(--bs-space-4);
+  --description-font-size: var(--bs-text-base);
+  --description-line-height: var(--bs-leading-base);
+  --description-weight: var(--bs-font-normal);
+  --icon-size: 3rem;
+  --title-font-size: var(--bs-text-lg);
+  --title-line-height: 130%;
+  --title-spacing: 0.5rem;
+  --title-weight: var(--bs-font-normal);
+
+  align-items: center;
+  -moz-column-gap: var(--col-gap);
+       column-gap: var(--col-gap);
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+.bs-empty-state :where(.bs-empty-state-icon) {
+  align-self: start;
+  height: auto;
+  max-width: var(--icon-size);
+  width: 100%;
+}
+.bs-empty-state :where(.bs-empty-state-icon path) {
+  fill: var(--bs-empty-state-icon-color);
+}
+.bs-empty-state :where(.bs-empty-state-title) {
+  color: var(--bs-empty-state-title-color);
+  font-size: var(--title-font-size);
+  font-weight: var(--title-weight);
+  line-height: var(--title-line-height);
+  padding-block-end: var(--title-spacing);
+}
+.bs-empty-state :where(.bs-empty-state-description) {
+  color: var(--bs-empty-state-description-color);
+  font-size: var(--description-font-size);
+  font-weight: var(--description-weight);
+  line-height: var(--description-line-height);
+}
+.bs-empty-state :where(a) {
+  color: var(--bs-ink-blue);
+  text-decoration: underline;
+}
+.bs-empty-state :where(a:hover) {
+  cursor: pointer;
+}
+/* Call to Actions */
+.bs-empty-state
+  :where(
+    .bs-empty-state-description + *,
+    .bs-empty-state-title + *:not(.bs-empty-state-description)
+  ) {
+  margin-block-start: var(--cta-spacing, var(--bs-space-4));
+}
+/* Sizing */
+.bs-empty-state:where([data-size^='xs']) {
+  --col-gap: var(--bs-space-4);
+  --cta-spacing: var(--bs-space-2);
+  --icon-size: 1.5rem;
+  --title-color: var(--bs-ink-light);
+  --title-font-size: var(--bs-text-md);
+  --title-line-height: var(--bs-leading-base);
+  --title-spacing: 0;
+}
+.bs-empty-state:where([data-size^='sm']) {
+  --description-font-size: var(--bs-text-sm);
+  --icon-size: 2rem;
+  --title-font-size: var(--bs-text-md);
+  --title-line-height: var(--bs-leading-base);
+  --title-spacing: 0.125rem;
+}
+.bs-empty-state:where([data-size^='lg']) {
+  --col-gap: var(--bs-space-8);
+  --cta-spacing: var(--bs-space-6);
+  --description-font-size: var(--bs-text-md);
+  --icon-size: 4rem;
+  --title-font-size: var(--bs-text-xl);
+  --title-line-height: 110%;
+  --title-weight: var(--bs-font-bold);
+}
+/*
+custom properties:
+--filterbtn-caret-size
+--filterbtn-caret-transform
+--filterbtn-color
+--filterbtn-focus-color
+--filterbtn-height
+--filterbtn-text-size
+--filterbtn-weight
+*/
+button:where(.bs-filter-button) {
+  --filterbtn-caret-size: 1rem;
+  --filterbtn-caret-transform: rotate(0deg);
+  --filterbtn-color: var(--bs-ink-blue);
+  --filterbtn-focus-color: transparent;
+  --filterbtn-height: 1.5rem;
+  --filterbtn-text-size: var(--bs-text-base);
+  --filterbtn-weight: 400;
+  flex-shrink: 0;
+  position: relative;
+}
+.bs-filter-button {
+  align-items: center;
+  color: var(--filterbtn-color);
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--filterbtn-text-size);
+  font-weight: var(--filterbtn-weight);
+  height: var(--filterbtn-height);
+  line-height: 1.5;
+  transition: outline-color 100ms ease-in-out;
+  width: -moz-max-content;
+  width: max-content;
 }
-/* Overrides mobile style when not min-width 1166 */
-.bs-dropdown:where([data-no-mobile="true"]) {
-  --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
-  --dropdown-left: var(--dropdown-wscreen-left, initial);
-  --dropdown-right: var(--dropdown-wscreen-right, initial);
-  --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
-  --dropdown-width: var(--dropdown-wscreen-width, initial);
-  --dropdown-transform: initial;
-
+.bs-filter-button::after {
+  border: solid var(--filterbtn-focus-color) 2px;
+  border-radius: 0.25rem;
+  content: '';
+  display: block;
+  height: 100%;
   position: absolute;
+  transform: scale(1.25);
+  width: 100%;
 }
-.bs-dropdown:where([data-no-mobile="true"]) > :where(header) {
-  display: none;
+.bs-filter-button :where(.bs-icon),
+.bs-filter-button :where(span:has(svg:only-child)) {
+  display: block;
+  height: var(--filterbtn-caret-size);
+  line-height: 1;
+  transform: var(--filterbtn-caret-transform);
+  transform-origin: center;
+  transition: var(--bs-trans-rotate180);
+  width: var(--filterbtn-caret-size);
 }
-@media (min-width: 1166px) {
-  .bs-dropdown-backdrop {
-    display: none;
-  }
-
-  .bs-dropdown {
-    --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
-    --dropdown-left: var(--dropdown-wscreen-left, initial);
-    --dropdown-right: var(--dropdown-wscreen-right, initial);
-    --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
-    --dropdown-width: var(--dropdown-wscreen-width, initial);
-    --dropdown-transform: initial;
-
-    position: absolute;
-  }
+.bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
 
-  /* Hide the header */
-  .bs-dropdown > :where(header) {
-    display: none;
-  }
-}
-/* Vue Transition Styles - Only used in Vue component */
-.bs-dropdown:where(.bs-dropdown-enter-from),
-.bs-dropdown:where(.bs-dropdown-leave-to) {
-  opacity: 0;
-  transform: var(--dropdown-transform);
-}
-.bs-dropdown:where(.bs-dropdown-enter-to),
-.bs-dropdown:where(.bs-dropdown-leave-from) {
-  opacity: 1;
-  transform: translate(0, 0);
-}
-.bs-dropdown :where(.mobile-select-button-container) {
-  display: none;
-  overflow: hidden;
+  --filterbtn-text-size: var(--bs-text-sm);
+  --filterbtn-caret-size: .75rem;
 }
-@media (max-width: 1166px) {
-  .bs-dropdown :where(.mobile-select-button-container) {
-    display: flex;
-  }
+.bs-filter-button:where([data-size="sm"]) {
+  --filterbtn-text-size: var(--bs-text-sm);
 }
-.bs-dropdown :where(.mobile-select-button) {
-  margin: .875rem;
-  width: 100%;
+.bs-filter-button:where([data-size="xs"]) {
+  --filterbtn-text-size: var(--bs-text-xs);
+  --filterbtn-weight: 600;
 }
-/* Option list */
-.bs-dropdown-options {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  list-style: none;
-  margin-bottom: 0.25rem;
-  margin-top: 0.25rem;
-  max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
-  overflow-y: auto;
-  padding-block: 0.5rem;
-  padding-left: 0;
-  position: relative;
+/* Hover state */
+.bs-filter-button:hover {
+  --filterbtn-color: var(--bs-blue-base);
 }
-.bs-dropdown-options:focus-visible {
+/* Focus state */
+.bs-filter-button:where(:focus-visible) {
   outline: none;
+  --filterbtn-focus-color: var(--bs-blue-base);
 }
-/* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
-@media (min-width: 1166px) {
-  /* 5th or 8th child triggers overflow-y (depending on variant) */
-  :where([data-width="content"]) > .bs-dropdown-options:where(:has([data-variant*="description"]:nth-child(5))),
-  :where([data-width="content"]) > .bs-dropdown-options:where(:has(li:not([data-variant*="description"]):nth-child(8))) {
-    scrollbar-gutter: stable;
-  }
-
-  /* Fallback for older Firefox+ only if we're not setting data-overflow values */
-  @supports not selector(:has(*)) {
-    :where([data-width="content"]) > .bs-dropdown-options {
-      scrollbar-gutter: stable;
-    }
-  }
-
-  /* Also allow this for js solutions if :has not available via data-overflow */
-  /* Reset scrollbar gutter when data-overflow is used */
-  :where([data-width="content"]) > .bs-dropdown-options:where([data-overflow]) {
-    scrollbar-gutter: auto;
-  }
-
-  :where([data-width="content"]) > .bs-dropdown-options:where([data-overflow="true"]) {
-    scrollbar-gutter: stable;
-  }
+/* Filter open state */
+.bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
+  --filterbtn-caret-transform: rotate(180deg);
 }
-/* Option list item */
-.bs-dropdown-options :where(li) {
-  align-items: center;
-  border-bottom: 2px solid transparent;
-  border-left: 4px solid transparent;
-  border-radius: 3px;
-  border-right: 2px solid transparent;
-  border-top: 2px solid transparent;
-  color: var(--bs-ink-base);
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
-  cursor: pointer;
-  display: grid;
-  padding-block: 0.25rem;
-  padding-inline: 1.25rem;
-  row-gap: 0.125rem;
-  word-break: break-word;
-  word-wrap: break-word;
+/* Badge non-standard color */
+.bs-filter-button :where(.bs-badge) {
+  --badge-bg: var(--bs-ink-blue);
 }
-/* Variant: 2-col */
-.bs-dropdown-options :where(li[data-variant~="2-col"]) {
-  grid-template-columns: min-content 1fr;
+:where(.dark) .bs-filter-button :where(.bs-badge) {
+  --badge-bg: var(--bs-blue-medium);
 }
-/* Variant: 3-col */
-.bs-dropdown-options :where(li[data-variant~="3-col"]) {
-  grid-template-columns: min-content min-content 1fr;
+.bs-filter-button:hover :where(.bs-badge) {
+  --badge-bg: var(--filterbtn-color);
 }
-/* Variant: description */
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-xs);
-  min-height: 1.125rem;
-  line-height: 1.125rem;
+/* Disabled state */
+.bs-filter-button:where(:disabled) {
+  --filterbtn-color: var(--bs-ink-disabled);
+  cursor: default;
 }
-/* Variant: 2-col description */
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
-  grid-column-start: 2;
+.bs-filter-button:where(:disabled) :where(.bs-badge) {
+  --badge-bg: var(--bs-bg-disabled);
+  --badge-text: var(--bs-ink-disabled);
 }
-/* Variant: 3-col description */
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
-  grid-column-start: 3;
+.bs-flyout {
+  background-color: var(--bs-bg-base-to-light);
+  box-shadow: var(--bs-shadow-drawerRight);
+  height: 100%;
+  left: 0;
+  margin: 0;
+  max-width: 100vw;
+  opacity: 0;
+  padding: 1.5rem;
+  position: fixed;
+  top: 0;
+  transform: translateX(-100%);
+  transition-duration: 300ms;
+  transition-property: opacity, transform;
+  transition-timing-function: ease;
+  width: 360px;
+  z-index: 1000;
 }
-/* Hover or data-selected */
-.bs-dropdown-options :where(li:not([role="separator"]):hover),
-.bs-dropdown-options :where(li[data-selected]) {
-  background-color: var(--bs-bg-medium-to-light);
-  border-left: 4px solid var(--bs-ink-blue);
-  color: var(--bs-ink-blue);
-  outline: none;
+.bs-flyout:where([data-absolute="true"]) {
+  position: absolute;
 }
-/* Variant: negative */
-.bs-dropdown-options :where(li[data-variant~="negative"]:hover),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
-  /* 25% alpha version of --bs-red-400 */
-  background-color: rgba(248, 169, 170, 0.25);
-  border-left: 4px solid var(--bs-ink-red);
-  color: var(--bs-ink-red);
+.bs-flyout:where([data-position="right"]) {
+  box-shadow: var(--bs-shadow-drawerLeft);
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
 }
-/* Hover or data-selected for 2-col/3-col/description variants */
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
-.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-ink-blue);
+.bs-flyout:where([data-size="lg"]) {
+  width: 535px;
 }
-/* Hover or data-selected for negative + 2-col/3-col/description variants */
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-ink-red);
+.bs-flyout:where([data-shown="true"]) {
+  opacity: 1;
+  /*
+  Needs to be "none" instead of "0" so as not to interfere with calculating
+  "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
+  */
+  transform: none;
 }
-/* List option keyboard navigation focus */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
-  --focus-border-color: var(--bs-blue-base);
-  border: 2px solid var(--focus-border-color);
-  outline: none;
-  padding-left: 1.375rem;
+.bs-flyout :where(.bs-flyout-close-container) {
+  display: flex;
+  justify-content: flex-end;
 }
-/* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
-  border-left: 4px solid var(--focus-border-color);
-  padding-left: 1.25rem;
+.bs-flyout :where(.bs-flyout-close-container button) {
+  cursor: pointer;
+  outline-offset: 2px;
+  padding: 2px;
 }
-/* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown-options:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
-  --focus-border-color: var(--bs-red-200);
+/* Vue Transition Styles - Only used in Vue component */
+.bs-flyout:where(.bs-flyout-enter-from),
+.bs-flyout:where(.bs-flyout-leave-to) {
+  opacity: 0;
+  transform: translateX(-100%);
 }
-/* Multi-select divider */
-.bs-dropdown-options :where(li[role="separator"]) {
-  cursor: default;
-  padding-block: 0.125rem;
-  padding-right: 1.375rem;
+.bs-flyout:where([data-position="right"].bs-flyout-enter-from),
+.bs-flyout:where([data-position="right"].bs-flyout-leave-to) {
+  transform: translateX(100%);
 }
-/* Multi-select divider line */
-.bs-dropdown-options :where(hr) {
-  background-color: var(--bs-navy-light);
-  height: .0625rem;
-  margin-block: 0;
-  margin-inline: 0;
+.bs-flyout:where(.bs-flyout-enter-to),
+.bs-flyout:where(.bs-flyout-leave-from) {
+  opacity: 1;
+  transform: translateX(0);
 }
-/* Disable hover styles */
-.bs-dropdown-options :where(li[data-no-hover]:hover) {
-  background-color: transparent;
-  border-left-color: transparent;
-  color: var(--bs-ink-base);
-  cursor: default;
+/* Containers and Labels for Checkbox/Radio */
+.bs-boolean {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--bs-text-base);
+  font-weight: 400;
+  line-height: 115%;
 }
-/* Style label to look like other options */
-.bs-dropdown-options :where(li label) {
-  cursor: pointer;
-  font-size: 1rem;
+.bs-boolean:where([data-size='sm']) input {
+  height: .75rem;
+  width: .75rem;
+}
+.bs-boolean label {
+  font-size: var(--bs-text-base);
   font-weight: 400;
+  line-height: 1.5;
+  width: auto;
 }
-/* Don't change option color when checkbox is present */
-.bs-dropdown-options :where(li[data-variant~="checkbox"]):hover,
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-selected]) {
-  color: var(--bs-ink-base);
+/* not using gap on .bs-boolean due to dead click zone */
+.bs-boolean label {
+  padding-inline-end: 0.5em;
 }
-/* Don't change description color when checkbox is present */
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"]):hover > :nth-child(3),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"][data-selected]) > :nth-child(3),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"]):hover > :nth-child(4),
-.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"][data-selected]) > :nth-child(4) {
-  color: var(--bs-ink-light);
+.bs-boolean input + label {
+  padding-inline: 0.5em 0;
 }
-/* Overrides mobile style when not min-width 1166 */
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li) {
-  padding-left: 0.5rem;
-  padding-right: 0.75rem;
+.bs-boolean:where([data-size='sm']),
+.bs-boolean:where([data-size='sm']) label {
+  font-size: var(--bs-text-xs);
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[role="separator"]) {
-  padding-right: 0.625rem;
+/* Checkbox & Radio Input */
+:where(input[type='checkbox'], input[type='radio']),
+:is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base));
+  cursor: pointer;
+  display: grid;
+  height: 1rem;
+  margin: 0;
+  place-content: center;
+  position: relative;
+  width: 1rem;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
-  padding-left: 0.625rem;
+:where(input[type='checkbox'], input[type='radio']):focus-visible,
+:is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
+  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base)),
+    0 0 0 2px var(--offset-color, var(--bs-bg-base)),
+    0 0 0 4px var(--outline-color, var(--bs-blue-base));
+    outline: 2px solid transparent;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
-  padding-left: 0.5rem;
+:where(input[type='checkbox']),
+:is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
+  border-radius: 0.125rem;
 }
-@media (min-width: 1166px)  {
-  .bs-dropdown-options :where(li) {
-    padding-left: 0.5rem;
-    padding-right: 0.75rem;
-  }
-
-  .bs-dropdown-options :where(li[role="separator"]) {
-    padding-right: 0.625rem;
-  }
-
-  .bs-dropdown-options:where(:focus-visible) :where(li[data-active]) {
-    padding-left: 0.625rem;
-  }
-
-  .bs-dropdown-options:where(:focus-visible) :where(li[data-selected][data-active]) {
-    padding-left: 0.5rem;
-  }
+:where(input[type='radio']),
+.bs-boolean :where([type='radio']) {
+  border-radius: 50%;
 }
-.bs-empty-state {
-  --bs-empty-state-description-color: var(--bs-ink-light);
-  --bs-empty-state-icon-color: var(--bs-violet-300);
-  --bs-empty-state-title-color: var(--bs-ink-base);
-  --col-gap: var(--bs-space-6);
-  --cta-spacing: var(--bs-space-4);
-  --description-font-size: var(--bs-text-base);
-  --description-line-height: var(--bs-leading-base);
-  --description-weight: var(--bs-font-normal);
-  --icon-size: 3rem;
-  --title-font-size: var(--bs-text-lg);
-  --title-line-height: 130%;
-  --title-spacing: 0.5rem;
-  --title-weight: var(--bs-font-normal);
-
-  align-items: center;
-  -moz-column-gap: var(--col-gap);
-       column-gap: var(--col-gap);
-  display: grid;
-  grid-template-columns: auto 1fr;
+/* Checkbox's checkbox, checkmark.  Checkmark is hidden unless checked/indeterminate. */
+input:where([type='checkbox'])::before,
+:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
+  --cb-filled-size: var(--filled-size, 1rem);
+  content: '';
+  border-radius: 0.125rem;
+  box-shadow: inset var(--cb-filled-size) var(--cb-filled-size) var(--fill-bg-color, var(--bs-blue-base));
+  height: var(--cb-filled-size);
+  visibility: hidden;
+  width: var(--cb-filled-size);
 }
-.bs-empty-state :where(.bs-empty-state-icon) {
-  align-self: start;
-  height: auto;
-  max-width: var(--icon-size);
-  width: 100%;
+input:where([type='checkbox'])::after,
+:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
+  border: solid var(--bs-bg-base);
+  border-width: 0 0.125rem 0.125rem 0;
+  content: '';
+  height: var(--inner-check-height, 0.75em);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -60%) rotate(45deg);
+  visibility: hidden;
+  width: var(--inner-check-width, 0.375em);
 }
-.bs-empty-state :where(.bs-empty-state-icon path) {
-  fill: var(--bs-empty-state-icon-color);
+input:where([type='checkbox']):where(:indeterminate)::after,
+.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
+.bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
+  border: none;
+  background-color: var(--bs-bg-base);
+  height: var(--inner-dash-height, 0.125rem);
+  transform: translate(-50%, -0.0625rem) rotate(0deg);
+  width: var(--inner-dash-width, 0.625em);
 }
-.bs-empty-state :where(.bs-empty-state-title) {
-  color: var(--bs-empty-state-title-color);
-  font-size: var(--title-font-size);
-  font-weight: var(--title-weight);
-  line-height: var(--title-line-height);
-  padding-block-end: var(--title-spacing);
+/* Radio outer circle, Radio dot.  Dot is hidden unless checked. */
+input:where([type='radio'])::before,
+.bs-boolean :where([type="radio"])::before {
+  --radio-filled-size: var(--filled-size, 1rem);
+  background-color: var(--fill-bg-color, var(--bs-blue-base));
+  border-radius: 50%;
+  box-sizing: content-box;
+  content: '';
+  height: var(--radio-filled-size);
+  visibility: hidden;
+  width: var(--radio-filled-size);
 }
-.bs-empty-state :where(.bs-empty-state-description) {
-  color: var(--bs-empty-state-description-color);
-  font-size: var(--description-font-size);
-  font-weight: var(--description-weight);
-  line-height: var(--description-line-height);
+input:where([type='radio'])::after,
+.bs-boolean :where([type="radio"])::after {
+  background-color: var(--bs-bg-base);
+  border-radius: 50%;
+  box-sizing: content-box;
+  content: '';
+  height: var(--inner-dot-size, 0.375rem);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+  width: var(--inner-dot-size, 0.375rem);
 }
-.bs-empty-state :where(a) {
-  color: var(--bs-ink-blue);
-  text-decoration: underline;
+/* Show checkmark, indeterminate mark, or radio dot */
+.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
+.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
+input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
+input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
+.bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
+.bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after {
+  visibility: visible;
+}
+/* ---------- Sizes ----------- */
+.bs-boolean:where([data-size="sm"]),
+.bs-checkbox:where([data-size="sm"]) {
+  --filled-size: 0.75rem;
+  --inner-check-height: 0.5625rem;
+  --inner-check-width: 0.3125rem;
+  --inner-dash-height: 0.125rem;
+  --inner-dash-width: .75em;
+  --inner-dot-size: 0.25rem;
 }
-.bs-empty-state :where(a:hover) {
-  cursor: pointer;
+/* ---------- Disabled State ----------- */
+:where(input[type="checkbox"], input[type="radio"]):disabled,
+.bs-boolean:where([data-disabled="true"]),
+.bs-checkbox:where([data-disabled="true"]) {
+  --box-shadow: var(--bs-ink-disabled);
+  --fill-bg-color: var(--bs-ink-disabled);
+  background-color: transparent;
+  cursor: default;
+  pointer-events: none;
 }
-/* Call to Actions */
-.bs-empty-state
-  :where(
-    .bs-empty-state-description + *,
-    .bs-empty-state-title + *:not(.bs-empty-state-description)
-  ) {
-  margin-block-start: var(--cta-spacing, var(--bs-space-4));
+/* ---------- Error state ----------- */
+input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
+.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-red-base);
+  --outline-color: var(--bs-red-base);
 }
-/* Sizing */
-.bs-empty-state:where([data-size^='xs']) {
-  --col-gap: var(--bs-space-4);
-  --cta-spacing: var(--bs-space-2);
-  --icon-size: 1.5rem;
-  --title-color: var(--bs-ink-light);
-  --title-font-size: var(--bs-text-md);
-  --title-line-height: var(--bs-leading-base);
-  --title-spacing: 0;
+.bs-character-count {
+  color: var(--bs-ink-base);
+  font-size: var(--bs-text-xs);
+  font-weight: 400;
+  text-align: right;
+  white-space: nowrap;
 }
-.bs-empty-state:where([data-size^='sm']) {
-  --description-font-size: var(--bs-text-sm);
-  --icon-size: 2rem;
-  --title-font-size: var(--bs-text-md);
-  --title-line-height: var(--bs-leading-base);
-  --title-spacing: 0.125rem;
+:where(:disabled, [data-disabled="true"]) + .bs-character-count,
+:where(:disabled, [data-disabled="true"]) .bs-character-count,
+.bs-character-count:where([data-disabled="true"]) {
+  visibility: hidden;
 }
-.bs-empty-state:where([data-size^='lg']) {
-  --col-gap: var(--bs-space-8);
-  --cta-spacing: var(--bs-space-6);
-  --description-font-size: var(--bs-text-md);
-  --icon-size: 4rem;
-  --title-font-size: var(--bs-text-xl);
-  --title-line-height: 110%;
-  --title-weight: var(--bs-font-bold);
+.bs-character-count:where([data-error="true"]) {
+  color: var(--bs-ink-red);
 }
 /* Generally applicable (all input types) */
 :where([data-required]:not([data-required="false"])) {
@@ -2315,190 +3114,34 @@ uncomment to make visible when testing
   margin-bottom: 0.25rem;
   padding: 0;
 }
-:where(label + input, label > input):where(:not([type='checkbox'], [type='radio'])),
-:where(label + textarea, label > textarea),
-:where(label + select, label > select) {
-  margin-top: 0.25rem;
-}
-/*
-Custom properties:
---input-bg (background color)
---input-border (border color)
---input-border-width (border width)
---input-caret (caret color)
---input-padding-block (padding block)
---input-padding-inline (padding inline)
---input-placeholder (placeholder color)
---input-text-size (font size)
-*/
-input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-textarea,
-select,
-:is(.bs-input, .bs-select, .bs-textarea) {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: var(--input-bg, var(--bs-bg-base));
-  border-color: var(--input-border, var(--bs-border-input));
-  border-radius: 0.25rem;
-  border-style: solid;
-  border-width: var(--input-border-width, 1px);
-  caret-color: var(--input-caret, var(--bs-blue-base));
-  color: var(--bs-ink-base);
-  font-size: var(--input-text-size, var(--bs-text-base));
-  font-weight: 400;
-  height: 2.5rem;
-  line-height: var(--bs-leading-base);
-  padding-block: var(--input-padding-block, 0.0625rem);
-  padding-inline: var(--input-padding-inline, 0.75rem);
-}
-:where(.dark) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-:where(.dark) textarea,
-:where(.dark) select,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea) {
-  --input-bg: transparent;
-}
-input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-textarea,
-select,
-:is(.bs-input, .bs-select, .bs-textarea) {
-  width: 100%;
-}
-input:where([type='text'], [type='email'], [type='url']),
-select,
-.bs-input:where([type='text'], [type='email'], [type='url']),
-:is(.bs-input, .bs-select, .bs-textarea) {
-  text-overflow: ellipsis;
-}
-.bs-textarea,
-textarea {
-  height: auto;
-  padding-block: 0.5rem;
-  resize: vertical;
-}
-:is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
-  color: var(--input-placeholder, var(--bs-violet-100));
-}
-:is(input, textarea, select)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
-  color: var(--input-placeholder, var(--bs-violet-100));
-}
-:where(.dark) :is(input, textarea, select)::-moz-placeholder, :where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
-  --input-placeholder: var(--bs-violet-200);
-}
-:where(.dark) :is(input, textarea, select)::placeholder,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
-:where(.dark) :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
-  --input-placeholder: var(--bs-violet-200);
-}
-:is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::-moz-placeholder {
-  opacity: 0;
-}
-:is(input, textarea, select):where(:focus-visible)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
-  opacity: 0;
-}
-/* FOCUS state */
-:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
-:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible),
-:is(select, .bs-select):where(:focus) {
-  --input-border: var(--bs-blue-base);
-  outline-style: none;
-  outline-width: 0px;
-}
-/* DISABLED state */
-:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
-:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
-  --input-border: var(--bs-ink-disabled);
-  --input-bg: var(--bs-bg-disabled);
-  color: var(--bs-ink-disabled);
-}
-/* Text inputs should not have a border when disabled */
-:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled),
-textarea:where(:disabled),
-select:where(:disabled),
-:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
-  --input-border-width: 0px;
-}
-/* Errors and Messages */
-:is(input, select, textarea):where([data-error]:not([data-error="false"])),
-:is(.bs-input, .bs-select, .bs-textarea):where([data-error="true"]) {
-  --input-border: var(--bs-ink-red);
-}
-/*
-Removes the built-in 'margin' on bottom of textarea
-see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
-*/
-:has(> textarea:only-child),
-:has(> .bs-textarea:only-child) {
-  display: block;
-  line-height: 0;
-}
-/* chrome user agent styling was applying opacity: 0.7 */
-:where(select:disabled) {
-  opacity: 1;
-}
-:is(input, textarea, select):disabled::-moz-placeholder, :is(input, textarea, select)[disabled]::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select):disabled::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select)[disabled]::-moz-placeholder {
-  opacity: 0;
-}
-:is(input, textarea, select):disabled::placeholder,
-:is(input, textarea, select)[disabled]::placeholder,
-:is(.bs-input, .bs-textarea, .bs-select):disabled::placeholder,
-:is(.bs-input, .bs-textarea, .bs-select)[disabled]::placeholder {
-  opacity: 0;
-}
-/* Select */
-select,
-.bs-select {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0B19' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-  background-position: right 0.75rem center;
-  background-repeat: no-repeat;
-  background-size: 1em 1em;
-  padding-right: var(--bs-space-9);
-}
-select[multiple],
-.bs-select[multiple] {
-  background-image: none;
-  height: auto;
-}
-:where(.dark) select,
-:where(.dark) .bs-select {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-}
-:where(.dark) select:where(:disabled),
-:where(.dark) .bs-select:where(:disabled) {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-}
-/* Allows for styling a button to look like a select input */
-:where(button).bs-select {
-  align-items: center;
-  /* Remove this for buttons since they will have the caret added */
-  background-image: none;
-  cursor: pointer;
+.bs-field-details {
   display: flex;
-  padding-right: var(--input-padding-inline, 0.75rem);
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--bs-space-2);
+  margin-top: 0.5rem;
 }
-:where(.dark) :where(button).bs-select,
-:where(.dark) :where(button).bs-select:where(:disabled) {
-  background-image: none;
+:where(textarea, bs-textarea) + .bs-field-details {
+  margin-top: 0.25rem;
 }
-:where(button).bs-select :where(*:first-child) {
-  flex-grow: 1;
-  text-align: left;
+.bs-field-details :where(.bs-character-count:first-child) {
+  margin-left: auto;
 }
-:where(button).bs-select :where(.bs-icon) {
-  color: var(--bs-ink-base);
-  transform: none;
-  transition-duration: 200ms;
-  transition-property: transform;
-  transition-timing-function: ease-in-out;
+.bs-hint {
+  --hint-color: var(--bs-ink-light);
+  color: var(--hint-color);
+  font-size: var(--bs-text-xs);
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: break-word;
+  padding: 0;
 }
-:where(button).bs-select:where([data-open="true"]) :where(.bs-icon) {
-  transform: rotate(180deg);
+.bs-hint:where([data-error]:not([data-error="false"])) {
+  --hint-color: var(--bs-ink-red);
+}
+:where(:disabled, [data-disabled="true"]) .bs-hint {
+  --hint-color: var(--bs-ink-disabled);
 }
 /* 0 0 1 for width to allow e.g. tailwind override */
 :is(div, *):where(.bs-input-addon) {
@@ -2833,189 +3476,37 @@ data-autosize-icons="true" - see above
   --input-bg: var(--bs-bg-base);
   --input-border: transparent;
 }
-.bs-field-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--bs-space-2);
-  margin-top: 0.5rem;
-}
-:where(textarea, bs-textarea) + .bs-field-details {
-  margin-top: 0.25rem;
-}
-.bs-field-details :where(.bs-character-count:first-child) {
-  margin-left: auto;
-}
-.bs-character-count {
-  color: var(--bs-ink-base);
-  font-size: var(--bs-text-xs);
-  font-weight: 400;
-  text-align: right;
-  white-space: nowrap;
-}
-:where(:disabled, [data-disabled="true"]) + .bs-character-count,
-:where(:disabled, [data-disabled="true"]) .bs-character-count,
-.bs-character-count:where([data-disabled="true"]) {
-  visibility: hidden;
-}
-.bs-character-count:where([data-error="true"]) {
-  color: var(--bs-ink-red);
-}
-/* Containers and Labels for Checkbox/Radio */
-.bs-boolean {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  line-height: 115%;
-}
-.bs-boolean:where([data-size='sm']) input {
-  height: .75rem;
-  width: .75rem;
-}
-.bs-boolean label {
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  line-height: 1.5;
-  width: auto;
-}
-/* not using gap on .bs-boolean due to dead click zone */
-.bs-boolean label {
-  padding-inline-end: 0.5em;
-}
-.bs-boolean input + label {
-  padding-inline: 0.5em 0;
-}
-.bs-boolean:where([data-size='sm']),
-.bs-boolean:where([data-size='sm']) label {
-  font-size: var(--bs-text-xs);
-}
-/* Checkbox & Radio Input */
-:where(input[type='checkbox'], input[type='radio']),
-:is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base));
-  cursor: pointer;
-  display: grid;
-  height: 1rem;
-  margin: 0;
-  place-content: center;
+:where(label, legend),
+label:where(.bs-label) {
+  display: inline-block;
   position: relative;
-  width: 1rem;
-}
-:where(input[type='checkbox'], input[type='radio']):focus-visible,
-:is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base)),
-    0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-base));
-    outline: 2px solid transparent;
-}
-:where(input[type='checkbox']),
-:is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
-  border-radius: 0.125rem;
-}
-:where(input[type='radio']),
-.bs-boolean :where([type='radio']) {
-  border-radius: 50%;
-}
-/* Checkbox's checkbox, checkmark.  Checkmark is hidden unless checked/indeterminate. */
-input:where([type='checkbox'])::before,
-:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
-  --cb-filled-size: var(--filled-size, 1rem);
-  content: '';
-  border-radius: 0.125rem;
-  box-shadow: inset var(--cb-filled-size) var(--cb-filled-size) var(--fill-bg-color, var(--bs-blue-base));
-  height: var(--cb-filled-size);
-  visibility: hidden;
-  width: var(--cb-filled-size);
+  width: 100%;
 }
-input:where([type='checkbox'])::after,
-:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
-  border: solid var(--bs-bg-base);
-  border-width: 0 0.125rem 0.125rem 0;
-  content: '';
-  height: var(--inner-check-height, 0.75em);
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform-origin: center;
-  transform: translate(-50%, -60%) rotate(45deg);
-  visibility: hidden;
-  width: var(--inner-check-width, 0.375em);
+.bs-label,
+:where(label, legend) {
+  --label-color: var(--bs-ink-base);
+  color: var(--label-color);
+  font-size: var(--bs-text-sm);
+  font-weight: 600;
+  line-height: var(--bs-leading-base);
 }
-input:where([type='checkbox']):where(:indeterminate)::after,
-.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
-.bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
-  border: none;
-  background-color: var(--bs-bg-base);
-  height: var(--inner-dash-height, 0.125rem);
-  transform: translate(-50%, -0.0625rem) rotate(0deg);
-  width: var(--inner-dash-width, 0.625em);
+/* Required asterisk */
+:where(label, legend) :where([data-required]:not([data-required="false"])),
+.bs-label :where([data-required="true"]) {
+  color: var(--label-asterisk-color, var(--bs-ink-red));
 }
-/* Radio outer circle, Radio dot.  Dot is hidden unless checked. */
-input:where([type='radio'])::before,
-.bs-boolean :where([type="radio"])::before {
-  --radio-filled-size: var(--filled-size, 1rem);
-  background-color: var(--fill-bg-color, var(--bs-blue-base));
-  border-radius: 50%;
-  box-sizing: content-box;
-  content: '';
-  height: var(--radio-filled-size);
-  visibility: hidden;
-  width: var(--radio-filled-size);
+/* Disabled state */
+:where(label[data-disabled]:not([data-disabled="false"])),
+:where(label[data-disabled]:not([data-disabled="false"])) *,
+.bs-label:where([data-disabled="true"]),
+.bs-label:where([data-disabled="true"]) * {
+  --label-asterisk-color: transparent;
+  --label-color: var(--bs-ink-disabled);
 }
-input:where([type='radio'])::after,
-.bs-boolean :where([type="radio"])::after {
-  background-color: var(--bs-bg-base);
-  border-radius: 50%;
-  box-sizing: content-box;
+.bs-label:where(:has(+ input), :has(+ .bs-input-addon), :has(+ :not(label) .bs-input-addon))::after {
   content: '';
-  height: var(--inner-dot-size, 0.375rem);
-  left: 50%;
+  inset: 0 0 -.25rem 0;
   position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  visibility: hidden;
-  width: var(--inner-dot-size, 0.375rem);
-}
-/* Show checkmark, indeterminate mark, or radio dot */
-.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
-.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
-input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
-input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
-.bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
-.bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after {
-  visibility: visible;
-}
-/* ---------- Sizes ----------- */
-.bs-boolean:where([data-size="sm"]),
-.bs-checkbox:where([data-size="sm"]) {
-  --filled-size: 0.75rem;
-  --inner-check-height: 0.5625rem;
-  --inner-check-width: 0.3125rem;
-  --inner-dash-height: 0.125rem;
-  --inner-dash-width: .75em;
-  --inner-dot-size: 0.25rem;
-}
-/* ---------- Disabled State ----------- */
-:where(input[type="checkbox"], input[type="radio"]):disabled,
-.bs-boolean:where([data-disabled="true"]),
-.bs-checkbox:where([data-disabled="true"]) {
-  --box-shadow: var(--bs-ink-disabled);
-  --fill-bg-color: var(--bs-ink-disabled);
-  background-color: transparent;
-  cursor: default;
-  pointer-events: none;
-}
-/* ---------- Error state ----------- */
-input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
-.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-red-base);
-  --outline-color: var(--bs-red-base);
 }
 .bs-switch {
   --box-shadow: var(--bs-ink-base);
@@ -3134,692 +3625,643 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
     0 0 0 4px var(--outline-color, var(--bs-blue-base));
   outline: 2px solid transparent;
 }
-:where(.box) .bs-switch :where(input:focus-visible) + :where(span),
-:where(.box) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-medium);
-}
-:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
-:where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-invert-to-base);
-}
-/* Disabled state */
-.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
-.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]) :is(input ~ span, button span) {
-  --ball-background: var(--bs-ink-disabled);
-  --switch-background: var(--bs-bg-disabled);
-}
-.bs-switch input:where(:disabled) {
-  cursor: default;
-}
-.bs-hint {
-  --hint-color: var(--bs-ink-light);
-  color: var(--hint-color);
-  font-size: var(--bs-text-xs);
-  list-style: none;
-  margin: 0;
-  min-width: 0;
-  overflow-wrap: break-word;
-  padding: 0;
-}
-.bs-hint:where([data-error]:not([data-error="false"])) {
-  --hint-color: var(--bs-ink-red);
-}
-:where(:disabled, [data-disabled="true"]) .bs-hint {
-  --hint-color: var(--bs-ink-disabled);
-}
-:where(label, legend),
-label:where(.bs-label) {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-}
-.bs-label,
-:where(label, legend) {
-  --label-color: var(--bs-ink-base);
-  color: var(--label-color);
-  font-size: var(--bs-text-sm);
-  font-weight: 600;
-  line-height: var(--bs-leading-base);
-}
-/* Required asterisk */
-:where(label, legend) :where([data-required]:not([data-required="false"])),
-.bs-label :where([data-required="true"]) {
-  color: var(--label-asterisk-color, var(--bs-ink-red));
+:where(.box) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.box) .bs-switch:where(:focus-visible) :where(button span) {
+  --offset-color: var(--bs-bg-medium);
+}
+:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
+  --offset-color: var(--bs-bg-invert-to-base);
 }
 /* Disabled state */
-:where(label[data-disabled]:not([data-disabled="false"])),
-:where(label[data-disabled]:not([data-disabled="false"])) *,
-.bs-label:where([data-disabled="true"]),
-.bs-label:where([data-disabled="true"]) * {
-  --label-asterisk-color: transparent;
-  --label-color: var(--bs-ink-disabled);
+.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
+.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]) :is(input ~ span, button span) {
+  --ball-background: var(--bs-ink-disabled);
+  --switch-background: var(--bs-bg-disabled);
 }
-.bs-label:where(:has(+ input), :has(+ .bs-input-addon), :has(+ :not(label) .bs-input-addon))::after {
-  content: '';
-  inset: 0 0 -.25rem 0;
-  position: absolute;
+.bs-switch input:where(:disabled) {
+  cursor: default;
+}
+:where(label + input, label > input):where(:not([type='checkbox'], [type='radio'])),
+:where(label + textarea, label > textarea),
+:where(label + select, label > select) {
+  margin-top: 0.25rem;
 }
 /*
---btn-main:  (this is doing too much.. look into backwards-compatible way to break this up)
-    background color (base)
-    focus ring color
-
-background colors:
---btn-secondary: background color (active, hover)
---btn-light: background color (ghost hover, ghost focus)
-
-border / box-shadow:
---btn-ghost-ink: the box shadow color for ghost buttons is synced to ink
---btn-highlight: box shadow color (w/ --btn-main) (active)
-
-padding:
---btn-padding: padding (changes by size, and on text btns)
-
-text color:
---btn-ink: text color
---btn-ghost-ink: text color (ghost)
-
+Custom properties:
+--input-bg (background color)
+--input-border (border color)
+--input-border-width (border width)
+--input-caret (caret color)
+--input-padding-block (padding block)
+--input-padding-inline (padding inline)
+--input-placeholder (placeholder color)
+--input-text-size (font size)
 */
-.bs-button {
-  --btn-focus-inset: -0.25rem;
-  --btn-focus-pseudo-width: calc(100% + 0.5rem);
-  --btn-ghost-ink: var(--bs-ink-blue);
-  --btn-highlight: var(--bs-blue-100);
-  --btn-ink: var(--bs-white);
-  --btn-main: var(--bs-blue-400);
-  --btn-padding: .25rem .75rem;
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-text-size: var(--bs-text-md);
-  --btn-weight: 600;
-  --btn-height: 2.5rem;
-  align-items: center;
-  background-color: var(--btn-main);
-  border: none;
+input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+textarea,
+select,
+:is(.bs-input, .bs-select, .bs-textarea) {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-color: var(--input-border, var(--bs-border-input));
   border-radius: 0.25rem;
-  color: var(--btn-ink);
-  -moz-column-gap: var(--bs-space-2);
-       column-gap: var(--bs-space-2);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--btn-text-size);
-  font-weight: var(--btn-weight);
-  height: var(--btn-height);
-  justify-content: center;
-  line-height: 1.5;
-  outline: 2px solid transparent;
-  padding: var(--btn-padding);
-  position: relative;
-  text-decoration: none;
-  transition: all 100ms ease-in-out;
-  vertical-align: middle;
+  border-style: solid;
+  border-width: var(--input-border-width, 1px);
+  caret-color: var(--input-caret, var(--bs-blue-base));
+  color: var(--bs-ink-base);
+  font-size: var(--input-text-size, var(--bs-text-base));
+  font-weight: 400;
+  height: 2.5rem;
+  line-height: var(--bs-leading-base);
+  padding-block: var(--input-padding-block, 0.0625rem);
+  padding-inline: var(--input-padding-inline, 0.75rem);
 }
-.bs-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
-  background-color: var(--btn-secondary);
+:where(.dark) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+:where(.dark) textarea,
+:where(.dark) select,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea) {
+  --input-bg: transparent;
 }
-.bs-button:where(:not(:disabled):not([aria-disabled="true"]):active) {
-  background-color: var(--btn-secondary);
-  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
-  transform-origin: center;
-  transform: scale(0.97);
+input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+textarea,
+select,
+:is(.bs-input, .bs-select, .bs-textarea) {
+  width: 100%;
 }
-/* ------------ Focus Styles ------------ */
-.bs-button::before {
-  border-color: transparent;
-  border-radius: 0.5rem;
-  border-style: solid;
-  border-width: 0.125rem;
-  content: '';
-  height: calc(100% + 0.5rem);
-  inset: var(--btn-focus-inset);
-  position: absolute;
-  transition: border-color 0.125s ease-in-out;
-  width: var(--btn-focus-pseudo-width);
+input:where([type='text'], [type='email'], [type='url']),
+select,
+.bs-input:where([type='text'], [type='email'], [type='url']),
+:is(.bs-input, .bs-select, .bs-textarea) {
+  text-overflow: ellipsis;
 }
-.bs-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
-  border-color: var(--btn-main);
+.bs-textarea,
+textarea {
+  height: auto;
+  padding-block: 0.5rem;
+  resize: vertical;
 }
-.bs-button:where(:focus-visible:not(:disabled):not([aria-disabled="true"]))::before {
-  border-color: var(--btn-main);
-  box-shadow: none;
+:is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
+  color: var(--input-placeholder, var(--bs-violet-100));
 }
-.bs-button:where(:focus:not(:focus-visible):not(:disabled):not([aria-disabled="true"]))::before {
-  border-color: transparent;
-  box-shadow: none;
+:is(input, textarea, select)::placeholder,
+:is(.bs-input, .bs-select, .bs-textarea)::placeholder,
+:is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
+  color: var(--input-placeholder, var(--bs-violet-100));
 }
-/* ------------ Ghost Buttons ------------ */
-.bs-button:where([data-ghost]:not([data-ghost="false"])) {
-  --btn-ink: var(--btn-ghost-ink);
-  --btn-light: var(--bs-blue-10);
-  --btn-secondary: var(--bs-blue-10);
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--btn-ghost-ink);
+:where(.dark) :is(input, textarea, select)::-moz-placeholder, :where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
+  --input-placeholder: var(--bs-violet-200);
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
-  border-radius: 0.4375rem;
+:where(.dark) :is(input, textarea, select)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
+  --input-placeholder: var(--bs-violet-200);
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):hover),
-.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):focus) {
-  background-color: var(--btn-light);
+:is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::-moz-placeholder {
+  opacity: 0;
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):active) {
-  box-shadow:
-    inset 0 0 0 1px var(--btn-main),
-    inset 0px 0px 4px 1px var(--btn-highlight);
+:is(input, textarea, select):where(:focus-visible)::placeholder,
+:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
+  opacity: 0;
 }
-/* ------------ VARIANTS ------------ */
-.bs-button:where([data-variant^='secondary']) {
-  --btn-ghost-ink: var(--bs-ink-plum);
-  --btn-highlight: var(--bs-plum-100);
-  --btn-light: var(--bs-plum-10);
-  --btn-main: var(--bs-plum-base);
-  --btn-secondary: var(--bs-plum-medium);
+/* FOCUS state */
+:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
+:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible),
+:is(select, .bs-select):where(:focus) {
+  --input-border: var(--bs-blue-base);
+  outline-style: none;
+  outline-width: 0px;
 }
-.dark .bs-button:where([data-variant^='secondary']) {
-  --btn-highlight: var(--bs-plum-400);
-  --btn-light: var(--bs-navy-400);
+/* DISABLED state */
+:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
+:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
+  --input-border: var(--bs-ink-disabled);
+  --input-bg: var(--bs-bg-disabled);
+  color: var(--bs-ink-disabled);
 }
-.bs-button:where([data-variant^='positive']) {
-  --btn-ghost-ink: var(--bs-ink-purple);
-  --btn-highlight: var(--bs-purple-100);
-  --btn-light: var(--bs-purple-10);
-  --btn-main: var(--bs-purple-400);
-  --btn-secondary: var(--bs-purple-medium);
+/* Text inputs should not have a border when disabled */
+:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled),
+textarea:where(:disabled),
+select:where(:disabled),
+:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
+  --input-border-width: 0px;
 }
-.bs-button:where([data-variant^='warning']) {
-  --btn-ghost-ink: var(--bs-ink-orange);
-  --btn-highlight: var(--bs-orange-100);
-  --btn-light: var(--bs-orange-10);
-  --btn-main: var(--bs-orange-warning);
-  --btn-secondary: var(--bs-orange-base);
+/* Errors and Messages */
+:is(input, select, textarea):where([data-error]:not([data-error="false"])),
+:is(.bs-input, .bs-select, .bs-textarea):where([data-error="true"]) {
+  --input-border: var(--bs-ink-red);
+}
+/*
+Removes the built-in 'margin' on bottom of textarea
+see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
+*/
+:has(> textarea:only-child),
+:has(> .bs-textarea:only-child) {
+  display: block;
+  line-height: 0;
+}
+/* chrome user agent styling was applying opacity: 0.7 */
+:where(select:disabled) {
+  opacity: 1;
+}
+:is(input, textarea, select):disabled::-moz-placeholder, :is(input, textarea, select)[disabled]::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select):disabled::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select)[disabled]::-moz-placeholder {
+  opacity: 0;
+}
+:is(input, textarea, select):disabled::placeholder,
+:is(input, textarea, select)[disabled]::placeholder,
+:is(.bs-input, .bs-textarea, .bs-select):disabled::placeholder,
+:is(.bs-input, .bs-textarea, .bs-select)[disabled]::placeholder {
+  opacity: 0;
 }
-.bs-button:where([data-variant^='negative']) {
-  --btn-ghost-ink: var(--bs-ink-red);
-  --btn-highlight: var(--bs-red-100);
-  --btn-light: var(--bs-red-10);
-  --btn-main: var(--bs-red-400);
-  --btn-secondary: var(--bs-red-medium);
+/* Select */
+select,
+.bs-select {
+  /* URL Encoded SVG dropdown caret so there is something there */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0B19' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  background-size: 1em 1em;
+  padding-right: var(--bs-space-9);
 }
-/* pink variant */
-.bs-button:where([data-variant^='pink']) {
-  --btn-ghost-ink: var(--bs-ink-pink);
-  --btn-highlight: var(--bs-pink-400);
-  --btn-light: var(--bs-pink-10);
-  --btn-main: var(--bs-pink-400);
-  --btn-secondary: var(--bs-pink-300);
+select[multiple],
+.bs-select[multiple] {
+  background-image: none;
+  height: auto;
 }
-/* royal blue variant */
-.bs-button:where([data-variant^='royal']) {
-  --btn-ghost-ink: var(--bs-ink-royal);
-  --btn-highlight: var(--bs-royal-400);
-  --btn-light: var(--bs-royal-10);
-  --btn-main: var(--bs-royal-400);
-  --btn-secondary: var(--bs-royal-300);
+:where(.dark) select,
+:where(.dark) .bs-select {
+  /* URL Encoded SVG dropdown caret so there is something there */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
-/* 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);
-  --btn-highlight: var(--bs-ink-white);
-  --btn-light: var(--bs-white-10);
-  --btn-main: var(--bs-ink-white);
+:where(.dark) select:where(:disabled),
+:where(.dark) .bs-select:where(:disabled) {
+  /* URL Encoded SVG dropdown caret so there is something there */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
-/* ------------ Text Button ------------ */
-.bs-button:where([data-text]:not([data-text="false"])) {
-  --btn-focus-inset: -0.25rem -0.5rem;
-  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
-  --btn-height: auto;
-  --btn-ink: var(--bs-ink-blue);
-  --btn-padding: 0;
-  --btn-secondary: transparent;
-  --btn-text-size: var(--bs-text-md);
-  --btn-weight: 400;
-  background-color: transparent;
+/* Allows for styling a button to look like a select input */
+:where(button).bs-select {
+  align-items: center;
+  /* Remove this for buttons since they will have the caret added */
+  background-image: none;
   cursor: pointer;
-  line-height: 150%;
+  display: flex;
+  padding-right: var(--input-padding-inline, 0.75rem);
 }
-.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-blue-base);
-  background-color: transparent;
-  text-decoration: underline;
+:where(.dark) :where(button).bs-select,
+:where(.dark) :where(button).bs-select:where(:disabled) {
+  background-image: none;
 }
-.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover):has(svg) {
-  text-decoration: none;
+:where(button).bs-select :where(*:first-child) {
+  flex-grow: 1;
+  text-align: left;
 }
-.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):active) {
-  box-shadow: none;
+:where(button).bs-select :where(.bs-icon) {
+  color: var(--bs-ink-base);
   transform: none;
+  transition-duration: 200ms;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
 }
-.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
-.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-ink-red);
-}
-.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
-.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-ink-white);
-  --btn-main: var(--bs-ink-white);
+:where(button).bs-select:where([data-open="true"]) :where(.bs-icon) {
+  transform: rotate(180deg);
 }
-/* ------------ Button Sizes, Media-based Text Sizing -------------- */
-/* Std button: Mobile text size, DT text size */
-.bs-button {
-  --btn-text-size: 1rem;
+.bs-horizontal-nav {
+  --bg-color: var(--bs-bg-light);
+  --top-offset: 48px;
+  align-items: center;
+  background-color: var(--bg-color);
+  bottom: auto;
+  display: none;
+  height: 48px;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: var(--top-offset);
+  z-index: 1001;
 }
-@media (min-width: 1166px) {
-  .bs-button {
-    --btn-text-size: 1.125rem;
+@media (min-width: 752px) {
+  .bs-horizontal-nav {
+    display: flex;
   }
 }
-.bs-button:where([data-size^='sm']) {
-  --btn-height: 1.75rem;
-  --btn-padding: .25rem .75rem .375rem;
-  /* Std button size="sm" text size is same across all media sizes */
-  --btn-text-size: var(--bs-text-sm);
-}
-/* Text buttons: For now, text size not dependent on media size */
-.bs-button:where([data-text]:not([data-text="false"])) {
-  --btn-height: auto;
-  --btn-padding: 0;
-  --btn-text-size: var(--bs-text-md);
+.bs-horizontal-nav :where(nav) {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: calc(85.5rem + 2.25rem + 2.25rem); /* 1368px + 2.25rem x2 padding */
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  width: 100%;
 }
-.bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-base);
+/* ===== Nav List ===== */
+.bs-horizontal-nav :where(nav > ul),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul) {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  list-style: none;
+  width: 100%;
 }
-/* Size XS & XXS only applies to text buttons */
-.bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-sm);
+/* ===== Optional Title ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-title) {
+  border-right: 1px solid var(--bs-border-base);
+  padding-right: 1.5rem;
+  width: auto;
 }
-.bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-xs);
-  --btn-weight: 600;
+.bs-horizontal-nav :where(.bs-horizontal-nav-title > a) {
+  cursor: pointer;
+  display: inline;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  width: auto;
 }
-/* ------------ Disabled Styling ------------ */
-:where(button:disabled),
-.bs-button:where(:disabled),
-.bs-button:where([aria-disabled="true"]) /* for links as buttons */ {
-  pointer-events: none;
+/* ===== Nav Items ===== */
+.bs-horizontal-nav :where(nav > ul > li),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li) {
+  border-bottom: none;
+  display: list-item;
+  margin-left: 0;
+  width: auto;
 }
-.bs-button:where(:disabled),
-.bs-button:where([aria-disabled="true"]) {
-  --btn-ink: var(--bs-ink-disabled);
-  --btn-main: var(--bs-bg-disabled);
-  box-shadow: none;
-  transform: none;
+.bs-horizontal-nav :where(nav > ul > li:not(.bs-horizontal-nav-title) > a),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a) {
+  align-items: center;
+  border-radius: 4px;
+  color: var(--bs-ink-light);
+  cursor: pointer;
+  display: flex;
+  font-weight: 400;
+  gap: 0.5rem;
+  height: 100%;
+  padding-bottom: 0.5rem;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0.5rem;
+  width: 100%;
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
-.bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
-  --btn-ghost-ink: var(--bs-ink-disabled);
+.bs-horizontal-nav :where(nav > ul > li:not(.bs-horizontal-nav-title) > a:hover),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a:hover) {
+  color: var(--bs-ink-blue);
 }
-.bs-button:where([data-text]:not([data-text="false"])):disabled,
-.bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
-  --btn-main: transparent;
+.bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a[data-active="true"]) {
+  color: var(--bs-ink-base);
+  font-weight: 600;
 }
-/* ------------ links as buttons ------------ */
-a.bs-button {
-  align-items: center;
-  display: inline-flex;
-  outline: none;
-  vertical-align: middle;
+.bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]:hover),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a[data-active="true"]:hover) {
+  color: var(--bs-ink-blue);
 }
-/*
-Properties : Defaults // Description
-====================================
---btn-icon-bg-color: var(--btn-main); // icon bg color (base state)
---btn-icon-padding: .75rem; // padding around icon svg
---btn-icon-size: 1.5rem; // svg width and height
---btn-icon-stroke-color: var(--bs-white);
---btn-main: var(--bs-blue-base); // many things... should probably break this up
---btn-text-color: var(--bs-ink-base);
---btn-text-size: var(--bs-text-md);
-
---btn-border-color: transparent;  //  focus state outline color - transparent base state, --btn-main base focus state
---btn-border-color-focused: var(--btn-main); // focus state ring color set on variants
---btn-secondary: var(--bs-blue-medium); // hover state icon bg
---btn-shadow-color-active: var(--btn-main); // active state shadow color (icon bg)
---btn-text-color-hovered: var(--bs-ink-base); // hover state text color
-*/
-:where(.bs-circle-button) {
-  --btn-border-color-focused: var(--btn-main);
-  --btn-border-color: transparent;
-  --btn-focus-inset: -0.25rem;
-  --btn-gap: .5rem;
-  --btn-icon-bg-color: var(--btn-main);
-  --btn-icon-padding: .75rem;
-  --btn-icon-size: 1.5rem;
-  --btn-icon-stroke-color: var(--bs-white);
-  --btn-main: var(--bs-blue-base);
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-shadow-color-active: var(--btn-main);
-  --btn-text-color-hovered: var(--bs-ink-base);
-  --btn-text-color: var(--bs-ink-base);
-  --btn-text-size: 1.125rem;
-  --btn-text-weight: 400;
+.bs-horizontal-nav :where(.bs-horizontal-nav-first-link-icon) {
+  color: var(--bs-ink-blue);
+  height: 1rem;
+  width: 1rem;
 }
-.bs-circle-button {
+/* ===== Nested Nav Items ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle) {
   align-items: center;
-  background-color: transparent;
-  color: var(--btn-text-color);
   cursor: pointer;
-  display: inline-flex;
-  font-size: var(--btn-text-size);
-  font-weight: var(--btn-text-weight);
-  gap: var(--btn-gap);
-  outline: none;
-  position: relative;
-  vertical-align: middle;
+  display: flex;
+  gap: 0.5rem;
+  line-height: 1.5;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
 }
-a.bs-circle-button {
-  align-items: center;
-  display: inline-flex;
-  outline: none;
-  text-decoration: none;
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle:hover) {
+  color: var(--bs-ink-blue);
+}
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-active="true"]) {
+  color: var(--bs-ink-base);
+  font-weight: 600;
+}
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-active="true"]:hover) {
+  color: var(--bs-ink-blue);
+}
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle-caret) {
+  height: 0.75rem;
+  transform: none;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  width: 0.75rem;
+}
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle:hover ~ .bs-horizontal-nav-caret) {
+  color: var(--bs-ink-blue);
+}
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-expanded="true"]) {
+  color: var(--bs-ink-blue);
+  font-weight: 600;
 }
-.bs-circle-button :where(.bs-circle-button-icon) {
-  align-items: center;
-  background-color: var(--btn-icon-bg-color);
-  border: none;
-  border-radius: 50%;
-  color: var(--btn-icon-stroke-color);
-  display: inline-flex;
-  justify-content: center;
-  outline: 2px solid transparent;
-  padding: var(--btn-icon-padding);
-  position: relative;
-  transition: all 100ms ease-in-out;
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-expanded="true"] .bs-horizontal-nav-nested-toggle-caret) {
+  transform: rotate(180deg);
 }
-.bs-circle-button :where(.bs-circle-button-icon)::before {
-  border-color: var(--btn-border-color);
-  border-radius: 50%;
-  border-style: solid;
-  border-width: 0.125rem;
-  content: '';
-  inset: var(--btn-focus-inset);
-  position: absolute;
-  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu) {
+  --dropdown-top: 100%;
+  border-radius: 8px;
+  padding: 1.5rem;
+  width: 10.5rem;
 }
-.bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
-  --icon-size: var(--btn-icon-size);
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul) {
+  list-style: none;
 }
-/* non-bs-icon svgs */
-.bs-circle-button :where(.bs-circle-button-icon) > :where(svg) {
-  height: var(--btn-icon-size);
-  width: var(--btn-icon-size);
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li) {
+  margin-left: 0;
 }
-/* Icon Buttons with Text */
-.bs-circle-button:where([data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-md);
-  --btn-icon-size: 0.75rem;
-  --btn-icon-padding: 0.375rem;
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a) {
+  font-size: 0.875rem;
 }
-/* Ghost Buttons */
-.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-blue-10);
-  --btn-secondary: var(--bs-blue-10);
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a:hover) {
+  color: var(--bs-ink-blue);
+  text-decoration: underline;
 }
-/* Active, Hover, Focus states */
-.bs-circle-button:active, .bs-circle-button:hover {
-  --btn-icon-bg-color: var(--btn-secondary);
-  --btn-text-color: var(--btn-text-color-hovered);
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a[data-active="true"]) {
+  color: var(--bs-ink-base);
+  font-weight: 600;
 }
-.bs-circle-button:active :where(.bs-circle-button-icon) {
-  box-shadow: inset 0px 0px 4px 1px var(--btn-shadow-color-active);
-  transform-origin: center;
-  transform: scale(0.97);
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a[data-active="true"]:hover) {
+  color: var(--bs-ink-blue);
 }
-.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
-.bs-circle-button:where([data-direction="right"]):hover::before {
-  transform: translateX(.25rem);
+/* ===== External Links ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-external-link-icon) {
+  height: 1rem;
+  width: 1rem;
 }
-.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
-.bs-circle-button:where([data-direction="left"]):hover::before {
-  transform: translateX(-.25rem);
+/* ===== Slotted Items ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-slotted-items) {
+  margin-left: auto;
 }
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover {
-  --btn-icon-bg-color: var(--btn-light);
+.bs-horizontal-nav :where(.bs-horizontal-nav-external-links ~ .bs-horizontal-nav-slotted-items) {
+  margin-left: 1.5rem;
 }
-.bs-circle-button:where(:focus-visible) {
-  --btn-border-color: var(--btn-border-color-focused);
+/* ===== Component-specific ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu-override) {
+  --dropdown-top: 0;
+  padding: 1.5rem;
+  width: 10.5rem;
 }
-/* Disabled State */
-.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
-  --btn-icon-stroke-color: var(--bs-ink-disabled);
-  --btn-text-color: var(--bs-ink-disabled);
-  pointer-events: none;
+.bs-horizontal-nav-mobile {
+  --bg-color: var(--bs-bg-light);
+  --top-offset: 48px;
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  background-color: var(--bg-color);
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  left: 0;
+  max-height: calc(100vh - var(--top-offset));
+  overflow: scroll;
+  position: fixed;
+  right: 0;
+  scrollbar-width: none;  /* Firefox */
+  top: var(--top-offset);
+  z-index: 1001;
 }
-.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
-  --btn-icon-bg-color: var(--bs-bg-disabled);
+.bs-horizontal-nav-mobile:where([data-shown="true"]) {
+  height: 100vh;
 }
-/* Button Size */
-.bs-circle-button:where([data-size^='sm']) {
-  --btn-icon-padding: .375rem;
-  --btn-icon-size: .75rem;
-  --btn-text-size: .875rem;
+@media (min-width: 752px) {
+  .bs-horizontal-nav-mobile {
+    display: none;
+  }
 }
-.bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
-  --btn-icon-padding: .3125rem;
-  --btn-icon-size: .625rem;
-  --btn-text-size: 1rem;
+/* ===== Nav List ===== */
+.bs-horizontal-nav-mobile :where(ul) {
+  display: none;
+  flex-direction: column;
+  list-style: none;
 }
-.bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
-  --btn-icon-padding: .25rem;
-  --btn-icon-size: .5rem;
-  --btn-text-size: .875rem;
+.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(ul) {
+  display: flex;
 }
-/* Color Variants */
-.bs-circle-button:where([data-variant^="color"]) {
-  --btn-gap: .5rem;
-  --btn-icon-bg-color: transparent;
-  --btn-icon-padding: 0;
-  --btn-icon-size: .75rem; /* stays the same for all sizes */
-  --btn-icon-stroke-color: var(--btn-text-color);
-  --btn-secondary: transparent;
-  --btn-shadow-color-active: transparent;
+/* ===== Toggle ===== */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle) {
+  align-items: center;
+  color: var(--bs-ink-light);
+  cursor: pointer;
+  display: flex;
+  height: 48px;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  padding-top: 0.5rem;
+  width: 100%;
 }
-.bs-circle-button:where([data-variant="color-blue"]) {
-  --btn-border-color-focused: var(--bs-ink-blue);
-  --btn-text-color: var(--bs-ink-blue);
-  --btn-text-color-hovered: var(--bs-blue-base);
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title) {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
 }
-.bs-circle-button:where([data-variant="color-royal"]) {
-  --btn-border-color-focused: var(--bs-ink-royal);
-  --btn-text-color: var(--bs-ink-royal);
-  --btn-text-color-hovered: var(--bs-royal-medium);
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title-icon) {
+  color: var(--bs-ink-blue);
+  height: 1rem;
+  width: 1rem;
 }
-.bs-circle-button:where([data-variant="color-purple"]) {
-  --btn-border-color-focused: var(--bs-purple-400);
-  --btn-text-color: var(--bs-ink-purple);
-  --btn-text-color-hovered: var(--bs-purple-medium);
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-caret) {
+  height: 0.75rem;
+  transform: none;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  width: 0.75rem;
 }
-.bs-circle-button:where([data-variant="color-pink"]) {
-  --btn-border-color-focused: var(--bs-pink-400);
-  --btn-text-color: var(--bs-ink-pink);
-  --btn-text-color-hovered: var(--bs-pink-base);
+.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-toggle-caret) {
+  transform: rotate(180deg);
 }
-.bs-circle-button:where([data-variant="color-orange"]) {
-  --btn-border-color-focused: var(--bs-ink-orange);
-  --btn-text-color: var(--bs-ink-orange);
-  --btn-text-color-hovered: var(--bs-orange-base);
+/* ===== Nav Items ===== */
+.bs-horizontal-nav-mobile :where(ul > li) {
+  border-top: 1px solid var(--bs-border-base);
 }
-.bs-circle-button:where([data-variant="color-red"]) {
-  --btn-border-color-focused: var(--bs-ink-red);
-  --btn-text-color: var(--bs-ink-red);
-  --btn-text-color-hovered: var(--bs-red-base);
+.bs-horizontal-nav-mobile :where(ul:not(.bs-horizontal-nav-mobile-nested-menu) > li:last-child) {
+  border-bottom: 1px solid var(--bs-border-base);
 }
-.bs-circle-button:where([data-variant="color-white"]) {
-  --btn-border-color-focused: var(--bs-ink-white);
-  --btn-text-color: var(--bs-ink-white);
-  /* 80% of --bs-white */
-  --btn-text-color-hovered: rgba(255, 255, 255, 0.8);
+.bs-horizontal-nav-mobile :where(ul > li > a) {
+  color: var(--bs-ink-light);
+  cursor: pointer;
+  display: flex;
+  font-weight: 400;
+  padding-bottom: 0.75rem;
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  padding-top: 0.75rem;
 }
-.bs-circle-button:where([data-variant^="color"]):where(:disabled, [aria-disabled]:not([aria-disabled="false"])) {
-  --btn-icon-bg-color: transparent;
-  --btn-text-color: var(--bs-ink-disabled);
+.bs-horizontal-nav-mobile :where(ul > li > a:hover) {
+  color: var(--bs-ink-blue);
 }
-/* size XXS only supported for color variants */
-.bs-circle-button:where([data-variant^="color"]):where([data-size='xxs'][data-text]:not([data-text="false"])) {
-  --btn-text-size: .75rem;
-  --btn-text-weight: 600;
+.bs-horizontal-nav-mobile :where(ul > li > a[data-active="true"]) {
+  color: var(--bs-ink-base);
+  font-weight: 600;
 }
-/*
-custom properties:
---filterbtn-caret-size
---filterbtn-caret-transform
---filterbtn-color
---filterbtn-focus-color
---filterbtn-height
---filterbtn-text-size
---filterbtn-weight
-*/
-button:where(.bs-filter-button) {
-  --filterbtn-caret-size: 1rem;
-  --filterbtn-caret-transform: rotate(0deg);
-  --filterbtn-color: var(--bs-ink-blue);
-  --filterbtn-focus-color: transparent;
-  --filterbtn-height: 1.5rem;
-  --filterbtn-text-size: var(--bs-text-base);
-  --filterbtn-weight: 400;
-  flex-shrink: 0;
-  position: relative;
+.bs-horizontal-nav-mobile :where(ul > li > a[data-active="true"]:hover) {
+  color: var(--bs-ink-blue);
 }
-.bs-filter-button {
+/* ===== Nested Nav Items ===== */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle) {
   align-items: center;
-  color: var(--filterbtn-color);
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
+  color: var(--bs-ink-light);
   cursor: pointer;
-  display: inline-flex;
-  font-size: var(--filterbtn-text-size);
-  font-weight: var(--filterbtn-weight);
-  height: var(--filterbtn-height);
-  line-height: 1.5;
-  transition: outline-color 100ms ease-in-out;
-  width: -moz-max-content;
-  width: max-content;
-}
-.bs-filter-button::after {
-  border: solid var(--filterbtn-focus-color) 2px;
-  border-radius: 0.25rem;
-  content: '';
-  display: block;
-  height: 100%;
-  position: absolute;
-  transform: scale(1.25);
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 0.75rem;
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  padding-top: 0.75rem;
   width: 100%;
 }
-.bs-filter-button :where(.bs-icon),
-.bs-filter-button :where(span:has(svg:only-child)) {
+.bs-horizontal-nav-mobile :where(ul li .bs-horizontal-nav-mobile-nested-toggle[data-active="true"]) {
+  font-weight: 600;
+}
+.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle) {
+  background-color: var(--bs-bg-medium);
+  color: var(--bs-ink-blue);
+  font-weight: 600;
+}
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle:hover) {
+  color: var(--bs-ink-blue);
+}
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle-caret) {
+  height: 0.75rem;
+  transform: none;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  width: 0.75rem;
+}
+.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle-caret) {
+  transform: rotate(180deg);
+}
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu) {
+  background-color: var(--bs-bg-medium);
+  display: none;
+}
+.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-menu) {
   display: block;
-  height: var(--filterbtn-caret-size);
-  line-height: 1;
-  transform: var(--filterbtn-caret-transform);
-  transform-origin: center;
-  transition: var(--bs-trans-rotate180);
-  width: var(--filterbtn-caret-size);
 }
-.bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
-
-  --filterbtn-text-size: var(--bs-text-sm);
-  --filterbtn-caret-size: .75rem;
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li) {
+  border-top: none;
 }
-.bs-filter-button:where([data-size="sm"]) {
-  --filterbtn-text-size: var(--bs-text-sm);
+/* ===== External Links ===== */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-link) {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
 }
-.bs-filter-button:where([data-size="xs"]) {
-  --filterbtn-text-size: var(--bs-text-xs);
-  --filterbtn-weight: 600;
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-link-icon) {
+  height: 1rem;
+  width: 1rem;
 }
-/* Hover state */
-.bs-filter-button:hover {
-  --filterbtn-color: var(--bs-blue-base);
+/* ===== Slotted Items ===== */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-slotted-items) {
+  display: none;
+  padding-bottom: 0.75rem;
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  padding-top: 0.75rem;
 }
-/* Focus state */
-.bs-filter-button:where(:focus-visible) {
-  outline: none;
-  --filterbtn-focus-color: var(--bs-blue-base);
+.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-slotted-items) {
+  display: block;
 }
-/* Filter open state */
-.bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
-  --filterbtn-caret-transform: rotate(180deg);
+.bs-loader {
+  --loader-dot-bg: var(--bs-blue-500);
+  --loader-dot-size: .75rem;
+  --loader-dot-top: calc(50% - var(--loader-dot-size)/2);
+  --loader-dot-translate: 1.75rem; /* i.e., calc(var(--loader-width)/2 - var(--loader-dot-size)/2); */
+  --loader-height: 3rem;
+  --loader-width: 4rem; /* approx 6 * dot size */
+  display: block;
+  height: var(--loader-height);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  position: relative;
+  width: var(--loader-width);
 }
-/* Badge non-standard color */
-.bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-ink-blue);
+.bs-loader:where([data-size="xs"]) {
+  --loader-dot-size: .3rem;
+  --loader-dot-translate: .75rem;
+  --loader-height: .3rem;
+  --loader-width: 1.8rem;
 }
-:where(.dark) .bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-blue-medium);
+.bs-loader:where([data-size="sm"]) {
+  --loader-dot-size: .5rem;
+  --loader-dot-translate: 1.125rem;
+  --loader-height: .5rem;
+  --loader-width: 3rem;
 }
-.bs-filter-button:hover :where(.bs-badge) {
-  --badge-bg: var(--filterbtn-color);
+.bs-loader:where([data-size="lg"]) {
+  --loader-dot-size: 1rem;
+  --loader-dot-translate: 2.375rem;
+  --loader-height: 4rem;
+  --loader-width: 6rem;
 }
-/* Disabled state */
-.bs-filter-button:where(:disabled) {
-  --filterbtn-color: var(--bs-ink-disabled);
-  cursor: default;
+/* ----- loader dots ----- */
+.bs-loader > :where(*:not(.visually-hidden)) {
+  background-color: var(--loader-dot-bg);
+  border-radius: 50%;
+  display: block;
+  height: var(--loader-dot-size);
+  position: absolute;
+  top: var(--loader-dot-top);
+  width: var(--loader-dot-size);
 }
-.bs-filter-button:where(:disabled) :where(.bs-badge) {
-  --badge-bg: var(--bs-bg-disabled);
-  --badge-text: var(--bs-ink-disabled);
+.bs-loader > :where(*:not(.visually-hidden)) {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
-.bs-flyout {
-  background-color: var(--bs-bg-base-to-light);
-  box-shadow: var(--bs-shadow-drawerRight);
-  height: 100%;
-  left: 0;
-  margin: 0;
-  max-width: 100vw;
-  opacity: 0;
-  padding: 1.5rem;
-  position: fixed;
-  top: 0;
-  transform: translateX(-100%);
-  transition-duration: 300ms;
-  transition-property: opacity, transform;
-  transition-timing-function: ease;
-  width: 360px;
-  z-index: 1000;
+.bs-loader > :where(*:nth-child(1)) {
+  animation: loading-1 0.6s infinite;
+  left: 0%;
 }
-.bs-flyout:where([data-absolute="true"]) {
-  position: absolute;
+.bs-loader > :where(*:nth-child(2)) {
+  animation: loading-2 0.6s infinite;
+  left: 0%;
 }
-.bs-flyout:where([data-position="right"]) {
-  box-shadow: var(--bs-shadow-drawerLeft);
-  left: auto;
-  right: 0;
-  transform: translateX(100%);
+.bs-loader > :where(*:nth-child(3)) {
+  animation: loading-2 0.6s infinite;
+  left: 40%;
 }
-.bs-flyout:where([data-size="lg"]) {
-  width: 535px;
+.bs-loader > :where(*:nth-child(4)) {
+  animation: loading-3 0.6s infinite;
+  left: 80%;
 }
-.bs-flyout:where([data-shown="true"]) {
-  opacity: 1;
-  /*
-  Needs to be "none" instead of "0" so as not to interfere with calculating
-  "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
-  */
-  transform: none;
+/* ----- color variants ----- */
+.bs-loader:where([data-variant="black"]) {
+  --loader-dot-bg: var(--bs-black);
 }
-.bs-flyout :where(.bs-flyout-close-container) {
-  display: flex;
-  justify-content: flex-end;
+.bs-loader:where([data-variant="gray"]) {
+  --loader-dot-bg: var(--bs-gray-400);
 }
-.bs-flyout :where(.bs-flyout-close-container button) {
-  cursor: pointer;
-  outline-offset: 2px;
-  padding: 2px;
+.bs-loader:where([data-variant="white"]) {
+  --loader-dot-bg: var(--bs-white);
 }
-/* Vue Transition Styles - Only used in Vue component */
-.bs-flyout:where(.bs-flyout-enter-from),
-.bs-flyout:where(.bs-flyout-leave-to) {
-  opacity: 0;
-  transform: translateX(-100%);
+@keyframes loading-1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
-.bs-flyout:where([data-position="right"].bs-flyout-enter-from),
-.bs-flyout:where([data-position="right"].bs-flyout-leave-to) {
-  transform: translateX(100%);
+@keyframes loading-2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(var(--loader-dot-translate), 0);
+  }
 }
-.bs-flyout:where(.bs-flyout-enter-to),
-.bs-flyout:where(.bs-flyout-leave-from) {
-  opacity: 1;
-  transform: translateX(0);
+@keyframes loading-3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
 }
 .bs-modal {
   background-color: var(--bs-bg-base-to-medium);
@@ -3845,7 +4287,7 @@ button:where(.bs-filter-button) {
 }
 @media (min-width: 752px) {
   .bs-modal {
-    max-height: 40.625rem;
+    max-height: min(calc(100vh - 3rem), 40.625rem);
     width: 35rem;
   }
 }
@@ -3937,154 +4379,59 @@ button:where(.bs-filter-button) {
 .bs-pagination:where([data-variant="results"]) {
   gap: 1rem;
 }
-.bs-pagination :where(button) {
-  align-items: center;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  min-height: 1.5rem;
-  justify-content: center;
-  outline: 2px solid transparent;
-  min-width: 1.5rem;
-}
-.bs-pagination button:where(:focus),
-.bs-pagination button:where(:focus-visible) {
-  outline: 2px solid var(--bs-blue-base);
-}
-.bs-pagination button:where(:focus:not(:focus-visible)) {
-  outline: 2px solid transparent;
-}
-.bs-pagination button:where(:disabled) {
-  color: var(--bs-ink-disabled);
-}
-.bs-pagination button:where([data-selected]:not([data-selected="false"])) {
-  background-color: var(--bs-blue-base);
-  color: var(--bs-gray-50);
-}
-.bs-pagination:where([data-fixed]:not([data-fixed="false"])) {
-  background-color: var(--bs-bg-base-elevated);
-  bottom: 0;
-  left: 0;
-  padding: 1rem;
-  position: fixed;
-  width: 100%;
-}
-.bs-pagination :where(.bs-pagination-page-numbers) {
-  display: flex;
-  gap: 1rem;
-}
-.bs-pagination :where(.bs-pagination-carets) {
-  display: flex;
-  gap: 1.5rem;
-}
-.bs-pagination :where(.bs-pagination-word-caret) {
-  align-items: center;
-  gap: 0.5rem;
-  width: auto;
-}
-.bs-pagination :where(.bs-pagination-results-numbers) {
-  display: flex;
-  gap: 0.5rem;
-}
-.bs-pagination :where(.bs-pagination-results-numbers) button {
-  padding-left: 2px;
-  padding-right: 2px;
-  width: auto;
-}
-.bs-loader {
-  --loader-dot-bg: var(--bs-blue-500);
-  --loader-dot-size: .75rem;
-  --loader-dot-top: calc(50% - var(--loader-dot-size)/2);
-  --loader-dot-translate: 1.75rem; /* i.e., calc(var(--loader-width)/2 - var(--loader-dot-size)/2); */
-  --loader-height: 3rem;
-  --loader-width: 4rem; /* approx 6 * dot size */
-  display: block;
-  height: var(--loader-height);
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  position: relative;
-  width: var(--loader-width);
-}
-.bs-loader:where([data-size="xs"]) {
-  --loader-dot-size: .3rem;
-  --loader-dot-translate: .75rem;
-  --loader-height: .3rem;
-  --loader-width: 1.8rem;
-}
-.bs-loader:where([data-size="sm"]) {
-  --loader-dot-size: .5rem;
-  --loader-dot-translate: 1.125rem;
-  --loader-height: .5rem;
-  --loader-width: 3rem;
-}
-.bs-loader:where([data-size="lg"]) {
-  --loader-dot-size: 1rem;
-  --loader-dot-translate: 2.375rem;
-  --loader-height: 4rem;
-  --loader-width: 6rem;
-}
-/* ----- loader dots ----- */
-.bs-loader > :where(*:not(.visually-hidden)) {
-  background-color: var(--loader-dot-bg);
-  border-radius: 50%;
-  display: block;
-  height: var(--loader-dot-size);
-  position: absolute;
-  top: var(--loader-dot-top);
-  width: var(--loader-dot-size);
-}
-.bs-loader > :where(*:not(.visually-hidden)) {
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+.bs-pagination :where(button) {
+  align-items: center;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  min-height: 1.5rem;
+  justify-content: center;
+  outline: 2px solid transparent;
+  min-width: 1.5rem;
 }
-.bs-loader > :where(*:nth-child(1)) {
-  animation: loading-1 0.6s infinite;
-  left: 0%;
+.bs-pagination button:where(:focus),
+.bs-pagination button:where(:focus-visible) {
+  outline: 2px solid var(--bs-blue-base);
 }
-.bs-loader > :where(*:nth-child(2)) {
-  animation: loading-2 0.6s infinite;
-  left: 0%;
+.bs-pagination button:where(:focus:not(:focus-visible)) {
+  outline: 2px solid transparent;
 }
-.bs-loader > :where(*:nth-child(3)) {
-  animation: loading-2 0.6s infinite;
-  left: 40%;
+.bs-pagination button:where(:disabled) {
+  color: var(--bs-ink-disabled);
 }
-.bs-loader > :where(*:nth-child(4)) {
-  animation: loading-3 0.6s infinite;
-  left: 80%;
+.bs-pagination button:where([data-selected]:not([data-selected="false"])) {
+  background-color: var(--bs-blue-base);
+  color: var(--bs-gray-50);
 }
-/* ----- color variants ----- */
-.bs-loader:where([data-variant="black"]) {
-  --loader-dot-bg: var(--bs-black);
+.bs-pagination:where([data-fixed]:not([data-fixed="false"])) {
+  background-color: var(--bs-bg-base-elevated);
+  bottom: 0;
+  left: 0;
+  padding: 1rem;
+  position: fixed;
+  width: 100%;
 }
-.bs-loader:where([data-variant="gray"]) {
-  --loader-dot-bg: var(--bs-gray-400);
+.bs-pagination :where(.bs-pagination-page-numbers) {
+  display: flex;
+  gap: 1rem;
 }
-.bs-loader:where([data-variant="white"]) {
-  --loader-dot-bg: var(--bs-white);
+.bs-pagination :where(.bs-pagination-carets) {
+  display: flex;
+  gap: 1.5rem;
 }
-@keyframes loading-1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
+.bs-pagination :where(.bs-pagination-word-caret) {
+  align-items: center;
+  gap: 0.5rem;
+  width: auto;
 }
-@keyframes loading-2 {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(var(--loader-dot-translate), 0);
-  }
+.bs-pagination :where(.bs-pagination-results-numbers) {
+  display: flex;
+  gap: 0.5rem;
 }
-@keyframes loading-3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
+.bs-pagination :where(.bs-pagination-results-numbers) button {
+  padding-left: 2px;
+  padding-right: 2px;
+  width: auto;
 }
 .bs-pill {
   --pill-background: var(--bs-bg-medium);
@@ -4289,6 +4636,44 @@ button:where(.bs-filter-button) {
 .bs-pill:where([data-variant^="filter"])[data-active="false"]:is(:disabled, [aria-disabled="true"]) {
   --pill-border: var(--bs-gray-400);
 }
+.bs-profile-details {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-sm);
+  line-height: 1.3;
+}
+.bs-profile-details > :where(*) {
+  display: block;
+}
+.bs-profile-details > :where(.bs-profile-name) {
+  color: var(--profile-name-color, var(--bs-ink-base));
+  -webkit-text-decoration: var(--profile-name-decoration, none);
+          text-decoration: var(--profile-name-decoration, none);
+}
+/* Action button aka Follow toggle. */
+.bs-profile-details > :where(button:first-child) {
+  color: var(--profile-action-color, var(--bs-orange-warning));
+  font-size: inherit;
+}
+.bs-profile-details > :where(button:first-child:hover) {
+  text-decoration: underline;
+}
+/* Remove the profile name underline when hovering on the action button. */
+.bs-profile-details:has(:where(button:first-child:hover)) {
+  --profile-name-decoration: none;
+}
+/* Action button and optional meta details w/ icon */
+.bs-profile-details > :where([data-icon]) {
+  align-items: center;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  font-size: inherit;
+}
+.bs-profile-details .bs-icon {
+  height: .75rem;
+  width: .75rem;
+}
 .bs-profile-img,
 .bs-profile-img:where([data-img-size^='sm']) {
   --profile-size: 2rem;
@@ -4356,44 +4741,6 @@ button:where(.bs-filter-button) {
   --profile-size: 5.75rem;
   --profile-text: var(--bs-text-2xl);
 }
-.bs-profile-details {
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-sm);
-  line-height: 1.3;
-}
-.bs-profile-details > :where(*) {
-  display: block;
-}
-.bs-profile-details > :where(.bs-profile-name) {
-  color: var(--profile-name-color, var(--bs-ink-base));
-  -webkit-text-decoration: var(--profile-name-decoration, none);
-          text-decoration: var(--profile-name-decoration, none);
-}
-/* Action button aka Follow toggle. */
-.bs-profile-details > :where(button:first-child) {
-  color: var(--profile-action-color, var(--bs-orange-warning));
-  font-size: inherit;
-}
-.bs-profile-details > :where(button:first-child:hover) {
-  text-decoration: underline;
-}
-/* Remove the profile name underline when hovering on the action button. */
-.bs-profile-details:has(:where(button:first-child:hover)) {
-  --profile-name-decoration: none;
-}
-/* Action button and optional meta details w/ icon */
-.bs-profile-details > :where([data-icon]) {
-  align-items: center;
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  font-size: inherit;
-}
-.bs-profile-details .bs-icon {
-  height: .75rem;
-  width: .75rem;
-}
 /* Profile with User Details */
 .bs-profile:where([data-layout]),
 .bs-profile:where([data-layout^='vertical']) {
@@ -5324,3 +5671,204 @@ This must go last to properly override the other classes
   opacity: 0;
   transform: translateY(-50%) scale(0.5);
 }
+.bs-vertical-nav {
+  --active-color: rgba(255, 255, 255, 0.25);
+  --bg-color: var(--bs-navy-base);
+  --border-color: var(--bs-border-dark);
+  --top-offset: 48px;
+  --width: auto;
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  background-color: var(--bg-color);
+  color: var(--bs-white);
+  display: none;
+  flex-direction: column;
+  height: 100vh;
+  left: 0;
+  max-height: calc(100vh - var(--top-offset));
+  overflow: scroll;
+  padding-bottom: 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1.5rem;
+  position: fixed;
+  right: 0;
+  scrollbar-width: none;  /* Firefox */
+  top: var(--top-offset);
+  transition-duration: 0.2s;
+  transition-property: max-height, transform;
+  transition-timing-function: ease;
+  width: var(--width);
+  z-index: 1001;
+}
+.bs-vertical-nav:where([data-mobile-shown="true"]) {
+  display: flex;
+}
+.dark .bs-vertical-nav {
+  --active-color: rgba(255, 255, 255, 0.25);
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-dark);
+  border-right: 1px solid var(--bs-border-medium);
+}
+@media (min-width: 752px) {
+  .bs-vertical-nav {
+    --width: 9.875rem;
+    border-right: 1px solid var(--bg-color);
+    display: flex;
+    padding-bottom: 1rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 1rem;
+    right: auto;
+  }
+
+  .bs-vertical-nav:where([data-narrow="true"]) {
+    --width: 4.5rem;
+  }
+}
+.bs-vertical-nav::-webkit-scrollbar {
+  display: none;  /* Safari and Chrome */
+}
+.bs-vertical-nav:where([data-y-expand="true"]) {
+  transform: translateY(calc(-1 * var(--top-offset)));
+  max-height: 100vh;
+}
+/* ===== Sections ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-section) {
+  border-top: 2px solid var(--border-color);
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+}
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-section) {
+    margin-top: 0.25rem;
+  }
+}
+/* Don't show border if the very first item is a section */
+.bs-vertical-nav :where(ul li:first-child) {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+.bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: 600;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
+  padding-top: 0.5rem;
+  width: 100%;
+}
+.bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
+  height: 0.75rem;
+  transform: none;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  width: 0.75rem;
+}
+.bs-vertical-nav :where(.bs-vertical-nav-section[data-collapsed="true"] .bs-vertical-nav-section-toggle-caret) {
+  transform: rotate(180deg);
+}
+/* ===== Nav List ===== */
+.bs-vertical-nav :where(ul) {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  list-style: none;
+  margin-top: 0;
+  padding-left: 0;
+}
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(ul) {
+    gap: 0.25rem;
+  }
+}
+/* ===== Nav List Items / Links */
+.bs-vertical-nav :where(ul li a) {
+  align-items: center;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  font-size: 1rem;
+  font-weight: 400;
+  gap: 0.5rem;
+  height: 100%;
+  padding-bottom: 0.75rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.75rem;
+  width: 100%;
+}
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(ul li a) {
+    font-size: 0.875rem;
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
+    flex-direction: column;
+    font-size: 0.6875rem;
+    gap: 0.25rem;
+    line-height: 110%;
+    padding-bottom: 0.75rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    padding-top: 0.75rem;
+    text-align: center;
+  }
+}
+.bs-vertical-nav :where(ul li a:hover) {
+  font-weight: 600;
+}
+.bs-vertical-nav :where(ul li a[data-active="true"]) {
+  background-color: var(--active-color);
+  font-weight: 600;
+}
+.bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
+  height: 1rem;
+  width: 1rem;
+}
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+  .bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+/* ===== External Links ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-external-links) {
+  margin-top: auto;
+  padding-top: 2.25rem;
+}
+.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-external-links) {
+  display: none;
+}
+.bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
+  height: 1rem;
+  width: 1rem;
+}
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+}
+/* ===== Slotted Items ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-slotted-items) {
+  margin-top: auto;
+}
+.bs-vertical-nav :where(.bs-vertical-nav-external-links ~ .bs-vertical-nav-slotted-items) {
+  margin-top: 1rem;
+}
+.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-slotted-items) {
+  display: none;
+}