ngwr 14.6.0 → 14.7.0

package/fesm2022/ngwr-version.mjs

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-const NGWR_VERSION = '14.6.0';
+const NGWR_VERSION = '14.7.0';
 
 /**
  * @license

package/fesm2022/ngwr-version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-version.mjs","sources":["../../../projects/lib/version/version.ts","../../../projects/lib/version/version.token.ts","../../../projects/lib/version/ngwr-version.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * The ngwr library version string, kept in sync with\n * `projects/lib/package.json` by `scripts/release-prepare.ts`.\n *\n * Prefer this over reading `package.json` at runtime — that requires a JSON\n * import or `require`, neither of which tree-shakes well in Angular builds.\n *\n * Distinct from `Version` exported by `@angular/core`, which reports the\n * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.\n */\nexport const NGWR_VERSION = '14.6.0';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\nimport { NGWR_VERSION } from './version';\n\n/**\n * Injection token holding the ngwr library version string.\n *\n * Default factory returns {@link NGWR_VERSION}. Override it in tests or in\n * apps that want to surface a custom build identifier.\n *\n * @example\n * ```ts\n * @Component({...})\n * export class FooterComponent {\n *   readonly version = inject(NGWR_VERSION_TOKEN);\n * }\n * ```\n */\nexport const NGWR_VERSION_TOKEN = new InjectionToken<string>('NGWR_VERSION_TOKEN', {\n  providedIn: 'root',\n  factory: () => NGWR_VERSION,\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAEH;;;;;;;;;AASG;AACI,MAAM,YAAY,GAAG;;ACjB5B;;;;;AAKG;AAMH;;;;;;;;;;;;;AAaG;MACU,kBAAkB,GAAG,IAAI,cAAc,CAAS,oBAAoB,EAAE;AACjF,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,YAAY;AAC5B,CAAA;;AC5BD;;AAEG;;;;"}
+{"version":3,"file":"ngwr-version.mjs","sources":["../../../projects/lib/version/version.ts","../../../projects/lib/version/version.token.ts","../../../projects/lib/version/ngwr-version.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * The ngwr library version string, kept in sync with\n * `projects/lib/package.json` by `scripts/release-prepare.ts`.\n *\n * Prefer this over reading `package.json` at runtime — that requires a JSON\n * import or `require`, neither of which tree-shakes well in Angular builds.\n *\n * Distinct from `Version` exported by `@angular/core`, which reports the\n * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.\n */\nexport const NGWR_VERSION = '14.7.0';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\nimport { NGWR_VERSION } from './version';\n\n/**\n * Injection token holding the ngwr library version string.\n *\n * Default factory returns {@link NGWR_VERSION}. Override it in tests or in\n * apps that want to surface a custom build identifier.\n *\n * @example\n * ```ts\n * @Component({...})\n * export class FooterComponent {\n *   readonly version = inject(NGWR_VERSION_TOKEN);\n * }\n * ```\n */\nexport const NGWR_VERSION_TOKEN = new InjectionToken<string>('NGWR_VERSION_TOKEN', {\n  providedIn: 'root',\n  factory: () => NGWR_VERSION,\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAEH;;;;;;;;;AASG;AACI,MAAM,YAAY,GAAG;;ACjB5B;;;;;AAKG;AAMH;;;;;;;;;;;;;AAaG;MACU,kBAAkB,GAAG,IAAI,cAAc,CAAS,oBAAoB,EAAE;AACjF,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,YAAY;AAC5B,CAAA;;AC5BD;;AAEG;;;;"}

package/input/styles/_index.scss

@@ -199,8 +199,14 @@
     color: var(--wr-input-group-affix);
     cursor: pointer;
     transition: color var(--wr-transition-base);
-
-    --wr-icon-size: 1rem;
+    // The eye is a bare `.wr-icon__svg`, which is `1em`, and a `<button>` does
+    // not inherit its font-size — so it drew the browser's control font (about
+    // 13.33px) with no reset and the surrounding text's size under `ngwr/reset`.
+    // Inheriting the size makes `1em` the text around the field in every app.
+    // The size only, not the `font` shorthand, which would also hand the button
+    // the group's line-height. `--wr-icon-size` only drives `<wr-icon>` hosts, so
+    // the declaration that used to sit here drove nothing.
+    font-size: inherit;
 
     &:hover:not(:disabled) {
       color: var(--wr-color-primary);

package/lightbox/styles/_rules.scss

@@ -132,7 +132,13 @@
   touch-action: none;
 
   &__close {
-    --wr-icon-size: 1.25rem;
+    // A bare `.wr-icon__svg` in a `<button>`: `1em`, and a button inherits no
+    // font-size — so the ✕ came out at the browser's control font, about
+    // 13.33px, inside a 36px circle, and at the surrounding text's size under
+    // `ngwr/reset`. Inheriting the size gives the same glyph either way. The
+    // size only, not the `font` shorthand. `--wr-icon-size` was never going to
+    // do it: only a `<wr-icon>` host reads that hook.
+    font-size: inherit;
     position: absolute;
     top: 1rem;
     inset-inline-end: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "bin": {
     "ngwr-mcp": "mcp/server.js"
   },

package/select/styles/_index.scss

@@ -129,7 +129,6 @@
   }
 
   &__chevron {
-    --wr-icon-size: 1rem;
     flex: 0 0 auto;
     color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
@@ -179,6 +178,22 @@
     }
   }
 
+  // A leading visual inside a search trigger. The FIELD owns the leading
+  // padding here (see `--search` above), so the inset has to move with the
+  // visual — otherwise the avatar sits on the border. Only the trigger's own
+  // 0.5rem `gap` is then left between the two, which is the spacing the button
+  // trigger already has between `__value-leading` and `__value`.
+  &__trigger--search &__value-leading {
+    padding-inline-start: calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
+  }
+
+  // …and the field drops the inset it just handed over. Keyed on the sibling
+  // rather than on a modifier class so the two can never be set apart: the
+  // padding moves exactly when the element it moved to exists.
+  &__value-leading + &__search-input {
+    padding-inline-start: 0;
+  }
+
   &__search-input {
     flex: 1 1 auto;
     min-width: 0;
@@ -294,7 +309,6 @@
   }
 
   &__chip-remove {
-    --wr-icon-size: 0.875rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -320,7 +334,6 @@
   }
 
   &__clear {
-    --wr-icon-size: 0.875rem;
     // Never shrink: the chips box is allowed to grow into the whole row, so the
     // × has to hold its own size against it.
     flex: 0 0 auto;
@@ -568,7 +581,6 @@
 
   .wr-select__chip-remove,
   .wr-select__clear {
-    --wr-icon-size: 1.125rem;
     width: 2rem;
     height: 2rem;
   }

package/table/styles/_index.scss

@@ -376,6 +376,28 @@
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
+
+    // The spacing of the header's controls, and it moves for a COARSE pointer
+    // only. A column that is both `sortable` and `filterable` puts two 12px
+    // controls in this row 0.375rem apart, so their centres are 18px apart —
+    // while the touch halo each one grows below is 24px wide and centred on its
+    // control. Two 24px boxes with centres 18px apart OVERLAP by 6px, and the
+    // later one in the DOM (the filter) wins the hit test, so the sort button
+    // would hand over a strip of the slack it just gained. 0.75rem puts the
+    // centres 24px apart, which is the closest the two halos can come: at rest
+    // they abut exactly, and a filter showing a count pill is 32px wide, which
+    // only separates them further. A fine pointer keeps the 0.375rem this row
+    // has always drawn.
+    //
+    // This gap is also the whole of what a COARSE-pointer `target-size` run
+    // measures. axe never sees the halo — an `::after` enters no rect, so it
+    // reads 12x12 either way — but 24px between centres satisfies WCAG 2.5.8's
+    // spacing exception exactly, and the pair passes. Narrow this and a coarse
+    // run reports both nodes again; `table-header-target.spec.ts` pins the
+    // value here so a PR catches it without a browser.
+    @media (pointer: coarse) {
+      gap: 0.75rem;
+    }
   }
 
   &__title {
@@ -398,6 +420,24 @@
     // reads it, and the rule here used to set it for nothing.
     font-size: inherit;
     line-height: 0;
+    // The pointer target, widened for a COARSE pointer and for nothing else.
+    // WCAG 2.5.8 asks 24x24 of every control, a mouse included, and this glyph
+    // is 12x12: a lone one passes on the criterion's spacing exception, and a
+    // column carrying both this button and a filter trigger 6px away does not.
+    // A real 24px box on every pointer is what satisfies the criterion outright,
+    // and it was written, measured and REFUSED — it moves the caret and the
+    // funnel apart on a mouse, and the maintainer chose to keep the geometry
+    // 14.6.0 draws. So the coarse half ships, the fine-pointer failure is a
+    // decided trade recorded in AGENTS.md and in `scripts/contrast-baseline.json`,
+    // and the table's docs page says so to the reader. Do not re-report it.
+    //
+    // 24px rather than the mixin's 44px default, which is a real constraint and
+    // not a preference: the halo is centred on the control, so 44 reaches 22px
+    // either side and swallows the filter trigger beside it — the mixin's own
+    // docblock warns off tightly-packed rows for exactly this. 24 is the
+    // criterion's number, and `__th-inner` opens its gap under the same media
+    // query so the two halos cannot overlap.
+    @include theme.touch-target($size: 24px);
   }
 
   &__tr {
@@ -810,6 +850,13 @@
     // count pill beside the funnel — 10px type with no line-height of its own —
     // grows from 12px to 20px tall under it.
     font-size: inherit;
+    // The same coarse-pointer target as the sort button beside it, where the
+    // whole reasoning — why 24 and not 44, and why a fine pointer keeps the
+    // 12px glyph — is written out. It goes on the TRIGGER and never on the
+    // `<wr-table-filter>` host: the halo belongs to the element that owns the
+    // click, and a tap landing on the host's own pseudo-element would target
+    // the host and open nothing.
+    @include theme.touch-target($size: 24px);
   }
 
   &__count {
@@ -822,6 +869,14 @@
     background: var(--wr-color-primary);
     color: var(--wr-color-primary-contrast);
     font-size: 0.625rem; // 10px — intentional micro-count badge, below --wr-text-xs
+    // The pill has no padding on the block axis, so its height IS its line box,
+    // and leaving that at `normal` handed the box to whatever the page
+    // inherited: 12px in an app with no reset, 20px under `ngwr/reset`, whose
+    // `font: inherit` on a `<button>` brings the header's 1.25rem down with the
+    // font-size. A ratio of its own makes it 12px in both — and a ratio rather
+    // than a length, so a consumer who enlarges the numeral gets a pill that
+    // grows with it.
+    line-height: 1.2;
     font-weight: 600;
   }
 

package/toast/styles/_index.scss

@@ -205,8 +205,15 @@ $toast-colors: (
     transition:
       color var(--wr-transition-base),
       background var(--wr-transition-base);
-
-    --wr-icon-size: 0.875rem;
+    // The glyph is a bare `.wr-icon__svg` — `1em` — and a `<button>` does not
+    // inherit its font-size, so it drew the browser's control font (about
+    // 13.33px) with no reset and the surrounding text's size under `ngwr/reset`.
+    // Inheriting the size makes `1em` the toast's own text in every app; only a
+    // `<wr-icon>` host reads `--wr-icon-size`, so the hook never applied here.
+    // The SIZE only, never the `font` shorthand: that would also bring the
+    // surrounding line-height, which is what stretched the table's filter count
+    // pill from 12px to 20px when it was tried there.
+    font-size: inherit;
 
     &:hover {
       color: var(--wr-color-on-surface);
@@ -323,7 +330,6 @@ $toast-colors: (
     width: 2rem;
     height: 2rem;
     padding: 0;
-    --wr-icon-size: 1.125rem;
   }
 
   .wr-toast-host__close-all {

package/tree/styles/_index.scss

@@ -249,7 +249,6 @@
   }
 
   &__chevron {
-    --wr-icon-size: 1rem;
     flex: 0 0 auto;
     color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
@@ -260,7 +259,6 @@
   }
 
   &__clear {
-    --wr-icon-size: 0.875rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -329,7 +327,6 @@
   }
 
   &__chip-remove {
-    --wr-icon-size: 0.875rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/types/ngwr-avatar.d.ts

@@ -47,6 +47,19 @@ type WrAvatarSize = number | `${number}` | `${number}px` | `${number}rem`;
  * spinner is drawn over it; with nothing projected, the spinner marks the
  * loading state instead. See `alt` for what a screen reader hears.
  *
+ * Projected initials take the text size around the avatar, capped at
+ * `--wr-avatar-initials-scale` (`0.375`) of the box, so they shrink only where
+ * they would not fit: a 16px avatar in a 14px chip draws 6px letters, while a
+ * `6rem` one keeps the surrounding size up to 36px and is capped only past it.
+ * Anything projected that is sized in `em` follows the cap too — a `<wr-icon>`
+ * at its default `1.2em` included — so pin a `px` or `rem` size on the projected
+ * element, or override the hook, to keep it. A `font-size` rule on the avatar
+ * itself still wins, unless it sits in a cascade layer (Tailwind v4's utilities
+ * do), which ngwr's unlayered stylesheet beats whatever the selector.
+ *
+ * The initials are inert: `pointer-events: none` hands a click on them to whatever
+ * holds the avatar, and `user-select: none` keeps them out of a text selection.
+ *
  * @example
  * ```html
  * <wr-avatar url="/me.png" alt="Roman" size="3rem" shape="circle" />
@@ -84,7 +97,8 @@ declare class WrAvatar {
      */
     readonly shape: _angular_core.InputSignal<WrAvatarShape>;
     /**
-     * Box size. See {@link WrAvatarSize} for accepted values.
+     * Box size. See {@link WrAvatarSize} for accepted values. The resolved value is
+     * published on the host as `--wr-avatar-size`.
      *
      * @default '6rem'
      */

package/types/ngwr-image-cropper.d.ts

@@ -157,6 +157,12 @@ declare class WrImageCropper {
     private active;
     private startPointer;
     private startRect;
+    /** The element the live drag set pointer capture on, so the end releases that one. */
+    private captureTarget;
+    /** The pointer the live drag belongs to. Every other pointer's events are ignored. */
+    private pointerId;
+    /** How far past each side of the crop the live resize was pressed — see `onPointerMove`. */
+    private overhang;
     private readonly destroyRef;
     private readonly statusState;
     /**
@@ -217,8 +223,50 @@ declare class WrImageCropper {
     private initialCrop;
     protected readonly handles: readonly WrCropHandle[];
     protected onPointerDown(handle: WrCropHandle, event: PointerEvent): void;
+    /**
+     * A resize ENDS when the pointer leaves the image, exactly as `pointerup` would end it:
+     * the move that carried it out is applied — clamped to the image like any other — and
+     * then the drag is over. Nothing after that resumes it or changes the crop, pointer
+     * back over the image or not, until a new `pointerdown`. A move drag is not affected:
+     * its size is fixed, so it simply rests against the edge.
+     *
+     * The move that leaves is applied rather than dropped because pointer moves are
+     * SAMPLES. Dropped, a quick drag toward a corner would stop wherever its last sample
+     * inside happened to fall — a single move from a handle to past the image would change
+     * nothing at all — and even a slow one would stop a fraction of a pixel short of the
+     * edge. A drag that leaves across one edge still ends there: heading for a corner at a
+     * slant that crosses the bottom first, the crop's right edge stays where it was then.
+     *
+     * "The image" is the `<img>`'s own box — the bounds `applyMove` / `applyResize` clamp
+     * the crop to — with its edges counting as inside, since the crop may reach them. The
+     * box is re-measured on every move and compared with `clientX` / `clientY`: both are
+     * viewport coordinates, so a scroll mid-drag cannot put them out of step. The moves
+     * outside reach this handler at all only because the drag holds pointer capture.
+     *
+     * One allowance, fixed at `pointerdown`: the box is widened on each side by however far
+     * past that side of the CROP the press landed — at most as far as the pressed handle
+     * reaches past it. Half of an edge handle, and three quarters of a corner handle, lies
+     * outside the crop, so a press there already has the pointer ahead of the edge it drags.
+     * Measured without the allowance, that pointer would leave the image while the crop was
+     * still short of the image's edge by the same distance, with nothing able to close the
+     * gap; and a handle resting on the image's edge, pressed on its outer part, would begin
+     * its drag already outside. A press on a handle's inner part widens nothing.
+     */
     protected onPointerMove(event: PointerEvent): void;
+    /**
+     * Ends the drag — for `pointerup`, `pointercancel`, a capture lost to something else,
+     * and a resize whose pointer left the image. Once per drag: the capture released here
+     * fires `lostpointercapture` afterwards, and by then there is nothing left to end.
+     *
+     * Only for the pointer that started it. A second finger is refused a drag of its own at
+     * `pointerdown`, but its moves and its lifting reach these handlers all the same, and
+     * would otherwise drive or end the first finger's drag.
+     */
     protected onPointerUp(event: PointerEvent): void;
+    /** How far past each side of the crop window the pointer is, in CSS pixels. */
+    private pastCrop;
+    /** Whether the pointer is on the image, edges and the press's `overhang` included. */
+    private withinImage;
     /** Whether a key has moved the crop since the last `keyup`. */
     private keyboardDirty;
     /**

package/types/ngwr-select.d.ts

@@ -44,7 +44,11 @@ type WrSelectSize = 'sm' | 'md' | 'lg';
  *
  * - `'option'` — the row in the open panel.
  * - `'chip'` — a selected chip on a `mode="multi"` trigger.
- * - `'value'` — the selected value on a single-mode button trigger.
+ * - `'value'` — the selected value on a single-mode trigger: beside the label on
+ *   a button trigger, and before the input on a search-shaped one while that
+ *   input is showing the label. One placement rather than two, because it is one
+ *   surface — the same size is right on both, and splitting it would ask every
+ *   consumer to name a case they do not have.
  */
 type WrOptionLeadingPlacement = 'option' | 'chip' | 'value';
 /** Template context of `<ng-template wrOptionLeading>`. */
@@ -572,10 +576,38 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     private leadingFor;
     /**
      * The leading visual beside the selected value on a single-mode BUTTON trigger
-     * — one instance, for the one selected value. The search-shaped triggers do not
-     * draw one: their selection is an `<input>`'s text, which cannot hold markup.
+     * — one instance, for the one selected value. A search-shaped trigger draws the
+     * same visual through {@link searchLeading}, on a narrower condition.
      */
     protected readonly selectedLeading: _angular_core.Signal<TemplateRef<WrOptionLeadingContext<unknown>> | null>;
+    /**
+     * The same visual on a SEARCH-shaped trigger (`mode="search"`, a searchable
+     * single), drawn before the input — the surface an assignee picker actually
+     * uses, and the one that lost its avatar the moment the trigger became a field.
+     *
+     * The condition is {@link searchShowsValue} rather than `hasSelection()`, and
+     * the two part company on every open panel: focusing the field replaces the
+     * label with the live query, which starts empty, so what is on screen is the
+     * placeholder. An avatar left standing there names a value the field no longer
+     * shows, and then sits in front of whatever the user types next — the visual
+     * would be answering a different question from the text beside it. It comes
+     * back with the label, which is one signal flipping rather than two things
+     * kept in step: committing a choice clears the query and closes the panel.
+     *
+     * Nothing is instantiated for a search select with no selection, panel open or
+     * shut — `selectedLabel()` is `null` there, and this returns `null` with it.
+     *
+     * The COST of that rule, stated because it is a consumer's to weigh: stepping
+     * aside is a destroy, so opening the picker and dismissing it unchanged
+     * re-creates the visual — a template built on an `<img>` re-mounts once per
+     * round trip, and re-requests unless the cache answers. Kept rather than
+     * traded for a hidden-but-alive node: the panel's own rows already create and
+     * destroy one apiece on the same gesture, so holding this one back buys a
+     * fraction of that, and a node retained while it must not be seen is a second
+     * piece of state to keep in step with the field. Pinned in `option.spec.ts`
+     * ("re-creates it after a round trip"), so a future change here has to say so.
+     */
+    protected readonly searchLeading: _angular_core.Signal<TemplateRef<WrOptionLeadingContext<unknown>> | null>;
     /**
      * Trigger label for single mode. Multi reads `selectedChips` instead.
      *
@@ -748,6 +780,26 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected onSearchFocus(): void;
     protected onSearchBlur(): void;
     protected onSearchKey(event: KeyboardEvent): void;
+    /**
+     * Whether the search field is showing the SELECTED VALUE rather than a query.
+     * `searchDisplay` takes its text off this, and `searchLeading` the visual that
+     * goes before it, so the two can never disagree about which of the two things
+     * the field is holding.
+     *
+     * FOCUS as well as open, and that second term is the whole `[minChars]` story.
+     * Backspacing under the threshold closes the panel, and falling back to the
+     * selected label the moment `open()` goes false rewrote the field out from
+     * under someone who was still typing — "sma" -> "sm" showed an empty box.
+     *
+     * A NON-EMPTY query, though: picking an option clears it and leaves focus in
+     * the field, and there the label is what belongs on screen.
+     *
+     * Only the search-shaped trigger reads it. A searchable MULTI binds its input
+     * to `searchQuery()` directly and shows its selection as chips, which carry
+     * their own leading visuals whatever the field holds.
+     * @internal
+     */
+    protected readonly searchShowsValue: _angular_core.Signal<boolean>;
     /**
      * Display text for the search input. Shows the selected option's
      * label when collapsed, or the live query while typing / panel open.
@@ -997,9 +1049,14 @@ declare class WrOptionGroup {
  * - in an option row, while the panel is OPEN — destroyed again when it closes,
  *   and under `virtualScroll` only for the rows in the rendered window;
  * - in a selected chip on a `mode="multi"` trigger, one per visible chip;
- * - beside the selected value on a single-mode BUTTON trigger — one copy. The
- *   search-shaped triggers (`mode="search"`, `[searchable]`) do not draw it: their
- *   selection is the text of an `<input>`, which cannot hold markup.
+ * - beside the selected value on a single-mode BUTTON trigger — one copy;
+ * - before the input on a SEARCH-shaped trigger (`mode="search"`, a searchable
+ *   single), while that input is showing the selected label. It goes beside the
+ *   field rather than into it — an `<input>` holds a string — and it steps aside
+ *   while a query is on screen, panel open or half-typed, because the value it
+ *   names is not what the field is showing then. Picking an option brings it
+ *   back with the label. Stepping aside is a DESTROY, like a closing panel's
+ *   rows, so an `<img>`-backed visual re-mounts once per open-and-dismiss.
  *
  * Every copy sits in an `aria-hidden` wrapper and is skipped when the option's
  * text is read, so the trigger label, the chip, the search filter and the

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-declare const NGWR_VERSION = "14.6.0";
+declare const NGWR_VERSION = "14.7.0";
 
 /**
  * @license