ngwr 7.3.0 → 8.0.0

package/textarea/styles/_index.scss

@@ -9,11 +9,11 @@
   --wr-textarea-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
   --wr-textarea-bg: var(--wr-color-white);
   --wr-textarea-border: var(--wr-color-light);
-  --wr-textarea-radius: var(--wr-border-radius-base);
+  --wr-textarea-radius: var(--wr-control-radius-md);
   --wr-textarea-ring: transparent;
   --wr-textarea-padding-y: 0.5rem;
-  --wr-textarea-padding-x: 0.75rem;
-  --wr-textarea-font-size: 0.875rem;
+  --wr-textarea-padding-x: var(--wr-control-padding-x-md);
+  --wr-textarea-font-size: var(--wr-text-sm);
   --wr-textarea-line-height: 1.375rem;
 
   background: var(--wr-textarea-bg);
@@ -37,6 +37,29 @@
     cursor: not-allowed;
   }
 
+  // Horizontal resize needs a shrinkable, explicit-width box (not full-width block).
+  &--resize-x {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  // Sizes — radius, padding, font + line-height scale; height stays content-driven.
+  &--sm {
+    --wr-textarea-radius: var(--wr-control-radius-sm);
+    --wr-textarea-padding-y: 0.375rem;
+    --wr-textarea-padding-x: var(--wr-control-padding-x-sm);
+    --wr-textarea-font-size: var(--wr-text-xs);
+    --wr-textarea-line-height: 1.125rem;
+  }
+
+  &--lg {
+    --wr-textarea-radius: var(--wr-control-radius-lg);
+    --wr-textarea-padding-y: 0.625rem;
+    --wr-textarea-padding-x: var(--wr-control-padding-x-lg);
+    --wr-textarea-font-size: var(--wr-text-base);
+    --wr-textarea-line-height: 1.625rem;
+  }
+
   &--no-resize &__native {
     resize: none;
   }
@@ -55,7 +78,8 @@
     line-height: var(--wr-textarea-line-height);
     padding: calc(var(--wr-textarea-padding-y) * var(--wr-density-y, 1))
       calc(var(--wr-textarea-padding-x) * var(--wr-density-x, 1));
-    resize: vertical;
+    // Native grip removed — we draw our own corner grip (&__resize) instead.
+    resize: none;
 
     &::placeholder {
       color: var(--wr-textarea-placeholder);
@@ -65,4 +89,35 @@
       cursor: not-allowed;
     }
   }
+
+  // Corner resize grip — icon (move-vertical / -horizontal / -diagonal-2) and
+  // cursor follow the `resize` direction.
+  &__resize {
+    position: absolute;
+    right: 0.25rem;
+    bottom: 0.25rem;
+    display: inline-flex;
+    color: var(--wr-color-text-faint);
+    touch-action: none;
+    transition: color var(--wr-transition-base);
+
+    &--vertical {
+      cursor: ns-resize;
+    }
+    &--horizontal {
+      cursor: ew-resize;
+    }
+    &--both {
+      cursor: nwse-resize;
+    }
+
+    .wr-icon__svg {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+
+    &:hover {
+      color: var(--wr-color-medium);
+    }
+  }
 }

package/theme/styles/_colors.scss

@@ -15,6 +15,7 @@ $base-colors: (
   success: #00a400,
   warning: #ffba00,
   danger: #fa383e,
+  info: #3b82f6,
   light: #cbd5e1,
   medium: #8594a4,
   dark: #0f172a,
@@ -65,6 +66,48 @@ $contrast-light: #ffffff !default;
   // and turns the backdrop into a white wash.
   --wr-color-backdrop-rgb: 0, 0, 0;
 
+  // Generic subtle hover-surface tint (icon buttons, list rows) — one place
+  // so the hover strength stays consistent everywhere.
+  --wr-color-hover: rgba(var(--wr-color-light-rgb), 0.4);
+
+  // Border / divider strengths — translucent so they read on any surface and
+  // auto-adapt in dark (via the flipping `light` channels). One place each.
+  --wr-color-border: rgba(var(--wr-color-light-rgb), 0.5);
+  --wr-color-border-subtle: rgba(var(--wr-color-light-rgb), 0.35);
+  --wr-color-border-strong: rgba(var(--wr-color-light-rgb), 0.6);
+
+  // Scrim behind modals / drawers — always black so the dim reads as "covered"
+  // regardless of theme.
+  --wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), 0.45);
+
+  // De-emphasized text — `medium` dimmed to two canonical strengths so muted
+  // labels / captions / placeholders read consistently. One place each.
+  --wr-color-text-muted: rgba(var(--wr-color-medium-rgb), 0.85);
+  --wr-color-text-faint: rgba(var(--wr-color-medium-rgb), 0.6);
+
+  // Neutral gray ramp — a FIXED primitive scale (slate). Each step is a stable
+  // job (50 = subtlest surface tint … 950 = strongest ink) and, unlike the
+  // semantic neutrals, does NOT flip in dark mode. For theme-aware surface /
+  // text jobs reach for the role aliases below instead.
+  --wr-color-gray-50: #f8fafc;
+  --wr-color-gray-100: #f1f5f9;
+  --wr-color-gray-200: #e2e8f0;
+  --wr-color-gray-300: #cbd5e1;
+  --wr-color-gray-400: #94a3b8;
+  --wr-color-gray-500: #64748b;
+  --wr-color-gray-600: #475569;
+  --wr-color-gray-700: #334155;
+  --wr-color-gray-800: #1e293b;
+  --wr-color-gray-900: #0f172a;
+  --wr-color-gray-950: #020617;
+
+  // Semantic role aliases over the flipping neutrals — prefer these in new code
+  // for intent-free surface / text jobs. They resolve through `white` / `dark`
+  // / `medium`, so they flip with the theme automatically.
+  --wr-color-surface: var(--wr-color-white);
+  --wr-color-on-surface: var(--wr-color-dark);
+  --wr-color-on-surface-muted: var(--wr-color-medium);
+
   @each $name, $base in $base-colors {
     --wr-color-#{$name}: #{$base};
     --wr-color-#{$name}-rgb: #{_rgb-channels($base)};
@@ -74,6 +117,20 @@ $contrast-light: #ffffff !default;
     --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
     --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
   }
+
+  // Soft trio per intent (+ `medium` for neutral surfaces) — tokenizes the
+  // ad-hoc `rgba(var(--*-rgb), α)` fills components hand-rolled at ~8
+  // different alphas, so each alpha lives in ONE place. `-soft` is the
+  // canonical low-alpha fill, `-soft-border` the matching hairline, and
+  // `-soft-contrast` the readable same-hue text on it (deep in light,
+  // light in dark — follows `--wr-color-dark`). All theme-correct over any
+  // background via the -rgb channels.
+  @each $name in (primary, secondary, success, warning, danger, info, medium) {
+    --wr-color-#{$name}-soft: rgba(var(--wr-color-#{$name}-rgb), 0.12);
+    --wr-color-#{$name}-soft-border: rgba(var(--wr-color-#{$name}-rgb), 0.3);
+    --wr-color-#{$name}-soft-contrast: color-mix(in srgb, var(--wr-color-#{$name}) 62%, var(--wr-color-dark));
+    --wr-color-#{$name}-active: rgba(var(--wr-color-#{$name}-rgb), 0.2);
+  }
 }
 
 // Public SCSS list

package/theme/styles/_dark.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Dark theme overrides — opt-in via `[data-theme="dark"]` on <html>.
 // Drive the toggle from `WrTheme` (provided automatically with
 // `provideWrTheme(...)`).
@@ -5,6 +7,16 @@
 // Only semantic tokens flip — palette hues stay so brand-coloured
 // elements look the same regardless of theme.
 
+// Intents re-tuned for the dark canvas. Looped (below) so each gets the
+// FULL symmetric shade set — the hand blocks used to ship only base+rgb,
+// leaving -light/-dark/-lighter/-darker baked from the LIGHT palette.
+// (primary keeps its hand-tuned block; info stays its light values.)
+$dark-intents: (
+  success: #34c759,
+  warning: #ffcc33,
+  danger: #ff5c5c,
+);
+
 [data-theme='dark'] {
   // Canvas (was `--wr-color-white` in light mode)
   // Deeper than slate-900 so an elevated surface in slate-800 reads
@@ -63,14 +75,16 @@
   --wr-color-primary-lighter: #99b6ff;
   --wr-color-primary-darker: #1f3a99;
 
-  --wr-color-success: #34c759;
-  --wr-color-success-rgb: 52, 199, 89;
-
-  --wr-color-warning: #ffcc33;
-  --wr-color-warning-rgb: 255, 204, 51;
-
-  --wr-color-danger: #ff5c5c;
-  --wr-color-danger-rgb: 255, 92, 92;
+  // success / warning / danger — retuned bases now get the FULL symmetric
+  // shade set in dark too (generated, so no intent can silently drift).
+  @each $name, $base in $dark-intents {
+    --wr-color-#{$name}: #{$base};
+    --wr-color-#{$name}-rgb: #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')};
+    --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
+    --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
+    --wr-color-#{$name}-dark: #{color.adjust($base, $lightness: -5%)};
+    --wr-color-#{$name}-darker: #{color.adjust($base, $lightness: -10%)};
+  }
 
   // Elevation
   // Black shadows at light-mode alphas vanish on the deep canvas; same

package/theme/styles/_focus.scss

@@ -91,3 +91,8 @@
 .wr-dropdown-item:focus-visible {
   @include focus-ring;
 }
+
+// Alert close
+.wr-alert__close:focus-visible {
+  @include focus-ring;
+}

package/theme/styles/_variables.scss

@@ -10,6 +10,30 @@
   --wr-border-radius-lg: 1rem;
   --wr-border-radius-pill: 50rem;
 
+  // Control sizing
+  //
+  // The shared contract every form control reads (button, input, select, …)
+  // so they line up pixel-for-pixel at each size. Height is NOT fixed — it's
+  // the sum of `line-height + 2×padding-y + 2×border(1px)`, so padding-y can
+  // stay density-aware (`* var(--wr-density-y)`) and controls track density
+  // together. Keep the three parts in sync if you retune a size.
+  //   sm → 22px · md → 30px · lg → 36px   (radius 5 / 6 / 7)
+  --wr-control-padding-y-sm: 0.125rem; // 2px  → 16 + 4 + 2 = 22
+  --wr-control-padding-y-md: 0.25rem; // 4px  → 20 + 8 + 2 = 30
+  --wr-control-padding-y-lg: 0.3125rem; // 5px  → 24 + 10 + 2 = 36
+  --wr-control-padding-x-sm: 0.5rem; // 8px
+  --wr-control-padding-x-md: 0.75rem; // 12px
+  --wr-control-padding-x-lg: 1rem; // 16px
+  --wr-control-line-height-sm: 1rem; // 16px
+  --wr-control-line-height-md: 1.25rem; // 20px
+  --wr-control-line-height-lg: 1.5rem; // 24px
+  --wr-control-font-size-sm: var(--wr-text-xs); // 12px
+  --wr-control-font-size-md: var(--wr-text-sm); // 14px
+  --wr-control-font-size-lg: var(--wr-text-base); // 16px
+  --wr-control-radius-sm: 5px;
+  --wr-control-radius-md: 6px;
+  --wr-control-radius-lg: 7px;
+
   // Easing curves
   --wr-ease-linear: linear;
   --wr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

package/timeline/styles/_index.scss

@@ -101,19 +101,28 @@
 
   // Horizontal: row layout with line through dots.
   .wr-timeline--horizontal & {
+    // Equal-width columns so every dot sits at the same horizontal pitch
+    // and the connectors line up across items.
+    flex: 1 1 0;
     flex-direction: column;
     align-items: center;
     text-align: center;
     min-width: 8rem;
+    padding-bottom: 0;
 
+    // Connector runs from this dot's centre to the next dot's centre:
+    // half of this item + the 2rem gap + half of the next item. With equal
+    // widths that is `100% of the item + the gap`, anchored at the centre.
     &::before {
       content: '';
       position: absolute;
-      top: 0.625rem;
+      // Dot centre: margin-top 0.125rem + half of the 0.75rem dot = 0.5rem.
+      top: 0.5rem;
       left: 50%;
-      right: -2rem;
+      width: calc(100% + 2rem);
       height: 1.5px;
       background: var(--wr-color-light);
+      z-index: 0;
     }
 
     &:last-child::before {

package/toast/styles/_index.scss

@@ -33,6 +33,14 @@ $toast-colors: (
     pointer-events: auto;
   }
 
+  // While expanded the toasts spread into a column with gaps. Those gaps are
+  // dead space under `pointer-events: none`, so the cursor crossing them fires
+  // mouseleave/mouseenter and toggles `expanded` (jitter). Make the whole host
+  // hit-testable while expanded so the inter-toast gaps stay "inside" it.
+  &--expanded {
+    pointer-events: auto;
+  }
+
   // Sonner-style stack
   // Collapsed: every toast except the front one collapses behind it with a
   // scale-down + tiny offset. Hovering the host expands them into the
@@ -147,7 +155,7 @@ $toast-colors: (
   &__title {
     margin: 0 0 0.125rem;
     color: var(--wr-toast-title);
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     line-height: 1.25rem;
   }
@@ -155,7 +163,7 @@ $toast-colors: (
   &__message {
     margin: 0;
     color: var(--wr-toast-message);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.125rem;
     overflow-wrap: break-word;
   }
@@ -183,7 +191,7 @@ $toast-colors: (
 
     &:hover {
       color: var(--wr-color-dark);
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
   }
 
@@ -243,12 +251,12 @@ $toast-colors: (
   padding: 0.375rem 0.75rem;
   color: var(--wr-color-medium);
   font-family: var(--wr-font-family-base);
-  font-size: 0.75rem;
+  font-size: var(--wr-text-xs);
   font-weight: 500;
   line-height: 1rem;
   text-align: center;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--wr-shadow-xs);
   transition:
     color var(--wr-transition-base),
     background var(--wr-transition-base),

package/toolbar/styles/_index.scss

@@ -16,7 +16,7 @@
   background: var(--wr-color-white);
   border: 1px solid var(--wr-color-light);
   @include theme.smooth-br(var(--wr-border-radius-base));
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
+  box-shadow: var(--wr-shadow-xs);
   font-family: var(--wr-font-family-base);
   color: var(--wr-color-dark);
 

package/tree/styles/_index.scss

@@ -5,7 +5,7 @@
 
   display: block;
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
+  font-size: var(--wr-text-sm);
   color: var(--wr-color-dark);
 
   &__list {
@@ -29,19 +29,18 @@
       color var(--wr-transition-base);
 
     &:hover:not(.wr-tree__row--disabled) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      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);
     }
 
     // Visible ring only when the row truly has keyboard focus — not
     // just because it's the roving-tabindex cursor row.
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.25);
+      @include theme.focus-ring;
     }
 
     &--disabled {
@@ -100,11 +99,13 @@
     --wr-tree-trigger-color: var(--wr-color-dark);
     --wr-tree-trigger-bg: var(--wr-color-white);
     --wr-tree-trigger-border: var(--wr-color-light);
-    --wr-tree-trigger-radius: var(--wr-border-radius-base);
-    --wr-tree-trigger-padding-y: 0.4375rem;
-    --wr-tree-trigger-padding-x: 0.75rem;
-    --wr-tree-trigger-font-size: 0.875rem;
-    --wr-tree-trigger-line-height: 1.25rem;
+    // Combobox trigger on the md control contract (30px, radius 6) so it lines
+    // up with select / input / button when used as a tree-select.
+    --wr-tree-trigger-radius: var(--wr-control-radius-md);
+    --wr-tree-trigger-padding-y: var(--wr-control-padding-y-md);
+    --wr-tree-trigger-padding-x: var(--wr-control-padding-x-md);
+    --wr-tree-trigger-font-size: var(--wr-control-font-size-md);
+    --wr-tree-trigger-line-height: var(--wr-control-line-height-md);
     --wr-tree-panel-max-height: 18rem;
 
     display: inline-flex;
@@ -138,9 +139,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 {
@@ -162,7 +162,7 @@
   }
 
   &__placeholder {
-    color: rgba(var(--wr-color-medium-rgb), 0.85);
+    color: var(--wr-color-text-muted);
   }
 
   &__chevron {
@@ -202,7 +202,8 @@
     flex-wrap: wrap;
     align-items: center;
     padding: 0.25rem 0.5rem;
-    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2);
+    // Empty / one-row floor = single-mode height (+2px for the border).
+    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2 + 2px);
   }
 
   &__chips {
@@ -221,9 +222,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;
   }
@@ -246,7 +247,7 @@
     transition: background 0.12s ease;
 
     &:hover {
-      background: rgba(var(--wr-color-primary-rgb), 0.2);
+      background: var(--wr-color-primary-active);
     }
   }
 

package/types/ngwr-alert.d.ts

@@ -9,7 +9,7 @@ import * as _angular_core from '@angular/core';
 /**
  * Visual variant of the alert.
  */
-type WrAlertType = 'info' | 'success' | 'warning' | 'danger';
+type WrAlertType = 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'offline';
 
 /**
  * Inline status banner. Use for feedback messages — saved/failed/notice etc.
@@ -23,14 +23,24 @@ type WrAlertType = 'info' | 'success' | 'warning' | 'danger';
  * @see https://ngwr.dev/components/alert
  */
 declare class WrAlert {
-    /** Required headline shown at the top of the alert. */
-    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Optional headline shown at the top of the alert.
+     *
+     * @default null
+     */
+    readonly title: _angular_core.InputSignal<string | null>;
     /**
      * Visual variant.
      *
      * @default 'info'
      */
     readonly type: _angular_core.InputSignal<WrAlertType>;
+    /**
+     * Override the default per-type icon with any ngwr icon name.
+     *
+     * @default null
+     */
+    readonly iconName: _angular_core.InputSignal<string | null>;
     /**
      * Optional secondary message rendered below the title.
      *
@@ -38,8 +48,8 @@ declare class WrAlert {
      */
     readonly message: _angular_core.InputSignal<string | null>;
     /**
-     * When `true`, renders a leading status icon matching the `type`
-     * (info / success / warning / danger). Pass `false` to hide.
+     * When `true`, renders a leading status icon matching the `type`.
+     * Pass `false` to hide. Ignored when `iconName` is set.
      *
      * @default true
      */
@@ -61,7 +71,7 @@ declare class WrAlert {
     protected readonly liveLevel: _angular_core.Signal<"assertive" | "polite" | null>;
     protected onClose(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAlert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
 }
 
 export { WrAlert };

package/types/ngwr-cascader.d.ts

@@ -43,6 +43,7 @@ interface WrCascaderOption<T = string> {
  *
  * @see https://ngwr.dev/components/cascader
  */
+type WrCascaderSize = 'sm' | 'md' | 'lg';
 declare class WrCascader<T = string> implements ControlValueAccessor {
     /** Root-level options. Each may have `children` for deeper levels. */
     readonly options: _angular_core.InputSignal<readonly WrCascaderOption<T>[]>;
@@ -50,6 +51,8 @@ declare class WrCascader<T = string> implements ControlValueAccessor {
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Disable the cascader. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrCascaderSize>;
     /** Show a clear-all (×) button on the trigger when a path is selected. @default true */
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -100,8 +103,8 @@ declare class WrCascader<T = string> implements ControlValueAccessor {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCascader<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCascader<any>, "wr-cascader", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "changeOnSelect": { "alias": "changeOnSelect"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCascader<any>, "wr-cascader", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "changeOnSelect": { "alias": "changeOnSelect"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrCascader };
-export type { WrCascaderOption };
+export type { WrCascaderOption, WrCascaderSize };

package/types/ngwr-checkbox.d.ts

@@ -25,6 +25,7 @@ import { ControlValueAccessor } from '@angular/forms';
  *
  * @see https://ngwr.dev/components/checkbox
  */
+type WrCheckboxSize = 'sm' | 'md' | 'lg';
 declare class WrCheckbox implements ControlValueAccessor {
     /**
      * Stable id used to associate the native input with its label.
@@ -43,6 +44,8 @@ declare class WrCheckbox implements ControlValueAccessor {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrCheckboxSize>;
     /**
      * Optional icon name rendered inside the box when checked, in place of the
      * default checkmark. Use any registered NGWR icon.
@@ -65,7 +68,7 @@ declare class WrCheckbox implements ControlValueAccessor {
     protected onInputChange(event: Event): void;
     protected onInputBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -136,4 +139,4 @@ declare class WrCheckboxGroup implements ControlValueAccessor, WrCheckboxGroupCo
 }
 
 export { WR_CHECKBOX_GROUP, WrCheckbox, WrCheckboxGroup };
-export type { WrCheckboxGroupContext };
+export type { WrCheckboxGroupContext, WrCheckboxSize };

package/types/ngwr-click-spark.d.ts

@@ -19,7 +19,12 @@ type WrClickSparkEasing = 'linear' | 'ease-in' | 'ease-in-out' | 'ease-out';
  * @see https://www.reactbits.dev/animations/click-spark
  */
 declare class WrClickSpark {
-    /** Spark line colour. @default '#fff' */
+    /**
+     * Spark line colour. Accepts any CSS colour, or a `var(--wr-…)` token which is
+     * resolved against the host so it tracks the theme. The default flips with the
+     * theme — dark sparks in light mode, light sparks in dark.
+     * @default 'var(--wr-color-dark)'
+     */
     readonly sparkColor: _angular_core.InputSignal<string>;
     /** Length of each spark line in pixels (at t=0; tapers to 0 at t=1). @default 10 */
     readonly sparkSize: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -41,6 +46,13 @@ declare class WrClickSpark {
     private sparks;
     constructor();
     protected onClick(event: MouseEvent): void;
+    /**
+     * Canvas `strokeStyle` can't read CSS custom properties, so a `var(--wr-…)`
+     * token is resolved against the host's computed style here. Plain colours
+     * pass through untouched. Falls back to a dark literal if the custom
+     * property resolves to nothing.
+     */
+    private resolveColor;
     private syncCanvasSize;
     private watchResize;
     private startLoop;

package/types/ngwr-clipboard.d.ts

@@ -41,7 +41,18 @@ declare class WrClipboard {
      * when the user denied the permission prompt.
      */
     read(): Promise<string | null>;
-    /** Probe the Permissions API for `clipboard-read` / `clipboard-write`. */
+    /**
+     * Report whether clipboard read / write is available and, when the
+     * browser exposes it, what the user has granted.
+     *
+     * The answer is grounded in the actual Clipboard API capability
+     * (`writeText` / `readText`), then refined by the Permissions API when
+     * it can speak for the requested name. `clipboard-read` / `clipboard-write`
+     * are not recognised everywhere — Firefox and Safari throw on the query —
+     * so a missing or throwing Permissions API is treated as "supported,
+     * will resolve at use time" (`'prompt'`), not `'unsupported'`. We only
+     * return `'unsupported'` when the capability genuinely isn't there.
+     */
     permission(name: 'read' | 'write'): Promise<WrClipboardPermission>;
     /** Hidden-textarea + `execCommand('copy')` write. Synchronous, no permissions. */
     private legacyWrite;