ngwr 15.3.0 → 15.5.0

package/bits/border-glow/styles/_rules.scss

@@ -2,12 +2,37 @@
 // 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).
+// Plus a colour/geometry bag set once from inputs (see border-glow.ts). The three
+// colour inputs write an `--wr-border-glow-input-*` twin of the hook they stand
+// in for, never the hook itself, and every read below prefers the twin.
 
 .wr-border-glow {
   --wr-border-glow-edge-proximity: 0;
   --wr-border-glow-angle: 45deg;
-  // Theme-default halo (overridden inline when `[glowColor]` is set): a deep
+  // The card fill: the theme surface, unless an app sets this or `[backgroundColor]`.
+  --wr-border-glow-bg: var(--wr-color-surface);
+  // What `[backgroundColor]`, `[glowColor]` and `[colors]` write on the host, which
+  // the inline value beats. Unset here so a card projected inside another one does
+  // not inherit the outer card's inputs — and twins rather than the hooks' own
+  // names, so a `--wr-border-glow-bg` an author set on the host stays there and is
+  // read again the moment the input is unset.
+  --wr-border-glow-input-bg: initial;
+  --wr-border-glow-input-color: initial;
+  --wr-border-glow-input-color-60: initial;
+  --wr-border-glow-input-color-50: initial;
+  --wr-border-glow-input-color-40: initial;
+  --wr-border-glow-input-color-30: initial;
+  --wr-border-glow-input-color-20: initial;
+  --wr-border-glow-input-color-10: initial;
+  --wr-border-glow-input-gradient-one: initial;
+  --wr-border-glow-input-gradient-two: initial;
+  --wr-border-glow-input-gradient-three: initial;
+  --wr-border-glow-input-gradient-four: initial;
+  --wr-border-glow-input-gradient-five: initial;
+  --wr-border-glow-input-gradient-six: initial;
+  --wr-border-glow-input-gradient-seven: initial;
+  --wr-border-glow-input-gradient-base: initial;
+  // Theme-default halo (`[glowColor]` writes the `-input-` twins beside it): a deep
   // amber that reads on white, the pale pastel on dark.
   --wr-border-glow-color: light-dark(hsl(40deg 90% 45% / 100%), hsl(40deg 80% 80% / 100%));
   --wr-border-glow-color-60: light-dark(hsl(40deg 90% 45% / 60%), hsl(40deg 80% 80% / 60%));
@@ -16,8 +41,8 @@
   --wr-border-glow-color-30: light-dark(hsl(40deg 90% 45% / 30%), hsl(40deg 80% 80% / 30%));
   --wr-border-glow-color-20: light-dark(hsl(40deg 90% 45% / 20%), hsl(40deg 80% 80% / 20%));
   --wr-border-glow-color-10: light-dark(hsl(40deg 90% 45% / 10%), hsl(40deg 80% 80% / 10%));
-  // Theme-default mesh palette (overridden inline when `[colors]` is set): deep
-  // tones that read on white, the reactbits pastels on dark. The geometry is
+  // Theme-default mesh palette (`[colors]` writes the `-input-` twins beside it):
+  // deep tones that read on white, the reactbits pastels on dark. The geometry is
   // the same in both schemes, so only the one colour stop of each layer moves.
   --wr-border-glow-gradient-one: radial-gradient(
     at 80% 55%,
@@ -63,19 +88,19 @@
   // so an inline `[glowColor]` reaches every layer of it.
   /* stylelint-disable-next-line */
   --wr-border-glow-edge-shadow:
-    inset 0 0 0 1px var(--wr-border-glow-color),
-    inset 0 0 1px 0 light-dark(transparent, var(--wr-border-glow-color-60)),
-    inset 0 0 3px 0 light-dark(transparent, var(--wr-border-glow-color-50)),
-    inset 0 0 6px 0 light-dark(transparent, var(--wr-border-glow-color-40)),
-    inset 0 0 15px 0 light-dark(transparent, var(--wr-border-glow-color-30)),
-    inset 0 0 25px 2px light-dark(transparent, var(--wr-border-glow-color-20)),
-    inset 0 0 50px 2px light-dark(transparent, 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);
+    inset 0 0 0 1px var(--wr-border-glow-input-color, var(--wr-border-glow-color)),
+    inset 0 0 1px 0 light-dark(transparent, var(--wr-border-glow-input-color-60, var(--wr-border-glow-color-60))),
+    inset 0 0 3px 0 light-dark(transparent, var(--wr-border-glow-input-color-50, var(--wr-border-glow-color-50))),
+    inset 0 0 6px 0 light-dark(transparent, var(--wr-border-glow-input-color-40, var(--wr-border-glow-color-40))),
+    inset 0 0 15px 0 light-dark(transparent, var(--wr-border-glow-input-color-30, var(--wr-border-glow-color-30))),
+    inset 0 0 25px 2px light-dark(transparent, var(--wr-border-glow-input-color-20, var(--wr-border-glow-color-20))),
+    inset 0 0 50px 2px light-dark(transparent, var(--wr-border-glow-input-color-10, var(--wr-border-glow-color-10))),
+    0 0 1px 0 var(--wr-border-glow-input-color-60, var(--wr-border-glow-color-60)),
+    0 0 3px 0 var(--wr-border-glow-input-color-50, var(--wr-border-glow-color-50)),
+    0 0 6px 0 var(--wr-border-glow-input-color-40, var(--wr-border-glow-color-40)),
+    0 0 15px 0 var(--wr-border-glow-input-color-30, var(--wr-border-glow-color-30)),
+    0 0 25px 2px var(--wr-border-glow-input-color-20, var(--wr-border-glow-color-20)),
+    0 0 50px 2px var(--wr-border-glow-input-color-10, var(--wr-border-glow-color-10));
   // Blend modes and a strength are not colours, so `light-dark()` cannot switch
   // them, and each value below is the one that holds up in both schemes. The
   // additive look dark used — `plus-lighter` on the halo, `soft-light` on the
@@ -100,7 +125,7 @@
   position: relative;
   display: grid;
   border-radius: var(--wr-border-glow-radius);
-  background: var(--wr-border-glow-bg, var(--wr-color-surface, #fff));
+  background: var(--wr-border-glow-input-bg, var(--wr-border-glow-bg));
   overflow: visible;
   isolation: isolate;
   transform: translate3d(0, 0, 0.01px); // create a new layer to keep blends tidy
@@ -137,23 +162,16 @@
   &::before {
     border: 1px solid transparent;
     background:
-      linear-gradient(var(--wr-border-glow-bg, var(--wr-color-surface, #fff)) 0 100%) padding-box,
+      linear-gradient(var(--wr-border-glow-input-bg, var(--wr-border-glow-bg)) 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;
+      var(--wr-border-glow-input-gradient-one, var(--wr-border-glow-gradient-one)) border-box,
+      var(--wr-border-glow-input-gradient-two, var(--wr-border-glow-gradient-two)) border-box,
+      var(--wr-border-glow-input-gradient-three, var(--wr-border-glow-gradient-three)) border-box,
+      var(--wr-border-glow-input-gradient-four, var(--wr-border-glow-gradient-four)) border-box,
+      var(--wr-border-glow-input-gradient-five, var(--wr-border-glow-gradient-five)) border-box,
+      var(--wr-border-glow-input-gradient-six, var(--wr-border-glow-gradient-six)) border-box,
+      var(--wr-border-glow-input-gradient-seven, var(--wr-border-glow-gradient-seven)) border-box,
+      var(--wr-border-glow-input-gradient-base, var(--wr-border-glow-gradient-base)) border-box;
 
     opacity: calc(
       (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
@@ -173,21 +191,14 @@
   &::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;
+      var(--wr-border-glow-input-gradient-one, var(--wr-border-glow-gradient-one)) padding-box,
+      var(--wr-border-glow-input-gradient-two, var(--wr-border-glow-gradient-two)) padding-box,
+      var(--wr-border-glow-input-gradient-three, var(--wr-border-glow-gradient-three)) padding-box,
+      var(--wr-border-glow-input-gradient-four, var(--wr-border-glow-gradient-four)) padding-box,
+      var(--wr-border-glow-input-gradient-five, var(--wr-border-glow-gradient-five)) padding-box,
+      var(--wr-border-glow-input-gradient-six, var(--wr-border-glow-gradient-six)) padding-box,
+      var(--wr-border-glow-input-gradient-seven, var(--wr-border-glow-gradient-seven)) padding-box,
+      var(--wr-border-glow-input-gradient-base, var(--wr-border-glow-gradient-base)) padding-box;
 
     mask-image:
       linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),

package/bits/click-spark/click-spark.scss

@@ -1 +1,5 @@
-@forward './styles';
+// Component-scoped, but the lib uses `ViewEncapsulation.None` everywhere so
+// the selector starts with `.wr-click-spark` — the same as the public Sass
+// entry. Forwards the rules alone: `styles/_index.scss` is the entry that
+// loads the theme, and a `styleUrl` is its own compilation.
+@forward './styles/rules';

package/bits/click-spark/styles/_index.scss

@@ -1,16 +1,11 @@
-// Click spark — canvas overlay that ignores pointer events so projected
-// children stay interactive.
-.wr-click-spark {
-  position: relative;
-  display: block;
+// Public Sass entry for `@use 'ngwr/bits/click-spark'`.
+//
+// Loads the theme although `_rules` reads no token: the component strokes its
+// sparks in `sparkColor`, whose default is `var(--wr-color-on-surface)` resolved
+// against the canvas, so an app that writes this one `@use` still has the token
+// the default paints with. `click-spark.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';
 
-  &__canvas {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    user-select: none;
-    z-index: 1;
-  }
-}
+@forward 'rules';

package/bits/click-spark/styles/_rules.scss

@@ -0,0 +1,20 @@
+// Click spark — canvas overlay that ignores pointer events so projected
+// children stay interactive. The sparks themselves are stroked in
+// `click-spark.ts`, in `sparkColor`, which defaults to `var(--wr-color-on-surface)`
+// and is resolved against the canvas: the token is read from TypeScript rather than
+// from a rule here, which is why `_index.scss` loads the theme for a sheet that
+// names no token itself.
+.wr-click-spark {
+  position: relative;
+  display: block;
+
+  &__canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    user-select: none;
+    z-index: 1;
+  }
+}

package/comment/styles/_index.scss

@@ -0,0 +1,270 @@
+@use '../../theme/styles' as theme;
+
+// Styles for the entry points this component's own markup renders.
+//
+// v15 removed the `@use 'ngwr'` umbrella: a consumer writes one `@use` per
+// component they place, and never learns about the ones a component places
+// INSIDE itself. Sass deduplicates `@use` within a compilation, so an app that
+// also loads one of these by hand still emits it once.
+@use '../../button/styles' as button-styles; // WrButton
+@use '../../textarea/styles' as textarea-styles; // WrTextarea
+
+.wr-comment {
+  --wr-comment-gap: var(--wr-space-md);
+  --wr-comment-head-gap: var(--wr-space-sm);
+  --wr-comment-body-gap: var(--wr-space-xs);
+  --wr-comment-actions-gap: var(--wr-space-sm);
+  --wr-comment-font-family: var(--wr-font-family-base);
+  --wr-comment-font-size: var(--wr-text-sm);
+  --wr-comment-line-height: var(--wr-text-sm-leading);
+  --wr-comment-author-color: var(--wr-color-on-surface);
+  --wr-comment-author-font-weight: var(--wr-font-weight-semibold);
+  --wr-comment-time-color: var(--wr-color-on-surface-muted);
+  --wr-comment-time-font-size: var(--wr-text-xs);
+  --wr-comment-body-color: var(--wr-color-on-surface);
+  // Replies: how far one level steps in, and the room between them.
+  --wr-comment-indent: var(--wr-space-xl);
+  --wr-comment-replies-gap: var(--wr-space-lg);
+  --wr-comment-replies-margin-top: var(--wr-space-lg);
+  // Bubble variant. The reader's own side is a filled intent with its
+  // `-contrast` label; the other side is a neutral fill with surface text.
+  --wr-comment-bubble-bg: var(--wr-color-fill);
+  --wr-comment-bubble-color: var(--wr-color-on-surface);
+  --wr-comment-bubble-time-color: var(--wr-color-on-surface-muted);
+  --wr-comment-bubble-radius: var(--wr-border-radius-lg);
+  --wr-comment-bubble-padding-y: var(--wr-space-sm);
+  --wr-comment-bubble-padding-x: var(--wr-space-md);
+  --wr-comment-bubble-max-width: 80%;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--wr-comment-gap);
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  font-family: var(--wr-comment-font-family);
+  font-size: var(--wr-comment-font-size);
+  line-height: var(--wr-comment-line-height);
+  color: var(--wr-comment-body-color);
+
+  &__avatar {
+    flex: 0 0 auto;
+    display: flex;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__main {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--wr-comment-body-gap);
+    min-width: 0;
+  }
+
+  &__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--wr-comment-head-gap);
+    min-width: 0;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__author {
+    color: var(--wr-comment-author-color);
+    font-weight: var(--wr-comment-author-font-weight);
+    overflow-wrap: anywhere;
+  }
+
+  &__time {
+    color: var(--wr-comment-time-color);
+    font-size: var(--wr-comment-time-font-size);
+  }
+
+  &__body {
+    min-width: 0;
+    // A pasted URL or a token with no break opportunity would otherwise push
+    // the row past its column.
+    overflow-wrap: anywhere;
+    // Text from the composer holds the lines Shift+Enter made.
+    white-space: pre-line;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--wr-comment-actions-gap);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__replies {
+    flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--wr-comment-replies-gap);
+    margin-top: var(--wr-comment-replies-margin-top);
+    padding-inline-start: var(--wr-comment-indent);
+    min-width: 0;
+
+    &:empty {
+      display: none;
+    }
+
+    // The third level and deeper sit flush with their parent: each step takes
+    // the indent plus an avatar column, and a phone has no body width left to
+    // give after two.
+    .wr-comment__replies .wr-comment__replies {
+      padding-inline-start: 0;
+    }
+  }
+
+  // One step on a phone: the second level is flush too.
+  @media (max-width: 480px) {
+    &__replies .wr-comment__replies {
+      padding-inline-start: 0;
+    }
+  }
+
+  // Bubble variant: the body is a chat bubble, the head sits inside it, and the
+  // whole row leans to one inline side. Logical properties and `row-reverse`
+  // only, so `dir="rtl"` mirrors the log on its own.
+  &--bubble {
+    flex-wrap: nowrap;
+
+    .wr-comment__main {
+      flex: 0 1 auto;
+      max-width: var(--wr-comment-bubble-max-width);
+      gap: 0;
+      padding: var(--wr-comment-bubble-padding-y) var(--wr-comment-bubble-padding-x);
+      background: var(--wr-comment-bubble-bg);
+      color: var(--wr-comment-bubble-color);
+      @include theme.smooth-br(var(--wr-comment-bubble-radius));
+    }
+
+    .wr-comment__head {
+      gap: var(--wr-comment-head-gap);
+    }
+
+    .wr-comment__author {
+      color: inherit;
+    }
+
+    .wr-comment__time {
+      color: var(--wr-comment-bubble-time-color);
+    }
+
+    .wr-comment__actions {
+      margin-top: var(--wr-comment-body-gap);
+    }
+  }
+
+  &--end {
+    --wr-comment-bubble-bg: var(--wr-color-primary);
+    --wr-comment-bubble-color: var(--wr-color-primary-contrast);
+    --wr-comment-bubble-time-color: var(--wr-color-primary-contrast);
+
+    flex-direction: row-reverse;
+  }
+}
+
+.wr-comment-composer {
+  --wr-comment-composer-bg: var(--wr-color-surface);
+  --wr-comment-composer-border: var(--wr-border-base);
+  --wr-comment-composer-ring: transparent;
+  --wr-comment-composer-radius: var(--wr-control-radius-md);
+  --wr-comment-composer-gap: var(--wr-space-xs);
+  --wr-comment-composer-padding: var(--wr-space-xs);
+  // 36px: one row of the md field (20px line, 8px padding a side) less its
+  // border, so the button sits inside the row it sends.
+  --wr-comment-composer-send-size: 2.25rem;
+
+  display: flex;
+  align-items: flex-end;
+  gap: var(--wr-comment-composer-gap);
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  padding: var(--wr-comment-composer-padding);
+  background: var(--wr-comment-composer-bg);
+  border: 1px solid var(--wr-comment-composer-border);
+  @include theme.smooth-br(var(--wr-comment-composer-radius));
+  box-shadow: 0 0 0 3px var(--wr-comment-composer-ring);
+  transition:
+    border-color var(--wr-transition-base),
+    box-shadow var(--wr-transition-base);
+
+  // The frame carries the focus state, so the field inside draws none of its
+  // own: no border, no ring, no fill, in every state.
+  &:focus-within {
+    --wr-comment-composer-border: var(--wr-color-primary);
+    --wr-comment-composer-ring: color-mix(in srgb, var(--wr-color-primary) 15%, transparent);
+  }
+
+  &--disabled {
+    --wr-comment-composer-bg: var(--wr-color-fill);
+
+    cursor: not-allowed;
+  }
+
+  &--readonly {
+    --wr-comment-composer-bg: var(--wr-color-fill);
+  }
+
+  &__field {
+    flex: 1 1 auto;
+    min-width: 0;
+
+    &.wr-textarea,
+    &.wr-textarea--focused,
+    &.wr-textarea--disabled,
+    &.wr-textarea--readonly {
+      --wr-textarea-bg: transparent;
+      --wr-textarea-border: transparent;
+      --wr-textarea-ring: transparent;
+    }
+  }
+
+  &__actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--wr-comment-composer-gap);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__send {
+    flex: 0 0 auto;
+    width: var(--wr-comment-composer-send-size);
+    height: var(--wr-comment-composer-send-size);
+    padding: 0;
+
+    @include theme.touch-target;
+
+    .wr-icon__svg {
+      display: block;
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+
+    // The glyph points toward the inline end, so it turns with the direction.
+    [dir='rtl'] & .wr-icon__svg {
+      transform: scaleX(-1);
+    }
+  }
+}

package/dialog/styles/_index.scss

@@ -1,5 +1,11 @@
 @use '../../theme/styles' as theme;
 
+// Styles for the entry point this component's own markup renders: `confirm()`
+// mounts two `wr-btn`, and a consumer who writes `@use 'ngwr/dialog'` never
+// learns about them. Sass deduplicates `@use`, so an app that also loads the
+// button by hand still emits it once.
+@use '../../button/styles' as button-styles; // WrButton
+
 // CDK Overlay base styles are usually loaded once by the consumer.
 // We re-emit the minimal `cdk-overlay-*` rules so a standalone `@use
 // 'ngwr/dialog'` works without manually pulling CDK's prebuilt CSS.