ngwr 12.1.0 → 13.0.0

package/popover/styles/_index.scss

@@ -1,196 +1,27 @@
-@use 'sass:list';
-
 @use '../../theme/styles' as theme;
 @use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode
-
-// --- Arrow -----------------------------------------------------------------
-//
-// A small square rotated 45°, half tucked under the panel so only the tip shows.
-// Tooltip and popover share the geometry; the popover additionally carries the
-// panel's border on the two outward faces so the outline reads as continuous.
-//
-// Placement is driven by the resolved position modifier the directive puts on the
-// overlay host (`--top` means the panel sits ABOVE the trigger, so the arrow hangs
-// off the panel's BOTTOM edge). All 12 positions are covered — the hand-written
-// tooltip rules this replaces only handled 8, so `top-start` / `top-end` /
-// `bottom-start` / `bottom-end` tooltips have been shipping with no arrow at all.
-$_arrow: 6px;
-$_arrow-half: 3px;
-$_arrow-inset: 0.625rem; // distance from the panel corner for the -start / -end variants
-
-// edge = which side of the panel the arrow hangs off; align = where along that side.
-$_arrow-placement: (
-  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` entry in `WR_POPOVER_POSITIONS` 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:
-/// each entry in `WR_POPOVER_FALLBACKS` carries its own `panelClass`, so a flip
-/// swaps the modifier and this loop moves the arrow with it.
-@mixin _arrow-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: -$_arrow-half;
-    } @else if $align == start {
-      inset-inline-start: $_arrow-inset;
-    } @else {
-      inset-inline-end: $_arrow-inset;
-    }
-  } @else {
-    @if $align == center {
-      top: 50%;
-      margin-top: -$_arrow-half;
-    } @else if $align == start {
-      top: $_arrow-inset;
-    } @else {
-      bottom: $_arrow-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 _arrow-border($edge) {
-  @if $edge == bottom {
-    // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
-    border-right: 1px solid var(--wr-color-outline);
-    border-bottom: 1px solid var(--wr-color-outline);
-  } @else if $edge == top {
-    // rtl-ok: up-left face of a 45°-rotated square — fixed by the rotation
-    border-left: 1px solid var(--wr-color-outline);
-    border-top: 1px solid var(--wr-color-outline);
-  } @else if $edge == right {
-    border-top: 1px solid var(--wr-color-outline);
-    // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
-    border-right: 1px solid var(--wr-color-outline);
-  } @else {
-    border-bottom: 1px solid var(--wr-color-outline);
-    // rtl-ok: up-left face of a 45°-rotated square — fixed by the rotation
-    border-left: 1px solid var(--wr-color-outline);
-  }
-}
-
-.wr-popover-overlay {
-  > * {
-    // Containing block for the arrow below.
-    position: relative;
-    display: block;
-    min-width: 8rem;
-    max-width: 22rem;
-    background: var(--wr-color-surface);
-    border: 1px solid var(--wr-color-outline);
-    @include theme.smooth-br(var(--wr-border-radius-base));
-    box-shadow: var(--wr-shadow-overlay);
-    font-family: var(--wr-font-family-base);
-    color: var(--wr-color-on-surface);
-    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;
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: $_arrow;
-      height: $_arrow;
-      background: var(--wr-color-surface);
-      transform: rotate(45deg);
-    }
-  }
-
-  // Responsive bottom-sheet mode has no anchor to point at, so no arrow.
-  &.wr-overlay-sheet > *::after {
-    content: none;
-  }
-}
-
-@each $position, $spec in $_arrow-placement {
-  $edge: list.nth($spec, 1);
-  $align: list.nth($spec, 2);
-
-  // Pulled 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.
-  .wr-popover-overlay--#{$position} > *::after {
-    @include _arrow-at($edge, $align, $_arrow-half + 1px);
-    @include _arrow-border($edge);
-  }
-
-  .wr-tooltip-overlay--#{$position} .wr-tooltip::after {
-    @include _arrow-at($edge, $align, $_arrow-half);
-  }
+@use '../../overlay/styles/arrow';
+
+// The arrow — a rotated square tucked half under the panel — used to be written
+// out here: geometry, a twelve-placement map and two mixins. `wr-popconfirm` is
+// the same kind of anchored panel and had none of it, so rather than a second
+// copy the whole thing moved to `overlay/styles/_arrow.scss` and both components
+// call `arrow.anchored-arrow()`. The two calls at the foot of this file emit the
+// rules that were here, for the same twelve placements.
+
+.wr-popover-overlay > * {
+  display: block;
+  min-width: 8rem;
+  max-width: 22rem;
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  box-shadow: var(--wr-shadow-overlay);
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-on-surface);
+  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;
 }
 
 //
@@ -235,24 +66,35 @@ $_arrow-placement: (
   // rtl-ok: scale-in growth corner — `transform-origin` takes no logical keywords
   transform-origin: top left;
 
-  // Arrow — geometry from the shared placement loop at the top of this file.
-  &::after {
-    content: '';
-    position: absolute;
-    width: $_arrow;
-    height: $_arrow;
-    background: var(--wr-tooltip-bg);
-    transform: rotate(45deg);
-    // The one piece that stays inert: the arrow points AT the trigger and
-    // overlaps it, so a hittable arrow would eat clicks meant for the control
-    // the tooltip describes.
-    pointer-events: none;
-  }
+  // The arrow itself comes from `arrow.anchored-arrow()` below. `position:
+  // relative` is restated by that call and kept here too, so the class still
+  // stands on its own for anyone styling `.wr-tooltip` directly — it is public
+  // API, and the arrow is the pane's business rather than the chip's.
 }
 
-// Arrow placement for both modes is generated from `$_arrow-placement` at the top
-// of this file — the per-position rules that used to live here are emitted there,
-// byte-identical for the 8 positions they covered plus the 4 they missed.
+// Arrow for both modes.
+//
+// Popover: the pane wraps whatever the author projected, so the panel selector
+// is `> *`, and the square carries the panel's border on its two outward faces
+// so the outline reads as continuous.
+@include arrow.anchored-arrow(
+  $pane: '.wr-popover-overlay',
+  $panel: '> *',
+  $background: var(--wr-color-surface),
+  $border: var(--wr-color-outline)
+);
+
+// Tooltip: a known child, and no border faces — the chip's own border colour is
+// overridable per instance through `--wr-tooltip-border`, so painting the faces
+// from the token here would desync the moment anyone retints one. The arrow
+// points AT the trigger and overlaps it, so it is the one inert piece: a
+// hittable arrow would eat clicks meant for the control the tooltip describes.
+@include arrow.anchored-arrow(
+  $pane: '.wr-tooltip-overlay',
+  $panel: '.wr-tooltip',
+  $background: var(--wr-tooltip-bg),
+  $inert: true
+);
 
 @media (prefers-reduced-motion: reduce) {
   .wr-tooltip {

package/segmented/styles/_index.scss

@@ -130,6 +130,14 @@
     line-height: var(--wr-segmented-line-height);
   }
 
+  // A read-only strip still takes focus and still shows which segment is
+  // pressed, so it keeps the visual and only stops inviting the click. This
+  // cursor is the only cue there is — see the `readonly` input for why nothing
+  // is mirrored into ARIA.
+  &--readonly &__option {
+    cursor: default;
+  }
+
   &--disabled {
     pointer-events: none;
     opacity: var(--wr-disabled-opacity);

package/select/styles/_index.scss

@@ -10,6 +10,14 @@
   --wr-select-padding-x: var(--wr-control-padding-x-md);
   --wr-select-font-size: var(--wr-control-font-size-md);
   --wr-select-line-height: var(--wr-control-line-height-md);
+  // The floor that keeps a bare `<wr-select>` from collapsing to its
+  // placeholder. A hook rather than a literal because the floor is wrong as
+  // often as it is right: dropped into a `minmax(0, 1fr)` grid column the
+  // trigger holds 160px and overhangs its cell, and overriding
+  // `.wr-select__trigger` is reaching past the public contract for something
+  // the rest of the component already exposes. Set it to 0 to hand the width
+  // back to the layout.
+  --wr-select-min-width: 10rem;
 
   display: inline-flex;
   vertical-align: middle;
@@ -36,7 +44,15 @@
   &--rounded {
     --wr-select-radius: var(--wr-border-radius-pill);
     --wr-select-padding-x: 1rem;
-    corner-shape: round; // override squircle from smooth-br for pills
+
+    // The squircle reset has to land on the element `smooth-br` ran on, and
+    // that is the trigger, not the host: `corner-shape` does not inherit, so a
+    // declaration here left the trigger drawing the inset curve the mixin's own
+    // gotcha warns about instead of a stadium. `wr-btn` / `wr-input` put their
+    // modifier and their `smooth-br` on one element, which is why they paint.
+    .wr-select__trigger {
+      corner-shape: round;
+    }
   }
 
   &--disabled {
@@ -44,12 +60,20 @@
     --wr-select-bg: var(--wr-color-fill);
   }
 
+  // A read-only select still takes focus and still shows what is selected, so it
+  // keeps the visual and only stops inviting the click that would open the
+  // panel. `not-allowed` would say something false about a control that works —
+  // the same call `.wr-select__tag-input:read-only` already makes.
+  &--readonly &__trigger {
+    cursor: default;
+  }
+
   &__trigger {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     width: 100%;
-    min-width: 10rem;
+    min-width: var(--wr-select-min-width);
     appearance: none;
     background: var(--wr-select-bg);
     color: var(--wr-select-color);
@@ -128,7 +152,15 @@
   // Search-mode trigger: inline text input + chevron + clear
   &__trigger--search {
     cursor: text;
-    padding: 0;
+    // The FIELD owns the padding here — it is the click target and has to be
+    // typable edge to edge — but the chevron and the × are siblings of it, not
+    // children, so a flat `padding: 0` left the chevron sitting on the border.
+    // Hand the TRAILING inset back to the trigger: the chevron is now inset by
+    // the same amount the placeholder is, and the field keeps the leading edge.
+    // Logical properties, so the inset moves to the left in `dir="rtl"` on its
+    // own — no physical side is named.
+    padding-block: 0;
+    padding-inline: 0 calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
 
     &:focus-within {
       border-color: var(--wr-color-primary);
@@ -218,7 +250,12 @@
     // Roomier on the label side, tighter where the remove (×) sits.
     padding-block: 0.125rem;
     padding-inline: 0.5rem 0.25rem;
-    border-radius: 999px;
+    // Not a pill: a chip is a shape nested INSIDE the trigger, so it repeats the
+    // trigger's own corner and scales with `size` along with it (5 / 6 / 7px for
+    // sm / md / lg). `--rounded` sets `--wr-select-radius` to the pill token, so
+    // a pill select still gets pill chips — the shape follows the control rather
+    // than being decided twice.
+    border-radius: var(--wr-select-radius);
     background: var(--wr-color-primary-soft);
     // `-ink`, not the raw intent: the chip paints the hue on its own soft tint,
     // where the base lands at 4.17:1.
@@ -241,7 +278,12 @@
     justify-content: center;
     width: 1rem;
     height: 1rem;
-    border-radius: 999px;
+    // Concentric with the chip: the remove is inset from the chip's edge by the
+    // chip's 2px block padding, and an inner corner only nests cleanly when it
+    // is the outer corner minus that inset. `max()` keeps the value legal for a
+    // consumer who sets `--wr-select-radius: 0` — a negative radius would
+    // invalidate the declaration outright.
+    border-radius: max(0px, calc(var(--wr-select-radius) - 2px));
     cursor: pointer;
     transition: background 0.12s ease;
 

package/shiny-text/shiny-text.scss

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

package/shiny-text/styles/_index.scss

@@ -1,106 +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;
-
-// Shimmering text (reactbits port). Clips an animated linear gradient to
-// the text via `background-clip: text`.
+// Public Sass entry for `@use 'ngwr/shiny-text'`.
 //
-// The keyframes are 0% → 50%, then hold at the end position. Inputs set
-// `animation-duration` to (speed + delay); the keyframe hits the end at
-// the 50%/totalDuration mark and rests for the rest, which collapses to
-// `speed` of motion + `delay` of pause — without needing two animations.
-
-.wr-shiny-text {
-  // Theme-default sweep (overridden by `[color]` / `[shineColor]`):
-  // gray base with a dark shine on light surfaces; dark theme restores
-  // the reactbits gray-with-white-flash below.
-  --wr-shiny-text-base: var(--wr-color-on-surface-muted, #8594a4);
-  --wr-shiny-text-shine: var(--wr-color-on-surface, #0f172a);
-
-  display: inline-block;
-  background-size: 200% auto;
-  background-position: 150% center;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation-name: wr-shiny-text-sweep;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: normal;
-  animation-fill-mode: both;
-  animation-play-state: running;
-
-  &--reverse {
-    animation-direction: reverse;
-  }
-
-  &--yoyo {
-    animation-direction: alternate;
-
-    &.wr-shiny-text--reverse {
-      animation-direction: alternate-reverse;
-    }
-  }
-
-  &--paused {
-    animation-play-state: paused;
-  }
-
-  &--pause-on-hover:hover {
-    animation-play-state: paused;
-  }
-}
-
-@keyframes wr-shiny-text-sweep {
-  0% {
-    background-position: 150% center;
-  }
-  50% {
-    background-position: -50% center;
-  }
-  100% {
-    background-position: -50% center;
-  }
-}
-
-// Reduced motion: freeze the sweep at its rest position — the gradient's
-// base color fills the text, so it stays readable with zero movement.
-@media (prefers-reduced-motion: reduce) {
-  .wr-shiny-text {
-    animation: none !important;
-  }
-}
-
-// [wrShimmer] directive
-// Same package as <wr-shiny-text>. Lightweight host-class directive —
-// gradient sweep across text via `background-clip: text`.
-@keyframes wr-shimmer {
-  100% {
-    background-position-x: -200%;
-  }
-}
-
-.wr-shimmer {
-  background: linear-gradient(
-    110deg,
-    var(--wr-color-on-surface) 30%,
-    rgba(var(--wr-color-primary-rgb), 0.9) 50%,
-    var(--wr-color-on-surface) 70%
-  );
-  background-size: 200% 100%;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  animation: wr-shimmer 2.5s linear infinite;
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-}
-
-[data-theme='dark'] .wr-shiny-text {
-  --wr-shiny-text-base: #b5b5b5;
-  --wr-shiny-text-shine: #ffffff;
-}
+// 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.
+// `shiny-text.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. `shiny-text.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/shiny-text/styles/_rules.scss

@@ -0,0 +1,101 @@
+// Shimmering text (reactbits port). Clips an animated linear gradient to
+// the text via `background-clip: text`.
+//
+// The keyframes are 0% → 50%, then hold at the end position. Inputs set
+// `animation-duration` to (speed + delay); the keyframe hits the end at
+// the 50%/totalDuration mark and rests for the rest, which collapses to
+// `speed` of motion + `delay` of pause — without needing two animations.
+
+.wr-shiny-text {
+  // Theme-default sweep (overridden by `[color]` / `[shineColor]`):
+  // gray base with a dark shine on light surfaces; dark theme restores
+  // the reactbits gray-with-white-flash below.
+  --wr-shiny-text-base: var(--wr-color-on-surface-muted, #8594a4);
+  --wr-shiny-text-shine: var(--wr-color-on-surface, #0f172a);
+
+  display: inline-block;
+  background-size: 200% auto;
+  background-position: 150% center;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation-name: wr-shiny-text-sweep;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: normal;
+  animation-fill-mode: both;
+  animation-play-state: running;
+
+  &--reverse {
+    animation-direction: reverse;
+  }
+
+  &--yoyo {
+    animation-direction: alternate;
+
+    &.wr-shiny-text--reverse {
+      animation-direction: alternate-reverse;
+    }
+  }
+
+  &--paused {
+    animation-play-state: paused;
+  }
+
+  &--pause-on-hover:hover {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes wr-shiny-text-sweep {
+  0% {
+    background-position: 150% center;
+  }
+  50% {
+    background-position: -50% center;
+  }
+  100% {
+    background-position: -50% center;
+  }
+}
+
+// Reduced motion: freeze the sweep at its rest position — the gradient's
+// base color fills the text, so it stays readable with zero movement.
+@media (prefers-reduced-motion: reduce) {
+  .wr-shiny-text {
+    animation: none !important;
+  }
+}
+
+// [wrShimmer] directive
+// Same package as <wr-shiny-text>. Lightweight host-class directive —
+// gradient sweep across text via `background-clip: text`.
+@keyframes wr-shimmer {
+  100% {
+    background-position-x: -200%;
+  }
+}
+
+.wr-shimmer {
+  background: linear-gradient(
+    110deg,
+    var(--wr-color-on-surface) 30%,
+    rgba(var(--wr-color-primary-rgb), 0.9) 50%,
+    var(--wr-color-on-surface) 70%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: wr-shimmer 2.5s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+[data-theme='dark'] .wr-shiny-text {
+  --wr-shiny-text-base: #b5b5b5;
+  --wr-shiny-text-shine: #ffffff;
+}

package/sidebar/styles/_index.scss

@@ -224,7 +224,10 @@
   &__badge {
     flex: 0 0 auto;
     padding: 0.0625rem 0.375rem;
-    border-radius: var(--wr-border-radius-pill);
+    // The row's corner, not a pill: the badge sits inside `__entry` / `__item`,
+    // which both read `--wr-border-radius-sm`, and a stadium nested in a 6px row
+    // reads as a foreign shape rather than a part of it.
+    border-radius: var(--wr-border-radius-sm);
     background: var(--wr-color-fill-strong);
     color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);

package/slider/styles/_index.scss

@@ -85,6 +85,14 @@
     font-variant-numeric: tabular-nums;
   }
 
+  // A read-only slider still takes focus and still announces its value, so it
+  // keeps the visual and only stops inviting the drag — `grab` on something that
+  // cannot move is the part that looks broken. Matches `wr-knob--readonly`.
+  &--readonly &__track,
+  &--readonly &__thumb {
+    cursor: default;
+  }
+
   &--disabled {
     --wr-slider-thumb-border: var(--wr-color-on-surface-muted);
     --wr-slider-fill: var(--wr-color-on-surface-muted);

package/spotlight-card/spotlight-card.scss

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