ngwr 10.2.1 → 11.1.0

package/timeline/styles/_index.scss

@@ -88,7 +88,7 @@
     &::before {
       content: '';
       position: absolute;
-      left: 0.34375rem;
+      inset-inline-start: 0.34375rem;
       top: 1rem;
       bottom: -1.25rem;
       width: 1.5px;
@@ -119,7 +119,7 @@
       position: absolute;
       // Dot centre: margin-top 0.125rem + half of the 0.75rem dot = 0.5rem.
       top: 0.5rem;
-      left: 50%;
+      inset-inline-start: 50%;
       width: calc(100% + 2rem);
       height: 1.5px;
       background: var(--wr-color-outline);

package/toast/styles/_index.scss

@@ -26,6 +26,10 @@ $toast-colors: (
   // Safe-area: fold each inset into the matching padding side so toasts clear
   // notches / the home indicator / rounded corners on mobile, whichever edge
   // the host is anchored to. env() is 0 without insets, so desktop stays 1rem.
+  // `env(safe-area-inset-left/right)` report the device's own edges and do NOT
+  // flip with direction, so each inset must stay on the side it describes. The
+  // 1rem base is equal on both sides, so the shorthand reads the same either way.
+  // rtl-ok: physical shorthand carrying physical `env()` insets
   padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
     calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
   pointer-events: none;
@@ -57,8 +61,7 @@ $toast-colors: (
     .wr-toast {
       --wr-toast-i: var(--wr-toast-stack-index, 0);
       position: absolute;
-      left: 1rem;
-      right: 1rem;
+      inset-inline: 1rem;
       width: auto;
       max-width: calc(100% - 2rem);
       transition:
@@ -98,31 +101,33 @@ $toast-colors: (
 
   &--top {
     top: 0;
+    // rtl-ok: centred with a physical translateX, so the pair must stay physical
     left: 50%;
     transform: translateX(-50%);
   }
   &--top-start {
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
   }
   &--top-end {
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
   }
   &--bottom {
     bottom: 0;
+    // rtl-ok: centred with a physical translateX, so the pair must stay physical
     left: 50%;
     transform: translateX(-50%);
     flex-direction: column-reverse;
   }
   &--bottom-start {
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     flex-direction: column-reverse;
   }
   &--bottom-end {
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
     flex-direction: column-reverse;
   }
 }
@@ -143,7 +148,7 @@ $toast-colors: (
   border: 1px solid var(--wr-toast-border);
   // Capture horizontal swipe-to-dismiss; let vertical scroll pass through.
   touch-action: pan-y;
-  border-left: 3px solid var(--wr-toast-accent);
+  border-inline-start: 3px solid var(--wr-toast-accent);
   @include theme.smooth-br(var(--wr-border-radius-base));
   box-shadow: var(--wr-shadow-overlay);
   font-family: var(--wr-font-family-base);
@@ -201,9 +206,13 @@ $toast-colors: (
   &__progress {
     position: absolute;
     bottom: 0;
-    left: 0;
+    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: left;
     background: var(--wr-toast-accent);
     animation: wr-toast-progress linear forwards;

package/toolbar/styles/_index.scss

@@ -51,7 +51,7 @@
 
     &--end {
       flex: 0 0 auto;
-      margin-left: auto;
+      margin-inline-start: auto;
     }
   }
 
@@ -64,7 +64,7 @@
     &::before {
       content: '';
       position: absolute;
-      left: -0.5rem;
+      inset-inline-start: -0.5rem;
       top: 50%;
       transform: translateY(-50%);
       height: 1.25rem;
@@ -82,7 +82,7 @@
   }
 
   .wr-toolbar--responsive .wr-toolbar__zone--end {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   // The vertical hairline dividers are a horizontal-row affordance — drop them

package/tour/styles/_index.scss

@@ -5,7 +5,13 @@
 // covered, so it stays readable and clickable.
 .wr-tour__spotlight {
   position: fixed;
-  z-index: 1000;
+  // Below CDK's `.cdk-overlay-container` (1000), deliberately. Both are fixed
+  // children of `<body>`, so at equal z-index the DOM order decides — and the
+  // service appends a fresh cut-out on every step while the container stays put, so
+  // from the second step on the dimming shadow painted OVER the tour's own card.
+  // `.wr-tour-overlay { z-index: 1001 }` cannot help: it sits on the pane INSIDE the
+  // container, whose own stacking context scopes it.
+  z-index: 999;
   pointer-events: none;
   border-radius: var(--wr-border-radius-base);
   box-shadow: 0 0 0 9999px rgba(var(--wr-color-backdrop-rgb), 0.55);

package/tree/styles/_index.scss

@@ -19,7 +19,7 @@
     align-items: center;
     gap: 0.375rem;
     padding: 0.3125rem 0.5rem;
-    padding-left: calc(0.5rem + var(--wr-tree-depth, 0) * var(--wr-tree-indent));
+    padding-inline-start: calc(0.5rem + var(--wr-tree-depth, 0) * var(--wr-tree-indent));
     border-radius: var(--wr-border-radius-sm);
     cursor: pointer;
     user-select: none;
@@ -34,7 +34,8 @@
 
     &--selected {
       background: var(--wr-color-primary-soft);
-      color: var(--wr-color-primary);
+      // Text on the `-soft` tint: `-ink`. Bare measured 4.19:1 light / 3.63:1 dark.
+      color: var(--wr-color-primary-ink);
     }
 
     // Visible ring only when the row truly has keyboard focus — not
@@ -156,7 +157,7 @@
     font-size: var(--wr-tree-trigger-font-size);
     line-height: var(--wr-tree-trigger-line-height);
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     transition:
       border-color var(--wr-transition-base),
       box-shadow var(--wr-transition-base);
@@ -243,10 +244,13 @@
     align-items: center;
     gap: 0.125rem;
     max-width: 100%;
-    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+    // Roomier on the label side, tighter where the remove (×) sits.
+    padding-block: 0.125rem;
+    padding-inline: 0.5rem 0.25rem;
     border-radius: 999px;
     background: var(--wr-color-primary-soft);
-    color: var(--wr-color-primary);
+    // The chip wraps a label, so this paints text on the chip's own tint.
+    color: var(--wr-color-primary-ink);
     font-size: var(--wr-text-sm);
     line-height: 1.4;
     user-select: none;

package/types/ngwr-action-sheet.d.ts

@@ -60,6 +60,14 @@ declare class WrActionSheet {
     readonly actions: _angular_core.InputSignal<readonly WrActionSheetAction[]>;
     /** Optional bold heading above the rows. */
     readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Name announced for the dialog when there is no visible `title`. Falls back to
+     * `actionSheet.label`, then `'Actions'` — it used to be that English string,
+     * written into the template of a component whose every other string comes from
+     * the caller.
+     */
+    readonly titleFallback: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedTitleFallback: _angular_core.Signal<string>;
     /** Optional muted sub-heading under the title. */
     readonly message: _angular_core.InputSignal<string>;
     /** Fires with the chosen row (never fires on a dismiss). */
@@ -68,7 +76,7 @@ declare class WrActionSheet {
     protected readonly cancelActions: _angular_core.Signal<WrActionSheetAction[]>;
     protected select(item: WrActionSheetAction): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrActionSheet, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrActionSheet, "wr-action-sheet", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "action": "action"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrActionSheet, "wr-action-sheet", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "titleFallback": { "alias": "titleFallback"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "action": "action"; }, never, never, true, never>;
 }
 
 export { WrActionSheet };

package/types/ngwr-affix.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 
 /**
  * Stick-on-scroll directive. Combines native CSS `position: sticky` with
- * an `IntersectionObserver`-driven `--affixed` state class, so consumers
+ * an `IntersectionObserver`-driven `wr-affix--active` state class, so consumers
  * can style the element differently while it's pinned (e.g. add a
  * shadow, change the background, shrink the height).
  *
@@ -35,6 +35,12 @@ declare class WrAffix {
     private readonly host;
     private readonly destroyRef;
     private readonly isBrowser;
+    /**
+     * `afterNextRender`'s callback is not an injection context, and the observer
+     * cannot exist before the sentinel it watches — so the effect that rebuilds it
+     * is handed the injector explicitly.
+     */
+    private readonly injector;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAffix, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrAffix, "[wrAffix]", never, { "offsetTop": { "alias": "wrAffixOffsetTop"; "required": false; "isSignal": true; }; }, { "affixChange": "wrAffixChange"; }, never, never, true, never>;

package/types/ngwr-anchor.d.ts

@@ -32,6 +32,13 @@ interface WrAnchorLink {
  */
 declare class WrAnchor {
     readonly links: _angular_core.InputSignal<readonly WrAnchorLink[]>;
+    /**
+     * Accessible name for the navigation landmark. Falls back to `anchor.label`,
+     * then `'Table of contents'` — it used to be that English string, hard-coded
+     * on the host, in a landmark a screen reader reads out on every page.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Pixel offset subtracted on scroll — for sticky headers. @default 0 */
     readonly offset: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Highlight an item when its target's top is within this many px of the offset line. @default 80 */
@@ -46,7 +53,7 @@ declare class WrAnchor {
     constructor();
     protected onClick(id: string, event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAnchor, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAnchor, "wr-anchor", never, { "links": { "alias": "links"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "hitArea": { "alias": "hitArea"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAnchor, "wr-anchor", never, { "links": { "alias": "links"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "hitArea": { "alias": "hitArea"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrAnchor };

package/types/ngwr-avatar.d.ts

@@ -58,11 +58,13 @@ declare class WrAvatar {
      */
     readonly url: _angular_core.InputSignal<string | null>;
     /**
-     * Alt text for the image.
+     * Alt text for the image. Falls back to `avatar.alt`, then `'Avatar'` — pass
+     * the person's name where you have it, since that is what a reader wants.
      *
-     * @default 'Avatar'
+     * @default null
      */
-    readonly alt: _angular_core.InputSignal<string>;
+    readonly alt: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAlt: _angular_core.Signal<string>;
     /**
      * Corner treatment. `rounded` (default) is a soft rounded square,
      * `circle` is the classic profile avatar, `squircle` is the iOS look.
@@ -77,11 +79,19 @@ declare class WrAvatar {
      */
     readonly size: _angular_core.InputSignal<WrAvatarSize>;
     protected readonly loaded: _angular_core.WritableSignal<boolean>;
+    /**
+     * Whether the image failed. Without this the spinner spun forever on a broken
+     * URL — the one state where an avatar is guaranteed to have projected initials
+     * worth showing instead.
+     */
+    protected readonly failed: _angular_core.WritableSignal<boolean>;
+    constructor();
     protected readonly resolved: _angular_core.Signal<ResolvedCssSize>;
     protected readonly cssSize: _angular_core.Signal<string>;
     protected readonly pxSize: _angular_core.Signal<number | null>;
     protected readonly classes: _angular_core.Signal<string>;
     protected onImageLoad(): void;
+    protected onImageError(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAvatar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAvatar, "wr-avatar", never, { "url": { "alias": "url"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/types/ngwr-bar-chart.d.ts

@@ -32,12 +32,28 @@ declare class WrBarChart {
     readonly height: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Explicit max value. `0` = auto. @default 0 */
     readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * A datum's value, with anything non-finite read as `0`.
+     *
+     * One `NaN` used to take out the whole chart rather than its own bar:
+     * `Math.max(...values)` is `NaN` as soon as one value is, so the scale fell
+     * back to `1` and every OTHER bar was asked for a height of `value * 100`%.
+     * The bad bar also printed the literal text `NaN` above itself.
+     */
+    private static value;
     protected readonly resolvedMax: _angular_core.Signal<number>;
     protected readonly bars: _angular_core.Signal<{
         label: string;
         value: number;
         color: string;
         heightPercent: number;
+        /**
+         * The bar's accessible name. The label and the value sit in separate
+         * rows, so a screen reader read every number and then every label with
+         * nothing tying the two together — and with `showValues` off the
+         * numbers were not in the accessible tree at all.
+         */
+        name: string;
     }[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBarChart, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBarChart, "wr-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/types/ngwr-burger.d.ts

@@ -20,8 +20,12 @@ import * as _angular_core from '@angular/core';
 declare class WrBurger {
     /** Two-way bindable open state. Drives the hamburger ↔ close morph. @default false */
     readonly open: _angular_core.ModelSignal<boolean>;
-    /** Accessible label for the toggle button. @default 'Toggle menu' */
-    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name for the toggle button. Falls back to `burger.label`, then
+     * `'Toggle menu'`.
+     */
+    readonly label: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedLabel: _angular_core.Signal<string>;
     /** Disable the toggle. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly classes: _angular_core.Signal<{

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

@@ -0,0 +1,85 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { WrColor } from 'ngwr/theme';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/** Narrows which `<wr-btn>` a harness query matches. */
+interface WrButtonHarnessFilters extends BaseHarnessFilters {
+    /** Match the button's visible label — a string is an exact match, a RegExp is tested. */
+    readonly text?: string | RegExp;
+    /** Match only enabled (`false`) or only disabled (`true`) buttons. */
+    readonly disabled?: boolean;
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Test harness for `<wr-btn>` — drive a button from a consumer's spec without
+ * knowing how it is built.
+ *
+ * Everything this reads is public API: the `wr-btn` selector, the
+ * `.wr-btn__label` element, the `wr-btn--*` modifiers and the disabled attributes.
+ * `<wr-btn>` is deliberately NOT always a native `<button>` — the element form
+ * exists so a link or a custom host can be one — which is why the disabled state
+ * is answered from the ATTRIBUTES rather than from `el.disabled`, a property half
+ * of those shapes do not have.
+ *
+ * @example
+ * ```ts
+ * const loader = TestbedHarnessEnvironment.loader(fixture);
+ * const save = await loader.getHarness(WrButtonHarness.with({ text: 'Save' }));
+ *
+ * expect(await save.isDisabled()).toBe(false);
+ * await save.click();
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrButtonHarness extends ComponentHarness {
+    /** Every shape the button ships in: the element, and the two attribute forms. */
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrButtonHarnessFilters): HarnessPredicate<WrButtonHarness>;
+    /** The button's visible label, trimmed. Icons and the spinner are not part of it. */
+    getText(): Promise<string>;
+    /**
+     * Whether the button refuses interaction.
+     *
+     * Both signals are read, because the component sets them for different reasons:
+     * `disabled` lands on every shape (it is inert on a custom element, which is
+     * exactly why `aria-disabled` exists as well, but it is the attribute that is
+     * always there). A button that is merely LOADING also answers `true` here, and
+     * that is not a quirk — by default a loading button refuses clicks.
+     */
+    isDisabled(): Promise<boolean>;
+    /** Whether the button is showing its loading spinner. */
+    isLoading(): Promise<boolean>;
+    /**
+     * The intent colour, or `null` when the button carries none.
+     *
+     * Matched against `WR_COLORS` rather than "the first `wr-btn--*` class": the
+     * modifier list also carries the size, the shape, `outlined`, `block`, `loading`
+     * and the icon position, so a pattern match answers `icon` as readily as
+     * `primary`.
+     */
+    getColor(): Promise<WrColor | null>;
+    /** Click the button. A disabled button is still clicked — assert, do not assume. */
+    click(): Promise<void>;
+    /** Move keyboard focus to the button. */
+    focus(): Promise<void>;
+    /** Whether the button currently has focus. */
+    isFocused(): Promise<boolean>;
+}
+
+export { WrButtonHarness };
+export type { WrButtonHarnessFilters };

package/types/ngwr-button.d.ts

@@ -68,13 +68,26 @@ type WrButtonIconPosition = 'start' | 'end';
  * @see https://ngwr.dev/reference/components/button
  */
 declare class WrButton {
-    /** Color variant. Omit for the neutral default style. @default null */
+    /**
+     * Color variant. Omit for the neutral default style.
+     *
+     * Deliberately NOT configurable app-wide: the library's own chrome binds
+     * `[color]="isCurrent ? 'primary' : null"`, where `null` means neutral, and a
+     * configured intent would repaint every one of those buttons. See `WrConfig`.
+     *
+     * @default null
+     */
     readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "medium" | "dark" | null>;
-    /** Size variant. @default 'md' */
-    readonly size: _angular_core.InputSignal<WrButtonSize>;
     /**
-     * Corner treatment — `rounded` or `pill`. `null` (default) falls back
-     * to `rounded`. Inside a `<wr-btn-group shape="…">`, the group's shape
+     * Size variant. Unset, it resolves through
+     * `provideWrConfig({ button: { size } })` and then to `md`.
+     *
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<WrButtonSize | null>;
+    /**
+     * Corner treatment — `rounded`, `pill` or `squircle`. `null` (default) falls
+     * back to `rounded`. Inside a `<wr-btn-group shape="…">`, the group's shape
      * ALWAYS wins over this input — the group enforces a consistent corner
      * treatment across its members.
      *
@@ -106,13 +119,16 @@ declare class WrButton {
      */
     readonly isDisabledWhenLoading: _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>;
     /**
-     * Resolved shape. Inside a `<wr-btn-group>`, the group ALWAYS wins —
-     * child `[shape]` is ignored entirely so the group reads as one
-     * coherent control. Outside a group, the button's own `[shape]` is
-     * used, falling back to `rounded`.
+     * Resolved shape. Inside a `<wr-btn-group>`, the group ALWAYS wins — child
+     * `[shape]` is ignored entirely so the group reads as one coherent control.
+     * Outside a group, the button's own `[shape]` is used, falling back to
+     * `rounded`. Not config-resolved: see `WrConfig` for why a boolean cannot
+     * express this three-valued input.
      */
-    protected readonly effectiveShape: _angular_core.Signal<WrButtonShape>;
+    protected readonly resolvedShape: _angular_core.Signal<WrButtonShape>;
     private readonly hostEl;
     /**
      * Whether this instance is the `<wr-btn>` ELEMENT rather than the attribute

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

@@ -27,6 +27,13 @@ interface Cell {
  */
 declare class WrCalendarHeatmap {
     readonly data: _angular_core.InputSignal<readonly WrHeatmapDatum[]>;
+    /**
+     * Accessible name of the whole grid. Its cells are bare spans whose `title` a screen
+     * reader on a role-less element does not read, so the map used to be several hundred
+     * anonymous nodes with no name. Falls back to `calendarHeatmap.label`.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Last day to render. @default today */
     readonly endDate: _angular_core.InputSignal<string | Date | null>;
     /** Number of weeks (columns) to render. @default 53 */
@@ -41,7 +48,14 @@ declare class WrCalendarHeatmap {
     readonly emptyColor: _angular_core.InputSignal<string>;
     /** Show the weekday + month labels around the grid. @default true */
     readonly showLabels: _angular_core.InputSignalWithTransform<boolean, any>;
-    protected readonly weekdayLabels: string[];
+    private readonly locale;
+    /**
+     * Weekday names from the locale rather than a hard-coded English list — the row order is
+     * Sunday-first, matching the grid's own alignment, so 7 Jan 2024 (a Sunday) is the
+     * reference. Rows without a label stay blank on purpose: seven labels do not fit.
+     */
+    protected readonly weekdayLabels: _angular_core.Signal<readonly string[]>;
+    private readonly monthNames;
     protected readonly cells: _angular_core.Signal<readonly Cell[]>;
     protected readonly monthLabels: _angular_core.Signal<{
         label: string;
@@ -51,7 +65,7 @@ declare class WrCalendarHeatmap {
     protected colorFor(intensity: number): string;
     protected opacityFor(intensity: number): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCalendarHeatmap, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCalendarHeatmap, "wr-calendar-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "weeks": { "alias": "weeks"; "required": false; "isSignal": true; }; "cellSize": { "alias": "cellSize"; "required": false; "isSignal": true; }; "cellGap": { "alias": "cellGap"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emptyColor": { "alias": "emptyColor"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCalendarHeatmap, "wr-calendar-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "weeks": { "alias": "weeks"; "required": false; "isSignal": true; }; "cellSize": { "alias": "cellSize"; "required": false; "isSignal": true; }; "cellGap": { "alias": "cellGap"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emptyColor": { "alias": "emptyColor"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrCalendarHeatmap };

package/types/ngwr-calendar.d.ts

@@ -68,6 +68,7 @@ declare class WrCalendar {
     /** Disable interaction entirely. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     private readonly adapter;
+    private readonly dir;
     private readonly host;
     private readonly injector;
     /** Currently displayed month (any date inside it). */
@@ -134,6 +135,15 @@ declare class WrCalendar {
     private focusActiveCell;
     /** Used by the template's `track` expression. */
     protected trackByTime(_: number, date: Date): number;
+    /**
+     * The key as the GRID sees it.
+     *
+     * Arrow keys follow visual order, and a calendar grid mirrors under
+     * `dir="rtl"`: the day to the visual right of today is yesterday. Only the
+     * inline pair swaps — Up/Down step a week either way, and PageUp/PageDown and
+     * Home/End are semantic rather than physical.
+     */
+    private inlineKey;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCalendar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCalendar, "wr-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "date": "dateChange"; "range": "rangeChange"; }, never, never, true, never>;
 }