@lekoala/date-picker 0.5.2 → 0.5.3

package/dist/types/date-picker.d.ts

@@ -1,83 +1,5 @@
 import { DateCalendarElement } from "./date-calendar.js";
-import { DateFieldController } from "./date-field.js";
-import { DateRangeController } from "./date-range.js";
-export type PickIntent = {
-    id: number;
-    endpoint: "" | "start" | "end";
-};
-/** A grid activation intent: the generation at interaction time plus the bound
- * a drag drop targets, empty for a normal pick.
- * @typedef {{id: number, endpoint: "" | "start" | "end"}} PickIntent */
 export declare class DatePickerElement extends HTMLElement {
-    _id: string;
-    _connected: boolean;
-    _reflecting: boolean;
-    _value: string;
-    _input: HTMLInputElement | null;
-    /** @type {DateFieldController | null} */
-    _field: DateFieldController | null;
-    /** @type {DateFieldController[] | null} */
-    _fields: DateFieldController[] | null;
-    /** @type {DateRangeController | null} */
-    _range: DateRangeController | null;
-    _orderTags: Set<any>;
-    /** Native time companions, [start, end]. @type {[HTMLInputElement | null, HTMLInputElement | null]} */
-    _timeFields: [HTMLInputElement | null, HTMLInputElement | null];
-    /** Time inputs currently holding our order error. @type {Set<HTMLInputElement>} */
-    _timeOrderOwned: Set<HTMLInputElement>;
-    /** @type {"" | "start" | "end"} */
-    _lastFocusEndpoint: "" | "start" | "end";
-    /** Activation generation. A grid intent records it at interaction time
-     * and travels with its own activation (see `activationIntents`), so a late
-     * response is checked against the generation, never looked up by date. */
-    _activationId: number;
-    /** Candidate date currently projected onto the calendar band, if any. */
-    _previewDate: string;
-    /** Live endpoint drag, or null. @type {{pointerId:number, endpoint:"start"|"end", x:number, y:number, date:string, active:boolean} | null} */
-    _drag: {
-        pointerId: number;
-        endpoint: "start" | "end";
-        x: number;
-        y: number;
-        date: string;
-        active: boolean;
-    } | null;
-    /** A real drag already committed; swallow the click that follows it. */
-    _suppressGridClick: boolean;
-    /** Overlaid calendar triggers, one per field (single) or per bound (range). @type {{button: HTMLButtonElement, endpoint: "" | "start" | "end"}[]} */
-    _buttons: {
-        button: HTMLButtonElement;
-        endpoint: "" | "start" | "end";
-    }[];
-    /** Control that opened the popover, so single mode can restore focus to it.
-     * @type {HTMLElement | null} */
-    _returnFocus: HTMLElement | null;
-    _panel: HTMLDivElement | null;
-    _calendar: DateCalendarElement | null;
-    _originalDescribedBy: string;
-    _rangeOriginalDescribedBy: string[];
-    _formatHint: HTMLSpanElement | null;
-    _generatedPlaceholder: boolean;
-    _controller: AbortController | null;
-    _stopTracking: (() => void) | null;
-    _open: boolean;
-    _suppressFocusOpen: boolean;
-    /** @type {typeof import("./messages.js").DEFAULT_MESSAGES | null} */
-    _messages: typeof import("./messages.js").DEFAULT_MESSAGES | null;
-    /** @type {Partial<import("./control-classes.js").ControlClasses> | null} */
-    _controlClasses: Partial<import("./control-classes.js").ControlClasses> | null;
-    /** @type {(() => void) | null} */
-    _stopDefaultMessages: (() => void) | null;
-    /** @type {import("./date-calendar.js").DateSource | null} */
-    _source: import("./date-calendar.js").DateSource | null;
-    /** @type {import("./date-calendar.js").DateStateResolver | null} */
-    _dateState: import("./date-calendar.js").DateStateResolver | null;
-    /** @type {import("./date-calendar.js").DayRenderer | null} */
-    _renderDay: import("./date-calendar.js").DayRenderer | null;
-    /** @type {import("./date-calendar.js").DateDisabledPredicate | null} */
-    _isDateDisabled: import("./date-calendar.js").DateDisabledPredicate | null;
-    /** Public picker coordinate-space request. @type {"viewport" | "document"} */
-    _coordinateSpace: "viewport" | "document";
     static observedAttributes: string[];
     /** @public @param {Partial<import("./control-classes.js").ControlClasses>} classes */
     static setDefaultControlClasses(classes: Partial<import("./control-classes.js").ControlClasses>): void;
@@ -111,19 +33,8 @@ export declare class DatePickerElement extends HTMLElement {
         rangeOrderEnd: string;
     };
     constructor();
-    _rangeMode(): boolean;
     connectedCallback(): void;
-    _connectSingle(): void;
-    /**
-     * Find optional native time companions. They stay fully native (no hidden
-     * input, no field controller); the picker only coordinates from/to order.
-     * A bad composition never breaks the date picker: warn and leave times alone.
-     */
-    _discoverTimeFields(): void;
-    _connectRange(): void;
     disconnectedCallback(): void;
-    /** @param {DateFieldController | null} field */
-    _teardownField(field: DateFieldController | null): void;
     /** @param {string} name @param {string|null} oldValue @param {string|null} newValue */
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** @public */
@@ -171,7 +82,6 @@ export declare class DatePickerElement extends HTMLElement {
     get messages(): typeof import("./messages.js").DEFAULT_MESSAGES;
     /** @param {Partial<typeof import("./messages.js").DEFAULT_MESSAGES> | null} value */
     set messages(value: Partial<typeof import("./messages.js").DEFAULT_MESSAGES> | null);
-    _refreshMessages(): void;
     /** @public @returns {import("./date-calendar.js").DateSource | null} */
     get source(): import("./date-calendar.js").DateSource | null;
     set source(value: import("./date-calendar.js").DateSource | null);
@@ -187,224 +97,6 @@ export declare class DatePickerElement extends HTMLElement {
     /** @public JS-only coordinate-space policy: "viewport" by default, "document" as an explicit opt-in; a change made while open applies to the next opening only. @returns {"viewport" | "document"} */
     get coordinateSpace(): "viewport" | "document";
     set coordinateSpace(value: "viewport" | "document");
-    _adapter(): {
-        locale: string;
-        placeholder: string;
-        format(value: string): string;
-        parse(text: string): string;
-    };
-    _setupFormValue(): void;
-    _syncInputState(): void;
-    _syncRangeFields(): void;
-    _setRangeAria(): void;
-    /**
-     * Create one calendar trigger. It is a real button overlaid inside the
-     * field's own box (see the CSS): the field reserves the room, the trigger
-     * stays transparent, and the field's focus ring wraps both.
-     * @param {"" | "start" | "end"} endpoint
-     * @returns {HTMLButtonElement}
-     */
-    _createTrigger(endpoint: "" | "start" | "end"): HTMLButtonElement;
-    /**
-     * Build the popup once and one trigger per field. Each trigger is inserted
-     * immediately after its own field so DOM order follows visual/tab order
-     * (`date -> its trigger -> next control`). The hidden ISO field may sit
-     * between the two; it is not focusable.
-     */
-    _build(): void;
-    /** @param {AbortSignal} signal @param {HTMLInputElement | null | undefined} input @param {() => void} restore */
-    _bindPopup(signal: AbortSignal, input: HTMLInputElement | null | undefined, restore: () => void): void;
-    _bind(): void;
-    _bindRange(): void;
-    /**
-     * Point the shared calendar at one range bound and invalidate any pending
-     * activation, so a late response can never commit on the wrong bound.
-     * @param {"start" | "end"} endpoint
-     */
-    _activateRangeEndpoint(endpoint: "start" | "end"): void;
-    /**
-     * Range has one trigger per bound. A press on the other bound's trigger is a
-     * local switch, not a toggle: it repoints the single open popup instead of
-     * closing it. Only a press on the already-active bound toggles shut.
-     * @param {"start" | "end"} endpoint
-     * @param {MouseEvent} event
-     */
-    _onRangeTriggerClick(endpoint: "start" | "end", event: MouseEvent): void;
-    /**
-     * ArrowDown on a trigger opens the popup and drops into the grid, like the
-     * field itself (Enter/Space go through the click path). Needed because focus
-     * now returns to the trigger that opened the popover.
-     * @param {"" | "start" | "end"} endpoint
-     * @param {KeyboardEvent} event
-     */
-    _onTriggerKeyDown(endpoint: "" | "start" | "end", event: KeyboardEvent): void;
-    /** @param {"" | "start" | "end"} endpoint @param {KeyboardEvent} event */
-    _onFieldKeyDown(endpoint: "" | "start" | "end", event: KeyboardEvent): void;
-    /** @param {"" | "start" | "end"} endpoint @param {FocusEvent} event */
-    _onFieldFocus(endpoint: "" | "start" | "end", event: FocusEvent): void;
-    /** Record grid activation intent (click or keyboard) so a stale,
-     * late-confirmed dateactivate can be recognized and dropped. Each new grid
-     * activation supersedes every earlier pending one.
-     * @param {Event} event */
-    _captureGridIntent(event: Event): void;
-    /**
-     * Hand a new intent to the calendar's next activation of `date`. Taking a
-     * new generation supersedes every earlier pending activation.
-     * @param {string} date @param {"" | "start" | "end"} endpoint
-     */
-    _attachIntent(date: string, endpoint: "" | "start" | "end"): void;
-    /**
-     * Invalidate every pending grid activation: each one carries its own intent,
-     * which now fails the generation check. A programmatic
-     * `calendar.activateDate()` carries none.
-     */
-    _supersedeActivations(): void;
-    /** Whether one bound can receive a user pick right now.
-     * @param {"start" | "end"} bound */
-    _boundEditable(bound: "start" | "end"): boolean;
-    /**
-     * Single write path for a calendar-driven range change. Both fields are
-     * synchronized before anything is announced, because one transition can move
-     * both bounds at once (`10` then `5` commits `start 10 -> 5` together with
-     * `end "" -> 10`); writing bound by bound would expose an intermediate
-     * inverted pair. Synthetic `input`/`change` stay on the bounds that moved.
-     * @param {import("./date-range.js").RangeTransition} transition
-     */
-    _applyRangeTransition(transition: import("./date-range.js").RangeTransition): void;
-    /**
-     * Project a candidate date onto the calendar band. Purely visual: no
-     * `rangechange`, no field write, no validation and no source request — the
-     * projection reads the month state already loaded, and the real availability
-     * check still runs on commit.
-     * @param {string} date @param {"" | "start" | "end"} [endpoint]
-     */
-    _setPreview(date: string, endpoint?: "" | "start" | "end"): void;
-    /** Drop the projection and put the committed range back on the band. */
-    _clearPreview(): void;
-    /** @param {Event} event */
-    _onGridDateFocus(event: Event): void;
-    /**
-     * Hover candidate. `focusedDate` stays the keyboard target only: pointer
-     * hover never moves it, it just feeds the same projection.
-     * @param {Event} event
-     */
-    _onGridPointerOver(event: Event): void;
-    _onGridPointerLeave(): void;
-    /** @param {EventTarget | null} target @returns {string} */
-    _cellDate(target: EventTarget | null): string;
-    /** @param {number} x @param {number} y @returns {string} */
-    _dateAtPoint(x: number, y: number): string;
-    /**
-     * Arm an endpoint drag. Only a complete, ordered range offers two distinct
-     * handles; a one-day range carries both markers on the same cell, and
-     * guessing which one the user meant would be worse than not dragging.
-     * @param {Event} event
-     */
-    _onGridPointerDown(event: Event): void;
-    /** @param {Event} event */
-    _onGridPointerMove(event: Event): void;
-    /** @param {Event} event */
-    _onGridPointerUp(event: Event): void;
-    /** @param {Event} event */
-    _onGridPointerCancel(event: Event): void;
-    /** @param {number} pointerId */
-    _releaseDragCapture(pointerId: number): void;
-    /** Expose whether the band currently offers draggable handles, and whether
-     * one is being dragged, so the cursor can say so. */
-    _syncDragAffordance(): void;
-    /** @param {KeyboardEvent} event */
-    _onEscape(event: KeyboardEvent): void;
-    _syncCalendarOptions(): void;
-    _refreshLocale(): void;
-    _refreshButtonLabel(): void;
-    /** Each bound has its own trigger, so each needs its own accessible name: the
-     * bound label is what tells two otherwise identical triggers apart. */
-    _refreshRangeButtonLabel(): void;
-    /** @param {string} value */
-    _reflectValue(value: string): void;
-    /** @param {string} value @param {{emit?:boolean,format?:boolean,reflect?:boolean,moveDisplay?:boolean}} [options] */
-    _setValue(value: string, options?: {
-        emit?: boolean;
-        format?: boolean;
-        reflect?: boolean;
-        moveDisplay?: boolean;
-    }): void;
-    /**
-     * Calendar-backed availability gate injected into the field controllers.
-     * A cancelled or failed source load confirms nothing: do not fill the
-     * submitted ISO field nor treat the date as available.
-     * @param {string} date @param {{moveDisplay?: boolean}} [options]
-     * @returns {Promise<{ok: boolean, message?: string}>}
-     */
-    _confirmDate(date: string, options?: {
-        moveDisplay?: boolean;
-    }): Promise<{
-        ok: boolean;
-        message?: string;
-    }>;
-    /** @param {boolean} emit @param {{force?: boolean, moveDisplay?: boolean}} [options] */
-    _commitText(emit: boolean, options?: {
-        force?: boolean;
-        moveDisplay?: boolean;
-    }): Promise<boolean>;
-    /** @param {"start" | "end"} which */
-    _commitFieldText(which: "start" | "end"): Promise<boolean>;
-    /** @param {"start" | "end"} which @param {string} value
-     * @param {{emit?:boolean, format?:boolean, user?:boolean}} [options] @returns {boolean} */
-    _setBound(which: "start" | "end", value: string, options?: {
-        emit?: boolean;
-        format?: boolean;
-        user?: boolean;
-    }): boolean;
-    /** Atomic pair update: canonical + visible + hidden before one event.
-     * @param {string} start @param {string} end @param {{emit?:boolean, format?:boolean}} [options] */
-    _setRange(start: string, end: string, options?: {
-        emit?: boolean;
-        format?: boolean;
-    }): void;
-    /** @param {"start" | "end"} which */
-    _boundCanonical(which: "start" | "end"): string;
-    _emitRangeChange(): void;
-    /** Displayable projection of the business range. An inverted or start-less
-     * pair shows no misleading band. @returns {{start:string, end:string}} */
-    _displayRange(): {
-        start: string;
-        end: string;
-    };
-    /** Put the committed range back on the calendar band, dropping any
-     * projection currently shown over it. */
-    _syncHighlight(): void;
-    /**
-     * Cross-bound validity: the order error is attributed to the bound that was
-     * just modified; the other bound only loses a stale order error, never its
-     * independent parse/source validity.
-     * @param {"start" | "end"} which
-     */
-    _revalidateRange(which: "start" | "end"): void;
-    /**
-     * Single-mode from/to order on the shared date: `start <= end`.
-     * The order error is attributed to the bound that was just modified; the
-     * other bound only loses a stale order error, never its native validity.
-     * Missing, empty or disabled times fall back to no order constraint: times
-     * are never implicitly required. Equality stays valid (duration rules are
-     * application-owned).
-     * @param {"start" | "end"} which
-     */
-    _revalidateTimeOrder(which: "start" | "end"): void;
-    _clearTimeOrderValidity(): void;
-    _restoreDefault(): void;
-    _restoreRangeDefault(): void;
-    /** @param {"start" | "end"} which */
-    _focusField(which: "start" | "end"): void;
-    /**
-     * Restore focus to the control that opened the popover (single mode). focus()
-     * must not run synchronously from a keydown handler (Chromium drops focus
-     * changes there) and must not re-open the popover under the default
-     * open-on-focus. Deferring keeps _suppressFocusOpen active for the call.
-     */
-    _restoreFocus(): void;
-    /** @returns {"" | "start" | "end"} */
-    _resolveRangeEndpoint(): "" | "start" | "end";
     /** @public */
     validate(): Promise<boolean>;
     /** @public @param {{moveFocus?:boolean, endpoint?:"start"|"end", returnFocus?:HTMLElement}} [options] */
@@ -413,14 +105,6 @@ export declare class DatePickerElement extends HTMLElement {
         endpoint?: "start" | "end";
         returnFocus?: HTMLElement;
     }): void;
-    /** @param {boolean} expanded */
-    _setExpanded(expanded: boolean): void;
     /** @public @param {boolean} [restoreFocus] */
     hide(restoreFocus?: boolean): void;
-    /** The bound to restore focus to after closing a range popup: the active
-     * endpoint first (it moved after the first selection), then the next
-     * focusable bound.
-     * @returns {"" | "start" | "end"} */
-    _restoreFocusEndpoint(): "" | "start" | "end";
 }
-//# sourceMappingURL=date-picker.d.ts.map

package/dist/types/date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/date.js"],"names":[],"mappings":"AAGA,2BAA2B;AAC3B,wBAAgB,UAAU,CAAC,IAAI,EADnB,MACmB,WAE9B;AAED,iDAAiD;AACjD,wBAAgB,WAAW,CAAC,IAAI,EADpB,MACoB,EAAE,KAAK,EADN,MACM,qBAGtC;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAHpB,MAGoB,GAFlB;IAAC,IAAI,EAAC,MAAM,CAAC;IAAC,KAAK,EAAC,MAAM,CAAC;IAAC,GAAG,EAAC,MAAM,CAAA;CAAC,GAAG,IAAI,CAW1D;AAED,4BAA4B;AAC5B,wBAAgB,MAAM,CAAC,KAAK,EADhB,MACgB,WAE3B;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAHnB,MAGmB,GAFjB,MAAM,CAYlB;AAED,qEAAqE;AACrE,wBAAgB,SAAS,CAAC,IAAI,EADlB,MACkB,EAAE,KAAK,EADJ,MACI,EAAE,GAAG,EADa,MACb,UAIzC;AAeD,4BAA4B;AAC5B,wBAAgB,UAAU,CAAC,KAAK,EADpB,MACoB,QAI/B;AAED,0CAA0C;AAC1C,wBAAgB,YAAY,CAAC,CAAC,EADlB,MACkB,EAAE,CAAC,EADH,MACG,cAGhC;AAED,mDAAmD;AACnD,wBAAgB,OAAO,CAAC,KAAK,EADjB,MACiB,EAAE,MAAM,EADH,MACG,UAOpC;AAED,mDAAmD;AACnD,wBAAgB,SAAS,CAAC,KAAK,EADnB,MACmB,EAAE,MAAM,EADL,MACK,UAUtC;AAED,mDAAmD;AACnD,wBAAgB,QAAQ,CAAC,KAAK,EADlB,MACkB,EAAE,MAAM,EADJ,MACI,UAOrC;AAED,mDAAmD;AACnD,wBAAgB,UAAU,CAAC,KAAK,EADpB,MACoB,EAAE,MAAM,EADN,MACM,UAGvC;AAED,4BAA4B;AAC5B,wBAAgB,YAAY,CAAC,KAAK,EADtB,MACsB,UAEjC;AAED,4BAA4B;AAC5B,wBAAgB,UAAU,CAAC,KAAK,EADpB,MACoB,UAI/B;AAED,qDAAqD;AACrD,wBAAgB,SAAS,CAAC,KAAK,EADM,MACN,UAI9B;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAF/B,MAE+B,UAKzC;AAED,qDAAqD;AACrD,wBAAgB,WAAW,CAAC,KAAK,EADrB,MACqB,EAAE,QAAQ,GADT,MACa,UAG9C;AAED,qDAAqD;AACrD,wBAAgB,SAAS,CAAC,KAAK,EADnB,MACmB,EAAE,QAAQ,GADP,MACW,UAE5C;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAHxB,MAGwB,EAAE,OAAO,AAFzC,CAA4D,EAApD;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAEF,cAsBhD;AAaD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAJ5B,MAI4B,EAAE,QAAQ,AAH9C,CACA,EADQ,MAG0C,GAFxC,MAAM,CAyBlB;AAED,wEAAwE;AACxE,wBAAgB,SAAS,CAAC,KAAK,EADnB,MACmB,EAAE,GAAG,AADV,CAAsB,EAAd,MACO,EAAE,GAAG,AADE,CAAqB,EAAb,MACL,UAKlD;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,WAGvB;AAED,kDAAkD;AAClD,wBAAgB,aAAa,CAAC,KAAK,EADD,MACC,UAUlC"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/date.js"],"names":[],"mappings":"AAGA,2BAA2B;AAC3B,wBAAgB,UAAU,CAAC,IAAI,EADnB,MACmB,WAE9B;AAED,iDAAiD;AACjD,wBAAgB,WAAW,CAAC,IAAI,EADpB,MACoB,EAAE,KAAK,EADN,MACM,qBAGtC;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAHpB,MAGoB,GAFlB;IAAC,IAAI,EAAC,MAAM,CAAC;IAAC,KAAK,EAAC,MAAM,CAAC;IAAC,GAAG,EAAC,MAAM,CAAA;CAAC,GAAG,IAAI,CAW1D;AAED,4BAA4B;AAC5B,wBAAgB,MAAM,CAAC,KAAK,EADhB,MACgB,WAE3B;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAHnB,MAGmB,GAFjB,MAAM,CAelB;AAED,qEAAqE;AACrE,wBAAgB,SAAS,CAAC,IAAI,EADlB,MACkB,EAAE,KAAK,EADJ,MACI,EAAE,GAAG,EADa,MACb,UAIzC;AAeD,4BAA4B;AAC5B,wBAAgB,UAAU,CAAC,KAAK,EADpB,MACoB,QAI/B;AAED,0CAA0C;AAC1C,wBAAgB,YAAY,CAAC,CAAC,EADlB,MACkB,EAAE,CAAC,EADH,MACG,cAGhC;AAED,mDAAmD;AACnD,wBAAgB,OAAO,CAAC,KAAK,EADjB,MACiB,EAAE,MAAM,EADH,MACG,UAOpC;AAED,mDAAmD;AACnD,wBAAgB,SAAS,CAAC,KAAK,EADnB,MACmB,EAAE,MAAM,EADL,MACK,UAUtC;AAED,mDAAmD;AACnD,wBAAgB,QAAQ,CAAC,KAAK,EADlB,MACkB,EAAE,MAAM,EADJ,MACI,UAOrC;AAED,mDAAmD;AACnD,wBAAgB,UAAU,CAAC,KAAK,EADpB,MACoB,EAAE,MAAM,EADN,MACM,UAGvC;AAED,4BAA4B;AAC5B,wBAAgB,YAAY,CAAC,KAAK,EADtB,MACsB,UAEjC;AAED,4BAA4B;AAC5B,wBAAgB,UAAU,CAAC,KAAK,EADpB,MACoB,UAI/B;AAED,qDAAqD;AACrD,wBAAgB,SAAS,CAAC,KAAK,EADM,MACN,UAI9B;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAF/B,MAE+B,UAKzC;AAED,qDAAqD;AACrD,wBAAgB,WAAW,CAAC,KAAK,EADrB,MACqB,EAAE,QAAQ,GADT,MACa,UAG9C;AAED,qDAAqD;AACrD,wBAAgB,SAAS,CAAC,KAAK,EADnB,MACmB,EAAE,QAAQ,GADP,MACW,UAE5C;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAHxB,MAGwB,EAAE,OAAO,AAFzC,CAA4D,EAApD;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAEF,cAsBhD;AAaD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAJ5B,MAI4B,EAAE,QAAQ,AAH9C,CACA,EADQ,MAG0C,GAFxC,MAAM,CAyBlB;AAED,wEAAwE;AACxE,wBAAgB,SAAS,CAAC,KAAK,EADnB,MACmB,EAAE,GAAG,AADV,CAAsB,EAAd,MACO,EAAE,GAAG,AADE,CAAqB,EAAb,MACL,UAKlD;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,WAGvB;AAED,kDAAkD;AAClD,wBAAgB,aAAa,CAAC,KAAK,EADD,MACC,UAUlC"}

package/docs/API.md

@@ -149,7 +149,7 @@ Markup:
 </date-picker>
 ```
 
-The direct child text input is required. On enhancement its original `name` moves to an internal hidden input that submits the canonical ISO value.
+The direct child text input is required. On enhancement its original `name` moves to an internal hidden input that submits the canonical ISO value. Dynamic `name`/`form`/`disabled` changes are synchronized by a `MutationObserver`; code that reads `FormData` in the same task as such a mutation must wait for the next microtask. Removing `name` from the visible enhanced input does not unregister the canonical field because that input no longer owns the submitted name; disable the field to omit it from submission.
 
 ### Attributes / properties
 
@@ -211,6 +211,8 @@ picker.hide();
 await picker.validate();
 ```
 
+When disconnected, `validate()` cannot run source availability checks and returns the current native validity of the authored date/time inputs.
+
 ### Events
 
 - `valuechange` — canonical value changed;

package/docs/ARCHITECTURE.md

@@ -126,6 +126,8 @@ Supported response shapes:
 
 No server URL, query parameter names or backend schema are hard-coded into the core. `createFetchSource()` is only a convenience adapter.
 
+A commit belongs to the field controller and connection that started it. Disconnect tears controllers down: pending validation is invalidated, and neither the controller nor the picker may apply a result produced before the rebuild. A reconnected picker re-derives its state from the live DOM instead of resuming pending work.
+
 ## 7. Picker composition
 
 `<date-picker>` enhances a direct child text input.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lekoala/date-picker",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Native-first date picker and inline calendar primitives",
   "type": "module",
   "sideEffects": [
@@ -141,7 +141,7 @@
     "lint": "biome check .",
     "format": "biome format --write .",
     "typecheck": "tsc -p jsconfig.json",
-    "types": "tsc -p tsconfig.types.json",
+    "types": "tsc -p tsconfig.types.json && bun scripts/trim-types.js",
     "test": "bun test test/unit",
     "test:syntax": "bun scripts/check-syntax.js",
     "test:types": "tsc -p test/types/tsconfig.json",

package/src/date-calendar.js

@@ -163,7 +163,13 @@ export class DateCalendarElement extends HTMLElement {
     this._id = `date-calendar-${++uid}`;
     this._model = new CalendarModel();
     this._connected = false;
+    /** Connect/disconnect generation guarding deferred work. */
+    this._lifecycleId = 0;
     this._rendering = false;
+    /** Persistent live heading; render() updates its text after it is attached. @type {HTMLHeadingElement | null} */
+    this._heading = null;
+    /** Replaceable visual subtree kept separate from the persistent live heading. @type {HTMLDivElement | null} */
+    this._renderRoot = null;
     /** @type {DateSource | null} */
     this._source = null;
     /** Intent the host attached to the next activation of `date`.
@@ -207,6 +213,7 @@ export class DateCalendarElement extends HTMLElement {
 
   connectedCallback() {
     if (this._connected) return;
+    this._lifecycleId++;
     upgradeProperties(this, [
       "locale",
       "min",
@@ -248,6 +255,7 @@ export class DateCalendarElement extends HTMLElement {
     this._stopDefaultMessages?.();
     this._stopDefaultMessages = null;
     this._connected = false;
+    this._lifecycleId++;
     this._loadController?.abort();
     this._loadController = null;
     this._loadingKey = "";
@@ -258,12 +266,43 @@ export class DateCalendarElement extends HTMLElement {
     this.removeEventListener("focusin", this._onFocusIn);
   }
 
-  attributeChangedCallback() {
-    if (!this._connected || this._rendering) return;
+  /** @param {string} name @param {string|null} _oldValue @param {string|null} newValue */
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (this._rendering) return;
+    if (name === "value" && newValue && !isDate(newValue)) {
+      this._reflect("value", this._model.value);
+      return;
+    }
+    if ((name === "min" || name === "max") && newValue && !isDate(newValue)) {
+      this._reflect(name, "");
+      if (this._connected) {
+        this._syncModel();
+        this.render();
+      }
+      return;
+    }
+    if (name === "display" && newValue) {
+      try {
+        if (monthKey(newValue) !== newValue) throw new TypeError("Non-canonical month");
+      } catch {
+        this._reflect("display", this._model.display);
+        return;
+      }
+    }
+    if (!this._connected) return;
     this._syncModel();
     this.render();
   }
 
+  /** Run a focus microtask only in the lifecycle that scheduled it. @param {() => void} callback */
+  _queueFocus(callback) {
+    const lifecycleId = this._lifecycleId;
+    queueMicrotask(() => {
+      if (!this._connected || lifecycleId !== this._lifecycleId) return;
+      callback();
+    });
+  }
+
   /** @public */
   get locale() {
     return resolveLocale(this.getAttribute("locale") || "");
@@ -669,7 +708,7 @@ export class DateCalendarElement extends HTMLElement {
       // Same month: no full render, just move the roving tabindex.
       this._moveFocusDom(previousFocused, this._model.focused, moveFocus);
     }
-    if (moveFocus) queueMicrotask(() => this.focusGrid());
+    if (moveFocus) this._queueFocus(() => this.focusGrid());
   }
 
   /** @param {string} previous @param {string} next @param {boolean} [moveFocus] */
@@ -781,6 +820,8 @@ export class DateCalendarElement extends HTMLElement {
    * @param {string} date @returns {Promise<boolean>}
    */
   async activateDate(date) {
+    if (!this._connected) return false;
+    const lifecycleId = this._lifecycleId;
     const hostIntent = this._hostIntent?.date === date ? this._hostIntent.intent : undefined;
     this._hostIntent = null;
     /** @param {Event} event */
@@ -792,6 +833,7 @@ export class DateCalendarElement extends HTMLElement {
     // source resolves must not be treated as available, and a cancelled or
     // failed load must not authorize it either.
     const confirmed = await this.ensureDate(date);
+    if (!this._connected || lifecycleId !== this._lifecycleId) return false;
     const state = this.getDateState(date);
     if (!confirmed || state.disabled) {
       this.dispatchEvent(tagged(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true })));
@@ -1007,8 +1049,21 @@ export class DateCalendarElement extends HTMLElement {
     const yearControl = `<label class="dp-visually-hidden" for="${this._id}-year">${escapeHtml(this.messages.year)}</label>
           <input id="${this._id}-year" class="dp-year-input ${yearClass}" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this.messages.year)}">`;
 
+    if (!this._heading?.isConnected || !this._renderRoot?.isConnected) {
+      this.replaceChildren();
+      const heading = document.createElement("h2");
+      heading.id = headingId;
+      heading.className = "dp-calendar-heading dp-visually-hidden";
+      heading.setAttribute("aria-live", "polite");
+      const renderRoot = document.createElement("div");
+      renderRoot.className = "dp-calendar-render";
+      this.append(heading, renderRoot);
+      this._heading = heading;
+      this._renderRoot = renderRoot;
+    }
+
     this._rendering = true;
-    this.innerHTML = `
+    this._renderRoot.innerHTML = `
       <div class="dp-calendar-shell">
         <div class="dp-calendar-header">
           ${yearFirst ? yearControl : monthControl}
@@ -1016,18 +1071,18 @@ export class DateCalendarElement extends HTMLElement {
           <button type="button" class="dp-nav dp-prev ${navClass}" data-calendar-action="previous" aria-label="${escapeHtml(this.messages.previousMonth)}"${prevDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4-4 4 4"/></svg></button>
           <button type="button" class="dp-nav dp-next ${navClass}" data-calendar-action="next" aria-label="${escapeHtml(this.messages.nextMonth)}"${nextDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 6 4 4 4-4"/></svg></button>
         </div>
-        <h2 id="${headingId}" class="dp-calendar-heading dp-visually-hidden" aria-live="polite">${escapeHtml(formatMonthYear(`${display}-15`, locale))}</h2>
         <table id="${gridId}" class="dp-grid" role="grid" aria-labelledby="${headingId}">
           <thead><tr>${weekHeader}${dayHeaders}</tr></thead>
           <tbody>${rows}</tbody>
         </table>
       </div>`;
+    this._heading.textContent = formatMonthYear(`${display}-15`, locale);
     this._rendering = false;
     this._paintedRange = { ...this._highlightedRange };
     this._paintedPreview = this.hasAttribute("data-range-preview");
 
     if (focusKey) {
-      queueMicrotask(() => {
+      this._queueFocus(() => {
         let selector = focusKey;
         // A day-cell key goes stale across display changes: the old date can
         // reappear as outside-month padding in the new month (fixed-weeks or

package/src/date-field.js

@@ -35,6 +35,8 @@ export class DateFieldController {
     this.canonical = "";
     this._dirty = false;
     this._commitId = 0;
+    /** A torn-down controller is terminal: no commit may start or resume. */
+    this._disposed = false;
     this._originalName = input.getAttribute("name") || "";
     /** @type {MutationObserver | null} */
     this._attributeObserver = null;
@@ -179,34 +181,44 @@ export class DateFieldController {
    * `options` is forwarded to the `confirm` gate so a revalidation can ask it
    * not to move the calendar display (source reloads must not re-home it).
    * @param {{moveDisplay?: boolean}} [options]
-   * @returns {Promise<{status: "ok" | "clear" | "invalid" | "stale", value?: string}>}
+   * @returns {Promise<{status: "ok" | "clear" | "invalid" | "stale", value?: string, commitId: number}>}
    */
   async commit(options = {}) {
     const input = this.input;
     const commitId = ++this._commitId;
+    if (this._disposed) return { status: "stale", commitId };
     const text = input.value.trim();
     if (!text) {
-      if (commitId !== this._commitId) return { status: "stale" };
+      if (commitId !== this._commitId) return { status: "stale", commitId };
       input.setCustomValidity("");
-      return { status: "clear", value: "" };
+      return { status: "clear", value: "", commitId };
     }
     const parsed = this.adapter.parse(text);
     if (!parsed) {
-      if (commitId !== this._commitId) return { status: "stale" };
+      if (commitId !== this._commitId) return { status: "stale", commitId };
       if (this.hidden) this.hidden.value = "";
       input.setCustomValidity(this.messages.invalidDate);
-      return { status: "invalid" };
+      return { status: "invalid", commitId };
     }
     if (this.confirm) {
       const result = await this.confirm(parsed, options);
-      if (commitId !== this._commitId) return { status: "stale" };
+      // A disconnect tears this controller down while the confirm is pending;
+      // its result must not touch validity or the hidden field any more.
+      if (this._disposed || commitId !== this._commitId) return { status: "stale", commitId };
       if (!result?.ok) {
         if (this.hidden) this.hidden.value = "";
         input.setCustomValidity(result?.message || this.messages.unavailableDate);
-        return { status: "invalid" };
+        return { status: "invalid", commitId };
       }
     }
-    return { status: "ok", value: parsed };
+    return { status: "ok", value: parsed, commitId };
+  }
+
+  /** A coordinator must re-check this after awaiting commit(), including for
+   * synchronous clear/invalid results whose Promise resumes in a microtask.
+   * @param {number} commitId */
+  isCommitCurrent(commitId) {
+    return commitId === this._commitId;
   }
 
   /**
@@ -234,8 +246,12 @@ export class DateFieldController {
   }
 
   /** Remove the hidden field and attribute observer, restoring the original
-   * authored `name` on the visible input. */
+   * authored `name` on the visible input. A disconnect is a teardown, not a
+   * pause: in-flight commits are invalidated and later ones are refused, so a
+   * reconnected picker rebuilds from the live DOM instead of resuming them. */
   teardown() {
+    this.dirty();
+    this._disposed = true;
     this._attributeObserver?.disconnect();
     this._attributeObserver = null;
     const hiddenName = this.hidden?.getAttribute("name") || this._originalName;