ngwr 12.2.0 → 13.0.0

package/README.md

@@ -162,6 +162,16 @@ Opt-in utilities (not part of `@use 'ngwr'`):
 `ngwr/typography-utilities` is the utility-class sheet — not `ngwr/typography`,
 which is the larger `wrTypography` component entry.
 
+### What you may style, and what may move
+
+Components render with `ViewEncapsulation.None`, so their `.wr-*` BEM classes and
+their `--wr-*` custom properties are reachable — and both are treated as public
+API: renaming one is a breaking change carrying a migration note. The DOM *shape*
+is not. Which element holds which class, how deeply they nest, whether a wrapper
+exists — all of that may move in a minor. A rule keyed on one class survives; a
+descendant selector that encodes a structure (`.wr-select__trigger > span > svg`)
+does not. See [Theming](https://ngwr.dev/guides/theming) for the full statement.
+
 ## Quick start
 
 ```ts
@@ -260,7 +270,7 @@ Plus [icon](https://ngwr.dev/reference/components/icon), the experimental [squir
 
 ### Animations
 
-Animated UI effects. Mix of in-house components + ports of [reactbits.dev](https://www.reactbits.dev) — each port carries a credit chip on its docs page. Defaults are theme-aware (light + dark), and every component honors `prefers-reduced-motion` — the one exception is `spotlight-card`, whose highlight only tracks the pointer.
+Animated UI effects. Mix of in-house components + ports of [reactbits.dev](https://www.reactbits.dev) — each port carries a credit chip on its docs page. Defaults are theme-aware (light + dark), and every component in **this section** honors `prefers-reduced-motion` — the one exception is `spotlight-card`, whose highlight only tracks the pointer. The scope of that sentence is the thing to read carefully: it says nothing about the rest of the catalog, and until v13 it was inviting a reader to over-generalise. The always-on chrome — the spinner and skeleton that animate on essentially every page, plus the enter animations on dialog, drawer, dropdown, popconfirm, toast, lightbox and the responsive bottom sheet — had no guard at all. It has one now, in the theme layer (`theme/styles/_motion.scss`) rather than per component, so the set is reviewable in one place.
 
 [aurora](https://ngwr.dev/animations/aurora), [blur-text](https://ngwr.dev/animations/blur-text), [border-glow](https://ngwr.dev/animations/border-glow), [circular-text](https://ngwr.dev/animations/circular-text), [click-spark](https://ngwr.dev/animations/click-spark), [confetti](https://ngwr.dev/animations/confetti), [decrypt-text](https://ngwr.dev/animations/decrypt-text), [falling-text](https://ngwr.dev/animations/falling-text), [fuzzy-text](https://ngwr.dev/animations/fuzzy-text), [glitch-text](https://ngwr.dev/animations/glitch-text), [gradient-text](https://ngwr.dev/animations/gradient-text), [marquee](https://ngwr.dev/animations/marquee), [rotating-text](https://ngwr.dev/animations/rotating-text), [shiny-text](https://ngwr.dev/animations/shiny-text), [splash-cursor](https://ngwr.dev/animations/splash-cursor), [split-text](https://ngwr.dev/animations/split-text), [spotlight-card](https://ngwr.dev/animations/spotlight-card), [star-border](https://ngwr.dev/animations/star-border), [tilt-card](https://ngwr.dev/animations/tilt-card), [typewriter](https://ngwr.dev/animations/typewriter), [waves](https://ngwr.dev/animations/waves).
 

package/border-glow/border-glow.scss

@@ -1,4 +1,4 @@
 // Component-scoped, but the lib uses `ViewEncapsulation.None` everywhere so
 // the selector starts with `.wr-border-glow` — the same as the umbrella
 // stylesheet entry. Importing the lib styles or just this file works.
-@forward './styles';
+@forward './styles/rules';

package/border-glow/styles/_index.scss

@@ -1,233 +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;
-
-// Cursor-tracked border glow — ports the reactbits.dev BorderGlow effect.
-// All visual state is driven by two custom properties the component writes:
-//   --wr-border-glow-edge-proximity   0..100, scales with pointer-to-edge distance
-//   --wr-border-glow-angle     0deg..360deg, pointer-from-centre angle
-// Plus a colour/geometry bag set once from inputs (see border-glow.ts).
-
-.wr-border-glow {
-  --wr-border-glow-edge-proximity: 0;
-  --wr-border-glow-angle: 45deg;
-  // Theme-default halo (overridden inline when `[glowColor]` is set):
-  // deep amber that reads on white. Dark theme swaps to the pale pastel.
-  --wr-border-glow-color: hsl(40deg 90% 45% / 100%);
-  --wr-border-glow-color-60: hsl(40deg 90% 45% / 60%);
-  --wr-border-glow-color-50: hsl(40deg 90% 45% / 50%);
-  --wr-border-glow-color-40: hsl(40deg 90% 45% / 40%);
-  --wr-border-glow-color-30: hsl(40deg 90% 45% / 30%);
-  --wr-border-glow-color-20: hsl(40deg 90% 45% / 20%);
-  --wr-border-glow-color-10: hsl(40deg 90% 45% / 10%);
-  // Theme-default mesh palette (overridden inline when `[colors]` is set):
-  // deep tones that read on white. Dark theme restores the pastels below.
-  --wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 80% 50%) 0px, transparent 50%);
-  --wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 85% 52%) 0px, transparent 50%);
-  --wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 70% 38%) 0px, transparent 50%);
-  --wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 90% 40%) 0px, transparent 50%);
-  --wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 90% 38%) 0px, transparent 50%);
-  --wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(40deg 95% 45%) 0px, transparent 50%);
-  --wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 90% 50%) 0px, transparent 50%);
-  --wr-border-glow-gradient-base: linear-gradient(hsl(262deg 70% 50%) 0 100%);
-  --wr-border-glow-edge-sensitivity: 30;
-  --wr-border-glow-color-sensitivity: calc(var(--wr-border-glow-edge-sensitivity) + 20);
-  --wr-border-glow-radius: 28px;
-  --wr-border-glow-padding: 40px;
-  --wr-border-glow-cone-spread: 25;
-
-  position: relative;
-  display: grid;
-  border-radius: var(--wr-border-glow-radius);
-  background: var(--wr-border-glow-bg, var(--wr-color-surface, #fff));
-  overflow: visible;
-  isolation: isolate;
-  transform: translate3d(0, 0, 0.01px); // create a new layer to keep blends tidy
-  // The faint static outline uses `box-shadow inset` instead of `border:` —
-  // CSS borders + `border-radius` leave 1px subpixel notches at the corners
-  // where the mask layers meet the curve, but inset shadows hug the radius
-  // pixel-perfect.
-  box-shadow: inset 0 0 0 1px var(--wr-border-glow-outline, var(--wr-color-outline, rgb(255 255 255 / 15%)));
-
-  &::before,
-  &::after,
-  & > .wr-border-glow__edge {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    transition: opacity 0.25s ease-out;
-    z-index: -1;
-  }
-
-  // Hide the glow layers when the cursor isn't engaged AND the one-shot
-  // sweep isn't running.
-  &:not(:hover):not(.wr-border-glow--sweeping) {
-    &::before,
-    &::after,
-    & > .wr-border-glow__edge {
-      opacity: 0;
-      transition: opacity 0.75s ease-in-out;
-    }
-  }
-
-  // Coloured mesh-gradient slice of the border (the visible "cone" along
-  // the perimeter under the cursor).
-  &::before {
-    border: 1px solid transparent;
-    background:
-      linear-gradient(var(--wr-border-glow-bg, var(--wr-color-surface, #fff)) 0 100%) padding-box,
-      linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
-      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
-        border-box,
-      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) border-box;
-
-    opacity: calc(
-      (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
-        (100 - var(--wr-border-glow-color-sensitivity))
-    );
-
-    mask-image: conic-gradient(
-      from var(--wr-border-glow-angle) at center,
-      black calc(var(--wr-border-glow-cone-spread) * 1%),
-      transparent calc((var(--wr-border-glow-cone-spread) + 15) * 1%),
-      transparent calc((100 - var(--wr-border-glow-cone-spread) - 15) * 1%),
-      black calc((100 - var(--wr-border-glow-cone-spread)) * 1%)
-    );
-  }
-
-  // Soft interior bloom — same mesh, blended with the card content.
-  &::after {
-    border: 1px solid transparent;
-    background:
-      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
-        padding-box,
-      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;
-
-    mask-image:
-      linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
-      radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
-      radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
-      radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
-      radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
-      conic-gradient(from var(--wr-border-glow-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
-    mask-composite: subtract, add, add, add, add, add;
-
-    // `--wr-border-glow-fill-scale` keeps the interior bloom subtle on
-    // light surfaces — at full strength the multiply wash darkens the
-    // whole card and the cone's surface wedge shows against it.
-    opacity: calc(
-      var(--wr-border-glow-fill-opacity, 0.5) * var(--wr-border-glow-fill-scale, 0.25) *
-        (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
-        (100 - var(--wr-border-glow-color-sensitivity))
-    );
-    mix-blend-mode: var(--wr-border-glow-fill-blend, multiply);
-  }
-
-  // Outer halo — stacked box-shadows on a separate child so we can mask
-  // the shadows to the cone without affecting the host's content.
-  & > .wr-border-glow__edge {
-    inset: calc(var(--wr-border-glow-padding) * -1);
-    pointer-events: none;
-    z-index: 1;
-
-    mask-image: conic-gradient(
-      from var(--wr-border-glow-angle) at center,
-      black 2.5%,
-      transparent 10%,
-      transparent 90%,
-      black 97.5%
-    );
-    opacity: calc(
-      (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-edge-sensitivity)) /
-        (100 - var(--wr-border-glow-edge-sensitivity))
-    );
-    // `plus-lighter` saturates to white on a light page — light theme
-    // paints the halo as plain colored shadows instead (see block below).
-    mix-blend-mode: var(--wr-border-glow-halo-blend, normal);
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: var(--wr-border-glow-padding);
-      border-radius: inherit;
-      // Light theme keeps only the outward halo — the inset half washes
-      // amber over the card interior without additive blending. Dark
-      // restores the full reactbits stack (see block below).
-      box-shadow: var(
-        --wr-border-glow-edge-shadow,
-        inset 0 0 0 1px var(--wr-border-glow-color, hsl(40deg 80% 80% / 100%)),
-        0 0 1px 0 var(--wr-border-glow-color-60, hsl(40deg 80% 80% / 60%)),
-        0 0 3px 0 var(--wr-border-glow-color-50, hsl(40deg 80% 80% / 50%)),
-        0 0 6px 0 var(--wr-border-glow-color-40, hsl(40deg 80% 80% / 40%)),
-        0 0 15px 0 var(--wr-border-glow-color-30, hsl(40deg 80% 80% / 30%)),
-        0 0 25px 2px var(--wr-border-glow-color-20, hsl(40deg 80% 80% / 20%)),
-        0 0 50px 2px var(--wr-border-glow-color-10, hsl(40deg 80% 80% / 10%))
-      );
-    }
-  }
-
-  &__inner {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-// Dark theme: restore the reactbits look — pale halo + additive blends.
-[data-theme='dark'] .wr-border-glow {
-  --wr-border-glow-outline: rgb(255 255 255 / 15%);
-  --wr-border-glow-halo-blend: plus-lighter;
-  --wr-border-glow-fill-blend: soft-light;
-  --wr-border-glow-fill-scale: 1;
-  /* stylelint-disable-next-line */
-  --wr-border-glow-edge-shadow:
-    inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60),
-    inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40),
-    inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20),
-    inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60),
-    0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40),
-    0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20),
-    0 0 50px 2px var(--wr-border-glow-color-10);
-  --wr-border-glow-color: hsl(40deg 80% 80% / 100%);
-  --wr-border-glow-color-60: hsl(40deg 80% 80% / 60%);
-  --wr-border-glow-color-50: hsl(40deg 80% 80% / 50%);
-  --wr-border-glow-color-40: hsl(40deg 80% 80% / 40%);
-  --wr-border-glow-color-30: hsl(40deg 80% 80% / 30%);
-  --wr-border-glow-color-20: hsl(40deg 80% 80% / 20%);
-  --wr-border-glow-color-10: hsl(40deg 80% 80% / 10%);
-  --wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%);
-  --wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%);
-  --wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%);
-  --wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%);
-  --wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%);
-  --wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%);
-  --wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%);
-  --wr-border-glow-gradient-base: linear-gradient(#c299ff 0 100%);
-}
+// Public Sass entry for `@use 'ngwr/border-glow'`.
+//
+// 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.
+// `border-glow.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. `border-glow.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/border-glow/styles/_rules.scss

@@ -0,0 +1,228 @@
+// Cursor-tracked border glow — ports the reactbits.dev BorderGlow effect.
+// All visual state is driven by two custom properties the component writes:
+//   --wr-border-glow-edge-proximity   0..100, scales with pointer-to-edge distance
+//   --wr-border-glow-angle     0deg..360deg, pointer-from-centre angle
+// Plus a colour/geometry bag set once from inputs (see border-glow.ts).
+
+.wr-border-glow {
+  --wr-border-glow-edge-proximity: 0;
+  --wr-border-glow-angle: 45deg;
+  // Theme-default halo (overridden inline when `[glowColor]` is set):
+  // deep amber that reads on white. Dark theme swaps to the pale pastel.
+  --wr-border-glow-color: hsl(40deg 90% 45% / 100%);
+  --wr-border-glow-color-60: hsl(40deg 90% 45% / 60%);
+  --wr-border-glow-color-50: hsl(40deg 90% 45% / 50%);
+  --wr-border-glow-color-40: hsl(40deg 90% 45% / 40%);
+  --wr-border-glow-color-30: hsl(40deg 90% 45% / 30%);
+  --wr-border-glow-color-20: hsl(40deg 90% 45% / 20%);
+  --wr-border-glow-color-10: hsl(40deg 90% 45% / 10%);
+  // Theme-default mesh palette (overridden inline when `[colors]` is set):
+  // deep tones that read on white. Dark theme restores the pastels below.
+  --wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 80% 50%) 0px, transparent 50%);
+  --wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 85% 52%) 0px, transparent 50%);
+  --wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 70% 38%) 0px, transparent 50%);
+  --wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 90% 40%) 0px, transparent 50%);
+  --wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 90% 38%) 0px, transparent 50%);
+  --wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(40deg 95% 45%) 0px, transparent 50%);
+  --wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 90% 50%) 0px, transparent 50%);
+  --wr-border-glow-gradient-base: linear-gradient(hsl(262deg 70% 50%) 0 100%);
+  --wr-border-glow-edge-sensitivity: 30;
+  --wr-border-glow-color-sensitivity: calc(var(--wr-border-glow-edge-sensitivity) + 20);
+  --wr-border-glow-radius: 28px;
+  --wr-border-glow-padding: 40px;
+  --wr-border-glow-cone-spread: 25;
+
+  position: relative;
+  display: grid;
+  border-radius: var(--wr-border-glow-radius);
+  background: var(--wr-border-glow-bg, var(--wr-color-surface, #fff));
+  overflow: visible;
+  isolation: isolate;
+  transform: translate3d(0, 0, 0.01px); // create a new layer to keep blends tidy
+  // The faint static outline uses `box-shadow inset` instead of `border:` —
+  // CSS borders + `border-radius` leave 1px subpixel notches at the corners
+  // where the mask layers meet the curve, but inset shadows hug the radius
+  // pixel-perfect.
+  box-shadow: inset 0 0 0 1px var(--wr-border-glow-outline, var(--wr-color-outline, rgb(255 255 255 / 15%)));
+
+  &::before,
+  &::after,
+  & > .wr-border-glow__edge {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transition: opacity 0.25s ease-out;
+    z-index: -1;
+  }
+
+  // Hide the glow layers when the cursor isn't engaged AND the one-shot
+  // sweep isn't running.
+  &:not(:hover):not(.wr-border-glow--sweeping) {
+    &::before,
+    &::after,
+    & > .wr-border-glow__edge {
+      opacity: 0;
+      transition: opacity 0.75s ease-in-out;
+    }
+  }
+
+  // Coloured mesh-gradient slice of the border (the visible "cone" along
+  // the perimeter under the cursor).
+  &::before {
+    border: 1px solid transparent;
+    background:
+      linear-gradient(var(--wr-border-glow-bg, var(--wr-color-surface, #fff)) 0 100%) padding-box,
+      linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
+      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) border-box;
+
+    opacity: calc(
+      (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
+        (100 - var(--wr-border-glow-color-sensitivity))
+    );
+
+    mask-image: conic-gradient(
+      from var(--wr-border-glow-angle) at center,
+      black calc(var(--wr-border-glow-cone-spread) * 1%),
+      transparent calc((var(--wr-border-glow-cone-spread) + 15) * 1%),
+      transparent calc((100 - var(--wr-border-glow-cone-spread) - 15) * 1%),
+      black calc((100 - var(--wr-border-glow-cone-spread)) * 1%)
+    );
+  }
+
+  // Soft interior bloom — same mesh, blended with the card content.
+  &::after {
+    border: 1px solid transparent;
+    background:
+      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;
+
+    mask-image:
+      linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
+      radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
+      radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
+      radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
+      radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
+      conic-gradient(from var(--wr-border-glow-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
+    mask-composite: subtract, add, add, add, add, add;
+
+    // `--wr-border-glow-fill-scale` keeps the interior bloom subtle on
+    // light surfaces — at full strength the multiply wash darkens the
+    // whole card and the cone's surface wedge shows against it.
+    opacity: calc(
+      var(--wr-border-glow-fill-opacity, 0.5) * var(--wr-border-glow-fill-scale, 0.25) *
+        (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
+        (100 - var(--wr-border-glow-color-sensitivity))
+    );
+    mix-blend-mode: var(--wr-border-glow-fill-blend, multiply);
+  }
+
+  // Outer halo — stacked box-shadows on a separate child so we can mask
+  // the shadows to the cone without affecting the host's content.
+  & > .wr-border-glow__edge {
+    inset: calc(var(--wr-border-glow-padding) * -1);
+    pointer-events: none;
+    z-index: 1;
+
+    mask-image: conic-gradient(
+      from var(--wr-border-glow-angle) at center,
+      black 2.5%,
+      transparent 10%,
+      transparent 90%,
+      black 97.5%
+    );
+    opacity: calc(
+      (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-edge-sensitivity)) /
+        (100 - var(--wr-border-glow-edge-sensitivity))
+    );
+    // `plus-lighter` saturates to white on a light page — light theme
+    // paints the halo as plain colored shadows instead (see block below).
+    mix-blend-mode: var(--wr-border-glow-halo-blend, normal);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: var(--wr-border-glow-padding);
+      border-radius: inherit;
+      // Light theme keeps only the outward halo — the inset half washes
+      // amber over the card interior without additive blending. Dark
+      // restores the full reactbits stack (see block below).
+      box-shadow: var(
+        --wr-border-glow-edge-shadow,
+        inset 0 0 0 1px var(--wr-border-glow-color, hsl(40deg 80% 80% / 100%)),
+        0 0 1px 0 var(--wr-border-glow-color-60, hsl(40deg 80% 80% / 60%)),
+        0 0 3px 0 var(--wr-border-glow-color-50, hsl(40deg 80% 80% / 50%)),
+        0 0 6px 0 var(--wr-border-glow-color-40, hsl(40deg 80% 80% / 40%)),
+        0 0 15px 0 var(--wr-border-glow-color-30, hsl(40deg 80% 80% / 30%)),
+        0 0 25px 2px var(--wr-border-glow-color-20, hsl(40deg 80% 80% / 20%)),
+        0 0 50px 2px var(--wr-border-glow-color-10, hsl(40deg 80% 80% / 10%))
+      );
+    }
+  }
+
+  &__inner {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// Dark theme: restore the reactbits look — pale halo + additive blends.
+[data-theme='dark'] .wr-border-glow {
+  --wr-border-glow-outline: rgb(255 255 255 / 15%);
+  --wr-border-glow-halo-blend: plus-lighter;
+  --wr-border-glow-fill-blend: soft-light;
+  --wr-border-glow-fill-scale: 1;
+  /* stylelint-disable-next-line */
+  --wr-border-glow-edge-shadow:
+    inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60),
+    inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40),
+    inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20),
+    inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60),
+    0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40),
+    0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20),
+    0 0 50px 2px var(--wr-border-glow-color-10);
+  --wr-border-glow-color: hsl(40deg 80% 80% / 100%);
+  --wr-border-glow-color-60: hsl(40deg 80% 80% / 60%);
+  --wr-border-glow-color-50: hsl(40deg 80% 80% / 50%);
+  --wr-border-glow-color-40: hsl(40deg 80% 80% / 40%);
+  --wr-border-glow-color-30: hsl(40deg 80% 80% / 30%);
+  --wr-border-glow-color-20: hsl(40deg 80% 80% / 20%);
+  --wr-border-glow-color-10: hsl(40deg 80% 80% / 10%);
+  --wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%);
+  --wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%);
+  --wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%);
+  --wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%);
+  --wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%);
+  --wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%);
+  --wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%);
+  --wr-border-glow-gradient-base: linear-gradient(#c299ff 0 100%);
+}

package/breadcrumbs/breadcrumbs.scss

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

package/breadcrumbs/styles/_index.scss

@@ -1,78 +1,15 @@
-// Breadcrumbs. The separator glyph comes from `--wr-breadcrumbs-separator`
-// (set by the component from the `[separator]` input). All items except
-// the first prepend the glyph via a `::before` pseudo-element.
-
-@use '../../theme/styles' as theme;
-
-.wr-breadcrumbs {
-  --wr-breadcrumbs-separator: '/';
-  --wr-breadcrumbs-gap: 0.5rem;
-  --wr-breadcrumbs-color: rgba(var(--wr-color-on-surface-rgb), 0.6);
-  --wr-breadcrumbs-current-color: var(--wr-color-on-surface);
-  --wr-breadcrumbs-link-color: var(--wr-color-primary-ink);
-  --wr-breadcrumbs-separator-color: rgba(var(--wr-color-on-surface-rgb), 0.3);
-
-  display: block;
-  font-family: var(--wr-font-family-base);
-  font-size: var(--wr-text-sm);
-  color: var(--wr-breadcrumbs-color);
-
-  &__nav {
-    display: block;
-  }
-
-  &__list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--wr-breadcrumbs-gap);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  &__item {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--wr-breadcrumbs-gap);
-
-    // Separator before every item except the first.
-    &:not(:first-child)::before {
-      content: var(--wr-breadcrumbs-separator);
-      color: var(--wr-breadcrumbs-separator-color);
-      user-select: none;
-    }
-  }
-
-  &__link {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    color: var(--wr-breadcrumbs-link-color);
-    text-decoration: none;
-    border-radius: var(--wr-border-radius-sm);
-    transition: color 0.15s ease;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &:focus-visible {
-      @include theme.focus-ring;
-      outline-offset: 2px;
-    }
-  }
-
-  &__current {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    color: var(--wr-breadcrumbs-current-color);
-    font-weight: 600;
-  }
-
-  &__icon {
-    --wr-icon-size: 1rem;
-    flex: 0 0 auto;
-  }
-}
+// Public Sass entry for `@use 'ngwr/breadcrumbs'`.
+//
+// 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.
+// `breadcrumbs.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. `breadcrumbs.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';