@wwtdev/bsds-css 2.15.0 → 2.17.0

package/dist/components/table.css

@@ -0,0 +1,324 @@
+/* ------ 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.css

@@ -41,8 +41,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;
@@ -59,7 +59,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);
@@ -75,7 +75,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);
@@ -90,7 +90,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);
@@ -130,10 +130,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),
@@ -148,12 +148,28 @@ 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);
+}