ngwr 12.1.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/alert/styles/_index.scss

@@ -18,7 +18,17 @@ $alert-colors: (
 
   // Defaults — overridden per variant below.
   --wr-alert-bg: var(--wr-color-info-soft);
-  --wr-alert-border: var(--wr-color-info-soft-border);
+  // `transparent`, not a `-soft-border` hairline: the tint alone carries the
+  // block, and the ring around it was a second edge saying the same thing.
+  //
+  // The hook itself stays, and is still what the border reads — it is public
+  // API, an app that wants a bordered alert sets `--wr-alert-border` and gets
+  // one back, per variant if it likes. Nor does the declaration go: a
+  // transparent 1px border still occupies its 1px, so a consumer switching the
+  // hook on does not reflow the block by a pixel on each side, and no variant's
+  // padding has to be re-derived. NO variant overrides this any more — an alert
+  // has one border value, and it is the one a consumer can reach.
+  --wr-alert-border: transparent;
   // `-ink`, never the bare intent: this is the intent used AS TEXT on its own
   // soft tint, and a bare `--wr-color-warning` there is 1.71:1 in the light
   // theme. See the token note in AGENTS.md — `-contrast` is the other
@@ -103,7 +113,6 @@ $alert-colors: (
   @each $variant, $color in $alert-colors {
     &--#{$variant} {
       --wr-alert-bg: var(--wr-color-#{$color}-soft);
-      --wr-alert-border: var(--wr-color-#{$color}-soft-border);
       --wr-alert-title: var(--wr-color-#{$color}-ink);
       --wr-alert-close: var(--wr-color-#{$color}-ink);
     }
@@ -112,7 +121,6 @@ $alert-colors: (
   // Neutral — muted gray chip, reusing the `medium` soft tokens.
   &--neutral {
     --wr-alert-bg: var(--wr-color-medium-soft);
-    --wr-alert-border: var(--wr-color-medium-soft-border);
     --wr-alert-title: var(--wr-color-on-surface);
     --wr-alert-message: var(--wr-color-on-surface-muted);
     --wr-alert-close: var(--wr-color-on-surface-muted);
@@ -126,7 +134,6 @@ $alert-colors: (
   // light text in light theme; light bg + dark text in dark theme.
   &--offline {
     --wr-alert-bg: var(--wr-color-on-surface);
-    --wr-alert-border: var(--wr-color-on-surface);
     --wr-alert-title: var(--wr-color-surface);
     --wr-alert-message: var(--wr-color-surface);
     --wr-alert-close: var(--wr-color-surface);

package/badge/styles/_index.scss

@@ -81,6 +81,31 @@
 
   // Outlined — transparent fill, colored border + text. The inset ring
   // replaces the solid background, so padding stays identical.
+  //
+  // The ring is deliberately NOT `currentcolor` once an intent is on the host.
+  // The label sits on `-ink`, which is calibrated to 5.0:1 and must not move —
+  // so a ring drawn in the text colour is a hairline at full label strength
+  // wrapped around text of exactly that strength, and the two cannot be
+  // separated while they share one value. `-soft-border` is the same intent at
+  // 0.3 alpha: the theme's canonical hairline, already per intent and already
+  // theme-correct through the `-rgb` channels. `wr-tag--outlined` draws the same
+  // ring from the same token; the tag keeps its 6% fill, because a tag is a
+  // chip you can click and a badge is a label you cannot.
+  //
+  // The soft trio covers the seven CHROMATIC intents, so `light` and `dark` have
+  // no `-soft-border` and the `var()` carries the token's own recipe as its
+  // fallback. That fallback is load-bearing twice over: an undefined custom
+  // property with no fallback invalidates the whole declaration, which would
+  // leave those two badges with no ring at all rather than a soft one — and
+  // 0.3 alpha is what keeps `dark` in the same family as the other eight
+  // instead of the only ring still drawn at full label strength, which is the
+  // weight this rule exists to stop drawing.
+  //
+  // `light` is the one intent the recipe cannot serve: it is a surface tone by
+  // definition, a hair off the page in either theme, so 30% of it over the page
+  // is nothing. At FULL strength it is `--wr-color-outline` — the hairline every
+  // bordered surface in the library already draws — so it is reached by that
+  // name, after the loop, rather than by an alpha that happens to land there.
   &--outlined {
     background-color: transparent;
     box-shadow: inset 0 0 0 1px currentcolor;
@@ -88,7 +113,12 @@
     @each $name in theme.$colors {
       &.wr-badge--#{$name} {
         color: var(--wr-color-#{$name}-ink);
+        box-shadow: inset 0 0 0 1px var(--wr-color-#{$name}-soft-border, rgba(var(--wr-color-#{$name}-rgb), 0.3));
       }
     }
+
+    &.wr-badge--light {
+      box-shadow: inset 0 0 0 1px var(--wr-color-outline);
+    }
   }
 }

package/badge/styles/_tag.scss

@@ -74,10 +74,17 @@
       --wr-tag-bg: var(--wr-color-#{$name});
       --wr-tag-border: var(--wr-color-#{$name});
 
+      // The ring reads from `-soft-border` rather than a hand-rolled alpha, so
+      // it is the same hairline `wr-badge--outlined` draws — one alpha in one
+      // place, which is the reason the soft trio exists. 0.25 -> 0.30 is the
+      // whole visual change here. The 6% fill stays, and that is the one place
+      // the two deliberately differ: a tag is a chip you can click, hover and
+      // dismiss, so it keeps a body the badge has none of. `light` and `dark`
+      // fall back exactly as the badge does — see the note there.
       &.wr-tag--outlined {
         --wr-tag-color: var(--wr-color-#{$name}-ink);
         --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.06);
-        --wr-tag-border: rgba(var(--wr-color-#{$name}-rgb), 0.25);
+        --wr-tag-border: var(--wr-color-#{$name}-soft-border, rgba(var(--wr-color-#{$name}-rgb), 0.3));
       }
 
       &.wr-tag--transparent {
@@ -87,4 +94,11 @@
       }
     }
   }
+
+  // `light` outlined, after the loop for the same reason the badge carries the
+  // same rule: 30% of a surface tone is not a line. At full strength it IS
+  // `--wr-color-outline`, which is already this component's default border.
+  &--light.wr-tag--outlined {
+    --wr-tag-border: var(--wr-color-outline);
+  }
 }

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';