ngwr 7.2.0 → 8.0.0

package/checkbox/styles/_index.scss

@@ -1,8 +1,10 @@
 @use '../../theme/styles' as theme;
 
 .wr-checkbox {
-  --wr-checkbox-size: 1.125rem;
-  --wr-checkbox-radius: var(--wr-border-radius-sm);
+  --wr-checkbox-size: 1.125rem; // md box (18px)
+  --wr-checkbox-radius: var(--wr-control-radius-md);
+  --wr-checkbox-font-size: var(--wr-text-sm);
+  --wr-checkbox-line-height: var(--wr-control-line-height-md);
   --wr-checkbox-bg: var(--wr-color-white);
   --wr-checkbox-border: var(--wr-color-light);
   --wr-checkbox-mark: transparent;
@@ -12,8 +14,8 @@
   vertical-align: middle;
   color: var(--wr-checkbox-color);
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: var(--wr-checkbox-font-size);
+  line-height: var(--wr-checkbox-line-height);
 
   &__label {
     display: inline-flex;
@@ -76,6 +78,21 @@
     --wr-checkbox-border: var(--wr-color-primary);
   }
 
+  // Sizes — box, radius, label font + line-height scale together.
+  &--sm {
+    --wr-checkbox-size: 1rem; // 16px
+    --wr-checkbox-radius: var(--wr-control-radius-sm);
+    --wr-checkbox-font-size: var(--wr-text-xs);
+    --wr-checkbox-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-checkbox-size: 1.25rem; // 20px
+    --wr-checkbox-radius: var(--wr-control-radius-lg);
+    --wr-checkbox-font-size: var(--wr-text-base);
+    --wr-checkbox-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--checked {
     --wr-checkbox-bg: var(--wr-color-primary);
     --wr-checkbox-border: var(--wr-color-primary);

package/collapse/styles/_index.scss

@@ -28,7 +28,7 @@
     border: 0;
     color: inherit;
     font: inherit;
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-base);
     font-weight: 500;
     text-align: left;
     cursor: pointer;

package/color-picker/styles/_index.scss

@@ -23,7 +23,7 @@
   background: var(--wr-color-picker-bg);
   border: 1px solid var(--wr-color-picker-border);
   @include theme.smooth-br(var(--wr-color-picker-radius));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--wr-shadow-overlay);
   font-family: var(--wr-font-family-base);
   user-select: none;
 
@@ -38,7 +38,7 @@
     background:
       linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent),
       var(--wr-color-picker-hue);
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);
   }
 
   // Hue + alpha sliders
@@ -49,7 +49,14 @@
     border-radius: var(--wr-color-picker-slider-height);
     cursor: ew-resize;
     touch-action: none;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);
+
+    // Coarse pointers: a taller track is easier to drag than the 0.75rem
+    // default. A symmetric 44px hit area would overlap the SV panel above it,
+    // so grow the track itself instead (the thumb stays vertically centred).
+    @media (pointer: coarse) {
+      height: 1.5rem;
+    }
   }
 
   &__slider--hue {
@@ -85,8 +92,8 @@
     border-radius: 50%;
     border: 2px solid #fff;
     box-shadow:
-      0 0 0 1px rgba(0, 0, 0, 0.3),
-      0 1px 2px rgba(0, 0, 0, 0.25);
+      0 0 0 1px rgba(var(--wr-color-black-rgb), 0.3),
+      0 1px 2px rgba(var(--wr-color-black-rgb), 0.25);
     pointer-events: none;
     background: transparent;
   }
@@ -109,7 +116,7 @@
     background-size:
       auto,
       8px 8px;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.06);
     color: transparent; // background-image already set inline via [style.background]
   }
 
@@ -122,7 +129,7 @@
 
   &__tabs {
     flex: 1 1 auto;
-    font-size: 0.75rem;
+    font-size: var(--wr-text-xs);
   }
 
   // Per-tab numeric inputs
@@ -152,7 +159,7 @@
       padding: 0.25rem 0.375rem;
       color: var(--wr-color-dark);
       font-family: var(--wr-font-family-mono, monospace);
-      font-size: 0.75rem;
+      font-size: var(--wr-text-xs);
       line-height: 1rem;
       text-align: center;
       outline: 0;
@@ -184,13 +191,13 @@
     text-align: left;
     text-transform: lowercase;
     padding: 0.3125rem 0.5rem;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
   }
 
   &__field-label {
     text-align: center;
     color: var(--wr-color-medium);
-    font-size: 0.625rem;
+    font-size: 0.625rem; // 10px — intentional micro R/G/B/A channel label, below --wr-text-xs
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -224,8 +231,7 @@
     }
 
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--wr-color-primary);
+      @include theme.focus-ring;
     }
 
     &:disabled {

package/command-palette/styles/_index.scss

@@ -14,7 +14,7 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(var(--wr-color-backdrop-rgb), 0.45);
+    background: var(--wr-color-overlay);
     backdrop-filter: blur(4px);
     pointer-events: auto;
     animation: wr-cmd-fade var(--wr-duration-base) var(--wr-ease-out);
@@ -107,7 +107,7 @@
     user-select: none;
 
     &--active {
-      background: rgba(var(--wr-color-primary-rgb), 0.08);
+      background: var(--wr-color-primary-soft);
       color: var(--wr-color-primary);
     }
   }
@@ -152,7 +152,7 @@
     padding: 0.0625rem 0.375rem;
     border: 1px solid var(--wr-color-light);
     border-radius: var(--wr-border-radius-sm);
-    background: rgba(var(--wr-color-light-rgb), 0.4);
+    background: var(--wr-color-hover);
     color: var(--wr-color-medium);
     font-family: inherit;
     font-size: var(--wr-text-xs);

package/compare/styles/_index.scss

@@ -13,7 +13,7 @@
     outline: 0;
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.25);
+      @include theme.focus-ring;
       border-radius: var(--wr-border-radius-sm);
     }
   }
@@ -63,7 +63,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.2);
   }
 
   &--horizontal &__divider {
@@ -94,7 +94,7 @@
     background: var(--wr-color-white);
     color: var(--wr-color-dark);
     border-radius: 50%;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 2px 6px rgba(var(--wr-color-black-rgb), 0.25);
     pointer-events: none;
   }
 }

package/context-menu/styles/_index.scss

@@ -64,7 +64,7 @@
 
   &:hover,
   &:focus-visible {
-    background: rgba(var(--wr-color-primary-rgb), 0.08);
+    background: var(--wr-color-primary-soft);
     color: var(--wr-color-primary);
     outline: none;
   }

package/date-picker/styles/_index.scss

@@ -94,12 +94,11 @@
 
     &:hover:not(:disabled) {
       color: var(--wr-color-primary);
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.3);
+      @include theme.focus-ring;
     }
 
     &:disabled {
@@ -118,7 +117,7 @@
     border-radius: var(--wr-border-radius-sm);
     color: var(--wr-time-picker-color);
     font-family: var(--wr-font-family-base);
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
     font-weight: 600;
     text-align: center;
@@ -157,14 +156,14 @@
     border-radius: var(--wr-border-radius-sm);
     color: var(--wr-time-picker-color);
     font-family: var(--wr-font-family-base);
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     user-select: none;
   }
 
   &__sep {
     color: var(--wr-time-picker-muted);
-    font-size: 1.125rem;
+    font-size: var(--wr-text-lg);
     font-weight: 600;
     line-height: 1;
     user-select: none;

package/density/styles/_index.scss

@@ -15,23 +15,33 @@
   --wr-density-gap: 1;
 }
 
-[data-wr-density='compact'] {
+[data-wr-density='sm'] {
   --wr-density-y: 0.55;
   --wr-density-x: 0.85;
   --wr-density-text: 0.95;
   --wr-density-gap: 0.8;
 }
 
-[data-wr-density='default'] {
+[data-wr-density='md'] {
   --wr-density-y: 1;
   --wr-density-x: 1;
   --wr-density-text: 1;
   --wr-density-gap: 1;
 }
 
-[data-wr-density='comfortable'] {
+[data-wr-density='lg'] {
   --wr-density-y: 1.35;
   --wr-density-x: 1.15;
   --wr-density-text: 1.05;
   --wr-density-gap: 1.15;
 }
+
+// `touch` — finger-friendly. Leans on vertical padding (taller controls, ~44px
+// targets) and gap (so adjacent controls don't crowd a fingertip); text stays
+// at reading size since touch is about hit area, not legibility.
+[data-wr-density='touch'] {
+  --wr-density-y: 1.7;
+  --wr-density-x: 1.25;
+  --wr-density-text: 1;
+  --wr-density-gap: 1.5;
+}

package/dialog/styles/_index.scss

@@ -47,7 +47,7 @@
 }
 
 .wr-dialog-backdrop {
-  background: rgba(var(--wr-color-backdrop-rgb), 0.45);
+  background: var(--wr-color-overlay);
   backdrop-filter: blur(2px);
 }
 
@@ -80,7 +80,7 @@
     margin: 0;
     padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
     color: var(--wr-color-dark);
-    font-size: 1.0625rem;
+    font-size: var(--wr-text-lg);
     font-weight: 600;
     line-height: 1.5rem;
     border-bottom: 1px solid var(--wr-color-light);
@@ -90,7 +90,7 @@
     padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
     overflow: auto;
     color: var(--wr-color-dark);
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-base);
     line-height: 1.5rem;
   }
 

package/divider/styles/_index.scss

@@ -15,7 +15,7 @@
   width: 100%;
   user-select: none;
   color: var(--wr-color-medium);
-  font-size: 0.8125rem;
+  font-size: var(--wr-text-sm);
   line-height: 1.125rem;
 
   &::before,

package/drawer/styles/_index.scss

@@ -1,7 +1,7 @@
 @use '../../theme/styles' as theme;
 
 .wr-drawer-backdrop {
-  background: rgba(var(--wr-color-backdrop-rgb), 0.45);
+  background: var(--wr-color-overlay);
   backdrop-filter: blur(2px);
 }
 
@@ -39,20 +39,20 @@
   // Rounded leading corners
   // The edge facing the viewport interior. Common bottom-sheet styling.
   &--rounded.wr-drawer__panel--bottom {
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
+    border-top-left-radius: var(--wr-border-radius-lg);
+    border-top-right-radius: var(--wr-border-radius-lg);
   }
   &--rounded.wr-drawer__panel--top {
-    border-bottom-left-radius: 1rem;
-    border-bottom-right-radius: 1rem;
+    border-bottom-left-radius: var(--wr-border-radius-lg);
+    border-bottom-right-radius: var(--wr-border-radius-lg);
   }
   &--rounded.wr-drawer__panel--left {
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
+    border-top-right-radius: var(--wr-border-radius-lg);
+    border-bottom-right-radius: var(--wr-border-radius-lg);
   }
   &--rounded.wr-drawer__panel--right {
-    border-top-left-radius: 1rem;
-    border-bottom-left-radius: 1rem;
+    border-top-left-radius: var(--wr-border-radius-lg);
+    border-bottom-left-radius: var(--wr-border-radius-lg);
   }
 
   // Safe-area padding on the trailing edge
@@ -80,6 +80,8 @@
     flex: 0 0 auto;
     cursor: grab;
     user-select: none;
+    // Own the gesture — stop the browser turning the drag into a scroll/pan.
+    touch-action: none;
   }
 
   &__grabber {
@@ -94,7 +96,7 @@
     margin: 0;
     padding: 1rem 1.25rem;
     color: var(--wr-color-dark);
-    font-size: 1.0625rem;
+    font-size: var(--wr-text-lg);
     font-weight: 600;
     line-height: 1.5rem;
     border-bottom: 1px solid var(--wr-color-light);
@@ -104,7 +106,7 @@
     flex: 1 1 auto;
     padding: 1rem 1.25rem;
     overflow: auto;
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-base);
     line-height: 1.5rem;
   }
 

package/dropdown/styles/_index.scss

@@ -61,7 +61,7 @@
   --wr-dropdown-item-padding-y: 0.375rem;
   --wr-dropdown-item-padding-x: 0.625rem;
   --wr-dropdown-item-color: var(--wr-color-dark);
-  --wr-dropdown-item-bg-hover: rgba(var(--wr-color-light-rgb), 0.4);
+  --wr-dropdown-item-bg-hover: var(--wr-color-hover);
   --wr-dropdown-item-radius: var(--wr-border-radius-sm);
 
   display: flex;
@@ -74,7 +74,7 @@
   border-radius: var(--wr-dropdown-item-radius);
   color: var(--wr-dropdown-item-color);
   font: inherit;
-  font-size: 0.875rem;
+  font-size: var(--wr-text-sm);
   line-height: 1.25rem;
   text-align: left;
   white-space: nowrap;

package/fesm2022/ngwr-affix.mjs

@@ -79,10 +79,10 @@ class WrAffix {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrAffix, isStandalone: true, selector: "[wrAffix]", inputs: { offsetTop: { classPropertyName: "offsetTop", publicName: "wrAffixOffsetTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { affixChange: "wrAffixChange" }, host: { properties: { "style.position": "\"sticky\"", "style.top.px": "offsetTop()" }, classAttribute: "wr-affix" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: WrAffix, isStandalone: true, selector: "[wrAffix]", inputs: { offsetTop: { classPropertyName: "offsetTop", publicName: "wrAffixOffsetTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { affixChange: "wrAffixChange" }, host: { properties: { "style.position": "\"sticky\"", "style.top.px": "offsetTop()" }, classAttribute: "wr-affix" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAffix, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAffix, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrAffix]',

package/fesm2022/ngwr-alert.mjs

@@ -1,6 +1,7 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
 import { input, output, signal, computed, ViewEncapsulation, Component } from '@angular/core';
+import { WrIcon } from 'ngwr/icon';
 
 /**
  * @license
@@ -20,8 +21,12 @@ import { input, output, signal, computed, ViewEncapsulation, Component } from '@
  * @see https://ngwr.dev/components/alert
  */
 class WrAlert {
-    /** Required headline shown at the top of the alert. */
-    title = input.required(/* @ts-ignore */
+    /**
+     * Optional headline shown at the top of the alert.
+     *
+     * @default null
+     */
+    title = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     /**
      * Visual variant.
@@ -30,6 +35,13 @@ class WrAlert {
      */
     type = input('info', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Override the default per-type icon with any ngwr icon name.
+     *
+     * @default null
+     */
+    iconName = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
     /**
      * Optional secondary message rendered below the title.
      *
@@ -38,8 +50,8 @@ class WrAlert {
     message = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     /**
-     * When `true`, renders a leading status icon matching the `type`
-     * (info / success / warning / danger). Pass `false` to hide.
+     * When `true`, renders a leading status icon matching the `type`.
+     * Pass `false` to hide. Ignored when `iconName` is set.
      *
      * @default true
      */
@@ -72,17 +84,17 @@ class WrAlert {
         this.dismissed.set(true);
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "@if (!dismissed()) {\n  @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        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\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    <p class=\"wr-alert__title\">{{ title() }}</p>\n    @if (message(); as text) {\n      <p class=\"wr-alert__message\">{{ text }}</p>\n    }\n  </div>\n\n  @if (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (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", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "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        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\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 (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (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, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-alert', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'wr-alert', imports: [WrIcon], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
                         '[attr.role]': 'liveRole()',
                         '[attr.aria-live]': 'liveLevel()',
-                    }, template: "@if (!dismissed()) {\n  @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        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\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    <p class=\"wr-alert__title\">{{ title() }}</p>\n    @if (message(); as text) {\n      <p class=\"wr-alert__message\">{{ text }}</p>\n    }\n  </div>\n\n  @if (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (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: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+                    }, 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        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\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 (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (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: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-alert.mjs","sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html","../../../projects/lib/alert/ngwr-alert.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport type { WrAlertType } from './interfaces';\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\" closeable (closed)=\"onClose()\" />\n * ```\n *\n * @see https://ngwr.dev/components/alert\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': 'liveRole()',\n    '[attr.aria-live]': 'liveLevel()',\n  },\n})\nexport class WrAlert {\n  /** Required headline shown at the top of the alert. */\n  readonly title = input.required<string>();\n\n  /**\n   * Visual variant.\n   *\n   * @default 'info'\n   */\n  readonly type = input<WrAlertType>('info');\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   * (info / success / warning / danger). Pass `false` to hide.\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 closeable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Emitted when the user dismisses the alert via the close button.\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  protected onClose(): void {\n    this.dismissed.set(true);\n    this.closed.emit();\n  }\n}\n","@if (!dismissed()) {\n  @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        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\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    <p class=\"wr-alert__title\">{{ title() }}</p>\n    @if (message(); as text) {\n      <p class=\"wr-alert__message\">{{ text }}</p>\n    }\n  </div>\n\n  @if (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;AAUG;MAWU,OAAO,CAAA;;IAET,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;AAEzC;;;;AAIG;IACM,IAAI,GAAG,KAAK,CAAc,MAAM;6EAAC;AAE1C;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAgB,IAAI;gFAAC;AAE7C;;;;;AAKG;IACM,IAAI,GAAG,KAAK,CAAC,IAAI,4EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEjE;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAEvE;;AAEG;IACM,MAAM,GAAG,MAAM,EAAQ;IAEb,SAAS,GAAG,MAAM,CAAC,KAAK;kFAAC;AAEzB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC;QACtD,IAAI,IAAI,CAAC,SAAS,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AACvD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;;AAGiB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MACrC,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ;iFACxE;AACkB,IAAA,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,QAAQ;kFACzG;IAES,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACpB;uGAzDW,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,8zBCjCpB,+vDA+DA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FD9Ba,OAAO,EAAA,UAAA,EAAA,CAAA;kBAVnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,aAAA,EAEL,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,YAAY;AAC3B,wBAAA,kBAAkB,EAAE,aAAa;AAClC,qBAAA,EAAA,QAAA,EAAA,+vDAAA,EAAA;;;AE/BH;;AAEG;;;;"}
+{"version":3,"file":"ngwr-alert.mjs","sources":["../../../projects/lib/alert/alert.ts","../../../projects/lib/alert/alert.html","../../../projects/lib/alert/ngwr-alert.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input, output, signal } from '@angular/core';\n\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\nimport type { WrAlertType } from './interfaces';\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\" closeable (closed)=\"onClose()\" />\n * ```\n *\n * @see https://ngwr.dev/components/alert\n */\n@Component({\n  selector: 'wr-alert',\n  templateUrl: './alert.html',\n  imports: [WrIcon],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': 'liveRole()',\n    '[attr.aria-live]': 'liveLevel()',\n  },\n})\nexport class WrAlert {\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 closeable = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Emitted when the user dismisses the alert via the close button.\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  protected onClose(): void {\n    this.dismissed.set(true);\n    this.closed.emit();\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        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\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 (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" aria-label=\"Close alert\" (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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-anchor.mjs

@@ -87,10 +87,10 @@ class WrAnchor {
         this.scroll.to(`#${id}`, { offset: this.offset() });
         this.activeId.set(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrAnchor, isStandalone: true, selector: "wr-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, hitArea: { classPropertyName: "hitArea", publicName: "hitArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation", "aria-label": "Table of contents" }, classAttribute: "wr-anchor" }, ngImport: i0, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrAnchor, isStandalone: true, selector: "wr-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, hitArea: { classPropertyName: "hitArea", publicName: "hitArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation", "aria-label": "Table of contents" }, classAttribute: "wr-anchor" }, ngImport: i0, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAnchor, decorators: [{
             type: Component,
             args: [{ selector: 'wr-anchor', encapsulation: ViewEncapsulation.None, host: { class: 'wr-anchor', role: 'navigation', 'aria-label': 'Table of contents' }, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n" }]
         }], ctorParameters: () => [], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], hitArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hitArea", required: false }] }] } });

package/fesm2022/ngwr-aurora.mjs

@@ -293,10 +293,10 @@ class WrAurora {
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrAurora, isStandalone: true, selector: "wr-aurora", inputs: { colorStops: { classPropertyName: "colorStops", publicName: "colorStops", isSignal: true, isRequired: false, transformFunction: null }, amplitude: { classPropertyName: "amplitude", publicName: "amplitude", isSignal: true, isRequired: false, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "blend", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-aurora" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-aurora__canvas"></canvas>', isInline: true, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: WrAurora, isStandalone: true, selector: "wr-aurora", inputs: { colorStops: { classPropertyName: "colorStops", publicName: "colorStops", isSignal: true, isRequired: false, transformFunction: null }, amplitude: { classPropertyName: "amplitude", publicName: "amplitude", isSignal: true, isRequired: false, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "blend", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-aurora" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-aurora__canvas"></canvas>', isInline: true, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrAurora, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAurora, decorators: [{
             type: Component,
             args: [{ selector: 'wr-aurora', template: '<canvas #canvas class="wr-aurora__canvas"></canvas>', encapsulation: ViewEncapsulation.None, host: { class: 'wr-aurora' }, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"] }]
         }], ctorParameters: () => [], propDecorators: { colorStops: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorStops", required: false }] }], amplitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "amplitude", required: false }] }], blend: [{ type: i0.Input, args: [{ isSignal: true, alias: "blend", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });