ngwr 8.0.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
@@ -42,8 +45,9 @@
   }
 
   &__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: var(--wr-text-xs);
     letter-spacing: 0.04em;
@@ -51,6 +55,200 @@
     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,7 +515,7 @@
   .wr-table--responsive .wr-table__td::before {
     content: attr(data-label);
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: 600;
     letter-spacing: 0.04em;
@@ -161,12 +523,80 @@
     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);
@@ -232,10 +662,10 @@
     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: var(--wr-text-sm);
   }
@@ -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: 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,7 +722,7 @@
 
   &__empty {
     padding: 0.625rem 0.5rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-sm);
     text-align: center;
   }

package/tabs/styles/_index.scss

@@ -1,9 +1,9 @@
 @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);

package/textarea/styles/_index.scss

@@ -5,10 +5,10 @@
   position: relative;
 
   // Defaults
-  --wr-textarea-color: var(--wr-color-dark);
-  --wr-textarea-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
-  --wr-textarea-bg: var(--wr-color-white);
-  --wr-textarea-border: var(--wr-color-light);
+  --wr-textarea-color: var(--wr-color-on-surface);
+  --wr-textarea-placeholder: rgba(var(--wr-color-on-surface-muted-rgb), 0.7);
+  --wr-textarea-bg: var(--wr-color-surface);
+  --wr-textarea-border: var(--wr-color-outline);
   --wr-textarea-radius: var(--wr-control-radius-md);
   --wr-textarea-ring: transparent;
   --wr-textarea-padding-y: 0.5rem;
@@ -32,8 +32,8 @@
   }
 
   &--disabled {
-    --wr-textarea-color: var(--wr-color-medium);
-    --wr-textarea-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    --wr-textarea-color: var(--wr-color-on-surface-muted);
+    --wr-textarea-bg: rgba(var(--wr-color-outline-rgb), 0.35);
     cursor: not-allowed;
   }
 
@@ -117,7 +117,7 @@
     }
 
     &:hover {
-      color: var(--wr-color-medium);
+      color: var(--wr-color-on-surface-muted);
     }
   }
 }

package/theme/styles/_colors.scss

@@ -5,7 +5,7 @@
 // Base palette
 //
 // Override the whole palette via:
-//   @use 'ngwr/theme/colors' with (
+//   @use 'ngwr/theme/styles/colors' with (
 //     $base-colors: (primary: #...)
 //   );
 
@@ -102,11 +102,35 @@ $contrast-light: #ffffff !default;
   --wr-color-gray-950: #020617;
 
   // Semantic role aliases over the flipping neutrals — prefer these in new code
-  // for intent-free surface / text jobs. They resolve through `white` / `dark`
-  // / `medium`, so they flip with the theme automatically.
+  // for intent-free surface / text / outline jobs. They resolve through
+  // `white` / `dark` / `medium` / `light`, so they flip with the theme
+  // automatically.
+  //
+  // Why roles at all: the neutrals do double duty. `--wr-color-dark` is both
+  // the `color="dark"` INTENT (a button variant, public API) and the default
+  // text colour; `--wr-color-white` is both the `color="light"`-adjacent
+  // surface and the page background. Reading `dark` in a component tells you
+  // nothing about which job it is doing. The roles name the job, so a future
+  // reader — and a future re-theme — can tell them apart. The intent scale
+  // stays exactly as it is; these sit on top of it.
+  //
+  // Each role mirrors the literal 1:1, including the `-rgb` channel list so
+  // translucent fills (`rgba(var(--wr-color-surface-rgb), α)`) never have to
+  // reach back down to a literal.
   --wr-color-surface: var(--wr-color-white);
+  --wr-color-surface-rgb: var(--wr-color-white-rgb);
   --wr-color-on-surface: var(--wr-color-dark);
+  --wr-color-on-surface-rgb: var(--wr-color-dark-rgb);
   --wr-color-on-surface-muted: var(--wr-color-medium);
+  --wr-color-on-surface-muted-rgb: var(--wr-color-medium-rgb);
+
+  // Solid hairline / divider colour. Distinct from `--wr-color-border` above,
+  // which is deliberately translucent (`light` at 50%) so it reads on any
+  // surface — `outline` is the opaque one components actually draw 1px rules
+  // with today. Both are kept: swapping one for the other changes appearance,
+  // not just naming.
+  --wr-color-outline: var(--wr-color-light);
+  --wr-color-outline-rgb: var(--wr-color-light-rgb);
 
   @each $name, $base in $base-colors {
     --wr-color-#{$name}: #{$base};

package/tilt-card/styles/_index.scss

@@ -7,9 +7,9 @@
   position: relative;
   padding: 1.5rem;
   border-radius: 0.75rem;
-  border: 1px solid var(--wr-color-light);
-  background: var(--wr-color-white);
-  color: var(--wr-color-dark);
+  border: 1px solid var(--wr-color-outline);
+  background: var(--wr-color-surface);
+  color: var(--wr-color-on-surface);
   box-shadow: 0 1px 2px rgba(var(--wr-color-backdrop-rgb), 0.06);
   // Card itself doesn't need overflow:hidden by default — the directive
   // toggles overflow when glare is enabled. Authors can opt in.
@@ -27,7 +27,7 @@
   // to the classic white sheen below.
   background: radial-gradient(
     circle at var(--wr-tilt-glare-x, 50%) var(--wr-tilt-glare-y, 50%),
-    var(--wr-tilt-glare-color, rgba(var(--wr-color-dark-rgb), 0.12)),
+    var(--wr-tilt-glare-color, rgba(var(--wr-color-on-surface-rgb), 0.12)),
     transparent 60%
   );
   mix-blend-mode: multiply;