ngwr 14.6.0 → 14.8.0

package/alert/styles/_index.scss

@@ -100,9 +100,20 @@ $alert-colors: (
       color var(--wr-transition-base),
       background var(--wr-transition-base);
 
-    --wr-icon-size: 1rem;
-
-    @include theme.touch-target; // ~20px glyph -> 44px tap area on touch
+    // The ✕ is a bare `.wr-icon__svg`, which is `1em`, and a `<button>` does not
+    // inherit its font-size: it takes the browser's control font (about 13.33px)
+    // unless the app resets it. So the same glyph measured 13.33px on a page with
+    // no reset and the surrounding text's size under `ngwr/reset`, which sets
+    // `font: inherit`. Inheriting the size makes `1em` the alert's own text in
+    // every app. `--wr-icon-size` cannot do this job — only a `<wr-icon>` host
+    // reads it, and the rule here used to set it for nothing. The SIZE only,
+    // never the `font` shorthand, which would bring the line-height with it; and
+    // no `line-height` of its own either, the way `wr-dialog` needs one — the
+    // alert stretches its row, so this box is the alert's height whatever the
+    // strut says.
+    font-size: inherit;
+
+    @include theme.touch-target; // glyph -> 44px tap area on touch
 
     &:hover {
       color: var(--wr-alert-title);

package/avatar/styles/_index.scss

@@ -7,6 +7,13 @@
   --wr-avatar-radius: 10%;
   --wr-avatar-img-opacity: 0;
   --wr-avatar-ring: var(--wr-color-border);
+  // The most of the box projected initials may take, as a share of the size the
+  // host publishes as `--wr-avatar-size`. Measured rather than picked: at 0.375
+  // the widest capital pairs (`ЖШ`, `WW`) in Inter, Geist and the system face, at
+  // weights 400 to 700, keep every inked pixel at least 14% of the radius inside
+  // a circle from 16px to 40px; at 0.4 the semibold `WW` in a 16px circle was
+  // down to 0.6px.
+  --wr-avatar-initials-scale: 0.375;
 
   display: inline-flex;
   align-items: center;
@@ -41,6 +48,43 @@
   // setting a consumer put on the host) exactly as before this wrapper existed.
   &__content {
     display: contents;
+    // Inert: a click on the letters belongs to whatever holds the avatar (a chip,
+    // a link, a row), and a selection dragged across a list of people should not
+    // pick up their initials. Both reach the text through inheritance, which is
+    // what a `contents` box still does.
+    user-select: none;
+    pointer-events: none;
+    // No `line-height` or `white-space` here: both inherit already, and setting
+    // them changed a 6rem avatar — a longer fallback stopped wrapping and was
+    // clipped on both sides, and a projected `rem`-sized span moved by a pixel.
+  }
+
+  // Projected initials take the text around the avatar, and never more than
+  // `--wr-avatar-initials-scale` of the box. `min()` against `1em` (the inherited
+  // size) is what keeps this to the avatars that need it: a 6rem one beside 16px
+  // text keeps its 16px exactly, and a 16px one in a 14px chip draws 6px letters
+  // instead of 14px ones clipped by its own edge. The cap bites wherever the
+  // inherited size is larger than that share, and that includes a 6rem avatar
+  // inside text bigger than 36px (its share at the default root size). Anything
+  // projected that is sized in `em` follows the cap, a `<wr-icon>` included.
+  //
+  // On the HOST rather than on `__content`, because a `contents` wrapper has no
+  // line box of its own: its text is laid out on the host's, whose strut keeps
+  // the host's font. Shrinking only the wrapper's text sat the letters on the
+  // baseline of the bigger strut, about 4px below centre in a 16px circle.
+  //
+  // Only while something is projected, because the spinner drawn when nothing
+  // is sizes itself in `em` too, and it has no business shrinking. A size the
+  // host did not publish leaves the `var()` unresolved, and the declaration
+  // falls back to inheriting.
+  //
+  // `:where()` around the WHOLE selector leaves it no specificity, so any
+  // unlayered `font-size` rule a consumer writes for the avatar — a type, class
+  // or attribute selector, loaded before this stylesheet or after it — still
+  // wins. A rule inside a cascade layer does not (Tailwind v4 ships its
+  // utilities in one): unlayered CSS beats layered CSS whatever the selector.
+  :where(&:has(> .wr-avatar__content:not(:empty))) {
+    font-size: min(1em, var(--wr-avatar-size) * var(--wr-avatar-initials-scale));
   }
 
   // Once loaded, how the fallback leaves the paint follows whether the image is

package/bar-chart/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
 
 .wr-bar-chart {
   display: block;

package/calendar-heatmap/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
 
 .wr-calendar-heatmap {
   display: inline-block;

package/cascader/styles/_rules.scss

@@ -2,6 +2,8 @@
 // is a horizontal row of columns where each column lists the children
 // of the previously-active node. Picking a leaf commits the path.
 
+@use '../../theme/styles/mixins' as theme;
+
 // `focus` is the one theme partial these rules still load that emits CSS of its
 // own — the shared ring mixin lives in the same file as the baseline
 // `.wr-*:focus-visible` rules, and there is no mixin-only module to take it from.
@@ -21,15 +23,49 @@
   --wr-cascader-line-height: var(--wr-control-line-height-md);
   --wr-cascader-col-width: 12rem;
   --wr-cascader-max-height: 16rem;
-  // Trigger width floor — hooked for the same reason as `--wr-select-min-width`:
-  // in a narrow grid column the literal wins over `minmax(0, 1fr)` and the
-  // trigger overhangs its cell, and the only escape was overriding
-  // `.wr-cascader__trigger` from outside. Set it to 0 to defer to the layout.
+  // Trigger width floor, the same contract as `--wr-select-min-width`. Despite
+  // the name it is a DEFAULT width rather than a minimum: an explicit `width`,
+  // `width: 100%` in a narrow parent, a `minmax(0, 1fr)` cell and a shrinking
+  // flex item all win over it (see `::after` below). Set it to 0 to size a bare
+  // cascader to its path alone. This hook is the only way to lower it: a
+  // `min-width` on `.wr-cascader__trigger`, the override that did it before the
+  // hook existed, no longer reaches the floor.
   --wr-cascader-min-width: 12rem;
 
-  display: inline-flex;
+  // One column that shrinks to whatever the layout gives it and, left to size
+  // itself, grows to the widest thing in it — the trigger's path or the floor.
+  // The floor used to be a `min-width` on the trigger, which no width on the
+  // host could beat: `style="width: 6rem"` drew a 192px trigger in a 96px host.
+  // `minmax(0, …)` also drops the path's text from the host's min-content —
+  // together the two held a cascader showing a path at 210px in a 200px flex
+  // row beside a 120px sibling, 138px past the row's edge — so it now shrinks
+  // as a flex item the way `[wrInput]` does and the path truncates instead.
+  display: inline-grid;
+  grid-template-columns: minmax(0, 1fr);
+  // The spacer below lands in a row of its own, and it must be a FIXED 0 rather
+  // than an implicit `auto` one: a grid shares height beyond its content among
+  // its auto rows, so a host stretched by a taller flex or grid row, or given a
+  // `height`, drew a 45px trigger in a 60px host with an empty band beneath it.
+  grid-template-rows: auto 0;
   vertical-align: middle;
 
+  // The floor as a zero-height spacer in the same column. A grid track's
+  // max-content is its widest item, so a host sized to its content is at least
+  // `--wr-cascader-min-width` wide; `max-width: 100%` is ignored while that
+  // size is being worked out and applies once the column exists, so a narrower
+  // host caps the spacer instead of the spacer stretching the host. `flex: 0 0
+  // 0` keeps it from taking room beside the trigger if a consumer turns the
+  // host into a flex container (the floor is then inert, never in the way). The
+  // template renders exactly one element into the host — the trigger — so this
+  // is the column's only other item, and the zero row is the spacer's.
+  &::after {
+    content: '';
+    flex: 0 0 0;
+    width: var(--wr-cascader-min-width);
+    max-width: 100%;
+    height: 0;
+  }
+
   &--disabled {
     --wr-cascader-color: var(--wr-color-on-surface-muted);
     --wr-cascader-bg: var(--wr-color-fill);
@@ -57,7 +93,10 @@
     align-items: center;
     gap: 0.5rem;
     width: 100%;
-    min-width: var(--wr-cascader-min-width);
+    // Not the floor — that lives on the host, where a width can beat it. Zero
+    // lets the trigger follow the host down and the path's ellipsis take the
+    // difference.
+    min-width: 0;
     appearance: none;
     background: var(--wr-cascader-bg);
     color: var(--wr-cascader-color);
@@ -86,6 +125,20 @@
     &:disabled {
       cursor: not-allowed;
     }
+
+    // The ×'s touch halo (on `__clear`) CLEARS the path, and nothing undoes that,
+    // so it must never reach past the control it belongs to. A 32px halo on a 22px
+    // `sm` trigger overhung its border by 5px above and below, and a tap 3px above
+    // the trigger, on whatever sits over it, cleared this one. Clipping the block
+    // axis bounds the halo to the trigger's own padding box: 20 / 28 / 32px tall
+    // for sm / md / lg, and still inside under any padding, line-height or density.
+    // A cap re-derived from the hooks overhung again on md and lg as soon as the
+    // trigger's `padding-block` was set directly. `clip` rather than `hidden`, so
+    // there is no scroll container and no baseline change, and the inline axis stays
+    // visible.
+    @media (pointer: coarse) {
+      overflow-y: clip;
+    }
   }
 
   // A read-only trigger still takes focus and still shows its path, so it keeps
@@ -105,6 +158,13 @@
   &__value,
   &__placeholder {
     flex: 1 1 auto;
+    // The text line is what gives the trigger its size's height, so it has to
+    // exist when there is no text. Nothing chosen and no placeholder left an
+    // empty span with no line box, and the trigger fell to the chevron's 1em:
+    // measured 18 / 24 / 28px for sm / md / lg, where the contract is 22 / 30 / 36.
+    // `1lh` is the span's own line, not the hook, so a `line-height` set on the
+    // trigger itself shortens an empty trigger the same way it shortens a filled one.
+    min-height: 1lh;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -115,7 +175,6 @@
   }
 
   &__chevron {
-    --wr-icon-size: 1rem;
     flex: 0 0 auto;
     color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
@@ -126,12 +185,19 @@
   }
 
   &__clear {
-    --wr-icon-size: 0.875rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 1.125rem;
     height: 1.125rem;
+    // Never adds to the text line, so choosing a value cannot resize the trigger.
+    // The 18px circle is taller than `sm`'s 16px line and made an `sm` cascader
+    // with a value 24px tall. A symmetric negative margin of at least half the box
+    // takes the × out of the line's cross size, for any box up to 2rem, and
+    // `align-items: center` keeps the circle centred as drawn. A margin worked out
+    // from the hook and the 18px literal let a restyled `.wr-cascader__clear` grow
+    // the trigger again: a 24px box made sm / md / lg 28 / 36 / 42px with a value.
+    margin-block: -1rem;
     border-radius: 999px;
     color: var(--wr-color-on-surface-muted);
     cursor: pointer;
@@ -143,6 +209,15 @@
       background: rgba(var(--wr-color-on-surface-rgb), 0.06);
       color: var(--wr-color-on-surface);
     }
+
+    // The same 32px tap area the × has always had on touch, as a halo rather
+    // than a box. Growing the box itself put 32px inside the text line: with a
+    // value, sm / md / lg measured 38 / 42 / 44px under a coarse pointer against
+    // 22 / 30 / 36 without one, so `lg` read as `md` and a pick moved the row.
+    // 2rem rather than the mixin's 44px default, which would reach over the
+    // chevron 8px away and turn a tap meant to open the panel into a clear. The
+    // trigger clips the halo's height to its own (see `__trigger`).
+    @include theme.touch-target($size: 2rem);
   }
 }
 
@@ -234,7 +309,6 @@
   }
 
   .wr-cascader__opt-arrow {
-    --wr-icon-size: 0.875rem;
     flex: 0 0 auto;
     color: var(--wr-color-on-surface-muted);
   }
@@ -247,16 +321,10 @@
   }
 }
 
-// Touch pointers: grow the clear button and make the column option rows ~44px
-// tall so each is a comfortable tap target. Fine pointers keep the compact
-// desktop sizing above.
+// Touch pointers: make the column option rows ~44px tall so each is a
+// comfortable tap target (the clear button's own tap area is on `__clear`).
+// Fine pointers keep the compact desktop sizing above.
 @media (pointer: coarse) {
-  .wr-cascader__clear {
-    --wr-icon-size: 1.125rem;
-    width: 2rem;
-    height: 2rem;
-  }
-
   .wr-cascader-panel .wr-cascader__opt {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;

package/collapse/styles/_index.scss

@@ -48,7 +48,6 @@
   }
 
   &__chevron {
-    --wr-icon-size: 1rem;
     flex: 0 0 auto;
     color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);

package/date-picker/styles/_index.scss

@@ -1,5 +1,20 @@
 @use '../../theme/styles' as theme;
 
+// The refusal's live region — a screen reader's copy of what the border says. One
+// element per block, since a BEM class is public API: the range picker's is its own.
+.wr-date-picker__sr-only,
+.wr-date-range-picker__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .wr-date-picker {
   display: inline-block;
 
@@ -51,6 +66,21 @@
   }
 }
 
+// A typed entry the picker refused, once it is on show (Enter, or leaving the
+// field). The group owns the border — it strips the inner input's — so the hook
+// is the group's, set exactly as `.wr-form-field--invalid` sets it, and at the
+// same (0,3,0) so a focused group's primary border does not win it back while
+// the user is correcting the text.
+// color-ok: the colour is the SIGHTED half of a state that is not carried by
+// colour alone — the input takes `aria-invalid` and the reason is announced
+// through the picker's live region, or through the surrounding field's message.
+// `danger` against the default `--wr-color-outline` also separates in lightness
+// (3.11:1 light), so the cue survives greyscale.
+.wr-date-picker.wr-date-picker--invalid .wr-input-group,
+.wr-date-range-picker.wr-date-range-picker--invalid .wr-input-group {
+  --wr-input-group-border: var(--wr-color-danger);
+}
+
 // Overlay pane — z-index isolation only. <wr-calendar> + the time panel
 // bring their own chrome.
 .wr-date-picker-overlay {

package/density/styles/_index.scss

@@ -11,8 +11,10 @@
 :root {
   --wr-density-y: 1;
   --wr-density-x: 1;
-  // `-text` and `-gap` are declared for consumers to read; no shipped
-  // component multiplies by either yet. `-y` / `-x` are the live ones.
+  // `-text` is declared for consumers to read; no shipped component multiplies
+  // by it yet. `-gap` scales the space a layout component puts between the
+  // controls projected into it, and is there for consumers to read as well.
+  // `-y` / `-x` are the padding multipliers.
   --wr-density-text: 1;
   --wr-density-gap: 1;
 }

package/donut-chart/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
 
 .wr-donut-chart {
   display: inline-flex;
@@ -27,6 +28,15 @@
     align-items: center;
     justify-content: center;
     text-align: center;
+    // The box covers the whole drawing, so it took every pointer event meant for
+    // the arcs under it and no slice could be hovered. Only the text itself is
+    // hittable, which keeps it selectable.
+    pointer-events: none;
+  }
+
+  &__center-value,
+  &__center-label {
+    pointer-events: auto;
   }
 
   &__center-value {

package/dropdown/styles/_index.scss

@@ -1,5 +1,17 @@
 @use '../../theme/styles' as theme;
 @use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode
+@use '../../overlay/styles/arrow';
+
+/// Gap between the trigger and the menu, as pane padding on the edge facing the
+/// trigger. Padding rather than a CDK offset so a pointer crossing it is still
+/// over the overlay — a `trigger="hover"` menu closes the moment the pointer is
+/// anywhere else.
+$gap: 0.25rem;
+
+/// The gap with the arrow on. The arrow reaches `arrow.$half + 1px` (4px) out of
+/// the menu's border, so the plain gap would put its tip ON the trigger; this is
+/// the 8px `wr-popover` keeps, leaving the same 4px between tip and control.
+$arrow-gap: 0.5rem;
 
 // The directive marks its host `.wr-dropdown-trigger` — `.wr-dropdown` below is
 // reachable only if a consumer applies it by hand, which is why it stays: the
@@ -41,17 +53,19 @@
 }
 
 .wr-dropdown-overlay {
-  // Positional offsets between trigger and menu by side.
+  // Positional offsets between trigger and menu by side. The directive swaps the
+  // placement class when the menu flips, so the gap moves to the edge that faces
+  // the trigger from where it actually opened.
   &--top,
   &--top-start,
   &--top-end {
-    padding-bottom: 0.25rem;
+    padding-bottom: $gap;
   }
 
   &--bottom,
   &--bottom-start,
   &--bottom-end {
-    padding-top: 0.25rem;
+    padding-top: $gap;
   }
 
   // The gap sits on the pane edge that faces the trigger. `left` / `right` map
@@ -59,12 +73,60 @@
   // `FlexibleConnectedPositionStrategy` already resolves against the ambient
   // `Directionality` — so the padding has to follow the same axis, logically.
   &--left {
-    padding-inline-end: 0.25rem;
+    padding-inline-end: $gap;
   }
 
   &--right {
-    padding-inline-start: 0.25rem;
+    padding-inline-start: $gap;
   }
+
+  // Same edges, wider, when the arrow is drawn. The placement half sits inside
+  // `:where()`, so each rule weighs ONE class, exactly like its plain twin above,
+  // and wins on source order alone. Two classes of weight would also beat a
+  // consumer's own `.wr-dropdown-overlay--bottom-start { padding-top: … }` —
+  // which has been the only way to retune this gap, since it has no hook — and
+  // with the arrow on by default every such override would be silently ignored.
+  &--arrow {
+    &:where(.wr-dropdown-overlay--top, .wr-dropdown-overlay--top-start, .wr-dropdown-overlay--top-end) {
+      padding-bottom: $arrow-gap;
+    }
+
+    &:where(.wr-dropdown-overlay--bottom, .wr-dropdown-overlay--bottom-start, .wr-dropdown-overlay--bottom-end) {
+      padding-top: $arrow-gap;
+    }
+
+    &:where(.wr-dropdown-overlay--left) {
+      padding-inline-end: $arrow-gap;
+    }
+
+    &:where(.wr-dropdown-overlay--right) {
+      padding-inline-start: $arrow-gap;
+    }
+  }
+}
+
+// The arrow — the rotated square `wr-popover` and `wr-popconfirm` draw, from the
+// same mixin, so the three anchored panels cannot drift apart. Filled and
+// outlined from the menu's OWN hooks rather than the tokens behind them: a
+// consumer who retints one menu through `--wr-dropdown-bg` / `-border` would
+// otherwise get an arrow in the old colours. The `::after` inherits the hooks
+// from the menu it belongs to, so the per-instance value reaches it.
+//
+// Eight placements, not twelve: `WrDropdownPosition` has no `left-start` and
+// friends, and those rules could never match.
+@include arrow.anchored-arrow(
+  $pane: '.wr-dropdown-overlay',
+  $panel: '> .wr-dropdown-menu',
+  $background: var(--wr-dropdown-bg),
+  $border: var(--wr-dropdown-border),
+  $placements-used: (top, top-start, top-end, bottom, bottom-start, bottom-end, left, right)
+);
+
+// `[arrow]="false"` — the directive leaves `--arrow` off the pane and the square
+// is never generated. The mixin's own sheet rule covers `responsive`, which gets
+// no `--arrow` either.
+.wr-dropdown-overlay:not(.wr-dropdown-overlay--arrow) > .wr-dropdown-menu::after {
+  content: none;
 }
 
 .wr-dropdown-item {