ngwr 7.3.0 → 9.0.0

package/color-picker/styles/_index.scss

@@ -7,8 +7,8 @@
   --wr-color-picker-thumb-size: 0.875rem;
   --wr-color-picker-radius: var(--wr-border-radius-base);
   --wr-color-picker-padding: 0.75rem;
-  --wr-color-picker-bg: var(--wr-color-white);
-  --wr-color-picker-border: var(--wr-color-light);
+  --wr-color-picker-bg: var(--wr-color-surface);
+  --wr-color-picker-border: var(--wr-color-outline);
   --wr-color-picker-gap: 0.625rem;
 
   // Driven by host bindings on the component
@@ -23,7 +23,7 @@
   background: var(--wr-color-picker-bg);
   border: 1px solid var(--wr-color-picker-border);
   @include theme.smooth-br(var(--wr-color-picker-radius));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--wr-shadow-overlay);
   font-family: var(--wr-font-family-base);
   user-select: none;
 
@@ -38,7 +38,7 @@
     background:
       linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent),
       var(--wr-color-picker-hue);
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);
   }
 
   // Hue + alpha sliders
@@ -49,7 +49,7 @@
     border-radius: var(--wr-color-picker-slider-height);
     cursor: ew-resize;
     touch-action: none;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);
 
     // Coarse pointers: a taller track is easier to drag than the 0.75rem
     // default. A symmetric 44px hit area would overlap the SV panel above it,
@@ -57,6 +57,12 @@
     @media (pointer: coarse) {
       height: 1.5rem;
     }
+
+    // Plus an invisible 44px hit slug over the 24px track — capture is
+    // track-level, so this makes taps in the full band register without
+    // growing the visual. The 10px overhang each side fills the inter-element
+    // gap rather than biting into the SV canvas.
+    @include theme.touch-target($positioned: true);
   }
 
   &__slider--hue {
@@ -92,8 +98,8 @@
     border-radius: 50%;
     border: 2px solid #fff;
     box-shadow:
-      0 0 0 1px rgba(0, 0, 0, 0.3),
-      0 1px 2px rgba(0, 0, 0, 0.25);
+      0 0 0 1px rgba(var(--wr-color-black-rgb), 0.3),
+      0 1px 2px rgba(var(--wr-color-black-rgb), 0.25);
     pointer-events: none;
     background: transparent;
   }
@@ -116,7 +122,7 @@
     background-size:
       auto,
       8px 8px;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);
     color: transparent; // background-image already set inline via [style.background]
   }
 
@@ -129,7 +135,7 @@
 
   &__tabs {
     flex: 1 1 auto;
-    font-size: 0.75rem;
+    font-size: var(--wr-text-xs);
   }
 
   // Per-tab numeric inputs
@@ -153,13 +159,13 @@
     input {
       appearance: none;
       -moz-appearance: textfield;
-      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-sm);
       padding: 0.25rem 0.375rem;
-      color: var(--wr-color-dark);
+      color: var(--wr-color-on-surface);
       font-family: var(--wr-font-family-mono, monospace);
-      font-size: 0.75rem;
+      font-size: var(--wr-text-xs);
       line-height: 1rem;
       text-align: center;
       outline: 0;
@@ -180,8 +186,8 @@
       }
 
       &:disabled {
-        background: rgba(var(--wr-color-light-rgb), 0.35);
-        color: var(--wr-color-medium);
+        background: rgba(var(--wr-color-outline-rgb), 0.35);
+        color: var(--wr-color-on-surface-muted);
         cursor: not-allowed;
       }
     }
@@ -191,13 +197,13 @@
     text-align: left;
     text-transform: lowercase;
     padding: 0.3125rem 0.5rem;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
   }
 
   &__field-label {
     text-align: center;
-    color: var(--wr-color-medium);
-    font-size: 0.625rem;
+    color: var(--wr-color-on-surface-muted);
+    font-size: 0.625rem; // 10px — intentional micro R/G/B/A channel label, below --wr-text-xs
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -217,7 +223,7 @@
     // Use the dark token so the hairline tracks theme — fixed black at
     // 8% disappears against the dark-mode canvas, leaving swatches
     // bleeding into each other.
-    border: 1px solid rgba(var(--wr-color-dark-rgb), 0.12);
+    border: 1px solid rgba(var(--wr-color-on-surface-rgb), 0.12);
     border-radius: var(--wr-border-radius-sm);
     cursor: pointer;
     padding: 0;
@@ -231,8 +237,7 @@
     }
 
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--wr-color-primary);
+      @include theme.focus-ring;
     }
 
     &:disabled {

package/command-palette/styles/_index.scss

@@ -14,7 +14,7 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(var(--wr-color-backdrop-rgb), 0.45);
+    background: var(--wr-color-overlay);
     backdrop-filter: blur(4px);
     pointer-events: auto;
     animation: wr-cmd-fade var(--wr-duration-base) var(--wr-ease-out);
@@ -24,8 +24,8 @@
     position: relative;
     width: 100%;
     max-width: 36rem;
-    background: var(--wr-color-white);
-    border: 1px solid var(--wr-color-light);
+    background: var(--wr-color-surface);
+    border: 1px solid var(--wr-color-outline);
     @include theme.smooth-br(var(--wr-border-radius-base));
     box-shadow: var(--wr-shadow-modal);
     overflow: hidden;
@@ -38,8 +38,8 @@
     align-items: center;
     gap: 0.625rem;
     padding: 0.875rem 1rem;
-    border-bottom: 1px solid var(--wr-color-light);
-    color: var(--wr-color-medium);
+    border-bottom: 1px solid var(--wr-color-outline);
+    color: var(--wr-color-on-surface-muted);
 
     input {
       flex: 1 1 auto;
@@ -49,21 +49,21 @@
       border: 0;
       outline: 0;
       padding: 0;
-      color: var(--wr-color-dark);
+      color: var(--wr-color-on-surface);
       font-family: inherit;
       font-size: var(--wr-text-base);
 
       &::placeholder {
-        color: var(--wr-color-medium);
+        color: var(--wr-color-on-surface-muted);
       }
     }
   }
 
   &__hint {
     padding: 0.0625rem 0.375rem;
-    border: 1px solid var(--wr-color-light);
+    border: 1px solid var(--wr-color-outline);
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-family: inherit;
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-medium);
@@ -87,7 +87,7 @@
 
   &__group-title {
     padding: 0.375rem 0.625rem 0.25rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-semibold);
     text-transform: uppercase;
@@ -101,13 +101,13 @@
     padding: 0.5rem 0.625rem;
     border-radius: var(--wr-border-radius-sm);
     cursor: pointer;
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font-size: var(--wr-text-sm);
     line-height: var(--wr-leading-tight);
     user-select: none;
 
     &--active {
-      background: rgba(var(--wr-color-primary-rgb), 0.08);
+      background: var(--wr-color-primary-soft);
       color: var(--wr-color-primary);
     }
   }
@@ -116,7 +116,7 @@
     flex: 0 0 auto;
     width: 1rem;
     height: 1rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -140,7 +140,7 @@
 
   &__option-description {
     margin-top: 0.0625rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -150,10 +150,10 @@
   &__option-shortcut {
     flex: 0 0 auto;
     padding: 0.0625rem 0.375rem;
-    border: 1px solid var(--wr-color-light);
+    border: 1px solid var(--wr-color-outline);
     border-radius: var(--wr-border-radius-sm);
-    background: rgba(var(--wr-color-light-rgb), 0.4);
-    color: var(--wr-color-medium);
+    background: var(--wr-color-hover);
+    color: var(--wr-color-on-surface-muted);
     font-family: inherit;
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-medium);
@@ -162,7 +162,7 @@
   &__empty {
     padding: 1.5rem 1rem;
     text-align: center;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-sm);
   }
 }
@@ -186,7 +186,10 @@
     // Top-docked full-screen: clear the notch at the top (search bar) and the
     // home indicator at the bottom. The panel background still fills both edges.
     padding-top: env(safe-area-inset-top);
-    padding-bottom: env(safe-area-inset-bottom);
+    // When the on-screen keyboard is up (--wr-keyboard-inset, set by
+    // WrVisualViewport) it covers more than the home indicator, so keep the
+    // results list above whichever is taller.
+    padding-bottom: max(env(safe-area-inset-bottom), var(--wr-keyboard-inset, 0px));
   }
 
   .wr-command-palette__body {

package/compare/styles/_index.scss

@@ -13,7 +13,7 @@
     outline: 0;
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.25);
+      @include theme.focus-ring;
       border-radius: var(--wr-border-radius-sm);
     }
   }
@@ -58,12 +58,12 @@
 
   &__divider {
     position: absolute;
-    background: var(--wr-color-white);
+    background: var(--wr-color-surface);
     pointer-events: none;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.2);
   }
 
   &--horizontal &__divider {
@@ -91,10 +91,10 @@
     flex: 0 0 auto;
     width: 2rem;
     height: 2rem;
-    background: var(--wr-color-white);
-    color: var(--wr-color-dark);
+    background: var(--wr-color-surface);
+    color: var(--wr-color-on-surface);
     border-radius: 50%;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 2px 6px rgba(var(--wr-color-black-rgb), 0.25);
     pointer-events: none;
   }
 }

package/context-menu/styles/_index.scss

@@ -38,8 +38,8 @@
 .wr-context-menu {
   min-width: 10rem;
   padding: 0.3125rem;
-  background: var(--wr-color-white, #fff);
-  border: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface, #fff);
+  border: 1px solid var(--wr-color-outline);
   // Soft rounded corners — smooth-br opts into native `corner-shape:
   // squircle` where supported (Chrome 145+) and falls back to plain
   // border-radius elsewhere.
@@ -54,7 +54,7 @@
   width: 100%;
   padding: 0.4375rem 0.625rem;
   @include theme.smooth-br(var(--wr-border-radius-sm));
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
   font-size: var(--wr-text-sm);
   cursor: pointer;
   user-select: none;
@@ -64,13 +64,13 @@
 
   &:hover,
   &:focus-visible {
-    background: rgba(var(--wr-color-primary-rgb), 0.08);
+    background: var(--wr-color-primary-soft);
     color: var(--wr-color-primary);
     outline: none;
   }
 
   &--disabled {
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     opacity: 0.6;
     pointer-events: none;
   }
@@ -93,7 +93,7 @@
     flex: 0 0 auto;
     width: 0.8125rem;
     height: 0.8125rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     margin-left: 0.25rem;
   }
 
@@ -108,5 +108,15 @@
   display: block;
   height: 1px;
   margin: 0.25rem 0;
-  background: var(--wr-color-light);
+  background: var(--wr-color-outline);
+}
+
+// Touch long-press opens the menu; suppress the native iOS callout + text
+// selection on coarse pointers so the hold isn't fought by the magnifier /
+// selection UI. Desktop selection inside the host stays intact.
+@media (pointer: coarse) {
+  .wr-context-menu-host {
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
 }

package/counter/styles/_index.scss

@@ -5,7 +5,18 @@
   align-items: baseline;
   font-variant-numeric: tabular-nums;
   line-height: 1;
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
+
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
 
   &__odo {
     display: inline-flex;

package/date-picker/styles/_index.scss

@@ -9,7 +9,7 @@
     background: transparent;
     border: 0;
     padding: 0 var(--wr-input-group-padding-x, 0.75rem);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -51,10 +51,10 @@
 
 .wr-time-picker {
   --wr-time-picker-col-width: 3rem;
-  --wr-time-picker-bg: var(--wr-color-white);
-  --wr-time-picker-border: var(--wr-color-light);
-  --wr-time-picker-color: var(--wr-color-dark);
-  --wr-time-picker-muted: var(--wr-color-medium);
+  --wr-time-picker-bg: var(--wr-color-surface);
+  --wr-time-picker-border: var(--wr-color-outline);
+  --wr-time-picker-color: var(--wr-color-on-surface);
+  --wr-time-picker-muted: var(--wr-color-on-surface-muted);
 
   display: inline-flex;
   align-items: center;
@@ -94,12 +94,11 @@
 
     &:hover:not(:disabled) {
       color: var(--wr-color-primary);
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.3);
+      @include theme.focus-ring;
     }
 
     &:disabled {
@@ -118,7 +117,7 @@
     border-radius: var(--wr-border-radius-sm);
     color: var(--wr-time-picker-color);
     font-family: var(--wr-font-family-base);
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
     font-weight: 600;
     text-align: center;
@@ -139,7 +138,7 @@
     }
 
     &:disabled {
-      background: rgba(var(--wr-color-light-rgb), 0.35);
+      background: rgba(var(--wr-color-outline-rgb), 0.35);
       color: var(--wr-time-picker-muted);
       cursor: not-allowed;
     }
@@ -157,14 +156,14 @@
     border-radius: var(--wr-border-radius-sm);
     color: var(--wr-time-picker-color);
     font-family: var(--wr-font-family-base);
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     user-select: none;
   }
 
   &__sep {
     color: var(--wr-time-picker-muted);
-    font-size: 1.125rem;
+    font-size: var(--wr-text-lg);
     font-weight: 600;
     line-height: 1;
     user-select: none;
@@ -196,8 +195,8 @@
     display: flex;
     justify-content: center;
     padding: 0.75rem;
-    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-top: 0;
     border-radius: 0 0 var(--wr-border-radius-base) var(--wr-border-radius-base);
   }

package/density/styles/_index.scss

@@ -15,21 +15,21 @@
   --wr-density-gap: 1;
 }
 
-[data-wr-density='compact'] {
+[data-wr-density='sm'] {
   --wr-density-y: 0.55;
   --wr-density-x: 0.85;
   --wr-density-text: 0.95;
   --wr-density-gap: 0.8;
 }
 
-[data-wr-density='default'] {
+[data-wr-density='md'] {
   --wr-density-y: 1;
   --wr-density-x: 1;
   --wr-density-text: 1;
   --wr-density-gap: 1;
 }
 
-[data-wr-density='comfortable'] {
+[data-wr-density='lg'] {
   --wr-density-y: 1.35;
   --wr-density-x: 1.15;
   --wr-density-text: 1.05;

package/descriptions/styles/_index.scss

@@ -3,7 +3,7 @@
 .wr-descriptions {
   display: block;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   // Opt-in (`responsive`): query the box's own width so inline layouts reflow
   // to stacked inside a narrow card / side panel, regardless of the viewport.
@@ -39,7 +39,7 @@
   &__label {
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-medium);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     text-transform: uppercase;
     letter-spacing: var(--wr-tracking-wide);
   }
@@ -48,7 +48,7 @@
     margin: 0;
     font-size: var(--wr-text-sm);
     line-height: var(--wr-leading-normal);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
   }
 
   // Inline
@@ -73,7 +73,7 @@
   // Bordered
   &--bordered &__list {
     gap: 0;
-    border: 1px solid var(--wr-color-light);
+    border: 1px solid var(--wr-color-outline);
     border-radius: var(--wr-border-radius-base);
     overflow: hidden;
   }
@@ -82,7 +82,7 @@
     padding: 0.625rem 0.875rem;
 
     & + & {
-      border-top: 1px solid var(--wr-color-light);
+      border-top: 1px solid var(--wr-color-outline);
     }
   }
 
@@ -99,7 +99,7 @@
   &--bordered#{&}--inline &__label,
   &--bordered#{&}--inline &__value {
     padding: 0.625rem 0.875rem;
-    border-top: 1px solid var(--wr-color-light);
+    border-top: 1px solid var(--wr-color-outline);
   }
 
   &--bordered#{&}--inline &__row:first-child &__label,
@@ -108,8 +108,8 @@
   }
 
   &--bordered#{&}--inline &__label {
-    background: rgba(var(--wr-color-light-rgb), 0.35);
-    border-right: 1px solid var(--wr-color-light);
+    background: rgba(var(--wr-color-outline-rgb), 0.35);
+    border-right: 1px solid var(--wr-color-outline);
   }
 }
 
@@ -147,7 +147,7 @@
   }
 
   .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__row + .wr-descriptions__row {
-    border-top: 1px solid var(--wr-color-light);
+    border-top: 1px solid var(--wr-color-outline);
   }
 
   .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__label,

package/dialog/styles/_index.scss

@@ -47,12 +47,12 @@
 }
 
 .wr-dialog-backdrop {
-  background: rgba(var(--wr-color-backdrop-rgb), 0.45);
+  background: var(--wr-color-overlay);
   backdrop-filter: blur(2px);
 }
 
 .wr-dialog-panel {
-  --wr-dialog-bg: var(--wr-color-white);
+  --wr-dialog-bg: var(--wr-color-surface);
   --wr-dialog-radius: var(--wr-border-radius-lg);
   --wr-dialog-shadow: var(--wr-shadow-modal);
   --wr-dialog-min-width: 18rem;
@@ -64,13 +64,14 @@
   min-width: var(--wr-dialog-min-width);
   max-width: calc(100vw - 2rem);
   max-height: calc(100vh - 2rem);
+  max-height: calc(100dvh - 2rem);
 
   background: var(--wr-dialog-bg);
   @include theme.smooth-br(var(--wr-dialog-radius));
   box-shadow: var(--wr-dialog-shadow);
   overflow: hidden;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   animation: wr-dialog-enter 0.2s ease-out;
 }
@@ -79,18 +80,18 @@
   &__title {
     margin: 0;
     padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
-    color: var(--wr-color-dark);
-    font-size: 1.0625rem;
+    color: var(--wr-color-on-surface);
+    font-size: var(--wr-text-lg);
     font-weight: 600;
     line-height: 1.5rem;
-    border-bottom: 1px solid var(--wr-color-light);
+    border-bottom: 1px solid var(--wr-color-outline);
   }
 
   &__content {
     padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
     overflow: auto;
-    color: var(--wr-color-dark);
-    font-size: 0.9375rem;
+    color: var(--wr-color-on-surface);
+    font-size: var(--wr-text-base);
     line-height: 1.5rem;
   }
 
@@ -99,7 +100,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: calc(var(--wr-dialog-padding-y) * 0.75) var(--wr-dialog-padding-x);
-    border-top: 1px solid var(--wr-color-light);
+    border-top: 1px solid var(--wr-color-outline);
 
     &--start {
       justify-content: flex-start;

package/divider/styles/_index.scss

@@ -5,7 +5,7 @@
   // pseudo-element lines on either side of the optional projected
   // label.
   --wr-divider-width: 1px;
-  --wr-divider-color: var(--wr-color-light);
+  --wr-divider-color: var(--wr-color-outline);
   --wr-divider-style: solid;
   --wr-divider-gap: 0.75rem;
   --wr-divider-aside: 1rem;
@@ -14,8 +14,8 @@
   align-items: center;
   width: 100%;
   user-select: none;
-  color: var(--wr-color-medium);
-  font-size: 0.8125rem;
+  color: var(--wr-color-on-surface-muted);
+  font-size: var(--wr-text-sm);
   line-height: 1.125rem;
 
   &::before,

package/donut-chart/styles/_index.scss

@@ -6,7 +6,7 @@
   align-items: center;
   gap: 0.875rem;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__surface {
     position: relative;
@@ -39,7 +39,7 @@
   &__center-label {
     margin-top: 0.125rem;
     font-size: var(--wr-text-xs);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
   }
 
   &__legend {
@@ -70,7 +70,7 @@
   }
 
   &__legend-value {
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-variant-numeric: tabular-nums;
   }
 }