@wwtdev/bsds-css 2.15.0 → 2.17.0

package/dist/wwt-bsds.css

@@ -2592,7 +2592,7 @@ data-autosize-icons="true" - see above
   border-radius: .25rem;
   outline: 1px solid transparent;
 }
-.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible:not([data-open])) {
+.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible) {
   outline: 1px solid var(--focus-border);
 }
 .bs-input-phone :where(.bs-input-addon) > button {
@@ -3617,7 +3617,11 @@ button:where(.bs-filter-button) {
 }
 .bs-flyout:where([data-shown="true"]) {
   opacity: 1;
-  transform: translateX(0);
+  /*
+  Needs to be "none" instead of "0" so as not to interfere with calculating
+  "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
+  */
+  transform: none;
 }
 .bs-flyout :where(.bs-flyout-close-container) {
   display: flex;
@@ -3646,21 +3650,31 @@ button:where(.bs-filter-button) {
 .bs-modal {
   background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
+  bottom: 0;
   box-shadow: var(--bs-shadow-contentHigh);
-  left: 1.5rem;
+  height: -moz-fit-content;
+  height: fit-content;
+  left: 0;
+  margin: auto;
   max-height: calc(100% - 3rem);
   opacity: 0;
   overflow: auto;
   padding: 1.5rem;
   position: fixed;
-  right: 1.5rem;
-  top: 50%;
-  transform: translateY(-50%);
+  right: 0;
+  top: 0;
   transition-duration: 75ms;
   transition-property: opacity;
   transition-timing-function: ease-in-out;
+  width: calc(100% - 3rem);
   z-index: 9999;
 }
+@media (min-width: 752px) {
+  .bs-modal {
+    max-height: 40.625rem;
+    width: 35rem;
+  }
+}
 .bs-modal:where([data-shown]:not([data-shown="false"])) {
   opacity: 1;
 }
@@ -3700,15 +3714,6 @@ button:where(.bs-filter-button) {
 .bs-modal :where(.modal-footer) {
   margin-top: 3rem;
 }
-@media (min-width: 752px) {
-  .bs-modal {
-    left: 50%;
-    margin: 0;
-    max-height: 40.625rem;
-    transform: translate(-50%, -50%);
-    width: 35rem;
-  }
-}
 /* Vue Transition Styles - Only used in Vue component */
 .bs-modal:where(.bs-modal-enter-from),
 .bs-modal:where(.bs-modal-leave-to) {
@@ -3966,9 +3971,6 @@ button:where(.bs-filter-button) {
   outline: transparent;
 }
 /* ------------------------------ Background Colors ------------------------------ */
-:where(.box, [class*="bg-"]:not([class~="bg-white"])) .bs-pill:where(:not([data-variant^="live"], [data-active]:not([data-active="false"]))) {
-  --pill-background: var(--bs-bg-base);
-}
 :where(.box[data-invert]) .bs-pill {
   --pill-background: var(--bs-bg-invert-to-base-subtle);
   --pill-text: var(--bs-gray-100);
@@ -4420,6 +4422,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;
@@ -4767,8 +5033,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;
@@ -4783,7 +5049,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);
@@ -4797,7 +5063,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);
@@ -4810,7 +5076,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);
@@ -4845,10 +5111,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),
@@ -4862,12 +5128,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);
+}