ngwr 12.1.0 → 13.0.0

package/virtual-scroll/styles/_rules.scss

@@ -0,0 +1,27 @@
+// Fixed-size virtual scroll wrapper. Most of the layout work is done by
+// CDK's `<cdk-virtual-scroll-viewport>`; this stylesheet just makes the
+// host a block-level container and tames default overflow behaviour.
+
+.wr-virtual-scroll {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+
+  &__viewport {
+    width: 100%;
+    height: 100%;
+    // CDK already sets `overflow: auto`; just add a discreet scrollbar
+    // skin via the platform defaults — a discreet custom thumb that still matches the
+    // host application's chrome.
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 0.5rem;
+      height: 0.5rem;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(var(--wr-color-on-surface-rgb), 0.2);
+      border-radius: 999px;
+    }
+  }
+}

package/virtual-scroll/virtual-scroll.scss

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

package/waves/styles/_index.scss

@@ -1,50 +1,15 @@
-// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
-// design token this stylesheet references. Sass deduplicates `@use` per
-// compilation, so the umbrella sheet still emits the theme only once.
-@use '../../theme/styles' as theme;
-
-// Wave-field background (reactbits port). The host fills its nearest
-// positioned ancestor; the line colour is theme-aware via
-// `--wr-waves-line-color` unless `[lineColor]` overrides it.
-
-.wr-waves {
-  --wr-waves-line-color: rgba(var(--wr-color-on-surface-rgb), 0.12);
-  // Mirrors the `xGap` input; the component publishes it so the stand-in below
-  // lands on the same pitch as the real grid.
-  --wr-waves-x-gap: 10px;
-
-  position: absolute;
-  inset: 0;
-  display: block;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-
-  // Stand-in grid, shown until the canvas has painted.
-  //
-  // A canvas cannot be prerendered, so on an SSR'd or prerendered page this
-  // element is blank until the JS bundle has loaded and hydrated — measured at
-  // ~2.8s on ngwr.dev's own home page, where it reads as the background hanging
-  // and then popping in. These are straight lines rather than the drifting
-  // curves, at the same colour and pitch, so the handover reads as the grid
-  // coming alive rather than as content appearing.
-  background-image: repeating-linear-gradient(
-    to right,
-    var(--wr-waves-line-color) 0 1px,
-    transparent 1px var(--wr-waves-x-gap)
-  );
-
-  &--painted {
-    background-image: none;
-  }
-
-  &__canvas {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-[data-theme='dark'] .wr-waves {
-  --wr-waves-line-color: rgb(255 255 255 / 14%);
-}
+// Public Sass entry for `@use 'ngwr/waves'`.
+//
+// Pulls the whole theme so a standalone import still brings in every design
+// token these rules reference, then loads the rules themselves from `_rules`.
+//
+// The split is what keeps the token layer out of the JavaScript bundle.
+// `waves.scss` is the component's `styleUrl`, and a component stylesheet is
+// its OWN Sass compilation — `@use` only deduplicates within one. So while the
+// umbrella sheet emits the theme once, forwarding it from here would inline a
+// second, byte-identical copy of `:root`, `[data-theme='dark']` and the
+// box-sizing reset into the compiled component styles, which ng-packagr then
+// embeds in the FESM bundle as a string. `waves.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/waves/styles/_rules.scss

@@ -0,0 +1,45 @@
+// Wave-field background (reactbits port). The host fills its nearest
+// positioned ancestor; the line colour is theme-aware via
+// `--wr-waves-line-color` unless `[lineColor]` overrides it.
+
+.wr-waves {
+  --wr-waves-line-color: rgba(var(--wr-color-on-surface-rgb), 0.12);
+  // Mirrors the `xGap` input; the component publishes it so the stand-in below
+  // lands on the same pitch as the real grid.
+  --wr-waves-x-gap: 10px;
+
+  position: absolute;
+  inset: 0;
+  display: block;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  // Stand-in grid, shown until the canvas has painted.
+  //
+  // A canvas cannot be prerendered, so on an SSR'd or prerendered page this
+  // element is blank until the JS bundle has loaded and hydrated — measured at
+  // ~2.8s on ngwr.dev's own home page, where it reads as the background hanging
+  // and then popping in. These are straight lines rather than the drifting
+  // curves, at the same colour and pitch, so the handover reads as the grid
+  // coming alive rather than as content appearing.
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--wr-waves-line-color) 0 1px,
+    transparent 1px var(--wr-waves-x-gap)
+  );
+
+  &--painted {
+    background-image: none;
+  }
+
+  &__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+[data-theme='dark'] .wr-waves {
+  --wr-waves-line-color: rgb(255 255 255 / 14%);
+}

package/waves/waves.scss

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