@aceshooting/lyra-ui 4.2.0 → 5.0.0

package/dist/components/date-picker/date-input.class.js

@@ -1,884 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing, } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { FormAssociated } from '../../internal/form-associated.js';
-import { SET_ANCHORED_VALIDITY } from '../../internal/anchored-validity.js';
-import { place } from '../../internal/positioner.js';
-import { nextId } from '../../internal/a11y.js';
-import { closeIcon, calendarIcon } from '../../internal/icons.js';
-import { composedContains, deepActiveElement } from '../../internal/overlay-manager.js';
-import { dateTimeFormat, parseISO, formatISO, normalizeCalendarMonths, normalizeWeekdayFormat, } from './calendar-core.js';
-import { styles } from './date-input.styles.js';
-import { LyraDatePicker } from './date-picker.class.js';
-import './date-picker.class.js';
-import { getDateTimeFormat } from '../../internal/intl-cache.js';
-/** Determines the locale's day/month/year field order from a real formatted
- *  sample (Jan 2, 2026 -- a date where day/month/year are all numerically
- *  distinguishable), instead of relying on Date.parse()'s implementation-defined
- *  (commonly mm/dd/yyyy-biased) heuristics for an ambiguous separated date. */
-function localeDateOrder(locale) {
-    try {
-        const parts = getDateTimeFormat(locale || undefined, {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-        }).formatToParts(new Date(2026, 0, 2));
-        const order = parts
-            .filter((p) => p.type === 'day' || p.type === 'month' || p.type === 'year')
-            .map((p) => p.type);
-        return order.length === 3 ? order : ['month', 'day', 'year'];
-    }
-    catch {
-        return ['month', 'day', 'year']; // Date.parse()'s own bias, as a last-resort fallback
-    }
-}
-const monthsConverter = {
-    fromAttribute: normalizeCalendarMonths,
-    toAttribute: normalizeCalendarMonths,
-};
-/**
- * String-aware boolean attribute converter for `spellcheck`. Lit's built-in
- * `type: Boolean` converter is presence-based -- the attribute's mere
- * presence (regardless of its string value) maps to `true`, so a plain-
- * markup consumer writing the literal `spellcheck="false"` would actually get
- * `true` (this component's default), the opposite of what that string reads
- * as -- the same bug class `<lr-textarea>`'s `spellcheckConverter` and
- * `<lr-generation-status>`'s `showStopConverter` document and fix. Mirrors
- * that shape: attribute absent (or removed) -> `true` (the default);
- * `spellcheck="false"` -> `false`; anything else present (no value,
- * `="true"`, ...) -> `true`.
- */
-const spellcheckConverter = {
-    fromAttribute(value) {
-        return value !== 'false';
-    },
-    toAttribute(value) {
-        // `true` is this property's default, so there's nothing worth reflecting
-        // for it; only the non-default `false` needs an attribute at all.
-        return value ? null : 'false';
-    },
-};
-const weekdayFormatConverter = {
-    fromAttribute: normalizeWeekdayFormat,
-    toAttribute: normalizeWeekdayFormat,
-};
-class LyraDateInputBase extends LyraElement {
-}
-/**
- * `<lr-date-input>` — a date field with an attached calendar popover.
- * Mirrors the core `<wa-date-input>` API under `lr-`. Value is ISO 8601
- * (`YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` in range mode). Form-associated.
- *
- * This component uses a single text field; typing accepts ISO or a
- * locale-parseable date.
- *
- * `size` uses the same `2xs`–`xl` scale as `lr-input`/`lr-select`/`lr-combobox`'s own `size`,
- * default `m`. The calendar-toggle and clear buttons keep a constant touch-target size at every
- * tier (mirroring `lr-input`'s own password-toggle button), so only the field's density scales.
- *
- * @customElement lr-date-input
- * @event input - Fired on edits.
- * @event change - Fired on committed date transitions.
- * @event lr-show / lr-hide - Calendar popover lifecycle.
- * @event lr-clear - The clear button was used.
- * @event blur - Re-dispatched from the internal `<input>`'s own `blur`, bubbling and composed
- *   unlike the native event.
- * @event focus - Re-dispatched from the internal `<input>`'s own `focus`, for the same reason as
- *   `blur`.
- * @csspart form-control - The outer form-control wrapper.
- * @csspart form-control-label - The label wrapper.
- * @csspart input-wrapper - The input and button wrapper.
- * @csspart input - The text input.
- * @csspart clear-button - The clear control.
- * @csspart expand-button - The calendar popup toggle.
- * @csspart expand-icon - The calendar icon.
- * @csspart popup - The positioned calendar popup.
- * @csspart date-picker - The nested date picker.
- * @csspart hint - The hint message.
- * @csspart error - The validation message.
- * @slot label - Custom label content.
- * @slot error - Custom error content.
- * @slot hint - Custom hint content.
- */
-export class LyraDateInput extends FormAssociated(LyraDateInputBase) {
-    static { this.styles = [LyraElement.styles, styles]; }
-    static { this.properties = {
-        mode: { noAccessor: true },
-        min: { noAccessor: true },
-        max: { noAccessor: true },
-        readonly: { type: Boolean, reflect: true, noAccessor: true },
-        disablePast: { type: Boolean, attribute: 'disable-past', noAccessor: true },
-        disableFuture: { type: Boolean, attribute: 'disable-future', noAccessor: true },
-    }; }
-    constructor() {
-        super();
-        this.open = false;
-        this.withClear = false;
-        /** Visual size — same `2xs`–`xl` scale as `lr-input`/`lr-select`/`lr-combobox`'s own `size`.
-         *  `'2xs'` is the tightest tier, for dense toolbar-embedded fields. */
-        this.size = 'm';
-        this.label = '';
-        this.hint = '';
-        this.errorText = '';
-        this.placeholder = '';
-        /** Forwarded to the internal `<input>`'s own `spellcheck`. Defaults to `true`, matching the
-         *  native element's own default. Uses {@link spellcheckConverter} rather than Lit's default
-         *  presence-based `type: Boolean` converter -- see that converter's doc comment. A bare
-         *  `.spellcheck` property binding can still turn this off with `spellcheck="false"`; a Lit
-         *  template can do the same with either that attribute string or a `.spellcheck=${false}`
-         *  binding. */
-        this.spellcheck = true;
-        /** Forwarded to the internal `<input>`'s own `autocapitalize`. Empty string omits the
-         *  attribute (browser default). */
-        this.autocapitalize = '';
-        /** Forwarded to the internal `<input>`'s own `autocorrect` (Safari/WebKit-specific). Empty
-         *  string omits the attribute (browser default).
-         *  Named `autoCorrect` (capital `C`), not `autocorrect`, purely to dodge a TS `lib.dom.d.ts`
-         *  collision: newer DOM typings declare a `boolean`-typed `HTMLElement.autocorrect` IDL member,
-         *  which conflicts with this component's `string`-typed property of the same name. The explicit
-         *  attribute mapping preserves the standard lowercase `autocorrect` wire name in both Lit and
-         *  generated component metadata. */
-        this.autoCorrect = '';
-        /** Forwarded to the internal date text input. Empty strings preserve the browser default. */
-        this.autocomplete = '';
-        this.inputMode = '';
-        this.enterKeyHint = '';
-        /** Overrides the internal `<input>`'s computed accessible name. Wins over
-         *  `label`/`placeholder`/the localized `date` fallback in that order --
-         *  see the `aria-label` binding in `render()`. Attribute-reflects from a
-         *  host-level `aria-label` so a plain-markup consumer gets ARIA-name
-         *  forwarding without setting a JS property. */
-        this.accessibleLabel = null;
-        this.locale = '';
-        this.months = 1;
-        this.firstDayOfWeek = 'auto';
-        this.weekdayFormat = 'short';
-        this.withOutsideDays = false;
-        /** Accessible label for the clear button. Override for a non-English `locale`. */
-        this.clearLabel = '';
-        /** Accessible label for the calendar-toggle button. Override for a non-English `locale`. */
-        this.openLabel = '';
-        /** Accessible name for the calendar popover dialog. Left at the built-in default it
-         *  routes through `this.localize()` so a locale/`.strings` override applies without
-         *  requiring this to be set; an explicit override wins verbatim. */
-        this.dialogLabel = 'Choose date';
-        this.restorePopupFocusOnClose = false;
-        this.inputId = nextId('date-input');
-        this.popupId = nextId('date-popup');
-        // Set on the date input's first `blur`; gates the `data-invalid`
-        // reflection below so validity styling never flashes on first render.
-        this.touched = false;
-        // `[part]:empty` never matches — the part always contains a literal
-        // `<slot>` child element regardless of assigned content — so real
-        // emptiness is tracked in JS instead (same fix as lr-stat's
-        // icon/caption) and reflected via `hidden`. Applies to
-        // `form-control-label` too: the required-asterisk `::after` attaches to
-        // that box, so leaving it always-visible orphans a stray ' *' when no
-        // `label` is set.
-        this.hasHintSlot = false;
-        this.hasErrorSlot = false;
-        this.hasLabelSlot = false;
-        this.validityRevision = 0;
-        this._mode = 'single';
-        this._min = '';
-        this._max = '';
-        this._readonly = false;
-        this._disablePast = false;
-        this._disableFuture = false;
-        this.typedBadInput = false;
-        /** Clock seam for temporal validity and deterministic day-boundary tests. */
-        this.now = () => new Date();
-        this.onVisibilityChange = () => {
-            if (this.ownerDocument.visibilityState !== 'visible')
-                return;
-            this.updateValidity();
-            this.validityRevision++;
-        };
-        this.onDocPointer = (e) => {
-            if (!e.composedPath().includes(this))
-                this.hide();
-        };
-        this.onInputChange = (e) => {
-            const committed = this.applyTypedText(e.target.value);
-            if (committed) {
-                this.emit('input');
-                this.emit('change');
-            }
-        };
-        this.onInputKey = (e) => {
-            if (e.altKey && e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.show();
-            }
-        };
-        // Attached to the whole form-control, not just the text input, so Escape
-        // closes the popover from anywhere inside it -- including the nested
-        // picker's own day/nav buttons, which take real DOM focus (roving
-        // tabindex) rather than the input keeping focus throughout.
-        this.onFormControlKey = (e) => {
-            if (e.key === 'Escape' && this.open) {
-                e.preventDefault();
-                this.hide(true);
-            }
-        };
-        this.onInputBlur = () => {
-            this.touched = true;
-            this.emit('blur');
-        };
-        this.onInputFocus = () => {
-            this.emit('focus');
-        };
-        this.onHintSlotChange = (e) => {
-            this.hasHintSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onErrorSlotChange = (e) => {
-            this.hasErrorSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onLabelSlotChange = (e) => {
-            this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        // The nested picker's `input` event isn't wired anywhere else, so without
-        // this listener it bubbles+composes straight through this shadow boundary
-        // (LyraElement.emit always dispatches bubbles:true, composed:true) and
-        // fires on this host a *second* time, on top of the explicit emit below.
-        this.onPickerInput = (e) => {
-            e.stopPropagation();
-            const picker = e.target;
-            this.value = picker.value;
-            this.emit('input');
-        };
-        this.onPickerChange = (e) => {
-            e.stopPropagation();
-            const picker = e.target;
-            this.value = picker.value;
-            this.emit('change');
-            // The picker only fires `change` once a selection is finalized (a single
-            // pick, or the second click of a range), so this is always the right
-            // moment to close, in either mode.
-            this.hide(true);
-        };
-        this.addEventListener('invalid', () => {
-            this.touched = true;
-        });
-    }
-    get mode() {
-        return this._mode;
-    }
-    set mode(next) {
-        const old = this._mode;
-        this._mode = next === 'range' ? 'range' : 'single';
-        this.updateValidity();
-        this.requestUpdate('mode', old);
-    }
-    get min() {
-        return this._min;
-    }
-    set min(next) {
-        const old = this._min;
-        this._min = next ?? '';
-        this.updateValidity();
-        this.requestUpdate('min', old);
-    }
-    get max() {
-        return this._max;
-    }
-    set max(next) {
-        const old = this._max;
-        this._max = next ?? '';
-        this.updateValidity();
-        this.requestUpdate('max', old);
-    }
-    get readonly() {
-        return this._readonly;
-    }
-    set readonly(next) {
-        const old = this._readonly;
-        this._readonly = Boolean(next);
-        this.toggleAttribute('readonly', this._readonly);
-        this.updateValidity();
-        this.requestUpdate('readonly', old);
-    }
-    get disablePast() {
-        return this._disablePast;
-    }
-    set disablePast(next) {
-        const old = this._disablePast;
-        this._disablePast = Boolean(next);
-        this.updateValidity();
-        this.requestUpdate('disablePast', old);
-    }
-    get disableFuture() {
-        return this._disableFuture;
-    }
-    set disableFuture(next) {
-        const old = this._disableFuture;
-        this._disableFuture = Boolean(next);
-        this.updateValidity();
-        this.requestUpdate('disableFuture', old);
-    }
-    /** The underlying date text input for platform-specific integrations. */
-    get input() {
-        return this.inputElement;
-    }
-    get selectionStart() {
-        return this.inputElement?.selectionStart ?? null;
-    }
-    set selectionStart(value) {
-        if (this.inputElement)
-            this.inputElement.selectionStart = value ?? 0;
-    }
-    get selectionEnd() {
-        return this.inputElement?.selectionEnd ?? null;
-    }
-    set selectionEnd(value) {
-        if (this.inputElement)
-            this.inputElement.selectionEnd = value ?? 0;
-    }
-    get selectionDirection() {
-        return this.inputElement?.selectionDirection;
-    }
-    set selectionDirection(value) {
-        if (this.inputElement)
-            this.inputElement.selectionDirection = value ?? 'none';
-    }
-    get value() {
-        return super.value;
-    }
-    set value(next) {
-        this.setTypedBadInput(false);
-        super.value = this.normalizeCommittedValue(next ?? '');
-    }
-    setTypedBadInput(next) {
-        const old = this.typedBadInput;
-        this.typedBadInput = next;
-        if (old !== next)
-            this.requestUpdate('typedBadInput', old);
-    }
-    parseStrictISO(value) {
-        if (!/^\d{4}-\d{2}-\d{2}$/.test(value))
-            return null;
-        return parseISO(value);
-    }
-    normalizeCommittedValue(value) {
-        if (value === '')
-            return '';
-        const parts = value.split('/');
-        if (parts.length !== 1 && parts.length !== 2)
-            return '';
-        const dates = parts.map((part) => this.parseStrictISO(part));
-        if (dates.some((date) => date === null))
-            return '';
-        if (parts.length === 2 && dates[0] > dates[1])
-            return `${parts[1]}/${parts[0]}`;
-        return value;
-    }
-    /** A single ISO date committed while in range mode -- the shape the nested
-     *  picker's `commit()` produces after only the first click of a range pick
-     *  (`from` set, `to` still null). This is a normal, transient in-progress
-     *  selection, not a malformed value: it just hasn't picked up its second
-     *  endpoint yet. */
-    isIncompleteRangeValue(value) {
-        return this.mode === 'range' && value !== '' && !value.includes('/');
-    }
-    valueDates(value) {
-        const parts = value.split('/');
-        const expectedParts = this.mode === 'range' && parts.length === 2 ? 2 : 1;
-        if (parts.length !== expectedParts)
-            return null;
-        const dates = parts.map((part) => this.parseStrictISO(part));
-        return dates.some((date) => date === null) ? null : dates;
-    }
-    updateValidity() {
-        if (this.readonly) {
-            this[SET_ANCHORED_VALIDITY]({});
-            return;
-        }
-        const flags = {};
-        let underflowMessage = '';
-        let overflowMessage = '';
-        const incompleteRange = this.isIncompleteRangeValue(this.value);
-        if (this.required && (this.value === '' || incompleteRange))
-            flags.valueMissing = true;
-        if (this.typedBadInput)
-            flags.badInput = true;
-        if (this.value !== '') {
-            const dates = this.valueDates(this.value);
-            if (!dates) {
-                flags.badInput = true;
-            }
-            else {
-                const min = this.parseStrictISO(this.min);
-                const max = this.parseStrictISO(this.max);
-                const today = this.now();
-                today.setHours(0, 0, 0, 0);
-                if (min !== null && dates.some((date) => date < min)) {
-                    flags.rangeUnderflow = true;
-                    underflowMessage = this.localize('dateInputMinMessage', undefined, { min: this.min });
-                }
-                if (this.disablePast && dates.some((date) => date < today)) {
-                    flags.rangeUnderflow = true;
-                    underflowMessage ||= this.localize('dateInputPastDisabled');
-                }
-                if (max !== null && dates.some((date) => date > max)) {
-                    flags.rangeOverflow = true;
-                    overflowMessage = this.localize('dateInputMaxMessage', undefined, { max: this.max });
-                }
-                if (this.disableFuture && dates.some((date) => date > today)) {
-                    flags.rangeOverflow = true;
-                    overflowMessage ||= this.localize('dateInputFutureDisabled');
-                }
-            }
-        }
-        let message = '';
-        if (flags.badInput)
-            message = this.localize('dateInputInvalid');
-        else if (flags.rangeUnderflow)
-            message = underflowMessage;
-        else if (flags.rangeOverflow)
-            message = overflowMessage;
-        else if (flags.valueMissing)
-            message = this.localize('fieldRequired');
-        this[SET_ANCHORED_VALIDITY](flags, message);
-    }
-    checkValidity() {
-        this.updateValidity();
-        return super.checkValidity();
-    }
-    reportValidity() {
-        this.updateValidity();
-        return super.reportValidity();
-    }
-    get displayText() {
-        const parts = this.value.split('/');
-        const from = parseISO(parts[0] ?? '');
-        const to = parseISO(parts[1] ?? '');
-        if (!from)
-            return '';
-        const formatter = dateTimeFormat(this.effectiveLocale, {});
-        const fmt = (d) => formatter.format(d);
-        return this.mode === 'range' && to ? `${fmt(from)} – ${fmt(to)}` : fmt(from);
-    }
-    willUpdate(changed) {
-        if (!this.hasUpdated) {
-            this.hasHintSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'hint');
-            this.hasErrorSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'error');
-            this.hasLabelSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'label');
-        }
-        if (changed.has('open')) {
-            if (this.open) {
-                if (!this.popupTrigger) {
-                    const active = deepActiveElement(this.ownerDocument);
-                    this.popupTrigger = active && typeof active.focus === 'function' ? active : undefined;
-                }
-                this.ownerDocument.addEventListener('pointerdown', this.onDocPointer);
-            }
-            else {
-                this.ownerDocument.removeEventListener('pointerdown', this.onDocPointer);
-                const active = deepActiveElement(this.ownerDocument);
-                const popup = this.renderRoot.querySelector('[part="popup"]');
-                const restoreFocus = this.restorePopupFocusOnClose || (popup !== null && composedContains(popup, active));
-                const trigger = this.popupTrigger;
-                this.popupTrigger = undefined;
-                this.restorePopupFocusOnClose = false;
-                if (restoreFocus && trigger?.isConnected)
-                    trigger.focus();
-            }
-        }
-    }
-    /** Open the calendar popover. */
-    show() {
-        if (this.open || this.effectiveDisabled || this.readonly)
-            return;
-        this.open = true;
-        this.emit('lr-show');
-    }
-    /** Close the calendar popover. */
-    hide(restoreFocus = false) {
-        if (!this.open)
-            return;
-        this.restorePopupFocusOnClose ||= restoreFocus;
-        this.open = false;
-        this.emit('lr-hide');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.ownerDocument.addEventListener('visibilitychange', this.onVisibilityChange);
-    }
-    /** Clear the value. */
-    clear() {
-        // Matches how `onInputBlur` already flips this on the first blur -- an
-        // explicit user-initiated clear() is itself an interaction, so a
-        // required-and-now-empty field must surface its invalid state right
-        // away instead of silently looking valid until some later blur.
-        this.touched = true;
-        this.value = '';
-        this.emit('input');
-        this.emit('change');
-        this.emit('lr-clear');
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.cleanupFn?.();
-        this.cleanupFn = undefined;
-        this.ownerDocument.removeEventListener('visibilitychange', this.onVisibilityChange);
-        this.ownerDocument.removeEventListener('pointerdown', this.onDocPointer);
-        this.popupTrigger = undefined;
-        this.restorePopupFocusOnClose = false;
-        // Reset so a reconnect (e.g. a drag-drop reparent) re-triggers
-        // `updated()`'s `open`-driven branch -- without this, `open` stays
-        // stuck `true` across the disconnect, `updated()` never sees it
-        // *change*, and `place()` never gets called again to re-bind
-        // positioning to the (possibly relocated) anchor.
-        this.open = false;
-    }
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has('open')) {
-            this.cleanupFn?.();
-            this.cleanupFn = undefined;
-            if (this.open) {
-                const anchor = this.renderRoot.querySelector('[part="input-wrapper"]');
-                const popup = this.renderRoot.querySelector('[part="popup"]');
-                if (anchor && popup)
-                    this.cleanupFn = place(anchor, popup);
-            }
-        }
-        if (changed.has('touched') ||
-            changed.has('required') ||
-            changed.has('value') ||
-            changed.has('mode') ||
-            changed.has('min') ||
-            changed.has('max') ||
-            changed.has('readonly') ||
-            changed.has('disablePast') ||
-            changed.has('disableFuture') ||
-            changed.has('typedBadInput') ||
-            changed.has('validityRevision')) {
-            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
-        }
-    }
-    /** Parses raw typed text and, if it resolves to a real date (or range),
-     *  commits it as the new value; otherwise reverts the field to the last
-     *  committed display text and flags bad input. Either branch keeps `value`,
-     *  form value, and validity in sync, which is what lets this double as both
-     *  the native `<input>`'s `change` handler and the implementation of the
-     *  public `setRangeText()` editing method -- a programmatic edit of the same
-     *  underlying text needs the identical parse-or-revert contract. Returns
-     *  whether the text actually committed, so callers can decide whether to
-     *  emit `input`/`change` (only a real, user-driven edit does). */
-    applyTypedText(raw) {
-        const trimmed = raw.trim();
-        if (!trimmed) {
-            // The mixin's value setter recomputes validity (updateValidity()),
-            // which clears any stale badInput state along the way.
-            this.value = '';
-            return true;
-        }
-        const parsed = this.mode === 'range' ? this.parseRangeText(trimmed) : this.parseSingleText(trimmed);
-        if (parsed) {
-            this.value = parsed;
-            return true;
-        }
-        // Unparseable text: don't silently keep the committed value while the
-        // field still shows garbage -- revert the display to the last commit
-        // and flag bad input. Parseable dates outside an active bound instead
-        // commit above and expose their precise range validity state.
-        if (this.inputElement)
-            this.inputElement.value = this.displayText;
-        this.setTypedBadInput(true);
-        this.updateValidity();
-        return false;
-    }
-    /** Parses one date, ISO-first (so a calendar-invalid ISO string like
-     *  "2026-02-30" is rejected rather than silently rolled over by Date.parse()).
-     *  A 3-part, ambiguous slash/dot/dash-separated date (e.g. "15/07/2026") is
-     *  parsed according to the locale's own day/month/year order (via a real
-     *  Intl.DateTimeFormat sample, see localeDateOrder()) rather than
-     *  Date.parse()'s implementation-defined heuristics -- this is what prevents
-     *  e.g. an en-GB "15/07/2026" from being silently misread as some other day.
-     *  A 4-digit first group (e.g. "2026-7-15") is never locale-guessed, though:
-     *  it's unambiguously a year regardless of locale/separator (ISO's own
-     *  year-first convention, just without zero-padding), so it's routed
-     *  straight through parseISO() instead -- this is what lets a non-padded
-     *  ISO-ish date keep parsing correctly (it did via Date.parse() before the
-     *  ambiguous-date regex below existed at all).
-     *  Anything else (e.g. "July 15, 2026") still falls through to Date.parse(). */
-    parseOneDate(raw) {
-        const looksLikeISO = /^\d{4}-\d{2}-\d{2}$/.test(raw);
-        if (looksLikeISO)
-            return parseISO(raw);
-        const ambiguous = /^(\d{1,4})[/.-](\d{1,4})[/.-](\d{1,4})$/.exec(raw);
-        if (ambiguous) {
-            const [, g1, g2, g3] = ambiguous;
-            if (g1.length === 4) {
-                return parseISO(`${g1}-${g2.padStart(2, '0')}-${g3.padStart(2, '0')}`);
-            }
-            const order = localeDateOrder(this.effectiveLocale);
-            const values = [Number(g1), Number(g2), Number(g3)];
-            const fields = {};
-            order.forEach((type, i) => {
-                fields[type] = values[i];
-            });
-            if (fields.day != null && fields.month != null && fields.year != null) {
-                const year = fields.year < 100 ? 2000 + fields.year : fields.year;
-                return parseISO(`${String(year).padStart(4, '0')}-${String(fields.month).padStart(2, '0')}-${String(fields.day).padStart(2, '0')}`);
-            }
-        }
-        return isNaN(Date.parse(raw)) ? null : new Date(Date.parse(raw));
-    }
-    parseSingleText(raw) {
-        const parsed = this.parseOneDate(raw);
-        return parsed ? formatISO(parsed) : null;
-    }
-    /** Only round-trips the exact `displayText` shape this component itself
-     *  renders (`"<locale from> – <locale to>"`) — a raw ISO range typed
-     *  directly (`"2026-05-01/2026-05-15"`) is also accepted as a convenience.
-     *  A reversed typed range (`to` before `from`) is normalized into
-     *  from-before-to order, matching what the date-picker's own UI-driven
-     *  `commit()` already does for a UI-picked range. */
-    parseRangeText(raw) {
-        if (/^\d{4}-\d{2}-\d{2}\/\d{4}-\d{2}-\d{2}$/.test(raw)) {
-            const [a, b] = raw.split('/');
-            const from = parseISO(a);
-            const to = parseISO(b);
-            if (!from || !to)
-                return null;
-            return from <= to ? raw : `${b}/${a}`;
-        }
-        const separator = ' – '; // matches displayText's ` – ` join exactly
-        const idx = raw.indexOf(separator);
-        if (idx === -1)
-            return null;
-        const from = this.parseOneDate(raw.slice(0, idx).trim());
-        const to = this.parseOneDate(raw.slice(idx + separator.length).trim());
-        if (!from || !to)
-            return null;
-        return from <= to ? `${formatISO(from)}/${formatISO(to)}` : `${formatISO(to)}/${formatISO(from)}`;
-    }
-    /** Focus the internal date text input. */
-    focus(options) {
-        this.inputElement?.focus(options);
-    }
-    /** Blur the internal date text input. */
-    blur() {
-        this.inputElement?.blur();
-    }
-    /** Select all editable date text. */
-    select() {
-        this.inputElement?.select();
-    }
-    /** Set the selection range in the editable date text. */
-    setSelectionRange(start, end, direction) {
-        this.inputElement?.setSelectionRange(start, end, direction);
-    }
-    setRangeText(replacement, start, end, selectMode) {
-        const input = this.inputElement;
-        if (!input)
-            return;
-        if (start === undefined || end === undefined) {
-            input.setRangeText(replacement);
-        }
-        else {
-            input.setRangeText(replacement, start, end, selectMode);
-        }
-        // Mirrors onInputChange's parse-or-revert contract for a programmatic
-        // edit of the same underlying text -- keeps value/validity in sync
-        // without emitting input/change (programmatic assignments stay silent).
-        this.applyTypedText(input.value);
-    }
-    formStateRestoreCallback(state, _mode) {
-        this.value = typeof state === 'string' ? state : '';
-    }
-    formResetCallback() {
-        super.formResetCallback();
-        this.touched = false;
-    }
-    render() {
-        const hasValue = this.value.length > 0;
-        const hasHint = this.hasHintSlot || this.hint.length > 0;
-        const hasError = this.hasErrorSlot || this.errorText.length > 0;
-        const hasLabel = this.hasLabelSlot || this.label.length > 0;
-        const invalid = this.touched && !this.internals.validity.valid;
-        const describedBy = [hasError ? 'date-input-error' : '', hasHint ? 'date-input-hint' : '']
-            .filter(Boolean)
-            .join(' ');
-        return html `
-      <div part="form-control" @keydown=${this.onFormControlKey}>
-        <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
-          ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
-        </label>
-        <div part="input-wrapper">
-          <input
-            id=${this.inputId}
-            part="input"
-            type="text"
-            aria-label=${this.accessibleLabel || (hasLabel ? nothing : this.placeholder || this.localize('date'))}
-            aria-describedby=${describedBy || nothing}
-            aria-required=${this.required ? 'true' : 'false'}
-            aria-invalid=${invalid ? 'true' : 'false'}
-            spellcheck=${this.spellcheck}
-            autocapitalize=${this.autocapitalize || nothing}
-            autocorrect=${this.autoCorrect || nothing}
-            autocomplete=${this.autocomplete || nothing}
-            inputmode=${this.inputMode || nothing}
-            enterkeyhint=${this.enterKeyHint || nothing}
-            .value=${this.displayText}
-            placeholder=${this.placeholder}
-            ?required=${this.required}
-            ?disabled=${this.effectiveDisabled}
-            ?readonly=${this.readonly}
-            @change=${this.onInputChange}
-            @keydown=${this.onInputKey}
-            @focus=${this.onInputFocus}
-            @blur=${this.onInputBlur}
-          />
-          ${this.withClear && hasValue
-            ? html `<button
-                part="clear-button"
-                type="button"
-                ?disabled=${this.effectiveDisabled || this.readonly}
-                aria-label=${this.localize('clear', this.clearLabel || undefined)}
-                @click=${() => this.clear()}
-              >
-                ${closeIcon()}
-              </button>`
-            : ''}
-          <button
-            part="expand-button"
-            type="button"
-            aria-label=${this.localize('openCalendar', this.openLabel || undefined)}
-            aria-haspopup="dialog"
-            aria-expanded=${this.open ? 'true' : 'false'}
-            aria-controls=${this.popupId}
-            ?disabled=${this.effectiveDisabled || this.readonly}
-            @click=${() => (this.open ? this.hide() : this.show())}
-          >
-            <span part="expand-icon" aria-hidden="true">${calendarIcon()}</span>
-          </button>
-        </div>
-        <div
-          id=${this.popupId}
-          part="popup"
-          role="dialog"
-          aria-label=${this.localize('chooseDate', this.dialogLabel === 'Choose date' ? undefined : this.dialogLabel)}
-        >
-          <lr-date-picker
-            part="date-picker"
-            .value=${this.value}
-            .mode=${this.mode}
-            .min=${this.min}
-            .max=${this.max}
-            .months=${normalizeCalendarMonths(this.months)}
-            .locale=${this.effectiveLocale}
-            .disabled=${this.effectiveDisabled}
-            .readonly=${this.readonly}
-            .disablePast=${this.disablePast}
-            .disableFuture=${this.disableFuture}
-            .withOutsideDays=${this.withOutsideDays}
-            first-day-of-week=${this.firstDayOfWeek}
-            .weekdayFormat=${normalizeWeekdayFormat(this.weekdayFormat)}
-            @input=${this.onPickerInput}
-            @change=${this.onPickerChange}
-          ></lr-date-picker>
-        </div>
-        <div id="date-input-error" part="error" ?hidden=${!hasError}>
-          ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
-        </div>
-        <div id="date-input-hint" part="hint" ?hidden=${!hasHint}>
-          ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraDateInput.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'with-clear' })
-], LyraDateInput.prototype, "withClear", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraDateInput.prototype, "size", void 0);
-__decorate([
-    property()
-], LyraDateInput.prototype, "label", void 0);
-__decorate([
-    property()
-], LyraDateInput.prototype, "hint", void 0);
-__decorate([
-    property({ attribute: 'error-text' })
-], LyraDateInput.prototype, "errorText", void 0);
-__decorate([
-    property()
-], LyraDateInput.prototype, "placeholder", void 0);
-__decorate([
-    property({ converter: spellcheckConverter })
-], LyraDateInput.prototype, "spellcheck", void 0);
-__decorate([
-    property()
-], LyraDateInput.prototype, "autocapitalize", void 0);
-__decorate([
-    property({ attribute: 'autocorrect' })
-], LyraDateInput.prototype, "autoCorrect", void 0);
-__decorate([
-    property()
-], LyraDateInput.prototype, "autocomplete", void 0);
-__decorate([
-    property({ attribute: 'inputmode' })
-], LyraDateInput.prototype, "inputMode", void 0);
-__decorate([
-    property({ attribute: 'enterkeyhint' })
-], LyraDateInput.prototype, "enterKeyHint", void 0);
-__decorate([
-    property({ attribute: 'aria-label' })
-], LyraDateInput.prototype, "accessibleLabel", void 0);
-__decorate([
-    property()
-], LyraDateInput.prototype, "locale", void 0);
-__decorate([
-    property({ converter: monthsConverter })
-], LyraDateInput.prototype, "months", void 0);
-__decorate([
-    property({ attribute: 'first-day-of-week' })
-], LyraDateInput.prototype, "firstDayOfWeek", void 0);
-__decorate([
-    property({ attribute: 'weekday-format', converter: weekdayFormatConverter })
-], LyraDateInput.prototype, "weekdayFormat", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'with-outside-days' })
-], LyraDateInput.prototype, "withOutsideDays", void 0);
-__decorate([
-    property({ attribute: 'clear-label' })
-], LyraDateInput.prototype, "clearLabel", void 0);
-__decorate([
-    property({ attribute: 'open-label' })
-], LyraDateInput.prototype, "openLabel", void 0);
-__decorate([
-    property({ attribute: 'dialog-label' })
-], LyraDateInput.prototype, "dialogLabel", void 0);
-__decorate([
-    query('input[part="input"]')
-], LyraDateInput.prototype, "inputElement", void 0);
-__decorate([
-    state()
-], LyraDateInput.prototype, "touched", void 0);
-__decorate([
-    state()
-], LyraDateInput.prototype, "hasHintSlot", void 0);
-__decorate([
-    state()
-], LyraDateInput.prototype, "hasErrorSlot", void 0);
-__decorate([
-    state()
-], LyraDateInput.prototype, "hasLabelSlot", void 0);
-__decorate([
-    state()
-], LyraDateInput.prototype, "validityRevision", void 0);
-//# sourceMappingURL=date-input.class.js.map