@nordhealth/components 4.26.2 → 5.0.0-alpha.0

package/lib/src/combobox/combobox-context.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The API a [Combobox](/components/combobox/) shares with its declarative
+ * `<nord-combobox-option>` / `<nord-combobox-group>` children so they can
+ * register themselves as options (provide/inject), instead of the combobox
+ * polling the DOM.
+ */
+export interface ComboboxRegistry {
+    /** Register an option element as a selectable option. */
+    add: (option: Element) => void;
+    /** Remove a previously-registered option element. */
+    remove: (option: Element) => void;
+    /** Re-read the registered options (after an attribute/content/group change). */
+    notify: () => void;
+}
+/** Context the combobox provides to its option/group children. */
+export declare const comboboxRegistryContext: {
+    __context__: ComboboxRegistry | undefined;
+};

package/lib/src/combobox/localization.d.ts

@@ -0,0 +1,6 @@
+declare const comboboxLocalization: {
+    clearLabel: string;
+    createLabel: (query: string) => string;
+    noResults: string;
+};
+export default comboboxLocalization;

package/lib/src/common/controllers/ActiveDescendantController.d.ts

@@ -0,0 +1,45 @@
+import type { ReactiveControllerHost } from 'lit';
+export interface ActiveDescendantOptions {
+    /** The number of navigable rows. */
+    count: () => number;
+    /** Whether the row at `index` can be activated (skip disabled rows). */
+    isEnabled: (index: number) => boolean;
+    /** Wrap at the ends. Defaults to `true`. */
+    loop?: () => boolean;
+    /** The DOM id of the row at `index`, used for `aria-activedescendant`. */
+    optionId?: (index: number) => string | undefined;
+}
+/**
+ * Tracks the active row of a virtual-focus listbox (combobox / filter dropdown):
+ * the focus stays on the input/trigger while an `activeIndex` roams the rows and
+ * is surfaced as `aria-activedescendant`. Centralises the `nextEnabledIndex` /
+ * `move` / wrap math the combobox and filter-dropdown previously duplicated.
+ */
+export declare class ActiveDescendantController {
+    private host;
+    private options;
+    private _activeIndex;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: ActiveDescendantOptions);
+    /** The active row index, or `-1` when nothing is active. */
+    get activeIndex(): number;
+    /** The active row's id for `aria-activedescendant`, or `undefined`. */
+    get activeDescendant(): string | undefined;
+    /** Set the active index, requesting a host update when it changes. */
+    setActiveIndex(index: number): void;
+    /** Clear the active row. */
+    reset(): void;
+    /**
+     * The next enabled row from `from` stepping by `dir`, wrapping (when looping)
+     * and skipping disabled rows. Returns `-1` if no row is enabled.
+     */
+    nextEnabledIndex(from: number, dir: 1 | -1): number;
+    /**
+     * Move the active row by `delta` (its sign is the direction). Starts from the
+     * matching end when nothing is active. Returns `true` if it moved.
+     */
+    move(delta: number): boolean;
+    /** Activate the first enabled row (Home). Returns `true` if one was found. */
+    first(): boolean;
+    /** Activate the last enabled row (End). Returns `true` if one was found. */
+    last(): boolean;
+}

package/lib/src/common/controllers/CollapseController.d.ts

@@ -0,0 +1,50 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface CollapseOptions {
+    /** Reads the host's open state; diffed after every host update. */
+    open: () => boolean;
+    /**
+     * The CSS custom property set to the measured content height during the
+     * animation (e.g. `--n-accordion-panel-height`), for consumers to read.
+     */
+    heightVar: string;
+    /** The element to animate. Defaults to the host. */
+    target?: () => HTMLElement;
+}
+/**
+ * Animates a host's `block-size` between `0` and its measured content height as
+ * its `open` state toggles — the shared engine behind the accordion and
+ * collapsible panels. It measures the live rendered height (so rapid re-toggles
+ * continue smoothly rather than snapping), respects reduced motion, and cleans
+ * up on disconnect.
+ *
+ * It owns a {@link TransitionStatusController} (+ a {@link StateAttributesController})
+ * so the host also gains `data-open` / `data-closed` / `data-starting-style` /
+ * `data-ending-style` state hooks, driven off the same `block-size` transition.
+ */
+export declare class CollapseController implements ReactiveController {
+    private host;
+    private options;
+    private _animating;
+    private previousOpen?;
+    /** Exposes the transition status (and reflects the state attributes). */
+    private transitionStatus;
+    private stateAttributes;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: CollapseOptions);
+    /** Whether a `block-size` transition is currently running. */
+    get animating(): boolean;
+    get status(): import("./TransitionStatusController.js").TransitionStatus;
+    private get target();
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /**
+     * Measure the height to animate from. While a transition is in flight the box
+     * is mid-collapse/expand, so `scrollHeight` is clipped — use the live rendered
+     * height instead so we never snap to a stale full/zero height.
+     */
+    private currentHeight;
+    private animateOpen;
+    private animateClose;
+    private handleTransitionEnd;
+    private handleTransitionCancel;
+}

package/lib/src/common/controllers/FocusableWhenDisabledController.d.ts

@@ -0,0 +1,29 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface FocusableWhenDisabledOptions {
+    /** Reads the host's disabled state; re-read after every host update. */
+    disabled: () => boolean;
+}
+/**
+ * Keeps an interactive host focusable while disabled, mirroring Base UI's
+ * accessible-disabled pattern: a disabled control stays in the tab order
+ * (`tabindex="0"`) with `aria-disabled="true"`, rather than being removed from
+ * it (`tabindex="-1"`), so assistive-technology users can still discover it.
+ * Activation must be blocked by the host (it should no-op its click/key handlers
+ * while disabled).
+ *
+ * The host stays the focusable element (these are light-DOM `role="button"`
+ * elements that can't delegate focus into a shadow `<button>`).
+ *
+ * @example
+ * ```ts
+ * private focusable = new FocusableWhenDisabledController(this, { disabled: () => this.disabled })
+ * ```
+ */
+export declare class FocusableWhenDisabledController implements ReactiveController {
+    private host;
+    private options;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: FocusableWhenDisabledOptions);
+    hostConnected(): void;
+    hostUpdated(): void;
+    private sync;
+}

package/lib/src/common/controllers/OpenStateController.d.ts

@@ -0,0 +1,58 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface PopoutLike {
+    show: () => Promise<unknown>;
+    hide: (moveFocusToButton?: boolean) => Promise<unknown>;
+}
+export interface OpenStateOptions {
+    /** Reads the host's `open` state. */
+    isOpen: () => boolean;
+    /** Writes the host's `open` state. */
+    setOpen: (open: boolean) => void;
+    /** The `nord-popout` to drive (queried lazily; may be undefined before render). */
+    popout: () => PopoutLike | undefined;
+    /** True when the host can't be opened (disabled and/or read-only). */
+    isInert?: () => boolean;
+    /** Side effects to run when the popout has opened (seed state, reset scroll…). */
+    onOpen?: () => void;
+    /** Side effects to run when the popout has closed (clear search…). */
+    onClose?: () => void;
+}
+/**
+ * Coordinates a host's `open` property with its `nord-popout` overlay, so all
+ * the popout-backed components open/close consistently. Setting `open` drives
+ * `popout.show()`/`hide()` (the popout only fires events / manages the top layer
+ * through those, not via an attribute); the popout's own `open`/`close` events
+ * sync `open` back and the host emits exactly one canonical `open`/`close`.
+ * Opening is rejected while the host is inert (disabled / read-only).
+ *
+ * Wire the popout's events to {@link onPopoutOpen}/{@link onPopoutClose} in the
+ * template, and call {@link show}/{@link hide}/{@link toggle} from triggers.
+ */
+export declare class OpenStateController implements ReactiveController {
+    private host;
+    private options;
+    private previousOpen?;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: OpenStateOptions);
+    hostUpdate(): void;
+    hostUpdated(): void;
+    /** Open the popout programmatically (no-op when already open or inert). */
+    show(): void;
+    /** Close the popout programmatically (no-op when already closed). */
+    hide(): void;
+    /** Toggle the popout (respecting the inert guard). */
+    toggle(): void;
+    /**
+     * Bind to the popout's `@open`. The canonical `open` is property-driven (see
+     * `hostUpdated`) — the host opens via {@link show}/{@link toggle} from its
+     * trigger — so this only swallows the popout's own bubbling event. (It must
+     * NOT set `open` here: the popout's `open` fires asynchronously and could
+     * otherwise re-open after a quick close.)
+     */
+    onPopoutOpen: (e: Event) => void;
+    /**
+     * Bind to the popout's `@close`: swallow the popout's own event and sync
+     * `open` so the host (via `hostUpdated`) emits the one canonical `close` when
+     * the popout closes itself (e.g. light dismiss).
+     */
+    onPopoutClose: (e: Event) => void;
+}

package/lib/src/common/controllers/RovingFocusController.d.ts

@@ -0,0 +1,40 @@
+import type { ReactiveControllerHost } from 'lit';
+export type Orientation = 'vertical' | 'horizontal' | 'both';
+export interface RovingFocusOptions {
+    /** The focusable items, in DOM order. */
+    items: () => HTMLElement[];
+    /** Which arrow keys move focus. Defaults to `vertical`. */
+    orientation?: () => Orientation;
+    /** Wrap focus at the ends. Defaults to `true`. */
+    loop?: () => boolean;
+    /** Flips the horizontal arrow direction. Defaults to `false`. */
+    isRTL?: () => boolean;
+    /** Whether an item can receive focus (skip disabled ones). Defaults to all. */
+    isFocusable?: (item: HTMLElement) => boolean;
+}
+/**
+ * Manages arrow-key focus movement across a set of items (the shared mechanics
+ * behind Base UI's `Composite`). The host calls {@link handleKeydown} from its
+ * own `keydown`; the controller moves real DOM focus to the next/previous
+ * focusable item, honouring orientation, looping, RTL and Home/End.
+ */
+export declare class RovingFocusController {
+    private host;
+    private options;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: RovingFocusOptions);
+    /** Handle a navigation keydown. Returns `true` if it moved focus. */
+    handleKeydown(event: KeyboardEvent): boolean;
+    /** Focus the first focusable item. */
+    focusFirst(): void;
+    /** Focus the last focusable item. */
+    focusLast(): void;
+    private get loop();
+    private isFocusable;
+    private move;
+    /**
+     * The next focusable item from `start` (checked first), stepping by `direction`
+     * and skipping non-focusable items, wrapping at the ends when `loop`. Returns
+     * `-1` if none is found.
+     */
+    private nextFocusable;
+}

package/lib/src/common/controllers/StateAttributesController.d.ts

@@ -0,0 +1,47 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Maps a single state value to the `data-*` attributes it should set, or `null`
+ * to set none. Mirrors Base UI's per-key entries in `stateAttributesMapping`
+ * (e.g. a tri-state `valid` that resolves to `data-valid` or `data-invalid`).
+ */
+export type StateAttributeMapper = (value: unknown) => Record<string, string> | null;
+export type StateAttributesMapping = Record<string, StateAttributeMapper>;
+export interface StateAttributesOptions {
+    /**
+     * Track focus-within on the host and reflect it as `data-focused`. The host
+     * keeps the attribute while it or any descendant (including across a shadow
+     * boundary) holds focus. Saves each component from wiring its own
+     * focusin/focusout listeners.
+     */
+    trackFocus?: boolean;
+    /** Custom per-key mapping; keys not listed fall back to the boolean default. */
+    mapping?: StateAttributesMapping;
+}
+/**
+ * Reflects a host's state onto `data-*` attributes after every update — the Lit
+ * equivalent of Base UI's `stateAttributesMapping` applied by `useRenderElement`.
+ * Each state key toggles `data-<key>` by default; pass `mapping` to customise
+ * specific keys. With `trackFocus`, it also tracks focus-within and reflects
+ * `data-focused`. The controller only ever touches the attributes it sets itself,
+ * so it never clobbers consumer- or Lit-managed ones.
+ *
+ * @example
+ * ```ts
+ * // data-invalid from a property, data-focused tracked automatically
+ * new StateAttributesController(this, () => ({ invalid: this.invalid }), { trackFocus: true })
+ * ```
+ */
+export declare class StateAttributesController implements ReactiveController {
+    private host;
+    private getState;
+    private options;
+    private owned;
+    private hasFocus;
+    constructor(host: ReactiveControllerHost & HTMLElement, getState?: () => Record<string, unknown>, options?: StateAttributesOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private handleFocusIn;
+    private handleFocusOut;
+    private apply;
+}

package/lib/src/common/controllers/TransitionStatusController.d.ts

@@ -0,0 +1,48 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * The lifecycle of an enter/leave transition.
+ * - `closed` / `open` — settled states.
+ * - `initial` — the first frame of an enter transition (the "from" styles are
+ *   applied; removing them on the next frame commits the transition).
+ * - `ending` — a leave transition is running.
+ */
+export type TransitionStatus = 'closed' | 'initial' | 'open' | 'ending';
+export interface TransitionStatusOptions {
+    /** Reads the host's logical open state; diffed after every host update. */
+    open: () => boolean;
+    /** The element carrying the CSS transition. Defaults to the host. */
+    target?: () => HTMLElement;
+    /** Called once a completed enter transition settles to `open`. */
+    onOpened?: () => void;
+    /** Called once a completed leave transition settles to `closed`. */
+    onClosed?: () => void;
+}
+/**
+ * Tracks the enter/leave transition status of a host, mirroring Base UI's
+ * `useTransitionStatus`. It does not animate or touch the DOM itself — it
+ * exposes a `status` and a `state` object (intended to be reflected to
+ * `data-open` / `data-closed` / `data-starting-style` / `data-ending-style` via
+ * a {@link StateAttributesController}). Reduced motion / SSR skip the
+ * intermediate frames and settle synchronously.
+ */
+export declare class TransitionStatusController implements ReactiveController {
+    private host;
+    private options;
+    private _status;
+    private previousOpen?;
+    private rafId;
+    /** Bumped on every enter/leave so a stale pending settle is ignored. */
+    private token;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: TransitionStatusOptions);
+    /** The current transition status. */
+    get status(): TransitionStatus;
+    /** Whether an enter or leave transition is currently running. */
+    get transitioning(): boolean;
+    /** The state object to reflect as `data-*` style hooks. */
+    get state(): Record<string, boolean>;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    private enter;
+    private leave;
+    private cancelRaf;
+}

package/lib/src/common/dates.d.ts

@@ -36,6 +36,19 @@ export declare function startOfMonth(date: Date): Date;
 export declare function endOfMonth(date: Date): Date;
 export declare function setMonth(date: Date, month: number): Date;
 export declare function setYear(date: Date, year: number): Date;
+export declare function startOfYear(date: Date): Date;
+export declare function endOfYear(date: Date): Date;
+/** The calendar quarter (1–4) a date falls in. */
+export declare function getQuarter(date: Date): number;
+export declare function startOfQuarter(date: Date): Date;
+export declare function endOfQuarter(date: Date): Date;
+/** The inclusive `[start, end]` of quarter `quarter` (1–4) in calendar `year`. */
+export declare function getQuarterRange(quarter: number, year: number): [Date, Date];
+/**
+ * Whether quarter `quarter` (1–4) of the current year (relative to `today`) is
+ * fully in the past — used to hide not-yet-started current-year quarter presets.
+ */
+export declare function isQuarterCompleted(quarter: number, today: Date): boolean;
 /**
  * Ensures date is within range, returns min or max if out of bounds
  */

package/lib/src/common/light-dom-styles.d.ts

@@ -0,0 +1,17 @@
+import type { CSSResult } from 'lit';
+/**
+ * Injects a stylesheet for a light-DOM custom element into its nearest root
+ * (the document `<head>` or the enclosing shadow root).
+ *
+ * Light-DOM components can't scope styles with `:host`/shadow boundaries, so we
+ * render a single `<style data-component="tag-name">` element per tag, per root,
+ * and rely on the tag name as the top-level selector. Subsequent instances of
+ * the same tag in the same root reuse the existing stylesheet.
+ *
+ * Pass `key` to share one stylesheet across several tags (e.g. a stylesheet with
+ * combined selectors): the first caller injects it under that key and later
+ * callers (of any tag) reuse it. Defaults to the host's tag name.
+ *
+ * Mirrors the original pattern in `Table.ts`.
+ */
+export declare function injectLightDomStyles(host: HTMLElement, styles: CSSResult, key?: string): void;

package/lib/src/common/mixins/FieldControlMixin.d.ts

@@ -0,0 +1,60 @@
+import type { LitElement, TemplateResult } from 'lit';
+import { nothing } from 'lit';
+import { SlotController } from '../controllers/SlotController.js';
+import '../../visually-hidden/VisuallyHidden.js';
+type Constructor<T = Record<string, unknown>> = new (...args: any[]) => T;
+export declare class FieldControlMixinInterface {
+    label: string;
+    hint?: string;
+    hintBelow: boolean;
+    hideLabel: boolean;
+    error?: string;
+    required: boolean;
+    hideRequired: boolean;
+    protected inputId: string;
+    protected errorId: string;
+    protected hintId: string;
+    protected labelSlot: SlotController;
+    protected hintSlot: SlotController;
+    protected errorSlot: SlotController;
+    /** True while the control is inside a `<nord-field>` (reactive). */
+    readonly insideField: boolean;
+    /** `disabled` merged with the field's disabled (either activates it). */
+    protected get effectiveDisabled(): boolean;
+    /** `invalid` merged from the field and the control's own invalid state. */
+    protected get effectiveInvalid(): boolean;
+    /** The control's own invalid state. Defaults to `hasError`; override on controls with an `invalid` prop. */
+    protected get ownInvalid(): boolean;
+    protected get hasHint(): boolean;
+    protected get hasError(): boolean;
+    protected get isHintBelow(): boolean;
+    /** When true, a label click focuses the control instead of activating it. */
+    protected get labelFocusOnly(): boolean;
+    /** `aria-label` for the inner focusable — shadow-DOM controls inside a field only. */
+    protected get controlAriaLabel(): string | undefined;
+    /** `aria-labelledby` for the inner focusable — light-DOM controls inside a field only. */
+    protected get controlAriaLabelledby(): string | undefined;
+    /** `aria-describedby` for the inner focusable — field ids inside a field, built-in ids standalone. */
+    protected get controlAriaDescribedby(): string | undefined;
+    /** `aria-invalid` for the inner focusable. */
+    protected get controlAriaInvalid(): 'true' | undefined;
+    protected renderLabel(additionalContent?: TemplateResult): TemplateResult | typeof nothing;
+    protected renderHint(): TemplateResult | typeof nothing;
+    protected renderError(): TemplateResult | typeof nothing;
+    protected getDescribedBy(): string | undefined;
+    protected getInvalid(): 'true' | undefined;
+}
+/**
+ * Gives a form control its built-in field UI (label, hint, error, required
+ * indicator) AND makes it a consumer of the [Field](/components/field/) context.
+ *
+ * - **Standalone:** the control renders its own label/hint/error from these props.
+ * - **Inside `<nord-field>`:** the control suppresses its built-in field UI and
+ *   the field parts take over. The control reads its accessible name,
+ *   description and invalid/disabled state from the field context.
+ *
+ * The control owns `required`; it publishes it up so `<nord-field-label>` can
+ * render the indicator.
+ */
+export declare function FieldControlMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FieldControlMixinInterface> & T;
+export {};

package/lib/src/common/mixins/FormAssociatedMixin.d.ts

@@ -1,36 +1,19 @@
-import type { LitElement, TemplateResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { FieldControlMixinInterface } from './FieldControlMixin.js';
 import type { InputMixinInterface } from './InputMixin.js';
 import { FormDataController } from '../controllers/FormDataController.js';
-import { SlotController } from '../controllers/SlotController.js';
-import '../../visually-hidden/VisuallyHidden.js';
 type Constructor<T = Record<string, unknown>> = new (...args: any[]) => T;
-export declare class FormAssociatedMixinInterface {
-    label: string;
-    required: boolean;
-    hideRequired: boolean;
-    hint?: string;
-    hintBelow: boolean;
-    hideLabel: boolean;
+export declare class FormAssociatedMixinInterface extends FieldControlMixinInterface {
     placeholder?: string;
-    error?: string;
-    protected inputId: string;
-    protected errorId: string;
-    protected hintId: string;
-    protected labelSlot: SlotController;
-    protected hintSlot: SlotController;
-    protected errorSlot: SlotController;
     protected formData: FormDataController;
     protected get formValue(): string | undefined;
-    protected get hasError(): boolean;
-    protected get hasHint(): boolean;
-    protected get isHintBelow(): boolean;
     protected handleChange(e: Event): void;
     protected handleInput(e: Event): void;
-    protected renderLabel(additionalContent?: TemplateResult): TemplateResult;
-    protected renderHint(): TemplateResult;
-    protected renderError(): TemplateResult;
-    protected getDescribedBy(): string | undefined;
-    protected getInvalid(): 'true' | undefined;
 }
+/**
+ * Adds form participation (value submission, input/change events) on top of
+ * {@link FieldControlMixin}, which provides the built-in field UI and the
+ * `<nord-field>` context integration.
+ */
 export declare function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T): Constructor<FormAssociatedMixinInterface> & T;
 export {};

package/lib/src/common/mixins/TextSelectableMixin.d.ts

@@ -11,6 +11,7 @@ export declare class TextSelectableMixinInterface {
     select(): void;
     setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none'): void;
     setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
+    getNativeElement(): Promise<HTMLInputElement | HTMLTextAreaElement | undefined>;
 }
 export declare function TextSelectableMixin<T extends Constructable<InputMixinInterface & LitElement>>(superClass: T): Constructable<TextSelectableMixinInterface> & T;
 export {};

package/lib/src/common/prefers-reduced-motion.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether the user has requested reduced motion via the
+ * `prefers-reduced-motion: reduce` media query. Always `false` on the server,
+ * where `window` is unavailable. Use it to skip JS-driven animations (CSS
+ * `transition` declarations should also guard themselves with the same query).
+ */
+export declare function prefersReducedMotion(): boolean;

package/lib/src/date-picker/DatePicker.d.ts

@@ -33,6 +33,7 @@ declare const DatePicker_base: (new (...args: any[]) => import("../common/mixins
  */
 export default class DatePicker extends DatePicker_base {
     static styles: import("lit").CSSResult[];
+    private fieldBarrier;
     private toggleButton;
     private closeButton;
     private calendar;
@@ -119,6 +120,7 @@ export default class DatePicker extends DatePicker_base {
      * Controls whether the date picker expands to fill the width of its container.
      */
     expand: boolean;
+    protected get ownInvalid(): boolean;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     private createDateFormatters;

package/lib/src/date-range-picker/DateRangeChangeEvent.d.ts

@@ -0,0 +1,27 @@
+import { NordEvent } from '../common/events.js';
+/** The payload carried by a {@link DateRangeChangeEvent}. */
+export interface DateRangeChangeDetail {
+    /** The committed interval string `YYYY-MM-DD/YYYY-MM-DD`, or `""` when empty. */
+    value: string;
+    /** The committed start date in ISO-8601 format, or `""` when empty. */
+    startDate: string;
+    /** The committed end date in ISO-8601 format, or `""` when empty. */
+    endDate: string;
+}
+/**
+ * Dispatched by `nord-date-range-picker` when the committed range changes. The
+ * live `input` event uses this same shape, while `change` is dispatched once the
+ * pending selection is applied (or cleared).
+ */
+export declare class DateRangeChangeEvent extends NordEvent {
+    private readonly _detail;
+    constructor(name: string, _detail: DateRangeChangeDetail);
+    /** Convenience accessor mirroring `CustomEvent.detail`. */
+    get detail(): DateRangeChangeDetail;
+    /** The committed interval string `YYYY-MM-DD/YYYY-MM-DD`, or `""`. */
+    get value(): string;
+    /** The committed start date in ISO-8601 format, or `""`. */
+    get startDate(): string;
+    /** The committed end date in ISO-8601 format, or `""`. */
+    get endDate(): string;
+}