ngwr 9.0.1 → 10.0.0

package/table/styles/_index.scss

@@ -1,12 +1,27 @@
 @use '../../theme/styles' as theme;
 
 .wr-table {
+  --wr-table-bg: var(--wr-color-surface);
   --wr-table-border: var(--wr-color-outline);
   --wr-table-head-bg: rgba(var(--wr-color-outline-rgb), 0.25);
   --wr-table-row-hover: rgba(var(--wr-color-outline-rgb), 0.15);
+  // Head casing. The library renders column titles as the author wrote them —
+  // forcing `uppercase` mutates their content, and a header written "ID" or
+  // "created at" is the consumer's decision to make, not ours. Both halves stay
+  // tokens, so opting back into the old treatment is one rule:
+  //   .wr-table { --wr-table-head-transform: uppercase;
+  //               --wr-table-head-letter-spacing: 0.04em; }
+  // The tracking moves with the casing on purpose — 0.04em is there to open up
+  // capitals and looks wrong on sentence case.
+  --wr-table-head-transform: none;
+  --wr-table-head-letter-spacing: var(--wr-tracking-normal);
 
   display: block;
   position: relative;
+  // The table paints its own surface. Sticky pinned cells already fill with
+  // --wr-color-surface, so leaving the table transparent let a page background
+  // show through the normal rows while the pinned ones stayed opaque.
+  background: var(--wr-table-bg);
   // Own stacking context so the loading overlay reliably outranks the sticky
   // pinned cells regardless of the surrounding page z-index.
   isolation: isolate;
@@ -50,8 +65,8 @@
     color: var(--wr-color-on-surface-muted);
     font-weight: 600;
     font-size: var(--wr-text-xs);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
+    letter-spacing: var(--wr-table-head-letter-spacing);
+    text-transform: var(--wr-table-head-transform);
     white-space: nowrap;
   }
 
@@ -203,7 +218,7 @@
   // Pinned footer cells need an opaque base (over the head tint) to stay sticky.
   &__foot-cell#{&}__td--pin-left,
   &__foot-cell#{&}__td--pin-right {
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
   }
 
@@ -221,14 +236,14 @@
   &__td--pin-left,
   &__td--pin-right {
     z-index: 1;
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
   }
 
   // Header cells lay the head tint over the opaque base so the row stays seamless.
   &__th--pin-left,
   &__th--pin-right {
     z-index: 2;
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
   }
 
@@ -392,7 +407,7 @@
   &__group-foot-row > &__foot-cell {
     border-top: 0;
     border-bottom: 1px solid var(--wr-table-border);
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-group-bg), var(--wr-table-group-bg));
   }
 
@@ -424,7 +439,7 @@
   }
 
   thead th:not(.wr-table__th--pin-left):not(.wr-table__th--pin-right) {
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
   }
 
@@ -456,7 +471,7 @@
   }
 
   tfoot .wr-table__foot-cell:not(.wr-table__td--pin-left):not(.wr-table__td--pin-right) {
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
   }
 
@@ -518,8 +533,11 @@
     color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
+    // Route through the same tokens as `&__th` instead of re-hard-coding the
+    // treatment — card mode used to ignore `--wr-table-head-transform` entirely,
+    // so a consumer who opted out still got capitals on mobile.
+    letter-spacing: var(--wr-table-head-letter-spacing);
+    text-transform: var(--wr-table-head-transform);
     text-align: left;
     white-space: nowrap;
   }

package/theme/styles/_box-model.scss

@@ -0,0 +1,29 @@
+// Box model baseline for ngwr's own elements.
+//
+// `ngwr/reset` (which does set `box-sizing: border-box` globally) is opt-in by
+// design, and the umbrella `@use 'ngwr'` deliberately leaves it out — so a
+// consumer following the documented "import once, everything works" path lands
+// in a `content-box` world. Components can't assume otherwise, and several of
+// them did: any `.wr-*` element that pairs `width: 100%` with padding or a
+// border overflowed its container by exactly padding + border. Measured in a
+// stock Angular app on `@use 'ngwr'`:
+//
+//   .wr-btn--block                → 30px over (14+14 padding, 1+1 border)
+//   .wr-input (sm / md / lg)      → 18 / 26 / 34px over
+//   .wr-textarea__native          → 16 / 24 / 32px over
+//   .wr-input-group               → 2px over (border only)
+//
+// Which is where the stray horizontal scrollbars came from.
+//
+// Scoped to the `wr-` namespace so it can never change the box model of
+// consumer markup — that stays their call, via `ngwr/reset` or their own reset.
+//
+// `:where()` contributes zero specificity on purpose: this is a baseline, not an
+// override. `.wr-icon` and `.wr-spinner` declare `content-box` deliberately (the
+// declared size IS the glyph box) and keep winning without needing `!important`
+// or a particular load order.
+:where([class^='wr-'], [class*=' wr-']),
+:where([class^='wr-'], [class*=' wr-'])::before,
+:where([class^='wr-'], [class*=' wr-'])::after {
+  box-sizing: border-box;
+}

package/theme/styles/_colors.scss

@@ -21,11 +21,10 @@ $base-colors: (
   dark: #0f172a,
 ) !default;
 
-// YIQ luminosity threshold (0–255) above which a color is treated as
-// "light" and pairs with dark text. Uses the classic Bootstrap formula —
-// it weights the green channel higher than blue, which matches human
-// perception of brightness far better than HSL lightness (HSL classes
-// pure blue as 50%-lightness even though it reads as dark).
+// Deprecated: the old YIQ brightness cut-off. No longer read — `_contrast()`
+// compares real WCAG contrast ratios, which needs no threshold. Kept declared
+// so `@use 'ngwr/theme' with ($contrast-threshold: …)` in an existing app still
+// compiles instead of erroring on an unknown variable.
 $contrast-threshold: 150 !default;
 
 // Dark text used on light backgrounds.
@@ -40,20 +39,69 @@ $contrast-light: #ffffff !default;
   @return color.channel($c, 'red'), color.channel($c, 'green'), color.channel($c, 'blue');
 }
 
+/** One channel, linearised per WCAG 2.x. */
+@function _linear($channel) {
+  $s: math.div($channel, 255);
+  @if $s <= 0.03928 {
+    @return math.div($s, 12.92);
+  }
+  @return math.pow(math.div($s + 0.055, 1.055), 2.4);
+}
+
+/** WCAG relative luminance of a colour. */
+@function _luminance($c) {
+  @return 0.2126 * _linear(color.channel($c, 'red')) + 0.7152 * _linear(color.channel($c, 'green')) + 0.0722 *
+    _linear(color.channel($c, 'blue'));
+}
+
+/** WCAG contrast ratio between two colours. */
+@function _ratio($a, $b) {
+  $la: _luminance($a);
+  $lb: _luminance($b);
+  $hi: math.max($la, $lb);
+  $lo: math.min($la, $lb);
+  @return math.div($hi + 0.05, $lo + 0.05);
+}
+
+/**
+ * Foreground that actually reads best on `$c` — whichever of the two candidates
+ * wins on WCAG contrast ratio.
+ *
+ * Was a YIQ brightness threshold, which is a brightness *estimate*, not the
+ * metric accessibility is judged by, and it mispicked on every mid-saturation
+ * colour: five of the nine shipped intents got white text below AA
+ * (success 3.33:1, medium 3.10:1, danger and info 3.68:1, secondary 3.99:1)
+ * where dark text would have cleared it (5.43 / 5.82 / 4.90 / 4.91 / 4.52).
+ * Comparing the real ratios needs no threshold to tune.
+ */
 @function _contrast($c) {
-  $r: color.channel($c, 'red');
-  $g: color.channel($c, 'green');
-  $b: color.channel($c, 'blue');
-  $yiq: math.div($r * 299 + $g * 587 + $b * 114, 1000);
-  @if $yiq >= $contrast-threshold {
+  @if _ratio($c, $contrast-dark) >= _ratio($c, $contrast-light) {
     @return $contrast-dark;
   }
   @return $contrast-light;
 }
 
+/**
+ * Public alias of {@link _contrast}. Any theme partial that re-tunes an intent
+ * has to re-derive its `-contrast` token too, otherwise the token stays baked
+ * from the light palette — which is how the dark theme ended up putting white
+ * text on its lightened primary at 3.36:1.
+ */
+@function contrast($c) {
+  @return _contrast($c);
+}
+
 // CSS variables
 
 :root {
+  // Declared here so the light token set also claims the light UA scheme.
+  // Without it the browser fell back to the OS preference, and an app running
+  // ngwr's LIGHT theme on a dark-mode machine got dark scrollbars and dark
+  // native controls (<textarea>, date/colour inputs) against light surfaces.
+  // `_dark.scss` still flips it to `dark` under [data-theme='dark'], which wins
+  // on specificity.
+  color-scheme: light;
+
   --wr-color-white: #ffffff;
   --wr-color-white-rgb: 255, 255, 255;
   --wr-color-black: #000000;
@@ -80,10 +128,21 @@ $contrast-light: #ffffff !default;
   // 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
+  // Muted TEXT, deliberately its own token rather than an alias of the `medium`
+  // intent. The two roles pull in opposite directions and cannot share a value:
+  // as text it needs >= 4.5:1 against the lightest surface (#ebeff4), while as a
+  // button fill it carries dark text and needs >= 4.5:1 the other way. The best
+  // candidate for either fails the other — the window closes around #6b7a8a
+  // (3.81 as text, 4.11 as fill). Aliasing them left secondary text at 2.69:1.
+  --wr-color-muted-text: #5f6c7d;
+  --wr-color-muted-text-rgb: 95, 108, 125;
+
+  // De-emphasized text — the muted ink dimmed to two canonical strengths so
   // 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);
+  // Only the full-opacity token above is AA-safe for body text; these two are
+  // decorative by design (0.85 reaches ~3.5:1, 0.6 ~2.3:1 on a light surface).
+  --wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), 0.85);
+  --wr-color-text-faint: rgba(var(--wr-color-muted-text-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
@@ -121,8 +180,8 @@ $contrast-light: #ffffff !default;
   --wr-color-surface-rgb: var(--wr-color-white-rgb);
   --wr-color-on-surface: var(--wr-color-dark);
   --wr-color-on-surface-rgb: var(--wr-color-dark-rgb);
-  --wr-color-on-surface-muted: var(--wr-color-medium);
-  --wr-color-on-surface-muted-rgb: var(--wr-color-medium-rgb);
+  --wr-color-on-surface-muted: var(--wr-color-muted-text);
+  --wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);
 
   // Solid hairline / divider colour. Distinct from `--wr-color-border` above,
   // which is deliberately translucent (`light` at 50%) so it reads on any

package/theme/styles/_dark.scss

@@ -1,5 +1,7 @@
 @use 'sass:color';
 
+@use 'colors';
+
 // Dark theme overrides — opt-in via `[data-theme="dark"]` on <html>.
 // Drive the toggle from `WrTheme` (provided automatically with
 // `provideWrTheme(...)`).
@@ -17,6 +19,15 @@ $dark-intents: (
   danger: #ff5c5c,
 );
 
+// The surface / ink bases below are re-tuned for the dark canvas too, but they
+// live in hand-written blocks (each one documents a judgement call the loop
+// can't express). Holding the values in variables lets the `-rgb` triplets and
+// the shade derivations read from the value that actually ships, instead of
+// being re-typed next to it.
+$_light: #262f44;
+$_medium: #9aa6b8;
+$_dark: #e6ebf3;
+
 [data-theme='dark'] {
   // Canvas (was `--wr-color-white` in light mode)
   // Deeper than slate-900 so an elevated surface in slate-800 reads
@@ -26,8 +37,8 @@ $dark-intents: (
 
   // Text
   // Softer than pure-white — easier on the eyes for long reading.
-  --wr-color-dark: #e6ebf3;
-  --wr-color-dark-rgb: 230, 235, 243;
+  --wr-color-dark: #{$_dark};
+  --wr-color-dark-rgb: #{color.channel($_dark, 'red')}, #{color.channel($_dark, 'green')}, #{color.channel($_dark, 'blue')};
   // `*-contrast` values are baked at SCSS compile time from the light
   // palette, so they don't auto-flip when `--wr-color-dark` /
   // `--wr-color-white` are reassigned for dark mode. Tooltip-style
@@ -35,6 +46,14 @@ $dark-intents: (
   // white-on-white without this override; re-pair them by hand here.
   --wr-color-dark-contrast: #0b1120;
   --wr-color-white-contrast: #e6ebf3;
+  // Same story as the contrast pair: the shades were baked from the light
+  // palette's near-black ink, so `.wr-btn--dark:hover` painted itself almost
+  // black while keeping the near-black `-contrast` text. `dark` is an INK token,
+  // so unlike `light` below its shades mean exactly what they say.
+  --wr-color-dark-light: #{color.adjust($_dark, $lightness: 5%)};
+  --wr-color-dark-lighter: #{color.adjust($_dark, $lightness: 10%)};
+  --wr-color-dark-dark: #{color.adjust($_dark, $lightness: -5%)};
+  --wr-color-dark-darker: #{color.adjust($_dark, $lightness: -10%)};
 
   // Borders / tints (was `--wr-color-light`)
   // Used for two jobs at once: 1-px borders and translucent surface
@@ -43,8 +62,8 @@ $dark-intents: (
   // looks like glowing pencil lines). This value reads as a real
   // divider on cards / inputs without shouting — matches what Vercel
   // and shadcn ship for the same job.
-  --wr-color-light: #262f44;
-  --wr-color-light-rgb: 38, 47, 68;
+  --wr-color-light: #{$_light};
+  --wr-color-light-rgb: #{color.channel($_light, 'red')}, #{color.channel($_light, 'green')}, #{color.channel($_light, 'blue')};
   // The baked contrast pairs with the LIGHT value (#cbd5e1 → dark text);
   // the dark surface above needs light text instead.
   --wr-color-light-contrast: #e6ebf3;
@@ -57,18 +76,42 @@ $dark-intents: (
   // means "stronger divider" (further from canvas, so lighter).
   --wr-color-light-lighter: #1a2236;
   --wr-color-light-darker: #3a4661;
+  // `-light` / `-dark` were the two the hand block forgot, and they are what
+  // `.wr-btn--light` uses for hover / active. Left inherited, hover swapped in
+  // the LIGHT palette's slate-300 — a near-white fill under the near-white
+  // `-contrast` text above, so the button simply disappeared under the cursor.
+  // Half-steps of the tuned pair, same inverted reading: toward the canvas for
+  // `-light`, away from it for `-dark`, which also makes hover read as a lift.
+  --wr-color-light-light: #{color.adjust($_light, $lightness: -2.5%)};
+  --wr-color-light-dark: #{color.adjust($_light, $lightness: 5%)};
 
   // Secondary text (was `--wr-color-medium`)
   // Lifted from slate-400 → slate-300-ish for better legibility on
   // the deeper canvas.
-  --wr-color-medium: #9aa6b8;
-  --wr-color-medium-rgb: 154, 166, 184;
+  --wr-color-medium: #{$_medium};
+  --wr-color-medium-rgb: #{color.channel($_medium, 'red')}, #{color.channel($_medium, 'green')}, #{color.channel($_medium, 'blue')};
+  // This block shipped base + rgb only, so contrast and all four shades still
+  // came from the light palette's slate. Ink token, plain shades.
+  --wr-color-medium-contrast: #{colors.contrast($_medium)};
+  --wr-color-medium-light: #{color.adjust($_medium, $lightness: 5%)};
+  --wr-color-medium-lighter: #{color.adjust($_medium, $lightness: 10%)};
+  --wr-color-medium-dark: #{color.adjust($_medium, $lightness: -5%)};
+  --wr-color-medium-darker: #{color.adjust($_medium, $lightness: -10%)};
+
+  // Muted TEXT is its own token now (the light theme could not serve both text
+  // and fill from one value), so the dark canvas needs its own version too —
+  // otherwise it would inherit the light theme's dark ink. 7.64:1 here.
+  --wr-color-muted-text: #9aa6b8;
+  --wr-color-muted-text-rgb: 154, 166, 184;
 
   // Brand-color retune
   // The default primary (#3969e2) reads a touch dim on the deep
   // canvas. Bump the base + shade derivations so hover / focus rings
   // stay visible against slate-900.
   --wr-color-primary: #5b85ff;
+  // Same reason as the loop above — the light primary pairs with white, but the
+  // lightened dark-theme primary only reaches 3.36:1 against it.
+  --wr-color-primary-contrast: #{colors.contrast(#5b85ff)};
   --wr-color-primary-rgb: 91, 133, 255;
   --wr-color-primary-light: #7a9eff;
   --wr-color-primary-dark: #2f56c9;
@@ -79,6 +122,9 @@ $dark-intents: (
   // shade set in dark too (generated, so no intent can silently drift).
   @each $name, $base in $dark-intents {
     --wr-color-#{$name}: #{$base};
+    // Re-derived, not inherited: the light-palette token would pair the wrong
+    // foreground with a re-tuned base.
+    --wr-color-#{$name}-contrast: #{colors.contrast($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%)};

package/theme/styles/_index.scss

@@ -1,3 +1,4 @@
+@forward 'box-model';
 @forward 'colors';
 @forward 'variables';
 @forward 'dark';

package/types/ngwr-cascader.d.ts

@@ -101,6 +101,7 @@ declare class WrCascader<T = string> implements FormValueControl<unknown> {
     protected readonly panelTpl: _angular_core.Signal<TemplateRef<any>>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;

package/types/ngwr-color-picker.d.ts

@@ -286,6 +286,7 @@ declare class WrColorPickerTrigger {
     readonly closed: _angular_core.OutputEmitterRef<void>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;

package/types/ngwr-context-menu.d.ts

@@ -44,6 +44,7 @@ declare class WrContextMenu {
     readonly menu: i0.InputSignal<WrContextMenuPanel>;
     private readonly host;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;

package/types/ngwr-date-picker.d.ts

@@ -25,7 +25,7 @@ import { WrDateFormat } from 'ngwr/date-adapter';
  * accepts both named keys (`'shortDate'`, `'mediumDateTime'`, …) and raw
  * token strings (`'dd.MM.yyyy'`, `'HH:mm'`). When `format` is left at the
  * default (`null`), the picker derives the right named key from `mode`:
- * `'date'` → `'shortDate'`, `'time'` → `'shortTime'`, `'datetime'` →
+ * `'date'` gives `'shortDate'`, `'time'` gives `'time'`, `'datetime'` gives
  * `'shortDateTime'`.
  *
  * @example
@@ -50,8 +50,8 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     readonly mode: _angular_core.InputSignal<"time" | "date" | "datetime">;
     /**
      * Format used for both display and parsing. When `null` (default), the
-     * format is derived from `mode` (`shortDate` / `shortTime` /
-     * `shortDateTime`). Pass a named key or raw token string to override.
+     * format is derived from `mode` (`shortDate` / `time` / `shortDateTime`).
+     * Pass a named key or raw token string to override.
      */
     readonly format: _angular_core.InputSignal<WrDateFormat | (string & {}) | null>;
     /** Placeholder shown when the input is empty. */
@@ -79,6 +79,7 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     private readonly adapter;
     private readonly overlay;
+    private readonly outsideClick;
     private readonly scrollStrategies;
     private readonly host;
     private readonly destroyRef;
@@ -130,4 +131,171 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDatePicker, "wr-date-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
-export { WrDatePicker };
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * The `<wr-date-range-picker>` value — `[start, end]`.
+ *
+ * Either end can be `null` while the range is half-picked, so a partially
+ * filled range is still representable. Structurally identical to
+ * `WrCalendarRange`, which the picker forwards it to.
+ */
+type WrDateRange = readonly [Date | null, Date | null];
+
+/**
+ * Date-range picker — two text inputs sharing one range calendar.
+ *
+ * Separate from `<wr-date-picker>` because the value is a different type: a
+ * range is `[start, end]`, and folding that into the single picker's
+ * `Date | null` would break `[formField]` inference for every existing usage.
+ * Everything else matches — same input skeleton, same overlay, same
+ * {@link WrDateAdapter} formats.
+ *
+ * - `'date'` (default) — popover renders a range calendar. Picking the second
+ *   date closes the overlay.
+ * - `'datetime'` — popover adds a time stepper per end. Picking dates does NOT
+ *   close, since the user typically sets the times next.
+ *
+ * A signal-forms native control: it implements
+ * `FormValueControl<WrDateRange | null>`, so `[formField]` binds straight to
+ * its `value` model. `[(value)]` works standalone, and classic `[(ngModel)]` /
+ * reactive forms keep working through Angular's bridge.
+ *
+ * Either end may be `null` while the range is half-picked. Out-of-order ends
+ * are swapped on commit, matching the calendar's own behaviour.
+ *
+ * @example
+ * ```html
+ * <!-- signal forms -->
+ * <wr-date-range-picker [formField]="form.period" format="dd.MM.yyyy" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-date-range-picker [(value)]="period" [minDate]="minDate" />
+ *
+ * <!-- date + time on both ends -->
+ * <wr-date-range-picker mode="datetime" [(value)]="window" timeFormat="24h" />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/date-picker
+ */
+declare class WrDateRangePicker implements FormValueControl<WrDateRange | null> {
+    /** Picker behavior — see class doc. @default 'date' */
+    readonly mode: _angular_core.InputSignal<"date" | "datetime">;
+    /**
+     * Format used for both display and parsing, on both ends. When `null`
+     * (default), it is derived from `mode` (`shortDate` / `shortDateTime`). Pass
+     * a named key or raw token string to override.
+     */
+    readonly format: _angular_core.InputSignal<WrDateFormat | (string & {}) | null>;
+    /** Placeholder for the start input. */
+    readonly startPlaceholder: _angular_core.InputSignal<string>;
+    /** Placeholder for the end input. */
+    readonly endPlaceholder: _angular_core.InputSignal<string>;
+    /** Glyph rendered between the two inputs. @default '–' */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Min selectable date, applied to both ends. */
+    readonly minDate: _angular_core.InputSignal<Date | null>;
+    /** Max selectable date, applied to both ends. */
+    readonly maxDate: _angular_core.InputSignal<Date | null>;
+    /** Predicate to disable specific dates (forwarded to the calendar). */
+    readonly dateFilter: _angular_core.InputSignal<((date: Date) => boolean) | null>;
+    /** Time-panel 12 / 24-hour format. Applies in `datetime` mode. @default 'auto' */
+    readonly timeFormat: _angular_core.InputSignal<"auto" | "12h" | "24h">;
+    /** Render the seconds column. Applies in `datetime` mode. @default false */
+    readonly showSeconds: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Minute / second step for the time panels. @default 1 */
+    readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Disable interaction. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Read-only — inputs not typeable, but the trigger icon still opens the overlay. @default false */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly adapter;
+    private readonly overlay;
+    private readonly outsideClick;
+    private readonly scrollStrategies;
+    private readonly host;
+    private readonly destroyRef;
+    protected readonly startEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    /** The picked range. Bound by `[formField]`, or two-way via `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<WrDateRange | null>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /** Text currently in each input (may be partial / invalid mid-type). */
+    protected readonly startText: _angular_core.WritableSignal<string>;
+    protected readonly endText: _angular_core.WritableSignal<string>;
+    /** Whether the popover is currently open. */
+    protected readonly overlayOpen: _angular_core.WritableSignal<boolean>;
+    /** Resolved format — falls back to a mode-appropriate default. */
+    protected readonly resolvedFormat: _angular_core.Signal<string>;
+    protected readonly isDateTime: _angular_core.Signal<boolean>;
+    protected readonly triggerLabel: string;
+    protected readonly startLabel: string;
+    protected readonly endLabel: string;
+    protected readonly classes: _angular_core.Signal<string>;
+    private overlayRef;
+    /** Live panel ref while the popover is open — lets typed edits move the
+     * displayed month in real time (not just on reopen). */
+    private readonly panelRef;
+    /** Last range we pushed into the model ourselves, so the sync effect can skip
+     * the echo of our own edits and never reformat text mid-type. */
+    private lastValue;
+    constructor();
+    protected onStartInput(event: Event): void;
+    protected onEndInput(event: Event): void;
+    protected onBlur(event: FocusEvent): void;
+    /** Called by an input's click — opens the overlay if it isn't open already. */
+    protected openOnInput(): void;
+    protected toggleOverlay(): void;
+    private onRangeInput;
+    private openOverlay;
+    /**
+     * Close the popover. `restoreFocus` returns focus to the start input — needed
+     * when the overlay is dismissed while focus lives inside it (picking the
+     * second date), because disposing then leaves focus on a removed element and
+     * the browser falls back to `<body>`.
+     */
+    private closeOverlay;
+    private dispose;
+    /**
+     * Push to the model and refresh the text of whichever ends changed. Returns
+     * what was actually committed.
+     *
+     * `normalise` swaps out-of-order ends. The calendar and blur ask for it; a
+     * keystroke does not, because reordering while the user is still typing would
+     * move their in-progress text into the other input.
+     */
+    private commitRange;
+    private current;
+    private display;
+    private parseText;
+    /** Keep `[start, end]` in chronological order once both ends exist. */
+    private normalise;
+    /**
+     * Chronological comparison at the precision the mode needs. The adapter's
+     * `compareDate` is day-precision by contract, which would leave an inverted
+     * same-day `datetime` range (18:00 → 09:00) unswapped.
+     */
+    private compareEnds;
+    /**
+     * Whether a typed date must be rejected. Covers `dateFilter` as well as the
+     * bounds — the calendar disables filtered days, so accepting them from the
+     * keyboard would make the two entry paths disagree.
+     */
+    private isOutOfBounds;
+    private sameDate;
+    private sameRange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDateRangePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDateRangePicker, "wr-date-range-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+}
+
+export { WrDatePicker, WrDateRangePicker };
+export type { WrDateRange };

package/types/ngwr-density.d.ts

@@ -90,7 +90,14 @@ declare class WrDensityDirective {
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-/** Configure {@link WrDensity}. All fields optional — merged with defaults. */
+/**
+ * Configure and activate {@link WrDensity}. All fields optional — merged with
+ * defaults.
+ *
+ * The initializer instantiates {@link WrDensity} so its constructor effect can
+ * write `[data-wr-density]` onto `<html>`. Without it the tree-shakable service
+ * was never created and `defaultDensity` had no effect at all.
+ */
 declare function provideWrDensity(config?: Partial<WrDensityConfig>): EnvironmentProviders;
 
 export { DEFAULT_WR_DENSITY_CONFIG, WR_DENSITY_CONFIG, WrDensity, WrDensityDirective, provideWrDensity };