ngwr 14.5.1 → 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.5.1';
+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.5.1';\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/image-cropper/styles/_index.scss

@@ -23,6 +23,13 @@
     user-select: none;
   }
 
+  // A source the browser could not decode. The `<img>` stays in the DOM, since the
+  // next `src` goes through the same element, but some engines draw a broken-image
+  // glyph for it — and the failure is the host's to explain, not a stray icon's.
+  &--failed &__image {
+    display: none;
+  }
+
   &__backdrop {
     position: absolute;
     inset: 0;

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/llms-full.txt

@@ -45,7 +45,7 @@
 - import: `import { WrAvatar } from 'ngwr/avatar'`
 - selector: `wr-avatar`
 - exports: WrAvatar, WrAvatarSize, WrAvatarShape
-- Image avatar with a fixed square or rounded shape. Shows a spinner while the image loads.
+- Image avatar with a square, rounded, circle or squircle shape. Projected initials stand in while the image loads and when it fails.
 
 ## ngwr/back-top
 - import: `import { WrBackTop } from 'ngwr/back-top'`
@@ -568,7 +568,7 @@
 ## ngwr/image-cropper
 - import: `import { WrImageCropper } from 'ngwr/image-cropper'`
 - selector: `wr-image-cropper`
-- exports: WrImageCropper, WrCropRect, WrCropHandle, WrImageOutputType
+- exports: WrImageCropper, WrCropRect, WrCropHandle, WrImageCropperStatus, WrImageLoadError, WrImageOutputType
 - DOM-based crop UI. Drag the box to move, drag any of the eight handles to resize. Optional `[aspectRatio]` locks the box shape. `(cropped)` fires with a `Blob` after each drag end — wire to upload or preview.
 
 ## ngwr/image-cropper/testing
@@ -840,8 +840,8 @@
 
 ## ngwr/select
 - import: `import { WrSelect } from 'ngwr/select'`
-- selector: `wr-option-group`, `wr-option`, `wr-select`
-- exports: WrSelect, WrOption, WrOptionGroup, WR_SELECT, WrSelectContext, WrSelectMode, WrSelectSearchLoader, WrSelectTagValidator, WrSelectSize
+- selector: `wr-option-group`, `ng-template[wrOptionLeading]`, `wr-option`, `wr-select`
+- exports: WrSelect, WrOption, WrOptionGroup, WrOptionLeading, WR_SELECT, WrSelectContext, WrOptionLeadingContext, WrOptionLeadingPlacement, WrSelectMode, WrSelectSearchLoader, WrSelectTagValidator, WrSelectSize
 - Native-like select built on CDK Overlay. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through [Angular 22's forms bridge](/guides/forms).
 
 ## ngwr/select/testing

package/package.json

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

package/schematics/use/symbol-map.json

@@ -165,6 +165,7 @@
   "WrSelect": "ngwr/select",
   "WrOption": "ngwr/select",
   "WrOptionGroup": "ngwr/select",
+  "WrOptionLeading": "ngwr/select",
   "WrShinyText": "ngwr/shiny-text",
   "WrShimmer": "ngwr/shiny-text",
   "WrSidebar": "ngwr/sidebar",

package/select/styles/_index.scss

@@ -120,8 +120,15 @@
     color: var(--wr-color-text-muted);
   }
 
+  // The selected option's leading visual on a single-mode button trigger. Never
+  // shrinks: the label beside it is the part that truncates.
+  &__value-leading {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+  }
+
   &__chevron {
-    --wr-icon-size: 1rem;
     flex: 0 0 auto;
     color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
@@ -171,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;
@@ -268,6 +291,17 @@
     user-select: none;
   }
 
+  // A selected option's leading visual — an avatar, an icon. Pulled toward the
+  // chip's start edge so a round avatar reads as the chip's cap rather than as a
+  // glyph floating in the padding, and spaced from the label by a little more
+  // than the chip's own gap.
+  &__chip-leading {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline: -0.25rem 0.125rem;
+  }
+
   &__chip-label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -275,7 +309,6 @@
   }
 
   &__chip-remove {
-    --wr-icon-size: 0.875rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -301,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;
@@ -424,6 +456,14 @@
     }
   }
 
+  // An option's leading visual — a sibling of the label inside the row's flex,
+  // so `--wr-option-inline-gap` spaces it like any projected icon.
+  &__leading {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+  }
+
   // Search-mode filter — out-of-match options collapse but stay in the
   // DOM so registration order survives the panel re-open.
   &--hidden {
@@ -461,6 +501,13 @@
     position: relative;
   }
 
+  // A virtual row is a block, not a flex row (one line, so it can ellipsize),
+  // so the leading visual takes its spacing as a margin instead of the gap.
+  .wr-option__leading {
+    vertical-align: middle;
+    margin-inline-end: var(--wr-option-inline-gap, 0.5rem);
+  }
+
   // Keyboard cursor highlight — the virtualized list is navigated by
   // aria-activedescendant, so real focus never lands on the row and the tint
   // is all there was. `--wr-color-hover` is translucent and lands within about
@@ -534,7 +581,6 @@
 
   .wr-select__chip-remove,
   .wr-select__clear {
-    --wr-icon-size: 1.125rem;
     width: 2rem;
     height: 2rem;
   }

package/skills/ngwr/references/catalog.md

@@ -171,7 +171,7 @@ root barrel for components.
 | `ngwr/scroll` | `import { WrScroll } from 'ngwr/scroll'` | — |
 | `ngwr/segmented` | `import { WrSegmented } from 'ngwr/segmented'` | `wr-segmented` |
 | `ngwr/segmented/testing` | `import { WrSegmentedHarness } from 'ngwr/segmented/testing'` | — |
-| `ngwr/select` | `import { WrSelect } from 'ngwr/select'` | `wr-option-group` `wr-option` `wr-select` |
+| `ngwr/select` | `import { WrSelect } from 'ngwr/select'` | `wr-option-group` `ng-template[wrOptionLeading]` `wr-option` `wr-select` |
 | `ngwr/select/testing` | `import { WrOptionHarness } from 'ngwr/select/testing'` | — |
 | `ngwr/shiny-text` | `import { WrShinyText } from 'ngwr/shiny-text'` | `[wrShimmer]` `wr-shiny-text` |
 | `ngwr/shiny-text/testing` | `import { WrShinyTextHarness } from 'ngwr/shiny-text/testing'` | — |

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

@@ -40,19 +40,38 @@ type WrAvatarSize = number | `${number}` | `${number}px` | `${number}rem`;
 /**
  * Image avatar with configurable corner treatment.
  *
- * A spinner is shown while the image loads, then crossfades in.
+ * Projected content (typically initials) is the FALLBACK: it shows with no
+ * `url`, while the image loads and after it fails, and leaves the paint once the
+ * image has loaded. It is projected into a `.wr-avatar__content` wrapper, so a
+ * `wr-avatar > …` child selector no longer reaches it. While it is there, no
+ * 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" />
- * <wr-avatar url="/me.png" alt="Roman" [size]="48" />
+ * <wr-avatar [url]="photo" alt="Roman Khegay" [size]="48">RK</wr-avatar>
  * ```
  *
  * @see https://ngwr.dev/reference/components/avatar
  */
 declare class WrAvatar {
     /**
-     * Image URL. When unset, only projected content (e.g. initials) renders.
+     * Image URL. Projected content (e.g. initials) shows while it is unset,
+     * loading or broken, and gives way once the image has loaded.
      *
      * @default null
      */
@@ -61,6 +80,11 @@ declare class WrAvatar {
      * Alt text for the image. Falls back to `avatar.alt`, then `'Avatar'` — pass
      * the person's name where you have it, since that is what a reader wants.
      *
+     * With an `alt`, projected initials are hidden from assistive technology while
+     * an image is in play, so the name is announced once. Without one, the image
+     * carries only the generic name, so the initials stay announced beside it —
+     * visually hidden once it has loaded, never dropped.
+     *
      * @default null
      */
     readonly alt: _angular_core.InputSignal<string | null>;
@@ -73,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'
      */
@@ -85,8 +110,30 @@ declare class WrAvatar {
      * worth showing instead.
      */
     protected readonly failed: _angular_core.WritableSignal<boolean>;
+    private readonly img;
     constructor();
+    /**
+     * A prerendered `<img>` starts loading when the browser parses the HTML, and
+     * `(load)` / `(error)` are only attached at hydration — so on a slow bundle the
+     * image settles first, both events go nowhere, and the avatar sits on its
+     * fallback over a photo it already has (or names a broken image it never
+     * learns about). Only the FIRST render can race: every later `<img>` is
+     * created on the client with its listeners in place before `src` is set.
+     */
+    private adoptSettledImage;
     protected readonly resolved: _angular_core.Signal<ResolvedCssSize>;
+    /**
+     * Whether the projected fallback is `aria-hidden`: an `<img>` is in the DOM
+     * (loading or loaded) AND the consumer named it. Then the image's `alt` owns
+     * the name, announced once and unchanged at the moment the photo arrives.
+     * Without a real `alt` the image is only "Avatar", and hiding the initials
+     * would drop the one thing that says who this is.
+     *
+     * The stylesheet keys on the same attribute once `--loaded`: a hidden fallback
+     * leaves the paint through `visibility`, a named-by-initials one is clipped and
+     * stays in the accessibility tree. While loading it is painted either way.
+     */
+    protected readonly fallbackHidden: _angular_core.Signal<boolean>;
     protected readonly cssSize: _angular_core.Signal<string>;
     protected readonly pxSize: _angular_core.Signal<number | null>;
     protected readonly classes: _angular_core.Signal<string>;

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

@@ -72,9 +72,10 @@ interface WrCropWindowBox {
  * arrives on the `(cropped)` output, which emits a `Blob` after each drag end or
  * each run of arrow keys, and a consumer who wants a one-off read calls `toBlob()` /
  * `toDataUrl()` — or `cropRect()` for the geometry — on the component through a
- * `viewChild`. An output and three instance members: component API rather than DOM,
- * so all of it is outside what a harness can reach at all, which is worth knowing
- * rather than discovering.
+ * `viewChild`. The same goes for `(loadError)` and `status()`, which is why
+ * {@link isFailed} reads the failure off the host class instead. Outputs and instance
+ * members are component API rather than DOM, so all of it is outside what a harness
+ * can reach at all, which is worth knowing rather than discovering.
  *
  * @example
  * ```ts
@@ -127,6 +128,27 @@ declare class WrImageCropperHarness extends ComponentHarness {
      * a zero-sized image.
      */
     dispatchImageLoad(): Promise<void>;
+    /**
+     * Fire the image's `error` event — what a browser does with a source it cannot
+     * decode, and the only way to get one in a unit test, where nothing is decoded.
+     *
+     * Afterwards {@link isFailed} is `true` and the component has emitted
+     * `(loadError)`; a spec that wants the payload binds that output on its host.
+     */
+    dispatchImageError(): Promise<void>;
+    /**
+     * Whether the browser failed to decode the current source.
+     *
+     * Read off the `wr-image-cropper--failed` host modifier — the part of the failure
+     * the DOM shows. It is a third answer beside {@link isEmpty} and {@link isReady},
+     * not a combination of them: a failed cropper has a `src` (so it is not empty) and
+     * no crop window (so it is not ready), which is also exactly what a cropper still
+     * LOADING looks like. Asking those two would call a broken image a slow one.
+     *
+     * The component renders no message for it, so there is no text to read here; the
+     * host's own message is the host's to assert.
+     */
+    isFailed(): Promise<boolean>;
     /**
      * Where the crop window sits over the displayed image, in CSS pixels.
      *