@brickclay-org/ui 0.1.76 → 0.1.78

package/src/lib/table/table.css

@@ -0,0 +1,646 @@
+/* =====================================================================
+   bk-table
+
+   Visual language is carried over from bk-grid unchanged — same header
+   fill, same 13px medium body text, same #EBEDF3 rules, same sort icons —
+   so the two controls sit side by side without looking like different
+   products.
+
+   Styles are global (ViewEncapsulation.None). Cells are written by the
+   consumer and projected in, so they never carry this component's scope
+   attribute and emulated styles would miss them entirely. Everything is
+   namespaced `bk-` to keep that safe.
+   ===================================================================== */
+
+.bk-table-host {
+  display: block;
+}
+
+.bk-table-wrapper {
+  @apply w-full;
+}
+
+/* ---------- Frame ----------
+
+   The single box that owns the outline and the corners. Nothing inside draws
+   an outline of its own; `overflow: hidden` clips every child to the curve, so
+   the header, the title bar and the border can't describe the same corner
+   differently. (They did: the radius used to sit on `th:first-child` while the
+   border sat on the table, which left a notch at the top corners — and a title
+   bar above the header produced a second, offset rounded box.)
+
+   Clipping here is safe for sticky: the scrolling ancestor is the container
+   below, so pinned cells still resolve against that. */
+
+.bk-table-frame {
+  border: 1px solid #ebedf3;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+/* ---------- Title / footer bars ---------- */
+
+.bk-table-title-bar,
+.bk-table-footer-bar {
+  @apply text-[13px] font-semibold text-[#15191E] bg-[#F9FAFA] px-4 py-2.5;
+}
+
+.bk-table-title-bar {
+  border-bottom: 1px solid #ebedf3;
+}
+
+.bk-table-footer-bar {
+  border-top: 1px solid #ebedf3;
+}
+
+/* ---------- Scroll container ---------- */
+
+.bk-table-container {
+  @apply relative overflow-auto;
+}
+
+.bk-table {
+  /*
+    `separate`, not `collapse`. Collapsed borders belong to the table rather
+    than to individual cells, and a sticky cell carries only its own box —
+    so under `collapse` a pinned column scrolls out from under its own
+    borders. Every rule below is therefore drawn per cell.
+  */
+  @apply min-w-full text-left;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+/* ---------- Header ---------- */
+
+.bk-th {
+  @apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap align-middle;
+  border-bottom: 1px solid #ebedf3;
+  position: sticky;
+  top: 0;
+  /*
+    Above body cells, below pinned columns.
+
+    Deliberately no `transform: translateZ(0)` here, though bk-grid has one: a
+    transform makes the cell the containing block for `position: fixed`
+    descendants, which strands any popover opened from a header — the filter
+    menu resolved its viewport coordinates against the `th` and was then
+    clipped by the scroll container. GPU promotion is not worth that.
+  */
+  z-index: 2;
+}
+
+/*
+  Grouped headers: the second row sticks below the first, at whatever height
+  the first actually rendered at (published by the component as a custom
+  property). The fallback only applies before the first measurement lands.
+*/
+.bk-table thead tr:nth-child(2) .bk-th {
+  top: var(--bk-thead-row-1, 38px);
+  z-index: 1;
+}
+
+.bk-th-content {
+  @apply flex items-center justify-between gap-1;
+}
+
+/*
+  The header's label + sort/filter icons are laid out with flexbox, so the
+  `align` input's `text-align` (set on the `th` itself) never reaches them —
+  text-align has no effect on a flex item's position, only justify-content
+  does. `space-between` above is what spreads the label from a trailing
+  filter icon on a left/default column; these overrides move both together
+  to the opposite edge instead of stretching them apart.
+*/
+.bk-th-align-right .bk-th-content {
+  @apply justify-end;
+}
+
+.bk-th-align-center .bk-th-content {
+  @apply justify-center;
+}
+
+.bk-th-label {
+  @apply inline-flex items-center gap-1;
+}
+
+.bk-th-sortable .bk-th-label {
+  @apply cursor-pointer select-none;
+}
+
+.bk-th-selection {
+  @apply flex items-center gap-1;
+}
+
+/*
+  A checkbox column carries no text, so the 17px reading gutter is dead space —
+  it was inflating the column past whatever `width` asked for and leaving a gap
+  between the checkbox and the first real column.
+*/
+.bk-cell-selection {
+  @apply px-3;
+}
+
+.bk-th-selection-caret {
+  @apply inline-flex items-center justify-center size-4 rounded hover:bg-[#EFF1F4];
+}
+
+/* ---------- Body ---------- */
+
+.bk-td {
+  @apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 align-middle bg-white;
+  border-bottom: 1px solid #ebedf3;
+}
+
+.bk-td-content {
+  @apply inline-flex items-center gap-1 align-middle;
+}
+
+/*
+  `inline-flex` above is what makes plain cell content shrink-wrap to itself
+  and still obey the cell's `text-align` — it's an atomic inline box, same as
+  a `<span>` or `<img>` would be. Block-level content (a nested `bk-table`)
+  needs the opposite: a full-width box it can actually fill. `[block]` on
+  `td[bk-td]` swaps one for the other.
+*/
+.bk-td-content-block {
+  @apply block w-full;
+}
+
+.bk-table tbody tr:hover .bk-td {
+  @apply bg-[#FBFBFC];
+}
+
+/* ---------- Density ----------
+
+   Four steps, roomiest first: lg, default, md, sm. `.bk-th` / `.bk-td` above
+   carry the `default` values, so only the other three appear here. The type
+   scale moves with the padding — padding alone makes a large table look like a
+   normal one that has been stretched. */
+
+.bk-table-lg .bk-th {
+  @apply px-5 py-3.5 text-[13px];
+}
+
+.bk-table-lg .bk-td {
+  @apply px-5 py-3.5 text-sm leading-5;
+}
+
+.bk-table-md .bk-th {
+  @apply px-3 py-2;
+}
+
+.bk-table-md .bk-td {
+  @apply px-3 py-1.5;
+}
+
+.bk-table-sm .bk-th {
+  @apply px-2 py-1.5 text-[11px];
+}
+
+.bk-table-sm .bk-td {
+  @apply px-2 py-1 text-xs;
+}
+
+/* The selection column's tighter gutter tracks the density too, or it stops
+   being tighter than the columns around it. */
+.bk-table-lg .bk-cell-selection {
+  @apply px-4;
+}
+
+.bk-table-md .bk-cell-selection {
+  @apply px-2.5;
+}
+
+.bk-table-sm .bk-cell-selection {
+  @apply px-2;
+}
+
+/* ---------- Bordered ----------
+
+   Internal rules only. The outer edges belong to the frame, so drawing them
+   here too would leave a 2px line down the sides. */
+
+.bk-table-bordered .bk-th,
+.bk-table-bordered .bk-td {
+  border-right: 1px solid #ebedf3;
+}
+
+.bk-table-bordered .bk-th:last-child,
+.bk-table-bordered .bk-td:last-child {
+  border-right: 0;
+}
+
+/* Same reasoning on the bottom edge: the last row's rule and the frame would
+   otherwise stack. A footer bar supplies its own top border in its place. */
+.bk-table tbody tr:last-child > .bk-td {
+  border-bottom: 0;
+}
+
+/*
+  The rule above assumes the last row actually reaches the frame — true
+  whenever rows fill or overflow the container, false the moment `scroll.y`
+  reserves more height (`fill`, most commonly) than the rows need. Without
+  it, real data just trails into blank reserved space with nothing marking
+  where it stopped. `.bk-table-underfilled` is set by the component (only
+  when rows fall genuinely short of the reserved height, never when they
+  fill or overflow it) precisely so this and the rule above are never both
+  trying to close the same edge at once.
+*/
+.bk-table-underfilled .bk-table tbody tr:last-child > .bk-td {
+  border-bottom: 1px solid #ebedf3;
+}
+
+/* ---------- Fixed columns ---------- */
+
+.bk-cell-sticky {
+  position: sticky;
+  /* Above ordinary body cells; header cells stay above via their own z-index. */
+  z-index: 1;
+}
+
+.bk-th.bk-cell-sticky {
+  /* A pinned header cell is pinned twice over — it must beat both. */
+  z-index: 3;
+}
+
+/*
+  A shadow, not a border: it marks the boundary only while there is content
+  scrolled underneath, matching how bk-grid shaded its sticky action column.
+*/
+.bk-cell-sticky-left::after,
+.bk-cell-sticky-right::before {
+  content: '';
+  @apply absolute top-0 bottom-0 w-2 pointer-events-none;
+}
+
+.bk-cell-sticky-left::after {
+  right: -8px;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
+}
+
+.bk-cell-sticky-right::before {
+  left: -8px;
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.05), transparent);
+}
+
+/* ---------- Overflow behaviour ---------- */
+
+.bk-cell-ellipsis {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+  /* Ellipsis needs a bound to truncate against; without it the cell just grows. */
+  max-width: 0;
+}
+
+/*
+  The rule above alone clips the text but never shows the "…" — a browser
+  limitation, not a bug here: text-overflow only marks up overflowing plain
+  inline content, and `.bk-td-content` (the cell's own wrapper) is
+  `inline-flex`, which establishes its own formatting context. An atomic
+  flex box that overflows just gets cut off with nothing to show for it.
+  The fix is the standard one: give the *text itself* — not the flex row
+  around it — the overflow/ellipsis rule, on a plain span with nothing
+  flex about it, and let `.bk-td-content` stretch to the td's real
+  (table-layout: fixed) width instead of shrink-wrapping, so that span has
+  a concrete width to shrink against rather than its own content size.
+*/
+.bk-td-content-ellipsis {
+  @apply flex w-full;
+}
+
+.bk-td-ellipsis-text {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1;
+}
+
+.bk-cell-break-word {
+  @apply whitespace-normal;
+  word-break: break-all;
+}
+
+/* ---------- Tree indent + expand toggle ---------- */
+
+.bk-td-indent {
+  @apply inline-block;
+}
+
+.bk-td-expand,
+.bk-td-expand-spacer {
+  @apply inline-flex items-center justify-center size-4 shrink-0;
+}
+
+.bk-td-expand {
+  @apply rounded text-[#78829D] hover:bg-[#EFF1F4] transition-transform duration-200;
+  transform: rotate(-90deg);
+}
+
+.bk-td-expand-open {
+  transform: rotate(0deg);
+}
+
+/* ---------- Expanded detail row ---------- */
+
+.bk-expanded-row > .bk-td,
+.bk-expanded-row > td {
+  @apply bg-[#FBFBFC];
+}
+
+/* ---------- Nested table ----------
+
+   A table dropped into an expanded row via `[bkExpand]` is, by default, an
+   ordinary cell holding an ordinary table — padded like any other `td`, and
+   framed like any other `bk-table`. That reads as a small card floating
+   inside a cell. These two classes together make it read instead as a
+   continuation of the row it expanded from: the outer cell stops insetting
+   it, and the inner table drops the card border/radius that would otherwise
+   double up against the outer table's own frame. */
+
+.bk-td-flush {
+  /* Horizontal stays 0 — that's what keeps the nested table edge-to-edge.
+     Vertical gets a little room so it doesn't touch the parent row's border
+     or the row right below it. */
+  @apply p-3;
+}
+
+.bk-table-flush .bk-table-frame {
+  border: 0;
+  border-radius: 0;
+}
+
+/* ---------- Summary / totals ---------- */
+
+/* Carries the top rule itself, because the last body row drops its bottom
+   border to avoid doubling with the frame. */
+.bk-table-summary .bk-td {
+  @apply bg-[#F9FAFA] font-semibold;
+  border-top: 1px solid #ebedf3;
+  border-bottom: 0;
+}
+
+.bk-table-summary-fixed .bk-td {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+}
+
+/* ---------- Sort icons (carried over from grid.css) ---------- */
+
+.bk-sort-icon {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 0.875rem;
+  width: 0.875rem;
+  gap: 0.125rem;
+  line-height: 1;
+}
+
+.bk-sort-icon::before,
+.bk-sort-icon::after {
+  display: inline-block;
+  content: '';
+  height: 0.3rem;
+  width: 0.54rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.bk-sort-icon::before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e");
+}
+
+.bk-sort-icon::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e");
+}
+
+.bk-sort-asc::before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e");
+}
+
+.bk-sort-asc::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e");
+}
+
+.bk-sort-desc::before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e");
+}
+
+.bk-sort-desc::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e");
+}
+
+.bk-sort-priority {
+  @apply inline-flex items-center justify-center min-w-4 h-4 px-1 rounded bg-[#EFF1F4] text-[10px] font-semibold text-[#4B5675];
+}
+
+/* ---------- Filter menu ---------- */
+
+.bk-filter-trigger {
+  @apply inline-flex items-center justify-center size-5 rounded text-[#78829D] hover:bg-[#EFF1F4];
+}
+
+.bk-filter-active {
+  @apply text-black;
+}
+
+.bk-filter-menu {
+  @apply min-w-[180px];
+}
+
+.bk-filter-list {
+  @apply flex flex-col gap-2 max-h-60 overflow-y-auto py-1;
+}
+
+.bk-filter-option {
+  @apply text-[13px] text-[#15191E];
+}
+
+.bk-filter-actions {
+  @apply flex items-center justify-between gap-2 pt-2 mt-2;
+  border-top: 1px solid #ebedf3;
+}
+
+.bk-filter-btn {
+  @apply text-xs font-semibold px-2.5 py-1 rounded;
+}
+
+.bk-filter-btn-link {
+  @apply text-[#60646C] hover:bg-[#F1F2F4];
+}
+
+.bk-filter-btn-primary {
+  @apply bg-black text-white hover:bg-[#2A2E36];
+}
+
+/* ---------- Selection menu ---------- */
+
+.bk-table-menu {
+  @apply min-w-[160px] flex flex-col;
+}
+
+.bk-table-menu-item {
+  @apply w-full text-left text-[13px] text-[#15191E] px-2 py-1.5 rounded hover:bg-[#F1F2F4];
+}
+
+/* ---------- Loading / empty ---------- */
+
+.bk-table-loading {
+  @apply absolute inset-0 flex items-center justify-center bg-white/60 z-10;
+}
+
+.bk-table-spinner {
+  @apply block size-8 rounded-full border-2 border-[#EBEDF3] border-t-black;
+  animation: bk-table-spin 0.8s linear infinite;
+}
+
+@keyframes bk-table-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*
+  Absolutely positioned against `.bk-table-container` (already `relative`),
+  spanning from just below the sticky header down to the container's own
+  bottom — not `inset: 0`, which would sit under the header rather than
+  below it. In normal flow this block only ever centers within its own
+  shrink-wrapped height, which barely shows with the table's default
+  content-sized body; it becomes visibly wrong the moment `scroll.y` (with
+  `fill`) or a tall `min-height` reserves real empty space below the header,
+  since centering-within-your-own-box then centers within a box far shorter
+  than the space actually available.
+*/
+.bk-table-empty {
+  @apply absolute inset-x-0 bottom-0 flex flex-col justify-center items-center py-10;
+  top: var(--bk-thead-row-1, 38px);
+}
+
+.bk-table-empty-img {
+  @apply mb-3 w-96 max-w-full;
+}
+
+.bk-table-empty-text {
+  @apply block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2;
+}
+
+/* ---------- Pagination ---------- */
+
+/*
+  A bare slot. bk-pagination already draws its own top rule and padding, so
+  anything added here lands on top of them: the wrapper's border and the
+  pager's border showed as two lines, the inner one inset by the doubled
+  padding. The pager owns the row.
+*/
+.bk-table-pagination {
+  @apply contents;
+}
+
+/* ---------- Virtual scroll ---------- */
+
+.bk-table-viewport {
+  @apply w-full;
+}
+
+/*
+  Scrolled programmatically to match the body, never by the user — its own
+  scrollbar would be a second, conflicting control over the same axis.
+*/
+.bk-table-virtual-head {
+  @apply w-full overflow-hidden;
+}
+
+/* The lifted header is already at the top; sticky would be redundant here. */
+.bk-table-virtual-head .bk-th {
+  position: static;
+}
+
+/* ---------- Indeterminate checkbox ---------- */
+
+/*
+  bk-checkbox has checked and unchecked states only. A select-all that is
+  partly on is neither, and showing it as either one is a lie about the
+  selection — so the dash is drawn over the box from here.
+*/
+.bk-checkbox-indeterminate .checkbox {
+  @apply bg-black border-black;
+}
+
+.bk-checkbox-indeterminate .checkbox::after {
+  content: '';
+  @apply absolute w-2 h-0.5 bg-white rounded-sm;
+}
+
+/* ---------- Drag sorting (carried over from grid.css) ---------- */
+
+.cdk-drag-preview {
+  display: table;
+  /*
+    `bk-table` itself switches to `fixed` once its columns are measured (see
+    `BkTable.freezeColumnWidths()`), specifically so a column's width comes
+    only from its own declared width, never from a cell's content pulling it
+    wider or a `max-width` pulling it narrower (that's the whole trick behind
+    `.bk-cell-ellipsis`'s `max-width: 0` — see table-cell-base.ts). The preview
+    is a lone `<tr>` cloned out of that table, and `table-layout` isn't
+    inherited, so left on the default `auto` it re-opens exactly the sizing
+    problem `fixed` exists to close: an ellipsis column's `max-width: 0`
+    collapses the column instead of just clipping its text, since `auto`
+    layout (unlike `fixed`) actually consults it when sizing. `BkTableDrag`
+    still copies each cell's real width across in `onStart` — that only lands
+    correctly if the preview resolves widths the same way the source table
+    does.
+  */
+  table-layout: fixed;
+  width: 100%;
+  background: #fff;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.4;
+  background-color: #f3f4f6;
+}
+
+.cdk-drag-animating,
+.cdk-drop-list-dragging .cdk-drag {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/*
+  inline-flex + items-center: the default icon is an SVG, not a text glyph, so
+  it needs to be centered against whatever sits beside it — including its own
+  row height when it is the only thing in a dedicated column.
+*/
+.bk-drag-handle {
+  @apply cursor-move inline-flex items-center justify-center text-[#C4CADA] hover:text-[#78829D] mr-2 align-middle;
+}
+
+/* ---------- Tree drag indicator ----------
+
+   The three drop zones drawn live: a line above the row (before), a line
+   below it (after), a tinted row (inside). The line is positioned by
+   BkTreeDrag inside .bk-table-container, which is already relative. */
+
+.bk-tree-drop-line {
+  @apply absolute pointer-events-none rounded-full;
+  height: 2px;
+  background: #15191e;
+  z-index: 5;
+}
+
+/*
+  A neutral wash, not a color-coded one: the theme has no accent hue to reach
+  for, so "inside" is read off shape rather than color — the same fill the row
+  hover already uses, plus an inset ring per cell (borders are per-cell here
+  under border-collapse: separate) that a plain hover never draws.
+
+  Same specificity as the hover rule and later in the file, so the drop tint
+  wins over hover while the pointer is on the row.
+*/
+.bk-table tbody tr.bk-tree-drop-inside .bk-td {
+  background: #f1f2f4;
+  box-shadow: inset 0 0 0 1px rgba(21, 25, 30, 0.35);
+}

package/src/styles.css

@@ -29,3 +29,4 @@
 @import './lib/popover/popover.css';
 @import './lib/menu/menu.css';
 @import './lib/ui-avatar-group/ui-avatar-group.css';
+@import './lib/table/table.css';