@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/primitives/date-range-picker/src/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","names":[],"sources":["../../../../../packages/primitives/date-range-picker/src/DateRangePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateRangeLabels } from \"@ecoma-io/loom-labels\";\nimport type {\n  CalendarPanelLabels,\n  DateSegmentLabels,\n  RangeCellLabels,\n} from \"@ecoma-io/loom-labels\";\n\n/**\n * A span of days as the outside world holds it: two plain ISO `YYYY-MM-DD`\n * strings, both optional.\n *\n * An object rather than a `[start, end]` tuple, and both halves optional\n * rather than one string with a separator in it, because **a half-made range\n * has to be representable**. Between the first click and the second there is a\n * range with a start and no end, and that state lives on screen for as long as\n * it takes a reader to decide — a tuple has to fill the second slot with\n * something, and a single string has to invent a spelling for \"not yet\". Both\n * end up lying about a state the control is genuinely in. `{ start }` says it.\n *\n * It reads at a call site, too: `range.start` needs no comment, `range[0]`\n * needs one.\n */\nexport interface DateRange {\n  /** The first day of the span, ISO `YYYY-MM-DD`. Absent while nothing has been chosen. */\n  start?: string | undefined;\n  /** The last day of the span, ISO `YYYY-MM-DD`, and part of it. Absent while only the start has been chosen. */\n  end?: string | undefined;\n}\n\n/**\n\n/** A day, month and year in the control's locale — the status line's own shape, without the weekday a cell's name carries. */\nfunction formatDay(locale: string, date: DateValue): string {\n  return new Intl.DateTimeFormat(locale, {\n    day: \"numeric\",\n    month: \"long\",\n    year: \"numeric\",\n  }).format(date.toDate(getLocalTimeZone()));\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n *\n * The `day`/`days` choice below is English's plural rule sitting in English's\n * own bag, which is the only place a plural rule belongs. It is not extracted,\n * shared or applied to anything a host supplies: `status` hands over the number\n * and receives a finished sentence, so a language with one form or with six\n * selects its own.\n */\nexport const DATE_RANGE_LABELS: DateRangeLabels = {\n  startDate: \"Start date\",\n  endDate: \"End date\",\n  status: ({ locale, start, end, days }) => {\n    const anchor = start ?? end;\n    if (!anchor) return \"No dates chosen. Choose the first day of the range.\";\n    if (!start || !end || days === undefined) {\n      return `${formatDay(locale, anchor)} chosen. Choose the last day of the range.`;\n    }\n    return `${formatDay(locale, start)} to ${formatDay(locale, end)}, ${String(days)} ${days === 1 ? \"day\" : \"days\"}.`;\n  },\n};\n\n/**\n * Everything this control can be asked to say: the three shared slices, plus\n * its own. Annotate a bag with\n * `LabelOverrides<DateRangePickerLabels>` and never with this, which is total.\n */\nexport type DateRangePickerLabels = DateSegmentLabels &\n  CalendarPanelLabels &\n  RangeCellLabels &\n  DateRangeLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId, useTemplateRef } from \"vue\";\nimport {\n  DateRangePickerRoot,\n  DateRangePickerAnchor,\n  DateRangePickerField,\n  DateRangePickerInput,\n  DateRangePickerTrigger,\n  DateRangePickerContent,\n  DateRangePickerCalendar,\n  DateRangePickerHeader,\n  DateRangePickerPrev,\n  DateRangePickerHeading,\n  DateRangePickerNext,\n  DateRangePickerGrid,\n  DateRangePickerGridHead,\n  DateRangePickerGridRow,\n  DateRangePickerHeadCell,\n  DateRangePickerGridBody,\n  DateRangePickerCell,\n  DateRangePickerCellTrigger,\n} from \"reka-ui\";\nimport { CalendarRange, ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport {\n  getLocalTimeZone,\n  isSameDay,\n  isToday,\n  parseDate,\n  toCalendarDate,\n  type DateValue,\n} from \"@internationalized/date\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport {\n  CALENDAR_PANEL_LABELS,\n  DATE_SEGMENT_LABELS,\n  RANGE_CELL_LABELS,\n  emptySegmentValueText,\n  isDateSegmentPart,\n  type RangeCellPart,\n} from \"@ecoma-io/loom-labels\";\n\n/** The range as Reka models it, which is the same shape carrying calendar objects. */\ntype CalendarRangeValue = { start: DateValue | undefined; end: DateValue | undefined };\n\n/** Which end of the range a segment belongs to, as Reka's field parts name it. */\ntype SegmentType = \"start\" | \"end\";\n\n/**\n * DateRangePicker — a span of days with a first and a last, entered either by\n * typing both ends into one segmented field or by picking them out of a\n * two-month calendar. Reach for it wherever the value is the window rather\n * than the day: a report period, a booking, a filter over a table.\n *\n * It is DatePicker with two ends. Everything that control decides, this one\n * inherits and does not restate: the segmented field rather than a native\n * input, the roving tabindex that makes the whole field one Tab stop, the\n * popover owning its own open state rather than trusting a host to echo a\n * value back, the calendar laid out by a real table because `display: flex` on\n * a `tr` drops its row semantics, and the panel animating as one piece with no\n * per-cell stagger. Read `DatePicker.vue` for the reasoning behind each; the\n * comments below cover only what having two ends changes.\n *\n * **The model value is a pair of plain ISO date strings** — see `DateRange`\n * above for why it is an object with two optional halves rather than a tuple.\n * As in DatePicker, `min`, `max` and both emitted halves speak that one\n * format, and a value that does not parse is read as *not chosen* rather than\n * thrown on.\n *\n * Choosing the end before the start is not an error and is not refused: the\n * two are sorted on the way out, so a reader who clicks the 20th and then the\n * 14th gets `{ start: \"…-14\", end: \"…-20\" }`. Refusing it would mean a control\n * that rejects the second half of every backwards gesture with nothing on\n * screen explaining what it wanted instead.\n *\n * For a single day reach for DatePicker; for a day and a time together,\n * DateTimePicker. Two DatePickers side by side are two values and two\n * validations, and nothing between them knows that the second must not fall\n * before the first — which is the whole reason this control exists.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()` — the row's id, the id of its hint or error line, and\n * `required` / `invalid` / `disabled` / `readonly` / `name` — so `<Field\n * label=\"Report period\" error=\"…\"><DateRangePicker /></Field>` needs no\n * attributes at the call site. Every prop below still wins over the row when it\n * is set, in both directions, which is why the four booleans default to\n * `undefined` rather than `false`. The row describes the field as a whole and\n * not either half: a description repeated onto both ends would be read out\n * twice for one span.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen span, as `{ start, end }` ISO `YYYY-MM-DD` strings. Either\n     * half may be absent: `{}` is nothing chosen, `{ start }` is a range\n     * half made. The explicit `| undefined` is what lets `v-model` bind a ref\n     * that clears.\n     */\n    modelValue?: DateRange | undefined;\n    /** The earliest choosable day, ISO `YYYY-MM-DD`. Days before it are announced disabled and skipped by the keyboard. */\n    min?: string;\n    /** The latest choosable day, ISO `YYYY-MM-DD`. Days after it are announced disabled and skipped by the keyboard. */\n    max?: string;\n    /** BCP 47 tag driving the order of the field's segments, the month and weekday names, and which day a week starts on. */\n    locale?: string;\n    /** How many months the calendar shows at once. Two is the default because a range is usually read across a month boundary; one is for a host that knows it is rendering into a narrow shell. */\n    months?: 1 | 2;\n    /** Unavailable: dims the control, refuses the calendar, and takes the field out of the tab order. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the span without allowing an edit: the field stays a Tab stop and stays submitted, and the calendar button is dropped because nothing in the calendar could be chosen. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the field mandatory to assistive tech (`aria-required` on the group holding both halves). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`. Reka submits the whole span through one hidden input, as `start - end`. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `DateRangePickerLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: six of the thirteen names replace English literals Reka UI\n     * writes of its own accord, and a language is set once with\n     * `provideLoomLabels`.\n     */\n    labels?: LabelOverrides<DateRangePickerLabels>;\n  }>(),\n  {\n    locale: \"en\",\n    months: 2,\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning: `false` is a caller's decision that must beat the row, absent\n    // is a caller saying nothing, and only `undefined` survives to mean that\n    // past Vue's absent-Boolean-casts-to-false rule.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen span as ISO `YYYY-MM-DD` strings. A half-made range arrives as `{ start }`; a cleared one as `{}`. */\n  \"update:modelValue\": [value: DateRange];\n}>();\n\nconst SEGMENT_TYPES: readonly SegmentType[] = [\"start\", \"end\"];\n\n// Four slots, one prop. There is no single `text` for the whole control\n// because there is no single slot: the segment names and the popover's chrome\n// are shared vocabularies with their own registry entries, and only the third\n// is this control's own. Naming them apart is what keeps a reader of the\n// template able to see which one a binding came from.\nconst dateText = useLabels(\"dateSegments\", DATE_SEGMENT_LABELS, () => props.labels);\nconst panelText = useLabels(\"calendarPanel\", CALENDAR_PANEL_LABELS, () => props.labels);\nconst cellText = useLabels(\"rangeCell\", RANGE_CELL_LABELS, () => props.labels);\nconst text = useLabels(\"dateRange\", DATE_RANGE_LABELS, () => props.labels);\n\n// Read through the ref on every call rather than resolved into a lookup table\n// once: a table built in `setup` freezes the first language and every later\n// switch silently does nothing. `undefined` for the `literal` separators, which\n// Reka renders `aria-hidden` and which must stay unnamed.\nfunction segmentLabel(part: string): string | undefined {\n  return isDateSegmentPart(part) ? dateText.value[part] : undefined;\n}\n\n// The companion to `segmentLabel`, and the reason it returns an object rather\n// than a string is in `emptySegmentValueText`: Reka's `aria-valuetext` is a\n// hard-coded \"Empty\" only while the segment holds nothing, so this replaces\n// that case and leaves the filled one — a number, and the locale's own month\n// name — exactly as Reka wrote it.\n//\n// The month is the exception. See DatePicker's `segmentValueText` for the full\n// account; the same reasoning and the same `filledMonth` label apply here,\n// with the month taken from whichever half is rendering the segment.\nfunction segmentValueText(\n  part: string,\n  value: string,\n  monthValue?: number,\n): { \"aria-valuetext\"?: string } {\n  const empty = emptySegmentValueText(part, value, dateText.value.empty);\n  if (empty[\"aria-valuetext\"]) return empty;\n  if (part === \"month\" && monthValue !== undefined)\n    return {\n      \"aria-valuetext\": dateText.value.filledMonth({ value: monthValue, locale: props.locale }),\n    };\n  return {};\n}\n\n// Routed exactly as DatePicker routes it, and for the same reasons: `class`\n// sizes the whole control so it lands on the anchor, and everything else names\n// or describes the value, so it lands on the `role=\"group\"` field.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\n/**\n * The segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so the trigger button inside a disabled group went inert while\n * the segments beside it still typed. Measured on this branch: an empty `mm`\n * segment became `8` on an arrow key. Exactly the defect DatePicker carries,\n * and fixed exactly the way DatePicker fixes it.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst anchor = useTemplateRef<{ $el?: Element }>(\"anchor\");\nconst groupDisabled = useAncestorDisabled(() => anchor.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are handed in as this caller's own values: a caller who\n// sets either still beats the row, and the row's description is merged into\n// theirs. `field.attrs` then spreads onto `DateRangePickerField` **after**\n// `fieldAttrs`, which is the node both were already landing on — DatePicker.vue\n// carries the full account of that position and of where Reka then puts each\n// key. It is the outer field group and not either half's own group, which is\n// the point: a description repeated onto the start and the end is read out\n// twice for one span. The `:aria-invalid` binding that used to sit there went\n// with it — an individual attribute after a `v-bind` wins, so keeping one would\n// overwrite the resolved value.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: attrs[\"aria-labelledby\"] as string | undefined,\n  name: props.name,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // trigger button inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `aria-labelledby` for the group, resolved against the row — DatePicker's\n// reasoning, and the same three-way guard.\nconst groupLabelledBy = computed(() =>\n  attrs[\"aria-label\"] || attrs[\"aria-labelledby\"] ? undefined : field.labelledBy,\n);\n\nfunction fromIso(value: string | undefined): DateValue | undefined {\n  if (!value) return undefined;\n  try {\n    return parseDate(value);\n  } catch {\n    return undefined;\n  }\n}\n\nfunction toIso(date: DateValue): string {\n  return toCalendarDate(date).toString();\n}\n\nconst rootValue = computed(() =>\n  optional({\n    // Half of a range is still a range, so the two ends are converted\n    // independently and an unparseable one only empties its own half. The\n    // whole key is dropped when nothing at all is bound, which is what keeps\n    // an unbound control uncontrolled — see `optional()`.\n    modelValue: props.modelValue\n      ? { start: fromIso(props.modelValue.start), end: fromIso(props.modelValue.end) }\n      : undefined,\n    minValue: fromIso(props.min),\n    maxValue: fromIso(props.max),\n  }),\n);\n\n// Owned here rather than left to Reka's `closeOnSelect`, for the reason\n// DatePicker gives. What differs is *when*: a range is not chosen until both\n// ends are, so the panel stays open over a half-made selection. Closing on the\n// first click would hide the calendar exactly when the reader still needs it.\nconst open = ref(false);\n\nfunction onRangeChange(range: CalendarRangeValue) {\n  if (range.start && range.end) open.value = false;\n  emit(\n    \"update:modelValue\",\n    optional({\n      start: range.start ? toIso(range.start) : undefined,\n      end: range.end ? toIso(range.end) : undefined,\n    }),\n  );\n}\n\nfunction isDateToday(date: DateValue): boolean {\n  return isToday(date, getLocalTimeZone());\n}\n\n// One Tab stop for the whole field, not six. The roving stop is DatePicker's,\n// widened: Reka collects the start's segments and the end's into a single\n// ordered set and walks it with ArrowLeft/ArrowRight, so the two halves are\n// one continuous run and a stop per half would be an arbitrary place to make\n// a keyboard user press Tab. The remembered segment is therefore keyed by\n// half *and* part — `year` alone names two different segments here.\nconst focusedSegment = ref<string>();\n\nfunction segmentKey(type: SegmentType, part: string): string {\n  return `${type}:${part}`;\n}\n\nfunction segmentTabIndex(\n  type: SegmentType,\n  part: string,\n  segments: Record<SegmentType, readonly { part: string }[]>,\n): number | undefined {\n  // Read-only keeps every stop it had, unlike disabled: the span is on show and\n  // a reader still arrows across the segments to read it.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = SEGMENT_TYPES.flatMap((each) =>\n    segments[each]\n      .filter((segment) => segment.part !== \"literal\")\n      .map((segment) => segmentKey(each, segment.part)),\n  );\n  // Dropped when a locale change takes the remembered segment away, exactly as\n  // in DatePicker: a field with no tab stop is unreachable.\n  const active =\n    focusedSegment.value !== undefined && editable.includes(focusedSegment.value)\n      ? focusedSegment.value\n      : editable[0];\n  return segmentKey(type, part) === active ? 0 : -1;\n}\n\nconst headingId = useId();\n\n// Each grid's own name is formatted here rather than read off Reka because it\n// is needed in the parent scope of the cells, where Reka's slot props are not\n// in scope — and it is a date rather than a label, so `Intl` and `locale` are\n// the whole answer. A Thai reader gets a Buddhist year in it, as in the field.\nconst monthFormat = computed(\n  () => new Intl.DateTimeFormat(props.locale, { month: \"long\", year: \"numeric\" }),\n);\n\nfunction format(formatter: Intl.DateTimeFormat, date: DateValue): string {\n  return formatter.format(date.toDate(getLocalTimeZone()));\n}\n\nconst MS_PER_DAY = 86_400_000;\n\n/** Days in the span counting both ends, which is how a reader counts a booking. */\nfunction spanLength(start: DateValue, end: DateValue): number {\n  const from = toCalendarDate(start).toDate(\"UTC\").getTime();\n  const to = toCalendarDate(end).toDate(\"UTC\").getTime();\n  return Math.round((to - from) / MS_PER_DAY) + 1;\n}\n\n// **This is the accessibility decision this control turns on.** The band of\n// highlight drawn between the anchor and the pointer is what makes a range\n// calendar legible, and it is worth nothing to a reader who is not looking at\n// it: the preview is a hover state, and a hover state has no reader.\n//\n// Reka gets a keyboard reader half of it for free — it moves the preview on\n// `focusin` as well as on `mouseenter`, so arrowing across the grid drags the\n// band along. That covers the reader who can see the grid and is not using a\n// pointer. It does nothing for the one who cannot.\n//\n// So the same information is published as text, in a `role=\"status\"` line\n// above the grids: which end has been chosen, what is wanted next, and once\n// both are in, the span and how long it is. It changes exactly when the\n// selection changes, which is what makes it announceable — a summary that\n// moved with every arrow key would be read over the cell the reader had just\n// landed on. The per-cell half of the story is `dayLabel` below.\nfunction rangeStatus(range: CalendarRangeValue): string {\n  // The whole sentence is one label taking raw values — the two ends and a\n  // count — rather than phrases this control joins. The `day`/`days` choice\n  // that used to live here was English's plural rule written into a component\n  // that renders in every language; it now lives in `DATE_RANGE_LABELS`, where\n  // it applies to English and to nothing else.\n  return text.value.status({\n    locale: props.locale,\n    start: range.start,\n    end: range.end,\n    days: range.start && range.end ? spanLength(range.start, range.end) : undefined,\n  });\n}\n\n/**\n * A cell's part in the range, or nothing when it has none.\n *\n * The first, the last and every day between are three different states, and\n * the fills that carry them are three shades of one colour — which is a\n * distinction that survives neither a colour deficiency nor forced-colors\n * mode. Reka's own `aria-pressed` separates \"in the range\" from \"outside it\"\n * and stops there, so the three read identically to a screen reader. Naming\n * the part in the cell's accessible name is what tells them apart, and it is\n * also what makes the boundary case — a one-day range, where the first day is\n * also the last — say so rather than being announced twice as two things.\n */\nfunction rangePart(day: DateValue, range: CalendarRangeValue): RangeCellPart | undefined {\n  const isStart = range.start !== undefined && isSameDay(day, range.start);\n  const isEnd = range.end !== undefined && isSameDay(day, range.end);\n  if (isStart && isEnd) return \"both\";\n  if (isStart) return \"start\";\n  if (isEnd) return \"end\";\n  if (range.start && range.end && day.compare(range.start) > 0 && day.compare(range.end) < 0) {\n    return \"within\";\n  }\n  return undefined;\n}\n\n// Reka labels every cell with its full date already; this replaces that label\n// rather than adding to it, because a cell's part in the range has to arrive\n// *with* the date and there is no second slot on an element for a name. The\n// date and the part are handed over raw: which side of the date the qualifier\n// belongs on is a property of the language, not of this control.\nfunction dayLabel(day: DateValue, range: CalendarRangeValue): string {\n  return cellText.value.cell({ locale: props.locale, date: day, part: rangePart(day, range) });\n}\n\nconst panel = ref<HTMLElement | null>(null);\n\nfunction onOpenAutoFocus(event: Event) {\n  const day = panel.value?.querySelector<HTMLElement>(\n    '[data-reka-calendar-cell-trigger][tabindex=\"0\"]',\n  );\n  if (!day) return;\n  event.preventDefault();\n  day.focus();\n}\n</script>\n\n<template>\n  <DateRangePickerRoot\n    v-slot=\"{ modelValue: range }\"\n    v-model:open=\"open\"\n    v-bind=\"rootValue\"\n    :locale=\"locale\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :number-of-months=\"months\"\n    granularity=\"day\"\n    prevent-deselect\n    @update:model-value=\"onRangeChange\"\n  >\n    <!-- The invalid marker is on the control as a whole, not on the field:\n         Reka spells its own `data-invalid` on the field group already, and\n         there it means that the *typed* range is out of bounds or runs\n         backwards. Same reasoning as DatePicker. -->\n    <DateRangePickerAnchor\n      ref=\"anchor\"\n      :data-invalid=\"field.invalid || undefined\"\n      :data-readonly=\"field.readonly || undefined\"\n      :class=\"cn('block w-full', attrs.class as string)\"\n    >\n      <DateRangePickerField\n        v-slot=\"{ segments }\"\n        v-bind=\"{ ...fieldAttrs, ...field.attrs }\"\n        :aria-labelledby=\"groupLabelledBy\"\n        :class=\"\n          cn(\n            'flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground',\n            'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n            'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n            !field.invalid && 'focus-within:shadow-halo',\n            // Three resting appearances, all three painted on this group rather\n            // than on the segments: a per-segment fill leaves the slashes and\n            // the dash between the two halves on `background`, and the span\n            // comes out striped.\n            //\n            // Read-only lifts to `subtle` and keeps its focus ring and its\n            // full-strength text — a read-only span is a value on show, not an\n            // unavailable control — with the rim left at `input`, because the\n            // field is still a Tab stop and still submitted. Reka's own\n            // `data-readonly` on this group says the same thing to assistive\n            // tech, so nothing here rests on colour.\n            field.readonly && 'bg-subtle',\n            // Drained rather than faded, for the reason DatePicker writes out:\n            // `opacity-50` took the six segments and the dash between them down\n            // with the box, from 14.09:1 to 2.99:1 and the dash to 2.02:1. The\n            // fill drains one step past read-only, the muted text over it is\n            // 4.68:1, and the rim slackens from `input` to `border` — three\n            // channels, so the two states do not part on hue alone. The dash\n            // declares its own colour and the segments declare none, so this one\n            // line covers both by inheritance.\n            field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n            // Last of the rules that name a border colour: `cn()` resolves one\n            // by whichever class it saw last, so a field both in error and\n            // unavailable would otherwise lose its destructive rim.\n            field.invalid && 'border-destructive focus-within:outline-destructive',\n          )\n        \"\n      >\n        <!-- Each half is its own named group. Reka labels a segment by its\n             part alone — \"month\", \"day\", \"year\" — which is six segments and\n             two identical sets of three names, and no way for a screen reader\n             to tell which end of the range it is sitting in. The group is\n             where that name belongs: it is announced once on entering the\n             half, rather than folded into every segment.\n\n             Every `:aria-label` from here down replaces one Reka writes in\n             English inside its own render function, reaching the DOM node as a\n             fallthrough attribute that Vue merges last. Removing one falls back\n             not to nothing but to Reka's English. -->\n        <template v-for=\"(type, typeIndex) in SEGMENT_TYPES\" :key=\"type\">\n          <span v-if=\"typeIndex > 0\" aria-hidden=\"true\" class=\"px-1.5 text-muted-foreground\"\n            >–</span\n          >\n\n          <div\n            role=\"group\"\n            :aria-label=\"type === 'start' ? text.startDate : text.endDate\"\n            class=\"flex items-center\"\n          >\n            <DateRangePickerInput\n              v-for=\"(item, index) in segments[type]\"\n              :key=\"index\"\n              :part=\"item.part\"\n              :type=\"type\"\n              :tabindex=\"segmentTabIndex(type, item.part, segments)\"\n              :aria-label=\"segmentLabel(item.part)\"\n              v-bind=\"\n                segmentValueText(\n                  item.part,\n                  item.value,\n                  (type === 'start' ? range.start : range.end)?.month,\n                )\n              \"\n              :class=\"\n                cn(\n                  'tabular rounded-sm px-0.5 outline-none',\n                  'transition-colors duration-instant ease-out',\n                  'focus:bg-primary-muted focus:text-primary-text',\n                  'data-[placeholder]:text-muted-foreground',\n                  item.part === 'literal' && 'text-muted-foreground',\n                )\n              \"\n              @focusin=\"focusedSegment = segmentKey(type, item.part)\"\n            >\n              {{ item.value }}\n            </DateRangePickerInput>\n          </div>\n        </template>\n\n        <!-- Dropped entirely while read-only, as in DatePicker: Reka's\n             `readonly` reaches the calendar and makes every cell's click a\n             no-op, so the button would open a panel in which no range can be\n             chosen. The segments are still there to read the span off. -->\n        <DateRangePickerTrigger\n          v-if=\"!field.readonly\"\n          :aria-label=\"panelText.openCalendar\"\n          class=\"ml-auto inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed\"\n        >\n          <CalendarRange class=\"h-4 w-4\" />\n        </DateRangePickerTrigger>\n      </DateRangePickerField>\n    </DateRangePickerAnchor>\n\n    <DateRangePickerContent\n      align=\"start\"\n      :side-offset=\"6\"\n      :class=\"\n        cn(\n          'z-overlay rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md outline-none',\n          // Each class scoped to its own state — DatePicker carries the full\n          // account of why; the closed one is the exit whose animationend\n          // Presence waits out before taking the panel away.\n          'data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall',\n        )\n      \"\n      @open-auto-focus=\"onOpenAutoFocus\"\n    >\n      <div ref=\"panel\" class=\"flex flex-col gap-3\">\n        <!-- `calendarLabel` is a real Reka prop rather than a literal to\n             override, and it defaults to `\"Event Date\"`. It is published twice:\n             as the calendar container's `aria-label`, and inside a\n             visually-hidden live region Reka renders itself, which a\n             fallthrough attribute could not have reached. -->\n        <DateRangePickerCalendar v-slot=\"{ grid, weekDays }\" :calendar-label=\"panelText.calendar\">\n          <DateRangePickerHeader class=\"flex items-center justify-between gap-2\">\n            <!-- The pagers keep their opacity where the field and the cells gave\n                 it up: a chevron is a glyph, and fading one costs a reader\n                 nothing. Their names live in `aria-label`, not in dimmed text. -->\n            <DateRangePickerPrev\n              :aria-label=\"panelText.previousMonth\"\n              class=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n            >\n              <ChevronLeft class=\"h-4 w-4\" />\n            </DateRangePickerPrev>\n\n            <DateRangePickerHeading\n              :id=\"headingId\"\n              aria-live=\"polite\"\n              class=\"text-sm font-medium text-foreground\"\n            />\n\n            <DateRangePickerNext\n              :aria-label=\"panelText.nextMonth\"\n              class=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n            >\n              <ChevronRight class=\"h-4 w-4\" />\n            </DateRangePickerNext>\n          </DateRangePickerHeader>\n\n          <p role=\"status\" class=\"text-xs text-muted-foreground\">{{ rangeStatus(range) }}</p>\n\n          <!-- Two months stacked below `sm`, side by side above it — and both\n               of them in the document at every width. Hiding the second one\n               instead would be a keyboard trap of the quiet kind: Reka walks\n               the arrow keys by looking up the next day's `[data-value]` in\n               the panel and calling `focus()` on it, and `display: none`\n               leaves the element findable and unfocusable, so the reader\n               presses ArrowRight at the end of the first month and nothing at\n               all happens. A tall panel is a worse layout; a silent dead end\n               is a worse control. -->\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:gap-5\">\n            <DateRangePickerGrid\n              v-for=\"month in grid\"\n              :key=\"month.value.toString()\"\n              role=\"grid\"\n              :aria-label=\"format(monthFormat, month.value)\"\n              class=\"border-collapse select-none\"\n            >\n              <!-- `role=\"grid\"` over Reka's `role=\"application\"`, and the rows\n                   laid out by the table rather than by flex: DatePicker\n                   carries the reasoning for both. The name is each grid's own\n                   month rather than the shared heading, because two grids\n                   sharing one name leaves a reader entering the second with\n                   no idea which month they are in. -->\n              <DateRangePickerGridHead>\n                <DateRangePickerGridRow>\n                  <DateRangePickerHeadCell\n                    v-for=\"(day, index) in weekDays\"\n                    :key=\"index\"\n                    class=\"w-9 text-xs font-normal text-muted-foreground\"\n                  >\n                    {{ day }}\n                  </DateRangePickerHeadCell>\n                </DateRangePickerGridRow>\n              </DateRangePickerGridHead>\n\n              <DateRangePickerGridBody>\n                <DateRangePickerGridRow v-for=\"(week, weekIndex) in month.rows\" :key=\"weekIndex\">\n                  <DateRangePickerCell\n                    v-for=\"day in week\"\n                    :key=\"day.toString()\"\n                    :date=\"day\"\n                    class=\"p-0 text-center\"\n                  >\n                    <DateRangePickerCellTrigger\n                      v-slot=\"{ dayValue, today }\"\n                      :day=\"day\"\n                      :month=\"month.value\"\n                      :aria-label=\"dayLabel(day, range)\"\n                      :aria-current=\"isDateToday(day) ? 'date' : undefined\"\n                      :class=\"\n                        cn(\n                          'group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground',\n                          'transition-colors duration-fast ease-out hover:bg-subtle',\n                          // The outline sits outside the cell and the halo\n                          // outside that, so neither is painted over by the\n                          // fill of the day beside it — which is what keeps\n                          // the focused day findable in the middle of a\n                          // filled band.\n                          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                          'data-[outside-view]:text-muted-foreground',\n                          // Out of range is drawn in colour and struck through\n                          // rather than faded: the number is the cell's whole\n                          // content, and half alpha took `--color-foreground`\n                          // from 14.09:1 on the popover to 3.13:1. Muted is\n                          // 5.76:1, and the `:not([data-selected])` is there for\n                          // exactly the reason the fills below are — it keeps\n                          // this colour from having to order against the\n                          // selection's own. The strike is the hueless second\n                          // cue, and it is what separates an unavailable day\n                          // from an adjacent month's: muted too, still pickable.\n                          'data-[disabled]:pointer-events-none data-[disabled]:line-through',\n                          '[&[data-disabled]:not([data-selected])]:text-muted-foreground',\n                          // Four fills compete on one cell — the two ends, the\n                          // days between, and the uncommitted preview — and\n                          // between two variants of the same property the\n                          // winner is whichever Tailwind emits last, which is\n                          // not something a class list can state. Writing the\n                          // three weaker ones as `:not()` of the stronger\n                          // makes them mutually exclusive, so no cell ever has\n                          // two backgrounds to order and the result does not\n                          // depend on generated stylesheet order.\n                          'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground',\n                          'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground',\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:bg-primary-muted',\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:text-primary-text',\n                          // The preview is deliberately the neutral hover\n                          // surface rather than a wash of the action colour:\n                          // it is a proposal, and it must not read as a range\n                          // that has already been made.\n                          '[&[data-highlighted]:not([data-selected])]:bg-subtle',\n                          // Square in the middle so the band reads as one\n                          // stretch of days rather than a row of pills.\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:rounded-none',\n                          '[&[data-highlighted]:not([data-highlighted-start]):not([data-highlighted-end])]:rounded-none',\n                        )\n                      \"\n                    >\n                      {{ dayValue }}\n                      <span\n                        v-if=\"today\"\n                        aria-hidden=\"true\"\n                        class=\"absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selection-start]:bg-primary-foreground group-data-[selection-end]:bg-primary-foreground\"\n                      />\n                    </DateRangePickerCellTrigger>\n                  </DateRangePickerCell>\n                </DateRangePickerGridRow>\n              </DateRangePickerGridBody>\n            </DateRangePickerGrid>\n          </div>\n        </DateRangePickerCalendar>\n      </div>\n    </DateRangePickerContent>\n  </DateRangePickerRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/date-range-picker/src/DateRangePicker.vue.d.ts

@@ -0,0 +1,130 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { DateRangeLabels } from "../../../labels/src/index";
+import type { CalendarPanelLabels, DateSegmentLabels, RangeCellLabels } from "../../../labels/src/index";
+/**
+ * A span of days as the outside world holds it: two plain ISO `YYYY-MM-DD`
+ * strings, both optional.
+ *
+ * An object rather than a `[start, end]` tuple, and both halves optional
+ * rather than one string with a separator in it, because **a half-made range
+ * has to be representable**. Between the first click and the second there is a
+ * range with a start and no end, and that state lives on screen for as long as
+ * it takes a reader to decide — a tuple has to fill the second slot with
+ * something, and a single string has to invent a spelling for "not yet". Both
+ * end up lying about a state the control is genuinely in. `{ start }` says it.
+ *
+ * It reads at a call site, too: `range.start` needs no comment, `range[0]`
+ * needs one.
+ */
+export interface DateRange {
+    /** The first day of the span, ISO `YYYY-MM-DD`. Absent while nothing has been chosen. */
+    start?: string | undefined;
+    /** The last day of the span, ISO `YYYY-MM-DD`, and part of it. Absent while only the start has been chosen. */
+    end?: string | undefined;
+}
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it, and
+ * exported so a host can build a partial vocabulary against the real thing.
+ *
+ * The `day`/`days` choice below is English's plural rule sitting in English's
+ * own bag, which is the only place a plural rule belongs. It is not extracted,
+ * shared or applied to anything a host supplies: `status` hands over the number
+ * and receives a finished sentence, so a language with one form or with six
+ * selects its own.
+ */
+export declare const DATE_RANGE_LABELS: DateRangeLabels;
+/**
+ * Everything this control can be asked to say: the three shared slices, plus
+ * its own. Annotate a bag with
+ * `LabelOverrides<DateRangePickerLabels>` and never with this, which is total.
+ */
+export type DateRangePickerLabels = DateSegmentLabels & CalendarPanelLabels & RangeCellLabels & DateRangeLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * The chosen span, as `{ start, end }` ISO `YYYY-MM-DD` strings. Either
+     * half may be absent: `{}` is nothing chosen, `{ start }` is a range
+     * half made. The explicit `| undefined` is what lets `v-model` bind a ref
+     * that clears.
+     */
+    modelValue?: DateRange | undefined;
+    /** The earliest choosable day, ISO `YYYY-MM-DD`. Days before it are announced disabled and skipped by the keyboard. */
+    min?: string;
+    /** The latest choosable day, ISO `YYYY-MM-DD`. Days after it are announced disabled and skipped by the keyboard. */
+    max?: string;
+    /** BCP 47 tag driving the order of the field's segments, the month and weekday names, and which day a week starts on. */
+    locale?: string;
+    /** How many months the calendar shows at once. Two is the default because a range is usually read across a month boundary; one is for a host that knows it is rendering into a narrow shell. */
+    months?: 1 | 2;
+    /** Unavailable: dims the control, refuses the calendar, and takes the field out of the tab order. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the span without allowing an edit: the field stays a Tab stop and stays submitted, and the calendar button is dropped because nothing in the calendar could be chosen. Unset defers to a wrapping Field. */
+    readonly?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** Marks the field mandatory to assistive tech (`aria-required` on the group holding both halves). Unset defers to a wrapping Field. */
+    required?: boolean | undefined;
+    /** The field name for a native form post or `FormData`. Reka submits the whole span through one hidden input, as `start - end`. Unset defers to a wrapping Field. */
+    name?: string;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `DateRangePickerLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: six of the thirteen names replace English literals Reka UI
+     * writes of its own accord, and a language is set once with
+     * `provideLoomLabels`.
+     */
+    labels?: LabelOverrides<DateRangePickerLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateRange) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The chosen span, as `{ start, end }` ISO `YYYY-MM-DD` strings. Either
+     * half may be absent: `{}` is nothing chosen, `{ start }` is a range
+     * half made. The explicit `| undefined` is what lets `v-model` bind a ref
+     * that clears.
+     */
+    modelValue?: DateRange | undefined;
+    /** The earliest choosable day, ISO `YYYY-MM-DD`. Days before it are announced disabled and skipped by the keyboard. */
+    min?: string;
+    /** The latest choosable day, ISO `YYYY-MM-DD`. Days after it are announced disabled and skipped by the keyboard. */
+    max?: string;
+    /** BCP 47 tag driving the order of the field's segments, the month and weekday names, and which day a week starts on. */
+    locale?: string;
+    /** How many months the calendar shows at once. Two is the default because a range is usually read across a month boundary; one is for a host that knows it is rendering into a narrow shell. */
+    months?: 1 | 2;
+    /** Unavailable: dims the control, refuses the calendar, and takes the field out of the tab order. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the span without allowing an edit: the field stays a Tab stop and stays submitted, and the calendar button is dropped because nothing in the calendar could be chosen. Unset defers to a wrapping Field. */
+    readonly?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** Marks the field mandatory to assistive tech (`aria-required` on the group holding both halves). Unset defers to a wrapping Field. */
+    required?: boolean | undefined;
+    /** The field name for a native form post or `FormData`. Reka submits the whole span through one hidden input, as `start - end`. Unset defers to a wrapping Field. */
+    name?: string;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `DateRangePickerLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: six of the thirteen names replace English literals Reka UI
+     * writes of its own accord, and a language is set once with
+     * `provideLoomLabels`.
+     */
+    labels?: LabelOverrides<DateRangePickerLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: DateRange) => any;
+}>, {
+    locale: string;
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
+    readonly: boolean | undefined;
+    required: boolean | undefined;
+    months: 1 | 2;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=DateRangePicker.vue.d.ts.map

package/dist/packages/primitives/date-range-picker/src/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,416 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import { getLocalTimeZone as $ad063034c8620db8$export$aa8b41735afcabd2, isSameDay as $ad063034c8620db8$export$ea39ec197993aef0, isToday as $ad063034c8620db8$export$629b0a497aa65267 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/queries.js";
+import { toCalendarDate as $d07e34cce18680fd$export$93522d1a439f3617 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/conversion.js";
+import { parseDate as $58246871e4652552$export$6b862160d295c8e } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/string.js";
+import { CALENDAR_PANEL_LABELS, DATE_SEGMENT_LABELS, RANGE_CELL_LABELS, emptySegmentValueText, isDateSegmentPart } from "../../../labels/src/date-labels.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
+import { CalendarRange, ChevronLeft, ChevronRight } from "@lucide/vue";
+import { DateRangePickerAnchor, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "reka-ui";
+//#region packages/primitives/date-range-picker/src/DateRangePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "px-1.5 text-muted-foreground"
+};
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = {
+	role: "status",
+	class: "text-xs text-muted-foreground"
+};
+var _hoisted_4 = { class: "flex flex-col gap-3 sm:flex-row sm:gap-5" };
+var _hoisted_5 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selection-start]:bg-primary-foreground group-data-[selection-end]:bg-primary-foreground"
+};
+/**
+
+/** A day, month and year in the control's locale — the status line's own shape, without the weekday a cell's name carries. */
+function formatDay(locale, date) {
+	return new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	}).format(date.toDate($ad063034c8620db8$export$aa8b41735afcabd2()));
+}
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*
+* The `day`/`days` choice below is English's plural rule sitting in English's
+* own bag, which is the only place a plural rule belongs. It is not extracted,
+* shared or applied to anything a host supplies: `status` hands over the number
+* and receives a finished sentence, so a language with one form or with six
+* selects its own.
+*/
+var DATE_RANGE_LABELS = {
+	startDate: "Start date",
+	endDate: "End date",
+	status: ({ locale, start, end, days }) => {
+		const anchor = start ?? end;
+		if (!anchor) return "No dates chosen. Choose the first day of the range.";
+		if (!start || !end || days === void 0) return `${formatDay(locale, anchor)} chosen. Choose the last day of the range.`;
+		return `${formatDay(locale, start)} to ${formatDay(locale, end)}, ${String(days)} ${days === 1 ? "day" : "days"}.`;
+	}
+};
+var DateRangePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "DateRangePicker",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		locale: { default: "en" },
+		months: { default: 2 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		name: {},
+		labels: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const SEGMENT_TYPES = ["start", "end"];
+		const dateText = useLabels("dateSegments", DATE_SEGMENT_LABELS, () => props.labels);
+		const panelText = useLabels("calendarPanel", CALENDAR_PANEL_LABELS, () => props.labels);
+		const cellText = useLabels("rangeCell", RANGE_CELL_LABELS, () => props.labels);
+		const text = useLabels("dateRange", DATE_RANGE_LABELS, () => props.labels);
+		function segmentLabel(part) {
+			return isDateSegmentPart(part) ? dateText.value[part] : void 0;
+		}
+		function segmentValueText(part, value, monthValue) {
+			const empty = emptySegmentValueText(part, value, dateText.value.empty);
+			if (empty["aria-valuetext"]) return empty;
+			if (part === "month" && monthValue !== void 0) return { "aria-valuetext": dateText.value.filledMonth({
+				value: monthValue,
+				locale: props.locale
+			}) };
+			return {};
+		}
+		const { attrs, rest: fieldAttrs } = useSplitAttrs();
+		/**
+		* The segments are `<div role="spinbutton" tabindex="0">`, and
+		* `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and
+		* `<textarea>` — so the trigger button inside a disabled group went inert while
+		* the segments beside it still typed. Measured on this branch: an empty `mm`
+		* segment became `8` on an arrow key. Exactly the defect DatePicker carries,
+		* and fixed exactly the way DatePicker fixes it.
+		*
+		* Read off the DOM rather than taken from the Field context, which publishes no
+		* `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.
+		*/
+		const anchor = useTemplateRef("anchor");
+		const groupDisabled = useAncestorDisabled(() => anchor.value?.$el);
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			ariaLabelledby: attrs["aria-labelledby"],
+			name: props.name,
+			disabled: groupDisabled.value ? true : props.disabled,
+			readonly: props.readonly,
+			invalid: props.invalid,
+			required: props.required
+		}));
+		const groupLabelledBy = computed(() => attrs["aria-label"] || attrs["aria-labelledby"] ? void 0 : field.labelledBy);
+		function fromIso(value) {
+			if (!value) return void 0;
+			try {
+				return $58246871e4652552$export$6b862160d295c8e(value);
+			} catch {
+				return;
+			}
+		}
+		function toIso(date) {
+			return $d07e34cce18680fd$export$93522d1a439f3617(date).toString();
+		}
+		const rootValue = computed(() => optional({
+			modelValue: props.modelValue ? {
+				start: fromIso(props.modelValue.start),
+				end: fromIso(props.modelValue.end)
+			} : void 0,
+			minValue: fromIso(props.min),
+			maxValue: fromIso(props.max)
+		}));
+		const open = ref(false);
+		function onRangeChange(range) {
+			if (range.start && range.end) open.value = false;
+			emit("update:modelValue", optional({
+				start: range.start ? toIso(range.start) : void 0,
+				end: range.end ? toIso(range.end) : void 0
+			}));
+		}
+		function isDateToday(date) {
+			return $ad063034c8620db8$export$629b0a497aa65267(date, $ad063034c8620db8$export$aa8b41735afcabd2());
+		}
+		const focusedSegment = ref();
+		function segmentKey(type, part) {
+			return `${type}:${part}`;
+		}
+		function segmentTabIndex(type, part, segments) {
+			if (field.disabled || part === "literal") return void 0;
+			const editable = SEGMENT_TYPES.flatMap((each) => segments[each].filter((segment) => segment.part !== "literal").map((segment) => segmentKey(each, segment.part)));
+			const active = focusedSegment.value !== void 0 && editable.includes(focusedSegment.value) ? focusedSegment.value : editable[0];
+			return segmentKey(type, part) === active ? 0 : -1;
+		}
+		const headingId = useId();
+		const monthFormat = computed(() => new Intl.DateTimeFormat(props.locale, {
+			month: "long",
+			year: "numeric"
+		}));
+		function format(formatter, date) {
+			return formatter.format(date.toDate($ad063034c8620db8$export$aa8b41735afcabd2()));
+		}
+		const MS_PER_DAY = 864e5;
+		/** Days in the span counting both ends, which is how a reader counts a booking. */
+		function spanLength(start, end) {
+			const from = $d07e34cce18680fd$export$93522d1a439f3617(start).toDate("UTC").getTime();
+			const to = $d07e34cce18680fd$export$93522d1a439f3617(end).toDate("UTC").getTime();
+			return Math.round((to - from) / MS_PER_DAY) + 1;
+		}
+		function rangeStatus(range) {
+			return text.value.status({
+				locale: props.locale,
+				start: range.start,
+				end: range.end,
+				days: range.start && range.end ? spanLength(range.start, range.end) : void 0
+			});
+		}
+		/**
+		* A cell's part in the range, or nothing when it has none.
+		*
+		* The first, the last and every day between are three different states, and
+		* the fills that carry them are three shades of one colour — which is a
+		* distinction that survives neither a colour deficiency nor forced-colors
+		* mode. Reka's own `aria-pressed` separates "in the range" from "outside it"
+		* and stops there, so the three read identically to a screen reader. Naming
+		* the part in the cell's accessible name is what tells them apart, and it is
+		* also what makes the boundary case — a one-day range, where the first day is
+		* also the last — say so rather than being announced twice as two things.
+		*/
+		function rangePart(day, range) {
+			const isStart = range.start !== void 0 && $ad063034c8620db8$export$ea39ec197993aef0(day, range.start);
+			const isEnd = range.end !== void 0 && $ad063034c8620db8$export$ea39ec197993aef0(day, range.end);
+			if (isStart && isEnd) return "both";
+			if (isStart) return "start";
+			if (isEnd) return "end";
+			if (range.start && range.end && day.compare(range.start) > 0 && day.compare(range.end) < 0) return "within";
+		}
+		function dayLabel(day, range) {
+			return cellText.value.cell({
+				locale: props.locale,
+				date: day,
+				part: rangePart(day, range)
+			});
+		}
+		const panel = ref(null);
+		function onOpenAutoFocus(event) {
+			const day = panel.value?.querySelector("[data-reka-calendar-cell-trigger][tabindex=\"0\"]");
+			if (!day) return;
+			event.preventDefault();
+			day.focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DateRangePickerRoot), mergeProps({
+				open: open.value,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+			}, rootValue.value, {
+				locale: __props.locale,
+				disabled: unref(field).disabled,
+				readonly: unref(field).readonly,
+				"number-of-months": __props.months,
+				granularity: "day",
+				"prevent-deselect": "",
+				"onUpdate:modelValue": onRangeChange
+			}), {
+				default: withCtx(({ modelValue: range }) => [createVNode(unref(DateRangePickerAnchor), {
+					ref_key: "anchor",
+					ref: anchor,
+					"data-invalid": unref(field).invalid || void 0,
+					"data-readonly": unref(field).readonly || void 0,
+					class: normalizeClass(unref(cn)("block w-full", unref(attrs).class))
+				}, {
+					default: withCtx(() => [createVNode(unref(DateRangePickerField), mergeProps({
+						...unref(fieldAttrs),
+						...unref(field).attrs
+					}, {
+						"aria-labelledby": groupLabelledBy.value,
+						class: unref(cn)("flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground", "transition-[color,background-color,border-color,box-shadow] duration-fast ease-out", "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring", !unref(field).invalid && "focus-within:shadow-halo", unref(field).readonly && "bg-subtle", unref(field).disabled && "cursor-not-allowed border-border bg-muted text-muted-foreground", unref(field).invalid && "border-destructive focus-within:outline-destructive")
+					}), {
+						default: withCtx(({ segments }) => [(openBlock(), createElementBlock(Fragment, null, renderList(SEGMENT_TYPES, (type, typeIndex) => {
+							return openBlock(), createElementBlock(Fragment, { key: type }, [typeIndex > 0 ? (openBlock(), createElementBlock("span", _hoisted_1, "–")) : createCommentVNode("", true), createElementVNode("div", {
+								role: "group",
+								"aria-label": type === "start" ? unref(text).startDate : unref(text).endDate,
+								class: "flex items-center"
+							}, [(openBlock(true), createElementBlock(Fragment, null, renderList(segments[type], (item, index) => {
+								return openBlock(), createBlock(unref(DateRangePickerInput), mergeProps({
+									key: index,
+									part: item.part,
+									type,
+									tabindex: segmentTabIndex(type, item.part, segments),
+									"aria-label": segmentLabel(item.part)
+								}, { ref_for: true }, segmentValueText(item.part, item.value, (type === "start" ? range.start : range.end)?.month), {
+									class: unref(cn)("tabular rounded-sm px-0.5 outline-none", "transition-colors duration-instant ease-out", "focus:bg-primary-muted focus:text-primary-text", "data-[placeholder]:text-muted-foreground", item.part === "literal" && "text-muted-foreground"),
+									onFocusin: ($event) => focusedSegment.value = segmentKey(type, item.part)
+								}), {
+									default: withCtx(() => [createTextVNode(toDisplayString(item.value), 1)]),
+									_: 2
+								}, 1040, [
+									"part",
+									"type",
+									"tabindex",
+									"aria-label",
+									"class",
+									"onFocusin"
+								]);
+							}), 128))], 8, _hoisted_2)], 64);
+						}), 64)), !unref(field).readonly ? (openBlock(), createBlock(unref(DateRangePickerTrigger), {
+							key: 0,
+							"aria-label": unref(panelText).openCalendar,
+							class: "ml-auto inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed"
+						}, {
+							default: withCtx(() => [createVNode(unref(CalendarRange), { class: "h-4 w-4" })]),
+							_: 1
+						}, 8, ["aria-label"])) : createCommentVNode("", true)]),
+						_: 2
+					}, 1040, ["aria-labelledby", "class"])]),
+					_: 2
+				}, 1032, [
+					"data-invalid",
+					"data-readonly",
+					"class"
+				]), createVNode(unref(DateRangePickerContent), {
+					align: "start",
+					"side-offset": 6,
+					class: normalizeClass(unref(cn)("z-overlay rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md outline-none", "data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall")),
+					onOpenAutoFocus
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "panel",
+						ref: panel,
+						class: "flex flex-col gap-3"
+					}, [createVNode(unref(DateRangePickerCalendar), { "calendar-label": unref(panelText).calendar }, {
+						default: withCtx(({ grid, weekDays }) => [
+							createVNode(unref(DateRangePickerHeader), { class: "flex items-center justify-between gap-2" }, {
+								default: withCtx(() => [
+									createVNode(unref(DateRangePickerPrev), {
+										"aria-label": unref(panelText).previousMonth,
+										class: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+									}, {
+										default: withCtx(() => [createVNode(unref(ChevronLeft), { class: "h-4 w-4" })]),
+										_: 1
+									}, 8, ["aria-label"]),
+									createVNode(unref(DateRangePickerHeading), {
+										id: unref(headingId),
+										"aria-live": "polite",
+										class: "text-sm font-medium text-foreground"
+									}, null, 8, ["id"]),
+									createVNode(unref(DateRangePickerNext), {
+										"aria-label": unref(panelText).nextMonth,
+										class: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+									}, {
+										default: withCtx(() => [createVNode(unref(ChevronRight), { class: "h-4 w-4" })]),
+										_: 1
+									}, 8, ["aria-label"])
+								]),
+								_: 1
+							}),
+							createElementVNode("p", _hoisted_3, toDisplayString(rangeStatus(range)), 1),
+							createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(grid, (month) => {
+								return openBlock(), createBlock(unref(DateRangePickerGrid), {
+									key: month.value.toString(),
+									role: "grid",
+									"aria-label": format(monthFormat.value, month.value),
+									class: "border-collapse select-none"
+								}, {
+									default: withCtx(() => [createVNode(unref(DateRangePickerGridHead), null, {
+										default: withCtx(() => [createVNode(unref(DateRangePickerGridRow), null, {
+											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays, (day, index) => {
+												return openBlock(), createBlock(unref(DateRangePickerHeadCell), {
+													key: index,
+													class: "w-9 text-xs font-normal text-muted-foreground"
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(day), 1)]),
+													_: 2
+												}, 1024);
+											}), 128))]),
+											_: 2
+										}, 1024)]),
+										_: 2
+									}, 1024), createVNode(unref(DateRangePickerGridBody), null, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(month.rows, (week, weekIndex) => {
+											return openBlock(), createBlock(unref(DateRangePickerGridRow), { key: weekIndex }, {
+												default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
+													return openBlock(), createBlock(unref(DateRangePickerCell), {
+														key: day.toString(),
+														date: day,
+														class: "p-0 text-center"
+													}, {
+														default: withCtx(() => [createVNode(unref(DateRangePickerCellTrigger), {
+															day,
+															month: month.value,
+															"aria-label": dayLabel(day, range),
+															"aria-current": isDateToday(day) ? "date" : void 0,
+															class: normalizeClass(unref(cn)("group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground", "transition-colors duration-fast ease-out hover:bg-subtle", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "data-[outside-view]:text-muted-foreground", "data-[disabled]:pointer-events-none data-[disabled]:line-through", "[&[data-disabled]:not([data-selected])]:text-muted-foreground", "data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground", "data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground", "[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:bg-primary-muted", "[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:text-primary-text", "[&[data-highlighted]:not([data-selected])]:bg-subtle", "[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:rounded-none", "[&[data-highlighted]:not([data-highlighted-start]):not([data-highlighted-end])]:rounded-none"))
+														}, {
+															default: withCtx(({ dayValue, today }) => [createTextVNode(toDisplayString(dayValue) + " ", 1), today ? (openBlock(), createElementBlock("span", _hoisted_5)) : createCommentVNode("", true)]),
+															_: 1
+														}, 8, [
+															"day",
+															"month",
+															"aria-label",
+															"aria-current",
+															"class"
+														])]),
+														_: 2
+													}, 1032, ["date"]);
+												}), 128))]),
+												_: 2
+											}, 1024);
+										}), 128))]),
+										_: 2
+									}, 1024)]),
+									_: 2
+								}, 1032, ["aria-label"]);
+							}), 128))])
+						]),
+						_: 2
+					}, 1032, ["calendar-label"])], 512)]),
+					_: 2
+				}, 1032, ["class"])]),
+				_: 1
+			}, 16, [
+				"open",
+				"locale",
+				"disabled",
+				"readonly",
+				"number-of-months"
+			]);
+		};
+	}
+});
+//#endregion
+export { DATE_RANGE_LABELS, DateRangePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DateRangePicker.vue_vue_type_script_setup_true_lang.js.map