ngwr 15.0.0 → 15.1.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/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,46 @@
+// 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-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%;
+  }
+}

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,55 @@
+// 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-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),
+      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%;
+  }
+}

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,68 @@
+// 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-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%;
+  }
+}

package/bits/threads/threads.scss

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