ngwr 7.3.0 → 9.0.0

package/glitch-text/styles/_index.scss

@@ -5,18 +5,15 @@
 .wr-glitch-text {
   --wr-glitch-text-before-duration: 2s;
   --wr-glitch-text-after-duration: 3s;
-  --wr-glitch-text-before-shadow: 5px 0 cyan;
-  --wr-glitch-text-after-shadow: -5px 0 red;
-  // Clone backgrounds must match the page surface for the slicing
-  // illusion; the text itself uses the readable foreground token.
-  --wr-glitch-text-bg: var(--wr-color-white, #fff);
+  --wr-glitch-text-before-shadow: 5px 0 var(--wr-color-info);
+  --wr-glitch-text-after-shadow: -5px 0 var(--wr-color-danger);
 
   position: relative;
   display: inline-block;
   white-space: nowrap;
   user-select: none;
   font-weight: 900;
-  color: var(--wr-color-dark, #0f172a);
+  color: var(--wr-color-on-surface, #0f172a);
 
   &::before,
   &::after {
@@ -24,7 +21,7 @@
     position: absolute;
     top: 0;
     color: inherit;
-    background-color: var(--wr-glitch-text-bg);
+    background-color: var(--wr-glitch-text-bg, transparent);
     overflow: hidden;
     clip-path: inset(0 0 0 0);
   }

package/gradient-text/styles/_index.scss

@@ -54,7 +54,7 @@
       inset: 1px;
       border-radius: inherit;
       // Surface token — flips with the theme so the ring reads on both.
-      background-color: var(--wr-color-white, #fff);
+      background-color: var(--wr-color-surface, #fff);
       z-index: 1;
     }
   }

package/image-cropper/styles/_index.scss

@@ -17,6 +17,7 @@
     display: block;
     max-width: 100%;
     max-height: 70vh;
+    max-height: 70dvh;
     height: auto;
     pointer-events: none;
     user-select: none;
@@ -25,14 +26,14 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(var(--wr-color-backdrop-rgb), 0.5);
+    background: var(--wr-color-overlay);
     pointer-events: none;
   }
 
   &__window {
     position: absolute;
     box-sizing: border-box;
-    border: 1px solid var(--wr-color-white);
+    border: 1px solid var(--wr-color-surface);
     cursor: move;
     box-shadow: 0 0 0 1px rgba(var(--wr-color-primary-rgb), 0.6);
   }
@@ -41,10 +42,10 @@
     position: absolute;
     width: 0.75rem;
     height: 0.75rem;
-    background: var(--wr-color-white);
+    background: var(--wr-color-surface);
     border: 1px solid var(--wr-color-primary);
     border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.15);
     box-sizing: border-box;
 
     // Position each handle by its edge / corner.
@@ -106,9 +107,9 @@
   &__empty {
     padding: 2rem;
     text-align: center;
-    color: var(--wr-color-medium);
-    background: rgba(var(--wr-color-light-rgb), 0.4);
-    border: 1px dashed var(--wr-color-light);
+    color: var(--wr-color-on-surface-muted);
+    background: var(--wr-color-hover);
+    border: 1px dashed var(--wr-color-outline);
     @include theme.smooth-br(var(--wr-border-radius-base));
   }
 }

package/input/styles/_index.scss

@@ -6,16 +6,16 @@
 // border so the visuals belong to the group instead).
 //
 .wr-input {
-  --wr-input-color: var(--wr-color-dark);
-  --wr-input-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
-  --wr-input-bg: var(--wr-color-white);
-  --wr-input-border: var(--wr-color-light);
-  --wr-input-radius: var(--wr-border-radius-base);
+  --wr-input-color: var(--wr-color-on-surface);
+  --wr-input-placeholder: rgba(var(--wr-color-on-surface-muted-rgb), 0.7);
+  --wr-input-bg: var(--wr-color-surface);
+  --wr-input-border: var(--wr-color-outline);
+  --wr-input-radius: var(--wr-control-radius-md);
   --wr-input-ring: transparent;
-  --wr-input-padding-y: 0.4375rem;
-  --wr-input-padding-x: 0.75rem;
-  --wr-input-font-size: 0.875rem;
-  --wr-input-line-height: 1.25rem;
+  --wr-input-padding-y: var(--wr-control-padding-y-md);
+  --wr-input-padding-x: var(--wr-control-padding-x-md);
+  --wr-input-font-size: var(--wr-control-font-size-md);
+  --wr-input-line-height: var(--wr-control-line-height-md);
 
   display: inline-block;
   width: 100%;
@@ -49,14 +49,33 @@
 
   &:disabled,
   &[readonly] {
-    --wr-input-color: var(--wr-color-medium);
-    --wr-input-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    --wr-input-color: var(--wr-color-on-surface-muted);
+    --wr-input-bg: rgba(var(--wr-color-outline-rgb), 0.35);
   }
 
   &:disabled {
     cursor: not-allowed;
   }
 
+  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px). Declared
+  // before `--rounded` so the pill modifier's radius / padding-x still win
+  // when both classes are present.
+  &--sm {
+    --wr-input-radius: var(--wr-control-radius-sm);
+    --wr-input-padding-y: var(--wr-control-padding-y-sm);
+    --wr-input-padding-x: var(--wr-control-padding-x-sm);
+    --wr-input-font-size: var(--wr-control-font-size-sm);
+    --wr-input-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-input-radius: var(--wr-control-radius-lg);
+    --wr-input-padding-y: var(--wr-control-padding-y-lg);
+    --wr-input-padding-x: var(--wr-control-padding-x-lg);
+    --wr-input-font-size: var(--wr-control-font-size-lg);
+    --wr-input-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--rounded {
     --wr-input-radius: var(--wr-border-radius-pill);
     --wr-input-padding-x: 1rem;
@@ -70,11 +89,11 @@
 // `[wrInputPrefix]` / `[wrInputSuffix]` / `<wr-password-toggle>` siblings.
 //
 .wr-input-group {
-  --wr-input-group-radius: var(--wr-border-radius-base);
-  --wr-input-group-bg: var(--wr-color-white);
-  --wr-input-group-border: var(--wr-color-light);
+  --wr-input-group-radius: var(--wr-control-radius-md);
+  --wr-input-group-bg: var(--wr-color-surface);
+  --wr-input-group-border: var(--wr-color-outline);
   --wr-input-group-ring: transparent;
-  --wr-input-group-affix: var(--wr-color-medium);
+  --wr-input-group-affix: var(--wr-color-on-surface-muted);
   --wr-input-group-padding-x: 0.75rem;
 
   display: inline-flex;
@@ -120,7 +139,7 @@
     user-select: none;
     font-weight: 500;
     font-family: var(--wr-font-family-base);
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
   }
 

package/input-number/styles/_index.scss

@@ -34,7 +34,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     outline: 0;
     transition:

package/input-otp/styles/_index.scss

@@ -1,15 +1,18 @@
 @use '../../theme/styles' as theme;
 
 .wr-input-otp {
-  --wr-input-otp-bg: var(--wr-color-white);
-  --wr-input-otp-border: var(--wr-color-light);
-  --wr-input-otp-color: var(--wr-color-dark);
+  --wr-input-otp-bg: var(--wr-color-surface);
+  --wr-input-otp-border: var(--wr-color-outline);
+  --wr-input-otp-color: var(--wr-color-on-surface);
   --wr-input-otp-focus: var(--wr-color-primary);
-  --wr-input-otp-size: 2.75rem;
+  --wr-input-otp-size: 2.5rem; // md cell (40px)
+  --wr-input-otp-font: var(--wr-text-lg); // 18px
+  --wr-input-otp-radius: var(--wr-control-radius-md);
+  --wr-input-otp-gap: 0.5rem;
 
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--wr-input-otp-gap);
   font-family: var(--wr-font-family-base);
 
   &__cell {
@@ -18,20 +21,20 @@
     padding: 0;
     text-align: center;
     font-family: var(--wr-font-family-mono, monospace);
-    font-size: 1.125rem;
+    font-size: var(--wr-input-otp-font);
     font-weight: 500;
     line-height: 1;
     color: var(--wr-input-otp-color);
     background: var(--wr-input-otp-bg);
     border: 1px solid var(--wr-input-otp-border);
-    @include theme.smooth-br(var(--wr-border-radius-base));
+    @include theme.smooth-br(var(--wr-input-otp-radius));
     appearance: none;
     transition:
       border-color var(--wr-transition-base),
       box-shadow var(--wr-transition-base);
 
     &::placeholder {
-      color: rgba(var(--wr-color-medium-rgb), 0.5);
+      color: var(--wr-color-text-faint);
     }
 
     &:focus {
@@ -41,12 +44,27 @@
     }
 
     &:disabled {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
-      color: var(--wr-color-medium);
+      background: rgba(var(--wr-color-outline-rgb), 0.5);
+      color: var(--wr-color-on-surface-muted);
       cursor: not-allowed;
     }
   }
 
+  // Sizes — cell, digit font, radius + gap scale together.
+  &--sm {
+    --wr-input-otp-size: 2rem; // 32px
+    --wr-input-otp-font: var(--wr-text-base); // 16px
+    --wr-input-otp-radius: var(--wr-control-radius-sm);
+    --wr-input-otp-gap: 0.375rem;
+  }
+
+  &--lg {
+    --wr-input-otp-size: 3rem; // 48px
+    --wr-input-otp-font: var(--wr-text-xl); // 20px
+    --wr-input-otp-radius: var(--wr-control-radius-lg);
+    --wr-input-otp-gap: 0.625rem;
+  }
+
   &--disabled {
     opacity: 0.7;
   }

package/keyboard/styles/_index.scss

@@ -1,11 +1,11 @@
 .wr-kbd {
   // Override these on `:root` / a scope to retheme every keycap at once.
-  --wr-kbd-bg: var(--wr-color-white);
-  --wr-kbd-border: rgba(var(--wr-color-dark-rgb), 0.18);
-  --wr-kbd-border-bottom: rgba(var(--wr-color-dark-rgb), 0.32);
-  --wr-kbd-color: var(--wr-color-dark);
-  --wr-kbd-radius: 4px;
-  // Shadow uses the always-black backdrop token, not `--wr-color-dark-rgb`
+  --wr-kbd-bg: var(--wr-color-surface);
+  --wr-kbd-border: rgba(var(--wr-color-on-surface-rgb), 0.18);
+  --wr-kbd-border-bottom: rgba(var(--wr-color-on-surface-rgb), 0.32);
+  --wr-kbd-color: var(--wr-color-on-surface);
+  --wr-kbd-radius: var(--wr-control-radius-md);
+  // Shadow uses the always-black backdrop token, not `--wr-color-on-surface-rgb`
   // — the dark RGB flips to light in dark mode, which would turn the
   // 1px drop-shadow into a top highlight.
   --wr-kbd-shadow: 0 1px 0 rgba(var(--wr-color-backdrop-rgb), 0.25);
@@ -33,23 +33,25 @@
   white-space: nowrap;
 
   &--sm {
+    --wr-kbd-radius: var(--wr-control-radius-sm);
     min-width: 1.375rem;
     height: 1.375rem;
     padding: 0 0.3125rem;
-    font-size: 0.6875rem;
+    font-size: var(--wr-text-xs);
   }
 
   &--md {
     min-width: 1.75rem;
     height: 1.75rem;
     padding: 0 0.4375rem;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
   }
 
   &--lg {
+    --wr-kbd-radius: var(--wr-control-radius-lg);
     min-width: 2.125rem;
     height: 2.125rem;
     padding: 0 0.5625rem;
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-base);
   }
 }

package/knob/styles/_index.scss

@@ -3,7 +3,7 @@
 .wr-knob {
   display: inline-block;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__surface {
     position: relative;
@@ -13,8 +13,12 @@
     touch-action: none;
     outline: 0;
 
+    // Coarse pointers: floor the dial's hit area at 44px so a small knob
+    // (size < 44) stays grabbable. No-op when the dial is already >= 44px.
+    @include theme.touch-target($positioned: true);
+
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
+      @include theme.focus-ring;
       border-radius: 50%;
     }
 
@@ -43,7 +47,7 @@
   &__suffix {
     margin-left: 0.125rem;
     font-size: var(--wr-text-sm);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-weight: var(--wr-font-weight-medium);
   }
 

package/layout/styles/_index.scss

@@ -6,7 +6,7 @@
   flex: 1 1 auto;
   min-height: 0;
   min-width: 0;
-  background: var(--wr-color-white);
+  background: var(--wr-color-surface);
 
   // When a sider is among direct children, switch to row.
   &--has-sider {
@@ -20,10 +20,10 @@
   flex: 0 0 auto;
   min-height: 3.5rem;
   padding: 0 1.5rem;
-  background: var(--wr-color-white);
-  border-bottom: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border-bottom: 1px solid var(--wr-color-outline);
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 }
 
 .wr-layout-content {
@@ -32,9 +32,9 @@
   min-height: 0;
   min-width: 0;
   padding: 1.5rem;
-  background: var(--wr-color-white);
+  background: var(--wr-color-surface);
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 }
 
 .wr-layout-footer {
@@ -43,23 +43,23 @@
   flex: 0 0 auto;
   min-height: 3rem;
   padding: 0 1.5rem;
-  background: var(--wr-color-white);
-  border-top: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border-top: 1px solid var(--wr-color-outline);
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-medium);
+  color: var(--wr-color-on-surface-muted);
 }
 
 .wr-layout-sider {
   flex: 0 0 auto;
   min-height: 0;
-  background: var(--wr-color-white);
-  border-right: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border-right: 1px solid var(--wr-color-outline);
   transition: width var(--wr-transition-base);
   overflow: hidden;
 
   &--reverse {
     order: 1;
     border-right: 0;
-    border-left: 1px solid var(--wr-color-light);
+    border-left: 1px solid var(--wr-color-outline);
   }
 }

package/lightbox/styles/_index.scss

@@ -9,21 +9,30 @@
   overflow: hidden;
   @include theme.smooth-br(var(--wr-lightbox-radius, var(--wr-border-radius-base)));
   cursor: zoom-in;
-  background: rgba(var(--wr-color-light-rgb), 0.4);
+  background: var(--wr-color-hover);
+
+  // Reserve space before the image resolves so the box doesn't collapse to
+  // 0 and shove the layout when the thumbnail pops in.
+  &--loading {
+    min-height: var(--wr-lightbox-loading-min-height, 4rem);
+  }
 
   &--loading::after {
     content: '';
     position: absolute;
     inset: 0;
+    // Sit above the host's empty placeholder background and below the image,
+    // so the shimmer is visible over the reserved area while loading.
     background: linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.45) 50%,
-      rgba(255, 255, 255, 0) 100%
+      rgba(var(--wr-color-surface-rgb), 0) 0%,
+      rgba(var(--wr-color-surface-rgb), 0.45) 50%,
+      rgba(var(--wr-color-surface-rgb), 0) 100%
     );
     background-size: 200% 100%;
     animation: wr-lightbox-shimmer 1.4s linear infinite;
     pointer-events: none;
+    z-index: 1;
   }
 
   &__trigger {
@@ -49,6 +58,16 @@
     object-fit: cover;
     user-select: none;
     -webkit-user-drag: none;
+    // Fade in once the `loaded` signal drops the `--loading` class, so the
+    // image resolves smoothly instead of snapping in. Sits above the shimmer.
+    position: relative;
+    z-index: 2;
+    opacity: 1;
+    transition: opacity 0.25s ease;
+  }
+
+  &--loading &__thumb {
+    opacity: 0;
   }
 }
 
@@ -76,6 +95,7 @@
   gap: 1rem;
   max-width: 95vw;
   max-height: 95vh;
+  max-height: 95dvh;
   padding: 1rem;
   animation: wr-lightbox-viewer-in 0.18s ease;
   outline: none;
@@ -95,8 +115,8 @@
     padding: 0;
     border: 0;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.12);
-    color: rgba(255, 255, 255, 0.9);
+    background: rgba(var(--wr-color-surface-rgb), 0.12);
+    color: rgba(var(--wr-color-surface-rgb), 0.9);
     cursor: pointer;
     transition:
       background 0.15s ease,
@@ -105,7 +125,7 @@
     @include theme.touch-target($positioned: true); // 36px -> 44px tap area on touch
 
     &:hover {
-      background: rgba(255, 255, 255, 0.2);
+      background: rgba(var(--wr-color-surface-rgb), 0.2);
     }
 
     &:active {
@@ -113,7 +133,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid rgba(255, 255, 255, 0.9);
+      outline: 2px solid rgba(var(--wr-color-surface-rgb), 0.9);
       outline-offset: 2px;
     }
   }
@@ -122,15 +142,16 @@
     display: block;
     max-width: 100%;
     max-height: calc(95vh - 4rem);
+    max-height: calc(95dvh - 4rem);
     object-fit: contain;
     cursor: zoom-out;
     @include theme.smooth-br(0.5rem);
   }
 
   &__caption {
-    color: rgba(255, 255, 255, 0.85);
+    color: rgba(var(--wr-color-surface-rgb), 0.85);
     font-family: var(--wr-font-family-base);
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-sm);
     text-align: center;
     max-width: 60ch;
   }

package/line-chart/styles/_index.scss

@@ -3,7 +3,7 @@
 .wr-line-chart {
   display: block;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__legend {
     list-style: none;
@@ -41,8 +41,8 @@
   &__tooltip {
     position: absolute;
     transform: translate(-50%, 0.5rem);
-    background: var(--wr-color-white);
-    border: 1px solid var(--wr-color-light);
+    background: var(--wr-color-surface);
+    border: 1px solid var(--wr-color-outline);
     border-radius: var(--wr-border-radius-base);
     box-shadow: var(--wr-shadow-sm);
     padding: 0.5rem 0.625rem;
@@ -66,7 +66,7 @@
 
   &__tooltip-name {
     flex: 1 1 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
   }
 
   &__tooltip-value {
@@ -85,7 +85,7 @@
     flex: 1 1 0;
     text-align: center;
     font-size: var(--wr-text-xs);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

package/list/styles/_index.scss

@@ -9,15 +9,15 @@
   --wr-list-item-padding-y: 0.625rem;
   --wr-list-item-padding-x: 1rem;
   --wr-list-item-gap: 0.75rem;
-  --wr-list-divider-color: var(--wr-color-light);
+  --wr-list-divider-color: var(--wr-color-outline);
   --wr-list-bg: transparent;
-  --wr-list-hover-bg: rgba(var(--wr-color-light-rgb), 0.4);
+  --wr-list-hover-bg: var(--wr-color-hover);
   --wr-list-active-bg: rgba(var(--wr-color-primary-rgb), 0.08);
 
   display: block;
   font-family: var(--wr-font-family-base);
-  font-size: 0.9375rem;
-  color: var(--wr-color-dark);
+  font-size: var(--wr-text-sm);
+  color: var(--wr-color-on-surface);
   background: var(--wr-list-bg);
 
   &__items {
@@ -65,7 +65,7 @@
       }
 
       &:focus-visible {
-        outline: 2px solid var(--wr-color-primary);
+        @include theme.focus-ring;
         outline-offset: -2px;
       }
     }
@@ -82,7 +82,7 @@
     display: inline-flex;
     align-items: center;
     flex: 0 0 auto;
-    color: rgba(var(--wr-color-dark-rgb), 0.65);
+    color: rgba(var(--wr-color-on-surface-rgb), 0.65);
 
     &:empty {
       display: none;