ngwr 7.3.0 → 9.0.0

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%;
@@ -53,8 +53,7 @@
     @include theme.touch-target($positioned: true);
 
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.25);
+      @include theme.focus-ring;
     }
 
     &:active {
@@ -66,14 +65,14 @@
   &__label {
     margin-top: 0.5rem;
     color: var(--wr-slider-label);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.125rem;
     font-variant-numeric: tabular-nums;
   }
 
   &--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:
@@ -152,7 +168,8 @@
     &:hover {
       transform: scale(1.06);
       background: var(--wr-color-primary);
-      color: var(--wr-color-primary-contrast, var(--wr-color-white));
+      border-color: var(--wr-color-primary);
+      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.
@@ -44,7 +47,7 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.2);
+      @include theme.focus-ring;
     }
   }
 
@@ -59,9 +62,9 @@
   }
 
   &__handle {
-    background: var(--wr-color-white);
-    border: 1px solid var(--wr-color-light);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    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;
   }
@@ -69,20 +72,20 @@
   &--horizontal &__handle {
     width: 0.875rem;
     height: 2rem;
-    @include theme.smooth-br(4px);
+    @include theme.smooth-br(var(--wr-control-radius-sm));
   }
 
   &--vertical &__handle {
     width: 2rem;
     height: 0.875rem;
-    @include theme.smooth-br(4px);
+    @include theme.smooth-br(var(--wr-control-radius-sm));
   }
 
   &--disabled &__divider {
     cursor: not-allowed;
 
     &:hover {
-      background: var(--wr-color-light);
+      background: var(--wr-color-outline);
     }
   }
 }

package/spotlight-card/styles/_index.scss

@@ -1,22 +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 a default: a soft dark tint on light surfaces, the
-// classic white-alpha beam on dark.
+// 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.08);
+  --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: '';
@@ -38,6 +39,9 @@
   }
 }
 
+// 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: rgb(255 255 255 / 25%);
+  --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,10 +77,10 @@
     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: 0.8125rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     display: inline-flex;
     align-items: center;
@@ -95,20 +95,20 @@
   &__header--active &__indicator {
     border-color: var(--wr-color-primary);
     color: var(--wr-color-primary);
-    background: rgba(var(--wr-color-primary-rgb), 0.08);
+    background: var(--wr-color-primary-soft);
   }
 
   &__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 {
     display: inline-flex;
     flex-direction: column;
     gap: 0.0625rem;
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     font-weight: 500;
     line-height: 1.25rem;
   }
@@ -119,7 +119,7 @@
 
   &__optional,
   &__description {
-    font-size: 0.6875rem;
+    font-size: var(--wr-text-xs);
     font-weight: 500;
     color: var(--wr-stepper-muted);
     text-transform: none;

package/styles/_animations.scss

@@ -153,23 +153,6 @@
   animation: wr-bounce 1s infinite;
 }
 
-// Reveal-on-scroll integration
-// Initial state — set by `[wrReveal]` on the host element via the
-// `wr-reveal` host class. The directive flips `wr-reveal--visible`
-// once the element enters the viewport.
-.wr-reveal {
-  opacity: 0;
-  transform: translateY(0.75rem);
-  transition:
-    opacity var(--wr-duration-slow) var(--wr-ease-out),
-    transform var(--wr-duration-slow) var(--wr-ease-out);
-
-  &--visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 // prefers-reduced-motion
 @media (prefers-reduced-motion: reduce) {
   .wr-animate-fade-in,
@@ -185,12 +168,6 @@
   .wr-animate-bounce {
     animation: none !important;
   }
-
-  .wr-reveal {
-    opacity: 1;
-    transform: none;
-    transition: none;
-  }
 }
 
 // `wr-border-glow` lives in its own component now (see `ngwr/border-glow`).

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,12 +81,12 @@
 @forward './popconfirm/styles';
 @forward './popover/styles';
 @forward './progress/styles';
+@forward './pull-to-refresh/styles';
 @forward './qr/styles';
 @forward './radio/styles';
 @forward './rating/styles';
 @forward './result/styles';
 @forward './rotating-text/styles';
-@forward './scramble-text/styles';
 @forward './segmented/styles';
 @forward './select/styles';
 @forward './shiny-text/styles';

package/switch/styles/_index.scss

@@ -1,20 +1,22 @@
 @use '../../theme/styles' as theme;
 
 .wr-switch {
-  --wr-switch-track-width: 2.25rem;
-  --wr-switch-track-height: 1.25rem;
-  --wr-switch-thumb-size: 1rem;
-  --wr-switch-bg: var(--wr-color-light);
+  --wr-switch-track-width: 2rem;
+  --wr-switch-track-height: 1.125rem; // md = checkbox/radio box (18px)
+  --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-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;
   color: var(--wr-switch-color);
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: var(--wr-switch-font-size);
+  line-height: var(--wr-switch-line-height);
 
   &__label {
     display: inline-flex;
@@ -59,10 +61,27 @@
     height: var(--wr-switch-thumb-size);
     background: var(--wr-switch-thumb);
     border-radius: 50%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--wr-shadow-xs);
     transition: left var(--wr-transition-base);
   }
 
+  // Sizes — track, thumb, label font + line-height scale together.
+  &--sm {
+    --wr-switch-track-width: 1.75rem;
+    --wr-switch-track-height: 1rem;
+    --wr-switch-thumb-size: 0.75rem;
+    --wr-switch-font-size: var(--wr-text-xs);
+    --wr-switch-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-switch-track-width: 2.375rem;
+    --wr-switch-track-height: 1.25rem;
+    --wr-switch-thumb-size: 1rem;
+    --wr-switch-font-size: var(--wr-text-base);
+    --wr-switch-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--checked {
     --wr-switch-bg: var(--wr-switch-bg-checked);
 
@@ -75,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;
   }