ngwr 8.0.0 → 9.0.0

package/select/styles/_index.scss

@@ -2,9 +2,9 @@
 @use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode
 
 .wr-select {
-  --wr-select-color: var(--wr-color-dark);
-  --wr-select-bg: var(--wr-color-white);
-  --wr-select-border: var(--wr-color-light);
+  --wr-select-color: var(--wr-color-on-surface);
+  --wr-select-bg: var(--wr-color-surface);
+  --wr-select-border: var(--wr-color-outline);
   --wr-select-radius: var(--wr-control-radius-md);
   --wr-select-padding-y: var(--wr-control-padding-y-md);
   --wr-select-padding-x: var(--wr-control-padding-x-md);
@@ -40,8 +40,8 @@
   }
 
   &--disabled {
-    --wr-select-color: var(--wr-color-medium);
-    --wr-select-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    --wr-select-color: var(--wr-color-on-surface-muted);
+    --wr-select-bg: rgba(var(--wr-color-outline-rgb), 0.35);
   }
 
   &__trigger {
@@ -96,7 +96,7 @@
   &__chevron {
     --wr-icon-size: 1rem;
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
   }
 
@@ -227,8 +227,8 @@
   }
 
   &__chip--more {
-    background: rgba(var(--wr-color-dark-rgb), 0.08);
-    color: rgba(var(--wr-color-dark-rgb), 0.7);
+    background: rgba(var(--wr-color-on-surface-rgb), 0.08);
+    color: rgba(var(--wr-color-on-surface-rgb), 0.7);
   }
 
   &__clear {
@@ -240,15 +240,15 @@
     height: 1.125rem;
     margin-right: -0.25rem;
     border-radius: 999px;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     transition:
       background 0.12s ease,
       color 0.12s ease;
 
     &:hover {
-      background: rgba(var(--wr-color-dark-rgb), 0.06);
-      color: var(--wr-color-dark);
+      background: rgba(var(--wr-color-on-surface-rgb), 0.06);
+      color: var(--wr-color-on-surface);
     }
   }
 }
@@ -258,8 +258,8 @@
 }
 
 .wr-select-panel {
-  --wr-select-panel-bg: var(--wr-color-white);
-  --wr-select-panel-border: var(--wr-color-light);
+  --wr-select-panel-bg: var(--wr-color-surface);
+  --wr-select-panel-border: var(--wr-color-outline);
   --wr-select-panel-radius: var(--wr-border-radius-base);
   --wr-select-panel-shadow: var(--wr-shadow-overlay);
   --wr-select-panel-max-height: 16rem;
@@ -305,7 +305,7 @@
   &__loading,
   &__empty {
     padding: 0.625rem 0.75rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-option-font-size);
     text-align: center;
   }
@@ -316,7 +316,7 @@
   align-items: center;
   padding: var(--wr-option-padding-y) var(--wr-option-padding-x);
   border-radius: var(--wr-border-radius-sm);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
   font-size: var(--wr-option-font-size);
   line-height: var(--wr-option-line-height);
   cursor: pointer;
@@ -334,7 +334,7 @@
   }
 
   &--disabled {
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: not-allowed;
     opacity: 0.6;
 
@@ -350,6 +350,41 @@
   }
 }
 
+// --- Virtual scroll (search-mode data-array path) ---------------------------
+.wr-select-panel--virtual {
+  // The inner `__vlist` owns scrolling; the panel must not add a second scroll
+  // container or cap height, and the flex `gap` would drift the fixed-offset
+  // window math — zero it so rows are contiguous from offset 0.
+  max-height: none;
+  overflow: visible;
+  gap: 0;
+
+  .wr-select-panel__vlist {
+    // `max-height` is set inline from `viewportHeight`.
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  // Height-only reserved rows.
+  .wr-select-panel__vspacer {
+    flex: none;
+  }
+
+  // Uniform row height: keep each option a single line so measurement matches.
+  .wr-option {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  // Keyboard cursor highlight — the virtualized list is navigated by
+  // aria-activedescendant, so the active row needs a visible marker.
+  .wr-option--active {
+    background: var(--wr-color-hover);
+  }
+}
+
 .wr-option-group {
   display: flex;
   flex-direction: column;
@@ -357,7 +392,7 @@
 
   &__label {
     padding: 0.5rem 0.625rem 0.25rem;
-    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;
@@ -365,7 +400,7 @@
   }
 
   + .wr-option-group {
-    border-top: 1px solid var(--wr-color-light);
+    border-top: 1px solid var(--wr-color-outline);
     margin-top: 0.25rem;
     padding-top: 0.25rem;
   }

package/shiny-text/styles/_index.scss

@@ -10,8 +10,8 @@
   // Theme-default sweep (overridden by `[color]` / `[shineColor]`):
   // gray base with a dark shine on light surfaces; dark theme restores
   // the reactbits gray-with-white-flash below.
-  --wr-shiny-text-base: var(--wr-color-medium, #8594a4);
-  --wr-shiny-text-shine: var(--wr-color-dark, #0f172a);
+  --wr-shiny-text-base: var(--wr-color-on-surface-muted, #8594a4);
+  --wr-shiny-text-shine: var(--wr-color-on-surface, #0f172a);
 
   display: inline-block;
   background-size: 200% auto;
@@ -79,9 +79,9 @@
 .wr-shimmer {
   background: linear-gradient(
     110deg,
-    var(--wr-color-dark) 30%,
+    var(--wr-color-on-surface) 30%,
     rgba(var(--wr-color-primary-rgb), 0.9) 50%,
-    var(--wr-color-dark) 70%
+    var(--wr-color-on-surface) 70%
   );
   background-size: 200% 100%;
   background-clip: text;

package/sidebar/styles/_index.scss

@@ -3,7 +3,7 @@
 .wr-sidebar {
   display: block;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__inner {
     display: flex;
@@ -13,7 +13,7 @@
 
   &__icon {
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     transition: color var(--wr-transition-base);
   }
 
@@ -24,7 +24,7 @@
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font-size: var(--wr-text-sm);
     font-weight: var(--wr-font-weight-semibold);
     line-height: 1.25rem;
@@ -52,7 +52,7 @@
     }
 
     &--disabled {
-      color: var(--wr-color-medium);
+      color: var(--wr-color-on-surface-muted);
       pointer-events: none;
       opacity: 0.6;
     }
@@ -73,13 +73,13 @@
       background: transparent;
       border: 0;
       border-radius: var(--wr-border-radius-sm);
-      color: var(--wr-color-dark);
+      color: var(--wr-color-on-surface);
       cursor: pointer;
       text-align: left;
       transition: background var(--wr-transition-base);
 
       &:hover {
-        background: rgba(var(--wr-color-light-rgb), 0.5);
+        background: rgba(var(--wr-color-outline-rgb), 0.5);
 
         .wr-sidebar__icon {
           color: var(--wr-color-primary);
@@ -113,7 +113,7 @@
 
   &__chevron {
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
   }
 
@@ -129,7 +129,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.0625rem;
-    border-left: 1px solid var(--wr-color-light);
+    border-left: 1px solid var(--wr-color-outline);
   }
 
   &__item {
@@ -139,7 +139,7 @@
     gap: 0.5rem;
     padding: 0.3125rem 0.75rem;
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font-size: var(--wr-text-sm);
     font-weight: var(--wr-font-weight-medium);
     line-height: 1.25rem;
@@ -188,7 +188,7 @@
     }
 
     &--disabled {
-      color: var(--wr-color-medium);
+      color: var(--wr-color-on-surface-muted);
       pointer-events: none;
       opacity: 0.6;
     }
@@ -198,8 +198,8 @@
     flex: 0 0 auto;
     padding: 0.0625rem 0.375rem;
     border-radius: var(--wr-border-radius-pill);
-    background: rgba(var(--wr-color-light-rgb), 0.6);
-    color: var(--wr-color-medium);
+    background: rgba(var(--wr-color-outline-rgb), 0.6);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-semibold);
     text-transform: uppercase;

package/slider/styles/_index.scss

@@ -1,13 +1,13 @@
 @use '../../theme/styles' as theme;
 
 .wr-slider {
-  --wr-slider-track: var(--wr-color-light);
+  --wr-slider-track: var(--wr-color-outline);
   --wr-slider-fill: var(--wr-color-primary);
-  --wr-slider-thumb: var(--wr-color-white);
+  --wr-slider-thumb: var(--wr-color-surface);
   --wr-slider-thumb-border: var(--wr-color-primary);
   --wr-slider-thumb-size: 1rem;
   --wr-slider-track-height: 0.25rem;
-  --wr-slider-label: var(--wr-color-medium);
+  --wr-slider-label: var(--wr-color-on-surface-muted);
 
   display: block;
   width: 100%;
@@ -71,8 +71,8 @@
   }
 
   &--disabled {
-    --wr-slider-thumb-border: var(--wr-color-medium);
-    --wr-slider-fill: var(--wr-color-medium);
+    --wr-slider-thumb-border: var(--wr-color-on-surface-muted);
+    --wr-slider-fill: var(--wr-color-on-surface-muted);
     pointer-events: none;
     opacity: 0.6;
   }

package/speed-dial/styles/_index.scss

@@ -9,6 +9,22 @@
   display: inline-block;
   font-family: var(--wr-font-family-base);
 
+  // Safe-area opt-in: pad the host toward the fan direction so a consumer who
+  // pins the FAB to that edge clears the notch / home indicator. env() is 0
+  // without insets, so desktop is unaffected.
+  &--safe-area.wr-speed-dial--up {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  &--safe-area.wr-speed-dial--down {
+    padding-top: env(safe-area-inset-top);
+  }
+  &--safe-area.wr-speed-dial--left {
+    padding-right: env(safe-area-inset-right);
+  }
+  &--safe-area.wr-speed-dial--right {
+    padding-left: env(safe-area-inset-left);
+  }
+
   &__trigger {
     width: var(--wr-speed-dial-size);
     height: var(--wr-speed-dial-size);
@@ -18,7 +34,7 @@
     border: 0;
     border-radius: 50%;
     background: var(--wr-color-primary);
-    color: var(--wr-color-primary-contrast, var(--wr-color-white));
+    color: var(--wr-color-primary-contrast, var(--wr-color-surface));
     cursor: pointer;
     box-shadow: var(--wr-shadow-float);
     transition: transform var(--wr-transition-base);
@@ -135,12 +151,12 @@
     align-items: center;
     justify-content: center;
     // Hairline silhouette so the button reads as a distinct surface even
-    // when its `--wr-color-white` bg matches the canvas (dark mode) or
+    // when its `--wr-color-surface` bg matches the canvas (dark mode) or
     // sits on a same-tone page bg (light mode).
-    border: 1px solid var(--wr-color-light);
+    border: 1px solid var(--wr-color-outline);
     border-radius: 50%;
-    background: var(--wr-color-white);
-    color: var(--wr-color-dark);
+    background: var(--wr-color-surface);
+    color: var(--wr-color-on-surface);
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(var(--wr-color-backdrop-rgb), 0.18);
     transition:
@@ -153,7 +169,7 @@
       transform: scale(1.06);
       background: var(--wr-color-primary);
       border-color: var(--wr-color-primary);
-      color: var(--wr-color-primary-contrast, var(--wr-color-white));
+      color: var(--wr-color-primary-contrast, var(--wr-color-surface));
     }
   }
 }

package/splash-cursor/styles/_index.scss

@@ -13,6 +13,7 @@
     display: block;
     width: 100vw;
     height: 100vh;
+    height: 100dvh;
   }
 
   &--contained {

package/splitter/styles/_index.scss

@@ -31,8 +31,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--wr-color-light);
+    background: var(--wr-color-outline);
     outline: 0;
+    // Own the drag gesture — without this a coarse pointer can hand the
+    // divider drag to the browser as a pan and fire pointercancel mid-drag.
+    touch-action: none;
     transition: background var(--wr-transition-base);
 
     // Coarse pointers: expand the 4px gutter to a 44px tap area.
@@ -59,8 +62,8 @@
   }
 
   &__handle {
-    background: var(--wr-color-white);
-    border: 1px solid var(--wr-color-light);
+    background: var(--wr-color-surface);
+    border: 1px solid var(--wr-color-outline);
     box-shadow: var(--wr-shadow-sm);
     display: inline-block;
     flex: 0 0 auto;
@@ -82,7 +85,7 @@
     cursor: not-allowed;
 
     &:hover {
-      background: var(--wr-color-light);
+      background: var(--wr-color-outline);
     }
   }
 }

package/spotlight-card/styles/_index.scss

@@ -1,23 +1,23 @@
 // Cursor-tracked spotlight card (reactbits port). The `--wr-spotlight-x/y`
 // vars come from the host's mousemove handler; `--wr-spotlight-color` is
 // set inline from the `[spotlightColor]` input when provided — otherwise
-// the theme picks the default below. `--wr-color-dark-rgb` flips between
+// the theme picks the default below. `--wr-color-on-surface-rgb` flips between
 // themes (dark on light surfaces, light on dark), so a single tint reads
 // as a dark-ish glow in light mode and a light beam in dark mode.
 
 .wr-spotlight-card {
   --wr-spotlight-x: 50%;
   --wr-spotlight-y: 50%;
-  --wr-spotlight-color: rgba(var(--wr-color-dark-rgb), 0.15);
+  --wr-spotlight-color: rgba(var(--wr-color-on-surface-rgb), 0.15);
 
   position: relative;
   display: block;
   border-radius: 1.5rem;
-  border: 1px solid var(--wr-color-light);
-  background-color: var(--wr-color-white);
+  border: 1px solid var(--wr-color-outline);
+  background-color: var(--wr-color-surface);
   padding: 2rem;
   overflow: hidden;
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &::before {
     content: '';
@@ -39,9 +39,9 @@
   }
 }
 
-// Dark mode: `--wr-color-dark-rgb` already flips to a light value, so the
+// Dark mode: `--wr-color-on-surface-rgb` already flips to a light value, so the
 // default tint above becomes a light beam on the navy surface — nudge the
 // alpha up a touch so it reads as bright as the classic spotlight.
 [data-theme='dark'] .wr-spotlight-card {
-  --wr-spotlight-color: rgba(var(--wr-color-dark-rgb), 0.22);
+  --wr-spotlight-color: rgba(var(--wr-color-on-surface-rgb), 0.22);
 }

package/star-border/styles/_index.scss

@@ -69,9 +69,9 @@
   &__inner {
     position: relative;
     display: block;
-    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);
     font-size: 1rem;
     text-align: center;
     padding: 1rem 1.625rem;

package/statistic/styles/_index.scss

@@ -5,11 +5,11 @@
   flex-direction: column;
   gap: 0.25rem;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__label {
     font-size: var(--wr-text-sm);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     line-height: var(--wr-leading-normal);
   }
 
@@ -28,7 +28,7 @@
   &__suffix {
     font-size: var(--wr-text-lg);
     font-weight: var(--wr-font-weight-medium);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
   }
 
   &__delta {
@@ -48,7 +48,54 @@
     }
 
     &--flat {
-      color: var(--wr-color-medium);
+      color: var(--wr-color-on-surface-muted);
     }
   }
 }
+
+// Dashboard grid for `<wr-statistic>` cards. The host establishes the query
+// container; the inner `__grid` is the grid itself (an element can't respond
+// to its own `container-type`, so the reflow rule below has to target a
+// descendant). The column count follows the GROUP's own inline size — not the
+// viewport — so it reflows correctly inside any column, card, or split pane.
+.wr-statistic-group {
+  --wr-statistic-group-gap: 1.5rem;
+
+  container: wr-statistic-group / inline-size;
+  display: block;
+  width: 100%;
+  font-family: var(--wr-font-family-base);
+
+  // Intrinsic "RAM" grid (Repeat, Auto-fit, Minmax): each column is at least
+  // `--wr-statistic-group-min`, but also at least the width needed to keep the
+  // row within `--wr-statistic-group-columns` cards — so the count never
+  // exceeds the cap yet steps down one column at a time as the box narrows.
+  // The unset cap defaults to a large sentinel, which collapses the second
+  // term below `min`, leaving a plain auto-fit grid.
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(
+        max(
+          var(--wr-statistic-group-min, 12rem),
+          calc(
+            (100% - (var(--wr-statistic-group-columns, 999) - 1) * var(--wr-statistic-group-gap)) /
+              var(--wr-statistic-group-columns, 999)
+          )
+        ),
+        1fr
+      )
+    );
+    gap: var(--wr-statistic-group-gap);
+  }
+}
+
+// Tighten the gutters once the group itself is narrow (a phone column, a side
+// panel) — a genuine container query on the group's width, independent of the
+// viewport.
+@container wr-statistic-group (max-width: 28rem) {
+  .wr-statistic-group__grid {
+    --wr-statistic-group-gap: 1rem;
+  }
+}

package/stepper/styles/_index.scss

@@ -2,8 +2,8 @@
 
 .wr-stepper {
   --wr-stepper-indicator-size: 1.75rem;
-  --wr-stepper-connector: var(--wr-color-light);
-  --wr-stepper-muted: var(--wr-color-medium);
+  --wr-stepper-connector: var(--wr-color-outline);
+  --wr-stepper-muted: var(--wr-color-on-surface-muted);
 
   display: flex;
   flex-direction: column;
@@ -58,7 +58,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.625rem;
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     cursor: pointer;
     text-align: left;
     flex: 0 0 auto;
@@ -77,8 +77,8 @@
     width: var(--wr-stepper-indicator-size);
     height: var(--wr-stepper-indicator-size);
     border-radius: 50%;
-    border: 1.5px solid var(--wr-color-light);
-    background: var(--wr-color-white);
+    border: 1.5px solid var(--wr-color-outline);
+    background: var(--wr-color-surface);
     color: var(--wr-stepper-muted);
     font-size: var(--wr-text-sm);
     font-weight: 600;
@@ -101,7 +101,7 @@
   &__header--completed &__indicator {
     background: var(--wr-color-primary);
     border-color: var(--wr-color-primary);
-    color: var(--wr-color-white);
+    color: var(--wr-color-surface);
   }
 
   &__label {

package/styles/_typography.scss

@@ -2,7 +2,10 @@
 //
 // Not loaded by the umbrella `ngwr` entry. Bring in explicitly:
 //
-//   @use 'ngwr/typography';
+//   @use 'ngwr/typography-utilities';
+//
+// NOT `ngwr/typography` — that is the `wrTypography` component entry
+// (typography/styles/_index.scss), which is a different, larger stylesheet.
 //
 // All values read from the `--wr-text-*` / `--wr-font-weight-*` /
 // `--wr-leading-*` / `--wr-tracking-*` tokens, so overriding the tokens

package/styles.scss

@@ -17,6 +17,7 @@
 @forward './styles/breakpoints';
 
 @forward './affix/styles';
+@forward './action-sheet/styles';
 @forward './alert/styles';
 @forward './anchor/styles';
 @forward './aurora/styles';
@@ -80,6 +81,7 @@
 @forward './popconfirm/styles';
 @forward './popover/styles';
 @forward './progress/styles';
+@forward './pull-to-refresh/styles';
 @forward './qr/styles';
 @forward './radio/styles';
 @forward './rating/styles';

package/switch/styles/_index.scss

@@ -6,10 +6,10 @@
   --wr-switch-thumb-size: 0.875rem;
   --wr-switch-font-size: var(--wr-text-sm);
   --wr-switch-line-height: var(--wr-control-line-height-md);
-  --wr-switch-bg: var(--wr-color-light);
+  --wr-switch-bg: var(--wr-color-outline);
   --wr-switch-bg-checked: var(--wr-color-primary);
-  --wr-switch-thumb: var(--wr-color-white);
-  --wr-switch-color: var(--wr-color-dark);
+  --wr-switch-thumb: var(--wr-color-surface);
+  --wr-switch-color: var(--wr-color-on-surface);
 
   display: inline-flex;
   vertical-align: middle;
@@ -94,7 +94,7 @@
   }
 
   &--disabled {
-    --wr-switch-color: var(--wr-color-medium);
+    --wr-switch-color: var(--wr-color-on-surface-muted);
     pointer-events: none;
     opacity: 0.6;
   }