@wwtdev/bsds-css 2.28.0 → 3.0.0-rc.21

package/dist/components/inline-tabs.css

@@ -1,83 +0,0 @@
-.bs-inline-tabs {
-  display: flex;
-  gap: var(--bs-space-2);
-}
-
-.bs-inline-tab {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--bs-space-2) var(--bs-space-3);
-  font-size: var(--bs-text-sm);
-  font-weight: 600;
-  line-height: 1.5;
-  color: var(--bs-ink-royal);
-  text-align: center; /* needed for "as link" wrap cases */
-  text-decoration: none;
-  background-color: var(--bs-bg-medium);
-  border-radius: var(--bs-space-1);
-  border: 1px solid transparent;
-  outline: none;
-  cursor: pointer;
-  transition: all 100ms ease-in-out;
-}
-
-/* Variant */
-.bs-inline-tab:where([data-variant="white"]) {
-  background-color: var(--bs-bg-base);
-}
-
-/* Hover */
-.bs-inline-tab:where(:not([data-selected]):hover) {
-  border-color: var(--bs-ink-royal); /* "ink-royal" instead of "royal-base", matches Figma design */
-}
-
-/* Keyboard Focus */
-.bs-inline-tab:where(:focus-visible) {
-  outline: 2px solid var(--bs-ink-royal);
-
-  &:where([data-selected]) {
-    outline-offset: 2px;
-  }
-}
-
-/* Selected */
-.bs-inline-tab:where([data-selected]) {
-  color: var(--bs-ink-white);
-  background-color: var(--bs-royal-400); /* "400" instead of "base", matches Figma design */
-}
-
-/* Disabled (as button or link) */
-.bs-inline-tab:where(:disabled, [aria-disabled="true"]) {
-  color: var(--bs-ink-light);
-  background-color: var(--bs-gray-light);
-  cursor: default;
-  pointer-events: none;
-}
-
-/* Selected & Disabled */
-.bs-inline-tab:where([data-selected]):where(:disabled, [aria-disabled="true"]) {
-  color: var(--bs-ink-white);
-  background-color: var(--bs-gray-base);
-}
-
-/* -- Dark Mode Overrides -- */
-
-:where(.dark .bs-inline-tab) {
-
-  /* Ink */
-  &:not([data-selected], :disabled, [aria-disabled="true"]) {
-    color: var(--bs-ink-medium);
-  }
-
-  /* Selected & Disabled */
-  &[data-selected]:where(:disabled, [aria-disabled="true"]) {
-    color: var(--bs-ink-invert-base);
-  }
-
-  /* Keyboard Focus */
-  &[data-selected]:where(:focus-visible) {
-    outline-offset: 0;
-  }
-  
-}

package/dist/components/loader.css

@@ -1,101 +0,0 @@
-.bs-loader {
-  --loader-dot-bg: var(--bs-blue-500);
-  --loader-dot-size: .75rem;
-  --loader-dot-top: calc(50% - var(--loader-dot-size)/2);
-  --loader-dot-translate: 1.75rem; /* i.e., calc(var(--loader-width)/2 - var(--loader-dot-size)/2); */
-  --loader-height: 3rem;
-  --loader-width: 4rem; /* approx 6 * dot size */
-  display: block;
-  height: var(--loader-height);
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  position: relative;
-  width: var(--loader-width);
-}
-.bs-loader:where([data-size="xs"]) {
-  --loader-dot-size: .3rem;
-  --loader-dot-translate: .75rem;
-  --loader-height: .3rem;
-  --loader-width: 1.8rem;
-}
-.bs-loader:where([data-size="sm"]) {
-  --loader-dot-size: .5rem;
-  --loader-dot-translate: 1.125rem;
-  --loader-height: .5rem;
-  --loader-width: 3rem;
-}
-.bs-loader:where([data-size="lg"]) {
-  --loader-dot-size: 1rem;
-  --loader-dot-translate: 2.375rem;
-  --loader-height: 4rem;
-  --loader-width: 6rem;
-}
-
-/* ----- loader dots ----- */
-.bs-loader > :where(*:not(.visually-hidden)) {
-  background-color: var(--loader-dot-bg);
-  border-radius: 50%;
-  display: block;
-  height: var(--loader-dot-size);
-  position: absolute;
-  top: var(--loader-dot-top);
-  width: var(--loader-dot-size);
-}
-
-.bs-loader > :where(*:not(.visually-hidden)) {
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-.bs-loader > :where(*:nth-child(1)) {
-  animation: loading-1 0.6s infinite;
-  left: 0%;
-}
-.bs-loader > :where(*:nth-child(2)) {
-  animation: loading-2 0.6s infinite;
-  left: 0%;
-}
-.bs-loader > :where(*:nth-child(3)) {
-  animation: loading-2 0.6s infinite;
-  left: 40%;
-}
-.bs-loader > :where(*:nth-child(4)) {
-  animation: loading-3 0.6s infinite;
-  left: 80%;
-}
-
-/* ----- color variants ----- */
-.bs-loader:where([data-variant="black"]) {
-  --loader-dot-bg: var(--bs-black);
-}
-.bs-loader:where([data-variant="gray"]) {
-  --loader-dot-bg: var(--bs-gray-400);
-}
-.bs-loader:where([data-variant="white"]) {
-  --loader-dot-bg: var(--bs-white);
-}
-
-@keyframes loading-1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes loading-2 {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(var(--loader-dot-translate), 0);
-  }
-}
-
-@keyframes loading-3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}

package/dist/components/modal.css

@@ -1,181 +0,0 @@
-.bs-modal {
-  --base-modal-width: 35rem; /* 560px */
-  --lg-modal-padding: 2rem; /* 32px */
-  --lg-modal-width: 45.3125rem; /* 725px */
-  --modal-padding: 1.5rem; /* 24px */
-  --sm-modal-width: 21.25rem; /* 340px */
-  background-color: var(--bs-bg-base-to-medium);
-  border-radius: 4px;
-  bottom: 0;
-  box-shadow: var(--bs-shadow-contentHigh);
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  left: 0;
-  margin: auto;
-  max-height: calc(100% - 3rem);
-  opacity: 0;
-  overflow: auto;
-  position: fixed;
-  right: 0;
-  top: 0;
-  transition-duration: 75ms;
-  transition-property: opacity;
-  transition-timing-function: ease-in-out;
-  width: calc(100% - 3rem);
-  z-index: 9999;
-}
-
-@media (min-width: 752px) {
-  .bs-modal {
-    max-height: min(calc(100dvh - 3rem), 40.625rem);
-    width: var(--base-modal-width);
-  }
-
-  .bs-modal:where([data-size="sm"]) {
-    width: var(--sm-modal-width);
-  }
-
-  .bs-modal:where([data-size="lg"]) {
-    width: var(--lg-modal-width);
-  }
-}
-
-.bs-modal:where([data-shown="true"]) {
-  opacity: 1;
-}
-
-/* Header Container */
-.bs-modal :where(.bs-modal-header-container) {
-  padding: var(--modal-padding);
-}
-
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
-  padding: var(--lg-modal-padding);
-}
-
-.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
-  border-bottom: 1px solid var(--bs-border-base);
-}
-
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-header-container) {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* Header Row */
-.bs-modal :where(.bs-modal-header) {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
-/* Title */
-.bs-modal :where(.bs-modal-title) {
-  flex-grow: 1;
-  font-size: var(--bs-text-lg);
-  font-weight: 400;
-  margin-right: 2rem;
-}
-
-/* Subtitle */
-.bs-modal :where(.bs-modal-subtitle) {
-  font-size: var(--bs-text-sm);
-  font-weight: 400;
-  margin-top: 0.5rem;
-  width: 100%;
-}
-
-/* Close Button */
-.bs-modal :where(.bs-modal-close-button) {
-  background-color: transparent;
-  cursor: pointer;
-  z-index: 10000;
-}
-
-.bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-}
-
-.bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
-  margin-right: var(--modal-padding);
-}
-
-.bs-modal:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
-  margin-right: var(--lg-modal-padding);
-}
-
-/* Progress */
-.bs-modal :where(.bs-modal-progress) {
-  margin-top: 1.5rem;
-  width: 100%;
-}
-
-/* Body */
-.bs-modal :where(.bs-modal-body) {
-  overflow-y: auto;
-  padding: var(--modal-padding);
-}
-
-.bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
-  padding-bottom: 0;
-  padding-top: 0;
-}
-
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* Has header, but no header border */
-.bs-modal:where(:not([data-header-border]):has(.bs-modal-header-container)) :where(.bs-modal-body),
-.bs-modal:where([data-header-border="false"]:has(.bs-modal-header-container)) :where(.bs-modal-body) {
-  padding-top: 0;
-}
-
-/* Has footer, but no footer border */
-.bs-modal:where(:not([data-footer-border])) :where(.bs-modal-body:has(~ .bs-modal-footer)),
-.bs-modal:where([data-footer-border="false"]) :where(.bs-modal-body:has(~ .bs-modal-footer)) {
-  padding-bottom: 0;
-}
-
-.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
-  background-color: var(--bs-bg-light);
-}
-
-/* Footer */
-.bs-modal :where(.bs-modal-footer) {
-  padding-bottom: 1rem;
-  padding-left: var(--modal-padding);
-  padding-right: var(--modal-padding);
-  padding-top: 1rem;
-}
-
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
-  padding-bottom: 1.5rem;
-  padding-left: var(--lg-modal-padding);
-  padding-right: var(--lg-modal-padding);
-  padding-top: 1.5rem;
-}
-
-.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
-  border-top: 1px solid var(--bs-border-base);
-}
-
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-modal:where(.bs-modal-enter-from),
-.bs-modal:where(.bs-modal-leave-to) {
-  opacity: 0;
-}
-
-.bs-modal:where(.bs-modal-enter-to),
-.bs-modal:where(.bs-modal-leave-from) {
-  opacity: 1;
-}

package/dist/components/overlay.css

@@ -1,30 +0,0 @@
-.bs-overlay {
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
-  background: rgba(29, 30, 72, 0.05);
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  transition-duration: 75ms;
-  transition-property: opacity;
-  transition-timing-function: ease-in-out;
-  z-index: 9998;
-}
-
-.bs-overlay:where([data-shown]:not([data-shown="false"])) {
-  opacity: 1;
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-overlay:where(.bs-overlay-enter-from),
-.bs-overlay:where(.bs-overlay-leave-to) {
-  opacity: 0;
-}
-
-.bs-overlay:where(.bs-overlay-enter-to),
-.bs-overlay:where(.bs-overlay-leave-from) {
-  opacity: 1;
-}

package/dist/components/pagination.css

@@ -1,81 +0,0 @@
-.bs-pagination {
-  background-color: var(--bs-bg-base);
-  color: var(--bs-ink-base);
-  display: flex;
-  gap: 1.5rem;
-  justify-content: center;
-}
-
-.bs-pagination:where([data-variant="group"]) {
-  gap: 2.5rem;
-}
-
-.bs-pagination:where([data-variant="results"]) {
-  gap: 1rem;
-}
-
-.bs-pagination :where(button) {
-  align-items: center;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  min-height: 1.5rem;
-  justify-content: center;
-  outline: 2px solid transparent;
-  min-width: 1.5rem;
-}
-
-.bs-pagination button:where(:focus),
-.bs-pagination button:where(:focus-visible) {
-  outline: 2px solid var(--bs-blue-base);
-}
-
-.bs-pagination button:where(:focus:not(:focus-visible)) {
-  outline: 2px solid transparent;
-}
-
-.bs-pagination button:where(:disabled) {
-  color: var(--bs-ink-disabled);
-  cursor: default;
-}
-
-.bs-pagination button:where([data-selected]:not([data-selected="false"])) {
-  background-color: var(--bs-blue-base);
-  color: var(--bs-gray-50);
-}
-
-.bs-pagination:where([data-fixed]:not([data-fixed="false"])) {
-  background-color: var(--bs-bg-base-elevated);
-  bottom: 0;
-  left: 0;
-  padding: 1rem;
-  position: fixed;
-  width: 100%;
-}
-
-.bs-pagination :where(.bs-pagination-page-numbers) {
-  display: flex;
-  gap: 1rem;
-}
-
-.bs-pagination :where(.bs-pagination-carets) {
-  display: flex;
-  gap: 1.5rem;
-}
-
-.bs-pagination :where(.bs-pagination-word-caret) {
-  align-items: center;
-  gap: 0.5rem;
-  width: auto;
-}
-
-.bs-pagination :where(.bs-pagination-results-numbers) {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.bs-pagination :where(.bs-pagination-results-numbers) button {
-  padding-left: 2px;
-  padding-right: 2px;
-  width: auto;
-}

package/dist/components/pills.css

@@ -1,220 +0,0 @@
-.bs-pill {
-  --pill-background: var(--bs-bg-medium);
-  --pill-border: transparent;
-  --pill-text: #162FB4; /* one-off component-specific */
-  --pill-gap: var(--bs-space-2);
-
-  align-items: center;
-  appearance: none;
-  background-color: var(--pill-background);
-  border: 1px solid var(--pill-border);
-  border-radius: 4px;
-  color: var(--pill-text);
-  display: inline-flex;
-  font-size: var(--bs-text-xs);
-  height: 1.5rem;
-  gap: var(--pill-gap);
-  line-height: 1rem;
-  padding: 0 .375rem;
-  text-decoration: none;
-}
-
-:where(.bs-pill .bs-icon) {
-  height: 1rem;
-  width: 1rem;
-}
-
-/* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
-:where(.dark) .bs-pill {
-  --pill-text: #7585D1;
-}
-
-/* ------------------------------ Auto-truncation for content ------------------------------ */
-.bs-pill:has([data-truncate="true"]) {
-  max-width: 100%;
-}
-.bs-pill > :where([data-truncate="true"]) {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* If false, pass thru .bs-pill display styles */
-.bs-pill > :where([data-truncate="false"]) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pill-gap);
-}
-
-/* ------------------------------ Button and Link Styles ------------------------------ */
-:is(a, button).bs-pill {
-  color: var(--pill-text);
-  cursor: pointer;
-  transition: all 0.15s ease-in-out;
-}
-:is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-royal-base);
-
-  color: var(--pill-text);
-  outline: transparent;
-}
-
-/* ------------------------------ Background Colors ------------------------------ */
-:where(.box[data-invert]) .bs-pill {
-  --pill-background: var(--bs-bg-invert-to-base-subtle);
-  --pill-text: var(--bs-gray-100);
-}
-:where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-gray-100);
-}
-:where(.dark .box[data-invert]) .bs-pill {
-  --pill-text: var(--bs-royal-400);
-}
-:where(.dark .box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-royal-400);
-}
-
-/* ------------------ Generally Applicable ::Before Styles ------------------ */
-.bs-pill::before {
-  flex-shrink: 0;
-}
-
-/* ------------------------------ Status Styles ------------------------------ */
-.bs-pill:where([data-status]) {
-  --status-color: var(--bs-blue-base);
-}
-.bs-pill:where([data-status])::before {
-  background-color: var(--status-color);
-  border-radius: 100%;
-  content: '';
-  height: 12px;
-  width: 12px;
-}
-
-/* ----- Status Colors ----- */
-.bs-pill:where([data-status^="active"]) {
-  --status-color: var(--bs-blue-base);
-}
-.bs-pill:where([data-status^="complete"]) {
-  --status-color: var(--bs-purple-400);
-}
-.bs-pill:where([data-status^="disabled"]) {
-  --status-color: var(--bs-gray-300);
-}
-.bs-pill:where([data-status^="error"]) {
-  --status-color: var(--bs-red-400);
-}
-.bs-pill:where([data-status^="positive"]) {
-  --status-color: #16986D;
-}
-.bs-pill:where([data-status^="warning"]) {
-  --status-color: var(--bs-orange-warning);
-}
-/* Deprecated; use "data-status disabled" instead */
-.bs-pill:where([data-status^="inactive"]) {
-  --status-color: var(--bs-gray-300);
-}
-
-/* ------------------------------ Filter Styles ------------------------------ */
-.bs-pill:where([data-variant^="filter"]) {
-  --pill-background: var(--bs-bg-base);
-  --pill-border: var(--bs-border-base);
-  --pill-text: var(--bs-ink-base);
-}
-.bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
-  --pill-border: var(--bs-border-base);
-}
-:is(a, button).bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
-  --pill-border: var(--bs-ink-base);
-}
-
-/* ------------------------------ Variant: "Filter Add" Styles ------------------------------ */
-/* Black + */
-.bs-pill:where([data-variant^="filter"][data-variant*="add"])::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%230A0B19'/%3E%3C/svg%3E");
-}
-/* White + */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="add"]):not(:disabled, [aria-disabled="true"])::after{
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%23ffffff'/%3E%3C/svg%3E");
-}
-
-
-/* ------------------------------ Variant: "Filter Remove" Styles ------------------------------ */
-/* Black X */
-.bs-pill:where([data-variant^="filter"][data-variant*="remove"])::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
-}
-/* White X */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled="true"])::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
-}
-/* Dark Red X */
-.bs-pill:where([data-variant^="filter"][data-variant*="remove"]):hover::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23D91214'/%3E%3C/svg%3E%0A");
-}
-/* Light Red X */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):hover::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23F15355'/%3E%3C/svg%3E%0A");
-}
-
-/* ------------------------------ Variant: "Filter Active" Styles ------------------------------ */
-.bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])) {
-  --pill-background: var(--bs-blue-base);
-  --pill-border: transparent;
-  --pill-text: var(--bs-white);
-}
-.bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])):is(:hover, :focus)  {
-  --pill-border: transparent;
-}
-:is(a, button).bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])):is(:hover, :focus)  {
-  --pill-background: var(--bs-blue-500);
-  --pill-border: transparent;
-}
-/* White X */
-.bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"]))::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23fff'/%3E%3C/svg%3E");
-}
-/* Black X */
-.bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])):where(:disabled, [aria-disabled="true"])::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
-}
-
-/* ------------------------------ Variant: "Live Now" Styles ------------------------------ */
-.bs-pill:where([data-variant^="live"]) {
-  --pill-background: var(--bs-plum-base);
-  --pill-text: var(--bs-white);
-  --pill-gap: var(--bs-space-1);
-  text-transform: uppercase;
-}
-.bs-pill:where([data-variant^="live"]):hover {
-  --pill-border: transparent;
-}
-.bs-pill:where([data-variant^="live"])::before {
-  background-color: var(--bs-red-400);
-  border: 3px solid var(--bs-white);
-  border-radius: 100%;
-  content: '';
-  height: 12px;
-  width: 12px;
-}
-
-/* ------------------------------ Variant: "Inactive" Styles ------------------------------ */
-.bs-pill:where([data-variant^="inactive"]) {
-  --pill-background: var(--bs-gray-base);
-  --pill-text: var(--bs-ink-invert);
-}
-
-
-/* ------------------------------ Disabled Styles ------------------------------ */
-/* ----- Not to be confused with data-status="disabled" or variant "inactive".  These are for link/button/filter pills. ----- */
-.bs-pill:is(:disabled, [aria-disabled="true"]) {
-  pointer-events: none;
-  color: var(--bs-ink-disabled);
-  background-color: var(--bs-bg-disabled);
-}
-
-.bs-pill:where([data-variant^="filter"]):not([data-active]):is(:disabled, [aria-disabled="true"]),
-.bs-pill:where([data-variant^="filter"])[data-active="false"]:is(:disabled, [aria-disabled="true"]) {
-  --pill-border: var(--bs-gray-400);
-}