ngwr 7.3.0 → 8.0.0

package/README.md

@@ -10,8 +10,9 @@
 zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
 `@angular/cdk` for overlay, portal, and a11y primitives.
 
-> **Status:** active development. Public API is stable across patch releases but
-> the v7 line is still maturing. [Open an issue](https://github.com/thekhegay/ngwr/issues/new)
+> **Status:** active development. v8 is the current major line (Angular 22 peer).
+> Public API is stable across patch releases and still evolving between majors.
+> [Open an issue](https://github.com/thekhegay/ngwr/issues/new)
 > if something breaks or feels wrong.
 
 ## Requirements
@@ -139,13 +140,13 @@ Plus [icon](https://ngwr.dev/components/icon), the experimental [squircle](https
 
 Animated UI effects. Mix of in-house components + ports of [reactbits.dev](https://www.reactbits.dev) — each port carries a credit chip on its docs page. Defaults are theme-aware (light + dark), and every component honors `prefers-reduced-motion`.
 
-[aurora](https://ngwr.dev/animations/aurora), [blur-text](https://ngwr.dev/animations/blur-text), [border-glow](https://ngwr.dev/animations/border-glow), [circular-text](https://ngwr.dev/animations/circular-text), [click-spark](https://ngwr.dev/animations/click-spark), [confetti](https://ngwr.dev/animations/confetti), [decrypt-text](https://ngwr.dev/animations/decrypt-text), [falling-text](https://ngwr.dev/animations/falling-text), [fuzzy-text](https://ngwr.dev/animations/fuzzy-text), [glitch-text](https://ngwr.dev/animations/glitch-text), [gradient-text](https://ngwr.dev/animations/gradient-text), [marquee](https://ngwr.dev/animations/marquee), [reveal](https://ngwr.dev/animations/reveal), [rotating-text](https://ngwr.dev/animations/rotating-text), [scramble-text](https://ngwr.dev/animations/scramble-text), [shiny-text](https://ngwr.dev/animations/shiny-text), [splash-cursor](https://ngwr.dev/animations/splash-cursor), [split-text](https://ngwr.dev/animations/split-text), [spotlight-card](https://ngwr.dev/animations/spotlight-card), [star-border](https://ngwr.dev/animations/star-border), [tilt-card](https://ngwr.dev/animations/tilt-card), [typewriter](https://ngwr.dev/animations/typewriter), [waves](https://ngwr.dev/animations/waves).
+[aurora](https://ngwr.dev/animations/aurora), [blur-text](https://ngwr.dev/animations/blur-text), [border-glow](https://ngwr.dev/animations/border-glow), [circular-text](https://ngwr.dev/animations/circular-text), [click-spark](https://ngwr.dev/animations/click-spark), [confetti](https://ngwr.dev/animations/confetti), [decrypt-text](https://ngwr.dev/animations/decrypt-text), [falling-text](https://ngwr.dev/animations/falling-text), [fuzzy-text](https://ngwr.dev/animations/fuzzy-text), [glitch-text](https://ngwr.dev/animations/glitch-text), [gradient-text](https://ngwr.dev/animations/gradient-text), [marquee](https://ngwr.dev/animations/marquee), [rotating-text](https://ngwr.dev/animations/rotating-text), [shiny-text](https://ngwr.dev/animations/shiny-text), [splash-cursor](https://ngwr.dev/animations/splash-cursor), [split-text](https://ngwr.dev/animations/split-text), [spotlight-card](https://ngwr.dev/animations/spotlight-card), [star-border](https://ngwr.dev/animations/star-border), [tilt-card](https://ngwr.dev/animations/tilt-card), [typewriter](https://ngwr.dev/animations/typewriter), [waves](https://ngwr.dev/animations/waves).
 
 Card packages bundle their related directives: `ngwr/spotlight-card` exports `WrSpotlight`; `ngwr/tilt-card` exports `WrTilt`; `ngwr/shiny-text` exports `WrShimmer`.
 
 ### Directives — `ngwr/directives`
 
-[autofocus](https://ngwr.dev/directives/autofocus), [autosize](https://ngwr.dev/directives/autosize), [click-outside](https://ngwr.dev/directives/click-outside), [copy-to-clipboard](https://ngwr.dev/directives/copy-to-clipboard), [reveal](https://ngwr.dev/animations/reveal). [affix](https://ngwr.dev/directives/affix) ships as its own entry (`ngwr/affix`).
+[autofocus](https://ngwr.dev/directives/autofocus), [autosize](https://ngwr.dev/directives/autosize), [click-outside](https://ngwr.dev/directives/click-outside), [copy-to-clipboard](https://ngwr.dev/directives/copy-to-clipboard). [affix](https://ngwr.dev/directives/affix) ships as its own entry (`ngwr/affix`).
 
 ### Pipes — `ngwr/pipes`
 

package/alert/styles/_index.scss

@@ -1,7 +1,7 @@
 @use '../../theme/styles' as theme;
 
 $alert-colors: (
-  info: primary,
+  info: info,
   success: success,
   warning: warning,
   danger: danger,
@@ -17,16 +17,16 @@ $alert-colors: (
   min-width: 0;
 
   // Defaults — overridden per variant below.
-  --wr-alert-bg: rgba(var(--wr-color-primary-rgb), 0.08);
-  --wr-alert-border: var(--wr-color-primary);
-  --wr-alert-title: var(--wr-color-primary);
+  --wr-alert-bg: var(--wr-color-info-soft);
+  --wr-alert-border: var(--wr-color-info-soft-border);
+  --wr-alert-title: var(--wr-color-info);
   --wr-alert-message: var(--wr-color-dark);
-  --wr-alert-close: var(--wr-color-medium);
+  --wr-alert-close: var(--wr-color-info);
 
   background: var(--wr-alert-bg);
-  border-left: 3px solid var(--wr-alert-border);
+  border: 1px solid var(--wr-alert-border);
   @include theme.smooth-br(var(--wr-border-radius-base));
-  padding: 0.75rem 1rem;
+  padding: 0.625rem 0.875rem;
 
   &--dismissed {
     display: none;
@@ -38,6 +38,14 @@ $alert-colors: (
     height: 1.125rem;
     margin-top: 0.125rem;
     color: var(--wr-alert-title);
+    // A custom `<wr-icon>` sizes via this var, not width/height.
+    --wr-icon-size: 1.125rem;
+  }
+
+  // `<wr-icon>` sets `color: inherit` on its own host at equal specificity;
+  // the type selector wins it back so a custom icon takes the intent colour.
+  wr-icon.wr-alert__icon {
+    color: var(--wr-alert-title);
   }
 
   &__body {
@@ -52,7 +60,7 @@ $alert-colors: (
     margin: 0;
     color: var(--wr-alert-title);
     font-family: var(--wr-font-family-base);
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     line-height: 1.25rem;
   }
@@ -61,7 +69,7 @@ $alert-colors: (
     margin: 0;
     color: var(--wr-alert-message);
     font-family: var(--wr-font-family-base);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.125rem;
   }
 
@@ -84,20 +92,39 @@ $alert-colors: (
 
     &:hover {
       color: var(--wr-alert-title);
-      background: rgba(var(--wr-color-light-rgb), 0.4);
-    }
-
-    &:focus-visible {
-      outline: 2px solid rgba(var(--wr-color-primary-rgb), 0.5);
-      outline-offset: 1px;
+      background: var(--wr-color-hover);
     }
   }
 
   @each $variant, $color in $alert-colors {
     &--#{$variant} {
-      --wr-alert-bg: rgba(var(--wr-color-#{$color}-rgb), 0.08);
-      --wr-alert-border: var(--wr-color-#{$color});
+      --wr-alert-bg: var(--wr-color-#{$color}-soft);
+      --wr-alert-border: var(--wr-color-#{$color}-soft-border);
       --wr-alert-title: var(--wr-color-#{$color});
+      --wr-alert-close: var(--wr-color-#{$color});
     }
   }
+
+  // Neutral — muted gray chip, reusing the `medium` soft tokens.
+  &--neutral {
+    --wr-alert-bg: var(--wr-color-medium-soft);
+    --wr-alert-border: var(--wr-color-medium-soft-border);
+    --wr-alert-title: var(--wr-color-dark);
+    --wr-alert-message: var(--wr-color-medium);
+    --wr-alert-close: var(--wr-color-medium);
+
+    .wr-alert__icon {
+      color: var(--wr-color-medium);
+    }
+  }
+
+  // Offline — inverse chip. Auto-flips via the theme tokens: dark bg +
+  // light text in light theme; light bg + dark text in dark theme.
+  &--offline {
+    --wr-alert-bg: var(--wr-color-dark);
+    --wr-alert-border: var(--wr-color-dark);
+    --wr-alert-title: var(--wr-color-white);
+    --wr-alert-message: var(--wr-color-white);
+    --wr-alert-close: var(--wr-color-white);
+  }
 }

package/avatar/styles/_index.scss

@@ -6,7 +6,7 @@
   // treatment.
   --wr-avatar-radius: 10%;
   --wr-avatar-img-opacity: 0;
-  --wr-avatar-ring: rgba(var(--wr-color-light-rgb), 0.5);
+  --wr-avatar-ring: var(--wr-color-border);
 
   display: inline-flex;
   align-items: center;
@@ -49,7 +49,7 @@
 
   &__spin {
     position: absolute;
-    color: rgba(var(--wr-color-medium-rgb), 0.6);
+    color: var(--wr-color-text-faint);
     --wr-spinner-size: 40%;
   }
 }

package/badge/styles/_index.scss

@@ -9,19 +9,23 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  min-height: var(--wr-badge-min-height);
   padding: var(--wr-badge-padding-y) var(--wr-badge-padding-x);
   border-radius: var(--wr-badge-radius);
   font-size: var(--wr-badge-font-size);
   font-weight: var(--wr-badge-font-weight);
-  line-height: var(--wr-badge-line-height);
+  // line-height 1 + min-height: flex centres the tight glyph box vertically,
+  // instead of line-height baking in asymmetric leading (which left small
+  // sizes looking top-heavy).
+  line-height: 1;
   white-space: nowrap;
 
   // Defaults — sized modifiers override these
   --wr-badge-padding-y: 0.25rem;
   --wr-badge-padding-x: 0.5rem;
   --wr-badge-radius: var(--wr-border-radius-sm);
-  --wr-badge-font-size: 0.75rem;
-  --wr-badge-line-height: 1rem;
+  --wr-badge-font-size: var(--wr-text-xs);
+  --wr-badge-min-height: 1.5rem;
   --wr-badge-font-weight: 600;
 
   // Sizes
@@ -29,15 +33,15 @@
   &--sm {
     --wr-badge-padding-y: 0.125rem;
     --wr-badge-padding-x: 0.375rem;
-    --wr-badge-font-size: 0.625rem;
-    --wr-badge-line-height: 0.875rem;
+    --wr-badge-font-size: 0.625rem; // 10px — intentional micro-count, below --wr-text-xs
+    --wr-badge-min-height: 1.125rem;
   }
 
   &--lg {
     --wr-badge-padding-y: 0.375rem;
     --wr-badge-padding-x: 0.75rem;
-    --wr-badge-font-size: 0.875rem;
-    --wr-badge-line-height: 1.25rem;
+    --wr-badge-font-size: var(--wr-text-sm);
+    --wr-badge-min-height: 2rem;
   }
 
   // Shape — default `rounded` keeps the small radius from the defaults

package/badge/styles/_tag.scss

@@ -17,7 +17,7 @@
   --wr-tag-radius: var(--wr-border-radius-sm);
   --wr-tag-padding-y: 0.125rem;
   --wr-tag-padding-x: 0.5rem;
-  --wr-tag-font-size: 0.75rem;
+  --wr-tag-font-size: var(--wr-text-xs);
   --wr-tag-font-weight: 500;
   --wr-tag-line-height: 1rem;
 

package/bar-chart/styles/_index.scss

@@ -9,7 +9,6 @@
     display: flex;
     align-items: flex-end;
     gap: 0.5rem;
-    padding-bottom: 0.25rem;
     border-bottom: 1px solid var(--wr-color-light);
   }
 
@@ -33,7 +32,7 @@
 
   &__bar {
     width: 100%;
-    border-radius: var(--wr-border-radius-sm) var(--wr-border-radius-sm) 0 0;
+    border-radius: 2px 2px 0 0;
     transition: height var(--wr-duration-slow) var(--wr-ease-out);
     min-height: 1px;
   }

package/breadcrumbs/styles/_index.scss

@@ -2,6 +2,8 @@
 // (set by the component from the `[separator]` input). All items except
 // the first prepend the glyph via a `::before` pseudo-element.
 
+@use '../../theme/styles' as theme;
+
 .wr-breadcrumbs {
   --wr-breadcrumbs-separator: '/';
   --wr-breadcrumbs-gap: 0.5rem;
@@ -12,7 +14,7 @@
 
   display: block;
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
+  font-size: var(--wr-text-sm);
   color: var(--wr-breadcrumbs-color);
 
   &__nav {
@@ -56,7 +58,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--wr-color-primary);
+      @include theme.focus-ring;
       outline-offset: 2px;
     }
   }

package/burger/styles/_index.scss

@@ -38,11 +38,11 @@
     transition: background var(--wr-transition-base);
 
     &:hover {
-      background: rgba(var(--wr-color-light-rgb), 0.4);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
-      outline: 2px solid var(--wr-color-primary);
+      @include theme.focus-ring;
       outline-offset: 2px;
     }
 

package/button/styles/_index.scss

@@ -20,13 +20,13 @@
   --wr-btn-color: var(--wr-color-dark);
   --wr-btn-bg: var(--wr-color-white);
   --wr-btn-border: var(--wr-color-light);
-  --wr-btn-radius: var(--wr-border-radius-sm);
+  --wr-btn-radius: var(--wr-control-radius-md);
   --wr-btn-gap: 0.375rem;
-  --wr-btn-padding-y: 0.5rem;
-  --wr-btn-padding-x: 1rem;
-  --wr-btn-font-size: 0.875rem;
+  --wr-btn-padding-y: var(--wr-control-padding-y-md);
+  --wr-btn-padding-x: 0.875rem; // 14px — buttons sit a touch wider than input/select
+  --wr-btn-font-size: var(--wr-control-font-size-md);
   --wr-btn-font-weight: 500;
-  --wr-btn-line-height: 1.25rem;
+  --wr-btn-line-height: var(--wr-control-line-height-md);
   --wr-btn-icon-size: 1rem;
 
   color: var(--wr-btn-color);
@@ -41,7 +41,7 @@
   transition: var(--wr-transition-base);
 
   &:hover {
-    --wr-btn-bg: rgba(var(--wr-color-light-rgb), 0.4);
+    --wr-btn-bg: var(--wr-color-hover);
   }
 
   &:active {
@@ -74,24 +74,26 @@
     min-width: 0;
   }
 
-  // Sizes — consistent 28 / 36 / 44 px scale (each +8px tall).
-  // Padding, font, line-height, icon, and gap all step up together so
-  // the proportions stay visually identical between sizes.
+  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px) so button,
+  // input and select line up in a row. Buttons keep a slightly wider padding-x
+  // (12 / 14 / 18) than input/select; gap + icon step with the size.
   &--sm {
+    --wr-btn-radius: var(--wr-control-radius-sm);
     --wr-btn-gap: 0.25rem;
-    --wr-btn-padding-y: 0.375rem; // 6px
+    --wr-btn-padding-y: var(--wr-control-padding-y-sm);
     --wr-btn-padding-x: 0.75rem; // 12px
-    --wr-btn-font-size: 0.75rem; // 12px
-    --wr-btn-line-height: 1rem; // 16px
+    --wr-btn-font-size: var(--wr-control-font-size-sm);
+    --wr-btn-line-height: var(--wr-control-line-height-sm);
     --wr-btn-icon-size: 0.875rem; // 14px
   }
 
   &--lg {
+    --wr-btn-radius: var(--wr-control-radius-lg);
     --wr-btn-gap: 0.5rem;
-    --wr-btn-padding-y: 0.625rem; // 10px
-    --wr-btn-padding-x: 1.5rem; // 24px
-    --wr-btn-font-size: 1rem; // 16px
-    --wr-btn-line-height: 1.5rem; // 24px
+    --wr-btn-padding-y: var(--wr-control-padding-y-lg);
+    --wr-btn-padding-x: 1.125rem; // 18px
+    --wr-btn-font-size: var(--wr-control-font-size-lg);
+    --wr-btn-line-height: var(--wr-control-line-height-lg);
     --wr-btn-icon-size: 1.125rem; // 18px
   }
 
@@ -200,11 +202,19 @@
   }
 
   // Solid colored segments share border and background color, so adjacent
-  // buttons fuse into one slab — draw a subtle divider on every inner
-  // edge. Outlined/default variants keep their own visible borders.
+  // buttons fuse into one slab — draw a subtle divider on the right edge of
+  // every non-last segment. Outlined/default variants keep their own visible
+  // borders. On hover/focus the segment raises its own border (z-index above
+  // neighbours), which would otherwise double-paint that edge — so drop the
+  // seam there and let the raised border own it cleanly.
   @each $name in theme.$colors {
-    > .wr-btn--#{$name}:not(.wr-btn--outlined):not(:first-child) {
-      box-shadow: inset 1px 0 0 rgb(0 0 0 / 20%);
+    > .wr-btn--#{$name}:not(.wr-btn--outlined):not(:last-child) {
+      box-shadow: inset -1px 0 0 rgba(var(--wr-color-black-rgb), 0.2);
+
+      &:hover,
+      &:focus-visible {
+        box-shadow: none;
+      }
     }
   }
 }

package/calendar/styles/_index.scss

@@ -42,7 +42,7 @@
     color: inherit;
     text-align: center;
     font-family: inherit;
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     line-height: 1.5rem;
     border-radius: var(--wr-calendar-day-radius);
@@ -52,7 +52,7 @@
       color var(--wr-transition-base);
 
     &:hover:not(:disabled) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
@@ -67,13 +67,15 @@
 
   &__nav {
     appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     background: transparent;
     border: 0;
     width: 1.75rem;
     height: 1.75rem;
     border-radius: var(--wr-calendar-day-radius);
     color: var(--wr-calendar-muted);
-    font-size: 1.125rem;
     line-height: 1;
     cursor: pointer;
     transition:
@@ -82,7 +84,7 @@
 
     &:hover:not(:disabled) {
       color: var(--wr-calendar-color);
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
@@ -106,7 +108,7 @@
   &__weekday {
     text-align: center;
     color: var(--wr-calendar-muted);
-    font-size: 0.6875rem;
+    font-size: var(--wr-text-xs);
     font-weight: 600;
     line-height: 1.5rem;
     text-transform: uppercase;
@@ -134,7 +136,7 @@
     margin: 0;
     height: var(--wr-calendar-cell-size);
     font-family: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: var(--wr-calendar-cell-size);
     color: var(--wr-calendar-color);
     border-radius: var(--wr-calendar-day-radius);
@@ -144,7 +146,7 @@
       color var(--wr-transition-base);
 
     &:hover:not(:disabled):not(.wr-calendar__day--selected) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
@@ -208,7 +210,7 @@
     margin: 0;
     height: 2.5rem;
     font-family: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 2.5rem;
     color: var(--wr-calendar-color);
     border-radius: var(--wr-calendar-day-radius);
@@ -218,7 +220,7 @@
       color var(--wr-transition-base);
 
     &:hover:not(:disabled):not(.wr-calendar__chip--selected) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {

package/calendar-heatmap/styles/_index.scss

@@ -59,6 +59,8 @@
   &__cell {
     width: var(--wr-heatmap-cell-size);
     height: var(--wr-heatmap-cell-size);
+    // 2px — intentional micro-radius for the tiny (~11px) cells; the control /
+    // border-radius tokens (5px+) would read as near-circles at this size.
     border-radius: 2px;
     transition: transform var(--wr-transition-base);
 

package/card/styles/_index.scss

@@ -75,7 +75,7 @@
     align-items: center;
     justify-content: center;
     @include theme.smooth-br(var(--wr-card-radius));
-    background: rgb(255 255 255 / 50%);
+    background: rgba(var(--wr-color-white-rgb), 0.5);
     pointer-events: none;
   }
 

package/carousel/styles/_index.scss

@@ -88,7 +88,7 @@
     border: 0;
     border-radius: 50%;
     background: rgba(var(--wr-color-white-rgb), 0.55);
-    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);
     cursor: pointer;
     transition:
       width var(--wr-transition-base),

package/cascader/styles/_index.scss

@@ -2,15 +2,17 @@
 // is a horizontal row of columns where each column lists the children
 // of the previously-active node. Picking a leaf commits the path.
 
+@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-radius: var(--wr-border-radius-base);
-  --wr-cascader-padding-y: 0.4375rem;
-  --wr-cascader-padding-x: 0.75rem;
-  --wr-cascader-font-size: 0.875rem;
-  --wr-cascader-line-height: 1.25rem;
+  --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);
+  --wr-cascader-font-size: var(--wr-control-font-size-md);
+  --wr-cascader-line-height: var(--wr-control-line-height-md);
   --wr-cascader-col-width: 12rem;
   --wr-cascader-max-height: 16rem;
 
@@ -22,6 +24,23 @@
     --wr-cascader-bg: rgba(var(--wr-color-light-rgb), 0.35);
   }
 
+  // Sizes — trigger on the control contract (sm 22 / md 30 / lg 36).
+  &--sm {
+    --wr-cascader-radius: var(--wr-control-radius-sm);
+    --wr-cascader-padding-y: var(--wr-control-padding-y-sm);
+    --wr-cascader-padding-x: var(--wr-control-padding-x-sm);
+    --wr-cascader-font-size: var(--wr-control-font-size-sm);
+    --wr-cascader-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-cascader-radius: var(--wr-control-radius-lg);
+    --wr-cascader-padding-y: var(--wr-control-padding-y-lg);
+    --wr-cascader-padding-x: var(--wr-control-padding-x-lg);
+    --wr-cascader-font-size: var(--wr-control-font-size-lg);
+    --wr-cascader-line-height: var(--wr-control-line-height-lg);
+  }
+
   &__trigger {
     display: inline-flex;
     align-items: center;
@@ -44,9 +63,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 {
@@ -68,7 +86,7 @@
   }
 
   &__placeholder {
-    color: rgba(var(--wr-color-medium-rgb), 0.85);
+    color: var(--wr-color-text-muted);
   }
 
   &__chevron {
@@ -108,44 +126,66 @@
 }
 
 .wr-cascader-panel {
+  // Option sizing — mirrored from the trigger size (panel is portaled, so it
+  // can't inherit the host size class). Default md.
+  --wr-cascader-opt-font: var(--wr-control-font-size-md);
+  --wr-cascader-opt-py: 0.5rem;
+
   display: flex;
   background: var(--wr-color-white);
   border: 1px solid var(--wr-color-light);
   border-radius: var(--wr-border-radius-base);
   box-shadow: var(--wr-shadow-overlay);
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
+  font-size: var(--wr-cascader-opt-font);
   overflow: hidden;
 
+  &--sm {
+    --wr-cascader-opt-font: var(--wr-control-font-size-sm);
+    --wr-cascader-opt-py: 0.375rem;
+  }
+
+  &--lg {
+    --wr-cascader-opt-font: var(--wr-control-font-size-lg);
+    --wr-cascader-opt-py: 0.625rem;
+  }
+
   .wr-cascader__col {
     list-style: none;
     margin: 0;
-    padding: 0.25rem 0;
+    // Inset padding so options read as rounded pills, matching the select panel.
+    padding: 0.25rem;
     width: var(--wr-cascader-col-width, 12rem);
     max-height: var(--wr-cascader-max-height, 16rem);
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
 
     + .wr-cascader__col {
       border-left: 1px solid var(--wr-color-light);
     }
   }
 
+  // Options mirror .wr-option (rounded pill, soft primary tint when active).
   .wr-cascader__opt {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
+    padding: var(--wr-cascader-opt-py) 0.625rem;
+    border-radius: var(--wr-border-radius-sm);
     color: var(--wr-color-dark);
     cursor: pointer;
-    transition: background 0.12s ease;
+    transition: background var(--wr-transition-short);
 
     &:hover {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &--active {
-      background: rgba(var(--wr-color-primary-rgb), 0.08);
+      background: var(--wr-color-primary-soft);
       color: var(--wr-color-primary);
+      font-weight: 500;
     }
 
     &--disabled {

package/checkbox/styles/_index.scss

@@ -1,8 +1,10 @@
 @use '../../theme/styles' as theme;
 
 .wr-checkbox {
-  --wr-checkbox-size: 1.125rem;
-  --wr-checkbox-radius: var(--wr-border-radius-sm);
+  --wr-checkbox-size: 1.125rem; // md box (18px)
+  --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-mark: transparent;
@@ -12,8 +14,8 @@
   vertical-align: middle;
   color: var(--wr-checkbox-color);
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: var(--wr-checkbox-font-size);
+  line-height: var(--wr-checkbox-line-height);
 
   &__label {
     display: inline-flex;
@@ -76,6 +78,21 @@
     --wr-checkbox-border: var(--wr-color-primary);
   }
 
+  // Sizes — box, radius, label font + line-height scale together.
+  &--sm {
+    --wr-checkbox-size: 1rem; // 16px
+    --wr-checkbox-radius: var(--wr-control-radius-sm);
+    --wr-checkbox-font-size: var(--wr-text-xs);
+    --wr-checkbox-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-checkbox-size: 1.25rem; // 20px
+    --wr-checkbox-radius: var(--wr-control-radius-lg);
+    --wr-checkbox-font-size: var(--wr-text-base);
+    --wr-checkbox-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--checked {
     --wr-checkbox-bg: var(--wr-color-primary);
     --wr-checkbox-border: var(--wr-color-primary);