@ecoma-io/loom 0.5.0 → 0.6.0

package/dist/primitives/data-grid/src/DataGrid.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/data-grid/src/DataGrid.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataGridLabels } from \"@ecoma-io/loom-labels\";\nimport type { TableAlign, TableDensity } from \"@ecoma-io/loom-table\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const DATA_GRID_LABELS: DataGridLabels = {\n  region: \"Data grid\",\n  selectAll: \"Select all rows\",\n  selectRow: \"Select row\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** One column: what it reads, whether it sorts, how it aligns. */\nexport interface DataGridColumn {\n  /** The row field this column renders; also the sort key. */\n  key: string;\n  /** The column header's text. */\n  header: string;\n  /** Renders the header as the tri-state sort control. */\n  sortable?: boolean;\n  /** Text alignment; numeric columns want `\"right\"`. */\n  align?: TableAlign;\n  /** Any CSS width, e.g. `\"6rem\"` — pins the column in the scrolling grid. */\n  width?: string;\n}\n\n/** Sort direction, compact union — `aria-sort` takes the full ARIA tokens. */\nexport type DataGridSort = \"asc\" | \"desc\";\n\n/** Which column is sorted, and which way. Absent: nothing is. */\nexport type DataGridSortState = { key: string; direction: DataGridSort } | undefined;\n\n/**\n * DataGrid — the WAI-ARIA grids pattern: `Table`'s visual language with the\n * interactive half added. Table reads, DataGrid acts — rows are selectable\n * (`v-model:selectedRowKeys`, select-all with a real `aria-checked=\"mixed\"`),\n * sortable headers carry `aria-sort`, and a row answers Enter/double-click\n * through `@row-activate`.\n *\n * The keyboard model is the APG one, and it is the reason this is not a\n * Table variant: the cell matrix holds exactly one Tab stop (roving\n * tabindex), so Tab enters and leaves the grid once while the arrow keys,\n * Home/End and their Ctrl variants move focus cell to cell. Focus — not\n * the pointer — is what a grid sells.\n *\n * There is no `aria-rowcount` on purpose: every row is in the DOM, so the\n * count is the DOM's to state. The attribute earns its place the day the\n * grid virtualizes, not before — an asserted virtual size over a real\n * partial DOM is the lie `aria-rowcount` exists to correct.\n */\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport Checkbox from \"@ecoma-io/loom-checkbox\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { headAlignClass, nextSort, tableRowVariants } from \"@ecoma-io/loom-table\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The columns, left to right. */\n    columns: DataGridColumn[];\n    /** The row objects; a column renders `row[column.key]`. */\n    rows: Array<Record<string, unknown>>;\n    /** The row field whose value keys selection. Defaults to `\"id\"`. */\n    rowKey?: string;\n    /** Adds the selection column: per-row checkboxes plus select-all with its mixed state. */\n    selectable?: boolean;\n    /**\n     * The selected row keys when the host owns the selection through\n     * `v-model:selectedRowKeys`; omit the binding and the grid owns the\n     * state itself while still reporting every change.\n     */\n    selectedRowKeys?: Array<string | number>;\n    /**\n     * The active sort when the host owns it through `v-model:sort`; omit it\n     * and the headers cycle on their own while still reporting each change.\n     */\n    sort?: DataGridSortState;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** The grid's accessible name, read before a screen reader enters it. */\n    caption?: string;\n    /** Names what the grid says on its own account, as any subset of `DataGridLabels`. */\n    labels?: LabelOverrides<DataGridLabels>;\n  }>(),\n  { rowKey: \"id\", selectable: false, density: \"comfortable\" },\n);\n\nconst emit = defineEmits<{\n  \"update:selectedRowKeys\": [value: Array<string | number>];\n  \"update:sort\": [value: DataGridSortState];\n  \"sort-change\": [value: DataGridSortState];\n  rowActivate: [row: Record<string, unknown>];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves (own prop, then the host vocabulary from\n// `provideLoomLabels`, then these English defaults), and a template reading\n// the raw prop would be reading the overrides rather than the answer.\nconst text = useLabels(\"dataGrid\", DATA_GRID_LABELS, () => props.labels);\n\n// ---------- selection ----------\n\nconst innerSelected = ref<Array<string | number>>([]);\nconst selected = computed(() => props.selectedRowKeys ?? innerSelected.value);\n\nconst keyOf = (row: Record<string, unknown>): string | number =>\n  row[props.rowKey] as string | number;\nconst isSelected = (row: Record<string, unknown>): boolean => selected.value.includes(keyOf(row));\n\nfunction setSelection(next: Array<string | number>): void {\n  innerSelected.value = next;\n  emit(\"update:selectedRowKeys\", next);\n}\n\nconst allSelected = computed(\n  () => props.rows.length > 0 && props.rows.every((row) => isSelected(row)),\n);\nconst someSelected = computed(\n  () => !allSelected.value && props.rows.some((row) => isSelected(row)),\n);\n\n// Checkbox's own third state: reka renders it as `aria-checked=\"mixed\"`,\n// which is the select-all announcement the grid owes — a dash glyph alone is\n// shape-only semantics.\nconst selectAllState = computed<\"indeterminate\" | boolean>(() =>\n  allSelected.value ? true : someSelected.value ? \"indeterminate\" : false,\n);\n\nfunction toggleAll(): void {\n  setSelection(allSelected.value ? [] : props.rows.map((row) => keyOf(row)));\n}\n\nfunction toggleRow(row: Record<string, unknown>): void {\n  setSelection(\n    isSelected(row)\n      ? selected.value.filter((key) => key !== keyOf(row))\n      : [...selected.value, keyOf(row)],\n  );\n}\n\nconst innerSort = ref<DataGridSortState>(undefined);\nconst currentSort = computed<DataGridSortState>(() => props.sort ?? innerSort.value);\n\nconst sortDirectionOf = (col: DataGridColumn): DataGridSort | undefined =>\n  currentSort.value?.key === col.key ? currentSort.value.direction : undefined;\n\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\nconst SORT_ICON = { asc: ChevronUp, desc: ChevronDown } as const;\nconst ariaSortOf = (col: DataGridColumn): (typeof ARIA_SORT)[DataGridSort] | undefined => {\n  const direction = sortDirectionOf(col);\n  return direction ? ARIA_SORT[direction] : undefined;\n};\nconst sortIconOf = (col: DataGridColumn) => {\n  const direction = sortDirectionOf(col);\n  return direction ? SORT_ICON[direction] : ChevronsUpDown;\n};\nconst sortWordsOf = (col: DataGridColumn): string => {\n  const direction = sortDirectionOf(col);\n  return direction === \"asc\"\n    ? text.value.sortedAscending\n    : direction === \"desc\"\n      ? text.value.sortedDescending\n      : text.value.sort;\n};\n\nfunction toggleSort(col: DataGridColumn): void {\n  const direction = nextSort(sortDirectionOf(col));\n  const next: DataGridSortState = direction ? { key: col.key, direction } : undefined;\n  innerSort.value = next;\n  // `sort-change` for hosts following the sketch's `@sort-change`,\n  // `update:sort` so `v-model:sort` works the way every other control's does.\n  emit(\"update:sort\", next);\n  emit(\"sort-change\", next);\n}\n\nconst colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0));\n\n// Rows: -1 is the header row, 0.. are body rows. Columns count the selection\n// column first when `selectable`. Exactly one cell carries tabindex 0 — the\n// active cell — so Tab enters and leaves the grid once; everything else is\n// -1 and reachable only through the matrix moves.\nconst activeCell = ref({ row: props.rows.length > 0 ? 0 : -1, col: 0 });\nconst bodyColumnIndex = (i: number): number => (props.selectable ? i + 1 : i);\nconst isCellActive = (row: number, col: number): boolean =>\n  activeCell.value.row === row && activeCell.value.col === col;\n\n// Rows arriving or leaving can strand the active cell outside the matrix. The\n// floor is -1, not 0: the header row is a valid roving stop too, and a floor\n// of 0 would push the header onto a body row that does not exist once every\n// row is gone, leaving the grid with no Tab stop at all.\nwatch(\n  () => [props.rows.length, props.selectable, props.columns.length] as const,\n  () => {\n    const previous = activeCell.value;\n    const next = {\n      row: Math.min(Math.max(previous.row, -1), Math.max(props.rows.length - 1, -1)),\n      col: Math.min(previous.col, colCount.value - 1),\n    };\n    activeCell.value = next;\n    // A shrink that moves the active cell strands real focus too: the focused\n    // cell unmounts, focus falls to <body>, and onFocusin — which only hears\n    // focus arriving inside the grid — never learns. The clamped cell is\n    // within the surviving matrix, so it exists to take focus back.\n    if (\n      (previous.row !== next.row || previous.col !== next.col) &&\n      table.value?.contains(document.activeElement)\n    ) {\n      focusCell(next.row, next.col);\n    }\n  },\n);\n\nconst table = ref<HTMLElement | null>(null);\nconst region = ref<HTMLElement | null>(null);\n\nfunction focusCell(row: number, col: number): void {\n  activeCell.value = { row, col };\n  table.value?.querySelector<HTMLElement>(`[data-r='${row}'][data-c='${col}']`)?.focus();\n}\n\nfunction moveTo(row: number, col: number): void {\n  focusCell(\n    // The floor is -1, not 0, for the same reason the watcher below uses it:\n    // with no body row, 0 would clamp onto a row that does not exist and\n    // strand the grid with no Tab stop (the header is `data-r=\"-1\"`).\n    Math.min(Math.max(row, -1), Math.max(props.rows.length - 1, -1)),\n    Math.min(Math.max(col, 0), colCount.value - 1),\n  );\n}\n\n// Focus can also arrive outside the keymap — a pointer tap lands directly on\n// a cell — and the roving Tab stop has to follow whoever actually holds it.\nfunction onFocusin(event: FocusEvent): void {\n  const cell = (event.target as Element).closest(\"[data-r]\");\n  if (cell) {\n    activeCell.value = {\n      row: Number(cell.getAttribute(\"data-r\")),\n      col: Number(cell.getAttribute(\"data-c\")),\n    };\n  }\n}\n\nfunction activateCell(row: number, col: number): void {\n  if (row < 0) {\n    const col_ = props.columns[col - (props.selectable ? 1 : 0)];\n    if (col_?.sortable) toggleSort(col_);\n    return;\n  }\n  const target = props.rows[row];\n  if (target) emit(\"rowActivate\", target);\n}\n\nfunction spaceCell(row: number, col: number): void {\n  if (!props.selectable) return;\n  if (row < 0) {\n    if (col === 0) toggleAll();\n    return;\n  }\n  const target = props.rows[row];\n  if (target) toggleRow(target);\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  const cell = (event.target as Element).closest(\"[data-r]\");\n  if (!cell) return;\n  const row = Number(cell.getAttribute(\"data-r\"));\n  const col = Number(cell.getAttribute(\"data-c\"));\n  const lastRow = Math.max(props.rows.length - 1, 0);\n  const lastCol = colCount.value - 1;\n\n  switch (event.key) {\n    case \"ArrowRight\":\n      moveTo(row, col + 1);\n      break;\n    case \"ArrowLeft\":\n      moveTo(row, col - 1);\n      break;\n    case \"ArrowDown\":\n      moveTo(row + 1, col);\n      break;\n    case \"ArrowUp\":\n      moveTo(row - 1, col);\n      break;\n    case \"Home\":\n      event.ctrlKey || event.metaKey ? moveTo(0, 0) : moveTo(row, 0);\n      break;\n    case \"End\":\n      event.ctrlKey || event.metaKey ? moveTo(lastRow, lastCol) : moveTo(row, lastCol);\n      break;\n    case \"Enter\":\n      activateCell(row, col);\n      break;\n    case \" \":\n      spaceCell(row, col);\n      break;\n    default:\n      return;\n  }\n  event.preventDefault();\n}\n\n// ---------- scroll region (Table's mechanism, verbatim in spirit) ----------\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed.\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself, for the reason Table's\n       wrapper documents: a wide grid overflows its region instead of\n       stretching the page. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <!-- Roving focus ring, not focus-visible: the moves that matter here are\n         programmatic (arrow keys), and a ring that only answers\n         focus-visible hides the one thing a grid must never hide — which\n         cell holds focus. -->\n    <!-- tabindex=\"-1\" marks the interactive grid focusable without adding a\n         Tab stop: the cells own the single roving stop, the container is\n         only a target for programmatic/assistive-tech focus. -->\n    <table\n      ref=\"table\"\n      role=\"grid\"\n      tabindex=\"-1\"\n      :data-density=\"density\"\n      class=\"w-full border-collapse text-left text-sm focus:outline-none [&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap [&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground [&[data-density='comfortable']_td]:py-3 [&[data-density='compact']_td]:py-1.5 [&[data-density='compact']_th]:py-1.5 [&_tbody_tr:last-child_td]:border-b-0\"\n      @keydown=\"onKeydown\"\n      @focusin=\"onFocusin\"\n    >\n      <thead>\n        <!-- Inside role=\"grid\" the native tr→row mapping does not apply; the\n             plugin cannot see the ancestor role, so the explicit role is load-bearing. -->\n        <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n        <tr role=\"row\">\n          <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n          <th\n            v-if=\"selectable\"\n            scope=\"col\"\n            role=\"columnheader\"\n            data-r=\"-1\"\n            :data-c=\"0\"\n            :tabindex=\"isCellActive(-1, 0) ? 0 : -1\"\n            class=\"focus:outline-2 focus:-outline-offset-2 focus:outline-ring\"\n          >\n            <Checkbox\n              :model-value=\"selectAllState\"\n              :aria-label=\"text.selectAll\"\n              tabindex=\"-1\"\n              @update:model-value=\"toggleAll()\"\n            />\n          </th>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n          <th\n            v-for=\"(col, i) in columns\"\n            :key=\"col.key\"\n            scope=\"col\"\n            role=\"columnheader\"\n            :aria-sort=\"ariaSortOf(col)\"\n            :data-r=\"-1\"\n            :data-c=\"bodyColumnIndex(i)\"\n            :tabindex=\"isCellActive(-1, bodyColumnIndex(i)) ? 0 : -1\"\n            :style=\"col.width ? { width: col.width } : undefined\"\n            :class=\"\n              cn(\n                headAlignClass(col.align),\n                'focus:outline-2 focus:-outline-offset-2 focus:outline-ring',\n              )\n            \"\n          >\n            <!-- The sort button is reachable only through its header cell:\n                 a second Tab stop inside the matrix would break the\n                 enter-once contract. Enter on the cell sorts instead. -->\n            <button\n              v-if=\"col.sortable\"\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n              @click=\"toggleSort(col)\"\n            >\n              <span class=\"inline-flex items-center gap-1 font-semibold\">{{ col.header }}</span>\n              <component\n                :is=\"sortIconOf(col)\"\n                class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\"\n                aria-hidden=\"true\"\n              />\n              <span class=\"sr-only\">{{ sortWordsOf(col) }}</span>\n            </button>\n            <template v-else>{{ col.header }}</template>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-redundant-roles -->\n        <tr\n          v-for=\"(row, r) in rows\"\n          :key=\"String(keyOf(row))\"\n          role=\"row\"\n          :aria-selected=\"selectable ? isSelected(row) : undefined\"\n          :class=\"\n            cn(\n              tableRowVariants({\n                state: selectable ? (isSelected(row) ? 'selected' : 'interactive') : 'none',\n              }),\n            )\n          \"\n          @dblclick=\"emit('rowActivate', row)\"\n        >\n          <td\n            v-if=\"selectable\"\n            role=\"gridcell\"\n            :data-r=\"r\"\n            :data-c=\"0\"\n            :tabindex=\"isCellActive(r, 0) ? 0 : -1\"\n            class=\"focus:outline-2 focus:-outline-offset-2 focus:outline-ring\"\n          >\n            <Checkbox\n              :model-value=\"isSelected(row)\"\n              :aria-label=\"text.selectRow\"\n              tabindex=\"-1\"\n              @update:model-value=\"toggleRow(row)\"\n            />\n          </td>\n          <td\n            v-for=\"(col, i) in columns\"\n            :key=\"col.key\"\n            role=\"gridcell\"\n            :data-r=\"r\"\n            :data-c=\"bodyColumnIndex(i)\"\n            :tabindex=\"isCellActive(r, bodyColumnIndex(i)) ? 0 : -1\"\n            :class=\"\n              cn(\n                headAlignClass(col.align),\n                'focus:outline-2 focus:-outline-offset-2 focus:outline-ring',\n              )\n            \"\n          >\n            <!-- @slot One cell's content — a Badge, a RowActions cluster —\n                 with `row`, `column` and `value` scoped in. -->\n            <slot name=\"cell\" :row=\"row\" :column=\"col\" :value=\"row[col.key]\">\n              {{ row[col.key] ?? \"\" }}\n            </slot>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/primitives/date-picker/src/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../../packages/primitives/date-picker/src/DatePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CalendarPanelLabels, DateSegmentLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Everything this control publishes to assistive technology, which is two\n * shared slices and nothing of its own: the names of the field's segments and\n * the calendar popover's chrome. Both are declared in `src/lib/date-labels.ts`,\n * because `DateTimePicker`, `DateRangePicker` and `DateTimeRangePicker` say the\n * same words for the same reason — they are all one Reka implementation\n * underneath — and four copies of `Previous month` is a translator writing the\n * same word four times.\n *\n * An intersection rather than a third interface, so this name is the type a\n * consumer annotates their own bag with and the two halves stay one definition\n * each. Annotate with `LabelOverrides<DatePickerLabels>` and never with this\n * directly: this one is total, and a key added in a later release would stop a\n * consumer's build.\n */\nexport type DatePickerLabels = DateSegmentLabels & CalendarPanelLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId, useTemplateRef } from \"vue\";\nimport {\n  DatePickerRoot,\n  DatePickerAnchor,\n  DatePickerField,\n  DatePickerInput,\n  DatePickerTrigger,\n  DatePickerContent,\n  DatePickerCalendar,\n  DatePickerHeader,\n  DatePickerPrev,\n  DatePickerHeading,\n  DatePickerNext,\n  DatePickerGrid,\n  DatePickerGridHead,\n  DatePickerGridRow,\n  DatePickerHeadCell,\n  DatePickerGridBody,\n  DatePickerCell,\n  DatePickerCellTrigger,\n} from \"reka-ui\";\nimport { CalendarDays, ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport {\n  getLocalTimeZone,\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  segmentAriaLabel,\n  segmentAriaValueText,\n} from \"@ecoma-io/loom-labels\";\n\n/**\n * DatePicker — one calendar date, entered either by typing it into a segmented\n * field or by picking it out of a calendar popover. Reach for it wherever a\n * date is a value rather than a search: a due date, a start date, a date of\n * birth.\n *\n * The segmented field is the reason this is not an `<input type=\"date\">`.\n * Arrow keys change the segment under the cursor, typing digits fills it and\n * advances, and the segment order and the month names follow `locale` rather\n * than the browser's own — which is what lets a Vietnamese reader and an\n * American reader see the same date written the way each of them writes it.\n * The calendar is the second path to the same value, not the only one.\n *\n * **The model value is a plain ISO date string, `\"YYYY-MM-DD\"`, never a\n * `DateValue`.** Reka and `@internationalized/date` model a date as a calendar\n * object, and that object is the right shape *inside* a date control — it\n * knows about calendars other than the Gregorian one, about month lengths, and\n * about what \"next month\" means on the 31st. It is the wrong shape at the\n * boundary: a host binding a due date has a string from its API and wants a\n * string back for it, and nobody should have to learn a date library to bind a\n * date. So the string is parsed on the way in and re-serialised on the way\n * out, the same instinct as Slider exposing a scalar where Reka models an\n * array. `min`, `max` and the emitted value all speak that one format.\n *\n * A value that does not parse — a half-typed string, an empty one, a\n * datetime — is read as *no date chosen* rather than thrown on. A component\n * library cannot decide that a host's bad data is fatal, and a date field that\n * crashes the page while someone types into the host's own text input beside\n * it is the worst possible reading of \"strict\".\n *\n * For a span rather than a single day, compose two of these — a range control\n * shares almost none of this one's model. For a month or a year alone, neither\n * this nor a Select is right; that is a control this library does not have yet.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, and `required` / `invalid` / `disabled` / `readonly` /\n * `name` all arrive through `useFieldControl()`, so `<Field label=\"Due date\"\n * error=\"…\"><DatePicker /></Field>` needs no attributes at the call site. Every\n * prop below still wins over the row when it is set, in both directions — which\n * is why the four booleans default to `undefined` rather than `false`.\n *\n * `readonly` and `disabled` are different states, not two dials on one, so the\n * field has three resting appearances rather than two. A read-only date is a\n * value on show: the field stays a Tab stop, its segments stay readable and\n * copyable at full strength, and it takes a lifted fill. A disabled one is\n * unavailable: no Tab stop, nothing submitted, and drained a step further in\n * fill, text colour and border weight together.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen date as ISO `YYYY-MM-DD`. Unset, empty or unparseable means no\n     * date is chosen. The explicit `| undefined` is what lets `v-model` bind a\n     * ref that clears — the emitted value drops to `undefined` when the field\n     * is emptied, and a plain optional prop refuses to take it back.\n     */\n    modelValue?: string | undefined;\n    /** The earliest choosable date, same ISO format. Days before it are announced disabled and skipped by the keyboard. */\n    min?: string;\n    /** The latest choosable date, same ISO format. 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    /** 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 date 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 segment group). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`, carried on the hidden input Reka submits the date through. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `DatePickerLabels` — 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 nine 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<DatePickerLabels>;\n  }>(),\n  {\n    locale: \"en\",\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning. `false` is a caller deciding this one control is fine,\n    // enabled or editable even though its row is not; absent is a caller\n    // saying nothing, and only `undefined` survives to mean that past Vue's\n    // 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 date as ISO `YYYY-MM-DD`, or `undefined` once the field has been cleared. */\n  \"update:modelValue\": [value: string | undefined];\n}>();\n\n// Two slots, one prop. `text` is the name everywhere else in the library, and\n// there is no single `text` here because there is no single slot: the segment\n// names and the popover's chrome are separate vocabularies with separate\n// registry entries, and naming them apart is what keeps a reader of the\n// template able to see which one a binding came from. The one `labels` prop\n// feeds both — a getter returning the intersection satisfies either half, and\n// the keys the other half does not know are ignored by `useLabels`' own return\n// type.\nconst segmentText = useLabels(\"dateSegments\", DATE_SEGMENT_LABELS, () => props.labels);\nconst panelText = useLabels(\"calendarPanel\", CALENDAR_PANEL_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. The resolution rules themselves are the shared\n// helpers' — five hand-copied pairs of these two functions drifted once\n// already, so the branches live in `@ecoma-io/loom-labels` now and only the\n// refs stay here. `undefined` for the parts this slice does not name — the\n// `literal` separators, which Reka renders `aria-hidden` and which must stay\n// unnamed.\nfunction segmentLabel(part: string): string | undefined {\n  return segmentAriaLabel({ date: segmentText.value }, part);\n}\n\nfunction segmentValueText(\n  part: string,\n  value: string,\n  monthValue?: number,\n): { \"aria-valuetext\"?: string } {\n  return segmentAriaValueText({\n    date: segmentText.value,\n    part,\n    value,\n    locale: props.locale,\n    month: monthValue,\n  });\n}\n\n// `class` sizes the whole control, so it lands on the anchor — the element the\n// caller's `max-w-xs` has to reach, and the one the popover measures itself\n// against. Every other fallthrough attribute goes one level in, onto the\n// `role=\"group\"` field: `aria-label`, `aria-labelledby` and `aria-describedby`\n// name and describe the thing being entered, and a group is what a screen\n// reader announces that name on entering. Putting them on the anchor instead\n// would name a layout div nothing ever lands in.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\n/**\n * The date segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so the calendar trigger inside a disabled group went inert\n * while the segments beside it still typed a date on an arrow key. Measured in\n * jsdom: an empty `mm` segment became `8`.\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 read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it.\n//\n// `field.attrs` spreads onto `DatePickerField` **after** `fieldAttrs`, which is\n// the node those two were already landing on, and the position is the contract:\n// the bag has resolved the caller's own values already and drops every key that\n// resolved to nothing, so it can only add. Where each key ends up is Reka's\n// decision and worth knowing: `DateFieldRoot` declares `id` and `name` as props\n// and puts both on the visually-hidden `<input>` it submits the date through —\n// which is the element a `<label for>` can actually name, a `role=\"group\"` div\n// being unlabelable — while `aria-describedby`, `aria-required` and\n// `aria-invalid` are undeclared, fall through to `$attrs`, and land on the group\n// itself, where a screen reader announces them once on entering the field.\n//\n// The `:aria-invalid` binding that used to sit on the field is gone with it: an\n// individual attribute written after a `v-bind` wins, so keeping one would\n// overwrite the resolved value with the raw prop.\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. `field.labelledBy`\n// already resolves caller-first — a fallthrough `aria-labelledby` reaches\n// `useFieldControl` as this control's own `ariaLabelledby` — and the row's\n// label (published by Field) names the group when no caller did. Only a\n// caller's `aria-label` suppresses that: they named the control themselves, so\n// the row must not speak over it. A caller's `aria-labelledby` must never\n// resolve to `undefined` here: the individual binding below beats the `v-bind`\n// spread it follows, so an `undefined` strips the caller's attribute right\n// back off the group and leaves it unnamed — measured as exactly that before\n// the guard let the caller's value through.\nconst groupLabelledBy = computed(() => (attrs[\"aria-label\"] ? undefined : field.labelledBy));\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\n// `toString()` already normalises to the Gregorian ISO form whatever calendar\n// the value carries — a locale such as `th-TH` makes Reka's own placeholder a\n// Buddhist date whose year reads 2569, and it still prints `2026-08-11`. What\n// `toCalendarDate` adds is dropping a time component before it can turn the\n// string into `2026-08-11T00:00:00`. `granularity=\"day\"` below is what makes\n// that unreachable today; this is what keeps it unreachable if it ever moves.\nfunction toIso(date: DateValue): string {\n  return toCalendarDate(date).toString();\n}\n\n// `optional()` rather than three separate bindings: an absent bound forwarded\n// as an explicit `undefined` is still a key Reka sees, and an absent\n// `modelValue` forwarded that way is what turns an uncontrolled field into a\n// permanently empty one. Dropping the key says what is true.\nconst rootValue = computed(() =>\n  optional({\n    modelValue: fromIso(props.modelValue),\n    minValue: fromIso(props.min),\n    maxValue: fromIso(props.max),\n  }),\n);\n\n// The panel's open state is owned here rather than left to Reka's\n// `closeOnSelect`, which closes by watching its *own* model value — and that\n// value only moves for a host that echoes the emitted date straight back down.\n// A host that validates before accepting one, or that binds nothing at all,\n// would pick a day and watch the calendar stay open over the field it just\n// filled. Closing on the choice itself does not depend on anyone answering.\nconst open = ref(false);\n\nfunction onDateChange(date: DateValue | undefined) {\n  open.value = false;\n  emit(\"update:modelValue\", date ? toIso(date) : undefined);\n}\n\n// Today is a state, and it may not be carried by the marker dot alone — a\n// reader who cannot see the dot gets `aria-current=\"date\"`, which is the one\n// attribute screen readers already announce for \"this is the current one\".\n// Reka publishes today only as a `data-` attribute and a slot prop, neither of\n// which can reach an attribute binding on the cell itself.\nfunction isDateToday(date: DateValue): boolean {\n  return isToday(date, getLocalTimeZone());\n}\n\n// The field is one Tab stop, not three. Reka leaves every segment tabbable,\n// which turns a single date into three stops a keyboard user has to walk\n// through — and the control everyone already knows, the browser's own date\n// input, is one stop with the arrow keys moving inside it. So a roving\n// tabindex names exactly one segment as the stop, and Reka's own\n// ArrowLeft/ArrowRight handling (and its auto-advance after a filled segment)\n// moves between them by calling `focus()` directly, which ignores tabindex\n// entirely and so keeps working untouched.\nconst focusedPart = ref<string>();\n\nfunction segmentTabIndex(part: string, segments: readonly { part: string }[]): number | undefined {\n  // A disabled field has no stop at all; returning `undefined` removes the\n  // attribute, which is exactly what Reka does for the same case. A read-only\n  // one keeps every stop it had — the value is on show and a reader still\n  // arrows across it to read it, which is the whole difference between the two\n  // states.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = segments.filter((segment) => segment.part !== \"literal\");\n  // The remembered segment is dropped when a locale change takes it away —\n  // a field with no tab stop is unreachable, and `en` has no era segment that\n  // `ja-JP-u-ca-japanese` does.\n  const active =\n    focusedPart.value !== undefined &&\n    editable.some((segment) => segment.part === focusedPart.value)\n      ? focusedPart.value\n      : editable[0]?.part;\n  return part === active ? 0 : -1;\n}\n\n// The month/year heading names the grid, so the two are wired together rather\n// than the grid being an unnamed table of numbers.\nconst headingId = useId();\n\nconst panel = ref<HTMLElement | null>(null);\n\n// Reka's focus scope would land on the first tabbable thing in the panel,\n// which is the previous-month button — so a keyboard user opening the calendar\n// arrives one Tab away from the grid and two from the day they came for.\n// Focus goes to the day the calendar is already sitting on instead: the\n// selected date, or today when nothing is selected, which is the cell Reka has\n// given the grid's own roving tabindex to.\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  <DatePickerRoot\n    v-model:open=\"open\"\n    v-bind=\"rootValue\"\n    :locale=\"locale\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    granularity=\"day\"\n    prevent-deselect\n    @update:model-value=\"onDateChange\"\n  >\n    <!-- The invalid marker lives out here, on the control as a whole, because\n         the field group below already carries a `data-invalid` of Reka's own\n         with a different meaning: that the *typed* date falls outside `min` and\n         `max`. Two markers spelled the same on one element is how a style rule\n         starts answering a question nobody asked it. -->\n    <DatePickerAnchor\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      <DatePickerField\n        v-slot=\"{ segments }\"\n        v-bind=\"{ ...fieldAttrs, ...field.attrs }\"\n        :aria-labelledby=\"groupLabelledBy\"\n        :class=\"\n          cn(\n            // The text input's own height scale, so a date sitting in a form\n            // row beside a text field lines up rather than nearly lining up.\n            // No gap: the separator between two segments is itself a segment,\n            // so spacing them apart writes the date as `3 / 14 / 2026`.\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            // The box carries the ring, exactly as TextField's wrapper does,\n            // and the focused segment below carries a fill instead of a second\n            // outline — a ring drawn inside a ring reads as a rendering fault.\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, and every one of them belongs to this\n            // group rather than to the segments inside it. A fill painted per\n            // segment leaves the literal separators between them on\n            // `background`, and the control comes out striped.\n            //\n            // Read-only keeps its focus ring and its full-strength text: a\n            // read-only date is a value on show, not an unavailable control,\n            // and the two must not look alike. The fill lifts off `background`\n            // to `subtle`, which holds the segments at 13.46:1, and the rim\n            // stays `input` because nothing about the field's reach has moved —\n            // it is still a Tab stop and still submitted. Reka's own\n            // `data-readonly` on this group carries the same state to assistive\n            // tech, so nothing here rests on colour.\n            field.readonly && 'bg-subtle',\n            // Unavailable is a *colour* and a *weight*, never an opacity.\n            // `opacity-50` here faded the segments along with the box, and the\n            // segments are the whole content of the control: `--color-foreground`\n            // measures 14.09:1 on the resting fill and 2.99:1 once composited at\n            // half alpha, with the literal separators and any placeholder\n            // segment down at 2.02:1. The fill drains one step past read-only,\n            // the text follows it to a measured 4.68:1, and the rim slackens\n            // from `input` to `border` — so the two unavailable-looking states\n            // part on three channels rather than on hue alone, which is what a\n            // reader who cannot separate two greys has to have.\n            //\n            // The colour is set here rather than on each segment because no\n            // segment declares one of its own in the resting state, so each\n            // inherits this; `focus:text-primary-text` below is unreachable on a\n            // control that cannot take focus.\n            field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n            // Last of the rules that name a border colour, and the order is\n            // load-bearing: `cn()` resolves a border colour by whichever class\n            // it saw last, so a field that is both in error and unavailable\n            // would otherwise lose its destructive rim to the disabled one.\n            field.invalid && 'border-destructive focus-within:outline-destructive',\n          )\n        \"\n      >\n        <!-- Every `:aria-label` from here down replaces one Reka writes in\n             English inside its own render function. Each reaches the DOM node\n             as a fallthrough attribute, which Vue merges last, so it is a\n             replacement rather than a second name. Removing one does not fall\n             back to nothing; it falls back to Reka's English, which is the\n             failure the label seam exists to close and which no test of Loom's\n             own strings would catch. -->\n        <DatePickerInput\n          v-for=\"(item, index) in segments\"\n          :key=\"index\"\n          :part=\"item.part\"\n          :tabindex=\"segmentTabIndex(item.part, segments)\"\n          :aria-label=\"segmentLabel(item.part)\"\n          v-bind=\"segmentValueText(item.part, item.value, fromIso(props.modelValue)?.month)\"\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=\"focusedPart = item.part\"\n        >\n          {{ item.value }}\n        </DatePickerInput>\n\n        <!-- Dropped entirely while read-only rather than disabled beside a\n             field that is plainly still alive. Reka's `readonly` reaches the\n             calendar too and makes every cell's click a no-op, so the button\n             would open a panel in which nothing can be chosen — a dead end that\n             looks like a working control, which is worse than not offering it.\n             The segments are still there to read the date off. -->\n        <DatePickerTrigger\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          <CalendarDays class=\"h-4 w-4\" />\n        </DatePickerTrigger>\n      </DatePickerField>\n    </DatePickerAnchor>\n\n    <DatePickerContent\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          // Both halves of the motion are scoped to their own state, never\n          // unconditional. Reka's Presence decides unmounting from the\n          // computed animation-name: an unconditional entrance left the closed\n          // panel computing a finished animation it would wait on forever — an\n          // invisible layer over the page, eating clicks. Scoped, closing\n          // swaps the computed animation to fade-fall's, and Presence holds\n          // the panel exactly one exit long, releasing it at animationend.\n          'data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall',\n        )\n      \"\n      @open-auto-focus=\"onOpenAutoFocus\"\n    >\n      <!-- The whole panel rises as one piece. The 42 cells deliberately carry\n           no stagger of their own: `listStaggerDelay` is the vocabulary for a\n           list of rows arriving in reading order, and a grid rippling in cell\n           by cell reads as a rendering glitch rather than as an entrance. -->\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\"` — a name for somebody\n             else's application. It is published twice: as the calendar\n             container's `aria-label`, and inside a visually-hidden live region\n             Reka renders itself, which a fallthrough attribute could not have\n             reached. -->\n        <DatePickerCalendar v-slot=\"{ grid, weekDays }\" :calendar-label=\"panelText.calendar\">\n          <DatePickerHeader class=\"flex items-center justify-between gap-2\">\n            <!-- The two pagers keep `data-[disabled]:opacity-50` where the\n                 field and the cells gave it up, and the difference is what is\n                 inside them: a chevron and nothing else. Fading a glyph costs a\n                 reader nothing, and the buttons carry their name in\n                 `aria-label` rather than in dimmed text. -->\n            <DatePickerPrev\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            </DatePickerPrev>\n\n            <!-- Paging the calendar changes nothing a reader is looking at\n                 except this line, and nothing moves focus — so without the\n                 live region the month silently becomes a different month. -->\n            <DatePickerHeading\n              :id=\"headingId\"\n              aria-live=\"polite\"\n              class=\"text-sm font-medium text-foreground\"\n            />\n\n            <DatePickerNext\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            </DatePickerNext>\n          </DatePickerHeader>\n\n          <DatePickerGrid\n            v-for=\"month in grid\"\n            :key=\"month.value.toString()\"\n            role=\"grid\"\n            :aria-labelledby=\"headingId\"\n            class=\"border-collapse select-none\"\n          >\n            <!-- Reka renders `role=\"application\"` here, which hands every key\n                 straight to the page and takes the table's own semantics away\n                 with it. A calendar is a grid: `role=\"grid\"` is what makes the\n                 cells rows and columns to a screen reader rather than 42\n                 unrelated buttons, and the arrow-key handling Reka installs on\n                 the cells is what a grid promises anyway.\n\n                 The rows and cells below are laid out by the table itself\n                 rather than by flex, and that is load-bearing: `display: flex`\n                 on a `tr` drops its implicit `row` mapping in Chromium and\n                 WebKit, which leaves `role=\"gridcell\"` inside a grid with no\n                 row between them — a broken grid that looks identical. -->\n            <DatePickerGridHead>\n              <DatePickerGridRow>\n                <DatePickerHeadCell\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                </DatePickerHeadCell>\n              </DatePickerGridRow>\n            </DatePickerGridHead>\n\n            <DatePickerGridBody>\n              <DatePickerGridRow v-for=\"(week, weekIndex) in month.rows\" :key=\"weekIndex\">\n                <DatePickerCell\n                  v-for=\"day in week\"\n                  :key=\"day.toString()\"\n                  :date=\"day\"\n                  class=\"p-0 text-center\"\n                >\n                  <!-- A day out of `min`/`max` range is drawn in colour rather\n                       than faded: the number is the cell's whole content, and\n                       `opacity-50` took `--color-foreground` from 14.09:1 on\n                       the popover to 3.13:1. Muted is 5.76:1 and the rule is\n                       written as `:not([data-selected])` so it can never order\n                       against the selected fill's own text colour — the same\n                       trick the range pickers use on their four competing\n                       fills. The strike is the second, hueless cue, and it is\n                       what keeps an unavailable day apart from an adjacent\n                       month's, which is muted too and still selectable. -->\n                  <DatePickerCellTrigger\n                    v-slot=\"{ dayValue, today }\"\n                    :day=\"day\"\n                    :month=\"month.value\"\n                    :aria-current=\"isDateToday(day) ? 'date' : undefined\"\n                    class=\"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-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:line-through [&[data-disabled]:not([data-selected])]:text-muted-foreground\"\n                  >\n                    {{ dayValue }}\n                    <!-- Today's second cue. The dot is decoration to a screen\n                         reader — `aria-current` on the cell is what it reads —\n                         but it is the whole cue for a reader who is looking at\n                         the grid, and it is a shape rather than a hue so it\n                         survives a colour deficiency and forced-colors both. -->\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-[selected]:bg-primary-foreground\"\n                    />\n                  </DatePickerCellTrigger>\n                </DatePickerCell>\n              </DatePickerGridRow>\n            </DatePickerGridBody>\n          </DatePickerGrid>\n        </DatePickerCalendar>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/date-picker/src/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,292 @@
+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 { CALENDAR_PANEL_LABELS, DATE_SEGMENT_LABELS, segmentAriaLabel, segmentAriaValueText } 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 { CalendarDays, ChevronLeft, ChevronRight } from "@lucide/vue";
+import { getLocalTimeZone, isToday, parseDate, toCalendarDate } from "@internationalized/date";
+import { DatePickerAnchor, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger } from "reka-ui";
+//#region packages/primitives/date-picker/src/DatePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selected]:bg-primary-foreground"
+};
+var DatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "DatePicker",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		locale: { default: "en" },
+		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 segmentText = useLabels("dateSegments", DATE_SEGMENT_LABELS, () => props.labels);
+		const panelText = useLabels("calendarPanel", CALENDAR_PANEL_LABELS, () => props.labels);
+		function segmentLabel(part) {
+			return segmentAriaLabel({ date: segmentText.value }, part);
+		}
+		function segmentValueText(part, value, monthValue) {
+			return segmentAriaValueText({
+				date: segmentText.value,
+				part,
+				value,
+				locale: props.locale,
+				month: monthValue
+			});
+		}
+		const { attrs, rest: fieldAttrs } = useSplitAttrs();
+		/**
+		* The date segments are `<div role="spinbutton" tabindex="0">`, and
+		* `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and
+		* `<textarea>` — so the calendar trigger inside a disabled group went inert
+		* while the segments beside it still typed a date on an arrow key. Measured in
+		* jsdom: an empty `mm` segment became `8`.
+		*
+		* 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"] ? void 0 : field.labelledBy);
+		function fromIso(value) {
+			if (!value) return void 0;
+			try {
+				return parseDate(value);
+			} catch {
+				return;
+			}
+		}
+		function toIso(date) {
+			return toCalendarDate(date).toString();
+		}
+		const rootValue = computed(() => optional({
+			modelValue: fromIso(props.modelValue),
+			minValue: fromIso(props.min),
+			maxValue: fromIso(props.max)
+		}));
+		const open = ref(false);
+		function onDateChange(date) {
+			open.value = false;
+			emit("update:modelValue", date ? toIso(date) : void 0);
+		}
+		function isDateToday(date) {
+			return isToday(date, getLocalTimeZone());
+		}
+		const focusedPart = ref();
+		function segmentTabIndex(part, segments) {
+			if (field.disabled || part === "literal") return void 0;
+			const editable = segments.filter((segment) => segment.part !== "literal");
+			return part === (focusedPart.value !== void 0 && editable.some((segment) => segment.part === focusedPart.value) ? focusedPart.value : editable[0]?.part) ? 0 : -1;
+		}
+		const headingId = useId();
+		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(DatePickerRoot), 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,
+				granularity: "day",
+				"prevent-deselect": "",
+				"onUpdate:modelValue": onDateChange
+			}), {
+				default: withCtx(() => [createVNode(unref(DatePickerAnchor), {
+					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(DatePickerField), 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(true), createElementBlock(Fragment, null, renderList(segments, (item, index) => {
+							return openBlock(), createBlock(unref(DatePickerInput), mergeProps({
+								key: index,
+								part: item.part,
+								tabindex: segmentTabIndex(item.part, segments),
+								"aria-label": segmentLabel(item.part)
+							}, { ref_for: true }, segmentValueText(item.part, item.value, fromIso(props.modelValue)?.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) => focusedPart.value = item.part
+							}), {
+								default: withCtx(() => [createTextVNode(toDisplayString(item.value), 1)]),
+								_: 2
+							}, 1040, [
+								"part",
+								"tabindex",
+								"aria-label",
+								"class",
+								"onFocusin"
+							]);
+						}), 128)), !unref(field).readonly ? (openBlock(), createBlock(unref(DatePickerTrigger), {
+							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(CalendarDays), { class: "h-4 w-4" })]),
+							_: 1
+						}, 8, ["aria-label"])) : createCommentVNode("", true)]),
+						_: 1
+					}, 16, ["aria-labelledby", "class"])]),
+					_: 1
+				}, 8, [
+					"data-invalid",
+					"data-readonly",
+					"class"
+				]), createVNode(unref(DatePickerContent), {
+					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(DatePickerCalendar), { "calendar-label": unref(panelText).calendar }, {
+						default: withCtx(({ grid, weekDays }) => [createVNode(unref(DatePickerHeader), { class: "flex items-center justify-between gap-2" }, {
+							default: withCtx(() => [
+								createVNode(unref(DatePickerPrev), {
+									"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(DatePickerHeading), {
+									id: unref(headingId),
+									"aria-live": "polite",
+									class: "text-sm font-medium text-foreground"
+								}, null, 8, ["id"]),
+								createVNode(unref(DatePickerNext), {
+									"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
+						}), (openBlock(true), createElementBlock(Fragment, null, renderList(grid, (month) => {
+							return openBlock(), createBlock(unref(DatePickerGrid), {
+								key: month.value.toString(),
+								role: "grid",
+								"aria-labelledby": unref(headingId),
+								class: "border-collapse select-none"
+							}, {
+								default: withCtx(() => [createVNode(unref(DatePickerGridHead), null, {
+									default: withCtx(() => [createVNode(unref(DatePickerGridRow), null, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays, (day, index) => {
+											return openBlock(), createBlock(unref(DatePickerHeadCell), {
+												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(DatePickerGridBody), null, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(month.rows, (week, weekIndex) => {
+										return openBlock(), createBlock(unref(DatePickerGridRow), { key: weekIndex }, {
+											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
+												return openBlock(), createBlock(unref(DatePickerCell), {
+													key: day.toString(),
+													date: day,
+													class: "p-0 text-center"
+												}, {
+													default: withCtx(() => [createVNode(unref(DatePickerCellTrigger), {
+														day,
+														month: month.value,
+														"aria-current": isDateToday(day) ? "date" : void 0,
+														class: "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-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:line-through [&[data-disabled]:not([data-selected])]:text-muted-foreground"
+													}, {
+														default: withCtx(({ dayValue, today }) => [createTextVNode(toDisplayString(dayValue) + " ", 1), today ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true)]),
+														_: 1
+													}, 8, [
+														"day",
+														"month",
+														"aria-current"
+													])]),
+													_: 2
+												}, 1032, ["date"]);
+											}), 128))]),
+											_: 2
+										}, 1024);
+									}), 128))]),
+									_: 2
+								}, 1024)]),
+								_: 2
+							}, 1032, ["aria-labelledby"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["calendar-label"])], 512)]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 16, [
+				"open",
+				"locale",
+				"disabled",
+				"readonly"
+			]);
+		};
+	}
+});
+//#endregion
+export { DatePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DatePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/date-picker/src/DatePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/date-picker/src/DatePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CalendarPanelLabels, DateSegmentLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Everything this control publishes to assistive technology, which is two\n * shared slices and nothing of its own: the names of the field's segments and\n * the calendar popover's chrome. Both are declared in `src/lib/date-labels.ts`,\n * because `DateTimePicker`, `DateRangePicker` and `DateTimeRangePicker` say the\n * same words for the same reason — they are all one Reka implementation\n * underneath — and four copies of `Previous month` is a translator writing the\n * same word four times.\n *\n * An intersection rather than a third interface, so this name is the type a\n * consumer annotates their own bag with and the two halves stay one definition\n * each. Annotate with `LabelOverrides<DatePickerLabels>` and never with this\n * directly: this one is total, and a key added in a later release would stop a\n * consumer's build.\n */\nexport type DatePickerLabels = DateSegmentLabels & CalendarPanelLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId, useTemplateRef } from \"vue\";\nimport {\n  DatePickerRoot,\n  DatePickerAnchor,\n  DatePickerField,\n  DatePickerInput,\n  DatePickerTrigger,\n  DatePickerContent,\n  DatePickerCalendar,\n  DatePickerHeader,\n  DatePickerPrev,\n  DatePickerHeading,\n  DatePickerNext,\n  DatePickerGrid,\n  DatePickerGridHead,\n  DatePickerGridRow,\n  DatePickerHeadCell,\n  DatePickerGridBody,\n  DatePickerCell,\n  DatePickerCellTrigger,\n} from \"reka-ui\";\nimport { CalendarDays, ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport {\n  getLocalTimeZone,\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  segmentAriaLabel,\n  segmentAriaValueText,\n} from \"@ecoma-io/loom-labels\";\n\n/**\n * DatePicker — one calendar date, entered either by typing it into a segmented\n * field or by picking it out of a calendar popover. Reach for it wherever a\n * date is a value rather than a search: a due date, a start date, a date of\n * birth.\n *\n * The segmented field is the reason this is not an `<input type=\"date\">`.\n * Arrow keys change the segment under the cursor, typing digits fills it and\n * advances, and the segment order and the month names follow `locale` rather\n * than the browser's own — which is what lets a Vietnamese reader and an\n * American reader see the same date written the way each of them writes it.\n * The calendar is the second path to the same value, not the only one.\n *\n * **The model value is a plain ISO date string, `\"YYYY-MM-DD\"`, never a\n * `DateValue`.** Reka and `@internationalized/date` model a date as a calendar\n * object, and that object is the right shape *inside* a date control — it\n * knows about calendars other than the Gregorian one, about month lengths, and\n * about what \"next month\" means on the 31st. It is the wrong shape at the\n * boundary: a host binding a due date has a string from its API and wants a\n * string back for it, and nobody should have to learn a date library to bind a\n * date. So the string is parsed on the way in and re-serialised on the way\n * out, the same instinct as Slider exposing a scalar where Reka models an\n * array. `min`, `max` and the emitted value all speak that one format.\n *\n * A value that does not parse — a half-typed string, an empty one, a\n * datetime — is read as *no date chosen* rather than thrown on. A component\n * library cannot decide that a host's bad data is fatal, and a date field that\n * crashes the page while someone types into the host's own text input beside\n * it is the worst possible reading of \"strict\".\n *\n * For a span rather than a single day, compose two of these — a range control\n * shares almost none of this one's model. For a month or a year alone, neither\n * this nor a Select is right; that is a control this library does not have yet.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, and `required` / `invalid` / `disabled` / `readonly` /\n * `name` all arrive through `useFieldControl()`, so `<Field label=\"Due date\"\n * error=\"…\"><DatePicker /></Field>` needs no attributes at the call site. Every\n * prop below still wins over the row when it is set, in both directions — which\n * is why the four booleans default to `undefined` rather than `false`.\n *\n * `readonly` and `disabled` are different states, not two dials on one, so the\n * field has three resting appearances rather than two. A read-only date is a\n * value on show: the field stays a Tab stop, its segments stay readable and\n * copyable at full strength, and it takes a lifted fill. A disabled one is\n * unavailable: no Tab stop, nothing submitted, and drained a step further in\n * fill, text colour and border weight together.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen date as ISO `YYYY-MM-DD`. Unset, empty or unparseable means no\n     * date is chosen. The explicit `| undefined` is what lets `v-model` bind a\n     * ref that clears — the emitted value drops to `undefined` when the field\n     * is emptied, and a plain optional prop refuses to take it back.\n     */\n    modelValue?: string | undefined;\n    /** The earliest choosable date, same ISO format. Days before it are announced disabled and skipped by the keyboard. */\n    min?: string;\n    /** The latest choosable date, same ISO format. 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    /** 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 date 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 segment group). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`, carried on the hidden input Reka submits the date through. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `DatePickerLabels` — 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 nine 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<DatePickerLabels>;\n  }>(),\n  {\n    locale: \"en\",\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning. `false` is a caller deciding this one control is fine,\n    // enabled or editable even though its row is not; absent is a caller\n    // saying nothing, and only `undefined` survives to mean that past Vue's\n    // 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 date as ISO `YYYY-MM-DD`, or `undefined` once the field has been cleared. */\n  \"update:modelValue\": [value: string | undefined];\n}>();\n\n// Two slots, one prop. `text` is the name everywhere else in the library, and\n// there is no single `text` here because there is no single slot: the segment\n// names and the popover's chrome are separate vocabularies with separate\n// registry entries, and naming them apart is what keeps a reader of the\n// template able to see which one a binding came from. The one `labels` prop\n// feeds both — a getter returning the intersection satisfies either half, and\n// the keys the other half does not know are ignored by `useLabels`' own return\n// type.\nconst segmentText = useLabels(\"dateSegments\", DATE_SEGMENT_LABELS, () => props.labels);\nconst panelText = useLabels(\"calendarPanel\", CALENDAR_PANEL_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. The resolution rules themselves are the shared\n// helpers' — five hand-copied pairs of these two functions drifted once\n// already, so the branches live in `@ecoma-io/loom-labels` now and only the\n// refs stay here. `undefined` for the parts this slice does not name — the\n// `literal` separators, which Reka renders `aria-hidden` and which must stay\n// unnamed.\nfunction segmentLabel(part: string): string | undefined {\n  return segmentAriaLabel({ date: segmentText.value }, part);\n}\n\nfunction segmentValueText(\n  part: string,\n  value: string,\n  monthValue?: number,\n): { \"aria-valuetext\"?: string } {\n  return segmentAriaValueText({\n    date: segmentText.value,\n    part,\n    value,\n    locale: props.locale,\n    month: monthValue,\n  });\n}\n\n// `class` sizes the whole control, so it lands on the anchor — the element the\n// caller's `max-w-xs` has to reach, and the one the popover measures itself\n// against. Every other fallthrough attribute goes one level in, onto the\n// `role=\"group\"` field: `aria-label`, `aria-labelledby` and `aria-describedby`\n// name and describe the thing being entered, and a group is what a screen\n// reader announces that name on entering. Putting them on the anchor instead\n// would name a layout div nothing ever lands in.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\n/**\n * The date segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so the calendar trigger inside a disabled group went inert\n * while the segments beside it still typed a date on an arrow key. Measured in\n * jsdom: an empty `mm` segment became `8`.\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 read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it.\n//\n// `field.attrs` spreads onto `DatePickerField` **after** `fieldAttrs`, which is\n// the node those two were already landing on, and the position is the contract:\n// the bag has resolved the caller's own values already and drops every key that\n// resolved to nothing, so it can only add. Where each key ends up is Reka's\n// decision and worth knowing: `DateFieldRoot` declares `id` and `name` as props\n// and puts both on the visually-hidden `<input>` it submits the date through —\n// which is the element a `<label for>` can actually name, a `role=\"group\"` div\n// being unlabelable — while `aria-describedby`, `aria-required` and\n// `aria-invalid` are undeclared, fall through to `$attrs`, and land on the group\n// itself, where a screen reader announces them once on entering the field.\n//\n// The `:aria-invalid` binding that used to sit on the field is gone with it: an\n// individual attribute written after a `v-bind` wins, so keeping one would\n// overwrite the resolved value with the raw prop.\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. `field.labelledBy`\n// already resolves caller-first — a fallthrough `aria-labelledby` reaches\n// `useFieldControl` as this control's own `ariaLabelledby` — and the row's\n// label (published by Field) names the group when no caller did. Only a\n// caller's `aria-label` suppresses that: they named the control themselves, so\n// the row must not speak over it. A caller's `aria-labelledby` must never\n// resolve to `undefined` here: the individual binding below beats the `v-bind`\n// spread it follows, so an `undefined` strips the caller's attribute right\n// back off the group and leaves it unnamed — measured as exactly that before\n// the guard let the caller's value through.\nconst groupLabelledBy = computed(() => (attrs[\"aria-label\"] ? undefined : field.labelledBy));\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\n// `toString()` already normalises to the Gregorian ISO form whatever calendar\n// the value carries — a locale such as `th-TH` makes Reka's own placeholder a\n// Buddhist date whose year reads 2569, and it still prints `2026-08-11`. What\n// `toCalendarDate` adds is dropping a time component before it can turn the\n// string into `2026-08-11T00:00:00`. `granularity=\"day\"` below is what makes\n// that unreachable today; this is what keeps it unreachable if it ever moves.\nfunction toIso(date: DateValue): string {\n  return toCalendarDate(date).toString();\n}\n\n// `optional()` rather than three separate bindings: an absent bound forwarded\n// as an explicit `undefined` is still a key Reka sees, and an absent\n// `modelValue` forwarded that way is what turns an uncontrolled field into a\n// permanently empty one. Dropping the key says what is true.\nconst rootValue = computed(() =>\n  optional({\n    modelValue: fromIso(props.modelValue),\n    minValue: fromIso(props.min),\n    maxValue: fromIso(props.max),\n  }),\n);\n\n// The panel's open state is owned here rather than left to Reka's\n// `closeOnSelect`, which closes by watching its *own* model value — and that\n// value only moves for a host that echoes the emitted date straight back down.\n// A host that validates before accepting one, or that binds nothing at all,\n// would pick a day and watch the calendar stay open over the field it just\n// filled. Closing on the choice itself does not depend on anyone answering.\nconst open = ref(false);\n\nfunction onDateChange(date: DateValue | undefined) {\n  open.value = false;\n  emit(\"update:modelValue\", date ? toIso(date) : undefined);\n}\n\n// Today is a state, and it may not be carried by the marker dot alone — a\n// reader who cannot see the dot gets `aria-current=\"date\"`, which is the one\n// attribute screen readers already announce for \"this is the current one\".\n// Reka publishes today only as a `data-` attribute and a slot prop, neither of\n// which can reach an attribute binding on the cell itself.\nfunction isDateToday(date: DateValue): boolean {\n  return isToday(date, getLocalTimeZone());\n}\n\n// The field is one Tab stop, not three. Reka leaves every segment tabbable,\n// which turns a single date into three stops a keyboard user has to walk\n// through — and the control everyone already knows, the browser's own date\n// input, is one stop with the arrow keys moving inside it. So a roving\n// tabindex names exactly one segment as the stop, and Reka's own\n// ArrowLeft/ArrowRight handling (and its auto-advance after a filled segment)\n// moves between them by calling `focus()` directly, which ignores tabindex\n// entirely and so keeps working untouched.\nconst focusedPart = ref<string>();\n\nfunction segmentTabIndex(part: string, segments: readonly { part: string }[]): number | undefined {\n  // A disabled field has no stop at all; returning `undefined` removes the\n  // attribute, which is exactly what Reka does for the same case. A read-only\n  // one keeps every stop it had — the value is on show and a reader still\n  // arrows across it to read it, which is the whole difference between the two\n  // states.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = segments.filter((segment) => segment.part !== \"literal\");\n  // The remembered segment is dropped when a locale change takes it away —\n  // a field with no tab stop is unreachable, and `en` has no era segment that\n  // `ja-JP-u-ca-japanese` does.\n  const active =\n    focusedPart.value !== undefined &&\n    editable.some((segment) => segment.part === focusedPart.value)\n      ? focusedPart.value\n      : editable[0]?.part;\n  return part === active ? 0 : -1;\n}\n\n// The month/year heading names the grid, so the two are wired together rather\n// than the grid being an unnamed table of numbers.\nconst headingId = useId();\n\nconst panel = ref<HTMLElement | null>(null);\n\n// Reka's focus scope would land on the first tabbable thing in the panel,\n// which is the previous-month button — so a keyboard user opening the calendar\n// arrives one Tab away from the grid and two from the day they came for.\n// Focus goes to the day the calendar is already sitting on instead: the\n// selected date, or today when nothing is selected, which is the cell Reka has\n// given the grid's own roving tabindex to.\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  <DatePickerRoot\n    v-model:open=\"open\"\n    v-bind=\"rootValue\"\n    :locale=\"locale\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    granularity=\"day\"\n    prevent-deselect\n    @update:model-value=\"onDateChange\"\n  >\n    <!-- The invalid marker lives out here, on the control as a whole, because\n         the field group below already carries a `data-invalid` of Reka's own\n         with a different meaning: that the *typed* date falls outside `min` and\n         `max`. Two markers spelled the same on one element is how a style rule\n         starts answering a question nobody asked it. -->\n    <DatePickerAnchor\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      <DatePickerField\n        v-slot=\"{ segments }\"\n        v-bind=\"{ ...fieldAttrs, ...field.attrs }\"\n        :aria-labelledby=\"groupLabelledBy\"\n        :class=\"\n          cn(\n            // The text input's own height scale, so a date sitting in a form\n            // row beside a text field lines up rather than nearly lining up.\n            // No gap: the separator between two segments is itself a segment,\n            // so spacing them apart writes the date as `3 / 14 / 2026`.\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            // The box carries the ring, exactly as TextField's wrapper does,\n            // and the focused segment below carries a fill instead of a second\n            // outline — a ring drawn inside a ring reads as a rendering fault.\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, and every one of them belongs to this\n            // group rather than to the segments inside it. A fill painted per\n            // segment leaves the literal separators between them on\n            // `background`, and the control comes out striped.\n            //\n            // Read-only keeps its focus ring and its full-strength text: a\n            // read-only date is a value on show, not an unavailable control,\n            // and the two must not look alike. The fill lifts off `background`\n            // to `subtle`, which holds the segments at 13.46:1, and the rim\n            // stays `input` because nothing about the field's reach has moved —\n            // it is still a Tab stop and still submitted. Reka's own\n            // `data-readonly` on this group carries the same state to assistive\n            // tech, so nothing here rests on colour.\n            field.readonly && 'bg-subtle',\n            // Unavailable is a *colour* and a *weight*, never an opacity.\n            // `opacity-50` here faded the segments along with the box, and the\n            // segments are the whole content of the control: `--color-foreground`\n            // measures 14.09:1 on the resting fill and 2.99:1 once composited at\n            // half alpha, with the literal separators and any placeholder\n            // segment down at 2.02:1. The fill drains one step past read-only,\n            // the text follows it to a measured 4.68:1, and the rim slackens\n            // from `input` to `border` — so the two unavailable-looking states\n            // part on three channels rather than on hue alone, which is what a\n            // reader who cannot separate two greys has to have.\n            //\n            // The colour is set here rather than on each segment because no\n            // segment declares one of its own in the resting state, so each\n            // inherits this; `focus:text-primary-text` below is unreachable on a\n            // control that cannot take focus.\n            field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n            // Last of the rules that name a border colour, and the order is\n            // load-bearing: `cn()` resolves a border colour by whichever class\n            // it saw last, so a field that is both in error and unavailable\n            // would otherwise lose its destructive rim to the disabled one.\n            field.invalid && 'border-destructive focus-within:outline-destructive',\n          )\n        \"\n      >\n        <!-- Every `:aria-label` from here down replaces one Reka writes in\n             English inside its own render function. Each reaches the DOM node\n             as a fallthrough attribute, which Vue merges last, so it is a\n             replacement rather than a second name. Removing one does not fall\n             back to nothing; it falls back to Reka's English, which is the\n             failure the label seam exists to close and which no test of Loom's\n             own strings would catch. -->\n        <DatePickerInput\n          v-for=\"(item, index) in segments\"\n          :key=\"index\"\n          :part=\"item.part\"\n          :tabindex=\"segmentTabIndex(item.part, segments)\"\n          :aria-label=\"segmentLabel(item.part)\"\n          v-bind=\"segmentValueText(item.part, item.value, fromIso(props.modelValue)?.month)\"\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=\"focusedPart = item.part\"\n        >\n          {{ item.value }}\n        </DatePickerInput>\n\n        <!-- Dropped entirely while read-only rather than disabled beside a\n             field that is plainly still alive. Reka's `readonly` reaches the\n             calendar too and makes every cell's click a no-op, so the button\n             would open a panel in which nothing can be chosen — a dead end that\n             looks like a working control, which is worse than not offering it.\n             The segments are still there to read the date off. -->\n        <DatePickerTrigger\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          <CalendarDays class=\"h-4 w-4\" />\n        </DatePickerTrigger>\n      </DatePickerField>\n    </DatePickerAnchor>\n\n    <DatePickerContent\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          // Both halves of the motion are scoped to their own state, never\n          // unconditional. Reka's Presence decides unmounting from the\n          // computed animation-name: an unconditional entrance left the closed\n          // panel computing a finished animation it would wait on forever — an\n          // invisible layer over the page, eating clicks. Scoped, closing\n          // swaps the computed animation to fade-fall's, and Presence holds\n          // the panel exactly one exit long, releasing it at animationend.\n          'data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall',\n        )\n      \"\n      @open-auto-focus=\"onOpenAutoFocus\"\n    >\n      <!-- The whole panel rises as one piece. The 42 cells deliberately carry\n           no stagger of their own: `listStaggerDelay` is the vocabulary for a\n           list of rows arriving in reading order, and a grid rippling in cell\n           by cell reads as a rendering glitch rather than as an entrance. -->\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\"` — a name for somebody\n             else's application. It is published twice: as the calendar\n             container's `aria-label`, and inside a visually-hidden live region\n             Reka renders itself, which a fallthrough attribute could not have\n             reached. -->\n        <DatePickerCalendar v-slot=\"{ grid, weekDays }\" :calendar-label=\"panelText.calendar\">\n          <DatePickerHeader class=\"flex items-center justify-between gap-2\">\n            <!-- The two pagers keep `data-[disabled]:opacity-50` where the\n                 field and the cells gave it up, and the difference is what is\n                 inside them: a chevron and nothing else. Fading a glyph costs a\n                 reader nothing, and the buttons carry their name in\n                 `aria-label` rather than in dimmed text. -->\n            <DatePickerPrev\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            </DatePickerPrev>\n\n            <!-- Paging the calendar changes nothing a reader is looking at\n                 except this line, and nothing moves focus — so without the\n                 live region the month silently becomes a different month. -->\n            <DatePickerHeading\n              :id=\"headingId\"\n              aria-live=\"polite\"\n              class=\"text-sm font-medium text-foreground\"\n            />\n\n            <DatePickerNext\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            </DatePickerNext>\n          </DatePickerHeader>\n\n          <DatePickerGrid\n            v-for=\"month in grid\"\n            :key=\"month.value.toString()\"\n            role=\"grid\"\n            :aria-labelledby=\"headingId\"\n            class=\"border-collapse select-none\"\n          >\n            <!-- Reka renders `role=\"application\"` here, which hands every key\n                 straight to the page and takes the table's own semantics away\n                 with it. A calendar is a grid: `role=\"grid\"` is what makes the\n                 cells rows and columns to a screen reader rather than 42\n                 unrelated buttons, and the arrow-key handling Reka installs on\n                 the cells is what a grid promises anyway.\n\n                 The rows and cells below are laid out by the table itself\n                 rather than by flex, and that is load-bearing: `display: flex`\n                 on a `tr` drops its implicit `row` mapping in Chromium and\n                 WebKit, which leaves `role=\"gridcell\"` inside a grid with no\n                 row between them — a broken grid that looks identical. -->\n            <DatePickerGridHead>\n              <DatePickerGridRow>\n                <DatePickerHeadCell\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                </DatePickerHeadCell>\n              </DatePickerGridRow>\n            </DatePickerGridHead>\n\n            <DatePickerGridBody>\n              <DatePickerGridRow v-for=\"(week, weekIndex) in month.rows\" :key=\"weekIndex\">\n                <DatePickerCell\n                  v-for=\"day in week\"\n                  :key=\"day.toString()\"\n                  :date=\"day\"\n                  class=\"p-0 text-center\"\n                >\n                  <!-- A day out of `min`/`max` range is drawn in colour rather\n                       than faded: the number is the cell's whole content, and\n                       `opacity-50` took `--color-foreground` from 14.09:1 on\n                       the popover to 3.13:1. Muted is 5.76:1 and the rule is\n                       written as `:not([data-selected])` so it can never order\n                       against the selected fill's own text colour — the same\n                       trick the range pickers use on their four competing\n                       fills. The strike is the second, hueless cue, and it is\n                       what keeps an unavailable day apart from an adjacent\n                       month's, which is muted too and still selectable. -->\n                  <DatePickerCellTrigger\n                    v-slot=\"{ dayValue, today }\"\n                    :day=\"day\"\n                    :month=\"month.value\"\n                    :aria-current=\"isDateToday(day) ? 'date' : undefined\"\n                    class=\"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-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:line-through [&[data-disabled]:not([data-selected])]:text-muted-foreground\"\n                  >\n                    {{ dayValue }}\n                    <!-- Today's second cue. The dot is decoration to a screen\n                         reader — `aria-current` on the cell is what it reads —\n                         but it is the whole cue for a reader who is looking at\n                         the grid, and it is a shape rather than a hue so it\n                         survives a colour deficiency and forced-colors both. -->\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-[selected]:bg-primary-foreground\"\n                    />\n                  </DatePickerCellTrigger>\n                </DatePickerCell>\n              </DatePickerGridRow>\n            </DatePickerGridBody>\n          </DatePickerGrid>\n        </DatePickerCalendar>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgHA,MAAM,QAAQ;EAmDd,MAAM,OAAO;EAab,MAAM,cAAc,UAAU,gBAAgB,2BAA2B,MAAM,MAAM;EACrF,MAAM,YAAY,UAAU,iBAAiB,6BAA6B,MAAM,MAAM;EAUtF,SAAS,aAAa,MAAkC;GACtD,OAAO,iBAAiB,EAAE,MAAM,YAAY,MAAM,GAAG,IAAI;EAC3D;EAEA,SAAS,iBACP,MACA,OACA,YAC+B;GAC/B,OAAO,qBAAqB;IAC1B,MAAM,YAAY;IAClB;IACA;IACA,QAAQ,MAAM;IACd,OAAO;GACT,CAAC;EACH;EAUA,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;;;;;;;;;;;EAYlD,MAAM,SAAS,eAAkC,QAAQ;EACzD,MAAM,gBAAgB,0BAA0B,OAAO,OAAO,GAAG;EAqBjE,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,gBAAgB,MAAM;GACtB,MAAM,MAAM;GAGZ,UAAU,cAAc,QAAQ,OAAO,MAAM;GAC7C,UAAU,MAAM;GAChB,SAAS,MAAM;GACf,UAAU,MAAM;EAClB,EAAE;EAYF,MAAM,kBAAkB,eAAgB,MAAM,gBAAgB,KAAA,IAAY,MAAM,UAAW;EAE3F,SAAS,QAAQ,OAAkD;GACjE,IAAI,CAAC,OAAO,OAAO,KAAA;GACnB,IAAI;IACF,OAAO,UAAU,KAAK;GACxB,QAAQ;IACN;GACF;EACF;EAQA,SAAS,MAAM,MAAyB;GACtC,OAAO,eAAe,IAAI,CAAC,CAAC,SAAS;EACvC;EAMA,MAAM,YAAY,eAChB,SAAS;GACP,YAAY,QAAQ,MAAM,UAAU;GACpC,UAAU,QAAQ,MAAM,GAAG;GAC3B,UAAU,QAAQ,MAAM,GAAG;EAC7B,CAAC,CACH;EAQA,MAAM,OAAO,IAAI,KAAK;EAEtB,SAAS,aAAa,MAA6B;GACjD,KAAK,QAAQ;GACb,KAAK,qBAAqB,OAAO,MAAM,IAAI,IAAI,KAAA,CAAS;EAC1D;EAOA,SAAS,YAAY,MAA0B;GAC7C,OAAO,QAAQ,MAAM,iBAAiB,CAAC;EACzC;EAUA,MAAM,cAAc,IAAY;EAEhC,SAAS,gBAAgB,MAAc,UAA2D;GAMhG,IAAI,MAAM,YAAY,SAAS,WAAW,OAAO,KAAA;GACjD,MAAM,WAAW,SAAS,QAAQ,YAAY,QAAQ,SAAS,SAAS;GASxE,OAAO,UAJL,YAAY,UAAU,KAAA,KACtB,SAAS,MAAM,YAAY,QAAQ,SAAS,YAAY,KAAK,IACzD,YAAY,QACZ,SAAS,EAAE,EAAE,QACM,IAAI;EAC/B;EAIA,MAAM,YAAY,MAAM;EAExB,MAAM,QAAQ,IAAwB,IAAI;EAQ1C,SAAS,gBAAgB,OAAc;GACrC,MAAM,MAAM,MAAM,OAAO,cACvB,mDACF;GACA,IAAI,CAAC,KAAK;GACV,MAAM,eAAe;GACrB,IAAI,MAAM;EACZ;;GAIE,OAAA,UAAA,GAAA,YA+PiB,MAAA,cAAA,GA/PjB,WA+PiB;IA9PP,MAAM,KAAA;IAAA,iBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAI,QAAA;GACV,GAAA,UAAA,OAAS;IAChB,QAAQ,QAAA;IACR,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IACjB,aAAY;IACZ,oBAAA;IACC,uBAAoB;;IAOrB,SAAA,cAuGmB,CAvGnB,YAuGmB,MAAA,gBAAA,GAAA;KAtGb,SAAA;KAAJ,KAAI;KACH,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;KAC/B,iBAAe,MAAA,KAAA,CAAK,CAAC,YAAY,KAAA;KACjC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,gBAAiB,MAAA,KAAA,CAAK,CAAC,KAAK,CAAA;;KAEtC,SAAA,cAgGkB,CAhGlB,YAgGkB,MAAA,eAAA,GAhGlB,WAgGkB;MAAA,GA9FH,MAAA,UAAA;MAAU,GAAK,MAAA,KAAA,CAAK,CAAC;KAAK,GAAA;MACtC,mBAAiB,gBAAA;MACjB,OAAkB,MAAA,EAAA,CAAE,CAAA,0GAAA,sFAAA,kFAAu2B,CAAA,MAAA,KAAA,CAAK,CAAC,WAAO,4BAAo7B,MAAA,KAAA,CAAK,CAAC,YAAQ,aAAilC,MAAA,KAAA,CAAK,CAAC,YAAQ,mEAA0Y,MAAA,KAAA,CAAK,CAAC,WAAO,qDAAA;;MA2D/zG,SAAA,SAAiC,EA9DzB,eAAQ,EA6DlB,UAAA,IAAA,GAAA,mBAmBkB,UAAA,MAAA,WAlBQ,WAAhB,MAAM,UAAK;OADrB,OAAA,UAAA,GAAA,YAmBkB,MAAA,eAAA,GAnBlB,WAmBkB;QAjBf,KAAK;QACL,MAAM,KAAK;QACX,UAAU,gBAAgB,KAAK,MAAM,QAAQ;QAC7C,cAAY,aAAa,KAAK,IAAI;OAC3B,GAAA,EAAA,SAAA,KAAA,GAAA,iBAAiB,KAAK,MAAM,KAAK,OAAO,QAAQ,MAAM,UAAU,CAAA,EAAG,KAAK,GAAA;QAC/E,OAAoB,MAAA,EAAA,CAAE,CAAA,0CAAA,+CAAA,kDAAA,4CAA+P,KAAK,SAAI,aAAA,uBAAA;QAS9R,YAAO,WAAE,YAAA,QAAc,KAAK;;QAE7B,SAAA,cAAgB,CAAb,gBAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;MAUN,CAAA,GAAA,GAAA,IAAA,CAAA,MAAA,KAAA,CAAK,CAAC,YADf,UAAA,GAAA,YAMoB,MAAA,iBAAA,GAAA;;OAJjB,cAAY,MAAA,SAAA,CAAS,CAAC;OACvB,OAAM;;OAEN,SAAA,cAAgC,CAAhC,YAAgC,MAAA,YAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;;;;;;;;IAKnC,CAAA,GAAA,YAsIoB,MAAA,iBAAA,GAAA;KArIlB,OAAM;KACL,eAAa;KACb,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,2GAAA,2EAAA,CAAA;KAaD;;KAMlB,SAAA,cA+GM,CA/GN,mBA+GM,OAAA;MA/GG,SAAA;MAAJ,KAAI;MAAQ,OAAM;KAOrB,GAAA,CAAA,YAuGqB,MAAA,kBAAA,GAAA,EAvG4B,kBAAgB,MAAA,SAAA,CAAS,CAAC,SAAA,GAAA;MACzE,SAAA,SA4BmB,EA7BS,MAAM,eAAQ,CAC1C,YA4BmB,MAAA,gBAAA,GAAA,EA5BD,OAAM,0CAAyC,GAAA;OAM/D,SAAA,cAKiB;QALjB,YAKiB,MAAA,cAAA,GAAA;SAJd,cAAY,MAAA,SAAA,CAAS,CAAC;SACvB,OAAM;;SAEN,SAAA,cAA+B,CAA/B,YAA+B,MAAA,WAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;QAM9B,YAIE,MAAA,iBAAA,GAAA;SAHC,IAAI,MAAA,SAAA;SACL,aAAU;SACV,OAAM;;QAGR,YAKiB,MAAA,cAAA,GAAA;SAJd,cAAY,MAAA,SAAA,CAAS,CAAC;SACvB,OAAM;;SAEN,SAAA,cAAgC,CAAhC,YAAgC,MAAA,YAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;;;MAIjC,CAAA,IAAA,UAAA,IAAA,GAAA,mBAuEiB,UAAA,MAAA,WAtEC,OAAT,UAAK;OADd,OAAA,UAAA,GAAA,YAuEiB,MAAA,cAAA,GAAA;QArEd,KAAK,MAAM,MAAM,SAAQ;QAC1B,MAAK;QACJ,mBAAiB,MAAA,SAAA;QAClB,OAAM;;QAcN,SAAA,cAUqB,CAVrB,YAUqB,MAAA,kBAAA,GAAA,MAAA;SATnB,SAAA,cAQoB,CARpB,YAQoB,MAAA,iBAAA,GAAA,MAAA;UANhB,SAAA,cAAgC,EADlC,UAAA,IAAA,GAAA,mBAMqB,UAAA,MAAA,WALI,WAAf,KAAK,UAAK;WADpB,OAAA,UAAA,GAAA,YAMqB,MAAA,kBAAA,GAAA;YAJlB,KAAK;YACN,OAAM;;YAEN,SAAA,cAAS,CAAN,gBAAA,gBAAA,GAAG,GAAA,CAAA,CAAA,CAAA;;;;;;;QAKZ,GAAA,IAAA,GAAA,YAuCqB,MAAA,kBAAA,GAAA,MAAA;SAtCA,SAAA,cAAuC,EAA1D,UAAA,IAAA,GAAA,mBAqCoB,UAAA,MAAA,WArC2B,MAAM,OAA1B,MAAM,cAAS;UAA1C,OAAA,UAAA,GAAA,YAqCoB,MAAA,iBAAA,GAAA,EArCwC,KAAK,UAAS,GAAA;WAEtE,SAAA,cAAmB,EADrB,UAAA,IAAA,GAAA,mBAmCiB,UAAA,MAAA,WAlCD,OAAP,QAAG;YADZ,OAAA,UAAA,GAAA,YAmCiB,MAAA,cAAA,GAAA;aAjCd,KAAK,IAAI,SAAQ;aACjB,MAAM;aACP,OAAM;;aAYN,SAAA,cAkBwB,CAlBxB,YAkBwB,MAAA,qBAAA,GAAA;cAhBhB;cACL,OAAO,MAAM;cACb,gBAAc,YAAY,GAAG,IAAA,SAAa,KAAA;cAC3C,OAAM;;cAEN,SAAA,SAAc,EANJ,UAAU,YAAK,CAMtB,gBAAA,gBAAA,QAAQ,IAAG,KAMd,CAAA,GACQ,SADR,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}