@nexterajs/ui 0.0.1 → 0.1.0

package/fesm2022/nexterajs-ui-forms.mjs

@@ -1,13 +1,18 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, forwardRef, ViewContainerRef, viewChild } from '@angular/core';
-import { NxeValidationGroupRegistry, NxeFormControlBase, nxeOptionalBoolean, NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { parseNumberFormat, NXE_NUMBER_SEPARATORS, formatNumber, parseNumber, roundHalfAwayFromZero, parseDateValue, NXE_DEFAULT_DISPLAY_FORMAT, NXE_DEFAULT_DATETIME_DISPLAY_FORMAT, NXE_DEFAULT_TIME_DISPLAY_FORMAT, formatDisplay, buildCalendarWeeks, buildPeriodCells, parseDisplay, serializeDate } from '@nexterajs/ui/intl';
+import { inject, ElementRef, input, booleanAttribute, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, linkedSignal, signal, viewChild, forwardRef, numberAttribute, afterRenderEffect, DestroyRef, ViewContainerRef, InjectionToken, Injector, afterNextRender, makeEnvironmentProviders, contentChild, contentChildren, TemplateRef, Directive } from '@angular/core';
+import { NxeValidationGroupRegistry, NXE_VALIDATION_GROUP, NxeFormControlBase, nxeOptionalBoolean, NXE_VALIDATION_TARGET, NxeMessageService, nxeFormatFileSize, nxeResolveExpr, nxeResolveText } from '@nexterajs/ui/core';
+import { NG_VALUE_ACCESSOR, ControlContainer, NgControl, FormSubmittedEvent, FormResetEvent, Validators } from '@angular/forms';
+import { nxeCurrencyCode, parseNumberFormat, nxeCurrencyNumberFormat, NXE_NUMBER_SEPARATORS, formatCurrency, formatNumber, parseNumber, roundHalfAwayFromZero, parseDateValue, NXE_DEFAULT_DISPLAY_FORMAT, NXE_DEFAULT_DATETIME_DISPLAY_FORMAT, NXE_DEFAULT_TIME_DISPLAY_FORMAT, formatDisplay, buildCalendarWeeks, buildPeriodCells, parseDisplay, serializeDate } from '@nexterajs/ui/intl';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { DateTime } from 'luxon';
-import { merge, filter } from 'rxjs';
+import { DateTime, Info } from 'luxon';
+import { merge, filter, map } from 'rxjs';
 import { nxePane, trackPaneFlip } from '@nexterajs/ui/styling';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormField } from '@angular/forms/signals';
+import { NgTemplateOutlet } from '@angular/common';
 
 /**
  * dx size coercion: `height="35"` and `[height]="35"` both mean 35px, while `'100%'` or `'3rem'`
@@ -22,26 +27,44 @@ function cssSize(value) {
 /**
  * `nxe-button` — drop-in replacement for DevExtreme `dx-button`.
  *
- * The host element IS the button (mirrors DevExtreme's `dx-button` DOM: the host carries the
- * styling classes and contains a single `.dx-button-content` child). This keeps every existing
- * `.nxe-btn*` / `.dx-button-content` global rule matching verbatim, and — critically — keeps the
- * shared `buttonLoading` directive working, which swaps `.dx-button-content` innerHTML for a
- * spinner (`getElementsByClassName('dx-button-content')[0]`).
+ * The host element IS the button (mirrors DevExtreme's `nxe-button` DOM: the host carries the
+ * styling classes and contains a single `.nxe-button-content` child). This keeps every existing
+ * `.nxe-btn*` / `.nxe-button-content` global rule matching verbatim, and — critically — keeps the
+ * shared `buttonLoading` directive working, which swaps `.nxe-button-content` innerHTML for a
+ * spinner (`getElementsByClassName('nxe-button-content')[0]`).
  *
  * Content is projected (`<nxe-icon> + <span>`, the dominant pattern). The legacy `text`/`type`
- * inputs render a `.dx-button-text` label for the ~25 attribute-styled buttons.
+ * inputs render a `.nxe-button-text` label for the ~25 attribute-styled buttons.
+ *
+ * `stylingMode`, `size`, `loading` and `block` are additive: with none of them set the host renders
+ * exactly as before. An icon can be projected into the leading slot as
+ * `<svg nxeButtonIcon ...>` (or `[nxeIcon]`), placed before the label.
  *
  * `onClick` emits {@link NxeButtonClickEvent}; native `(click)` also fires (27 sites bind it).
  */
 class NxeButtonComponent {
     registry = inject(NxeValidationGroupRegistry);
+    groupScope = inject(NXE_VALIDATION_GROUP, { optional: true });
     elementRef = inject(ElementRef);
-    /** Legacy `text` label (rendered as `.dx-button-text` when set, no projected content). */
+    /** Legacy `text` label (rendered as `.nxe-button-text` when set, no projected content). */
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     /** Style intent (`default`=blue, `success`=green, `danger`=red, `normal`=white). */
     type = input('normal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Fill treatment: `contained` (default), `outlined` (transparent with a coloured border) or `text` (no border). */
+    stylingMode = input('contained', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stylingMode" }] : /* istanbul ignore next */ []));
+    /** Scale: `sm`, `md` (default, the legacy size) or `lg`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * In-flight state: shows a spinner over the (hidden but still laid out, so the width holds)
+     * content, sets `aria-busy="true"` and swallows clicks and Enter/Space until it clears.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Full-width button (`display: flex; width: 100%`). An explicit `width` still wins. */
+    block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Disabled state (`[disabled]`); blocks `onClick` and dims the button. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Named validation group resolved via {@link NxeValidationGroupRegistry} on click. */
@@ -50,8 +73,8 @@ class NxeButtonComponent {
     /** DevExtreme parity input; only ever `false` in this codebase (suppresses tab focus). */
     focusStateEnabled = input(true, { ...(ngDevMode ? { debugName: "focusStateEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
-     * dx `icon` — renders `<i class="dx-icon dx-icon-NAME">` as the first child of
-     * `.dx-button-content`, before any projected content. Projection is the dominant pattern
+     * dx `icon` — renders `<i class="nxe-icon nxe-icon-NAME">` as the first child of
+     * `.nxe-button-content`, before any projected content. Projection is the dominant pattern
      * here (a `mat-icon` plus a `span`), so the two must coexist rather than compete.
      */
     icon = input(undefined, /* @ts-ignore */
@@ -74,12 +97,15 @@ class NxeButtonComponent {
         this.handleClick(event);
     }
     handleClick(event) {
-        if (this.disabled()) {
+        if (this.disabled() || this.loading()) {
             event.preventDefault();
             event.stopImmediatePropagation();
             return;
         }
-        const group = this.validationGroup() ?? '';
+        // A named group wins; otherwise a surrounding nxe-validation-group; otherwise dx's
+        // implicit global group. Same precedence the validator applies, so a button and the
+        // fields beside it always resolve to the same group.
+        const group = this.validationGroup() || this.groupScope?.groupKey || '';
         this.onClick.emit({
             event,
             validationGroup: { validate: () => this.registry.validate(group) },
@@ -88,49 +114,63 @@ class NxeButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeButtonComponent, isStandalone: true, selector: "nxe-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validationGroup: { classPropertyName: "validationGroup", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null }, focusStateEnabled: { classPropertyName: "focusStateEnabled", publicName: "focusStateEnabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { attributes: { "role": "button" }, listeners: { "click": "handleClick($event)", "keydown.enter": "handleKeydown($event)", "keydown.space": "handleKeydown($event)" }, properties: { "attr.tabindex": "disabled() || !focusStateEnabled() ? null : 0", "attr.aria-disabled": "disabled() ? true : null", "class.nxe-button-default": "type() === 'default'", "class.nxe-button-success": "type() === 'success'", "class.nxe-button-danger": "type() === 'danger'", "class.nxe-button-has-text": "!!text()", "class.dx-button-has-text": "!!text()", "class.dx-button-has-icon": "!!icon()", "style.height": "heightStyle()", "style.width": "widthStyle()", "class.nxe-disabled": "disabled()" }, classAttribute: "nxe-widget" }, ngImport: i0, template: `
-        <span class="dx-button-content">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeButtonComponent, isStandalone: true, selector: "nxe-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, stylingMode: { classPropertyName: "stylingMode", publicName: "stylingMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validationGroup: { classPropertyName: "validationGroup", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null }, focusStateEnabled: { classPropertyName: "focusStateEnabled", publicName: "focusStateEnabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { attributes: { "role": "button" }, listeners: { "click": "handleClick($event)", "keydown.enter": "handleKeydown($event)", "keydown.space": "handleKeydown($event)" }, properties: { "attr.tabindex": "disabled() || !focusStateEnabled() ? null : 0", "attr.aria-disabled": "disabled() || loading() ? true : null", "attr.aria-busy": "loading() ? true : null", "class.nxe-button-mode-outlined": "stylingMode() === 'outlined'", "class.nxe-button-mode-text": "stylingMode() === 'text'", "class.nxe-button-sm": "size() === 'sm'", "class.nxe-button-lg": "size() === 'lg'", "class.nxe-button-block": "block()", "class.nxe-button-loading": "loading()", "class.nxe-button-default": "type() === 'default'", "class.nxe-button-success": "type() === 'success'", "class.nxe-button-danger": "type() === 'danger'", "class.nxe-button-has-text": "!!text()", "class.nxe-button-has-icon": "!!icon()", "style.height": "heightStyle()", "style.width": "widthStyle()", "class.nxe-disabled": "disabled()" }, classAttribute: "nxe-widget" }, ngImport: i0, template: `
+        <span class="nxe-button-content">
             @if (icon()) {
-                <i class="dx-icon dx-icon-{{ icon() }}"></i>
+                <i class="nxe-icon nxe-icon-{{ icon() }}"></i>
             }
+            <ng-content select="[nxeButtonIcon], [nxeIcon]" />
             <ng-content />
             @if (text()) {
-                <span class="dx-button-text">{{ text() }}</span>
+                <span class="nxe-button-text">{{ text() }}</span>
             }
         </span>
-    `, isInline: true, styles: ["nxe-button{display:inline-flex;box-sizing:border-box;cursor:pointer;max-width:100%;overflow:hidden;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#333;font-weight:400;line-height:1.35715}nxe-button:focus{outline:none}nxe-button .dx-button-content{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.35715;padding:8px}nxe-button.nxe-button-has-text .dx-button-content{padding-inline:12px}nxe-button .dx-button-text{line-height:1.2858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-button:hover{background-color:#f4f4f4}nxe-button:active{background-color:#c2c2c2}nxe-button.nxe-button-default{background-color:#337ab7;border-color:transparent;color:#fff}nxe-button.nxe-button-default:hover{background-color:#2d6ca3}nxe-button.nxe-button-default:active{background-color:#19405b}nxe-button.nxe-button-success{background-color:#5cb85c;border-color:transparent;color:#fff}nxe-button.nxe-button-success:hover{background-color:#46a046}nxe-button.nxe-button-success:active{background-color:#306e30}nxe-button.nxe-button-danger{background-color:#d9534f;border-color:transparent;color:#fff}nxe-button.nxe-button-danger:hover{background-color:#cd312c}nxe-button.nxe-button-danger:active{background-color:#932320}nxe-button[disabled]{opacity:.5;cursor:default}nxe-button.nxe-disabled{opacity:.5;cursor:default;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        @if (loading()) {
+            <span class="nxe-button-spinner" aria-hidden="true"></span>
+        }
+    `, isInline: true, styles: ["nxe-button{display:inline-flex;box-sizing:border-box;cursor:pointer;max-width:100%;overflow:hidden;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid var(--nxe-ui-button-border-secondary, var(--nxe-ui-border, #ddd));border-radius:var(--nxe-ui-radius, 4px);background-color:var(--nxe-ui-button-bg-secondary, var(--nxe-ui-surface, #fff));color:var(--nxe-ui-button-fg-secondary, var(--nxe-ui-text, #333));font-weight:400;line-height:1.35715}nxe-button:focus{outline:none}nxe-button:where(:focus-visible){box-shadow:var(--nxe-ui-button-focus-ring, none)}nxe-button .nxe-button-content{box-sizing:border-box;flex:1 1 auto;height:100%;max-height:100%;display:flex;align-items:center;justify-content:center;gap:var(--nxe-ui-button-gap, 0px);line-height:1.35715;padding:var(--nxe-ui-button-padding, 8px)}nxe-button.nxe-button-has-text .nxe-button-content{padding-inline:var(--nxe-ui-button-padding-inline, 12px)}nxe-button.nxe-button-has-text .nxe-button-content>i.nxe-icon{margin-inline-start:0;margin-inline-end:calc(9px - var(--nxe-ui-button-gap, 0px))}nxe-button .nxe-button-text{line-height:1.2858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-button:hover{background-color:var(--nxe-ui-button-hover-bg-secondary, #f4f4f4)}nxe-button:active{background-color:var(--nxe-ui-button-active-bg-secondary, #c2c2c2)}nxe-button.nxe-button-default{background-color:var(--nxe-ui-button-bg-primary, var(--nxe-ui-accent, #337ab7));border-color:var(--nxe-ui-button-border-primary, transparent);color:var(--nxe-ui-button-fg-primary, var(--nxe-ui-accent-contrast, #fff))}nxe-button.nxe-button-default:hover{background-color:var(--nxe-ui-button-hover-bg-primary, #2d6ca3)}nxe-button.nxe-button-default:active{background-color:var(--nxe-ui-button-active-bg-primary, #19405b)}nxe-button.nxe-button-success{background-color:var(--nxe-ui-button-bg-success, var(--nxe-ui-success, #5cb85c));border-color:var(--nxe-ui-button-border-success, transparent);color:var(--nxe-ui-button-fg-success, #fff)}nxe-button.nxe-button-success:hover{background-color:var(--nxe-ui-button-hover-bg-success, #46a046)}nxe-button.nxe-button-success:active{background-color:var(--nxe-ui-button-active-bg-success, #306e30)}nxe-button.nxe-button-danger{background-color:var(--nxe-ui-button-bg-danger, var(--nxe-ui-danger, #d9534f));border-color:var(--nxe-ui-button-border-danger, transparent);color:var(--nxe-ui-button-fg-danger, #fff)}nxe-button.nxe-button-danger:hover{background-color:var(--nxe-ui-button-hover-bg-danger, #cd312c)}nxe-button.nxe-button-danger:active{background-color:var(--nxe-ui-button-active-bg-danger, #932320)}nxe-button[disabled]{opacity:var(--nxe-ui-disabled-opacity, .5);cursor:default}nxe-button.nxe-disabled{opacity:var(--nxe-ui-disabled-opacity, .5);cursor:default;pointer-events:none}nxe-button .nxe-button-content>[nxeButtonIcon],nxe-button .nxe-button-content>[nxeIcon]{flex:none;width:1.25em;height:1.25em}nxe-button .nxe-button-content>[nxeButtonIcon]:not(:last-child),nxe-button .nxe-button-content>[nxeIcon]:not(:last-child){margin-inline-end:var(--nxe-ui-space-2, 8px)}nxe-button.nxe-button-sm{font-size:var(--nxe-ui-font-size-sm, 13px)}nxe-button.nxe-button-sm .nxe-button-content{padding:var(--nxe-ui-space-1, 4px)}nxe-button.nxe-button-sm.nxe-button-has-text .nxe-button-content{padding-inline:var(--nxe-ui-space-2, 8px)}nxe-button.nxe-button-lg{font-size:var(--nxe-ui-font-size-lg, 16px)}nxe-button.nxe-button-lg .nxe-button-content{padding:var(--nxe-ui-space-3, 12px)}nxe-button.nxe-button-lg.nxe-button-has-text .nxe-button-content{padding-inline:var(--nxe-ui-space-5, 20px)}nxe-button.nxe-button-block{display:flex;width:100%}nxe-button.nxe-button-mode-outlined,nxe-button.nxe-button-mode-text{--nxe-button-tone: var(--nxe-ui-button-fg-secondary, var(--nxe-ui-text, #333));background-color:transparent;color:var(--nxe-button-tone)}nxe-button.nxe-button-mode-outlined:hover,nxe-button.nxe-button-mode-text:hover{background-color:color-mix(in srgb,var(--nxe-button-tone) 8%,transparent)}nxe-button.nxe-button-mode-outlined:active,nxe-button.nxe-button-mode-text:active{background-color:color-mix(in srgb,var(--nxe-button-tone) 16%,transparent)}nxe-button.nxe-button-mode-outlined.nxe-button-default,nxe-button.nxe-button-mode-text.nxe-button-default{--nxe-button-tone: var(--nxe-ui-button-bg-primary, var(--nxe-ui-accent, #337ab7))}nxe-button.nxe-button-mode-outlined.nxe-button-success,nxe-button.nxe-button-mode-text.nxe-button-success{--nxe-button-tone: var(--nxe-ui-button-bg-success, var(--nxe-ui-success, #5cb85c))}nxe-button.nxe-button-mode-outlined.nxe-button-danger,nxe-button.nxe-button-mode-text.nxe-button-danger{--nxe-button-tone: var(--nxe-ui-button-bg-danger, var(--nxe-ui-danger, #d9534f))}nxe-button.nxe-button-mode-outlined.nxe-button-default,nxe-button.nxe-button-mode-outlined.nxe-button-success,nxe-button.nxe-button-mode-outlined.nxe-button-danger,nxe-button.nxe-button-mode-text.nxe-button-default,nxe-button.nxe-button-mode-text.nxe-button-success,nxe-button.nxe-button-mode-text.nxe-button-danger{background-color:transparent;color:var(--nxe-button-tone)}nxe-button.nxe-button-mode-outlined.nxe-button-default:hover,nxe-button.nxe-button-mode-outlined.nxe-button-success:hover,nxe-button.nxe-button-mode-outlined.nxe-button-danger:hover,nxe-button.nxe-button-mode-text.nxe-button-default:hover,nxe-button.nxe-button-mode-text.nxe-button-success:hover,nxe-button.nxe-button-mode-text.nxe-button-danger:hover{background-color:color-mix(in srgb,var(--nxe-button-tone) 8%,transparent)}nxe-button.nxe-button-mode-outlined.nxe-button-default:active,nxe-button.nxe-button-mode-outlined.nxe-button-success:active,nxe-button.nxe-button-mode-outlined.nxe-button-danger:active,nxe-button.nxe-button-mode-text.nxe-button-default:active,nxe-button.nxe-button-mode-text.nxe-button-success:active,nxe-button.nxe-button-mode-text.nxe-button-danger:active{background-color:color-mix(in srgb,var(--nxe-button-tone) 16%,transparent)}nxe-button.nxe-button-mode-outlined{border-color:var(--nxe-ui-button-border-secondary, var(--nxe-ui-border, #ddd))}nxe-button.nxe-button-mode-outlined.nxe-button-default,nxe-button.nxe-button-mode-outlined.nxe-button-success,nxe-button.nxe-button-mode-outlined.nxe-button-danger{border-color:var(--nxe-button-tone)}nxe-button.nxe-button-mode-text,nxe-button.nxe-button-mode-text.nxe-button-default,nxe-button.nxe-button-mode-text.nxe-button-success,nxe-button.nxe-button-mode-text.nxe-button-danger{border-color:transparent}nxe-button.nxe-button-loading{position:relative;cursor:progress}nxe-button.nxe-button-loading .nxe-button-content{visibility:hidden}nxe-button .nxe-button-spinner{position:absolute;inset:0;margin:auto;box-sizing:border-box;width:1.25em;height:1.25em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:nxe-button-spin .7s linear infinite}@keyframes nxe-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){nxe-button .nxe-button-spinner{animation-duration:2s}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-button', standalone: true, template: `
-        <span class="dx-button-content">
+        <span class="nxe-button-content">
             @if (icon()) {
-                <i class="dx-icon dx-icon-{{ icon() }}"></i>
+                <i class="nxe-icon nxe-icon-{{ icon() }}"></i>
             }
+            <ng-content select="[nxeButtonIcon], [nxeIcon]" />
             <ng-content />
             @if (text()) {
-                <span class="dx-button-text">{{ text() }}</span>
+                <span class="nxe-button-text">{{ text() }}</span>
             }
         </span>
+        @if (loading()) {
+            <span class="nxe-button-spinner" aria-hidden="true"></span>
+        }
     `, host: {
                         class: 'nxe-widget',
                         role: 'button',
                         '[attr.tabindex]': 'disabled() || !focusStateEnabled() ? null : 0',
-                        '[attr.aria-disabled]': 'disabled() ? true : null',
+                        '[attr.aria-disabled]': 'disabled() || loading() ? true : null',
+                        '[attr.aria-busy]': 'loading() ? true : null',
+                        '[class.nxe-button-mode-outlined]': "stylingMode() === 'outlined'",
+                        '[class.nxe-button-mode-text]': "stylingMode() === 'text'",
+                        '[class.nxe-button-sm]': "size() === 'sm'",
+                        '[class.nxe-button-lg]': "size() === 'lg'",
+                        '[class.nxe-button-block]': 'block()',
+                        '[class.nxe-button-loading]': 'loading()',
                         '[class.nxe-button-default]': "type() === 'default'",
                         '[class.nxe-button-success]': "type() === 'success'",
                         '[class.nxe-button-danger]': "type() === 'danger'",
                         '[class.nxe-button-has-text]': '!!text()',
-                        '[class.dx-button-has-text]': '!!text()',
-                        '[class.dx-button-has-icon]': '!!icon()',
+                        '[class.nxe-button-has-icon]': '!!icon()',
                         '[style.height]': 'heightStyle()',
                         '[style.width]': 'widthStyle()',
                         '[class.nxe-disabled]': 'disabled()',
                         '(click)': 'handleClick($event)',
                         '(keydown.enter)': 'handleKeydown($event)',
                         '(keydown.space)': 'handleKeydown($event)',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-button{display:inline-flex;box-sizing:border-box;cursor:pointer;max-width:100%;overflow:hidden;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#333;font-weight:400;line-height:1.35715}nxe-button:focus{outline:none}nxe-button .dx-button-content{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.35715;padding:8px}nxe-button.nxe-button-has-text .dx-button-content{padding-inline:12px}nxe-button .dx-button-text{line-height:1.2858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-button:hover{background-color:#f4f4f4}nxe-button:active{background-color:#c2c2c2}nxe-button.nxe-button-default{background-color:#337ab7;border-color:transparent;color:#fff}nxe-button.nxe-button-default:hover{background-color:#2d6ca3}nxe-button.nxe-button-default:active{background-color:#19405b}nxe-button.nxe-button-success{background-color:#5cb85c;border-color:transparent;color:#fff}nxe-button.nxe-button-success:hover{background-color:#46a046}nxe-button.nxe-button-success:active{background-color:#306e30}nxe-button.nxe-button-danger{background-color:#d9534f;border-color:transparent;color:#fff}nxe-button.nxe-button-danger:hover{background-color:#cd312c}nxe-button.nxe-button-danger:active{background-color:#932320}nxe-button[disabled]{opacity:.5;cursor:default}nxe-button.nxe-disabled{opacity:.5;cursor:default;pointer-events:none}\n"] }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], validationGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationGroup", required: false }] }], focusStateEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusStateEnabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-button{display:inline-flex;box-sizing:border-box;cursor:pointer;max-width:100%;overflow:hidden;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;border:1px solid var(--nxe-ui-button-border-secondary, var(--nxe-ui-border, #ddd));border-radius:var(--nxe-ui-radius, 4px);background-color:var(--nxe-ui-button-bg-secondary, var(--nxe-ui-surface, #fff));color:var(--nxe-ui-button-fg-secondary, var(--nxe-ui-text, #333));font-weight:400;line-height:1.35715}nxe-button:focus{outline:none}nxe-button:where(:focus-visible){box-shadow:var(--nxe-ui-button-focus-ring, none)}nxe-button .nxe-button-content{box-sizing:border-box;flex:1 1 auto;height:100%;max-height:100%;display:flex;align-items:center;justify-content:center;gap:var(--nxe-ui-button-gap, 0px);line-height:1.35715;padding:var(--nxe-ui-button-padding, 8px)}nxe-button.nxe-button-has-text .nxe-button-content{padding-inline:var(--nxe-ui-button-padding-inline, 12px)}nxe-button.nxe-button-has-text .nxe-button-content>i.nxe-icon{margin-inline-start:0;margin-inline-end:calc(9px - var(--nxe-ui-button-gap, 0px))}nxe-button .nxe-button-text{line-height:1.2858;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-button:hover{background-color:var(--nxe-ui-button-hover-bg-secondary, #f4f4f4)}nxe-button:active{background-color:var(--nxe-ui-button-active-bg-secondary, #c2c2c2)}nxe-button.nxe-button-default{background-color:var(--nxe-ui-button-bg-primary, var(--nxe-ui-accent, #337ab7));border-color:var(--nxe-ui-button-border-primary, transparent);color:var(--nxe-ui-button-fg-primary, var(--nxe-ui-accent-contrast, #fff))}nxe-button.nxe-button-default:hover{background-color:var(--nxe-ui-button-hover-bg-primary, #2d6ca3)}nxe-button.nxe-button-default:active{background-color:var(--nxe-ui-button-active-bg-primary, #19405b)}nxe-button.nxe-button-success{background-color:var(--nxe-ui-button-bg-success, var(--nxe-ui-success, #5cb85c));border-color:var(--nxe-ui-button-border-success, transparent);color:var(--nxe-ui-button-fg-success, #fff)}nxe-button.nxe-button-success:hover{background-color:var(--nxe-ui-button-hover-bg-success, #46a046)}nxe-button.nxe-button-success:active{background-color:var(--nxe-ui-button-active-bg-success, #306e30)}nxe-button.nxe-button-danger{background-color:var(--nxe-ui-button-bg-danger, var(--nxe-ui-danger, #d9534f));border-color:var(--nxe-ui-button-border-danger, transparent);color:var(--nxe-ui-button-fg-danger, #fff)}nxe-button.nxe-button-danger:hover{background-color:var(--nxe-ui-button-hover-bg-danger, #cd312c)}nxe-button.nxe-button-danger:active{background-color:var(--nxe-ui-button-active-bg-danger, #932320)}nxe-button[disabled]{opacity:var(--nxe-ui-disabled-opacity, .5);cursor:default}nxe-button.nxe-disabled{opacity:var(--nxe-ui-disabled-opacity, .5);cursor:default;pointer-events:none}nxe-button .nxe-button-content>[nxeButtonIcon],nxe-button .nxe-button-content>[nxeIcon]{flex:none;width:1.25em;height:1.25em}nxe-button .nxe-button-content>[nxeButtonIcon]:not(:last-child),nxe-button .nxe-button-content>[nxeIcon]:not(:last-child){margin-inline-end:var(--nxe-ui-space-2, 8px)}nxe-button.nxe-button-sm{font-size:var(--nxe-ui-font-size-sm, 13px)}nxe-button.nxe-button-sm .nxe-button-content{padding:var(--nxe-ui-space-1, 4px)}nxe-button.nxe-button-sm.nxe-button-has-text .nxe-button-content{padding-inline:var(--nxe-ui-space-2, 8px)}nxe-button.nxe-button-lg{font-size:var(--nxe-ui-font-size-lg, 16px)}nxe-button.nxe-button-lg .nxe-button-content{padding:var(--nxe-ui-space-3, 12px)}nxe-button.nxe-button-lg.nxe-button-has-text .nxe-button-content{padding-inline:var(--nxe-ui-space-5, 20px)}nxe-button.nxe-button-block{display:flex;width:100%}nxe-button.nxe-button-mode-outlined,nxe-button.nxe-button-mode-text{--nxe-button-tone: var(--nxe-ui-button-fg-secondary, var(--nxe-ui-text, #333));background-color:transparent;color:var(--nxe-button-tone)}nxe-button.nxe-button-mode-outlined:hover,nxe-button.nxe-button-mode-text:hover{background-color:color-mix(in srgb,var(--nxe-button-tone) 8%,transparent)}nxe-button.nxe-button-mode-outlined:active,nxe-button.nxe-button-mode-text:active{background-color:color-mix(in srgb,var(--nxe-button-tone) 16%,transparent)}nxe-button.nxe-button-mode-outlined.nxe-button-default,nxe-button.nxe-button-mode-text.nxe-button-default{--nxe-button-tone: var(--nxe-ui-button-bg-primary, var(--nxe-ui-accent, #337ab7))}nxe-button.nxe-button-mode-outlined.nxe-button-success,nxe-button.nxe-button-mode-text.nxe-button-success{--nxe-button-tone: var(--nxe-ui-button-bg-success, var(--nxe-ui-success, #5cb85c))}nxe-button.nxe-button-mode-outlined.nxe-button-danger,nxe-button.nxe-button-mode-text.nxe-button-danger{--nxe-button-tone: var(--nxe-ui-button-bg-danger, var(--nxe-ui-danger, #d9534f))}nxe-button.nxe-button-mode-outlined.nxe-button-default,nxe-button.nxe-button-mode-outlined.nxe-button-success,nxe-button.nxe-button-mode-outlined.nxe-button-danger,nxe-button.nxe-button-mode-text.nxe-button-default,nxe-button.nxe-button-mode-text.nxe-button-success,nxe-button.nxe-button-mode-text.nxe-button-danger{background-color:transparent;color:var(--nxe-button-tone)}nxe-button.nxe-button-mode-outlined.nxe-button-default:hover,nxe-button.nxe-button-mode-outlined.nxe-button-success:hover,nxe-button.nxe-button-mode-outlined.nxe-button-danger:hover,nxe-button.nxe-button-mode-text.nxe-button-default:hover,nxe-button.nxe-button-mode-text.nxe-button-success:hover,nxe-button.nxe-button-mode-text.nxe-button-danger:hover{background-color:color-mix(in srgb,var(--nxe-button-tone) 8%,transparent)}nxe-button.nxe-button-mode-outlined.nxe-button-default:active,nxe-button.nxe-button-mode-outlined.nxe-button-success:active,nxe-button.nxe-button-mode-outlined.nxe-button-danger:active,nxe-button.nxe-button-mode-text.nxe-button-default:active,nxe-button.nxe-button-mode-text.nxe-button-success:active,nxe-button.nxe-button-mode-text.nxe-button-danger:active{background-color:color-mix(in srgb,var(--nxe-button-tone) 16%,transparent)}nxe-button.nxe-button-mode-outlined{border-color:var(--nxe-ui-button-border-secondary, var(--nxe-ui-border, #ddd))}nxe-button.nxe-button-mode-outlined.nxe-button-default,nxe-button.nxe-button-mode-outlined.nxe-button-success,nxe-button.nxe-button-mode-outlined.nxe-button-danger{border-color:var(--nxe-button-tone)}nxe-button.nxe-button-mode-text,nxe-button.nxe-button-mode-text.nxe-button-default,nxe-button.nxe-button-mode-text.nxe-button-success,nxe-button.nxe-button-mode-text.nxe-button-danger{border-color:transparent}nxe-button.nxe-button-loading{position:relative;cursor:progress}nxe-button.nxe-button-loading .nxe-button-content{visibility:hidden}nxe-button .nxe-button-spinner{position:absolute;inset:0;margin:auto;box-sizing:border-box;width:1.25em;height:1.25em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:nxe-button-spin .7s linear infinite}@keyframes nxe-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){nxe-button .nxe-button-spinner{animation-duration:2s}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], stylingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "stylingMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], validationGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationGroup", required: false }] }], focusStateEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusStateEnabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
 /**
  * `nxe-text-box` — drop-in replacement for DevExtreme `dx-text-box`.
@@ -139,6 +179,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * `[(ngModel)]`, one-way `[value]`, and `[readOnly]`. Like DevExtreme's default
  * (`valueChangeEvent='change'`), the value commits on **blur** — not on every keystroke.
  *
+ * `showClearButton` (dx default `false`) adds dx's clear area after the input while the field
+ * holds text and is neither read-only nor disabled; it sets the value to `''`, dx's own empty
+ * value for a text box, and focuses the input.
+ *
  * It provides {@link NXE_VALIDATION_TARGET} so a projected `nxe-validator` can read its value
  * and push back the invalid message, which renders as the red `.nxe-invalid-message` bubble.
  */
@@ -152,38 +196,132 @@ class NxeTextBoxComponent extends NxeFormControlBase {
     hoverStateEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "hoverStateEnabledInput" } : /* istanbul ignore next */ {}), alias: 'hoverStateEnabled', transform: nxeOptionalBoolean });
     hoverStateEnabled = computed(() => this.hoverStateEnabledInput() ?? this.nxeDefaults.textBox?.hoverStateEnabled ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hoverStateEnabled" }] : /* istanbul ignore next */ []));
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.textBox` can turn it on app-wide. */
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.textBox?.showClearButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    /**
+     * With `mode="password"`, an icon button after the field that shows the password as text and
+     * hides it again. Off by default; it has no effect in any other mode.
+     */
+    showPasswordToggle = input(false, { ...(ngDevMode ? { debugName: "showPasswordToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    passwordToggleVisible = computed(() => this.showPasswordToggle() && this.mode() === 'password' && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordToggleVisible" }] : /* istanbul ignore next */ []));
+    /** Whether the password is showing as text right now; hidden again whenever the toggle goes away. */
+    passwordRevealed = linkedSignal({ ...(ngDevMode ? { debugName: "passwordRevealed" } : /* istanbul ignore next */ {}), source: this.passwordToggleVisible,
+        computation: () => false });
+    passwordToggleLabel = computed(() => this.nxeMessages.t(this.passwordRevealed() ? 'forms.password.hide' : 'forms.password.show'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : /* istanbul ignore next */ []));
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => this.value() ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    fieldRef = viewChild.required('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldRef" }] : /* istanbul ignore next */ []));
+    /**
+     * The text in the field right now, typed or not. dx shows the clear button by the field's
+     * emptiness (`.dx-texteditor-empty`), which follows every keystroke, not the committed value.
+     */
+    fieldText = linkedSignal(() => this.displayValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldText" }] : /* istanbul ignore next */ []));
+    clearButtonVisible = computed(() => this.showClearButton() && !this.readOnly() && !this.disabled() && this.fieldText() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
+    /** dx `valueChangeEvent: 'input'` — the search-as-you-type case. */
+    onTypedInput(event) {
+        const text = event.target.value;
+        this.fieldText.set(text);
+        this.commitOn('input', text, event);
+    }
+    /**
+     * dx `_clearValueHandler`: value back to `''`, then focus on the input. The field is emptied by
+     * hand as well — typed-but-uncommitted text over an already-empty value would otherwise survive,
+     * because the `[value]` binding has not changed.
+     */
+    onClear(event) {
+        const field = this.fieldRef().nativeElement;
+        this.commitValue('', event);
+        field.value = '';
+        this.fieldText.set('');
+        if (!this.focused()) {
+            field.focus();
+        }
+    }
+    onTypedKeyup(event) {
+        this.commitOn('keyup', event.target.value, event);
+    }
+    commitPending(event) {
+        this.commitValue(this.fieldRef().nativeElement.value, event);
+    }
     onBlur(event) {
+        // Blur commits whatever the mode: a value typed and left must not be discarded because
+        // the configured event never fired.
         this.commitValue(event.target.value, event);
         this.focused.set(false);
         this.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTextBoxComponent, isStandalone: true, selector: "nxe-text-box", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabledInput: { classPropertyName: "hoverStateEnabledInput", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-textbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTextBoxComponent, isStandalone: true, selector: "nxe-text-box", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabledInput: { classPropertyName: "hoverStateEnabledInput", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()" }, classAttribute: "nxe-widget nxe-editor nxe-textbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTextBoxComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
-        <div class="nxe-editor-container">
-            <input
-                class="nxe-editor-input nxe-textbox-input"
-                [type]="mode()"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="placeholder() || null"
-                autocomplete="off"
-                (blur)="onBlur($event)"
-                (focus)="focused.set(true)" />
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
+        ], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-textbox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="invalidState() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                [type]="passwordRevealed() ? 'text' : mode()"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="placeholder() || null"
+                autocomplete="off"
+                (input)="onTypedInput($event)"
+                (keyup)="onTypedKeyup($event)"
+                (blur)="onBlur($event)"
+                (focus)="focused.set(true)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+            @if (passwordToggleVisible()) {
+                <!-- mousedown is held back so a click does not pull focus out of the field. -->
+                <button
+                    type="button"
+                    class="nxe-password-toggle"
+                    [attr.aria-label]="passwordToggleLabel()"
+                    [attr.aria-pressed]="passwordRevealed()"
+                    [attr.aria-controls]="controlId()"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="passwordRevealed.set(!passwordRevealed())">
+                    <svg viewBox="0 0 18 18" focusable="false" aria-hidden="true">
+                        <path d="M9 3.5C5.2 3.5 2.2 6 1 9c1.2 3 4.2 5.5 8 5.5s6.8-2.5 8-5.5c-1.2-3-4.2-5.5-8-5.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0-5.2a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4Z" />
+                        @if (passwordRevealed()) {
+                            <path class="nxe-password-toggle-slash" d="M3 2.4 15.6 15l-1 1L2 3.4l1-1Z" />
+                        }
+                    </svg>
+                </button>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTextBoxComponent, decorators: [{
@@ -191,30 +329,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{
                     selector: 'nxe-text-box',
                     standalone: true,
-                    template: `
-        <div class="nxe-editor-container">
-            <input
-                class="nxe-editor-input nxe-textbox-input"
-                [type]="mode()"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="placeholder() || null"
-                autocomplete="off"
-                (blur)="onBlur($event)"
-                (focus)="focused.set(true)" />
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
+                    template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-textbox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="invalidState() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                [type]="passwordRevealed() ? 'text' : mode()"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="placeholder() || null"
+                autocomplete="off"
+                (input)="onTypedInput($event)"
+                (keyup)="onTypedKeyup($event)"
+                (blur)="onBlur($event)"
+                (focus)="focused.set(true)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+            @if (passwordToggleVisible()) {
+                <!-- mousedown is held back so a click does not pull focus out of the field. -->
+                <button
+                    type="button"
+                    class="nxe-password-toggle"
+                    [attr.aria-label]="passwordToggleLabel()"
+                    [attr.aria-pressed]="passwordRevealed()"
+                    [attr.aria-controls]="controlId()"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="passwordRevealed.set(!passwordRevealed())">
+                    <svg viewBox="0 0 18 18" focusable="false" aria-hidden="true">
+                        <path d="M9 3.5C5.2 3.5 2.2 6 1 9c1.2 3 4.2 5.5 8 5.5s6.8-2.5 8-5.5c-1.2-3-4.2-5.5-8-5.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0-5.2a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4Z" />
+                        @if (passwordRevealed()) {
+                            <path class="nxe-password-toggle-slash" d="M3 2.4 15.6 15l-1 1L2 3.4l1-1Z" />
+                        }
+                    </svg>
+                </button>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
     `,
                     host: {
                         class: 'nxe-widget nxe-editor nxe-textbox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                     },
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextBoxComponent), multi: true },
@@ -223,7 +401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hoverStateEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }] } });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hoverStateEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /**
  * `nxe-text-area` — drop-in replacement for DevExtreme `dx-text-area`.
@@ -240,82 +418,237 @@ class NxeTextAreaComponent extends NxeFormControlBase {
     heightInput = input(undefined, { ...(ngDevMode ? { debugName: "heightInput" } : /* istanbul ignore next */ {}), alias: 'height' });
     height = computed(() => this.heightInput() ?? this.nxeDefaults.textArea?.height ?? 80, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `maxLength`: the most characters the field takes. Sets the native `maxlength`, so typing
+     * and pasting stop at the limit, and shows a live "12/200" count under the text. Unset (the
+     * default), there is no limit and no counter.
+     */
+    maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: (v) => (v === null || v === undefined || v === '' ? undefined : numberAttribute(v, undefined)) });
+    /**
+     * Grow with the text between {@link minRows} and {@link maxRows}, scrolling past the maximum.
+     * The fixed `height` is ignored while this is on. Off by default.
+     */
+    autoGrow = input(false, { ...(ngDevMode ? { debugName: "autoGrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Rows the field never shrinks below while `autoGrow` is on. */
+    minRows = input(3, { ...(ngDevMode ? { debugName: "minRows" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(1, numberAttribute(v, 3)) });
+    /** Rows after which an auto-growing field scrolls instead of growing; `0` means never. */
+    maxRows = input(10, { ...(ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, numberAttribute(v, 10)) });
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => this.value() ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** The text in the field right now, typed or not: the counter and the height follow every keystroke. */
+    fieldText = linkedSignal(() => this.displayValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldText" }] : /* istanbul ignore next */ []));
+    remaining = computed(() => (this.maxLength() ?? 0) - this.fieldText().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remaining" }] : /* istanbul ignore next */ []));
+    /** Close enough to the limit to say so: the last 10 characters, or 10% of a long limit. */
+    nearLimit = computed(() => {
+        const max = this.maxLength();
+        return max !== undefined && this.remaining() <= Math.max(10, Math.ceil(max * 0.1));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nearLimit" }] : /* istanbul ignore next */ []));
+    /** Spoken by the polite status; empty (so silent) until {@link nearLimit}. */
+    limitStatus = computed(() => {
+        if (!this.nearLimit()) {
+            return '';
+        }
+        const left = this.remaining();
+        return left >= 0
+            ? this.nxeMessages.t('forms.textArea.charactersLeft', left)
+            : this.nxeMessages.t('forms.textArea.charactersOver', -left);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limitStatus" }] : /* istanbul ignore next */ []));
+    growState = computed(() => this.autoGrow()
+        ? { text: this.fieldText(), minRows: this.minRows(), maxRows: this.maxRows() }
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "growState" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Reads exactly `growState()`; the measuring below reads no signal.
+        afterRenderEffect(() => this.resize(this.growState()));
+    }
+    /** dx `valueChangeEvent: 'input'` — the search-as-you-type case. */
+    onTypedInput(event) {
+        const text = event.target.value;
+        this.fieldText.set(text);
+        this.commitOn('input', text, event);
+    }
+    /** Size the textarea to its text: collapse it to measure, then clamp to the row limits. */
+    resize(state) {
+        const el = this.elementRef.nativeElement.querySelector('textarea');
+        if (!el || !state) {
+            return;
+        }
+        const style = getComputedStyle(el);
+        const px = (v) => parseFloat(v) || 0;
+        const lineHeight = px(style.lineHeight) || px(style.fontSize) * 1.35715;
+        const padding = px(style.paddingTop) + px(style.paddingBottom);
+        const border = px(style.borderTopWidth) + px(style.borderBottomWidth);
+        const chrome = style.boxSizing === 'border-box' ? padding + border : 0;
+        el.style.height = '0px';
+        const content = el.scrollHeight - padding;
+        const min = state.minRows * lineHeight;
+        const max = state.maxRows > 0 ? state.maxRows * lineHeight : Infinity;
+        el.style.height = `${Math.min(Math.max(content, min), max) + chrome}px`;
+        el.style.overflowY = content > max ? 'auto' : 'hidden';
+    }
+    onTypedKeyup(event) {
+        this.commitOn('keyup', event.target.value, event);
+    }
+    commitPending(event) {
+        const field = this.elementRef.nativeElement.querySelector('textarea');
+        if (field) {
+            this.commitValue(field.value, event);
+        }
+    }
+    /** Enter types a newline here and submits nothing; Ctrl/Cmd+Enter is the submit chord. */
+    commitsOnEnter(event) {
+        return event.ctrlKey || event.metaKey;
+    }
     onBlur(event) {
+        // Blur commits whatever the mode: a value typed and left must not be discarded because
+        // the configured event never fired.
         this.commitValue(event.target.value, event);
         this.focused.set(false);
         this.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTextAreaComponent, isStandalone: true, selector: "nxe-text-area", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, heightInput: { classPropertyName: "heightInput", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-textarea" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTextAreaComponent, isStandalone: true, selector: "nxe-text-area", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, heightInput: { classPropertyName: "heightInput", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autoGrow: { classPropertyName: "autoGrow", publicName: "autoGrow", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()" }, classAttribute: "nxe-widget nxe-editor nxe-textarea" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextAreaComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTextAreaComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
-        <div class="nxe-editor-container">
-            <textarea
-                class="nxe-editor-input nxe-textarea-input"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="placeholder() || null"
-                [style.height.px]="height() || null"
-                (blur)="onBlur($event)"
-                (focus)="focused.set(true)"></textarea>
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
-    `, isInline: true, styles: ["nxe-text-area .nxe-textarea-input{display:block;resize:none;overflow:auto;white-space:pre-wrap;line-height:1.35715}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: `
+        <div class="nxe-editor-container">
+            <textarea
+                class="nxe-editor-input nxe-textarea-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="invalidState() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="placeholder() || null"
+                [attr.maxlength]="maxLength() ?? null"
+                [style.height.px]="autoGrow() ? null : height() || null"
+                (input)="onTypedInput($event)"
+                (keyup)="onTypedKeyup($event)"
+                (blur)="onBlur($event)"
+                (focus)="focused.set(true)"></textarea>
+        </div>
+        @if (maxLength() !== undefined) {
+            <!-- The visible count is not read out character by character; the status below speaks
+                 only once the limit is close. -->
+            <div
+                class="nxe-textarea-counter"
+                aria-hidden="true"
+                [class.nxe-textarea-counter-near]="nearLimit()"
+                [class.nxe-textarea-counter-over]="remaining() < 0">
+                {{ fieldText().length }}/{{ maxLength() }}
+            </div>
+            <span class="nxe-textarea-counter-status" aria-live="polite" aria-atomic="true">{{ limitStatus() }}</span>
+        }
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
+    `, isInline: true, styles: ["nxe-text-area .nxe-textarea-input{display:block;resize:none;overflow:auto;white-space:pre-wrap;line-height:1.35715}nxe-text-area .nxe-textarea-counter{padding:0 var(--nxe-ui-space-2, 8px) var(--nxe-ui-space-1, 4px);color:var(--nxe-ui-text-muted, #999);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:1.35715;text-align:end;font-variant-numeric:tabular-nums}nxe-text-area .nxe-textarea-counter-near{color:var(--nxe-ui-text, #333)}nxe-text-area .nxe-textarea-counter-over{color:var(--nxe-ui-invalid, #d9534f)}nxe-text-area .nxe-textarea-counter-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-text-area', standalone: true, template: `
-        <div class="nxe-editor-container">
-            <textarea
-                class="nxe-editor-input nxe-textarea-input"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="placeholder() || null"
-                [style.height.px]="height() || null"
-                (blur)="onBlur($event)"
-                (focus)="focused.set(true)"></textarea>
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
+            args: [{ selector: 'nxe-text-area', standalone: true, template: `
+        <div class="nxe-editor-container">
+            <textarea
+                class="nxe-editor-input nxe-textarea-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="invalidState() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="placeholder() || null"
+                [attr.maxlength]="maxLength() ?? null"
+                [style.height.px]="autoGrow() ? null : height() || null"
+                (input)="onTypedInput($event)"
+                (keyup)="onTypedKeyup($event)"
+                (blur)="onBlur($event)"
+                (focus)="focused.set(true)"></textarea>
+        </div>
+        @if (maxLength() !== undefined) {
+            <!-- The visible count is not read out character by character; the status below speaks
+                 only once the limit is close. -->
+            <div
+                class="nxe-textarea-counter"
+                aria-hidden="true"
+                [class.nxe-textarea-counter-near]="nearLimit()"
+                [class.nxe-textarea-counter-over]="remaining() < 0">
+                {{ fieldText().length }}/{{ maxLength() }}
+            </div>
+            <span class="nxe-textarea-counter-status" aria-live="polite" aria-atomic="true">{{ limitStatus() }}</span>
+        }
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
     `, host: {
                         class: 'nxe-widget nxe-editor nxe-textarea',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTextAreaComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTextAreaComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-text-area .nxe-textarea-input{display:block;resize:none;overflow:auto;white-space:pre-wrap;line-height:1.35715}\n"] }]
-        }], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], heightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-text-area .nxe-textarea-input{display:block;resize:none;overflow:auto;white-space:pre-wrap;line-height:1.35715}nxe-text-area .nxe-textarea-counter{padding:0 var(--nxe-ui-space-2, 8px) var(--nxe-ui-space-1, 4px);color:var(--nxe-ui-text-muted, #999);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:1.35715;text-align:end;font-variant-numeric:tabular-nums}nxe-text-area .nxe-textarea-counter-near{color:var(--nxe-ui-text, #333)}nxe-text-area .nxe-textarea-counter-over{color:var(--nxe-ui-invalid, #d9534f)}nxe-text-area .nxe-textarea-counter-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], heightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autoGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoGrow", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }] } });
 
 /**
  * `nxe-check-box` — drop-in replacement for DevExtreme `dx-check-box`.
  *
- * A boolean signal-CVA editor (extends {@link NxeFormControlBase}) — no tri-state, matching all
- * usage. Supports `formControlName`/`[(ngModel)]`/`[(value)]`/`[value]`, `[readOnly]`,
- * `[disabled]`, an inline `text` label, `(onValueChanged)` (`{value}`) and `(valueChange)` (raw
- * boolean). Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator` (a `required`
+ * A signal-CVA editor (extends {@link NxeFormControlBase}) over `true` / `false` / `null`. As in
+ * dx, a `null` value is the indeterminate state: the box shows a 12px square and reports
+ * `aria-checked="mixed"`. That is what a `new FormControl()` (or a `reset()`) looks like, and what
+ * `[value]="null"` looks like; an unbound box starts unchecked, like dx's default `false`. A click
+ * or Space always lands on `true` or `false` — there is no `enableThreeStateBehavior` cycling back
+ * to `null`.
+ *
+ * Supports `formControlName`/`[(ngModel)]`/`[(value)]`/`[value]`, `[readOnly]`, `[disabled]`, an
+ * inline `text` label, `(onValueChanged)` (`{value}`) and `(valueChange)` (raw value). A read-only
+ * box stays focusable (tabindex 0) and still shows hover and focus, as in dx; it just never
+ * toggles. Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator` (a `required`
  * rule is invalid while unchecked, matching DevExtreme's RequiredRule treating `false` as empty).
  */
 class NxeCheckBoxComponent extends NxeFormControlBase {
     /** Inline label rendered next to the box. */
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a value has been handed in at all — by the forms API or a `[value]` binding.
+     *
+     * The base class starts `value` at `null`, which is also the indeterminate value, so `null`
+     * alone cannot tell "given null" from "given nothing". dx can: its unset value is `false`.
+     */
+    valueProvided = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueProvided" }] : /* istanbul ignore next */ []));
+    /** dx `.dx-checkbox-indeterminate`: the value was given, and it is `null`. */
+    indeterminate = computed(() => this.valueProvided() && this.value() === null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        super.writeValue(value);
+        this.valueProvided.set(true);
+    }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            this.valueProvided.set(true);
+        }
+    }
     toggle(event) {
         if (this.disabled() || this.readOnly()) {
             return;
@@ -328,49 +661,109 @@ class NxeCheckBoxComponent extends NxeFormControlBase {
         this.toggle(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeCheckBoxComponent, isStandalone: true, selector: "nxe-check-box", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "toggle($event)", "keydown.space": "onSpace($event)", "blur": "markAsTouched()" }, properties: { "attr.aria-checked": "!!value()", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-readonly": "readOnly() ? true : null", "attr.tabindex": "disabled() || readOnly() ? null : 0", "class.nxe-checkbox-checked": "!!value()", "class.nxe-disabled": "disabled()", "class.nxe-readonly": "readOnly()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-checkbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeCheckBoxComponent, isStandalone: true, selector: "nxe-check-box", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "toggle($event)", "keydown.space": "onSpace($event)", "blur": "markAsTouched()" }, properties: { "attr.aria-checked": "indeterminate() ? 'mixed' : !!value()", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-readonly": "readOnly() ? true : null", "attr.aria-invalid": "invalidState() ? true : null", "attr.aria-required": "required() ? true : null", "attr.id": "inputId() ? controlId() : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "attr.tabindex": "disabled() ? null : 0", "class.nxe-checkbox-checked": "!!value()", "class.nxe-checkbox-indeterminate": "indeterminate()", "class.nxe-disabled": "disabled()", "class.nxe-readonly": "readOnly()", "class.nxe-invalid": "invalidState()" }, classAttribute: "nxe-widget nxe-checkbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeCheckBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeCheckBoxComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
-        <span class="nxe-checkbox-container">
-            <span class="nxe-checkbox-icon" aria-hidden="true"></span>
-            @if (text()) {
-                <span class="nxe-checkbox-text">{{ text() }}</span>
-            }
-        </span>
-        <ng-content />
-    `, isInline: true, styles: ["nxe-check-box{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-user-select:none;user-select:none;line-height:normal}nxe-check-box:focus{outline:none}nxe-check-box .nxe-checkbox-container{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}nxe-check-box .nxe-checkbox-icon{box-sizing:border-box;position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid #ddd;border-radius:2px;background-color:#fff;transition:border-color .12s ease}nxe-check-box .nxe-checkbox-text{padding-inline-start:5px;white-space:pre-wrap;word-wrap:break-word;line-height:normal}nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{content:\"\";position:absolute;top:3px;inset-inline-start:7px;width:6px;height:11px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}nxe-check-box:hover .nxe-checkbox-icon{border-color:#265a87}nxe-check-box:focus .nxe-checkbox-icon{border-color:#337ab7}nxe-check-box.nxe-readonly{cursor:default}nxe-check-box.nxe-readonly .nxe-checkbox-icon{border-color:#f4f4f4;background-color:#fff}nxe-check-box.nxe-disabled{cursor:default}nxe-check-box.nxe-disabled .nxe-checkbox-icon,nxe-check-box.nxe-disabled .nxe-checkbox-text{opacity:.4}nxe-check-box.nxe-invalid .nxe-checkbox-icon{border-color:#d9534f66}nxe-check-box.nxe-invalid:focus .nxe-checkbox-icon{border-color:#d9534f}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <span class="nxe-checkbox-container">
+            <span class="nxe-checkbox-icon" aria-hidden="true"></span>
+            @if (text()) {
+                <span class="nxe-checkbox-text">{{ text() }}</span>
+            }
+        </span>
+        <ng-content />
+    `, isInline: true, styles: ["nxe-check-box{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-user-select:none;user-select:none;line-height:normal}nxe-check-box:focus{outline:none}nxe-check-box .nxe-checkbox-container{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}nxe-check-box .nxe-checkbox-icon{box-sizing:border-box;position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:2px;background-color:var(--nxe-ui-surface, #fff)}nxe-check-box .nxe-checkbox-text{padding-inline-start:5px;white-space:pre-wrap;word-wrap:break-word;line-height:normal}nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{content:\"\";position:absolute;box-sizing:border-box;top:5px;inset-inline-start:2.5px;width:15px;height:11px;background-color:var(--nxe-ui-accent, #337ab7);clip-path:polygon(0 5.586px,5.414px 11px,15px 1.414px,13.586px 0,5.414px 8.172px,1.414px 4.172px)}@media(forced-colors:active){nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-check-box.nxe-checkbox-indeterminate .nxe-checkbox-icon:after{content:\"\";position:absolute;box-sizing:border-box;top:50%;inset-inline-start:50%;width:12px;height:12px;margin-top:-6px;margin-inline-start:-6px;border-radius:2px;background-color:var(--nxe-ui-accent, #337ab7)}@media(forced-colors:active){nxe-check-box.nxe-checkbox-indeterminate .nxe-checkbox-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-check-box.nxe-readonly{cursor:default}nxe-check-box.nxe-readonly .nxe-checkbox-icon{border-color:var(--nxe-ui-neutral-80, #f4f4f4);background-color:var(--nxe-ui-surface, #fff)}nxe-check-box:not(.nxe-disabled):hover .nxe-checkbox-icon{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}nxe-check-box:not(.nxe-disabled):focus .nxe-checkbox-icon{border-color:var(--nxe-ui-accent, #337ab7)}nxe-check-box:not(.nxe-disabled):active .nxe-checkbox-icon{background-color:var(--nxe-ui-checkbox-active-bg, rgba(96, 96, 96, .2))}nxe-check-box.nxe-disabled{cursor:default}nxe-check-box.nxe-disabled .nxe-checkbox-icon,nxe-check-box.nxe-disabled .nxe-checkbox-text{opacity:.4}nxe-check-box.nxe-invalid .nxe-checkbox-icon,nxe-check-box.nxe-invalid:hover .nxe-checkbox-icon{border-color:var(--nxe-ui-invalid-faded, rgba(217, 83, 79, .4))}nxe-check-box.nxe-invalid:focus .nxe-checkbox-icon{border-color:var(--nxe-ui-invalid, #d9534f)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeCheckBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-check-box', standalone: true, template: `
-        <span class="nxe-checkbox-container">
-            <span class="nxe-checkbox-icon" aria-hidden="true"></span>
-            @if (text()) {
-                <span class="nxe-checkbox-text">{{ text() }}</span>
-            }
-        </span>
-        <ng-content />
+            args: [{ selector: 'nxe-check-box', standalone: true, template: `
+        <span class="nxe-checkbox-container">
+            <span class="nxe-checkbox-icon" aria-hidden="true"></span>
+            @if (text()) {
+                <span class="nxe-checkbox-text">{{ text() }}</span>
+            }
+        </span>
+        <ng-content />
     `, host: {
                         class: 'nxe-widget nxe-checkbox',
                         role: 'checkbox',
-                        '[attr.aria-checked]': '!!value()',
+                        '[attr.aria-checked]': "indeterminate() ? 'mixed' : !!value()",
                         '[attr.aria-disabled]': 'disabled() ? true : null',
                         '[attr.aria-readonly]': 'readOnly() ? true : null',
-                        '[attr.tabindex]': 'disabled() || readOnly() ? null : 0',
+                        '[attr.aria-invalid]': 'invalidState() ? true : null',
+                        '[attr.aria-required]': 'required() ? true : null',
+                        // The host IS the control here, so the id and name belong on it rather than on a child.
+                        '[attr.id]': 'inputId() ? controlId() : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy() || null',
+                        // dx keeps a read-only box in the tab order (tabindex 0); only disabled takes it out.
+                        '[attr.tabindex]': 'disabled() ? null : 0',
                         '[class.nxe-checkbox-checked]': '!!value()',
+                        '[class.nxe-checkbox-indeterminate]': 'indeterminate()',
                         '[class.nxe-disabled]': 'disabled()',
                         '[class.nxe-readonly]': 'readOnly()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                         '(click)': 'toggle($event)',
                         '(keydown.space)': 'onSpace($event)',
                         '(blur)': 'markAsTouched()',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeCheckBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeCheckBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-check-box{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-user-select:none;user-select:none;line-height:normal}nxe-check-box:focus{outline:none}nxe-check-box .nxe-checkbox-container{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}nxe-check-box .nxe-checkbox-icon{box-sizing:border-box;position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid #ddd;border-radius:2px;background-color:#fff;transition:border-color .12s ease}nxe-check-box .nxe-checkbox-text{padding-inline-start:5px;white-space:pre-wrap;word-wrap:break-word;line-height:normal}nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{content:\"\";position:absolute;top:3px;inset-inline-start:7px;width:6px;height:11px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}nxe-check-box:hover .nxe-checkbox-icon{border-color:#265a87}nxe-check-box:focus .nxe-checkbox-icon{border-color:#337ab7}nxe-check-box.nxe-readonly{cursor:default}nxe-check-box.nxe-readonly .nxe-checkbox-icon{border-color:#f4f4f4;background-color:#fff}nxe-check-box.nxe-disabled{cursor:default}nxe-check-box.nxe-disabled .nxe-checkbox-icon,nxe-check-box.nxe-disabled .nxe-checkbox-text{opacity:.4}nxe-check-box.nxe-invalid .nxe-checkbox-icon{border-color:#d9534f66}nxe-check-box.nxe-invalid:focus .nxe-checkbox-icon{border-color:#d9534f}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-check-box{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;vertical-align:middle;-webkit-user-select:none;user-select:none;line-height:normal}nxe-check-box:focus{outline:none}nxe-check-box .nxe-checkbox-container{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}nxe-check-box .nxe-checkbox-icon{box-sizing:border-box;position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:2px;background-color:var(--nxe-ui-surface, #fff)}nxe-check-box .nxe-checkbox-text{padding-inline-start:5px;white-space:pre-wrap;word-wrap:break-word;line-height:normal}nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{content:\"\";position:absolute;box-sizing:border-box;top:5px;inset-inline-start:2.5px;width:15px;height:11px;background-color:var(--nxe-ui-accent, #337ab7);clip-path:polygon(0 5.586px,5.414px 11px,15px 1.414px,13.586px 0,5.414px 8.172px,1.414px 4.172px)}@media(forced-colors:active){nxe-check-box.nxe-checkbox-checked .nxe-checkbox-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-check-box.nxe-checkbox-indeterminate .nxe-checkbox-icon:after{content:\"\";position:absolute;box-sizing:border-box;top:50%;inset-inline-start:50%;width:12px;height:12px;margin-top:-6px;margin-inline-start:-6px;border-radius:2px;background-color:var(--nxe-ui-accent, #337ab7)}@media(forced-colors:active){nxe-check-box.nxe-checkbox-indeterminate .nxe-checkbox-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-check-box.nxe-readonly{cursor:default}nxe-check-box.nxe-readonly .nxe-checkbox-icon{border-color:var(--nxe-ui-neutral-80, #f4f4f4);background-color:var(--nxe-ui-surface, #fff)}nxe-check-box:not(.nxe-disabled):hover .nxe-checkbox-icon{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}nxe-check-box:not(.nxe-disabled):focus .nxe-checkbox-icon{border-color:var(--nxe-ui-accent, #337ab7)}nxe-check-box:not(.nxe-disabled):active .nxe-checkbox-icon{background-color:var(--nxe-ui-checkbox-active-bg, rgba(96, 96, 96, .2))}nxe-check-box.nxe-disabled{cursor:default}nxe-check-box.nxe-disabled .nxe-checkbox-icon,nxe-check-box.nxe-disabled .nxe-checkbox-text{opacity:.4}nxe-check-box.nxe-invalid .nxe-checkbox-icon,nxe-check-box.nxe-invalid:hover .nxe-checkbox-icon{border-color:var(--nxe-ui-invalid-faded, rgba(217, 83, 79, .4))}nxe-check-box.nxe-invalid:focus .nxe-checkbox-icon{border-color:var(--nxe-ui-invalid, #d9534f)}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
+/**
+ * Decimal-safe stepping for nxe-number-box.
+ *
+ * `0.1 + 0.2` is `0.30000000000000004` in binary floating point, and a spin button that walks a
+ * 0.1 step through that arithmetic shows it within a few clicks. Both operands are scaled to
+ * integers by the larger of their decimal places, added as integers, and scaled back, which is
+ * exact for every value a person can type.
+ */
+/** Decimal places in the shortest decimal form of `value` (`0.1` is 1, `1e-7` is 7, `120` is 0). */
+function decimalPlaces(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    const text = String(value);
+    const exponent = /e([+-]\d+)$/i.exec(text);
+    const mantissa = exponent ? text.slice(0, exponent.index) : text;
+    const dot = mantissa.indexOf('.');
+    const fraction = dot === -1 ? 0 : mantissa.length - dot - 1;
+    return Math.max(0, fraction - (exponent ? Number(exponent[1]) : 0));
+}
+/** `a + b` without binary floating point artefacts. */
+function addDecimal(a, b) {
+    const places = Math.max(decimalPlaces(a), decimalPlaces(b));
+    if (places === 0 || places > 15) {
+        return a + b;
+    }
+    const factor = Math.pow(10, places);
+    return (Math.round(a * factor) + Math.round(b * factor)) / factor;
+}
+/** Clamp to the optional bounds. */
+function clampNumber(value, min, max) {
+    let next = value;
+    if (min != null && next < min) {
+        next = min;
+    }
+    if (max != null && next > max) {
+        next = max;
+    }
+    return next;
+}
+/**
+ * The value after `direction` steps of `step` from `current` (`null` counts as 0, or as the
+ * nearest bound when 0 is outside them), clamped to `[min, max]`.
+ */
+function stepNumber(current, step, direction, min, max) {
+    const base = current ?? clampNumber(0, min, max);
+    return clampNumber(addDecimal(base, direction * step), min, max);
+}
+
+/** Delay before a held spin button starts repeating, and the repeat interval (ms). */
+const SPIN_REPEAT_DELAY = 400;
+const SPIN_REPEAT_INTERVAL = 70;
 /** Coerce a static (`min="1"`) or bound (`[min]="0"`) attribute to a number, or undefined. */
 function toNumber(value) {
     if (value == null || value === '') {
@@ -389,6 +782,21 @@ function toNumber(value) {
  *
  * Supports `formControlName`/`[(ngModel)]`/`[(value)]`/`[value]`, `[readOnly]`, `[min]`/`[max]`,
  * `format` (string LDML pattern), `(valueChange)` (numeric), and a projected `nxe-validator`.
+ *
+ * Stepping: `step` (default 1) moves the value by exact decimal arithmetic (`0.1` steps never show
+ * `0.30000000000000004`) on ArrowUp/ArrowDown (`largeStep`, default 10 steps, on PageUp/PageDown),
+ * and on the optional spin buttons (`showSpinButtons`; held buttons repeat unless
+ * `[holdToRepeat]="false"`). Results are clamped to `[min, max]` and rounded to the format precision.
+ * The input carries `role="spinbutton"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`.
+ *
+ * `currency` (an ISO 4217 code) shows `IDR 1.351.000` / `USD 1,234.50` (separators from
+ * `NXE_NUMBER_SEPARATORS`, so it follows the locale) and takes the currency's minor units as the
+ * precision. An explicit `format` still sets the number pattern; `currencyDecimals` overrides the
+ * minor units (reference data). Focused, the field holds the bare editable number.
+ *
+ * `showClearButton` (dx default `false`) adds dx's clear area after the input while the field
+ * holds text and is neither read-only nor disabled; it sets the value to `null`, as dx's
+ * `clear()` does for a number box, and focuses the input.
  */
 class NxeNumberBoxComponent extends NxeFormControlBase {
     /** LDML format pattern (e.g. `#,##0.00`); empty = raw number. */
@@ -397,12 +805,65 @@ class NxeNumberBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: toNumber });
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: toNumber });
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.numberBox` can turn it on app-wide. */
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.numberBox?.showClearButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    /** Amount of one step (ArrowUp/ArrowDown, spin buttons). Default 1; zero, negative or invalid means 1. */
+    step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: toNumber });
+    /** PageUp/PageDown amount. Default 10 steps. */
+    largeStep = input(undefined, { ...(ngDevMode ? { debugName: "largeStep" } : /* istanbul ignore next */ {}), transform: toNumber });
+    /** Show the increase/decrease buttons after the input. Default off, as in dx. */
+    showSpinButtons = input(false, { ...(ngDevMode ? { debugName: "showSpinButtons" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Keep stepping while a spin button is held down. Default on. */
+    holdToRepeat = input(true, { ...(ngDevMode ? { debugName: "holdToRepeat" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** ISO 4217 code: shows `CODE amount` and takes the currency's minor units as precision. */
+    currency = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+    /** The currency's minor units from reference data; overrides the built-in table. */
+    currencyDecimals = input(undefined, { ...(ngDevMode ? { debugName: "currencyDecimals" } : /* istanbul ignore next */ {}), transform: toNumber });
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
-    parsedFormat = computed(() => parseNumberFormat(this.format()), /* @ts-ignore */
+    currencyCode = computed(() => nxeCurrencyCode(this.currency()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []));
+    /** The explicit `format` input only, so a currency does not inherit the app-wide default pattern. */
+    explicitFormat = computed(() => parseNumberFormat(this.formatInput() ?? ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "explicitFormat" }] : /* istanbul ignore next */ []));
+    parsedFormat = computed(() => {
+        if (this.currencyCode()) {
+            return this.explicitFormat() ?? nxeCurrencyNumberFormat(this.currencyCode(), this.currencyDecimals());
+        }
+        return parseNumberFormat(this.format());
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "parsedFormat" }] : /* istanbul ignore next */ []));
+    stepAmount = computed(() => {
+        const step = this.step();
+        return step != null && step > 0 ? step : 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepAmount" }] : /* istanbul ignore next */ []));
+    largeStepAmount = computed(() => {
+        const large = this.largeStep();
+        return large != null && large > 0 ? large : this.stepAmount() * 10;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "largeStepAmount" }] : /* istanbul ignore next */ []));
+    fieldRef = viewChild.required('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldRef" }] : /* istanbul ignore next */ []));
     /** Locale characters, configured once by the application. Defaults to en-US. */
     separators = inject(NXE_NUMBER_SEPARATORS);
+    /** The blurred, formatted text of the committed value. */
+    formattedValue = computed(() => {
+        if (this.currencyCode()) {
+            return formatCurrency(this.value(), this.currencyCode(), this.separators, {
+                decimals: this.currencyDecimals(),
+                pattern: this.explicitFormat(),
+            });
+        }
+        return formatNumber(this.value(), this.parsedFormat(), this.separators);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+    /** `aria-valuetext`: the formatted amount, only when a format or currency makes it differ from the number. */
+    valueText = computed(() => this.value() == null || (!this.currencyCode() && !this.format()) ? null : this.formattedValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => {
         const value = this.value();
         if (this.focused()) {
@@ -410,11 +871,126 @@ class NxeNumberBoxComponent extends NxeFormControlBase {
             // a JS-style dot, and parseNumber would read that as a group separator and commit 125.
             return value == null ? '' : String(value).replace('.', this.separators.decimal);
         }
-        return formatNumber(value, this.parsedFormat(), this.separators);
+        return this.formattedValue();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** The text in the field right now; dx shows the clear button by the field's emptiness. */
+    fieldText = linkedSignal(() => this.displayValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldText" }] : /* istanbul ignore next */ []));
+    clearButtonVisible = computed(() => this.showClearButton() && !this.readOnly() && !this.disabled() && this.fieldText() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
+    incrementDisabled = computed(() => {
+        const max = this.max();
+        return this.readOnly() || this.disabled() || (max != null && (this.value() ?? -Infinity) >= max);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "incrementDisabled" }] : /* istanbul ignore next */ []));
+    decrementDisabled = computed(() => {
+        const min = this.min();
+        return this.readOnly() || this.disabled() || (min != null && (this.value() ?? Infinity) <= min);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decrementDisabled" }] : /* istanbul ignore next */ []));
+    spinDelay;
+    spinTimer;
+    constructor() {
+        super();
+        inject(DestroyRef).onDestroy(() => this.stopSpin());
+    }
+    onKeyDownStep(event) {
+        if (event.ctrlKey || event.altKey || event.metaKey || this.readOnly() || this.disabled()) {
+            return;
+        }
+        let amount;
+        let direction;
+        switch (event.key) {
+            case 'ArrowUp':
+                [amount, direction] = [this.stepAmount(), 1];
+                break;
+            case 'ArrowDown':
+                [amount, direction] = [this.stepAmount(), -1];
+                break;
+            case 'PageUp':
+                [amount, direction] = [this.largeStepAmount(), 1];
+                break;
+            case 'PageDown':
+                [amount, direction] = [this.largeStepAmount(), -1];
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.stepBy(amount, direction, event);
+    }
+    onSpinPointerDown(event, direction) {
+        if (event.button !== 0 || this.readOnly() || this.disabled()) {
+            return;
+        }
+        // Keep focus (and the typed text) in the input.
+        event.preventDefault();
+        this.stopSpin();
+        if (!this.stepBy(this.stepAmount(), direction, event) || !this.holdToRepeat()) {
+            return;
+        }
+        this.spinDelay = setTimeout(() => {
+            this.spinTimer = setInterval(() => {
+                if (!this.stepBy(this.stepAmount(), direction, event)) {
+                    this.stopSpin();
+                }
+            }, SPIN_REPEAT_INTERVAL);
+        }, SPIN_REPEAT_DELAY);
+    }
+    /** Keyboard and assistive-technology activation (`detail` 0); pointer presses stepped on pointerdown. */
+    onSpinClick(event, direction) {
+        if (event.detail === 0) {
+            this.stepBy(this.stepAmount(), direction, event);
+        }
+    }
+    stopSpin() {
+        clearTimeout(this.spinDelay);
+        clearInterval(this.spinTimer);
+        this.spinDelay = this.spinTimer = undefined;
+    }
+    /** Step the value; returns false when it did not move (a bound, or nothing to do). */
+    stepBy(amount, direction, event) {
+        const field = this.fieldRef().nativeElement;
+        // Typed-but-uncommitted text counts as the current value while the field has focus.
+        const current = this.focused() ? parseNumber(field.value, this.separators) : this.value();
+        let next = stepNumber(current, amount, direction, this.min(), this.max());
+        const fmt = this.parsedFormat();
+        if (fmt) {
+            next = clampNumber(roundHalfAwayFromZero(next, fmt.maxFrac), this.min(), this.max());
+        }
+        const moved = next !== current;
+        this.commitValue(next, event);
+        field.value = this.displayValue();
+        this.fieldText.set(field.value);
+        return moved;
+    }
+    onFieldInput(event) {
+        this.fieldText.set(event.target.value);
+    }
+    /**
+     * dx `_clearValueHandler`: value to `null`, then focus on the input. The field is emptied by hand
+     * too, for typed-but-uncommitted text over a value that was already `null`.
+     */
+    onClear(event) {
+        const field = this.fieldRef().nativeElement;
+        this.commitValue(null, event);
+        field.value = '';
+        this.fieldText.set('');
+        if (!this.focused()) {
+            field.focus();
+        }
+    }
+    commitPending(event) {
+        this.commitText(this.fieldRef().nativeElement.value, event);
+    }
     onBlur(event) {
-        let num = parseNumber(event.target.value, this.separators);
+        this.commitText(event.target.value, event);
+        this.focused.set(false);
+        this.markAsTouched();
+    }
+    commitText(text, event) {
+        let num = parseNumber(text, this.separators);
         if (num != null) {
             const min = this.min();
             const max = this.max();
@@ -430,64 +1006,192 @@ class NxeNumberBoxComponent extends NxeFormControlBase {
             }
         }
         this.commitValue(num, event);
-        this.focused.set(false);
-        this.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeNumberBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeNumberBoxComponent, isStandalone: true, selector: "nxe-number-box", inputs: { formatInput: { classPropertyName: "formatInput", publicName: "format", 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 } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-numberbox" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeNumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeNumberBoxComponent, isStandalone: true, selector: "nxe-number-box", inputs: { formatInput: { classPropertyName: "formatInput", publicName: "format", 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 }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, showSpinButtons: { classPropertyName: "showSpinButtons", publicName: "showSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, holdToRepeat: { classPropertyName: "holdToRepeat", publicName: "holdToRepeat", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDecimals: { classPropertyName: "currencyDecimals", publicName: "currencyDecimals", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()" }, classAttribute: "nxe-widget nxe-editor nxe-numberbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeNumberBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeNumberBoxComponent) },
-        ], usesInheritance: true, ngImport: i0, template: `
-        <div class="nxe-editor-container">
-            <input
-                class="nxe-editor-input nxe-numberbox-input"
-                type="text"
-                inputmode="decimal"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                autocomplete="off"
-                (focus)="focused.set(true)"
-                (blur)="onBlur($event)" />
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
-    `, isInline: true, styles: ["nxe-number-box.text-right .nxe-numberbox-input{text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-numberbox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="invalidState() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                type="text"
+                inputmode="decimal"
+                role="spinbutton"
+                [attr.aria-valuenow]="value() ?? null"
+                [attr.aria-valuemin]="min() ?? null"
+                [attr.aria-valuemax]="max() ?? null"
+                [attr.aria-valuetext]="valueText()"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                autocomplete="off"
+                (input)="onFieldInput($event)"
+                (keydown)="onKeyDownStep($event)"
+                (focus)="focused.set(true)"
+                (blur)="onBlur($event)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+            @if (showSpinButtons()) {
+                <span class="nxe-spin-container">
+                    <!-- Not tab stops: the input is the spinbutton and takes ArrowUp/ArrowDown itself.
+                         A pointer press keeps focus in the input; a click with detail 0 is keyboard or AT. -->
+                    <button
+                        type="button"
+                        class="nxe-spin-button nxe-spin-up"
+                        tabindex="-1"
+                        [attr.aria-label]="nxeMessages.t('forms.numberBox.increase')"
+                        [attr.aria-controls]="controlId()"
+                        [disabled]="incrementDisabled()"
+                        (pointerdown)="onSpinPointerDown($event, 1)"
+                        (pointerup)="stopSpin()"
+                        (pointerleave)="stopSpin()"
+                        (pointercancel)="stopSpin()"
+                        (click)="onSpinClick($event, 1)">
+                        <svg viewBox="0 0 10 6" focusable="false" aria-hidden="true">
+                            <path d="M1 5l4-4 4 4" />
+                        </svg>
+                    </button>
+                    <button
+                        type="button"
+                        class="nxe-spin-button nxe-spin-down"
+                        tabindex="-1"
+                        [attr.aria-label]="nxeMessages.t('forms.numberBox.decrease')"
+                        [attr.aria-controls]="controlId()"
+                        [disabled]="decrementDisabled()"
+                        (pointerdown)="onSpinPointerDown($event, -1)"
+                        (pointerup)="stopSpin()"
+                        (pointerleave)="stopSpin()"
+                        (pointercancel)="stopSpin()"
+                        (click)="onSpinClick($event, -1)">
+                        <svg viewBox="0 0 10 6" focusable="false" aria-hidden="true">
+                            <path d="M1 1l4 4 4-4" />
+                        </svg>
+                    </button>
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
+    `, isInline: true, styles: ["nxe-number-box.text-right .nxe-numberbox-input{text-align:right}nxe-number-box .nxe-spin-container{box-sizing:border-box;flex:0 0 24px;align-self:stretch;display:flex;flex-direction:column;width:24px;min-width:24px}nxe-number-box .nxe-editor-container:has(>.nxe-spin-container){--nxe-invalid-badge-inset: 28px}nxe-number-box .nxe-spin-button{appearance:none;box-sizing:border-box;flex:1 1 50%;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-number-box .nxe-spin-button svg{display:block;width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}nxe-number-box .nxe-spin-button:hover:not(:disabled){color:var(--nxe-ui-text, #333);background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .05))}nxe-number-box .nxe-spin-button:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color, #5c95c5);outline-offset:-2px}nxe-number-box .nxe-spin-button:disabled{cursor:default;opacity:.4}nxe-number-box.nxe-disabled .nxe-spin-button,nxe-number-box.nxe-readonly .nxe-spin-button{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeNumberBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-number-box', standalone: true, template: `
-        <div class="nxe-editor-container">
-            <input
-                class="nxe-editor-input nxe-numberbox-input"
-                type="text"
-                inputmode="decimal"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                autocomplete="off"
-                (focus)="focused.set(true)"
-                (blur)="onBlur($event)" />
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
+            args: [{ selector: 'nxe-number-box', standalone: true, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-numberbox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="invalidState() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                type="text"
+                inputmode="decimal"
+                role="spinbutton"
+                [attr.aria-valuenow]="value() ?? null"
+                [attr.aria-valuemin]="min() ?? null"
+                [attr.aria-valuemax]="max() ?? null"
+                [attr.aria-valuetext]="valueText()"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                autocomplete="off"
+                (input)="onFieldInput($event)"
+                (keydown)="onKeyDownStep($event)"
+                (focus)="focused.set(true)"
+                (blur)="onBlur($event)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+            @if (showSpinButtons()) {
+                <span class="nxe-spin-container">
+                    <!-- Not tab stops: the input is the spinbutton and takes ArrowUp/ArrowDown itself.
+                         A pointer press keeps focus in the input; a click with detail 0 is keyboard or AT. -->
+                    <button
+                        type="button"
+                        class="nxe-spin-button nxe-spin-up"
+                        tabindex="-1"
+                        [attr.aria-label]="nxeMessages.t('forms.numberBox.increase')"
+                        [attr.aria-controls]="controlId()"
+                        [disabled]="incrementDisabled()"
+                        (pointerdown)="onSpinPointerDown($event, 1)"
+                        (pointerup)="stopSpin()"
+                        (pointerleave)="stopSpin()"
+                        (pointercancel)="stopSpin()"
+                        (click)="onSpinClick($event, 1)">
+                        <svg viewBox="0 0 10 6" focusable="false" aria-hidden="true">
+                            <path d="M1 5l4-4 4 4" />
+                        </svg>
+                    </button>
+                    <button
+                        type="button"
+                        class="nxe-spin-button nxe-spin-down"
+                        tabindex="-1"
+                        [attr.aria-label]="nxeMessages.t('forms.numberBox.decrease')"
+                        [attr.aria-controls]="controlId()"
+                        [disabled]="decrementDisabled()"
+                        (pointerdown)="onSpinPointerDown($event, -1)"
+                        (pointerup)="stopSpin()"
+                        (pointerleave)="stopSpin()"
+                        (pointercancel)="stopSpin()"
+                        (click)="onSpinClick($event, -1)">
+                        <svg viewBox="0 0 10 6" focusable="false" aria-hidden="true">
+                            <path d="M1 1l4 4 4-4" />
+                        </svg>
+                    </button>
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
     `, host: {
                         class: 'nxe-widget nxe-editor nxe-numberbox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeNumberBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeNumberBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-number-box.text-right .nxe-numberbox-input{text-align:right}\n"] }]
-        }], propDecorators: { formatInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-number-box.text-right .nxe-numberbox-input{text-align:right}nxe-number-box .nxe-spin-container{box-sizing:border-box;flex:0 0 24px;align-self:stretch;display:flex;flex-direction:column;width:24px;min-width:24px}nxe-number-box .nxe-editor-container:has(>.nxe-spin-container){--nxe-invalid-badge-inset: 28px}nxe-number-box .nxe-spin-button{appearance:none;box-sizing:border-box;flex:1 1 50%;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-number-box .nxe-spin-button svg{display:block;width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}nxe-number-box .nxe-spin-button:hover:not(:disabled){color:var(--nxe-ui-text, #333);background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .05))}nxe-number-box .nxe-spin-button:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color, #5c95c5);outline-offset:-2px}nxe-number-box .nxe-spin-button:disabled{cursor:default;opacity:.4}nxe-number-box.nxe-disabled .nxe-spin-button,nxe-number-box.nxe-readonly .nxe-spin-button{cursor:default}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formatInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], showSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpinButtons", required: false }] }], holdToRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "holdToRepeat", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDecimals", required: false }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /** Normalize a `[min]`/`[max]` binding (Date object or serialized string) to a DateTime. */
 function toBoundDate(bound) {
@@ -508,6 +1212,15 @@ function toBoundDate(bound) {
  * typeable (parsed on blur per `displayFormat`) and opens a CDK-overlay calendar from the icon
  * button. Built on Luxon. Default `displayFormat` is `dd-MMM-yyyy`. Hosts a projected
  * `nxe-validator` via {@link NXE_VALIDATION_TARGET}.
+ *
+ * `showClearButton` (dx default `false`) adds dx's clear area between the input and the calendar
+ * button while the field holds text and is neither read-only nor disabled; it sets the value to
+ * `null` and focuses the input.
+ *
+ * The button and calendar glyphs are drawn in an 18-unit viewBox (1 unit = 1px) to the ink measured
+ * off dx's `event` (`date`), `eventall` (`datetime`) and `clock` (`time`) glyphs and its chevrons,
+ * each laid out from those metrics in rects, stroked rects and circles, and straight-edged polygons;
+ * the templates state each construction.
  */
 class NxeDateBoxComponent extends NxeFormControlBase {
     overlay = inject(Overlay);
@@ -529,6 +1242,10 @@ class NxeDateBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** dx `showClearButton` — off by default, as in dx; `NXE_DEFAULT_OPTIONS.dateBox` can turn it on app-wide. */
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.dateBox?.showClearButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     opened = signal(false, /* @ts-ignore */
@@ -538,7 +1255,12 @@ class NxeDateBoxComponent extends NxeFormControlBase {
     /** Calendar zoom level; caption clicks zoom out, cell picks zoom back in (dx-calendar parity). */
     zoomLevel = signal('month', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
-    weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    /** Short weekday names for the active locale, Sunday first (the grid below starts on Sunday). */
+    weekdays = computed(() => {
+        const monday = Info.weekdays('short', { locale: this.nxeMessages.locale() });
+        return [monday[6], ...monday.slice(0, 6)];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
     /** The format actually used, from `displayFormat` or the default for this `type`. */
     effectiveDisplayFormat = computed(() => {
         const stated = this.displayFormat() ?? this.nxeDefaults.dateBox?.displayFormat;
@@ -558,10 +1280,16 @@ class NxeDateBoxComponent extends NxeFormControlBase {
     /** dx's default placeholder is '', but orbit's global default is the format itself. */
     effectivePlaceholder = computed(() => this.placeholder() ?? this.nxeDefaults.dateBox?.placeholder ?? this.effectiveDisplayFormat(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
-    selected = computed(() => parseDateValue(this.value()), /* @ts-ignore */
+    /** The value as a Luxon date in the active locale, so `MMM` and `MMMM` follow the language. */
+    selected = computed(() => parseDateValue(this.value())?.setLocale(this.nxeMessages.locale()) ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => formatDisplay(this.selected(), this.effectiveDisplayFormat()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** The text in the field right now; dx shows the clear button by the field's emptiness. */
+    fieldText = linkedSignal(() => this.displayValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldText" }] : /* istanbul ignore next */ []));
+    clearButtonVisible = computed(() => this.showClearButton() && !this.readOnly() && !this.disabled() && this.fieldText() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
     weeks = computed(() => buildCalendarWeeks(this.viewMonth()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
     /** Two-digit hour/minute for the popup's time strip; blank when nothing is selected. */
@@ -575,7 +1303,7 @@ class NxeDateBoxComponent extends NxeFormControlBase {
      */
     textAtFocus = '';
     caption = computed(() => {
-        const view = this.viewMonth();
+        const view = this.viewMonth().setLocale(this.nxeMessages.locale());
         switch (this.zoomLevel()) {
             case 'month':
                 return view.toFormat('MMMM yyyy');
@@ -601,7 +1329,7 @@ class NxeDateBoxComponent extends NxeFormControlBase {
         const min = this.minDate();
         const max = this.maxDate();
         const span = zoom === 'year' ? { months: 1 } : zoom === 'decade' ? { years: 1 } : { years: 10 };
-        return buildPeriodCells(zoom, this.viewMonth()).map((cell) => {
+        return buildPeriodCells(zoom, this.viewMonth().setLocale(this.nxeMessages.locale())).map((cell) => {
             const end = cell.anchor.plus(span).minus({ days: 1 }).endOf('day');
             return {
                 ...cell,
@@ -670,6 +1398,21 @@ class NxeDateBoxComponent extends NxeFormControlBase {
         }
         this.opened() ? this.close() : this.open();
     }
+    onFieldInput(event) {
+        this.fieldText.set(event.target.value);
+    }
+    /**
+     * dx `_clearValueHandler`: value to `null` (dx's `clear()` for a date box), then focus on the
+     * input. `syncField` repaints the field, so typed-but-uncommitted text over a value that was
+     * already `null` goes too.
+     */
+    onClear(event) {
+        this.commitValue(null, event);
+        this.syncField();
+        if (!this.focused()) {
+            this.fieldRef().nativeElement.focus();
+        }
+    }
     onFocus(event) {
         this.textAtFocus = event.target.value;
         this.focused.set(true);
@@ -697,6 +1440,15 @@ class NxeDateBoxComponent extends NxeFormControlBase {
         const hadBaseline = this.focused();
         this.focused.set(false);
         this.markAsTouched();
+        this.commitTypedText(element, hadBaseline, event);
+    }
+    /** Enter commits what was typed, before a surrounding form submits; nothing typed means nothing to do. */
+    commitPending(event) {
+        if (this.focused()) {
+            this.commitTypedText(this.fieldRef().nativeElement, true, event);
+        }
+    }
+    commitTypedText(element, hadBaseline, event) {
         if (hadBaseline && element.value === this.textAtFocus) {
             return;
         }
@@ -705,7 +1457,7 @@ class NxeDateBoxComponent extends NxeFormControlBase {
             this.syncField();
             return;
         }
-        const dt = parseDisplay(element.value, this.effectiveDisplayFormat(), this.selected());
+        const dt = parseDisplay(element.value, this.effectiveDisplayFormat(), this.selected(), this.nxeMessages.locale());
         if (dt) {
             this.commitValue(serializeDate(this.clampToBounds(dt)), event);
         }
@@ -721,6 +1473,7 @@ class NxeDateBoxComponent extends NxeFormControlBase {
         const element = this.fieldRef().nativeElement;
         element.value = this.displayValue();
         this.textAtFocus = element.value;
+        this.fieldText.set(element.value);
     }
     selectDay(day) {
         if (this.isDisabledDay(day)) {
@@ -809,277 +1562,1000 @@ class NxeDateBoxComponent extends NxeFormControlBase {
         this.overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDateBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDateBoxComponent, isStandalone: true, selector: "nxe-date-box", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", 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 } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()" }, classAttribute: "nxe-widget nxe-editor nxe-datebox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDateBoxComponent, isStandalone: true, selector: "nxe-date-box", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", 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 }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()" }, classAttribute: "nxe-widget nxe-editor nxe-datebox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDateBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDateBoxComponent) },
-        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-        <div class="nxe-editor-container">
-            <input
-                #field
-                class="nxe-editor-input nxe-datebox-input"
-                type="text"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="effectivePlaceholder() || null"
-                autocomplete="off"
-                (focus)="onFocus($event)"
-                (blur)="onBlur($event)" />
-            @if (!readOnly()) {
-                <span
-                    class="nxe-datebox-button"
-                    [class.nxe-datebox-open]="opened()"
-                    (mousedown)="onButtonMousedown($event)"
-                    aria-hidden="true">
-                    @if (type() === 'datetime' || type() === 'time') {
-                        <svg class="nxe-datebox-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7V7z" />
-                        </svg>
-                    } @else {
-                        <svg class="nxe-datebox-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11z" />
-                        </svg>
-                    }
-                </span>
-            }
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
-
-        <ng-template #calendarTemplate>
-            <div class="nxe-calendar" (mousedown)="$event.preventDefault()">
-                @if (type() !== 'time') {
-                    <div class="nxe-calendar-navigator">
-                        <button type="button" class="nxe-calendar-nav" (click)="navigate(-1)">
-                            <svg class="nxe-calendar-chevron" viewBox="0 0 24 24">
-                                <path d="M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z" />
-                            </svg>
-                        </button>
-                        <button type="button" class="nxe-calendar-caption" (click)="zoomOut()">
-                            {{ caption() }}
-                        </button>
-                        <button type="button" class="nxe-calendar-nav" (click)="navigate(1)">
-                            <svg class="nxe-calendar-chevron" viewBox="0 0 24 24">
-                                <path d="M8.6 16.6 10 18l6-6-6-6-1.4 1.4 4.6 4.6z" />
-                            </svg>
-                        </button>
-                    </div>
-                    @if (zoomLevel() === 'month') {
-                        <div class="nxe-calendar-weekdays">
-                            @for (wd of weekdays; track wd) {
-                                <span>{{ wd }}</span>
-                            }
-                        </div>
-                        <div class="nxe-calendar-grid">
-                            @for (week of weeks(); track $index) {
-                                @for (day of week; track day.toMillis()) {
-                                    <button
-                                        type="button"
-                                        class="nxe-calendar-day"
-                                        [class.nxe-calendar-other]="day.month !== viewMonth().month"
-                                        [class.nxe-calendar-selected]="isSelected(day)"
-                                        [class.nxe-calendar-today]="isToday(day)"
-                                        [disabled]="isDisabledDay(day)"
-                                        (click)="selectDay(day)">
-                                        <span>{{ day.day }}</span>
-                                    </button>
-                                }
-                            }
-                        </div>
-                    } @else {
-                        <div
-                            class="nxe-calendar-periods"
-                            [class.nxe-calendar-periods-century]="zoomLevel() === 'century'">
-                            @for (cell of periodCells(); track cell.anchor.toMillis()) {
-                                <button
-                                    type="button"
-                                    class="nxe-calendar-period"
-                                    [class.nxe-calendar-other]="cell.other"
-                                    [class.nxe-calendar-today]="cell.isNow"
-                                    [disabled]="cell.disabled"
-                                    (click)="selectPeriod(cell)">
-                                    <span>{{ cell.label }}</span>
-                                </button>
-                            }
-                        </div>
-                    }
-                }
-                @if (type() !== 'date') {
-                    <div class="nxe-calendar-time">
-                        <input
-                            class="nxe-calendar-time-part"
-                            type="text"
-                            inputmode="numeric"
-                            maxlength="2"
-                            aria-label="Hour"
-                            [value]="hourText()"
-                            (change)="setTimePart('hour', $event)" />
-                        <span class="nxe-calendar-time-sep" aria-hidden="true">:</span>
-                        <input
-                            class="nxe-calendar-time-part"
-                            type="text"
-                            inputmode="numeric"
-                            maxlength="2"
-                            aria-label="Minute"
-                            [value]="minuteText()"
-                            (change)="setTimePart('minute', $event)" />
-                        <button type="button" class="nxe-calendar-time-btn" (click)="setNow()">Now</button>
-                        <button type="button" class="nxe-calendar-time-btn nxe-calendar-time-done" (click)="close()">
-                            Done
-                        </button>
-                    </div>
-                }
-            </div>
-        </ng-template>
-    `, isInline: true, styles: ["nxe-date-box .nxe-datebox-button{flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;cursor:pointer;color:#333;border-radius:4px}nxe-date-box .nxe-datebox-icon{width:18px;height:18px;fill:currentColor}nxe-date-box .nxe-editor-container:has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 38px}nxe-date-box.nxe-readonly .nxe-datebox-button,nxe-date-box.nxe-disabled .nxe-datebox-button{cursor:default}nxe-date-box.nxe-readonly .nxe-datebox-button:hover,nxe-date-box.nxe-disabled .nxe-datebox-button:hover{background-color:transparent}.nxe-calendar{width:298px;box-sizing:border-box;padding:8px;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002e;color:#333;font-size:12px;-webkit-user-select:none;user-select:none}.nxe-calendar-navigator{display:flex;height:36px;margin-bottom:8px}.nxe-calendar-nav,.nxe-calendar-caption{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;background:transparent;color:#333;cursor:pointer;padding:0}.nxe-calendar-nav:hover,.nxe-calendar-caption:hover{background:#0000000a}.nxe-calendar-nav{flex:0 0 36px}.nxe-calendar-nav:first-child{border-radius:4px 0 0 4px}.nxe-calendar-nav:last-child{border-radius:0 4px 4px 0}.nxe-calendar-caption{flex:1;margin:0 -1px;font-size:12px;font-weight:600}.nxe-calendar-chevron{width:18px;height:18px;fill:currentColor}.nxe-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:24px;text-align:center;color:#333;font-size:10px;font-weight:500}.nxe-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.nxe-calendar-day,.nxe-calendar-period{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-size:14px;line-height:1;color:#333}.nxe-calendar-day span,.nxe-calendar-period span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:4px}.nxe-calendar-day:hover:not(:disabled) span,.nxe-calendar-period:hover:not(:disabled) span{background:#337ab73d}.nxe-calendar-day:disabled,.nxe-calendar-period:disabled{cursor:default;color:#33333361}.nxe-calendar-day{height:33px}.nxe-calendar-day span{width:28px;height:28px}.nxe-calendar-periods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px}.nxe-calendar-period span{min-width:54px;height:54px;padding:0 4px}.nxe-calendar-periods-century .nxe-calendar-period span{width:40px;min-width:0;height:auto;min-height:56px;padding:4px 0;white-space:normal;text-align:center;line-height:1.4}.nxe-calendar-other{color:#33333361}.nxe-calendar-today span{border:2px solid #337ab7}.nxe-calendar-selected span,.nxe-calendar-selected:hover:not(:disabled) span{background:#337ab7;color:#fff;box-shadow:0 0 0 2px #337ab780;border:0}.nxe-calendar-time{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid #ddd}.nxe-calendar-time-part{width:2.6em;height:2.2em;box-sizing:border-box;padding:0 .25em;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font-size:inherit;font-variant-numeric:tabular-nums;text-align:center}.nxe-calendar-time-part:focus{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-sep{font-weight:600}.nxe-calendar-time-btn{height:2.2em;padding:0 .75em;border:1px solid #ddd;border-radius:4px;background:transparent;color:#333;font-size:inherit;cursor:pointer}.nxe-calendar-time-btn:hover{background:#0000000a}.nxe-calendar-time-btn:focus-visible{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-done{margin-left:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-datebox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="invalidState() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                type="text"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="effectivePlaceholder() || null"
+                autocomplete="off"
+                (input)="onFieldInput($event)"
+                (focus)="onFocus($event)"
+                (blur)="onBlur($event)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+            @if (!readOnly()) {
+                <span
+                    class="nxe-datebox-button"
+                    [class.nxe-datebox-open]="opened()"
+                    (mousedown)="onButtonMousedown($event)"
+                    aria-hidden="true">
+                    @switch (type()) {
+                        @case ('time') {
+                            <!-- dx clock, a 16x16 ink box round the box centre: a 2px ring (an r 7
+                                 circle stroked 2px), a 2x4 hand straight up from the centre, a 1.5x4
+                                 hand turned 45° down-right, and a Ø2 hub where they meet. -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-time" viewBox="0 0 18 18" focusable="false">
+                                <circle cx="9" cy="9" r="7" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="8" y="5" width="2" height="4" />
+                                <rect x="9" y="8.25" width="4" height="1.5" transform="rotate(45 9 9)" />
+                                <circle cx="9" cy="9" r="1" />
+                            </svg>
+                        }
+                        @case ('datetime') {
+                            <!-- dx eventall: the calendar page below, without its day marker. -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-datetime" viewBox="0 0 18 18" focusable="false">
+                                <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="3" y="3" width="12" height="3" />
+                                <rect x="4" y="1" width="2" height="1.5" />
+                                <rect x="12" y="1" width="2" height="1.5" />
+                            </svg>
+                        }
+                        @default {
+                            <!-- dx event, a 14x15 ink box from 1px below the top of the 18px box
+                                 (where dx's glyph renders): the page is a 12x12 rect with 1px corners
+                                 stroked 2px, so 14x14 with 2px corners outside and square inside; a
+                                 12x3 bar under its top wall makes the 4px header band; two 2x1.5
+                                 binder tabs stand 1px proud of it; a 4x4 day marker at (9, 9). -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-date" viewBox="0 0 18 18" focusable="false">
+                                <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="3" y="3" width="12" height="3" />
+                                <rect x="4" y="1" width="2" height="1.5" />
+                                <rect x="12" y="1" width="2" height="1.5" />
+                                <rect x="9" y="9" width="4" height="4" />
+                            </svg>
+                        }
+                    }
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
+
+        <ng-template #calendarTemplate>
+            <div class="nxe-calendar" (mousedown)="$event.preventDefault()">
+                @if (type() !== 'time') {
+                    <div class="nxe-calendar-navigator">
+                        <button type="button" class="nxe-calendar-nav" (click)="navigate(-1)">
+                            <!-- dx chevronleft (8x14 ink, centred in its 18px box): two 45° arms
+                                 whose outer edges run 7px out and 7px up and down from the point,
+                                 their ends cut square 1.25px across and down (a 1.77px stroke),
+                                 meeting 2.5px behind it. That draws 8.25x14, centred by putting the
+                                 point at x 4.875, and rasterises to dx's 8x14. -->
+                            <svg class="nxe-calendar-chevron" viewBox="0 0 18 18" focusable="false">
+                                <polygon points="4.875 9 11.875 2 13.125 3.25 7.375 9 13.125 14.75 11.875 16" />
+                            </svg>
+                        </button>
+                        <button type="button" class="nxe-calendar-caption" (click)="zoomOut()">
+                            {{ caption() }}
+                        </button>
+                        <button type="button" class="nxe-calendar-nav" (click)="navigate(1)">
+                            <!-- dx chevronright: the same chevron mirrored about x 9. -->
+                            <svg class="nxe-calendar-chevron" viewBox="0 0 18 18" focusable="false">
+                                <polygon points="13.125 9 6.125 2 4.875 3.25 10.625 9 4.875 14.75 6.125 16" />
+                            </svg>
+                        </button>
+                    </div>
+                    @if (zoomLevel() === 'month') {
+                        <div class="nxe-calendar-weekdays">
+                            @for (wd of weekdays(); track $index) {
+                                <span>{{ wd }}</span>
+                            }
+                        </div>
+                        <div class="nxe-calendar-grid">
+                            @for (week of weeks(); track $index) {
+                                @for (day of week; track day.toMillis()) {
+                                    <button
+                                        type="button"
+                                        class="nxe-calendar-day"
+                                        [class.nxe-calendar-other]="day.month !== viewMonth().month"
+                                        [class.nxe-calendar-selected]="isSelected(day)"
+                                        [class.nxe-calendar-today]="isToday(day)"
+                                        [disabled]="isDisabledDay(day)"
+                                        (click)="selectDay(day)">
+                                        <span>{{ day.day }}</span>
+                                    </button>
+                                }
+                            }
+                        </div>
+                    } @else {
+                        <div
+                            class="nxe-calendar-periods"
+                            [class.nxe-calendar-periods-century]="zoomLevel() === 'century'">
+                            @for (cell of periodCells(); track cell.anchor.toMillis()) {
+                                <button
+                                    type="button"
+                                    class="nxe-calendar-period"
+                                    [class.nxe-calendar-other]="cell.other"
+                                    [class.nxe-calendar-today]="cell.isNow"
+                                    [disabled]="cell.disabled"
+                                    (click)="selectPeriod(cell)">
+                                    <span>{{ cell.label }}</span>
+                                </button>
+                            }
+                        </div>
+                    }
+                }
+                @if (type() !== 'date') {
+                    <div class="nxe-calendar-time">
+                        <input
+                            class="nxe-calendar-time-part"
+                            type="text"
+                            inputmode="numeric"
+                            maxlength="2"
+                            [attr.aria-label]="nxeMessages.t('date.hour')"
+                            [value]="hourText()"
+                            (change)="setTimePart('hour', $event)" />
+                        <span class="nxe-calendar-time-sep" aria-hidden="true">:</span>
+                        <input
+                            class="nxe-calendar-time-part"
+                            type="text"
+                            inputmode="numeric"
+                            maxlength="2"
+                            [attr.aria-label]="nxeMessages.t('date.minute')"
+                            [value]="minuteText()"
+                            (change)="setTimePart('minute', $event)" />
+                        <button type="button" class="nxe-calendar-time-btn" (click)="setNow()">{{ nxeMessages.t('date.now') }}</button>
+                        <button type="button" class="nxe-calendar-time-btn nxe-calendar-time-done" (click)="close()">
+                            {{ nxeMessages.t('date.done') }}
+                        </button>
+                    </div>
+                }
+            </div>
+        </ng-template>
+    `, isInline: true, styles: ["nxe-date-box .nxe-datebox-button{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-date-box .nxe-datebox-button svg{display:block;width:18px;height:18px;fill:currentColor}nxe-date-box:hover:not(.nxe-disabled) .nxe-datebox-button,nxe-date-box:active:not(.nxe-disabled) .nxe-datebox-button{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-date-box .nxe-datebox-button.nxe-datebox-open{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-date-box .nxe-datebox-icon{width:18px;height:18px;fill:currentColor}nxe-date-box .nxe-editor-container:has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 38px}nxe-date-box .nxe-editor-container:has(>.nxe-clear-button-area):has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 72px}nxe-date-box.nxe-readonly .nxe-datebox-button,nxe-date-box.nxe-disabled .nxe-datebox-button{cursor:default}nxe-date-box.nxe-readonly .nxe-datebox-button:hover,nxe-date-box.nxe-disabled .nxe-datebox-button:hover{background-color:transparent}.nxe-calendar{width:298px;box-sizing:border-box;padding:8px;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:6px;box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .18));color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-font-size, 12px);-webkit-user-select:none;user-select:none}.nxe-calendar-navigator{display:flex;height:36px;margin-bottom:8px}.nxe-calendar-nav,.nxe-calendar-caption{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--nxe-ui-border, #ddd);background:transparent;color:var(--nxe-ui-text, #333);cursor:pointer;padding:0}.nxe-calendar-nav:hover,.nxe-calendar-caption:hover{background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}.nxe-calendar-nav:active,.nxe-calendar-caption:active{background-color:var(--nxe-ui-active-bg, rgba(0, 0, 0, .24))}.nxe-calendar-nav{flex:0 0 36px}.nxe-calendar-nav:first-child{border-radius:4px 0 0 4px}.nxe-calendar-nav:last-child{border-radius:0 4px 4px 0}.nxe-calendar-caption{flex:1;margin:0 -1px;font-size:inherit;font-weight:600}.nxe-calendar-chevron{width:18px;height:18px;fill:currentColor}.nxe-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:24px;text-align:center;color:var(--nxe-ui-text, #333);font-size:10px;font-weight:500}.nxe-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.nxe-calendar-day,.nxe-calendar-period{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-size:14px;line-height:1;color:var(--nxe-ui-text, #333)}.nxe-calendar-day span,.nxe-calendar-period span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:4px}.nxe-calendar-day:hover:not(:disabled) span,.nxe-calendar-period:hover:not(:disabled) span{background:var(--nxe-ui-accent-tint, rgba(51, 122, 183, .24))}.nxe-calendar-day:disabled,.nxe-calendar-period:disabled{cursor:default;color:var(--nxe-ui-text-disabled, rgba(51, 51, 51, .38))}.nxe-calendar-day{height:33px}.nxe-calendar-day span{width:28px;height:28px}.nxe-calendar-periods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px}.nxe-calendar-period span{min-width:54px;height:54px;padding:0 4px}.nxe-calendar-periods-century .nxe-calendar-period span{width:40px;min-width:0;height:auto;min-height:56px;padding:4px 0;white-space:normal;text-align:center;line-height:1.4}.nxe-calendar-other{color:var(--nxe-ui-text-disabled, rgba(51, 51, 51, .38))}.nxe-calendar-today span{border:2px solid var(--nxe-ui-accent, #337ab7)}.nxe-calendar-selected span,.nxe-calendar-selected:hover:not(:disabled) span{background:var(--nxe-ui-accent, #337ab7);color:var(--nxe-ui-accent-contrast, #fff);box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(51, 122, 183, .5));border:0}.nxe-calendar-time{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--nxe-ui-border, #ddd)}.nxe-calendar-time-part{width:2.6em;height:2.2em;box-sizing:border-box;padding:0 .25em;border:1px solid var(--nxe-ui-border, #ddd);border-radius:4px;background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);font-size:inherit;font-variant-numeric:tabular-nums;text-align:center}.nxe-calendar-time-part:focus{outline:2px solid var(--nxe-ui-accent, #337ab7);outline-offset:-2px}.nxe-calendar-time-sep{font-weight:600}.nxe-calendar-time-btn{height:2.2em;padding:0 .75em;border:1px solid var(--nxe-ui-border, #ddd);border-radius:4px;background:transparent;color:var(--nxe-ui-text, #333);font-size:inherit;cursor:pointer}.nxe-calendar-time-btn:hover{background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}.nxe-calendar-time-btn:focus-visible{outline:2px solid var(--nxe-ui-accent, #337ab7);outline-offset:-2px}.nxe-calendar-time-done{margin-left:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDateBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-date-box', standalone: true, template: `
-        <div class="nxe-editor-container">
-            <input
-                #field
-                class="nxe-editor-input nxe-datebox-input"
-                type="text"
-                [value]="displayValue()"
-                [readOnly]="readOnly()"
-                [disabled]="disabled()"
-                [attr.placeholder]="effectivePlaceholder() || null"
-                autocomplete="off"
-                (focus)="onFocus($event)"
-                (blur)="onBlur($event)" />
-            @if (!readOnly()) {
-                <span
-                    class="nxe-datebox-button"
-                    [class.nxe-datebox-open]="opened()"
-                    (mousedown)="onButtonMousedown($event)"
-                    aria-hidden="true">
-                    @if (type() === 'datetime' || type() === 'time') {
-                        <svg class="nxe-datebox-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7V7z" />
-                        </svg>
-                    } @else {
-                        <svg class="nxe-datebox-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11z" />
-                        </svg>
-                    }
-                </span>
-            }
-        </div>
-        <ng-content />
-        @if (validationError(); as error) {
-            @if (focused()) {
-                <div class="nxe-invalid-message">{{ error }}</div>
-            }
-        }
-
-        <ng-template #calendarTemplate>
-            <div class="nxe-calendar" (mousedown)="$event.preventDefault()">
-                @if (type() !== 'time') {
-                    <div class="nxe-calendar-navigator">
-                        <button type="button" class="nxe-calendar-nav" (click)="navigate(-1)">
-                            <svg class="nxe-calendar-chevron" viewBox="0 0 24 24">
-                                <path d="M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z" />
-                            </svg>
-                        </button>
-                        <button type="button" class="nxe-calendar-caption" (click)="zoomOut()">
-                            {{ caption() }}
-                        </button>
-                        <button type="button" class="nxe-calendar-nav" (click)="navigate(1)">
-                            <svg class="nxe-calendar-chevron" viewBox="0 0 24 24">
-                                <path d="M8.6 16.6 10 18l6-6-6-6-1.4 1.4 4.6 4.6z" />
-                            </svg>
-                        </button>
-                    </div>
-                    @if (zoomLevel() === 'month') {
-                        <div class="nxe-calendar-weekdays">
-                            @for (wd of weekdays; track wd) {
-                                <span>{{ wd }}</span>
-                            }
-                        </div>
-                        <div class="nxe-calendar-grid">
-                            @for (week of weeks(); track $index) {
-                                @for (day of week; track day.toMillis()) {
-                                    <button
-                                        type="button"
-                                        class="nxe-calendar-day"
-                                        [class.nxe-calendar-other]="day.month !== viewMonth().month"
-                                        [class.nxe-calendar-selected]="isSelected(day)"
-                                        [class.nxe-calendar-today]="isToday(day)"
-                                        [disabled]="isDisabledDay(day)"
-                                        (click)="selectDay(day)">
-                                        <span>{{ day.day }}</span>
-                                    </button>
-                                }
-                            }
-                        </div>
-                    } @else {
-                        <div
-                            class="nxe-calendar-periods"
-                            [class.nxe-calendar-periods-century]="zoomLevel() === 'century'">
-                            @for (cell of periodCells(); track cell.anchor.toMillis()) {
-                                <button
-                                    type="button"
-                                    class="nxe-calendar-period"
-                                    [class.nxe-calendar-other]="cell.other"
-                                    [class.nxe-calendar-today]="cell.isNow"
-                                    [disabled]="cell.disabled"
-                                    (click)="selectPeriod(cell)">
-                                    <span>{{ cell.label }}</span>
-                                </button>
-                            }
-                        </div>
-                    }
-                }
-                @if (type() !== 'date') {
-                    <div class="nxe-calendar-time">
-                        <input
-                            class="nxe-calendar-time-part"
-                            type="text"
-                            inputmode="numeric"
-                            maxlength="2"
-                            aria-label="Hour"
-                            [value]="hourText()"
-                            (change)="setTimePart('hour', $event)" />
-                        <span class="nxe-calendar-time-sep" aria-hidden="true">:</span>
-                        <input
-                            class="nxe-calendar-time-part"
-                            type="text"
-                            inputmode="numeric"
-                            maxlength="2"
-                            aria-label="Minute"
-                            [value]="minuteText()"
-                            (change)="setTimePart('minute', $event)" />
-                        <button type="button" class="nxe-calendar-time-btn" (click)="setNow()">Now</button>
-                        <button type="button" class="nxe-calendar-time-btn nxe-calendar-time-done" (click)="close()">
-                            Done
-                        </button>
-                    </div>
-                }
-            </div>
-        </ng-template>
+            args: [{ selector: 'nxe-date-box', standalone: true, template: `
+        <div class="nxe-editor-container">
+            <input
+                #field
+                class="nxe-editor-input nxe-datebox-input"
+                [attr.tabindex]="tabIndex()"
+                [id]="controlId()"
+                [attr.aria-label]="ariaLabel() || null"
+                [attr.aria-labelledby]="ariaLabelledBy() || null"
+                [attr.aria-invalid]="invalidState() ? true : null"
+                [attr.aria-required]="required() ? true : null"
+                type="text"
+                [value]="displayValue()"
+                [readOnly]="readOnly()"
+                [disabled]="disabled()"
+                [attr.placeholder]="effectivePlaceholder() || null"
+                autocomplete="off"
+                (input)="onFieldInput($event)"
+                (focus)="onFocus($event)"
+                (blur)="onBlur($event)" />
+            @if (clearButtonVisible()) {
+                <span
+                    class="nxe-clear-button-area"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onClear($event)"
+                    aria-hidden="true">
+                    <!-- A Ø16 disc with a 2px × cut out (the dropdown editors' clear glyph). -->
+                    <svg viewBox="0 0 18 18" focusable="false">
+                        <path fill-rule="evenodd" transform="rotate(45 9 9)"
+                            d="M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z" />
+                    </svg>
+                </span>
+            }
+            @if (!readOnly()) {
+                <span
+                    class="nxe-datebox-button"
+                    [class.nxe-datebox-open]="opened()"
+                    (mousedown)="onButtonMousedown($event)"
+                    aria-hidden="true">
+                    @switch (type()) {
+                        @case ('time') {
+                            <!-- dx clock, a 16x16 ink box round the box centre: a 2px ring (an r 7
+                                 circle stroked 2px), a 2x4 hand straight up from the centre, a 1.5x4
+                                 hand turned 45° down-right, and a Ø2 hub where they meet. -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-time" viewBox="0 0 18 18" focusable="false">
+                                <circle cx="9" cy="9" r="7" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="8" y="5" width="2" height="4" />
+                                <rect x="9" y="8.25" width="4" height="1.5" transform="rotate(45 9 9)" />
+                                <circle cx="9" cy="9" r="1" />
+                            </svg>
+                        }
+                        @case ('datetime') {
+                            <!-- dx eventall: the calendar page below, without its day marker. -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-datetime" viewBox="0 0 18 18" focusable="false">
+                                <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="3" y="3" width="12" height="3" />
+                                <rect x="4" y="1" width="2" height="1.5" />
+                                <rect x="12" y="1" width="2" height="1.5" />
+                            </svg>
+                        }
+                        @default {
+                            <!-- dx event, a 14x15 ink box from 1px below the top of the 18px box
+                                 (where dx's glyph renders): the page is a 12x12 rect with 1px corners
+                                 stroked 2px, so 14x14 with 2px corners outside and square inside; a
+                                 12x3 bar under its top wall makes the 4px header band; two 2x1.5
+                                 binder tabs stand 1px proud of it; a 4x4 day marker at (9, 9). -->
+                            <svg class="nxe-datebox-icon nxe-datebox-icon-date" viewBox="0 0 18 18" focusable="false">
+                                <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
+                                <rect x="3" y="3" width="12" height="3" />
+                                <rect x="4" y="1" width="2" height="1.5" />
+                                <rect x="12" y="1" width="2" height="1.5" />
+                                <rect x="9" y="9" width="4" height="4" />
+                            </svg>
+                        }
+                    }
+                </span>
+            }
+        </div>
+        <ng-content />
+        @if (validationError(); as error) {
+            @if (focused()) {
+                <div class="nxe-invalid-message">{{ error }}</div>
+            }
+        }
+
+        <ng-template #calendarTemplate>
+            <div class="nxe-calendar" (mousedown)="$event.preventDefault()">
+                @if (type() !== 'time') {
+                    <div class="nxe-calendar-navigator">
+                        <button type="button" class="nxe-calendar-nav" (click)="navigate(-1)">
+                            <!-- dx chevronleft (8x14 ink, centred in its 18px box): two 45° arms
+                                 whose outer edges run 7px out and 7px up and down from the point,
+                                 their ends cut square 1.25px across and down (a 1.77px stroke),
+                                 meeting 2.5px behind it. That draws 8.25x14, centred by putting the
+                                 point at x 4.875, and rasterises to dx's 8x14. -->
+                            <svg class="nxe-calendar-chevron" viewBox="0 0 18 18" focusable="false">
+                                <polygon points="4.875 9 11.875 2 13.125 3.25 7.375 9 13.125 14.75 11.875 16" />
+                            </svg>
+                        </button>
+                        <button type="button" class="nxe-calendar-caption" (click)="zoomOut()">
+                            {{ caption() }}
+                        </button>
+                        <button type="button" class="nxe-calendar-nav" (click)="navigate(1)">
+                            <!-- dx chevronright: the same chevron mirrored about x 9. -->
+                            <svg class="nxe-calendar-chevron" viewBox="0 0 18 18" focusable="false">
+                                <polygon points="13.125 9 6.125 2 4.875 3.25 10.625 9 4.875 14.75 6.125 16" />
+                            </svg>
+                        </button>
+                    </div>
+                    @if (zoomLevel() === 'month') {
+                        <div class="nxe-calendar-weekdays">
+                            @for (wd of weekdays(); track $index) {
+                                <span>{{ wd }}</span>
+                            }
+                        </div>
+                        <div class="nxe-calendar-grid">
+                            @for (week of weeks(); track $index) {
+                                @for (day of week; track day.toMillis()) {
+                                    <button
+                                        type="button"
+                                        class="nxe-calendar-day"
+                                        [class.nxe-calendar-other]="day.month !== viewMonth().month"
+                                        [class.nxe-calendar-selected]="isSelected(day)"
+                                        [class.nxe-calendar-today]="isToday(day)"
+                                        [disabled]="isDisabledDay(day)"
+                                        (click)="selectDay(day)">
+                                        <span>{{ day.day }}</span>
+                                    </button>
+                                }
+                            }
+                        </div>
+                    } @else {
+                        <div
+                            class="nxe-calendar-periods"
+                            [class.nxe-calendar-periods-century]="zoomLevel() === 'century'">
+                            @for (cell of periodCells(); track cell.anchor.toMillis()) {
+                                <button
+                                    type="button"
+                                    class="nxe-calendar-period"
+                                    [class.nxe-calendar-other]="cell.other"
+                                    [class.nxe-calendar-today]="cell.isNow"
+                                    [disabled]="cell.disabled"
+                                    (click)="selectPeriod(cell)">
+                                    <span>{{ cell.label }}</span>
+                                </button>
+                            }
+                        </div>
+                    }
+                }
+                @if (type() !== 'date') {
+                    <div class="nxe-calendar-time">
+                        <input
+                            class="nxe-calendar-time-part"
+                            type="text"
+                            inputmode="numeric"
+                            maxlength="2"
+                            [attr.aria-label]="nxeMessages.t('date.hour')"
+                            [value]="hourText()"
+                            (change)="setTimePart('hour', $event)" />
+                        <span class="nxe-calendar-time-sep" aria-hidden="true">:</span>
+                        <input
+                            class="nxe-calendar-time-part"
+                            type="text"
+                            inputmode="numeric"
+                            maxlength="2"
+                            [attr.aria-label]="nxeMessages.t('date.minute')"
+                            [value]="minuteText()"
+                            (change)="setTimePart('minute', $event)" />
+                        <button type="button" class="nxe-calendar-time-btn" (click)="setNow()">{{ nxeMessages.t('date.now') }}</button>
+                        <button type="button" class="nxe-calendar-time-btn nxe-calendar-time-done" (click)="close()">
+                            {{ nxeMessages.t('date.done') }}
+                        </button>
+                    </div>
+                }
+            </div>
+        </ng-template>
     `, host: {
                         class: 'nxe-widget nxe-editor nxe-datebox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDateBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDateBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-date-box .nxe-datebox-button{flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;cursor:pointer;color:#333;border-radius:4px}nxe-date-box .nxe-datebox-icon{width:18px;height:18px;fill:currentColor}nxe-date-box .nxe-editor-container:has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 38px}nxe-date-box.nxe-readonly .nxe-datebox-button,nxe-date-box.nxe-disabled .nxe-datebox-button{cursor:default}nxe-date-box.nxe-readonly .nxe-datebox-button:hover,nxe-date-box.nxe-disabled .nxe-datebox-button:hover{background-color:transparent}.nxe-calendar{width:298px;box-sizing:border-box;padding:8px;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002e;color:#333;font-size:12px;-webkit-user-select:none;user-select:none}.nxe-calendar-navigator{display:flex;height:36px;margin-bottom:8px}.nxe-calendar-nav,.nxe-calendar-caption{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;background:transparent;color:#333;cursor:pointer;padding:0}.nxe-calendar-nav:hover,.nxe-calendar-caption:hover{background:#0000000a}.nxe-calendar-nav{flex:0 0 36px}.nxe-calendar-nav:first-child{border-radius:4px 0 0 4px}.nxe-calendar-nav:last-child{border-radius:0 4px 4px 0}.nxe-calendar-caption{flex:1;margin:0 -1px;font-size:12px;font-weight:600}.nxe-calendar-chevron{width:18px;height:18px;fill:currentColor}.nxe-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:24px;text-align:center;color:#333;font-size:10px;font-weight:500}.nxe-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.nxe-calendar-day,.nxe-calendar-period{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-size:14px;line-height:1;color:#333}.nxe-calendar-day span,.nxe-calendar-period span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:4px}.nxe-calendar-day:hover:not(:disabled) span,.nxe-calendar-period:hover:not(:disabled) span{background:#337ab73d}.nxe-calendar-day:disabled,.nxe-calendar-period:disabled{cursor:default;color:#33333361}.nxe-calendar-day{height:33px}.nxe-calendar-day span{width:28px;height:28px}.nxe-calendar-periods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px}.nxe-calendar-period span{min-width:54px;height:54px;padding:0 4px}.nxe-calendar-periods-century .nxe-calendar-period span{width:40px;min-width:0;height:auto;min-height:56px;padding:4px 0;white-space:normal;text-align:center;line-height:1.4}.nxe-calendar-other{color:#33333361}.nxe-calendar-today span{border:2px solid #337ab7}.nxe-calendar-selected span,.nxe-calendar-selected:hover:not(:disabled) span{background:#337ab7;color:#fff;box-shadow:0 0 0 2px #337ab780;border:0}.nxe-calendar-time{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid #ddd}.nxe-calendar-time-part{width:2.6em;height:2.2em;box-sizing:border-box;padding:0 .25em;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font-size:inherit;font-variant-numeric:tabular-nums;text-align:center}.nxe-calendar-time-part:focus{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-sep{font-weight:600}.nxe-calendar-time-btn{height:2.2em;padding:0 .75em;border:1px solid #ddd;border-radius:4px;background:transparent;color:#333;font-size:inherit;cursor:pointer}.nxe-calendar-time-btn:hover{background:#0000000a}.nxe-calendar-time-btn:focus-visible{outline:2px solid #337ab7;outline-offset:-2px}.nxe-calendar-time-done{margin-left:auto}\n"] }]
-        }], propDecorators: { calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", 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 }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-date-box .nxe-datebox-button{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-date-box .nxe-datebox-button svg{display:block;width:18px;height:18px;fill:currentColor}nxe-date-box:hover:not(.nxe-disabled) .nxe-datebox-button,nxe-date-box:active:not(.nxe-disabled) .nxe-datebox-button{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-date-box .nxe-datebox-button.nxe-datebox-open{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-date-box .nxe-datebox-icon{width:18px;height:18px;fill:currentColor}nxe-date-box .nxe-editor-container:has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 38px}nxe-date-box .nxe-editor-container:has(>.nxe-clear-button-area):has(>.nxe-datebox-button){--nxe-invalid-badge-inset: 72px}nxe-date-box.nxe-readonly .nxe-datebox-button,nxe-date-box.nxe-disabled .nxe-datebox-button{cursor:default}nxe-date-box.nxe-readonly .nxe-datebox-button:hover,nxe-date-box.nxe-disabled .nxe-datebox-button:hover{background-color:transparent}.nxe-calendar{width:298px;box-sizing:border-box;padding:8px;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:6px;box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .18));color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-font-size, 12px);-webkit-user-select:none;user-select:none}.nxe-calendar-navigator{display:flex;height:36px;margin-bottom:8px}.nxe-calendar-nav,.nxe-calendar-caption{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--nxe-ui-border, #ddd);background:transparent;color:var(--nxe-ui-text, #333);cursor:pointer;padding:0}.nxe-calendar-nav:hover,.nxe-calendar-caption:hover{background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}.nxe-calendar-nav:active,.nxe-calendar-caption:active{background-color:var(--nxe-ui-active-bg, rgba(0, 0, 0, .24))}.nxe-calendar-nav{flex:0 0 36px}.nxe-calendar-nav:first-child{border-radius:4px 0 0 4px}.nxe-calendar-nav:last-child{border-radius:0 4px 4px 0}.nxe-calendar-caption{flex:1;margin:0 -1px;font-size:inherit;font-weight:600}.nxe-calendar-chevron{width:18px;height:18px;fill:currentColor}.nxe-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;height:24px;text-align:center;color:var(--nxe-ui-text, #333);font-size:10px;font-weight:500}.nxe-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.nxe-calendar-day,.nxe-calendar-period{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-size:14px;line-height:1;color:var(--nxe-ui-text, #333)}.nxe-calendar-day span,.nxe-calendar-period span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:4px}.nxe-calendar-day:hover:not(:disabled) span,.nxe-calendar-period:hover:not(:disabled) span{background:var(--nxe-ui-accent-tint, rgba(51, 122, 183, .24))}.nxe-calendar-day:disabled,.nxe-calendar-period:disabled{cursor:default;color:var(--nxe-ui-text-disabled, rgba(51, 51, 51, .38))}.nxe-calendar-day{height:33px}.nxe-calendar-day span{width:28px;height:28px}.nxe-calendar-periods{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px}.nxe-calendar-period span{min-width:54px;height:54px;padding:0 4px}.nxe-calendar-periods-century .nxe-calendar-period span{width:40px;min-width:0;height:auto;min-height:56px;padding:4px 0;white-space:normal;text-align:center;line-height:1.4}.nxe-calendar-other{color:var(--nxe-ui-text-disabled, rgba(51, 51, 51, .38))}.nxe-calendar-today span{border:2px solid var(--nxe-ui-accent, #337ab7)}.nxe-calendar-selected span,.nxe-calendar-selected:hover:not(:disabled) span{background:var(--nxe-ui-accent, #337ab7);color:var(--nxe-ui-accent-contrast, #fff);box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(51, 122, 183, .5));border:0}.nxe-calendar-time{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--nxe-ui-border, #ddd)}.nxe-calendar-time-part{width:2.6em;height:2.2em;box-sizing:border-box;padding:0 .25em;border:1px solid var(--nxe-ui-border, #ddd);border-radius:4px;background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);font-size:inherit;font-variant-numeric:tabular-nums;text-align:center}.nxe-calendar-time-part:focus{outline:2px solid var(--nxe-ui-accent, #337ab7);outline-offset:-2px}.nxe-calendar-time-sep{font-weight:600}.nxe-calendar-time-btn{height:2.2em;padding:0 .75em;border:1px solid var(--nxe-ui-border, #ddd);border-radius:4px;background:transparent;color:var(--nxe-ui-text, #333);font-size:inherit;cursor:pointer}.nxe-calendar-time-btn:hover{background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}.nxe-calendar-time-btn:focus-visible{outline:2px solid var(--nxe-ui-accent, #337ab7);outline-offset:-2px}.nxe-calendar-time-done{margin-left:auto}\n"] }]
+        }], propDecorators: { calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", 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 }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }] } });
+
+/**
+ * The clock the box reads for "today": the highlighted day, where the popup opens and what the
+ * built-in presets count back from. Provide a fixed one in a test:
+ *
+ * ```ts
+ * { provide: NXE_DATE_RANGE_NOW, useValue: () => DateTime.fromISO('2026-10-07T09:30:00') }
+ * ```
+ */
+const NXE_DATE_RANGE_NOW = new InjectionToken('NXE_DATE_RANGE_NOW', {
+    providedIn: 'root',
+    factory: () => () => DateTime.now(),
+});
+/** Default `displayFormat`: `1 Okt 2026` in Indonesian, `1 Oct 2026` in English. */
+const NXE_DATE_RANGE_DISPLAY_FORMAT = 'd MMM yyyy';
+/** Default `valueFormat`: date-only. */
+const NXE_DATE_RANGE_VALUE_FORMAT = 'yyyy-MM-dd';
+/**
+ * The built-in presets. Each call returns a fresh entry whose label comes from the message bundle
+ * and whose range counts from the box's clock. Weeks are not offered: the first day of the week is
+ * a locale question this library does not decide.
+ */
+const nxeDateRangePresets = {
+    today: () => ({
+        labelKey: 'dateRange.preset.today',
+        range: (now) => ({ start: now.startOf('day'), end: now.startOf('day') }),
+    }),
+    yesterday: () => ({
+        labelKey: 'dateRange.preset.yesterday',
+        range: (now) => {
+            const day = now.startOf('day').minus({ days: 1 });
+            return { start: day, end: day };
+        },
+    }),
+    /** Today and the six days before it. */
+    last7Days: () => ({
+        labelKey: 'dateRange.preset.last7Days',
+        range: (now) => ({ start: now.startOf('day').minus({ days: 6 }), end: now.startOf('day') }),
+    }),
+    /** Today and the 29 days before it. */
+    last30Days: () => ({
+        labelKey: 'dateRange.preset.last30Days',
+        range: (now) => ({ start: now.startOf('day').minus({ days: 29 }), end: now.startOf('day') }),
+    }),
+    /** The first of the month to its last day (not to today). */
+    thisMonth: () => ({
+        labelKey: 'dateRange.preset.thisMonth',
+        range: (now) => ({ start: now.startOf('month'), end: now.endOf('month').startOf('day') }),
+    }),
+    lastMonth: () => ({
+        labelKey: 'dateRange.preset.lastMonth',
+        range: (now) => {
+            const last = now.minus({ months: 1 });
+            return { start: last.startOf('month'), end: last.endOf('month').startOf('day') };
+        },
+    }),
+    /** 1 January to 31 December. */
+    thisYear: () => ({
+        labelKey: 'dateRange.preset.thisYear',
+        range: (now) => ({ start: now.startOf('year'), end: now.endOf('year').startOf('day') }),
+    }),
+    /** All seven, in the order above. */
+    all: () => [
+        nxeDateRangePresets.today(),
+        nxeDateRangePresets.yesterday(),
+        nxeDateRangePresets.last7Days(),
+        nxeDateRangePresets.last30Days(),
+        nxeDateRangePresets.thisMonth(),
+        nxeDateRangePresets.lastMonth(),
+        nxeDateRangePresets.thisYear(),
+    ],
+};
+
+/** Below this width the popup shows one month and stacks the presets above it. */
+const NARROW_QUERY = '(max-width: 719.98px)';
+let rangeBoxSequence = 0;
+function toBound(bound) {
+    if (!bound) {
+        return null;
+    }
+    return parseDateValue(bound)?.startOf('day') ?? null;
+}
+function dayKey(dt) {
+    return dt.toFormat('yyyy-MM-dd');
+}
+/**
+ * `nxe-date-range-box` picks a start and an end date in one field.
+ *
+ * ```html
+ * <nxe-form-field label="Tanggal PO">
+ *     <nxe-date-range-box formControlName="poDate" [presets]="presets" min="2020-01-01" />
+ * </nxe-form-field>
+ * ```
+ *
+ * The value is `{ start, end }`, each a string in `valueFormat` (`yyyy-MM-dd` by default; with a time
+ * format the start is the first second of its day and the end the last), `null` while that end is
+ * empty, and `null` as a whole when both are. The field shows `1 Okt 2026 - 31 Okt 2026` and opens
+ * a popup: two months side by side (one under 720px), a quick-range list, and a typed input for each
+ * end. The first click picks the start, the second the end; the days in between preview under the
+ * pointer, and a second click before the first swaps the two.
+ *
+ * Month and weekday names follow the active language of `NxeMessageService`. The field is a
+ * read-only combobox, so a label, `aria-invalid` and `aria-describedby` from `nxe-form-field` reach
+ * it; the popup is a dialog with the days in an ARIA grid (arrows, Home and End by week, PageUp and
+ * PageDown by month, Enter or Space to pick, Esc closes and returns focus to the field).
+ */
+class NxeDateRangeBoxComponent extends NxeFormControlBase {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    clock = inject(NXE_DATE_RANGE_NOW);
+    breakpoints = inject(BreakpointObserver);
+    popupTemplate = viewChild.required('popupTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
+    fieldRef = viewChild.required('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldRef" }] : /* istanbul ignore next */ []));
+    /** How the dates read in the field and in the typed inputs: a Luxon format. */
+    displayFormat = input(NXE_DATE_RANGE_DISPLAY_FORMAT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    /** How each end is written to the value. Date-only unless it carries time tokens. */
+    valueFormat = input(NXE_DATE_RANGE_VALUE_FORMAT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /** Days before this are disabled, and a typed or preset date before it moves to it. */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Days after this are disabled, and a typed or preset date after it moves to it. */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** The quick-range list. Empty draws none. See `nxeDateRangePresets` for the built-in ones. */
+    presets = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    /** Shown in the field and the start input while the start is empty. Defaults to the message bundle's. */
+    startPlaceholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Shown in the field and the end input while the end is empty. Defaults to the message bundle's. */
+    endPlaceholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endPlaceholder" }] : /* istanbul ignore next */ []));
+    /** The clear area in the field. On by default: a filter is cleared more often than a form field. */
+    showClearButton = input(true, { ...(ngDevMode ? { debugName: "showClearButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** Whether the popup is showing. */
+    opened = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    uid = `nxe-daterange-${++rangeBoxSequence}`;
+    popupId = `${this.uid}-popup`;
+    isNarrow = toSignal(this.breakpoints.observe(NARROW_QUERY).pipe(map((state) => state.matches)), {
+        initialValue: this.breakpoints.isMatched(NARROW_QUERY),
+    });
+    monthsShown = computed(() => (this.isNarrow() ? 1 : 2), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthsShown" }] : /* istanbul ignore next */ []));
+    locale = computed(() => this.nxeMessages.locale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    minDate = computed(() => toBound(this.min()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = computed(() => toBound(this.max()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** The committed value as days in the active locale. */
+    range = computed(() => {
+        const value = this.value();
+        const locale = this.locale();
+        return {
+            start: parseDateValue(value?.start)?.startOf('day').setLocale(locale) ?? null,
+            end: parseDateValue(value?.end)?.startOf('day').setLocale(locale) ?? null,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    startText = computed(() => formatDisplay(this.range().start, this.displayFormat(), this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []));
+    endText = computed(() => formatDisplay(this.range().end, this.displayFormat(), this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endText" }] : /* istanbul ignore next */ []));
+    startHint = computed(() => this.startPlaceholder() ?? this.nxeMessages.t('dateRange.startPlaceholder'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startHint" }] : /* istanbul ignore next */ []));
+    endHint = computed(() => this.endPlaceholder() ?? this.nxeMessages.t('dateRange.endPlaceholder'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endHint" }] : /* istanbul ignore next */ []));
+    /** `1 Okt 2026 - 31 Okt 2026`; an empty end leaves the dash hanging so a half-set range reads as one. */
+    displayValue = computed(() => {
+        const start = this.startText();
+        const end = this.endText();
+        return start || end ? `${start} – ${end}`.trim() : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    fieldPlaceholder = computed(() => `${this.startHint()} – ${this.endHint()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldPlaceholder" }] : /* istanbul ignore next */ []));
+    clearButtonVisible = computed(() => this.showClearButton() && !this.readOnly() && !this.disabled() && this.displayValue() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
+    // --- popup state ---
+    /** The first click of a range in progress; null when none is. */
+    draftStart = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftStart" }] : /* istanbul ignore next */ []));
+    /** The day under the pointer or the keyboard while a range is in progress. */
+    hovered = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    /** The day the grid's single tab stop is on. */
+    activeDate = signal(DateTime.now(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    /** The first month shown. */
+    viewMonth = signal(DateTime.now().startOf('month'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    weekdays = computed(() => {
+        const locale = this.locale();
+        const short = Info.weekdays('short', { locale });
+        const long = Info.weekdays('long', { locale });
+        // Luxon starts on Monday; the grid starts on Sunday, as nxe-date-box's does.
+        return [{ short: short[6], long: long[6] }, ...short.slice(0, 6).map((s, i) => ({ short: s, long: long[i] }))];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    presetResults = computed(() => {
+        const now = this.clock().setLocale(this.locale());
+        return this.presets().map((preset) => {
+            const bounds = preset.range(now);
+            return {
+                label: preset.label ?? (preset.labelKey ? this.nxeMessages.t(preset.labelKey) : ''),
+                start: this.clampDay(this.toDay(bounds.start)),
+                end: this.clampDay(this.toDay(bounds.end)),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetResults" }] : /* istanbul ignore next */ []));
+    presetItems = computed(() => {
+        const { start, end } = this.range();
+        return this.presetResults().map((preset, index) => ({
+            index,
+            label: preset.label,
+            active: !!start &&
+                !!end &&
+                !!preset.start &&
+                !!preset.end &&
+                dayKey(preset.start) === dayKey(start) &&
+                dayKey(preset.end) === dayKey(end),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetItems" }] : /* istanbul ignore next */ []));
+    /** The key of the grid's tab stop: the active day while it is on screen, else the first day shown. */
+    tabKey = computed(() => {
+        const first = this.viewMonth().startOf('month');
+        const last = first.plus({ months: this.monthsShown() - 1 }).endOf('month');
+        const active = this.activeDate();
+        return active >= first && active <= last ? dayKey(active) : dayKey(first);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabKey" }] : /* istanbul ignore next */ []));
+    months = computed(() => {
+        const locale = this.locale();
+        const today = dayKey(this.clock());
+        const min = this.minDate();
+        const max = this.maxDate();
+        const tabKey = this.tabKey();
+        const draft = this.draftStart();
+        const hover = this.hovered();
+        let low;
+        let high;
+        if (draft) {
+            low = draft;
+            high = hover ?? draft;
+            if (high < low) {
+                [low, high] = [high, low];
+            }
+        }
+        else {
+            const { start, end } = this.range();
+            low = start ?? end;
+            high = end ?? start;
+        }
+        const lowKey = low ? dayKey(low) : null;
+        const highKey = high ? dayKey(high) : null;
+        return Array.from({ length: this.monthsShown() }, (_, offset) => {
+            const month = this.viewMonth().plus({ months: offset }).setLocale(locale);
+            const weeks = buildCalendarWeeks(month)
+                .map((week) => week.map((day) => {
+                if (day.month !== month.month) {
+                    return null;
+                }
+                const key = dayKey(day);
+                return {
+                    date: day,
+                    key,
+                    day: day.day,
+                    label: day.setLocale(locale).toLocaleString(DateTime.DATE_FULL),
+                    disabled: (!!min && day < min) || (!!max && day > max),
+                    today: key === today,
+                    start: key === lowKey,
+                    end: key === highKey,
+                    inRange: !!lowKey && !!highKey && key >= lowKey && key <= highKey,
+                    preview: !!draft,
+                    tabbable: key === tabKey,
+                };
+            }))
+                .filter((week) => week.some((cell) => cell !== null));
+            return { key: dayKey(month.startOf('month')), caption: month.toFormat('LLLL yyyy'), weeks };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    canGoBack = computed(() => {
+        const min = this.minDate();
+        return !min || this.viewMonth().startOf('month') > min.startOf('month');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoBack" }] : /* istanbul ignore next */ []));
+    canGoForward = computed(() => {
+        const max = this.maxDate();
+        return !max || this.viewMonth().plus({ months: this.monthsShown() - 1 }).endOf('month') < max.startOf('month');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoForward" }] : /* istanbul ignore next */ []));
+    /** The line under the grid, read out as it changes. */
+    status = computed(() => this.nxeMessages.t(this.draftStart() ? 'dateRange.pickEnd' : 'dateRange.pickStart'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    overlayRef;
+    closeSub;
+    flipSub;
+    // --- field ---
+    onFieldClick() {
+        if (this.opened()) {
+            this.close(true);
+        }
+        else {
+            this.open();
+        }
+    }
+    onFieldKeydown(event) {
+        if (event.ctrlKey || event.metaKey) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.open();
+                break;
+            case 'Backspace':
+            case 'Delete':
+                if (!this.readOnly() && !this.disabled()) {
+                    event.preventDefault();
+                    this.clear(event);
+                }
+                break;
+        }
+    }
+    onFocus() {
+        this.focused.set(true);
+    }
+    onBlur() {
+        this.focused.set(false);
+        // Focus moving into the popup is not leaving the field; the popup marks it touched on close.
+        if (!this.opened()) {
+            this.markAsTouched();
+        }
+    }
+    onClearClick(event) {
+        this.clear(event);
+        this.fieldRef().nativeElement.focus();
+    }
+    /** Empties the range. The value becomes `null`. */
+    clear(event) {
+        this.draftStart.set(null);
+        this.hovered.set(null);
+        this.commitRange(null, null, event);
+    }
+    // --- popup: day grid ---
+    pick(cell, event) {
+        if (cell.disabled) {
+            return;
+        }
+        this.activeDate.set(cell.date);
+        const draft = this.draftStart();
+        if (!draft) {
+            this.draftStart.set(cell.date);
+            this.hovered.set(cell.date);
+            return;
+        }
+        this.draftStart.set(null);
+        this.hovered.set(null);
+        this.commitRange(draft, cell.date, event);
+        this.close(true);
+    }
+    onDayEnter(cell) {
+        if (this.draftStart()) {
+            this.hovered.set(cell.date);
+        }
+    }
+    onDayFocus(cell) {
+        this.activeDate.set(cell.date);
+        if (this.draftStart()) {
+            this.hovered.set(cell.date);
+        }
+    }
+    /** The pointer left the grids: the preview falls back to the keyboard's day. */
+    onGridLeave() {
+        this.hovered.set(this.draftStart() ? this.activeDate() : null);
+    }
+    onDayKeydown(event, cell) {
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        let target;
+        switch (event.key) {
+            case 'ArrowLeft':
+                target = cell.date.minus({ days: 1 });
+                break;
+            case 'ArrowRight':
+                target = cell.date.plus({ days: 1 });
+                break;
+            case 'ArrowUp':
+                target = cell.date.minus({ days: 7 });
+                break;
+            case 'ArrowDown':
+                target = cell.date.plus({ days: 7 });
+                break;
+            case 'Home':
+                target = cell.date.minus({ days: cell.date.weekday % 7 });
+                break;
+            case 'End':
+                target = cell.date.plus({ days: 6 - (cell.date.weekday % 7) });
+                break;
+            case 'PageUp':
+                target = cell.date.minus(event.shiftKey ? { years: 1 } : { months: 1 });
+                break;
+            case 'PageDown':
+                target = cell.date.plus(event.shiftKey ? { years: 1 } : { months: 1 });
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.pick(cell, event);
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.moveTo(target);
+    }
+    moveTo(date) {
+        this.activeDate.set(date);
+        if (this.draftStart()) {
+            this.hovered.set(date);
+        }
+        this.ensureVisible(date);
+        this.focusDay(date);
+    }
+    ensureVisible(date) {
+        const first = this.viewMonth().startOf('month');
+        const last = first.plus({ months: this.monthsShown() - 1 }).endOf('month');
+        if (date < first) {
+            this.viewMonth.set(date.startOf('month'));
+        }
+        else if (date > last) {
+            this.viewMonth.set(date.startOf('month').minus({ months: this.monthsShown() - 1 }));
+        }
+    }
+    focusDay(date) {
+        const selector = `[data-date="${dayKey(date)}"]`;
+        const find = () => this.overlayRef?.overlayElement.querySelector(selector);
+        const existing = find();
+        if (existing) {
+            existing.focus();
+        }
+        else {
+            afterNextRender(() => find()?.focus(), { injector: this.injector });
+        }
+    }
+    navigate(delta) {
+        this.viewMonth.update((month) => month.plus({ months: delta }));
+    }
+    // --- popup: presets and typed input ---
+    applyPreset(item, event) {
+        const preset = this.presetResults()[item.index];
+        if (!preset) {
+            return;
+        }
+        this.draftStart.set(null);
+        this.hovered.set(null);
+        this.commitRange(preset.start, preset.end, event);
+        this.close(true);
+    }
+    /** Commit the text typed into one end. Empty clears that end; unreadable text is put back. */
+    commitTyped(which, event) {
+        const element = event.target;
+        const text = element.value.trim();
+        const { start, end } = this.range();
+        this.draftStart.set(null);
+        this.hovered.set(null);
+        if (!text) {
+            this.commitRange(which === 'start' ? null : start, which === 'end' ? null : end, event);
+        }
+        else {
+            const parsed = parseDisplay(text, this.displayFormat(), null, this.locale());
+            if (parsed) {
+                const day = this.clampDay(parsed.startOf('day').setLocale(this.locale()));
+                this.commitRange(which === 'start' ? day : start, which === 'end' ? day : end, event);
+                this.activeDate.set(day);
+                this.ensureVisible(day);
+            }
+        }
+        // The bound text is unchanged when the entry was rejected or clamped back, so repaint it.
+        element.value = which === 'start' ? this.startText() : this.endText();
+    }
+    onTypedKeydown(which, event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.commitTyped(which, event);
+        }
+    }
+    onClearInPopup(event) {
+        this.clear(event);
+        this.close(true);
+    }
+    // --- value ---
+    toDay(bound) {
+        return parseDateValue(bound)?.startOf('day').setLocale(this.locale()) ?? null;
+    }
+    clampDay(day) {
+        if (!day) {
+            return null;
+        }
+        const min = this.minDate();
+        const max = this.maxDate();
+        if (min && day < min) {
+            return min.setLocale(this.locale());
+        }
+        if (max && day > max) {
+            return max.setLocale(this.locale());
+        }
+        return day;
+    }
+    serialize(day, edge) {
+        const stamp = edge === 'start' ? day.startOf('day') : day.endOf('day').set({ millisecond: 0 });
+        return stamp.setLocale('en').toFormat(this.valueFormat());
+    }
+    commitRange(start, end, event) {
+        if (start && end && end < start) {
+            [start, end] = [end, start];
+        }
+        const next = start || end
+            ? {
+                start: start ? this.serialize(start, 'start') : null,
+                end: end ? this.serialize(end, 'end') : null,
+            }
+            : null;
+        const current = this.value();
+        if ((current?.start ?? null) === (next?.start ?? null) && (current?.end ?? null) === (next?.end ?? null)) {
+            return;
+        }
+        this.commitValue(next, event);
+    }
+    // --- popup lifecycle ---
+    /** Opens the popup on the start of the range (or today). No-op while open, disabled or read-only. */
+    open() {
+        if (this.disabled() || this.readOnly() || this.opened()) {
+            return;
+        }
+        const { start, end } = this.range();
+        const anchor = this.clampDay(start ?? end ?? this.clock().startOf('day').setLocale(this.locale()));
+        this.draftStart.set(null);
+        this.hovered.set(null);
+        this.activeDate.set(anchor);
+        this.viewMonth.set(anchor.startOf('month'));
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.elementRef)
+                    .withPositions([
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+                    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+                ])
+                    .withFlexibleDimensions(false)
+                    .withPush(true)
+                    .withViewportMargin(8),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                panelClass: nxePane('nxe-daterange-pane'),
+            });
+            this.flipSub = trackPaneFlip(this.overlayRef);
+        }
+        this.overlayRef.attach(new TemplatePortal(this.popupTemplate(), this.viewContainerRef));
+        this.closeSub = merge(this.overlayRef.backdropClick().pipe(map(() => false)), this.overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape'), map((event) => {
+            event.preventDefault();
+            return true;
+        }))).subscribe((restoreFocus) => this.close(restoreFocus));
+        this.opened.set(true);
+        this.focusDay(anchor);
+    }
+    /** Closes the popup, dropping a range that was only half picked. `restoreFocus` returns focus to the field. */
+    close(restoreFocus = true) {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+        this.overlayRef.detach();
+        this.closeSub?.unsubscribe();
+        this.draftStart.set(null);
+        this.hovered.set(null);
+        this.opened.set(false);
+        this.markAsTouched();
+        if (restoreFocus) {
+            this.fieldRef().nativeElement.focus();
+        }
+    }
+    ngOnDestroy() {
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        this.overlayRef?.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDateRangeBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDateRangeBoxComponent, isStandalone: true, selector: "nxe-date-range-box", inputs: { displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", 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 }, presets: { classPropertyName: "presets", publicName: "presets", 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 }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()" }, classAttribute: "nxe-widget nxe-editor nxe-daterangebox" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDateRangeBoxComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDateRangeBoxComponent) },
+        ], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }, { propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\">\n    <!-- A read-only combobox rather than a button: a native input takes its caption from\n         <label for>, and nxe-form-field writes aria-invalid / aria-describedby onto it. -->\n    <input\n        #field\n        class=\"nxe-editor-input nxe-daterange-input\"\n        type=\"text\"\n        role=\"combobox\"\n        aria-haspopup=\"dialog\"\n        autocomplete=\"off\"\n        readonly\n        [id]=\"controlId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-expanded]=\"opened()\"\n        [attr.aria-controls]=\"opened() ? popupId : null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        [attr.placeholder]=\"fieldPlaceholder()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onFieldClick()\"\n        (keydown)=\"onFieldKeydown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n    @if (clearButtonVisible()) {\n        <span class=\"nxe-clear-button-area\" aria-hidden=\"true\" (mousedown)=\"$event.preventDefault()\" (click)=\"onClearClick($event)\">\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path\n                    fill-rule=\"evenodd\"\n                    transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n    @if (!readOnly()) {\n        <span class=\"nxe-daterange-button\" [class.nxe-daterange-open]=\"opened()\" aria-hidden=\"true\" (mousedown)=\"$event.preventDefault()\" (click)=\"onFieldClick()\">\n            <svg class=\"nxe-daterange-icon\" viewBox=\"0 0 18 18\" focusable=\"false\">\n                <rect x=\"3\" y=\"3\" width=\"12\" height=\"12\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n                <rect x=\"3\" y=\"3\" width=\"12\" height=\"3\" />\n                <rect x=\"4\" y=\"1\" width=\"2\" height=\"1.5\" />\n                <rect x=\"12\" y=\"1\" width=\"2\" height=\"1.5\" />\n                <rect x=\"5\" y=\"9\" width=\"8\" height=\"2\" />\n            </svg>\n        </span>\n    }\n</div>\n<ng-content />\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #popupTemplate>\n    <div\n        class=\"nxe-range-popup\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId\"\n        [class.nxe-range-narrow]=\"isNarrow()\"\n        [attr.aria-label]=\"nxeMessages.t('dateRange.dialog')\">\n        @if (presetItems().length) {\n            <div class=\"nxe-range-presets\" role=\"group\" [attr.aria-label]=\"nxeMessages.t('dateRange.presets')\">\n                @for (preset of presetItems(); track preset.index) {\n                    <button\n                        type=\"button\"\n                        class=\"nxe-range-preset\"\n                        [class.nxe-range-preset-active]=\"preset.active\"\n                        [attr.aria-pressed]=\"preset.active\"\n                        (click)=\"applyPreset(preset, $event)\">\n                        {{ preset.label }}\n                    </button>\n                }\n            </div>\n        }\n        <div class=\"nxe-range-main\">\n            <div class=\"nxe-range-inputs\">\n                <input\n                    class=\"nxe-range-text\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"nxeMessages.t('dateRange.start')\"\n                    [attr.placeholder]=\"startHint()\"\n                    [value]=\"startText()\"\n                    (change)=\"commitTyped('start', $event)\"\n                    (keydown)=\"onTypedKeydown('start', $event)\" />\n                <span class=\"nxe-range-dash\" aria-hidden=\"true\">&ndash;</span>\n                <input\n                    class=\"nxe-range-text\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"nxeMessages.t('dateRange.end')\"\n                    [attr.placeholder]=\"endHint()\"\n                    [value]=\"endText()\"\n                    (change)=\"commitTyped('end', $event)\"\n                    (keydown)=\"onTypedKeydown('end', $event)\" />\n            </div>\n            <div class=\"nxe-range-months\" (mouseleave)=\"onGridLeave()\">\n                @for (month of months(); track month.key; let first = $first; let last = $last) {\n                    <div class=\"nxe-range-month\">\n                        <div class=\"nxe-range-header\">\n                            @if (first) {\n                                <button\n                                    type=\"button\"\n                                    class=\"nxe-range-nav\"\n                                    [disabled]=\"!canGoBack()\"\n                                    [attr.aria-label]=\"nxeMessages.t('dateRange.previousMonth')\"\n                                    (click)=\"navigate(-1)\">\n                                    <svg viewBox=\"0 0 18 18\" focusable=\"false\" aria-hidden=\"true\">\n                                        <polygon points=\"4.875 9 11.875 2 13.125 3.25 7.375 9 13.125 14.75 11.875 16\" />\n                                    </svg>\n                                </button>\n                            }\n                            <div class=\"nxe-range-caption\" aria-live=\"polite\">{{ month.caption }}</div>\n                            @if (last) {\n                                <button\n                                    type=\"button\"\n                                    class=\"nxe-range-nav\"\n                                    [disabled]=\"!canGoForward()\"\n                                    [attr.aria-label]=\"nxeMessages.t('dateRange.nextMonth')\"\n                                    (click)=\"navigate(1)\">\n                                    <svg viewBox=\"0 0 18 18\" focusable=\"false\" aria-hidden=\"true\">\n                                        <polygon points=\"13.125 9 6.125 2 4.875 3.25 10.625 9 4.875 14.75 6.125 16\" />\n                                    </svg>\n                                </button>\n                            }\n                        </div>\n                        <table class=\"nxe-range-grid\" role=\"grid\" [attr.aria-label]=\"month.caption\">\n                            <thead>\n                                <tr>\n                                    @for (weekday of weekdays(); track $index) {\n                                        <th scope=\"col\" [attr.abbr]=\"weekday.long\">{{ weekday.short }}</th>\n                                    }\n                                </tr>\n                            </thead>\n                            <tbody>\n                                @for (week of month.weeks; track $index) {\n                                    <tr>\n                                        @for (cell of week; track $index) {\n                                            @if (cell) {\n                                                <td\n                                                    role=\"gridcell\"\n                                                    class=\"nxe-range-cell\"\n                                                    [class.nxe-range-in]=\"cell.inRange\"\n                                                    [class.nxe-range-start]=\"cell.start && cell.inRange\"\n                                                    [class.nxe-range-end]=\"cell.end && cell.inRange\"\n                                                    [class.nxe-range-preview]=\"cell.preview && cell.inRange\"\n                                                    [attr.aria-selected]=\"cell.inRange\">\n                                                    <button\n                                                        type=\"button\"\n                                                        class=\"nxe-range-day\"\n                                                        [class.nxe-range-today]=\"cell.today\"\n                                                        [class.nxe-range-edge]=\"(cell.start || cell.end) && cell.inRange\"\n                                                        [attr.data-date]=\"cell.key\"\n                                                        [attr.tabindex]=\"cell.tabbable ? 0 : -1\"\n                                                        [attr.aria-label]=\"cell.label\"\n                                                        [attr.aria-disabled]=\"cell.disabled ? true : null\"\n                                                        [attr.aria-current]=\"cell.today ? 'date' : null\"\n                                                        (click)=\"pick(cell, $event)\"\n                                                        (mouseenter)=\"onDayEnter(cell)\"\n                                                        (focus)=\"onDayFocus(cell)\"\n                                                        (keydown)=\"onDayKeydown($event, cell)\"\n                                                        (keyup.space)=\"$event.preventDefault()\">\n                                                        <span>{{ cell.day }}</span>\n                                                    </button>\n                                                </td>\n                                            } @else {\n                                                <td class=\"nxe-range-gap\" role=\"presentation\"></td>\n                                            }\n                                        }\n                                    </tr>\n                                }\n                            </tbody>\n                        </table>\n                    </div>\n                }\n            </div>\n            <div class=\"nxe-range-footer\">\n                <span class=\"nxe-range-status\" role=\"status\">{{ status() }}</span>\n                <button type=\"button\" class=\"nxe-range-clear\" (click)=\"onClearInPopup($event)\">{{ nxeMessages.t('common.clear') }}</button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: ["nxe-date-range-box .nxe-daterange-input{cursor:pointer;text-overflow:ellipsis}nxe-date-range-box .nxe-daterange-button{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-date-range-box .nxe-daterange-button svg{display:block;width:18px;height:18px;fill:currentColor}nxe-date-range-box:hover:not(.nxe-disabled) .nxe-daterange-button,nxe-date-range-box:active:not(.nxe-disabled) .nxe-daterange-button{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-date-range-box .nxe-daterange-button.nxe-daterange-open{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-date-range-box .nxe-daterange-icon{width:18px;height:18px;fill:currentColor}nxe-date-range-box .nxe-editor-container:has(>.nxe-daterange-button){--nxe-invalid-badge-inset: 38px}nxe-date-range-box .nxe-editor-container:has(>.nxe-clear-button-area):has(>.nxe-daterange-button){--nxe-invalid-badge-inset: 72px}nxe-date-range-box.nxe-disabled .nxe-daterange-input,nxe-date-range-box.nxe-readonly .nxe-daterange-input{cursor:default}.cdk-overlay-pane.nxe-daterange-pane{margin:0}.nxe-range-popup{--nxe-range-cell: 36px;box-sizing:border-box;display:flex;max-width:calc(100vw - var(--nxe-ui-space-4));max-height:calc(100vh - var(--nxe-ui-space-4) * 2);overflow:auto;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-popup-radius);box-shadow:var(--nxe-ui-popup-shadow);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);-webkit-user-select:none;user-select:none}.nxe-range-popup.nxe-range-narrow{--nxe-range-cell: 38px;flex-direction:column}.nxe-range-presets{display:flex;flex:none;flex-direction:column;gap:2px;box-sizing:border-box;min-width:140px;padding:var(--nxe-ui-space-2);border-inline-end:1px solid var(--nxe-ui-border);background:var(--nxe-ui-surface-alt)}.nxe-range-narrow .nxe-range-presets{flex-flow:row wrap;min-width:0;border-inline-end:0;border-bottom:1px solid var(--nxe-ui-border)}.nxe-range-preset{padding:var(--nxe-ui-space-1) var(--nxe-ui-space-2);border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:start;white-space:nowrap;cursor:pointer}.nxe-range-preset:hover{background:var(--nxe-ui-hover-bg)}.nxe-range-preset:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-range-preset.nxe-range-preset-active{background:var(--nxe-ui-accent);color:var(--nxe-ui-accent-contrast)}.nxe-range-main{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-2)}.nxe-range-inputs{display:flex;align-items:center;gap:var(--nxe-ui-space-2)}.nxe-range-text{flex:1 1 0;min-width:0;box-sizing:border-box;height:2.2em;padding:0 .5em;border:1px solid var(--nxe-ui-border);border-radius:4px;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;-webkit-user-select:text;user-select:text}.nxe-range-text:focus{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-range-text::placeholder{color:var(--nxe-ui-text-muted)}.nxe-range-months{display:flex;gap:var(--nxe-ui-space-3)}.nxe-range-month{flex:none}.nxe-range-header{display:flex;align-items:center;height:32px}.nxe-range-caption{flex:1;font-weight:600;text-align:center}.nxe-range-nav{display:inline-flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.nxe-range-nav svg{width:18px;height:18px;fill:currentColor}.nxe-range-nav:hover:not(:disabled){background:var(--nxe-ui-hover-bg)}.nxe-range-nav:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-range-nav:disabled{color:var(--nxe-ui-text-disabled);cursor:default}.nxe-range-month:first-child:not(:last-child) .nxe-range-header:after,.nxe-range-month:last-child:not(:first-child) .nxe-range-header:before{content:\"\";flex:none;width:32px}.nxe-range-grid{border-collapse:collapse;table-layout:fixed;width:calc(var(--nxe-range-cell) * 7)}.nxe-range-grid th{height:24px;padding:0;color:var(--nxe-ui-text-muted);font-size:.85em;font-weight:500;text-align:center}.nxe-range-grid td{height:calc(var(--nxe-range-cell) - 4px);padding:0;text-align:center}.nxe-range-cell.nxe-range-in{background:var(--nxe-ui-accent-tint)}.nxe-range-cell.nxe-range-in.nxe-range-start{border-start-start-radius:16px;border-end-start-radius:16px}.nxe-range-cell.nxe-range-in.nxe-range-end{border-start-end-radius:16px;border-end-end-radius:16px}.nxe-range-day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;padding:0;border:0;border-radius:16px;background:transparent;color:inherit;font:inherit;cursor:pointer}.nxe-range-day:hover:not([aria-disabled=true]){background:var(--nxe-ui-accent-tint)}.nxe-range-day:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-range-day[aria-disabled=true]{color:var(--nxe-ui-text-disabled);cursor:default}.nxe-range-day.nxe-range-today{box-shadow:inset 0 0 0 2px var(--nxe-ui-accent)}.nxe-range-day.nxe-range-edge,.nxe-range-day.nxe-range-edge:hover:not([aria-disabled=true]){background:var(--nxe-ui-accent);color:var(--nxe-ui-accent-contrast)}.nxe-range-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nxe-ui-space-2);padding-top:var(--nxe-ui-space-2);border-top:1px solid var(--nxe-ui-border)}.nxe-range-status{color:var(--nxe-ui-text-muted)}.nxe-range-clear{height:2.2em;padding:0 .75em;border:1px solid var(--nxe-ui-border);border-radius:4px;background:transparent;color:inherit;font:inherit;cursor:pointer}.nxe-range-clear:hover{background:var(--nxe-ui-hover-bg)}.nxe-range-clear:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDateRangeBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-date-range-box', imports: [CdkTrapFocus], host: {
+                        class: 'nxe-widget nxe-editor nxe-daterangebox',
+                        '[class.nxe-focused]': 'focused()',
+                        '[class.nxe-invalid]': 'invalidState()',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDateRangeBoxComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDateRangeBoxComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\">\n    <!-- A read-only combobox rather than a button: a native input takes its caption from\n         <label for>, and nxe-form-field writes aria-invalid / aria-describedby onto it. -->\n    <input\n        #field\n        class=\"nxe-editor-input nxe-daterange-input\"\n        type=\"text\"\n        role=\"combobox\"\n        aria-haspopup=\"dialog\"\n        autocomplete=\"off\"\n        readonly\n        [id]=\"controlId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-expanded]=\"opened()\"\n        [attr.aria-controls]=\"opened() ? popupId : null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        [attr.placeholder]=\"fieldPlaceholder()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onFieldClick()\"\n        (keydown)=\"onFieldKeydown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n    @if (clearButtonVisible()) {\n        <span class=\"nxe-clear-button-area\" aria-hidden=\"true\" (mousedown)=\"$event.preventDefault()\" (click)=\"onClearClick($event)\">\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path\n                    fill-rule=\"evenodd\"\n                    transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n    @if (!readOnly()) {\n        <span class=\"nxe-daterange-button\" [class.nxe-daterange-open]=\"opened()\" aria-hidden=\"true\" (mousedown)=\"$event.preventDefault()\" (click)=\"onFieldClick()\">\n            <svg class=\"nxe-daterange-icon\" viewBox=\"0 0 18 18\" focusable=\"false\">\n                <rect x=\"3\" y=\"3\" width=\"12\" height=\"12\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n                <rect x=\"3\" y=\"3\" width=\"12\" height=\"3\" />\n                <rect x=\"4\" y=\"1\" width=\"2\" height=\"1.5\" />\n                <rect x=\"12\" y=\"1\" width=\"2\" height=\"1.5\" />\n                <rect x=\"5\" y=\"9\" width=\"8\" height=\"2\" />\n            </svg>\n        </span>\n    }\n</div>\n<ng-content />\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #popupTemplate>\n    <div\n        class=\"nxe-range-popup\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId\"\n        [class.nxe-range-narrow]=\"isNarrow()\"\n        [attr.aria-label]=\"nxeMessages.t('dateRange.dialog')\">\n        @if (presetItems().length) {\n            <div class=\"nxe-range-presets\" role=\"group\" [attr.aria-label]=\"nxeMessages.t('dateRange.presets')\">\n                @for (preset of presetItems(); track preset.index) {\n                    <button\n                        type=\"button\"\n                        class=\"nxe-range-preset\"\n                        [class.nxe-range-preset-active]=\"preset.active\"\n                        [attr.aria-pressed]=\"preset.active\"\n                        (click)=\"applyPreset(preset, $event)\">\n                        {{ preset.label }}\n                    </button>\n                }\n            </div>\n        }\n        <div class=\"nxe-range-main\">\n            <div class=\"nxe-range-inputs\">\n                <input\n                    class=\"nxe-range-text\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"nxeMessages.t('dateRange.start')\"\n                    [attr.placeholder]=\"startHint()\"\n                    [value]=\"startText()\"\n                    (change)=\"commitTyped('start', $event)\"\n                    (keydown)=\"onTypedKeydown('start', $event)\" />\n                <span class=\"nxe-range-dash\" aria-hidden=\"true\">&ndash;</span>\n                <input\n                    class=\"nxe-range-text\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"nxeMessages.t('dateRange.end')\"\n                    [attr.placeholder]=\"endHint()\"\n                    [value]=\"endText()\"\n                    (change)=\"commitTyped('end', $event)\"\n                    (keydown)=\"onTypedKeydown('end', $event)\" />\n            </div>\n            <div class=\"nxe-range-months\" (mouseleave)=\"onGridLeave()\">\n                @for (month of months(); track month.key; let first = $first; let last = $last) {\n                    <div class=\"nxe-range-month\">\n                        <div class=\"nxe-range-header\">\n                            @if (first) {\n                                <button\n                                    type=\"button\"\n                                    class=\"nxe-range-nav\"\n                                    [disabled]=\"!canGoBack()\"\n                                    [attr.aria-label]=\"nxeMessages.t('dateRange.previousMonth')\"\n                                    (click)=\"navigate(-1)\">\n                                    <svg viewBox=\"0 0 18 18\" focusable=\"false\" aria-hidden=\"true\">\n                                        <polygon points=\"4.875 9 11.875 2 13.125 3.25 7.375 9 13.125 14.75 11.875 16\" />\n                                    </svg>\n                                </button>\n                            }\n                            <div class=\"nxe-range-caption\" aria-live=\"polite\">{{ month.caption }}</div>\n                            @if (last) {\n                                <button\n                                    type=\"button\"\n                                    class=\"nxe-range-nav\"\n                                    [disabled]=\"!canGoForward()\"\n                                    [attr.aria-label]=\"nxeMessages.t('dateRange.nextMonth')\"\n                                    (click)=\"navigate(1)\">\n                                    <svg viewBox=\"0 0 18 18\" focusable=\"false\" aria-hidden=\"true\">\n                                        <polygon points=\"13.125 9 6.125 2 4.875 3.25 10.625 9 4.875 14.75 6.125 16\" />\n                                    </svg>\n                                </button>\n                            }\n                        </div>\n                        <table class=\"nxe-range-grid\" role=\"grid\" [attr.aria-label]=\"month.caption\">\n                            <thead>\n                                <tr>\n                                    @for (weekday of weekdays(); track $index) {\n                                        <th scope=\"col\" [attr.abbr]=\"weekday.long\">{{ weekday.short }}</th>\n                                    }\n                                </tr>\n                            </thead>\n                            <tbody>\n                                @for (week of month.weeks; track $index) {\n                                    <tr>\n                                        @for (cell of week; track $index) {\n                                            @if (cell) {\n                                                <td\n                                                    role=\"gridcell\"\n                                                    class=\"nxe-range-cell\"\n                                                    [class.nxe-range-in]=\"cell.inRange\"\n                                                    [class.nxe-range-start]=\"cell.start && cell.inRange\"\n                                                    [class.nxe-range-end]=\"cell.end && cell.inRange\"\n                                                    [class.nxe-range-preview]=\"cell.preview && cell.inRange\"\n                                                    [attr.aria-selected]=\"cell.inRange\">\n                                                    <button\n                                                        type=\"button\"\n                                                        class=\"nxe-range-day\"\n                                                        [class.nxe-range-today]=\"cell.today\"\n                                                        [class.nxe-range-edge]=\"(cell.start || cell.end) && cell.inRange\"\n                                                        [attr.data-date]=\"cell.key\"\n                                                        [attr.tabindex]=\"cell.tabbable ? 0 : -1\"\n                                                        [attr.aria-label]=\"cell.label\"\n                                                        [attr.aria-disabled]=\"cell.disabled ? true : null\"\n                                                        [attr.aria-current]=\"cell.today ? 'date' : null\"\n                                                        (click)=\"pick(cell, $event)\"\n                                                        (mouseenter)=\"onDayEnter(cell)\"\n                                                        (focus)=\"onDayFocus(cell)\"\n                                                        (keydown)=\"onDayKeydown($event, cell)\"\n                                                        (keyup.space)=\"$event.preventDefault()\">\n                                                        <span>{{ cell.day }}</span>\n                                                    </button>\n                                                </td>\n                                            } @else {\n                                                <td class=\"nxe-range-gap\" role=\"presentation\"></td>\n                                            }\n                                        }\n                                    </tr>\n                                }\n                            </tbody>\n                        </table>\n                    </div>\n                }\n            </div>\n            <div class=\"nxe-range-footer\">\n                <span class=\"nxe-range-status\" role=\"status\">{{ status() }}</span>\n                <button type=\"button\" class=\"nxe-range-clear\" (click)=\"onClearInPopup($event)\">{{ nxeMessages.t('common.clear') }}</button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: ["nxe-date-range-box .nxe-daterange-input{cursor:pointer;text-overflow:ellipsis}nxe-date-range-box .nxe-daterange-button{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-date-range-box .nxe-daterange-button svg{display:block;width:18px;height:18px;fill:currentColor}nxe-date-range-box:hover:not(.nxe-disabled) .nxe-daterange-button,nxe-date-range-box:active:not(.nxe-disabled) .nxe-daterange-button{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-date-range-box .nxe-daterange-button.nxe-daterange-open{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-date-range-box .nxe-daterange-icon{width:18px;height:18px;fill:currentColor}nxe-date-range-box .nxe-editor-container:has(>.nxe-daterange-button){--nxe-invalid-badge-inset: 38px}nxe-date-range-box .nxe-editor-container:has(>.nxe-clear-button-area):has(>.nxe-daterange-button){--nxe-invalid-badge-inset: 72px}nxe-date-range-box.nxe-disabled .nxe-daterange-input,nxe-date-range-box.nxe-readonly .nxe-daterange-input{cursor:default}.cdk-overlay-pane.nxe-daterange-pane{margin:0}.nxe-range-popup{--nxe-range-cell: 36px;box-sizing:border-box;display:flex;max-width:calc(100vw - var(--nxe-ui-space-4));max-height:calc(100vh - var(--nxe-ui-space-4) * 2);overflow:auto;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-popup-radius);box-shadow:var(--nxe-ui-popup-shadow);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);-webkit-user-select:none;user-select:none}.nxe-range-popup.nxe-range-narrow{--nxe-range-cell: 38px;flex-direction:column}.nxe-range-presets{display:flex;flex:none;flex-direction:column;gap:2px;box-sizing:border-box;min-width:140px;padding:var(--nxe-ui-space-2);border-inline-end:1px solid var(--nxe-ui-border);background:var(--nxe-ui-surface-alt)}.nxe-range-narrow .nxe-range-presets{flex-flow:row wrap;min-width:0;border-inline-end:0;border-bottom:1px solid var(--nxe-ui-border)}.nxe-range-preset{padding:var(--nxe-ui-space-1) var(--nxe-ui-space-2);border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:start;white-space:nowrap;cursor:pointer}.nxe-range-preset:hover{background:var(--nxe-ui-hover-bg)}.nxe-range-preset:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-range-preset.nxe-range-preset-active{background:var(--nxe-ui-accent);color:var(--nxe-ui-accent-contrast)}.nxe-range-main{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-2)}.nxe-range-inputs{display:flex;align-items:center;gap:var(--nxe-ui-space-2)}.nxe-range-text{flex:1 1 0;min-width:0;box-sizing:border-box;height:2.2em;padding:0 .5em;border:1px solid var(--nxe-ui-border);border-radius:4px;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;-webkit-user-select:text;user-select:text}.nxe-range-text:focus{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-range-text::placeholder{color:var(--nxe-ui-text-muted)}.nxe-range-months{display:flex;gap:var(--nxe-ui-space-3)}.nxe-range-month{flex:none}.nxe-range-header{display:flex;align-items:center;height:32px}.nxe-range-caption{flex:1;font-weight:600;text-align:center}.nxe-range-nav{display:inline-flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.nxe-range-nav svg{width:18px;height:18px;fill:currentColor}.nxe-range-nav:hover:not(:disabled){background:var(--nxe-ui-hover-bg)}.nxe-range-nav:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-range-nav:disabled{color:var(--nxe-ui-text-disabled);cursor:default}.nxe-range-month:first-child:not(:last-child) .nxe-range-header:after,.nxe-range-month:last-child:not(:first-child) .nxe-range-header:before{content:\"\";flex:none;width:32px}.nxe-range-grid{border-collapse:collapse;table-layout:fixed;width:calc(var(--nxe-range-cell) * 7)}.nxe-range-grid th{height:24px;padding:0;color:var(--nxe-ui-text-muted);font-size:.85em;font-weight:500;text-align:center}.nxe-range-grid td{height:calc(var(--nxe-range-cell) - 4px);padding:0;text-align:center}.nxe-range-cell.nxe-range-in{background:var(--nxe-ui-accent-tint)}.nxe-range-cell.nxe-range-in.nxe-range-start{border-start-start-radius:16px;border-end-start-radius:16px}.nxe-range-cell.nxe-range-in.nxe-range-end{border-start-end-radius:16px;border-end-end-radius:16px}.nxe-range-day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;padding:0;border:0;border-radius:16px;background:transparent;color:inherit;font:inherit;cursor:pointer}.nxe-range-day:hover:not([aria-disabled=true]){background:var(--nxe-ui-accent-tint)}.nxe-range-day:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-range-day[aria-disabled=true]{color:var(--nxe-ui-text-disabled);cursor:default}.nxe-range-day.nxe-range-today{box-shadow:inset 0 0 0 2px var(--nxe-ui-accent)}.nxe-range-day.nxe-range-edge,.nxe-range-day.nxe-range-edge:hover:not([aria-disabled=true]){background:var(--nxe-ui-accent);color:var(--nxe-ui-accent-contrast)}.nxe-range-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--nxe-ui-space-2);padding-top:var(--nxe-ui-space-2);border-top:1px solid var(--nxe-ui-border)}.nxe-range-status{color:var(--nxe-ui-text-muted)}.nxe-range-clear{height:2.2em;padding:0 .75em;border:1px solid var(--nxe-ui-border);border-radius:4px;background:transparent;color:inherit;font:inherit;cursor:pointer}.nxe-range-clear:hover{background:var(--nxe-ui-hover-bg)}.nxe-range-clear:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}\n"] }]
+        }], propDecorators: { popupTemplate: [{ type: i0.ViewChild, args: ['popupTemplate', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }] } });
 
 /**
  * `nxe-scroll-view` — drop-in replacement for DevExtreme `dx-scroll-view`.
  *
- * In this app `dx-scroll-view` is used purely as a dumb scroll container: no `@ViewChild`, no
+ * In this app `nxe-scroll-view` is used purely as a dumb scroll container: no `@ViewChild`, no
  * `.instance` methods, no events (see survey). Every live tag is the same literal triple
  * `[scrollByContent]="true" [scrollByThumb]="true" [showScrollbar]="'onScroll'"`. So this is a
  * styled `overflow:auto` wrapper that projects its content inside a `.nxe-scrollview-content`
@@ -1096,18 +2572,792 @@ class NxeScrollViewComponent {
     showScrollbar = input('onScroll', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showScrollbar" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeScrollViewComponent, isStandalone: true, selector: "nxe-scroll-view", inputs: { scrollByContent: { classPropertyName: "scrollByContent", publicName: "scrollByContent", isSignal: true, isRequired: false, transformFunction: null }, scrollByThumb: { classPropertyName: "scrollByThumb", publicName: "scrollByThumb", isSignal: true, isRequired: false, transformFunction: null }, showScrollbar: { classPropertyName: "showScrollbar", publicName: "showScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-widget nxe-scroll-view" }, ngImport: i0, template: '<div class="nxe-scrollview-content"><ng-content /></div>', isInline: true, styles: ["nxe-scroll-view{display:block;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(191,191,191,.7) transparent}nxe-scroll-view::-webkit-scrollbar{width:8px;height:8px}nxe-scroll-view::-webkit-scrollbar-track{background:transparent}nxe-scroll-view::-webkit-scrollbar-thumb{background-color:#bfbfbfb3;border-radius:4px}nxe-scroll-view:hover::-webkit-scrollbar-thumb{background-color:#bfbfbf}nxe-scroll-view>.nxe-scrollview-content{display:flex;flex-direction:column;min-height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeScrollViewComponent, isStandalone: true, selector: "nxe-scroll-view", inputs: { scrollByContent: { classPropertyName: "scrollByContent", publicName: "scrollByContent", isSignal: true, isRequired: false, transformFunction: null }, scrollByThumb: { classPropertyName: "scrollByThumb", publicName: "scrollByThumb", isSignal: true, isRequired: false, transformFunction: null }, showScrollbar: { classPropertyName: "showScrollbar", publicName: "showScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-widget nxe-scroll-view" }, ngImport: i0, template: '<div class="nxe-scrollview-content"><ng-content /></div>', isInline: true, styles: ["nxe-scroll-view{display:block;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--nxe-ui-scroll-thumb, rgba(191, 191, 191, .7)) transparent}@supports not (scrollbar-width: thin){nxe-scroll-view::-webkit-scrollbar{width:8px;height:8px}nxe-scroll-view::-webkit-scrollbar-track{background:transparent}nxe-scroll-view::-webkit-scrollbar-thumb{background-color:var(--nxe-ui-scroll-thumb, rgba(191, 191, 191, .7));border-radius:4px}nxe-scroll-view:hover::-webkit-scrollbar-thumb{background-color:var(--nxe-ui-scroll-thumb-hover, rgb(191, 191, 191))}}nxe-scroll-view>.nxe-scrollview-content{display:flex;flex-direction:column;min-height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeScrollViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-scroll-view', standalone: true, template: '<div class="nxe-scrollview-content"><ng-content /></div>', host: { class: 'nxe-widget nxe-scroll-view' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-scroll-view{display:block;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(191,191,191,.7) transparent}nxe-scroll-view::-webkit-scrollbar{width:8px;height:8px}nxe-scroll-view::-webkit-scrollbar-track{background:transparent}nxe-scroll-view::-webkit-scrollbar-thumb{background-color:#bfbfbfb3;border-radius:4px}nxe-scroll-view:hover::-webkit-scrollbar-thumb{background-color:#bfbfbf}nxe-scroll-view>.nxe-scrollview-content{display:flex;flex-direction:column;min-height:100%}\n"] }]
+            args: [{ selector: 'nxe-scroll-view', standalone: true, template: '<div class="nxe-scrollview-content"><ng-content /></div>', host: { class: 'nxe-widget nxe-scroll-view' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-scroll-view{display:block;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--nxe-ui-scroll-thumb, rgba(191, 191, 191, .7)) transparent}@supports not (scrollbar-width: thin){nxe-scroll-view::-webkit-scrollbar{width:8px;height:8px}nxe-scroll-view::-webkit-scrollbar-track{background:transparent}nxe-scroll-view::-webkit-scrollbar-thumb{background-color:var(--nxe-ui-scroll-thumb, rgba(191, 191, 191, .7));border-radius:4px}nxe-scroll-view:hover::-webkit-scrollbar-thumb{background-color:var(--nxe-ui-scroll-thumb-hover, rgb(191, 191, 191))}}nxe-scroll-view>.nxe-scrollview-content{display:flex;flex-direction:column;min-height:100%}\n"] }]
         }], propDecorators: { scrollByContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollByContent", required: false }] }], scrollByThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollByThumb", required: false }] }], showScrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollbar", required: false }] }] } });
 
+/** Key used when a failing validator has no entry and carries no message of its own. */
+const NXE_FALLBACK_ERROR_KEY = 'invalid';
+/** English defaults for Angular's built-in validators. */
+const NXE_DEFAULT_ERROR_MESSAGES = {
+    required: 'This field is required.',
+    email: 'Enter a valid email address.',
+    minlength: (e) => `Enter at least ${e?.requiredLength} characters.`,
+    maxlength: (e) => `Enter no more than ${e?.requiredLength} characters.`,
+    min: (e) => `Must be at least ${e?.min}.`,
+    max: (e) => `Must be at most ${e?.max}.`,
+    pattern: 'Enter a value in the expected format.',
+    [NXE_FALLBACK_ERROR_KEY]: 'This value is not valid.',
+};
+/**
+ * Validator-key to message map read by `nxe-form-field`.
+ *
+ * Provide a plain object to replace it; keys you leave out fall back to
+ * {@link NXE_DEFAULT_ERROR_MESSAGES}, so a partial map is fine. {@link provideNxeErrorMessages} is
+ * the short way to write the provider. A custom validator is covered by adding its key:
+ * `{ uen: 'Enter a valid UEN.' }`.
+ */
+const NXE_ERROR_MESSAGES = new InjectionToken('NXE_ERROR_MESSAGES', {
+    providedIn: 'root',
+    factory: () => NXE_DEFAULT_ERROR_MESSAGES,
+});
+/**
+ * Registers messages for `nxe-form-field`, layered over the English defaults:
+ *
+ * ```ts
+ * provideNxeErrorMessages({
+ *     required: 'Wajib diisi.',
+ *     minlength: (e) => `Minimal ${e.requiredLength} karakter.`,
+ * })
+ * ```
+ */
+function provideNxeErrorMessages(messages) {
+    return makeEnvironmentProviders([
+        { provide: NXE_ERROR_MESSAGES, useValue: { ...NXE_DEFAULT_ERROR_MESSAGES, ...messages } },
+    ]);
+}
+
+let nextFieldId = 0;
+function toList(value) {
+    if (value == null) {
+        return [];
+    }
+    return (typeof value === 'string' ? [value] : [...value]).filter((m) => !!m);
+}
+/** Signal Forms error kinds to the validator keys the message tables use. */
+const SIGNAL_KIND_TO_KEY = {
+    minLength: 'minlength',
+    maxLength: 'maxlength',
+};
+/**
+ * `nxe-form-field` wraps one `nxe-*` editor that is bound to a form control (`formControlName`,
+ * `[formControl]` or `ngModel`) and gives it the chrome a form needs:
+ *
+ *  - a `label`, associated with the editor's inner control (`for` = the editor's `inputId`);
+ *  - a required marker, from `Validators.required` on the control or the `required` input;
+ *  - a `hint`, replaced by the error while one shows;
+ *  - the message for the FIRST failing validator once the control is touched or its form submitted
+ *    (`submitted` forces it), looked up in {@link NXE_ERROR_MESSAGES};
+ *  - `serverErrors` / `serverError` from an API response, shown regardless of touched.
+ *
+ * It sets `aria-invalid`, `aria-required` and `aria-describedby` on the editor's focusable element
+ * and the editor host's `nxe-invalid` class, so the border, badge and colour come from the same
+ * `--nxe-ui-invalid*` tokens as an editor invalidated by `nxe-validator`.
+ *
+ * Reactivity is the control's own `events` stream (value, status, touched, submit, reset) feeding
+ * signals; the DOM sync runs through `afterRenderEffect`, which names the one computed it reads.
+ */
+class NxeFormFieldComponent {
+    destroyRef = inject(DestroyRef);
+    tokenMessages = inject(NXE_ERROR_MESSAGES);
+    messageService = inject(NxeMessageService);
+    /** The enclosing form, when there is one: a template-driven control joins it a tick late. */
+    container = inject(ControlContainer, { optional: true });
+    /** Caption above the editor. */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Help text under the editor; hidden while an error is showing. */
+    hint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /**
+     * Force the required marker on or off. Unset, it follows `Validators.required` (and
+     * `requiredTrue`) on the control. Needed for a rule the control does not declare as a validator.
+     */
+    required = input(undefined, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: nxeOptionalBoolean });
+    /**
+     * API field errors, shown whether or not the control was touched. A string or a list of them;
+     * the app clears them (set `null`) when the user edits the field or resubmits.
+     */
+    serverErrors = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []));
+    /** Singular spelling of {@link serverErrors}; both may be set, their messages are joined. */
+    serverError = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "serverError" }] : /* istanbul ignore next */ []));
+    /**
+     * Show client-side errors now (`true`) or never (`false`). Unset, they show once the control is
+     * touched or the surrounding form was submitted.
+     */
+    submitted = input(undefined, { ...(ngDevMode ? { debugName: "submitted" } : /* istanbul ignore next */ {}), transform: nxeOptionalBoolean });
+    /** Messages for this field only, by validator key; override {@link NXE_ERROR_MESSAGES}. */
+    errorMessages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    ngControl = contentChild(NgControl, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+    ngControlHost = contentChild(NgControl, { ...(ngDevMode ? { debugName: "ngControlHost" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /**
+     * Set when the projected editor carries Angular's Signal Forms `[formField]`. That directive
+     * provides a stand-in `NgControl` with no `events` stream, so the field then reads the field
+     * state's signals instead of subscribing to a control.
+     */
+    formField = contentChild(FormField, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formField" }] : /* istanbul ignore next */ []));
+    formFieldHost = contentChild(FormField, { ...(ngDevMode ? { debugName: "formFieldHost" } : /* istanbul ignore next */ {}), read: ElementRef });
+    editorHost = computed(() => this.formFieldHost() ?? this.ngControlHost(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorHost" }] : /* istanbul ignore next */ []));
+    fieldState = computed(() => this.formField()?.state() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldState" }] : /* istanbul ignore next */ []));
+    /** Only read in dev mode, to catch a second editor the field would silently not bind. */
+    allControls = contentChildren(NgControl, { ...(ngDevMode ? { debugName: "allControls" } : /* istanbul ignore next */ {}), descendants: true });
+    // Mirrors of the control's state. The control is not a signal, so each event on it copies the
+    // parts the template reads into these.
+    touched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    controlErrors = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlErrors" }] : /* istanbul ignore next */ []));
+    validatorRequired = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validatorRequired" }] : /* istanbul ignore next */ []));
+    formSubmitted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formSubmitted" }] : /* istanbul ignore next */ []));
+    editor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    uid = `nxe-form-field-${++nextFieldId}`;
+    labelId = `${this.uid}-label`;
+    hintId = `${this.uid}-hint`;
+    errorId = `${this.uid}-error`;
+    /** The id the label points at: the editor's inner control. Null for a non-nxe editor. */
+    controlId = computed(() => this.editor()?.controlId() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.required() ?? (this.fieldState()?.required() ?? this.validatorRequired()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    reveal = computed(() => {
+        const state = this.fieldState();
+        // A Signal Forms submit marks every field touched, so touched covers a submitted form.
+        return this.submitted() ?? (state ? state.touched() : this.touched() || this.formSubmitted());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reveal" }] : /* istanbul ignore next */ []));
+    clientMessage = computed(() => {
+        if (!this.reveal()) {
+            return null;
+        }
+        const state = this.fieldState();
+        if (state) {
+            const first = state.errors()[0];
+            return first ? this.resolveSignalError(first) : null;
+        }
+        const errors = this.controlErrors();
+        const key = errors ? Object.keys(errors)[0] : undefined;
+        return key === undefined ? null : this.resolve(key, errors[key]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientMessage" }] : /* istanbul ignore next */ []));
+    /** Everything shown under the editor as an error: the client message, then the server's. */
+    messages = computed(() => {
+        const client = this.clientMessage();
+        return [
+            ...(client ? [client] : []),
+            ...toList(this.serverErrors()),
+            ...toList(this.serverError()),
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.messages().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    showHint = computed(() => !!this.hint() && !this.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    domState = computed(() => ({
+        host: this.editorHost()?.nativeElement ?? null,
+        controlId: this.controlId(),
+        invalid: this.invalid(),
+        required: this.isRequired(),
+        describedBy: [this.showHint() ? this.hintId : null, this.invalid() ? this.errorId : null]
+            .filter((id) => !!id)
+            .join(' ') || null,
+        labelledBy: this.label() ? this.labelId : null,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "domState" }] : /* istanbul ignore next */ []));
+    /** Attributes this field put on the editor's element, so it only ever removes its own. */
+    applied = null;
+    invalidClassHost = null;
+    constructor() {
+        // Reads exactly `domState()`; the DOM writes below read no signal.
+        afterRenderEffect(() => this.syncDom(this.domState()));
+    }
+    ngAfterContentInit() {
+        if (typeof ngDevMode !== 'undefined' && ngDevMode && this.allControls().length > 1) {
+            console.warn(`nxe-form-field binds only its first form control, but ${this.allControls().length} are projected. ` +
+                'Wrap each editor in its own nxe-form-field.');
+        }
+        const formField = this.formField();
+        if (formField) {
+            // Signal Forms: the state is read through signals (fieldState); there is nothing to subscribe to.
+            const accessors = formField.injector.get(NG_VALUE_ACCESSOR, null);
+            this.editor.set((accessors ?? []).find((a) => a instanceof NxeFormControlBase) ?? null);
+            return;
+        }
+        const ngControl = this.ngControl();
+        const control = ngControl?.control ?? null;
+        const accessor = ngControl?.valueAccessor;
+        if (accessor instanceof NxeFormControlBase) {
+            this.editor.set(accessor);
+        }
+        if (!control) {
+            return;
+        }
+        this.syncFromControl(control);
+        control.events
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.syncFromControl(control));
+        // Submit and reset are emitted on the ROOT of the form, not on each control.
+        (this.container?.control ?? control).root.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            if (event instanceof FormSubmittedEvent) {
+                this.formSubmitted.set(true);
+            }
+            else if (event instanceof FormResetEvent) {
+                this.formSubmitted.set(false);
+            }
+            this.syncFromControl(control);
+        });
+    }
+    syncFromControl(control) {
+        this.touched.set(control.touched);
+        this.controlErrors.set(control.errors);
+        this.validatorRequired.set(control.hasValidator(Validators.required) || control.hasValidator(Validators.requiredTrue));
+    }
+    /**
+     * Message for one failing validator: this field's `errorMessages`, then an entry the app put in
+     * the {@link NXE_ERROR_MESSAGES} token, then the active `NxeMessageService` bundle (English
+     * unless the app switched language), then a string the validator itself returned
+     * (`{ uen: 'Not a valid UEN' }` or `{ uen: { message } }`), then the generic fallback.
+     *
+     * A token entry that IS the built-in default (the same reference, which is what
+     * `provideNxeErrorMessages` leaves for the keys it was not given) counts as unset, so it does
+     * not pin English over the bundle. Called from the `clientMessage` computed, so a language
+     * switch re-renders the error.
+     */
+    resolve(key, error) {
+        const entry = this.errorMessages()?.[key] ?? this.explicitToken(key) ?? this.bundled(key, error);
+        if (entry !== undefined) {
+            return typeof entry === 'function' ? entry(error) : entry;
+        }
+        if (typeof error === 'string' && error) {
+            return error;
+        }
+        const own = error?.message;
+        if (typeof own === 'string' && own) {
+            return own;
+        }
+        const fallback = this.errorMessages()?.[NXE_FALLBACK_ERROR_KEY] ??
+            this.explicitToken(NXE_FALLBACK_ERROR_KEY) ??
+            this.messageService.t('validation.field.invalid');
+        return typeof fallback === 'function' ? fallback(error) : fallback;
+    }
+    /**
+     * Message for a Signal Forms error `{ kind, message? }`. The kind is mapped to the validator keys
+     * above (`minLength` to `minlength`, `maxLength` to `maxlength`; `required`, `min`, `max`, `pattern`
+     * and `email` as they are). Lookup order: this field's `errorMessages`, an app token entry, the
+     * error's own `message`, the library bundle, then the fallback (`invalid`). So a rule written
+     * with a message (`required(p.name, { message: '...' })`) shows it, and a custom kind does too.
+     */
+    resolveSignalError(error) {
+        const key = SIGNAL_KIND_TO_KEY[error.kind] ?? error.kind;
+        const e = error;
+        // A validator written for Reactive Forms (nxe-file-input's, or an app's) reaches the field as
+        // `{ kind, context }`, where `context` is what it returned under its key.
+        const context = e['context'];
+        const fromValidator = typeof context === 'object' && context !== null ? context : {};
+        // Shape the payload like the Reactive Forms error of the same key, which the tables read.
+        const payload = { ...fromValidator, ...e, requiredLength: e['minLength'] ?? e['maxLength'] ?? fromValidator['requiredLength'] };
+        const ownMessage = error.message || (typeof context === 'string' ? context : undefined) || (typeof fromValidator['message'] === 'string' ? fromValidator['message'] : undefined);
+        const entry = this.errorMessages()?.[key] ?? this.explicitToken(key);
+        if (entry !== undefined) {
+            return typeof entry === 'function' ? entry(payload) : entry;
+        }
+        if (ownMessage) {
+            return ownMessage;
+        }
+        const bundled = this.bundled(key, payload);
+        if (bundled !== undefined) {
+            return bundled;
+        }
+        const fallback = this.errorMessages()?.[NXE_FALLBACK_ERROR_KEY] ??
+            this.explicitToken(NXE_FALLBACK_ERROR_KEY) ??
+            this.messageService.t('validation.field.invalid');
+        return typeof fallback === 'function' ? fallback(payload) : fallback;
+    }
+    explicitToken(key) {
+        const entry = this.tokenMessages[key];
+        return entry === NXE_DEFAULT_ERROR_MESSAGES[key] ? undefined : entry;
+    }
+    /** The library bundle's wording for Angular's built-in validators. */
+    bundled(key, error) {
+        const e = error;
+        switch (key) {
+            case 'required':
+            case 'email':
+            case 'pattern':
+                return this.messageService.t(`validation.field.${key}`);
+            case 'minlength':
+                return this.messageService.t('validation.field.minlength', e?.requiredLength);
+            case 'maxlength':
+                return this.messageService.t('validation.field.maxlength', e?.requiredLength);
+            case 'min':
+                return this.messageService.t('validation.field.min', e?.min);
+            case 'max':
+                return this.messageService.t('validation.field.max', e?.max);
+            // nxe-file-input's errors: the file type allow-list, the size and count limits, and uploads.
+            case 'fileType':
+                return this.messageService.t('validation.field.fileType', error?.accept);
+            case 'fileSize':
+                return this.messageService.t('validation.field.fileSize', nxeFormatFileSize(Number(error?.maxSize), this.messageService));
+            case 'maxFiles':
+                return this.messageService.t('validation.field.maxFiles', error?.maxFiles);
+            case 'uploading':
+            case 'uploadFailed':
+                return this.messageService.t(`validation.field.${key}`);
+            default:
+                return undefined;
+        }
+    }
+    /** The element a screen reader should treat as the field: the inner control, not the host. */
+    focusable(host, controlId) {
+        if (controlId) {
+            const byId = host.querySelector(`#${CSS.escape(controlId)}`);
+            if (byId) {
+                return byId;
+            }
+        }
+        if (host.matches('[tabindex], input, textarea, select')) {
+            return host;
+        }
+        return (host.querySelector('input, textarea, select, [tabindex]:not([tabindex="-1"])') ??
+            host);
+    }
+    setAttr(name, value) {
+        const { el, attrs } = this.applied;
+        if (value === null) {
+            if (attrs.delete(name)) {
+                el.removeAttribute(name);
+            }
+        }
+        else {
+            el.setAttribute(name, value);
+            attrs.add(name);
+        }
+    }
+    syncDom(state) {
+        if (!state.host) {
+            return;
+        }
+        const el = this.focusable(state.host, state.controlId);
+        if (this.applied?.el !== el) {
+            this.applied = { el, attrs: new Set() };
+        }
+        this.setAttr('aria-invalid', state.invalid ? 'true' : null);
+        this.setAttr('aria-required', state.required ? 'true' : null);
+        this.setAttr('aria-describedby', state.describedBy);
+        // A native input is labelled by the `for` association; the host of an editor without one
+        // (check-box, drop-down) needs the label named explicitly, unless the app already did.
+        const own = this.applied.attrs.has('aria-labelledby');
+        const needsLabelledBy = !!state.labelledBy &&
+            !/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) &&
+            (own || (!el.hasAttribute('aria-label') && !el.hasAttribute('aria-labelledby')));
+        this.setAttr('aria-labelledby', needsLabelledBy ? state.labelledBy : null);
+        // The editor's own invalid look (border, badge) is keyed off `.nxe-invalid` on its host.
+        if (state.invalid) {
+            state.host.classList.add('nxe-invalid');
+            this.invalidClassHost = state.host;
+        }
+        else if (this.invalidClassHost) {
+            this.invalidClassHost.classList.remove('nxe-invalid');
+            this.invalidClassHost = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeFormFieldComponent, isStandalone: true, selector: "nxe-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, serverErrors: { classPropertyName: "serverErrors", publicName: "serverErrors", isSignal: true, isRequired: false, transformFunction: null }, serverError: { classPropertyName: "serverError", publicName: "serverError", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-form-field-invalid": "invalid()" }, classAttribute: "nxe-form-field" }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "ngControlHost", first: true, predicate: NgControl, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "formField", first: true, predicate: FormField, descendants: true, isSignal: true }, { propertyName: "formFieldHost", first: true, predicate: FormField, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "allControls", predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n    <label class=\"nxe-form-field-label\" [id]=\"labelId\" [attr.for]=\"controlId()\">\n        {{ label() }}\n        @if (isRequired()) {\n            <span class=\"nxe-form-field-required\" aria-hidden=\"true\">*</span>\n        }\n    </label>\n}\n<div class=\"nxe-form-field-control\">\n    <ng-content />\n</div>\n@if (showHint()) {\n    <div class=\"nxe-form-field-hint\" [id]=\"hintId\">{{ hint() }}</div>\n}\n<div class=\"nxe-form-field-messages\" aria-live=\"polite\">\n    @if (invalid()) {\n        <div class=\"nxe-form-field-error\" [id]=\"errorId\">\n            @for (message of messages(); track $index) {\n                <div>{{ message }}</div>\n            }\n        </div>\n    }\n</div>\n", styles: ["nxe-form-field{display:block;min-width:0}nxe-form-field .nxe-form-field-label{display:block;margin-bottom:var(--nxe-ui-space-1, 4px);color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-font-size-sm, 13px);font-weight:var(--nxe-ui-font-weight-medium, 500);line-height:var(--nxe-ui-line-height-sm, 18px)}nxe-form-field .nxe-form-field-required{margin-inline-start:var(--nxe-ui-space-1, 4px);color:var(--nxe-ui-invalid, #d9534f)}nxe-form-field .nxe-form-field-hint,nxe-form-field .nxe-form-field-error{margin-top:var(--nxe-ui-space-1, 4px);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:var(--nxe-ui-line-height-xs, 16px)}nxe-form-field .nxe-form-field-hint{color:color-mix(in srgb,var(--nxe-ui-text, #333) 70%,var(--nxe-ui-surface, #fff))}nxe-form-field .nxe-form-field-error{color:var(--nxe-ui-invalid, #d9534f)}nxe-form-field .nxe-form-field-control .nxe-invalid-message{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-form-field', host: {
+                        class: 'nxe-form-field',
+                        '[class.nxe-form-field-invalid]': 'invalid()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (label()) {\n    <label class=\"nxe-form-field-label\" [id]=\"labelId\" [attr.for]=\"controlId()\">\n        {{ label() }}\n        @if (isRequired()) {\n            <span class=\"nxe-form-field-required\" aria-hidden=\"true\">*</span>\n        }\n    </label>\n}\n<div class=\"nxe-form-field-control\">\n    <ng-content />\n</div>\n@if (showHint()) {\n    <div class=\"nxe-form-field-hint\" [id]=\"hintId\">{{ hint() }}</div>\n}\n<div class=\"nxe-form-field-messages\" aria-live=\"polite\">\n    @if (invalid()) {\n        <div class=\"nxe-form-field-error\" [id]=\"errorId\">\n            @for (message of messages(); track $index) {\n                <div>{{ message }}</div>\n            }\n        </div>\n    }\n</div>\n", styles: ["nxe-form-field{display:block;min-width:0}nxe-form-field .nxe-form-field-label{display:block;margin-bottom:var(--nxe-ui-space-1, 4px);color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-font-size-sm, 13px);font-weight:var(--nxe-ui-font-weight-medium, 500);line-height:var(--nxe-ui-line-height-sm, 18px)}nxe-form-field .nxe-form-field-required{margin-inline-start:var(--nxe-ui-space-1, 4px);color:var(--nxe-ui-invalid, #d9534f)}nxe-form-field .nxe-form-field-hint,nxe-form-field .nxe-form-field-error{margin-top:var(--nxe-ui-space-1, 4px);font-size:var(--nxe-ui-font-size-xs, 12px);line-height:var(--nxe-ui-line-height-xs, 16px)}nxe-form-field .nxe-form-field-hint{color:color-mix(in srgb,var(--nxe-ui-text, #333) 70%,var(--nxe-ui-surface, #fff))}nxe-form-field .nxe-form-field-error{color:var(--nxe-ui-invalid, #d9534f)}nxe-form-field .nxe-form-field-control .nxe-invalid-message{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], serverErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverErrors", required: false }] }], serverError: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverError", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }], ngControlHost: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{ read: ElementRef }, isSignal: true }] }], formField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormField), { isSignal: true }] }], formFieldHost: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormField), { ...{ read: ElementRef }, isSignal: true }] }], allControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgControl), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Marks the `<ng-template>` that renders one radio's content in `nxe-radio-group`, in place of the
+ * `displayExpr` text:
+ *
+ * ```html
+ * <nxe-radio-group [items]="plans" valueExpr="id">
+ *     <ng-template nxeRadioItem let-plan let-selected="selected">
+ *         <strong>{{ plan.name }}</strong> <small>{{ plan.price }}</small>
+ *     </ng-template>
+ * </nxe-radio-group>
+ * ```
+ *
+ * The radio's accessible name is the template's text, so keep it to text and inline markup.
+ */
+class NxeRadioItemDirective {
+    /** The template to render for each item. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeRadioItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeRadioItemDirective, isStandalone: true, selector: "ng-template[nxeRadioItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeRadioItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[nxeRadioItem]',
+                }]
+        }] });
+
+/**
+ * `nxe-radio-group`: single choice among a few options, as the WAI-ARIA radio group pattern.
+ *
+ * A signal-CVA editor (extends {@link NxeFormControlBase}) working with `[(value)]`, `[(ngModel)]`
+ * and Reactive Forms. The options are `items`; `displayExpr` says what each shows (default: the
+ * item itself, for a list of strings), `valueExpr` what it puts in the control (default: the item
+ * itself) and `disabledExpr` (default `'disabled'`) which are not selectable. An
+ * `<ng-template nxeRadioItem>` replaces the text with your own content.
+ *
+ * Keyboard: the group is one tab stop, on the selected radio (or the first enabled one). Arrow keys
+ * move to the next or previous enabled radio, wrap around, and select it; Space selects the focused
+ * one. Left and Right are swapped in right-to-left text. A read-only group moves focus but never
+ * changes the value.
+ *
+ * The inner `role="radiogroup"` element carries the `inputId`, `aria-label` and `aria-labelledby`,
+ * so an `nxe-form-field` label names the group and its `aria-invalid` / `aria-describedby` land on
+ * it. Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator`.
+ */
+class NxeRadioGroupComponent extends NxeFormControlBase {
+    /** The options. */
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Text of an item; unset, the item itself. */
+    displayExpr = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayExpr" }] : /* istanbul ignore next */ []));
+    /** The value an item stands for; unset, the item itself. */
+    valueExpr = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueExpr" }] : /* istanbul ignore next */ []));
+    /** Truthy for an item that cannot be chosen. */
+    disabledExpr = input('disabled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledExpr" }] : /* istanbul ignore next */ []));
+    /** `vertical` stacks the radios, `horizontal` puts them in a row that wraps. */
+    layout = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Custom radio content. */
+    itemTemplate = contentChild(NxeRadioItemDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    entries = computed(() => this.items().map((item, index) => ({
+        item,
+        index,
+        id: `${this.controlId()}-radio-${index}`,
+        value: nxeResolveExpr(this.valueExpr(), item),
+        text: nxeResolveText(this.displayExpr(), item),
+        disabled: !!nxeResolveExpr(this.disabledExpr(), item),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    /** Index of the checked radio, or -1. */
+    selectedIndex = computed(() => {
+        const current = this.value();
+        return this.entries().findIndex((entry) => Object.is(entry.value, current));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /** The one radio in the tab order: the checked one when it can be reached, else the first enabled. */
+    tabbableIndex = computed(() => {
+        if (this.disabled()) {
+            return -1;
+        }
+        const entries = this.entries();
+        const selected = this.selectedIndex();
+        if (selected >= 0 && !entries[selected].disabled) {
+            return selected;
+        }
+        return entries.findIndex((entry) => !entry.disabled);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabbableIndex" }] : /* istanbul ignore next */ []));
+    onItemClick(index, event) {
+        this.select(index, event);
+    }
+    onItemKeydown(index, event) {
+        if (event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        const rtl = getComputedStyle(this.element).direction === 'rtl';
+        switch (event.key) {
+            case 'ArrowDown':
+                this.move(index, 1, event);
+                break;
+            case 'ArrowUp':
+                this.move(index, -1, event);
+                break;
+            case 'ArrowRight':
+                this.move(index, rtl ? -1 : 1, event);
+                break;
+            case 'ArrowLeft':
+                this.move(index, rtl ? 1 : -1, event);
+                break;
+            case ' ':
+                event.preventDefault();
+                this.select(index, event);
+                break;
+        }
+    }
+    /** Leaving the group, not moving between its radios, is what touches the control. */
+    onGroupFocusOut(event) {
+        const group = event.currentTarget;
+        if (!group.contains(event.relatedTarget)) {
+            this.markAsTouched();
+        }
+    }
+    /** Focus (and, unless read-only, select) the next enabled radio in `step` direction, wrapping. */
+    move(from, step, event) {
+        event.preventDefault();
+        if (this.disabled()) {
+            return;
+        }
+        const entries = this.entries();
+        for (let n = 1; n <= entries.length; n++) {
+            const next = (((from + step * n) % entries.length) + entries.length) % entries.length;
+            if (!entries[next].disabled) {
+                this.element.querySelectorAll('[role="radio"]')[next]?.focus();
+                this.select(next, event);
+                return;
+            }
+        }
+    }
+    select(index, event) {
+        const entry = this.entries()[index];
+        if (!entry || entry.disabled || this.disabled() || this.readOnly()) {
+            return;
+        }
+        this.commitValue(entry.value, event);
+        this.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeRadioGroupComponent, isStandalone: true, selector: "nxe-radio-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, displayExpr: { classPropertyName: "displayExpr", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExpr: { classPropertyName: "valueExpr", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, disabledExpr: { classPropertyName: "disabledExpr", publicName: "disabledExpr", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-radio-group-horizontal": "layout() === 'horizontal'", "class.nxe-radio-group-vertical": "layout() === 'vertical'", "class.nxe-invalid": "invalidState()", "attr.aria-label": "null", "attr.aria-labelledby": "null" }, classAttribute: "nxe-widget nxe-radio-group" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeRadioGroupComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeRadioGroupComponent) },
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: NxeRadioItemDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"nxe-radio-group-items\"\n    role=\"radiogroup\"\n    [id]=\"controlId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-disabled]=\"disabled() ? true : null\"\n    [attr.aria-readonly]=\"readOnly() ? true : null\"\n    [attr.aria-invalid]=\"invalidState() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    (focusout)=\"onGroupFocusOut($event)\">\n    @for (entry of entries(); track entry.index) {\n        <div\n            class=\"nxe-radio\"\n            role=\"radio\"\n            [id]=\"entry.id\"\n            [class.nxe-radio-checked]=\"selectedIndex() === entry.index\"\n            [class.nxe-radio-disabled]=\"entry.disabled\"\n            [attr.aria-checked]=\"selectedIndex() === entry.index\"\n            [attr.aria-disabled]=\"entry.disabled || disabled() ? true : null\"\n            [attr.tabindex]=\"tabbableIndex() === entry.index ? 0 : -1\"\n            (click)=\"onItemClick(entry.index, $event)\"\n            (keydown)=\"onItemKeydown(entry.index, $event)\">\n            <span class=\"nxe-radio-icon\" aria-hidden=\"true\"></span>\n            <span class=\"nxe-radio-label\">\n                @if (itemTemplate(); as tpl) {\n                    <ng-container\n                        [ngTemplateOutlet]=\"tpl.template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: entry.item,\n                            item: entry.item,\n                            index: entry.index,\n                            selected: selectedIndex() === entry.index,\n                            disabled: entry.disabled,\n                        }\" />\n                } @else {\n                    {{ entry.text }}\n                }\n            </span>\n        </div>\n    }\n</div>\n<ng-content />\n", styles: ["nxe-radio-group{display:block;min-width:0}nxe-radio-group .nxe-radio-group-items{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2, 8px)}nxe-radio-group.nxe-radio-group-horizontal .nxe-radio-group-items{flex-flow:row wrap;gap:var(--nxe-ui-space-2, 8px) var(--nxe-ui-space-5, 20px)}nxe-radio-group .nxe-radio{display:inline-flex;align-items:flex-start;gap:var(--nxe-ui-space-2, 8px);align-self:flex-start;max-width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;line-height:var(--nxe-ui-line-height, 1.35715)}nxe-radio-group .nxe-radio:focus{outline:none}nxe-radio-group .nxe-radio-icon{position:relative;box-sizing:border-box;flex-shrink:0;margin-block-start:1px;width:18px;height:18px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:50%;background-color:var(--nxe-ui-surface, #fff)}nxe-radio-group .nxe-radio-checked .nxe-radio-icon{border-color:var(--nxe-ui-accent, #337ab7)}nxe-radio-group .nxe-radio-checked .nxe-radio-icon:after{content:\"\";position:absolute;inset:3px;border-radius:50%;background-color:var(--nxe-ui-accent, #337ab7)}@media(forced-colors:active){nxe-radio-group .nxe-radio-checked .nxe-radio-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-radio-group .nxe-radio-label{min-width:0;overflow-wrap:anywhere}nxe-radio-group .nxe-radio:not(.nxe-radio-disabled):hover .nxe-radio-icon{border-color:var(--nxe-ui-accent-strong, #265a87)}nxe-radio-group .nxe-radio:focus-visible .nxe-radio-icon{border-color:var(--nxe-ui-accent, #337ab7);box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(51, 122, 183, .5))}nxe-radio-group .nxe-radio-disabled{cursor:default;opacity:var(--nxe-ui-disabled-opacity, .5)}nxe-radio-group.nxe-disabled .nxe-radio{cursor:default;opacity:var(--nxe-ui-disabled-opacity, .5)}nxe-radio-group.nxe-readonly .nxe-radio{cursor:default}nxe-radio-group.nxe-invalid .nxe-radio-icon{border-color:var(--nxe-ui-invalid, #d9534f)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-radio-group', imports: [NgTemplateOutlet], host: {
+                        class: 'nxe-widget nxe-radio-group',
+                        '[class.nxe-radio-group-horizontal]': "layout() === 'horizontal'",
+                        '[class.nxe-radio-group-vertical]': "layout() === 'vertical'",
+                        '[class.nxe-invalid]': 'invalidState()',
+                        // The names belong on the inner radiogroup; a copy on this generic host would be prohibited.
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeRadioGroupComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeRadioGroupComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"nxe-radio-group-items\"\n    role=\"radiogroup\"\n    [id]=\"controlId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-disabled]=\"disabled() ? true : null\"\n    [attr.aria-readonly]=\"readOnly() ? true : null\"\n    [attr.aria-invalid]=\"invalidState() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    (focusout)=\"onGroupFocusOut($event)\">\n    @for (entry of entries(); track entry.index) {\n        <div\n            class=\"nxe-radio\"\n            role=\"radio\"\n            [id]=\"entry.id\"\n            [class.nxe-radio-checked]=\"selectedIndex() === entry.index\"\n            [class.nxe-radio-disabled]=\"entry.disabled\"\n            [attr.aria-checked]=\"selectedIndex() === entry.index\"\n            [attr.aria-disabled]=\"entry.disabled || disabled() ? true : null\"\n            [attr.tabindex]=\"tabbableIndex() === entry.index ? 0 : -1\"\n            (click)=\"onItemClick(entry.index, $event)\"\n            (keydown)=\"onItemKeydown(entry.index, $event)\">\n            <span class=\"nxe-radio-icon\" aria-hidden=\"true\"></span>\n            <span class=\"nxe-radio-label\">\n                @if (itemTemplate(); as tpl) {\n                    <ng-container\n                        [ngTemplateOutlet]=\"tpl.template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: entry.item,\n                            item: entry.item,\n                            index: entry.index,\n                            selected: selectedIndex() === entry.index,\n                            disabled: entry.disabled,\n                        }\" />\n                } @else {\n                    {{ entry.text }}\n                }\n            </span>\n        </div>\n    }\n</div>\n<ng-content />\n", styles: ["nxe-radio-group{display:block;min-width:0}nxe-radio-group .nxe-radio-group-items{display:flex;flex-direction:column;gap:var(--nxe-ui-space-2, 8px)}nxe-radio-group.nxe-radio-group-horizontal .nxe-radio-group-items{flex-flow:row wrap;gap:var(--nxe-ui-space-2, 8px) var(--nxe-ui-space-5, 20px)}nxe-radio-group .nxe-radio{display:inline-flex;align-items:flex-start;gap:var(--nxe-ui-space-2, 8px);align-self:flex-start;max-width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;line-height:var(--nxe-ui-line-height, 1.35715)}nxe-radio-group .nxe-radio:focus{outline:none}nxe-radio-group .nxe-radio-icon{position:relative;box-sizing:border-box;flex-shrink:0;margin-block-start:1px;width:18px;height:18px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:50%;background-color:var(--nxe-ui-surface, #fff)}nxe-radio-group .nxe-radio-checked .nxe-radio-icon{border-color:var(--nxe-ui-accent, #337ab7)}nxe-radio-group .nxe-radio-checked .nxe-radio-icon:after{content:\"\";position:absolute;inset:3px;border-radius:50%;background-color:var(--nxe-ui-accent, #337ab7)}@media(forced-colors:active){nxe-radio-group .nxe-radio-checked .nxe-radio-icon:after{forced-color-adjust:none;background-color:CanvasText}}nxe-radio-group .nxe-radio-label{min-width:0;overflow-wrap:anywhere}nxe-radio-group .nxe-radio:not(.nxe-radio-disabled):hover .nxe-radio-icon{border-color:var(--nxe-ui-accent-strong, #265a87)}nxe-radio-group .nxe-radio:focus-visible .nxe-radio-icon{border-color:var(--nxe-ui-accent, #337ab7);box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(51, 122, 183, .5))}nxe-radio-group .nxe-radio-disabled{cursor:default;opacity:var(--nxe-ui-disabled-opacity, .5)}nxe-radio-group.nxe-disabled .nxe-radio{cursor:default;opacity:var(--nxe-ui-disabled-opacity, .5)}nxe-radio-group.nxe-readonly .nxe-radio{cursor:default}nxe-radio-group.nxe-invalid .nxe-radio-icon{border-color:var(--nxe-ui-invalid, #d9534f)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], displayExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], disabledExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledExpr", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeRadioItemDirective), { isSignal: true }] }] } });
+
+/**
+ * `nxe-switch`: an on/off setting that takes effect as soon as it is flipped.
+ *
+ * A signal-CVA editor (extends {@link NxeFormControlBase}) over `boolean`; `null` and unset read as
+ * off. Works with `[(value)]`, `[(ngModel)]` and Reactive Forms. The host is the control:
+ * `role="switch"`, `aria-checked`, one tab stop; click and Space toggle it. A read-only switch is
+ * focusable but never flips; a disabled one leaves the tab order and dims.
+ *
+ * `text` is the label beside the track and names the switch (inside an `nxe-form-field` the field's
+ * label does instead). `onText` and `offText` are optional words drawn inside the track; they are
+ * decoration, hidden from assistive tech, because `aria-checked` already says which state it is in.
+ */
+class NxeSwitchComponent extends NxeFormControlBase {
+    /** Label beside the track. */
+    text = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Word shown inside the track while on. */
+    onText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onText" }] : /* istanbul ignore next */ []));
+    /** Word shown inside the track while off. */
+    offText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offText" }] : /* istanbul ignore next */ []));
+    /** Track size. */
+    size = input('medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    checked = computed(() => !!this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    toggle(event) {
+        if (this.disabled() || this.readOnly()) {
+            return;
+        }
+        this.commitValue(!this.checked(), event);
+        this.markAsTouched();
+    }
+    onSpace(event) {
+        // Space would otherwise scroll the page.
+        event.preventDefault();
+        this.toggle(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeSwitchComponent, isStandalone: true, selector: "nxe-switch", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, onText: { classPropertyName: "onText", publicName: "onText", isSignal: true, isRequired: false, transformFunction: null }, offText: { classPropertyName: "offText", publicName: "offText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "switch" }, listeners: { "click": "toggle($event)", "keydown.space": "onSpace($event)", "blur": "markAsTouched()" }, properties: { "attr.aria-checked": "checked()", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-readonly": "readOnly() ? true : null", "attr.aria-invalid": "invalidState() ? true : null", "attr.aria-required": "required() ? true : null", "attr.id": "inputId() ? controlId() : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "attr.tabindex": "disabled() ? null : (tabIndex() ?? 0)", "class.nxe-switch-checked": "checked()", "class.nxe-switch-small": "size() === 'small'", "class.nxe-switch-large": "size() === 'large'", "class.nxe-invalid": "invalidState()" }, classAttribute: "nxe-widget nxe-switch" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeSwitchComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeSwitchComponent) },
+        ], usesInheritance: true, ngImport: i0, template: "<span class=\"nxe-switch-track\" aria-hidden=\"true\">\n    @if (onText() || offText()) {\n        <span class=\"nxe-switch-text nxe-switch-on-text\">{{ onText() }}</span>\n        <span class=\"nxe-switch-text nxe-switch-off-text\">{{ offText() }}</span>\n    }\n    <span class=\"nxe-switch-thumb\"></span>\n</span>\n@if (text()) {\n    <span class=\"nxe-switch-label\">{{ text() }}</span>\n}\n<ng-content />\n", styles: ["nxe-switch{--_track-w: var(--nxe-switch-track-w, 40px);--_track-h: var(--nxe-switch-track-h, 22px);--_thumb: var(--nxe-switch-thumb, 16px);--_pad: calc((var(--_track-h) - var(--_thumb)) / 2);display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2, 8px);vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;line-height:normal}nxe-switch:focus{outline:none}nxe-switch.nxe-switch-small{--_track-w: var(--nxe-switch-track-w, 30px);--_track-h: var(--nxe-switch-track-h, 18px);--_thumb: var(--nxe-switch-thumb, 12px)}nxe-switch.nxe-switch-large{--_track-w: var(--nxe-switch-track-w, 52px);--_track-h: var(--nxe-switch-track-h, 28px);--_thumb: var(--nxe-switch-thumb, 22px)}nxe-switch .nxe-switch-track{position:relative;display:inline-grid;flex-shrink:0;align-items:center;box-sizing:border-box;min-width:var(--_track-w);height:var(--_track-h);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius-pill, 999px);background-color:var(--nxe-ui-neutral-80, #f4f4f4);font-size:var(--nxe-ui-font-size-xs, 12px);font-weight:var(--nxe-ui-font-weight-medium, 500);color:var(--nxe-ui-text, #333);white-space:nowrap}nxe-switch .nxe-switch-text{grid-area:1/1;text-align:center;padding-inline:var(--_pad)}nxe-switch .nxe-switch-on-text{padding-inline-end:calc(var(--_thumb) + 2 * var(--_pad));visibility:hidden}nxe-switch .nxe-switch-off-text{padding-inline-start:calc(var(--_thumb) + 2 * var(--_pad))}nxe-switch .nxe-switch-thumb{position:absolute;top:50%;inset-inline-start:calc(var(--_pad) - 1px);width:var(--_thumb);height:var(--_thumb);margin-block-start:calc(var(--_thumb) / -2);border-radius:50%;background-color:var(--nxe-ui-surface, #fff);box-shadow:0 1px 2px #0000004d}@media(prefers-reduced-motion:no-preference){nxe-switch .nxe-switch-thumb{transition:inset-inline-start .15s ease}}nxe-switch.nxe-switch-checked .nxe-switch-track{border-color:var(--nxe-ui-accent, #337ab7);background-color:var(--nxe-ui-accent, #337ab7);color:var(--nxe-ui-accent-contrast, #fff)}nxe-switch.nxe-switch-checked .nxe-switch-thumb{inset-inline-start:calc(100% - var(--_thumb) - var(--_pad) + 1px)}nxe-switch.nxe-switch-checked .nxe-switch-on-text{visibility:visible}nxe-switch.nxe-switch-checked .nxe-switch-off-text{visibility:hidden}nxe-switch:not(.nxe-disabled):not(.nxe-switch-checked):hover .nxe-switch-track{border-color:var(--nxe-ui-accent-strong, #265a87)}nxe-switch:focus-visible .nxe-switch-track{box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(51, 122, 183, .5))}nxe-switch.nxe-disabled{cursor:default;opacity:var(--nxe-ui-disabled-opacity, .5)}nxe-switch.nxe-readonly{cursor:default}nxe-switch.nxe-invalid .nxe-switch-track{border-color:var(--nxe-ui-invalid, #d9534f)}@media(forced-colors:active){nxe-switch .nxe-switch-track{forced-color-adjust:none;border-color:CanvasText;background-color:Canvas;color:CanvasText}nxe-switch .nxe-switch-thumb{background-color:CanvasText}nxe-switch.nxe-switch-checked .nxe-switch-track{background-color:Highlight;color:HighlightText}nxe-switch.nxe-switch-checked .nxe-switch-thumb{background-color:HighlightText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-switch', host: {
+                        class: 'nxe-widget nxe-switch',
+                        role: 'switch',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.aria-disabled]': 'disabled() ? true : null',
+                        '[attr.aria-readonly]': 'readOnly() ? true : null',
+                        '[attr.aria-invalid]': 'invalidState() ? true : null',
+                        '[attr.aria-required]': 'required() ? true : null',
+                        // The host IS the control, so the id belongs on it rather than on a child.
+                        '[attr.id]': 'inputId() ? controlId() : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy() || null',
+                        '[attr.tabindex]': 'disabled() ? null : (tabIndex() ?? 0)',
+                        '[class.nxe-switch-checked]': 'checked()',
+                        '[class.nxe-switch-small]': "size() === 'small'",
+                        '[class.nxe-switch-large]': "size() === 'large'",
+                        '[class.nxe-invalid]': 'invalidState()',
+                        '(click)': 'toggle($event)',
+                        '(keydown.space)': 'onSpace($event)',
+                        '(blur)': 'markAsTouched()',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeSwitchComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeSwitchComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span class=\"nxe-switch-track\" aria-hidden=\"true\">\n    @if (onText() || offText()) {\n        <span class=\"nxe-switch-text nxe-switch-on-text\">{{ onText() }}</span>\n        <span class=\"nxe-switch-text nxe-switch-off-text\">{{ offText() }}</span>\n    }\n    <span class=\"nxe-switch-thumb\"></span>\n</span>\n@if (text()) {\n    <span class=\"nxe-switch-label\">{{ text() }}</span>\n}\n<ng-content />\n", styles: ["nxe-switch{--_track-w: var(--nxe-switch-track-w, 40px);--_track-h: var(--nxe-switch-track-h, 22px);--_thumb: var(--nxe-switch-thumb, 16px);--_pad: calc((var(--_track-h) - var(--_thumb)) / 2);display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2, 8px);vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;line-height:normal}nxe-switch:focus{outline:none}nxe-switch.nxe-switch-small{--_track-w: var(--nxe-switch-track-w, 30px);--_track-h: var(--nxe-switch-track-h, 18px);--_thumb: var(--nxe-switch-thumb, 12px)}nxe-switch.nxe-switch-large{--_track-w: var(--nxe-switch-track-w, 52px);--_track-h: var(--nxe-switch-track-h, 28px);--_thumb: var(--nxe-switch-thumb, 22px)}nxe-switch .nxe-switch-track{position:relative;display:inline-grid;flex-shrink:0;align-items:center;box-sizing:border-box;min-width:var(--_track-w);height:var(--_track-h);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius-pill, 999px);background-color:var(--nxe-ui-neutral-80, #f4f4f4);font-size:var(--nxe-ui-font-size-xs, 12px);font-weight:var(--nxe-ui-font-weight-medium, 500);color:var(--nxe-ui-text, #333);white-space:nowrap}nxe-switch .nxe-switch-text{grid-area:1/1;text-align:center;padding-inline:var(--_pad)}nxe-switch .nxe-switch-on-text{padding-inline-end:calc(var(--_thumb) + 2 * var(--_pad));visibility:hidden}nxe-switch .nxe-switch-off-text{padding-inline-start:calc(var(--_thumb) + 2 * var(--_pad))}nxe-switch .nxe-switch-thumb{position:absolute;top:50%;inset-inline-start:calc(var(--_pad) - 1px);width:var(--_thumb);height:var(--_thumb);margin-block-start:calc(var(--_thumb) / -2);border-radius:50%;background-color:var(--nxe-ui-surface, #fff);box-shadow:0 1px 2px #0000004d}@media(prefers-reduced-motion:no-preference){nxe-switch .nxe-switch-thumb{transition:inset-inline-start .15s ease}}nxe-switch.nxe-switch-checked .nxe-switch-track{border-color:var(--nxe-ui-accent, #337ab7);background-color:var(--nxe-ui-accent, #337ab7);color:var(--nxe-ui-accent-contrast, #fff)}nxe-switch.nxe-switch-checked .nxe-switch-thumb{inset-inline-start:calc(100% - var(--_thumb) - var(--_pad) + 1px)}nxe-switch.nxe-switch-checked .nxe-switch-on-text{visibility:visible}nxe-switch.nxe-switch-checked .nxe-switch-off-text{visibility:hidden}nxe-switch:not(.nxe-disabled):not(.nxe-switch-checked):hover .nxe-switch-track{border-color:var(--nxe-ui-accent-strong, #265a87)}nxe-switch:focus-visible .nxe-switch-track{box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(51, 122, 183, .5))}nxe-switch.nxe-disabled{cursor:default;opacity:var(--nxe-ui-disabled-opacity, .5)}nxe-switch.nxe-readonly{cursor:default}nxe-switch.nxe-invalid .nxe-switch-track{border-color:var(--nxe-ui-invalid, #d9534f)}@media(forced-colors:active){nxe-switch .nxe-switch-track{forced-color-adjust:none;border-color:CanvasText;background-color:Canvas;color:CanvasText}nxe-switch .nxe-switch-thumb{background-color:CanvasText}nxe-switch.nxe-switch-checked .nxe-switch-track{background-color:Highlight;color:HighlightText}nxe-switch.nxe-switch-checked .nxe-switch-thumb{background-color:HighlightText}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], onText: [{ type: i0.Input, args: [{ isSignal: true, alias: "onText", required: false }] }], offText: [{ type: i0.Input, args: [{ isSignal: true, alias: "offText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+const STRIP = {
+    numeric: /\D/g,
+    alphanumeric: /[^A-Za-z0-9]/g,
+};
+/**
+ * `nxe-otp-box`: a one-time code (2FA sign-in, e-mail verification, recovery code) drawn as one
+ * cell per character.
+ *
+ * It is ONE control, not N: a single transparent `<input>` lies over the cells and they only draw
+ * its text. That is what keeps a screen reader on one named field with one value, gives native
+ * paste, and lets the browser fill the whole code at once from an SMS or password manager
+ * (`autocomplete="one-time-code"`). Typing fills the next cell, Backspace empties the last one, and
+ * the caret is kept at the end, so the arrow keys do nothing. Pasting a code of `length` characters
+ * (or more) replaces the value, with separators such as a dash or space dropped; a shorter paste is
+ * appended.
+ *
+ * A signal-CVA over `string` (extends {@link NxeFormControlBase}); the value follows every
+ * keystroke, so a `minLength` validator sees a partial code and `completed` fires once with the full
+ * code. Name it with `aria-label`, `aria-labelledby` or an `nxe-form-field` label.
+ */
+class NxeOtpBoxComponent extends NxeFormControlBase {
+    /** Number of characters in the code. */
+    length = input(6, { ...(ngDevMode ? { debugName: "length" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(1, Math.floor(numberAttribute(v, 6))) });
+    /** `numeric` (default) takes digits and opens the numeric keypad; `alphanumeric` takes letters and digits. */
+    mode = input('numeric', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Focus the field when it first renders. */
+    autoFocus = input(false, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The full code, once, when the last cell is filled (typed, pasted or auto-filled). */
+    completed = output();
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    field = viewChild.required('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.clean(this.value() ?? ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    cells = computed(() => {
+        const text = this.displayValue();
+        const length = this.length();
+        // The cell the next character lands in, or the last one while the code is full.
+        const active = this.focused() && !this.disabled() ? Math.min(text.length, length - 1) : -1;
+        return Array.from({ length }, (_, index) => ({ index, char: text[index] ?? '', active: index === active }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterNextRender(() => {
+            if (this.autoFocus()) {
+                this.field().nativeElement.focus();
+            }
+        });
+    }
+    /** Drop what the mode does not allow and cut to `length`. */
+    clean(text) {
+        return text.replace(STRIP[this.mode()], '').slice(0, this.length());
+    }
+    /** Typing, deleting and autofill: the field's text is the new value. */
+    handleInput(event) {
+        const el = event.target;
+        const text = this.clean(el.value);
+        // A rejected character or an overflowing one leaves the model unchanged, so the field has to be put right by hand.
+        if (el.value !== text) {
+            el.value = text;
+        }
+        this.apply(text, event);
+        this.keepCaretAtEnd();
+    }
+    /** A whole code replaces the value; a fragment is appended. */
+    onPaste(event) {
+        event.preventDefault();
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        const pasted = (event.clipboardData?.getData('text') ?? '').replace(STRIP[this.mode()], '');
+        if (!pasted) {
+            return;
+        }
+        const el = event.target;
+        const next = this.clean(pasted.length >= this.length() ? pasted : el.value + pasted);
+        el.value = next;
+        this.apply(next, event);
+        this.keepCaretAtEnd();
+    }
+    /** Keys that would move the caret off the end do nothing: the cells have no caret to move. */
+    onKeydown(event) {
+        if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+            event.preventDefault();
+        }
+    }
+    onFocus() {
+        this.focused.set(true);
+        this.keepCaretAtEnd();
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.markAsTouched();
+    }
+    /** A click or a drag could put the caret mid-code or select it; it always belongs at the end. */
+    keepCaretAtEnd() {
+        const el = this.field().nativeElement;
+        const end = el.value.length;
+        if (el.selectionStart !== end || el.selectionEnd !== end) {
+            el.setSelectionRange(end, end);
+        }
+    }
+    apply(text, event) {
+        const before = this.value() ?? '';
+        this.commitValue(text, event);
+        if (text.length === this.length() && text !== before) {
+            this.completed.emit(text);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeOtpBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeOtpBoxComponent, isStandalone: true, selector: "nxe-otp-box", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "attr.aria-label": "null", "attr.aria-labelledby": "null" }, classAttribute: "nxe-widget nxe-otp-box" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeOtpBoxComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeOtpBoxComponent) },
+        ], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-otp-cells\" aria-hidden=\"true\">\n    @for (cell of cells(); track cell.index) {\n        <span\n            class=\"nxe-otp-cell\"\n            [class.nxe-otp-cell-filled]=\"cell.char !== ''\"\n            [class.nxe-otp-cell-active]=\"cell.active\">{{ cell.char }}</span>\n    }\n</div>\n<!--\n    One real input sits over the cells, so the code is a single control: one tab stop, one name, one\n    value for a screen reader, native paste and the one-time-code autofill. The cells only draw it.\n-->\n<input\n    #field\n    class=\"nxe-otp-input\"\n    type=\"text\"\n    autocomplete=\"one-time-code\"\n    autocapitalize=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    [id]=\"controlId()\"\n    [attr.inputmode]=\"mode() === 'numeric' ? 'numeric' : 'text'\"\n    [attr.pattern]=\"mode() === 'numeric' ? '[0-9]*' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-invalid]=\"invalidState() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [value]=\"displayValue()\"\n    [readOnly]=\"readOnly()\"\n    [disabled]=\"disabled()\"\n    (input)=\"handleInput($event)\"\n    (paste)=\"onPaste($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (click)=\"keepCaretAtEnd()\"\n    (select)=\"keepCaretAtEnd()\"\n    (blur)=\"onBlur()\" />\n<ng-content />\n", styles: ["nxe-otp-box{--_cell-w: var(--nxe-otp-cell-w, 40px);--_cell-h: var(--nxe-otp-cell-h, 48px);--_gap: var(--nxe-otp-gap, 8px);position:relative;display:inline-block;max-width:100%;vertical-align:middle}nxe-otp-box .nxe-otp-cells{display:flex;gap:var(--_gap)}nxe-otp-box .nxe-otp-cell{box-sizing:border-box;display:inline-flex;flex:0 0 var(--_cell-w);align-items:center;justify-content:center;width:var(--_cell-w);height:var(--_cell-h);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background-color:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-font-size-xl, 20px);font-weight:var(--nxe-ui-font-weight-medium, 500);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}nxe-otp-box .nxe-otp-input{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;opacity:0;cursor:text}nxe-otp-box:hover .nxe-otp-cell{border-color:var(--nxe-ui-accent-faded, rgba(51, 122, 183, .4))}nxe-otp-box.nxe-focused .nxe-otp-cell-active{border-color:var(--nxe-ui-accent, #337ab7);box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(51, 122, 183, .5))}nxe-otp-box.nxe-invalid .nxe-otp-cell,nxe-otp-box.nxe-invalid:hover .nxe-otp-cell{border-color:var(--nxe-ui-invalid, #d9534f)}nxe-otp-box.nxe-disabled{opacity:var(--nxe-ui-disabled-opacity, .5)}nxe-otp-box.nxe-disabled .nxe-otp-input{cursor:default}nxe-otp-box.nxe-readonly .nxe-otp-cell{border-style:dashed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeOtpBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-otp-box', host: {
+                        class: 'nxe-widget nxe-otp-box',
+                        '[class.nxe-focused]': 'focused()',
+                        '[class.nxe-invalid]': 'invalidState()',
+                        // The names belong on the inner input; a copy on this generic host would be prohibited.
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeOtpBoxComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeOtpBoxComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-otp-cells\" aria-hidden=\"true\">\n    @for (cell of cells(); track cell.index) {\n        <span\n            class=\"nxe-otp-cell\"\n            [class.nxe-otp-cell-filled]=\"cell.char !== ''\"\n            [class.nxe-otp-cell-active]=\"cell.active\">{{ cell.char }}</span>\n    }\n</div>\n<!--\n    One real input sits over the cells, so the code is a single control: one tab stop, one name, one\n    value for a screen reader, native paste and the one-time-code autofill. The cells only draw it.\n-->\n<input\n    #field\n    class=\"nxe-otp-input\"\n    type=\"text\"\n    autocomplete=\"one-time-code\"\n    autocapitalize=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    [id]=\"controlId()\"\n    [attr.inputmode]=\"mode() === 'numeric' ? 'numeric' : 'text'\"\n    [attr.pattern]=\"mode() === 'numeric' ? '[0-9]*' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-invalid]=\"invalidState() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [value]=\"displayValue()\"\n    [readOnly]=\"readOnly()\"\n    [disabled]=\"disabled()\"\n    (input)=\"handleInput($event)\"\n    (paste)=\"onPaste($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (click)=\"keepCaretAtEnd()\"\n    (select)=\"keepCaretAtEnd()\"\n    (blur)=\"onBlur()\" />\n<ng-content />\n", styles: ["nxe-otp-box{--_cell-w: var(--nxe-otp-cell-w, 40px);--_cell-h: var(--nxe-otp-cell-h, 48px);--_gap: var(--nxe-otp-gap, 8px);position:relative;display:inline-block;max-width:100%;vertical-align:middle}nxe-otp-box .nxe-otp-cells{display:flex;gap:var(--_gap)}nxe-otp-box .nxe-otp-cell{box-sizing:border-box;display:inline-flex;flex:0 0 var(--_cell-w);align-items:center;justify-content:center;width:var(--_cell-w);height:var(--_cell-h);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background-color:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-font-size-xl, 20px);font-weight:var(--nxe-ui-font-weight-medium, 500);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}nxe-otp-box .nxe-otp-input{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;opacity:0;cursor:text}nxe-otp-box:hover .nxe-otp-cell{border-color:var(--nxe-ui-accent-faded, rgba(51, 122, 183, .4))}nxe-otp-box.nxe-focused .nxe-otp-cell-active{border-color:var(--nxe-ui-accent, #337ab7);box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(51, 122, 183, .5))}nxe-otp-box.nxe-invalid .nxe-otp-cell,nxe-otp-box.nxe-invalid:hover .nxe-otp-cell{border-color:var(--nxe-ui-invalid, #d9534f)}nxe-otp-box.nxe-disabled{opacity:var(--nxe-ui-disabled-opacity, .5)}nxe-otp-box.nxe-disabled .nxe-otp-input{cursor:default}nxe-otp-box.nxe-readonly .nxe-otp-cell{border-style:dashed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+
 // @nexterajs/ui/forms — public API.
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NxeButtonComponent, NxeCheckBoxComponent, NxeDateBoxComponent, NxeNumberBoxComponent, NxeScrollViewComponent, NxeTextAreaComponent, NxeTextBoxComponent };
+export { NXE_DATE_RANGE_DISPLAY_FORMAT, NXE_DATE_RANGE_NOW, NXE_DATE_RANGE_VALUE_FORMAT, NXE_DEFAULT_ERROR_MESSAGES, NXE_ERROR_MESSAGES, NXE_FALLBACK_ERROR_KEY, NxeButtonComponent, NxeCheckBoxComponent, NxeDateBoxComponent, NxeDateRangeBoxComponent, NxeFormFieldComponent, NxeNumberBoxComponent, NxeOtpBoxComponent, NxeRadioGroupComponent, NxeRadioItemDirective, NxeScrollViewComponent, NxeSwitchComponent, NxeTextAreaComponent, NxeTextBoxComponent, nxeDateRangePresets, provideNxeErrorMessages };
 //# sourceMappingURL=nexterajs-ui-forms.mjs.map