ngwr 15.1.0 → 15.3.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/aurora/styles/_rules.scss

@@ -22,4 +22,15 @@
     width: 100%;
     height: 100%;
   }
+
+  // Under forced colours the ribbon would cover the palette's own ground, which forced
+  // text and marks are chosen against. The adjust inherits to the colour probe inside
+  // the canvas, which would otherwise read the forced colour, so a frame drawn in this
+  // mode is still right when it ends.
+  @media (forced-colors: active) {
+    &__canvas {
+      display: none;
+      forced-color-adjust: none;
+    }
+  }
 }

package/bits/dot-grid/styles/_rules.scss

@@ -28,7 +28,7 @@
   // so the handover moves nothing.
   background-image: radial-gradient(
     circle,
-    var(--wr-dot-grid-dot-color) calc(var(--wr-dot-grid-dot-size) / 2 - 0.25px),
+    var(--wr-dot-grid-input-dot-color, var(--wr-dot-grid-dot-color)) calc(var(--wr-dot-grid-dot-size) / 2 - 0.25px),
     transparent calc(var(--wr-dot-grid-dot-size) / 2 + 0.25px)
   );
   background-position: center;
@@ -43,4 +43,12 @@
     width: 100%;
     height: 100%;
   }
+
+  // The adjust inherits to the colour probe inside the canvas, which would otherwise
+  // read the forced colour. A still frame drawn then keeps it after the mode ends.
+  @media (forced-colors: active) {
+    &__canvas {
+      forced-color-adjust: none;
+    }
+  }
 }

package/bits/iridescence/iridescence.scss

@@ -0,0 +1 @@
+@forward './styles/rules';

package/bits/iridescence/styles/_index.scss

@@ -0,0 +1,8 @@
+// Public Sass entry for `@use 'ngwr/bits/iridescence'`.
+//
+// `iridescence.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';
+
+@forward 'rules';

package/bits/iridescence/styles/_rules.scss

@@ -0,0 +1,72 @@
+// Iridescence background. A WebGL2 canvas fills the nearest positioned ancestor
+// and the picture lives in the fragment shader. A uniform reads neither a `var()`
+// nor a `light-dark()`, so `iridescence.ts` resolves the colour through
+// `resolveCssColorChannels` before it reaches one.
+
+.wr-iridescence {
+  // Multiplied over the picture, so white leaves it as it is.
+  --wr-iridescence-color: light-dark(#ffffff, #5c669e);
+
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  overflow: hidden;
+  // The pointer is followed on the parent, so the layer itself never takes a
+  // click or a hover from what sits behind or around it.
+  pointer-events: none;
+
+  // Stand-in, shown before hydration, on a machine with no WebGL2 and after a
+  // lost context, so the box is never empty and text placed on it keeps its
+  // ground. The colours are sampled from the shader's own output at a white tint,
+  // and the bands run along its drape axis: 329deg is the direction across the
+  // folds, `(-0.51, 0.86)` in GL. `multiply` is what `uColor` does to the shader,
+  // so an opaque tint lands on both the same way, and the second layer shades the
+  // far corners so the first does not read as plain stripes.
+  background-color: var(--wr-iridescence-input-color, var(--wr-iridescence-color));
+  background-image:
+    linear-gradient(59deg, #e6dcf0 0%, transparent 35%, transparent 65%, #d6d0ea 100%),
+    linear-gradient(
+      329deg,
+      #e9dbef 0%,
+      #c49cd1 16%,
+      #f2e6f3 32%,
+      #b2bcde 48%,
+      #7387b2 60%,
+      #d5c7e7 74%,
+      #c6bce4 86%,
+      #ebddf0 100%
+    );
+  background-blend-mode: multiply;
+
+  &__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity var(--wr-duration-slower) var(--wr-ease-in-out);
+  }
+
+  // The stand-in stays under it and is not retired. It is an approximation and
+  // not the same picture, so swapping one for the other would pop.
+  &--painted &__canvas {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__canvas {
+      transition: none;
+    }
+  }
+
+  // The browser has already taken the stand-in down to the palette's own ground,
+  // which forced text and marks are chosen against, and the silk would cover it. The
+  // adjust inherits to the colour probe inside the canvas, which would otherwise read
+  // the forced colour, so a frame drawn in this mode is still right when it ends.
+  @media (forced-colors: active) {
+    &__canvas {
+      display: none;
+      forced-color-adjust: none;
+    }
+  }
+}

package/bits/marquee/styles/_rules.scss

@@ -2,7 +2,8 @@
 // Vars driven from component inputs:
 //   --wr-marquee-gap         gap between items (px)
 //   --wr-marquee-height      item height (px)
-//   --wr-marquee-fade-color  edge fade colour (falls back to page bg)
+//   --wr-marquee-input-fade-color  edge fade colour (falls back to
+//                                  --wr-marquee-fade-color, then the page bg)
 
 .wr-marquee {
   --wr-marquee-gap: 32px;
@@ -10,6 +11,9 @@
   // Default to the lib's surface colour; consumers can override via
   // `[fadeOutColor]` or by setting `--wr-marquee-fade-color` directly.
   --wr-marquee-fade-color-auto: var(--wr-color-surface, #ffffff);
+  // What `[fadeOutColor]` writes on the host, which the inline value beats. Unset here so
+  // a marquee rendered inside another one does not inherit its colour.
+  --wr-marquee-input-fade-color: initial;
 
   position: relative;
   display: block;
@@ -138,7 +142,7 @@
     left: 0;
     background: linear-gradient(
       to right,
-      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
+      var(--wr-marquee-input-fade-color, var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto))) 0%,
       rgba(0, 0, 0, 0) 100%
     );
   }
@@ -148,7 +152,7 @@
     right: 0;
     background: linear-gradient(
       to left,
-      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
+      var(--wr-marquee-input-fade-color, var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto))) 0%,
       rgba(0, 0, 0, 0) 100%
     );
   }

package/bits/ripple-grid/styles/_rules.scss

@@ -32,12 +32,12 @@
   background-image:
     linear-gradient(
       to right,
-      var(--wr-ripple-grid-line-color) var(--wr-ripple-grid-line-width),
+      var(--wr-ripple-grid-input-line-color, var(--wr-ripple-grid-line-color)) var(--wr-ripple-grid-line-width),
       transparent var(--wr-ripple-grid-line-width)
     ),
     linear-gradient(
       to bottom,
-      var(--wr-ripple-grid-line-color) var(--wr-ripple-grid-line-width),
+      var(--wr-ripple-grid-input-line-color, var(--wr-ripple-grid-line-color)) var(--wr-ripple-grid-line-width),
       transparent var(--wr-ripple-grid-line-width)
     );
   background-position: calc(50% - var(--wr-ripple-grid-line-width) / 2) calc(50% - var(--wr-ripple-grid-line-width) / 2);
@@ -52,4 +52,12 @@
     width: 100%;
     height: 100%;
   }
+
+  // The adjust inherits to the colour probe inside the canvas, which would otherwise
+  // read the forced colour. A still frame drawn then keeps it after the mode ends.
+  @media (forced-colors: active) {
+    &__canvas {
+      forced-color-adjust: none;
+    }
+  }
 }

package/bits/spotlight-card/styles/_rules.scss

@@ -1,7 +1,7 @@
 // Cursor-tracked spotlight card (reactbits port). The `--wr-spotlight-x/y`
-// vars come from the host's mousemove handler; `--wr-spotlight-color` is
-// set inline from the `[spotlightColor]` input when provided — otherwise
-// the theme picks the default below. `--wr-color-on-surface` flips between
+// vars come from the host's mousemove handler; `--wr-spotlight-input-color`
+// is set inline from the `[spotlightColor]` input when provided — otherwise
+// `--wr-spotlight-color` below decides. `--wr-color-on-surface` flips between
 // schemes (dark on light surfaces, light on dark), so one tint reads as a
 // dark-ish glow in light mode and a light beam in dark mode; the dark side
 // takes a touch more alpha so the beam reads as bright as the classic
@@ -10,6 +10,9 @@
 .wr-spotlight-card {
   --wr-spotlight-x: 50%;
   --wr-spotlight-y: 50%;
+  // What `[spotlightColor]` writes on the host, which the inline value beats. Unset here
+  // so a card projected inside another one does not inherit its colour.
+  --wr-spotlight-input-color: initial;
   --wr-spotlight-color: light-dark(
     color-mix(in srgb, var(--wr-color-on-surface) 15%, transparent),
     color-mix(in srgb, var(--wr-color-on-surface) 22%, transparent)
@@ -33,7 +36,7 @@
     inset: 0;
     background: radial-gradient(
       circle at var(--wr-spotlight-x) var(--wr-spotlight-y),
-      var(--wr-spotlight-color),
+      var(--wr-spotlight-input-color, var(--wr-spotlight-color)),
       transparent var(--wr-spotlight-radius, 80%)
     );
     opacity: 0;

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

@@ -6,6 +6,9 @@
   // Light surfaces get a primary comet; dark flips to the classic white.
   // `[color]` overrides both inline.
   --wr-star-border-color: light-dark(var(--wr-color-primary), #ffffff);
+  // What `[color]` writes on the host, which the inline value beats. Unset here so an
+  // instance projected inside another one does not inherit its colour.
+  --wr-star-border-input-color: initial;
   --wr-star-border-speed: 6s;
   --wr-star-border-radius: 20px;
   --wr-star-border-opacity: 1;
@@ -33,8 +36,8 @@
     // there, so each scheme draws the gradient it drew as its own stop.
     background: radial-gradient(
       circle,
-      var(--wr-star-border-color),
-      light-dark(color-mix(in srgb, var(--wr-star-border-color) 37.5%, transparent), transparent) 10%,
+      var(--wr-star-border-input-color, var(--wr-star-border-color)),
+      light-dark(color-mix(in srgb, var(--wr-star-border-input-color, var(--wr-star-border-color)) 37.5%, transparent), transparent) 10%,
       transparent 16%
     );
     animation: wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;

package/bits/threads/styles/_rules.scss

@@ -43,7 +43,7 @@
     inset: 0;
     background-image: repeating-linear-gradient(
       to bottom,
-      var(--wr-threads-color) 0 var(--wr-threads-line-width),
+      var(--wr-threads-input-color, var(--wr-threads-color)) 0 var(--wr-threads-line-width),
       transparent var(--wr-threads-line-width)
         calc((100% - var(--wr-threads-line-width)) / max(1, var(--wr-threads-count) - 1))
     );
@@ -65,4 +65,12 @@
     width: 100%;
     height: 100%;
   }
+
+  // The adjust inherits to the colour probe inside the canvas, which would otherwise
+  // read the forced colour. A still frame drawn then keeps it after the mode ends.
+  @media (forced-colors: active) {
+    &__canvas {
+      forced-color-adjust: none;
+    }
+  }
 }

package/bits/waves/styles/_rules.scss

@@ -43,5 +43,12 @@
     width: 100%;
     height: 100%;
   }
-}
 
+  // The adjust inherits to the colour probe inside the canvas, which would otherwise
+  // read the forced colour. A still frame drawn then keeps it after the mode ends.
+  @media (forced-colors: active) {
+    &__canvas {
+      forced-color-adjust: none;
+    }
+  }
+}

package/charts/candlestick-chart/styles/_index.scss

@@ -160,11 +160,11 @@ $-body: calc(100% - $-upper - $-lower);
     pointer-events: none;
 
     &--increase {
-      color: var(--wr-candlestick-chart-increase-color);
+      color: var(--wr-candlestick-chart-input-increase-color, var(--wr-candlestick-chart-increase-color));
     }
 
     &--decrease {
-      color: var(--wr-candlestick-chart-decrease-color);
+      color: var(--wr-candlestick-chart-input-decrease-color, var(--wr-candlestick-chart-decrease-color));
     }
 
     // The wicks: above the body and below it, never through it, so a hollow body is

package/fesm2022/ngwr-affix.mjs

@@ -129,7 +129,7 @@ var WrAffix = class WrAffix {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrAffix,
 		deps: [],
@@ -137,7 +137,7 @@ var WrAffix = class WrAffix {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrAffix,
 		isStandalone: true,
 		selector: "[wrAffix]",
@@ -161,7 +161,7 @@ var WrAffix = class WrAffix {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrAffix,
 	decorators: [{

package/fesm2022/ngwr-alert.mjs

@@ -54,7 +54,7 @@ var WrAlert = class WrAlert {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrAlert,
 		deps: [],
@@ -62,7 +62,7 @@ var WrAlert = class WrAlert {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrAlert,
 		isStandalone: true,
 		selector: "wr-alert",
@@ -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,
@@ -137,7 +137,7 @@ var WrAlert = class WrAlert {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrAlert,
 	decorators: [{
@@ -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":";;;;;;;;;;;;AAyDA,IAAa,UAAb,MAAa,QAAO;CAET,aAAa,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAE7B,qBAAqB,YAAY,KAAK,YAAY,eAAe,aAAa;CAOxF,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOlC,OAAO,MAAmB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,WAAW,MAAyB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAOzC,UAAU,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAQpC,OAAO,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAOrD,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAQ1D,SAAS,OAAM;CAEL,YAAY,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEzB,UAAU,eAAc;EACzC,MAAM,QAAQ,CAAC,YAAY,aAAa,KAAK,KAAI,GAAI;EACrD,IAAI,KAAK,UAAS,GAAI,MAAM,KAAK,qBAAqB;EACtD,OAAO,MAAM,KAAK,GAAG;CACvB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,WAAW,eAC5B,KAAK,UAAS,IAAK,OAAO,KAAK,KAAI,MAAO,WAAW,UAAU,UAChE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACkB,YAAY,eAC7B,KAAK,UAAS,IAAK,OAAO,KAAK,KAAI,MAAO,YAAY,KAAK,KAAI,MAAO,YAAY,cAAc,UACjG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEgB,OAAO,OAAgC,UAAU;CACjD,WAAW,OAAO,QAAQ;CAEjC,UAAO;EACf,MAAM,OAAO,KAAK,KAAK;EACvB,MAAM,WAAW,KAAK,SAAS,KAAK,cAAc,aAAa;EAC/D,KAAK,UAAU,IAAI,IAAI;EACvB,KAAK,OAAO,KAAI;EAChB,IAAI,UAAU,sBAAsB,KAAK,YAAW,GAAI,EAAE,UAAU,KAAK,SAAQ,CAAE;CACrF;CASQ,cAAW;EACjB,MAAM,OAAO,KAAK,KAAK;EACvB,MAAM,MAAM,KAAK;EACjB,MAAM,SAAS,IAAI;EACnB,IAAI,UAAU,WAAW,IAAI,MAAM;EAGnC,MAAM,QAAQ,qBAAqB,IAAI,IAAI,CAAC,CAAC,QAAO,OAAM,GAAG,YAAY,CAAC;EAE1E,MAAM,QAAQ,MAAM,WAAU,QAAO,KAAK,wBAAwB,EAAE,IAAI,KAAK,iCAAiC,CAAC;EAC/G,CAAC,SAAS,IAAI,MAAM,SAAS,MAAM,GAAG,EAAE,EAAA,EAAI,MAAK;CACnD;CAtGW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,QAAA,SAAA;EAAA,MAAA,EAAA,YAAA;GAAA,cAAA;GAAA,SAAA;GAAA,aAAA;GAAA,kBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCzDpB;EA2FA,cAAA,CAAA;GAAA,MAAA;GAAA,MDlDY;GAAM,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,CAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAgBL,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAnBnB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAU,SAEX,CAAC,MAAM;GAAC,eACF,kBAAkB;GAAI,MAC/B;IAQJ,gBAAgB;IAChB,WAAW;IACX,eAAe;IACf,oBAAoB;GACrB;GAAA,UAAA;EAAA,CAAA"}
+{"version":3,"file":"ngwr-alert.mjs","names":[],"sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ElementRef,\n  Injector,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\nimport { getFocusableElements } 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-anchor.mjs

@@ -84,7 +84,7 @@ var WrAnchor = class WrAnchor {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrAnchor,
 		deps: [],
@@ -92,7 +92,7 @@ var WrAnchor = class WrAnchor {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrAnchor,
 		isStandalone: true,
 		selector: "wr-anchor",
@@ -138,7 +138,7 @@ var WrAnchor = class WrAnchor {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrAnchor,
 	decorators: [{

package/fesm2022/ngwr-avatar.mjs

@@ -64,7 +64,7 @@ var WrAvatar = class WrAvatar {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrAvatar,
 		deps: [],
@@ -72,7 +72,7 @@ var WrAvatar = class WrAvatar {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrAvatar,
 		isStandalone: true,
 		selector: "wr-avatar",
@@ -132,7 +132,7 @@ var WrAvatar = class WrAvatar {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrAvatar,
 	decorators: [{

package/fesm2022/ngwr-back-top.mjs

@@ -46,7 +46,7 @@ var WrBackTop = class WrBackTop {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrBackTop,
 		deps: [],
@@ -54,7 +54,7 @@ var WrBackTop = class WrBackTop {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrBackTop,
 		isStandalone: true,
 		selector: "wr-back-top",
@@ -93,7 +93,7 @@ var WrBackTop = class WrBackTop {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrBackTop,
 	decorators: [{

package/fesm2022/ngwr-badge.mjs

@@ -30,7 +30,7 @@ var WrBadge = class WrBadge {
 	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrBadge,
 		deps: [],
@@ -38,7 +38,7 @@ var WrBadge = class WrBadge {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrBadge,
 		isStandalone: true,
 		selector: "wr-badge",
@@ -81,7 +81,7 @@ var WrBadge = class WrBadge {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrBadge,
 	decorators: [{
@@ -172,7 +172,7 @@ var WrTag = class WrTag {
 	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrTag,
 		deps: [],
@@ -180,7 +180,7 @@ var WrTag = class WrTag {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrTag,
 		isStandalone: true,
 		selector: "wr-tag",
@@ -261,7 +261,7 @@ var WrTag = class WrTag {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrTag,
 	decorators: [{