ngwr 12.0.0 → 12.2.0

package/README.md

@@ -7,9 +7,61 @@
 [![coverage](https://codecov.io/gh/thekhegay/ngwr/branch/main/graph/badge.svg)](https://codecov.io/gh/thekhegay/ngwr)
 [![license](https://img.shields.io/npm/l/ngwr)](https://github.com/thekhegay/ngwr/blob/main/LICENSE)
 
-**NGWR** is a modern Angular UI library — standalone components, signals-first,
-zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
-`@angular/cdk` for overlay, portal, and a11y primitives.
+<!-- "Nineteen" is derived, not chosen: `grep -rn "implements .*Form\(Value\|Checkbox\)Control" projects/lib`
+     returns twenty class declarations, and the twentieth — `date-picker/internal/time-panel.ts` —
+     is exported by no `public-api.ts`. Seventeen implement `FormValueControl`; `wr-checkbox` and
+     `wr-switch` implement `FormCheckboxControl`. It is a count and not the word "every" on purpose:
+     `[wrColorPickerTrigger]` is public, carries its own `value` model, and implements neither.
+     Re-derive before editing the number. -->
+
+**NGWR is an Angular UI library that binds straight to Signal Forms.** Nineteen
+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. 202
+tree-shakable entry points, on `@angular/cdk` for overlay, portal and a11y
+primitives.
+
+**[Try it in the browser](https://ngwr.dev/start/playground)** — no install.
+**[How it compares](https://ngwr.dev/start/comparison)** — what the other
+Angular UI libraries do about Signal Forms today, counted rather than asserted.
+**[Docs and live demos](https://ngwr.dev)**.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { FormField, email, form, required } from '@angular/forms/signals';
+import { WrCheckbox } from 'ngwr/checkbox';
+import { WrFormField } from 'ngwr/form';
+import { WrInput } from 'ngwr/input';
+
+@Component({
+  selector: 'signup-card',
+  imports: [FormField, WrCheckbox, WrFormField, WrInput],
+  template: `
+    <wr-form-field label="Work email" required>
+      <input wrInput type="email" [formField]="signup.email" />
+    </wr-form-field>
+
+    <wr-checkbox [formField]="signup.agree">I agree to the terms</wr-checkbox>
+  `,
+})
+export class SignupCard {
+  private readonly model = signal({ email: '', agree: false });
+
+  // `[formField]` binds to the control's own `value` / `checked` model, and
+  // `<wr-form-field>` resolves the error copy from the i18n catalog — so
+  // neither an accessor nor a `<wr-form-error>` has to be written by hand.
+  readonly signup = form(this.model, path => {
+    required(path.email);
+    email(path.email);
+  });
+}
+```
+
+Classic `[(ngModel)]` and reactive forms still work — Angular 22 synthesises the
+accessor for a signal-forms control — and every control is usable standalone
+through its two-way `[(value)]` / `[(checked)]` model.
 
 > **Status:** active development. v12 is the current major line (Angular 22 peer).
 > Public API is stable across patch releases and still evolving between majors.
@@ -18,16 +70,18 @@ zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
 
 ## Requirements
 
-| Peer                        | Range                |
-| --------------------------- | -------------------- |
-| `@angular/core`             | `>= 22.0.0`          |
-| `@angular/common`           | `>= 22.0.0`          |
-| `@angular/cdk`              | `>= 22.0.0`          |
-| `@angular/platform-browser` | `>= 22.0.0`          |
-| `rxjs`                      | `^7.0.0`             |
-| `date-fns` _(optional)_     | `^3.0.0 \|\| ^4.0.0` |
-| `luxon` _(optional)_        | `^3.0.0`             |
-| `lucide` _(optional)_       | `>= 1.0.0`           |
+| Peer                           | Range                |
+| ------------------------------ | -------------------- |
+| `@angular/core`                | `>= 22.0.0`          |
+| `@angular/common`              | `>= 22.0.0`          |
+| `@angular/forms`               | `>= 22.0.0`          |
+| `@angular/cdk`                 | `>= 22.0.0`          |
+| `@angular/platform-browser`    | `>= 22.0.0`          |
+| `@angular/router` _(optional)_ | `>= 22.0.0`          |
+| `rxjs`                         | `^7.0.0`             |
+| `date-fns` _(optional)_        | `^3.0.0 \|\| ^4.0.0` |
+| `luxon` _(optional)_           | `^3.0.0`             |
+| `lucide` _(optional)_          | `>= 1.0.0`           |
 
 TypeScript `~6.0.x` (Angular 22's compiler declares `typescript >=6.0 <6.1`) and
 a Node version Angular 22 accepts — `^22.22.3 || ^24.15.0 || >=26`. Contributing
@@ -55,11 +109,16 @@ npm install ngwr @angular/cdk
 yarn add ngwr @angular/cdk
 ```
 
-Beyond Angular itself, `@angular/cdk` and `@angular/forms` are the required peers — forms because every value control implements a Signal Forms interface. `@angular/router` is optional, needed only by the navigation components that take a `routerLink`. A stock `ng new` app already has all three. Add an icon set and a date library
-only if you use them — `lucide` (or `feather-icons`) for the icon adapters, and
-`date-fns` or `luxon` for the calendar / date-picker, which otherwise runs on a
-built-in native `Date` adapter. The Quick start below registers a lucide icon, so
-it needs `lucide`:
+Beyond Angular itself, `@angular/cdk` and `@angular/forms` are the required
+peers — forms because the value controls implement its Signal Forms interfaces.
+`@angular/router` is optional, needed only by the navigation components that
+take a `routerLink`. A stock `ng new` app already ships forms and router, so
+`@angular/cdk` is the only one you have to add — which is why it is on the
+install lines above. Add an icon set and a date library only if you use them —
+`lucide` (or `feather-icons`) for the icon adapters, and `date-fns` or `luxon`
+for the calendar / date-picker, which otherwise runs on a built-in native
+`Date` adapter. The Quick start below registers a lucide icon, so it needs
+`lucide`:
 
 ```shell
 pnpm add lucide
@@ -146,7 +205,7 @@ export class AppComponent {
 }
 ```
 
-Every value control is Signal Forms-native, so `[formField]` binds straight
+Value controls are Signal Forms-native, so `[formField]` binds straight
 through — no `ControlValueAccessor` anywhere in the chain:
 
 ```ts
@@ -241,7 +300,7 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 ## Highlights
 
 - **Standalone & signals-first.** Every component is standalone and uses `input()` / `model()` / `output()` / `signal()` / `computed()`. Zoneless-ready.
-- **Signal Forms native.** Every value control implements `FormValueControl` / `FormCheckboxControl`, so `[formField]` binds straight through — there is no `ControlValueAccessor` in the library at all. `[(ngModel)]` and reactive forms keep working through Angular's bridge, and every control also works standalone via `[(value)]` / `[(checked)]`.
+- **Signal Forms native.** Nineteen value controls implement `FormValueControl` / `FormCheckboxControl`, so `[formField]` binds straight through — there is no `ControlValueAccessor` in the library at all. `[(ngModel)]` and reactive forms keep working through Angular's bridge, and every control also works standalone via `[(value)]` / `[(checked)]`.
 - **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.

package/alert/styles/_index.scss

@@ -18,7 +18,17 @@ $alert-colors: (
 
   // Defaults — overridden per variant below.
   --wr-alert-bg: var(--wr-color-info-soft);
-  --wr-alert-border: var(--wr-color-info-soft-border);
+  // `transparent`, not a `-soft-border` hairline: the tint alone carries the
+  // block, and the ring around it was a second edge saying the same thing.
+  //
+  // The hook itself stays, and is still what the border reads — it is public
+  // API, an app that wants a bordered alert sets `--wr-alert-border` and gets
+  // one back, per variant if it likes. Nor does the declaration go: a
+  // transparent 1px border still occupies its 1px, so a consumer switching the
+  // hook on does not reflow the block by a pixel on each side, and no variant's
+  // padding has to be re-derived. NO variant overrides this any more — an alert
+  // has one border value, and it is the one a consumer can reach.
+  --wr-alert-border: transparent;
   // `-ink`, never the bare intent: this is the intent used AS TEXT on its own
   // soft tint, and a bare `--wr-color-warning` there is 1.71:1 in the light
   // theme. See the token note in AGENTS.md — `-contrast` is the other
@@ -103,7 +113,6 @@ $alert-colors: (
   @each $variant, $color in $alert-colors {
     &--#{$variant} {
       --wr-alert-bg: var(--wr-color-#{$color}-soft);
-      --wr-alert-border: var(--wr-color-#{$color}-soft-border);
       --wr-alert-title: var(--wr-color-#{$color}-ink);
       --wr-alert-close: var(--wr-color-#{$color}-ink);
     }
@@ -112,7 +121,6 @@ $alert-colors: (
   // Neutral — muted gray chip, reusing the `medium` soft tokens.
   &--neutral {
     --wr-alert-bg: var(--wr-color-medium-soft);
-    --wr-alert-border: var(--wr-color-medium-soft-border);
     --wr-alert-title: var(--wr-color-on-surface);
     --wr-alert-message: var(--wr-color-on-surface-muted);
     --wr-alert-close: var(--wr-color-on-surface-muted);
@@ -126,7 +134,6 @@ $alert-colors: (
   // light text in light theme; light bg + dark text in dark theme.
   &--offline {
     --wr-alert-bg: var(--wr-color-on-surface);
-    --wr-alert-border: var(--wr-color-on-surface);
     --wr-alert-title: var(--wr-color-surface);
     --wr-alert-message: var(--wr-color-surface);
     --wr-alert-close: var(--wr-color-surface);

package/badge/styles/_index.scss

@@ -81,6 +81,31 @@
 
   // Outlined — transparent fill, colored border + text. The inset ring
   // replaces the solid background, so padding stays identical.
+  //
+  // The ring is deliberately NOT `currentcolor` once an intent is on the host.
+  // The label sits on `-ink`, which is calibrated to 5.0:1 and must not move —
+  // so a ring drawn in the text colour is a hairline at full label strength
+  // wrapped around text of exactly that strength, and the two cannot be
+  // separated while they share one value. `-soft-border` is the same intent at
+  // 0.3 alpha: the theme's canonical hairline, already per intent and already
+  // theme-correct through the `-rgb` channels. `wr-tag--outlined` draws the same
+  // ring from the same token; the tag keeps its 6% fill, because a tag is a
+  // chip you can click and a badge is a label you cannot.
+  //
+  // The soft trio covers the seven CHROMATIC intents, so `light` and `dark` have
+  // no `-soft-border` and the `var()` carries the token's own recipe as its
+  // fallback. That fallback is load-bearing twice over: an undefined custom
+  // property with no fallback invalidates the whole declaration, which would
+  // leave those two badges with no ring at all rather than a soft one — and
+  // 0.3 alpha is what keeps `dark` in the same family as the other eight
+  // instead of the only ring still drawn at full label strength, which is the
+  // weight this rule exists to stop drawing.
+  //
+  // `light` is the one intent the recipe cannot serve: it is a surface tone by
+  // definition, a hair off the page in either theme, so 30% of it over the page
+  // is nothing. At FULL strength it is `--wr-color-outline` — the hairline every
+  // bordered surface in the library already draws — so it is reached by that
+  // name, after the loop, rather than by an alpha that happens to land there.
   &--outlined {
     background-color: transparent;
     box-shadow: inset 0 0 0 1px currentcolor;
@@ -88,7 +113,12 @@
     @each $name in theme.$colors {
       &.wr-badge--#{$name} {
         color: var(--wr-color-#{$name}-ink);
+        box-shadow: inset 0 0 0 1px var(--wr-color-#{$name}-soft-border, rgba(var(--wr-color-#{$name}-rgb), 0.3));
       }
     }
+
+    &.wr-badge--light {
+      box-shadow: inset 0 0 0 1px var(--wr-color-outline);
+    }
   }
 }

package/badge/styles/_tag.scss

@@ -74,10 +74,17 @@
       --wr-tag-bg: var(--wr-color-#{$name});
       --wr-tag-border: var(--wr-color-#{$name});
 
+      // The ring reads from `-soft-border` rather than a hand-rolled alpha, so
+      // it is the same hairline `wr-badge--outlined` draws — one alpha in one
+      // place, which is the reason the soft trio exists. 0.25 -> 0.30 is the
+      // whole visual change here. The 6% fill stays, and that is the one place
+      // the two deliberately differ: a tag is a chip you can click, hover and
+      // dismiss, so it keeps a body the badge has none of. `light` and `dark`
+      // fall back exactly as the badge does — see the note there.
       &.wr-tag--outlined {
         --wr-tag-color: var(--wr-color-#{$name}-ink);
         --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.06);
-        --wr-tag-border: rgba(var(--wr-color-#{$name}-rgb), 0.25);
+        --wr-tag-border: var(--wr-color-#{$name}-soft-border, rgba(var(--wr-color-#{$name}-rgb), 0.3));
       }
 
       &.wr-tag--transparent {
@@ -87,4 +94,11 @@
       }
     }
   }
+
+  // `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.
+  &--light.wr-tag--outlined {
+    --wr-tag-border: var(--wr-color-outline);
+  }
 }

package/descriptions/styles/_index.scss

@@ -80,10 +80,14 @@
 
   &--bordered &__row {
     padding: 0.625rem 0.875rem;
+  }
 
-    & + & {
-      border-top: 1px solid var(--wr-color-outline);
-    }
+  // Nesting this as `& + &` expands BOTH sides in full —
+  // `… .wr-descriptions__row + .wr-descriptions--bordered .wr-descriptions__row` —
+  // which asks for a `--bordered` HOST as a row's sibling and can never match, so
+  // the stacked bordered card shipped with no dividers at all. Name the sibling.
+  &--bordered &__row + &__row {
+    border-top: 1px solid var(--wr-color-outline);
   }
 
   &--bordered#{&}--inline &__list {
@@ -122,6 +126,12 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    // The grid layout above aligns its two columns on `baseline`, which is
+    // correct there and wrong here: once the list is a COLUMN flex container
+    // the cross axis is the width, so `baseline` sizes each row to its own
+    // content. Rows must stretch, or a bordered row's divider paints only as
+    // wide as its longest line instead of spanning the card.
+    align-items: stretch;
   }
 
   .wr-descriptions--inline .wr-descriptions__row {

package/drawer/styles/_index.scss

@@ -49,7 +49,12 @@
 // `elementFromPoint` still answered "close button" over the first 10px of the
 // content: the boxes had stopped intersecting and the control was still covered.
 // 52px clears the target with two pixels to spare.
-.wr-drawer__panel--untitled > *:not(.wr-drawer__close) {
+// `:not(.wr-drawer__handle)` for the same reason as `:not(.wr-drawer__close)` —
+// the grab handle is chrome, not the content column. It clears the × on its own
+// (the button is corner-anchored, the bottom-sheet handle is centred), and on
+// `left` / `right` it is out of the flow entirely, where a block-start padding
+// would shove the rail off its own centre line.
+.wr-drawer__panel--untitled > *:not(.wr-drawer__close):not(.wr-drawer__handle) {
   padding-block-start: 3.25rem;
 }
 
@@ -144,6 +149,23 @@
     border-bottom-left-radius: var(--wr-border-radius-lg);
   }
 
+  // Room for the vertical grab rail, which is out of the flow (see
+  // `&__panel--left &__handle`). Only the two horizontal positions need it: the
+  // `top` / `bottom` handle is a flow row and reserves its own height.
+  //
+  // On the PANEL rather than per slot, because an absolutely positioned child
+  // is placed against the padding box — so `right: 0` lands the rail in exactly
+  // the gutter this opens, and the title's and footer's rules stay untouched.
+  // Same 1.25rem the handle measures across.
+  &--handle.wr-drawer__panel--left {
+    // rtl-ok: mirrors the physically placed rail — inner edge of a left-anchored panel
+    padding-right: 1.25rem;
+  }
+  &--handle.wr-drawer__panel--right {
+    // rtl-ok: mirrors the physically placed rail — inner edge of a right-anchored panel
+    padding-left: 1.25rem;
+  }
+
   // Safe-area padding on the trailing edge. `env(safe-area-inset-*)` is defined
   // per physical screen edge — the notch does not move when the text does — so
   // the padding that clears it stays physical as well.
@@ -165,6 +187,10 @@
 
 .wr-drawer {
   // Grab handle (visual swipe-to-dismiss affordance)
+  //
+  // The base rule is the BOTTOM sheet: a horizontal bar in the flow at the top
+  // of the column. `--top`, `--left` and `--right` re-place it below — see the
+  // block after this one, which is where the whole point of the handle lives.
   &__handle {
     display: flex;
     align-items: center;
@@ -174,6 +200,8 @@
     cursor: grab;
     user-select: none;
     // Own the gesture — stop the browser turning the drag into a scroll/pan.
+    // Every placement below inherits this: without it the browser claims the
+    // drag as a pan and the panel never follows the finger.
     touch-action: none;
   }
 
@@ -185,6 +213,72 @@
     background: rgba(var(--wr-color-on-surface-rgb), 0.18);
   }
 
+  // The handle follows `position`, because the gesture does.
+  //
+  // `showHandle` has always documented itself as a handle "at the leading edge"
+  // — the edge facing the viewport interior, the one the panel is dragged away
+  // from — and `closeAxis()` in drawer.ts already resolves all four: down for
+  // `bottom`, up for `top`, left for `left`, right for `right`. The CSS
+  // implemented one of them. The other three drew the same horizontal bar at
+  // the top of the panel, so a right-side drawer showed a stray pill above its
+  // title pointing along an axis the drag does not travel.
+  //
+  // Keep these two in step: a bar the finger finds on the wrong axis is worse
+  // than no bar, because it invites the gesture that does nothing.
+
+  // `top` — same horizontal bar, block-END edge. `order` rather than a template
+  // change: the handle is `aria-hidden` chrome, so nothing depends on its DOM
+  // position, and `margin-block-start: auto` puts it against the bottom even
+  // when the projected content does not grow (a bare `<nav>` is `flex: 0 1 auto`,
+  // so without it the handle would float directly under the content).
+  &__panel--top &__handle {
+    order: 1;
+    margin-block-start: auto;
+  }
+
+  // `left` / `right` — a VERTICAL bar on the inner vertical edge.
+  //
+  // Out of the flow, because the panel is a column and a rail on its inline
+  // edge is not a row of it; putting it back in the flow would mean wrapping
+  // the projected title / content / footer in a new element, and those sit
+  // directly under `.wr-drawer__panel` in markup consumers already style.
+  // The panel reserves the gutter it floats over (`&--handle`, up in the
+  // `.wr-drawer__panel` block), so nothing is covered — the lesson `--untitled`
+  // learned about the × button.
+  &__panel--left &__handle,
+  &__panel--right &__handle {
+    position: absolute;
+    inset-block-start: 50%;
+    // Not the panel's own transform: `onSwipeMove` writes `translateX(…)` onto
+    // the PANEL while dragging, and this element is its child.
+    transform: translateY(-50%);
+    // 0.5rem each side of a 0.25rem bar — the same 1.25rem thickness the
+    // horizontal handle has, turned ninety degrees, so the gutter reserved for
+    // it is the one the panel's slots already pad by. The 1.5rem block padding
+    // is grab target rather than decoration: it takes the 2.5rem bar to a 5.5rem
+    // reachable strip, which a finger can find without aiming at a 4px pill.
+    padding: 1.5rem 0.5rem;
+    z-index: 1;
+  }
+
+  &__panel--left &__handle {
+    // rtl-ok: `position` is physical (`left` names a viewport edge, and the CDK
+    // strategy calls `.left()`), so the inner edge of a left-anchored panel is
+    // the physical right one in either direction
+    right: 0;
+  }
+
+  &__panel--right &__handle {
+    // rtl-ok: physical `position` — inner edge of a right-anchored panel
+    left: 0;
+  }
+
+  &__panel--left &__grabber,
+  &__panel--right &__grabber {
+    width: 0.25rem;
+    height: 2.5rem;
+  }
+
   &__title {
     margin: 0;
     padding: 1rem 1.25rem;

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.2", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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.4", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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.2", ngImport: i0, type: WrActionSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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

@@ -106,10 +106,10 @@ class WrAffix {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", 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.4", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", 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.2", ngImport: i0, type: WrAffix, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAffix, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrAffix]',

package/fesm2022/ngwr-alert.mjs

@@ -89,10 +89,10 @@ class WrAlert {
         this.dismissed.set(true);
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 }, closeable: { classPropertyName: "closeable", publicName: "closeable", 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 (closeable()) {\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.4", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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 }, closeable: { classPropertyName: "closeable", publicName: "closeable", 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 (closeable()) {\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.2", ngImport: i0, type: WrAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAlert, decorators: [{
             type: Component,
             args: [{ selector: 'wr-alert', imports: [WrIcon], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

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.2", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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.4", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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.2", ngImport: i0, type: WrAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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.2", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", 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%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", 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%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAurora, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\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.2", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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.4", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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.2", ngImport: i0, type: WrAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAvatar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-avatar', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-back-top.mjs

@@ -64,10 +64,10 @@ class WrBackTop {
     onClick() {
         this.scroll.toTop({ offset: this.offset() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", 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.4", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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.2", ngImport: i0, type: WrBackTop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBackTop, decorators: [{
             type: Component,
             args: [{ selector: 'wr-back-top', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',