canny-ui 6.7.0 → 7.0.0

package/src/components/_datatable.scss

@@ -1,41 +1,58 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // DataTable — server-driven data grid (sorting header, selection, pagination footer).
 
 .cny-dt {
+  // Elevated card: a border strong enough to read against a near-white page
+  // (~3:1), a bright surface and a layered shadow. Header tint is distinct from
+  // both the body and the page.
+  --cny-dt-border: color-mix(in srgb, var(--text-muted) 70%, var(--border-color-strong));
+  --cny-dt-head-bg: color-mix(in srgb, var(--bg-surface-edge) 55%, var(--bg-surface-low));
   display: flex;
   flex-direction: column;
   width: 100%;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--cny-dt-border);
   border-radius: $radius-lg;
   background: var(--bg-surface-lowest);
+  box-shadow: var(--shadow-sm), 0 6px 16px -6px rgba(9, 9, 11, 0.12);
   overflow: hidden;
   font-family: var(--font-body);
 }
 
-// horizontal scroll keeps the grid responsive on narrow screens
+// The grid is its own scrollport. With no height from outside it is exactly as
+// tall as its rows; give the table a `height`/`max-height` and the rows scroll
+// inside it while the sticky header stays put — no opt-in needed.
 .cny-dt-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
   width: 100%;
-  overflow-x: auto;
+  overflow: auto;
+  @include sb.expand-scrollbar;
+
+  // a clearly visible thumb on this surface (the shared one is faint at rest)
+  &::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
+  }
+  &:hover::-webkit-scrollbar-thumb,
+  &:focus-within::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--text-muted) 80%, transparent);
+  }
+  &::-webkit-scrollbar-thumb:hover,
+  &::-webkit-scrollbar-thumb:active {
+    background-color: var(--text-muted);
+  }
 }
 
-// `stickyHeader`: make .cny-dt-scroll the scrollport so the `position: sticky`
-// already on `thead th` engages. Without this the grid is as tall as its rows
-// and an ancestor does the scrolling, which carries the header off with them.
-// Height comes from the consumer — this only says how to divide it.
+// `stickyHeader` is kept for compatibility: the sticky header is now the default.
 .cny-dt-sticky {
   min-height: 0;
-
-  .cny-dt-scroll {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-  }
 }
 
 .cny-dt-table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   font-size: 0.875rem;
   color: var(--text-primary);
 
@@ -47,17 +64,22 @@
     white-space: nowrap;
   }
 
+  td {
+    line-height: 1.4;
+  }
+
   thead th {
     position: sticky;
     top: 0;
-    z-index: 1;
-    font-size: 0.75rem;
+    z-index: 3;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-size: 0.8125rem;
     font-weight: 600;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    background: var(--bg-surface-low);
-    border-bottom: 1px solid var(--border-color);
+    line-height: 1.25;
+    color: var(--text-secondary);
+    background: var(--cny-dt-head-bg);
+    border-bottom: 2px solid var(--cny-dt-border);
   }
 
   tbody td {
@@ -69,20 +91,28 @@
   }
 }
 
-.cny-dt-left {
+.cny-dt-table .cny-dt-left {
   text-align: left;
 }
-.cny-dt-center {
+.cny-dt-table .cny-dt-center {
   text-align: center;
 }
-.cny-dt-right {
+.cny-dt-table .cny-dt-right {
   text-align: right;
 }
 
 .cny-dt-th-inner {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+}
+
+// long headers truncate; the full text is in the cell's title tooltip
+.cny-dt-th-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 // right-aligned headers push the sort affordance to the correct edge
@@ -95,32 +125,37 @@
 
 .cny-dt-sortable {
   user-select: none;
-  transition: color 120ms ease;
+  cursor: pointer;
+  transition: color 120ms ease, background-color 120ms ease;
+
+  &:hover,
+  &:focus-within {
+    background: color-mix(in srgb, var(--text-muted) 14%, var(--cny-dt-head-bg));
+    color: var(--text-primary);
+  }
 
   &.is-sorted {
-    color: var(--color-primary);
+    color: var(--text-accent);
+    box-shadow: inset 0 -2px 0 var(--color-primary);
   }
 }
 
-// keyboard-operable sort control inside sortable header cells
+// keyboard-operable sort control: a real button filling the header cell
 .cny-dt-sortbtn {
   appearance: none;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   width: 100%;
+  min-width: 0;
   margin: 0;
   padding: 0;
   border: 0;
   background: none;
   font: inherit;
   color: inherit;
+  text-align: inherit;
   cursor: pointer;
   border-radius: var(--radius-xs);
-  transition: color 120ms ease;
-
-  &:hover {
-    color: var(--text-primary);
-  }
 
   &:focus-visible {
     outline: none;
@@ -128,10 +163,26 @@
   }
 }
 
+// neutral up/down chevrons appear on hover / focus; the active direction is solid.
 .cny-dt-sort-icon {
   display: inline-flex;
+  flex: none;
   align-items: center;
-  opacity: 0.5;
+  width: 16px;
+  justify-content: center;
+  color: var(--text-muted);
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.cny-dt-sortable:hover .cny-dt-sort-icon,
+.cny-dt-sortbtn:focus-visible .cny-dt-sort-icon {
+  opacity: 0.8;
+}
+
+.cny-dt-sortable.is-sorted .cny-dt-sort-icon {
+  opacity: 1;
+  color: var(--text-accent);
 }
 
 // drag-to-resize handle on the right edge of each header cell
@@ -139,41 +190,76 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 9px;
+  width: 14px; // comfortable hit area; the visible line stays 1-2px
   height: 100%;
   cursor: col-resize;
   user-select: none;
   touch-action: none;
 
+  &:focus-visible {
+    outline: none;
+    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  }
+
+  &:focus-visible::after {
+    opacity: 1;
+    top: 15%;
+    height: 70%;
+    width: 2px;
+    background: var(--color-primary);
+  }
+
   &::after {
     content: '';
     position: absolute;
-    top: 20%;
-    right: 4px;
-    width: 2px;
-    height: 60%;
-    border-radius: 2px;
-    background: transparent;
-    transition: background-color 120ms ease;
+    top: 25%;
+    right: 6px;
+    width: 1px;
+    height: 50%;
+    background: var(--cny-dt-border);
+    opacity: 0;
+    transition: opacity 120ms ease, background-color 120ms ease, width 120ms ease;
   }
 
   &:hover::after {
+    top: 15%;
+    height: 70%;
+    width: 2px;
     background: var(--color-primary);
   }
 }
 
-.cny-dt-sortable.is-sorted .cny-dt-sort-icon {
+.cny-dt-table thead th:hover .cny-dt-resizer::after,
+.cny-dt-table thead th:focus-within .cny-dt-resizer::after {
+  opacity: 0.8;
+}
+.cny-dt-table thead th .cny-dt-resizer:hover::after {
   opacity: 1;
 }
 
+// while dragging: the handle goes full height and a guide runs down the column
+.cny-dt-table thead th.is-resizing .cny-dt-resizer::after {
+  opacity: 1;
+  top: 0;
+  height: 100%;
+  width: 2px;
+  background: var(--color-primary);
+}
+.cny-dt-table td.is-resizing {
+  box-shadow: inset -2px 0 0 var(--color-primary-soft);
+}
+
 .cny-dt-row {
   transition: background-color 120ms ease;
 
+  // keep a keyboard-focused row clear of the sticky header
+  scroll-margin-top: 44px;
+
   &.is-clickable {
     cursor: pointer;
 
     &:focus-visible {
-      outline: 2px solid var(--color-primary);
+      outline: 2px solid var(--border-focus);
       outline-offset: -2px;
     }
   }
@@ -182,8 +268,30 @@
     background: var(--bg-surface-low);
   }
 
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: -2px;
+  }
+
   &.is-selected {
     background: var(--color-primary-soft);
+
+    &:hover {
+      background: color-mix(in srgb, var(--color-primary) 20%, transparent);
+    }
+  }
+}
+
+.cny-dt {
+  --cny-dt-stripe: color-mix(in srgb, var(--bg-surface-low) 60%, var(--bg-surface-lowest));
+}
+// `.is-alt` is set from the row's absolute index, so the stripe stays put when
+// virtualization swaps rows in and out (nth-child would flip on every scroll).
+.cny-dt-striped .cny-dt-table tbody tr.is-alt:not(.is-selected):not(:hover) {
+  background: var(--cny-dt-stripe);
+
+  td.cny-dt-pinned {
+    background-color: var(--cny-dt-stripe);
   }
 }
 
@@ -197,30 +305,252 @@
   }
 }
 
-.cny-dt-checkbox-cell {
-  width: 1%;
+.cny-dt-table th.cny-dt-checkbox-cell,
+.cny-dt-table td.cny-dt-checkbox-cell {
+  // exactly `checkboxColumnWidth` (set inline) so pinned offsets can rely on it
+  padding-left: 0;
+  padding-right: 0;
   white-space: nowrap;
   text-align: center;
 }
 
-.cny-dt-empty {
+// the selector must out-rank `.cny-dt-table td { text-align: left }`
+.cny-dt-table td.cny-dt-empty {
   padding: $space-8 $space-4;
   text-align: center;
   color: var(--text-muted);
+  white-space: normal;
 }
 
 .cny-dt-footer {
+  padding: $space-3 $space-4;
+  border-top: 1px solid var(--cny-dt-border);
+  background: var(--cny-dt-head-bg);
+}
+
+// one Pagination nav carries rows-per-page, range, page buttons and go-to; the
+// range text takes the free space so the page controls sit at the right edge.
+.cny-dt-pager {
+  display: flex;
+  width: 100%;
+  gap: $space-1;
+  row-gap: $space-2;
+
+  .cny-pagination-field {
+    margin: 0 $space-3 0 0;
+    color: var(--text-secondary);
+  }
+
+  .cny-pagination-range {
+    margin: 0 auto 0 0;
+    padding-right: $space-3;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+
+  .cny-pagination-select,
+  .cny-pagination-input {
+    border-color: var(--border-input);
+    box-shadow: var(--shadow-field);
+  }
+
+  .cny-pagination-control {
+    min-width: 32px;
+    color: var(--text-primary);
+    background: var(--bg-surface-lowest);
+    border-color: var(--border-input);
+
+    &:hover:not(:disabled) {
+      background: var(--bg-surface-low);
+      border-color: var(--border-input-hover);
+    }
+    &:disabled {
+      opacity: 0.45;
+    }
+  }
+
+  .cny-pagination-btn:not(.cny-pagination-control) {
+    color: var(--text-primary);
+    &.is-active {
+      color: var(--color-primary-on);
+      font-weight: 600;
+    }
+  }
+
+  .cny-pagination-field:last-child {
+    margin: 0 0 0 $space-3;
+  }
+}
+
+@media (max-width: 480px) {
+  .cny-dt-pager {
+    justify-content: center;
+    .cny-pagination-range {
+      flex: 1 0 100%;
+      margin: 0;
+      padding: 0;
+      text-align: center;
+    }
+  }
+}
+
+.cny-dt-count {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+
+// Pinned columns — `position: sticky` + inline left/right offsets from the
+// component. Cells need an opaque background so scrolled content does not show
+// through; row hover/selected tints are re-applied on top.
+.cny-dt-table {
+  td.cny-dt-pinned,
+  th.cny-dt-pinned {
+    position: sticky;
+    z-index: 1;
+    background: var(--bg-surface-lowest);
+  }
+  thead th.cny-dt-pinned {
+    z-index: 4;
+    background: var(--cny-dt-head-bg);
+  }
+  .cny-dt-pin-left.cny-dt-checkbox-cell {
+    left: 0;
+  }
+  .cny-dt-pin-left.is-pin-edge {
+    box-shadow: 1px 0 0 var(--border-color);
+  }
+  .cny-dt-pin-right.is-pin-edge {
+    box-shadow: -1px 0 0 var(--border-color);
+  }
+  // Row tints are translucent, so a pinned cell keeps an opaque base underneath
+  // (background-color) and the tint is layered on top (background-image) -
+  // scrolled-under text can never bleed through.
+  tbody tr:hover td.cny-dt-pinned {
+    background-color: var(--bg-surface-low);
+  }
+  tbody tr.is-selected td.cny-dt-pinned {
+    background-color: var(--bg-surface-lowest);
+    background-image: linear-gradient(var(--color-primary-soft), var(--color-primary-soft));
+  }
+  tbody tr.is-selected:hover td.cny-dt-pinned {
+    background-image: linear-gradient(
+      color-mix(in srgb, var(--color-primary) 20%, transparent),
+      color-mix(in srgb, var(--color-primary) 20%, transparent)
+    );
+  }
+}
+
+.cny-dt-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   gap: $space-2;
   padding: $space-2 $space-3;
-  border-top: 1px solid var(--border-color);
-  background: var(--bg-surface-low);
+  border-bottom: 1px solid var(--border-color-strong);
+  background: var(--bg-surface-lowest);
 }
 
-.cny-dt-count {
+// consumer content (search, filters) takes the left; the Columns button stays right
+.cny-dt-toolbar-slot {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $space-2;
+  min-width: 0;
+}
+
+// "3 selected · Clear" - always in the layout, so selecting a row never shifts the table
+.cny-dt-selbar {
+  min-height: 37px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: $space-3;
+  padding: $space-2 $space-4;
   font-size: 0.8125rem;
-  color: var(--text-muted);
+  color: var(--text-primary);
+  background: var(--color-primary-soft);
+  border-bottom: 1px solid var(--cny-dt-border);
+}
+
+.cny-dt-selbar-count {
+  font-weight: 600;
+}
+
+.cny-dt-selbar.is-empty {
+  background: var(--bg-surface-lowest);
+
+  .cny-dt-selbar-count {
+    font-weight: 400;
+    color: var(--text-muted);
+  }
+}
+
+// Fixed column layout: cells clip with an ellipsis (the full text is in `title`)
+.cny-dt-table.is-fixed {
+  td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Virtualized rows have a fixed height; spacer rows stand in for the rows
+// that are not in the DOM.
+.cny-dt-virtual .cny-dt-table tbody tr.cny-dt-row > td {
+  height: var(--cny-dt-row-h, 45px);
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cny-dt-table tbody tr.cny-dt-spacer > td {
+  padding: 0;
+  border: 0;
+}
+
+.cny-dt-colmenu {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+  min-width: 180px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+// "all N rows on this page are selected" banner
+.cny-dt-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: $space-2;
+  padding: $space-2 $space-3;
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+  background: var(--color-primary-soft);
+  border-bottom: 1px solid var(--cny-dt-border);
+}
+
+.cny-dt-banner-btn {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-weight: 600;
+  color: var(--text-accent);
+  cursor: pointer;
+  text-decoration: underline;
+
+  &:focus-visible {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-xs);
+  }
+}
+
+.cny-dt-empty-title {
+  display: block;
+  margin-bottom: $space-3;
 }