ngwr 7.2.0 → 8.0.0

package/keyboard/styles/_index.scss

@@ -4,7 +4,7 @@
   --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;
+  --wr-kbd-radius: var(--wr-control-radius-md);
   // Shadow uses the always-black backdrop token, not `--wr-color-dark-rgb`
   // — the dark RGB flips to light in dark mode, which would turn the
   // 1px drop-shadow into a top highlight.
@@ -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

@@ -14,7 +14,7 @@
     outline: 0;
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
+      @include theme.focus-ring;
       border-radius: 50%;
     }
 

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-white-rgb), 0) 0%,
+      rgba(var(--wr-color-white-rgb), 0.45) 50%,
+      rgba(var(--wr-color-white-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;
   }
 }
 
@@ -79,6 +98,8 @@
   padding: 1rem;
   animation: wr-lightbox-viewer-in 0.18s ease;
   outline: none;
+  // Own the swipe-down-to-dismiss gesture; no scroll/zoom to defer to.
+  touch-action: none;
 
   &__close {
     --wr-icon-size: 1.25rem;
@@ -93,8 +114,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-white-rgb), 0.12);
+    color: rgba(var(--wr-color-white-rgb), 0.9);
     cursor: pointer;
     transition:
       background 0.15s ease,
@@ -103,7 +124,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-white-rgb), 0.2);
     }
 
     &:active {
@@ -111,7 +132,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid rgba(255, 255, 255, 0.9);
+      outline: 2px solid rgba(var(--wr-color-white-rgb), 0.9);
       outline-offset: 2px;
     }
   }
@@ -126,9 +147,9 @@
   }
 
   &__caption {
-    color: rgba(255, 255, 255, 0.85);
+    color: rgba(var(--wr-color-white-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/list/styles/_index.scss

@@ -11,12 +11,12 @@
   --wr-list-item-gap: 0.75rem;
   --wr-list-divider-color: var(--wr-color-light);
   --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;
+  font-size: var(--wr-text-sm);
   color: var(--wr-color-dark);
   background: var(--wr-list-bg);
 
@@ -65,7 +65,7 @@
       }
 
       &:focus-visible {
-        outline: 2px solid var(--wr-color-primary);
+        @include theme.focus-ring;
         outline-offset: -2px;
       }
     }