ngwr 12.0.0 → 12.2.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/select/styles/_index.scss

@@ -36,7 +36,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 {
@@ -128,7 +136,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 +234,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 +262,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/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/stepper/styles/_index.scss

@@ -1,5 +1,13 @@
 @use '../../theme/styles' as theme;
 
+// The label's own line box, and the header button's block padding. Both are
+// declared once below and read back by the alignment arithmetic — the indicator
+// centres on the label's FIRST LINE, and the connector centres on the indicator,
+// so a literal repeated in three places is a defect waiting for someone to
+// change one of them.
+$label-line-height: 1.25rem;
+$header-padding-block: 0.25rem;
+
 .wr-stepper {
   --wr-stepper-indicator-size: 1.75rem;
   --wr-stepper-connector: var(--wr-color-outline);
@@ -33,9 +41,19 @@
     flex-direction: column;
   }
 
+  // `flex-start`, not `center`: a step that carries a hint line
+  // (`description` / `optional`) is TALLER than its neighbours, and centring
+  // every button in the row it defines drops the short steps' circles by half
+  // the difference — the whole row reads as misaligned because of one step.
+  // Anchored at the block start, every button's first line sits at the same y,
+  // and the connector places itself against the indicator (see `&__connector`)
+  // instead of riding the row's centre.
+  //
+  // A row of same-height steps is unaffected: with equal heights `center` and
+  // `flex-start` resolve identically.
   &__header {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     flex: 1 1 auto;
     gap: 0.75rem;
     min-width: 0;
@@ -59,13 +77,20 @@
     flex: 0 0 auto;
   }
 
+  // `flex-start` here for the same reason, one level in: the indicator is a
+  // fixed-size circle and the label is a column that grows a line whenever the
+  // step has a `description` or is `optional`. Centred against the whole block,
+  // the circle slides down as the label grows and stops belonging to the step's
+  // NAME. The label carries the compensating offset (see `&__label`) rather
+  // than the indicator carrying a negative one, so the circle stays inside the
+  // button's own box.
   &__header-button {
     appearance: none;
     background: transparent;
     border: 0;
-    padding: 0.25rem 0;
+    padding: $header-padding-block 0;
     display: inline-flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 0.625rem;
     color: var(--wr-color-on-surface);
     cursor: pointer;
@@ -119,7 +144,15 @@
     gap: 0.0625rem;
     font-size: var(--wr-text-sm);
     font-weight: 500;
-    line-height: 1.25rem;
+    line-height: $label-line-height;
+    // Centre the label's FIRST LINE on the indicator, now that both are anchored
+    // to the button's block start. Half the difference between the circle and one
+    // line box — derived, not typed, because `--wr-stepper-indicator-size` is a
+    // public custom property a consumer can retune. At the shipped 1.75rem this
+    // is 0.25rem, which is exactly where `align-items: center` used to put a
+    // single-line label: the one-line step renders pixel-for-pixel as before and
+    // only the multi-line one moves.
+    margin-block-start: calc((var(--wr-stepper-indicator-size) - #{$label-line-height}) / 2);
   }
 
   &__header--active &__label {
@@ -145,7 +178,13 @@
     height: 1.5px;
     background: var(--wr-stepper-connector);
     min-width: 1rem;
-    margin: 0 0.5rem;
+    // The row aligns its children to the block start now, so the line has to
+    // place itself on the indicator's centre instead of inheriting the row's.
+    // Button padding, plus half a circle, less half the line's own thickness.
+    // Same y the centred version produced for a row of equal-height steps — and
+    // unlike it, the same y when one step grows a hint line.
+    margin-block-start: calc(#{$header-padding-block} + var(--wr-stepper-indicator-size) / 2 - 0.75px);
+    margin-inline: 0.5rem;
   }
 
   &--vertical &__connector {

package/theme/styles/_mixins.scss

@@ -43,6 +43,16 @@
 /// }
 /// ```
 ///
+/// The reset has to sit on the element the mixin ran on. `corner-shape`
+/// does not inherit, so a component whose modifier is on the HOST while
+/// `smooth-br` is on a child needs to target that child — otherwise the
+/// declaration lands on an element that never had a squircle to undo,
+/// and, since `round` is the property's initial value, changes nothing
+/// at all. `wr-select` shipped that way: `.wr-select--rounded` set it on
+/// the host, the trigger kept `squircle` at the pill radius, and the
+/// control painted a near-rectangle — 2px of corner where a stadium
+/// wants 18.
+///
 /// @example scss
 ///   .thing {
 ///     @include smooth-br(0.625rem);

package/tree/styles/_index.scss

@@ -270,7 +270,10 @@
     // 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 instead of deciding one for itself — and an override
+    // of `--wr-tree-trigger-radius` carries the chips with it.
+    border-radius: var(--wr-tree-trigger-radius);
     background: var(--wr-color-primary-soft);
     // The chip wraps a label, so this paints text on the chip's own tint.
     color: var(--wr-color-primary-ink);
@@ -292,7 +295,12 @@
     justify-content: center;
     width: 1rem;
     height: 1rem;
-    border-radius: 999px;
+    // Concentric with the chip: inset from the chip's edge by its 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-tree-trigger-radius: 0` — a negative radius invalidates the
+    // whole declaration.
+    border-radius: max(0px, calc(var(--wr-tree-trigger-radius) - 2px));
     cursor: pointer;
     transition: background 0.12s ease;
 

package/types/ngwr-pagination.d.ts

@@ -111,6 +111,17 @@ declare class WrPagination {
     protected readonly navLabel: _angular_core.Signal<string>;
     /** Internal: total page count. */
     protected readonly totalPages: _angular_core.Signal<number>;
+    /**
+     * Internal: where the previous arrow goes. Clamped to the end of the valid
+     * range rather than being a plain `currentPage() - 1`, because the page can
+     * legitimately sit past that end while `total` is 0 (see the guard effect).
+     * From page 5 of one page, `goTo(4)` is refused as out of range, so the arrow
+     * was enabled and did nothing — and under `responsive` on a narrow box the
+     * numbered cells are hidden by a container query, which left no way back at
+     * all. `Math.min` only ever moves the target INWARD, so `goTo`'s own
+     * past-the-end refusal keeps working as the backstop it is.
+     */
+    protected readonly prevPage: _angular_core.Signal<number>;
     /** Internal: "X–Y of Z" string. */
     protected readonly rangeLabel: _angular_core.Signal<string>;
     /**

package/types/ngwr-segmented-testing.d.ts

@@ -194,6 +194,17 @@ declare class WrSegmentedOptionHarness extends ComponentHarness {
  * - Activation is the browser's own default action on a button, which jsdom does not
  *   implement, so {@link select} clicks — see {@link WrSegmentedOptionHarness.select}.
  *
+ * **It is a signal-forms control**, which adds two things to read here and one that
+ * cannot be read at all. `[formField]` binds the component's own `value` model, and a
+ * surrounding `<wr-form-field>` publishes its state onto the GROUP —
+ * {@link isInvalid} and {@link getDescriptionText} answer that, on the host rather
+ * than per segment, because the strip is one field and a description repeated on
+ * every segment would be announced once per Tab. What is NOT here is the field's
+ * `touched` flag: the component only emits `touch`, and whether anything listened is
+ * a fact about the form, not about this DOM — assert it on the field.
+ * {@link blur} is how a spec gets there, and it is the ONLY route: a click does not
+ * mark a field touched, and neither does moving from one segment to the next.
+ *
  * **There is deliberately no `getValue()` and no selection by value.** `options` is
  * a bound array of `{ value, label, … }` and the value is a generic `T` the component
  * writes nowhere — not on the host, not on a segment. The single exception is an
@@ -339,6 +350,39 @@ declare class WrSegmentedHarness extends ComponentHarness {
      * {@link getTabStopLabels} gives.
      */
     getFocusedLabel(): Promise<string | null>;
+    /**
+     * Whether the surrounding `<wr-form-field>` is reporting this control invalid, from
+     * `aria-invalid` on the host.
+     *
+     * `false` for a control with no field around it, and `false` for a field that is
+     * invalid but has not shown its copy yet: the component keys the attribute on the
+     * MESSAGE existing rather than on the error, because announcing "invalid" while
+     * pointing at nothing is worse than staying quiet. So this and
+     * {@link getDescriptionText} move together, and a `true` with no description would
+     * be the finding.
+     */
+    isInvalid(): Promise<boolean>;
+    /**
+     * The text `aria-describedby` points at — the validation copy a screen reader is
+     * given for this control — or `null` when the host describes nothing.
+     *
+     * Resolved from the document root, because the element named may sit anywhere on
+     * the page, and THROWS when the reference resolves to no element: a dangling
+     * `aria-describedby` renders exactly like a working one and is announced as
+     * nothing, so returning `null` for it would report the bug as the healthy state.
+     */
+    getDescriptionText(): Promise<string | null>;
+    /**
+     * Take focus off the strip entirely — what marks a bound field touched, and the
+     * only thing that does.
+     *
+     * The component emits `touch` from a `focusout` that leaves the host, so a click
+     * does not reach it and neither does Tab from one segment to the next: a strip a
+     * user tabbed straight past has to end up untouched, which is the case `touched`
+     * exists for. Resolves quietly when nothing inside was focused, since that is
+     * already the state this asks for.
+     */
+    blur(): Promise<void>;
     /**
      * The index the component publishes for the thumb, from the
      * `--wr-segmented-thumb-index` custom property it sets inline.