ngwr 10.0.0 → 10.1.0

package/types/ngwr-validators.d.ts

@@ -8,8 +8,11 @@ import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
  */
 
 /**
- * Bundled `ValidatorFn`s — pure functions, no DOM, no DI. Mirrors the
- * API shape of Angular's built-in `Validators` so it composes cleanly:
+ * Bundled `ValidatorFn`s — pure functions, no DOM, no DI. (`matchFields` keeps
+ * one bit of per-instance state, a latch so its dev-mode misconfiguration
+ * warning fires once rather than on every validation run; it is never read as
+ * part of the result.) Mirrors the API shape of Angular's built-in
+ * `Validators` so it composes cleanly:
  *
  * ```ts
  * import { Validators } from '@angular/forms';
@@ -59,8 +62,65 @@ declare const WrValidators: {
      * Value must equal a sibling control's value (e.g. confirm-password).
      * The target lookup uses `control.parent.get(name)`, so it works
      * inside `FormGroup` and nested groups.
+     *
+     * **It cannot report a mismatch until something revalidates the control.**
+     * Angular runs a control's validators inside the control's own constructor,
+     * before the control has a parent — so the lookup finds nothing and this
+     * returns `null`, and attaching the control to a group does not re-run it.
+     *
+     * `formControlName` revalidates when it binds, so a group rendered through
+     * the reactive-forms directives corrects itself on its first change
+     * detection. The window is open for everything that reads validity BEFORE
+     * that: a route guard or resolver checking `form.valid`, a form built and
+     * submitted from a service, a unit test. Such a group reports itself valid
+     * with two values that plainly disagree.
+     *
+     * Put {@link WrValidators.matchFields} on the group to close it, and keep
+     * this one on the child for the per-field message. They do not conflict —
+     * different error keys, different hosts.
+     *
+     * @see WrValidators.matchFields
      */
     match: (targetName: string) => ValidatorFn;
+    /**
+     * Every named control must hold the same value — the group-level counterpart
+     * to {@link WrValidators.match}. Attach it to the group that OWNS the fields,
+     * not to one of its children.
+     *
+     * Unlike `match` this has no ordering hole: Angular attaches the children and
+     * aggregates their values BEFORE it runs the group's own validators, so a
+     * group built from a record whose fields already disagree is invalid the
+     * moment it exists — no revalidation step, and nothing that depends on the
+     * form having been rendered.
+     *
+     * Names are `AbstractControl.get()` paths, so `'billing.zip'` reaches into a
+     * nested group. `null`, `undefined` and `''` all count as the same empty
+     * value; everything else is compared with `===`, so two equal `Date`s are NOT
+     * equal — compare a derived primitive instead. **Disabled controls are
+     * skipped**, which makes the rule compare exactly what `group.value`
+     * contains, and the error names only the controls it actually compared.
+     *
+     * A name that resolves to nothing, or to a group or an array rather than a
+     * leaf control, turns the whole check off and warns once per validator
+     * instance in dev — never a partial comparison of the names that did
+     * resolve, and never an error the user has no way to satisfy.
+     *
+     * The error lands on the GROUP, and `<wr-form-field>` only reads the one
+     * control projected into it — so pair this with `match` for a per-field
+     * message, or render it yourself from `form.hasError('matchFields')`.
+     *
+     * @example
+     * ```ts
+     * new FormGroup(
+     *   {
+     *     password: new FormControl(''),
+     *     confirm: new FormControl('', [WrValidators.match('password')]),
+     *   },
+     *   { validators: [WrValidators.matchFields('password', 'confirm')] },
+     * );
+     * ```
+     */
+    matchFields: (first: string, second: string, ...rest: readonly string[]) => ValidatorFn;
     /** Value must be one of the allowed entries (strict equality). */
     oneOf: <T>(allowed: readonly T[]) => ValidatorFn;
     /** Value (Date | parseable) must be ≥ `min`. */

package/types/ngwr-version.d.ts

@@ -14,9 +14,9 @@ import { InjectionToken } from '@angular/core';
  * import or `require`, neither of which tree-shakes well in Angular builds.
  *
  * Distinct from `Version` exported by `@angular/core`, which reports the
- * loaded Angular runtime version (e.g. `'21.2.13'`), not ngwr's.
+ * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-declare const NGWR_VERSION = "10.0.0";
+declare const NGWR_VERSION = "10.1.0";
 
 /**
  * @license

package/typewriter/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 .wr-typewriter {
   --wr-typewriter-cursor-blink: 0.5s;
 

package/typography/styles/_index.scss

@@ -174,13 +174,13 @@
     color: var(--wr-color-primary);
   }
   &--tone-success {
-    color: var(--wr-color-success);
+    color: var(--wr-color-success-ink);
   }
   &--tone-warning {
-    color: var(--wr-color-warning);
+    color: var(--wr-color-warning-ink);
   }
   &--tone-danger {
-    color: var(--wr-color-danger);
+    color: var(--wr-color-danger-ink);
   }
 
   // Modifiers

package/virtual-scroll/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // Fixed-size virtual scroll wrapper. Most of the layout work is done by
 // CDK's `<cdk-virtual-scroll-viewport>`; this stylesheet just makes the
 // host a block-level container and tames default overflow behaviour.
@@ -11,7 +16,7 @@
     width: 100%;
     height: 100%;
     // CDK already sets `overflow: auto`; just add a discreet scrollbar
-    // skin via the platform defaults — no custom thumb so we match the
+    // skin via the platform defaults — a discreet custom thumb that still matches the
     // host application's chrome.
     scrollbar-width: thin;
 

package/waves/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // Wave-field background (reactbits port). The host fills its nearest
 // positioned ancestor; the line colour is theme-aware via
 // `--wr-waves-line-color` unless `[lineColor]` overrides it.