ngwr 15.5.0 → 15.6.0

package/fesm2022/ngwr-affix.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-affix.mjs","names":[],"sources":["../../../projects/lib/affix/affix.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  Injector,\n  PLATFORM_ID,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\n/**\n * The element a `position: sticky` host actually pins against.\n *\n * Walks up looking for an ancestor that scrolls — `overflow` anything but\n * `visible` on an axis, and a box that can actually be scrolled. `null` means\n * the document scroller, which is both what the browser uses and what\n * `IntersectionObserver` takes for \"the viewport\".\n *\n * A `getComputedStyle` read per ancestor, once per observer construction —\n * cheap, and the only way to answer the question: CSS resolves it internally\n * and exposes nothing.\n */\nfunction scrollParent(el: HTMLElement): HTMLElement | null {\n  for (let node = el.parentElement; node !== null; node = node.parentElement) {\n    if (node === document.body || node === document.documentElement) break;\n    const style = getComputedStyle(node);\n    const scrolls = /auto|scroll|overlay|hidden/.test(`${style.overflowY} ${style.overflowX}`);\n    if (scrolls && node.scrollHeight > node.clientHeight) return node;\n  }\n  return null;\n}\n\n/**\n * Whether a parent lays its children out as flex or grid items, where a flow\n * sentinel is not inert: a flex container puts a `gap` on each side of it, and\n * a grid container gives it a cell of its own, shifting every item after it. A\n * computed value, so `inline-flex` and `inline-grid` answer the same.\n */\nfunction laysOutItems(parent: HTMLElement): boolean {\n  return /\\b(?:inline-)?(?:flex|grid)\\b/.test(getComputedStyle(parent).display);\n}\n\n/**\n * Every out-of-flow affix in one parent shares that parent's containing-block\n * claim, so only the last one to leave gives it back — sticky group headers in\n * one filtered list come and go in any order. `inline` is the parent's own\n * inline `position`, kept only when the fallback in `claimContainer` wrote one.\n */\nconst containers = new WeakMap<HTMLElement, { count: number; inline: string | null }>();\n\n/**\n * Makes `parent` the containing block of the absolutely positioned sentinels\n * inside it, and returns the release.\n *\n * An absolute box scrolls with a scroller's content only when its containing\n * block sits inside that scroller, and the nearest positioned ancestor may well\n * be outside it — so inside a nested scroller the sentinel would hold still while\n * the host scrolled away, and the state would never flip.\n *\n * The parent is TAGGED rather than styled: `ngwr/affix` gives\n * `.wr-affix__container` its `position: relative` under `:where()`, at zero\n * specificity, so any position the author gives the parent still wins, a media\n * query included. An inline `position` would beat all of them for the\n * directive's whole lifetime. Only when nothing positions the parent once it is\n * tagged — the stylesheet is not loaded — is `relative` written inline, and the\n * last release puts the inline value back.\n */\nfunction claimContainer(parent: HTMLElement): () => void {\n  let claim = containers.get(parent);\n  if (!claim) {\n    parent.classList.add('wr-affix__container');\n    const positioned = /relative|absolute|fixed|sticky/.test(getComputedStyle(parent).position);\n    claim = { count: 0, inline: positioned ? null : parent.style.position };\n    if (!positioned) parent.style.position = 'relative';\n    containers.set(parent, claim);\n  }\n  claim.count++;\n\n  const held = claim;\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    if (--held.count > 0) return;\n    containers.delete(parent);\n    parent.classList.remove('wr-affix__container');\n    if (held.inline !== null && parent.style.position === 'relative') parent.style.position = held.inline;\n  };\n}\n\n/**\n * Takes the sentinel out of a flex or grid parent's layout and keeps it on the\n * host's natural top edge. Returns the teardown.\n *\n * Absolutely positioned and zero-sized, so neither a gap nor a track is made\n * for it — which leaves its place to be measured. Two choices follow:\n *\n *   - **The parent becomes the containing block** — see `claimContainer`.\n *   - **The host is measured with sticky switched off.** A stuck element's\n *     `offsetTop` already includes the sticky shift, and the sentinel marks the\n *     line the host leaves its natural place at. Static and sticky lay out\n *     identically in flow, so nothing else moves, and both writes land before\n *     the next paint.\n *\n * Re-measured whenever the parent, the host or anything laid out before the host\n * changes size — those are what move the host's top — and whenever the parent's\n * children change: an element inserted above the host moves it without resizing\n * a fixed-height scroll panel, and becomes one more thing to watch.\n */\nfunction pinOutOfFlow(host: HTMLElement, parent: HTMLElement, sentinel: HTMLElement): () => void {\n  const release = claimContainer(parent);\n\n  const measure = (): void => {\n    const position = host.style.position;\n    host.style.position = 'static';\n    const top = host.offsetTop;\n    const left = host.offsetLeft;\n    host.style.position = position;\n    sentinel.style.top = `${top}px`;\n    // Physical on purpose: `offsetLeft` is physical too, so the pair lines up in either direction.\n    sentinel.style.left = `${left}px`;\n  };\n  measure();\n\n  const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => measure());\n  const watchLayout = (): void => {\n    if (!resize) return;\n    resize.disconnect();\n    resize.observe(parent);\n    for (let node: Element | null = host; node; node = node.previousElementSibling) {\n      if (node !== sentinel) resize.observe(node);\n    }\n  };\n  watchLayout();\n\n  const children =\n    typeof MutationObserver === 'undefined'\n      ? null\n      : new MutationObserver(() => {\n          watchLayout();\n          measure();\n        });\n  children?.observe(parent, { childList: true });\n\n  return () => {\n    resize?.disconnect();\n    children?.disconnect();\n    release();\n  };\n}\n\n/**\n * Stick-on-scroll directive. Combines native CSS `position: sticky` with\n * an `IntersectionObserver`-driven `wr-affix--active` state class, so consumers\n * can style the element differently while it's pinned (e.g. add a\n * shadow, change the background, shrink the height).\n *\n * The host gets `position: sticky; top: ${offsetTop}px;` inline. A tiny\n * sentinel `<div>` is inserted just before the host — when the sentinel\n * scrolls out of view, the host is \"stuck\" and gets `wr-affix--active`\n * + an `(wrAffixChange)` emission.\n *\n * In block layout the sentinel is a zero-height flow element. In a flex or grid\n * parent (read once, after the first render) it is absolutely positioned and\n * zero-sized instead, so it adds no gap and takes no grid cell. It is placed on\n * the host's natural top edge and re-placed when the parent, the host or an\n * element before the host resizes, or when the parent's children change. That\n * needs the parent as its containing block: the parent is tagged\n * `wr-affix__container`, which `ngwr/affix` makes `position: relative` at zero\n * specificity, so a position the author gives it still wins. The tag comes off\n * when the last affix in that parent is destroyed.\n *\n * Works inside any scroll container without configuration: CSS sticky picks\n * the nearest scrollable ancestor, and the observer watching for the pinned\n * state is given that same element as its root — see `scrollParent`. Without\n * that second half the two measured different lines, and the state never\n * flipped inside a nested scroller.\n *\n * @example\n * ```html\n * <header wrAffix [wrAffixOffsetTop]=\"0\">\n *   <!-- adds a shadow once stuck -->\n * </header>\n * ```\n *\n * ```scss\n * header.wr-affix.wr-affix--active {\n *   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\n@Directive({\n  selector: '[wrAffix]',\n  host: {\n    class: 'wr-affix',\n    '[style.position]': '\"sticky\"',\n    '[style.top.px]': 'offsetTop()',\n  },\n})\nexport class WrAffix {\n  /** Pixels from the top of the scroll container when stuck. @default 0 */\n  readonly offsetTop = input(0, {\n    alias: 'wrAffixOffsetTop',\n    transform: (v: unknown): number => coerceNumberProperty(v, 0),\n  });\n\n  /**\n   * Fires when the element pins or unpins — `true` once it has stuck, `false`\n   * when it returns to the flow. Use it to swap a shadow or a compact layout.\n   */\n  // eslint-disable-next-line @angular-eslint/no-output-rename -- keep wr-prefixed binding to match `[wrAffix]`\n  readonly affixChange = output<boolean>({ alias: 'wrAffixChange' });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  /**\n   * `afterNextRender`'s callback is not an injection context, and the observer\n   * cannot exist before the sentinel it watches — so the effect that rebuilds it\n   * is handed the injector explicitly.\n   */\n  private readonly injector = inject(Injector);\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      const el = this.host.nativeElement;\n      const parent = el.parentElement;\n      if (!parent) return;\n\n      // Sentinel: an empty zero-height block placed immediately before\n      // the host. When the sentinel scrolls out of view, the host is\n      // necessarily \"stuck\" at the configured offset.\n      const sentinel = el.ownerDocument.createElement('div');\n      sentinel.className = 'wr-affix__sentinel';\n      sentinel.setAttribute('aria-hidden', 'true');\n      // In a flex or grid parent a flow element is an item with a gap or a cell\n      // of its own, so there it leaves the flow — see `pinOutOfFlow`.\n      const outOfFlow = laysOutItems(parent);\n      sentinel.style.cssText = outOfFlow\n        ? 'position:absolute;width:0;height:0;margin:0;padding:0;pointer-events:none;'\n        : 'height:0;width:100%;margin:0;padding:0;pointer-events:none;';\n      parent.insertBefore(sentinel, el);\n      const unpin = outOfFlow ? pinOutOfFlow(el, parent, sentinel) : null;\n\n      // The observer reports STATE, not transitions: it delivers an entry for the\n      // sentinel as soon as it starts watching it — before anything has scrolled —\n      // and can repeat a state the host is already in (a resize, another crossing of\n      // the same threshold). `affixChange` is documented as the transition, so it\n      // only fires on one. The starting state is \"not affixed\", which is what the\n      // element already renders as, so that first entry is silent.\n      let affixed = false;\n\n      let observer: IntersectionObserver | null = null;\n\n      // `rootMargin` is fixed for an observer's lifetime, so a changed offset means\n      // a NEW observer. Without this the two halves of the offset drifted apart:\n      // `[style.top.px]` is a live binding, so a header that animates its offset\n      // pinned at the new line while still flipping state at the old one.\n      // Re-observing re-delivers the current state, which the transition guard\n      // above absorbs when nothing has actually changed.\n      effect(\n        onCleanup => {\n          const offset = this.offsetTop();\n\n          // The observer's ROOT has to be the element the host sticks to, not\n          // the viewport. `position: sticky` pins against the nearest\n          // SCROLLING ancestor, and an observer with no root measures against\n          // the viewport — so inside any nested scroller whose top sits below\n          // the viewport's, `rootBounds.top` was 0 while the host pinned at\n          // the container's own top. The direction guard below then computed\n          // `false` at the one crossing it was ever handed, and because\n          // `isIntersecting` stays false afterwards no further callback came:\n          // `wr-affix--active` was never added and `(wrAffixChange)` never\n          // emitted, for the whole scroll. The JSDoc promised the opposite —\n          // \"works inside any scroll container without configuration\" — and\n          // the docs page's own demo is exactly that shape.\n          const root = scrollParent(el);\n\n          observer = new IntersectionObserver(\n            ([entry]) => {\n              // NOT `!entry.isIntersecting` on its own. A sentinel is outside\n              // the root in TWO directions, and only one of them means the\n              // header has stuck: above the line because the page scrolled past\n              // it, or below it because the host simply starts further down the\n              // page than the first screen. The bare negation called both\n              // \"affixed\", so any sticky element below the fold reported\n              // `affixed = true` and painted `.wr-affix--active` on its very\n              // first observer callback — before a pixel had scrolled — and\n              // emitted a transition that never happened.\n              //\n              // `rootBounds.top` is the offset line (the negative `rootMargin`\n              // above moves it), so a sentinel above it has genuinely gone by.\n              const rootTop = entry.rootBounds?.top ?? offset;\n              const next = !entry.isIntersecting && entry.boundingClientRect.top < rootTop;\n              if (next === affixed) return;\n\n              affixed = next;\n              el.classList.toggle('wr-affix--active', next);\n              this.affixChange.emit(next);\n            },\n            {\n              // `null` is the document scroller, which is what the browser\n              // uses for a host with no scrolling ancestor.\n              root,\n              // Trigger when the sentinel's top crosses the offset line. NEGATED\n              // rather than prefixed with a minus: a negative offset is valid sticky\n              // CSS (the host pins partly above the edge), and the prefix turned\n              // `-10` into `--10px`, which the constructor refuses with a\n              // SyntaxError — so the state never flipped at all. Negated, a\n              // negative offset GROWS the root above its edge, which is where the\n              // host pins.\n              rootMargin: `${-offset}px 0px 0px 0px`,\n              threshold: [0],\n            }\n          );\n          observer.observe(sentinel);\n\n          onCleanup(() => observer?.disconnect());\n        },\n        { injector: this.injector }\n      );\n\n      this.destroyRef.onDestroy(() => {\n        observer?.disconnect();\n        unpin?.();\n        sentinel.remove();\n        el.classList.remove('wr-affix--active');\n      });\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ngwr-affix.mjs","names":[],"sources":["../../../projects/lib/affix/affix.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  Injector,\n  PLATFORM_ID,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\nimport { wrCheckStyles } from 'ngwr/utils';\n\n/**\n * The element a `position: sticky` host actually pins against.\n *\n * Walks up looking for an ancestor that scrolls — `overflow` anything but\n * `visible` on an axis, and a box that can actually be scrolled. `null` means\n * the document scroller, which is both what the browser uses and what\n * `IntersectionObserver` takes for \"the viewport\".\n *\n * A `getComputedStyle` read per ancestor, once per observer construction —\n * cheap, and the only way to answer the question: CSS resolves it internally\n * and exposes nothing.\n */\nfunction scrollParent(el: HTMLElement): HTMLElement | null {\n  for (let node = el.parentElement; node !== null; node = node.parentElement) {\n    if (node === document.body || node === document.documentElement) break;\n    const style = getComputedStyle(node);\n    const scrolls = /auto|scroll|overlay|hidden/.test(`${style.overflowY} ${style.overflowX}`);\n    if (scrolls && node.scrollHeight > node.clientHeight) return node;\n  }\n  return null;\n}\n\n/**\n * Whether a parent lays its children out as flex or grid items, where a flow\n * sentinel is not inert: a flex container puts a `gap` on each side of it, and\n * a grid container gives it a cell of its own, shifting every item after it. A\n * computed value, so `inline-flex` and `inline-grid` answer the same.\n */\nfunction laysOutItems(parent: HTMLElement): boolean {\n  return /\\b(?:inline-)?(?:flex|grid)\\b/.test(getComputedStyle(parent).display);\n}\n\n/**\n * Every out-of-flow affix in one parent shares that parent's containing-block\n * claim, so only the last one to leave gives it back — sticky group headers in\n * one filtered list come and go in any order. `inline` is the parent's own\n * inline `position`, kept only when the fallback in `claimContainer` wrote one.\n */\nconst containers = new WeakMap<HTMLElement, { count: number; inline: string | null }>();\n\n/**\n * Makes `parent` the containing block of the absolutely positioned sentinels\n * inside it, and returns the release.\n *\n * An absolute box scrolls with a scroller's content only when its containing\n * block sits inside that scroller, and the nearest positioned ancestor may well\n * be outside it — so inside a nested scroller the sentinel would hold still while\n * the host scrolled away, and the state would never flip.\n *\n * The parent is TAGGED rather than styled: `ngwr/affix` gives\n * `.wr-affix__container` its `position: relative` under `:where()`, at zero\n * specificity, so any position the author gives the parent still wins, a media\n * query included. An inline `position` would beat all of them for the\n * directive's whole lifetime. Only when nothing positions the parent once it is\n * tagged — the stylesheet is not loaded — is `relative` written inline, and the\n * last release puts the inline value back.\n */\nfunction claimContainer(parent: HTMLElement): () => void {\n  let claim = containers.get(parent);\n  if (!claim) {\n    parent.classList.add('wr-affix__container');\n    const positioned = /relative|absolute|fixed|sticky/.test(getComputedStyle(parent).position);\n    claim = { count: 0, inline: positioned ? null : parent.style.position };\n    if (!positioned) parent.style.position = 'relative';\n    containers.set(parent, claim);\n  }\n  claim.count++;\n\n  const held = claim;\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    if (--held.count > 0) return;\n    containers.delete(parent);\n    parent.classList.remove('wr-affix__container');\n    if (held.inline !== null && parent.style.position === 'relative') parent.style.position = held.inline;\n  };\n}\n\n/**\n * Takes the sentinel out of a flex or grid parent's layout and keeps it on the\n * host's natural top edge. Returns the teardown.\n *\n * Absolutely positioned and zero-sized, so neither a gap nor a track is made\n * for it — which leaves its place to be measured. Two choices follow:\n *\n *   - **The parent becomes the containing block** — see `claimContainer`.\n *   - **The host is measured with sticky switched off.** A stuck element's\n *     `offsetTop` already includes the sticky shift, and the sentinel marks the\n *     line the host leaves its natural place at. Static and sticky lay out\n *     identically in flow, so nothing else moves, and both writes land before\n *     the next paint.\n *\n * Re-measured whenever the parent, the host or anything laid out before the host\n * changes size — those are what move the host's top — and whenever the parent's\n * children change: an element inserted above the host moves it without resizing\n * a fixed-height scroll panel, and becomes one more thing to watch.\n */\nfunction pinOutOfFlow(host: HTMLElement, parent: HTMLElement, sentinel: HTMLElement): () => void {\n  const release = claimContainer(parent);\n\n  const measure = (): void => {\n    const position = host.style.position;\n    host.style.position = 'static';\n    const top = host.offsetTop;\n    const left = host.offsetLeft;\n    host.style.position = position;\n    sentinel.style.top = `${top}px`;\n    // Physical on purpose: `offsetLeft` is physical too, so the pair lines up in either direction.\n    sentinel.style.left = `${left}px`;\n  };\n  measure();\n\n  const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => measure());\n  const watchLayout = (): void => {\n    if (!resize) return;\n    resize.disconnect();\n    resize.observe(parent);\n    for (let node: Element | null = host; node; node = node.previousElementSibling) {\n      if (node !== sentinel) resize.observe(node);\n    }\n  };\n  watchLayout();\n\n  const children =\n    typeof MutationObserver === 'undefined'\n      ? null\n      : new MutationObserver(() => {\n          watchLayout();\n          measure();\n        });\n  children?.observe(parent, { childList: true });\n\n  return () => {\n    resize?.disconnect();\n    children?.disconnect();\n    release();\n  };\n}\n\n/**\n * Stick-on-scroll directive. Combines native CSS `position: sticky` with\n * an `IntersectionObserver`-driven `wr-affix--active` state class, so consumers\n * can style the element differently while it's pinned (e.g. add a\n * shadow, change the background, shrink the height).\n *\n * The host gets `position: sticky; top: ${offsetTop}px;` inline. A tiny\n * sentinel `<div>` is inserted just before the host — when the sentinel\n * scrolls out of view, the host is \"stuck\" and gets `wr-affix--active`\n * + an `(wrAffixChange)` emission.\n *\n * In block layout the sentinel is a zero-height flow element. In a flex or grid\n * parent (read once, after the first render) it is absolutely positioned and\n * zero-sized instead, so it adds no gap and takes no grid cell. It is placed on\n * the host's natural top edge and re-placed when the parent, the host or an\n * element before the host resizes, or when the parent's children change. That\n * needs the parent as its containing block: the parent is tagged\n * `wr-affix__container`, which `ngwr/affix` makes `position: relative` at zero\n * specificity, so a position the author gives it still wins. The tag comes off\n * when the last affix in that parent is destroyed.\n *\n * Works inside any scroll container without configuration: CSS sticky picks\n * the nearest scrollable ancestor, and the observer watching for the pinned\n * state is given that same element as its root — see `scrollParent`. Without\n * that second half the two measured different lines, and the state never\n * flipped inside a nested scroller.\n *\n * @example\n * ```html\n * <header wrAffix [wrAffixOffsetTop]=\"0\">\n *   <!-- adds a shadow once stuck -->\n * </header>\n * ```\n *\n * ```scss\n * header.wr-affix.wr-affix--active {\n *   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\n@Directive({\n  selector: '[wrAffix]',\n  host: {\n    class: 'wr-affix',\n    '[style.position]': '\"sticky\"',\n    '[style.top.px]': 'offsetTop()',\n  },\n})\nexport class WrAffix {\n  /** Pixels from the top of the scroll container when stuck. @default 0 */\n  readonly offsetTop = input(0, {\n    alias: 'wrAffixOffsetTop',\n    transform: (v: unknown): number => coerceNumberProperty(v, 0),\n  });\n\n  /**\n   * Fires when the element pins or unpins — `true` once it has stuck, `false`\n   * when it returns to the flow. Use it to swap a shadow or a compact layout.\n   */\n  // eslint-disable-next-line @angular-eslint/no-output-rename -- keep wr-prefixed binding to match `[wrAffix]`\n  readonly affixChange = output<boolean>({ alias: 'wrAffixChange' });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  /**\n   * `afterNextRender`'s callback is not an injection context, and the observer\n   * cannot exist before the sentinel it watches — so the effect that rebuilds it\n   * is handed the injector explicitly.\n   */\n  private readonly injector = inject(Injector);\n\n  constructor() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) wrCheckStyles('affix');\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      const el = this.host.nativeElement;\n      const parent = el.parentElement;\n      if (!parent) return;\n\n      // Sentinel: an empty zero-height block placed immediately before\n      // the host. When the sentinel scrolls out of view, the host is\n      // necessarily \"stuck\" at the configured offset.\n      const sentinel = el.ownerDocument.createElement('div');\n      sentinel.className = 'wr-affix__sentinel';\n      sentinel.setAttribute('aria-hidden', 'true');\n      // In a flex or grid parent a flow element is an item with a gap or a cell\n      // of its own, so there it leaves the flow — see `pinOutOfFlow`.\n      const outOfFlow = laysOutItems(parent);\n      sentinel.style.cssText = outOfFlow\n        ? 'position:absolute;width:0;height:0;margin:0;padding:0;pointer-events:none;'\n        : 'height:0;width:100%;margin:0;padding:0;pointer-events:none;';\n      parent.insertBefore(sentinel, el);\n      const unpin = outOfFlow ? pinOutOfFlow(el, parent, sentinel) : null;\n\n      // The observer reports STATE, not transitions: it delivers an entry for the\n      // sentinel as soon as it starts watching it — before anything has scrolled —\n      // and can repeat a state the host is already in (a resize, another crossing of\n      // the same threshold). `affixChange` is documented as the transition, so it\n      // only fires on one. The starting state is \"not affixed\", which is what the\n      // element already renders as, so that first entry is silent.\n      let affixed = false;\n\n      let observer: IntersectionObserver | null = null;\n\n      // `rootMargin` is fixed for an observer's lifetime, so a changed offset means\n      // a NEW observer. Without this the two halves of the offset drifted apart:\n      // `[style.top.px]` is a live binding, so a header that animates its offset\n      // pinned at the new line while still flipping state at the old one.\n      // Re-observing re-delivers the current state, which the transition guard\n      // above absorbs when nothing has actually changed.\n      effect(\n        onCleanup => {\n          const offset = this.offsetTop();\n\n          // The observer's ROOT has to be the element the host sticks to, not\n          // the viewport. `position: sticky` pins against the nearest\n          // SCROLLING ancestor, and an observer with no root measures against\n          // the viewport — so inside any nested scroller whose top sits below\n          // the viewport's, `rootBounds.top` was 0 while the host pinned at\n          // the container's own top. The direction guard below then computed\n          // `false` at the one crossing it was ever handed, and because\n          // `isIntersecting` stays false afterwards no further callback came:\n          // `wr-affix--active` was never added and `(wrAffixChange)` never\n          // emitted, for the whole scroll. The JSDoc promised the opposite —\n          // \"works inside any scroll container without configuration\" — and\n          // the docs page's own demo is exactly that shape.\n          const root = scrollParent(el);\n\n          observer = new IntersectionObserver(\n            ([entry]) => {\n              // NOT `!entry.isIntersecting` on its own. A sentinel is outside\n              // the root in TWO directions, and only one of them means the\n              // header has stuck: above the line because the page scrolled past\n              // it, or below it because the host simply starts further down the\n              // page than the first screen. The bare negation called both\n              // \"affixed\", so any sticky element below the fold reported\n              // `affixed = true` and painted `.wr-affix--active` on its very\n              // first observer callback — before a pixel had scrolled — and\n              // emitted a transition that never happened.\n              //\n              // `rootBounds.top` is the offset line (the negative `rootMargin`\n              // above moves it), so a sentinel above it has genuinely gone by.\n              const rootTop = entry.rootBounds?.top ?? offset;\n              const next = !entry.isIntersecting && entry.boundingClientRect.top < rootTop;\n              if (next === affixed) return;\n\n              affixed = next;\n              el.classList.toggle('wr-affix--active', next);\n              this.affixChange.emit(next);\n            },\n            {\n              // `null` is the document scroller, which is what the browser\n              // uses for a host with no scrolling ancestor.\n              root,\n              // Trigger when the sentinel's top crosses the offset line. NEGATED\n              // rather than prefixed with a minus: a negative offset is valid sticky\n              // CSS (the host pins partly above the edge), and the prefix turned\n              // `-10` into `--10px`, which the constructor refuses with a\n              // SyntaxError — so the state never flipped at all. Negated, a\n              // negative offset GROWS the root above its edge, which is where the\n              // host pins.\n              rootMargin: `${-offset}px 0px 0px 0px`,\n              threshold: [0],\n            }\n          );\n          observer.observe(sentinel);\n\n          onCleanup(() => observer?.disconnect());\n        },\n        { injector: this.injector }\n      );\n\n      this.destroyRef.onDestroy(() => {\n        observer?.disconnect();\n        unpin?.();\n        sentinel.remove();\n        el.classList.remove('wr-affix--active');\n      });\n    });\n  }\n}\n"],"mappings":"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"}

package/fesm2022/ngwr-alert.mjs

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
 import { Component, ElementRef, Injector, ViewEncapsulation, afterNextRender, computed, inject, input, output, signal } from "@angular/core";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { getFocusableElements, wrCheckStyles } from "ngwr/utils";
 import { useI18nText } from "ngwr/i18n";
 import { WrIcon } from "ngwr/icon";
-import { getFocusableElements } from "ngwr/utils";
 /**
 * @license
 *
@@ -11,6 +11,9 @@ import { getFocusableElements } from "ngwr/utils";
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
 var WrAlert = class WrAlert {
+	constructor() {
+		if (typeof ngDevMode === "undefined" || ngDevMode) wrCheckStyles("alert");
+	}
 	closeLabel = input(null, ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
 	resolvedCloseLabel = useI18nText(this.closeLabel, "alert.close", "Close alert");
 	title = input(null, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
@@ -125,7 +128,7 @@ var WrAlert = class WrAlert {
 			"attr.aria-live": "liveLevel()"
 		} },
 		ngImport: i0,
-		template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws — at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints —\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart — is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n    <div class=\"wr-alert__content\"><ng-content /></div>\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n",
+		template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws — at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints —\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart — is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n    <div class=\"wr-alert__content\"><ng-content /></div>\n    <div class=\"wr-alert__actions\"><ng-content select=\"[wrAlertActions]\" /></div>\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n",
 		dependencies: [{
 			kind: "component",
 			type: WrIcon,
@@ -152,9 +155,10 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.role]": "liveRole()",
 				"[attr.aria-live]": "liveLevel()"
 			},
-			template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws — at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints —\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart — is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n    <div class=\"wr-alert__content\"><ng-content /></div>\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n"
+			template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws — at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints —\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart — is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n    <div class=\"wr-alert__content\"><ng-content /></div>\n    <div class=\"wr-alert__actions\"><ng-content select=\"[wrAlertActions]\" /></div>\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n"
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		closeLabel: [{
 			type: i0.Input,

package/fesm2022/ngwr-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-alert.mjs","names":[],"sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html"],"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 {\n  Component,\n  ElementRef,\n  Injector,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\nimport { getFocusableElements } from 'ngwr/utils';\n\nimport type { WrAlertType } from './types';\n\n/**\n * Inline status banner. Use for feedback messages — saved/failed/notice etc.\n * Content placed inside renders below the message, in `.wr-alert__content`.\n *\n * @example\n * ```html\n * <wr-alert title=\"Saved\" message=\"Your changes are live.\" type=\"success\" />\n * <wr-alert title=\"Failed\" type=\"danger\" closable (closed)=\"onClose()\" />\n * <wr-alert title=\"Sync failed\" type=\"danger\">Request <code>8f2c41</code> timed out.</wr-alert>\n * ```\n *\n * @see https://ngwr.dev/reference/components/alert\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.html',\n  imports: [WrIcon],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    // `title` is an input, and a static attribute that feeds an input is ALSO\n    // written onto the host — where the browser shows it as a native tooltip\n    // over the whole component, and where it feeds the accessible name of any\n    // element that has a role. `<wr-alert title=\"Heads up\">` is the documented\n    // spelling, so every page writing it shipped both. A bound `[title]` never\n    // did this, which is why the two forms behaved differently for no reason a\n    // reader could see.\n    '[attr.title]': 'null',\n    '[class]': 'classes()',\n    '[attr.role]': 'liveRole()',\n    '[attr.aria-live]': 'liveLevel()',\n  },\n})\nexport class WrAlert {\n  /** Accessible name. Falls back to `alert.close`, then `'Close alert'`. */\n  readonly closeLabel = input<string | null>(null);\n\n  protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'alert.close', 'Close alert');\n\n  /**\n   * Optional headline shown at the top of the alert.\n   *\n   * @default null\n   */\n  readonly title = input<string | null>(null);\n\n  /**\n   * Visual variant.\n   *\n   * @default 'info'\n   */\n  readonly type = input<WrAlertType>('info');\n\n  /**\n   * Override the default per-type icon with any ngwr icon name.\n   *\n   * @default null\n   */\n  readonly iconName = input<WrIconName | null>(null);\n\n  /**\n   * Optional secondary message rendered below the title.\n   *\n   * @default null\n   */\n  readonly message = input<string | null>(null);\n\n  /**\n   * When `true`, renders a leading status icon matching the `type`.\n   * Pass `false` to hide. Ignored when `iconName` is set.\n   *\n   * @default true\n   */\n  readonly icon = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * When `true`, renders a close button.\n   *\n   * @default false\n   */\n  readonly closable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Emitted when the user dismisses the alert via the close button. If the close\n   * button had focus, focus moves on to the next focusable element after the alert\n   * (or the one before it, when nothing follows) — unless a `(closed)` handler has\n   * placed it somewhere itself.\n   */\n  readonly closed = output<void>();\n\n  protected readonly dismissed = signal(false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-alert', `wr-alert--${this.type()}`];\n    if (this.dismissed()) parts.push('wr-alert--dismissed');\n    return parts.join(' ');\n  });\n\n  /** Escalate role/aria-live for danger/warning alerts. */\n  protected readonly liveRole = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' ? 'alert' : 'status'\n  );\n  protected readonly liveLevel = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' || this.type() === 'warning' ? 'assertive' : 'polite'\n  );\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly injector = inject(Injector);\n\n  protected onClose(): void {\n    const host = this.host.nativeElement;\n    const hadFocus = host.contains(host.ownerDocument.activeElement);\n    this.dismissed.set(true);\n    this.closed.emit();\n    if (hadFocus) afterNextRender(() => this.handOnFocus(), { injector: this.injector });\n  }\n\n  /**\n   * The close button is removed with the rest of the content, and a focused element\n   * that leaves the DOM drops the caret on `<body>`: a keyboard user's next Tab, and\n   * a screen reader's reading position, started over from the top of the page. Run\n   * after the render that removed it, so a `(closed)` handler that moved focus on\n   * purpose is seen and left alone.\n   */\n  private handOnFocus(): void {\n    const host = this.host.nativeElement;\n    const doc = host.ownerDocument;\n    const active = doc.activeElement;\n    if (active && active !== doc.body) return;\n    // Tab stops only: a roving composite parks its other items at -1. The host has\n    // nothing focusable left inside it, so every stop is either before or after it.\n    const stops = getFocusableElements(doc.body).filter(el => el.tabIndex >= 0);\n    // eslint-disable-next-line no-bitwise -- compareDocumentPosition answers with a bitmask\n    const after = stops.findIndex(el => (host.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);\n    (after >= 0 ? stops[after] : stops.at(-1))?.focus();\n  }\n}\n","@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws — at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints —\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart — is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n    <div class=\"wr-alert__content\"><ng-content /></div>\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA2DA,IAAa,UAAb,MAAa,QAAO;CAET,aAAa,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAE7B,qBAAqB,YAAY,KAAK,YAAY,eAAe,aAAa;CAOxF,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOlC,OAAO,MAAmB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,WAAW,MAAyB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAOzC,UAAU,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAQpC,OAAO,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAOrD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAQ1D,SAAS,OAAM;CAEL,YAAY,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEzB,UAAU,eAAc;EACzC,MAAM,QAAQ,CAAC,YAAY,aAAa,KAAK,KAAI,GAAI;EACrD,IAAI,KAAK,UAAS,GAAI,MAAM,KAAK,qBAAqB;EACtD,OAAO,MAAM,KAAK,GAAG;CACvB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,WAAW,eAC5B,KAAK,UAAS,IAAK,OAAO,KAAK,KAAI,MAAO,WAAW,UAAU,UAChE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACkB,YAAY,eAC7B,KAAK,UAAS,IAAK,OAAO,KAAK,KAAI,MAAO,YAAY,KAAK,KAAI,MAAO,YAAY,cAAc,UACjG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEgB,OAAO,OAAgC,UAAU;CACjD,WAAW,OAAO,QAAQ;CAEjC,UAAO;EACf,MAAM,OAAO,KAAK,KAAK;EACvB,MAAM,WAAW,KAAK,SAAS,KAAK,cAAc,aAAa;EAC/D,KAAK,UAAU,IAAI,IAAI;EACvB,KAAK,OAAO,KAAI;EAChB,IAAI,UAAU,sBAAsB,KAAK,YAAW,GAAI,EAAE,UAAU,KAAK,SAAQ,CAAE;CACrF;CASQ,cAAW;EACjB,MAAM,OAAO,KAAK,KAAK;EACvB,MAAM,MAAM,KAAK;EACjB,MAAM,SAAS,IAAI;EACnB,IAAI,UAAU,WAAW,IAAI,MAAM;EAGnC,MAAM,QAAQ,qBAAqB,IAAI,IAAI,CAAC,CAAC,QAAO,OAAM,GAAG,YAAY,CAAC;EAE1E,MAAM,QAAQ,MAAM,WAAU,QAAO,KAAK,wBAAwB,EAAE,IAAI,KAAK,iCAAiC,CAAC;EAC/G,CAAC,SAAS,IAAI,MAAM,SAAS,MAAM,GAAG,EAAE,EAAA,EAAI,MAAK;CACnD;CAtGW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,QAAA,SAAA;EAAA,MAAA,EAAA,YAAA;GAAA,cAAA;GAAA,SAAA;GAAA,aAAA;GAAA,kBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UC3DpB;EA4FA,cAAA,CAAA;GAAA,MAAA;GAAA,MDjDY;GAAM,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,CAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAgBL,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAnBnB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAU,SAEX,CAAC,MAAM;GAAC,eACF,kBAAkB;GAAI,MAC/B;IAQJ,gBAAgB;IAChB,WAAW;IACX,eAAe;IACf,oBAAoB;GACrB;GAAA,UAAA;EAAA,CAAA"}
+{"version":3,"file":"ngwr-alert.mjs","names":[],"sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html"],"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 {\n  Component,\n  ElementRef,\n  Injector,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\nimport { getFocusableElements, wrCheckStyles } from 'ngwr/utils';\n\nimport type { WrAlertType } from './types';\n\n/**\n * Inline status banner. Use for feedback messages — saved/failed/notice etc.\n * Content placed inside renders below the message, in `.wr-alert__content`.\n *\n * Slots:\n *\n * - **Default** — text under the message.\n * - **`[wrAlertActions]`** — buttons under the message, in a row that wraps.\n *\n * @example\n * ```html\n * <wr-alert title=\"Saved\" message=\"Your changes are live.\" type=\"success\" />\n * <wr-alert title=\"Failed\" type=\"danger\" closable (closed)=\"onClose()\" />\n * <wr-alert title=\"Sync failed\" type=\"danger\">Request <code>8f2c41</code> timed out.</wr-alert>\n * <wr-alert title=\"Update available\" type=\"info\">\n *   <wr-btn wrAlertActions size=\"sm\" (click)=\"update()\">Install</wr-btn>\n * </wr-alert>\n * ```\n *\n * @see https://ngwr.dev/reference/components/alert\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.html',\n  imports: [WrIcon],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    // `title` is an input, and a static attribute that feeds an input is ALSO\n    // written onto the host — where the browser shows it as a native tooltip\n    // over the whole component, and where it feeds the accessible name of any\n    // element that has a role. `<wr-alert title=\"Heads up\">` is the documented\n    // spelling, so every page writing it shipped both. A bound `[title]` never\n    // did this, which is why the two forms behaved differently for no reason a\n    // reader could see.\n    '[attr.title]': 'null',\n    '[class]': 'classes()',\n    '[attr.role]': 'liveRole()',\n    '[attr.aria-live]': 'liveLevel()',\n  },\n})\nexport class WrAlert {\n  constructor() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) wrCheckStyles('alert');\n  }\n\n  /** Accessible name. Falls back to `alert.close`, then `'Close alert'`. */\n  readonly closeLabel = input<string | null>(null);\n\n  protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'alert.close', 'Close alert');\n\n  /**\n   * Optional headline shown at the top of the alert.\n   *\n   * @default null\n   */\n  readonly title = input<string | null>(null);\n\n  /**\n   * Visual variant.\n   *\n   * @default 'info'\n   */\n  readonly type = input<WrAlertType>('info');\n\n  /**\n   * Override the default per-type icon with any ngwr icon name.\n   *\n   * @default null\n   */\n  readonly iconName = input<WrIconName | null>(null);\n\n  /**\n   * Optional secondary message rendered below the title.\n   *\n   * @default null\n   */\n  readonly message = input<string | null>(null);\n\n  /**\n   * When `true`, renders a leading status icon matching the `type`.\n   * Pass `false` to hide. Ignored when `iconName` is set.\n   *\n   * @default true\n   */\n  readonly icon = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * When `true`, renders a close button.\n   *\n   * @default false\n   */\n  readonly closable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Emitted when the user dismisses the alert via the close button. If the close\n   * button had focus, focus moves on to the next focusable element after the alert\n   * (or the one before it, when nothing follows) — unless a `(closed)` handler has\n   * placed it somewhere itself.\n   */\n  readonly closed = output<void>();\n\n  protected readonly dismissed = signal(false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-alert', `wr-alert--${this.type()}`];\n    if (this.dismissed()) parts.push('wr-alert--dismissed');\n    return parts.join(' ');\n  });\n\n  /** Escalate role/aria-live for danger/warning alerts. */\n  protected readonly liveRole = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' ? 'alert' : 'status'\n  );\n  protected readonly liveLevel = computed(() =>\n    this.dismissed() ? null : this.type() === 'danger' || this.type() === 'warning' ? 'assertive' : 'polite'\n  );\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly injector = inject(Injector);\n\n  protected onClose(): void {\n    const host = this.host.nativeElement;\n    const hadFocus = host.contains(host.ownerDocument.activeElement);\n    this.dismissed.set(true);\n    this.closed.emit();\n    if (hadFocus) afterNextRender(() => this.handOnFocus(), { injector: this.injector });\n  }\n\n  /**\n   * The close button is removed with the rest of the content, and a focused element\n   * that leaves the DOM drops the caret on `<body>`: a keyboard user's next Tab, and\n   * a screen reader's reading position, started over from the top of the page. Run\n   * after the render that removed it, so a `(closed)` handler that moved focus on\n   * purpose is seen and left alone.\n   */\n  private handOnFocus(): void {\n    const host = this.host.nativeElement;\n    const doc = host.ownerDocument;\n    const active = doc.activeElement;\n    if (active && active !== doc.body) return;\n    // Tab stops only: a roving composite parks its other items at -1. The host has\n    // nothing focusable left inside it, so every stop is either before or after it.\n    const stops = getFocusableElements(doc.body).filter(el => el.tabIndex >= 0);\n    // eslint-disable-next-line no-bitwise -- compareDocumentPosition answers with a bitmask\n    const after = stops.findIndex(el => (host.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);\n    (after >= 0 ? stops[after] : stops.at(-1))?.focus();\n  }\n}\n","@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        <!-- An OCTAGON, and the shape is the point. `danger` used to be a\n             circle holding a bar over a dot, which is the vertical mirror of\n             the `i` the @default branch draws — at the rendered 18px the two\n             differ only by where a 1.5px gap sits. The stop-sign silhouette\n             reads at that size and survives greyscale, which a mirrored gap\n             does not. -->\n        @case ('danger') {\n          <path\n            d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\"\n          />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        <!-- A bar, not the exclamation mark `danger` used to carry: `neutral`\n             emitted that glyph byte for byte. The icon is the whole difference\n             between these two, because what the component actually paints —\n             `danger-ink` #a32a33 (L 0.0968) against `on-surface-muted` #5f6c7d\n             (L 0.1464) on tints 1.036:1 apart — is a hue difference and little\n             else. -->\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M8 12h8\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n    <div class=\"wr-alert__content\"><ng-content /></div>\n    <div class=\"wr-alert__actions\"><ng-content select=\"[wrAlertActions]\" /></div>\n  </div>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAmEA,IAAa,UAAb,MAAa,QAAO;CAClB,cAAA;EACE,IAAI,OAAO,cAAc,eAAe,WAAW,cAAc,OAAO;CAC1E;CAGS,aAAa,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAE7B,qBAAqB,YAAY,KAAK,YAAY,eAAe,aAAa;CAOxF,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOlC,OAAO,MAAmB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,WAAW,MAAyB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAOzC,UAAU,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAQpC,OAAO,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAOrD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAQ1D,SAAS,OAAM;CAEL,YAAY,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEzB,UAAU,eAAc;EACzC,MAAM,QAAQ,CAAC,YAAY,aAAa,KAAK,KAAI,GAAI;EACrD,IAAI,KAAK,UAAS,GAAI,MAAM,KAAK,qBAAqB;EACtD,OAAO,MAAM,KAAK,GAAG;CACvB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,WAAW,eAC5B,KAAK,UAAS,IAAK,OAAO,KAAK,KAAI,MAAO,WAAW,UAAU,UAChE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACkB,YAAY,eAC7B,KAAK,UAAS,IAAK,OAAO,KAAK,KAAI,MAAO,YAAY,KAAK,KAAI,MAAO,YAAY,cAAc,UACjG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEgB,OAAO,OAAgC,UAAU;CACjD,WAAW,OAAO,QAAQ;CAEjC,UAAO;EACf,MAAM,OAAO,KAAK,KAAK;EACvB,MAAM,WAAW,KAAK,SAAS,KAAK,cAAc,aAAa;EAC/D,KAAK,UAAU,IAAI,IAAI;EACvB,KAAK,OAAO,KAAI;EAChB,IAAI,UAAU,sBAAsB,KAAK,YAAW,GAAI,EAAE,UAAU,KAAK,SAAQ,CAAE;CACrF;CASQ,cAAW;EACjB,MAAM,OAAO,KAAK,KAAK;EACvB,MAAM,MAAM,KAAK;EACjB,MAAM,SAAS,IAAI;EACnB,IAAI,UAAU,WAAW,IAAI,MAAM;EAGnC,MAAM,QAAQ,qBAAqB,IAAI,IAAI,CAAC,CAAC,QAAO,OAAM,GAAG,YAAY,CAAC;EAE1E,MAAM,QAAQ,MAAM,WAAU,QAAO,KAAK,wBAAwB,EAAE,IAAI,KAAK,iCAAiC,CAAC;EAC/G,CAAC,SAAS,IAAI,MAAM,SAAS,MAAM,GAAG,EAAE,EAAA,EAAI,MAAK;CACnD;CA1GW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,QAAA,SAAA;EAAA,MAAA,EAAA,YAAA;GAAA,cAAA;GAAA,SAAA;GAAA,aAAA;GAAA,kBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCnEpB;EA6FA,cAAA,CAAA;GAAA,MAAA;GAAA,MD1CY;GAAM,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,CAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAgBL,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAnBnB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAU,SAEX,CAAC,MAAM;GAAC,eACF,kBAAkB;GAAI,MAC/B;IAQJ,gBAAgB;IAChB,WAAW;IACX,eAAe;IACf,oBAAoB;GACrB;GAAA,UAAA;EAAA,CAAA"}

package/fesm2022/ngwr-anchor.mjs

@@ -1,6 +1,7 @@
 import * as i0 from "@angular/core";
 import { Component, DestroyRef, NgZone, ViewEncapsulation, afterNextRender, computed, inject, input, signal } from "@angular/core";
 import { coerceNumberProperty } from "@angular/cdk/coercion";
+import { wrCheckStyles } from "ngwr/utils";
 import { useI18nText } from "ngwr/i18n";
 import { WrPlatform } from "ngwr/platform";
 import { WrScroll } from "ngwr/scroll";
@@ -38,6 +39,7 @@ var WrAnchor = class WrAnchor {
 	pinned = null;
 	lastY = 0;
 	constructor() {
+		if (typeof ngDevMode === "undefined" || ngDevMode) wrCheckStyles("anchor");
 		if (!this.platform.isBrowser) return;
 		const handler = () => {
 			const y = window.scrollY;

package/fesm2022/ngwr-anchor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-anchor.mjs","names":[],"sources":["../../../projects/lib/anchor/anchor.ts","../../../projects/lib/anchor/anchor.html"],"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 {\n  Component,\n  DestroyRef,\n  NgZone,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrScroll } from 'ngwr/scroll';\n\nimport type { WrAnchorLink } from './types';\n\n/**\n * Scroll-spy in-page navigation. Renders a list of links to elements on\n * the page; clicking a link smooth-scrolls (via {@link WrScroll}),\n * and the closest visible heading auto-highlights as the user scrolls.\n *\n * @example\n * ```html\n * <wr-anchor\n *   [links]=\"[\n *     { id: 'intro', label: 'Introduction' },\n *     { id: 'usage', label: 'Usage', children: [\n *       { id: 'basic', label: 'Basic' },\n *       { id: 'advanced', label: 'Advanced' },\n *     ]}\n *   ]\"\n *   [offset]=\"80\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/anchor\n */\n@Component({\n  selector: 'wr-anchor',\n  templateUrl: './anchor.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-anchor', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' },\n})\nexport class WrAnchor {\n  /**\n   * The entries, in DOCUMENT ORDER — the scroll spy walks them top to bottom\n   * and stops at the first target below the cursor line, so a list in any other\n   * order highlights the wrong entry.\n   */\n  readonly links = input<readonly WrAnchorLink[]>([]);\n\n  /**\n   * Accessible name for the navigation landmark. Falls back to `anchor.label`,\n   * then `'Table of contents'` — it used to be that English string, hard-coded\n   * on the host, in a landmark a screen reader reads out on every page.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'anchor.label', 'Table of contents');\n\n  /** Pixel offset subtracted on scroll — for sticky headers. @default 0 */\n  readonly offset = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Highlight an item when its target's top is within this many px of the offset line. @default 80 */\n  readonly hitArea = input(80, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 80)) });\n\n  protected readonly activeId = signal<string | null>(null);\n\n  /**\n   * Flat list of the ids the template RENDERS — top level plus one level of\n   * children, which is the nesting `WrAnchorLink` documents. It used to recurse\n   * all the way down, so a third level was spied on and drawn nowhere: scrolling\n   * through a grandchild made it active, no rendered link matched the id, and\n   * the highlight vanished for that whole region rather than resting on its\n   * parent.\n   */\n  protected readonly flatIds = computed<readonly string[]>(() => {\n    const out: string[] = [];\n    for (const item of this.links()) {\n      out.push(item.id);\n      for (const child of item.children ?? []) out.push(child.id);\n    }\n    return out;\n  });\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  /**\n   * The entry a click asked for, and the scroll position that click sends the\n   * page to. A target near the end of the page can never reach the cursor line —\n   * the page runs out of scroll first — so the spy took the highlight straight\n   * back from the entry just clicked and handed it to the one above. While the\n   * page is still travelling toward that position, or parked on it, the clicked\n   * entry stays lit; the first scroll AWAY from it is the reader's own, and the\n   * spy takes over again.\n   */\n  private pinned: { readonly id: string; readonly y: number } | null = null;\n  private lastY = 0;\n\n  constructor() {\n    if (!this.platform.isBrowser) return;\n    const handler = (): void => {\n      const y = window.scrollY;\n      const pin = this.pinned;\n      if (pin) {\n        const distance = Math.abs(pin.y - y);\n        if (distance <= 1 || distance < Math.abs(pin.y - this.lastY)) {\n          this.lastY = y;\n          if (pin.id !== this.activeId()) this.zone.run(() => this.activeId.set(pin.id));\n          return;\n        }\n        this.pinned = null;\n      }\n      this.lastY = y;\n      const cursor = this.offset() + this.hitArea();\n      let active: string | null = null;\n      for (const id of this.flatIds()) {\n        const el = document.getElementById(id);\n        if (!el) continue;\n        const top = el.getBoundingClientRect().top;\n        if (top <= cursor) active = id;\n        else break;\n      }\n      if (active !== this.activeId()) this.zone.run(() => this.activeId.set(active));\n    };\n    this.zone.runOutsideAngular(() => window.addEventListener('scroll', handler, { passive: true }));\n    this.destroyRef.onDestroy(() => window.removeEventListener('scroll', handler));\n    // The first pass has to wait for a render: the targets are elsewhere on the\n    // page and are usually rendered AFTER this list, so a constructor-time pass\n    // found nothing by `getElementById` and left the page with no highlight at\n    // all until the reader happened to scroll.\n    afterNextRender(() => handler());\n  }\n\n  protected onClick(id: string, event: MouseEvent): void {\n    event.preventDefault();\n    const target = document.getElementById(id);\n    if (target) {\n      // Where `WrScroll` sends the page, clamped the way the browser clamps it.\n      const root = document.documentElement;\n      const max = Math.max(0, root.scrollHeight - root.clientHeight);\n      const y = target.getBoundingClientRect().top + window.scrollY - this.offset();\n      this.pinned = { id, y: Math.min(max, Math.max(0, y)) };\n      this.lastY = window.scrollY;\n    }\n    this.scroll.to(`#${id}`, { offset: this.offset() });\n    this.activeId.set(id);\n  }\n}\n\nexport type { WrAnchorLink } from './types';\n","<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"],"mappings":"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"}
+{"version":3,"file":"ngwr-anchor.mjs","names":[],"sources":["../../../projects/lib/anchor/anchor.ts","../../../projects/lib/anchor/anchor.html"],"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 {\n  Component,\n  DestroyRef,\n  NgZone,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrPlatform } from 'ngwr/platform';\nimport { WrScroll } from 'ngwr/scroll';\nimport { wrCheckStyles } from 'ngwr/utils';\n\nimport type { WrAnchorLink } from './types';\n\n/**\n * Scroll-spy in-page navigation. Renders a list of links to elements on\n * the page; clicking a link smooth-scrolls (via {@link WrScroll}),\n * and the closest visible heading auto-highlights as the user scrolls.\n *\n * @example\n * ```html\n * <wr-anchor\n *   [links]=\"[\n *     { id: 'intro', label: 'Introduction' },\n *     { id: 'usage', label: 'Usage', children: [\n *       { id: 'basic', label: 'Basic' },\n *       { id: 'advanced', label: 'Advanced' },\n *     ]}\n *   ]\"\n *   [offset]=\"80\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/anchor\n */\n@Component({\n  selector: 'wr-anchor',\n  templateUrl: './anchor.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-anchor', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' },\n})\nexport class WrAnchor {\n  /**\n   * The entries, in DOCUMENT ORDER — the scroll spy walks them top to bottom\n   * and stops at the first target below the cursor line, so a list in any other\n   * order highlights the wrong entry.\n   */\n  readonly links = input<readonly WrAnchorLink[]>([]);\n\n  /**\n   * Accessible name for the navigation landmark. Falls back to `anchor.label`,\n   * then `'Table of contents'` — it used to be that English string, hard-coded\n   * on the host, in a landmark a screen reader reads out on every page.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'anchor.label', 'Table of contents');\n\n  /** Pixel offset subtracted on scroll — for sticky headers. @default 0 */\n  readonly offset = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Highlight an item when its target's top is within this many px of the offset line. @default 80 */\n  readonly hitArea = input(80, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 80)) });\n\n  protected readonly activeId = signal<string | null>(null);\n\n  /**\n   * Flat list of the ids the template RENDERS — top level plus one level of\n   * children, which is the nesting `WrAnchorLink` documents. It used to recurse\n   * all the way down, so a third level was spied on and drawn nowhere: scrolling\n   * through a grandchild made it active, no rendered link matched the id, and\n   * the highlight vanished for that whole region rather than resting on its\n   * parent.\n   */\n  protected readonly flatIds = computed<readonly string[]>(() => {\n    const out: string[] = [];\n    for (const item of this.links()) {\n      out.push(item.id);\n      for (const child of item.children ?? []) out.push(child.id);\n    }\n    return out;\n  });\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  /**\n   * The entry a click asked for, and the scroll position that click sends the\n   * page to. A target near the end of the page can never reach the cursor line —\n   * the page runs out of scroll first — so the spy took the highlight straight\n   * back from the entry just clicked and handed it to the one above. While the\n   * page is still travelling toward that position, or parked on it, the clicked\n   * entry stays lit; the first scroll AWAY from it is the reader's own, and the\n   * spy takes over again.\n   */\n  private pinned: { readonly id: string; readonly y: number } | null = null;\n  private lastY = 0;\n\n  constructor() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) wrCheckStyles('anchor');\n    if (!this.platform.isBrowser) return;\n    const handler = (): void => {\n      const y = window.scrollY;\n      const pin = this.pinned;\n      if (pin) {\n        const distance = Math.abs(pin.y - y);\n        if (distance <= 1 || distance < Math.abs(pin.y - this.lastY)) {\n          this.lastY = y;\n          if (pin.id !== this.activeId()) this.zone.run(() => this.activeId.set(pin.id));\n          return;\n        }\n        this.pinned = null;\n      }\n      this.lastY = y;\n      const cursor = this.offset() + this.hitArea();\n      let active: string | null = null;\n      for (const id of this.flatIds()) {\n        const el = document.getElementById(id);\n        if (!el) continue;\n        const top = el.getBoundingClientRect().top;\n        if (top <= cursor) active = id;\n        else break;\n      }\n      if (active !== this.activeId()) this.zone.run(() => this.activeId.set(active));\n    };\n    this.zone.runOutsideAngular(() => window.addEventListener('scroll', handler, { passive: true }));\n    this.destroyRef.onDestroy(() => window.removeEventListener('scroll', handler));\n    // The first pass has to wait for a render: the targets are elsewhere on the\n    // page and are usually rendered AFTER this list, so a constructor-time pass\n    // found nothing by `getElementById` and left the page with no highlight at\n    // all until the reader happened to scroll.\n    afterNextRender(() => handler());\n  }\n\n  protected onClick(id: string, event: MouseEvent): void {\n    event.preventDefault();\n    const target = document.getElementById(id);\n    if (target) {\n      // Where `WrScroll` sends the page, clamped the way the browser clamps it.\n      const root = document.documentElement;\n      const max = Math.max(0, root.scrollHeight - root.clientHeight);\n      const y = target.getBoundingClientRect().top + window.scrollY - this.offset();\n      this.pinned = { id, y: Math.min(max, Math.max(0, y)) };\n      this.lastY = window.scrollY;\n    }\n    this.scroll.to(`#${id}`, { offset: this.offset() });\n    this.activeId.set(id);\n  }\n}\n\nexport type { WrAnchorLink } from './types';\n","<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"],"mappings":"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"}

package/fesm2022/ngwr-avatar.mjs

@@ -1,7 +1,8 @@
 import * as i0 from "@angular/core";
-import { Component, ViewEncapsulation, afterNextRender, computed, effect, input, signal, untracked, viewChild } from "@angular/core";
+import { Component, LOCALE_ID, ViewEncapsulation, afterNextRender, computed, effect, inject, input, signal, untracked, viewChild } from "@angular/core";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { resolveCssSize, wrCheckStyles, wrInitials } from "ngwr/utils";
 import { useI18nText } from "ngwr/i18n";
-import { resolveCssSize } from "ngwr/utils";
 import { WrSpinner } from "ngwr/spinner";
 /**
 * @license
@@ -10,11 +11,41 @@ import { WrSpinner } from "ngwr/spinner";
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
 const DEFAULT_SIZE = "6rem";
+const TINTS = [
+	"primary",
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+function hash(text) {
+	let h = 2166136261;
+	for (let i = 0; i < text.length; i++) {
+		h ^= text.charCodeAt(i);
+		h = Math.imul(h, 16777619);
+	}
+	return h >>> 0;
+}
 var WrAvatar = class WrAvatar {
 	url = input(null, ...ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []);
 	alt = input(null, ...ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []);
+	name = input(null, ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	tint = input(false, {
+		...ngDevMode ? { debugName: "tint" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
 	decorative = computed(() => this.alt() === "", ...ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []);
-	namedAlt = useI18nText(this.alt, "avatar.alt", "Avatar");
+	locale = inject(LOCALE_ID);
+	namedAlt = useI18nText(computed(() => {
+		const name = this.name()?.trim();
+		if (this.alt() === null && !name) return null;
+		return this.alt() ?? name;
+	}), "avatar.alt", "Avatar");
+	initials = computed(() => wrInitials(this.name(), this.locale), ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
+	tintName = computed(() => {
+		if (!this.tint() || !this.initials()) return null;
+		return TINTS[hash(this.name().trim()) % TINTS.length];
+	}, ...ngDevMode ? [{ debugName: "tintName" }] : /* istanbul ignore next */ []);
 	resolvedAlt = computed(() => this.decorative() ? "" : this.namedAlt(), ...ngDevMode ? [{ debugName: "resolvedAlt" }] : /* istanbul ignore next */ []);
 	shape = input("rounded", ...ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []);
 	size = input(DEFAULT_SIZE, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
@@ -22,6 +53,7 @@ var WrAvatar = class WrAvatar {
 	failed = signal(false, ...ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []);
 	img = viewChild("img", ...ngDevMode ? [{ debugName: "img" }] : /* istanbul ignore next */ []);
 	constructor() {
+		if (typeof ngDevMode === "undefined" || ngDevMode) wrCheckStyles("avatar");
 		effect(() => {
 			this.url();
 			untracked(() => {
@@ -46,7 +78,8 @@ var WrAvatar = class WrAvatar {
 		if (result.pxValue == null || result.pxValue <= 0) return resolveCssSize(DEFAULT_SIZE, { defaultValue: DEFAULT_SIZE });
 		return result;
 	}, ...ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []);
-	fallbackHidden = computed(() => !!this.url() && !this.failed() && (this.decorative() || !!this.alt()?.trim()), ...ngDevMode ? [{ debugName: "fallbackHidden" }] : /* istanbul ignore next */ []);
+	fallbackHidden = computed(() => !!this.url() && !this.failed() && (this.decorative() || !!this.alt()?.trim() || !!this.name()?.trim()), ...ngDevMode ? [{ debugName: "fallbackHidden" }] : /* istanbul ignore next */ []);
+	initialsHidden = computed(() => this.fallbackHidden() || this.decorative(), ...ngDevMode ? [{ debugName: "initialsHidden" }] : /* istanbul ignore next */ []);
 	cssSize = computed(() => this.resolved().cssValue, ...ngDevMode ? [{ debugName: "cssSize" }] : /* istanbul ignore next */ []);
 	pxSize = computed(() => this.resolved().pxValue, ...ngDevMode ? [{ debugName: "pxSize" }] : /* istanbul ignore next */ []);
 	classes = computed(() => {
@@ -54,6 +87,8 @@ var WrAvatar = class WrAvatar {
 		const shape = this.shape();
 		if (shape !== "rounded") parts.push(`wr-avatar--${shape}`);
 		if (this.loaded()) parts.push("wr-avatar--loaded");
+		const tint = this.tintName();
+		if (tint) parts.push(`wr-avatar--tint-${tint}`);
 		return parts.join(" ");
 	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	onImageLoad() {
@@ -91,6 +126,20 @@ var WrAvatar = class WrAvatar {
 				isRequired: false,
 				transformFunction: null
 			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tint: {
+				classPropertyName: "tint",
+				publicName: "tint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			shape: {
 				classPropertyName: "shape",
 				publicName: "shape",
@@ -120,7 +169,7 @@ var WrAvatar = class WrAvatar {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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  } @else if (resolvedAlt()) {\n    <!--\n      The broken <img> is removed so the fallback can show, and its `alt` went with\n      it: with no initials projected, the avatar was left with no name at all. With\n      initials, the stylesheet hides this and they name the avatar, as before.\n    -->\n    <span class=\"wr-avatar__alt\" role=\"img\" [attr.aria-label]=\"resolvedAlt()\"></span>\n  }\n}\n",
+		template: "<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (initials(); as letters) {\n  <!--\n    The `name` initials. After the projected content, which the stylesheet lets\n    win when there is any; named by the person rather than by the letters.\n  -->\n  <span\n    class=\"wr-avatar__initials\"\n    role=\"img\"\n    [attr.aria-label]=\"resolvedAlt()\"\n    [attr.aria-hidden]=\"initialsHidden() ? 'true' : null\"\n    >{{ letters }}</span\n  >\n}\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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  } @else if (resolvedAlt()) {\n    <!--\n      The broken <img> is removed so the fallback can show, and its `alt` went with\n      it: with no initials projected, the avatar was left with no name at all. With\n      initials, the stylesheet hides this and they name the avatar, as before.\n    -->\n    <span class=\"wr-avatar__alt\" role=\"img\" [attr.aria-label]=\"resolvedAlt()\"></span>\n  }\n}\n",
 		dependencies: [{
 			kind: "component",
 			type: WrSpinner,
@@ -147,7 +196,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[style.--wr-avatar-size]": "cssSize()"
 			},
 			imports: [WrSpinner],
-			template: "<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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  } @else if (resolvedAlt()) {\n    <!--\n      The broken <img> is removed so the fallback can show, and its `alt` went with\n      it: with no initials projected, the avatar was left with no name at all. With\n      initials, the stylesheet hides this and they name the avatar, as before.\n    -->\n    <span class=\"wr-avatar__alt\" role=\"img\" [attr.aria-label]=\"resolvedAlt()\"></span>\n  }\n}\n"
+			template: "<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (initials(); as letters) {\n  <!--\n    The `name` initials. After the projected content, which the stylesheet lets\n    win when there is any; named by the person rather than by the letters.\n  -->\n  <span\n    class=\"wr-avatar__initials\"\n    role=\"img\"\n    [attr.aria-label]=\"resolvedAlt()\"\n    [attr.aria-hidden]=\"initialsHidden() ? 'true' : null\"\n    >{{ letters }}</span\n  >\n}\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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  } @else if (resolvedAlt()) {\n    <!--\n      The broken <img> is removed so the fallback can show, and its `alt` went with\n      it: with no initials projected, the avatar was left with no name at all. With\n      initials, the stylesheet hides this and they name the avatar, as before.\n    -->\n    <span class=\"wr-avatar__alt\" role=\"img\" [attr.aria-label]=\"resolvedAlt()\"></span>\n  }\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -168,6 +217,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		tint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tint",
+				required: false
+			}]
+		}],
 		shape: [{
 			type: i0.Input,
 			args: [{

package/fesm2022/ngwr-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-avatar.mjs","names":[],"sources":["../../../projects/lib/avatar/avatar.ts","../../../projects/lib/avatar/avatar.html"],"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 {\n  Component,\n  type ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  input,\n  signal,\n  untracked,\n  viewChild,\n} 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 './types';\n\nconst DEFAULT_SIZE: WrAvatarSize = '6rem';\n\n/**\n * Image avatar with configurable corner treatment.\n *\n * Projected content (typically initials) is the FALLBACK: it shows with no\n * `url`, while the image loads and after it fails, and leaves the paint once the\n * image has loaded. It is projected into a `.wr-avatar__content` wrapper, so a\n * `wr-avatar > …` child selector no longer reaches it. While it is there, no\n * spinner is drawn over it; with nothing projected, the spinner marks the\n * loading state instead. See `alt` for what a screen reader hears.\n *\n * Projected initials take the text size around the avatar, capped at\n * `--wr-avatar-initials-scale` (`0.375`) of the box, so they shrink only where\n * they would not fit: a 16px avatar in a 14px chip draws 6px letters, while a\n * `6rem` one keeps the surrounding size up to 36px and is capped only past it.\n * Anything projected that is sized in `em` follows the cap too — a `<wr-icon>`\n * at its default `1.2em` included — so pin a `px` or `rem` size on the projected\n * element, or override the hook, to keep it. A `font-size` rule on the avatar\n * itself still wins, unless it sits in a cascade layer (Tailwind v4's utilities\n * do), which ngwr's unlayered stylesheet beats whatever the selector.\n *\n * The initials are inert: `pointer-events: none` hands a click on them to whatever\n * holds the avatar, and `user-select: none` keeps them out of a text selection.\n *\n * @example\n * ```html\n * <wr-avatar url=\"/me.png\" alt=\"Roman\" size=\"3rem\" shape=\"circle\" />\n * <wr-avatar [url]=\"photo\" alt=\"Roman Khegay\" [size]=\"48\">RK</wr-avatar>\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    // What the stylesheet sizes projected initials against. Always px or rem: a\n    // value `resolveCssSize` has no pixels for falls back to the default box.\n    '[style.--wr-avatar-size]': 'cssSize()',\n  },\n  imports: [WrSpinner],\n})\nexport class WrAvatar {\n  /**\n   * Image URL. Projected content (e.g. initials) shows while it is unset,\n   * loading or broken, and gives way once the image has loaded.\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   * With an `alt`, projected initials are hidden from assistive technology while\n   * an image is in play, so the name is announced once. Without one, the image\n   * carries only the generic name, so the initials stay announced beside it —\n   * visually hidden once it has loaded, never dropped.\n   *\n   * `alt=\"\"` marks the avatar decorative, as it does on an `<img>`: the image is\n   * silent and so are the initials while an image is in play — for an avatar beside\n   * a name that is already printed. After a failed load with nothing projected, the\n   * `alt` is still announced, so a broken image never leaves the avatar nameless.\n   *\n   * @default null\n   */\n  readonly alt = input<string | null>(null);\n\n  /** `alt=\"\"`, given on purpose — see `alt`. */\n  private readonly decorative = computed(() => this.alt() === '');\n\n  private readonly namedAlt = useI18nText(this.alt, 'avatar.alt', 'Avatar');\n\n  /** The image's text alternative: empty when decorative, else the catalog's fallback for an unset one. */\n  protected readonly resolvedAlt = computed(() => (this.decorative() ? '' : this.namedAlt()));\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. The resolved value is\n   * published on the host as `--wr-avatar-size`.\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  private readonly img = viewChild<ElementRef<HTMLImageElement>>('img');\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    afterNextRender(() => this.adoptSettledImage());\n  }\n\n  /**\n   * A prerendered `<img>` starts loading when the browser parses the HTML, and\n   * `(load)` / `(error)` are only attached at hydration — so on a slow bundle the\n   * image settles first, both events go nowhere, and the avatar sits on its\n   * fallback over a photo it already has (or names a broken image it never\n   * learns about). Only the FIRST render can race: every later `<img>` is\n   * created on the client with its listeners in place before `src` is set.\n   */\n  private adoptSettledImage(): void {\n    const img = this.img()?.nativeElement;\n    if (!img?.complete || this.loaded() || this.failed()) return;\n\n    if (img.naturalWidth > 0) {\n      this.loaded.set(true);\n      return;\n    }\n\n    // Zero wide is a broken image, or an SVG with no intrinsic size in an engine\n    // that reports it as 0 — only the element can tell. Setting `src` to the\n    // value it already has makes it fire `load` or `error` again, to listeners\n    // that exist now.\n    const src = img.getAttribute('src');\n    if (src !== null) img.setAttribute('src', src);\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  /**\n   * Whether the projected fallback is `aria-hidden`: an `<img>` is in the DOM\n   * (loading or loaded) AND the consumer named it, or marked it decorative with\n   * `alt=\"\"`. Then the image's `alt` owns the name, announced once and unchanged\n   * at the moment the photo arrives. Without a real `alt` the image is only\n   * \"Avatar\", and hiding the initials would drop the one thing that says who\n   * this is.\n   *\n   * The stylesheet keys on the same attribute once `--loaded`: a hidden fallback\n   * leaves the paint through `visibility`, a named-by-initials one is clipped and\n   * stays in the accessibility tree. While loading it is painted either way.\n   */\n  protected readonly fallbackHidden = computed(\n    () => !!this.url() && !this.failed() && (this.decorative() || !!this.alt()?.trim())\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","<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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  } @else if (resolvedAlt()) {\n    <!--\n      The broken <img> is removed so the fallback can show, and its `alt` went with\n      it: with no initials projected, the avatar was left with no name at all. With\n      initials, the stylesheet hides this and they name the avatar, as before.\n    -->\n    <span class=\"wr-avatar__alt\" role=\"img\" [attr.aria-label]=\"resolvedAlt()\"></span>\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ngwr-avatar.mjs","names":[],"sources":["../../../projects/lib/avatar/avatar.ts","../../../projects/lib/avatar/avatar.html"],"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 {\n  Component,\n  type ElementRef,\n  LOCALE_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrSpinner } from 'ngwr/spinner';\nimport { resolveCssSize, type ResolvedCssSize, wrCheckStyles, wrInitials } from 'ngwr/utils';\n\nimport type { WrAvatarShape, WrAvatarSize } from './types';\n\nconst DEFAULT_SIZE: WrAvatarSize = '6rem';\n\n/**\n * The tints `tint` picks from, each a `-soft` fill under its `-ink` text. Index\n * order is part of the contract: the same name lands on the same tint on every\n * render, server or client, and a reorder would re-colour every avatar.\n */\nconst TINTS = ['primary', 'success', 'warning', 'danger', 'info'] as const;\n\n/** FNV-1a over the UTF-16 units: small, dependency-free and the same everywhere. */\nfunction hash(text: string): number {\n  let h = 0x811c9dc5;\n  for (let i = 0; i < text.length; i++) {\n    // eslint-disable-next-line no-bitwise -- the hash is defined on bits\n    h ^= text.charCodeAt(i);\n    h = Math.imul(h, 0x01000193);\n  }\n  // eslint-disable-next-line no-bitwise -- to an unsigned 32-bit integer\n  return h >>> 0;\n}\n\n/**\n * Image avatar with configurable corner treatment.\n *\n * Projected content (typically initials) is the FALLBACK: it shows with no\n * `url`, while the image loads and after it fails, and leaves the paint once the\n * image has loaded. It is projected into a `.wr-avatar__content` wrapper, so a\n * `wr-avatar > …` child selector no longer reaches it. While it is there, no\n * spinner is drawn over it; with nothing projected, the spinner marks the\n * loading state instead. See `alt` for what a screen reader hears.\n *\n * `name` is the shorter route to the same avatar: it names the image, draws the\n * person's initials (`wrInitials` from `ngwr/utils`) as the fallback, and with\n * `tint` colours the box from a hash of the name. The fallback order is\n * projected content, then the `name` initials, then the spinner: the initials\n * are drawn only when nothing is projected.\n *\n * Projected initials take the text size around the avatar, capped at\n * `--wr-avatar-initials-scale` (`0.375`) of the box, so they shrink only where\n * they would not fit: a 16px avatar in a 14px chip draws 6px letters, while a\n * `6rem` one keeps the surrounding size up to 36px and is capped only past it.\n * Anything projected that is sized in `em` follows the cap too — a `<wr-icon>`\n * at its default `1.2em` included — so pin a `px` or `rem` size on the projected\n * element, or override the hook, to keep it. A `font-size` rule on the avatar\n * itself still wins, unless it sits in a cascade layer (Tailwind v4's utilities\n * do), which ngwr's unlayered stylesheet beats whatever the selector.\n *\n * The initials are inert: `pointer-events: none` hands a click on them to whatever\n * holds the avatar, and `user-select: none` keeps them out of a text selection.\n *\n * @example\n * ```html\n * <wr-avatar url=\"/me.png\" alt=\"Roman\" size=\"3rem\" shape=\"circle\" />\n * <wr-avatar [url]=\"photo\" alt=\"Roman Khegay\" [size]=\"48\">RK</wr-avatar>\n * <wr-avatar [url]=\"photo\" name=\"Roman Khegay\" [size]=\"48\" tint />\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    // What the stylesheet sizes projected initials against. Always px or rem: a\n    // value `resolveCssSize` has no pixels for falls back to the default box.\n    '[style.--wr-avatar-size]': 'cssSize()',\n  },\n  imports: [WrSpinner],\n})\nexport class WrAvatar {\n  /**\n   * Image URL. Projected content (e.g. initials) shows while it is unset,\n   * loading or broken, and gives way once the image has loaded.\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   * With an `alt`, projected initials are hidden from assistive technology while\n   * an image is in play, so the name is announced once. Without one, the image\n   * carries only the generic name, so the initials stay announced beside it —\n   * visually hidden once it has loaded, never dropped.\n   *\n   * `alt=\"\"` marks the avatar decorative, as it does on an `<img>`: the image is\n   * silent and so are the initials while an image is in play — for an avatar beside\n   * a name that is already printed. After a failed load with nothing projected, the\n   * `alt` is still announced, so a broken image never leaves the avatar nameless.\n   *\n   * @default null\n   */\n  readonly alt = input<string | null>(null);\n\n  /**\n   * The person's name. It is the image's alt text when `alt` is not given\n   * (`alt` wins when both are, `alt=\"\"` included), and its initials are the\n   * fallback when nothing is projected: shown with no `url`, while the image\n   * loads and after it fails, hidden once the image has loaded. Announced as the\n   * name rather than as two letters, and once only beside an image. A name with\n   * no initial (`'...'`) draws nothing and leaves the spinner to the image.\n   *\n   * @default null\n   */\n  readonly name = input<string | null>(null);\n\n  /**\n   * Colour the initials avatar from a stable hash of `name`: the same name is\n   * the same tint on every render, server and client alike, and a new name is a\n   * new tint. Five tints, each an intent's `-soft` fill under its `-ink` text,\n   * so the initials reach 4.5:1 in both schemes. Nothing without `name`, and\n   * nothing while projected content stands in for the initials.\n   *\n   * @default false\n   */\n  readonly tint = input(false, { transform: coerceBooleanProperty });\n\n  /** `alt=\"\"`, given on purpose — see `alt`. */\n  private readonly decorative = computed(() => this.alt() === '');\n\n  private readonly locale = inject(LOCALE_ID);\n\n  private readonly namedAlt = useI18nText(\n    computed(() => {\n      const name = this.name()?.trim();\n      // A blank name is no name: the catalog fallback, as with no name at all.\n      if (this.alt() === null && !name) return null;\n      return this.alt() ?? name;\n    }),\n    'avatar.alt',\n    'Avatar'\n  );\n\n  /** The initials `name` yields, `''` when it yields none. */\n  protected readonly initials = computed(() => wrInitials(this.name(), this.locale));\n\n  /** The tint modifier's intent, or `null` with `tint` off or no initials to colour. */\n  private readonly tintName = computed(() => {\n    if (!this.tint() || !this.initials()) return null;\n    return TINTS[hash(this.name()!.trim()) % TINTS.length];\n  });\n\n  /** The image's text alternative: empty when decorative, else the catalog's fallback for an unset one. */\n  protected readonly resolvedAlt = computed(() => (this.decorative() ? '' : this.namedAlt()));\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. The resolved value is\n   * published on the host as `--wr-avatar-size`.\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  private readonly img = viewChild<ElementRef<HTMLImageElement>>('img');\n\n  constructor() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) wrCheckStyles('avatar');\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    afterNextRender(() => this.adoptSettledImage());\n  }\n\n  /**\n   * A prerendered `<img>` starts loading when the browser parses the HTML, and\n   * `(load)` / `(error)` are only attached at hydration — so on a slow bundle the\n   * image settles first, both events go nowhere, and the avatar sits on its\n   * fallback over a photo it already has (or names a broken image it never\n   * learns about). Only the FIRST render can race: every later `<img>` is\n   * created on the client with its listeners in place before `src` is set.\n   */\n  private adoptSettledImage(): void {\n    const img = this.img()?.nativeElement;\n    if (!img?.complete || this.loaded() || this.failed()) return;\n\n    if (img.naturalWidth > 0) {\n      this.loaded.set(true);\n      return;\n    }\n\n    // Zero wide is a broken image, or an SVG with no intrinsic size in an engine\n    // that reports it as 0 — only the element can tell. Setting `src` to the\n    // value it already has makes it fire `load` or `error` again, to listeners\n    // that exist now.\n    const src = img.getAttribute('src');\n    if (src !== null) img.setAttribute('src', src);\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  /**\n   * Whether the projected fallback is `aria-hidden`: an `<img>` is in the DOM\n   * (loading or loaded) AND the consumer named it, or marked it decorative with\n   * `alt=\"\"`. Then the image's `alt` owns the name, announced once and unchanged\n   * at the moment the photo arrives. Without a real `alt` the image is only\n   * \"Avatar\", and hiding the initials would drop the one thing that says who\n   * this is.\n   *\n   * The stylesheet keys on the same attribute once `--loaded`: a hidden fallback\n   * leaves the paint through `visibility`, a named-by-initials one is clipped and\n   * stays in the accessibility tree. While loading it is painted either way.\n   */\n  protected readonly fallbackHidden = computed(\n    () => !!this.url() && !this.failed() && (this.decorative() || !!this.alt()?.trim() || !!this.name()?.trim())\n  );\n\n  /**\n   * The `name` initials follow the projected fallback, and go silent for a\n   * decorative avatar too: with `alt=\"\"` there is a name printed beside it, and\n   * two letters read on top of it would say it twice.\n   */\n  protected readonly initialsHidden = computed(() => this.fallbackHidden() || this.decorative());\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    const tint = this.tintName();\n    if (tint) parts.push(`wr-avatar--tint-${tint}`);\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","<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (initials(); as letters) {\n  <!--\n    The `name` initials. After the projected content, which the stylesheet lets\n    win when there is any; named by the person rather than by the letters.\n  -->\n  <span\n    class=\"wr-avatar__initials\"\n    role=\"img\"\n    [attr.aria-label]=\"resolvedAlt()\"\n    [attr.aria-hidden]=\"initialsHidden() ? 'true' : null\"\n    >{{ letters }}</span\n  >\n}\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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  } @else if (resolvedAlt()) {\n    <!--\n      The broken <img> is removed so the fallback can show, and its `alt` went with\n      it: with no initials projected, the avatar was left with no name at all. With\n      initials, the stylesheet hides this and they name the avatar, as before.\n    -->\n    <span class=\"wr-avatar__alt\" role=\"img\" [attr.aria-label]=\"resolvedAlt()\"></span>\n  }\n}\n"],"mappings":"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"}

package/fesm2022/ngwr-back-top.mjs

@@ -1,6 +1,7 @@
 import * as i0 from "@angular/core";
 import { Component, DestroyRef, NgZone, ViewEncapsulation, computed, inject, input, signal } from "@angular/core";
 import { coerceNumberProperty } from "@angular/cdk/coercion";
+import { wrCheckStyles } from "ngwr/utils";
 import { useI18nText } from "ngwr/i18n";
 import { WrPlatform } from "ngwr/platform";
 import { WrScroll } from "ngwr/scroll";
@@ -32,6 +33,7 @@ var WrBackTop = class WrBackTop {
 		return parts.join(" ");
 	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	constructor() {
+		if (typeof ngDevMode === "undefined" || ngDevMode) wrCheckStyles("back-top");
 		if (!this.platform.isBrowser) return;
 		const handler = () => {
 			const should = window.scrollY > this.visibilityThreshold();

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

@@ -1 +1 @@
-{"version":3,"file":"ngwr-back-top.mjs","names":[],"sources":["../../../projects/lib/back-top/back-top.ts","../../../projects/lib/back-top/back-top.html"],"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), and it is SYNCHRONOUS on\n    // purpose. `window.scrollY` forces a style + layout flush, which is what\n    // makes constructing N of these quadratic — 1000 instances cost 90ms and\n    // 5000 cost 1640ms, of which ~95% is the flush: replacing `scrollY` with a\n    // plain property drops 5000 to 83ms with all 5000 scroll listeners still\n    // registered, so the per-instance listener is not the cost it looks like.\n    // The bulk figure is nobody's bill — a page has one back-to-top button, and\n    // one instance measures 0.03ms over an equivalent component. Deferring to\n    // `afterNextRender` would land the signal a change-detection pass later, so\n    // a page restored part way down would fade the button in from `opacity: 0`\n    // instead of painting it in place. That first paint is the contract.\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"],"mappings":";;;;;;;;;;;;AA0CA,IAAa,YAAb,MAAa,UAAS;CAEX,sBAAsB,MAAM,KAAG;EAAA,GAAA,YAAA,EAAA,WAAA,sBAAA,+BAAA,CAAA;EACtC,YAAY,MAAuB,KAAK,IAAI,GAAG,qBAAqB,GAAG,GAAG,CAAC;CAAC,CAAA;CAIrE,SAAS,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAAI,YAAY,MAAuB,KAAK,IAAI,GAAG,qBAAqB,GAAG,CAAC,CAAC;CAAC,CAAA;CAG9F,YAAY,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAE5B,oBAAoB,YAAY,KAAK,WAAW,iBAAiB,aAAa;CAE9E,UAAU,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEzB,SAAS,OAAO,QAAQ;CACxB,WAAW,OAAO,UAAU;CAC5B,OAAO,OAAO,MAAM;CACpB,aAAa,OAAO,UAAU;CAE5B,UAAU,eAAc;EACzC,MAAM,QAAQ,CAAC,aAAa;EAC5B,IAAI,KAAK,QAAO,GAAI,MAAM,KAAK,sBAAsB;EACrD,OAAO,MAAM,KAAK,GAAG;CACvB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,cAAA;EACE,IAAI,CAAC,KAAK,SAAS,WAAW;EAC9B,MAAM,gBAAqB;GACzB,MAAM,SAAS,OAAO,UAAU,KAAK,oBAAmB;GACxD,IAAI,WAAW,KAAK,QAAO,GAAI,KAAK,KAAK,UAAU,KAAK,QAAQ,IAAI,MAAM,CAAC;EAC7E;EACA,KAAK,KAAK,wBAAwB,OAAO,iBAAiB,UAAU,SAAS,EAAE,SAAS,KAAI,CAAE,CAAC;EAY/F,QAAO;EACP,KAAK,WAAW,gBAAgB,OAAO,oBAAoB,UAAU,OAAO,CAAC;CAC/E;CAEU,UAAO;EACf,KAAK,OAAO,MAAM,EAAE,QAAQ,KAAK,OAAM,EAAE,CAAE;CAC7C;CAnDW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,qBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,oBAAA;GAAA,cAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UC1CtB;EAiBA,eAAA,GAAA,kBAAA;CAAA,CAAA;;ADyBa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EAbrB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,eAER,kBAAkB;GAAI,MAC/B;IACJ,WAAW;IACX,sBAAsB;IAItB,gBAAgB;GACjB;GAAA,UAAA;EAAA,CAAA"}
+{"version":3,"file":"ngwr-back-top.mjs","names":[],"sources":["../../../projects/lib/back-top/back-top.ts","../../../projects/lib/back-top/back-top.html"],"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';\nimport { wrCheckStyles } from 'ngwr/utils';\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 (typeof ngDevMode === 'undefined' || ngDevMode) wrCheckStyles('back-top');\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), and it is SYNCHRONOUS on\n    // purpose. `window.scrollY` forces a style + layout flush, which is what\n    // makes constructing N of these quadratic — 1000 instances cost 90ms and\n    // 5000 cost 1640ms, of which ~95% is the flush: replacing `scrollY` with a\n    // plain property drops 5000 to 83ms with all 5000 scroll listeners still\n    // registered, so the per-instance listener is not the cost it looks like.\n    // The bulk figure is nobody's bill — a page has one back-to-top button, and\n    // one instance measures 0.03ms over an equivalent component. Deferring to\n    // `afterNextRender` would land the signal a change-detection pass later, so\n    // a page restored part way down would fade the button in from `opacity: 0`\n    // instead of painting it in place. That first paint is the contract.\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"],"mappings":";;;;;;;;;;;;;AA2CA,IAAa,YAAb,MAAa,UAAS;CAEX,sBAAsB,MAAM,KAAG;EAAA,GAAA,YAAA,EAAA,WAAA,sBAAA,+BAAA,CAAA;EACtC,YAAY,MAAuB,KAAK,IAAI,GAAG,qBAAqB,GAAG,GAAG,CAAC;CAAC,CAAA;CAIrE,SAAS,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAAI,YAAY,MAAuB,KAAK,IAAI,GAAG,qBAAqB,GAAG,CAAC,CAAC;CAAC,CAAA;CAG9F,YAAY,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAE5B,oBAAoB,YAAY,KAAK,WAAW,iBAAiB,aAAa;CAE9E,UAAU,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEzB,SAAS,OAAO,QAAQ;CACxB,WAAW,OAAO,UAAU;CAC5B,OAAO,OAAO,MAAM;CACpB,aAAa,OAAO,UAAU;CAE5B,UAAU,eAAc;EACzC,MAAM,QAAQ,CAAC,aAAa;EAC5B,IAAI,KAAK,QAAO,GAAI,MAAM,KAAK,sBAAsB;EACrD,OAAO,MAAM,KAAK,GAAG;CACvB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,cAAA;EACE,IAAI,OAAO,cAAc,eAAe,WAAW,cAAc,UAAU;EAC3E,IAAI,CAAC,KAAK,SAAS,WAAW;EAC9B,MAAM,gBAAqB;GACzB,MAAM,SAAS,OAAO,UAAU,KAAK,oBAAmB;GACxD,IAAI,WAAW,KAAK,QAAO,GAAI,KAAK,KAAK,UAAU,KAAK,QAAQ,IAAI,MAAM,CAAC;EAC7E;EACA,KAAK,KAAK,wBAAwB,OAAO,iBAAiB,UAAU,SAAS,EAAE,SAAS,KAAI,CAAE,CAAC;EAY/F,QAAO;EACP,KAAK,WAAW,gBAAgB,OAAO,oBAAoB,UAAU,OAAO,CAAC;CAC/E;CAEU,UAAO;EACf,KAAK,OAAO,MAAM,EAAE,QAAQ,KAAK,OAAM,EAAE,CAAE;CAC7C;CApDW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,qBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,oBAAA;GAAA,cAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UC3CtB;EAiBA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AD0Ba,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EAbrB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,eAER,kBAAkB;GAAI,MAC/B;IACJ,WAAW;IACX,sBAAsB;IAItB,gBAAgB;GACjB;GAAA,UAAA;EAAA,CAAA"}