@wwtdev/bsds-css 2.4.1 → 2.5.0

package/dist/wwt-bsds.css

@@ -1074,1592 +1074,1646 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
     display: inline-flex;
   }
 }
-.bs-button {
-  --btn-main: var(--bs-blue-400);
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-highlight: var(--bs-blue-100);
-  --btn-padding: .25rem .75rem;
-  --btn-focus-pseudo-width: calc(100% + 0.5rem);
-  --btn-ghost-ink: var(--bs-ink-blue);
-  --btn-ink: var(--bs-white);
-  align-items: center;
-  background-color: var(--btn-main);
-  border: none;
-  border-radius: 0.25rem;
-  color: var(--btn-ink);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--btn-text-size, var(--bs-text-md));
-  font-weight: var(--btn-weight, 600);
-  height: var(--btn-height, 2.5rem);
-  justify-content: center;
-  line-height: 1.5;
-  outline: 2px solid transparent;
-  padding: var(--btn-padding);
+/* Parent */
+.bs-dropdown-parent {
+  display: inline-block;
   position: relative;
-  text-decoration: none;
-  transition: all 100ms ease-in-out;
-  vertical-align: middle;
 }
-.bs-button:hover {
-  background-color: var(--btn-secondary);
-}
-.bs-button:active {
-  background-color: var(--btn-secondary);
-  transform: scale(0.97);
-  transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
+/* Backdrop for mobile bottom sheet */
+.bs-dropdown-backdrop {
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  background: rgba(29, 30, 72, 0.05);
+  bottom: 0;
+  content: "";
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 998;
 }
-/* ------------ 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: -0.25rem;
-  left: auto;
-  position: absolute;
-  right: auto;
-  transition: border-color 0.125s ease-in-out;
-  width: var(--btn-focus-pseudo-width);
+/* Content */
+.bs-dropdown {
+  --dropdown-bottom: 0;
+  --dropdown-left: 0;
+  --dropdown-right: auto;
+  --dropdown-top: auto;
+  --dropdown-width: 100%;
+  --dropdown-transform: translate(0, 100%);
+
+  background-color: var(--bs-bg-base-elevated);
+  border-radius: 4px;
+  bottom: var(--dropdown-bottom);
+  box-shadow: var(--bs-shadow-contentMedium);
+  left: var(--dropdown-left);
+  line-height: 1.5rem;
+  margin: 0;
+  opacity: 0;
+  overflow-y: auto;
+  position: fixed;
+  right: var(--dropdown-right);
+  top: var(--dropdown-top);
+  transform-origin: center bottom;
+  transform: var(--dropdown-transform);
+  transition-duration: 75ms;
+  transition-property: opacity, transform;
+  transition-timing-function: ease-in-out;
+  width: var(--dropdown-width);
+  z-index: 999;
 }
-.bs-button:focus::before {
-  border-color: var(--btn-main);
+/* Mobile Header */
+.bs-dropdown > :where(header) {
+  border-bottom: 1px solid var(--bs-border-base);
+  display: flex;
+  justify-content: space-between;
+  padding: 1.5rem;
 }
-.bs-button:focus-visible::before {
-  border-color: var(--btn-main);
-  box-shadow: none;
+.bs-dropdown > :where(header) :where(h3) {
+  font-size: 1.25rem;
 }
-.bs-button:focus:not(:focus-visible)::before {
-  border-color: transparent;
-  box-shadow: none;
+.bs-dropdown > :where(header) :where(p) {
+  font-size: 1rem;
 }
-/* ------------ 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-main);
+.bs-dropdown > :where(header) :where(button) {
+  cursor: pointer;
+  height: 1rem;
+  width: 1rem;
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
-  border-radius: 0.4375rem;
+/* data-shown */
+.bs-dropdown:where([data-shown]:not([data-shown="false"])) {
+  --dropdown-transform: translate(0, 0);
+  opacity: 1;
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"])):hover,
-.bs-button:where([data-ghost]:not([data-ghost="false"])):focus {
-  background-color: var(--btn-light);
+/* Sizing */
+.bs-dropdown:where([data-width="sm"]) {
+  --dropdown-wscreen-width: 10rem;
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"])):active {
-  box-shadow:
-    inset 0 0 0 1px var(--btn-main),
-    inset 0px 0px 4px 1px var(--btn-highlight);
+.bs-dropdown:where([data-width="md"]),
+.bs-dropdown:where(:not([data-width])) {
+  --dropdown-wscreen-width: 20rem;
 }
-/* ------------ VARIANTS ------------ */
-.bs-button:where([data-variant^='secondary']) {
-  --btn-main: var(--bs-plum-400);
-  --btn-secondary: var(--bs-plum-medium);
-  --btn-light: var(--bs-plum-10);
-  --btn-highlight: var(--bs-plum-100);
-  --btn-ghost-ink: var(--bs-ink-plum);
+.bs-dropdown:where([data-width="lg"]) {
+  --dropdown-wscreen-width: 40rem;
 }
-.dark .bs-button:where([data-variant^='secondary']) {
-  --btn-main: var(--bs-plum-200);
-  --btn-secondary: var(--bs-plum-300);
-  --btn-light: var(--bs-navy-400);
-  --btn-highlight: var(--bs-plum-400);
+.bs-dropdown:where([data-width="content"]) {
+  --dropdown-wscreen-width: max-content;
 }
-.bs-button:where([data-variant^='positive']) {
-  --btn-main: var(--bs-purple-400);
-  --btn-secondary: var(--bs-purple-medium);
-  --btn-light: var(--bs-purple-10);
-  --btn-highlight: var(--bs-purple-100);
-  --btn-ghost-ink: var(--bs-ink-purple);
+.bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown),
+.bs-dropdown-parent:where([data-width="anchor"]) :where(.bs-dropdown) {
+  --dropdown-wscreen-width: 100%;
 }
-.bs-button:where([data-variant^='warning']) {
-  --btn-main: var(--bs-orange-warning);
-  --btn-secondary: var(--bs-orange-base);
-  --btn-light: var(--bs-orange-10);
-  --btn-highlight: var(--bs-orange-100);
-  --btn-ghost-ink: var(--bs-ink-orange);
+/* data-top */
+.bs-dropdown:where([data-top]:not([data-top="false"])) {
+  --dropdown-wscreen-bottom: calc(100% + 0.5rem);
+  --dropdown-wscreen-top: auto;
 }
-.bs-button:where([data-variant^='negative']) {
-  --btn-main: var(--bs-red-400);
-  --btn-secondary: var(--bs-red-medium);
-  --btn-light: var(--bs-red-10);
-  --btn-highlight: var(--bs-red-100);
-  --btn-ghost-ink: var(--bs-ink-red);
+/* data-center */
+.bs-dropdown-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown) {
+  --dropdown-transform: translate(-50%, 0);
+  --dropdown-wscreen-left: 50%;
 }
-/* ------------ Text Button ------------ */
-.bs-button:where([data-text]:not([data-text="false"])) {
-  --btn-height: auto;
-  --btn-ink: var(--bs-ink-blue);
-  --btn-padding: 0;
-  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
-  --btn-text-size: var(--bs-text-md);
-  --btn-weight: 400;
-  background-color: transparent;
-  cursor: pointer;
-  line-height: 150%;
+/* Overrides mobile style when not min-width 752 */
+.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-button:where([data-text]:not([data-text="false"])):hover {
-  --btn-ink: var(--bs-blue-base);
-  background-color: transparent;
-  text-decoration: underline;
+.bs-dropdown:where([data-no-mobile="true"]) > :where(header) {
+  display: none;
 }
-.bs-button:where([data-text]:not([data-text="false"])):has(svg):hover {
-  text-decoration: none;
+@media (min-width: 752px) {
+  .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;
+  }
 }
-.bs-button:where([data-text]:not([data-text="false"])):active {
-  box-shadow: none;
-  transform: none;
+/* 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;
 }
-/* ------------ Button Sizes, Media-based Text Sizing -------------- */
-/* Std button: Mobile text size, DT text size */
-.bs-button {
-  --btn-text-size: 1rem;
+.bs-dropdown-options:focus-visible {
+  outline: none;
 }
-@media (min-width: 1166px) {
-  .bs-button {
-    --btn-text-size: 1.125rem;
+/* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
+@media (min-width: 752px) {
+  /* 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;
   }
 }
-.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);
+/* 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;
 }
-/* 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);
+/* Variant: 2-col */
+.bs-dropdown-options :where(li[data-variant~="2-col"]) {
+  grid-template-columns: min-content 1fr;
 }
-.bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-base);
+/* Variant: 3-col */
+.bs-dropdown-options :where(li[data-variant~="3-col"]) {
+  grid-template-columns: min-content min-content 1fr;
+}
+/* Variant: description */
+.bs-dropdown-options :where(li:not([data-variant*="-col"])[data-variant~="description"] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
+  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);
+  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);
 }
-/* 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);
+/* 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-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
-  --btn-text-size: var(--bs-text-xs);
-  --btn-weight: 600;
+/* 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);
 }
-/* ------------ Disabled Styling ------------ */
-:where(button:disabled),
-.bs-button:where(:disabled),
-.bs-button:where([aria-disabled="true"]) /* for links as buttons */ {
-  pointer-events: 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-button:where(:disabled),
-.bs-button:where([aria-disabled="true"]) {
-  --btn-ink: var(--bs-ink-disabled);
-  --btn-main: var(--bs-bg-disabled);
+/* 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-button:where([data-ghost]:not([data-ghost="false"])):disabled,
-.bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
-  box-shadow: inset 0 0 0 1px var(--bs-gray-400);
+/* 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);
 }
-.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;
+/* Multi-select divider */
+.bs-dropdown-options :where(li[role="separator"]) {
+  cursor: default;
+  padding-block: 0.125rem;
+  padding-right: 1.375rem;
 }
-/* ------------ links as buttons ------------ */
-a.bs-button {
-  align-items: center;
-  display: inline-flex;
-  outline: none;
-  vertical-align: middle;
+/* Multi-select divider line */
+.bs-dropdown-options :where(hr) {
+  background-color: var(--bs-navy-light);
+  height: .0625rem;
+  margin-block: 0;
+  margin-inline: 0;
 }
-.bs-circle-button {
-  --btn-main: var(--bs-blue-base);
-  --btn-secondary: var(--bs-blue-medium);
-  --btn-highlight: var(--bs-blue-lightest);
-  --btn-border-color: transparent;
-  --btn-border-radius: 50%;
-  --btn-icon-bg-color: var(--btn-main);
-  --btn-icon-padding: .75rem;
-  --btn-icon-size: 1.5rem;
-  --btn-icon-stroke-color: var(--bs-white);
-  --btn-text-color: var(--bs-ink-base);
-  --btn-text-size: var(--bs-text-md);
-  align-items: center;
+/* Disable hover styles */
+.bs-dropdown-options :where(li[data-no-hover]:hover) {
   background-color: transparent;
-  border-radius: var(--btn-border-radius);
-  color: var(--btn-text-color);
+  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;
-  display: inline-flex;
-  font-size: var(--btn-text-size);
-  gap: .5rem;
-  outline: none;
-  position: relative;
-  vertical-align: middle;
+  font-size: 1rem;
+  font-weight: 400;
 }
-a.bs-circle-button {
-  align-items: center;
-  display: inline-flex;
-  outline: none;
-  text-decoration: none;
+/* 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);
 }
-.bs-circle-button :where(.bs-circle-button-icon)::before {
-  border-color: var(--btn-border-color);
-  border-radius: var(--btn-border-radius);
-  border-style: solid;
-  border-width: 0.125rem;
-  height: calc(100% + 0.5rem);
-  inset: -0.25rem;
-  position: absolute;
-  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
-  width: calc(100% + 0.5rem);
+/* 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-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;
+/* Overrides mobile style when not min-width 752 */
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li) {
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
 }
-.bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
-  --icon-size: var(--btn-icon-size);
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[role="separator"]) {
+  padding-right: 0.625rem;
 }
-/* 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-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
+  padding-left: 0.625rem;
 }
-/* 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-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
+  padding-left: 0.5rem;
 }
-/* Ghost Buttons */
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
-  --btn-icon-stroke-color: var(--btn-main);
-  --btn-light: var(--bs-blue-10);
-  --btn-secondary: var(--bs-blue-10);
+@media (min-width: 752px)  {
+  .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;
+  }
 }
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) :where(.bs-circle-button-icon) {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px transparent;
-  color: var(--btn-icon-stroke-color);
+:where(label, legend),
+label:where(.bs-label) {
+  display: inline-block;
+  width: 100%;
 }
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) :where(.bs-circle-button-icon)::before {
-  border-radius: 50%;
+.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);
 }
-/* Active, Hover, Focus states */
-.bs-circle-button:active, .bs-circle-button:hover {
-  --btn-icon-bg-color: var(--btn-secondary);
+/* 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));
 }
-.bs-circle-button:active :where(.bs-circle-button-icon) {
-  transform: scale(0.97);
-  transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
+/* 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-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
-.bs-circle-button:where([data-direction="right"]):hover::before {
-  transform: translateX(.25rem);
+/* Generally applicable (all input types) */
+:where([data-required]:not([data-required="false"])) {
+  color: var(--bs-ink-red);
+  font-weight: var(--bs-font-bold, 600);
 }
-.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);
+:where([data-disabled]:not([data-disabled="false"]), [data-disabled]:not([data-disabled="false"]) [data-required]:not([data-required="false"])) {
+  color: var(--bs-gray-400);
 }
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover :where(.bs-circle-button-icon) {
-  background-color: var(--btn-light);
+:where(.box) :is(input, textarea, select):where(:focus-visible),
+:where(.box) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
+  --offset-color: var(--bs-bg-medium);
 }
-.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):active {
-  box-shadow:
-    inset 0 0 0 1px var(--btn-main),
-    inset 0px 0px 4px 1px var(--btn-highlight);
+:where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible),
+:where(.box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
+  --offset-color: var(--bs-bg-invert-base);
 }
-.bs-circle-button:where(:focus-visible) {
-  --btn-border-color: var(--btn-main);
+/* Errors and Messages */
+:is(input, select, textarea):where([data-error]:not([data-error="false"])),
+:is(.bs-input, .bs-select, .bs-textarea):where([data-error]:not([data-error="false"])) {
+  --input-border: var(--bs-ink-red);
+}
+/* Fieldset */
+:where(fieldset) {
+  border: none;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+}
+:where(fieldset legend) {
+  margin-bottom: 0.25rem;
+  padding: 0;
 }
-.bs-circle-button:where(:focus-visible) :where(.bs-circle-button-icon)::before {
-  content: '';
+: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;
 }
-/* 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;
+/*
+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-violet-medium));
+  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);
 }
-.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
-  background-color: var(--bs-bg-disabled);
+input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+textarea,
+select {
+  width: 100%;
 }
-/* Button Size */
-.bs-circle-button:where([data-size^='sm']) {
-  --btn-icon-padding: .375rem;
-  --btn-icon-size: .75rem;
-  --btn-text-size: var(--bs-text-sm);
+input:where([type='text'], [type='email'], [type='url']),
+select,
+.bs-input:where([type='text'], [type='email'], [type='url']),
+.bs-select {
+  text-overflow: ellipsis;
 }
-.bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
-  --btn-icon-padding: .3125rem;
-  --btn-icon-size: .625rem;
-  --btn-text-size: var(--bs-text-base);
+.bs-textarea,
+textarea {
+  height: auto;
+  padding-block: 0.5rem;
+  resize: vertical;
 }
-.bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
-  --btn-icon-padding: .25rem;
-  --btn-icon-size: .5rem;
-  --btn-text-size: var(--bs-text-sm);
+:is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
+  color: var(--input-placeholder, var(--bs-violet-lightest));
 }
-/* Parent */
-.bs-dropdown-parent {
-  display: inline-block;
-  position: relative;
+:is(input, textarea, select)::placeholder,
+:is(.bs-input, .bs-select, .bs-textarea)::placeholder {
+  color: var(--input-placeholder, var(--bs-violet-lightest));
 }
-/* Backdrop for mobile bottom sheet */
-.bs-dropdown-backdrop {
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
-  background: rgba(29, 30, 72, 0.05);
-  bottom: 0;
-  content: "";
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 998;
+:is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::-moz-placeholder {
+  opacity: 0;
 }
-/* Content */
-.bs-dropdown {
-  --dropdown-bottom: 0;
-  --dropdown-left: 0;
-  --dropdown-right: auto;
-  --dropdown-top: auto;
-  --dropdown-width: 100%;
-  --dropdown-transform: translate(0, 100%);
-
-  background-color: var(--bs-bg-base-elevated);
-  border-radius: 4px;
-  bottom: var(--dropdown-bottom);
-  box-shadow: var(--bs-shadow-contentMedium);
-  left: var(--dropdown-left);
-  line-height: 1.5rem;
-  margin: 0;
+:is(input, textarea, select):where(:focus-visible)::placeholder,
+:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
   opacity: 0;
-  overflow-y: auto;
-  position: fixed;
-  right: var(--dropdown-right);
-  top: var(--dropdown-top);
-  transform-origin: center bottom;
-  transform: var(--dropdown-transform);
-  transition-duration: 75ms;
-  transition-property: opacity, transform;
-  transition-timing-function: ease-in-out;
-  width: var(--dropdown-width);
-  z-index: 999;
 }
-/* Mobile Header */
-.bs-dropdown > :where(header) {
-  border-bottom: 1px solid var(--bs-border-base);
-  display: flex;
-  justify-content: space-between;
-  padding: 1.5rem;
+/* 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) {
+  --input-border: var(--bs-blue-base);
+  outline-style: none;
+  outline-width: 0px;
 }
-.bs-dropdown > :where(header) :where(h3) {
-  font-size: 1.25rem;
+/* HOVER state */
+:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:hover),
+:is(.bs-input, .bs-select, .bs-textarea):where(:hover) {
+  --input-bg: var(--bs-bg-input-hover);
 }
-.bs-dropdown > :where(header) :where(p) {
-  font-size: 1rem;
+/* 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-dropdown > :where(header) :where(button) {
-  cursor: pointer;
-  height: 1rem;
-  width: 1rem;
+/* 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);
 }
-/* data-shown */
-.bs-dropdown:where([data-shown]:not([data-shown="false"])) {
-  --dropdown-transform: translate(0, 0);
+/*
+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;
 }
-/* Sizing */
-.bs-dropdown:where([data-width="sm"]) {
-  --dropdown-wscreen-width: 10rem;
+: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;
 }
-.bs-dropdown:where([data-width="md"]),
-.bs-dropdown:where(:not([data-width])) {
-  --dropdown-wscreen-width: 20rem;
+: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-dropdown:where([data-width="lg"]) {
-  --dropdown-wscreen-width: 40rem;
+/* 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);
 }
-.bs-dropdown:where([data-width="content"]) {
-  --dropdown-wscreen-width: max-content;
+.dark select,
+.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");
 }
-.bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown),
-.bs-dropdown-parent:where([data-width="anchor"]) :where(.bs-dropdown) {
-  --dropdown-wscreen-width: 100%;
+.dark select:disabled,
+.dark .bs-select: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");
 }
-/* data-top */
-.bs-dropdown:where([data-top]:not([data-top="false"])) {
-  --dropdown-wscreen-bottom: calc(100% + 0.5rem);
-  --dropdown-wscreen-top: auto;
+/* 0 0 1 for width to allow e.g. tailwind override */
+:is(div, *):where(.bs-input-addon) {
+  width: 100%;
 }
-/* data-center */
-.bs-dropdown-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown) {
-  --dropdown-transform: translate(-50%, 0);
-  --dropdown-wscreen-left: 50%;
+.bs-input-addon {
+  --input-border: var(--bs-violet-300);
+  align-items: center;
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-radius: .25rem;
+  color: var(--bs-ink-base);
+  display: flex;
+  height: var(--input-addon-height, 2.5rem);
+  overflow: hidden;
+  padding: 0;
+  pointer-events: none;
+  position: relative;
 }
-/* Overrides mobile style when not min-width 752 */
-.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-input-addon * {
+  background-color: transparent;
+}
+/**
+Implement an outer 'border' via pseudo-element instead of
+on main element to avoid content shifting, double-stroke effect,
+and issues with box-sizing
+*/
+.bs-input-addon::after,
+.bs-input-addon::before,
+.bs-input-addon ::after,
+.bs-input-addon ::before {
+  pointer-events: none;
+}
+.bs-input-addon::after,
+.bs-input-addon::before {
+  content: '';
+  height: 100%;
+  left: 0;
   position: absolute;
+  top: 0;
+  width: 100%;
 }
-.bs-dropdown:where([data-no-mobile="true"]) > :where(header) {
-  display: none;
+.bs-input-addon::after {
+  border-radius: .25rem;
+  border: 1px solid var(--input-border);
 }
-@media (min-width: 752px) {
-  .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;
-  }
+.bs-input-addon :where(.bs-input-addon)::after {
+  border: 1px solid var(--input-addon-nested-border);
 }
-/* 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;
+.bs-input-addon > * {
+  flex-grow: 0;
+  flex-shrink: 0;
   position: relative;
 }
-.bs-dropdown-options:focus-visible {
-  outline: none;
+.bs-input-addon > :where([data-part="main"], .bs-input-addon, bs-input, .bs-input),
+.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input, .bs-input) {
+  flex-grow: 1;
+  flex-shrink: 1;
 }
-/* Stabilize scrollbar gutter for Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=764076) */
-@media (min-width: 752px) {
-  /* 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;
-  }
+.bs-input-addon > :where([data-part="main"]) > :where(input, select),
+.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"])) > :where(input, select) {
+  width: 100%;
 }
-/* Option list item */
-.bs-dropdown-options :where(li) {
+.bs-input-addon > *:where(:not(.bs-input-addon)) {
   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;
-}
-/* Variant: 2-col */
-.bs-dropdown-options :where(li[data-variant~="2-col"]) {
-  grid-template-columns: min-content 1fr;
+  border-width: 0px;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: auto;
 }
-/* Variant: 3-col */
-.bs-dropdown-options :where(li[data-variant~="3-col"]) {
-  grid-template-columns: min-content min-content 1fr;
+/* Remove (hide) children's borders, outlines */
+.bs-input-addon > *,
+.bs-input-addon :where(input, select),
+.bs-input-addon :is(bs-input, bs-select) :where(input, select),
+.bs-input-addon :is(input, select):where(.bs-input, .bs-select),
+.bs-input-addon :where(.bs-input-addon) {
+  --input-border: transparent;
+  --input-border-width: 0px;
 }
-/* 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;
+.bs-input-addon {
+  --input-addon-nested-border: transparent;
 }
-/* Variant: 2-col description */
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
-  grid-column-start: 2;
+.bs-input-addon :where(:focus-within) :where(input, select, button),
+.bs-input-addon :where(:focus-within) :is(bs-input, bs-select) :where(input, select),
+.bs-input-addon :where(:focus-within) :is(input, select, button):where(.bs-input, .bs-select),
+.bs-input-addon :where(input, select, button):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
+  --input-border: transparent;
+  box-shadow: none;
+  outline: none;
 }
-/* Variant: 3-col description */
-.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
-  grid-column-start: 3;
+/* -------- Inner-bordered styles -------- */
+/** Inner borders should be straight; shown only if variant: "inner-bordered" */
+.bs-input-addon:where([data-variant="inner-bordered"]) {
+  --input-addon-nested-border: var(--bs-violet-lightest);
 }
-/* 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);
-  border-left: 4px solid var(--bs-blue-base);
-  color: var(--bs-blue-base);
-  outline: none;
+.bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
+.bs-input-addon > :where(:not(:last-child, :focus-within, [data-part="right"]))::after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
-/* 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-red-500);
-  color: var(--bs-red-500);
+.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within, [data-part="left"])),
+.bs-input-addon > :where(:not(:first-child, :focus-within, [data-part="left"]))::after {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
-/* 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-blue-base);
+.bs-input-addon:where([data-variant="inner-bordered"]) > :where(:not(:focus, :focus-within))::after {
+  border-left-width: 0px;
+  border-right-width: 1px;
+  border-right-color: var(--input-addon-nested-border);
 }
-/* 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-red-500);
+.bs-input-addon:where([data-variant="inner-bordered"]) > :where(:not(.bs-input-addon, :focus, :focus-within))::after {
+  content: '';
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
-/* 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-input-addon:where([data-variant="inner-bordered"]) > :where(.bs-input-addon)::after {
+  border-radius: 0px;
 }
-/* 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;
+/* -------- Auto Padding for Children, Auto Sizing Icons -------- */
+/* Opt in for now, for backwards compatibility */
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > *:where(:not(.bs-input-addon)) {
+  padding-inline: 0;
 }
-/* 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);
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where([data-part="left"]:not(.bs-input-addon)),
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where(:first-child:not(.bs-input-addon)) {
+  padding-inline: 0.75rem 0.5rem;
 }
-/* Multi-select divider */
-.bs-dropdown-options :where(li[role="separator"]) {
-  cursor: default;
-  padding-block: 0.125rem;
-  padding-right: 1.375rem;
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where([data-part="right"]:not(.bs-input-addon)),
+.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where(:last-child:not(.bs-input-addon)) {
+  padding-inline: 0.5rem 0.75rem;
 }
-/* Multi-select divider line */
-.bs-dropdown-options :where(hr) {
-  background-color: var(--bs-navy-light);
-  height: .0625rem;
-  margin-block: 0;
-  margin-inline: 0;
+.bs-input-addon:where([data-autopad="true"][data-multifocus]) > *:where(:not(.bs-input-addon)) {
+  padding-inline: 0.75rem;
 }
-/* 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;
+.bs-input-addon:where([data-autosize-icons="true"], [data-variant="combobox"]) > :where(:not([data-autowidth], [data-part="main"], .bs-input-addon)) {
+  height: 100%;
+  min-width: -moz-min-content;
+  min-width: min-content;
 }
-/* Style label to look like other options */
-.bs-dropdown-options :where(li label) {
-  cursor: pointer;
-  font-size: 1rem;
-  font-weight: 400;
+.bs-input-addon:where([data-autosize-icons="true"], [data-variant="combobox"]) :where(svg) {
+  height: auto;
+  max-height: 100%;
+  width: 1rem;
 }
-/* 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);
+/* -------- Hover styles -------- */
+.bs-input-addon:hover {
+  --input-bg: var(--bs-bg-input-hover);
 }
-/* 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);
+/* -------- Focus styles -------- */
+.bs-input-addon {
+  --focus-border: var(--bs-blue-base);
 }
-/* Overrides mobile style when not min-width 752 */
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li) {
-  padding-left: 0.5rem;
-  padding-right: 0.75rem;
+.bs-input-addon:where(:not([data-multifocus]):focus-within),
+.bs-input-addon:where([data-multifocus="false"]:focus-within),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
+  --input-border: var(--focus-border);
+  position: relative;
+  z-index: 1;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[role="separator"]) {
-  padding-right: 0.625rem;
+.bs-input-addon :where(.bs-input-addon:focus-within) {
+  --input-addon-nested-border: var(--focus-border);
+  z-index: 1;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-active]) {
-  padding-left: 0.625rem;
+.bs-input-addon :where(.bs-input-addon:focus-within)::after {
+  z-index: 1;
 }
-.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options:focus-visible) :where(li[data-selected][data-active]) {
-  padding-left: 0.5rem;
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :is(input, select, button):where(:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(input, select):where(.bs-input, .bs-select):where(:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(bs-input, bs-select) :where(input:focus, select:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus, button:focus) {
+  border-radius: .25rem;
+  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
+  z-index: 1;
 }
-@media (min-width: 752px)  {
-  .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;
-  }
+.bs-input-addon:where(:not([data-multifocus]):focus-within)::after,
+.bs-input-addon:where([data-multifocus="false"]:focus-within)::after {
+  border-width: 1px;
+  border-radius: .25rem;
 }
-/*
-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) {
-  flex-shrink: 0;
-  position: relative;
+.bs-input-addon:where(:focus-within) :where(:not(:focus, :focus-within))::after,
+.bs-input-addon:where(:focus-within) :where(:not(:focus, :focus-within)) {
+  border-color: transparent;
 }
-.bs-filter-button {
-  align-items: center;
-  color: var(--filterbtn-color, var(--bs-ink-blue));
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--filterbtn-text-size, var(--bs-text-base));
-  font-weight: var(--filterbtn-weight, 400);
-  height: var(--filterbtn-height, 1.5rem);
-  line-height: 1.5;
-  transition: outline-color 100ms ease-in-out;
-  width: -moz-max-content;
-  width: max-content;
+/* Straight-lined ::before border to fill the gap below the rounded ::after border */
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(:focus-within)::before {
+  border-bottom-width: 1px;
+  border-color: var(--bs-violet-300);
+  border-radius: 0;
+  border-top-width: 1px;
+  z-index: 1;
 }
-.bs-filter-button::after {
-  border: solid var(--filterbtn-focus-color, transparent) 2px;
-  border-radius: 0.25rem;
-  content: '';
-  display: block;
-  height: 100%;
-  position: absolute;
-  transform: scale(1.25);
-  width: 100%;
+/* -------- Disabled styles -------- */
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])),
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
+  --input-bg: var(--bs-bg-disabled);
+  --input-border: var(--bs-ink-disabled);
+  --input-addon-nested-border: var(--bs-ink-disabled);
+  color: var(--bs-ink-disabled);
 }
-.bs-filter-button :where(.bs-icon),
-.bs-filter-button :where(span:has(svg:only-child)) {
-  display: block;
-  height: var(--filterbtn-caret-size, 1rem);
-  line-height: 1;
-  transform: var(--filterbtn-caret-transform, rotate(0deg));
-  transform-origin: center;
-  transition: var(--bs-trans-rotate180);
-  width: var(--filterbtn-caret-size, 1rem);
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
+  pointer-events: none;
 }
-.bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
-
-  --filterbtn-text-size: var(--bs-text-sm);
-  --filterbtn-caret-size: .75rem;
+/* -------- Error styles -------- */
+.bs-input-addon:where([data-error]:not([data-error="false"])),
+.bs-input-addon:where([data-error]:not([data-error="false"])) :where(.bs-input-addon) {
+  --focus-border: var(--bs-ink-red);
+  --input-border: var(--bs-ink-red);
 }
-.bs-filter-button:where([data-size="sm"]) {
-  --filterbtn-text-size: var(--bs-text-sm);
+.bs-input-addon:where([data-error]:not([data-error="false"]),[data-disabled]:not([data-disabled="false"])) > *::before,
+.bs-input-addon:where(.bs-input-addon[data-error]:not([data-error="false"]) .bs-input-addon, .bs-input-addon[data-disabled]:not([data-disabled="false"]) .bs-input-addon) > *::before {
+  border-color: var(--input-border);
 }
-.bs-filter-button:where([data-size="xs"]) {
-  --filterbtn-text-size: var(--bs-text-xs);
-  --filterbtn-weight: 600;
+/* -------- Label margin -------- */
+:where(label, .bs-label, bs-label) + .bs-input-addon {
+  margin-top: 0.25rem;
 }
-/* Hover state */
-.bs-filter-button:hover {
-  --filterbtn-color: var(--bs-blue-base);
+/* ----------------- Variant: Combobox Input ----------------- */
+/*
+Combobox variant also shares styles with data-autopad="true" &
+data-autosize-icons="true" - see above
+*/
+.bs-input-addon:where([data-variant="combobox"]) {
+  --input-addon-nested-border: transparent;
 }
-/* Focus state */
-.bs-filter-button:where(:focus-visible) {
-  outline: none;
-  --filterbtn-focus-color: var(--bs-blue-base);
+.bs-input-addon:where([data-variant="combobox"]) :where(button svg) {
+  transform: var(--icon-btn-transform, none);
+  transition: var(--bs-trans-rotate180);
 }
-/* Filter open state */
-.bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
-  --filterbtn-caret-transform: rotate(180deg);
+.bs-input-addon:where([data-variant="combobox"]) :where(button[data-open="true"]) {
+  --icon-btn-transform: rotate(180deg);
 }
-/* Badge non-standard color */
-.bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-ink-blue);
+.bs-input-addon:where([data-variant="combobox"][data-disabled="true"]) > :where(button) {
+  opacity: 0;
 }
-:where(.dark) .bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-blue-medium);
+.bs-input-addon:where([data-variant="combobox"]) > :where(button) {
+  border-radius: .25rem;
+  outline: 1px solid transparent;
 }
-.bs-filter-button:hover :where(.bs-badge) {
-  --badge-bg: var(--filterbtn-color);
+.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible:not([data-open])) {
+  outline: 1px solid var(--focus-border);
 }
-/* Disabled state */
-.bs-filter-button:where(:disabled) {
-  --filterbtn-color: var(--bs-ink-disabled);
-  cursor: default;
+.bs-input-phone :where(.bs-input-addon) > button {
+  align-items: center;
+  -moz-column-gap: .5rem;
+       column-gap: .5rem;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1.25rem auto .75rem;
+  min-width: 6rem;
+  padding: 0 1rem;
 }
-.bs-filter-button:where(:disabled) :where(.bs-badge) {
-  --badge-bg: var(--bs-bg-disabled);
-  --badge-text: var(--bs-ink-disabled);
+.bs-input-phone ul:where(.bs-dropdown-options) {
+  min-width: 7.5rem;
 }
-:where(label, legend),
-label:where(.bs-label) {
+:where(.bs-input-search) {
   display: inline-block;
   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));
+.bs-input-search :where(.bs-icon svg) {
+  box-sizing: content-box;
 }
-/* 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-input-search :where([data-component="bs-icon-search"]) {
+  --icon-size: var(--search-icon-size, 1.75rem);
+  padding: var(--search-icon-padding, 0 0 0 .75rem);
 }
-/* Generally applicable (all input types) */
-:where([data-required]:not([data-required="false"])) {
-  color: var(--bs-ink-red);
-  font-weight: var(--bs-font-bold, 600);
+/* Clear Button */
+.bs-input-search button {
+  align-items: center;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  transition: transform 100ms ease-in-out;
 }
-:where([data-disabled]:not([data-disabled="false"]), [data-disabled]:not([data-disabled="false"]) [data-required]:not([data-required="false"])) {
-  color: var(--bs-gray-400);
+.bs-input-search button:where(:active) {
+  transform: scale(0.97);
+  transform-origin: center;
+  box-shadow: inset 0px 0px 4px 1px var(--bs-blue-base);
 }
-:where(.box) :is(input, textarea, select):where(:focus-visible),
-:where(.box) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-medium);
+.bs-input-search button:where(:focus) {
+  border-radius: .25rem;
+  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
+  z-index: 1;
 }
-:where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible),
-:where(.box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-invert-base);
+/* Filter variant */
+.bs-input-search:where([data-variant="filter"]) {
+  --focus-border: transparent;
+  --input-border: transparent;
+  --input-addon-height: 1.5rem;
+  --input-caret: var(--bs-blue-base);
+  --input-padding-block: 0 0.125rem;
+  --input-padding-inline: 0.5rem;
+  --input-placeholder: var(--bs-ink-light);
+  --input-text-size: var(--bs-text-sm);
+  --search-icon-size: 1rem;
+  --search-icon-padding: 0;
 }
-/* Errors and Messages */
-:is(input, select, textarea):where([data-error]:not([data-error="false"])),
-:is(.bs-input, .bs-select, .bs-textarea):where([data-error]:not([data-error="false"])) {
-  --input-border: var(--bs-ink-red);
+/* Filter variant: cancels out base hover state styles */
+.bs-input-addon:where([data-variant="filter"]):hover {
+  --input-bg: var(--bs-bg-base);
 }
-/* Fieldset */
-:where(fieldset) {
-  border: none;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0;
+/* -------- Disabled styles -------- */
+.bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
+.bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {
+  --input-bg: var(--bs-bg-base);
+  --input-border: transparent;
 }
-:where(fieldset legend) {
-  margin-bottom: 0.25rem;
-  padding: 0;
+.bs-field-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--bs-space-2);
+  padding: 0 0.75rem;
+  margin-top: 0.5rem;
 }
-:where(label + input, label > input):where(:not([type='checkbox'], [type='radio'])),
-:where(label + textarea, label > textarea),
-:where(label + select, label > select) {
+:where(textarea, bs-textarea) + .bs-field-details {
   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-violet-medium));
-  border-radius: 0.25rem;
-  border-style: solid;
-  border-width: var(--input-border-width, 1px);
-  caret-color: var(--input-caret, var(--bs-blue-base));
+.bs-field-details :where(.bs-character-count:first-child) {
+  margin-left: auto;
+}
+.bs-character-count {
   color: var(--bs-ink-base);
-  font-size: var(--input-text-size, var(--bs-text-base));
+  font-size: var(--bs-text-xs);
   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);
+  text-align: right;
+  white-space: nowrap;
 }
-input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-textarea,
-select {
-  width: 100%;
+:where(:disabled, [data-disabled="true"]) + .bs-character-count,
+:where(:disabled, [data-disabled="true"]) .bs-character-count,
+.bs-character-count:where([data-disabled="true"]) {
+  color: var(--bs-ink-disabled);
 }
-input:where([type='text'], [type='email'], [type='url']),
-select,
-.bs-input:where([type='text'], [type='email'], [type='url']),
-.bs-select {
-  text-overflow: ellipsis;
+.bs-character-count:where([data-error="true"]) {
+  color: var(--bs-ink-red);
 }
-.bs-textarea,
-textarea {
-  height: auto;
-  padding-block: 0.5rem;
-  resize: vertical;
+/* 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%;
 }
-:is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
-  color: var(--input-placeholder, var(--bs-violet-lightest));
+.bs-boolean:where([data-size='sm']) input {
+  width: var(--bs-text-xs);
+  height: var(--bs-text-xs);
 }
-:is(input, textarea, select)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea)::placeholder {
-  color: var(--input-placeholder, var(--bs-violet-lightest));
+.bs-boolean label {
+  font-size: var(--bs-text-base);
+  font-weight: 400;
+  line-height: 1.5;
+  width: auto;
 }
-:is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::-moz-placeholder {
-  opacity: 0;
+/* not using gap on .bs-boolean due to dead click zone */
+.bs-boolean label {
+  padding-inline-end: 0.5em;
 }
-:is(input, textarea, select):where(:focus-visible)::placeholder,
-:is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
-  opacity: 0;
+.bs-boolean input + label {
+  padding-inline: 0.5em 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) {
-  --input-border: var(--bs-blue-base);
-  outline-style: none;
-  outline-width: 0px;
+.bs-boolean:where([data-size='sm']),
+.bs-boolean:where([data-size='sm']) label {
+  font-size: var(--bs-text-xs);
 }
-/* HOVER state */
-:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:hover),
-:is(.bs-input, .bs-select, .bs-textarea):where(:hover) {
-  --input-bg: var(--bs-bg-input-hover);
+/* Checkbox & Radio Input */
+:where(input[type='checkbox'], input[type='radio']),
+:is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
+  --box-shadow: var(--bs-ink-base);
+
+  -webkit-appearance: none;
+
+     -moz-appearance: none;
+
+          appearance: none;
+  background-color: var(--bs-bg-base);
+  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
+  cursor: pointer;
+  display: grid;
+  height: 1rem;
+  margin: 0;
+  place-content: center;
+  position: relative;
+  width: 1rem;
 }
-/* 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);
+: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),
+    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;
 }
-/* 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);
+:where(input[type='checkbox']),
+:is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
+  border-radius: 0.125rem;
 }
-/*
-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;
+:where(input[type='radio']),
+.bs-boolean :where([type='radio']) {
+  border-radius: 50%;
 }
-/* chrome user agent styling was applying opacity: 0.7 */
-:where(select:disabled) {
-  opacity: 1;
+/* Checkbox's checkmark  */
+input:where([type='checkbox'])::before,
+:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
+  --filled-size: 1rem;
+  --check-fill-color: var(--bs-blue-base);
+
+  content: '';
+  border-radius: 0.125rem;
+  box-shadow: inset var(--filled-size) var(--filled-size) var(--check-fill-color);
+  height: var(--filled-size);
+  visibility: hidden;
+  width: var(--filled-size);
 }
-: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;
+input:where([type='checkbox'])::after,
+:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
+  border: solid var(--bs-white);
+  border-width: 0 0.125rem 0.125rem 0;
+  content: '';
+  height: 0.75em;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -60%) rotate(45deg);
+  visibility: hidden;
+  width: 0.375em;
 }
-: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;
+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-white);
+  height: 0.125rem;
+  transform: translate(-50%, -0.0625rem) rotate(0deg);
+  width: 0.625em;
 }
-/* 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);
+/* Radio's dot */
+input:where([type='radio'])::before,
+.bs-boolean :where([type="radio"])::before {
+  --filled-size: 1rem;
+  --radio-fill-color: var(--bs-blue-base);
+
+  background-color: var(--radio-fill-color);
+  border-radius: 50%;
+  box-sizing: content-box;
+  content: '';
+  height: var(--filled-size);
+  visibility: hidden;
+  width: var(--filled-size);
 }
-.dark select,
-.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");
+input:where([type='radio'])::after,
+.bs-boolean :where([type="radio"])::after {
+  --inner-size: 0.375rem;
+  --inner-fill-color: var(--bs-white);
+
+  background-color: var(--inner-fill-color);
+  border-radius: 50%;
+  box-sizing: content-box;
+  content: '';
+  height: var(--inner-size);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+  width: var(--inner-size);
 }
-.dark select:disabled,
-.dark .bs-select: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");
+/* 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;
+}
+.bs-boolean:where([data-size='sm']) input::before,
+.bs-checkbox:where([data-size="sm"])::before {
+  --filled-size: var(--bs-text-xs);
 }
-/* 0 0 1 for width to allow e.g. tailwind override */
-:is(div, *):where(.bs-input-addon) {
-  width: 100%;
+.bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
+.bs-checkbox:where([data-size="sm"])::after {
+  height: 0.5625rem;
+  width: 0.3125rem;
 }
-.bs-input-addon {
-  --input-border: var(--bs-violet-300);
-  align-items: center;
-  background-color: var(--input-bg, var(--bs-bg-base));
-  border-radius: .25rem;
-  color: var(--bs-ink-base);
-  display: flex;
-  height: var(--input-addon-height, 2.5rem);
-  overflow: hidden;
-  padding: 0;
-  pointer-events: none;
-  position: relative;
+.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
+.bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after  {
+  height: 0.125rem;
+  width: .75em;
 }
-.bs-input-addon * {
+.bs-boolean:where([data-size='sm']) input[type='radio']::after {
+  --inner-size: 0.25rem;
+}
+/* Disabled State */
+input:where([type='checkbox'], [type='radio']):disabled,
+.bs-boolean :where(input):disabled,
+.bs-checkbox:is([data-disabled="true"], :disabled) {
+  --box-shadow: var(--bs-bg-disabled);
   background-color: transparent;
+  cursor: default;
 }
-/**
-Implement an outer 'border' via pseudo-element instead of
-on main element to avoid content shifting, double-stroke effect,
-and issues with box-sizing
-*/
-.bs-input-addon::after,
-.bs-input-addon::before,
-.bs-input-addon ::after,
-.bs-input-addon ::before {
+.bs-checkbox:where([data-disabled="true"]:not(input)) {
   pointer-events: none;
 }
-.bs-input-addon::after,
-.bs-input-addon::before {
-  content: '';
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
+input:where([type='checkbox']):checked:disabled::before,
+input:where([type='checkbox']):indeterminate:disabled::before,
+.bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
+.bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before,
+.bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
+.bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
+  --check-fill-color: var(--bs-bg-disabled);
 }
-.bs-input-addon::after {
-  border-radius: .25rem;
-  border: 1px solid var(--input-border);
+input:where([type='radio']):checked:disabled::before,
+.bs-boolean :where(input[type="radio"]):checked:disabled::before {
+  --radio-fill-color: var(--bs-bg-disabled);
 }
-.bs-input-addon :where(.bs-input-addon)::after {
-  border: 1px solid var(--input-addon-nested-border);
+/* Error state */
+input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
+.bs-boolean :where(input[data-error="true"]),
+.bs-checkbox:where([data-error="true"]) {
+  --box-shadow: var(--bs-red-base);
+  --outline-color: var(--bs-red-base);
 }
-.bs-input-addon > * {
-  flex-grow: 0;
-  flex-shrink: 0;
+.bs-switch {
+  --box-shadow: var(--bs-ink-base);
+  --ball-background: var(--bs-white);
+  --ball-diameter: 1rem;
+  --inner-text-line-height: 1;
+  --inner-text-size: var(--bs-text-sm);
+  --inner-text-width: 1rem;
+  --inner-text-padding: 0.5rem;
+  --offset: 0.25rem;
+  --offset-double: .5rem;
+  --switch-background: var(--bs-gray-400);
+  --switch-height: 1.5rem;
+  --switch-width: 2.5rem;
+
+  border: none;
+  border-radius: 100vw;
+  cursor: pointer;
+  height: var(--switch-height);
   position: relative;
 }
-.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input, .bs-input) {
-  flex-grow: 1;
-  flex-shrink: 1;
+.bs-switch:where([data-size="sm"]) {
+  --ball-diameter: .625rem;
+  --inner-text-line-height: 1.6666;
+  --inner-text-size: var(--bs-text-xs);
+  --inner-text-width: .75rem;
+  --inner-text-padding: 0.375rem;
+  --offset: 0.1875rem;
+  --offset-double: .375rem;
+  --switch-height: 1rem;
+  --switch-width: 1.875rem;
 }
-.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"])) > :where(input, select) {
+.bs-switch input,
+.bs-switch:where([data-size="sm"]) input {
+  cursor: pointer;
+  height: 100%;
+  opacity: 0;
+  position: absolute;
   width: 100%;
 }
-.bs-input-addon > *:where(:not(.bs-input-addon)) {
-  border-width: 0px;
-  display: flex;
+.bs-switch span {
+  align-items: center;
+  background-color: var(--switch-background);
+  border-radius: 100vw;
+  display: inline-block;
+  font-size: var(--inner-text-size);
   height: 100%;
-  overflow: hidden;
-  pointer-events: auto;
-}
-/* Remove (hide) children's borders, outlines */
-.bs-input-addon > *,
-.bs-input-addon :where(input, select),
-.bs-input-addon :is(bs-input, bs-select) :where(input, select),
-.bs-input-addon :is(input, select):where(.bs-input, .bs-select),
-.bs-input-addon :where(.bs-input-addon) {
-  --input-border: transparent;
-  --input-border-width: 0px;
-}
-.bs-input-addon {
-  --input-addon-nested-border: transparent;
-}
-.bs-input-addon :where(:focus-within) :where(input, select, button),
-.bs-input-addon :where(:focus-within) :is(bs-input, bs-select) :where(input, select),
-.bs-input-addon :where(:focus-within) :is(input, select, button):where(.bs-input, .bs-select),
-.bs-input-addon :where(input, select, button):where(:focus, :focus-within, :focus-visible),
-.bs-input-addon :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
-.bs-input-addon :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
-  --input-border: transparent;
-  box-shadow: none;
-  outline: none;
+  padding: 0 var(--inner-text-padding);
+  pointer-events: none;
+  position: relative;
+  transition: 250ms;
+  width: var(--switch-width);
 }
-/* -------- Inner-bordered styles -------- */
-/** Inner borders should be straight; shown only if variant: "inner-bordered" */
-.bs-input-addon:where([data-variant="inner-bordered"]) {
-  --input-addon-nested-border: var(--bs-violet-lightest);
+.bs-switch :where(input:checked) ~ :where(span),
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span) {
+  --switch-background: var(--bs-blue-base);
 }
-.bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within)),
-.bs-input-addon > :where(:not(:last-child, :focus-within))::after {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+/* Toggle "ball" */
+.bs-switch :where(span)::before {
+  background-color: var(--ball-background);
+  border-radius: 50%;
+  box-sizing: border-box;
+  content: '';
+  height: var(--ball-diameter);
+  left: var(--offset);
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  transition: inherit;
+  width: var(--ball-diameter);
+  z-index: 2;
 }
-.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within)),
-.bs-input-addon > :where(:not(:first-child, :focus-within))::after {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.bs-switch :where(input:checked) ~ :where(span)::before,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span)::before {
+  transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
 }
-.bs-input-addon:where([data-variant="inner-bordered"]) > :where(:not(:focus, :focus-within))::after {
-  border-left-width: 0px;
-  border-right-width: 1px;
-  border-right-color: var(--input-addon-nested-border);
+.bs-switch :where(input:checked) ~ :where(span[data-inner-on-label][data-inner-off-label])::before,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span[data-inner-on-label][data-inner-off-label])::before {
+  transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
 }
-.bs-input-addon:where([data-variant="inner-bordered"]) > :where(:not(.bs-input-addon, :focus, :focus-within))::after {
-  content: '';
+/* Inner "on/off" text */
+.bs-switch :where(span)::after {
+  align-items: center;
+  color: var(--ball-background);
+  content: var(--inner-label-text);
+  display: flex;
   height: 100%;
+  justify-content: var(--inner-label-position, flex-start);
   left: 0;
+  line-height: var(--inner-text-line-height);
+  padding: var(--inner-text-padding);
   position: absolute;
+  text-transform: capitalize;
   top: 0;
   width: 100%;
 }
-.bs-input-addon:where([data-variant="inner-bordered"]) > :where(.bs-input-addon)::after {
-  border-radius: 0px;
-}
-/* -------- Hover styles -------- */
-.bs-input-addon:hover {
-  --input-bg: var(--bs-bg-input-hover);
-}
-/* -------- Focus styles -------- */
-.bs-input-addon {
-  --focus-border: var(--bs-blue-base);
-}
-.bs-input-addon:where(:not([data-multifocus]):focus-within),
-.bs-input-addon:where([data-multifocus="false"]:focus-within),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(input, select):where(:focus, :focus-within, :focus-visible),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
-  --input-border: var(--focus-border);
-  position: relative;
-  z-index: 1;
-}
-.bs-input-addon :where(.bs-input-addon:focus-within) {
-  --input-addon-nested-border: var(--focus-border);
-  z-index: 1;
+.bs-switch :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 3.5rem;
 }
-.bs-input-addon :where(.bs-input-addon:focus-within)::after {
-  z-index: 1;
+.bs-switch:where([data-size="sm"]) :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 2.625rem;
 }
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :is(input, select, button):where(:focus),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(input, select):where(.bs-input, .bs-select):where(:focus),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(bs-input, bs-select) :where(input:focus, select:focus),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus, button:focus) {
-  border-radius: .25rem;
-  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
-  z-index: 1;
+.bs-switch :where(input:not(:checked)) ~ :where([data-inner-on-label][data-inner-off-label])::after,
+.bs-switch:where([aria-pressed="false"]) :where([data-inner-on-label][data-inner-off-label])::after  {
+  --inner-label-position: flex-end;
+  --inner-label-text: attr(data-inner-off-label);
 }
-.bs-input-addon:where(:not([data-multifocus]):focus-within)::after,
-.bs-input-addon:where([data-multifocus="false"]:focus-within)::after {
-  border-width: 1px;
-  border-radius: .25rem;
+.bs-switch :where(input:checked) ~ :where([data-inner-on-label][data-inner-off-label])::after,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where([data-inner-on-label][data-inner-off-label])::after {
+  --inner-label-text: attr(data-inner-on-label);
 }
-.bs-input-addon:where(:focus-within) :where(:not(:focus, :focus-within))::after,
-.bs-input-addon:where(:focus-within) :where(:not(:focus, :focus-within)) {
-  border-color: transparent;
+/* Focus state */
+.bs-switch :where(input:focus-visible) + :where(span),
+.bs-switch:where(:focus-visible) :where(button span) {
+  box-shadow: 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;
 }
-/* Straight-lined ::before border to fill the gap below the rounded ::after border */
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(:focus-within)::before {
-  border-bottom-width: 1px;
-  border-color: var(--bs-violet-300);
-  border-radius: 0;
-  border-top-width: 1px;
-  z-index: 1;
+: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);
 }
-/* -------- Disabled styles -------- */
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"])),
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
-  --input-bg: var(--bs-bg-disabled);
-  --input-border: var(--bs-ink-disabled);
-  --input-addon-nested-border: var(--bs-ink-disabled);
-  color: var(--bs-ink-disabled);
+: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-base);
 }
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
-  pointer-events: none;
+/* 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);
 }
-/* -------- Error styles -------- */
-.bs-input-addon:where([data-error]:not([data-error="false"])),
-.bs-input-addon:where([data-error]:not([data-error="false"])) :where(.bs-input-addon) {
-  --focus-border: var(--bs-ink-red);
-  --input-border: var(--bs-ink-red);
+.bs-switch input:where(:disabled) {
+  cursor: default;
 }
-.bs-input-addon:where([data-error]:not([data-error="false"]),[data-disabled]:not([data-disabled="false"])) > *::before,
-.bs-input-addon:where(.bs-input-addon[data-error]:not([data-error="false"]) .bs-input-addon, .bs-input-addon[data-disabled]:not([data-disabled="false"]) .bs-input-addon) > *::before {
-  border-color: var(--input-border);
+.bs-hint {
+  --hint-color: var(--bs-ink-light);
+  min-width: 0;
+  color: var(--hint-color);
+  font-size: var(--bs-text-xs);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  overflow-wrap: break-word;
 }
-/* -------- Label margin -------- */
-:where(label, .bs-label, bs-label) + .bs-input-addon {
-  margin-top: 0.25rem;
+.bs-hint:where([data-error]:not([data-error="false"])) {
+  --hint-color: var(--bs-ink-red);
 }
-.bs-input-phone :where(.bs-input-addon) > button {
+.bs-button {
+  --btn-main: var(--bs-blue-400);
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-highlight: var(--bs-blue-100);
+  --btn-padding: .25rem .75rem;
+  --btn-focus-pseudo-width: calc(100% + 0.5rem);
+  --btn-ghost-ink: var(--bs-ink-blue);
+  --btn-ink: var(--bs-white);
   align-items: center;
-  -moz-column-gap: .5rem;
-       column-gap: .5rem;
+  background-color: var(--btn-main);
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--btn-ink);
   cursor: pointer;
-  display: grid;
-  grid-template-columns: 1.25rem auto .75rem;
-  min-width: 6rem;
-  padding: 0 1rem;
+  display: inline-flex;
+  font-size: var(--btn-text-size, var(--bs-text-md));
+  font-weight: var(--btn-weight, 600);
+  height: var(--btn-height, 2.5rem);
+  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-input-phone ul:where(.bs-dropdown-options) {
-  min-width: 7.5rem;
+.bs-button:hover {
+  background-color: var(--btn-secondary);
 }
-:where(.bs-input-search) {
-  display: inline-block;
-  width: 100%;
+.bs-button:active {
+  background-color: var(--btn-secondary);
+  transform: scale(0.97);
+  transform-origin: center;
+  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
 }
-.bs-input-search :where(.bs-icon svg) {
-  box-sizing: content-box;
+/* ------------ 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: -0.25rem;
+  left: auto;
+  position: absolute;
+  right: auto;
+  transition: border-color 0.125s ease-in-out;
+  width: var(--btn-focus-pseudo-width);
 }
-.bs-input-search :where([data-component="bs-icon-search"]) {
-  --icon-size: var(--search-icon-size, 1.75rem);
-  padding: var(--search-icon-padding, 0 0 0 .75rem);
+.bs-button:focus::before {
+  border-color: var(--btn-main);
 }
-/* Clear Button */
-.bs-input-search button {
-  align-items: center;
+.bs-button:focus-visible::before {
+  border-color: var(--btn-main);
+  box-shadow: none;
+}
+.bs-button:focus:not(:focus-visible)::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;
-  cursor: pointer;
-  display: flex;
-  height: 100%;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  transition: transform 100ms ease-in-out;
+  box-shadow: inset 0 0 0 1px var(--btn-main);
 }
-.bs-input-search button:where(:active) {
-  transform: scale(0.97);
-  transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--bs-blue-base);
+.bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
+  border-radius: 0.4375rem;
 }
-.bs-input-search button:where(:focus) {
-  border-radius: .25rem;
-  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
-  z-index: 1;
+.bs-button:where([data-ghost]:not([data-ghost="false"])):hover,
+.bs-button:where([data-ghost]:not([data-ghost="false"])):focus {
+  background-color: var(--btn-light);
 }
-/* Filter variant */
-.bs-input-search:where([data-variant="filter"]) {
-  --focus-border: transparent;
-  --input-border: transparent;
-  --input-addon-height: 1.5rem;
-  --input-caret: var(--bs-blue-base);
-  --input-padding-block: 0 0.125rem;
-  --input-padding-inline: 0.5rem;
-  --input-placeholder: var(--bs-ink-light);
-  --input-text-size: var(--bs-text-sm);
-  --search-icon-size: 1rem;
-  --search-icon-padding: 0;
+.bs-button:where([data-ghost]:not([data-ghost="false"])):active {
+  box-shadow:
+    inset 0 0 0 1px var(--btn-main),
+    inset 0px 0px 4px 1px var(--btn-highlight);
 }
-/* Filter variant: cancels out base hover state styles */
-.bs-input-addon:where([data-variant="filter"]):hover {
-  --input-bg: var(--bs-bg-base);
+/* ------------ VARIANTS ------------ */
+.bs-button:where([data-variant^='secondary']) {
+  --btn-main: var(--bs-plum-400);
+  --btn-secondary: var(--bs-plum-medium);
+  --btn-light: var(--bs-plum-10);
+  --btn-highlight: var(--bs-plum-100);
+  --btn-ghost-ink: var(--bs-ink-plum);
 }
-/* -------- Disabled styles -------- */
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {
-  --input-bg: var(--bs-bg-base);
-  --input-border: transparent;
+.dark .bs-button:where([data-variant^='secondary']) {
+  --btn-main: var(--bs-plum-200);
+  --btn-secondary: var(--bs-plum-300);
+  --btn-light: var(--bs-navy-400);
+  --btn-highlight: var(--bs-plum-400);
 }
-.bs-field-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--bs-space-2);
-  padding: 0 0.75rem;
-  margin-top: 0.5rem;
+.bs-button:where([data-variant^='positive']) {
+  --btn-main: var(--bs-purple-400);
+  --btn-secondary: var(--bs-purple-medium);
+  --btn-light: var(--bs-purple-10);
+  --btn-highlight: var(--bs-purple-100);
+  --btn-ghost-ink: var(--bs-ink-purple);
 }
-:where(textarea, bs-textarea) + .bs-field-details {
-  margin-top: 0.25rem;
+.bs-button:where([data-variant^='warning']) {
+  --btn-main: var(--bs-orange-warning);
+  --btn-secondary: var(--bs-orange-base);
+  --btn-light: var(--bs-orange-10);
+  --btn-highlight: var(--bs-orange-100);
+  --btn-ghost-ink: var(--bs-ink-orange);
 }
-.bs-field-details :where(.bs-character-count:first-child) {
-  margin-left: auto;
+.bs-button:where([data-variant^='negative']) {
+  --btn-main: var(--bs-red-400);
+  --btn-secondary: var(--bs-red-medium);
+  --btn-light: var(--bs-red-10);
+  --btn-highlight: var(--bs-red-100);
+  --btn-ghost-ink: var(--bs-ink-red);
 }
-.bs-character-count {
-  color: var(--bs-ink-base);
-  font-size: var(--bs-text-xs);
-  font-weight: 400;
-  text-align: right;
-  white-space: nowrap;
+/* ------------ Text Button ------------ */
+.bs-button:where([data-text]:not([data-text="false"])) {
+  --btn-height: auto;
+  --btn-ink: var(--bs-ink-blue);
+  --btn-padding: 0;
+  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
+  --btn-text-size: var(--bs-text-md);
+  --btn-weight: 400;
+  background-color: transparent;
+  cursor: pointer;
+  line-height: 150%;
 }
-:where(:disabled, [data-disabled="true"]) + .bs-character-count,
-:where(:disabled, [data-disabled="true"]) .bs-character-count,
-.bs-character-count:where([data-disabled="true"]) {
-  color: var(--bs-ink-disabled);
+.bs-button:where([data-text]:not([data-text="false"])):hover {
+  --btn-ink: var(--bs-blue-base);
+  background-color: transparent;
+  text-decoration: underline;
+}
+.bs-button:where([data-text]:not([data-text="false"])):has(svg):hover {
+  text-decoration: none;
+}
+.bs-button:where([data-text]:not([data-text="false"])):active {
+  box-shadow: none;
+  transform: none;
+}
+/* ------------ 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-character-count:where([data-error="true"]) {
-  color: var(--bs-ink-red);
+.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);
 }
-/* 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%;
+/* 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-boolean:where([data-size='sm']) input {
-  width: var(--bs-text-xs);
-  height: var(--bs-text-xs);
+.bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-base);
 }
-.bs-boolean label {
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  line-height: 1.5;
-  width: auto;
+/* 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);
 }
-/* not using gap on .bs-boolean due to dead click zone */
-.bs-boolean label {
-  padding-inline-end: 0.5em;
+.bs-button:where([data-size^='xxs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-xs);
+  --btn-weight: 600;
 }
-.bs-boolean input + label {
-  padding-inline: 0.5em 0;
+/* ------------ Disabled Styling ------------ */
+:where(button:disabled),
+.bs-button:where(:disabled),
+.bs-button:where([aria-disabled="true"]) /* for links as buttons */ {
+  pointer-events: none;
 }
-.bs-boolean:where([data-size='sm']),
-.bs-boolean:where([data-size='sm']) label {
-  font-size: var(--bs-text-xs);
+.bs-button:where(:disabled),
+.bs-button:where([aria-disabled="true"]) {
+  --btn-ink: var(--bs-ink-disabled);
+  --btn-main: var(--bs-bg-disabled);
 }
-/* Checkbox & Radio Input */
-:where(input[type='checkbox'], input[type='radio']),
-:is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
-  --box-shadow: var(--bs-ink-base);
-
-  -webkit-appearance: none;
-
-     -moz-appearance: none;
-
-          appearance: none;
-  background-color: var(--bs-bg-base);
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
-  cursor: pointer;
-  display: grid;
-  height: 1rem;
-  margin: 0;
-  place-content: center;
-  position: relative;
-  width: 1rem;
+.bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
+.bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
+  box-shadow: inset 0 0 0 1px var(--bs-gray-400);
 }
-: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),
-    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-button:where([data-text]:not([data-text="false"])):disabled,
+.bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
+  --btn-main: transparent;
 }
-:where(input[type='checkbox']),
-:is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
-  border-radius: 0.125rem;
+/* ------------ links as buttons ------------ */
+a.bs-button {
+  align-items: center;
+  display: inline-flex;
+  outline: none;
+  vertical-align: middle;
 }
-:where(input[type='radio']),
-.bs-boolean :where([type='radio']) {
-  border-radius: 50%;
+.bs-circle-button {
+  --btn-main: var(--bs-blue-base);
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-highlight: var(--bs-blue-lightest);
+  --btn-border-color: transparent;
+  --btn-border-radius: 50%;
+  --btn-icon-bg-color: var(--btn-main);
+  --btn-icon-padding: .75rem;
+  --btn-icon-size: 1.5rem;
+  --btn-icon-stroke-color: var(--bs-white);
+  --btn-text-color: var(--bs-ink-base);
+  --btn-text-size: var(--bs-text-md);
+  align-items: center;
+  background-color: transparent;
+  border-radius: var(--btn-border-radius);
+  color: var(--btn-text-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--btn-text-size);
+  gap: .5rem;
+  outline: none;
+  position: relative;
+  vertical-align: middle;
 }
-/* Checkbox's checkmark  */
-input:where([type='checkbox'])::before,
-:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
-  --filled-size: 1rem;
-  --check-fill-color: var(--bs-blue-base);
-
-  content: '';
-  border-radius: 0.125rem;
-  box-shadow: inset var(--filled-size) var(--filled-size) var(--check-fill-color);
-  height: var(--filled-size);
-  visibility: hidden;
-  width: var(--filled-size);
+a.bs-circle-button {
+  align-items: center;
+  display: inline-flex;
+  outline: none;
+  text-decoration: none;
 }
-input:where([type='checkbox'])::after,
-:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
-  border: solid var(--bs-white);
-  border-width: 0 0.125rem 0.125rem 0;
-  content: '';
-  height: 0.75em;
-  left: 50%;
+.bs-circle-button :where(.bs-circle-button-icon)::before {
+  border-color: var(--btn-border-color);
+  border-radius: var(--btn-border-radius);
+  border-style: solid;
+  border-width: 0.125rem;
+  height: calc(100% + 0.5rem);
+  inset: -0.25rem;
   position: absolute;
-  top: 50%;
-  transform-origin: center;
-  transform: translate(-50%, -60%) rotate(45deg);
-  visibility: hidden;
-  width: 0.375em;
+  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
+  width: calc(100% + 0.5rem);
 }
-input:where([type='checkbox']):where(:indeterminate)::after,
-.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
-.bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
+.bs-circle-button :where(.bs-circle-button-icon) {
+  align-items: center;
+  background-color: var(--btn-icon-bg-color);
   border: none;
-  background-color: var(--bs-white);
-  height: 0.125rem;
-  transform: translate(-50%, -0.0625rem) rotate(0deg);
-  width: 0.625em;
-}
-/* Radio's dot */
-input:where([type='radio'])::before,
-.bs-boolean :where([type="radio"])::before {
-  --filled-size: 1rem;
-  --radio-fill-color: var(--bs-blue-base);
-
-  background-color: var(--radio-fill-color);
   border-radius: 50%;
-  box-sizing: content-box;
-  content: '';
-  height: var(--filled-size);
-  visibility: hidden;
-  width: var(--filled-size);
+  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;
 }
-input:where([type='radio'])::after,
-.bs-boolean :where([type="radio"])::after {
-  --inner-size: 0.375rem;
-  --inner-fill-color: var(--bs-white);
-
-  background-color: var(--inner-fill-color);
-  border-radius: 50%;
-  box-sizing: content-box;
-  content: '';
-  height: var(--inner-size);
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  visibility: hidden;
-  width: var(--inner-size);
+.bs-circle-button :where(.bs-circle-button-icon) :where(.bs-icon) {
+  --icon-size: var(--btn-icon-size);
 }
-/* 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;
+/* 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-boolean:where([data-size='sm']) input::before,
-.bs-checkbox:where([data-size="sm"])::before {
-  --filled-size: var(--bs-text-xs);
+/* 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-boolean:where([data-size='sm']) input[type='checkbox']::after,
-.bs-checkbox:where([data-size="sm"])::after {
-  height: 0.5625rem;
-  width: 0.3125rem;
+/* Ghost Buttons */
+.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
+  --btn-icon-stroke-color: var(--btn-main);
+  --btn-light: var(--bs-blue-10);
+  --btn-secondary: var(--bs-blue-10);
 }
-.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
-.bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after  {
-  height: 0.125rem;
-  width: .75em;
+.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) :where(.bs-circle-button-icon) {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px transparent;
+  color: var(--btn-icon-stroke-color);
 }
-.bs-boolean:where([data-size='sm']) input[type='radio']::after {
-  --inner-size: 0.25rem;
+.bs-circle-button:where([data-ghost]:not([data-ghost="false"])) :where(.bs-circle-button-icon)::before {
+  border-radius: 50%;
 }
-/* Disabled State */
-input:where([type='checkbox'], [type='radio']):disabled,
-.bs-boolean :where(input):disabled,
-.bs-checkbox:is([data-disabled="true"], :disabled) {
-  --box-shadow: var(--bs-bg-disabled);
-  background-color: transparent;
-  cursor: default;
+/* Active, Hover, Focus states */
+.bs-circle-button:active, .bs-circle-button:hover {
+  --btn-icon-bg-color: var(--btn-secondary);
 }
-.bs-checkbox:where([data-disabled="true"]:not(input)) {
-  pointer-events: none;
+.bs-circle-button:active :where(.bs-circle-button-icon) {
+  transform: scale(0.97);
+  transform-origin: center;
+  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
 }
-input:where([type='checkbox']):checked:disabled::before,
-input:where([type='checkbox']):indeterminate:disabled::before,
-.bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
-.bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before,
-.bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
-.bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
-  --check-fill-color: var(--bs-bg-disabled);
+.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);
 }
-input:where([type='radio']):checked:disabled::before,
-.bs-boolean :where(input[type="radio"]):checked:disabled::before {
-  --radio-fill-color: var(--bs-bg-disabled);
+.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);
 }
-/* Error state */
-input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
-.bs-boolean :where(input[data-error="true"]),
-.bs-checkbox:where([data-error="true"]) {
-  --box-shadow: var(--bs-red-base);
-  --outline-color: var(--bs-red-base);
+.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover :where(.bs-circle-button-icon) {
+  background-color: var(--btn-light);
 }
-.bs-switch {
-  --box-shadow: var(--bs-ink-base);
-  --ball-background: var(--bs-white);
-  --ball-diameter: 1rem;
-  --inner-text-line-height: 1;
-  --inner-text-size: var(--bs-text-sm);
-  --inner-text-width: 1rem;
-  --inner-text-padding: 0.5rem;
-  --offset: 0.25rem;
-  --offset-double: .5rem;
-  --switch-background: var(--bs-gray-400);
-  --switch-height: 1.5rem;
-  --switch-width: 2.5rem;
-
-  border: none;
-  border-radius: 100vw;
-  cursor: pointer;
-  height: var(--switch-height);
-  position: relative;
+.bs-circle-button:where([data-ghost]:not([data-ghost="false"])):active {
+  box-shadow:
+    inset 0 0 0 1px var(--btn-main),
+    inset 0px 0px 4px 1px var(--btn-highlight);
 }
-.bs-switch:where([data-size="sm"]) {
-  --ball-diameter: .625rem;
-  --inner-text-line-height: 1.6666;
-  --inner-text-size: var(--bs-text-xs);
-  --inner-text-width: .75rem;
-  --inner-text-padding: 0.375rem;
-  --offset: 0.1875rem;
-  --offset-double: .375rem;
-  --switch-height: 1rem;
-  --switch-width: 1.875rem;
+.bs-circle-button:where(:focus-visible) {
+  --btn-border-color: var(--btn-main);
 }
-.bs-switch input,
-.bs-switch:where([data-size="sm"]) input {
-  cursor: pointer;
-  height: 100%;
-  opacity: 0;
-  position: absolute;
-  width: 100%;
+.bs-circle-button:where(:focus-visible) :where(.bs-circle-button-icon)::before {
+  content: '';
 }
-.bs-switch span {
-  align-items: center;
-  background-color: var(--switch-background);
-  border-radius: 100vw;
-  display: inline-block;
-  font-size: var(--inner-text-size);
-  height: 100%;
-  padding: 0 var(--inner-text-padding);
+/* 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;
-  position: relative;
-  transition: 250ms;
-  width: var(--switch-width);
 }
-.bs-switch :where(input:checked) ~ :where(span),
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span) {
-  --switch-background: var(--bs-blue-base);
+.bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
+  background-color: var(--bs-bg-disabled);
 }
-/* Toggle "ball" */
-.bs-switch :where(span)::before {
-  background-color: var(--ball-background);
-  border-radius: 50%;
-  box-sizing: border-box;
-  content: '';
-  height: var(--ball-diameter);
-  left: var(--offset);
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-  transition: inherit;
-  width: var(--ball-diameter);
-  z-index: 2;
+/* Button Size */
+.bs-circle-button:where([data-size^='sm']) {
+  --btn-icon-padding: .375rem;
+  --btn-icon-size: .75rem;
+  --btn-text-size: var(--bs-text-sm);
 }
-.bs-switch :where(input:checked) ~ :where(span)::before,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span)::before {
-  transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
+.bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .3125rem;
+  --btn-icon-size: .625rem;
+  --btn-text-size: var(--bs-text-base);
 }
-.bs-switch :where(input:checked) ~ :where(span[data-inner-on-label][data-inner-off-label])::before,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span[data-inner-on-label][data-inner-off-label])::before {
-  transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
+.bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .25rem;
+  --btn-icon-size: .5rem;
+  --btn-text-size: var(--bs-text-sm);
 }
-/* Inner "on/off" text */
-.bs-switch :where(span)::after {
+/*
+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) {
+  flex-shrink: 0;
+  position: relative;
+}
+.bs-filter-button {
   align-items: center;
-  color: var(--ball-background);
-  content: var(--inner-label-text);
-  display: flex;
+  color: var(--filterbtn-color, var(--bs-ink-blue));
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--filterbtn-text-size, var(--bs-text-base));
+  font-weight: var(--filterbtn-weight, 400);
+  height: var(--filterbtn-height, 1.5rem);
+  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, transparent) 2px;
+  border-radius: 0.25rem;
+  content: '';
+  display: block;
   height: 100%;
-  justify-content: var(--inner-label-position, flex-start);
-  left: 0;
-  line-height: var(--inner-text-line-height);
-  padding: var(--inner-text-padding);
   position: absolute;
-  text-transform: capitalize;
-  top: 0;
+  transform: scale(1.25);
   width: 100%;
 }
-.bs-switch :where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 3.5rem;
+.bs-filter-button :where(.bs-icon),
+.bs-filter-button :where(span:has(svg:only-child)) {
+  display: block;
+  height: var(--filterbtn-caret-size, 1rem);
+  line-height: 1;
+  transform: var(--filterbtn-caret-transform, rotate(0deg));
+  transform-origin: center;
+  transition: var(--bs-trans-rotate180);
+  width: var(--filterbtn-caret-size, 1rem);
 }
-.bs-switch:where([data-size="sm"]) :where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 2.625rem;
+.bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
+
+  --filterbtn-text-size: var(--bs-text-sm);
+  --filterbtn-caret-size: .75rem;
 }
-.bs-switch :where(input:not(:checked)) ~ :where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed="false"]) :where([data-inner-on-label][data-inner-off-label])::after  {
-  --inner-label-position: flex-end;
-  --inner-label-text: attr(data-inner-off-label);
+.bs-filter-button:where([data-size="sm"]) {
+  --filterbtn-text-size: var(--bs-text-sm);
 }
-.bs-switch :where(input:checked) ~ :where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where([data-inner-on-label][data-inner-off-label])::after {
-  --inner-label-text: attr(data-inner-on-label);
+.bs-filter-button:where([data-size="xs"]) {
+  --filterbtn-text-size: var(--bs-text-xs);
+  --filterbtn-weight: 600;
+}
+/* Hover state */
+.bs-filter-button:hover {
+  --filterbtn-color: var(--bs-blue-base);
 }
 /* Focus state */
-.bs-switch :where(input:focus-visible) + :where(span),
-.bs-switch:where(:focus-visible) :where(button span) {
-  box-shadow: 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-filter-button:where(:focus-visible) {
+  outline: none;
+  --filterbtn-focus-color: var(--bs-blue-base);
 }
-: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);
+/* Filter open state */
+.bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
+  --filterbtn-caret-transform: rotate(180deg);
 }
-: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-base);
+/* Badge non-standard color */
+.bs-filter-button :where(.bs-badge) {
+  --badge-bg: var(--bs-ink-blue);
 }
-/* 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);
+:where(.dark) .bs-filter-button :where(.bs-badge) {
+  --badge-bg: var(--bs-blue-medium);
 }
-.bs-switch input:where(:disabled) {
-  cursor: default;
+.bs-filter-button:hover :where(.bs-badge) {
+  --badge-bg: var(--filterbtn-color);
 }
-.bs-hint {
-  --hint-color: var(--bs-ink-light);
-  min-width: 0;
-  color: var(--hint-color);
-  font-size: var(--bs-text-xs);
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  overflow-wrap: break-word;
+/* Disabled state */
+.bs-filter-button:where(:disabled) {
+  --filterbtn-color: var(--bs-ink-disabled);
+  cursor: default;
 }
-.bs-hint:where([data-error]:not([data-error="false"])) {
-  --hint-color: var(--bs-ink-red);
+.bs-filter-button:where(:disabled) :where(.bs-badge) {
+  --badge-bg: var(--bs-bg-disabled);
+  --badge-text: var(--bs-ink-disabled);
 }
 .bs-modal {
   background-color: var(--bs-bg-base-elevated);
@@ -3320,6 +3374,7 @@ a.bs-profile:where([data-layout]):hover {
   justify-content: var(--tab-justify);
   line-height: 1.5;
   opacity: var(--tab-list-opacity);
+  overflow: hidden;
   position: relative;
   width: 100%;
 }
@@ -3700,7 +3755,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
   background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
   box-shadow: var(--bs-shadow-contentLowCenter);
-  color: var(--bs-violet-base);
+  color: var(--bs-ink-violet);
   display: flex;
   font-size: var(--bs-text-sm);
   justify-content: center;