ngwr 10.2.0 → 11.0.0

package/fesm2022/ngwr-avatar.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, signal, computed, ViewEncapsulation, Component } from '@angular/core';
+import { input, signal, effect, untracked, computed, ViewEncapsulation, Component } from '@angular/core';
+import { useI18nText } from 'ngwr/i18n';
 import { WrSpinner } from 'ngwr/spinner';
 import { resolveCssSize } from 'ngwr/utils';
 
@@ -32,12 +33,14 @@ class WrAvatar {
     url = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
     /**
-     * Alt text for the image.
+     * Alt text for the image. Falls back to `avatar.alt`, then `'Avatar'` — pass
+     * the person's name where you have it, since that is what a reader wants.
      *
-     * @default 'Avatar'
+     * @default null
      */
-    alt = input('Avatar', /* @ts-ignore */
+    alt = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    resolvedAlt = useI18nText(this.alt, 'avatar.alt', 'Avatar');
     /**
      * Corner treatment. `rounded` (default) is a soft rounded square,
      * `circle` is the classic profile avatar, `squircle` is the iOS look.
@@ -55,6 +58,24 @@ class WrAvatar {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     loaded = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the image failed. Without this the spinner spun forever on a broken
+     * URL — the one state where an avatar is guaranteed to have projected initials
+     * worth showing instead.
+     */
+    failed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // A new URL is a new attempt: after a failure the fallback would otherwise
+        // stay put for an image that loads perfectly well.
+        effect(() => {
+            this.url();
+            untracked(() => {
+                this.loaded.set(false);
+                this.failed.set(false);
+            });
+        });
+    }
     resolved = computed(() => {
         const result = resolveCssSize(this.size(), { defaultValue: DEFAULT_SIZE });
         if (result.pxValue == null || result.pxValue <= 0) {
@@ -80,17 +101,20 @@ class WrAvatar {
     onImageLoad() {
         this.loaded.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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  <img\n    class=\"wr-avatar__img\"\n    [src]=\"src\"\n    [alt]=\"alt()\"\n    [attr.width]=\"pxSize()\"\n    [attr.height]=\"pxSize()\"\n    (load)=\"onImageLoad()\"\n    decoding=\"async\"\n  />\n\n  @if (!loaded()) {\n    <wr-spinner class=\"wr-avatar__spin\" />\n  }\n}\n", dependencies: [{ kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size"] }], encapsulation: i0.ViewEncapsulation.None });
+    onImageError() {
+        this.failed.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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.0", ngImport: i0, type: WrAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAvatar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-avatar', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
                         '[style.width]': 'cssSize()',
                         '[style.height]': 'cssSize()',
-                    }, imports: [WrSpinner], template: "<ng-content />\n\n@if (url(); as src) {\n  <img\n    class=\"wr-avatar__img\"\n    [src]=\"src\"\n    [alt]=\"alt()\"\n    [attr.width]=\"pxSize()\"\n    [attr.height]=\"pxSize()\"\n    (load)=\"onImageLoad()\"\n    decoding=\"async\"\n  />\n\n  @if (!loaded()) {\n    <wr-spinner class=\"wr-avatar__spin\" />\n  }\n}\n" }]
-        }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+                    }, imports: [WrSpinner], 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" }]
+        }], ctorParameters: () => [], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-avatar.mjs","sources":["../../../projects/lib/avatar/avatar.ts","../../../projects/lib/avatar/avatar.html","../../../projects/lib/avatar/ngwr-avatar.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 { Component, ViewEncapsulation, computed, input, signal } from '@angular/core';\n\nimport { WrSpinner } from 'ngwr/spinner';\nimport { resolveCssSize, type ResolvedCssSize } from 'ngwr/utils';\n\nimport type { WrAvatarShape, WrAvatarSize } from './interfaces';\n\nconst DEFAULT_SIZE: WrAvatarSize = '6rem';\n\n/**\n * Image avatar with configurable corner treatment.\n *\n * A spinner is shown while the image loads, then crossfades in.\n *\n * @example\n * ```html\n * <wr-avatar url=\"/me.png\" alt=\"Roman\" size=\"3rem\" shape=\"circle\" />\n * <wr-avatar url=\"/me.png\" alt=\"Roman\" [size]=\"48\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/avatar\n */\n@Component({\n  selector: 'wr-avatar',\n  templateUrl: './avatar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'cssSize()',\n    '[style.height]': 'cssSize()',\n  },\n  imports: [WrSpinner],\n})\nexport class WrAvatar {\n  /**\n   * Image URL. When unset, only projected content (e.g. initials) renders.\n   *\n   * @default null\n   */\n  readonly url = input<string | null>(null);\n\n  /**\n   * Alt text for the image.\n   *\n   * @default 'Avatar'\n   */\n  readonly alt = input<string>('Avatar');\n\n  /**\n   * Corner treatment. `rounded` (default) is a soft rounded square,\n   * `circle` is the classic profile avatar, `squircle` is the iOS look.\n   *\n   * @default 'rounded'\n   */\n  readonly shape = input<WrAvatarShape>('rounded');\n\n  /**\n   * Box size. See {@link WrAvatarSize} for accepted values.\n   *\n   * @default '6rem'\n   */\n  readonly size = input<WrAvatarSize>(DEFAULT_SIZE);\n\n  protected readonly loaded = signal(false);\n\n  protected readonly resolved = computed<ResolvedCssSize>(() => {\n    const result = resolveCssSize(this.size(), { defaultValue: DEFAULT_SIZE });\n    if (result.pxValue == null || result.pxValue <= 0) {\n      return resolveCssSize(DEFAULT_SIZE, { defaultValue: DEFAULT_SIZE });\n    }\n    return result;\n  });\n\n  protected readonly cssSize = computed(() => this.resolved().cssValue);\n  protected readonly pxSize = computed(() => this.resolved().pxValue);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-avatar'];\n    const shape = this.shape();\n    if (shape !== 'rounded') parts.push(`wr-avatar--${shape}`);\n    if (this.loaded()) parts.push('wr-avatar--loaded');\n    return parts.join(' ');\n  });\n\n  protected onImageLoad(): void {\n    this.loaded.set(true);\n  }\n}\n","<ng-content />\n\n@if (url(); as src) {\n  <img\n    class=\"wr-avatar__img\"\n    [src]=\"src\"\n    [alt]=\"alt()\"\n    [attr.width]=\"pxSize()\"\n    [attr.height]=\"pxSize()\"\n    (load)=\"onImageLoad()\"\n    decoding=\"async\"\n  />\n\n  @if (!loaded()) {\n    <wr-spinner class=\"wr-avatar__spin\" />\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-avatar.mjs","sources":["../../../projects/lib/avatar/avatar.ts","../../../projects/lib/avatar/avatar.html","../../../projects/lib/avatar/ngwr-avatar.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 { Component, ViewEncapsulation, computed, effect, input, signal, untracked } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrSpinner } from 'ngwr/spinner';\nimport { resolveCssSize, type ResolvedCssSize } from 'ngwr/utils';\n\nimport type { WrAvatarShape, WrAvatarSize } from './interfaces';\n\nconst DEFAULT_SIZE: WrAvatarSize = '6rem';\n\n/**\n * Image avatar with configurable corner treatment.\n *\n * A spinner is shown while the image loads, then crossfades in.\n *\n * @example\n * ```html\n * <wr-avatar url=\"/me.png\" alt=\"Roman\" size=\"3rem\" shape=\"circle\" />\n * <wr-avatar url=\"/me.png\" alt=\"Roman\" [size]=\"48\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/avatar\n */\n@Component({\n  selector: 'wr-avatar',\n  templateUrl: './avatar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'cssSize()',\n    '[style.height]': 'cssSize()',\n  },\n  imports: [WrSpinner],\n})\nexport class WrAvatar {\n  /**\n   * Image URL. When unset, only projected content (e.g. initials) renders.\n   *\n   * @default null\n   */\n  readonly url = input<string | null>(null);\n\n  /**\n   * Alt text for the image. Falls back to `avatar.alt`, then `'Avatar'` — pass\n   * the person's name where you have it, since that is what a reader wants.\n   *\n   * @default null\n   */\n  readonly alt = input<string | null>(null);\n\n  protected readonly resolvedAlt = useI18nText(this.alt, 'avatar.alt', 'Avatar');\n\n  /**\n   * Corner treatment. `rounded` (default) is a soft rounded square,\n   * `circle` is the classic profile avatar, `squircle` is the iOS look.\n   *\n   * @default 'rounded'\n   */\n  readonly shape = input<WrAvatarShape>('rounded');\n\n  /**\n   * Box size. See {@link WrAvatarSize} for accepted values.\n   *\n   * @default '6rem'\n   */\n  readonly size = input<WrAvatarSize>(DEFAULT_SIZE);\n\n  protected readonly loaded = signal(false);\n\n  /**\n   * Whether the image failed. Without this the spinner spun forever on a broken\n   * URL — the one state where an avatar is guaranteed to have projected initials\n   * worth showing instead.\n   */\n  protected readonly failed = signal(false);\n\n  constructor() {\n    // A new URL is a new attempt: after a failure the fallback would otherwise\n    // stay put for an image that loads perfectly well.\n    effect(() => {\n      this.url();\n      untracked(() => {\n        this.loaded.set(false);\n        this.failed.set(false);\n      });\n    });\n  }\n\n  protected readonly resolved = computed<ResolvedCssSize>(() => {\n    const result = resolveCssSize(this.size(), { defaultValue: DEFAULT_SIZE });\n    if (result.pxValue == null || result.pxValue <= 0) {\n      return resolveCssSize(DEFAULT_SIZE, { defaultValue: DEFAULT_SIZE });\n    }\n    return result;\n  });\n\n  protected readonly cssSize = computed(() => this.resolved().cssValue);\n  protected readonly pxSize = computed(() => this.resolved().pxValue);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-avatar'];\n    const shape = this.shape();\n    if (shape !== 'rounded') parts.push(`wr-avatar--${shape}`);\n    if (this.loaded()) parts.push('wr-avatar--loaded');\n    return parts.join(' ');\n  });\n\n  protected onImageLoad(): void {\n    this.loaded.set(true);\n  }\n\n  protected onImageError(): void {\n    this.failed.set(true);\n  }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-back-top.mjs

@@ -64,15 +64,19 @@ class WrBackTop {
     onClick() {
         this.scroll.toTop({ offset: this.offset() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", 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()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\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.1", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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.0", ngImport: i0, type: WrBackTop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBackTop, decorators: [{
             type: Component,
             args: [{ selector: 'wr-back-top', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
                         '[attr.aria-hidden]': '!visible()',
-                    }, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\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" }]
+                        // `aria-hidden` alone left a 44px button that focus still landed on: invisible
+                        // (opacity 0) but in the tab order, and unannounceable once it got there.
+                        // `inert` is what actually takes it out of both.
+                        '[attr.inert]': "visible() ? null : ''",
+                    }, 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" }]
         }], ctorParameters: () => [], propDecorators: { visibilityThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibilityThreshold", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**

package/fesm2022/ngwr-back-top.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-back-top.mjs","sources":["../../../projects/lib/back-top/back-top.ts","../../../projects/lib/back-top/back-top.html","../../../projects/lib/back-top/ngwr-back-top.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 { Component, DestroyRef, NgZone, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrScroll } from 'ngwr/scroll';\n\n/**\n * Pinned floating button that scrolls the page back to the top. Appears\n * once the user has scrolled past `visibilityThreshold` pixels.\n *\n * @example\n * ```html\n * <wr-back-top />\n *\n * <wr-back-top visibilityThreshold=\"600\" [offset]=\"80\">\n *   <svg>…custom icon…</svg>\n * </wr-back-top>\n * ```\n *\n * @see https://ngwr.dev/reference/components/back-top\n */\n@Component({\n  selector: 'wr-back-top',\n  templateUrl: './back-top.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-hidden]': '!visible()',\n  },\n})\nexport class WrBackTop {\n  /** Show the button once `window.scrollY` exceeds this many pixels. @default 400 */\n  readonly visibilityThreshold = input(400, {\n    transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 400)),\n  });\n\n  /** Pixel offset subtracted from the scroll target — for sticky headers. @default 0 */\n  readonly offset = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Accessible label for the button. Falls back to `backTop.label`, then `'Back to top'`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'backTop.label', 'Back to top');\n\n  protected readonly visible = signal(false);\n\n  private readonly scroll = inject(WrScroll);\n  private readonly platform = inject(WrPlatform);\n  private readonly zone = inject(NgZone);\n  private readonly destroyRef = inject(DestroyRef);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-back-top'];\n    if (this.visible()) parts.push('wr-back-top--visible');\n    return parts.join(' ');\n  });\n\n  constructor() {\n    if (!this.platform.isBrowser) return;\n    const handler = (): void => {\n      const should = window.scrollY > this.visibilityThreshold();\n      if (should !== this.visible()) this.zone.run(() => this.visible.set(should));\n    };\n    this.zone.runOutsideAngular(() => window.addEventListener('scroll', handler, { passive: true }));\n    // Initial check (page might already be scrolled).\n    handler();\n    this.destroyRef.onDestroy(() => window.removeEventListener('scroll', handler));\n  }\n\n  protected onClick(): void {\n    this.scroll.toTop({ offset: this.offset() });\n  }\n}\n","<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-back-top.mjs","sources":["../../../projects/lib/back-top/back-top.ts","../../../projects/lib/back-top/back-top.html","../../../projects/lib/back-top/ngwr-back-top.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 { Component, DestroyRef, NgZone, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrScroll } from 'ngwr/scroll';\n\n/**\n * Pinned floating button that scrolls the page back to the top. Appears\n * once the user has scrolled past `visibilityThreshold` pixels.\n *\n * @example\n * ```html\n * <wr-back-top />\n *\n * <wr-back-top visibilityThreshold=\"600\" [offset]=\"80\">\n *   <svg>…custom icon…</svg>\n * </wr-back-top>\n * ```\n *\n * @see https://ngwr.dev/reference/components/back-top\n */\n@Component({\n  selector: 'wr-back-top',\n  templateUrl: './back-top.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-hidden]': '!visible()',\n    // `aria-hidden` alone left a 44px button that focus still landed on: invisible\n    // (opacity 0) but in the tab order, and unannounceable once it got there.\n    // `inert` is what actually takes it out of both.\n    '[attr.inert]': \"visible() ? null : ''\",\n  },\n})\nexport class WrBackTop {\n  /** Show the button once `window.scrollY` exceeds this many pixels. @default 400 */\n  readonly visibilityThreshold = input(400, {\n    transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 400)),\n  });\n\n  /** Pixel offset subtracted from the scroll target — for sticky headers. @default 0 */\n  readonly offset = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Accessible label for the button. Falls back to `backTop.label`, then `'Back to top'`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'backTop.label', 'Back to top');\n\n  protected readonly visible = signal(false);\n\n  private readonly scroll = inject(WrScroll);\n  private readonly platform = inject(WrPlatform);\n  private readonly zone = inject(NgZone);\n  private readonly destroyRef = inject(DestroyRef);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-back-top'];\n    if (this.visible()) parts.push('wr-back-top--visible');\n    return parts.join(' ');\n  });\n\n  constructor() {\n    if (!this.platform.isBrowser) return;\n    const handler = (): void => {\n      const should = window.scrollY > this.visibilityThreshold();\n      if (should !== this.visible()) this.zone.run(() => this.visible.set(should));\n    };\n    this.zone.runOutsideAngular(() => window.addEventListener('scroll', handler, { passive: true }));\n    // Initial check (page might already be scrolled).\n    handler();\n    this.destroyRef.onDestroy(() => window.removeEventListener('scroll', handler));\n  }\n\n  protected onClick(): void {\n    this.scroll.toTop({ offset: this.offset() });\n  }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;AAKG;AASH;;;;;;;;;;;;;;AAcG;MAcU,SAAS,CAAA;;IAEX,mBAAmB,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,8BAAA,EAAA,CAAA,EACtC,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,CAC5E;;IAGO,MAAM,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAA,CAAG;;IAGjG,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;IAE5B,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,EAAE,aAAa,CAAC;IAE/E,OAAO,GAAG,MAAM,CAAC,KAAK;gFAAC;AAEzB,IAAA,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;AACzB,IAAA,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC;AAC7B,IAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;AACrB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,aAAa,CAAC;QAC7B,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC;AACtD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;AAEF,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS;YAAE;QAC9B,MAAM,OAAO,GAAG,MAAW;YACzB,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE;AAC1D,YAAA,IAAI,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE;AAAE,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAC9E,QAAA,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;AAEhG,QAAA,OAAO,EAAE;AACT,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAChF;IAEU,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;IAC9C;uGAzCW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,6mBC1CtB,2pBAiBA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDyBa,SAAS,EAAA,UAAA,EAAA,CAAA;kBAbrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,aAAA,EAER,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,oBAAoB,EAAE,YAAY;;;;AAIlC,wBAAA,cAAc,EAAE,uBAAuB;AACxC,qBAAA,EAAA,QAAA,EAAA,2pBAAA,EAAA;;;AExCH;;AAEG;;;;"}

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.0", ngImport: i0, type: WrBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", 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.1", ngImport: i0, type: WrBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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.0", ngImport: i0, type: WrBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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.0", ngImport: i0, type: WrTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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.0", ngImport: i0, type: WrTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-badge.mjs","sources":["../../../projects/lib/badge/badge.ts","../../../projects/lib/badge/tag.ts","../../../projects/lib/badge/tag.html","../../../projects/lib/badge/ngwr-badge.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 } from '@angular/core';\n\nimport type { WrColor } from 'ngwr/theme';\n\nimport type { WrBadgeShape, WrBadgeSize } from './interfaces';\n\n/**\n * Lean status chip — color, size, rounded/pill. Use for short labels\n * and counts (e.g. \"ONLINE\", \"3 unread\", \"v2.1\"). Reach for `<wr-tag>`\n * when you need icons, loading state, or outlined / transparent styles.\n *\n * @example\n * ```html\n * <wr-badge color=\"success\">Active</wr-badge>\n * <wr-badge color=\"danger\" size=\"sm\">3</wr-badge>\n * <wr-badge color=\"primary\" shape=\"pill\">New</wr-badge>\n * ```\n *\n * @see https://ngwr.dev/reference/components/badge\n */\n@Component({\n  selector: 'wr-badge',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class WrBadge {\n  /**\n   * Color variant. Maps to `--wr-color-*` CSS variables from the theme.\n   *\n   * @default 'primary'\n   */\n  readonly color = input<WrColor>('primary');\n\n  /**\n   * Size variant.\n   *\n   * @default 'md'\n   */\n  readonly size = input<WrBadgeSize>('md');\n\n  /**\n   * Corner treatment. Mirrors `<wr-btn>` — `rounded` (default) uses the\n   * small form-radius; `pill` rounds the ends fully.\n   *\n   * @default 'rounded'\n   */\n  readonly shape = input<WrBadgeShape>('rounded');\n\n  /**\n   * Outlined style — transparent fill, colored border and text.\n   *\n   * @default false\n   */\n  readonly outlined = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-badge', `wr-badge--${this.color()}`];\n    const size = this.size();\n    if (size !== 'md') {\n      parts.push(`wr-badge--${size}`);\n    }\n    const shape = this.shape();\n    if (shape !== 'rounded') {\n      parts.push(`wr-badge--${shape}`);\n    }\n    if (this.outlined()) {\n      parts.push('wr-badge--outlined');\n    }\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\nimport { WrSpinner } from 'ngwr/spinner';\nimport type { WrColor } from 'ngwr/theme';\n\nimport type { WrTagIconPosition } from './interfaces';\n\n/**\n * Rich inline label — icons, loading state, three visual styles\n * (solid / outlined / transparent). Reach for `<wr-badge>` when all\n * you need is a colored text chip.\n *\n * @example\n * ```html\n * <wr-tag>Default</wr-tag>\n * <wr-tag color=\"success\" icon=\"checkmark\">Done</wr-tag>\n * <wr-tag color=\"primary\" outlined rounded>Beta</wr-tag>\n * <wr-tag color=\"warning\" loading>Saving</wr-tag>\n * ```\n *\n * @see https://ngwr.dev/reference/components/badge\n */\n@Component({\n  selector: 'wr-tag',\n  templateUrl: './tag.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [WrIcon, WrSpinner],\n})\nexport class WrTag {\n  /**\n   * Color variant.\n   *\n   * @default 'primary'\n   */\n  readonly color = input<WrColor>('primary');\n\n  /**\n   * Icon name shown alongside the content. The icon is replaced by a\n   * spinner when `loading` is true.\n   *\n   * @default null\n   */\n  readonly icon = input<WrIconName | null>(null);\n\n  /**\n   * Where the icon/spinner is rendered.\n   *\n   * @default 'start'\n   */\n  readonly iconPosition = input<WrTagIconPosition>('start');\n\n  /**\n   * Outlined style — colored text and border on a tinted background.\n   *\n   * @default false\n   */\n  readonly outlined = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Transparent style — colored text on a low-opacity tint, no border.\n   *\n   * @default false\n   */\n  readonly transparent = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Pill-shaped corners.\n   *\n   * @default false\n   */\n  readonly rounded = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Adds a hover state — use when the tag is interactive (button/link).\n   *\n   * @default false\n   */\n  readonly hoverable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Show a spinner in place of the icon.\n   *\n   * @default false\n   */\n  readonly loading = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-tag', `wr-tag--${this.color()}`];\n    if (this.outlined()) parts.push('wr-tag--outlined');\n    if (this.transparent()) parts.push('wr-tag--transparent');\n    if (this.rounded()) parts.push('wr-tag--rounded');\n    if (this.hoverable()) parts.push('wr-tag--hoverable');\n    if (this.loading()) parts.push('wr-tag--loading');\n\n    const hasAdornment = !!this.icon() || this.loading();\n    if (hasAdornment) parts.push(`wr-tag--icon-${this.iconPosition()}`);\n\n    return parts.join(' ');\n  });\n}\n","@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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-badge.mjs","sources":["../../../projects/lib/badge/badge.ts","../../../projects/lib/badge/tag.ts","../../../projects/lib/badge/tag.html","../../../projects/lib/badge/ngwr-badge.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 } from '@angular/core';\n\nimport type { WrColor } from 'ngwr/theme';\n\nimport type { WrBadgeShape, WrBadgeSize } from './interfaces';\n\n/**\n * Lean status chip — color, size, rounded/pill. Use for short labels\n * and counts (e.g. \"ONLINE\", \"3 unread\", \"v2.1\"). Reach for `<wr-tag>`\n * when you need icons, loading state, or outlined / transparent styles.\n *\n * @example\n * ```html\n * <wr-badge color=\"success\">Active</wr-badge>\n * <wr-badge color=\"danger\" size=\"sm\">3</wr-badge>\n * <wr-badge color=\"primary\" shape=\"pill\">New</wr-badge>\n * ```\n *\n * @see https://ngwr.dev/reference/components/badge\n */\n@Component({\n  selector: 'wr-badge',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class WrBadge {\n  /**\n   * Color variant. Maps to `--wr-color-*` CSS variables from the theme.\n   *\n   * @default 'primary'\n   */\n  readonly color = input<WrColor>('primary');\n\n  /**\n   * Size variant.\n   *\n   * @default 'md'\n   */\n  readonly size = input<WrBadgeSize>('md');\n\n  /**\n   * Corner treatment. Mirrors `<wr-btn>` — `rounded` (default) uses the\n   * small form-radius; `pill` rounds the ends fully.\n   *\n   * @default 'rounded'\n   */\n  readonly shape = input<WrBadgeShape>('rounded');\n\n  /**\n   * Outlined style — transparent fill, colored border and text.\n   *\n   * @default false\n   */\n  readonly outlined = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-badge', `wr-badge--${this.color()}`];\n    const size = this.size();\n    if (size !== 'md') {\n      parts.push(`wr-badge--${size}`);\n    }\n    const shape = this.shape();\n    if (shape !== 'rounded') {\n      parts.push(`wr-badge--${shape}`);\n    }\n    if (this.outlined()) {\n      parts.push('wr-badge--outlined');\n    }\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\nimport { WrSpinner } from 'ngwr/spinner';\nimport type { WrColor } from 'ngwr/theme';\n\nimport type { WrTagIconPosition } from './interfaces';\n\n/**\n * Rich inline label — icons, loading state, three visual styles\n * (solid / outlined / transparent). Reach for `<wr-badge>` when all\n * you need is a colored text chip.\n *\n * @example\n * ```html\n * <wr-tag>Default</wr-tag>\n * <wr-tag color=\"success\" icon=\"checkmark\">Done</wr-tag>\n * <wr-tag color=\"primary\" outlined rounded>Beta</wr-tag>\n * <wr-tag color=\"warning\" loading>Saving</wr-tag>\n * ```\n *\n * @see https://ngwr.dev/reference/components/badge\n */\n@Component({\n  selector: 'wr-tag',\n  templateUrl: './tag.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [WrIcon, WrSpinner],\n})\nexport class WrTag {\n  /**\n   * Color variant.\n   *\n   * @default 'primary'\n   */\n  readonly color = input<WrColor>('primary');\n\n  /**\n   * Icon name shown alongside the content. The icon is replaced by a\n   * spinner when `loading` is true.\n   *\n   * @default null\n   */\n  readonly icon = input<WrIconName | null>(null);\n\n  /**\n   * Where the icon/spinner is rendered.\n   *\n   * @default 'start'\n   */\n  readonly iconPosition = input<WrTagIconPosition>('start');\n\n  /**\n   * Outlined style — colored text and border on a tinted background.\n   *\n   * @default false\n   */\n  readonly outlined = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Transparent style — colored text on a low-opacity tint, no border.\n   *\n   * @default false\n   */\n  readonly transparent = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Pill-shaped corners.\n   *\n   * @default false\n   */\n  readonly rounded = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Adds a hover state — use when the tag is interactive (button/link).\n   *\n   * @default false\n   */\n  readonly hoverable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Show a spinner in place of the icon.\n   *\n   * @default false\n   */\n  readonly loading = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-tag', `wr-tag--${this.color()}`];\n    if (this.outlined()) parts.push('wr-tag--outlined');\n    if (this.transparent()) parts.push('wr-tag--transparent');\n    if (this.rounded()) parts.push('wr-tag--rounded');\n    if (this.hoverable()) parts.push('wr-tag--hoverable');\n    if (this.loading()) parts.push('wr-tag--loading');\n\n    const hasAdornment = !!this.icon() || this.loading();\n    if (hasAdornment) parts.push(`wr-tag--icon-${this.iconPosition()}`);\n\n    return parts.join(' ');\n  });\n}\n","@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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-bar-chart.mjs

@@ -35,6 +35,17 @@ class WrBarChart {
     height = input(200, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(40, coerceNumberProperty(v, 200)) });
     /** Explicit max value. `0` = auto. @default 0 */
     max = input(0, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /**
+     * A datum's value, with anything non-finite read as `0`.
+     *
+     * One `NaN` used to take out the whole chart rather than its own bar:
+     * `Math.max(...values)` is `NaN` as soon as one value is, so the scale fell
+     * back to `1` and every OTHER bar was asked for a height of `value * 100`%.
+     * The bad bar also printed the literal text `NaN` above itself.
+     */
+    static value(raw) {
+        return Number.isFinite(raw) ? raw : 0;
+    }
     resolvedMax = computed(() => {
         const explicit = this.max();
         if (explicit > 0)
@@ -42,23 +53,33 @@ class WrBarChart {
         const data = this.data();
         if (data.length === 0)
             return 1;
-        const top = Math.max(...data.map(d => d.value), 0);
+        const top = Math.max(...data.map(d => WrBarChart.value(d.value)), 0);
         return top > 0 ? top : 1;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
-    bars = computed(() => this.data().map(d => ({
-        label: d.label,
-        value: d.value,
-        color: d.color ?? this.color(),
-        heightPercent: (Math.max(0, d.value) / this.resolvedMax()) * 100,
-    })), /* @ts-ignore */
+    bars = computed(() => this.data().map(d => {
+        const value = WrBarChart.value(d.value);
+        return {
+            label: d.label,
+            value,
+            color: d.color ?? this.color(),
+            heightPercent: (Math.max(0, value) / this.resolvedMax()) * 100,
+            /**
+             * The bar's accessible name. The label and the value sit in separate
+             * rows, so a screen reader read every number and then every label with
+             * nothing tying the two together — and with `showValues` off the
+             * numbers were not in the accessible tree at all.
+             */
+            name: `${d.label}: ${value}`,
+        };
+    }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrBarChart, isStandalone: true, selector: "wr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-bar-chart" }, ngImport: i0, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<div class=\"wr-bar-chart__labels\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrBarChart, isStandalone: true, selector: "wr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-bar-chart" }, ngImport: i0, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrBarChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBarChart, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-bar-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-bar-chart' }, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<div class=\"wr-bar-chart__labels\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n" }]
+            args: [{ selector: 'wr-bar-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-bar-chart' }, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ngwr-bar-chart.mjs","sources":["../../../projects/lib/bar-chart/bar-chart.ts","../../../projects/lib/bar-chart/bar-chart.html","../../../projects/lib/bar-chart/ngwr-bar-chart.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, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrBarChartDatum } from './interfaces';\n\n/**\n * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.\n * Axis-free; for the simple \"show me a comparison\" case.\n *\n * @example\n * ```html\n * <wr-bar-chart [data]=\"[\n *   { label: 'Mon', value: 12 },\n *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },\n *   { label: 'Wed', value: 9 }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/bar-chart\n */\n@Component({\n  selector: 'wr-bar-chart',\n  templateUrl: './bar-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-bar-chart' },\n})\nexport class WrBarChart {\n  readonly data = input<readonly WrBarChartDatum[]>([]);\n\n  /** Default bar colour when a datum has none. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Show value labels above each bar. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /** Pixel height of the chart area. @default 200 */\n  readonly height = input(200, { transform: (v: unknown): number => Math.max(40, coerceNumberProperty(v, 200)) });\n\n  /** Explicit max value. `0` = auto. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const data = this.data();\n    if (data.length === 0) return 1;\n    const top = Math.max(...data.map(d => d.value), 0);\n    return top > 0 ? top : 1;\n  });\n\n  protected readonly bars = computed(() =>\n    this.data().map(d => ({\n      label: d.label,\n      value: d.value,\n      color: d.color ?? this.color(),\n      heightPercent: (Math.max(0, d.value) / this.resolvedMax()) * 100,\n    }))\n  );\n}\n\nexport type { WrBarChartDatum } from './interfaces';\n","<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<div class=\"wr-bar-chart__labels\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;AAcG;MAOU,UAAU,CAAA;IACZ,IAAI,GAAG,KAAK,CAA6B,EAAE;6EAAC;;IAG5C,KAAK,GAAG,KAAK,CAAS,yBAAyB;8EAAC;;IAGhD,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG9D,MAAM,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,CAAG;;IAGtG,GAAG,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,KAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAA,CAAG;AAEpF,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE;QAC3B,IAAI,QAAQ,GAAG,CAAC;AAAE,YAAA,OAAO,QAAQ;AACjC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,CAAC;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClD,OAAO,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;IAC1B,CAAC;oFAAC;AAEiB,IAAA,IAAI,GAAG,QAAQ,CAAC,MACjC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK;QACpB,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;AAC9B,QAAA,aAAa,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG;AACjE,KAAA,CAAC,CAAC;6EACJ;uGA/BU,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,+tBCjCvB,2iBAeA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDkBa,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,SAAS;+BACE,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,QAC/B,EAAE,KAAK,EAAE,cAAc,EAAE,EAAA,QAAA,EAAA,2iBAAA,EAAA;;;AE/BjC;;AAEG;;;;"}
+{"version":3,"file":"ngwr-bar-chart.mjs","sources":["../../../projects/lib/bar-chart/bar-chart.ts","../../../projects/lib/bar-chart/bar-chart.html","../../../projects/lib/bar-chart/ngwr-bar-chart.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, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrBarChartDatum } from './interfaces';\n\n/**\n * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.\n * Axis-free; for the simple \"show me a comparison\" case.\n *\n * @example\n * ```html\n * <wr-bar-chart [data]=\"[\n *   { label: 'Mon', value: 12 },\n *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },\n *   { label: 'Wed', value: 9 }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/bar-chart\n */\n@Component({\n  selector: 'wr-bar-chart',\n  templateUrl: './bar-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-bar-chart' },\n})\nexport class WrBarChart {\n  readonly data = input<readonly WrBarChartDatum[]>([]);\n\n  /** Default bar colour when a datum has none. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Show value labels above each bar. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /** Pixel height of the chart area. @default 200 */\n  readonly height = input(200, { transform: (v: unknown): number => Math.max(40, coerceNumberProperty(v, 200)) });\n\n  /** Explicit max value. `0` = auto. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /**\n   * A datum's value, with anything non-finite read as `0`.\n   *\n   * One `NaN` used to take out the whole chart rather than its own bar:\n   * `Math.max(...values)` is `NaN` as soon as one value is, so the scale fell\n   * back to `1` and every OTHER bar was asked for a height of `value * 100`%.\n   * The bad bar also printed the literal text `NaN` above itself.\n   */\n  private static value(raw: number): number {\n    return Number.isFinite(raw) ? raw : 0;\n  }\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const data = this.data();\n    if (data.length === 0) return 1;\n    const top = Math.max(...data.map(d => WrBarChart.value(d.value)), 0);\n    return top > 0 ? top : 1;\n  });\n\n  protected readonly bars = computed(() =>\n    this.data().map(d => {\n      const value = WrBarChart.value(d.value);\n      return {\n        label: d.label,\n        value,\n        color: d.color ?? this.color(),\n        heightPercent: (Math.max(0, value) / this.resolvedMax()) * 100,\n        /**\n         * The bar's accessible name. The label and the value sit in separate\n         * rows, so a screen reader read every number and then every label with\n         * nothing tying the two together — and with `showValues` off the\n         * numbers were not in the accessible tree at all.\n         */\n        name: `${d.label}: ${value}`,\n      };\n    })\n  );\n}\n\nexport type { WrBarChartDatum } from './interfaces';\n","<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-blur-text.mjs

@@ -165,12 +165,12 @@ class WrBlurText {
             };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrBlurText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrBlurText, isStandalone: true, selector: "wr-blur-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, animateBy: { classPropertyName: "animateBy", publicName: "animateBy", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, stepDuration: { classPropertyName: "stepDuration", publicName: "stepDuration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { classAttribute: "wr-blur-text" }, ngImport: i0, template: "@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBlurText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrBlurText, isStandalone: true, selector: "wr-blur-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, animateBy: { classPropertyName: "animateBy", publicName: "animateBy", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, stepDuration: { classPropertyName: "stepDuration", publicName: "stepDuration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { classAttribute: "wr-blur-text" }, ngImport: i0, template: "<!-- The readable text, once: the pieces below are per-character spans. -->\n<span class=\"wr-blur-text__sr-only\">{{ text() }}</span>\n@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\" aria-hidden=\"true\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\" aria-hidden=\"true\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrBlurText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBlurText, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-blur-text', encapsulation: ViewEncapsulation.None, host: { class: 'wr-blur-text' }, template: "@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"] }]
+            args: [{ selector: 'wr-blur-text', encapsulation: ViewEncapsulation.None, host: { class: 'wr-blur-text' }, template: "<!-- The readable text, once: the pieces below are per-character spans. -->\n<span class=\"wr-blur-text__sr-only\">{{ text() }}</span>\n@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\" aria-hidden=\"true\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\" aria-hidden=\"true\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], animateBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateBy", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], stepDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepDuration", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootMargin", required: false }] }], animationComplete: [{ type: i0.Output, args: ["animationComplete"] }] } });
 
 /**

package/fesm2022/ngwr-blur-text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-blur-text.mjs","sources":["../../../projects/lib/blur-text/blur-text.ts","../../../projects/lib/blur-text/blur-text.html","../../../projects/lib/blur-text/ngwr-blur-text.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 * Angular adaptation of the BlurText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/blur-text\n *\n * The reactbits version uses `motion/react` (framer-motion successor).\n * This port is dependency-free — uses the Web Animations API for the\n * three-keyframe blur-and-fade-in, triggered by `IntersectionObserver`.\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\ntype Unit = 'chars' | 'words';\ntype Direction = 'top' | 'bottom';\ntype Piece = { readonly kind: 'piece'; readonly text: string } | { readonly kind: 'space'; readonly text: string };\n\nfunction splitPieces(text: string, unit: Unit): readonly Piece[] {\n  if (!text) return [];\n  if (unit === 'words') {\n    return text.split(/(\\s+)/).flatMap<Piece>(seg => {\n      if (seg.length === 0) return [];\n      if (/^\\s+$/.test(seg)) return [{ kind: 'space', text: seg }];\n      return [{ kind: 'piece', text: seg }];\n    });\n  }\n  return [...text].map<Piece>(ch => (/\\s/.test(ch) ? { kind: 'space', text: ch } : { kind: 'piece', text: ch }));\n}\n\n/**\n * Reveals text by splitting it into chars or words and animating each\n * piece in from a blurred / offset state through a brief mid-step into\n * the steady state. Triggers when the host enters the viewport.\n *\n * @example\n * ```html\n * <wr-blur-text\n *   text=\"Welcome to ngwr\"\n *   animateBy=\"words\"\n *   direction=\"top\"\n *   [delay]=\"120\"\n *   [stepDuration]=\"0.4\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/blur-text\n */\n@Component({\n  selector: 'wr-blur-text',\n  templateUrl: './blur-text.html',\n  styleUrl: './blur-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-blur-text' },\n})\nexport class WrBlurText {\n  /** Text to animate. Required. */\n  readonly text = input.required<string>();\n\n  /** Split granularity. @default 'words' */\n  readonly animateBy = input<Unit>('words');\n\n  /** Entry direction. `'top'` slides down into place; `'bottom'` slides up. @default 'top' */\n  readonly direction = input<Direction>('top');\n\n  /** Per-piece stagger in ms. @default 200 */\n  readonly delay = input(200, { transform: numAttr(200) });\n\n  /** Duration of each keyframe step in seconds (total = 2 × stepDuration). @default 0.35 */\n  readonly stepDuration = input(0.35, { transform: numAttr(0.35) });\n\n  /** CSS easing function. @default 'linear' (matches reactbits' identity easing) */\n  readonly easing = input('linear');\n\n  /** `IntersectionObserver.threshold` (0..1). @default 0.1 */\n  readonly threshold = input(0.1, { transform: numAttr(0.1) });\n\n  /** `IntersectionObserver.rootMargin`. @default '0px' */\n  readonly rootMargin = input('0px');\n\n  /** Emitted once all pieces finish animating. */\n  readonly animationComplete = output<void>();\n\n  protected readonly pieces = computed(() => splitPieces(this.text(), this.animateBy()));\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  private hasAnimated = false;\n\n  constructor() {\n    if (!this.isBrowser) return;\n    afterNextRender(() => this.startObserver());\n    effect(() => {\n      this.text();\n      this.animateBy();\n      this.hasAnimated = false;\n      queueMicrotask(() => this.startObserver());\n    });\n  }\n\n  private startObserver(): void {\n    if (this.hasAnimated) return;\n    const host = this.host.nativeElement;\n    const io = new IntersectionObserver(\n      (entries, obs) => {\n        for (const e of entries) {\n          if (e.isIntersecting) {\n            obs.disconnect();\n            this.animate();\n            break;\n          }\n        }\n      },\n      { threshold: this.threshold(), rootMargin: this.rootMargin() }\n    );\n    io.observe(host);\n    this.destroyRef.onDestroy(() => io.disconnect());\n  }\n\n  private animate(): void {\n    if (this.hasAnimated) return;\n    this.hasAnimated = true;\n\n    // Reduced motion: pieces already render clear and in place — skip\n    // the blur tween and report completion right away.\n    if (this.platform.prefersReducedMotion()) {\n      this.animationComplete.emit();\n      return;\n    }\n\n    const targets = this.host.nativeElement.querySelectorAll<HTMLElement>('.wr-blur-text__piece');\n    if (targets.length === 0) {\n      this.animationComplete.emit();\n      return;\n    }\n\n    const dir = this.direction();\n    const stepMs = this.stepDuration() * 1000;\n    const totalMs = stepMs * 2;\n    const stagger = this.delay();\n    const easing = this.easing();\n\n    // Three-keyframe shape per reactbits:\n    //   0    → fully blurred, offset, transparent\n    //   50%  → half-blur, half-opacity, small reverse offset\n    //   100% → clear, opaque, at rest\n    const startY = dir === 'top' ? -50 : 50;\n    const midY = dir === 'top' ? 5 : -5;\n    const keyframes: Keyframe[] = [\n      { opacity: 0, filter: 'blur(10px)', transform: `translate3d(0, ${startY}px, 0)` },\n      { opacity: 0.5, filter: 'blur(5px)', transform: `translate3d(0, ${midY}px, 0)`, offset: 0.5 },\n      { opacity: 1, filter: 'blur(0px)', transform: 'translate3d(0, 0, 0)' },\n    ];\n\n    let remaining = targets.length;\n    targets.forEach((el, i) => {\n      el.style.opacity = '0';\n      el.style.filter = 'blur(10px)';\n      el.style.transform = `translate3d(0, ${startY}px, 0)`;\n      const animation = el.animate(keyframes, {\n        duration: totalMs,\n        delay: i * stagger,\n        easing,\n        fill: 'forwards',\n      });\n      animation.onfinish = (): void => {\n        el.style.opacity = '1';\n        el.style.filter = 'blur(0px)';\n        el.style.transform = 'translate3d(0, 0, 0)';\n        try {\n          animation.cancel();\n        } catch {\n          /* noop */\n        }\n        remaining -= 1;\n        if (remaining === 0) this.animationComplete.emit();\n      };\n    });\n  }\n}\n","@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\">{{ p.text }}</span>\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-blur-text.mjs","sources":["../../../projects/lib/blur-text/blur-text.ts","../../../projects/lib/blur-text/blur-text.html","../../../projects/lib/blur-text/ngwr-blur-text.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 * Angular adaptation of the BlurText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/blur-text\n *\n * The reactbits version uses `motion/react` (framer-motion successor).\n * This port is dependency-free — uses the Web Animations API for the\n * three-keyframe blur-and-fade-in, triggered by `IntersectionObserver`.\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\ntype Unit = 'chars' | 'words';\ntype Direction = 'top' | 'bottom';\ntype Piece = { readonly kind: 'piece'; readonly text: string } | { readonly kind: 'space'; readonly text: string };\n\nfunction splitPieces(text: string, unit: Unit): readonly Piece[] {\n  if (!text) return [];\n  if (unit === 'words') {\n    return text.split(/(\\s+)/).flatMap<Piece>(seg => {\n      if (seg.length === 0) return [];\n      if (/^\\s+$/.test(seg)) return [{ kind: 'space', text: seg }];\n      return [{ kind: 'piece', text: seg }];\n    });\n  }\n  return [...text].map<Piece>(ch => (/\\s/.test(ch) ? { kind: 'space', text: ch } : { kind: 'piece', text: ch }));\n}\n\n/**\n * Reveals text by splitting it into chars or words and animating each\n * piece in from a blurred / offset state through a brief mid-step into\n * the steady state. Triggers when the host enters the viewport.\n *\n * @example\n * ```html\n * <wr-blur-text\n *   text=\"Welcome to ngwr\"\n *   animateBy=\"words\"\n *   direction=\"top\"\n *   [delay]=\"120\"\n *   [stepDuration]=\"0.4\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/blur-text\n */\n@Component({\n  selector: 'wr-blur-text',\n  templateUrl: './blur-text.html',\n  styleUrl: './blur-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-blur-text' },\n})\nexport class WrBlurText {\n  /** Text to animate. Required. */\n  readonly text = input.required<string>();\n\n  /** Split granularity. @default 'words' */\n  readonly animateBy = input<Unit>('words');\n\n  /** Entry direction. `'top'` slides down into place; `'bottom'` slides up. @default 'top' */\n  readonly direction = input<Direction>('top');\n\n  /** Per-piece stagger in ms. @default 200 */\n  readonly delay = input(200, { transform: numAttr(200) });\n\n  /** Duration of each keyframe step in seconds (total = 2 × stepDuration). @default 0.35 */\n  readonly stepDuration = input(0.35, { transform: numAttr(0.35) });\n\n  /** CSS easing function. @default 'linear' (matches reactbits' identity easing) */\n  readonly easing = input('linear');\n\n  /** `IntersectionObserver.threshold` (0..1). @default 0.1 */\n  readonly threshold = input(0.1, { transform: numAttr(0.1) });\n\n  /** `IntersectionObserver.rootMargin`. @default '0px' */\n  readonly rootMargin = input('0px');\n\n  /** Emitted once all pieces finish animating. */\n  readonly animationComplete = output<void>();\n\n  protected readonly pieces = computed(() => splitPieces(this.text(), this.animateBy()));\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  private hasAnimated = false;\n\n  constructor() {\n    if (!this.isBrowser) return;\n    afterNextRender(() => this.startObserver());\n    effect(() => {\n      this.text();\n      this.animateBy();\n      this.hasAnimated = false;\n      queueMicrotask(() => this.startObserver());\n    });\n  }\n\n  private startObserver(): void {\n    if (this.hasAnimated) return;\n    const host = this.host.nativeElement;\n    const io = new IntersectionObserver(\n      (entries, obs) => {\n        for (const e of entries) {\n          if (e.isIntersecting) {\n            obs.disconnect();\n            this.animate();\n            break;\n          }\n        }\n      },\n      { threshold: this.threshold(), rootMargin: this.rootMargin() }\n    );\n    io.observe(host);\n    this.destroyRef.onDestroy(() => io.disconnect());\n  }\n\n  private animate(): void {\n    if (this.hasAnimated) return;\n    this.hasAnimated = true;\n\n    // Reduced motion: pieces already render clear and in place — skip\n    // the blur tween and report completion right away.\n    if (this.platform.prefersReducedMotion()) {\n      this.animationComplete.emit();\n      return;\n    }\n\n    const targets = this.host.nativeElement.querySelectorAll<HTMLElement>('.wr-blur-text__piece');\n    if (targets.length === 0) {\n      this.animationComplete.emit();\n      return;\n    }\n\n    const dir = this.direction();\n    const stepMs = this.stepDuration() * 1000;\n    const totalMs = stepMs * 2;\n    const stagger = this.delay();\n    const easing = this.easing();\n\n    // Three-keyframe shape per reactbits:\n    //   0    → fully blurred, offset, transparent\n    //   50%  → half-blur, half-opacity, small reverse offset\n    //   100% → clear, opaque, at rest\n    const startY = dir === 'top' ? -50 : 50;\n    const midY = dir === 'top' ? 5 : -5;\n    const keyframes: Keyframe[] = [\n      { opacity: 0, filter: 'blur(10px)', transform: `translate3d(0, ${startY}px, 0)` },\n      { opacity: 0.5, filter: 'blur(5px)', transform: `translate3d(0, ${midY}px, 0)`, offset: 0.5 },\n      { opacity: 1, filter: 'blur(0px)', transform: 'translate3d(0, 0, 0)' },\n    ];\n\n    let remaining = targets.length;\n    targets.forEach((el, i) => {\n      el.style.opacity = '0';\n      el.style.filter = 'blur(10px)';\n      el.style.transform = `translate3d(0, ${startY}px, 0)`;\n      const animation = el.animate(keyframes, {\n        duration: totalMs,\n        delay: i * stagger,\n        easing,\n        fill: 'forwards',\n      });\n      animation.onfinish = (): void => {\n        el.style.opacity = '1';\n        el.style.filter = 'blur(0px)';\n        el.style.transform = 'translate3d(0, 0, 0)';\n        try {\n          animation.cancel();\n        } catch {\n          /* noop */\n        }\n        remaining -= 1;\n        if (remaining === 0) this.animationComplete.emit();\n      };\n    });\n  }\n}\n","<!-- The readable text, once: the pieces below are per-character spans. -->\n<span class=\"wr-blur-text__sr-only\">{{ text() }}</span>\n@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\" aria-hidden=\"true\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\" aria-hidden=\"true\">{{ p.text }}</span>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}