ngwr 15.4.0 → 15.6.0

package/comment/styles/_index.scss

@@ -0,0 +1,271 @@
+@use '../../theme/styles' as theme;
+
+// Styles for the entry points this component's own markup renders.
+//
+// v15 removed the `@use 'ngwr'` umbrella: a consumer writes one `@use` per
+// component they place, and never learns about the ones a component places
+// INSIDE itself. Sass deduplicates `@use` within a compilation, so an app that
+// also loads one of these by hand still emits it once.
+@use '../../button/styles' as button-styles; // WrButton
+@use '../../textarea/styles' as textarea-styles; // WrTextarea
+@include theme.loaded('comment');
+
+.wr-comment {
+  --wr-comment-gap: var(--wr-space-md);
+  --wr-comment-head-gap: var(--wr-space-sm);
+  --wr-comment-body-gap: var(--wr-space-xs);
+  --wr-comment-actions-gap: var(--wr-space-sm);
+  --wr-comment-font-family: var(--wr-font-family-base);
+  --wr-comment-font-size: var(--wr-text-sm);
+  --wr-comment-line-height: var(--wr-text-sm-leading);
+  --wr-comment-author-color: var(--wr-color-on-surface);
+  --wr-comment-author-font-weight: var(--wr-font-weight-semibold);
+  --wr-comment-time-color: var(--wr-color-on-surface-muted);
+  --wr-comment-time-font-size: var(--wr-text-xs);
+  --wr-comment-body-color: var(--wr-color-on-surface);
+  // Replies: how far one level steps in, and the room between them.
+  --wr-comment-indent: var(--wr-space-xl);
+  --wr-comment-replies-gap: var(--wr-space-lg);
+  --wr-comment-replies-margin-top: var(--wr-space-lg);
+  // Bubble variant. The reader's own side is a filled intent with its
+  // `-contrast` label; the other side is a neutral fill with surface text.
+  --wr-comment-bubble-bg: var(--wr-color-fill);
+  --wr-comment-bubble-color: var(--wr-color-on-surface);
+  --wr-comment-bubble-time-color: var(--wr-color-on-surface-muted);
+  --wr-comment-bubble-radius: var(--wr-border-radius-lg);
+  --wr-comment-bubble-padding-y: var(--wr-space-sm);
+  --wr-comment-bubble-padding-x: var(--wr-space-md);
+  --wr-comment-bubble-max-width: 80%;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--wr-comment-gap);
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  font-family: var(--wr-comment-font-family);
+  font-size: var(--wr-comment-font-size);
+  line-height: var(--wr-comment-line-height);
+  color: var(--wr-comment-body-color);
+
+  &__avatar {
+    flex: 0 0 auto;
+    display: flex;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__main {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--wr-comment-body-gap);
+    min-width: 0;
+  }
+
+  &__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--wr-comment-head-gap);
+    min-width: 0;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__author {
+    color: var(--wr-comment-author-color);
+    font-weight: var(--wr-comment-author-font-weight);
+    overflow-wrap: anywhere;
+  }
+
+  &__time {
+    color: var(--wr-comment-time-color);
+    font-size: var(--wr-comment-time-font-size);
+  }
+
+  &__body {
+    min-width: 0;
+    // A pasted URL or a token with no break opportunity would otherwise push
+    // the row past its column.
+    overflow-wrap: anywhere;
+    // Text from the composer holds the lines Shift+Enter made.
+    white-space: pre-line;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--wr-comment-actions-gap);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__replies {
+    flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--wr-comment-replies-gap);
+    margin-top: var(--wr-comment-replies-margin-top);
+    padding-inline-start: var(--wr-comment-indent);
+    min-width: 0;
+
+    &:empty {
+      display: none;
+    }
+
+    // The third level and deeper sit flush with their parent: each step takes
+    // the indent plus an avatar column, and a phone has no body width left to
+    // give after two.
+    .wr-comment__replies .wr-comment__replies {
+      padding-inline-start: 0;
+    }
+  }
+
+  // One step on a phone: the second level is flush too.
+  @media (max-width: 480px) {
+    &__replies .wr-comment__replies {
+      padding-inline-start: 0;
+    }
+  }
+
+  // Bubble variant: the body is a chat bubble, the head sits inside it, and the
+  // whole row leans to one inline side. Logical properties and `row-reverse`
+  // only, so `dir="rtl"` mirrors the log on its own.
+  &--bubble {
+    flex-wrap: nowrap;
+
+    .wr-comment__main {
+      flex: 0 1 auto;
+      max-width: var(--wr-comment-bubble-max-width);
+      gap: 0;
+      padding: var(--wr-comment-bubble-padding-y) var(--wr-comment-bubble-padding-x);
+      background: var(--wr-comment-bubble-bg);
+      color: var(--wr-comment-bubble-color);
+      @include theme.smooth-br(var(--wr-comment-bubble-radius));
+    }
+
+    .wr-comment__head {
+      gap: var(--wr-comment-head-gap);
+    }
+
+    .wr-comment__author {
+      color: inherit;
+    }
+
+    .wr-comment__time {
+      color: var(--wr-comment-bubble-time-color);
+    }
+
+    .wr-comment__actions {
+      margin-top: var(--wr-comment-body-gap);
+    }
+  }
+
+  &--end {
+    --wr-comment-bubble-bg: var(--wr-color-primary);
+    --wr-comment-bubble-color: var(--wr-color-primary-contrast);
+    --wr-comment-bubble-time-color: var(--wr-color-primary-contrast);
+
+    flex-direction: row-reverse;
+  }
+}
+
+.wr-comment-composer {
+  --wr-comment-composer-bg: var(--wr-color-surface);
+  --wr-comment-composer-border: var(--wr-border-base);
+  --wr-comment-composer-ring: transparent;
+  --wr-comment-composer-radius: var(--wr-control-radius-md);
+  --wr-comment-composer-gap: var(--wr-space-xs);
+  --wr-comment-composer-padding: var(--wr-space-xs);
+  // 36px: one row of the md field (20px line, 8px padding a side) less its
+  // border, so the button sits inside the row it sends.
+  --wr-comment-composer-send-size: 2.25rem;
+
+  display: flex;
+  align-items: flex-end;
+  gap: var(--wr-comment-composer-gap);
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  padding: var(--wr-comment-composer-padding);
+  background: var(--wr-comment-composer-bg);
+  border: 1px solid var(--wr-comment-composer-border);
+  @include theme.smooth-br(var(--wr-comment-composer-radius));
+  box-shadow: 0 0 0 3px var(--wr-comment-composer-ring);
+  transition:
+    border-color var(--wr-transition-base),
+    box-shadow var(--wr-transition-base);
+
+  // The frame carries the focus state, so the field inside draws none of its
+  // own: no border, no ring, no fill, in every state.
+  &:focus-within {
+    --wr-comment-composer-border: var(--wr-color-primary);
+    --wr-comment-composer-ring: color-mix(in srgb, var(--wr-color-primary) 15%, transparent);
+  }
+
+  &--disabled {
+    --wr-comment-composer-bg: var(--wr-color-fill);
+
+    cursor: not-allowed;
+  }
+
+  &--readonly {
+    --wr-comment-composer-bg: var(--wr-color-fill);
+  }
+
+  &__field {
+    flex: 1 1 auto;
+    min-width: 0;
+
+    &.wr-textarea,
+    &.wr-textarea--focused,
+    &.wr-textarea--disabled,
+    &.wr-textarea--readonly {
+      --wr-textarea-bg: transparent;
+      --wr-textarea-border: transparent;
+      --wr-textarea-ring: transparent;
+    }
+  }
+
+  &__actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--wr-comment-composer-gap);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__send {
+    flex: 0 0 auto;
+    width: var(--wr-comment-composer-send-size);
+    height: var(--wr-comment-composer-send-size);
+    padding: 0;
+
+    @include theme.touch-target;
+
+    .wr-icon__svg {
+      display: block;
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+
+    // The glyph points toward the inline end, so it turns with the direction.
+    [dir='rtl'] & .wr-icon__svg {
+      transform: scaleX(-1);
+    }
+  }
+}

package/compare/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('compare');
 
 .wr-compare {
   display: block;

package/context-menu/styles/_index.scss

@@ -13,6 +13,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
+@include theme.loaded('context-menu');
 
 .wr-context-menu-overlay {
   z-index: var(--wr-z-overlay, 1000);

package/counter/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('counter');
 
 .wr-counter {
   display: inline-flex;

package/date-picker/styles/_index.scss

@@ -14,6 +14,7 @@
 // these by hand still emits it once.
 @use '../../calendar/styles' as calendar-styles; // WrCalendar
 @use '../../input/styles' as input-styles; // WrInput
+@include theme.loaded('date-picker');
 
 // The refusal's live region — a screen reader's copy of what the border says. One
 // element per block, since a BEM class is public API: the range picker's is its own.

package/density/styles/_index.scss

@@ -1,3 +1,5 @@
+@use '../../theme/styles/loaded' as theme;
+@include theme.loaded('density');
 // Density multipliers. Components multiply their paddings (and the
 // occasional height / line-height) by these scalars via `calc()`.
 //

package/descriptions/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('descriptions');
 
 .wr-descriptions {
   --wr-descriptions-font-family: var(--wr-font-family-base);

package/dialog/styles/_index.scss

@@ -1,5 +1,12 @@
 @use '../../theme/styles' as theme;
 
+// Styles for the entry point this component's own markup renders: `confirm()`
+// mounts two `wr-btn`, and a consumer who writes `@use 'ngwr/dialog'` never
+// learns about them. Sass deduplicates `@use`, so an app that also loads the
+// button by hand still emits it once.
+@use '../../button/styles' as button-styles; // WrButton
+@include theme.loaded('dialog');
+
 // CDK Overlay base styles are usually loaded once by the consumer.
 // We re-emit the minimal `cdk-overlay-*` rules so a standalone `@use
 // 'ngwr/dialog'` works without manually pulling CDK's prebuilt CSS.

package/divider/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('divider');
 
 .wr-divider {
   // Defaults — line color/style/width drive the ::before and ::after

package/drawer/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('drawer');
 
 .wr-drawer-backdrop {
   background: var(--wr-color-overlay);

package/dropdown/styles/_index.scss

@@ -14,6 +14,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
+@include theme.loaded('dropdown');
 
 /// Gap between the trigger and the menu, as pane padding on the edge facing the
 /// trigger. Padding rather than a CDK offset so a pointer crossing it is still

package/editor/styles/_index.scss

@@ -15,6 +15,7 @@
 @use '../../button/styles' as button-styles; // WrButton
 @use '../../input/styles' as input-styles; // WrInput
 @use '../../popover/styles' as popover-styles; // WrPopover
+@include theme.loaded('editor');
 
 .wr-editor {
   display: flex;

package/empty/styles/_index.scss

@@ -13,6 +13,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
+@include theme.loaded('empty');
 
 .wr-empty {
   --wr-empty-gap: var(--wr-space-sm);

package/event-calendar/styles/_index.scss

@@ -36,6 +36,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../button/styles' as button-styles; // WrButton
+@include styles.loaded('event-calendar');
 
 .wr-event-calendar {
   --wr-event-calendar-slot-height: 1.5rem;

package/fesm2022/ngwr-affix.mjs

@@ -2,6 +2,7 @@ import * as i0 from "@angular/core";
 import { DestroyRef, Directive, ElementRef, Injector, PLATFORM_ID, afterNextRender, effect, inject, input, output } from "@angular/core";
 import { coerceNumberProperty } from "@angular/cdk/coercion";
 import { isPlatformBrowser } from "@angular/common";
+import { wrCheckStyles } from "ngwr/utils";
 /**
 * @license
 *
@@ -87,6 +88,7 @@ var WrAffix = class WrAffix {
 	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 	injector = inject(Injector);
 	constructor() {
+		if (typeof ngDevMode === "undefined" || ngDevMode) wrCheckStyles("affix");
 		if (!this.isBrowser) return;
 		afterNextRender(() => {
 			const el = this.host.nativeElement;

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":"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"}
+{"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":"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"}