@wwtdev/bsds-css 1.0.1 → 1.1.0

package/dist/wwt-bsds.css

@@ -1,8 +1,10 @@
+/* Global Styles */
 /* VARIABLES GENERATED WITH TAILWIND CONFIG.
     Tokens location: ./tailwind.config.js */
-
 :root {
   --bs-transparent: transparent;
+  --bs-inherit: inherit;
+  --bs-current: currentColor;
   --bs-white: #ffffff;
   --bs-black: #0a0b19;
   --bs-blue-10: rgba(0, 134, 234, 0.1);
@@ -161,25 +163,22 @@
     16px 16px 32px rgba(28, 0, 135, 0.2);
   --bs-shadow-profilePhoto: inset 0px 0px 0.5em rgba(28, 0, 135, 0.25);
 }
-
 /*
 1. Prevent padding and border from affecting element width.
 2. Allow adding a border to an element by just adding a border-width. This fixes an issue 
    where Tailwind border classes no longer worked when using BS reset instead of TW's reset.
    https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally
 */
-
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
 *,
 *::before,
 *::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
   border-color: currentColor; /* 2 */
+  border-style: solid; /* 2 */
+  border-width: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
 }
-
 /* Remove default margin */
-
 body,
 h1,
 h2,
@@ -194,57 +193,44 @@ dl,
 dd {
   margin: 0;
 }
-
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-
-ul[role='list'],
-ol[role='list'] {
+ul:where([role='list']),
+ol:where([role='list']) {
   list-style: none;
 }
-
 /* Set core root defaults */
-
-html:focus-within {
+html:where(:focus-within) {
   scroll-behavior: smooth;
 }
-
 /* Set core body defaults */
-
 body {
+  line-height: 1.5;
   min-height: 100vh;
   text-rendering: optimizeSpeed;
-  line-height: 1.5;
 }
-
-/* A elements that don't have a class get default styles */
-
-a:not([class]) {
+/* Elements that don't have a class get default styles */
+a:where(:not([class])) {
   -webkit-text-decoration-skip: ink;
           text-decoration-skip-ink: auto;
 }
-
 /* Make images easier to work with */
-
 img,
 picture {
   max-width: 100%;
   display: block;
 }
-
 /* Inherit fonts for inputs */
-
-:where(input, textarea, select) {
+input,
+textarea,
+select {
   font: inherit;
 }
-
 button {
   font-family: inherit;
 }
-
 /* Remove all animations and transitions for people that prefer not to see them */
-
 @media (prefers-reduced-motion: reduce) {
-  html:focus-within {
+  html:where(:focus-within) {
     scroll-behavior: auto;
   }
 
@@ -253,11 +239,11 @@ button {
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
   }
 }
-
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
 :root,
 :host {
   --bs-bg-base: var(--bs-white);
@@ -273,14 +259,14 @@ button {
 
   /* Spacing */
   --bs-content-top: 4rem;
+  --bs-content-max-width: 72rem;
 
   /* Type */
   --bs-font-normal: 400;
   --bs-font-bold: 600;
 }
-
 .dark,
-.dark :host {
+.dark :where(:host) {
   --bs-bg-base: var(--bs-navy-500);
   --bs-bg-subtle: #2F2F51;
   --bs-bg-invert: var(--bs-white);
@@ -291,355 +277,492 @@ button {
   --bs-ink-accent: var(--bs-plum-100);
   --bs-ink-invert: var(--bs-black);
   --bs-border: var(--bs-gray-400);
+  --bs-shadow-base: rgba(0, 0, 0, 0.06);
+  --bs-shadow-invert: rgba(10, 11, 25, 0.60);
+  --bs-shadow: -4px 4px 12px var(--bs-shadow-base),
+    -8px 8px 16px var(--bs-shadow-invert);
+  --bs-shadow-contentLow: -4px 4px 12px var(--bs-shadow-base),
+    -8px 8px 16px var(--bs-shadow-invert);
+  --bs-shadow-contentLowCenter: 0px 0px 12px var(--bs-shadow-base),
+    0px 0px 16px var(--bs-shadow-invert);
+  --bs-shadow-contentMedium: -8px 8px 24px var(--bs-shadow-base),
+    -16px 16px 32px var(--bs-shadow-invert);
+  --bs-shadow-contentHigh: 0px 16px 48px var(--bs-shadow-base),
+    0px 32px 64px var(--bs-shadow-invert);
+  --bs-shadow-drawerLeft: -12px 12px 24px var(--bs-shadow-base),
+    -16px 16px 32px var(--bs-shadow-invert);
+  --bs-shadow-drawerRight: -12px 12px 24px var(--bs-shadow-base),
+    16px 16px 32px var(--bs-shadow-invert);
 }
-
 body,
 :host {
   background-color: var(--bs-bg-base);
   color: var(--bs-ink-light);
 }
-
 :target {
   scroll-margin-top: var(--bs-content-top);
 }
-
 ::-moz-selection {
   background-color: var(--bs-royal-400);
   color: var(--bs-white);
 }
-
 ::selection {
   background-color: var(--bs-royal-400);
   color: var(--bs-white);
 }
-
 [hidden] {
   display: none;
 }
-
 hr {
+  background: var(--bs-border);
   border: 0;
   height: 1px;
-  background: var(--bs-border);
 }
-
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
 body {
-  font-weight: 400;
   font-family: 'Roobert', sans-serif;
   font-size: var(--bs-text-base);
+  font-weight: 400;
 }
-
 /* Default Element/data-variant Styles */
-
 [data-variant^="heading-xl"] {
   font-size: var(--bs-text-4xl);
   font-weight: 400;
   line-height: var(--bs-leading-sm);
 }
-
-h1, [data-variant^="heading-1"] {
+h1,
+[data-variant^="heading-1"] {
   font-size: var(--bs-text-3xl);
   font-weight: 400;
   line-height: var(--bs-leading-sm);
 }
-
-h2, [data-variant^="heading-2"] {
+h2,
+[data-variant^="heading-2"] {
   font-size: var(--bs-text-2xl);
   font-weight: 600;
   line-height: var(--bs-leading-sm);
 }
-
-h3, [data-variant^="heading-3"] {
+h3,
+[data-variant^="heading-3"] {
   font-size: var(--bs-text-xl);
   font-weight: 600;
   line-height: var(--bs-leading-sm);
 }
-
-h4, [data-variant^="heading-4"] {
+h4,
+[data-variant^="heading-4"] {
   font-size: var(--bs-text-lg);
   font-weight: 600;
 }
-
-h5, [data-variant^="heading-5"] {
+h5,
+[data-variant^="heading-5"] {
   font-size: var(--bs-text-md);
   font-weight: 600;
 }
-
-h6, [data-variant^="heading-6"] {
+h6,
+[data-variant^="heading-6"] {
   font-size: var(--bs-text-base);
   font-weight: 600;
 }
-
 .prose {
   font-size: var(--bs-text-md);
   max-width: 70ch;
 }
-
-.prose :where(h1, h2, h3, h4, h5, h6):not([data-color]) {
+:where(.prose) :is(h1, h2, h3, h4, h5, h6):where(:not([data-color])) {
   color: var(--bs-ink-base);
 }
-
 [data-variant^="default"] {
   font-size: var(--bs-text-base);
 }
-
-.bs-meta, [data-variant^="meta"] {
+.bs-meta,
+[data-variant^="meta"] {
   font-size: var(--bs-text-xs);
   font-weight: 600;
 }
-
-:where(.prose blockquote) {
+:where(.prose) blockquote {
   border-left: 4px solid var(--bs-plum-200);
   color: var(--bs-plum-200);
   font-style: italic;
   font-weight: 400;
   padding-left: var(--bs-space-4);
 }
-
 .prose:where([data-width="wide"]) {
   max-width: 90%;
 }
-
-.prose:where([data-width="wide"]) > :is(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol) {
+.prose:where([data-width="wide"]) > :where(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol) {
   max-width: 48rem;
 }
-
 /* data-font-size Styles */
-
-:where([data-font-size^='4xl']) {
+[data-font-size^='4xl'] {
   font-size: var(--bs-text-4xl);
   line-height: var(--bs-leading-sm);
 }
-
-:where([data-font-size^='3xl']) {
+[data-font-size^='3xl'] {
   font-size: var(--bs-text-3xl);
   line-height: var(--bs-leading-sm);
 }
-
-:where([data-font-size^='2xl']) {
+[data-font-size^='2xl'] {
   font-size: var(--bs-text-2xl);
   line-height: var(--bs-leading-sm);
 }
-
-:where([data-font-size^='xl']) {
+[data-font-size^='xl'] {
   font-size: var(--bs-text-xl);
   line-height: var(--bs-leading-sm);
 }
-
-:where([data-font-size^='lg']) {
+[data-font-size^='lg'] {
   font-size: var(--bs-text-lg);
 }
-
-:where([data-font-size^='md']) {
+[data-font-size^='md'] {
   font-size: var(--bs-text-md);
 }
-
-:where([data-font-size^='base']) {
+[data-font-size^='base'] {
   font-size: var(--bs-text-base);
 }
-
-:where([data-font-size^='sm']) {
+[data-font-size^='sm'] {
   font-size: var(--bs-text-sm);
 }
-
-:where([data-font-size^='xs']) {
+[data-font-size^='xs'] {
   font-size: var(--bs-text-xs);
 }
-
 /* data-color Styles */
-
-:where([data-color^='base']) {
+[data-color^='base'] {
   color: var(--bs-ink-base);
 }
-
-:where([data-color^='medium']) {
+[data-color^='medium'] {
   color: var(--bs-ink-medium);
 }
-
-:where([data-color^='light']) {
+[data-color^='light'] {
   color: var(--bs-ink-light);
 }
-
-:where([data-color^='accent']) {
+[data-color^='accent'] {
   color: var(--bs-ink-accent);
 }
-
 /* data-weight Styles */
-
-:where([data-weight^='normal'], [data-weight^='400']) {
+[data-weight^='normal'],
+[data-weight^='400'] {
   font-weight: 400;
 }
-
-:where([data-weight^='bold'], [data-weight^='600']) {
+[data-weight^='bold'],
+[data-weight^='600'] {
   font-weight: 600;
 }
-
-body:where(.fluid) {
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+:where(body).fluid {
   font-size: var(--bs-text-f-md);
 }
-
 /* Defaults & Variants */
-
-:where(.fluid) h1,
-:where(.fluid) [data-variant^='heading-1'] {
+.fluid :where(h1),
+.fluid :where([data-variant^='heading-1']) {
   font-size: var(--bs-text-f-3xl);
 }
-
-:where(.fluid) h2,
-:where(.fluid) [data-variant^='heading-2'] {
+.fluid :where(h2),
+.fluid :where([data-variant^='heading-2']) {
   font-size: var(--bs-text-f-2xl);
 }
-
-:where(.fluid) h3,
-:where(.fluid) [data-variant^='heading-3'] {
+.fluid :where(h3),
+.fluid :where([data-variant^='heading-3']) {
   font-size: var(--bs-text-f-xl);
 }
-
-:where(.fluid) h4,
-:where(.fluid) [data-variant^='heading-4'] {
+.fluid :where(h4),
+.fluid :where([data-variant^='heading-4']) {
   font-size: var(--bs-text-f-lg);
 }
-
-:where(.fluid) h5,
-:where(.fluid) [data-variant^='heading-5'] {
+.fluid :where(h5),
+.fluid :where([data-variant^='heading-5']) {
   font-size: var(--bs-text-f-md);
 }
-
-:where(.fluid) h6,
-:where(.fluid) [data-variant^='heading-6'] {
+.fluid :where(h6),
+.fluid :where([data-variant^='heading-6']) {
   font-size: var(--bs-text-f-sm);
 }
-
-:where(.fluid).prose,
-:where(.fluid) .prose,
-:where(.fluid) [data-variant^='default'] {
+.fluid:where(.prose),
+.fluid :where(.prose),
+.fluid :where([data-variant^='default']) {
   font-size: var(--bs-text-f-md);
 }
-
-:where(.fluid) .bs-meta,
-:where(.fluid) [data-variant^='meta'] {
+.fluid :where(.bs-meta),
+.fluid :where([data-variant^='meta']) {
   font-size: var(--bs-text-f-xs);
 }
-
 /* Fluid data-font-size Styles */
-
-:where(.fluid) [data-font-size^='4xl'] {
+.fluid :where([data-font-size^='4xl']) {
   font-size: var(--bs-text-f-4xl);
 }
-
-:where(.fluid) [data-font-size^='3xl'] {
+.fluid :where([data-font-size^='3xl']) {
   font-size: var(--bs-text-f-3xl);
 }
-
-:where(.fluid) [data-font-size^='2xl'] {
+.fluid :where([data-font-size^='2xl']) {
   font-size: var(--bs-text-f-2xl);
 }
-
-:where(.fluid) [data-font-size^='xl'] {
+.fluid :where([data-font-size^='xl']) {
   font-size: var(--bs-text-f-xl);
   line-height: var(--bs-leading-sm);
 }
-
-:where(.fluid) [data-font-size^='lg'] {
+.fluid :where([data-font-size^='lg']) {
   font-size: var(--bs-text-f-lg);
 }
-
-:where(.fluid) [data-font-size^='md'] {
+.fluid :where([data-font-size^='md']) {
   font-size: var(--bs-text-f-md);
 }
-
-:where(.fluid) [data-font-size^='base'] {
+.fluid :where([data-font-size^='base']) {
   font-size: var(--bs-text-f-base);
 }
-
-:where(.fluid) [data-font-size^='sm'] {
+.fluid :where([data-font-size^='sm']) {
   font-size: var(--bs-text-f-sm);
 }
-
-:where(.fluid) [data-font-size^='xs'] {
+.fluid :where([data-font-size^='xs']) {
   font-size: var(--bs-text-f-xs);
 }
-
-/* Using :where() here for no additional specificity */
-
-:where(.prose) a {
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+:where(a) {
   border-radius: 0.25rem; /* gives outlines rounded corners in modern browsers */
   -webkit-box-decoration-break: clone;
           box-decoration-break: clone;
   color: var(--bs-purple-400);
+  outline-color: var(--bs-blue-400);
   text-decoration: underline;
   text-underline-offset: 2px;
   transition: all 0.15s ease-in-out;
-  outline-color: var(--bs-blue-400);
 }
-
-:where(.prose) a:where(:not(.button)):hover,
-:where(.prose) a:where(:not(.button)):focus,
-:where(.prose) a:where(:not(.button)):focus-visible {
+:where(a:hover),
+:where(a:focus),
+:where(a:focus-visible) {
   color: var(--bs-plum-400);
   text-decoration-color: var(--bs-purple-400);
 }
-
-:where(.prose) a:focus-visible {
+:where(a:focus-visible) {
   outline-offset: var(--bs-space-1);
   outline-style: solid;
   outline-width: 2px;
 }
-
-:where(.prose) a:focus:where(:not(:focus-visible)) {
+:where(a:focus:not(:focus-visible)) {
   outline: none;
 }
-
-/* dark links still need .dark because we don't want them overwritten by the light theme link styles in applications */
-
-.dark :where(.prose) a:not(.button, .bs-pill) {
+/* Dark mode styling */
+:where(.dark a) {
   color: var(--bs-purple-200);
   outline-color: var(--bs-blue-300);
 }
-
-.dark :where(.prose) a:where(:not(.button)):hover,
-.dark :where(.prose) a:where(:not(.button)):focus,
-.dark :where(.prose) a:where(:not(.button)):focus-visible {
+:where(.dark a:hover),
+:where(.dark a:focus),
+:where(.dark a:focus-visible) {
   color: var(--bs-pink-300);
   text-decoration-color: var(--bs-purple-200);
 }
-
-.dark :where(.prose) a:focus-visible {
-  outline-offset: var(--bs-space-1);
-}
-
-.dark :where(.prose) a:focus:where(:not(:focus-visible)) {
-  outline: none;
-}
-
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
 .box-shadow {
   box-shadow: var(--bs-shadow);
 }
-
 .box-shadow:where([data-variant="center"]) {
   box-shadow: var(--bs-shadow-contentLowCenter);
 }
-
 .box-shadow:where([data-variant="medium"]) {
   box-shadow: var(--bs-shadow-contentMedium);
 }
-
 .box-shadow:where([data-variant="high"]) {
   box-shadow: var(--bs-shadow-contentHigh);
 }
-
 .box-shadow:where([data-variant="left-panel"]) {
   box-shadow: var(--bs-shadow-drawerLeft);
 }
-
 .box-shadow:where([data-variant="right-panel"]) {
   box-shadow: var(--bs-shadow-drawerRight);
 }
-
 .box-shadow:where([data-variant="profile"]) {
   box-shadow: var(--bs-shadow-profilePhoto);
 }
-
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+.box {
+  background: var(--bg-color, var(--bs-bg-subtle));
+  border-radius: 0.25rem;
+  padding: var(--box-space, var(--bs-space-6));
+}
+.box:where([data-invert]) {
+  --bg-color: var(--bs-bg-invert);
+  color: var(--bs-ink-invert);
+}
+:where(.fluid) .box {
+  padding: var(--box-space, var(--bs-space-f-6));
+}
+.cluster {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cluster-space, var(--bs-space-6));
+  justify-content: flex-start;
+}
+.cluster:where([data-variant^="brick"]) > * {
+  align-self: stretch;
+  flex-grow: 1;
+}
+.cluster:where([data-gap="tight"]) {
+  gap: var(--cluster-space, var(--bs-space-2));
+}
+:where(.fluid) .cluster {
+  gap: var(--cluster-space, var(--bs-space-f-6));
+}
+:where(.fluid) .cluster:where([data-gap="tight"]) {
+  gap: var(--cluster-space, var(--bs-space-f-2));
+}
+.flow > * + * {
+  margin-top: var(--flow-space, 1.25em);
+}
+.flow > :where(h1, h2, h3, h4, h5, h6) {
+  --flow-space: 2em;
+}
+.flow > :where(hr) + * {
+  --flow-space: 1.5em;
+}
+.flow > :where(h1, h2, h3, h4, h5, h6) + * {
+  --flow-space: 0.5em;
+}
+.flow > :where(ul, ol) > :where(li) {
+  margin-top: var(--flow-space, 0.625em);
+}
+.region {
+  padding-block: var(--region-space, var(--bs-space-6));
+}
+.region:where([data-space^='sm']) {
+  padding-block: var(--bs-space-3);
+}
+.region:where([data-space^='lg']) {
+  padding-block: var(--bs-space-12);
+}
+:where(.fluid) .region {
+  padding-block: var(--region-space, var(--bs-space-f-6));
+}
+:where(.fluid) .region:where([data-space^='sm']) {
+  padding-block: var(--bs-space-f-3);
+}
+:where(.fluid) .region:where([data-space^='lg']) {
+  padding-block: var(--bs-space-f-12);
+}
+.wrapper {
+  margin-inline: auto;
+  max-width: var(--max-width, 75rem);
+  min-width: 0;
+  padding-inline: var(--wrapper-space, var(--bs-space-6));
+  position: relative;
+  width: 100%;
+}
+:where(.fluid) .wrapper {
+  padding-inline: var(--wrapper-space, var(--bs-space-f-6));
+}
+.wrapper:where([data-flush]) {
+  padding-inline: 0;
+}
+/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.measure-compact {
+  max-width: 40ch;
+}
+.measure-short {
+  max-width: 50ch;
+}
+.measure-long {
+  max-width: 70ch;
+}
+/* Component Styles */
+.bs-accordion {
+  --accordion-link-color: var(--bs-purple-400);
+  --accordion-link-outline-color: var(--bs-blue-400);
+  --accordion-outline-color: transparent;
+  --accordion-padding-inline: 0;
+  --accordion-text-size: var(--bs-text-sm);
+  border-block: 1px solid var(--bs-border);
+  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(header 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-block: var(--bs-space-f-2);
+  padding-inline: var(--accordion-padding-inline);
+  width: 100%;
+}
+.bs-accordion :where(header button:focus-visible) {
+  --accordion-outline-color: var(--bs-blue-400);
+}
+.bs-accordion :where(header button) > * {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+.bs-accordion :where(header button) :where([data-position]) {
+  width: var(--accordion-text-size);
+}
+.bs-accordion :where(header button) > :where([data-position="start"]) {
+  grid-area: start;
+  margin-right: var(--bs-space-2);
+}
+.bs-accordion :where(header button) > :where([data-position="end"]) {
+  grid-area: end;
+  transform: rotate(0);
+  transition: transform 250ms ease-out;
+}
+.bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
+  transform: rotate(180deg);
+}
+.bs-accordion :where(header button) > :where(h2, h3, h4, h5) {
+  grid-area: main;
+  margin-right: var(--bs-space-2);
+  text-align: left;
+}
+.bs-accordion :where(header button) > :where(h2, h3, h4, h5) :where(*) {
+  vertical-align: middle;
+}
+@media (min-width: 957px) {
+  .bs-accordion :where(header button) > :where(h2, h3, h4, h5) {
+    margin-right: var(--bs-space-3);
+  }
+}
+/* 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;
+  -webkit-padding-after: var(--bs-space-f-2);
+          padding-block-end: var(--bs-space-f-2);
+}
+/* Accordion Group */
+:where(.bs-accordion[data-stacked]) + .bs-accordion:where([data-stacked]) {
+  border-block-start-color: transparent;
+}
 .bs-badge[data-position^='left']::before,
 .bs-badge:where(:not([data-position^='left']))::after {
   align-items: center;
@@ -657,12 +780,10 @@ body:where(.fluid) {
   vertical-align: top;
   width: 6px;
 }
-
 .bs-pill .bs-badge::before,
 .bs-pill .bs-badge::after {
   font-size: 0.8125em;
 }
-
 .bs-badge[data-count]:where([data-position^='left'])::before,
 .bs-badge[data-count]:where(:not([data-position^='left']))::after {
   color: white;
@@ -674,36 +795,81 @@ body:where(.fluid) {
   vertical-align: unset;
   width: auto;
 }
-
 .bs-badge[data-count]::before {
   margin-right: 0.25rem;
 }
-
 .bs-badge[data-count]::after {
   margin-left: 0.25rem;
 }
-
 .bs-badge[data-count='0']::before,
 .bs-badge[data-count='0']::after {
   display: none;
 }
-
 .bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::before,
 .bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::after {
   display: inline-flex;
 }
-
 .bs-badge[data-badge-color^='blue']::before,
 .bs-badge[data-badge-color^='blue']::after {
   background: var(--bs-blue-500);
 }
-
 .bs-badge[data-badge-color^='white']::before,
 .bs-badge[data-badge-color^='white']::after {
   background: white;
   color: var(--badge-text, var(--bs-black));
 }
-
+.bs-banner {
+  background-color: var(--bs-bg-invert-subtle);
+  color: var(--bs-gray-100);
+  display: flex;
+  justify-content: center;
+  padding-bottom: 1rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 1rem;
+}
+.bs-banner:where([data-dismissed]) {
+  display: none;
+}
+:where(.dark) .bs-banner {
+  color: var(--bs-black);
+}
+.bs-banner :where(.bs-banner-content) {
+  align-items: center;
+  display: flex;
+  /* Content locks at globally configured width */
+  max-width: var(--bs-content-max-width);
+  width: 100%;
+}
+.bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
+  /* Do not display warning icon on smaller screens */
+  display: none;
+  margin-right: 0.625rem;
+}
+.bs-banner :where(.bs-banner-content p) {
+  flex-grow: 1;
+  padding-right: 1.25rem;
+}
+.bs-banner :where(.bs-banner-content p a) {
+  color: var(--bs-pink-200);
+  text-decoration: none;
+}
+:where(.dark) .bs-banner :where(.bs-banner-content p a) {
+  color: var(--bs-pink-500);
+}
+.bs-banner :where(.bs-banner-content p a:hover) {
+  text-decoration: underline;
+}
+.bs-banner :where(.bs-banner-content button) {
+  background-color: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+@media (min-width: 957px) {
+  .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
+    display: inline-flex;
+  }
+}
 :where(button) {
   background-color: inherit;
   border-color: transparent;
@@ -713,7 +879,6 @@ body:where(.fluid) {
   padding: var(--bs-space-0);
   text-decoration: none;
 }
-
 .bs-button {
   --btn-main: var(--bs-blue-400);
   --btn-secondary: var(--bs-blue-300);
@@ -736,20 +901,16 @@ body:where(.fluid) {
   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);
 }
-
 /* Button Focus Styles */
-
 .bs-button::before {
   border-color: transparent;
   border-radius: 0.5rem;
@@ -762,23 +923,18 @@ body:where(.fluid) {
   transition: border-color 0.125s ease-in-out;
   width: calc(100% + 0.5rem);
 }
-
 .bs-button:focus::before {
   border-color: var(--btn-main);
 }
-
 .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]) {
   --btn-light: var(--bs-blue-10);
   --btn-secondary: var(--bs-blue-10);
@@ -786,61 +942,50 @@ body:where(.fluid) {
   box-shadow: inset 0 0 0 1px var(--btn-main);
   color: var(--btn-main);
 }
-
 .bs-button:where([data-ghost])::before {
   border-radius: 0.4375rem;
 }
-
 .bs-button:where([data-ghost]):hover,
 .bs-button:where([data-ghost]):focus {
   background-color: var(--btn-light);
 }
-
 .bs-button:where([data-ghost]):active {
   box-shadow:
     inset 0 0 0 1px var(--btn-main),
     inset 0px 0px 4px 1px var(--btn-highlight);
 }
-
 /* Button type */
-
 .bs-button:where([data-variant^='secondary']) {
   --btn-main: var(--bs-plum-400);
   --btn-secondary: var(--bs-plum-300);
   --btn-light: var(--bs-plum-10);
   --btn-highlight: var(--bs-plum-100);
 }
-
 .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-button:where([data-variant^='positive']) {
   --btn-main: var(--bs-purple-400);
   --btn-secondary: var(--bs-purple-300);
   --btn-light: var(--bs-purple-10);
   --btn-highlight: var(--bs-purple-100);
 }
-
 .bs-button:where([data-variant^='warning']) {
   --btn-main: var(--bs-orange-warning);
   --btn-secondary: var(--bs-orange-300);
   --btn-light: var(--bs-orange-10);
   --btn-highlight: var(--bs-orange-100);
 }
-
 .bs-button:where([data-variant^='negative']) {
   --btn-main: var(--bs-red-400);
   --btn-secondary: var(--bs-red-300);
   --btn-light: var(--bs-red-10);
   --btn-highlight: var(--bs-red-100);
 }
-
 /* Text Button */
-
 .bs-button:where([data-text]) {
   background-color: transparent;
   color: var(--bs-blue-500);
@@ -849,68 +994,56 @@ body:where(.fluid) {
   font-weight: 400;
   line-height: 150%;
 }
-
 .bs-button:where([data-text]):hover {
+  color: var(--bs-blue-400);
   background-color: transparent;
   text-decoration: underline;
 }
-
+.bs-button:where([data-text]):has(svg):hover {
+  text-decoration: none;
+}
 .bs-button:where([data-text]):active {
   box-shadow: none;
 }
-
 /* Button Size */
-
 .bs-button:where([data-size^='sm']) {
   font-size: var(--bs-text-sm);
 }
-
 .bs-button:where([data-text][data-size^='sm']) {
   font-size: var(--bs-text-base);
 }
-
 /* Disabled Styling */
-
 :where(button:disabled),
 .bs-button:where([aria-disabled='true']) /* for links as buttons */ {
   pointer-events: none;
 }
-
 .bs-button:where(:disabled),
 .bs-button:where([aria-disabled='true']) {
   color: var(--bs-gray-400);
   background-color: var(--bs-gray-200);
 }
-
 .bs-button:where([data-ghost]):disabled,
 .bs-button:where([data-ghost])[aria-disabled='true'] {
   box-shadow: inset 0 0 0 1px var(--bs-gray-400);
 }
-
 .bs-button:where([data-text]):disabled,
 .bs-button:where([data-text][aria-disabled='true']) {
   background-color: transparent;
 }
-
 /* Icon Height */
-
 .bs-button :where(svg:not([height])) {
   height: var(--bs-text-base);
 }
-
 .bs-button:where([data-size^='sm']) :where(svg:not([height])) {
   height: var(--bs-text-xs);
 }
-
 /* links as buttons */
-
 a.bs-button {
   align-items: center;
   display: inline-flex;
   outline: none;
   vertical-align: middle;
 }
-
 :where(label, legend) {
   --label-color: var(--bs-ink-base);
 
@@ -921,30 +1054,25 @@ a.bs-button {
   line-height: var(--bs-leading-base);
   width: 100%;
 }
-
 :where([data-required]) {
-  color: var(--bs-red-400);
+  color: var(--bs-red-500);
 }
-
 :where(label[data-disabled], [data-disabled] [data-required], [data-disabled] label) {
   --label-color: var(--bs-ink-light);
 }
-
 :where([data-required]) {
-  color: var(--bs-red-400);
+  color: var(--bs-red-500);
+  font-weight: var(--bs-font-bold, 600);
 }
-
 :where([data-disabled], [data-disabled] [data-required]) {
   color: var(--bs-gray-400);
 }
-
-:where(label + input, label > input):not([type^='checkbox'], [type^='radio']),
+: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;
 }
-
-input:not([type^='checkbox'], [type^='radio'], [type^='file'], [type^='range']),
+input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea, select {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -955,78 +1083,68 @@ textarea, select {
   color: var(--bs-ink-base);
   font-size: var(--bs-text-base);
   font-weight: 400;
+  height: 2.5rem;
   line-height: var(--bs-leading-base);
-  min-height: 40px;
-  padding: 0.5rem 0.75rem;
+  min-height: 2.5rem;
+  padding-inline: 0.75rem;
   width: 100%;
 }
-
+textarea {
+  height: auto;
+  padding-block: 0.5rem;
+  resize: vertical;
+}
 /* Generally applicable (all input types) */
-
 :is(input, textarea, select)::-moz-placeholder {
   color: var(--bs-violet-200);
   opacity: 1;
 }
-
 :is(input, textarea, select)::placeholder {
   color: var(--bs-violet-200);
   opacity: 1;
 }
-
-:is(input, textarea, select):focus {
+:is(input:where(:not([type='checkbox'], [type='radio']), textarea, select):where(:focus)) {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-400));
   outline: 2px solid transparent;
 }
-
-:where(.box) :is(input, textarea, select):focus {
+:where(.box) :is(input, textarea, select):where(:focus) {
   --offset-color: var(--bs-bg-subtle);
 }
-
-:where(.box[data-invert]) :is(input, textarea, select):focus {
+:where(.box[data-invert]) :is(input, textarea, select):where(:focus) {
   --offset-color: var(--bs-bg-invert);
 }
-
 :is(input, textarea, select):where([data-error]) {
   --outline-color: var(--bs-red-200);
 }
-
-:is(input, textarea, select):disabled {
+:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled) {
   background-color: var(--bs-gray-200);
   border-color: var(--bs-gray-400);
   color: var(--bs-gray-400);
 }
-
 /*
 Removes the built-in 'margin' on bottom of textarea
 see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 :has not fully supported yet but will work for most
 */
-
 :has(> textarea:only-child) {
   display: block;
   line-height: 0;
 }
-
 /* chrome user agent styling was applying opacity: 0.7 */
-
 :where(select:disabled) {
   opacity: 1;
 }
-
 :is(input, textarea, select):disabled::-moz-placeholder, :is(input, textarea, select)[disabled]::-moz-placeholder {
   color: var(--bs-gray-400);
   opacity: 1;
 }
-
 :is(input, textarea, select):disabled::placeholder,
 :is(input, textarea, select)[disabled]::placeholder {
   color: var(--bs-gray-400);
   opacity: 1;
 }
-
 /* Select */
-
 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");
@@ -1034,101 +1152,90 @@ select {
   background-repeat: no-repeat;
   background-size: 1em 1em;
 }
-
 .dark 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");
 }
-
 .dark 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");
 }
-
 /* Errors and Messages */
-
 :is(input, select, textarea):where([data-error]) {
   --input-border: var(--bs-red-400);
 }
-
 /* Fieldset */
-
 :where(fieldset) {
   border: none;
   margin-left: 0;
   margin-right: 0;
   padding: 0;
 }
-
 :where(fieldset legend) {
   margin-bottom: 0.25rem;
   padding: 0;
 }
-
 .bs-field-details {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  gap: var(--bs-space-2);
   padding: 0 0.75rem;
   margin-top: 0.5rem;
 }
-
 :where(textarea, bs-textarea) + .bs-field-details {
   margin-top: 0.25rem;
 }
-
 .bs-field-details :where(.bs-character-count:first-child) {
   margin-left: auto;
 }
-
 .bs-character-count {
   color: var(--bs-ink-base);
   font-size: var(--bs-text-xs);
   font-weight: 400;
   text-align: right;
+  white-space: nowrap;
 }
-
 :where([disabled], [data-disabled]) + .bs-character-count,
 :where([disabled], [data-disabled]) .bs-character-count,
 .bs-character-count:where([data-disabled]) {
   color: var(--bs-gray-400);
 }
-
 .bs-character-count:where([data-error]) {
   color: var(--bs-red-400);
 }
-
 /* Containers and Labels for Checkbox/Radio */
-
 .bs-boolean {
   display: flex;
   align-items: center;
   font-size: var(--bs-text-base);
   font-weight: 400;
-  gap: 0.5em;
   line-height: 115%;
 }
-
 .bs-boolean:where([data-size='sm']) input {
   width: var(--bs-text-xs);
   height: var(--bs-text-xs);
 }
-
 .bs-boolean label {
   font-size: var(--bs-text-base);
   font-weight: 400;
   line-height: 1.5;
   width: auto;
 }
-
+/* not using gap on .bs-boolean due to dead click zone */
+.bs-boolean label {
+  -webkit-padding-end: 0.5em;
+          padding-inline-end: 0.5em;
+}
+.bs-boolean input + label {
+  padding-inline: 0.5em 0;
+}
 .bs-boolean:where([data-size='sm']),
 .bs-boolean:where([data-size='sm']) label {
   font-size: var(--bs-text-xs);
 }
-
 /* Checkbox & Radio Input */
-
-:where(input[type^='checkbox'], input[type^='radio']) {
+:where(input[type='checkbox'], input[type='radio']) {
   --box-shadow: var(--bs-ink-base);
 
   -webkit-appearance: none;
@@ -1145,21 +1252,19 @@ select {
   position: relative;
   width: 1rem;
 }
-
-:where(input[type^='checkbox'], input[type^='radio']):focus {
+:where(input[type='checkbox'], input[type='radio']):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-400));
+    outline: 2px solid transparent;
 }
-
-:where(input[type^='checkbox']) {
+:where(input[type='checkbox']) {
   border-radius: 0.125rem;
 }
-
-:where(input[type^='radio']) {
+:where(input[type='radio']) {
   border-radius: 50%;
 }
-
+/* Checkbox's checkmark  */
 input:where([type='checkbox'])::before {
   --filled-size: 1rem;
   --check-fill-color: var(--bs-blue-400);
@@ -1171,8 +1276,7 @@ input:where([type='checkbox'])::before {
   visibility: hidden;
   width: var(--filled-size);
 }
-
-input:where([type^='checkbox'])::after {
+input:where([type='checkbox'])::after {
   border: solid var(--bs-white);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
@@ -1185,7 +1289,14 @@ input:where([type^='checkbox'])::after {
   visibility: hidden;
   width: 0.375em;
 }
-
+input:where([type='checkbox']):where(:indeterminate)::after {
+  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 {
   --filled-size: 1rem;
   --radio-fill-color: var(--bs-blue-400);
@@ -1198,7 +1309,6 @@ input:where([type='radio'])::before {
   visibility: hidden;
   width: var(--filled-size);
 }
-
 input:where([type='radio'])::after {
   --inner-size: 0.375rem;
   --inner-fill-color: var(--bs-white);
@@ -1215,46 +1325,40 @@ input:where([type='radio'])::after {
   visibility: hidden;
   width: var(--inner-size);
 }
-
-input:where([type='checkbox']:checked, [type='radio']:checked)::before,
-input:where([type='checkbox']:checked, [type='radio']:checked)::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 {
   visibility: visible;
 }
-
 .bs-boolean:where([data-size='sm']) input::before {
   --filled-size: var(--bs-text-xs);
 }
-
 .bs-boolean:where([data-size='sm']) input[type='checkbox']::after {
   height: 0.5625rem;
   width: 0.3125rem;
 }
-
+.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after  {
+  height: 0.125rem;
+  width: .75em;
+}
 .bs-boolean:where([data-size='sm']) input[type='radio']::after {
   --inner-size: 0.25rem;
 }
-
 /* Disabled State */
-
 input:where([type='checkbox'], [type='radio']):disabled {
   --box-shadow: var(--bs-gray-400);
   background-color: transparent;
 }
-
-input:where([type='checkbox']):checked:disabled::before {
+input:where([type='checkbox']):checked:disabled::before,
+input:where([type='checkbox']):indeterminate:disabled::before {
   --check-fill-color: var(--bs-gray-400);
 }
-
 input:where([type='radio']):checked:disabled::before {
   --radio-fill-color: var(--bs-gray-400);
 }
-
 /* Error state */
-
-input:where([type^='checkbox'], [type^='radio'])[data-error] {
+input:where([type='checkbox'], [type='radio'])[data-error] {
   --box-shadow: var(--bs-red-400);
 }
-
 .bs-switch {
   --box-shadow: var(--bs-ink-base);
   --ball-background: var(--bs-white);
@@ -1270,17 +1374,11 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   height: calc(var(--ball-diameter) + var(--offset) * 2);
   position: relative;
 }
-
 .bs-switch:where([data-size="sm"]) {
   --ball-diameter: var(--bs-text-xs);
   --inner-text-width: .75rem;
   --inner-text-padding: 0.375rem;
 }
-
-:where(.dark) .bs-switch:where(:not([data-disabled])) {
-  --switch-background: var(--bs-blue-400);
-}
-
 .bs-switch input,
 .bs-switch:where([data-size="sm"]) input {
   cursor: pointer;
@@ -1289,7 +1387,6 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   position: absolute;
   width: 100%;
 }
-
 .bs-switch span {
   align-items: center;
   background-color: var(--switch-background);
@@ -1303,9 +1400,11 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   width: calc(var(--ball-diameter) * 2 + var(--offset) * 2);
   height: calc(var(--ball-diameter) + var(--offset) * 2);
 }
-
+.bs-switch input:where(:checked) ~ span,
+.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
+  --switch-background: var(--bs-blue-400);
+}
 /* Toggle "ball" */
-
 .bs-switch span::before {
   background-color: var(--ball-background);
   border-radius: 50%;
@@ -1320,24 +1419,19 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   width: var(--ball-diameter);
   z-index: 2;
 }
-
 .bs-switch input:where(:checked) ~ span::before,
 .bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span::before {
   transform: translate(var(--ball-diameter), -50%);
 }
-
 .bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::before,
 .bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::before {
   transform: translate(calc(var(--ball-diameter) + var(--inner-text-width)), -50%);
 }
-
 /* Inner "on/off" text */
-
 .bs-switch span:where([data-inner-on-label][data-inner-off-label]) {
   color: white;
   width: calc(var(--ball-diameter) * 2 + var(--offset) * 2 + var(--inner-text-width));
 }
-
 .bs-switch span::after {
   align-items: center;
   color: var(--ball-background);
@@ -1351,46 +1445,36 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   top: 0;
   width: 100%;
 }
-
 .bs-switch input:where(:not(:checked)) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
 .bs-switch:where([aria-pressed="false"]) span:where([data-inner-on-label][data-inner-off-label])::after  {
   content: attr(data-inner-off-label);
   justify-content: flex-end;
 }
-
 .bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
 .bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::after {
   content: attr(data-inner-on-label);
   justify-content: flex-start;
 }
-
 /* Focus state */
-
-.bs-switch:where(:focus-within) span {
+.bs-switch :where(input:focus-visible) + span {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-400));
   outline: 2px solid transparent;
 }
-
-:where(.box) .bs-switch:where(:focus-within) span {
+:where(.box) .bs-switch :where(input:focus-visible) + span {
   --offset-color: var(--bs-bg-subtle);
 }
-
-:where(.box[data-invert]) .bs-switch:where(:focus-within) span {
+:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + span {
   --offset-color: var(--bs-bg-invert);
 }
-
 /* Disabled state */
-
 .bs-switch:where([data-disabled]) {
   --ball-background: var(--bs-gray-400);
   --switch-background: var(--bs-gray-200);
 }
-
 .bs-switch input:where(:disabled) {
   cursor: default;
 }
-
 .bs-hint {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
@@ -1398,11 +1482,9 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   margin: 0;
   list-style: none;
 }
-
 .bs-hint:where([data-error]) {
   color: var(--bs-red-400);
 }
-
 .bs-pill {
   --pill-background: var(--bs-bg-subtle);
   --pill-border: transparent;
@@ -1425,63 +1507,48 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   text-decoration: none;
   vertical-align: middle;
 }
-
 :where(.dark) .bs-pill {
   --pill-text: var(--bs-royal-100);
 }
-
 :where(.bs-pill > svg) {
   height: 1rem;
 }
-
 /* ------------------------------ 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-400);
 
   color: var(--pill-text);
   outline: transparent;
 }
-
 :where(.dark) :is(a, button).bs-pill:is(:hover, :focus) {
   --pill-border: var(--bs-royal-200);
 }
-
 /* ------------------------------ Background Colors ------------------------------ */
-
 :where(.box, [class*="bg-"]:not([class~="bg-white"])) .bs-pill:where(:not([data-variant^="live"], [data-active])) {
   --pill-background: var(--bs-bg-base);
 }
-
 :where(.box[data-invert]) .bs-pill {
   --pill-background: var(--bs-bg-invert-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);
 }
-
 /* ------------------------------ Status Styles ------------------------------ */
-
 .bs-pill:where([data-status]) {
   --status-color: var(--bs-blue-400);
 }
-
 .bs-pill:where([data-status])::before {
   background-color: var(--status-color);
   border-radius: 100%;
@@ -1489,131 +1556,94 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   height: 12px;
   width: 12px;
 }
-
 /* ----- Status Colors ----- */
-
 .bs-pill:where([data-status^="active"]) {
   --status-color: var(--bs-blue-400);
 }
-
 .bs-pill:where([data-status^="complete"]) {
   --status-color: var(--bs-purple-400);
 }
-
 .bs-pill:where([data-status^="inactive"]) {
   --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);
 }
-
 /* ------------------------------ Filter Styles ------------------------------ */
-
 .bs-pill:where([data-variant^="filter"]) {
   --pill-background: var(--bs-bg-base);
   --pill-border: var(--bs-border);
   --pill-text: var(--bs-ink-base);
 }
-
 .bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
   --pill-border: var(--bs-border);
 }
-
 :is(a, button).bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
   --pill-border: var(--bs-ink-base);
 }
-
 /* ----- 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");
 }
-
 /* ----- 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");
 }
-
 /* ----- Filter Active Styles ----- */
-
 .bs-pill:where([data-variant^="filter"][data-active]) {
   --pill-background: var(--bs-blue-400);
   --pill-border: transparent;
   --pill-text: var(--bs-white);
 }
-
 .bs-pill:where([data-variant^="filter"][data-active]):is(:hover, :focus)  {
   --pill-border: transparent;
 }
-
 :is(a, button).bs-pill:where([data-variant^="filter"][data-active]):is(:hover, :focus)  {
   --pill-background: var(--bs-blue-500);
   --pill-border: transparent;
 }
-
 /* White X */
-
 .bs-pill:where([data-variant^="filter"][data-active])::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]):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");
 }
-
 /* ------------------------------ Live Now Styles ------------------------------ */
-
 .bs-pill:where([data-variant^="live"]) {
   --pill-background: var(--bs-royal-400);
   --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);
@@ -1622,19 +1652,15 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   height: 12px;
   width: 12px;
 }
-
 /* ----- Disabled Styles ----- */
-
 .bs-pill:is(:disabled, [aria-disabled="true"]) {
   pointer-events: none;
   color: var(--bs-gray-400);
   background-color: var(--bs-gray-200);
 }
-
 .bs-pill:where([data-variant^="filter"]):not([data-active]):is(:disabled, [aria-disabled="true"]) {
   --pill-border: var(--bs-gray-400);
 }
-
 .bs-profile-img,
 .bs-profile-img:where([data-img-size^='sm']) {
   --profile-size: 2rem;
@@ -1647,18 +1673,15 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   position: relative;
   width: var(--profile-size);
 }
-
 .bs-profile-img :where(img) {
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
   width: 100%;
 }
-
 .bs-profile-img:where([data-no-img]) img {
   display: none;
 }
-
 .bs-profile-img::before,
 .bs-profile-img::after {
   border-radius: 50%;
@@ -1668,20 +1691,15 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   position: absolute;
   width: 100%;
 }
-
 /* Shadow */
-
 .bs-profile-img::before {
   box-shadow: var(--bs-shadow-profilePhoto);
   content: '';
 }
-
 .bs-profile-img:where([data-no-img])::before {
   display: none;
 }
-
 /* Initials */
-
 .bs-profile-img:where([data-no-img])::after {
   border: 1px solid currentColor;
   color: var(--bs-blue-500);
@@ -1691,77 +1709,60 @@ input:where([type^='checkbox'], [type^='radio'])[data-error] {
   display: grid;
   place-items: center;
 }
-
 /* Profile Sizes */
-
 .bs-profile-img:where([data-img-size^='xs']) {
   --profile-size: 1.5rem;
   --profile-text: var(--bs-text-xs);
 }
-
 .bs-profile-img:where([data-img-size^='md']) {
   --profile-size: 3rem;
   --profile-text: var(--bs-text-md);
 }
-
 .bs-profile-img:where([data-img-size^='lg']) {
   --profile-size: 4rem;
   --profile-text: var(--bs-text-lg);
 }
-
 .bs-profile-img:where([data-img-size^='xl']) {
   --profile-size: 5.75rem;
   --profile-text: var(--bs-text-xl);
 }
-
 .bs-profile-details {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-sm);
 }
-
 .bs-profile-details > :where(*) {
   display: block;
 }
-
 .bs-profile-details > :where(*:first-child) {
   --profile-name-color: var(--bs-ink-base);
 
   color: var(--profile-name-color);
 }
-
 /* Profile with User Details */
-
 .bs-profile:where([data-layout]),
 .bs-profile:where([data-layout^='vertical']) {
   display: grid;
   row-gap: 0.5rem;
 }
-
 .bs-profile:where([data-layout^='horizontal']) {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
   grid-template-columns: auto 1fr;
   align-items: center;
 }
-
 /* When wrapped in a link */
-
 a.bs-profile:where([data-layout]) {
   text-decoration: none;
 }
-
 a.bs-profile:where([data-layout]) .bs-profile-details > *:first-child {
   --profile-name-color: var(--bs-blue-500);
 }
-
 a.bs-profile:where([data-layout]):hover .bs-profile-details > *:first-child {
   text-decoration: underline;
 }
-
 .dark a.bs-profile:where([data-layout]) .bs-profile-details > *:first-child {
   --profile-name-color: var(--bs-blue-200);
 }
-
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -1769,21 +1770,17 @@ table {
   max-width: 100%;
   width: 100%;
 }
-
 thead {
   color: var(--bs-ink-base);
   font-size: var(--bs-font-base);
   font-weight: 600;
 }
-
 tbody {
   color: var(--bs-ink-light);
 }
-
 th {
   background: var(--bs-bg-base);
 }
-
 th, td {
   border-bottom: 1px solid var(--bs-border);
   min-width: -moz-fit-content;
@@ -1791,197 +1788,257 @@ th, td {
   padding: var(--bs-space-2);
   text-align: left;
 }
-
 /* Table Borders */
-
 table[data-borders^="none"] {
   border: 0;
 }
-
 table[data-borders^="all"] :where(th, td) {
   border-left: 1px solid var(--bs-border);
 }
-
 table[data-borders^="all"] :where(th, td):last-child {
   border-right: 1px solid var(--bs-border);
 }
-
 table[data-borders^="all"] th {
   border-top: 1px solid var(--bs-border);
 }
-
 /* Table Rows */
-
 table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
   background-color: var(--bs-bg-subtle);
 }
-
 /* Table Cells */
-
 table[data-cells^="fixed"] {
   table-layout: fixed;
 }
-
 table:where([data-cells^="height"]) td {
   height: 4.5rem;
   vertical-align: middle;
 }
-
 /* Sticky Header */
-
 table:where([data-sticky]) {
   isolation: isolate;
 }
-
 table:where([data-sticky^="top"]) td {
   z-index: 1;
 }
-
 table:where([data-sticky^="top"]) {
   border-collapse: separate;
   overflow-y: unset; /* Will break sticky headers if removed */
   position: relative;
 }
-
 table:where([data-sticky^="left"]) {
   border-collapse: separate;
   overflow-x: unset; /* Will break sticky headers if removed */
   position: relative;
 }
-
 table:where([data-sticky^="top"]) th {
   position: sticky;
   top: var(--bs-content-top);
   z-index: 2;
 }
-
 table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
   position: sticky;
   left: 0;
   z-index: 2;
 }
+/* Base Toast Styles */
+.bs-toast {
+    background-color: var(--bs-white);
+    border-top: 4px solid var(--bs-blue-400);
+    bottom: 1.5rem;
+    box-shadow: var(--bs-shadow-contentMedium);
+    left: 0;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    transform: translateY(calc(100% + 1.5rem));
+    /* Clamp width for mobile -> full screen */
+    width: clamp(17rem, calc(100vw - 3rem), 25rem);
+    z-index: 999;
+}
+.bs-toast[data-stacked] {
+    bottom: auto;
+    left: auto;
+    position: static;
+    right: auto;
+    z-index: auto;
+}
+/* Mobile - Toast comes up from bottom */
+@keyframes slideDown {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(calc(100% + 1.5rem));
+    }
+}
+@keyframes slideUp {
+    0% {
+        opacity: 0;
+        transform: translateY(calc(100% + 1.5rem));
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+/* Dark mode toast */
+:where(.dark) .bs-toast {
+    background-color: var(--bs-navy-400);
+}
+.bs-toast:where([data-shown]) {
+    /* Small delay on load to alow for HTML element to exist */
+    animation-delay: 10ms;
+    animation-duration: 200ms;
+    animation-fill-mode: forwards;
+    animation-name: slideUp;
+    animation-timing-function: ease;
+}
+.bs-toast:where([data-dismissed]) {
+    animation-duration: 200ms; 
+    animation-fill-mode: forwards;
+    animation-name: slideDown;
+    animation-timing-function: ease;
+}
+.bs-toast :where(.bs-toast-header) {
+    align-items: center;
+    color: var(--bs-ink-base);
+    display: flex;
+    gap: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+}
+.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-blue-400);
+}
+.bs-toast :where(h5) {
+    font-weight: 400;
+}
+.bs-toast :where(.bs-toast-content) {
+    border-bottom: 1px solid var(--bs-border);
+    color: var(--bs-ink-light);
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.25rem;
+}
+.bs-toast :where(.bs-toast-actions) {
+    /* Mobile - Buttons will be stacked */
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 1rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+}
+/* Warning Toast Styles */
+.bs-toast:where([data-variant^='warning']) {
+    border-top: 4px solid var(--bs-orange-warning);
+}
+.bs-toast:where([data-variant^='warning']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-orange-warning);
+}
+/* Positive Toast Styles */
+.bs-toast:where([data-variant^='positive']) {
+    border-top: 4px solid var(--bs-purple-400);
+}
+.bs-toast:where([data-variant^='positive']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-purple-400);
+}
+:where(.dark) .bs-toast:where([data-variant^='positive']) {
+    border-top: 4px solid var(--bs-purple-200);
+}
+:where(.dark) .bs-toast:where([data-variant^='positive']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-purple-200);
+}
+/* Negative Toast Styles */
+.bs-toast:where([data-variant^='negative']) {
+    border-top: 4px solid var(--bs-red-400);
+}
+.bs-toast:where([data-variant^='negative']) :where(.bs-toast-header .bs-toast-header-icon) {
+    color: var(--bs-red-400);
+}
+@media (min-width: 440px) {
+
+    .bs-toast {
+        left: auto;
+        margin-left: 0;
+        margin-right: 0;
+        opacity: 0;
+        right: 1.5rem;
+        transform: translateX(calc(100% + 1.5rem));
+    }
+
+    .bs-toast:where([data-shown]) {
+        /* Small delay on load to alow for HTML element to exist */
+        animation-delay: 10ms;
+        animation-duration: 200ms;
+        animation-fill-mode: forwards;
+        animation-name: slideLeft;
+        animation-timing-function: ease;
+    }
+
+    .bs-toast:where([data-dismissed]) {
+        animation-duration: 200ms; 
+        animation-fill-mode: forwards;
+        animation-name: slideRight;
+        animation-timing-function: ease;
+    }
+
+    /* Non-mobile toasts come in from the right */
+    @keyframes slideRight {
+        0% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        100% {
+            opacity: 0;
+            transform: translateX(calc(100% + 1.5rem));
+        }
+    }
+    
+    @keyframes slideLeft {
+        0% {
+            opacity: 0;
+            transform: translateX(calc(100% + 1.5rem));
+        }
+        100% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .bs-toast :where(.bs-toast-actions) {
+        /* Non-mobile - Buttons will be side-by-side */
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+
+}
+/* Container for holding all toasts that will be visible */
+.bs-toaster {
+    /* Mobile - Center the toasts on the screen */
+    align-items: center;
+    bottom: 1.5rem;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: 999;
+}
+@media (min-width: 440px) {
+
+    .bs-toaster {
+        /* Non-mobile - Toasts will live on right side of the screen */
+        left: auto;
+        right: 1.5rem;
+    }
 
-.box {
-  background: var(--bg-color, var(--bs-bg-subtle));
-  border-radius: 0.25rem;
-  padding: var(--box-space, var(--bs-space-6));
-}
-
-.box[data-invert] {
-  --bg-color: var(--bs-bg-invert);
-  color: var(--bs-ink-invert);
-}
-
-:where(.fluid) .box {
-  padding: var(--box-space, var(--bs-space-f-6));
-}
-
-.cluster {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cluster-space, var(--bs-space-6));
-  justify-content: flex-start;
-}
-
-:where(.cluster[data-variant^="brick"]) > * {
-  align-self: stretch;
-  flex-grow: 1;
-}
-
-.cluster[data-gap="tight"] {
-  gap: var(--cluster-space, var(--bs-space-2));
-}
-
-:where(.fluid) .cluster {
-  gap: var(--cluster-space, var(--bs-space-f-6));
-}
-
-:where(.fluid) .cluster[data-gap="tight"] {
-  gap: var(--cluster-space, var(--bs-space-f-2));
-}
-
-.flow > * + * {
-  margin-top: var(--flow-space, 1.25em);
-}
-
-.flow > :is(h1, h2, h3, h4, h5, h6) {
-  --flow-space: 2em;
-}
-
-.flow > hr + * {
-  --flow-space: 1.5em;
-}
-
-.flow > :is(h1, h2, h3, h4, h5, h6) + * {
-  --flow-space: 0.5em;
-}
-
-.flow > :is(ul, ol) > li {
-  margin-top: var(--flow-space, 0.625em);
-}
-
-.region {
-  padding-block: var(--region-space, var(--bs-space-6));
-}
-
-.region[data-space^='sm'] {
-  padding-block: var(--bs-space-3);
-}
-
-.region[data-space^='lg'] {
-  padding-block: var(--bs-space-12);
-}
-
-:where(.fluid) .region {
-  padding-block: var(--region-space, var(--bs-space-f-6));
-}
-
-:where(.fluid) .region[data-space^='sm'] {
-  padding-block: var(--bs-space-f-3);
-}
-
-:where(.fluid) .region[data-space^='lg'] {
-  padding-block: var(--bs-space-f-12);
-}
-
-.wrapper {
-  margin-inline: auto;
-  max-width: var(--max-width, 75rem);
-  min-width: 0;
-  padding-inline: var(--wrapper-space, var(--bs-space-6));
-  position: relative;
-  width: 100%;
-}
-
-:where(.fluid) .wrapper {
-  padding-inline: var(--wrapper-space, var(--bs-space-f-6));
-}
-
-.wrapper[data-flush] {
-  padding-inline: 0;
-}
-
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: auto;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
-
-.measure-compact {
-  max-width: 40ch;
-}
-
-.measure-short {
-  max-width: 50ch;
-}
-
-.measure-long {
-  max-width: 70ch;
 }