@wwtdev/bsds-css 2.16.0 → 2.18.0

package/dist/wwt-bsds.css

@@ -64,6 +64,9 @@
   --bs-gray-300: #a3a4b7;
   --bs-gray-400: #4e4f5f;
   --bs-gray-500: #292940;
+  --bs-slate-400: #22222e;
+  --bs-slate-500: #17171f;
+  --bs-slate-600: #0b0b10;
   --bs-gradient-dark: linear-gradient(
     90deg,
     #1c0087 0%,
@@ -285,10 +288,13 @@ button {
   --bs-bg-base-to-medium: var(--bs-white);
   --bs-bg-light: var(--bs-gray-50);
   --bs-bg-light-to-base: var(--bs-gray-50);
+  --bs-bg-light-to-medium: var(--bs-gray-50);
   --bs-bg-medium: var(--bs-gray-100);
   --bs-bg-medium-to-light: var(--bs-gray-100);
-  --bs-bg-invert-to-base: var(--bs-navy-500);
-  --bs-bg-invert-to-medium: var(--bs-navy-400);
+  --bs-bg-medium-to-base: var(--bs-gray-100);
+  --bs-bg-invert-to-light: var(--bs-slate-500);
+  --bs-bg-invert-to-base: var(--bs-slate-600);
+  --bs-bg-invert-to-medium: var(--bs-slate-400);
   --bs-bg-disabled: var(--bs-gray-200);
 
   --bs-hyperlink: var(--bs-purple-400);
@@ -376,8 +382,8 @@ button {
   /* deprecate / phase out.. */
   --bs-bg-base-elevated: var(--bs-white); /* now --bs-bg-base-to-light */
   --bs-bg-subtle: var(--bs-gray-100);
-  --bs-bg-invert: var(--bs-navy-500);
-  --bs-bg-invert-subtle: var(--bs-navy-400);
+  --bs-bg-invert: var(--bs-slate-500);
+  --bs-bg-invert-subtle: var(--bs-slate-400);
   --bs-border: var(--bs-gray-200);
   --bs-ink-invert: var(--bs-gray-100);
   --bs-orange-warning: var(--bs-orange-500);
@@ -388,27 +394,30 @@ button {
 }
 .dark,
 .dark :where(:host) {
-  --bs-bg-base: var(--bs-navy-600);
-  --bs-bg-base-to-light: var(--bs-navy-500);
-  --bs-bg-base-to-medium: var(--bs-navy-400);
-  --bs-bg-light: var(--bs-navy-500);
-  --bs-bg-light-to-base: var(--bs-navy-600);
-  --bs-bg-medium: var(--bs-navy-400);
-  --bs-bg-medium-to-light: var(--bs-navy-500);
-  --bs-bg-invert-to-base: var(--bs-gray-100);
-  --bs-bg-invert-to-medium: var(--bs-gray-50);
-  --bs-bg-disabled: var(--bs-gray-500);
+  --bs-bg-base: var(--bs-slate-600);
+  --bs-bg-base-to-light: var(--bs-slate-500);
+  --bs-bg-base-to-medium: var(--bs-slate-400);
+  --bs-bg-light: var(--bs-slate-500);
+  --bs-bg-light-to-base: var(--bs-slate-600);
+  --bs-bg-light-to-medium: var(--bs-slate-400);
+  --bs-bg-medium: var(--bs-slate-400);
+  --bs-bg-medium-to-light: var(--bs-slate-500);
+  --bs-bg-medium-to-base: var(--bs-slate-600);
+  --bs-bg-invert-to-light: var(--bs-gray-50);
+  --bs-bg-invert-to-base: var(--bs-white);
+  --bs-bg-invert-to-medium: var(--bs-gray-100);
+  --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* --bs-gray-400 at .3 opacity */
 
   --bs-hyperlink: var(--bs-purple-200);
 
   --bs-ink-accent: var(--bs-gray-100);
-  --bs-ink-base: var(--bs-gray-100);
-  --bs-ink-disabled: rgba(163, 164, 183, 0.6); /* --bs-gray-300 at .6 opacity */
+  --bs-ink-base: var(--bs-white);
+  --bs-ink-disabled: rgba(163, 164, 183, 0.5); /* --bs-gray-300 at .5 opacity */
   --bs-ink-invert-base: var(--bs-black);
   --bs-ink-invert-medium: var(--bs-gray-500);
   --bs-ink-invert-light: var(--bs-gray-400);
-  --bs-ink-light: var(--bs-gray-300);
-  --bs-ink-medium: var(--bs-gray-200);
+  --bs-ink-light: var(--bs-gray-200);
+  --bs-ink-medium: var(--bs-gray-100);
 
   --bs-ink-blue: var(--bs-blue-200);
   --bs-ink-orange: var(--bs-orange-200);
@@ -424,6 +433,7 @@ button {
   --bs-orange-base: var(--bs-orange-300);
   --bs-pink-base: var(--bs-pink-300);
   --bs-plum-base: var(--bs-plum-300);
+  --bs-plum-medium: var(--bs-plum-200);
   --bs-purple-base: var(--bs-purple-300);
   --bs-red-base: var(--bs-red-300);
   --bs-royal-base: var(--bs-royal-300);
@@ -437,10 +447,10 @@ button {
 
   --bs-warning: var(--bs-orange-400);
 
-  --bs-border-dark: var(--bs-gray-200);
-  --bs-border-base: var(--bs-gray-400);
-  --bs-border-medium: var(--bs-gray-500);
-  --bs-border-light: var(--bs-gray-500);
+  --bs-border-dark: var(--bs-gray-300);
+  --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
+  --bs-border-medium: var(--bs-gray-400);
+  --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
 
   --bs-shadow-base: rgba(0, 0, 0, 0.06);
   --bs-shadow-invert: rgba(10, 11, 25, 0.60);
@@ -460,7 +470,7 @@ button {
     16px 16px 32px var(--bs-shadow-invert);
 
   /* deprecate / phase out.. */
-  --bs-bg-base-elevated: var(--bs-navy-500); /* now --bs-bg-base-to-light. See notes above in light mode. */
+  --bs-bg-base-elevated: var(--bs-slate-500); /* now --bs-bg-base-to-light. See notes above in light mode. */
   --bs-bg-subtle: #2F2F51;
   --bs-bg-invert: var(--bs-white);
   --bs-bg-invert-subtle: var(--bs-gray-100);
@@ -3084,10 +3094,10 @@ text color:
   transition: all 100ms ease-in-out;
   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;
@@ -3106,14 +3116,14 @@ text color:
   transition: border-color 0.125s ease-in-out;
   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;
 }
@@ -3128,11 +3138,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);
@@ -3142,14 +3152,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);
@@ -3209,24 +3217,24 @@ 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);
 }
@@ -3273,6 +3281,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,
 .bs-button:where([data-ghost]:not([data-ghost="false"]))[aria-disabled="true"] {
@@ -4083,7 +4093,7 @@ button:where(.bs-filter-button) {
 }
 /* ------------------------------ 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;
@@ -4422,6 +4432,270 @@ a.bs-profile:where([data-layout]):hover {
 :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"][data-active]:not([data-active="false"])) {
   display: block;
 }
+/* ------ 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;
+}
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -4769,8 +5043,8 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 /* 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;
@@ -4785,7 +5059,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* 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);
@@ -4799,7 +5073,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* 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);
@@ -4812,7 +5086,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
   transform: translateY(-50%) scale(0);
 }
 :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);
@@ -4847,10 +5121,10 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 :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),
@@ -4864,12 +5138,25 @@ 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);
+}