ngwr 7.3.0 → 9.0.0

package/table/styles/_index.scss

@@ -1,18 +1,21 @@
 @use '../../theme/styles' as theme;
 
 .wr-table {
-  --wr-table-border: var(--wr-color-light);
-  --wr-table-head-bg: rgba(var(--wr-color-light-rgb), 0.25);
-  --wr-table-row-hover: rgba(var(--wr-color-light-rgb), 0.15);
+  --wr-table-border: var(--wr-color-outline);
+  --wr-table-head-bg: rgba(var(--wr-color-outline-rgb), 0.25);
+  --wr-table-row-hover: rgba(var(--wr-color-outline-rgb), 0.15);
 
   display: block;
   position: relative;
+  // Own stacking context so the loading overlay reliably outranks the sticky
+  // pinned cells regardless of the surrounding page z-index.
+  isolation: isolate;
   width: 100%;
   border: 1px solid var(--wr-table-border);
   @include theme.smooth-br(var(--wr-border-radius-base));
   overflow: hidden;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   // Opt-in (`responsive`): query the table's own width so each row collapses to
   // a labelled card when it's too narrow for columns. Already width:100%, so
@@ -29,7 +32,7 @@
   &__table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
   }
 
@@ -42,15 +45,210 @@
   }
 
   &__th {
+    position: relative;
     background: var(--wr-table-head-bg);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-weight: 600;
-    font-size: 0.6875rem;
+    font-size: var(--wr-text-xs);
     letter-spacing: 0.04em;
     text-transform: uppercase;
     white-space: nowrap;
   }
 
+  // --- Column resizing ------------------------------------------------------
+  // Once a column is dragged the table goes fixed-layout so `<col>` widths are
+  // exact; cells then truncate rather than forcing the column wider.
+  &__table--fixed {
+    table-layout: fixed;
+  }
+
+  &__table--fixed &__td,
+  &__table--fixed &__foot-cell {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__table--fixed &__th {
+    overflow: hidden;
+  }
+
+  &__resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    width: 0.5rem;
+    height: 100%;
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 20% 0.1875rem;
+      left: auto;
+      width: 2px;
+      border-radius: 1px;
+      background: var(--wr-color-outline);
+      opacity: 0;
+      transition: opacity var(--wr-transition-base);
+    }
+
+    &:hover::after {
+      opacity: 1;
+    }
+  }
+
+  // --- Column reordering ----------------------------------------------------
+  &__th--draggable {
+    cursor: grab;
+    user-select: none;
+  }
+
+  .cdk-drag-placeholder {
+    opacity: 0.35;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 0.18s cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  // --- Row selection --------------------------------------------------------
+  &__th--select,
+  &__td--select {
+    width: 1%;
+    white-space: nowrap;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  &__tr--selected,
+  &__tr--selected:hover {
+    background: var(--wr-color-primary-soft);
+  }
+
+  // Pinned cells paint their own opaque background, so re-apply the selection
+  // tint over it (same technique as the row-hover rule above).
+  &__tr--selected &__td--pin-left,
+  &__tr--selected &__td--pin-right,
+  &__tr--selected:hover &__td--pin-left,
+  &__tr--selected:hover &__td--pin-right {
+    background-image: linear-gradient(var(--wr-color-primary-soft), var(--wr-color-primary-soft));
+  }
+
+  // --- Row expansion --------------------------------------------------------
+  &__th--expand,
+  &__td--expand {
+    width: 1%;
+    white-space: nowrap;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  &__expand-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    padding: 0.25rem;
+    background: transparent;
+    border: 0;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-on-surface-muted);
+    cursor: pointer;
+    transition: color var(--wr-transition-base);
+
+    &:hover {
+      color: var(--wr-color-on-surface);
+    }
+  }
+
+  &__expand-icon {
+    width: 1rem;
+    height: 1rem;
+    transition: transform var(--wr-transition-base);
+  }
+
+  &__expand-btn--open &__expand-icon {
+    transform: rotate(90deg);
+  }
+
+  &__detail-row > &__detail {
+    padding: 0.875rem 1rem;
+    background: rgba(var(--wr-color-outline-rgb), 0.08);
+    border-bottom: 1px solid var(--wr-table-border);
+  }
+
+  &__detail-row:last-child > &__detail {
+    border-bottom: 0;
+  }
+
+  // Fixed width for the leading select / expand columns (their `<col>` entries).
+  &__col--lead {
+    width: 2.75rem;
+  }
+
+  // --- Summary / footer row -------------------------------------------------
+  &__foot-cell {
+    padding: calc(0.625rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
+    background: var(--wr-table-head-bg);
+    border-top: 1px solid var(--wr-table-border);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  // Pinned footer cells need an opaque base (over the head tint) to stay sticky.
+  &__foot-cell#{&}__td--pin-left,
+  &__foot-cell#{&}__td--pin-right {
+    background-color: var(--wr-color-surface);
+    background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
+  }
+
+  // --- Pinned columns -------------------------------------------------------
+  // Frozen against an edge while the rest scrolls. Pinned cells need an opaque
+  // background so scrolled content can't show through; the left / right offsets
+  // are measured and set inline by the component.
+  &__th--pin-left,
+  &__th--pin-right,
+  &__td--pin-left,
+  &__td--pin-right {
+    position: sticky;
+  }
+
+  &__td--pin-left,
+  &__td--pin-right {
+    z-index: 1;
+    background-color: var(--wr-color-surface);
+  }
+
+  // Header cells lay the head tint over the opaque base so the row stays seamless.
+  &__th--pin-left,
+  &__th--pin-right {
+    z-index: 2;
+    background-color: var(--wr-color-surface);
+    background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
+  }
+
+  // Keep the row-hover tint on pinned body cells.
+  &__tr:hover &__td--pin-left,
+  &__tr:hover &__td--pin-right {
+    background-image: linear-gradient(var(--wr-table-row-hover), var(--wr-table-row-hover));
+  }
+
+  // Separating shadow on the inner edge of each pinned group.
+  &__th--pin-edge-left,
+  &__td--pin-edge-left {
+    box-shadow: 0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
+  }
+
+  &__th--pin-edge-right,
+  &__td--pin-edge-right {
+    box-shadow: -0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
+  }
+
   &__th-inner {
     display: inline-flex;
     align-items: center;
@@ -85,7 +283,7 @@
 
   &__empty {
     text-align: center;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     padding: 1.5rem;
   }
 
@@ -103,9 +301,173 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(var(--wr-color-white-rgb), 0.7);
+    background: rgba(var(--wr-color-surface-rgb), 0.7);
     backdrop-filter: blur(2px);
-    z-index: 1;
+    // Above the pinned sticky cells (th z-index 2), so loading veils them too.
+    z-index: 3;
+  }
+
+  // --- Row grouping ---------------------------------------------------------
+  --wr-table-group-bg: rgba(var(--wr-color-outline-rgb), 0.18);
+
+  &__group-cell {
+    // NOTE: never add `overflow` here — the inner box below is `position: sticky`
+    // and clips the instant this cell becomes a scroll container. The `--fixed`
+    // overflow rules target `__td` / `__foot-cell`, which this cell deliberately
+    // is NOT, so it stays safe as written.
+    padding: 0;
+    background: var(--wr-table-group-bg);
+    border-bottom: 1px solid var(--wr-table-border);
+  }
+
+  // The band cell is full table width, so a sticky inline box inside it rides
+  // horizontal scroll and keeps the label at the left edge. No measurement.
+  &__group-inner {
+    position: sticky;
+    left: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    max-width: 100%;
+    padding: calc(0.5rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
+  }
+
+  &__group-select {
+    flex: 0 0 auto;
+  }
+
+  &__group-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0; // lets the label shrink so the cell can't widen columns
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  &__group-icon {
+    flex: 0 0 auto;
+    width: 1rem;
+    height: 1rem;
+    transition: transform var(--wr-transition-base);
+    transform: rotate(90deg); // expanded — chevron points down
+  }
+
+  &__group-row--collapsed &__group-icon {
+    transform: none; // collapsed — chevron points right
+  }
+
+  &__group-label {
+    // Cap intrinsic width: in the default (auto) layout a colspan cell's
+    // min-content is spread across columns, so an ellipsizing shrinkable label
+    // keeps a long group name from widening the table.
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__group-count {
+    flex: 0 0 auto;
+    padding: 0 0.375rem;
+    border-radius: var(--wr-border-radius-pill);
+    background: rgba(var(--wr-color-outline-rgb), 0.5);
+    color: var(--wr-color-on-surface-muted);
+    font-size: var(--wr-text-xs);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Per-group subtotal row: the grand footer in the group tint. Every cell
+  // carries an opaque `surface` base with the tint layered on top (same
+  // technique as the pinned-footer rule), so pinned subtotal cells stay opaque
+  // and sticky. Declared AFTER `&__foot-cell#{&}__td--pin-*` so the
+  // same-specificity (0,2,0) tie resolves here and paints the group tint.
+  &__group-foot-row > &__foot-cell {
+    border-top: 0;
+    border-bottom: 1px solid var(--wr-table-border);
+    background-color: var(--wr-color-surface);
+    background-image: linear-gradient(var(--wr-table-group-bg), var(--wr-table-group-bg));
+  }
+
+  // The table's genuine last body row must not double the host's own bottom
+  // border. The existing `&__tr:last-child .wr-table__td` covers a data row;
+  // these cover a trailing subtotal row or a trailing collapsed band.
+  &__group-foot-row:last-child > &__foot-cell,
+  &__group-row:last-child > &__group-cell {
+    border-bottom: 0;
+  }
+}
+
+// --- Virtualized body -------------------------------------------------------
+// Scoped under the host `--virtual` class, so a non-virtual table is untouched.
+.wr-table--virtual {
+  // One dual-axis scroll container: keep overflow-x (pins), add overflow-y.
+  // `max-height` is set inline from `viewportHeight`.
+  .wr-table__scroll {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  // Sticky header. Plain (non-pinned) cells need an OPAQUE base or scrolled body
+  // rows bleed through the translucent head tint.
+  thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  thead th:not(.wr-table__th--pin-left):not(.wr-table__th--pin-right) {
+    background-color: var(--wr-color-surface);
+    background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
+  }
+
+  // The corner-sticky pinned header must beat the plain sticky header during
+  // horizontal scroll (plain th is z-2).
+  .wr-table__th--pin-left,
+  .wr-table__th--pin-right {
+    z-index: 3;
+  }
+
+  // Uniform row height (fixed layout is already forced → cells truncate via the
+  // existing `--fixed` rules). `height` is a MINIMUM, not a clamp — see the
+  // rowHeight contract on the component.
+  .wr-table__tr {
+    height: var(--wr-table-row-h);
+  }
+
+  // Height-only reserved rows contribute nothing to columns or borders.
+  .wr-table__spacer > td {
+    padding: 0;
+    border: 0;
+  }
+
+  // Grand footer pinned to the viewport bottom; plain cells get the opaque base.
+  tfoot .wr-table__foot-cell {
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+  }
+
+  tfoot .wr-table__foot-cell:not(.wr-table__td--pin-left):not(.wr-table__td--pin-right) {
+    background-color: var(--wr-color-surface);
+    background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
+  }
+
+  tfoot .wr-table__foot-cell.wr-table__td--pin-left,
+  tfoot .wr-table__foot-cell.wr-table__td--pin-right {
+    z-index: 3;
+  }
+
+  // The loading overlay must outrank the new z-3 corner-sticky header/footer.
+  .wr-table__loading {
+    z-index: 4;
   }
 }
 
@@ -153,20 +515,88 @@
   .wr-table--responsive .wr-table__td::before {
     content: attr(data-label);
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
-    font-size: 0.6875rem;
+    color: var(--wr-color-on-surface-muted);
+    font-size: var(--wr-text-xs);
     font-weight: 600;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     text-align: left;
     white-space: nowrap;
   }
+
+  // Pinning is meaningless once each row is a card — unfreeze the body cells
+  // (the header, and thus pinned `th`, is already hidden above).
+  .wr-table--responsive .wr-table__td--pin-left,
+  .wr-table--responsive .wr-table__td--pin-right {
+    position: static;
+    z-index: auto;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  // Fixed-layout truncation is meaningless in cards — let values wrap again.
+  .wr-table--responsive .wr-table__table--fixed .wr-table__td {
+    overflow: visible;
+    white-space: normal;
+    text-overflow: clip;
+  }
+
+  // The select / expand cells have no label — drop their empty card-mode label.
+  .wr-table--responsive .wr-table__td--select::before,
+  .wr-table--responsive .wr-table__td--expand::before {
+    display: none;
+  }
+
+  // The detail row spans the card rather than a table cell.
+  .wr-table--responsive .wr-table__detail-row,
+  .wr-table--responsive .wr-table__detail {
+    display: block;
+  }
+
+  // The summary footer doesn't translate to cards — hide it.
+  .wr-table--responsive .wr-table__foot-row {
+    display: none;
+  }
+
+  // Group bands become full-width section headers between the cards.
+  .wr-table--responsive .wr-table__group-row,
+  .wr-table--responsive .wr-table__group-cell {
+    display: block;
+  }
+
+  .wr-table--responsive .wr-table__group-inner {
+    position: static;
+    display: flex;
+    width: 100%;
+  }
+
+  .wr-table--responsive .wr-table__group-toggle {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+
+  // Per-group subtotals don't translate to cards either — hide like the grand footer.
+  .wr-table--responsive .wr-table__group-foot-row {
+    display: none;
+  }
+
+  .wr-table--responsive .wr-table__group-row:last-child {
+    border-bottom: 0;
+  }
+
+  // A hidden trailing subtotal row still occupies the DOM, stealing `:last-child`
+  // from the last data card — clear that card's border so it doesn't double the
+  // host's own bottom border.
+  .wr-table--responsive .wr-table__tr:has(+ .wr-table__group-foot-row:last-child) {
+    border-bottom: 0;
+  }
 }
 
 .wr-table-sort {
   display: inline-flex;
   --wr-icon-size: 0.875rem;
-  color: var(--wr-color-medium);
+  color: var(--wr-color-on-surface-muted);
   transition:
     transform var(--wr-transition-base),
     color var(--wr-transition-base);
@@ -186,7 +616,7 @@
 
 .wr-table-filter {
   display: inline-flex;
-  color: var(--wr-color-medium);
+  color: var(--wr-color-on-surface-muted);
 
   &--active {
     color: var(--wr-color-primary);
@@ -214,7 +644,7 @@
     border-radius: var(--wr-border-radius-pill);
     background: var(--wr-color-primary);
     color: var(--wr-color-primary-contrast);
-    font-size: 0.625rem;
+    font-size: 0.625rem; // 10px — intentional micro-count badge, below --wr-text-xs
     font-weight: 600;
   }
 
@@ -232,12 +662,12 @@
     appearance: none;
     width: 100%;
     padding: 0.375rem 0.5rem;
-    border: 1px solid var(--wr-color-light);
+    border: 1px solid var(--wr-color-outline);
     border-radius: var(--wr-border-radius-sm);
     background: transparent;
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
   }
 
   &__list {
@@ -256,14 +686,14 @@
     border: 0;
     padding: 0.375rem 0.5rem;
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     text-align: left;
     cursor: pointer;
 
     &:hover {
-      background: rgba(var(--wr-color-light-rgb), 0.35);
+      background: rgba(var(--wr-color-outline-rgb), 0.35);
     }
   }
 
@@ -274,7 +704,7 @@
     width: 1rem;
     height: 1rem;
     border-radius: var(--wr-border-radius-sm);
-    border: 1px solid var(--wr-color-light);
+    border: 1px solid var(--wr-color-outline);
     color: transparent;
     --wr-icon-size: 0.75rem;
     transition: var(--wr-transition-base);
@@ -292,8 +722,8 @@
 
   &__empty {
     padding: 0.625rem 0.5rem;
-    color: var(--wr-color-medium);
-    font-size: 0.8125rem;
+    color: var(--wr-color-on-surface-muted);
+    font-size: var(--wr-text-sm);
     text-align: center;
   }
 
@@ -305,12 +735,12 @@
     border-radius: var(--wr-border-radius-sm);
     color: var(--wr-color-primary);
     font: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     cursor: pointer;
     text-align: left;
 
     &:hover {
-      background: rgba(var(--wr-color-primary-rgb), 0.08);
+      background: var(--wr-color-primary-soft);
     }
   }
 }

package/tabs/styles/_index.scss

@@ -1,11 +1,15 @@
 @use '../../theme/styles' as theme;
 
 .wr-tabs {
-  --wr-tabs-border: var(--wr-color-light);
-  --wr-tabs-color: var(--wr-color-medium);
-  --wr-tabs-color-hover: var(--wr-color-dark);
+  --wr-tabs-border: var(--wr-color-outline);
+  --wr-tabs-color: var(--wr-color-on-surface-muted);
+  --wr-tabs-color-hover: var(--wr-color-on-surface);
   --wr-tabs-color-active: var(--wr-color-primary);
   --wr-tabs-indicator: var(--wr-color-primary);
+  --wr-tabs-font-size: var(--wr-control-font-size-md);
+  --wr-tabs-line-height: var(--wr-control-line-height-md);
+  --wr-tabs-padding-y: 0.625rem;
+  --wr-tabs-padding-x: 1rem;
 
   display: block;
   // Claim the full row even when nested in a flex-row demo wrapper.
@@ -14,6 +18,21 @@
   min-width: 0;
   font-family: var(--wr-font-family-base);
 
+  // Sizes — wire the (previously inert) `size` input to the control fonts.
+  &--sm {
+    --wr-tabs-font-size: var(--wr-control-font-size-sm);
+    --wr-tabs-line-height: var(--wr-control-line-height-sm);
+    --wr-tabs-padding-y: 0.5rem;
+    --wr-tabs-padding-x: 0.75rem;
+  }
+
+  &--lg {
+    --wr-tabs-font-size: var(--wr-control-font-size-lg);
+    --wr-tabs-line-height: var(--wr-control-line-height-lg);
+    --wr-tabs-padding-y: 0.75rem;
+    --wr-tabs-padding-x: 1.25rem;
+  }
+
   &__strip {
     display: flex;
     align-items: stretch;
@@ -60,12 +79,12 @@
     background: transparent;
     border: 0;
     text-decoration: none;
-    padding: 0.625rem 1rem;
+    padding: var(--wr-tabs-padding-y) var(--wr-tabs-padding-x);
     color: var(--wr-tabs-color);
     font: inherit;
-    font-size: 0.875rem;
+    font-size: var(--wr-tabs-font-size);
     font-weight: 500;
-    line-height: 1.25rem;
+    line-height: var(--wr-tabs-line-height);
     border-bottom: 2px solid transparent;
     cursor: pointer;
     white-space: nowrap;