ngwr 7.2.0 → 8.0.0

package/segmented/styles/_index.scss

@@ -5,8 +5,13 @@
   --wr-segmented-color: var(--wr-color-dark);
   --wr-segmented-selected-bg: var(--wr-color-white);
   --wr-segmented-selected-color: var(--wr-color-dark);
-  --wr-segmented-radius: var(--wr-border-radius-base);
+  --wr-segmented-radius: 0.5rem; // 8px track
+  // Concentric thumb: outer − inset, so track and thumb corners nest naturally.
+  --wr-segmented-thumb-radius: calc(var(--wr-segmented-radius) - var(--wr-segmented-padding));
   --wr-segmented-padding: 0.1875rem;
+  --wr-segmented-font-size: var(--wr-text-sm);
+  --wr-segmented-line-height: var(--wr-control-line-height-md);
+  --wr-segmented-option-py: 0.125rem;
 
   --wr-segmented-thumb-index: 0;
   --wr-segmented-thumb-count: 1;
@@ -20,8 +25,25 @@
   padding: var(--wr-segmented-padding);
   @include theme.smooth-br(var(--wr-segmented-radius));
   font-family: var(--wr-font-family-base);
-  font-size: 0.8125rem;
-  line-height: 1.25rem;
+  font-size: var(--wr-segmented-font-size);
+  line-height: var(--wr-segmented-line-height);
+
+  // Sizes — track 22 / 30 / 36 px (line-height + 2×option-py + 2×track-padding).
+  &--sm {
+    --wr-segmented-radius: 0.4375rem; // 7px → concentric 5px thumb
+    --wr-segmented-padding: 0.125rem; // 2px
+    --wr-segmented-font-size: var(--wr-text-xs);
+    --wr-segmented-line-height: var(--wr-control-line-height-sm);
+    --wr-segmented-option-py: 0.0625rem; // 1px
+  }
+
+  &--lg {
+    --wr-segmented-radius: 0.5625rem; // 9px → concentric 6px thumb
+    --wr-segmented-padding: 0.1875rem; // 3px
+    --wr-segmented-font-size: var(--wr-text-base);
+    --wr-segmented-line-height: var(--wr-control-line-height-lg);
+    --wr-segmented-option-py: 0.1875rem; // 3px
+  }
 
   &__thumb {
     position: absolute;
@@ -31,8 +53,8 @@
     width: calc((100% - 2 * var(--wr-segmented-padding)) / var(--wr-segmented-thumb-count));
     transform: translateX(calc(100% * var(--wr-segmented-thumb-index)));
     background: var(--wr-segmented-selected-bg);
-    @include theme.smooth-br(calc(var(--wr-segmented-radius) - var(--wr-segmented-padding)));
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    @include theme.smooth-br(var(--wr-segmented-thumb-radius));
+    box-shadow: var(--wr-shadow-xs);
     pointer-events: none;
     // Animate slides, but only after first paint — see `&--mounted` below.
   }
@@ -56,8 +78,9 @@
     appearance: none;
     background: transparent;
     border: 0;
-    padding: 0.3125rem 0.75rem;
-    @include theme.smooth-br(calc(var(--wr-segmented-radius) - var(--wr-segmented-padding)));
+    // Height = line-height + 2×option-py + 2×track-padding (md → 30px); all scale per size.
+    padding: var(--wr-segmented-option-py) 0.75rem;
+    @include theme.smooth-br(var(--wr-segmented-thumb-radius));
     color: var(--wr-segmented-color);
     font: inherit;
     cursor: pointer;
@@ -82,7 +105,7 @@
   }
 
   &__label {
-    line-height: 1.25rem;
+    line-height: var(--wr-segmented-line-height);
   }
 
   &--disabled {

package/select/styles/_index.scss

@@ -5,15 +5,34 @@
   --wr-select-color: var(--wr-color-dark);
   --wr-select-bg: var(--wr-color-white);
   --wr-select-border: var(--wr-color-light);
-  --wr-select-radius: var(--wr-border-radius-base);
-  --wr-select-padding-y: 0.4375rem;
-  --wr-select-padding-x: 0.75rem;
-  --wr-select-font-size: 0.875rem;
-  --wr-select-line-height: 1.25rem;
+  --wr-select-radius: var(--wr-control-radius-md);
+  --wr-select-padding-y: var(--wr-control-padding-y-md);
+  --wr-select-padding-x: var(--wr-control-padding-x-md);
+  --wr-select-font-size: var(--wr-control-font-size-md);
+  --wr-select-line-height: var(--wr-control-line-height-md);
 
   display: inline-flex;
   vertical-align: middle;
 
+  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px). Multi/tag
+  // min-height and the search/tag inputs all read these vars, so every mode
+  // tracks the size. Declared before `--rounded` so the pill modifier wins.
+  &--sm {
+    --wr-select-radius: var(--wr-control-radius-sm);
+    --wr-select-padding-y: var(--wr-control-padding-y-sm);
+    --wr-select-padding-x: var(--wr-control-padding-x-sm);
+    --wr-select-font-size: var(--wr-control-font-size-sm);
+    --wr-select-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-select-radius: var(--wr-control-radius-lg);
+    --wr-select-padding-y: var(--wr-control-padding-y-lg);
+    --wr-select-padding-x: var(--wr-control-padding-x-lg);
+    --wr-select-font-size: var(--wr-control-font-size-lg);
+    --wr-select-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--rounded {
     --wr-select-radius: var(--wr-border-radius-pill);
     --wr-select-padding-x: 1rem;
@@ -48,9 +67,8 @@
       box-shadow var(--wr-transition-base);
 
     &:focus-visible {
-      outline: none;
       border-color: var(--wr-color-primary);
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+      @include theme.focus-ring;
     }
 
     &:disabled {
@@ -72,7 +90,7 @@
   }
 
   &__placeholder {
-    color: rgba(var(--wr-color-medium-rgb), 0.85);
+    color: var(--wr-color-text-muted);
   }
 
   &__chevron {
@@ -94,8 +112,10 @@
   &--tag &__trigger {
     flex-wrap: wrap;
     align-items: center;
-    padding: 0.25rem 0.5rem;
-    min-height: calc(var(--wr-select-line-height) + var(--wr-select-padding-y) * 2);
+    padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
+    // Empty / single chip-row floor = single-mode height
+    // (line-height + 2×padding-y + 2×1px border), so every size + density lines up.
+    min-height: calc(var(--wr-select-line-height) + var(--wr-select-padding-y) * var(--wr-density-y, 1) * 2 + 2px);
   }
 
   // Search-mode trigger: inline text input + chevron + clear
@@ -114,7 +134,7 @@
     min-width: 0;
     border: 0;
     outline: 0;
-    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+    padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
     background: transparent;
     color: inherit;
     font: inherit;
@@ -122,7 +142,7 @@
     line-height: var(--wr-select-line-height);
 
     &::placeholder {
-      color: rgba(var(--wr-color-medium-rgb), 0.85);
+      color: var(--wr-color-text-muted);
     }
 
     &:disabled {
@@ -149,11 +169,11 @@
     background: transparent;
     color: inherit;
     font: inherit;
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: var(--wr-select-font-size);
+    line-height: var(--wr-select-line-height);
 
     &::placeholder {
-      color: rgba(var(--wr-color-medium-rgb), 0.85);
+      color: var(--wr-color-text-muted);
     }
 
     &:disabled {
@@ -177,9 +197,9 @@
     max-width: 100%;
     padding: 0.125rem 0.25rem 0.125rem 0.5rem;
     border-radius: 999px;
-    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    background: var(--wr-color-primary-soft);
     color: var(--wr-color-primary);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.4;
     user-select: none;
   }
@@ -202,7 +222,7 @@
     transition: background 0.12s ease;
 
     &:hover {
-      background: rgba(var(--wr-color-primary-rgb), 0.2);
+      background: var(--wr-color-primary-active);
     }
   }
 
@@ -243,9 +263,20 @@
   --wr-select-panel-radius: var(--wr-border-radius-base);
   --wr-select-panel-shadow: var(--wr-shadow-overlay);
   --wr-select-panel-max-height: 16rem;
+  // Option sizing — default md. --sm/--lg are set from the trigger size because
+  // the panel is portaled into an overlay and can't inherit the host size class.
+  --wr-option-font-size: var(--wr-control-font-size-md);
+  --wr-option-line-height: var(--wr-control-line-height-md);
+  --wr-option-padding-y: 0.4375rem;
+  --wr-option-padding-x: 0.625rem;
+  --wr-option-gap: 0.1875rem;
 
   display: flex;
   flex-direction: column;
+  // Fill the overlay pane so the visible panel == the pointer-catching surface;
+  // no transparent gutter to swallow outside-clicks (see openOverlay in select.ts).
+  width: 100%;
+  gap: var(--wr-option-gap);
   background: var(--wr-select-panel-bg);
   border: 1px solid var(--wr-select-panel-border);
   @include theme.smooth-br(var(--wr-select-panel-radius));
@@ -255,11 +286,27 @@
   overflow-y: auto;
   font-family: var(--wr-font-family-base);
 
+  &--sm {
+    --wr-option-font-size: var(--wr-control-font-size-sm);
+    --wr-option-line-height: var(--wr-control-line-height-sm);
+    --wr-option-padding-y: 0.3125rem;
+    --wr-option-padding-x: 0.5rem;
+    --wr-option-gap: 0.125rem;
+  }
+
+  &--lg {
+    --wr-option-font-size: var(--wr-control-font-size-lg);
+    --wr-option-line-height: var(--wr-control-line-height-lg);
+    --wr-option-padding-y: 0.5rem;
+    --wr-option-padding-x: 0.75rem;
+    --wr-option-gap: 0.25rem;
+  }
+
   &__loading,
   &__empty {
     padding: 0.625rem 0.75rem;
     color: var(--wr-color-medium);
-    font-size: 0.875rem;
+    font-size: var(--wr-option-font-size);
     text-align: center;
   }
 }
@@ -267,21 +314,21 @@
 .wr-option {
   display: flex;
   align-items: center;
-  padding: 0.4375rem 0.625rem;
+  padding: var(--wr-option-padding-y) var(--wr-option-padding-x);
   border-radius: var(--wr-border-radius-sm);
   color: var(--wr-color-dark);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: var(--wr-option-font-size);
+  line-height: var(--wr-option-line-height);
   cursor: pointer;
   user-select: none;
   transition: background var(--wr-transition-short);
 
   &:hover {
-    background: rgba(var(--wr-color-light-rgb), 0.4);
+    background: var(--wr-color-hover);
   }
 
   &--selected {
-    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    background: var(--wr-color-primary-soft);
     color: var(--wr-color-primary);
     font-weight: 500;
   }
@@ -306,11 +353,12 @@
 .wr-option-group {
   display: flex;
   flex-direction: column;
+  gap: var(--wr-option-gap);
 
   &__label {
     padding: 0.5rem 0.625rem 0.25rem;
     color: var(--wr-color-medium);
-    font-size: 0.6875rem;
+    font-size: var(--wr-text-xs);
     font-weight: 600;
     letter-spacing: 0.04em;
     text-transform: uppercase;

package/sidebar/styles/_index.scss

@@ -34,7 +34,7 @@
       color var(--wr-transition-base);
 
     &:hover {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
 
       .wr-sidebar__icon {
         color: var(--wr-color-primary);
@@ -43,7 +43,7 @@
 
     &--active {
       color: var(--wr-color-primary);
-      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      background: var(--wr-color-primary-soft);
       pointer-events: none;
 
       .wr-sidebar__icon {
@@ -175,7 +175,7 @@
 
     &--active {
       color: var(--wr-color-primary);
-      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      background: var(--wr-color-primary-soft);
       pointer-events: none;
 
       &::before {

package/slider/styles/_index.scss

@@ -49,9 +49,11 @@
       transform var(--wr-transition-short),
       box-shadow var(--wr-transition-base);
 
+    // Coarse pointers: invisible 44px tap area so the small thumb is grabbable.
+    @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 {
@@ -63,7 +65,7 @@
   &__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;
   }

package/speed-dial/styles/_index.scss

@@ -152,6 +152,7 @@
     &:hover {
       transform: scale(1.06);
       background: var(--wr-color-primary);
+      border-color: var(--wr-color-primary);
       color: var(--wr-color-primary-contrast, var(--wr-color-white));
     }
   }

package/splitter/styles/_index.scss

@@ -35,13 +35,16 @@
     outline: 0;
     transition: background var(--wr-transition-base);
 
+    // Coarse pointers: expand the 4px gutter to a 44px tap area.
+    @include theme.touch-target($positioned: true);
+
     &:hover,
     &:focus-visible {
       background: var(--wr-color-primary);
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.2);
+      @include theme.focus-ring;
     }
   }
 
@@ -58,7 +61,7 @@
   &__handle {
     background: var(--wr-color-white);
     border: 1px solid var(--wr-color-light);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--wr-shadow-sm);
     display: inline-block;
     flex: 0 0 auto;
   }
@@ -66,13 +69,13 @@
   &--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 {

package/spotlight-card/styles/_index.scss

@@ -1,13 +1,14 @@
 // 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-dark-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-dark-rgb), 0.15);
 
   position: relative;
   display: block;
@@ -38,6 +39,9 @@
   }
 }
 
+// Dark mode: `--wr-color-dark-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-dark-rgb), 0.22);
 }

package/stepper/styles/_index.scss

@@ -80,7 +80,7 @@
     border: 1.5px solid var(--wr-color-light);
     background: var(--wr-color-white);
     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,7 +95,7 @@
   &__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 {
@@ -108,7 +108,7 @@
     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.scss

@@ -85,7 +85,6 @@
 @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,9 +1,11 @@
 @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-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-light);
   --wr-switch-bg-checked: var(--wr-color-primary);
   --wr-switch-thumb: var(--wr-color-white);
@@ -13,8 +15,8 @@
   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);