ngwr 15.0.1 → 15.2.0

package/anchor/styles/_index.scss

@@ -1,5 +1,10 @@
 @use '../../theme/styles' as theme;
 
+// One level of indent: the host's own, and again for a nested list. The active
+// bar reaches back across every indent its link sits behind, so the two are one
+// number.
+$indent: 0.875rem;
+
 .wr-anchor {
   --wr-anchor-font-family: var(--wr-font-family-base);
   --wr-anchor-border: var(--wr-border-base);
@@ -20,7 +25,7 @@
   // the 1.5px bar lands at -0.5px and overlaps the rail it replaces. The
   // scale's nearest step is 16px, which paints the bar at 1.5px and opens a
   // gap between the marker and the rail at every nesting level.
-  padding-inline-start: 0.875rem;
+  padding-inline-start: $indent;
 
   &__list {
     list-style: none;
@@ -32,7 +37,13 @@
 
     &--nested {
       margin-top: var(--wr-anchor-list-nested-margin-top);
-      padding-inline-start: 0.875rem;
+      padding-inline-start: $indent;
+
+      // A nested link sits one indent further from the rail, so its bar reaches
+      // back that much further to land on the rail rather than float beside it.
+      .wr-anchor__link::before {
+        inset-inline-start: calc(-1rem - #{$indent});
+      }
     }
   }
 

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/dot-grid.scss

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

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

@@ -0,0 +1,8 @@
+// Public Sass entry for `@use 'ngwr/bits/dot-grid'`.
+//
+// `dot-grid.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/dot-grid/styles/_rules.scss

@@ -0,0 +1,54 @@
+// Dot-grid background. The host fills its nearest positioned ancestor and the
+// dots are drawn on a 2D canvas. A canvas reads neither a `var()` nor a
+// `light-dark()`, so `dot-grid.ts` resolves both colour hooks through
+// `resolveCssColor` before it fills with them.
+
+.wr-dot-grid {
+  --wr-dot-grid-dot-color: var(--wr-border-strong);
+  --wr-dot-grid-active-color: var(--wr-color-primary);
+  // Mirror the `gap` and `dotSize` inputs; the component publishes both so the
+  // stand-in below lands on the canvas's own pitch.
+  --wr-dot-grid-gap: 24px;
+  --wr-dot-grid-dot-size: 3px;
+
+  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 grid, shown until the canvas has painted.
+  //
+  // A canvas cannot be prerendered, so on an SSR'd page the host is blank until
+  // the bundle has loaded and hydrated. These are the resting dots at the same
+  // colour, size and pitch, centred the way `placeDots()` centres the canvas grid,
+  // so the handover moves nothing.
+  background-image: radial-gradient(
+    circle,
+    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;
+  background-size: var(--wr-dot-grid-gap) var(--wr-dot-grid-gap);
+
+  &--painted {
+    background-image: none;
+  }
+
+  &__canvas {
+    display: block;
+    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/ripple-grid.scss

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

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

@@ -0,0 +1,8 @@
+// Public Sass entry for `@use 'ngwr/bits/ripple-grid'`.
+//
+// `ripple-grid.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/ripple-grid/styles/_rules.scss

@@ -0,0 +1,63 @@
+// Ripple-grid background. The host fills its nearest positioned ancestor and
+// the lines are drawn on a 2D canvas. A canvas reads neither a `var()` nor a
+// `light-dark()`, so `ripple-grid.ts` resolves both colour hooks through
+// `resolveCssColor` before it strokes with them.
+
+.wr-ripple-grid {
+  --wr-ripple-grid-line-color: var(--wr-border-base);
+  --wr-ripple-grid-ripple-color: var(--wr-color-primary);
+  // Mirror the `cellSize` and `lineWidth` inputs; the component publishes both
+  // so the stand-in below lands on the canvas's own lines.
+  --wr-ripple-grid-cell-size: 40px;
+  --wr-ripple-grid-line-width: 1px;
+
+  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 grid, shown until the canvas has painted.
+  //
+  // A canvas cannot be prerendered, so on an SSR'd page the host is blank until
+  // the bundle has loaded and hydrated. These are the resting lines at the same
+  // colour, width and cell. The tiles are centred, which puts a cell on the
+  // centre of the box the way `draw()` lays the canvas grid out, and moved back
+  // by half a line so each line sits centred on its position the way a stroke
+  // does. The canvas then moves each line by up to half a device pixel so its
+  // edges land on whole pixels, which is all the handover moves.
+  background-image:
+    linear-gradient(
+      to right,
+      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-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);
+  background-size: var(--wr-ripple-grid-cell-size) var(--wr-ripple-grid-cell-size);
+
+  &--painted {
+    background-image: none;
+  }
+
+  &__canvas {
+    display: block;
+    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/_index.scss

@@ -0,0 +1,8 @@
+// Public Sass entry for `@use 'ngwr/bits/threads'`.
+//
+// `threads.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/threads/styles/_rules.scss

@@ -0,0 +1,76 @@
+// Threads background. A 2D canvas fills the nearest positioned ancestor; the
+// colour is theme-aware via `--wr-threads-color` unless `[color]` overrides it.
+// A canvas cannot read a `light-dark()` or a `var()`, so `threads.ts` resolves
+// the colour through `resolveCssColor` before it strokes with it.
+
+.wr-threads {
+  // A soft wash of the primary intent. On the dark canvas the base reads too
+  // deep for a hairline to carry, so the dark side washes its `-lighter` shade.
+  --wr-threads-color: light-dark(
+    color-mix(in srgb, var(--wr-color-primary) 60%, transparent),
+    color-mix(in srgb, var(--wr-color-primary-lighter) 60%, transparent)
+  );
+  // Mirrors of the `lineCount`, `spread` and `lineWidth` inputs. The component
+  // publishes each on the host, so the stand-in below draws where the canvas will.
+  --wr-threads-count: 18;
+  --wr-threads-spread: 0.4;
+  --wr-threads-line-width: 1px;
+
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  // Stand-in threads, shown until the canvas has painted.
+  //
+  // A canvas cannot be prerendered, so on an SSR'd or prerendered page the
+  // element is blank until the bundle has loaded and hydrated. These are the
+  // threads at rest — straight, evenly spaced across the band at its widest, in
+  // the same colour and width — so the handover reads as the threads starting to
+  // move rather than as content appearing. The image is the band's height plus
+  // one stroke, so the last line lands on its lower edge rather than outside it,
+  // and the mask over the same box fades the outer lines the way the canvas
+  // fades its outer threads, from the full colour in the middle to 40% at the
+  // edges. On a pseudo-element rather than the host, so the mask cannot reach a
+  // background an app gives the host.
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: repeating-linear-gradient(
+      to bottom,
+      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))
+    );
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% calc(var(--wr-threads-spread) * 100% + var(--wr-threads-line-width));
+    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 40%), #000, rgb(0 0 0 / 40%));
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: 100% calc(var(--wr-threads-spread) * 100% + var(--wr-threads-line-width));
+  }
+
+  &--painted::before {
+    content: none;
+  }
+
+  &__canvas {
+    display: block;
+    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/threads/threads.scss

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

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;
+    }
+  }
+}