ngwr 10.1.0 → 10.2.1

package/fesm2022/ngwr-date-picker.mjs

@@ -2,15 +2,13 @@ import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coerci
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { input, inject, model, output, signal, computed, effect, untracked, ViewEncapsulation, Component, ElementRef, DestroyRef, viewChild } from '@angular/core';
+import { input, inject, ElementRef, model, output, signal, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component, DestroyRef, viewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { WrCalendar } from 'ngwr/calendar';
 import { WrDateAdapter, WR_DATE_LOCALE } from 'ngwr/date-adapter';
 import { readI18nText, useI18nText } from 'ngwr/i18n';
 import { WrInput, WrInputGroup, WrInputSuffix } from 'ngwr/input';
 import { WR_OVERLAY, WrOutsideClick } from 'ngwr/overlay';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { clamp } from 'ngwr/utils';
 
 /**
@@ -54,7 +52,13 @@ class WrTimePanel {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Read-only — values cannot be changed. @default false */
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Move focus onto the hours field once the panel is on screen. Off by
+     * default — see `WrCalendar.autoFocus` for why. @default false
+     */
+    autoFocus = input(false, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     adapter = inject(WrDateAdapter);
+    host = inject(ElementRef);
     locale = inject(WR_DATE_LOCALE);
     /**
      * Form value — the selected time as a `Date` (its date portion is preserved).
@@ -78,6 +82,14 @@ class WrTimePanel {
     effectiveDisabled = computed(() => this.disabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
     constructor() {
+        // The hours field, not the increment button: a stepper is a shortcut, the
+        // number is the control. Deferred because the inputs are not in the DOM
+        // until the panel's first change-detection pass.
+        afterNextRender(() => {
+            if (!this.autoFocus())
+                return;
+            this.host.nativeElement.querySelector('.wr-time-picker__input')?.focus();
+        });
         // Mirror an external `value` write into the internal h/m/s state (the old
         // `writeValue` body). Guarded against the echo of our own `emit()` so a live
         // edit is never clobbered by re-deriving it.
@@ -207,13 +219,13 @@ class WrTimePanel {
         this.lastEmitted = next;
         this.value.set(next);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrTimePanel, isStandalone: true, selector: "wr-time-picker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Hours\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Minutes\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Increment seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      aria-label=\"Seconds\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Decrement seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrTimePanel, isStandalone: true, selector: "wr-time-picker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Hours\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Minutes\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Increment seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      aria-label=\"Seconds\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Decrement seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTimePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTimePanel, decorators: [{
             type: Component,
             args: [{ selector: 'wr-time-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Hours\"\n    [value]=\"hoursDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onHoursInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement hours\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepHours(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n<span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n<div class=\"wr-time-picker__col\">\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--up\"\n    aria-label=\"Increment minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </button>\n  <input\n    class=\"wr-time-picker__input\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    aria-label=\"Minutes\"\n    [value]=\"minutesDisplay()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onMinutesInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    class=\"wr-time-picker__step wr-time-picker__step--down\"\n    aria-label=\"Decrement minutes\"\n    [disabled]=\"!interactive()\"\n    (click)=\"stepMinutes(-1)\"\n  >\n    <svg\n      class=\"wr-time-picker__chevron\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</div>\n\n@if (showSeconds()) {\n  <span class=\"wr-time-picker__sep\" aria-hidden=\"true\">:</span>\n\n  <div class=\"wr-time-picker__col\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Increment seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <input\n      class=\"wr-time-picker__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      aria-label=\"Seconds\"\n      [value]=\"secondsDisplay()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onSecondsInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Decrement seconds\"\n      [disabled]=\"!interactive()\"\n      (click)=\"stepSeconds(-1)\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n\n@if (is12h()) {\n  <div class=\"wr-time-picker__col wr-time-picker__col--ampm\">\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--up\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m18 15-6-6-6 6\" />\n      </svg>\n    </button>\n    <span class=\"wr-time-picker__label\" aria-live=\"polite\">{{ amPmLabel() }}</span>\n    <button\n      type=\"button\"\n      class=\"wr-time-picker__step wr-time-picker__step--down\"\n      aria-label=\"Toggle AM / PM\"\n      [disabled]=\"!interactive()\"\n      (click)=\"toggleAmPm()\"\n    >\n      <svg\n        class=\"wr-time-picker__chevron\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+        }], ctorParameters: () => [], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /**
  * @license
@@ -243,6 +255,13 @@ class WrDateTimePanel {
     ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
     step = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to the calendar only: a datetime panel opened from the keyboard
+     * lands on the day grid, never on the hours field. Picking the date first is
+     * the order the panel is laid out in, and the time fields are one Tab away.
+     */
+    autoFocus = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
     changed = output();
     adapter = inject(WrDateAdapter);
     /** Date portion used by the calendar — falls back to today when value is null. */
@@ -265,13 +284,13 @@ class WrDateTimePanel {
         const combined = this.adapter.setTime(this.adapter.createDate(this.adapter.getYear(base), this.adapter.getMonth(base), this.adapter.getDate(base)), this.adapter.getHours(time), this.adapter.getMinutes(time), this.adapter.getSeconds(time));
         this.changed.emit(combined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrDateTimePanel, isStandalone: true, selector: "wr-date-time-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wr-date-time-panel" }, ngImport: i0, template: "<wr-calendar\n  [date]=\"calendarValue()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  (dateChange)=\"onCalendarSelect($event)\"\n/>\n\n<div class=\"wr-date-time-panel__time\">\n  <wr-time-picker\n    [ngModel]=\"timeValue()\"\n    [format]=\"timeFormat()\"\n    [showSeconds]=\"showSeconds()\"\n    [step]=\"step()\"\n    (ngModelChange)=\"onTimeChange($event)\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateTimePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrDateTimePanel, isStandalone: true, selector: "wr-date-time-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wr-date-time-panel" }, ngImport: i0, template: "<wr-calendar\n  [date]=\"calendarValue()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (dateChange)=\"onCalendarSelect($event)\"\n/>\n\n<div class=\"wr-date-time-panel__time\">\n  <wr-time-picker\n    [value]=\"timeValue()\"\n    [format]=\"timeFormat()\"\n    [showSeconds]=\"showSeconds()\"\n    [step]=\"step()\"\n    (valueChange)=\"onTimeChange($event)\"\n  />\n</div>\n", dependencies: [{ kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "autoFocus", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "autoFocus", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateTimePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateTimePanel, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-time-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-time-panel' }, imports: [FormsModule, WrCalendar, WrTimePanel], template: "<wr-calendar\n  [date]=\"calendarValue()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  (dateChange)=\"onCalendarSelect($event)\"\n/>\n\n<div class=\"wr-date-time-panel__time\">\n  <wr-time-picker\n    [ngModel]=\"timeValue()\"\n    [format]=\"timeFormat()\"\n    [showSeconds]=\"showSeconds()\"\n    [step]=\"step()\"\n    (ngModelChange)=\"onTimeChange($event)\"\n  />\n</div>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+            args: [{ selector: 'wr-date-time-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-time-panel' }, imports: [WrCalendar, WrTimePanel], template: "<wr-calendar\n  [date]=\"calendarValue()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (dateChange)=\"onCalendarSelect($event)\"\n/>\n\n<div class=\"wr-date-time-panel__time\">\n  <wr-time-picker\n    [value]=\"timeValue()\"\n    [format]=\"timeFormat()\"\n    [showSeconds]=\"showSeconds()\"\n    [step]=\"step()\"\n    (valueChange)=\"onTimeChange($event)\"\n  />\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
  * @license
@@ -279,6 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * 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
  */
+let panelUid = 0;
 /**
  * Unified date / time / date-time picker. Same `<input>` + popover skeleton
  * for every mode — the overlay content swaps based on `[mode]`:
@@ -372,6 +392,8 @@ class WrDatePicker {
     destroyRef = inject(DestroyRef);
     inputEl = viewChild.required('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    triggerEl = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
     /** The picked Date. Bound by `[formField]`, or two-way via `[(value)]`. */
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -383,6 +405,14 @@ class WrDatePicker {
     /** Whether the popover is currently open. */
     overlayOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overlayOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Where focus came from, captured as an explicit argument at open time —
+     * never read off `document.activeElement`, which by then may already be the
+     * pane. Every close path that took focus INTO the panel hands it back here.
+     */
+    openedFrom = null;
+    /** Whether the panel this open cycle should take focus. */
+    autoFocusPanel = false;
     /** Resolved format — falls back to a mode-appropriate default. */
     resolvedFormat = computed(() => {
         const explicit = this.format();
@@ -408,6 +438,9 @@ class WrDatePicker {
     labelDate = readI18nText('datePicker.open', 'Open calendar');
     labelTime = readI18nText('datePicker.openTime', 'Open time picker');
     labelDateTime = readI18nText('datePicker.openDateTime', 'Open date and time picker');
+    panelLabelDate = readI18nText('datePicker.panel', 'Choose date');
+    panelLabelTime = readI18nText('datePicker.panelTime', 'Choose time');
+    panelLabelDateTime = readI18nText('datePicker.panelDateTime', 'Choose date and time');
     /**
      * Accessible name of the text field. Falls back to the placeholder, then to
      * the same catalog string the calendar button uses — the field is a
@@ -434,6 +467,28 @@ class WrDatePicker {
         return this.labelDate;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name of the popup. The trigger advertises
+     * `aria-haspopup="dialog"`, so the panel is a `role="dialog"` — and an unnamed
+     * dialog announces as a bare "dialog". Defaults to the catalog's
+     * `datePicker.panel*` string for the current `mode`.
+     */
+    panelAriaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Popup id — what the trigger's `aria-controls` points at while open. */
+    panelId = `wr-date-picker-panel-${++panelUid}`;
+    resolvedPanelLabel = computed(() => {
+        const explicit = this.panelAriaLabel();
+        if (explicit)
+            return explicit;
+        const m = this.mode();
+        if (m === 'time')
+            return this.panelLabelTime;
+        if (m === 'datetime')
+            return this.panelLabelDateTime;
+        return this.panelLabelDate;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPanelLabel" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-date-picker', `wr-date-picker--${this.mode()}`];
         if (this.disabled())
@@ -503,22 +558,69 @@ class WrDatePicker {
     openOnInput() {
         if (this.disabled() || this.overlayRef)
             return;
-        this.openOverlay();
+        // Deliberately WITHOUT focus: this click placed a caret in the text field,
+        // and yanking focus into the grid would throw away what the user just did.
+        // `Alt+ArrowDown` / `ArrowDown` are the keyboard way in — see onFieldKey.
+        this.openOverlay(this.inputEl().nativeElement, false);
     }
     toggleOverlay() {
         if (this.disabled())
             return;
         if (this.overlayRef) {
+            // Focus is already on the trigger — nothing to restore.
             this.closeOverlay();
         }
         else {
-            this.openOverlay();
+            this.openOverlay(this.triggerEl()?.nativeElement ?? null, true);
+        }
+    }
+    /**
+     * The keyboard route into the panel, per the APG date-picker pattern.
+     *
+     * `Alt+ArrowDown` opens and takes focus; a bare arrow moves focus in when the
+     * panel is ALREADY open, which is how someone who opened it by clicking the
+     * field gets to the grid. Every other key — characters, Backspace, the
+     * horizontal arrows, Home / End — is left to the field untouched, so typing a
+     * date keeps working exactly as before.
+     */
+    onFieldKey(event) {
+        if (this.disabled())
+            return;
+        const vertical = event.key === 'ArrowDown' || event.key === 'ArrowUp';
+        if (!vertical)
+            return;
+        if (event.altKey && event.key === 'ArrowDown' && !this.overlayRef) {
+            event.preventDefault();
+            this.openOverlay(this.inputEl().nativeElement, true);
+            return;
+        }
+        if (this.overlayRef) {
+            event.preventDefault();
+            this.focusPanel();
         }
     }
+    /**
+     * Move focus into an already-mounted panel. A plain query is right HERE and
+     * wrong at mount time: the panel has settled, so there is no deferral to get
+     * wrong — and it keeps `autoFocus` as the single piece of panel API.
+     */
+    focusPanel() {
+        const pane = this.overlayRef?.overlayElement;
+        const target = pane?.querySelector('.wr-calendar__day--focused:not([disabled])') ??
+            pane?.querySelector('.wr-time-picker__input');
+        target?.focus();
+    }
+    /** Hand focus back to whatever opened the panel, if it is still on the page. */
+    restoreFocus() {
+        const target = this.openedFrom?.isConnected ? this.openedFrom : this.inputEl().nativeElement;
+        target?.focus();
+    }
     // Overlay
-    openOverlay() {
+    openOverlay(openedFrom = null, autoFocus = false) {
         if (this.overlayRef)
             return;
+        this.openedFrom = openedFrom;
+        this.autoFocusPanel = autoFocus;
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.host)
@@ -534,6 +636,15 @@ class WrDatePicker {
             scrollStrategy: this.scrollStrategies.reposition(),
             panelClass: 'wr-date-picker-overlay',
         });
+        // The trigger promises `aria-haspopup="dialog"`; the pane is the element it
+        // points at, so the role, the name and the id all belong here. Non-modal on
+        // purpose — focus is not trapped, and the panel closes on outside click or
+        // Escape.
+        const pane = this.overlayRef.overlayElement;
+        pane.id = this.panelId;
+        pane.setAttribute('role', 'dialog');
+        pane.setAttribute('aria-modal', 'false');
+        pane.setAttribute('aria-label', this.resolvedPanelLabel());
         this.overlayOpen.set(true);
         // Dispatch by mode — pick the panel + wire its emissions.
         const m = this.mode();
@@ -571,6 +682,7 @@ class WrDatePicker {
         ref.setInput('min', this.min());
         ref.setInput('max', this.max());
         ref.setInput('dateFilter', this.dateFilter());
+        ref.setInput('autoFocus', this.autoFocusPanel);
         ref.instance.date.subscribe(next => {
             if (!next)
                 return;
@@ -585,6 +697,7 @@ class WrDatePicker {
         ref.setInput('format', this.timeFormat());
         ref.setInput('showSeconds', this.showSeconds());
         ref.setInput('step', this.step());
+        ref.setInput('autoFocus', this.autoFocusPanel);
         ref.setInput('value', this.value() ?? this.adapter.today());
         ref.instance.value.subscribe((next) => {
             if (!next)
@@ -603,6 +716,7 @@ class WrDatePicker {
         ref.setInput('timeFormat', this.timeFormat());
         ref.setInput('showSeconds', this.showSeconds());
         ref.setInput('step', this.step());
+        ref.setInput('autoFocus', this.autoFocusPanel);
         ref.instance.changed.subscribe(next => {
             this.commit(next);
             ref.setInput('value', next);
@@ -618,8 +732,19 @@ class WrDatePicker {
         this.lastValue = next;
         this.value.set(next);
     }
+    /**
+     * Focus goes back to the opener only when it was still INSIDE the panel —
+     * dropped there, it would land on `<body>` and the next Tab would restart
+     * from the top of the page. When focus had already moved elsewhere (a click
+     * on another control, which is itself what closed us) it is left alone:
+     * stealing it back would fight the user for the caret.
+     */
     closeOverlay() {
+        const pane = this.overlayRef?.overlayElement;
+        const inside = !!pane && pane.contains(document.activeElement);
         this.dispose();
+        if (inside)
+            this.restoreFocus();
     }
     dispose() {
         if (this.overlayRef) {
@@ -628,6 +753,7 @@ class WrDatePicker {
         }
         this.dateRef.set(null);
         this.overlayOpen.set(false);
+        this.autoFocusPanel = false;
     }
     // Helpers
     isOutOfBounds(date) {
@@ -648,13 +774,13 @@ class WrDatePicker {
             return false;
         return a.getTime() === b.getTime();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDatePicker, isStandalone: true, selector: "wr-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrDatePicker, isStandalone: true, selector: "wr-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, panelAriaLabel: { classPropertyName: "panelAriaLabel", publicName: "panelAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (keydown)=\"onFieldKey($event)\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n" }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+            args: [{ selector: 'wr-date-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (keydown)=\"onFieldKey($event)\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n" }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], panelAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelAriaLabel", required: false }] }] } });
 
 /**
  * @license
@@ -671,6 +797,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * preview); this panel only re-attaches the times so a datetime range keeps the
  * hours the user set while the dates move around.
  *
+ * The steppers bind `WrTimePanel`'s own `value` model, NOT `[ngModel]`. The
+ * classic-forms bridge defers its first write, and under zoneless change
+ * detection that write lost the race with the panel's own echo guard: a range
+ * bound to 16:00–17:00 opened showing 00:00 on both ends, and the first click
+ * on a stepper committed midnight-plus-one over the real value.
+ *
  * @internal
  */
 class WrDateRangePanel {
@@ -690,7 +822,24 @@ class WrDateRangePanel {
     ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
     step = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to the calendar only: a range panel opened from the keyboard
+     * lands on the day grid, never on a time field. Dates come first here — the
+     * steppers are for the range you have already drawn.
+     */
+    autoFocus = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+    /** A range change from the CALENDAR — the picker is free to sort it. */
     changed = output();
+    /**
+     * A range change from one of the TIME steppers, which must NOT be sorted while
+     * it is happening. The steppers are bound to positions, so sorting mid-edit
+     * moves the user's change to the other end: raising a same-day start past the
+     * end left the start stuck and pushed the END up instead, once per click, on
+     * the button the user was not pressing. Ordering is settled when the popup
+     * closes — the same rule the text inputs already follow for typing.
+     */
+    timeChanged = output();
     adapter = inject(WrDateAdapter);
     startTimeLabel = readI18nText('datePicker.startTime', 'Start time');
     endTimeLabel = readI18nText('datePicker.endTime', 'End time');
@@ -745,7 +894,7 @@ class WrDateRangePanel {
             this.pendingStartTime.set(time);
             return;
         }
-        this.changed.emit([this.withTimeOf(start, time), end]);
+        this.timeChanged.emit([this.withTimeOf(start, time), end]);
     }
     onEndTimeChange(time) {
         if (!time)
@@ -755,7 +904,7 @@ class WrDateRangePanel {
             this.pendingEndTime.set(time);
             return;
         }
-        this.changed.emit([start, this.withTimeOf(end, time)]);
+        this.timeChanged.emit([start, this.withTimeOf(end, time)]);
     }
     /** `date`'s calendar day carrying `time`'s clock. Null date stays null. */
     withTimeOf(date, time) {
@@ -765,13 +914,13 @@ class WrDateRangePanel {
             return date;
         return this.adapter.setTime(this.adapter.createDate(this.adapter.getYear(date), this.adapter.getMonth(date), this.adapter.getDate(date)), this.adapter.getHours(time), this.adapter.getMinutes(time), this.adapter.getSeconds(time));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateRangePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDateRangePanel, isStandalone: true, selector: "wr-date-range-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wr-date-range-panel" }, ngImport: i0, template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  (rangeChange)=\"onRangeChange($event)\"\n/>\n\n@if (withTime()) {\n  <div class=\"wr-date-range-panel__times\">\n    <!-- A time picker is several inputs, not one control, so each end is a\n         labelled group rather than a <label>. -->\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"startTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ startTimeLabel }}</span>\n      <wr-time-picker\n        [ngModel]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (ngModelChange)=\"onStartTimeChange($event)\"\n      />\n    </div>\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"endTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ endTimeLabel }}</span>\n      <wr-time-picker\n        [ngModel]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (ngModelChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateRangePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrDateRangePanel, isStandalone: true, selector: "wr-date-range-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", timeChanged: "timeChanged" }, host: { classAttribute: "wr-date-range-panel" }, ngImport: i0, template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (rangeChange)=\"onRangeChange($event)\"\n/>\n\n@if (withTime()) {\n  <div class=\"wr-date-range-panel__times\">\n    <!-- A time picker is several inputs, not one control, so each end is a\n         labelled group rather than a <label>. -->\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"startTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ startTimeLabel }}</span>\n      <wr-time-picker\n        [value]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onStartTimeChange($event)\"\n      />\n    </div>\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"endTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ endTimeLabel }}</span>\n      <wr-time-picker\n        [value]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrCalendar, selector: "wr-calendar", inputs: ["mode", "date", "range", "min", "max", "dateFilter", "autoFocus", "disabled"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: WrTimePanel, selector: "wr-time-picker", inputs: ["format", "showSeconds", "step", "disabled", "readonly", "autoFocus", "value"], outputs: ["valueChange", "touch"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateRangePanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateRangePanel, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-range-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-range-panel' }, imports: [FormsModule, WrCalendar, WrTimePanel], template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  (rangeChange)=\"onRangeChange($event)\"\n/>\n\n@if (withTime()) {\n  <div class=\"wr-date-range-panel__times\">\n    <!-- A time picker is several inputs, not one control, so each end is a\n         labelled group rather than a <label>. -->\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"startTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ startTimeLabel }}</span>\n      <wr-time-picker\n        [ngModel]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (ngModelChange)=\"onStartTimeChange($event)\"\n      />\n    </div>\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"endTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ endTimeLabel }}</span>\n      <wr-time-picker\n        [ngModel]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (ngModelChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], withTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+            args: [{ selector: 'wr-date-range-panel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-date-range-panel' }, imports: [WrCalendar, WrTimePanel], template: "<wr-calendar\n  mode=\"range\"\n  [range]=\"calendarRange()\"\n  [min]=\"min()\"\n  [max]=\"max()\"\n  [dateFilter]=\"dateFilter()\"\n  [autoFocus]=\"autoFocus()\"\n  (rangeChange)=\"onRangeChange($event)\"\n/>\n\n@if (withTime()) {\n  <div class=\"wr-date-range-panel__times\">\n    <!-- A time picker is several inputs, not one control, so each end is a\n         labelled group rather than a <label>. -->\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"startTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ startTimeLabel }}</span>\n      <wr-time-picker\n        [value]=\"startTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onStartTimeChange($event)\"\n      />\n    </div>\n    <div class=\"wr-date-range-panel__time\" role=\"group\" [attr.aria-label]=\"endTimeLabel\">\n      <span class=\"wr-date-range-panel__time-label\" aria-hidden=\"true\">{{ endTimeLabel }}</span>\n      <wr-time-picker\n        [value]=\"endTime()\"\n        [format]=\"timeFormat()\"\n        [showSeconds]=\"showSeconds()\"\n        [step]=\"step()\"\n        (valueChange)=\"onEndTimeChange($event)\"\n      />\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], withTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], timeChanged: [{ type: i0.Output, args: ["timeChanged"] }] } });
 
 /**
  * @license
@@ -779,6 +928,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * 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
  */
+/** Per-instance popup ids, so `aria-controls` can point at one panel. */
+let rangePanelUid = 0;
 /**
  * Date-range picker — two text inputs sharing one range calendar.
  *
@@ -861,7 +1012,17 @@ class WrDateRangePicker {
      * @default false
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Read-only — inputs not typeable, but the trigger icon still opens the overlay. @default false */
+    /**
+     * Read-only — neither the inputs nor the calendar can change the value.
+     *
+     * Deliberately stricter than `wr-date-picker`, which still opens its popup
+     * while read-only: with two fields feeding one calendar there is no reading
+     * of "untypeable" that leaves the grid free to rewrite both ends. The doc
+     * used to promise the trigger still opened; the code has always refused, and
+     * refusing is the behaviour worth keeping.
+     *
+     * @default false
+     */
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     adapter = inject(WrDateAdapter);
     overlay = inject(WR_OVERLAY);
@@ -871,6 +1032,10 @@ class WrDateRangePicker {
     destroyRef = inject(DestroyRef);
     startEl = viewChild.required('startInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startEl" }] : /* istanbul ignore next */ []));
+    endEl = viewChild.required('endInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endEl" }] : /* istanbul ignore next */ []));
+    triggerEl = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
     /** The picked range. Bound by `[formField]`, or two-way via `[(value)]`. */
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -884,6 +1049,16 @@ class WrDateRangePicker {
     /** Whether the popover is currently open. */
     overlayOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overlayOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Which element opened the popup — captured as an argument, never read off
+     * `document.activeElement`, which by then may already be the pane. With TWO
+     * text inputs this is the whole point: "restore focus to the field" is
+     * ambiguous here, and the old code resolved it by always picking the START
+     * input, so closing from the end input threw the caret across the control.
+     */
+    openedFrom = null;
+    /** Whether the panel this open cycle should take focus. */
+    autoFocusPanel = false;
     /** Resolved format — falls back to a mode-appropriate default. */
     resolvedFormat = computed(() => this.format() ? String(this.format()) : this.mode() === 'datetime' ? 'shortDateTime' : 'shortDate', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedFormat" }] : /* istanbul ignore next */ []));
@@ -892,6 +1067,25 @@ class WrDateRangePicker {
     triggerLabel = readI18nText('datePicker.openRange', 'Open range calendar');
     startLabel = readI18nText('datePicker.rangeStart', 'Range start');
     endLabel = readI18nText('datePicker.rangeEnd', 'Range end');
+    panelLabelRange = readI18nText('datePicker.panelRange', 'Choose date range');
+    panelLabelRangeDateTime = readI18nText('datePicker.panelRangeDateTime', 'Choose date and time range');
+    /**
+     * Accessible name of the popup. The trigger advertises
+     * `aria-haspopup="dialog"`, so the pane is a `role="dialog"` — and an unnamed
+     * dialog announces as a bare "dialog". Defaults to the catalog's
+     * `datePicker.panelRange*` string for the current `mode`.
+     */
+    panelAriaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Popup id — what the trigger's `aria-controls` points at while open. */
+    panelId = `wr-date-range-picker-panel-${++rangePanelUid}`;
+    resolvedPanelLabel = computed(() => {
+        const explicit = this.panelAriaLabel();
+        if (explicit)
+            return explicit;
+        return this.isDateTime() ? this.panelLabelRangeDateTime : this.panelLabelRange;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPanelLabel" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-date-range-picker', `wr-date-range-picker--${this.mode()}`];
         if (this.disabled())
@@ -954,30 +1148,83 @@ class WrDateRangePicker {
         // control as touched once focus actually leaves it, or tabbing from start to
         // end would mark a bound field touched mid-entry.
         const next = event.relatedTarget;
-        if (!next || !this.host.nativeElement.contains(next))
+        const leaving = !next || !this.host.nativeElement.contains(next);
+        if (leaving)
             this.touch.emit();
         // Typing leaves the ends in whatever order they were entered; settle it
-        // here, once the user has stopped.
-        const [start, end] = this.commitRange(this.current(), { normalise: true });
+        // here, once the user has stopped — and moving from one end to the other is
+        // NOT stopping. Sorting on that hop took the start date the user had just
+        // typed and moved it into the field they were tabbing into, leaving the old
+        // end date under their cursor. Same rule the time steppers follow.
+        const [start, end] = this.commitRange(this.current(), { normalise: leaving });
         // Reformat to canonical on blur (cleans up `1/5/25` → `1/5/2025`).
         this.startText.set(this.display(start));
         this.endText.set(this.display(end));
     }
     /** Called by an input's click — opens the overlay if it isn't open already. */
-    openOnInput() {
+    openOnInput(end) {
         if (this.disabled() || this.readonly() || this.overlayRef)
             return;
-        this.openOverlay();
+        // Deliberately WITHOUT focus: this click placed a caret in one of the text
+        // fields, and pulling focus into the grid would throw that away.
+        // `Alt+ArrowDown` / `ArrowDown` are the keyboard way in — see onFieldKey.
+        this.openOverlay(this.fieldEl(end), false);
     }
     toggleOverlay() {
         // `readonly` blocks the calendar too — otherwise the inputs refuse typing
         // while the popover happily edits the same value.
         if (this.disabled() || this.readonly())
             return;
-        if (this.overlayRef)
+        if (this.overlayRef) {
+            // Focus is already on the trigger — nothing to restore.
             this.closeOverlay();
-        else
-            this.openOverlay();
+        }
+        else {
+            this.openOverlay(this.triggerEl()?.nativeElement ?? null, true);
+        }
+    }
+    /**
+     * The keyboard route into the popup, per the APG date-picker pattern, and the
+     * only one either field has. `Alt+ArrowDown` opens and takes focus; a bare
+     * vertical arrow walks focus in when the popup is ALREADY open, which is how
+     * someone who opened it by clicking a field reaches the grid. Every other key
+     * belongs to the field, so typing a date keeps working with the popup open.
+     */
+    onFieldKey(event, end) {
+        if (this.disabled() || this.readonly())
+            return;
+        const vertical = event.key === 'ArrowDown' || event.key === 'ArrowUp';
+        if (!vertical)
+            return;
+        if (event.altKey && event.key === 'ArrowDown' && !this.overlayRef) {
+            event.preventDefault();
+            this.openOverlay(this.fieldEl(end), true);
+            return;
+        }
+        if (this.overlayRef) {
+            event.preventDefault();
+            this.focusPanel();
+        }
+    }
+    /** The input element for an end — the two are otherwise addressed by index. */
+    fieldEl(end) {
+        return end === 0 ? this.startEl().nativeElement : this.endEl().nativeElement;
+    }
+    /**
+     * Move focus into an already-mounted panel. A plain query is right HERE and
+     * wrong at mount time: the panel has settled, so there is no deferral to get
+     * wrong — and it keeps `autoFocus` as the single piece of panel API.
+     */
+    focusPanel() {
+        const pane = this.overlayRef?.overlayElement;
+        const target = pane?.querySelector('.wr-calendar__day--focused:not([disabled])') ??
+            pane?.querySelector('.wr-time-picker__input');
+        target?.focus();
+    }
+    /** Hand focus back to whatever opened the popup, if it is still on the page. */
+    restoreFocus() {
+        const target = this.openedFrom?.isConnected ? this.openedFrom : this.startEl().nativeElement;
+        target.focus();
     }
     // Input parsing
     onRangeInput(event, end) {
@@ -997,9 +1244,11 @@ class WrDateRangePicker {
         this.commitRange(end === 0 ? [parsed, finish] : [start, parsed], { normalise: false });
     }
     // Overlay
-    openOverlay() {
+    openOverlay(openedFrom = null, autoFocus = false) {
         if (this.overlayRef)
             return;
+        this.openedFrom = openedFrom;
+        this.autoFocusPanel = autoFocus;
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.host)
@@ -1016,9 +1265,22 @@ class WrDateRangePicker {
             panelClass: 'wr-date-picker-overlay',
         });
         this.overlayOpen.set(true);
+        // The trigger promises `aria-haspopup="dialog"`; the pane is the element it
+        // points at, so the role, the name and the id all belong here. Non-modal on
+        // purpose — the two text fields stay reachable while the calendar is up,
+        // which is the whole interaction model.
+        const pane = this.overlayRef.overlayElement;
+        pane.id = this.panelId;
+        pane.setAttribute('role', 'dialog');
+        pane.setAttribute('aria-modal', 'false');
+        pane.setAttribute('aria-label', this.resolvedPanelLabel());
         const ref = this.overlayRef.attach(new ComponentPortal(WrDateRangePanel));
         ref.setInput('value', this.value() ?? [null, null]);
+        ref.setInput('autoFocus', this.autoFocusPanel);
         this.panelRef.set(ref);
+        // A stepper edit belongs to the end it was made on. Sorting it here is what
+        // made the start stepper stop responding once it passed the end.
+        ref.instance.timeChanged.subscribe(next => this.commitRange(next, { normalise: false }));
         ref.instance.changed.subscribe(next => {
             const committed = this.commitRange(next, { normalise: true });
             // A complete date-only range is the end of the interaction; a datetime
@@ -1041,21 +1303,31 @@ class WrDateRangePicker {
             if (event.key === 'Escape') {
                 event.preventDefault();
                 this.closeOverlay();
-                this.startEl().nativeElement.focus();
             }
         });
     }
     /**
-     * Close the popover. `restoreFocus` returns focus to the start input — needed
-     * when the overlay is dismissed while focus lives inside it (picking the
-     * second date), because disposing then leaves focus on a removed element and
-     * the browser falls back to `<body>`.
+     * Close the popover, handing focus back to whichever field or button opened
+     * it — but ONLY when focus was still inside the pane. Dropped there it would
+     * land on `<body>` and the next Tab would restart from the top of the page;
+     * moved on by the user, it must be left where they put it.
+     *
+     * There is deliberately no "always restore" escape hatch. Escape reaches this
+     * overlay from anywhere in the document (the CDK dispatches it to the topmost
+     * one), so forcing a restore would drag the caret backwards out of the field
+     * the user was actually typing in — into the one that happened to open the
+     * popup, possibly several Tab stops away.
      */
-    closeOverlay(restoreFocus = false) {
-        const inside = this.overlayRef?.overlayElement.contains(this.host.nativeElement.ownerDocument.activeElement);
+    closeOverlay() {
+        const pane = this.overlayRef?.overlayElement;
+        const inside = !!pane && pane.contains(this.host.nativeElement.ownerDocument.activeElement);
         this.dispose();
-        if (restoreFocus || inside)
-            this.startEl().nativeElement.focus();
+        // The interaction is over, so settle the ordering an in-progress time edit
+        // was allowed to leave inverted. Blur does the same for the text inputs;
+        // without this, closing by clicking outside never passes through one.
+        this.commitRange(this.current(), { normalise: true });
+        if (inside)
+            this.restoreFocus();
     }
     dispose() {
         if (this.overlayRef) {
@@ -1064,6 +1336,7 @@ class WrDateRangePicker {
         }
         this.panelRef.set(null);
         this.overlayOpen.set(false);
+        this.autoFocusPanel = false;
     }
     // Commit
     /**
@@ -1150,20 +1423,29 @@ class WrDateRangePicker {
             return false;
         return a.getTime() === b.getTime();
     }
+    /**
+     * `null` and `[null, null]` are the same VALUE — an empty range — and treating
+     * them as different is what let the FIRST blur on an untouched picker write
+     * `[null, null]` over the `null` it was bound to. No date had moved, but
+     * `model()` emitted: a bound `[formField]` went dirty from nothing but tabbing
+     * through, and a consumer's `@if (period())` flipped from empty to truthy with
+     * neither end picked. The write guard in `commitRange` is only as good as this
+     * comparison.
+     */
     sameRange(a, b) {
         if (a === b)
             return true;
-        if (!a || !b)
-            return false;
-        return this.sameDate(a[0], b[0]) && this.sameDate(a[1], b[1]);
+        const [aStart, aEnd] = a ?? [null, null];
+        const [bStart, bEnd] = b ?? [null, null];
+        return this.sameDate(aStart, bStart) && this.sameDate(aEnd, bEnd);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDateRangePicker, isStandalone: true, selector: "wr-date-range-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrDateRangePicker, isStandalone: true, selector: "wr-date-range-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, panelAriaLabel: { classPropertyName: "panelAriaLabel", publicName: "panelAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endEl", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(0)\"\n    (keydown)=\"onFieldKey($event, 0)\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <input\n    #endInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(1)\"\n    (keydown)=\"onFieldKey($event, 1)\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <!--\n    `readonly` refuses to open the popup, so the trigger is disabled with it \u2014\n    otherwise it stays a focusable button advertising `aria-haspopup=\"dialog\"`\n    for a dialog it will never show.\n  -->\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateRangePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDateRangePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-range-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n" }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], startEl: [{ type: i0.ViewChild, args: ['startInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+            args: [{ selector: 'wr-date-range-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(0)\"\n    (keydown)=\"onFieldKey($event, 0)\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <input\n    #endInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput(1)\"\n    (keydown)=\"onFieldKey($event, 1)\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <!--\n    `readonly` refuses to open the popup, so the trigger is disabled with it \u2014\n    otherwise it stays a focusable button advertising `aria-haspopup=\"dialog\"`\n    for a dialog it will never show.\n  -->\n  <button\n    #trigger\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [attr.aria-controls]=\"overlayOpen() ? panelId : null\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n" }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], startEl: [{ type: i0.ViewChild, args: ['startInput', { isSignal: true }] }], endEl: [{ type: i0.ViewChild, args: ['endInput', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], panelAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelAriaLabel", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.