ngwr 15.2.0 → 15.4.0

package/alert/styles/_index.scss

@@ -108,7 +108,10 @@ $alert-colors: (
     line-height: var(--wr-alert-title-line-height);
   }
 
-  &__message {
+  // Projected content reads as the message does. Hidden while empty, so an alert
+  // with nothing inside keeps the body's gap to what it had.
+  &__message,
+  &__content {
     margin: 0;
     color: var(--wr-alert-message);
     font-family: var(--wr-alert-font-family);
@@ -116,6 +119,10 @@ $alert-colors: (
     line-height: var(--wr-alert-message-line-height);
   }
 
+  &__content:empty {
+    display: none;
+  }
+
   &__close {
     flex: 0 0 auto;
     appearance: none;
@@ -136,11 +143,12 @@ $alert-colors: (
     // `font: inherit`. Inheriting the size makes `1em` the alert's own text in
     // every app. `--wr-icon-size` cannot do this job — only a `<wr-icon>` host
     // reads it, and the rule here used to set it for nothing. The SIZE only,
-    // never the `font` shorthand, which would bring the line-height with it; and
-    // no `line-height` of its own either, the way `wr-dialog` needs one — the
-    // alert stretches its row, so this box is the alert's height whatever the
-    // strut says.
+    // never the `font` shorthand, which would bring the line-height with it.
     font-size: inherit;
+    // Top of the row, by the title, rather than stretched to the alert's height:
+    // with projected content under the message, a stretched button put the ✕
+    // halfway down the alert and painted its hover tint as a full-height strip.
+    align-self: flex-start;
 
     @include theme.touch-target; // glyph -> 44px tap area on touch
 

package/bits/border-glow/styles/_rules.scss

@@ -2,12 +2,37 @@
 // All visual state is driven by two custom properties the component writes:
 //   --wr-border-glow-edge-proximity   0..100, scales with pointer-to-edge distance
 //   --wr-border-glow-angle     0deg..360deg, pointer-from-centre angle
-// Plus a colour/geometry bag set once from inputs (see border-glow.ts).
+// Plus a colour/geometry bag set once from inputs (see border-glow.ts). The three
+// colour inputs write an `--wr-border-glow-input-*` twin of the hook they stand
+// in for, never the hook itself, and every read below prefers the twin.
 
 .wr-border-glow {
   --wr-border-glow-edge-proximity: 0;
   --wr-border-glow-angle: 45deg;
-  // Theme-default halo (overridden inline when `[glowColor]` is set): a deep
+  // The card fill: the theme surface, unless an app sets this or `[backgroundColor]`.
+  --wr-border-glow-bg: var(--wr-color-surface);
+  // What `[backgroundColor]`, `[glowColor]` and `[colors]` write on the host, which
+  // the inline value beats. Unset here so a card projected inside another one does
+  // not inherit the outer card's inputs — and twins rather than the hooks' own
+  // names, so a `--wr-border-glow-bg` an author set on the host stays there and is
+  // read again the moment the input is unset.
+  --wr-border-glow-input-bg: initial;
+  --wr-border-glow-input-color: initial;
+  --wr-border-glow-input-color-60: initial;
+  --wr-border-glow-input-color-50: initial;
+  --wr-border-glow-input-color-40: initial;
+  --wr-border-glow-input-color-30: initial;
+  --wr-border-glow-input-color-20: initial;
+  --wr-border-glow-input-color-10: initial;
+  --wr-border-glow-input-gradient-one: initial;
+  --wr-border-glow-input-gradient-two: initial;
+  --wr-border-glow-input-gradient-three: initial;
+  --wr-border-glow-input-gradient-four: initial;
+  --wr-border-glow-input-gradient-five: initial;
+  --wr-border-glow-input-gradient-six: initial;
+  --wr-border-glow-input-gradient-seven: initial;
+  --wr-border-glow-input-gradient-base: initial;
+  // Theme-default halo (`[glowColor]` writes the `-input-` twins beside it): a deep
   // amber that reads on white, the pale pastel on dark.
   --wr-border-glow-color: light-dark(hsl(40deg 90% 45% / 100%), hsl(40deg 80% 80% / 100%));
   --wr-border-glow-color-60: light-dark(hsl(40deg 90% 45% / 60%), hsl(40deg 80% 80% / 60%));
@@ -16,8 +41,8 @@
   --wr-border-glow-color-30: light-dark(hsl(40deg 90% 45% / 30%), hsl(40deg 80% 80% / 30%));
   --wr-border-glow-color-20: light-dark(hsl(40deg 90% 45% / 20%), hsl(40deg 80% 80% / 20%));
   --wr-border-glow-color-10: light-dark(hsl(40deg 90% 45% / 10%), hsl(40deg 80% 80% / 10%));
-  // Theme-default mesh palette (overridden inline when `[colors]` is set): deep
-  // tones that read on white, the reactbits pastels on dark. The geometry is
+  // Theme-default mesh palette (`[colors]` writes the `-input-` twins beside it):
+  // deep tones that read on white, the reactbits pastels on dark. The geometry is
   // the same in both schemes, so only the one colour stop of each layer moves.
   --wr-border-glow-gradient-one: radial-gradient(
     at 80% 55%,
@@ -63,19 +88,19 @@
   // so an inline `[glowColor]` reaches every layer of it.
   /* stylelint-disable-next-line */
   --wr-border-glow-edge-shadow:
-    inset 0 0 0 1px var(--wr-border-glow-color),
-    inset 0 0 1px 0 light-dark(transparent, var(--wr-border-glow-color-60)),
-    inset 0 0 3px 0 light-dark(transparent, var(--wr-border-glow-color-50)),
-    inset 0 0 6px 0 light-dark(transparent, var(--wr-border-glow-color-40)),
-    inset 0 0 15px 0 light-dark(transparent, var(--wr-border-glow-color-30)),
-    inset 0 0 25px 2px light-dark(transparent, var(--wr-border-glow-color-20)),
-    inset 0 0 50px 2px light-dark(transparent, var(--wr-border-glow-color-10)),
-    0 0 1px 0 var(--wr-border-glow-color-60),
-    0 0 3px 0 var(--wr-border-glow-color-50),
-    0 0 6px 0 var(--wr-border-glow-color-40),
-    0 0 15px 0 var(--wr-border-glow-color-30),
-    0 0 25px 2px var(--wr-border-glow-color-20),
-    0 0 50px 2px var(--wr-border-glow-color-10);
+    inset 0 0 0 1px var(--wr-border-glow-input-color, var(--wr-border-glow-color)),
+    inset 0 0 1px 0 light-dark(transparent, var(--wr-border-glow-input-color-60, var(--wr-border-glow-color-60))),
+    inset 0 0 3px 0 light-dark(transparent, var(--wr-border-glow-input-color-50, var(--wr-border-glow-color-50))),
+    inset 0 0 6px 0 light-dark(transparent, var(--wr-border-glow-input-color-40, var(--wr-border-glow-color-40))),
+    inset 0 0 15px 0 light-dark(transparent, var(--wr-border-glow-input-color-30, var(--wr-border-glow-color-30))),
+    inset 0 0 25px 2px light-dark(transparent, var(--wr-border-glow-input-color-20, var(--wr-border-glow-color-20))),
+    inset 0 0 50px 2px light-dark(transparent, var(--wr-border-glow-input-color-10, var(--wr-border-glow-color-10))),
+    0 0 1px 0 var(--wr-border-glow-input-color-60, var(--wr-border-glow-color-60)),
+    0 0 3px 0 var(--wr-border-glow-input-color-50, var(--wr-border-glow-color-50)),
+    0 0 6px 0 var(--wr-border-glow-input-color-40, var(--wr-border-glow-color-40)),
+    0 0 15px 0 var(--wr-border-glow-input-color-30, var(--wr-border-glow-color-30)),
+    0 0 25px 2px var(--wr-border-glow-input-color-20, var(--wr-border-glow-color-20)),
+    0 0 50px 2px var(--wr-border-glow-input-color-10, var(--wr-border-glow-color-10));
   // Blend modes and a strength are not colours, so `light-dark()` cannot switch
   // them, and each value below is the one that holds up in both schemes. The
   // additive look dark used — `plus-lighter` on the halo, `soft-light` on the
@@ -100,7 +125,7 @@
   position: relative;
   display: grid;
   border-radius: var(--wr-border-glow-radius);
-  background: var(--wr-border-glow-bg, var(--wr-color-surface, #fff));
+  background: var(--wr-border-glow-input-bg, var(--wr-border-glow-bg));
   overflow: visible;
   isolation: isolate;
   transform: translate3d(0, 0, 0.01px); // create a new layer to keep blends tidy
@@ -137,23 +162,16 @@
   &::before {
     border: 1px solid transparent;
     background:
-      linear-gradient(var(--wr-border-glow-bg, var(--wr-color-surface, #fff)) 0 100%) padding-box,
+      linear-gradient(var(--wr-border-glow-input-bg, var(--wr-border-glow-bg)) 0 100%) padding-box,
       linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
-      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) border-box;
+      var(--wr-border-glow-input-gradient-one, var(--wr-border-glow-gradient-one)) border-box,
+      var(--wr-border-glow-input-gradient-two, var(--wr-border-glow-gradient-two)) border-box,
+      var(--wr-border-glow-input-gradient-three, var(--wr-border-glow-gradient-three)) border-box,
+      var(--wr-border-glow-input-gradient-four, var(--wr-border-glow-gradient-four)) border-box,
+      var(--wr-border-glow-input-gradient-five, var(--wr-border-glow-gradient-five)) border-box,
+      var(--wr-border-glow-input-gradient-six, var(--wr-border-glow-gradient-six)) border-box,
+      var(--wr-border-glow-input-gradient-seven, var(--wr-border-glow-gradient-seven)) border-box,
+      var(--wr-border-glow-input-gradient-base, var(--wr-border-glow-gradient-base)) border-box;
 
     opacity: calc(
       (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
@@ -173,21 +191,14 @@
   &::after {
     border: 1px solid transparent;
     background:
-      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;
+      var(--wr-border-glow-input-gradient-one, var(--wr-border-glow-gradient-one)) padding-box,
+      var(--wr-border-glow-input-gradient-two, var(--wr-border-glow-gradient-two)) padding-box,
+      var(--wr-border-glow-input-gradient-three, var(--wr-border-glow-gradient-three)) padding-box,
+      var(--wr-border-glow-input-gradient-four, var(--wr-border-glow-gradient-four)) padding-box,
+      var(--wr-border-glow-input-gradient-five, var(--wr-border-glow-gradient-five)) padding-box,
+      var(--wr-border-glow-input-gradient-six, var(--wr-border-glow-gradient-six)) padding-box,
+      var(--wr-border-glow-input-gradient-seven, var(--wr-border-glow-gradient-seven)) padding-box,
+      var(--wr-border-glow-input-gradient-base, var(--wr-border-glow-gradient-base)) padding-box;
 
     mask-image:
       linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),

package/bits/click-spark/click-spark.scss

@@ -1 +1,5 @@
-@forward './styles';
+// Component-scoped, but the lib uses `ViewEncapsulation.None` everywhere so
+// the selector starts with `.wr-click-spark` — the same as the public Sass
+// entry. Forwards the rules alone: `styles/_index.scss` is the entry that
+// loads the theme, and a `styleUrl` is its own compilation.
+@forward './styles/rules';

package/bits/click-spark/styles/_index.scss

@@ -1,16 +1,11 @@
-// Click spark — canvas overlay that ignores pointer events so projected
-// children stay interactive.
-.wr-click-spark {
-  position: relative;
-  display: block;
+// Public Sass entry for `@use 'ngwr/bits/click-spark'`.
+//
+// Loads the theme although `_rules` reads no token: the component strokes its
+// sparks in `sparkColor`, whose default is `var(--wr-color-on-surface)` resolved
+// against the canvas, so an app that writes this one `@use` still has the token
+// the default paints with. `click-spark.scss` — the component's `styleUrl` —
+// forwards `_rules` and nothing else, so the compiled component styles carry this
+// component's own CSS and no second copy of the theme layer.
+@use '../../../theme/styles';
 
-  &__canvas {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    user-select: none;
-    z-index: 1;
-  }
-}
+@forward 'rules';

package/bits/click-spark/styles/_rules.scss

@@ -0,0 +1,20 @@
+// Click spark — canvas overlay that ignores pointer events so projected
+// children stay interactive. The sparks themselves are stroked in
+// `click-spark.ts`, in `sparkColor`, which defaults to `var(--wr-color-on-surface)`
+// and is resolved against the canvas: the token is read from TypeScript rather than
+// from a rule here, which is why `_index.scss` loads the theme for a sheet that
+// names no token itself.
+.wr-click-spark {
+  position: relative;
+  display: block;
+
+  &__canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    user-select: none;
+    z-index: 1;
+  }
+}

package/fesm2022/ngwr-alert.mjs

@@ -125,7 +125,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>\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>\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,7 +152,7 @@ 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>\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>\n\n  @if (closable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  }\n}\n"
 		}]
 	}],
 	propDecorators: {

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 *\n * @example\n * ```html\n * <wr-alert title=\"Saved\" message=\"Your changes are live.\" type=\"success\" />\n * <wr-alert title=\"Failed\" type=\"danger\" closable (closed)=\"onClose()\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/alert\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.html',\n  imports: [WrIcon],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    // `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>\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 } 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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"}

package/fesm2022/ngwr-bits-aurora.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { Component, DestroyRef, ElementRef, NgZone, PLATFORM_ID, ViewEncapsulation, afterNextRender, effect, inject, input, signal, viewChild } from "@angular/core";
+import { Component, DestroyRef, ElementRef, NgZone, PLATFORM_ID, ViewEncapsulation, afterNextRender, afterRenderEffect, effect, inject, input, signal, untracked, viewChild } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
 import { numAttr, resolveCssColorChannels, watchColorScheme } from "ngwr/utils";
 import { WrPlatform } from "ngwr/platform";
@@ -154,7 +154,7 @@ var WrAurora = class WrAurora {
 	platform = inject(WrPlatform);
 	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 	gl = null;
-	uniforms = {};
+	gpu = null;
 	rafId = 0;
 	time = 0;
 	booted = signal(false, ...ngDevMode ? [{ debugName: "booted" }] : /* istanbul ignore next */ []);
@@ -163,16 +163,19 @@ var WrAurora = class WrAurora {
 	constructor() {
 		if (!this.isBrowser) return;
 		afterNextRender(() => this.zone.runOutsideAngular(() => this.boot()));
-		effect(() => {
+		afterRenderEffect(() => {
+			if (!this.booted()) return;
+			const still = this.platform.prefersReducedMotion();
 			this.colorStops();
 			this.amplitude();
 			this.blend();
-			if (!this.gl) return;
-			this.pushUniforms();
-			if (this.platform.prefersReducedMotion()) this.draw(0);
+			untracked(() => {
+				this.pushUniforms();
+				if (still) this.draw(0);
+			});
 		});
 		watchColorScheme(() => {
-			if (!this.gl || !this.platform.prefersReducedMotion()) return;
+			if (!this.gpu || !this.platform.prefersReducedMotion()) return;
 			this.pushUniforms();
 			this.draw(0);
 		});
@@ -196,41 +199,11 @@ var WrAurora = class WrAurora {
 		});
 		if (!gl) return;
 		this.gl = gl;
-		gl.clearColor(0, 0, 0, 0);
-		gl.enable(gl.BLEND);
-		gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-		const compile = (type, source) => {
-			const shader = gl.createShader(type);
-			gl.shaderSource(shader, source);
-			gl.compileShader(shader);
-			if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) console.error("wr-aurora shader error:", gl.getShaderInfoLog(shader));
-			return shader;
-		};
-		const program = gl.createProgram();
-		gl.attachShader(program, compile(gl.VERTEX_SHADER, VERT));
-		gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAG));
-		gl.linkProgram(program);
-		gl.useProgram(program);
-		for (const name of [
-			"uTime",
-			"uAmplitude",
-			"uColorStops",
-			"uResolution",
-			"uBlend"
-		]) this.uniforms[name] = gl.getUniformLocation(program, name);
-		const buffer = gl.createBuffer();
-		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-			-1,
-			-1,
-			3,
-			-1,
-			-1,
-			3
-		]), gl.STATIC_DRAW);
-		const position = gl.getAttribLocation(program, "position");
-		gl.enableVertexAttribArray(position);
-		gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+		this.gpu = this.build(gl);
+		if (!this.gpu && !gl.isContextLost()) {
+			this.release(gl);
+			return;
+		}
 		const hostEl = this.host.nativeElement;
 		const fit = () => {
 			const width = hostEl.clientWidth;
@@ -239,8 +212,21 @@ var WrAurora = class WrAurora {
 			canvas.width = Math.max(1, width);
 			canvas.height = Math.max(1, height);
 			gl.viewport(0, 0, canvas.width, canvas.height);
-			gl.uniform2f(this.uniforms["uResolution"], canvas.width, canvas.height);
+			if (this.gpu) gl.uniform2f(this.gpu.uniforms["uResolution"], canvas.width, canvas.height);
+		};
+		const onLost = (event) => {
+			event.preventDefault();
+			this.gpu = null;
+			this.booted.set(false);
+		};
+		const onRestored = () => {
+			this.gpu = this.build(gl);
+			if (!this.gpu) return;
+			fit();
+			this.booted.set(true);
 		};
+		canvas.addEventListener("webglcontextlost", onLost);
+		canvas.addEventListener("webglcontextrestored", onRestored);
 		const resize = () => {
 			fit();
 			this.draw(this.platform.prefersReducedMotion() ? 0 : this.time);
@@ -260,17 +246,87 @@ var WrAurora = class WrAurora {
 			window.removeEventListener("resize", resize);
 			ro.disconnect();
 			io?.disconnect();
+			canvas.removeEventListener("webglcontextlost", onLost);
+			canvas.removeEventListener("webglcontextrestored", onRestored);
+			this.release(gl);
 		});
-		this.booted.set(true);
+		if (this.gpu) this.booted.set(true);
+	}
+	build(gl) {
+		const vert = this.compile(gl, gl.VERTEX_SHADER, VERT);
+		const frag = this.compile(gl, gl.FRAGMENT_SHADER, FRAG);
+		const program = vert && frag ? gl.createProgram() : null;
+		if (vert && frag && program) {
+			gl.attachShader(program, vert);
+			gl.attachShader(program, frag);
+			gl.linkProgram(program);
+		}
+		gl.deleteShader(vert);
+		gl.deleteShader(frag);
+		if (!program) return null;
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+			if (!gl.isContextLost()) console.error("wr-aurora program error:", gl.getProgramInfoLog(program));
+			gl.deleteProgram(program);
+			return null;
+		}
+		gl.useProgram(program);
+		gl.clearColor(0, 0, 0, 0);
+		gl.enable(gl.BLEND);
+		gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+		const uniforms = {};
+		for (const name of [
+			"uTime",
+			"uAmplitude",
+			"uColorStops",
+			"uResolution",
+			"uBlend"
+		]) uniforms[name] = gl.getUniformLocation(program, name);
+		const buffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			3,
+			-1,
+			-1,
+			3
+		]), gl.STATIC_DRAW);
+		const position = gl.getAttribLocation(program, "position");
+		gl.enableVertexAttribArray(position);
+		gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+		return {
+			program,
+			buffer,
+			uniforms
+		};
+	}
+	compile(gl, type, source) {
+		const shader = gl.createShader(type);
+		if (!shader) return null;
+		gl.shaderSource(shader, source);
+		gl.compileShader(shader);
+		if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
+		if (!gl.isContextLost()) console.error("wr-aurora shader error:", gl.getShaderInfoLog(shader));
+		gl.deleteShader(shader);
+		return null;
+	}
+	release(gl) {
+		if (this.gpu) {
+			gl.deleteProgram(this.gpu.program);
+			gl.deleteBuffer(this.gpu.buffer);
+		}
+		gl.getExtension("WEBGL_lose_context")?.loseContext();
+		this.gpu = null;
+		this.gl = null;
 	}
 	pushUniforms() {
-		const gl = this.gl;
-		if (!gl) return;
+		const { gl, gpu } = this;
+		if (!gl || !gpu) return;
 		const flat = /* @__PURE__ */ new Float32Array(9);
 		for (let i = 0; i < 3; i++) flat.set(this.resolveStop(i), i * 3);
-		gl.uniform3fv(this.uniforms["uColorStops"], flat);
-		gl.uniform1f(this.uniforms["uAmplitude"], this.amplitude());
-		gl.uniform1f(this.uniforms["uBlend"], this.blend());
+		gl.uniform3fv(gpu.uniforms["uColorStops"], flat);
+		gl.uniform1f(gpu.uniforms["uAmplitude"], this.amplitude());
+		gl.uniform1f(gpu.uniforms["uBlend"], this.blend());
 	}
 	resolveStop(index) {
 		const explicit = this.colorStops();
@@ -279,10 +335,10 @@ var WrAurora = class WrAurora {
 		return resolveCssColorChannels(this.canvasRef().nativeElement, expression, fallback);
 	}
 	draw(time) {
-		const gl = this.gl;
-		if (!gl || !this.hasBox()) return;
+		const { gl, gpu } = this;
+		if (!gl || !gpu || !this.hasBox()) return;
 		this.time = time;
-		gl.uniform1f(this.uniforms["uTime"], time);
+		gl.uniform1f(gpu.uniforms["uTime"], time);
 		gl.clear(gl.COLOR_BUFFER_BIT);
 		gl.drawArrays(gl.TRIANGLES, 0, 3);
 	}