ngwr 15.0.1 → 15.2.0

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

@@ -0,0 +1,321 @@
+@use '../../../theme/styles' as theme;
+@use '../../../popover/styles' as popover-styles; // the `.wr-tooltip` chip the hover tooltip renders into
+
+// Styles for the entry points this component's own markup renders. With `dataTable`, the
+// figures render as a `<wr-chart-table>` beside the plot, which its own sheet clips out of
+// sight.
+@use '../../core/styles' as core-styles; // WrChartTable
+
+.wr-waterfall-chart {
+  --wr-waterfall-chart-font-family: var(--wr-font-family-base);
+  --wr-waterfall-chart-color: var(--wr-color-on-surface);
+  // Between two bars, and so the length of the connector that crosses it. Held to a
+  // quarter of one step's share of the drawing (see `$gap-in-row` below).
+  --wr-waterfall-chart-gap: var(--wr-space-sm);
+  // The room over and under the drawing with no figures printed; with them it grows to a
+  // figure's line (see `$value-room` below).
+  --wr-waterfall-chart-plot-inset-y: var(--wr-space-sm);
+  // Nearly square: a connector meets a bar at its corner, and a rounder corner leaves the
+  // line ending in mid-air beside the curve.
+  --wr-waterfall-chart-bar-radius: calc(var(--wr-border-radius-sm) / 3);
+  --wr-waterfall-chart-grid-color: color-mix(in srgb, var(--wr-border-base) 70%, transparent);
+  --wr-waterfall-chart-baseline-color: var(--wr-border-base);
+  // Dashed, so a connector is never read as a gridline: both are thin horizontal lines, and
+  // a connector stops at the next bar where a gridline crosses the plot.
+  --wr-waterfall-chart-connector-color: var(--wr-color-on-surface-muted);
+  --wr-waterfall-chart-connector-width: 1px;
+  // The hairline of a change of zero: neither an increase nor a decrease, so no intent —
+  // the running total carried through, in the connectors' neutral.
+  --wr-waterfall-chart-flat-color: var(--wr-color-on-surface-muted);
+  --wr-waterfall-chart-tick-gap: var(--wr-space-xs);
+  --wr-waterfall-chart-tick-font-size: var(--wr-text-xs);
+  --wr-waterfall-chart-tick-line-height: var(--wr-text-xs-leading);
+  --wr-waterfall-chart-tick-color: var(--wr-color-on-surface-muted);
+  // The figure past a bar's end sits on the surface, not on the bar, so it takes the
+  // surface's text colour whatever the bar's.
+  --wr-waterfall-chart-value-font-size: var(--wr-text-xs);
+  --wr-waterfall-chart-value-line-height: var(--wr-text-xs-leading);
+  --wr-waterfall-chart-value-color: var(--wr-color-on-surface);
+  --wr-waterfall-chart-value-gap: var(--wr-space-xs);
+  --wr-waterfall-chart-label-font-size: var(--wr-text-xs);
+  --wr-waterfall-chart-label-color: var(--wr-color-on-surface-muted);
+  --wr-waterfall-chart-labels-margin-top: var(--wr-space-sm);
+  // A total's figure and label, a step heavier than a change's: one of the cues that tells
+  // a total apart without its colour.
+  --wr-waterfall-chart-total-font-weight: var(--wr-font-weight-medium);
+  // The column the tooltip is about.
+  --wr-waterfall-chart-active-bg: color-mix(in srgb, var(--wr-color-on-surface) 6%, transparent);
+
+  // The room over and under the drawing: a figure's line and its gap when figures are
+  // printed, so one past the highest or lowest bar stays inside the plot rather than over
+  // the legend above or the labels below.
+  $room: var(--wr-waterfall-chart-plot-inset-y);
+  $value-room: max(
+    var(--wr-waterfall-chart-plot-inset-y),
+    calc(var(--wr-waterfall-chart-value-line-height) + var(--wr-waterfall-chart-value-gap))
+  );
+
+  // The gap as drawn: the hook, held to a quarter of one step's share of the drawing, so
+  // a chart of many steps narrows its gaps with its bars instead of squeezing the bars to
+  // nothing and running out of its box. `--wr-waterfall-chart-steps` is the count, which
+  // the component writes on the host. A percentage is of the box that reads it, so the
+  // one length is written twice: against the row — the track and the labels, `25% / n` —
+  // and against a step — the connector and the figure, `n / (3n + 1)` of it. Those are
+  // the same: a step is an nth of the row less its share of the gaps.
+  $steps: var(--wr-waterfall-chart-steps, 1);
+  $gap-in-row: min(var(--wr-waterfall-chart-gap), calc(25% / $steps));
+  $gap-in-step: min(var(--wr-waterfall-chart-gap), calc(100% * $steps / (3 * $steps + 1)));
+
+  display: block;
+  // The containing block of the out-of-flow `dataTable` copy, as on every chart that
+  // renders one. No z-index, so no stacking context.
+  position: relative;
+  font-family: var(--wr-waterfall-chart-font-family);
+  color: var(--wr-waterfall-chart-color);
+
+  // The tick labels at inline start, the plot beside them, and the step labels under the
+  // plot alone. A grid follows `direction`, so the axis is on the right under RTL.
+  &__body {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  // As wide as the longest label: every label is in flow, in the one cell of a one-cell
+  // grid, so the column sizes to the widest while its height stays one label. It carries
+  // the plot's block padding, so its cell is exactly the drawing's height, and each label
+  // moves down its gridline's share of that, then up by half itself.
+  &__y-axis {
+    grid-column: 1;
+    grid-row: 1;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    padding-block: $room;
+    padding-inline-end: var(--wr-waterfall-chart-tick-gap);
+    font-size: var(--wr-waterfall-chart-tick-font-size);
+    line-height: var(--wr-waterfall-chart-tick-line-height);
+    color: var(--wr-waterfall-chart-tick-color);
+    text-align: end;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Shrunk to its text against the plot's side of the column, so its own direction can
+  // follow its text (`plaintext`): a negative tick is a `-` in front of digits, neither of
+  // which has a direction, and under RTL the sign would land on the far side — `250-`.
+  &__tick {
+    grid-area: 1 / 1;
+    align-self: start;
+    justify-self: end;
+    position: relative;
+    unicode-bidi: plaintext;
+    top: calc(var(--wr-waterfall-chart-y, 0) * 1%);
+    transform: translateY(-50%);
+  }
+
+  &__plot {
+    grid-column: 2;
+    grid-row: 1;
+    padding-block: $room;
+  }
+
+  &--values &__y-axis,
+  &--values &__plot {
+    padding-block: $value-room;
+  }
+
+  // The drawing: one column per step, side by side. The gridlines, the zero line and each
+  // column's parts are placed in it by percentage of its height from the bottom.
+  &__track {
+    position: relative;
+    display: flex;
+    gap: $gap-in-row;
+    height: 100%;
+  }
+
+  &__grid-line,
+  &__baseline {
+    position: absolute;
+    inset-inline: 0;
+    // Centred on its level, as the tick label beside it is.
+    transform: translateY(50%);
+    pointer-events: none;
+  }
+
+  &__grid-line {
+    bottom: calc(var(--wr-waterfall-chart-level, 0) * 1%);
+    border-block-start: 1px solid var(--wr-waterfall-chart-grid-color);
+  }
+
+  &__baseline {
+    bottom: calc(var(--wr-waterfall-chart-zero, 0) * 1%);
+    border-block-start: 1px solid var(--wr-waterfall-chart-baseline-color);
+  }
+
+  // The full height of the drawing, so the whole column answers the pointer, and as wide
+  // as a share of the plot less the gaps.
+  &__step {
+    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  &__step--active {
+    background: var(--wr-waterfall-chart-active-bg);
+  }
+
+  // From one end to the other of what the step spans: a change from the running total
+  // before it to the one after, a total from zero. A change of zero keeps a hairline.
+  &__bar {
+    position: absolute;
+    inset-inline: 0;
+    bottom: calc(var(--wr-waterfall-chart-lo, 0) * 1%);
+    height: calc((var(--wr-waterfall-chart-hi, 0) - var(--wr-waterfall-chart-lo, 0)) * 1%);
+    min-height: 1px;
+    border-radius: var(--wr-waterfall-chart-bar-radius);
+    transition:
+      bottom var(--wr-duration-slow) var(--wr-ease-out),
+      height var(--wr-duration-slow) var(--wr-ease-out);
+    // The bar is an inline `background`, which forced colors resets to `Canvas`: every bar
+    // would vanish into the page and leave its figure floating. The SVG charts keep their
+    // fills there, so the HTML marks do too.
+    forced-color-adjust: none;
+  }
+
+  // No inline paint on a change of zero, so the hook paints it.
+  &__step--flat &__bar {
+    background: var(--wr-waterfall-chart-flat-color);
+  }
+
+  // Past the end the step runs to: over its top, or under its bottom with `--below`.
+  // Its room is its column and half the gap on either side, less a quarter of the gap of
+  // padding, so two neighbours' figures always stand half a gap apart.
+  //
+  // A figure is printed whole or not at all, with no measuring, as the heatmap's values
+  // are: the box is a wrapping flex line one figure tall, led by a zero-width item. A
+  // figure that fits shares that first line and is centred on it; one that does not
+  // cannot join it, so it wraps onto a second line, under the first, where `overflow`
+  // hides it. A figure cut to `+$1,…` is no figure, and `−$9…` reads as −$9; the tooltip,
+  // the name and the data table carry the whole figure.
+  &__value {
+    position: absolute;
+    inset-inline: calc($gap-in-step / -2);
+    bottom: calc(var(--wr-waterfall-chart-hi, 0) * 1% + var(--wr-waterfall-chart-value-gap));
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    box-sizing: border-box;
+    block-size: var(--wr-waterfall-chart-value-line-height);
+    padding-inline: calc($gap-in-step / 4);
+    overflow: hidden;
+    font-size: var(--wr-waterfall-chart-value-font-size);
+    line-height: var(--wr-waterfall-chart-value-line-height);
+    color: var(--wr-waterfall-chart-value-color);
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+    transition: bottom var(--wr-duration-slow) var(--wr-ease-out);
+
+    &::before {
+      content: '';
+      flex: 0 0 0;
+      block-size: 100%;
+    }
+  }
+
+  // Never shrunk, so a figure too wide for the line wraps rather than squeezing. Its
+  // direction follows its own text (`plaintext`): a `−` in front of digits has no
+  // direction of its own, so under RTL it would otherwise land on the digits' far side and
+  // read as the opposite change.
+  &__value-text {
+    flex: none;
+    white-space: nowrap;
+    unicode-bidi: plaintext;
+  }
+
+  // Not past either end of the plot, where there is no gap to borrow: past the last bar
+  // it would reach out of the chart's own box and give a scroller 4px to scroll. The steps
+  // are the track's only `div`s, between the gridlines and the zero line.
+  &__step:first-of-type &__value {
+    inset-inline-start: 0;
+  }
+
+  &__step:last-of-type &__value {
+    inset-inline-end: 0;
+  }
+
+  &__value--below {
+    top: calc((100 - var(--wr-waterfall-chart-lo, 0)) * 1% + var(--wr-waterfall-chart-value-gap));
+    bottom: auto;
+    transition: top var(--wr-duration-slow) var(--wr-ease-out);
+  }
+
+  &__step--total &__value {
+    font-weight: var(--wr-waterfall-chart-total-font-weight);
+  }
+
+  // From this column's inline end across the gap to the next one, centred on the running
+  // total the next bar starts from. Logical, so under RTL it crosses to the left.
+  &__connector {
+    position: absolute;
+    inset-inline-start: 100%;
+    bottom: calc(var(--wr-waterfall-chart-level, 0) * 1%);
+    inline-size: $gap-in-step;
+    border-block-start: var(--wr-waterfall-chart-connector-width) dashed var(--wr-waterfall-chart-connector-color);
+    transform: translateY(50%);
+    pointer-events: none;
+    transition: bottom var(--wr-duration-slow) var(--wr-ease-out);
+  }
+
+  // A slot per step with the plot's own gap, so each label sits under its column.
+  &__labels {
+    grid-column: 2;
+    grid-row: 2;
+    display: flex;
+    gap: $gap-in-row;
+    margin-block-start: var(--wr-waterfall-chart-labels-margin-top);
+  }
+
+  // A label is the host's own text, in whatever language it is, so it takes its direction
+  // from that text and is ellipsised at its own end, not at the page's.
+  &__label {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    unicode-bidi: plaintext;
+    font-size: var(--wr-waterfall-chart-label-font-size);
+    color: var(--wr-waterfall-chart-label-color);
+  }
+
+  &__label--total {
+    font-weight: var(--wr-waterfall-chart-total-font-weight);
+  }
+}
+
+// A bar that moves to its new ends is motion nothing asked for twice: the new figure is
+// what matters, and it is drawn at once.
+@media (prefers-reduced-motion: reduce) {
+  .wr-waterfall-chart__bar,
+  .wr-waterfall-chart__value,
+  .wr-waterfall-chart__connector {
+    transition: none;
+  }
+}
+
+// The bars keep their colours (see `__bar`). The lines are theme colours that mean nothing
+// on a forced palette: the grid takes the system's muted colour and the connectors and a
+// change of zero's hairline the text colour, and the column the tooltip is about, whose
+// wash forced colors paints as the page, takes an edge instead.
+@media (forced-colors: active) {
+  .wr-waterfall-chart {
+    --wr-waterfall-chart-grid-color: GrayText;
+    --wr-waterfall-chart-baseline-color: CanvasText;
+    --wr-waterfall-chart-connector-color: CanvasText;
+    --wr-waterfall-chart-flat-color: CanvasText;
+  }
+
+  .wr-waterfall-chart__step--active {
+    outline: 1px solid Highlight;
+  }
+}

package/collapse/styles/_index.scss

@@ -69,11 +69,16 @@
     grid-template-rows: 0fr;
     transition:
       grid-template-rows var(--wr-transition-base),
+      border-top-width var(--wr-transition-base),
       border-top-color var(--wr-transition-base);
-    border-top: 1px solid transparent;
+    // No width while closed: a transparent 1px border still took a row under
+    // the header, where a hovered header's fill stopped short of the panel's
+    // edge and left a stripe of the panel's own background.
+    border-top: 0 solid transparent;
 
     &--open {
       grid-template-rows: 1fr;
+      border-top-width: 1px;
       border-top-color: var(--wr-collapse-border);
     }
   }

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: () => [],