ngwr 7.2.0 → 8.0.0

package/table/styles/_index.scss

@@ -14,6 +14,13 @@
   font-family: var(--wr-font-family-base);
   color: var(--wr-color-dark);
 
+  // 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
+  // containment is safe.
+  &--responsive {
+    container: wr-table / inline-size;
+  }
+
   &__scroll {
     width: 100%;
     overflow-x: auto;
@@ -22,7 +29,7 @@
   &__table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
   }
 
@@ -38,7 +45,7 @@
     background: var(--wr-table-head-bg);
     color: var(--wr-color-medium);
     font-weight: 600;
-    font-size: 0.6875rem;
+    font-size: var(--wr-text-xs);
     letter-spacing: 0.04em;
     text-transform: uppercase;
     white-space: nowrap;
@@ -102,6 +109,60 @@
   }
 }
 
+// Responsive tables: when the box is too narrow for columns, each row becomes a
+// card and every cell shows its column title (from `data-label`) as a label.
+@container wr-table (max-width: 36rem) {
+  .wr-table--responsive .wr-table__scroll {
+    overflow-x: visible;
+  }
+
+  // Break the table grid down to blocks; the header row is replaced by per-cell
+  // labels.
+  .wr-table--responsive .wr-table__table,
+  .wr-table--responsive .wr-table__table tbody,
+  .wr-table--responsive .wr-table__tr,
+  .wr-table--responsive .wr-table__td {
+    display: block;
+  }
+
+  .wr-table--responsive .wr-table__table thead {
+    display: none;
+  }
+
+  // One card per row.
+  .wr-table--responsive .wr-table__tr {
+    padding: 0.375rem 0;
+    border-bottom: 1px solid var(--wr-table-border);
+  }
+
+  .wr-table--responsive .wr-table__tr:last-child {
+    border-bottom: 0;
+  }
+
+  // Each cell is a `LABEL ......... value` line.
+  .wr-table--responsive .wr-table__td {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 1rem;
+    padding: 0.25rem 0.875rem;
+    border-bottom: 0;
+    text-align: right;
+  }
+
+  .wr-table--responsive .wr-table__td::before {
+    content: attr(data-label);
+    flex: 0 0 auto;
+    color: var(--wr-color-medium);
+    font-size: var(--wr-text-xs);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    text-align: left;
+    white-space: nowrap;
+  }
+}
+
 .wr-table-sort {
   display: inline-flex;
   --wr-icon-size: 0.875rem;
@@ -153,7 +214,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;
   }
 
@@ -176,7 +237,7 @@
     background: transparent;
     color: var(--wr-color-dark);
     font: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
   }
 
   &__list {
@@ -197,7 +258,7 @@
     border-radius: var(--wr-border-radius-sm);
     color: var(--wr-color-dark);
     font: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     text-align: left;
     cursor: pointer;
 
@@ -232,7 +293,7 @@
   &__empty {
     padding: 0.625rem 0.5rem;
     color: var(--wr-color-medium);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     text-align: center;
   }
 
@@ -244,12 +305,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

@@ -6,6 +6,10 @@
   --wr-tabs-color-hover: var(--wr-color-dark);
   --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;
@@ -29,6 +48,30 @@
     // the y-axis since the strip is always a single row.
     overflow-x: auto;
     overflow-y: hidden;
+
+    // Edge fades — when the strip overflows, the side that still has tabs to
+    // scroll to fades out, cueing that there's more. `--wr-tabs-fade-*` default
+    // to 0 (no fade); the `--fade-start` / `--fade-end` modifiers below turn an
+    // edge on from the component's scroll metrics, so a non-scrolling strip is
+    // never masked.
+    --wr-tabs-fade: 1.5rem;
+    --wr-tabs-fade-start: 0px;
+    --wr-tabs-fade-end: 0px;
+    mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--wr-tabs-fade-start),
+      #000 calc(100% - var(--wr-tabs-fade-end)),
+      transparent 100%
+    );
+  }
+
+  &--fade-start &__strip {
+    --wr-tabs-fade-start: var(--wr-tabs-fade);
+  }
+
+  &--fade-end &__strip {
+    --wr-tabs-fade-end: var(--wr-tabs-fade);
   }
 
   &__tab {
@@ -36,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;

package/textarea/styles/_index.scss

@@ -9,11 +9,11 @@
   --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-radius: var(--wr-border-radius-base);
+  --wr-textarea-radius: var(--wr-control-radius-md);
   --wr-textarea-ring: transparent;
   --wr-textarea-padding-y: 0.5rem;
-  --wr-textarea-padding-x: 0.75rem;
-  --wr-textarea-font-size: 0.875rem;
+  --wr-textarea-padding-x: var(--wr-control-padding-x-md);
+  --wr-textarea-font-size: var(--wr-text-sm);
   --wr-textarea-line-height: 1.375rem;
 
   background: var(--wr-textarea-bg);
@@ -37,6 +37,29 @@
     cursor: not-allowed;
   }
 
+  // Horizontal resize needs a shrinkable, explicit-width box (not full-width block).
+  &--resize-x {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  // Sizes — radius, padding, font + line-height scale; height stays content-driven.
+  &--sm {
+    --wr-textarea-radius: var(--wr-control-radius-sm);
+    --wr-textarea-padding-y: 0.375rem;
+    --wr-textarea-padding-x: var(--wr-control-padding-x-sm);
+    --wr-textarea-font-size: var(--wr-text-xs);
+    --wr-textarea-line-height: 1.125rem;
+  }
+
+  &--lg {
+    --wr-textarea-radius: var(--wr-control-radius-lg);
+    --wr-textarea-padding-y: 0.625rem;
+    --wr-textarea-padding-x: var(--wr-control-padding-x-lg);
+    --wr-textarea-font-size: var(--wr-text-base);
+    --wr-textarea-line-height: 1.625rem;
+  }
+
   &--no-resize &__native {
     resize: none;
   }
@@ -55,7 +78,8 @@
     line-height: var(--wr-textarea-line-height);
     padding: calc(var(--wr-textarea-padding-y) * var(--wr-density-y, 1))
       calc(var(--wr-textarea-padding-x) * var(--wr-density-x, 1));
-    resize: vertical;
+    // Native grip removed — we draw our own corner grip (&__resize) instead.
+    resize: none;
 
     &::placeholder {
       color: var(--wr-textarea-placeholder);
@@ -65,4 +89,35 @@
       cursor: not-allowed;
     }
   }
+
+  // Corner resize grip — icon (move-vertical / -horizontal / -diagonal-2) and
+  // cursor follow the `resize` direction.
+  &__resize {
+    position: absolute;
+    right: 0.25rem;
+    bottom: 0.25rem;
+    display: inline-flex;
+    color: var(--wr-color-text-faint);
+    touch-action: none;
+    transition: color var(--wr-transition-base);
+
+    &--vertical {
+      cursor: ns-resize;
+    }
+    &--horizontal {
+      cursor: ew-resize;
+    }
+    &--both {
+      cursor: nwse-resize;
+    }
+
+    .wr-icon__svg {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+
+    &:hover {
+      color: var(--wr-color-medium);
+    }
+  }
 }

package/theme/styles/_colors.scss

@@ -15,6 +15,7 @@ $base-colors: (
   success: #00a400,
   warning: #ffba00,
   danger: #fa383e,
+  info: #3b82f6,
   light: #cbd5e1,
   medium: #8594a4,
   dark: #0f172a,
@@ -65,6 +66,48 @@ $contrast-light: #ffffff !default;
   // and turns the backdrop into a white wash.
   --wr-color-backdrop-rgb: 0, 0, 0;
 
+  // Generic subtle hover-surface tint (icon buttons, list rows) — one place
+  // so the hover strength stays consistent everywhere.
+  --wr-color-hover: rgba(var(--wr-color-light-rgb), 0.4);
+
+  // Border / divider strengths — translucent so they read on any surface and
+  // auto-adapt in dark (via the flipping `light` channels). One place each.
+  --wr-color-border: rgba(var(--wr-color-light-rgb), 0.5);
+  --wr-color-border-subtle: rgba(var(--wr-color-light-rgb), 0.35);
+  --wr-color-border-strong: rgba(var(--wr-color-light-rgb), 0.6);
+
+  // Scrim behind modals / drawers — always black so the dim reads as "covered"
+  // regardless of theme.
+  --wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), 0.45);
+
+  // De-emphasized text — `medium` dimmed to two canonical strengths so muted
+  // labels / captions / placeholders read consistently. One place each.
+  --wr-color-text-muted: rgba(var(--wr-color-medium-rgb), 0.85);
+  --wr-color-text-faint: rgba(var(--wr-color-medium-rgb), 0.6);
+
+  // Neutral gray ramp — a FIXED primitive scale (slate). Each step is a stable
+  // job (50 = subtlest surface tint … 950 = strongest ink) and, unlike the
+  // semantic neutrals, does NOT flip in dark mode. For theme-aware surface /
+  // text jobs reach for the role aliases below instead.
+  --wr-color-gray-50: #f8fafc;
+  --wr-color-gray-100: #f1f5f9;
+  --wr-color-gray-200: #e2e8f0;
+  --wr-color-gray-300: #cbd5e1;
+  --wr-color-gray-400: #94a3b8;
+  --wr-color-gray-500: #64748b;
+  --wr-color-gray-600: #475569;
+  --wr-color-gray-700: #334155;
+  --wr-color-gray-800: #1e293b;
+  --wr-color-gray-900: #0f172a;
+  --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.
+  --wr-color-surface: var(--wr-color-white);
+  --wr-color-on-surface: var(--wr-color-dark);
+  --wr-color-on-surface-muted: var(--wr-color-medium);
+
   @each $name, $base in $base-colors {
     --wr-color-#{$name}: #{$base};
     --wr-color-#{$name}-rgb: #{_rgb-channels($base)};
@@ -74,6 +117,20 @@ $contrast-light: #ffffff !default;
     --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
     --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
   }
+
+  // Soft trio per intent (+ `medium` for neutral surfaces) — tokenizes the
+  // ad-hoc `rgba(var(--*-rgb), α)` fills components hand-rolled at ~8
+  // different alphas, so each alpha lives in ONE place. `-soft` is the
+  // canonical low-alpha fill, `-soft-border` the matching hairline, and
+  // `-soft-contrast` the readable same-hue text on it (deep in light,
+  // light in dark — follows `--wr-color-dark`). All theme-correct over any
+  // background via the -rgb channels.
+  @each $name in (primary, secondary, success, warning, danger, info, medium) {
+    --wr-color-#{$name}-soft: rgba(var(--wr-color-#{$name}-rgb), 0.12);
+    --wr-color-#{$name}-soft-border: rgba(var(--wr-color-#{$name}-rgb), 0.3);
+    --wr-color-#{$name}-soft-contrast: color-mix(in srgb, var(--wr-color-#{$name}) 62%, var(--wr-color-dark));
+    --wr-color-#{$name}-active: rgba(var(--wr-color-#{$name}-rgb), 0.2);
+  }
 }
 
 // Public SCSS list

package/theme/styles/_dark.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Dark theme overrides — opt-in via `[data-theme="dark"]` on <html>.
 // Drive the toggle from `WrTheme` (provided automatically with
 // `provideWrTheme(...)`).
@@ -5,6 +7,16 @@
 // Only semantic tokens flip — palette hues stay so brand-coloured
 // elements look the same regardless of theme.
 
+// Intents re-tuned for the dark canvas. Looped (below) so each gets the
+// FULL symmetric shade set — the hand blocks used to ship only base+rgb,
+// leaving -light/-dark/-lighter/-darker baked from the LIGHT palette.
+// (primary keeps its hand-tuned block; info stays its light values.)
+$dark-intents: (
+  success: #34c759,
+  warning: #ffcc33,
+  danger: #ff5c5c,
+);
+
 [data-theme='dark'] {
   // Canvas (was `--wr-color-white` in light mode)
   // Deeper than slate-900 so an elevated surface in slate-800 reads
@@ -63,14 +75,16 @@
   --wr-color-primary-lighter: #99b6ff;
   --wr-color-primary-darker: #1f3a99;
 
-  --wr-color-success: #34c759;
-  --wr-color-success-rgb: 52, 199, 89;
-
-  --wr-color-warning: #ffcc33;
-  --wr-color-warning-rgb: 255, 204, 51;
-
-  --wr-color-danger: #ff5c5c;
-  --wr-color-danger-rgb: 255, 92, 92;
+  // success / warning / danger — retuned bases now get the FULL symmetric
+  // shade set in dark too (generated, so no intent can silently drift).
+  @each $name, $base in $dark-intents {
+    --wr-color-#{$name}: #{$base};
+    --wr-color-#{$name}-rgb: #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')};
+    --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
+    --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
+    --wr-color-#{$name}-dark: #{color.adjust($base, $lightness: -5%)};
+    --wr-color-#{$name}-darker: #{color.adjust($base, $lightness: -10%)};
+  }
 
   // Elevation
   // Black shadows at light-mode alphas vanish on the deep canvas; same

package/theme/styles/_focus.scss

@@ -91,3 +91,8 @@
 .wr-dropdown-item:focus-visible {
   @include focus-ring;
 }
+
+// Alert close
+.wr-alert__close:focus-visible {
+  @include focus-ring;
+}

package/theme/styles/_variables.scss

@@ -10,6 +10,30 @@
   --wr-border-radius-lg: 1rem;
   --wr-border-radius-pill: 50rem;
 
+  // Control sizing
+  //
+  // The shared contract every form control reads (button, input, select, …)
+  // so they line up pixel-for-pixel at each size. Height is NOT fixed — it's
+  // the sum of `line-height + 2×padding-y + 2×border(1px)`, so padding-y can
+  // stay density-aware (`* var(--wr-density-y)`) and controls track density
+  // together. Keep the three parts in sync if you retune a size.
+  //   sm → 22px · md → 30px · lg → 36px   (radius 5 / 6 / 7)
+  --wr-control-padding-y-sm: 0.125rem; // 2px  → 16 + 4 + 2 = 22
+  --wr-control-padding-y-md: 0.25rem; // 4px  → 20 + 8 + 2 = 30
+  --wr-control-padding-y-lg: 0.3125rem; // 5px  → 24 + 10 + 2 = 36
+  --wr-control-padding-x-sm: 0.5rem; // 8px
+  --wr-control-padding-x-md: 0.75rem; // 12px
+  --wr-control-padding-x-lg: 1rem; // 16px
+  --wr-control-line-height-sm: 1rem; // 16px
+  --wr-control-line-height-md: 1.25rem; // 20px
+  --wr-control-line-height-lg: 1.5rem; // 24px
+  --wr-control-font-size-sm: var(--wr-text-xs); // 12px
+  --wr-control-font-size-md: var(--wr-text-sm); // 14px
+  --wr-control-font-size-lg: var(--wr-text-base); // 16px
+  --wr-control-radius-sm: 5px;
+  --wr-control-radius-md: 6px;
+  --wr-control-radius-lg: 7px;
+
   // Easing curves
   --wr-ease-linear: linear;
   --wr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

package/timeline/styles/_index.scss

@@ -101,19 +101,28 @@
 
   // Horizontal: row layout with line through dots.
   .wr-timeline--horizontal & {
+    // Equal-width columns so every dot sits at the same horizontal pitch
+    // and the connectors line up across items.
+    flex: 1 1 0;
     flex-direction: column;
     align-items: center;
     text-align: center;
     min-width: 8rem;
+    padding-bottom: 0;
 
+    // Connector runs from this dot's centre to the next dot's centre:
+    // half of this item + the 2rem gap + half of the next item. With equal
+    // widths that is `100% of the item + the gap`, anchored at the centre.
     &::before {
       content: '';
       position: absolute;
-      top: 0.625rem;
+      // Dot centre: margin-top 0.125rem + half of the 0.75rem dot = 0.5rem.
+      top: 0.5rem;
       left: 50%;
-      right: -2rem;
+      width: calc(100% + 2rem);
       height: 1.5px;
       background: var(--wr-color-light);
+      z-index: 0;
     }
 
     &:last-child::before {

package/toast/styles/_index.scss

@@ -33,6 +33,14 @@ $toast-colors: (
     pointer-events: auto;
   }
 
+  // While expanded the toasts spread into a column with gaps. Those gaps are
+  // dead space under `pointer-events: none`, so the cursor crossing them fires
+  // mouseleave/mouseenter and toggles `expanded` (jitter). Make the whole host
+  // hit-testable while expanded so the inter-toast gaps stay "inside" it.
+  &--expanded {
+    pointer-events: auto;
+  }
+
   // Sonner-style stack
   // Collapsed: every toast except the front one collapses behind it with a
   // scale-down + tiny offset. Hovering the host expands them into the
@@ -130,6 +138,8 @@ $toast-colors: (
   padding: 0.75rem 0.875rem;
   background: var(--wr-toast-bg);
   border: 1px solid var(--wr-toast-border);
+  // Capture horizontal swipe-to-dismiss; let vertical scroll pass through.
+  touch-action: pan-y;
   border-left: 3px solid var(--wr-toast-accent);
   @include theme.smooth-br(var(--wr-border-radius-base));
   box-shadow: var(--wr-shadow-overlay);
@@ -145,7 +155,7 @@ $toast-colors: (
   &__title {
     margin: 0 0 0.125rem;
     color: var(--wr-toast-title);
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     line-height: 1.25rem;
   }
@@ -153,7 +163,7 @@ $toast-colors: (
   &__message {
     margin: 0;
     color: var(--wr-toast-message);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.125rem;
     overflow-wrap: break-word;
   }
@@ -181,7 +191,7 @@ $toast-colors: (
 
     &:hover {
       color: var(--wr-color-dark);
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
   }
 
@@ -241,12 +251,12 @@ $toast-colors: (
   padding: 0.375rem 0.75rem;
   color: var(--wr-color-medium);
   font-family: var(--wr-font-family-base);
-  font-size: 0.75rem;
+  font-size: var(--wr-text-xs);
   font-weight: 500;
   line-height: 1rem;
   text-align: center;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--wr-shadow-xs);
   transition:
     color var(--wr-transition-base),
     background var(--wr-transition-base),

package/toolbar/styles/_index.scss

@@ -16,10 +16,20 @@
   background: var(--wr-color-white);
   border: 1px solid var(--wr-color-light);
   @include theme.smooth-br(var(--wr-border-radius-base));
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
+  box-shadow: var(--wr-shadow-xs);
   font-family: var(--wr-font-family-base);
   color: var(--wr-color-dark);
 
+  // Opt-in (`responsive`): query the toolbar's own width so the zones stack
+  // when it's too narrow for a row. Already full-width, so containment is safe.
+  // `flex-wrap` lives here (not in the `@container` below) because a container
+  // query can't style the query container itself — only its descendants; wrap
+  // only kicks in once the zones go full-width at the breakpoint.
+  &--responsive {
+    container: wr-toolbar / inline-size;
+    flex-wrap: wrap;
+  }
+
   &__zone {
     display: flex;
     align-items: center;
@@ -63,3 +73,22 @@
     }
   }
 }
+
+// Responsive toolbars stack their zones when the bar is too narrow for a row.
+@container wr-toolbar (max-width: 32rem) {
+  .wr-toolbar--responsive .wr-toolbar__zone {
+    flex: 1 1 100%;
+    justify-content: flex-start;
+  }
+
+  .wr-toolbar--responsive .wr-toolbar__zone--end {
+    margin-left: 0;
+  }
+
+  // The vertical hairline dividers are a horizontal-row affordance — drop them
+  // once the zones stack.
+  .wr-toolbar--responsive .wr-toolbar__zone--start + .wr-toolbar__zone--center::before,
+  .wr-toolbar--responsive .wr-toolbar__zone--center + .wr-toolbar__zone--end::before {
+    display: none;
+  }
+}