vectis-ui 0.1.0

package/dist/components/VDateInput/VDateInput.d.ts

@@ -0,0 +1,152 @@
+import { DatePickerEvent, DatePickerSelection, DatePickerValue, DateMatcher } from '../VDatePicker/VDatePicker.js';
+import { IconSource } from '../VIcon/types.js';
+/**
+ * A field for choosing a date: a text field, and a calendar in a panel below it.
+ *
+ * The panel is opened from code rather than by the browser, and that is not a detail: a
+ * text input cannot be declared as the thing that opens a popover, and opening it
+ * ourselves is also what lets the focus be moved INTO the calendar's grid, so the
+ * keyboard lands where the dates are. Closing is ours too — the focus leaving the
+ * component, or Escape.
+ *
+ * The field itself comes in two forms. It can be TYPED into, which is the default: the
+ * reader types digits only and the separators appear as they go, in the order and with
+ * the punctuation their language uses. Or it can be read-only, in which case the calendar
+ * is the only way in.
+ *
+ * That is a different question from WHAT is being chosen — one date, a period, or several
+ * dates — which is passed straight through to the calendar.
+ */
+type Placement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+/** Whether the field can be typed into, or only filled from the calendar. */
+export type DateInputMode = 'readonly' | 'input';
+interface DateInputProps {
+    /** What is being chosen: one date, a period between two, or several separate dates. */
+    selection?: DatePickerSelection;
+    /**
+     * A BCP 47 locale, which decides the month and day names, the first day of the week and
+     * the order the field is typed in. It TAKES PRECEDENCE over the design system's global
+     * locale and falls back to it — which is why it has no literal default: `undefined` has
+     * to stay recognizable for the global locale to have its chance.
+     */
+    locale?: string;
+    /** Forces the day the weeks start on, from 0 for Sunday to 6 for Saturday. */
+    firstDayOfWeek?: number;
+    /** The earliest date that can be chosen, as an ISO string. */
+    min?: string;
+    /** The latest date that can be chosen, as an ISO string. */
+    max?: string;
+    /** Dates that cannot be chosen, as a list or as a function. */
+    disabledDates?: DateMatcher;
+    /** Fills the corners of the grid with the greyed days of the neighbouring months. */
+    showAdjacentDays?: boolean;
+    /** Lets those neighbouring days be clicked, which implies showing them. */
+    selectAdjacentDays?: boolean;
+    /** Events to mark under the days they fall on. */
+    events?: DatePickerEvent[];
+    /**
+     * Whether the field can be TYPED into — the default, using the numeric form of the
+     * reader's language — or is read-only, the calendar then being the only way in.
+     *
+     * Typing is reserved for choosing a SINGLE date: a period or a list falls back to
+     * read-only, there being no sensible way to type either.
+     */
+    mode?: DateInputMode;
+    /**
+     * Offers the date picker alongside a field that can be typed into: an icon at the end of
+     * the field, and a panel that opens on focus. It means nothing in read-only mode, where
+     * the picker is already the only way to choose.
+     */
+    showPicker?: boolean;
+    /** The label above the field. */
+    label?: string;
+    /** A line of help under the field. */
+    hint?: string;
+    /** What the field says while empty. */
+    placeholder?: string;
+    /** The height of the field: 32, 40 or 48 pixels. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Takes 4px off the height. */
+    compact?: boolean;
+    /** Makes the field unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+    /** Marks the field as invalid — for a rule of your own. */
+    invalid?: boolean;
+    /** Offers a cross that empties the value, shown before the end icon. */
+    clearable?: boolean;
+    /**
+     * The icon that opens the date picker, at the end of the field. The clear cross appears
+     * to its left rather than in its place, and no icon is rendered at all when there is no
+     * panel to open.
+     */
+    pickerIcon?: IconSource;
+    /**
+     * How the date is WRITTEN OUT in the field. It has no effect on a field being typed
+     * into, which necessarily shows the numeric form one types — so it concerns the
+     * read-only mode, and the period and list selections, which fall back to it.
+     */
+    displayFormat?: Intl.DateTimeFormatOptions;
+    /** Where the panel opens relative to the field. */
+    placement?: Placement;
+}
+type __VLS_Props = DateInputProps;
+type __VLS_Slots = {
+    /** What a day cell shows, handed straight to the calendar. */
+    day?(props: {
+        iso: string;
+        day: number;
+        inMonth: boolean;
+        disabled: boolean;
+        selected: boolean;
+        today: boolean;
+        inRange: boolean;
+        events: DatePickerEvent[];
+    }): unknown;
+    /**
+     * The strip at the foot of the panel — actions, or preset dates such as "today". It
+     * receives `close`, which is what lets one of those buttons dismiss the panel.
+     */
+    footer?(props: {
+        close: () => void;
+    }): unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: DatePickerValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: DatePickerValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DatePickerValue) => any) | undefined;
+}>, {
+    label: string;
+    selection: DatePickerSelection;
+    placeholder: string;
+    size: "sm" | "md" | "lg";
+    placement: Placement;
+    mode: DateInputMode;
+    compact: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    hint: string;
+    clearable: boolean;
+    max: string;
+    min: string;
+    locale: string;
+    firstDayOfWeek: number;
+    disabledDates: DateMatcher;
+    showAdjacentDays: boolean;
+    selectAdjacentDays: boolean;
+    events: DatePickerEvent[];
+    showPicker: boolean;
+    pickerIcon: IconSource;
+    displayFormat: Intl.DateTimeFormatOptions;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VDateInput/VDateInput.js

@@ -0,0 +1,9 @@
+import './VDateInput.css';
+import e from "./VDateInput.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
+//#region src/components/VDateInput/VDateInput.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VDateInput.js.map

package/dist/components/VDateInput/VDateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDateInput.js","names":[],"sources":["../../../src/components/VDateInput/VDateInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useId, watchEffect } from 'vue'\n\nimport VDatePicker from '../VDatePicker/VDatePicker.vue'\nimport type {\n  DatePickerEvent,\n  DatePickerSelection,\n  DatePickerValue,\n  DateMatcher,\n  DateRange,\n} from '../VDatePicker/VDatePicker.vue'\nimport {\n  caretAfterDigits,\n  dateMaskFor,\n  formatDateMask,\n  formatDisplay,\n  formatDisplayRange,\n  isValidISO,\n  isWithin,\n  isoToMask,\n  maskPlaceholder,\n  parseDateMask,\n} from '../../utils/date'\nimport { digitsOf } from '../../utils/text'\nimport { resolveMatcher } from '../../utils/matcher'\nimport { isDev } from '../../utils/env'\nimport { calendar_today as calendarTodayIcon } from '../VIcon/icons/calendar_today'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport VPopover from '../VPopover/VPopover.vue'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { useMaskedField } from '../../composables/useMaskedField'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n// @a11y @core\n/**\n * A field for choosing a date: a text field, and a calendar in a panel below it.\n *\n * The panel is opened from code rather than by the browser, and that is not a detail: a\n * text input cannot be declared as the thing that opens a popover, and opening it\n * ourselves is also what lets the focus be moved INTO the calendar's grid, so the\n * keyboard lands where the dates are. Closing is ours too — the focus leaving the\n * component, or Escape.\n *\n * The field itself comes in two forms. It can be TYPED into, which is the default: the\n * reader types digits only and the separators appear as they go, in the order and with\n * the punctuation their language uses. Or it can be read-only, in which case the calendar\n * is the only way in.\n *\n * That is a different question from WHAT is being chosen — one date, a period, or several\n * dates — which is passed straight through to the calendar.\n */\ntype Placement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** Whether the field can be typed into, or only filled from the calendar. */\nexport type DateInputMode = 'readonly' | 'input'\n\nconst MODES: DateInputMode[] = ['readonly', 'input']\n\n/**\n * The century a two-digit year is expanded into — \"10/06/26\" becomes 2026 — applied only\n * when the reader leaves the field.\n *\n * It is FIXED and never derived from the current year. A sliding rule would make the\n * component's behaviour depend on when it runs, which is the same objection that keeps\n * today's date out of VDatePicker's setup, and it would give the tests a shelf life.\n */\nconst YEAR_PIVOT = 2000\n\nconst DEFAULT_DISPLAY_FORMAT: Intl.DateTimeFormatOptions = {\n  day: 'numeric',\n  month: 'short',\n  year: 'numeric',\n}\n\ninterface DateInputProps {\n  // Everything from here to `events` is handed straight to the calendar.\n  /** What is being chosen: one date, a period between two, or several separate dates. */\n  selection?: DatePickerSelection\n  /**\n   * A BCP 47 locale, which decides the month and day names, the first day of the week and\n   * the order the field is typed in. It TAKES PRECEDENCE over the design system's global\n   * locale and falls back to it — which is why it has no literal default: `undefined` has\n   * to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /** Forces the day the weeks start on, from 0 for Sunday to 6 for Saturday. */\n  firstDayOfWeek?: number\n  /** The earliest date that can be chosen, as an ISO string. */\n  min?: string\n  /** The latest date that can be chosen, as an ISO string. */\n  max?: string\n  /** Dates that cannot be chosen, as a list or as a function. */\n  disabledDates?: DateMatcher\n  /** Fills the corners of the grid with the greyed days of the neighbouring months. */\n  showAdjacentDays?: boolean\n  /** Lets those neighbouring days be clicked, which implies showing them. */\n  selectAdjacentDays?: boolean\n  /** Events to mark under the days they fall on. */\n  events?: DatePickerEvent[]\n  // From here on: the field.\n  /**\n   * Whether the field can be TYPED into — the default, using the numeric form of the\n   * reader's language — or is read-only, the calendar then being the only way in.\n   *\n   * Typing is reserved for choosing a SINGLE date: a period or a list falls back to\n   * read-only, there being no sensible way to type either.\n   */\n  mode?: DateInputMode\n  /**\n   * Offers the date picker alongside a field that can be typed into: an icon at the end of\n   * the field, and a panel that opens on focus. It means nothing in read-only mode, where\n   * the picker is already the only way to choose.\n   */\n  showPicker?: boolean\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Marks the field as invalid — for a rule of your own. */\n  invalid?: boolean\n  /** Offers a cross that empties the value, shown before the end icon. */\n  clearable?: boolean\n  /**\n   * The icon that opens the date picker, at the end of the field. The clear cross appears\n   * to its left rather than in its place, and no icon is rendered at all when there is no\n   * panel to open.\n   */\n  pickerIcon?: IconSource\n  /**\n   * How the date is WRITTEN OUT in the field. It has no effect on a field being typed\n   * into, which necessarily shows the numeric form one types — so it concerns the\n   * read-only mode, and the period and list selections, which fall back to it.\n   */\n  displayFormat?: Intl.DateTimeFormatOptions\n  /** Where the panel opens relative to the field. */\n  placement?: Placement\n}\n\nconst props = withDefaults(defineProps<DateInputProps>(), {\n  selection: 'single',\n  locale: undefined,\n  firstDayOfWeek: undefined,\n  min: undefined,\n  max: undefined,\n  disabledDates: undefined,\n  showAdjacentDays: false,\n  selectAdjacentDays: false,\n  events: undefined,\n  // Deliberately left undefined rather than defaulted to the typed mode: that is what\n  // distinguishes \"the prop was not given\" from \"the prop was given this value\", and\n  // therefore what allows warning ONLY the consumer who explicitly asked for something\n  // that cannot work.\n  mode: undefined,\n  showPicker: false,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  invalid: false,\n  clearable: true,\n  pickerIcon: () => calendarTodayIcon,\n  // Left undefined rather than defaulted to the format object, for the same reason: it is\n  // what lets the component notice that a consumer has asked for a display format in a\n  // mode where it has no effect, and say so.\n  displayFormat: undefined,\n  placement: 'bottom-start',\n})\n\nconst model = defineModel<DatePickerValue>({ default: null })\n\ndefineSlots<{\n  /** What a day cell shows, handed straight to the calendar. */\n  day?(props: {\n    iso: string\n    day: number\n    inMonth: boolean\n    disabled: boolean\n    selected: boolean\n    today: boolean\n    inRange: boolean\n    events: DatePickerEvent[]\n  }): unknown\n  /**\n   * The strip at the foot of the panel — actions, or preset dates such as \"today\". It\n   * receives `close`, which is what lets one of those buttons dismiss the panel.\n   */\n  footer?(props: { close: () => void }): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field,\n// which is what a consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VDatePicker> | null>(null)\nconst panelId = useId()\n\n/** The real input inside the field, which the mask and the caret work on. */\nconst fieldEl = computed<HTMLInputElement | null>(() => inputRef.value?.el ?? null)\n\n/** What was asked for, falling back to the default when nothing or nonsense was given. */\nconst requestedMode = computed<DateInputMode>(() =>\n  props.mode !== undefined && MODES.includes(props.mode) ? props.mode : 'input',\n)\n/**\n * What is actually used. Typing is only possible for a single date: a period or a list\n * has no form one could type into a single field.\n */\nconst resolvedMode = computed<DateInputMode>(() =>\n  requestedMode.value === 'input' && props.selection === 'single' ? 'input' : 'readonly',\n)\nconst typing = computed(() => resolvedMode.value === 'input')\n\n/**\n * Whether there is a panel at all. The calendar is only optional beside a field one can\n * type into: read-only, it is the only way to choose anything.\n */\nconst hasPanel = computed(() => !typing.value || props.showPicker)\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (props.mode !== undefined && !MODES.includes(props.mode))\n      console.warn(\n        `[VDateInput] unknown mode \"${props.mode}\": use \"input\" (the default) or \"readonly\".`,\n      )\n    // Tested on the PROP and not on what was resolved from it: typing being the default,\n    // a period or a list falls back on its own with nobody having asked for anything.\n    // Only a consumer who explicitly asked to type deserves to be told it cannot work.\n    if (props.mode === 'input' && props.selection !== 'single')\n      console.warn(\n        `[VDateInput] mode=\"input\" ignored in \"${props.selection}\" selection: a range or a list of dates cannot be typed on the keyboard.`,\n      )\n    // Here it is the RESOLVED mode that matters: the format really was supplied, and it\n    // really will have no effect, whichever route led to a typed field. The warning stays\n    // something the consumer can act on.\n    if (props.displayFormat && typing.value)\n      console.warn(\n        '[VDateInput] displayFormat is ignored in \"input\" mode (the default): the field displays the locale\\'s numeric mask, the only typeable format. Pass mode=\"readonly\" for a formatted display.',\n      )\n  })\n}\n\n// The whole \"field plus panel\" shell, shared with VTimeInput: opening and closing, the\n// focus leaving the component, a click on the field, and the Escape, ArrowDown and Enter\n// keys.\nconst { open, openPanel, closePanel, onControlClick, onFocusout, onKeydown, onPanelMousedown } =\n  useFieldPanel({\n    rootEl,\n    panelRef,\n    fieldEl: inputRef,\n    // With no panel there is nothing to open. This is the composable's SINGLE cut-off\n    // point, and every way in passes through it — clicking the field, focusing it, the\n    // down arrow, Enter, the icon — so the condition never has to be repeated in a\n    // handler.\n    disabled: () => props.disabled || !hasPanel.value,\n    focusInPanel: () => pickerRef.value?.focus(),\n    // Beside a field one types into, the panel opens WITHOUT taking the focus: typing\n    // carries on in the field, and the down arrow remains the way into the grid.\n    focusOnOpen: () => !typing.value,\n  })\n\nconst hasValue = computed(() => {\n  if (props.selection === 'multiple') return Array.isArray(model.value) && model.value.length > 0\n  if (props.selection === 'range') {\n    const r = model.value as DateRange | null\n    return !!(r && (r.start || r.end))\n  }\n  return typeof model.value === 'string' && !!model.value\n})\n\nconst vectisLocale = useLocale()\n/* The prop wins, and the design system's global locale is what it falls back to.\n\n   TRAP — this component is the SINGLE place that resolution happens: what flows down to\n   the calendar is the RESULT, never the prop, which would usually be undefined and would\n   have the calendar resolve the language a second time — with every chance of the two\n   disagreeing after a later change. */\nconst resolvedLocale = computed(() => props.locale ?? vectisLocale.value)\n\nconst displayText = computed(() => {\n  const locale = resolvedLocale.value\n  const displayFormat = props.displayFormat ?? DEFAULT_DISPLAY_FORMAT\n  if (props.selection === 'single') {\n    return typeof model.value === 'string' && isValidISO(model.value)\n      ? formatDisplay(model.value, locale, displayFormat)\n      : ''\n  }\n  if (props.selection === 'range') {\n    const r = model.value as DateRange | null\n    if (!r?.start) return ''\n    if (!r.end) return formatDisplay(r.start, locale, displayFormat)\n    return formatDisplayRange(r.start, r.end, locale, displayFormat)\n  }\n  const list = Array.isArray(model.value) ? model.value : []\n  return list.map((iso) => formatDisplay(iso, locale, displayFormat)).join(', ')\n})\n\n/* From here on: everything the typed field needs. */\n\nconst mask = computed(() => dateMaskFor(resolvedLocale.value))\nconst maskHint = computed(() => maskPlaceholder(resolvedLocale.value, mask.value))\nconst isDisabledDate = computed(() => resolveMatcher(props.disabledDates))\n\n/**\n * Whether a date the reader has finished typing may actually be taken: it has to fall\n * within the allowed bounds and not be one of the excluded days.\n */\nconst acceptable = (iso: string) =>\n  isWithin(iso, props.min, props.max) && !isDisabledDate.value(iso)\n\n/*\n * The mask machinery — the text being typed, the bridge to the value, the reformatting\n * that preserves the caret, the commit as soon as the date is complete and the silent\n * revert when it is not — is shared with VTimeInput and lives in `useMaskedField`.\n *\n * What is injected here is the date VOCABULARY alone: the order of the fields, the\n * separator between them and their widths, all derived from the reader's language.\n */\nconst { draft, fieldModel, writeField, commitLive, commitOrRevert, onFieldInput } = useMaskedField({\n  fieldEl,\n  typing: () => typing.value,\n  displayText: () => displayText.value,\n  readValue: () =>\n    typeof model.value === 'string' && isValidISO(model.value) ? model.value : null,\n  writeValue: (iso) => {\n    model.value = iso\n  },\n  maxDigits: () => mask.value.size,\n  format: (digits) => formatDateMask(digits, mask.value),\n  caret: (text, digitsBefore, inserting) =>\n    caretAfterDigits(text, digitsBefore, inserting ? mask.value.separator : undefined),\n  // A two-digit year is only expanded on the FINAL commit, when the reader leaves the\n  // field — never while they are still typing, where \"26\" may well be on its way to\n  // becoming \"2026\".\n  parse: (text, final) =>\n    parseDateMask(text, mask.value, final ? { yearPivot: YEAR_PIVOT } : undefined),\n  toMask: (iso) => (iso ? isoToMask(iso, mask.value) : ''),\n  acceptable,\n})\n\n/**\n * Typing anything that is not a digit — a slash, a dot, a space — completes the field\n * being typed with a leading zero and moves on to the next. It is what lets someone type\n * \"5/6/2026\" and get the same result as typing all eight digits.\n *\n * It applies to the day and the month only: a year cut short has no such convention, \"26\"\n * being neither 0026 nor 2026 until the reader has finished.\n */\nfunction padCurrentField(el: HTMLInputElement) {\n  const start = el.selectionStart ?? el.value.length\n  const before = digitsOf(el.value.slice(0, start)).length\n  const digits = digitsOf(el.value)\n  let offset = 0\n  for (let k = 0; k < mask.value.order.length; k++) {\n    const len = mask.value.lengths[k] as number\n    if (before < offset + len) {\n      const filled = before - offset\n      if (mask.value.order[k] === 'year' || filled !== len - 1) return\n      const next = digits.slice(0, offset) + '0'.repeat(len - filled) + digits.slice(offset)\n      const text = formatDateMask(next.slice(0, mask.value.size), mask.value)\n      writeField(text, caretAfterDigits(text, offset + len, mask.value.separator))\n      return\n    }\n    offset += len\n  }\n}\n\n// @keyboard @core — the keys the mask itself needs: completing a field with a separator,\n// erasing across one, and the down arrow, which is the one explicit way from the field\n// into the calendar.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (!typing.value) return\n  const el = fieldEl.value\n  if (!el) return\n\n  if (event.key === 'Enter') {\n    // Cancelling the default does two things at once: it stops the surrounding form from\n    // being submitted, and it stops the panel this keystroke has just closed from being\n    // reopened as the event travels up to the root.\n    event.preventDefault()\n    commitOrRevert()\n    if (open.value) closeAndFocus()\n    return\n  }\n  if (event.key === 'ArrowDown' && open.value) {\n    // The one explicit route from the field into the grid of days.\n    event.preventDefault()\n    pickerRef.value?.focus()\n    return\n  }\n  if (event.key === 'Backspace') {\n    const start = el.selectionStart\n    if (\n      start !== null &&\n      start === el.selectionEnd &&\n      start > 0 &&\n      !/\\d/.test(el.value[start - 1] ?? '')\n    ) {\n      // TRAP — a separator is PLACED by the mask and never typed, so erasing one has to\n      // erase the DIGIT before it, which is what the reader believes they are erasing.\n      // Left alone, the mask would write the separator straight back and the key would\n      // look dead.\n      event.preventDefault()\n      const n = digitsOf(el.value.slice(0, start)).length\n      const digits = digitsOf(el.value)\n      const text = formatDateMask(digits.slice(0, n - 1) + digits.slice(n), mask.value)\n      writeField(text, caretAfterDigits(text, n - 1))\n      commitLive()\n    }\n    return\n  }\n  if (\n    event.key.length === 1 &&\n    !event.ctrlKey &&\n    !event.metaKey &&\n    !event.altKey &&\n    !/\\d/.test(event.key)\n  ) {\n    event.preventDefault()\n    padCurrentField(el)\n  }\n}\n\n/**\n * Pasting. A date recognizable as a whole — in the ISO form, or already written the way\n * this field writes them — is adopted as it stands; anything else contributes its digits\n * alone.\n *\n * Without this, pasting \"2026-06-10\" into a field expecting day, month, year would\n * produce \"20/26/0610\": the digits would be taken in order and the separators ignored.\n */\nfunction onFieldPaste(event: ClipboardEvent) {\n  if (!typing.value) return\n  const el = fieldEl.value\n  if (!el) return\n  event.preventDefault()\n  const pasted = (event.clipboardData?.getData('text') ?? '').trim()\n  const iso = isValidISO(pasted)\n    ? pasted\n    : parseDateMask(pasted, mask.value, { yearPivot: YEAR_PIVOT })\n  if (iso) {\n    const text = isoToMask(iso, mask.value)\n    writeField(text, text.length)\n    commitLive()\n    return\n  }\n  const start = el.selectionStart ?? el.value.length\n  const end = el.selectionEnd ?? start\n  const digits = digitsOf(el.value)\n  const from = digitsOf(el.value.slice(0, start)).length\n  const to = digitsOf(el.value.slice(0, end)).length\n  const inserted = digitsOf(pasted)\n  const next = (digits.slice(0, from) + inserted + digits.slice(to)).slice(0, mask.value.size)\n  const text = formatDateMask(next, mask.value)\n  writeField(text, caretAfterDigits(text, Math.min(from + inserted.length, next.length)))\n  commitLive()\n}\n\n// @a11y\n/**\n * TRAP — closing the panel hands the focus back to the field, and beside a field one\n * types into the panel opens ON FOCUS: the two would chase each other and the panel would\n * never close.\n *\n * This lock covers the focus call, which is synchronous. EVERY close that returns the\n * focus must go through here; closing directly brings the loop straight back.\n */\nlet refocusing = false\nfunction closeAndFocus() {\n  refocusing = true\n  closePanel(true)\n  refocusing = false\n}\n\nfunction onFieldFocus() {\n  if (!typing.value || refocusing) return\n  openPanel(false)\n}\n\n// @keyboard @a11y\nfunction onRootKeydown(event: KeyboardEvent) {\n  if (typing.value && event.key === 'Escape' && open.value) {\n    event.preventDefault()\n    closeAndFocus()\n    return\n  }\n  onKeydown(event)\n}\n\n/*\n * The clear cross is the field's own, which renders it BEFORE the end icon rather than in\n * its place — the convention every field in the design system follows, so the two live\n * side by side.\n *\n * Whether it is shown has to be answered explicitly here: outside the typed mode the field\n * is read-only, and a read-only field hides its cross by default, rightly so — but here\n * the value comes from the panel, so there is something to clear all the same.\n */\nconst canClear = computed(\n  () => props.clearable && !props.disabled && (hasValue.value || (typing.value && !!draft.value)),\n)\nconst endIcon = computed<IconSource | undefined>(() =>\n  hasPanel.value ? props.pickerIcon : undefined,\n)\n// @a11y @devwarn\n/*\n * TRAP — the LABEL is defined at all times, even when no icon is rendered at all.\n *\n * The helper detecting a click handler on an icon warns AT SETUP if one is attached\n * without a label, and it has no way of knowing whether an icon exists. Since the\n * listener here is attached permanently and that detection is static, making the label\n * conditional would produce a false warning every time a field without a calendar is\n * mounted.\n *\n * The wording itself has no prop: the dictionary is where it is changed — see `src/i18n/`.\n */\nconst m = useMessages()\n\nconst endIconLabel = computed(() => m.value.dateInput.open)\n\nfunction onEndIcon() {\n  if (open.value) closeAndFocus()\n  // Clicking the icon is an explicit request for the calendar, and the focus has already\n  // left the field for the button — so carrying it into the grid is right in both modes.\n  else openPanel(true)\n}\n// @a11y\n/*\n * Emptying the value, called by the field as it emits its clear event.\n *\n * TRAP — the focus is taken here, under the lock, on purpose: the field focuses itself\n * immediately afterwards, and focusing an element that ALREADY has the focus emits no\n * event at all. That is what stops the panel reopening. Taking the lock away from this\n * function brings the reopening straight back.\n */\nfunction clearValue() {\n  model.value =\n    props.selection === 'multiple'\n      ? []\n      : props.selection === 'range'\n        ? { start: null, end: null }\n        : null\n  // The typed text is emptied EXPLICITLY: when the value was already empty, nothing\n  // changes, and the guard that keeps the field and the value from chasing each other\n  // would leave the text where it was.\n  if (typing.value) writeField('')\n  refocusing = true\n  inputRef.value?.focus()\n  refocusing = false\n}\n\n/**\n * A date was chosen in the calendar. Choosing ONE date finishes the job, so the panel\n * closes; a period or a list is still being built and it stays open.\n */\nfunction onSelect() {\n  if (props.selection === 'single') closeAndFocus()\n}\n\nconst close = () => closeAndFocus()\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-date-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-mode=\"resolvedMode\"\n    @focusout=\"onFocusout\"\n    @keydown=\"onRootKeydown\"\n  >\n    <div class=\"v-date-input-control\" @click=\"onControlClick\">\n      <!-- The field is declared a combobox rather than left as the plain text box it\n           implicitly is, because a text box may not carry the attribute saying whether\n           something is expanded — and a text field with a panel attached IS the combobox\n           pattern, the same role VCombobox gives its own field.\n\n           The role and the three attributes are all conditioned on the SAME thing, so the\n           role never appears without the expanded state it requires, and nothing ever\n           points at a panel that was not rendered. -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"fieldModel\"\n        :inputmode=\"typing ? 'numeric' : undefined\"\n        :autocomplete=\"typing ? 'off' : undefined\"\n        v-bind=\"forwardedAttrs\"\n        :readonly=\"!typing\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :placeholder=\"placeholder ?? (typing ? maskHint : undefined)\"\n        :size=\"size\"\n        :compact=\"compact\"\n        :disabled=\"disabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"canClear\"\n        :clear-label=\"m.dateInput.clear\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        :role=\"hasPanel ? 'combobox' : undefined\"\n        :aria-haspopup=\"hasPanel ? 'dialog' : undefined\"\n        :aria-expanded=\"hasPanel ? open : undefined\"\n        :aria-controls=\"hasPanel ? panelId : undefined\"\n        @click:icon-end=\"onEndIcon\"\n        @clear=\"clearValue\"\n        @focus=\"onFieldFocus\"\n        @input=\"onFieldInput\"\n        @change=\"commitOrRevert\"\n        @blur=\"commitOrRevert\"\n        @keydown=\"onFieldKeydown\"\n        @paste=\"onFieldPaste\"\n      />\n    </div>\n\n    <!-- With no panel rendered there is nothing to hold a reference to, and the open state\n         — which is fed by the panel's own events — can no longer become true. The absence\n         of a panel is therefore self-enforcing. -->\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--date-input-anchor\"\n      :placement=\"placement\"\n      surface\n      role=\"dialog\"\n      :aria-label=\"label ?? m.dateInput.label\"\n      class=\"v-date-input-panel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <VDatePicker\n        ref=\"pickerRef\"\n        v-model=\"model\"\n        :selection=\"selection\"\n        :locale=\"resolvedLocale\"\n        :first-day-of-week=\"firstDayOfWeek\"\n        :min=\"min\"\n        :max=\"max\"\n        :disabled-dates=\"disabledDates\"\n        :show-adjacent-days=\"showAdjacentDays\"\n        :select-adjacent-days=\"selectAdjacentDays\"\n        :events=\"events\"\n        @select=\"onSelect\"\n      >\n        <template v-if=\"$slots.day\" #day=\"slotProps\">\n          <slot name=\"day\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots.footer\" #footer>\n          <slot name=\"footer\" :close=\"close\" />\n        </template>\n      </VDatePicker>\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-date-input {\n    /* Confines the anchor to this instance (the root = the common ancestor of the\n       control and the panel) */\n    anchor-scope: --date-input-anchor;\n    display: block;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-date-input-control {\n    anchor-name: --date-input-anchor;\n    display: block;\n    cursor: pointer;\n  }\n\n  /* Input mode: the field is editable, and the <input>'s text caret takes over from the\n     control's `pointer` (which signals \"this opens a panel\"). The mask has a fixed width:\n     tabular figures, otherwise the caret jitters from one digit to the next. */\n  .v-date-input[data-mode='input'] .v-date-input-control {\n    cursor: text;\n  }\n\n  .v-date-input[data-mode='input'] .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* `position-anchor` and the chrome come from VPopover (the `anchor` and `surface`\n     props, the latter setting `.v-panel`): only the dimensions are left here, which\n     `panel.css` deliberately does not carry. The padding is cancelled — VDatePicker handles\n     its own breathing room; compounded with `.v-popover-panel` (VPopover puts both\n     classes on the same element) because `.v-panel` declares `padding` too, and at\n     equal specificity the winner would depend on the order in which the consumer's\n     bundler concatenates the CSS. */\n  .v-popover-panel.v-date-input-panel {\n    width: max-content;\n    padding: 0;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VDateInput/VDateInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,324 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import n from "../VPopover/VPopover.js";
+import { resolveMatcher as r } from "../../utils/matcher.js";
+import { useRootAttrs as i } from "../../composables/useRootAttrs.js";
+import a from "../VInput/VInput.js";
+import { digitsOf as o } from "../../utils/text.js";
+import { caretAfterDigits as s, dateMaskFor as c, formatDateMask as l, formatDisplay as u, formatDisplayRange as d, isValidISO as f, isWithin as p, isoToMask as m, maskPlaceholder as h, parseDateMask as g } from "../../utils/date.js";
+import _ from "../VDatePicker/VDatePicker.js";
+import { calendar_today as v } from "../VIcon/icons/calendar_today.js";
+import { useFieldPanel as ee } from "../../composables/useFieldPanel.js";
+import { useMaskedField as te } from "../../composables/useMaskedField.js";
+import { computed as y, createBlock as ne, createCommentVNode as re, createElementBlock as ie, createElementVNode as ae, createSlots as oe, createVNode as b, defineComponent as x, guardReactiveProps as se, isRef as S, mergeModels as C, mergeProps as ce, normalizeClass as le, normalizeProps as ue, normalizeStyle as de, openBlock as w, ref as T, renderSlot as E, unref as D, useId as fe, useModel as pe, withCtx as O } from "vue";
+//#region src/components/VDateInput/VDateInput.vue?vue&type=script&setup=true&lang.ts
+var me = ["data-open", "data-mode"], k = 2e3, A = /*@__PURE__*/ x({
+	inheritAttrs: !1,
+	__name: "VDateInput",
+	props: /*@__PURE__*/ C({
+		selection: { default: "single" },
+		locale: { default: void 0 },
+		firstDayOfWeek: { default: void 0 },
+		min: { default: void 0 },
+		max: { default: void 0 },
+		disabledDates: {
+			type: [Array, Function],
+			default: void 0
+		},
+		showAdjacentDays: {
+			type: Boolean,
+			default: !1
+		},
+		selectAdjacentDays: {
+			type: Boolean,
+			default: !1
+		},
+		events: { default: void 0 },
+		mode: { default: void 0 },
+		showPicker: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		hint: { default: void 0 },
+		placeholder: { default: void 0 },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		pickerIcon: { default: () => v },
+		displayFormat: { default: void 0 },
+		placement: { default: "bottom-start" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(v) {
+		let x = ["readonly", "input"], C = {
+			day: "numeric",
+			month: "short",
+			year: "numeric"
+		}, A = v, j = pe(v, "modelValue"), { rootClass: he, rootStyle: ge, forwardedAttrs: _e } = i(), M = T(null), N = T(null), P = T(null), F = T(null), I = fe(), L = y(() => P.value?.el ?? null), ve = y(() => A.mode !== void 0 && x.includes(A.mode) ? A.mode : "input"), R = y(() => ve.value === "input" && A.selection === "single" ? "input" : "readonly"), z = y(() => R.value === "input"), B = y(() => !z.value || A.showPicker), { open: V, openPanel: H, closePanel: ye, onControlClick: U, onFocusout: W, onKeydown: be, onPanelMousedown: xe } = ee({
+			rootEl: M,
+			panelRef: N,
+			fieldEl: P,
+			disabled: () => A.disabled || !B.value,
+			focusInPanel: () => F.value?.focus(),
+			focusOnOpen: () => !z.value
+		}), Se = y(() => {
+			if (A.selection === "multiple") return Array.isArray(j.value) && j.value.length > 0;
+			if (A.selection === "range") {
+				let e = j.value;
+				return !!(e && (e.start || e.end));
+			}
+			return typeof j.value == "string" && !!j.value;
+		}), Ce = e(), G = y(() => A.locale ?? Ce.value), we = y(() => {
+			let e = G.value, t = A.displayFormat ?? C;
+			if (A.selection === "single") return typeof j.value == "string" && f(j.value) ? u(j.value, e, t) : "";
+			if (A.selection === "range") {
+				let n = j.value;
+				return n?.start ? n.end ? d(n.start, n.end, e, t) : u(n.start, e, t) : "";
+			}
+			return (Array.isArray(j.value) ? j.value : []).map((n) => u(n, e, t)).join(", ");
+		}), K = y(() => c(G.value)), Te = y(() => h(G.value, K.value)), Ee = y(() => r(A.disabledDates)), { draft: De, fieldModel: q, writeField: J, commitLive: Y, commitOrRevert: X, onFieldInput: Oe } = te({
+			fieldEl: L,
+			typing: () => z.value,
+			displayText: () => we.value,
+			readValue: () => typeof j.value == "string" && f(j.value) ? j.value : null,
+			writeValue: (e) => {
+				j.value = e;
+			},
+			maxDigits: () => K.value.size,
+			format: (e) => l(e, K.value),
+			caret: (e, t, n) => s(e, t, n ? K.value.separator : void 0),
+			parse: (e, t) => g(e, K.value, t ? { yearPivot: k } : void 0),
+			toMask: (e) => e ? m(e, K.value) : "",
+			acceptable: (e) => p(e, A.min, A.max) && !Ee.value(e)
+		});
+		function ke(e) {
+			let t = e.selectionStart ?? e.value.length, n = o(e.value.slice(0, t)).length, r = o(e.value), i = 0;
+			for (let e = 0; e < K.value.order.length; e++) {
+				let t = K.value.lengths[e];
+				if (n < i + t) {
+					let a = n - i;
+					if (K.value.order[e] === "year" || a !== t - 1) return;
+					let o = l((r.slice(0, i) + "0".repeat(t - a) + r.slice(i)).slice(0, K.value.size), K.value);
+					J(o, s(o, i + t, K.value.separator));
+					return;
+				}
+				i += t;
+			}
+		}
+		function Ae(e) {
+			if (!z.value) return;
+			let t = L.value;
+			if (t) {
+				if (e.key === "Enter") {
+					e.preventDefault(), X(), V.value && Q();
+					return;
+				}
+				if (e.key === "ArrowDown" && V.value) {
+					e.preventDefault(), F.value?.focus();
+					return;
+				}
+				if (e.key === "Backspace") {
+					let n = t.selectionStart;
+					if (n !== null && n === t.selectionEnd && n > 0 && !/\d/.test(t.value[n - 1] ?? "")) {
+						e.preventDefault();
+						let r = o(t.value.slice(0, n)).length, i = o(t.value), a = l(i.slice(0, r - 1) + i.slice(r), K.value);
+						J(a, s(a, r - 1)), Y();
+					}
+					return;
+				}
+				e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && !/\d/.test(e.key) && (e.preventDefault(), ke(t));
+			}
+		}
+		function je(e) {
+			if (!z.value) return;
+			let t = L.value;
+			if (!t) return;
+			e.preventDefault();
+			let n = (e.clipboardData?.getData("text") ?? "").trim(), r = f(n) ? n : g(n, K.value, { yearPivot: k });
+			if (r) {
+				let e = m(r, K.value);
+				J(e, e.length), Y();
+				return;
+			}
+			let i = t.selectionStart ?? t.value.length, a = t.selectionEnd ?? i, c = o(t.value), u = o(t.value.slice(0, i)).length, d = o(t.value.slice(0, a)).length, p = o(n), h = (c.slice(0, u) + p + c.slice(d)).slice(0, K.value.size), _ = l(h, K.value);
+			J(_, s(_, Math.min(u + p.length, h.length))), Y();
+		}
+		let Z = !1;
+		function Q() {
+			Z = !0, ye(!0), Z = !1;
+		}
+		function Me() {
+			!z.value || Z || H(!1);
+		}
+		function Ne(e) {
+			if (z.value && e.key === "Escape" && V.value) {
+				e.preventDefault(), Q();
+				return;
+			}
+			be(e);
+		}
+		let Pe = y(() => A.clearable && !A.disabled && (Se.value || z.value && !!De.value)), Fe = y(() => B.value ? A.pickerIcon : void 0), $ = t(), Ie = y(() => $.value.dateInput.open);
+		function Le() {
+			V.value ? Q() : H(!0);
+		}
+		function Re() {
+			j.value = A.selection === "multiple" ? [] : A.selection === "range" ? {
+				start: null,
+				end: null
+			} : null, z.value && J(""), Z = !0, P.value?.focus(), Z = !1;
+		}
+		function ze() {
+			A.selection === "single" && Q();
+		}
+		let Be = () => Q();
+		return (e, t) => (w(), ie("div", {
+			ref_key: "rootEl",
+			ref: M,
+			class: le(["v-date-input", D(he)]),
+			style: de(D(ge)),
+			"data-open": D(V) ? "" : void 0,
+			"data-mode": R.value,
+			onFocusout: t[4] ||= (...e) => D(W) && D(W)(...e),
+			onKeydown: Ne
+		}, [ae("div", {
+			class: "v-date-input-control",
+			onClick: t[1] ||= (...e) => D(U) && D(U)(...e)
+		}, [b(a, ce({
+			ref_key: "inputRef",
+			ref: P,
+			modelValue: D(q),
+			"onUpdate:modelValue": t[0] ||= (e) => S(q) ? q.value = e : null,
+			inputmode: z.value ? "numeric" : void 0,
+			autocomplete: z.value ? "off" : void 0
+		}, D(_e), {
+			readonly: !z.value,
+			label: v.label,
+			hint: v.hint,
+			placeholder: v.placeholder ?? (z.value ? Te.value : void 0),
+			size: v.size,
+			compact: v.compact,
+			disabled: v.disabled,
+			invalid: v.invalid,
+			clearable: v.clearable,
+			"clear-visible": Pe.value,
+			"clear-label": D($).dateInput.clear,
+			"icon-end": Fe.value,
+			"icon-end-label": Ie.value,
+			role: B.value ? "combobox" : void 0,
+			"aria-haspopup": B.value ? "dialog" : void 0,
+			"aria-expanded": B.value ? D(V) : void 0,
+			"aria-controls": B.value ? D(I) : void 0,
+			"onClick:iconEnd": Le,
+			onClear: Re,
+			onFocus: Me,
+			onInput: D(Oe),
+			onChange: D(X),
+			onBlur: D(X),
+			onKeydown: Ae,
+			onPaste: je
+		}), null, 16, [
+			"modelValue",
+			"inputmode",
+			"autocomplete",
+			"readonly",
+			"label",
+			"hint",
+			"placeholder",
+			"size",
+			"compact",
+			"disabled",
+			"invalid",
+			"clearable",
+			"clear-visible",
+			"clear-label",
+			"icon-end",
+			"icon-end-label",
+			"role",
+			"aria-haspopup",
+			"aria-expanded",
+			"aria-controls",
+			"onInput",
+			"onChange",
+			"onBlur"
+		])]), B.value ? (w(), ne(n, {
+			key: 0,
+			id: D(I),
+			ref_key: "panelRef",
+			ref: N,
+			open: D(V),
+			"onUpdate:open": t[3] ||= (e) => S(V) ? V.value = e : null,
+			mode: "manual",
+			anchor: "--date-input-anchor",
+			placement: v.placement,
+			surface: "",
+			role: "dialog",
+			"aria-label": v.label ?? D($).dateInput.label,
+			class: "v-date-input-panel",
+			onMousedown: D(xe)
+		}, {
+			default: O(() => [b(_, {
+				ref_key: "pickerRef",
+				ref: F,
+				modelValue: j.value,
+				"onUpdate:modelValue": t[2] ||= (e) => j.value = e,
+				selection: v.selection,
+				locale: G.value,
+				"first-day-of-week": v.firstDayOfWeek,
+				min: v.min,
+				max: v.max,
+				"disabled-dates": v.disabledDates,
+				"show-adjacent-days": v.showAdjacentDays,
+				"select-adjacent-days": v.selectAdjacentDays,
+				events: v.events,
+				onSelect: ze
+			}, oe({ _: 2 }, [e.$slots.day ? {
+				name: "day",
+				fn: O((t) => [E(e.$slots, "day", ue(se(t)))]),
+				key: "0"
+			} : void 0, e.$slots.footer ? {
+				name: "footer",
+				fn: O(() => [E(e.$slots, "footer", { close: Be })]),
+				key: "1"
+			} : void 0]), 1032, [
+				"modelValue",
+				"selection",
+				"locale",
+				"first-day-of-week",
+				"min",
+				"max",
+				"disabled-dates",
+				"show-adjacent-days",
+				"select-adjacent-days",
+				"events"
+			])]),
+			_: 3
+		}, 8, [
+			"id",
+			"open",
+			"placement",
+			"aria-label",
+			"onMousedown"
+		])) : re("", !0)], 46, me));
+	}
+});
+//#endregion
+export { A as default };
+
+//# sourceMappingURL=VDateInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VDateInput/VDateInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDateInput.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDateInput/VDateInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useId, watchEffect } from 'vue'\n\nimport VDatePicker from '../VDatePicker/VDatePicker.vue'\nimport type {\n  DatePickerEvent,\n  DatePickerSelection,\n  DatePickerValue,\n  DateMatcher,\n  DateRange,\n} from '../VDatePicker/VDatePicker.vue'\nimport {\n  caretAfterDigits,\n  dateMaskFor,\n  formatDateMask,\n  formatDisplay,\n  formatDisplayRange,\n  isValidISO,\n  isWithin,\n  isoToMask,\n  maskPlaceholder,\n  parseDateMask,\n} from '../../utils/date'\nimport { digitsOf } from '../../utils/text'\nimport { resolveMatcher } from '../../utils/matcher'\nimport { isDev } from '../../utils/env'\nimport { calendar_today as calendarTodayIcon } from '../VIcon/icons/calendar_today'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport VPopover from '../VPopover/VPopover.vue'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { useMaskedField } from '../../composables/useMaskedField'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n// @a11y @core\n/**\n * A field for choosing a date: a text field, and a calendar in a panel below it.\n *\n * The panel is opened from code rather than by the browser, and that is not a detail: a\n * text input cannot be declared as the thing that opens a popover, and opening it\n * ourselves is also what lets the focus be moved INTO the calendar's grid, so the\n * keyboard lands where the dates are. Closing is ours too — the focus leaving the\n * component, or Escape.\n *\n * The field itself comes in two forms. It can be TYPED into, which is the default: the\n * reader types digits only and the separators appear as they go, in the order and with\n * the punctuation their language uses. Or it can be read-only, in which case the calendar\n * is the only way in.\n *\n * That is a different question from WHAT is being chosen — one date, a period, or several\n * dates — which is passed straight through to the calendar.\n */\ntype Placement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** Whether the field can be typed into, or only filled from the calendar. */\nexport type DateInputMode = 'readonly' | 'input'\n\nconst MODES: DateInputMode[] = ['readonly', 'input']\n\n/**\n * The century a two-digit year is expanded into — \"10/06/26\" becomes 2026 — applied only\n * when the reader leaves the field.\n *\n * It is FIXED and never derived from the current year. A sliding rule would make the\n * component's behaviour depend on when it runs, which is the same objection that keeps\n * today's date out of VDatePicker's setup, and it would give the tests a shelf life.\n */\nconst YEAR_PIVOT = 2000\n\nconst DEFAULT_DISPLAY_FORMAT: Intl.DateTimeFormatOptions = {\n  day: 'numeric',\n  month: 'short',\n  year: 'numeric',\n}\n\ninterface DateInputProps {\n  // Everything from here to `events` is handed straight to the calendar.\n  /** What is being chosen: one date, a period between two, or several separate dates. */\n  selection?: DatePickerSelection\n  /**\n   * A BCP 47 locale, which decides the month and day names, the first day of the week and\n   * the order the field is typed in. It TAKES PRECEDENCE over the design system's global\n   * locale and falls back to it — which is why it has no literal default: `undefined` has\n   * to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /** Forces the day the weeks start on, from 0 for Sunday to 6 for Saturday. */\n  firstDayOfWeek?: number\n  /** The earliest date that can be chosen, as an ISO string. */\n  min?: string\n  /** The latest date that can be chosen, as an ISO string. */\n  max?: string\n  /** Dates that cannot be chosen, as a list or as a function. */\n  disabledDates?: DateMatcher\n  /** Fills the corners of the grid with the greyed days of the neighbouring months. */\n  showAdjacentDays?: boolean\n  /** Lets those neighbouring days be clicked, which implies showing them. */\n  selectAdjacentDays?: boolean\n  /** Events to mark under the days they fall on. */\n  events?: DatePickerEvent[]\n  // From here on: the field.\n  /**\n   * Whether the field can be TYPED into — the default, using the numeric form of the\n   * reader's language — or is read-only, the calendar then being the only way in.\n   *\n   * Typing is reserved for choosing a SINGLE date: a period or a list falls back to\n   * read-only, there being no sensible way to type either.\n   */\n  mode?: DateInputMode\n  /**\n   * Offers the date picker alongside a field that can be typed into: an icon at the end of\n   * the field, and a panel that opens on focus. It means nothing in read-only mode, where\n   * the picker is already the only way to choose.\n   */\n  showPicker?: boolean\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Marks the field as invalid — for a rule of your own. */\n  invalid?: boolean\n  /** Offers a cross that empties the value, shown before the end icon. */\n  clearable?: boolean\n  /**\n   * The icon that opens the date picker, at the end of the field. The clear cross appears\n   * to its left rather than in its place, and no icon is rendered at all when there is no\n   * panel to open.\n   */\n  pickerIcon?: IconSource\n  /**\n   * How the date is WRITTEN OUT in the field. It has no effect on a field being typed\n   * into, which necessarily shows the numeric form one types — so it concerns the\n   * read-only mode, and the period and list selections, which fall back to it.\n   */\n  displayFormat?: Intl.DateTimeFormatOptions\n  /** Where the panel opens relative to the field. */\n  placement?: Placement\n}\n\nconst props = withDefaults(defineProps<DateInputProps>(), {\n  selection: 'single',\n  locale: undefined,\n  firstDayOfWeek: undefined,\n  min: undefined,\n  max: undefined,\n  disabledDates: undefined,\n  showAdjacentDays: false,\n  selectAdjacentDays: false,\n  events: undefined,\n  // Deliberately left undefined rather than defaulted to the typed mode: that is what\n  // distinguishes \"the prop was not given\" from \"the prop was given this value\", and\n  // therefore what allows warning ONLY the consumer who explicitly asked for something\n  // that cannot work.\n  mode: undefined,\n  showPicker: false,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  invalid: false,\n  clearable: true,\n  pickerIcon: () => calendarTodayIcon,\n  // Left undefined rather than defaulted to the format object, for the same reason: it is\n  // what lets the component notice that a consumer has asked for a display format in a\n  // mode where it has no effect, and say so.\n  displayFormat: undefined,\n  placement: 'bottom-start',\n})\n\nconst model = defineModel<DatePickerValue>({ default: null })\n\ndefineSlots<{\n  /** What a day cell shows, handed straight to the calendar. */\n  day?(props: {\n    iso: string\n    day: number\n    inMonth: boolean\n    disabled: boolean\n    selected: boolean\n    today: boolean\n    inRange: boolean\n    events: DatePickerEvent[]\n  }): unknown\n  /**\n   * The strip at the foot of the panel — actions, or preset dates such as \"today\". It\n   * receives `close`, which is what lets one of those buttons dismiss the panel.\n   */\n  footer?(props: { close: () => void }): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field,\n// which is what a consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VDatePicker> | null>(null)\nconst panelId = useId()\n\n/** The real input inside the field, which the mask and the caret work on. */\nconst fieldEl = computed<HTMLInputElement | null>(() => inputRef.value?.el ?? null)\n\n/** What was asked for, falling back to the default when nothing or nonsense was given. */\nconst requestedMode = computed<DateInputMode>(() =>\n  props.mode !== undefined && MODES.includes(props.mode) ? props.mode : 'input',\n)\n/**\n * What is actually used. Typing is only possible for a single date: a period or a list\n * has no form one could type into a single field.\n */\nconst resolvedMode = computed<DateInputMode>(() =>\n  requestedMode.value === 'input' && props.selection === 'single' ? 'input' : 'readonly',\n)\nconst typing = computed(() => resolvedMode.value === 'input')\n\n/**\n * Whether there is a panel at all. The calendar is only optional beside a field one can\n * type into: read-only, it is the only way to choose anything.\n */\nconst hasPanel = computed(() => !typing.value || props.showPicker)\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (props.mode !== undefined && !MODES.includes(props.mode))\n      console.warn(\n        `[VDateInput] unknown mode \"${props.mode}\": use \"input\" (the default) or \"readonly\".`,\n      )\n    // Tested on the PROP and not on what was resolved from it: typing being the default,\n    // a period or a list falls back on its own with nobody having asked for anything.\n    // Only a consumer who explicitly asked to type deserves to be told it cannot work.\n    if (props.mode === 'input' && props.selection !== 'single')\n      console.warn(\n        `[VDateInput] mode=\"input\" ignored in \"${props.selection}\" selection: a range or a list of dates cannot be typed on the keyboard.`,\n      )\n    // Here it is the RESOLVED mode that matters: the format really was supplied, and it\n    // really will have no effect, whichever route led to a typed field. The warning stays\n    // something the consumer can act on.\n    if (props.displayFormat && typing.value)\n      console.warn(\n        '[VDateInput] displayFormat is ignored in \"input\" mode (the default): the field displays the locale\\'s numeric mask, the only typeable format. Pass mode=\"readonly\" for a formatted display.',\n      )\n  })\n}\n\n// The whole \"field plus panel\" shell, shared with VTimeInput: opening and closing, the\n// focus leaving the component, a click on the field, and the Escape, ArrowDown and Enter\n// keys.\nconst { open, openPanel, closePanel, onControlClick, onFocusout, onKeydown, onPanelMousedown } =\n  useFieldPanel({\n    rootEl,\n    panelRef,\n    fieldEl: inputRef,\n    // With no panel there is nothing to open. This is the composable's SINGLE cut-off\n    // point, and every way in passes through it — clicking the field, focusing it, the\n    // down arrow, Enter, the icon — so the condition never has to be repeated in a\n    // handler.\n    disabled: () => props.disabled || !hasPanel.value,\n    focusInPanel: () => pickerRef.value?.focus(),\n    // Beside a field one types into, the panel opens WITHOUT taking the focus: typing\n    // carries on in the field, and the down arrow remains the way into the grid.\n    focusOnOpen: () => !typing.value,\n  })\n\nconst hasValue = computed(() => {\n  if (props.selection === 'multiple') return Array.isArray(model.value) && model.value.length > 0\n  if (props.selection === 'range') {\n    const r = model.value as DateRange | null\n    return !!(r && (r.start || r.end))\n  }\n  return typeof model.value === 'string' && !!model.value\n})\n\nconst vectisLocale = useLocale()\n/* The prop wins, and the design system's global locale is what it falls back to.\n\n   TRAP — this component is the SINGLE place that resolution happens: what flows down to\n   the calendar is the RESULT, never the prop, which would usually be undefined and would\n   have the calendar resolve the language a second time — with every chance of the two\n   disagreeing after a later change. */\nconst resolvedLocale = computed(() => props.locale ?? vectisLocale.value)\n\nconst displayText = computed(() => {\n  const locale = resolvedLocale.value\n  const displayFormat = props.displayFormat ?? DEFAULT_DISPLAY_FORMAT\n  if (props.selection === 'single') {\n    return typeof model.value === 'string' && isValidISO(model.value)\n      ? formatDisplay(model.value, locale, displayFormat)\n      : ''\n  }\n  if (props.selection === 'range') {\n    const r = model.value as DateRange | null\n    if (!r?.start) return ''\n    if (!r.end) return formatDisplay(r.start, locale, displayFormat)\n    return formatDisplayRange(r.start, r.end, locale, displayFormat)\n  }\n  const list = Array.isArray(model.value) ? model.value : []\n  return list.map((iso) => formatDisplay(iso, locale, displayFormat)).join(', ')\n})\n\n/* From here on: everything the typed field needs. */\n\nconst mask = computed(() => dateMaskFor(resolvedLocale.value))\nconst maskHint = computed(() => maskPlaceholder(resolvedLocale.value, mask.value))\nconst isDisabledDate = computed(() => resolveMatcher(props.disabledDates))\n\n/**\n * Whether a date the reader has finished typing may actually be taken: it has to fall\n * within the allowed bounds and not be one of the excluded days.\n */\nconst acceptable = (iso: string) =>\n  isWithin(iso, props.min, props.max) && !isDisabledDate.value(iso)\n\n/*\n * The mask machinery — the text being typed, the bridge to the value, the reformatting\n * that preserves the caret, the commit as soon as the date is complete and the silent\n * revert when it is not — is shared with VTimeInput and lives in `useMaskedField`.\n *\n * What is injected here is the date VOCABULARY alone: the order of the fields, the\n * separator between them and their widths, all derived from the reader's language.\n */\nconst { draft, fieldModel, writeField, commitLive, commitOrRevert, onFieldInput } = useMaskedField({\n  fieldEl,\n  typing: () => typing.value,\n  displayText: () => displayText.value,\n  readValue: () =>\n    typeof model.value === 'string' && isValidISO(model.value) ? model.value : null,\n  writeValue: (iso) => {\n    model.value = iso\n  },\n  maxDigits: () => mask.value.size,\n  format: (digits) => formatDateMask(digits, mask.value),\n  caret: (text, digitsBefore, inserting) =>\n    caretAfterDigits(text, digitsBefore, inserting ? mask.value.separator : undefined),\n  // A two-digit year is only expanded on the FINAL commit, when the reader leaves the\n  // field — never while they are still typing, where \"26\" may well be on its way to\n  // becoming \"2026\".\n  parse: (text, final) =>\n    parseDateMask(text, mask.value, final ? { yearPivot: YEAR_PIVOT } : undefined),\n  toMask: (iso) => (iso ? isoToMask(iso, mask.value) : ''),\n  acceptable,\n})\n\n/**\n * Typing anything that is not a digit — a slash, a dot, a space — completes the field\n * being typed with a leading zero and moves on to the next. It is what lets someone type\n * \"5/6/2026\" and get the same result as typing all eight digits.\n *\n * It applies to the day and the month only: a year cut short has no such convention, \"26\"\n * being neither 0026 nor 2026 until the reader has finished.\n */\nfunction padCurrentField(el: HTMLInputElement) {\n  const start = el.selectionStart ?? el.value.length\n  const before = digitsOf(el.value.slice(0, start)).length\n  const digits = digitsOf(el.value)\n  let offset = 0\n  for (let k = 0; k < mask.value.order.length; k++) {\n    const len = mask.value.lengths[k] as number\n    if (before < offset + len) {\n      const filled = before - offset\n      if (mask.value.order[k] === 'year' || filled !== len - 1) return\n      const next = digits.slice(0, offset) + '0'.repeat(len - filled) + digits.slice(offset)\n      const text = formatDateMask(next.slice(0, mask.value.size), mask.value)\n      writeField(text, caretAfterDigits(text, offset + len, mask.value.separator))\n      return\n    }\n    offset += len\n  }\n}\n\n// @keyboard @core — the keys the mask itself needs: completing a field with a separator,\n// erasing across one, and the down arrow, which is the one explicit way from the field\n// into the calendar.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (!typing.value) return\n  const el = fieldEl.value\n  if (!el) return\n\n  if (event.key === 'Enter') {\n    // Cancelling the default does two things at once: it stops the surrounding form from\n    // being submitted, and it stops the panel this keystroke has just closed from being\n    // reopened as the event travels up to the root.\n    event.preventDefault()\n    commitOrRevert()\n    if (open.value) closeAndFocus()\n    return\n  }\n  if (event.key === 'ArrowDown' && open.value) {\n    // The one explicit route from the field into the grid of days.\n    event.preventDefault()\n    pickerRef.value?.focus()\n    return\n  }\n  if (event.key === 'Backspace') {\n    const start = el.selectionStart\n    if (\n      start !== null &&\n      start === el.selectionEnd &&\n      start > 0 &&\n      !/\\d/.test(el.value[start - 1] ?? '')\n    ) {\n      // TRAP — a separator is PLACED by the mask and never typed, so erasing one has to\n      // erase the DIGIT before it, which is what the reader believes they are erasing.\n      // Left alone, the mask would write the separator straight back and the key would\n      // look dead.\n      event.preventDefault()\n      const n = digitsOf(el.value.slice(0, start)).length\n      const digits = digitsOf(el.value)\n      const text = formatDateMask(digits.slice(0, n - 1) + digits.slice(n), mask.value)\n      writeField(text, caretAfterDigits(text, n - 1))\n      commitLive()\n    }\n    return\n  }\n  if (\n    event.key.length === 1 &&\n    !event.ctrlKey &&\n    !event.metaKey &&\n    !event.altKey &&\n    !/\\d/.test(event.key)\n  ) {\n    event.preventDefault()\n    padCurrentField(el)\n  }\n}\n\n/**\n * Pasting. A date recognizable as a whole — in the ISO form, or already written the way\n * this field writes them — is adopted as it stands; anything else contributes its digits\n * alone.\n *\n * Without this, pasting \"2026-06-10\" into a field expecting day, month, year would\n * produce \"20/26/0610\": the digits would be taken in order and the separators ignored.\n */\nfunction onFieldPaste(event: ClipboardEvent) {\n  if (!typing.value) return\n  const el = fieldEl.value\n  if (!el) return\n  event.preventDefault()\n  const pasted = (event.clipboardData?.getData('text') ?? '').trim()\n  const iso = isValidISO(pasted)\n    ? pasted\n    : parseDateMask(pasted, mask.value, { yearPivot: YEAR_PIVOT })\n  if (iso) {\n    const text = isoToMask(iso, mask.value)\n    writeField(text, text.length)\n    commitLive()\n    return\n  }\n  const start = el.selectionStart ?? el.value.length\n  const end = el.selectionEnd ?? start\n  const digits = digitsOf(el.value)\n  const from = digitsOf(el.value.slice(0, start)).length\n  const to = digitsOf(el.value.slice(0, end)).length\n  const inserted = digitsOf(pasted)\n  const next = (digits.slice(0, from) + inserted + digits.slice(to)).slice(0, mask.value.size)\n  const text = formatDateMask(next, mask.value)\n  writeField(text, caretAfterDigits(text, Math.min(from + inserted.length, next.length)))\n  commitLive()\n}\n\n// @a11y\n/**\n * TRAP — closing the panel hands the focus back to the field, and beside a field one\n * types into the panel opens ON FOCUS: the two would chase each other and the panel would\n * never close.\n *\n * This lock covers the focus call, which is synchronous. EVERY close that returns the\n * focus must go through here; closing directly brings the loop straight back.\n */\nlet refocusing = false\nfunction closeAndFocus() {\n  refocusing = true\n  closePanel(true)\n  refocusing = false\n}\n\nfunction onFieldFocus() {\n  if (!typing.value || refocusing) return\n  openPanel(false)\n}\n\n// @keyboard @a11y\nfunction onRootKeydown(event: KeyboardEvent) {\n  if (typing.value && event.key === 'Escape' && open.value) {\n    event.preventDefault()\n    closeAndFocus()\n    return\n  }\n  onKeydown(event)\n}\n\n/*\n * The clear cross is the field's own, which renders it BEFORE the end icon rather than in\n * its place — the convention every field in the design system follows, so the two live\n * side by side.\n *\n * Whether it is shown has to be answered explicitly here: outside the typed mode the field\n * is read-only, and a read-only field hides its cross by default, rightly so — but here\n * the value comes from the panel, so there is something to clear all the same.\n */\nconst canClear = computed(\n  () => props.clearable && !props.disabled && (hasValue.value || (typing.value && !!draft.value)),\n)\nconst endIcon = computed<IconSource | undefined>(() =>\n  hasPanel.value ? props.pickerIcon : undefined,\n)\n// @a11y @devwarn\n/*\n * TRAP — the LABEL is defined at all times, even when no icon is rendered at all.\n *\n * The helper detecting a click handler on an icon warns AT SETUP if one is attached\n * without a label, and it has no way of knowing whether an icon exists. Since the\n * listener here is attached permanently and that detection is static, making the label\n * conditional would produce a false warning every time a field without a calendar is\n * mounted.\n *\n * The wording itself has no prop: the dictionary is where it is changed — see `src/i18n/`.\n */\nconst m = useMessages()\n\nconst endIconLabel = computed(() => m.value.dateInput.open)\n\nfunction onEndIcon() {\n  if (open.value) closeAndFocus()\n  // Clicking the icon is an explicit request for the calendar, and the focus has already\n  // left the field for the button — so carrying it into the grid is right in both modes.\n  else openPanel(true)\n}\n// @a11y\n/*\n * Emptying the value, called by the field as it emits its clear event.\n *\n * TRAP — the focus is taken here, under the lock, on purpose: the field focuses itself\n * immediately afterwards, and focusing an element that ALREADY has the focus emits no\n * event at all. That is what stops the panel reopening. Taking the lock away from this\n * function brings the reopening straight back.\n */\nfunction clearValue() {\n  model.value =\n    props.selection === 'multiple'\n      ? []\n      : props.selection === 'range'\n        ? { start: null, end: null }\n        : null\n  // The typed text is emptied EXPLICITLY: when the value was already empty, nothing\n  // changes, and the guard that keeps the field and the value from chasing each other\n  // would leave the text where it was.\n  if (typing.value) writeField('')\n  refocusing = true\n  inputRef.value?.focus()\n  refocusing = false\n}\n\n/**\n * A date was chosen in the calendar. Choosing ONE date finishes the job, so the panel\n * closes; a period or a list is still being built and it stays open.\n */\nfunction onSelect() {\n  if (props.selection === 'single') closeAndFocus()\n}\n\nconst close = () => closeAndFocus()\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-date-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-mode=\"resolvedMode\"\n    @focusout=\"onFocusout\"\n    @keydown=\"onRootKeydown\"\n  >\n    <div class=\"v-date-input-control\" @click=\"onControlClick\">\n      <!-- The field is declared a combobox rather than left as the plain text box it\n           implicitly is, because a text box may not carry the attribute saying whether\n           something is expanded — and a text field with a panel attached IS the combobox\n           pattern, the same role VCombobox gives its own field.\n\n           The role and the three attributes are all conditioned on the SAME thing, so the\n           role never appears without the expanded state it requires, and nothing ever\n           points at a panel that was not rendered. -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"fieldModel\"\n        :inputmode=\"typing ? 'numeric' : undefined\"\n        :autocomplete=\"typing ? 'off' : undefined\"\n        v-bind=\"forwardedAttrs\"\n        :readonly=\"!typing\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :placeholder=\"placeholder ?? (typing ? maskHint : undefined)\"\n        :size=\"size\"\n        :compact=\"compact\"\n        :disabled=\"disabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"canClear\"\n        :clear-label=\"m.dateInput.clear\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        :role=\"hasPanel ? 'combobox' : undefined\"\n        :aria-haspopup=\"hasPanel ? 'dialog' : undefined\"\n        :aria-expanded=\"hasPanel ? open : undefined\"\n        :aria-controls=\"hasPanel ? panelId : undefined\"\n        @click:icon-end=\"onEndIcon\"\n        @clear=\"clearValue\"\n        @focus=\"onFieldFocus\"\n        @input=\"onFieldInput\"\n        @change=\"commitOrRevert\"\n        @blur=\"commitOrRevert\"\n        @keydown=\"onFieldKeydown\"\n        @paste=\"onFieldPaste\"\n      />\n    </div>\n\n    <!-- With no panel rendered there is nothing to hold a reference to, and the open state\n         — which is fed by the panel's own events — can no longer become true. The absence\n         of a panel is therefore self-enforcing. -->\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--date-input-anchor\"\n      :placement=\"placement\"\n      surface\n      role=\"dialog\"\n      :aria-label=\"label ?? m.dateInput.label\"\n      class=\"v-date-input-panel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <VDatePicker\n        ref=\"pickerRef\"\n        v-model=\"model\"\n        :selection=\"selection\"\n        :locale=\"resolvedLocale\"\n        :first-day-of-week=\"firstDayOfWeek\"\n        :min=\"min\"\n        :max=\"max\"\n        :disabled-dates=\"disabledDates\"\n        :show-adjacent-days=\"showAdjacentDays\"\n        :select-adjacent-days=\"selectAdjacentDays\"\n        :events=\"events\"\n        @select=\"onSelect\"\n      >\n        <template v-if=\"$slots.day\" #day=\"slotProps\">\n          <slot name=\"day\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots.footer\" #footer>\n          <slot name=\"footer\" :close=\"close\" />\n        </template>\n      </VDatePicker>\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-date-input {\n    /* Confines the anchor to this instance (the root = the common ancestor of the\n       control and the panel) */\n    anchor-scope: --date-input-anchor;\n    display: block;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-date-input-control {\n    anchor-name: --date-input-anchor;\n    display: block;\n    cursor: pointer;\n  }\n\n  /* Input mode: the field is editable, and the <input>'s text caret takes over from the\n     control's `pointer` (which signals \"this opens a panel\"). The mask has a fixed width:\n     tabular figures, otherwise the caret jitters from one digit to the next. */\n  .v-date-input[data-mode='input'] .v-date-input-control {\n    cursor: text;\n  }\n\n  .v-date-input[data-mode='input'] .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* `position-anchor` and the chrome come from VPopover (the `anchor` and `surface`\n     props, the latter setting `.v-panel`): only the dimensions are left here, which\n     `panel.css` deliberately does not carry. The padding is cancelled — VDatePicker handles\n     its own breathing room; compounded with `.v-popover-panel` (VPopover puts both\n     classes on the same element) because `.v-panel` declares `padding` too, and at\n     equal specificity the winner would depend on the order in which the consumer's\n     bundler concatenates the CSS. */\n  .v-popover-panel.v-date-input-panel {\n    width: max-content;\n    padding: 0;\n  }\n}\n</style>\n"],"mappings":"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"}