@wwtdev/bsds-css 2.16.0 → 2.18.0

package/dist/components/_buttons.scss

@@ -54,11 +54,11 @@ text color:
   vertical-align: middle;
 }
 
-.bs-button:hover {
+.bs-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
   background-color: var(--btn-secondary);
 }
 
-.bs-button:active {
+.bs-button:where(:not(:disabled):not([aria-disabled="true"]):active) {
   background-color: var(--btn-secondary);
   box-shadow: inset 0px 0px 4px 1px var(--btn-main);
   transform-origin: center;
@@ -79,16 +79,16 @@ text color:
   width: var(--btn-focus-pseudo-width);
 }
 
-.bs-button:focus::before {
+.bs-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
   border-color: var(--btn-main);
 }
 
-.bs-button:focus-visible::before {
+.bs-button:where(:focus-visible:not(:disabled):not([aria-disabled="true"]))::before {
   border-color: var(--btn-main);
   box-shadow: none;
 }
 
-.bs-button:focus:not(:focus-visible)::before {
+.bs-button:where(:focus:not(:focus-visible):not(:disabled):not([aria-disabled="true"]))::before {
   border-color: transparent;
   box-shadow: none;
 }
@@ -104,11 +104,11 @@ text color:
 .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
   border-radius: 0.4375rem;
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"])):hover,
-.bs-button:where([data-ghost]:not([data-ghost="false"])):focus {
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):hover),
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):focus) {
   background-color: var(--btn-light);
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"])):active {
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):active) {
   box-shadow:
     inset 0 0 0 1px var(--btn-main),
     inset 0px 0px 4px 1px var(--btn-highlight);
@@ -119,14 +119,12 @@ text color:
   --btn-ghost-ink: var(--bs-ink-plum);
   --btn-highlight: var(--bs-plum-100);
   --btn-light: var(--bs-plum-10);
-  --btn-main: var(--bs-plum-400);
+  --btn-main: var(--bs-plum-base);
   --btn-secondary: var(--bs-plum-medium);
 }
 .dark .bs-button:where([data-variant^='secondary']) {
   --btn-highlight: var(--bs-plum-400);
   --btn-light: var(--bs-navy-400);
-  --btn-main: var(--bs-plum-200);
-  --btn-secondary: var(--bs-plum-300);
 }
 .bs-button:where([data-variant^='positive']) {
   --btn-ghost-ink: var(--bs-ink-purple);
@@ -190,26 +188,26 @@ text color:
   cursor: pointer;
   line-height: 150%;
 }
-.bs-button:where([data-text]:not([data-text="false"])):hover {
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-blue-base);
   background-color: transparent;
   text-decoration: underline;
 }
-.bs-button:where([data-text]:not([data-text="false"])):has(svg):hover {
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover):has(svg) {
   text-decoration: none;
 }
-.bs-button:where([data-text]:not([data-text="false"])):active {
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):active) {
   box-shadow: none;
   transform: none;
 }
 
 .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
-.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])):hover {
+.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-ink-red);
 }
 
 .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
-.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])):hover {
+.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-ink-white);
   --btn-main: var(--bs-ink-white);
 }
@@ -265,6 +263,8 @@ text color:
 .bs-button:where([aria-disabled="true"]) {
   --btn-ink: var(--bs-ink-disabled);
   --btn-main: var(--bs-bg-disabled);
+  box-shadow: none;
+  transform: none;
 }
 
 .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,

package/dist/components/_pills.scss

@@ -183,7 +183,7 @@
 
 /* ------------------------------ Variant: "Live Now" Styles ------------------------------ */
 .bs-pill:where([data-variant^="live"]) {
-  --pill-background: var(--bs-royal-400);
+  --pill-background: var(--bs-plum-base);
   --pill-text: var(--bs-white);
   --pill-gap: var(--bs-space-1);
   text-transform: uppercase;

package/dist/components/_table.scss

@@ -0,0 +1,328 @@
+@mixin table() {
+  /* ------ WRAPPER ------ */
+
+.bs-table-wrap {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:where(.bs-table-wrap)  {
+  font-size: var(--bs-text-sm);
+  color: var(--bs-table-cell-ink, var(--bs-ink-light));
+  border-radius: var(--bs-space-2);
+  border: 1px solid var(--bs-border-base);
+}
+
+:where(.bs-table-wrap-header, .bs-table-wrap-footer) {
+  padding-block: var(--bs-space-3);
+  padding-inline: var(--bs-table-cell-padding);
+  background: var(--bs-bg-medium);
+  border-color: inherit;
+}
+
+:where(.bs-table-wrap-header) {
+  border-bottom-width: 1px;
+}
+
+:where(.bs-table-wrap-footer) {
+  border-top-width: 1px;
+}
+
+
+/* ------ TABLE ------ */
+
+.bs-table-scroll-wrap {
+  flex: 1;
+  border-color: inherit;
+  overflow: auto;
+  overscroll-behavior: none;
+}
+
+.bs-table {
+  display: grid;
+  grid-template-columns: var(--bs-table-col-widths);
+}
+
+:where(.bs-table) {
+  border-color: inherit;
+}
+
+/* ------ HEADER ROWGROUP ------ */
+
+.bs-table-header-rowgroup {
+  grid-column: 1 / -1;
+  grid-row: span var(--bs-table-header-row-count);
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+  border-color: inherit;
+}
+
+.bs-table-header-rowgroup-freeze {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  .bs-table:not(.bs-table-border-none) & {
+    box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
+  }
+}
+
+/* ------ BODY ROWGROUP ------ */
+
+.bs-table-body-rowgroup {
+  grid-column: 1 / -1;
+  grid-row: span var(--bs-table-body-row-count);
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+  border-color: inherit;
+}
+
+/* ------ FOOTER ROWGROUP ------ */
+
+.bs-table-footer-rowgroup {
+  grid-column: 1 / -1;
+  grid-row: span var(--bs-table-footer-row-count);
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+  border-color: inherit;
+}
+
+.bs-table-footer-rowgroup-freeze {
+  position: sticky;
+  bottom: 0;
+
+  .bs-table:not(.bs-table-border-none) & {
+    box-shadow: 0 -3px 0 rgba(0, 0, 0, .03);
+  }
+}
+
+/* ------ ROWS ------ */
+
+.bs-table-row {
+  grid-column: 1 / -1;
+}
+
+:where(.bs-table-row) {
+  background: var(--bs-bg-base);
+  border-color: inherit;
+}
+
+:where(.bs-table-header-rowgroup .bs-table-row) {
+  background: var(--bs-bg-light);
+}
+
+:where(.bs-table-row:has(.bs-table-head-cell, .bs-table-cell)) {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+/* ------ FROZEN COLS ------ */
+
+.bs-table-cols-frozen-left {
+  position: sticky;
+  left: 0;
+  grid-column: span var(--bs-table-frozen-left-count);
+  display: grid;
+  grid-template-columns: subgrid;
+  background: inherit;
+  border-color: inherit;
+
+  .bs-table:not(.bs-table-border-none) & {
+    box-shadow: 3px 0 0 rgba(0, 0, 0, .03);
+  }
+}
+
+.bs-table-cols-frozen-right {
+  position: sticky;
+  right: 0;
+  grid-column: span var(--bs-table-frozen-right-count);
+  display: grid;
+  grid-template-columns: subgrid;
+  background: inherit;
+  border-color: inherit;
+
+  .bs-table:not(.bs-table-border-none) & {
+    box-shadow: -3px 0 0 rgba(0, 0, 0, .03);
+  }
+}
+
+/* ------ CELLS ------ */
+
+:where(.bs-table-head-cell) {
+  color: var(--bs-table-head-cell-ink, var(--bs-ink-base));
+  font-weight: var(--bs-font-bold);
+  border-color: inherit;
+}
+
+/* Couldn't use :where due to Blue Steel reset styles on <button> imposing font-size.
+  Adding inherit in case consumer does custom header cell styles */
+.bs-table-head-cell .bs-sort-toggle {
+  font-size: inherit;
+  font-weight: var(--bs-font-bold);
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+:where(.bs-table-cell) {
+  border-color: inherit;
+}
+
+/* ------ PROP: CELL-PADDING ------ */
+
+:root {
+  --bs-table-cell-padding-xs: var(--bs-space-2);
+  --bs-table-cell-padding-sm: var(--bs-space-3);
+  --bs-table-cell-padding-md: var(--bs-space-4);
+  --bs-table-cell-padding-lg: var(--bs-space-6);
+  --bs-table-cell-padding-xl: var(--bs-space-8);
+}
+
+:where(.bs-table-head-cell, .bs-table-cell) {
+  padding: var(--bs-table-cell-padding);
+}
+
+/* ------ PROP: TRUNCATE ------ */
+
+:where(.bs-table-truncate):where(.bs-table-head-cell, .bs-table-cell) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+/* ------ PROP: STRIPED ROWS ------ */
+
+:where(.bs-table-striped .bs-table-body-rowgroup .bs-table-row:nth-child(even)) {
+  background: var(--bs-bg-light);
+}
+
+
+/* ------ PROP: ROW HOVER ------ */
+
+:where(.bs-table-row-hover .bs-table-body-rowgroup .bs-table-row:hover) {
+  background: var(--bs-table-row-hover, var(--bs-bg-light));
+  transition: background-color 200ms;
+}
+
+
+/* ------ PROP: BORDERS ------ */
+
+/* -- borders="rows" -- */
+:where(.bs-table-border-rows) :where(.bs-table-row) {
+  border-bottom-width: 1px;
+}
+
+/* -- borders="cols" -- */
+/* setting following cell's left border instead of each cell's right, so Table's left/right border is easier for consumer to override with utility classes */
+:where(.bs-table-border-cols) :where(.bs-table-head-cell + .bs-table-head-cell, .bs-table-cell + .bs-table-cell) {
+  border-left-width: 1px;
+}
+
+.bs-table-border-cols .bs-table-header-rowgroup {
+  border-bottom-width: 1px;
+}
+
+/* -- borders="grid" -- */
+:where(.bs-table-border-grid) :where(.bs-table-row) {
+  border-bottom-width: 1px;
+}
+
+/* setting following cell's left border instead of each cell's right, so Table's left/right border is easier for consumer to override with utility classes */
+:where(.bs-table-border-grid) :where(.bs-table-head-cell + .bs-table-head-cell, .bs-table-cell + .bs-table-cell) {
+  border-left-width: 1px;
+}
+
+/* -- borders="frozen" -- */
+.bs-table-border-frozen .bs-table-header-rowgroup-freeze {
+  border-bottom-width: 1px;
+}
+
+/* -- frozen col and footer-rowgroup sections will always show border, unless borders="none" -- */
+/* (header-rowgroup is not included below since TableRow bottom border covers most cases) */
+.bs-table:not(.bs-table-border-none) .bs-table-cols-frozen-left {
+  border-right-width: 1px;
+}
+
+.bs-table:not(.bs-table-border-none) .bs-table-cols-frozen-right {
+  border-left-width: 1px;
+}
+
+.bs-table:not(.bs-table-border-none) .bs-table-footer-rowgroup-freeze {
+  border-top-width: 1px;
+}
+
+/* turn off last row's bottom border, since it would double-up with Table's border */
+:where(.bs-table-body-rowgroup, .bs-table-footer-rowgroup) .bs-table-row:last-of-type {
+  border-bottom-width: 0;
+}
+
+
+/* ------ TABLE COLUMN RESIZER ------ */
+
+.bs-table-col-resizer {
+  position: fixed; /* fixed instead of absolute, due to using coordinates from .getBoundingClientRect() */
+  top: 0;
+  left: -8px;
+  bottom: 0;
+  width: 15px; /* includes 5px resizer handle width + 5px of extra hover target area on left and right of handle */
+  cursor: col-resize;
+  touch-action: none;
+  z-index: var(--bs-table-col-resizer-z, 10);
+  transform: translate(var(--bs-table-col-resizer-x), var(--bs-table-col-resizer-y));
+
+  /* resizer handle and vertical line set-up */
+  &:before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: var(--bs-table-col-resizer-color, var(--bs-blue-base));
+  }
+
+  /* resizer handle */
+  &::after {
+    left: 5px;
+    width: 5px;
+    height: var(--bs-table-col-resizer-handle-height);
+  }
+
+  /* resizer vertical line/tail */
+  &::before {
+    left: 7px;
+    width: 1px;
+    height: var(--bs-table-col-resizer-tail-height);
+    display: none;
+  }
+
+  &.bs-table-col-resizer-active::before {
+    display: block;
+  }
+}
+
+/* ------ SORT TOGGLE ------ */
+
+/* Override Blue Steel CSS: It adds "relative" to buttons by default, which was causing an overlap issue when a Table with frozen, sortable cols scrolled horizontally */
+.bs-sort-toggle {
+  position: static;
+}
+
+/* Using :where to lower specificity so consumers can use utility classes to override */
+:where(.bs-sort-toggle) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-space-2);
+  cursor: pointer;
+}
+
+:where(.bs-sort-toggle .bs-icon) {
+  flex-shrink: 0;
+}
+
+  }
+  

package/dist/components/_tooltip.scss

@@ -42,8 +42,8 @@
 /* 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])):focus-within :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top"]):focus-within :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;
@@ -60,7 +60,7 @@
 
 /* Active States */
 :where(.bs-tooltip[data-position="bottom"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom"]):focus-within :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);
@@ -76,7 +76,7 @@
 
 /* Active States */
 :where(.bs-tooltip[data-position="left"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="left"]):focus-within :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);
@@ -91,7 +91,7 @@
 }
 
 :where(.bs-tooltip[data-position="right"]):hover :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="right"]):focus-within :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);
@@ -131,10 +131,10 @@
 :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"]):focus-within :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="top-right"]):focus-within :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-left"]):focus-within :where(.bs-tooltip-text),
-:where(.bs-tooltip[data-position="bottom-right"]):focus-within :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),
@@ -149,15 +149,31 @@ 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])):focus-within :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"])):focus-within :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/buttons.css

@@ -53,11 +53,11 @@ text color:
   vertical-align: middle;
 }
 
-.bs-button:hover {
+.bs-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
   background-color: var(--btn-secondary);
 }
 
-.bs-button:active {
+.bs-button:where(:not(:disabled):not([aria-disabled="true"]):active) {
   background-color: var(--btn-secondary);
   box-shadow: inset 0px 0px 4px 1px var(--btn-main);
   transform-origin: center;
@@ -78,16 +78,16 @@ text color:
   width: var(--btn-focus-pseudo-width);
 }
 
-.bs-button:focus::before {
+.bs-button:where(:focus:not(:disabled):not([aria-disabled="true"]))::before {
   border-color: var(--btn-main);
 }
 
-.bs-button:focus-visible::before {
+.bs-button:where(:focus-visible:not(:disabled):not([aria-disabled="true"]))::before {
   border-color: var(--btn-main);
   box-shadow: none;
 }
 
-.bs-button:focus:not(:focus-visible)::before {
+.bs-button:where(:focus:not(:focus-visible):not(:disabled):not([aria-disabled="true"]))::before {
   border-color: transparent;
   box-shadow: none;
 }
@@ -103,11 +103,11 @@ text color:
 .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
   border-radius: 0.4375rem;
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"])):hover,
-.bs-button:where([data-ghost]:not([data-ghost="false"])):focus {
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):hover),
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):focus) {
   background-color: var(--btn-light);
 }
-.bs-button:where([data-ghost]:not([data-ghost="false"])):active {
+.bs-button:where([data-ghost]:not([data-ghost="false"]):not(:disabled):not([aria-disabled="true"]):active) {
   box-shadow:
     inset 0 0 0 1px var(--btn-main),
     inset 0px 0px 4px 1px var(--btn-highlight);
@@ -118,14 +118,12 @@ text color:
   --btn-ghost-ink: var(--bs-ink-plum);
   --btn-highlight: var(--bs-plum-100);
   --btn-light: var(--bs-plum-10);
-  --btn-main: var(--bs-plum-400);
+  --btn-main: var(--bs-plum-base);
   --btn-secondary: var(--bs-plum-medium);
 }
 .dark .bs-button:where([data-variant^='secondary']) {
   --btn-highlight: var(--bs-plum-400);
   --btn-light: var(--bs-navy-400);
-  --btn-main: var(--bs-plum-200);
-  --btn-secondary: var(--bs-plum-300);
 }
 .bs-button:where([data-variant^='positive']) {
   --btn-ghost-ink: var(--bs-ink-purple);
@@ -189,26 +187,26 @@ text color:
   cursor: pointer;
   line-height: 150%;
 }
-.bs-button:where([data-text]:not([data-text="false"])):hover {
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-blue-base);
   background-color: transparent;
   text-decoration: underline;
 }
-.bs-button:where([data-text]:not([data-text="false"])):has(svg):hover {
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover):has(svg) {
   text-decoration: none;
 }
-.bs-button:where([data-text]:not([data-text="false"])):active {
+.bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):active) {
   box-shadow: none;
   transform: none;
 }
 
 .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
-.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])):hover {
+.bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-ink-red);
 }
 
 .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
-.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])):hover {
+.bs-button:where([data-variant^='white'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
   --btn-ink: var(--bs-ink-white);
   --btn-main: var(--bs-ink-white);
 }
@@ -264,6 +262,8 @@ text color:
 .bs-button:where([aria-disabled="true"]) {
   --btn-ink: var(--bs-ink-disabled);
   --btn-main: var(--bs-bg-disabled);
+  box-shadow: none;
+  transform: none;
 }
 
 .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,

package/dist/components/pills.css

@@ -182,7 +182,7 @@
 
 /* ------------------------------ Variant: "Live Now" Styles ------------------------------ */
 .bs-pill:where([data-variant^="live"]) {
-  --pill-background: var(--bs-royal-400);
+  --pill-background: var(--bs-plum-base);
   --pill-text: var(--bs-white);
   --pill-gap: var(--bs-space-1);
   text-transform: uppercase;