ngwr 8.0.0 → 9.0.0

package/cascader/styles/_index.scss

@@ -5,9 +5,9 @@
 @use '../../theme/styles' as theme;
 
 .wr-cascader {
-  --wr-cascader-color: var(--wr-color-dark);
-  --wr-cascader-bg: var(--wr-color-white);
-  --wr-cascader-border: var(--wr-color-light);
+  --wr-cascader-color: var(--wr-color-on-surface);
+  --wr-cascader-bg: var(--wr-color-surface);
+  --wr-cascader-border: var(--wr-color-outline);
   --wr-cascader-radius: var(--wr-control-radius-md);
   --wr-cascader-padding-y: var(--wr-control-padding-y-md);
   --wr-cascader-padding-x: var(--wr-control-padding-x-md);
@@ -20,8 +20,8 @@
   vertical-align: middle;
 
   &--disabled {
-    --wr-cascader-color: var(--wr-color-medium);
-    --wr-cascader-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    --wr-cascader-color: var(--wr-color-on-surface-muted);
+    --wr-cascader-bg: rgba(var(--wr-color-outline-rgb), 0.35);
   }
 
   // Sizes — trigger on the control contract (sm 22 / md 30 / lg 36).
@@ -92,7 +92,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);
   }
 
@@ -108,15 +108,15 @@
     width: 1.125rem;
     height: 1.125rem;
     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);
     }
   }
 }
@@ -132,8 +132,8 @@
   --wr-cascader-opt-py: 0.5rem;
 
   display: flex;
-  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-overlay);
   font-family: var(--wr-font-family-base);
@@ -163,7 +163,7 @@
     gap: 0.125rem;
 
     + .wr-cascader__col {
-      border-left: 1px solid var(--wr-color-light);
+      border-left: 1px solid var(--wr-color-outline);
     }
   }
 
@@ -174,7 +174,7 @@
     gap: 0.5rem;
     padding: var(--wr-cascader-opt-py) 0.625rem;
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     cursor: pointer;
     transition: background var(--wr-transition-short);
 
@@ -189,7 +189,7 @@
     }
 
     &--disabled {
-      color: var(--wr-color-medium);
+      color: var(--wr-color-on-surface-muted);
       cursor: not-allowed;
       opacity: 0.55;
 
@@ -209,7 +209,7 @@
   .wr-cascader__opt-arrow {
     --wr-icon-size: 0.875rem;
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
   }
 }
 

package/checkbox/styles/_index.scss

@@ -5,10 +5,10 @@
   --wr-checkbox-radius: var(--wr-control-radius-md);
   --wr-checkbox-font-size: var(--wr-text-sm);
   --wr-checkbox-line-height: var(--wr-control-line-height-md);
-  --wr-checkbox-bg: var(--wr-color-white);
-  --wr-checkbox-border: var(--wr-color-light);
+  --wr-checkbox-bg: var(--wr-color-surface);
+  --wr-checkbox-border: var(--wr-color-outline);
   --wr-checkbox-mark: transparent;
-  --wr-checkbox-color: var(--wr-color-dark);
+  --wr-checkbox-color: var(--wr-color-on-surface);
 
   display: inline-flex;
   vertical-align: middle;
@@ -55,7 +55,8 @@
     transition: var(--wr-transition-base);
   }
 
-  &__mark {
+  &__mark,
+  &__dash {
     width: 100%;
     height: 100%;
     transform: scale(0.7);
@@ -105,8 +106,22 @@
     }
   }
 
+  // Indeterminate: same filled box as checked, but reveals the dash. Takes
+  // visual precedence over `--checked` (the two classes are mutually exclusive
+  // in the host binding).
+  &--indeterminate {
+    --wr-checkbox-bg: var(--wr-color-primary);
+    --wr-checkbox-border: var(--wr-color-primary);
+    --wr-checkbox-mark: var(--wr-color-primary-contrast);
+
+    .wr-checkbox__dash {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
   &--disabled {
-    --wr-checkbox-color: var(--wr-color-medium);
+    --wr-checkbox-color: var(--wr-color-on-surface-muted);
     pointer-events: none;
     opacity: 0.6;
   }

package/collapse/styles/_index.scss

@@ -1,10 +1,10 @@
 @use '../../theme/styles' as theme;
 
 .wr-collapse {
-  --wr-collapse-bg: var(--wr-color-white);
-  --wr-collapse-border: var(--wr-color-light);
+  --wr-collapse-bg: var(--wr-color-surface);
+  --wr-collapse-border: var(--wr-color-outline);
   --wr-collapse-radius: var(--wr-border-radius-base);
-  --wr-collapse-color: var(--wr-color-dark);
+  --wr-collapse-color: var(--wr-color-on-surface);
 
   display: block;
   border: 1px solid var(--wr-collapse-border);
@@ -35,7 +35,7 @@
     transition: background var(--wr-transition-base);
 
     &:hover:not(:disabled) {
-      background: rgba(var(--wr-color-light-rgb), 0.25);
+      background: rgba(var(--wr-color-outline-rgb), 0.25);
     }
 
     &:disabled {
@@ -50,7 +50,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);
   }
 
@@ -82,7 +82,7 @@
   }
 
   &--disabled {
-    --wr-collapse-color: var(--wr-color-medium);
+    --wr-collapse-color: var(--wr-color-on-surface-muted);
     opacity: 0.7;
   }
 }

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
@@ -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 {
@@ -153,11 +159,11 @@
     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: var(--wr-text-xs);
       line-height: 1rem;
@@ -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;
       }
     }
@@ -196,7 +202,7 @@
 
   &__field-label {
     text-align: center;
-    color: var(--wr-color-medium);
+    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;
@@ -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;

package/command-palette/styles/_index.scss

@@ -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,7 +101,7 @@
     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;
@@ -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: var(--wr-color-hover);
-    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);
@@ -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

@@ -58,7 +58,7 @@
 
   &__divider {
     position: absolute;
-    background: var(--wr-color-white);
+    background: var(--wr-color-surface);
     pointer-events: none;
     display: flex;
     align-items: center;
@@ -91,8 +91,8 @@
     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(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;
@@ -70,7 +70,7 @@
   }
 
   &--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;
@@ -138,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;
     }
@@ -195,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/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

@@ -52,7 +52,7 @@
 }
 
 .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,17 +80,17 @@
   &__title {
     margin: 0;
     padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
-    color: var(--wr-color-dark);
+    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);
+    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,7 +14,7 @@
   align-items: center;
   width: 100%;
   user-select: none;
-  color: var(--wr-color-medium);
+  color: var(--wr-color-on-surface-muted);
   font-size: var(--wr-text-sm);
   line-height: 1.125rem;
 

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;
   }
 }