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

package/dist/components/_tooltip.scss

@@ -1,179 +0,0 @@
-@mixin tooltip() {
-  /* -------------------- BASE STYLES -------------------- */
-.bs-tooltip {
-    display: inline-block;
-    position: relative;
-}
-
-.bs-tooltip :where(.bs-tooltip-text) {
-  align-items: center;
-  background-color: var(--bs-bg-base-elevated);
-  border-radius: 4px;
-  box-shadow: var(--bs-shadow-contentLowCenter);
-  color: var(--bs-ink-violet);
-  display: flex;
-  font-size: var(--bs-text-sm);
-  justify-content: center;
-  max-width: 16rem;
-  min-width: 4rem;
-  opacity: 0;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-top: 0.25rem;
-  position: absolute;
-  transform: scale(0);
-  transition-duration: 75ms;
-  transition-property: opacity, transform;
-  transition-timing-function: ease-in-out;
-  width: max-content;
-  z-index: 999;
-}
-
-/* -------------------- POSITION: UNDEFINED / TOP -------------------- */
-.bs-tooltip:where(:not([data-position])) :where(.bs-tooltip-text),
-.bs-tooltip:where([data-position="top"]) :where(.bs-tooltip-text) {
-  bottom: calc(100% + 0.5rem);
-  left: 50%;
-  transform-origin: bottom center;
-  transform: translateX(-50%) scale(0);
-}
-
-/* Active States */
-:where(.bs-tooltip:not([data-position])):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip:not([data-position])):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip:not([data-position]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top"])[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: translateX(-50%) scale(1);
-}
-
-/* -------------------- POSITION: BOTTOM -------------------- */
-.bs-tooltip:where([data-position="bottom"]) :where(.bs-tooltip-text) {
-  left: 50%;
-  top: calc(100% + 0.5rem);
-  transform-origin: top center;
-  transform: translateX(-50%) scale(0);
-}
-
-/* Active States */
-:where(.bs-tooltip[data-position="bottom"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom"])[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: translateX(-50%) scale(1);
-}
-
-/* -------------------- POSITION: LEFT -------------------- */
-.bs-tooltip:where([data-position="left"]) :where(.bs-tooltip-text) {
-  right: calc(100% + 0.5rem);
-  top: 50%;
-  transform-origin: center right;
-  transform: translateY(-50%) scale(0);
-}
-
-/* Active States */
-:where(.bs-tooltip[data-position="left"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="left"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="left"])[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: translateY(-50%) scale(1);
-}
-
-/* -------------------- POSITION: RIGHT -------------------- */
-.bs-tooltip:where([data-position="right"]) :where(.bs-tooltip-text) {
-  left: calc(100% + 0.5rem);
-  top: 50%;
-  transform-origin: center left;
-  transform: translateY(-50%) scale(0);
-}
-
-:where(.bs-tooltip[data-position="right"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="right"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="right"])[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: translateY(-50%) scale(1);
-}
-
-/* -------------------- POSITION: CORNERS -------------------- */
-/* top-left */
-.bs-tooltip:where([data-position="top-left"]) :where(.bs-tooltip-text) {
-  bottom: calc(100% + 0.5rem);
-  right: calc(100% + 0.5rem);
-  transform-origin: bottom right;
-}
-
-/* top-right */
-.bs-tooltip:where([data-position="top-right"]) :where(.bs-tooltip-text) {
-  bottom: calc(100% + 0.5rem);
-  left: calc(100% + 0.5rem);
-  transform-origin: bottom left;
-}
-
-/* bottom-left */
-.bs-tooltip:where([data-position="bottom-left"]) :where(.bs-tooltip-text) {
-  right: calc(100% + 0.5rem);
-  top: calc(100% + 0.5rem);
-  transform-origin: top right;
-}
-
-/* bottom-right */
-.bs-tooltip:where([data-position="bottom-right"]) :where(.bs-tooltip-text) {
-  left: calc(100% + 0.5rem);
-  top: calc(100% + 0.5rem);
-  transform-origin: top left;
-}
-
-/* Active States */
-:where(.bs-tooltip[data-position="top-left"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-left"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]):has(:focus-visible) :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]:not([data-shown="false"]))[data-shown] :where(.bs-tooltip-text) {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* -------------------- DISABLED -------------------- */
-/*
-Don't display unless data-shown is present
-This must go last to properly override the other classes
-*/
-:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-disabled]:not([data-disabled="false"]):not([data-shown])):has(:focus-visible) :where(.bs-tooltip-text) {
-  opacity: 0;
-  transform: scale(0);
-}
-:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-shown="false"][data-disabled]:not([data-disabled="false"])):has(:focus-visible) :where(.bs-tooltip-text) {
-  opacity: 0;
-  transform: scale(0);
-}
-
-/* -------------------- COMPONENT-SPECIFIC STYLES -------------------- */
-.bs-tooltip :where(.bs-tooltip-text.escaped) {
-  opacity: 0;
-  transform: scale(0.5);
-}
-
-.bs-tooltip :where(.bs-tooltip-text.escaped-x) {
-  opacity: 0;
-  transform: translateX(-50%) scale(0.5);
-}
-
-.bs-tooltip :where(.bs-tooltip-text.escaped-y) {
-  opacity: 0;
-  transform: translateY(-50%) scale(0.5);
-}
-
-  }
-  

package/dist/components/_vertical-navigation.scss

@@ -1,280 +0,0 @@
-@mixin vertical-navigation() {
-  :root {
-  --bs-vertical-nav-width: 9.875rem;
-  --bs-vertical-nav-narrow-width: 4.5rem;
-}
-
-.bs-vertical-nav {
-  --active-color: rgba(255, 255, 255, 0.25);
-  --bg-color: var(--bs-navy-base);
-  --border-color: var(--bs-border-dark);
-  --top-offset: 48px;
-  -ms-overflow-style: none;  /* Internet Explorer 10+ */
-  background-color: var(--bg-color);
-  color: var(--bs-white);
-  display: flex;
-  flex-direction: column;
-  height: 100dvh;
-  left: 0;
-  max-height: calc(100dvh - var(--top-offset));
-  opacity: 0;
-  overflow: scroll;
-  padding-bottom: 1.5rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 1.5rem;
-  position: fixed;
-  right: 0;
-  scrollbar-width: none;  /* Firefox */
-  top: var(--top-offset);
-  /* Slight delay for visibility to change prior to opacity */
-  transition: opacity 200ms ease 10ms;
-  visibility: hidden;
-  width: auto;
-  z-index: 1000;
-}
-
-.bs-vertical-nav:where([data-mobile-shown="true"]) {
-  opacity: 1;
-  visibility: visible;
-}
-
-.dark .bs-vertical-nav {
-  --active-color: rgba(255, 255, 255, 0.25);
-  --bg-color: var(--bs-bg-base);
-  --border-color: var(--bs-border-dark);
-  border-right: 1px solid var(--bs-border-medium);
-}
-
-@media (min-width: 1166px) {
-  .bs-vertical-nav {
-    border-right: 1px solid var(--bg-color);
-    opacity: 1;
-    padding-bottom: 1rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 1rem;
-    right: auto;
-    transition: none;
-    visibility: visible;
-    width: var(--bs-vertical-nav-width);
-  }
-
-  .bs-vertical-nav:where([data-narrow="true"]) {
-    width: var(--bs-vertical-nav-narrow-width);
-  }
-}
-
-.bs-vertical-nav::-webkit-scrollbar {
-  display: none;  /* Safari and Chrome */
-}
-
-/* ===== Sections ===== */
-.bs-vertical-nav :where(.bs-vertical-nav-section) {
-  border-top: 2px solid var(--border-color);
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-}
-
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(.bs-vertical-nav-section) {
-    margin-top: 0.25rem;
-  }
-}
-
-/* Don't show border if the very first item is a section */
-.bs-vertical-nav :where(ul li:first-child) {
-  border-top: none;
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  font-size: 0.75rem;
-  font-weight: 600;
-  justify-content: space-between;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.5rem;
-  padding-top: 0.5rem;
-  width: 100%;
-}
-
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
-    /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
-  }
-
-  .bs-vertical-nav :where(.bs-vertical-nav-section-toggle span:first-child) {
-    overflow: hidden;
-    text-align: start;
-    text-overflow: ellipsis;
-    /* nav width - nav left padding - nav right padding - link left padding - link right padding - caret width */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.75rem);
-  }
-}
-
-.bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
-  height: 0.75rem;
-  transform: none;
-  transition-duration: 0.2s;
-  transition-property: transform;
-  transition-timing-function: ease-in-out;
-  width: 0.75rem;
-}
-
-.bs-vertical-nav :where(.bs-vertical-nav-section[data-collapsed="true"] .bs-vertical-nav-section-toggle-caret) {
-  transform: rotate(180deg);
-}
-
-/* ===== Nav List ===== */
-.bs-vertical-nav :where(ul) {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  list-style: none;
-  margin-top: 0;
-  padding-left: 0;
-}
-
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(ul) {
-    gap: 0.25rem;
-  }
-}
-
-/* ===== Nav List Items / Links */
-.bs-vertical-nav :where(ul li a) {
-  align-items: center;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  font-size: 1rem;
-  font-weight: 400;
-  gap: 0.5rem;
-  height: 100%;
-  padding-bottom: 0.75rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.75rem;
-  width: 100%;
-}
-
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(ul li a) {
-    font-size: 0.875rem;
-    padding-bottom: 0.5rem;
-    padding-top: 0.5rem;
-    /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
-  }
-
-  /* Text overflow - normal width - no icon */
-  .bs-vertical-nav :where(ul li a:not(:has(.bs-vertical-nav-link-icon)) span:first-child) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    /* nav width - nav left padding - nav right padding - link left padding - link right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem  - 0.75rem - 0.75rem);
-  }
-
-  /* Text overflow - normal width - with icon */
-  .bs-vertical-nav :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    /* nav width - nav left padding - nav right padding - link left padding - link right padding - icon width - icon gap */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.875rem - 0.5rem);
-  }
-
-  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
-    flex-direction: column;
-    font-size: 0.6875rem;
-    gap: 0.25rem;
-    line-height: 1.3;
-    padding-bottom: 0.75rem;
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-    padding-top: 0.75rem;
-    text-align: center;
-    /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
-  }
-
-  /* Text overflow - narrow width */
-  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a:not(:has(.bs-vertical-nav-link-icon)) span:first-child),
-  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    /* nav width - nav left padding - nav right padding - link left padding  */
-    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
-  }
-}
-
-.bs-vertical-nav :where(ul li a:hover) {
-  font-weight: 600;
-}
-
-.bs-vertical-nav :where(ul li a[data-active="true"]) {
-  background-color: var(--active-color);
-  font-weight: 600;
-}
-
-.bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
-  height: 1rem;
-  width: 1rem;
-}
-
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
-    height: 0.875rem;
-    width: 0.875rem;
-  }
-
-  .bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
-/* ===== End Items ===== */
-.bs-vertical-nav :where(.bs-vertical-nav-end-items) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-top: auto;
-}
-
-.bs-vertical-nav :where(.bs-vertical-nav-end-items > *) {
-  color: var(--bs-white);
-}
-
-.bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
-  color: var(--bs-white);
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-}
-
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
-    font-size: 0.875rem;
-  }
-}
-
-.bs-vertical-nav :where(.bs-vertical-nav-end-items > button) {
-  margin-bottom: 0.5rem;
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  margin-top: 0.5rem;
-}
-
-.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-end-items) {
-  display: none;
-}
-
-  }
-  

package/dist/components/accordions.css

@@ -1,118 +0,0 @@
-.bs-accordion {
-  --accordion-link-color: var(--bs-purple-400);
-  --accordion-link-outline-color: var(--bs-blue-base);
-  --accordion-outline-color: transparent;
-  --accordion-padding-inline: 0;
-  --accordion-text-size: var(--bs-text-sm);
-  border-block: 1px solid var(--bs-border-base);
-  display: block;
-}
-
-@media (min-width: 957px) {
-  .bs-accordion {
-    --accordion-padding-inline: var(--bs-space-2);
-    --accordion-text-size: var(--bs-text-base);
-  }
-}
-
-/* Accordion Panel (Icon, Title, Caret) */
-
-.bs-accordion :where(.bs-accordion-toggle),
-.bs-accordion > :where(header) > :where(button) {
-  align-items: center;
-  background-color: var(--bs-bg-base);
-  border: 0px solid transparent;
-  border-radius: .25rem;
-  color: var(--bs-ink-base);
-  cursor: pointer;
-  display: grid;
-  font-size: var(--accordion-text-size);
-  font-weight: var(--bs-font-normal);
-  grid-template-columns: minmax(0px, auto) minmax(0px, 1fr) minmax(0px, auto);
-  grid-template-areas: "start main end";
-  line-height: 1.5;
-  outline: 2px solid var(--accordion-outline-color);
-  padding: var(--bs-space-0);
-  padding-block: var(--bs-space-f-2);
-  padding-inline: var(--accordion-padding-inline);
-  text-decoration: none;
-  width: 100%;
-}
-
-.bs-accordion :where(.bs-accordion-toggle:focus-visible),
-.bs-accordion > :where(header) > :where(button:focus-visible) {
-  --accordion-outline-color: var(--bs-blue-base);
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > *,
-.bs-accordion > :where(header) > :where(button) > * {
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > *,
-.bs-accordion > :where(header) > :where(button) > * {
-  grid-area: main;
-  margin-right: var(--bs-space-2);
-  text-align: left;
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > *,
-.bs-accordion > :where(header) > :where(button) > * {
-  vertical-align: middle;
-}
-
-@media (min-width: 957px) {
-  .bs-accordion :where(.bs-accordion-toggle) > * ,
-  .bs-accordion > :where(header) > :where(button) > * {
-    margin-right: var(--bs-space-3);
-  }
-}
-
-.bs-accordion :where(.bs-accordion-toggle) :where([data-position]),
-.bs-accordion > :where(header) > :where(button) :where([data-position]) {
-  width: var(--accordion-text-size);
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > :where([data-position="start"]),
-.bs-accordion > :where(header) > :where(button) > :where([data-position="start"]) {
-  grid-area: start;
-  margin-right: var(--bs-space-2);
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > :where([data-position="end"]),
-.bs-accordion > :where(header) > :where(button) > :where([data-position="end"]) {
-  grid-area: end;
-  transform: rotate(0);
-  transition: var(--bs-trans-rotate180);
-}
-
-.bs-accordion > :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
-  transform: rotate(180deg);
-}
-
-/* Accordion Content (the collapsible / expandible part) */
-
-.bs-accordion :where(.bs-accordion-content) {
-  display: grid;
-  font-size: var(--accordion-text-size);
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  padding-inline: var(--accordion-padding-inline);
-  transition: grid-template-rows 250ms ease-out;
-}
-
-.bs-accordion :where(.bs-accordion-content) > :where(:first-child) {
-  overflow: hidden;
-}
-
-.bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
-  grid-template-rows: 1fr;
-  padding-block-end: var(--bs-space-f-2);
-}
-
-/* Accordion Group */
-:where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
-  border-block-start-color: transparent;
-} 

package/dist/components/alert.css

@@ -1,139 +0,0 @@
-.bs-alert {
-  /* bs-blue-100 @ 10% */
-  background-color: #99cff71a;
-  border-radius: 8px;
-  border: 2px solid var(--bs-ink-blue);
-  column-gap: 0.75rem;
-  display: grid;
-  grid-template-columns: 1.125rem 1fr 1rem;
-  grid-template-areas: "icon title close"
-                       ". description ."
-                       ". action .";
-  padding: 1rem;
-}
-
-@media (min-width: 752px) {
-  .bs-alert {
-    padding: 1.5rem;
-    grid-template-columns: 1.25rem 1fr 1rem;
-    grid-template-areas: "icon title close"
-                       ". description ."
-                       ". action .";
-  }
-}
-
-@media (min-width: 752px) {
-  .bs-alert:where([data-horizontal="true"]) {
-    padding: 1rem 1.5rem;
-    grid-template-areas: "icon title action close";
-    grid-template-columns: 1.125rem max-content 1fr 1rem;
-  }
-}
-
-.bs-alert :where(.bs-alert-icon) {
-  margin-top: 0.25rem;
-  align-self: start;
-  color: var(--bs-ink-blue);
-  grid-area: icon;
-  height: 1.125rem;
-  width: 1.125rem;
-}
-
-.bs-alert :where(.bs-alert-title) {
-  font-size: 1.125rem;
-  line-height: 1.3;
-  color: var(--bs-ink-base);
-  grid-area: title;
-}
-
-@media (min-width: 752px) {
-  .bs-alert :where(.bs-alert-title) {
-    font-size: 1.25rem;
-    line-height: 1.3;
-  }
-
-  .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
-    font-size: 1.125rem;
-    line-height: 1.5;
-  }
-
-  .bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-}
-
-.bs-alert :where(.bs-alert-description) {
-  font-size: 0.875rem;
-  color: var(--bs-ink-medium);
-  grid-area: description;
-  margin-top: 0.5rem;
-}
-
-@media (min-width: 752px) {
-  .bs-alert :where(.bs-alert-description) {
-    font-size: 1rem;
-  }
-}
-
-.bs-alert:where([data-horizontal="true"]) :where(.bs-alert-description) {
-  display: none;
-}
-
-.bs-alert :where(.bs-alert-close) {
-  margin-top: 0.25rem;
-  align-self: start;
-  background-color: transparent;
-  cursor: pointer;
-  grid-area: close;
-  height: 1rem;
-  width: 1rem;
-}
-
-.bs-alert :where(.bs-alert-action) {
-  grid-area: action;
-  margin-top: 1rem;
-}
-
-@media (min-width: 752px) {
-  .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
-    margin-top: 0;
-  }
-}
-
-/* COLOR VARIANTS */
-.bs-alert:where([data-variant="success"]) {
-  /* bs-purple-100 @ 10% */
-  background-color: #e0c5ef1a;
-  border-color: var(--bs-ink-purple);
-}
-
-.bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-purple);
-}
-
-.bs-alert:where([data-variant="warning"]) {
-  /* bs-orange-100 @ 10% */
-  background-color: #f3c4a81a;
-  border-color: var(--bs-ink-orange);
-}
-.bs-alert:where([data-variant="warning"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-orange);
-}
-
-.bs-alert:where([data-variant="negative"]) {
-  /* bs-red-100 @ 10% */
-  background-color: #f8a9aa1a;
-  border-color: var(--bs-ink-red);
-}
-
-.bs-alert:where([data-variant="negative"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-red);
-}
-
-/* DARK MODE SPECIAL CASE */
-.dark .bs-alert :where(.bs-alert-action) {
-  --btn-border-color-focused: var(--bs-text-base);
-  --btn-text-color: var(--bs-text-base);
-  --btn-text-color-hovered: var(--bs-text-base);
-}