ngwr 12.1.0 → 12.2.0

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-select.d.ts

@@ -444,8 +444,18 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     /** Tag-mode draft (text currently typed in the inline input). @internal */
     protected readonly draft: _angular_core.WritableSignal<string>;
     /**
-     * Show a clear-all (×) button at the end of the chip row when at
-     * least one option is selected (multi mode only). @default true
+     * Show a clear (×) button once at least one option is selected.
+     *
+     * NOT multi-only, which this said for a long time and which the template
+     * refutes: only the button trigger gates on `isMulti()`, so the chips trigger
+     * AND a single `mode="search"` / `[searchable]` select carry it too. The
+     * wording mattered little while the default was `true`; it decides what a
+     * reader expects to lose now that it is not.
+     *
+     * The default changed from `true` to `false`: the affordance is opt-in, so a
+     * trigger that grew an × on its own no longer does — pass `clearable` to keep
+     * it. In `search` mode this also gates Backspace-to-clear on an empty field,
+     * since that key is the keyboard twin of this button. @default false
      */
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, any>;
     /**

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-declare const NGWR_VERSION = "12.1.0";
+declare const NGWR_VERSION = "12.2.0";
 
 /**
  * @license