ngwr 13.0.1 → 14.0.1

package/spotlight-card/styles/_dark.scss

@@ -0,0 +1,21 @@
+// Dark theme: `--wr-color-on-surface-rgb` already flips to a light
+// value, so the default tint becomes a light beam on the navy surface — nudge
+// the alpha up a touch so it reads as bright as the classic spotlight.
+//
+// Keyed on `theme.dark-selector()`, never on a literal `[data-theme='dark']`.
+// The attribute is renameable — `@use 'ngwr' with ($theme-attribute: '…')`
+// alongside `provideWrTheme({ attribute: '…' })` — and a hand-written literal
+// misses the rename in both directions: this block stops firing under the
+// configured name, and it keeps firing under `data-theme`, which is the
+// attribute a foreign design system owns and the rename exists to escape.
+//
+// It lives outside the `styleUrl` closure for the same reason. A component
+// stylesheet is compiled when the LIBRARY is built, where `$theme-attribute` can
+// only ever be the default, and Angular appends that copy after the app's linked
+// sheet — so an inlined literal would not merely be dead, it would outrank the
+// correctly-named rule beside it.
+@use '../../theme/styles' as theme;
+
+#{theme.dark-selector()} .wr-spotlight-card {
+  --wr-spotlight-color: rgba(var(--wr-color-on-surface-rgb), 0.22);
+}

package/spotlight-card/styles/_index.scss

@@ -11,5 +11,10 @@
 // box-sizing reset into the compiled component styles, which ng-packagr then
 // embeds in the FESM bundle as a string. `spotlight-card.scss` forwards `_rules`
 // instead, so it carries this component's own CSS and nothing else.
+//
+// `_dark` is loaded from HERE for a second reason: its selector is built out of
+// `$theme-attribute`, which only a stylesheet compiled by the consuming app can
+// configure, so a copy inside the bundle could only ever carry the default name.
 @use '../../theme/styles';
 @forward 'rules';
+@forward 'dark';

package/spotlight-card/styles/_rules.scss

@@ -39,9 +39,3 @@
   }
 }
 
-// Dark mode: `--wr-color-on-surface-rgb` already flips to a light value, so the
-// default tint above becomes a light beam on the navy surface — nudge the
-// alpha up a touch so it reads as bright as the classic spotlight.
-[data-theme='dark'] .wr-spotlight-card {
-  --wr-spotlight-color: rgba(var(--wr-color-on-surface-rgb), 0.22);
-}

package/star-border/styles/_dark.scss

@@ -0,0 +1,21 @@
+// Dark theme.
+//
+// Keyed on `theme.dark-selector()`, never on a literal `[data-theme='dark']`.
+// The attribute is renameable — `@use 'ngwr' with ($theme-attribute: '…')`
+// alongside `provideWrTheme({ attribute: '…' })` — and a hand-written literal
+// misses the rename in both directions: this block stops firing under the
+// configured name, and it keeps firing under `data-theme`, which is the
+// attribute a foreign design system owns and the rename exists to escape.
+//
+// It lives outside the `styleUrl` closure for the same reason. A component
+// stylesheet is compiled when the LIBRARY is built, where `$theme-attribute` can
+// only ever be the default, and Angular appends that copy after the app's linked
+// sheet — so an inlined literal would not merely be dead, it would outrank the
+// correctly-named rule beside it.
+@use '../../theme/styles' as theme;
+
+#{theme.dark-selector()} .wr-star-border {
+  --wr-star-border-color: #ffffff;
+  --wr-star-border-stop: 10%;
+  --wr-star-border-opacity: 0.7;
+}

package/star-border/styles/_index.scss

@@ -11,5 +11,10 @@
 // box-sizing reset into the compiled component styles, which ng-packagr then
 // embeds in the FESM bundle as a string. `star-border.scss` forwards `_rules`
 // instead, so it carries this component's own CSS and nothing else.
+//
+// `_dark` is loaded from HERE for a second reason: its selector is built out of
+// `$theme-attribute`, which only a stylesheet compiled by the consuming app can
+// configure, so a copy inside the bundle could only ever carry the default name.
 @use '../../theme/styles';
 @forward 'rules';
+@forward 'dark';

package/star-border/styles/_rules.scss

@@ -82,11 +82,6 @@
   }
 }
 
-[data-theme='dark'] .wr-star-border {
-  --wr-star-border-color: #ffffff;
-  --wr-star-border-stop: 10%;
-  --wr-star-border-opacity: 0.7;
-}
 
 @keyframes wr-star-border-bottom {
   0% {

package/stepper/styles/_index.scss

@@ -95,7 +95,17 @@ $header-padding-block: 0.25rem;
     color: var(--wr-color-on-surface);
     cursor: pointer;
     text-align: start;
-    flex: 0 0 auto;
+    // Shrinkable, with a floor of nothing. `flex: 0 0 auto` froze the button at
+    // its max-content width, so the `<li>`'s own `min-width: 0` bought nothing:
+    // the row shrank and the button overflowed it. English hid this — the defect
+    // needs a label the row cannot fit, which is what a translation is. Measured
+    // in Chromium at a 375px viewport, three steps: `Übersichtsdarstellung /
+    // Grundeinstellungen / Rechnungsstellung` pushed the DOCUMENT to 423px, so
+    // the whole page scrolled sideways and the last label ran off the screen; the
+    // Finnish and Japanese sets did the same by 16px. A horizontal stepper is a
+    // full-width row of unbounded strings — it has to be able to give.
+    flex: 0 1 auto;
+    min-width: 0;
 
     &:disabled {
       cursor: not-allowed;
@@ -145,6 +155,14 @@ $header-padding-block: 0.25rem;
     font-size: var(--wr-text-sm);
     font-weight: 500;
     line-height: $label-line-height;
+    // The other half of the shrink above: a flex item's automatic minimum size
+    // is its min-content width, and for a German compound noun that IS the whole
+    // word, so the button would shrink and the label would not. `break-word`
+    // only splits a word that cannot fit a line of its own, so nothing changes
+    // until the row is genuinely too narrow — and nothing changes at all in
+    // English or above 768px, measured.
+    min-width: 0;
+    overflow-wrap: break-word;
     // 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

package/textarea/styles/_index.scss

@@ -94,12 +94,13 @@
   // cursor follow the `resize` direction.
   &__resize {
     position: absolute;
-    // `textarea.ts` starts the drag from `event.clientX` and applies
-    // `startWidth + (clientX - startX)`, so the grip has to sit on the physical
-    // side a growing width extends toward. Flip it only together with that sign,
-    // once the drag maths itself reads `Directionality`.
-    // rtl-ok: paired with the physical clientX drag maths in textarea.ts
-    right: 0.25rem;
+    // Logical now, and the drag maths moved with it: `onResize` reads
+    // `Directionality` and negates the `clientX` delta under `dir="rtl"`, because
+    // a block-level box is anchored at its inline START and grows toward its
+    // inline END — physically right in LTR, physically left in RTL. The grip has
+    // to sit on the corner the box actually extends toward, so the two halves
+    // must be changed together or not at all.
+    inset-inline-end: 0.25rem;
     bottom: 0.25rem;
     display: inline-flex;
     color: var(--wr-color-text-faint);
@@ -113,7 +114,14 @@
       cursor: ew-resize;
     }
     &--both {
+      // The diagonal cursor names two physical corners, so it is the one cue here
+      // that has no logical spelling: at the bottom-LEFT corner an RTL field grows
+      // along the north-east / south-west diagonal instead.
       cursor: nwse-resize;
+
+      [dir='rtl'] & {
+        cursor: nesw-resize;
+      }
     }
 
     .wr-icon__svg {

package/theme/styles/_colors.scss

@@ -8,6 +8,38 @@
 //   @use 'ngwr/theme/styles/colors' with (
 //     $base-colors: (primary: #...)
 //   );
+//
+// **This is the LIGHT palette, and configuring it does not reach the dark
+// theme.** `_dark.scss` re-tunes the intents by hand for the dark canvas and
+// hard-codes what it lands on, so an app that seeds an indigo `primary` here
+// gets indigo in light and the shipped `#3567ff` in dark, with nothing said
+// about it — which is exactly how it reads as a bug rather than a boundary.
+//
+// It is a boundary, and the deriving is what could not be shipped. The dark
+// intents are not the light ones lightened: `success` and `danger` are moved
+// 33% and 21% to clear the black/white flip point on a dark ground, `warning`
+// is deliberately left alone because white cannot reach it at any tone worth
+// shipping, and `primary` is deepened until its label can go white — a
+// direction no formula would take on its own. A `color.scale()` applied to an
+// arbitrary seed reproduces none of that; what it reproduces is the class of
+// failure the hand-tuning exists to prevent, silently, in the theme where
+// nobody looks first. Deriving the dark palette from the seed would trade a
+// visible wrong colour for an invisible failing contrast ratio, and that is
+// the worse of the two.
+//
+// So carry a rebrand across yourself, with the same arithmetic the light
+// palette uses. `rebrand()` below is that arithmetic:
+//
+//   @use 'ngwr/theme' as theme;
+//
+//   @include theme.dark {
+//     @include theme.rebrand((primary: #818cf8));
+//   }
+//
+// Pick the dark seed for the dark canvas rather than reusing the light one, and
+// measure it — `pnpm check:contrast` in this repo, axe or any contrast checker
+// in yours. `contrast()` is exported for the same reason: it tells you which
+// label a candidate fill will get before you ship it.
 
 // Five intents are deliberately deeper than their "brand" tone, and the reason is
 // arithmetic rather than taste. `_contrast()` picks whichever of black / white
@@ -319,6 +351,76 @@ $contrast-light: #ffffff !default;
   --wr-color-dark-ink: var(--wr-color-dark);
 }
 
+/// Re-emit an intent's WHOLE token set on the current selector, from one seed.
+///
+/// `$colors` is a map of intent name to base colour, keyed by the same nine
+/// names as `$base-colors`. Anything else is an `@error`: a typo would otherwise
+/// emit a family of `--wr-color-brnad-*` properties that resolve for nothing.
+///
+/// **This is the supported way to recolour a SUBTREE, and hand-writing the three
+/// obvious properties is not.** Setting `--wr-color-primary`, its `-rgb` and its
+/// `-contrast` on a `.marketing` wrapper looks like it should be enough, and the
+/// guide used to say so. It is not, for two separate reasons, and each hits a
+/// different half of the set:
+///
+/// - `-dark`, `-darker`, `-light` and `-lighter` are `color.adjust()` — Sass
+///   arithmetic, resolved when the stylesheet is COMPILED. No runtime value can
+///   feed them, so a pink subtree kept a blue `:hover`, which is `-dark`.
+/// - `-soft`, `-soft-border`, `-soft-contrast`, `-active` and `-ink` are written
+///   in terms of `var()`, which is the mechanism that lets them re-derive — but
+///   a custom property's references are substituted ON THE ELEMENT THAT DECLARES
+///   IT, and these are declared at `:root`. What inherits into the subtree is
+///   the substituted literal, so an outlined button inside a pink section drew a
+///   pink border around blue text: `-ink` had been frozen two levels up. It is
+///   the same trap `derived()` documents for a scoped dark block, arriving by a
+///   different door.
+///
+/// So the mixin does both halves: it recomputes the four shades and the contrast
+/// pick in Sass, then re-includes `derived()` so every composed token resolves
+/// against the bases on THIS element.
+///
+/// ```scss
+/// @use 'ngwr/theme' as theme;
+///
+/// .marketing {
+///   @include theme.rebrand((primary: #be123c));
+/// }
+/// ```
+///
+/// It is compile-time, so the seed has to be known when the app's stylesheet is
+/// built. For a colour chosen at runtime — a tenant, a builder, a preset picked
+/// from a registry — reach for `wrThemeTokens()` from `ngwr/theme` instead; it
+/// is the same recipe in TypeScript.
+///
+/// The dark theme needs the same treatment and does not get it for free: see the
+/// note on `$base-colors` for why compile-time configuration is light-only, and
+/// wrap this in `theme.dark` to carry a rebrand across.
+@mixin rebrand($colors) {
+  @each $name, $base in $colors {
+    @if not map.has-key($base-colors, $name) {
+      @error 'rebrand(): unknown intent `#{$name}`. Expected one of: #{map.keys($base-colors)}.';
+    }
+
+    --wr-color-#{$name}: #{$base};
+    --wr-color-#{$name}-rgb: #{_rgb-channels($base)};
+    --wr-color-#{$name}-contrast: #{_contrast($base)};
+    --wr-color-#{$name}-dark: #{color.adjust($base, $lightness: -5%)};
+    --wr-color-#{$name}-darker: #{color.adjust($base, $lightness: -10%)};
+    // unused-ok: `-light` and `-lighter`, for the reason their `:root` twins
+    // carry — hover and active DEEPEN an intent, so the catalog reads `-dark` /
+    // `-darker` and never these two, and a shade set with holes in it is worse
+    // than one half of which is for consumers. They are here rather than only
+    // there because a rebrand has to emit the SAME set the `:root` loop does: a
+    // subtree that redefines four shades out of six leaves a consumer's own
+    // `var(--wr-color-primary-lighter)` on the page palette, which is the
+    // half-recoloured subtree this mixin exists to end.
+    --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
+    --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
+  }
+
+  @include derived;
+}
+
 :root {
   // Declared here so the light token set also claims the light UA scheme.
   // Without it the browser fell back to the OS preference, and an app running

package/theme/styles/_focus.scss

@@ -18,6 +18,35 @@
   box-shadow: 0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);
 }
 
+// Button — `wr-btn`, `button[wr-btn]` and `a[wr-btn]` all carry `.wr-btn` on the
+// element that takes focus, so one rule covers all three forms, and with them
+// every control BUILT out of a button: the pagination page cells and its prev /
+// next arrows are `<wr-btn>` elements with a `.wr-pagination__*` class beside
+// this one.
+//
+// It was missing until v14.1, and the button is the widest hole that could have
+// been left: `--wr-focus-ring-*` is documented as "retheme the ring once and
+// every control follows", and rethemed the ring on nine components while the
+// most-used control in the catalog kept the UA outline — which no token
+// reaches, does not honour `--wr-focus-ring-width`, and renders differently in
+// every browser. The rule sits here rather than in `button/styles` because this
+// file IS the ring's home; a second hand-rolled copy is what the mixin exists to
+// prevent.
+//
+// Safe as an OUTSET ring: `.wr-btn` sets no `overflow`, and the one place
+// buttons are packed edge to edge — `.wr-btn-group` — already raises the focused
+// segment with `z-index: 1`, so the ring paints over its neighbours instead of
+// under them.
+.wr-btn:focus-visible {
+  @include focus-ring;
+}
+
+// Table column-sort control — a bare `<button>` inside `.wr-table__th-inner`,
+// with no focus style of its own.
+.wr-table__sort-btn:focus-visible {
+  @include focus-ring;
+}
+
 // Tabs — `.wr-tabs__strip` is `overflow-y: hidden` (to suppress a stray
 // vertical scrollbar) and its box is exactly the tab's height, so an outset
 // ring loses both horizontal strokes and renders as two disconnected bars.
@@ -102,7 +131,8 @@
   @include focus-ring;
 }
 
-// Pagination ellipsis is non-interactive; page buttons inherit wr-btn focus.
+// Pagination ellipsis is non-interactive; page buttons take the `.wr-btn` rule
+// at the top of this file, since that is what they are.
 
 // Dropdown menu items
 .wr-dropdown-item:focus-visible {

package/tilt-card/styles/_dark.scss

@@ -0,0 +1,21 @@
+// Dark theme.
+//
+// Keyed on `theme.dark-selector()`, never on a literal `[data-theme='dark']`.
+// The attribute is renameable — `@use 'ngwr' with ($theme-attribute: '…')`
+// alongside `provideWrTheme({ attribute: '…' })` — and a hand-written literal
+// misses the rename in both directions: this block stops firing under the
+// configured name, and it keeps firing under `data-theme`, which is the
+// attribute a foreign design system owns and the rename exists to escape.
+//
+// It lives outside the `styleUrl` closure for the same reason. A component
+// stylesheet is compiled when the LIBRARY is built, where `$theme-attribute` can
+// only ever be the default, and Angular appends that copy after the app's linked
+// sheet — so an inlined literal would not merely be dead, it would outrank the
+// correctly-named rule beside it.
+@use '../../theme/styles' as theme;
+
+#{theme.dark-selector()} .wr-tilt-glare {
+  --wr-tilt-glare-color: rgb(255 255 255 / 25%);
+
+  mix-blend-mode: overlay;
+}

package/tilt-card/styles/_index.scss

@@ -11,5 +11,10 @@
 // box-sizing reset into the compiled component styles, which ng-packagr then
 // embeds in the FESM bundle as a string. `tilt-card.scss` forwards `_rules`
 // instead, so it carries this component's own CSS and nothing else.
+//
+// `_dark` is loaded from HERE for a second reason: its selector is built out of
+// `$theme-attribute`, which only a stylesheet compiled by the consuming app can
+// configure, so a copy inside the bundle could only ever carry the default name.
 @use '../../theme/styles';
 @forward 'rules';
+@forward 'dark';

package/tilt-card/styles/_rules.scss

@@ -33,8 +33,3 @@
   mix-blend-mode: multiply;
 }
 
-[data-theme='dark'] .wr-tilt-glare {
-  --wr-tilt-glare-color: rgb(255 255 255 / 25%);
-
-  mix-blend-mode: overlay;
-}

package/toast/styles/_index.scss

@@ -209,14 +209,22 @@ $toast-colors: (
     inset-inline-start: 0;
     height: 2px;
     width: 100%;
-    // `transform-origin` has no logical keyword, and the drain is a physical
-    // `scaleX`. Flipping the bar to drain from the reader's start needs a
-    // direction-aware rule, not a property rename.
-    // rtl-ok: origin is one half of a physical scaleX pair
+    // `transform-origin` has no logical keyword and the drain is a physical
+    // `scaleX`, so the anchor cannot be renamed into a logical property — it has
+    // to be swapped by a direction-aware rule. The bar drains toward the reader's
+    // end, which means it stays anchored at the reader's START: physically left
+    // in LTR, physically right in RTL. Leaving it at `left` in both pinned the
+    // remaining time to the side an RTL reader's eye leaves from.
+    // rtl-ok: origin is one half of a physical scaleX pair, mirrored below
     transform-origin: left;
     background: var(--wr-toast-accent);
     animation: wr-toast-progress linear forwards;
     animation-duration: var(--wr-toast-duration, 4000ms);
+
+    [dir='rtl'] & {
+      // rtl-ok: the mirrored half of the pair above
+      transform-origin: right;
+    }
   }
 
   &:hover &__progress {

package/types/ngwr-alert.d.ts

@@ -17,7 +17,7 @@ type WrAlertType = 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'offl
  * @example
  * ```html
  * <wr-alert title="Saved" message="Your changes are live." type="success" />
- * <wr-alert title="Failed" type="danger" closeable (closed)="onClose()" />
+ * <wr-alert title="Failed" type="danger" closable (closed)="onClose()" />
  * ```
  *
  * @see https://ngwr.dev/reference/components/alert
@@ -62,7 +62,7 @@ declare class WrAlert {
      *
      * @default false
      */
-    readonly closeable: _angular_core.InputSignalWithTransform<boolean, any>;
+    readonly closable: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
      * Emitted when the user dismisses the alert via the close button.
      */
@@ -74,7 +74,7 @@ declare class WrAlert {
     protected readonly liveLevel: _angular_core.Signal<"assertive" | "polite" | null>;
     protected onClose(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAlert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
 }
 
 export { WrAlert };

package/types/ngwr-blur-text.d.ts

@@ -67,6 +67,14 @@ declare class WrBlurText {
      * watching the same host and all of them able to fire `animate()`.
      */
     private observer;
+    /**
+     * The effect below reaches `startObserver()` through a `queueMicrotask`, so
+     * the component can be destroyed between the two. The destroy hook runs first
+     * and disconnects whatever exists at that moment — then the continuation
+     * builds a FRESH observer on a host Angular has already detached, and nothing
+     * is left to disconnect it. Same hazard, and same flag, as `wr-split-text`.
+     */
+    private destroyed;
     constructor();
     private startObserver;
     private animate;

package/types/ngwr-button.d.ts

@@ -65,6 +65,16 @@ type WrButtonIconPosition = 'start' | 'end';
  * every child — child `[shape]` inputs are ignored so the group reads as
  * one coherent control.
  *
+ * **Inside a `<form>`, use the native form.** `<wr-btn>` is a custom element
+ * carrying `role="button"`, and no custom element submits a form — the platform
+ * submits for `<button>`, `<input type="submit">` and `<input type="image">`
+ * and nothing else. That is why there is no `type` input: it would look like it
+ * worked. Implicit submission (Enter in a text field) does not reach it either.
+ *
+ * ```html
+ * <button wr-btn type="submit" color="primary">Save</button>
+ * ```
+ *
  * @see https://ngwr.dev/reference/components/button
  */
 declare class WrButton {
@@ -117,7 +127,7 @@ declare class WrButton {
      *
      * @default true
      */
-    readonly isDisabledWhenLoading: _angular_core.InputSignalWithTransform<boolean, any>;
+    readonly disabledWhenLoading: _angular_core.InputSignalWithTransform<boolean, any>;
     private readonly group;
     /** The size, or the app-wide default, or `md`. @see useConfigValue */
     protected readonly resolvedSize: _angular_core.Signal<WrButtonSize>;
@@ -162,9 +172,42 @@ declare class WrButton {
      * `pointer-events: none`.
      */
     protected onHostKeydown(event: KeyboardEvent): void;
+    private readonly injector;
+    /**
+     * Whether this button is the one the caret was on, so it can be handed back
+     * the focus that goes missing while it is off.
+     *
+     * A control that becomes `disabled` while focused stops being a focusable
+     * area, and the browser runs the unfocusing steps: nothing else is nominated,
+     * so the caret lands on `<body>`. With `disabledWhenLoading` on by default
+     * that happens on EVERY async button — a keyboard user presses Enter on
+     * "Save" and the next Tab restarts from the top of the document, while a
+     * screen-reader user is told neither that the wait began nor that it ended,
+     * because the element they were on has left the a11y tree. The `<wr-btn>`
+     * element form loses its `tabindex` instead of gaining `disabled` and is
+     * unfocused for the same reason.
+     *
+     * Deliberately NOT keyed on reading `activeElement` when `isOff()` flips: an
+     * effect in this component's own view runs AFTER the parent has applied this
+     * directive's host bindings, so by then the attribute has landed and the
+     * browser has already moved the caret — the read would answer `<body>` on
+     * every real browser and the button on jsdom, which is the worst of both.
+     *
+     * The flag is written by the focus listeners instead, and a `blur` fired
+     * WHILE off keeps it set rather than clearing it: that blur is the browser
+     * taking the caret away, not the user leaving. A browser that fires no blur
+     * on disable at all is covered too — the flag simply stays as `focus` left it,
+     * and the `<body>` test below is what decides whether the focus is orphaned.
+     */
+    private hadFocus;
+    /** @internal Host `focus` — see `hadFocus`. */
+    protected onHostFocus(): void;
+    /** @internal Host `blur` — see `hadFocus`. */
+    protected onHostBlur(): void;
+    constructor();
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrButton, "wr-btn, button[wr-btn], a[wr-btn]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "isDisabledWhenLoading": { "alias": "isDisabledWhenLoading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrButton, "wr-btn, button[wr-btn], a[wr-btn]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabledWhenLoading": { "alias": "disabledWhenLoading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**

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

@@ -8,6 +8,12 @@ import { WrCalendarMode } from 'ngwr/calendar';
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
+/**
+ * An arrow key, by the direction a user would say out loud — the parameter type
+ * of `WrCalendarHarness.pressArrow`, exported so a consumer's own test helper can
+ * name what it forwards.
+ */
+type WrCalendarArrowKey = 'left' | 'right' | 'up' | 'down';
 /** Which of the three sub-views the calendar is showing. */
 type WrCalendarView = 'day' | 'month' | 'year';
 /** One month or year chip, as the picker views render them. */
@@ -82,6 +88,19 @@ declare class WrCalendarDayHarness extends ComponentHarness {
     getText(): Promise<string>;
     /** The day number as a number, for mapping a list of cells to dates. */
     getDayOfMonth(): Promise<number>;
+    /**
+     * What a screen reader announces for this cell — "Thursday, January 15, 2026".
+     *
+     * A SECOND question from {@link getText}, and the reason this method exists:
+     * until v14 the cell had no name at all, so the two answers were "15" and
+     * nothing. A spec that reads only the drawn number passes on a grid that
+     * announces bare integers with no month, year or weekday anywhere in it.
+     *
+     * The string is `calendar.dayLabel` interpolated with the adapter's
+     * `longDate`, so it moves with the locale AND with the adapter — assert
+     * against the pair your spec provides, not against an English literal.
+     */
+    getAccessibleName(): Promise<string | null>;
     /** `'gridcell'` — the cell is a button, and the grid semantics are what a spec should assert. */
     getRole(): Promise<string | null>;
     /** Whether this day is (one end of) the current selection. */
@@ -122,8 +141,6 @@ declare class WrCalendarDayHarness extends ComponentHarness {
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-/** The arrow keys, by the direction a user would say out loud. */
-type Arrow = 'left' | 'right' | 'up' | 'down';
 /**
  * Test harness for `<wr-calendar>` — the standalone month grid, and the one
  * `<wr-date-picker>` puts in an overlay.
@@ -244,7 +261,7 @@ declare class WrCalendarHarness extends ComponentHarness {
      * having managed to focus a cell. Under `dir="rtl"` the horizontal pair mirrors:
      * ArrowRight goes back a day, because the grid itself is mirrored.
      */
-    pressArrow(arrow: Arrow): Promise<void>;
+    pressArrow(arrow: WrCalendarArrowKey): Promise<void>;
     /** Press Home — the first day of the roving cell's week, not of the month. */
     pressHome(): Promise<void>;
     /** Press End — the last day of the roving cell's week. */
@@ -274,4 +291,4 @@ declare class WrCalendarHarness extends ComponentHarness {
 }
 
 export { WrCalendarDayHarness, WrCalendarHarness };
-export type { WrCalendarChip, WrCalendarDayHarnessFilters, WrCalendarHarnessFilters, WrCalendarView };
+export type { WrCalendarArrowKey, WrCalendarChip, WrCalendarDayHarnessFilters, WrCalendarHarnessFilters, WrCalendarView };

package/types/ngwr-calendar.d.ts

@@ -104,7 +104,44 @@ declare class WrCalendar {
     protected readonly monthsView: _angular_core.Signal<readonly string[]>;
     /** 12-year window centered on the floor-aligned decade containing `viewDate`. */
     protected readonly yearsView: _angular_core.Signal<readonly number[]>;
+    /**
+     * The header above the grid.
+     *
+     * Both templated strings used to be assembled here: `${month} ${year}` and
+     * `${first} – ${last}`. That is English word order with an English separator
+     * baked into TypeScript, and no catalog could move either — ja-JP writes
+     * 2026年3月, which is not a translation of any word in `March 2026` but a
+     * different arrangement of the same two values. So the arrangement is the
+     * translatable unit, and `calendar.header` / `calendar.yearRange` are it.
+     */
     protected readonly headerLabel: _angular_core.Signal<string>;
+    private readonly headerText;
+    private readonly yearRangeText;
+    private readonly dayLabelText;
+    /**
+     * Long weekday names for the cell names.
+     *
+     * `getDayOfWeekNames` returns them in COLUMN order — index 0 is
+     * `getFirstDayOfWeek()`, not Sunday — which is what the header strip wants and
+     * what a `getDayOfWeek()` result (0 = Sunday) must be rotated into. Indexing
+     * it directly reads Monday's name for a Sunday in every locale that starts its
+     * week on Monday, which is most of them.
+     */
+    private readonly longWeekdays;
+    /**
+     * A day cell's accessible name — "Sunday, March 15, 2026".
+     *
+     * The cell had none. Its only content is the day NUMBER, and `role="gridcell"`
+     * does not inherit a name from the grid's header or from the column header
+     * above it, so every date in the month announced as a bare number: the month,
+     * the year and the weekday were all on screen and none of them reachable.
+     *
+     * `{{date}}` is the adapter's `longDate`, so its field order, its separators
+     * and its digits are `Intl`'s — the catalog decides only where the weekday
+     * goes. Building it from `getMonthNames('long')` instead would have hard-coded
+     * the nominative month, which Russian and Finnish inflect inside a date.
+     */
+    protected dayLabel(date: Date): string;
     /** 6×7 day grid covering the current month plus spillover. */
     protected readonly weeks: _angular_core.Signal<readonly (readonly Date[])[]>;
     /**

package/types/ngwr-circular-text.d.ts

@@ -33,6 +33,15 @@ declare class WrCircularText {
     private readonly platform;
     private rotation;
     private hovered;
+    /**
+     * The effect below reaches `startOrSwap()` through a `queueMicrotask`, so the
+     * ring can be destroyed between the two. Without this flag the continuation
+     * then starts an infinite Web Animation on a host Angular has already
+     * detached — and an animation keeps its target alive, so the whole `#spin`
+     * subtree is retained for the life of the page. Same hazard, and same flag, as
+     * `wr-split-text` and `wr-fuzzy-text`.
+     */
+    private destroyed;
     /** Active spin duration in seconds — base, or hover-modified. */
     private effectiveDuration;
     constructor();