ngwr 14.3.1 → 14.5.0

package/README.md

@@ -1,4 +1,4 @@
-# <img src="https://ngwr.dev/images/logo.svg" alt="ngwr logo" height="32px">
+# <a href="https://ngwr.dev"><img src="https://ngwr.dev/images/logo.svg" alt="ngwr" height="32px"></a>
 
 [![ngwr website](https://img.shields.io/badge/ngwr.dev-3969e2)](https://ngwr.dev)
 [![ngwr version](https://img.shields.io/github/package-json/v/thekhegay/ngwr?filename=projects%2Flib%2Fpackage.json&color=%23e21a62)](https://www.npmjs.com/package/ngwr)
@@ -19,7 +19,7 @@ value controls implement `FormValueControl` / `FormCheckboxControl` themselves,
 so `[formField]` writes the component's own `value` / `checked` model — there
 is not one `ControlValueAccessor` in the library. Zoneless by construction, not
 zoneless-compatible: signal inputs, signal state, `afterNextRender()` for DOM
-work, and no `@NgModule` or `@Input()` decorator anywhere in the source. 225
+work, and no `@NgModule` or `@Input()` decorator anywhere in the source. 227
 tree-shakable entry points, on `@angular/cdk` for overlay, portal and a11y
 primitives.
 
@@ -309,7 +309,7 @@ export class ProfileForm {
 
 **Buttons** — [button](https://ngwr.dev/reference/components/button), [button-group](https://ngwr.dev/reference/components/button-group), [speed-dial](https://ngwr.dev/reference/components/speed-dial).
 
-**Data** — [drag-drop](https://ngwr.dev/reference/components/drag-drop), [event-calendar](https://ngwr.dev/reference/components/event-calendar), [pagination](https://ngwr.dev/reference/components/pagination), [pull-to-refresh](https://ngwr.dev/reference/components/pull-to-refresh), [table](https://ngwr.dev/reference/components/table), [tree](https://ngwr.dev/reference/components/tree), [virtual-scroll](https://ngwr.dev/reference/components/virtual-scroll).
+**Data** — [drag-drop](https://ngwr.dev/reference/components/drag-drop), [event-calendar](https://ngwr.dev/reference/components/event-calendar), [graph](https://ngwr.dev/reference/components/graph), [pagination](https://ngwr.dev/reference/components/pagination), [pull-to-refresh](https://ngwr.dev/reference/components/pull-to-refresh), [table](https://ngwr.dev/reference/components/table), [tree](https://ngwr.dev/reference/components/tree), [virtual-scroll](https://ngwr.dev/reference/components/virtual-scroll).
 
 **Feedback** — [alert](https://ngwr.dev/reference/components/alert), [empty](https://ngwr.dev/reference/components/empty), [progress](https://ngwr.dev/reference/components/progress), [result](https://ngwr.dev/reference/components/result), [skeleton](https://ngwr.dev/reference/components/skeleton), [spinner](https://ngwr.dev/reference/components/spinner).
 
@@ -371,7 +371,7 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 - **CDK-powered.** Overlays, portals, and a11y come from `@angular/cdk`. We add `provideWrOverlay()` so NGWR overlays never collide with other CDK consumers (Material, NG-ZORRO, etc.).
 - **Mobile & responsive.** Overlays collapse to bottom-sheets on small screens (`provideWrResponsiveOverlays()`), touch targets grow to ≥44px on coarse pointers, a `touch` density preset enlarges the nine control families that read the multipliers, and drawer / lightbox / toast / carousel respond to swipe gestures. Fixed surfaces respect `env(safe-area-inset-*)`, and layout components (`descriptions`, `stepper`, `page-header`, `toolbar`, `pagination`, `table`) reflow to their container via container queries. [Guide](https://ngwr.dev/guides/mobile).
 - **Table, batteries included.** `wr-table` covers column pinning / resizing / drag-reorder, row selection, expandable rows, grouping, tree rows (`childrenKey` — the forest flattens into the same `<tbody>`, so pinning and cell templates keep working at every depth, and the table announces a `treegrid`), summary rows, CSV export (`exportCsv()`, dependency-free RFC 4180) and a virtualized body — all opt-in inputs on the one component. Excel (`.xlsx`) export is deliberately not shipped: it would mean a third-party dependency.
-- **Tree-shakable.** 225 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~4 KB gzipped, the heaviest (`ngwr/markdown`) ~23 KB. Every runtime bundle together gzips to ~690 KB — the 70 `ngwr/<name>/testing` harnesses aside, since they never reach an app bundle — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
+- **Tree-shakable.** 227 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~4 KB gzipped, the heaviest (`ngwr/markdown`) ~23 KB. Every runtime bundle together gzips to ~690 KB — the 71 `ngwr/<name>/testing` harnesses aside, since they never reach an app bundle — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
 - **Modular SCSS.** Component styles are scoped through CSS custom properties. Theme tokens live in `ngwr/theme`; utilities (`grid`, `reset`) and the breakpoints SCSS API are opt-in.
 - **Tree-shaken icons.** `provideWrIcons(lucideIcons({ plus: Plus }))` registers only the icons you actually import. Dev-mode validation warns about unregistered icons.
 - **Reactbits ports, dependency-free.** All animation ports are reimplemented with vanilla DOM + Web Animations API / `IntersectionObserver` / `requestAnimationFrame` / raw WebGL — no GSAP, no `motion/react`, no `matter-js`, no `ogl`.

package/avatar/styles/_index.scss

@@ -26,7 +26,7 @@
 
   &--squircle {
     // iOS-style smooth corners. `corner-shape: squircle` is supported
-    // in Chrome 145+; browsers without it fall back to the same 10%
+    // where supported; browsers without it fall back to the same 10%
     // radius as `shape="rounded"`, which is the closest visual match.
     @include theme.smooth-br(18%);
   }
@@ -49,7 +49,9 @@
 
   &__spin {
     position: absolute;
-    color: var(--wr-color-text-faint);
+    // Same as the textarea grip: a loading indicator is a status GRAPHIC that
+    // 1.4.11 holds to 3:1, and the faint tier is 2.43:1 in light.
+    color: var(--wr-color-on-surface-muted);
     --wr-spinner-size: 40%;
   }
 }

package/badge/styles/_index.scss

@@ -64,7 +64,7 @@
   }
 
   // Squircle — overrides the plain `border-radius` with the
-  // `corner-shape: squircle` mixin so supporting browsers (Chrome 145+)
+  // `corner-shape: squircle` mixin so supporting browsers (where supported)
   // render iOS-style continuous-curvature corners.
   &--squircle {
     @include theme.smooth-br(var(--wr-badge-radius));
@@ -117,6 +117,9 @@
       }
     }
 
+    // color-ok: this ADDS a hairline no other intent carries — `light` is a
+    // near-surface tone, so without it the badge has no edge at all. A border
+    // appearing is the channel; its colour is incidental.
     &.wr-badge--light {
       box-shadow: inset 0 0 0 1px var(--wr-color-outline);
     }

package/badge/styles/_tag.scss

@@ -98,6 +98,9 @@
   // `light` outlined, after the loop for the same reason the badge carries the
   // same rule: 30% of a surface tone is not a line. At full strength it IS
   // `--wr-color-outline`, which is already this component's default border.
+  // color-ok: every outlined tag already draws a border — this only gives the
+  // one intent that cannot tint one a literal colour. Telling two INTENTS
+  // apart on a bare tag is the open half of D7 and is not what this rule does.
   &--light.wr-tag--outlined {
     --wr-tag-border: var(--wr-color-outline);
   }

package/cascader/styles/_rules.scss

@@ -94,6 +94,9 @@
     cursor: default;
   }
 
+  // color-ok: opening attaches the panel and flips the chevron 180deg, so the
+  // state is a thing appearing and a glyph rotating; this only tints the edge
+  // underneath both.
   &--open &__trigger {
     border-color: var(--wr-color-primary);
     box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);

package/command-palette/styles/_index.scss

@@ -122,11 +122,30 @@
     font-size: var(--wr-text-sm);
     line-height: var(--wr-leading-tight);
     user-select: none;
+    // Positioning context for the `--active` cursor bar below. The option is a
+    // flex row with nothing out of flow inside it, so it establishes none today.
+    position: relative;
 
+    // The bar is the channel. The tint alone measures 1.17:1 against a plain
+    // row in light and 1.12:1 in dark — a hue shift, not a lightness step — and
+    // this component cannot fall back on a focus ring: focus stays in the
+    // search field by design and the rows carry no tabindex, so the row the
+    // arrows have reached is announced by `aria-activedescendant` and drawn by
+    // nothing else.
     &--active {
       background: var(--wr-color-primary-soft);
       // Text on the `-soft` tint: `-ink`. Bare measured 4.17:1 light / 3.65:1 dark.
       color: var(--wr-color-primary-ink);
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+        width: 2px;
+        border-radius: inherit;
+        background: var(--wr-color-primary);
+      }
     }
   }
 
@@ -140,6 +159,8 @@
     justify-content: center;
   }
 
+  // color-ok: this follows the active ROW, which carries the cursor bar —
+  // it re-inks a glyph that is on every option either way.
   &__option--active &__option-icon {
     color: var(--wr-color-primary);
   }
@@ -152,6 +173,8 @@
   // state that walks past prerendered HTML and a page at rest alike. Putting the chip
   // back on the surface restores the pairing the muted role is calibrated for, and
   // keeps the chip reading as a keycap rather than as part of the highlight.
+  // color-ok: same — the row is marked by its bar; this only restores the
+  // keycap's own surface, for the contrast reason written above.
   &__option--active &__option-shortcut {
     background: var(--wr-color-surface);
   }

package/context-menu/styles/_index.scss

@@ -29,9 +29,21 @@
     opacity var(--wr-overlay-duration) var(--wr-overlay-ease),
     transform var(--wr-overlay-duration) var(--wr-overlay-ease);
 
+  // Inert while it is not open, which covers the CLOSING half as well as the
+  // opening one. The directive removes `--open` to start the exit and keeps the
+  // pane in the DOM for the transition, so for those 220 ms a menu that is
+  // visibly fading away still took clicks — the row the user had just picked
+  // stayed pickable, and a second click during the fade ran the command again.
+  // `opacity: 0` alone does not stop a pointer.
+  pointer-events: none;
+
+  // color-ok: opacity and transform are the animation, and the state is also
+  // carried by `pointer-events` below — a menu that is not open is inert, which
+  // is a behaviour difference rather than a colour one.
   &--open {
     opacity: 1;
     transform: scale(1);
+    pointer-events: auto;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -46,7 +58,7 @@
   background: var(--wr-color-surface, #fff);
   border: 1px solid var(--wr-color-outline);
   // Soft rounded corners — smooth-br opts into native `corner-shape:
-  // squircle` where supported (Chrome 145+) and falls back to plain
+  // squircle` where supported, and falls back to plain
   // border-radius elsewhere.
   @include theme.smooth-br(var(--wr-border-radius-base));
   box-shadow: var(--wr-shadow-overlay);

package/fesm2022/ngwr-action-sheet.mjs

@@ -75,10 +75,10 @@ class WrActionSheet {
         this.action.emit(item);
         this.open.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleFallback: { classPropertyName: "titleFallback", publicName: "titleFallback", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape", "closable", "closeLabel"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleFallback: { classPropertyName: "titleFallback", publicName: "titleFallback", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape", "closable", "closeLabel"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrActionSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrActionSheet, decorators: [{
             type: Component,
             args: [{ selector: 'wr-action-sheet', encapsulation: ViewEncapsulation.None, imports: [WrDrawer, WrDrawerTitle, WrIcon], template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleFallback", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });

package/fesm2022/ngwr-affix.mjs

@@ -85,7 +85,20 @@ class WrAffix {
             effect(onCleanup => {
                 const offset = this.offsetTop();
                 observer = new IntersectionObserver(([entry]) => {
-                    const next = !entry.isIntersecting;
+                    // NOT `!entry.isIntersecting` on its own. A sentinel is outside
+                    // the root in TWO directions, and only one of them means the
+                    // header has stuck: above the line because the page scrolled past
+                    // it, or below it because the host simply starts further down the
+                    // page than the first screen. The bare negation called both
+                    // "affixed", so any sticky element below the fold reported
+                    // `affixed = true` and painted `.wr-affix--active` on its very
+                    // first observer callback — before a pixel had scrolled — and
+                    // emitted a transition that never happened.
+                    //
+                    // `rootBounds.top` is the offset line (the negative `rootMargin`
+                    // above moves it), so a sentinel above it has genuinely gone by.
+                    const rootTop = entry.rootBounds?.top ?? offset;
+                    const next = !entry.isIntersecting && entry.boundingClientRect.top < rootTop;
                     if (next === affixed)
                         return;
                     affixed = next;
@@ -106,10 +119,10 @@ class WrAffix {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: WrAffix, isStandalone: true, selector: "[wrAffix]", inputs: { offsetTop: { classPropertyName: "offsetTop", publicName: "wrAffixOffsetTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { affixChange: "wrAffixChange" }, host: { properties: { "style.position": "\"sticky\"", "style.top.px": "offsetTop()" }, classAttribute: "wr-affix" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: WrAffix, isStandalone: true, selector: "[wrAffix]", inputs: { offsetTop: { classPropertyName: "offsetTop", publicName: "wrAffixOffsetTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { affixChange: "wrAffixChange" }, host: { properties: { "style.position": "\"sticky\"", "style.top.px": "offsetTop()" }, classAttribute: "wr-affix" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAffix, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAffix, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrAffix]',

package/fesm2022/ngwr-affix.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-affix.mjs","sources":["../../../projects/lib/affix/affix.ts","../../../projects/lib/affix/ngwr-affix.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\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  Injector,\n  PLATFORM_ID,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\n/**\n * Stick-on-scroll directive. Combines native CSS `position: sticky` with\n * an `IntersectionObserver`-driven `wr-affix--active` state class, so consumers\n * can style the element differently while it's pinned (e.g. add a\n * shadow, change the background, shrink the height).\n *\n * The host gets `position: sticky; top: ${offsetTop}px;` inline. A tiny\n * sentinel `<div>` is inserted just before the host — when the sentinel\n * scrolls out of view, the host is \"stuck\" and gets `wr-affix--active`\n * + an `(wrAffixChange)` emission.\n *\n * Works inside any scroll container without configuration — CSS sticky\n * picks the nearest scrollable ancestor automatically.\n *\n * @example\n * ```html\n * <header wrAffix [wrAffixOffsetTop]=\"0\">\n *   <!-- adds a shadow once stuck -->\n * </header>\n * ```\n *\n * ```scss\n * header.wr-affix.wr-affix--active {\n *   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\n@Directive({\n  selector: '[wrAffix]',\n  host: {\n    class: 'wr-affix',\n    '[style.position]': '\"sticky\"',\n    '[style.top.px]': 'offsetTop()',\n  },\n})\nexport class WrAffix {\n  /** Pixels from the top of the scroll container when stuck. @default 0 */\n  readonly offsetTop = input(0, {\n    alias: 'wrAffixOffsetTop',\n    transform: (v: unknown): number => coerceNumberProperty(v, 0),\n  });\n\n  /** Emits `true` when the element becomes affixed, `false` when it unsticks. */\n  // eslint-disable-next-line @angular-eslint/no-output-rename -- keep wr-prefixed binding to match `[wrAffix]`\n  readonly affixChange = output<boolean>({ alias: 'wrAffixChange' });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  /**\n   * `afterNextRender`'s callback is not an injection context, and the observer\n   * cannot exist before the sentinel it watches — so the effect that rebuilds it\n   * is handed the injector explicitly.\n   */\n  private readonly injector = inject(Injector);\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      const el = this.host.nativeElement;\n      const parent = el.parentElement;\n      if (!parent) return;\n\n      // Sentinel: an empty zero-height block placed immediately before\n      // the host. When the sentinel scrolls out of view, the host is\n      // necessarily \"stuck\" at the configured offset.\n      const sentinel = el.ownerDocument.createElement('div');\n      sentinel.className = 'wr-affix__sentinel';\n      sentinel.setAttribute('aria-hidden', 'true');\n      sentinel.style.cssText = 'height:0;width:100%;margin:0;padding:0;pointer-events:none;';\n      parent.insertBefore(sentinel, el);\n\n      // The observer reports STATE, not transitions: it delivers an entry for the\n      // sentinel as soon as it starts watching it — before anything has scrolled —\n      // and can repeat a state the host is already in (a resize, another crossing of\n      // the same threshold). `affixChange` is documented as the transition, so it\n      // only fires on one. The starting state is \"not affixed\", which is what the\n      // element already renders as, so that first entry is silent.\n      let affixed = false;\n\n      let observer: IntersectionObserver | null = null;\n\n      // `rootMargin` is fixed for an observer's lifetime, so a changed offset means\n      // a NEW observer. Without this the two halves of the offset drifted apart:\n      // `[style.top.px]` is a live binding, so a header that animates its offset\n      // pinned at the new line while still flipping state at the old one.\n      // Re-observing re-delivers the current state, which the transition guard\n      // above absorbs when nothing has actually changed.\n      effect(\n        onCleanup => {\n          const offset = this.offsetTop();\n\n          observer = new IntersectionObserver(\n            ([entry]) => {\n              const next = !entry.isIntersecting;\n              if (next === affixed) return;\n\n              affixed = next;\n              el.classList.toggle('wr-affix--active', next);\n              this.affixChange.emit(next);\n            },\n            {\n              // Trigger when the sentinel's top crosses the offset line.\n              rootMargin: `-${offset}px 0px 0px 0px`,\n              threshold: [0],\n            }\n          );\n          observer.observe(sentinel);\n\n          onCleanup(() => observer?.disconnect());\n        },\n        { injector: this.injector }\n      );\n\n      this.destroyRef.onDestroy(() => {\n        observer?.disconnect();\n        sentinel.remove();\n        el.classList.remove('wr-affix--active');\n      });\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-affix.mjs","sources":["../../../projects/lib/affix/affix.ts","../../../projects/lib/affix/ngwr-affix.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\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  Injector,\n  PLATFORM_ID,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\n/**\n * Stick-on-scroll directive. Combines native CSS `position: sticky` with\n * an `IntersectionObserver`-driven `wr-affix--active` state class, so consumers\n * can style the element differently while it's pinned (e.g. add a\n * shadow, change the background, shrink the height).\n *\n * The host gets `position: sticky; top: ${offsetTop}px;` inline. A tiny\n * sentinel `<div>` is inserted just before the host — when the sentinel\n * scrolls out of view, the host is \"stuck\" and gets `wr-affix--active`\n * + an `(wrAffixChange)` emission.\n *\n * Works inside any scroll container without configuration — CSS sticky\n * picks the nearest scrollable ancestor automatically.\n *\n * @example\n * ```html\n * <header wrAffix [wrAffixOffsetTop]=\"0\">\n *   <!-- adds a shadow once stuck -->\n * </header>\n * ```\n *\n * ```scss\n * header.wr-affix.wr-affix--active {\n *   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\n@Directive({\n  selector: '[wrAffix]',\n  host: {\n    class: 'wr-affix',\n    '[style.position]': '\"sticky\"',\n    '[style.top.px]': 'offsetTop()',\n  },\n})\nexport class WrAffix {\n  /** Pixels from the top of the scroll container when stuck. @default 0 */\n  readonly offsetTop = input(0, {\n    alias: 'wrAffixOffsetTop',\n    transform: (v: unknown): number => coerceNumberProperty(v, 0),\n  });\n\n  /** Emits `true` when the element becomes affixed, `false` when it unsticks. */\n  // eslint-disable-next-line @angular-eslint/no-output-rename -- keep wr-prefixed binding to match `[wrAffix]`\n  readonly affixChange = output<boolean>({ alias: 'wrAffixChange' });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  /**\n   * `afterNextRender`'s callback is not an injection context, and the observer\n   * cannot exist before the sentinel it watches — so the effect that rebuilds it\n   * is handed the injector explicitly.\n   */\n  private readonly injector = inject(Injector);\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      const el = this.host.nativeElement;\n      const parent = el.parentElement;\n      if (!parent) return;\n\n      // Sentinel: an empty zero-height block placed immediately before\n      // the host. When the sentinel scrolls out of view, the host is\n      // necessarily \"stuck\" at the configured offset.\n      const sentinel = el.ownerDocument.createElement('div');\n      sentinel.className = 'wr-affix__sentinel';\n      sentinel.setAttribute('aria-hidden', 'true');\n      sentinel.style.cssText = 'height:0;width:100%;margin:0;padding:0;pointer-events:none;';\n      parent.insertBefore(sentinel, el);\n\n      // The observer reports STATE, not transitions: it delivers an entry for the\n      // sentinel as soon as it starts watching it — before anything has scrolled —\n      // and can repeat a state the host is already in (a resize, another crossing of\n      // the same threshold). `affixChange` is documented as the transition, so it\n      // only fires on one. The starting state is \"not affixed\", which is what the\n      // element already renders as, so that first entry is silent.\n      let affixed = false;\n\n      let observer: IntersectionObserver | null = null;\n\n      // `rootMargin` is fixed for an observer's lifetime, so a changed offset means\n      // a NEW observer. Without this the two halves of the offset drifted apart:\n      // `[style.top.px]` is a live binding, so a header that animates its offset\n      // pinned at the new line while still flipping state at the old one.\n      // Re-observing re-delivers the current state, which the transition guard\n      // above absorbs when nothing has actually changed.\n      effect(\n        onCleanup => {\n          const offset = this.offsetTop();\n\n          observer = new IntersectionObserver(\n            ([entry]) => {\n              // NOT `!entry.isIntersecting` on its own. A sentinel is outside\n              // the root in TWO directions, and only one of them means the\n              // header has stuck: above the line because the page scrolled past\n              // it, or below it because the host simply starts further down the\n              // page than the first screen. The bare negation called both\n              // \"affixed\", so any sticky element below the fold reported\n              // `affixed = true` and painted `.wr-affix--active` on its very\n              // first observer callback — before a pixel had scrolled — and\n              // emitted a transition that never happened.\n              //\n              // `rootBounds.top` is the offset line (the negative `rootMargin`\n              // above moves it), so a sentinel above it has genuinely gone by.\n              const rootTop = entry.rootBounds?.top ?? offset;\n              const next = !entry.isIntersecting && entry.boundingClientRect.top < rootTop;\n              if (next === affixed) return;\n\n              affixed = next;\n              el.classList.toggle('wr-affix--active', next);\n              this.affixChange.emit(next);\n            },\n            {\n              // Trigger when the sentinel's top crosses the offset line.\n              rootMargin: `-${offset}px 0px 0px 0px`,\n              threshold: [0],\n            }\n          );\n          observer.observe(sentinel);\n\n          onCleanup(() => observer?.disconnect());\n        },\n        { injector: this.injector }\n      );\n\n      this.destroyRef.onDestroy(() => {\n        observer?.disconnect();\n        sentinel.remove();\n        el.classList.remove('wr-affix--active');\n      });\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-alert.mjs

@@ -89,16 +89,16 @@ class WrAlert {
         this.dismissed.set(true);
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws \u2014 at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints \u2014\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart \u2014 is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAlert, decorators: [{
             type: Component,
             args: [{ selector: 'wr-alert', imports: [WrIcon], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
                         '[attr.role]': 'liveRole()',
                         '[attr.aria-live]': 'liveLevel()',
-                    }, template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n" }]
+                    }, template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws \u2014 at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints \u2014\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart \u2014 is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n" }]
         }], propDecorators: { closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**

package/fesm2022/ngwr-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-alert.mjs","sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html","../../../projects/lib/alert/ngwr-alert.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\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\nimport type { WrAlertType } from './interfaces';\n\n/**\n * Inline status banner. Use for feedback messages — saved/failed/notice etc.\n *\n * @example\n * ```html\n * <wr-alert title=\"Saved\" message=\"Your changes are live.\" type=\"success\" />\n * <wr-alert title=\"Failed\" type=\"danger\" closable (closed)=\"onClose()\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/alert\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.html',\n  imports: [WrIcon],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': 'liveRole()',\n    '[attr.aria-live]': 'liveLevel()',\n  },\n})\nexport class WrAlert {\n  /** Accessible name. Falls back to `alert.close`, then `'Close alert'`. */\n  readonly closeLabel = input<string | null>(null);\n\n  protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'alert.close', 'Close alert');\n\n  /**\n   * Optional headline shown at the top of the alert.\n   *\n   * @default null\n   */\n  readonly title = input<string | null>(null);\n\n  /**\n   * Visual variant.\n   *\n   * @default 'info'\n   */\n  readonly type = input<WrAlertType>('info');\n\n  /**\n   * Override the default per-type icon with any ngwr icon name.\n   *\n   * @default null\n   */\n  readonly iconName = input<WrIconName | null>(null);\n\n  /**\n   * Optional secondary message rendered below the title.\n   *\n   * @default null\n   */\n  readonly message = input<string | null>(null);\n\n  /**\n   * When `true`, renders a leading status icon matching the `type`.\n   * Pass `false` to hide. Ignored when `iconName` is set.\n   *\n   * @default true\n   */\n  readonly icon = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * When `true`, renders a close button.\n   *\n   * @default false\n   */\n  readonly closable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Emitted when the user dismisses the alert via the close button.\n   */\n  readonly closed = output<void>();\n\n  protected readonly dismissed = signal(false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-alert', `wr-alert--${this.type()}`];\n    if (this.dismissed()) parts.push('wr-alert--dismissed');\n    return parts.join(' ');\n  });\n\n  /** Escalate role/aria-live for danger/warning alerts. */\n  protected readonly liveRole = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' ? 'alert' : 'status'\n  );\n  protected readonly liveLevel = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' || this.type() === 'warning' ? 'assertive' : 'polite'\n  );\n\n  protected onClose(): void {\n    this.dismissed.set(true);\n    this.closed.emit();\n  }\n}\n","@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-alert.mjs","sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html","../../../projects/lib/alert/ngwr-alert.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\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\nimport type { WrAlertType } from './interfaces';\n\n/**\n * Inline status banner. Use for feedback messages — saved/failed/notice etc.\n *\n * @example\n * ```html\n * <wr-alert title=\"Saved\" message=\"Your changes are live.\" type=\"success\" />\n * <wr-alert title=\"Failed\" type=\"danger\" closable (closed)=\"onClose()\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/alert\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.html',\n  imports: [WrIcon],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': 'liveRole()',\n    '[attr.aria-live]': 'liveLevel()',\n  },\n})\nexport class WrAlert {\n  /** Accessible name. Falls back to `alert.close`, then `'Close alert'`. */\n  readonly closeLabel = input<string | null>(null);\n\n  protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'alert.close', 'Close alert');\n\n  /**\n   * Optional headline shown at the top of the alert.\n   *\n   * @default null\n   */\n  readonly title = input<string | null>(null);\n\n  /**\n   * Visual variant.\n   *\n   * @default 'info'\n   */\n  readonly type = input<WrAlertType>('info');\n\n  /**\n   * Override the default per-type icon with any ngwr icon name.\n   *\n   * @default null\n   */\n  readonly iconName = input<WrIconName | null>(null);\n\n  /**\n   * Optional secondary message rendered below the title.\n   *\n   * @default null\n   */\n  readonly message = input<string | null>(null);\n\n  /**\n   * When `true`, renders a leading status icon matching the `type`.\n   * Pass `false` to hide. Ignored when `iconName` is set.\n   *\n   * @default true\n   */\n  readonly icon = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * When `true`, renders a close button.\n   *\n   * @default false\n   */\n  readonly closable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Emitted when the user dismisses the alert via the close button.\n   */\n  readonly closed = output<void>();\n\n  protected readonly dismissed = signal(false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-alert', `wr-alert--${this.type()}`];\n    if (this.dismissed()) parts.push('wr-alert--dismissed');\n    return parts.join(' ');\n  });\n\n  /** Escalate role/aria-live for danger/warning alerts. */\n  protected readonly liveRole = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' ? 'alert' : 'status'\n  );\n  protected readonly liveLevel = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' || this.type() === 'warning' ? 'assertive' : 'polite'\n  );\n\n  protected onClose(): void {\n    this.dismissed.set(true);\n    this.closed.emit();\n  }\n}\n","@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws — at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints —\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart — is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-anchor.mjs

@@ -99,10 +99,10 @@ class WrAnchor {
         this.scroll.to(`#${id}`, { offset: this.offset() });
         this.activeId.set(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrAnchor, isStandalone: true, selector: "wr-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, hitArea: { classPropertyName: "hitArea", publicName: "hitArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "wr-anchor" }, ngImport: i0, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrAnchor, isStandalone: true, selector: "wr-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, hitArea: { classPropertyName: "hitArea", publicName: "hitArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "wr-anchor" }, ngImport: i0, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAnchor, decorators: [{
             type: Component,
             args: [{ selector: 'wr-anchor', encapsulation: ViewEncapsulation.None, host: { class: 'wr-anchor', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' }, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n" }]
         }], ctorParameters: () => [], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], hitArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hitArea", required: false }] }] } });

package/fesm2022/ngwr-aurora.mjs

@@ -294,10 +294,10 @@ class WrAurora {
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: WrAurora, isStandalone: true, selector: "wr-aurora", inputs: { colorStops: { classPropertyName: "colorStops", publicName: "colorStops", isSignal: true, isRequired: false, transformFunction: null }, amplitude: { classPropertyName: "amplitude", publicName: "amplitude", isSignal: true, isRequired: false, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "blend", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-aurora" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', isInline: true, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: WrAurora, isStandalone: true, selector: "wr-aurora", inputs: { colorStops: { classPropertyName: "colorStops", publicName: "colorStops", isSignal: true, isRequired: false, transformFunction: null }, amplitude: { classPropertyName: "amplitude", publicName: "amplitude", isSignal: true, isRequired: false, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "blend", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-aurora" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', isInline: true, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAurora, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAurora, decorators: [{
             type: Component,
             args: [{ selector: 'wr-aurora', template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', encapsulation: ViewEncapsulation.None, host: { class: 'wr-aurora' }, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { colorStops: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorStops", required: false }] }], amplitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "amplitude", required: false }] }], blend: [{ type: i0.Input, args: [{ isSignal: true, alias: "blend", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });

package/fesm2022/ngwr-avatar.mjs

@@ -104,10 +104,10 @@ class WrAvatar {
     onImageError() {
         this.failed.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrAvatar, isStandalone: true, selector: "wr-avatar", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.width": "cssSize()", "style.height": "cssSize()" } }, ngImport: i0, template: "<ng-content />\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\n      class=\"wr-avatar__img\"\n      [src]=\"src\"\n      [alt]=\"resolvedAlt()\"\n      [attr.width]=\"pxSize()\"\n      [attr.height]=\"pxSize()\"\n      (load)=\"onImageLoad()\"\n      (error)=\"onImageError()\"\n      decoding=\"async\"\n    />\n\n    @if (!loaded()) {\n      <wr-spinner class=\"wr-avatar__spin\" />\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrAvatar, isStandalone: true, selector: "wr-avatar", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.width": "cssSize()", "style.height": "cssSize()" } }, ngImport: i0, template: "<ng-content />\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\n      class=\"wr-avatar__img\"\n      [src]=\"src\"\n      [alt]=\"resolvedAlt()\"\n      [attr.width]=\"pxSize()\"\n      [attr.height]=\"pxSize()\"\n      (load)=\"onImageLoad()\"\n      (error)=\"onImageError()\"\n      decoding=\"async\"\n    />\n\n    @if (!loaded()) {\n      <wr-spinner class=\"wr-avatar__spin\" />\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAvatar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-avatar', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-back-top.mjs

@@ -74,10 +74,10 @@ class WrBackTop {
     onClick() {
         this.scroll.toTop({ offset: this.offset() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrBackTop, isStandalone: true, selector: "wr-back-top", inputs: { visibilityThreshold: { classPropertyName: "visibilityThreshold", publicName: "visibilityThreshold", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "!visible()", "attr.inert": "visible() ? null : ''" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\n  <!-- The arrow is FALLBACK content: rendered next to a projected icon rather\n       than instead of it, the documented custom-icon example put two glyphs in\n       one 44px circle. -->\n  <ng-content>\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </ng-content>\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrBackTop, isStandalone: true, selector: "wr-back-top", inputs: { visibilityThreshold: { classPropertyName: "visibilityThreshold", publicName: "visibilityThreshold", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "!visible()", "attr.inert": "visible() ? null : ''" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\n  <!-- The arrow is FALLBACK content: rendered next to a projected icon rather\n       than instead of it, the documented custom-icon example put two glyphs in\n       one 44px circle. -->\n  <ng-content>\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </ng-content>\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrBackTop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBackTop, decorators: [{
             type: Component,
             args: [{ selector: 'wr-back-top', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-badge.mjs

@@ -69,10 +69,10 @@ class WrBadge {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrBadge, isStandalone: true, selector: "wr-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrBadge, isStandalone: true, selector: "wr-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBadge, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-badge',
@@ -176,10 +176,10 @@ class WrTag {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrTag, isStandalone: true, selector: "wr-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (iconPosition() === 'start') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n\n<ng-content />\n\n@if (iconPosition() === 'end') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrTag, isStandalone: true, selector: "wr-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (iconPosition() === 'start') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n\n<ng-content />\n\n@if (iconPosition() === 'end') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrTag, decorators: [{
             type: Component,
             args: [{ selector: 'wr-tag', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrIcon, WrSpinner], template: "@if (iconPosition() === 'start') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n\n<ng-content />\n\n@if (iconPosition() === 'end') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n" }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });

package/fesm2022/ngwr-bar-chart-testing.mjs

@@ -93,9 +93,25 @@ class WrBarChartHarness extends ComponentHarness {
     async hasValues() {
         return (await this.locatorForOptional('.wr-bar-chart__value')()) !== null;
     }
-    /** The plot's height in pixels, as the component writes it inline. */
+    /**
+     * The plot's height in pixels, read off the `style` ATTRIBUTE.
+     *
+     * NOT `getCssValue()`, which is `getComputedStyle()` — the same rule this
+     * file's class note already states and this method alone broke. A computed
+     * read answers from the LAID-OUT box, so it agrees with the inline value in
+     * jsdom (which lays nothing out and echoes the declaration) and disagrees in a
+     * browser, where sub-pixel rounding turns a declared 240 into 239.5. A harness
+     * that answers differently in the two places it runs is worse than one that
+     * refuses.
+     */
     async getPlotHeight() {
-        return Number.parseFloat(await (await this.locatorFor('.wr-bar-chart__plot')()).getCssValue('height'));
+        const style = await (await this.locatorFor('.wr-bar-chart__plot')()).getAttribute('style');
+        const match = /height:\s*([\d.]+)px/.exec(style ?? '');
+        if (!match) {
+            throw new Error(`WrBarChartHarness.getPlotHeight(): no inline height on .wr-bar-chart__plot (style: "${style ?? ''}"). ` +
+                'The component writes one unconditionally, so its absence is the bug rather than a zero.');
+        }
+        return Number.parseFloat(match[1]);
     }
 }