ngwr 15.1.0 → 15.2.0

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",
@@ -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: [{

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: [{

package/fesm2022/ngwr-bits-aurora.mjs

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 import { Component, DestroyRef, ElementRef, NgZone, PLATFORM_ID, ViewEncapsulation, afterNextRender, effect, inject, input, signal, viewChild } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
-import { numAttr, resolveCssColor, watchColorScheme } from "ngwr/utils";
+import { numAttr, resolveCssColorChannels, watchColorScheme } from "ngwr/utils";
 import { WrPlatform } from "ngwr/platform";
 /**
 * @license
@@ -133,24 +133,6 @@ const STOP_HOOKS = [
 	"var(--wr-aurora-stop-2)",
 	"var(--wr-aurora-stop-3)"
 ];
-function toRgb01(color) {
-	const value = color.trim().toLowerCase();
-	const fn = /^(rgba?|color)\(\s*(srgb\s+)?([^)]*)\)$/.exec(value);
-	if (fn && (fn[1] !== "color" || fn[2] !== void 0)) {
-		const scale = fn[1] === "color" ? 1 : 255;
-		const channels = fn[3].split(/[\s,/]+/).slice(0, 3).map((part) => part === "none" ? 0 : Number.parseFloat(part) / scale);
-		if (channels.length !== 3 || !channels.every(Number.isFinite)) return null;
-		return channels.map((channel) => Math.min(1, Math.max(0, channel)));
-	}
-	const hex = /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.exec(value)?.[1];
-	if (hex === void 0) return null;
-	const full = hex.length <= 4 ? [...hex].map((digit) => digit + digit).join("") : hex;
-	return [
-		0,
-		2,
-		4
-	].map((at) => Number.parseInt(full.slice(at, at + 2), 16) / 255);
-}
 var WrAurora = class WrAurora {
 	colorStops = input(null, ...ngDevMode ? [{ debugName: "colorStops" }] : /* istanbul ignore next */ []);
 	amplitude = input(1, {
@@ -174,8 +156,10 @@ var WrAurora = class WrAurora {
 	gl = null;
 	uniforms = {};
 	rafId = 0;
+	time = 0;
 	booted = signal(false, ...ngDevMode ? [{ debugName: "booted" }] : /* istanbul ignore next */ []);
 	onScreen = signal(true, ...ngDevMode ? [{ debugName: "onScreen" }] : /* istanbul ignore next */ []);
+	hasBox = signal(false, ...ngDevMode ? [{ debugName: "hasBox" }] : /* istanbul ignore next */ []);
 	constructor() {
 		if (!this.isBrowser) return;
 		afterNextRender(() => this.zone.runOutsideAngular(() => this.boot()));
@@ -193,7 +177,7 @@ var WrAurora = class WrAurora {
 			this.draw(0);
 		});
 		effect((onCleanup) => {
-			if (!this.booted() || !this.onScreen() || this.platform.prefersReducedMotion()) return;
+			if (!this.booted() || !this.onScreen() || !this.hasBox() || this.platform.prefersReducedMotion()) return;
 			const loop = (t) => {
 				this.rafId = requestAnimationFrame(loop);
 				this.pushUniforms();
@@ -247,22 +231,31 @@ var WrAurora = class WrAurora {
 		const position = gl.getAttribLocation(program, "position");
 		gl.enableVertexAttribArray(position);
 		gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
-		const resize = () => {
-			const rect = this.host.nativeElement.getBoundingClientRect();
-			canvas.width = Math.max(1, Math.round(rect.width));
-			canvas.height = Math.max(1, Math.round(rect.height));
+		const hostEl = this.host.nativeElement;
+		const fit = () => {
+			const width = hostEl.clientWidth;
+			const height = hostEl.clientHeight;
+			this.hasBox.set(width > 0 && height > 0);
+			canvas.width = Math.max(1, width);
+			canvas.height = Math.max(1, height);
 			gl.viewport(0, 0, canvas.width, canvas.height);
 			gl.uniform2f(this.uniforms["uResolution"], canvas.width, canvas.height);
-			if (this.platform.prefersReducedMotion()) this.draw(0);
+		};
+		const resize = () => {
+			fit();
+			this.draw(this.platform.prefersReducedMotion() ? 0 : this.time);
 		};
 		window.addEventListener("resize", resize);
 		const ro = new ResizeObserver(resize);
-		ro.observe(this.host.nativeElement);
-		resize();
+		ro.observe(hostEl);
+		fit();
 		this.pushUniforms();
 		this.draw(0);
-		const io = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => this.onScreen.set(entries[entries.length - 1].isIntersecting));
-		io?.observe(this.host.nativeElement);
+		const io = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
+			const { isIntersecting, intersectionRatio } = entries[entries.length - 1];
+			this.onScreen.set(isIntersecting && intersectionRatio > 0);
+		}, { threshold: [0, 1e-9] });
+		io?.observe(canvas);
 		this.destroyRef.onDestroy(() => {
 			window.removeEventListener("resize", resize);
 			ro.disconnect();
@@ -283,20 +276,19 @@ var WrAurora = class WrAurora {
 		const explicit = this.colorStops();
 		const fallback = DEFAULT_STOPS[index];
 		const expression = explicit === null ? STOP_HOOKS[index] : explicit[Math.min(index, explicit.length - 1)] ?? fallback;
-		const canvas = this.canvasRef().nativeElement;
-		const resolved = resolveCssColor(canvas, expression, fallback);
-		return toRgb01(resolved) ?? toRgb01(resolveCssColor(canvas, `color-mix(in srgb, ${resolved} 100%, transparent)`, fallback)) ?? toRgb01(fallback);
+		return resolveCssColorChannels(this.canvasRef().nativeElement, expression, fallback);
 	}
 	draw(time) {
 		const gl = this.gl;
-		if (!gl) return;
+		if (!gl || !this.hasBox()) return;
+		this.time = time;
 		gl.uniform1f(this.uniforms["uTime"], time);
 		gl.clear(gl.COLOR_BUFFER_BIT);
 		gl.drawArrays(gl.TRIANGLES, 0, 3);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrAurora,
 		deps: [],
@@ -304,7 +296,7 @@ var WrAurora = class WrAurora {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.2.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrAurora,
 		isStandalone: true,
 		selector: "wr-aurora",
@@ -349,13 +341,13 @@ var WrAurora = class WrAurora {
 		ngImport: i0,
 		template: "<canvas #canvas class=\"wr-aurora__canvas\" aria-hidden=\"true\"></canvas>",
 		isInline: true,
-		styles: [".wr-aurora{--wr-aurora-stop-1: light-dark(#6366f1, #5227ff);--wr-aurora-stop-2: light-dark(#10b981, #7cff67);--wr-aurora-stop-3: light-dark(#6366f1, #5227ff);position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}\n"],
+		styles: [".wr-aurora{--wr-aurora-stop-1: light-dark(#6366f1, #5227ff);--wr-aurora-stop-2: light-dark(#10b981, #7cff67);--wr-aurora-stop-3: light-dark(#6366f1, #5227ff);position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}@media(forced-colors:active){.wr-aurora__canvas{display:none;forced-color-adjust:none}}\n"],
 		encapsulation: i0.ViewEncapsulation.None
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrAurora,
 	decorators: [{
@@ -365,7 +357,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: "<canvas #canvas class=\"wr-aurora__canvas\" aria-hidden=\"true\"></canvas>",
 			encapsulation: ViewEncapsulation.None,
 			host: { class: "wr-aurora" },
-			styles: [".wr-aurora{--wr-aurora-stop-1: light-dark(#6366f1, #5227ff);--wr-aurora-stop-2: light-dark(#10b981, #7cff67);--wr-aurora-stop-3: light-dark(#6366f1, #5227ff);position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}\n"]
+			styles: [".wr-aurora{--wr-aurora-stop-1: light-dark(#6366f1, #5227ff);--wr-aurora-stop-2: light-dark(#10b981, #7cff67);--wr-aurora-stop-3: light-dark(#6366f1, #5227ff);position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}@media(forced-colors:active){.wr-aurora__canvas{display:none;forced-color-adjust:none}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],