ngwr 12.1.0 → 13.0.0

package/loading-bar/styles/_index.scss

@@ -1,33 +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;
-
-.wr-loading-bar {
-  position: fixed;
-  top: 0;
-  inset-inline: 0;
-  z-index: var(--wr-z-top, 9999);
-  pointer-events: none;
-
-  &__track {
-    width: 100%;
-    overflow: hidden;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-  }
-
-  &--active {
-    opacity: 1;
-  }
-
-  &__fill {
-    width: 0;
-    height: 2px;
-    background: var(--wr-color-primary);
-    box-shadow: 0 0 8px rgb(var(--wr-color-primary-rgb) / 60%);
-    transition:
-      width 0.15s ease-out,
-      opacity 0.2s ease;
-  }
-}
+// Public Sass entry for `@use 'ngwr/loading-bar'`.
+//
+// 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.
+// `loading-bar.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. `loading-bar.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/loading-bar/styles/_rules.scss

@@ -0,0 +1,28 @@
+.wr-loading-bar {
+  position: fixed;
+  top: 0;
+  inset-inline: 0;
+  z-index: var(--wr-z-top, 9999);
+  pointer-events: none;
+
+  &__track {
+    width: 100%;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  &--active {
+    opacity: 1;
+  }
+
+  &__fill {
+    width: 0;
+    height: 2px;
+    background: var(--wr-color-primary);
+    box-shadow: 0 0 8px rgb(var(--wr-color-primary-rgb) / 60%);
+    transition:
+      width 0.15s ease-out,
+      opacity 0.2s ease;
+  }
+}

package/marquee/marquee.scss

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

package/marquee/styles/_index.scss

@@ -1,155 +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;
-
-// Endless marquee (reactbits LogoLoop port).
-// Vars driven from component inputs:
-//   --wr-marquee-gap         gap between items (px)
-//   --wr-marquee-height      item height (px)
-//   --wr-marquee-fade-color  edge fade colour (falls back to page bg)
-
-.wr-marquee {
-  --wr-marquee-gap: 32px;
-  --wr-marquee-height: 28px;
-  // Default to the lib's surface colour; consumers can override via
-  // `[fadeOutColor]` or by setting `--wr-marquee-fade-color` directly.
-  --wr-marquee-fade-color-auto: var(--wr-color-surface, #ffffff);
-
-  position: relative;
-  display: block;
-  width: 100%;
-  overflow: hidden;
-
-  &--scale-hover {
-    padding-top: calc(var(--wr-marquee-height) * 0.1);
-    padding-bottom: calc(var(--wr-marquee-height) * 0.1);
-  }
-
-  &__track {
-    display: flex;
-    width: max-content;
-    will-change: transform;
-    user-select: none;
-    position: relative;
-    z-index: 0;
-  }
-
-  &__list {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  &__item {
-    flex: 0 0 auto;
-    // The whole strip is physical, not textual: `[direction]` is literally
-    // `'left' | 'right'`, the track is driven by `translate3d(-offset px, 0, 0)`
-    // against a `getBoundingClientRect().width` measurement of one sequence, and
-    // the edge fades are `left`/`right` gradients. The item gap is the seam of
-    // that physical loop — it has to match the offset the track wraps at, so it
-    // stays on the same axis the animation runs on.
-    // rtl-ok: seam gap of a physically-animated track (see the note above)
-    margin-right: var(--wr-marquee-gap);
-    font-size: var(--wr-marquee-height);
-    line-height: 1;
-  }
-
-  &__item:last-child {
-    // Restates the interior gap on the last item so the join between two copies
-    // of the sequence is spaced like the gaps inside it.
-    // rtl-ok: same physical loop axis as the interior gap above
-    margin-right: var(--wr-marquee-gap);
-  }
-
-  &__node {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  &__item img {
-    height: var(--wr-marquee-height);
-    width: auto;
-    display: block;
-    object-fit: contain;
-    image-rendering: -webkit-optimize-contrast;
-    -webkit-user-drag: none;
-    pointer-events: none;
-    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
-  }
-
-  &--scale-hover &__item {
-    overflow: visible;
-  }
-
-  &--scale-hover &__item:hover img,
-  &--scale-hover &__item:hover &__node {
-    transform: scale(1.2);
-    transform-origin: center center;
-  }
-
-  &--scale-hover &__node {
-    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
-  }
-
-  &__link {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    border-radius: 4px;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-
-    &:focus-visible {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-    }
-  }
-
-  &--fade::before,
-  &--fade::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: clamp(24px, 8%, 120px);
-    pointer-events: none;
-    z-index: 10;
-  }
-
-  &--fade::before {
-    // rtl-ok: paired with the physical `linear-gradient(to right, …)` below, which has no logical form
-    left: 0;
-    background: linear-gradient(
-      to right,
-      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-
-  &--fade::after {
-    // rtl-ok: paired with the physical `linear-gradient(to left, …)` below, which has no logical form
-    right: 0;
-    background: linear-gradient(
-      to left,
-      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .wr-marquee__track {
-      transform: translate3d(0, 0, 0) !important;
-    }
-
-    .wr-marquee__item img,
-    .wr-marquee__node {
-      transition: none !important;
-    }
-  }
-}
+// Public Sass entry for `@use 'ngwr/marquee'`.
+//
+// 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.
+// `marquee.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. `marquee.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/marquee/styles/_rules.scss

@@ -0,0 +1,150 @@
+// Endless marquee (reactbits LogoLoop port).
+// Vars driven from component inputs:
+//   --wr-marquee-gap         gap between items (px)
+//   --wr-marquee-height      item height (px)
+//   --wr-marquee-fade-color  edge fade colour (falls back to page bg)
+
+.wr-marquee {
+  --wr-marquee-gap: 32px;
+  --wr-marquee-height: 28px;
+  // Default to the lib's surface colour; consumers can override via
+  // `[fadeOutColor]` or by setting `--wr-marquee-fade-color` directly.
+  --wr-marquee-fade-color-auto: var(--wr-color-surface, #ffffff);
+
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+
+  &--scale-hover {
+    padding-top: calc(var(--wr-marquee-height) * 0.1);
+    padding-bottom: calc(var(--wr-marquee-height) * 0.1);
+  }
+
+  &__track {
+    display: flex;
+    width: max-content;
+    will-change: transform;
+    user-select: none;
+    position: relative;
+    z-index: 0;
+  }
+
+  &__list {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    flex: 0 0 auto;
+    // The whole strip is physical, not textual: `[direction]` is literally
+    // `'left' | 'right'`, the track is driven by `translate3d(-offset px, 0, 0)`
+    // against a `getBoundingClientRect().width` measurement of one sequence, and
+    // the edge fades are `left`/`right` gradients. The item gap is the seam of
+    // that physical loop — it has to match the offset the track wraps at, so it
+    // stays on the same axis the animation runs on.
+    // rtl-ok: seam gap of a physically-animated track (see the note above)
+    margin-right: var(--wr-marquee-gap);
+    font-size: var(--wr-marquee-height);
+    line-height: 1;
+  }
+
+  &__item:last-child {
+    // Restates the interior gap on the last item so the join between two copies
+    // of the sequence is spaced like the gaps inside it.
+    // rtl-ok: same physical loop axis as the interior gap above
+    margin-right: var(--wr-marquee-gap);
+  }
+
+  &__node {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__item img {
+    height: var(--wr-marquee-height);
+    width: auto;
+    display: block;
+    object-fit: contain;
+    image-rendering: -webkit-optimize-contrast;
+    -webkit-user-drag: none;
+    pointer-events: none;
+    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
+  }
+
+  &--scale-hover &__item {
+    overflow: visible;
+  }
+
+  &--scale-hover &__item:hover img,
+  &--scale-hover &__item:hover &__node {
+    transform: scale(1.2);
+    transform-origin: center center;
+  }
+
+  &--scale-hover &__node {
+    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  &--fade::before,
+  &--fade::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: clamp(24px, 8%, 120px);
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  &--fade::before {
+    // rtl-ok: paired with the physical `linear-gradient(to right, …)` below, which has no logical form
+    left: 0;
+    background: linear-gradient(
+      to right,
+      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  &--fade::after {
+    // rtl-ok: paired with the physical `linear-gradient(to left, …)` below, which has no logical form
+    right: 0;
+    background: linear-gradient(
+      to left,
+      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .wr-marquee__track {
+      transform: translate3d(0, 0, 0) !important;
+    }
+
+    .wr-marquee__item img,
+    .wr-marquee__node {
+      transition: none !important;
+    }
+  }
+}

package/overlay/styles/_arrow.scss

@@ -0,0 +1,243 @@
+@use 'sass:list';
+@use 'sass:map';
+
+// --- Anchored-panel arrow ----------------------------------------------------
+//
+// A small square rotated 45°, half tucked under the panel so only the tip shows.
+// Shared by every overlay that points AT its trigger: `wr-popover`, its tooltip
+// mode, and `wr-popconfirm`.
+//
+// **Why this lives in `ngwr/overlay` and not in `ngwr/theme`.** `theme/styles`
+// is the token layer plus mixins any element can use — `smooth-br`,
+// `touch-target`, `focus-ring`. This is not one of those. It only means anything
+// against a CDK pane that carries a `--<placement>` modifier written by
+// `wrPopoverPositions()` / a directive's `panelClass`, and the eight-to-twelve
+// placement names it keys off are `WR_POPOVER_POSITIONS`. That is the overlay
+// layer's vocabulary, and `overlay/styles` is already where the cross-overlay
+// presentation lives (`.wr-overlay-sheet`, `.wr-overlay-backdrop`). Promoting it
+// to `ngwr/theme` would advertise it to every component in the catalog as
+// something general, which it is not.
+//
+// It is deliberately NOT `@forward`ed from `overlay/styles/_index.scss`, so
+// `@use 'ngwr/overlay'` gains no new public API and this file emits no CSS of
+// its own — a component `@use`s it by relative path and pays only for the rules
+// its own `anchored-arrow()` call generates.
+
+/// Side of the square's box. Half of it shows; the rest is under the panel.
+$size: 6px;
+$half: 3px;
+
+/// Distance from the panel corner for the `-start` / `-end` variants.
+$inset: 0.625rem;
+
+/// Every placement an anchored panel can take, mapped to
+/// (which panel edge the arrow hangs off, where along that edge it sits).
+///
+/// A `--top` pane means the panel sits ABOVE the trigger, so the arrow hangs off
+/// the panel's BOTTOM edge.
+$placements: (
+  top: (
+    bottom,
+    center,
+  ),
+  top-start: (
+    bottom,
+    start,
+  ),
+  top-end: (
+    bottom,
+    end,
+  ),
+  bottom: (
+    top,
+    center,
+  ),
+  bottom-start: (
+    top,
+    start,
+  ),
+  bottom-end: (
+    top,
+    end,
+  ),
+  left: (
+    right,
+    center,
+  ),
+  left-start: (
+    right,
+    start,
+  ),
+  left-end: (
+    right,
+    end,
+  ),
+  right: (
+    left,
+    center,
+  ),
+  right-start: (
+    left,
+    start,
+  ),
+  right-end: (
+    left,
+    end,
+  ),
+);
+
+/// Positions the arrow against `$edge`, offset outwards by `$pull`.
+///
+/// `left` / `right` name the panel edge in LTR terms only. Every side-anchored
+/// and `-start` / `-end` placement is expressed as CDK `originX: start | end` —
+/// plain `top` / `bottom` use `center`, which mirrors to itself — and CDK
+/// resolves start / end against `Directionality`. So under `dir="rtl"` the panel
+/// lands on the mirrored side of the trigger while the modifier class keeps its
+/// LTR name, and the arrow has to travel with the panel. Same for the `-start` /
+/// `-end` alignment along a horizontal edge.
+///
+/// The class names the placement the panel ACTUALLY took, not the requested one,
+/// wherever the caller feeds `withPositions()` a fallback list whose links each
+/// carry their own `panelClass` — so a flip swaps the modifier and this moves the
+/// arrow with it.
+@mixin at($edge, $align, $pull) {
+  @if $edge == left {
+    inset-inline-start: -$pull;
+  } @else if $edge == right {
+    inset-inline-end: -$pull;
+  } @else {
+    #{$edge}: -$pull;
+  }
+
+  @if $edge == bottom or $edge == top {
+    @if $align == center {
+      // Both halves of the centring pair go logical together, so the arrow
+      // stays on the midpoint whichever way the axis runs.
+      inset-inline-start: 50%;
+      margin-inline-start: -$half;
+    } @else if $align == start {
+      inset-inline-start: $inset;
+    } @else {
+      inset-inline-end: $inset;
+    }
+  } @else {
+    @if $align == center {
+      top: 50%;
+      margin-top: -$half;
+    } @else if $align == start {
+      top: $inset;
+    } @else {
+      bottom: $inset;
+    }
+  }
+}
+
+/// The two faces of the rotated square that stay visible outside the panel.
+///
+/// These stay physical, and it is not an oversight. Which two borders paint is
+/// decided by `transform: rotate(45deg)`, not by reading order: the rotation
+/// turns the right border into the down-right face and the bottom one into the
+/// down-left face, so `right + bottom` is what outlines a tip pointing DOWN.
+/// Swapping only the inline half would paint two faces that are tucked under
+/// the panel. A mirrored arrow needs the rotation mirrored as well — more than
+/// a property rewrite, so it is left for the RTL pass that owns the TS side.
+@mixin faces($edge, $color) {
+  @if $edge == bottom {
+    // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
+    border-right: 1px solid $color;
+    border-bottom: 1px solid $color;
+  } @else if $edge == top {
+    // rtl-ok: up-left face of a 45°-rotated square — fixed by the rotation
+    border-left: 1px solid $color;
+    border-top: 1px solid $color;
+  } @else if $edge == right {
+    border-top: 1px solid $color;
+    // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
+    border-right: 1px solid $color;
+  } @else {
+    border-bottom: 1px solid $color;
+    // rtl-ok: up-left face of a 45°-rotated square — fixed by the rotation
+    border-left: 1px solid $color;
+  }
+}
+
+/// Draws the arrow for an anchored overlay, at every placement it can take.
+///
+/// @param {String} $pane - the CDK pane class the directive sets, without the
+///   modifier: `.wr-popover-overlay`, `.wr-popconfirm-overlay`.
+/// @param {String} $panel - selector for the painted surface INSIDE the pane,
+///   relative to it: `> *` where the pane wraps an arbitrary child,
+///   `> .wr-popconfirm` / `.wr-tooltip` where it has a known one. The arrow is
+///   that element's `::after`, so this is also the element made `position:
+///   relative`.
+/// @param {*} $background - fill for the square; match the panel's own so the
+///   two read as one shape. A `var()` is fine and preferred.
+/// @param {*} $border - the panel's border colour, or `null` for a panel with no
+///   border. When set, the two outward faces are painted so the outline reads as
+///   continuous, and the square is pulled one extra pixel outwards so its own
+///   border lines up flush with the panel's instead of leaving the panel border
+///   showing across the arrow's base. A borderless panel has nothing to line up
+///   with, hence the smaller pull.
+/// @param {Bool} $inert - `true` drops the arrow out of hit-testing. For a
+///   tooltip, whose arrow overlaps the very control the tooltip describes, so a
+///   hittable arrow eats clicks meant for it.
+/// @param {List} $placements-used - which placements to emit, defaulting to all
+///   twelve. A component whose position input offers four should pass four
+///   rather than shipping eight rules that can never match.
+@mixin anchored-arrow($pane, $panel, $background, $border: null, $inert: false, $placements-used: map.keys($placements)) {
+  #{$pane} {
+    #{$panel} {
+      // Containing block for the arrow.
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: $size;
+        height: $size;
+        background: $background;
+        transform: rotate(45deg);
+
+        @if $inert {
+          pointer-events: none;
+        }
+      }
+    }
+
+    // Responsive bottom-sheet mode detaches the panel from its trigger and docks
+    // it to the bottom of the screen, so there is nothing left to point at.
+    // Emitted for every caller, not only the ones that support sheets today: the
+    // arrow is what would be wrong there, so the arrow is what should know.
+    &.wr-overlay-sheet #{$panel}::after {
+      content: none;
+    }
+  }
+
+  @each $placement in $placements-used {
+    $spec: map.get($placements, $placement);
+
+    @if $spec == null {
+      @error 'wr arrow: unknown placement `#{$placement}` — expected one of #{map.keys($placements)}.';
+    }
+
+    $edge: list.nth($spec, 1);
+    $align: list.nth($spec, 2);
+
+    // A bordered panel pulls one extra pixel, so the square's own border lines
+    // up flush with the panel's instead of leaving the panel border showing
+    // across the arrow's base. A borderless one has nothing to line up with.
+    $pull: $half;
+
+    @if $border != null {
+      $pull: $half + 1px;
+    }
+
+    #{$pane}--#{$placement} #{$panel}::after {
+      @include at($edge, $align, $pull);
+
+      @if $border != null {
+        @include faces($edge, $border);
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "12.1.0",
+  "version": "13.0.0",
   "bin": {
     "ngwr-mcp": "./mcp/server.js"
   },

package/popconfirm/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../overlay/styles/arrow';
 
 .wr-popconfirm-overlay {
   > .wr-popconfirm {
@@ -13,6 +14,7 @@
     color: var(--wr-color-on-surface);
     font-family: var(--wr-font-family-base);
     animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
+    // rtl-ok: scale-in growth corner — `transform-origin` takes no logical keywords
     transform-origin: top left;
   }
 }
@@ -30,3 +32,18 @@
     gap: 0.375rem;
   }
 }
+
+// The arrow that ties the panel to the control it is asking about — the same one
+// `wr-popover` draws, from the same mixin, because the two are the same kind of
+// anchored non-modal panel and a second copy of the geometry would drift.
+//
+// Four placements, not twelve: `WrPopconfirmPosition` is `top | bottom | left |
+// right`, and the eight `-start` / `-end` rules would be selectors that can
+// never match. Widen this list if the input ever grows them.
+@include arrow.anchored-arrow(
+  $pane: '.wr-popconfirm-overlay',
+  $panel: '> .wr-popconfirm',
+  $background: var(--wr-color-surface),
+  $border: var(--wr-color-outline),
+  $placements-used: (top, bottom, left, right)
+);