minerva-design 1.0.0 → 1.0.2

package/dist/uni/DatePicker.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { computed, ref, watch, provide, getCurrentInstance } from "vue";
+import { dayKey, monthStart, parseDayKey } from "../core/index.js";
+import Input from "./Input.vue";
+import MonthCalendar from "./MonthCalendar.vue";
+import PopoverContent from "./PopoverContent.vue";
+import type { MiniPopoverContext } from "./popover-context.js";
+import { inheritForm } from "./form-context.js";
+import { useI18n } from "./i18n.js";
+import { useNativeId } from "./native-id.js";
+const raw = withDefaults(
+  defineProps<{
+    value?: string | null;
+    modelValue?: string | null;
+    defaultValue?: string;
+    minDate?: string;
+    maxDate?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    clearable?: boolean;
+    placeholder?: string;
+    label?: string;
+    name?: string;
+    id?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    locale?: string;
+    size?: "small" | "medium" | "large";
+  }>(),
+  { clearable: true, name: "date-picker", size: "medium" },
+);
+const props = inheritForm(raw),
+  { t } = useI18n();
+const emit = defineEmits<{
+  change: [value: string];
+  "update:modelValue": [value: string];
+  openChange: [open: boolean];
+}>();
+const local = ref(props.defaultValue ?? ""),
+  draft = ref<string | null>(null),
+  open = ref(false);
+const current = computed(() =>
+  props.modelValue !== undefined
+    ? (props.modelValue ?? "")
+    : props.value !== undefined
+      ? (props.value ?? "")
+      : local.value,
+);
+const month = ref(monthStart(parseDayKey(current.value) ?? new Date()));
+const blocked = computed(() => props.disabled || props.readOnly);
+const field = ref<any>(),
+  fieldId = `mn-date-${useNativeId()}`;
+const instance = getCurrentInstance();
+let touching = false;
+function setOpen(next: boolean) {
+  if ((next && blocked.value) || next === open.value) return;
+  open.value = next;
+  emit("openChange", next);
+  if (next) month.value = monthStart(parseDayKey(current.value) ?? new Date());
+}
+watch(blocked, (value) => {
+  if (value) setOpen(false);
+});
+watch(
+  () => [props.value, props.modelValue],
+  () => {
+    draft.value = null;
+  },
+);
+const allowed = (key: string) =>
+  (!props.minDate || key >= props.minDate) &&
+  (!props.maxDate || key <= props.maxDate);
+function commit(next: string) {
+  if (blocked.value) return;
+  if (props.value === undefined && props.modelValue === undefined)
+    local.value = next;
+  emit("change", next);
+  emit("update:modelValue", next);
+}
+function input(text: string) {
+  if (blocked.value) return;
+  draft.value = text;
+  if (!text) commit("");
+  else {
+    const parsed = parseDayKey(text, true);
+    if (parsed && allowed(dayKey(parsed))) {
+      commit(dayKey(parsed));
+      month.value = monthStart(parsed);
+    }
+  }
+}
+function blur() {
+  if (touching) {
+    touching = false;
+    return;
+  }
+  if (blocked.value || draft.value === null) return;
+  const parsed = parseDayKey(draft.value.trim(), false);
+  if (!draft.value.trim()) {
+    if (current.value) commit("");
+  } else if (parsed) {
+    const key = dayKey(parsed);
+    if (allowed(key) && key !== current.value) {
+      commit(key);
+      month.value = monthStart(parsed);
+    }
+  }
+  draft.value = null;
+}
+function choose(key: string) {
+  touching = false;
+  if (blocked.value || !allowed(key)) return;
+  draft.value = null;
+  commit(key);
+  setOpen(false);
+}
+function clear() {
+  touching = false;
+  draft.value = null;
+  commit("");
+}
+provide<MiniPopoverContext>("minerva:popover", {
+  open: computed(() => open.value && !blocked.value),
+  disabled: blocked,
+  placement: computed(() => "bottom"),
+  modal: computed(() => false),
+  setOpen,
+  trigger: field,
+  anchor: ref(),
+  anchorId: ref(""),
+  triggerId: fieldId,
+  measureTrigger: (callback) => {
+    uni
+      .createSelectorQuery?.()
+      .in(instance?.proxy)
+      .select(`#${fieldId}`)
+      .boundingClientRect((rect: any) => {
+        if (rect) callback(rect);
+      })
+      .exec();
+  },
+});
+</script>
+<template>
+  <view
+    :id="fieldId"
+    class="mn-uni-date-picker"
+    :data-state="open ? 'open' : 'closed'"
+  >
+    <text v-if="label">{{ label }}</text>
+    <Input
+      ref="field"
+      :id="props.id"
+      :value="draft ?? current"
+      :name="name"
+      :size="size"
+      :placeholder="placeholder ?? t('datePicker.placeholder')"
+      :aria-label="label ?? props.ariaLabel ?? t('datePicker.label')"
+      :aria-labelledby="props.ariaLabelledby"
+      :aria-describedby="props.ariaDescribedby"
+      :disabled="props.disabled"
+      :read-only="props.readOnly"
+      :required="props.required"
+      :invalid="props.invalid"
+      @change="input"
+      @blur="blur"
+      @confirm="
+        blur();
+        setOpen(false);
+      "
+      @click="setOpen(!open)"
+      @keydown="
+        if ($event.key === 'Escape') setOpen(false);
+        else if ($event.key === 'ArrowDown') setOpen(true);
+      "
+    >
+      <template #suffix
+        ><button
+          v-if="clearable && current && !blocked"
+          class="mn-close"
+          :aria-label="t('datePicker.clear')"
+          @touchstart="touching = true"
+          @touchcancel="touching = false"
+          @mousedown.prevent
+          @tap.stop="clear"
+        >
+          ×
+        </button></template
+      >
+    </Input>
+    <PopoverContent
+      align="start"
+      :aria-label="label ?? props.ariaLabel ?? t('datePicker.label')"
+      @open-auto-focus="$event.preventDefault()"
+    >
+      <view
+        @touchstart="touching = true"
+        @touchcancel="touching = false"
+        @mousedown.prevent
+      >
+        <MonthCalendar
+          :month="month"
+          :value="current"
+          :min="minDate"
+          :max="maxDate"
+          :locale="locale"
+          :size="size"
+          :show-selected-day-events="false"
+          @month-change="month = $event"
+          @select="choose"
+        />
+        <button
+          class="mn-button mn-variant-ghost"
+          :disabled="!allowed(dayKey(new Date()))"
+          @tap="choose(dayKey(new Date()))"
+        >
+          {{ t("datePicker.today") }}
+        </button>
+      </view>
+    </PopoverContent>
+  </view>
+</template>

package/dist/uni/DatePicker.vue.d.ts

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    value?: string | null;
+    modelValue?: string | null;
+    defaultValue?: string;
+    minDate?: string;
+    maxDate?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    clearable?: boolean;
+    placeholder?: string;
+    label?: string;
+    name?: string;
+    id?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    locale?: string;
+    size?: "small" | "medium" | "large";
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    openChange: (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+}>, {
+    size: "small" | "medium" | "large";
+    name: string;
+    clearable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/uni/MonthCalendar.vue

@@ -49,6 +49,7 @@ const props = withDefaults(
 );
 const emit = defineEmits<{
   change: [day: string];
+  select: [day: string];
   "update:modelValue": [day: string];
   monthChange: [date: Date];
   "update:month": [date: Date];
@@ -157,6 +158,7 @@ function goTo(date: Date) {
 function choose(date: Date) {
   const day = dayKey(date);
   if (blocked(day)) return;
+  emit("select", day);
   const changed = day !== selected.value;
   if (props.value === undefined && props.modelValue === undefined)
     localValue.value = day;

package/dist/uni/MonthCalendar.vue.d.ts

@@ -43,12 +43,14 @@ type __VLS_Slots = {} & {
     event?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (day: string) => any;
     change: (day: string) => any;
     "update:modelValue": (day: string) => any;
     monthChange: (date: Date) => any;
     "update:month": (date: Date) => any;
     eventClick: (event: CalendarEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((day: string) => any) | undefined;
     onChange?: ((day: string) => any) | undefined;
     "onUpdate:modelValue"?: ((day: string) => any) | undefined;
     onMonthChange?: ((date: Date) => any) | undefined;

package/dist/uni/index.d.ts

@@ -123,3 +123,4 @@ export { default as ToastProvider } from "./ToastProvider.vue.js";
 export { default as TooltipProvider } from "./TooltipProvider.vue.js";
 export { confirm, toast } from "./feedback-store.js";
 export { useConfirm, useToast } from "./feedback-context.js";
+export { default as DatePicker } from "./DatePicker.vue.js";

package/dist/uni/index.js

@@ -123,3 +123,4 @@ export { default as ToastProvider } from "./ToastProvider.vue";
 export { default as TooltipProvider } from "./TooltipProvider.vue";
 export { confirm, toast } from "./feedback-store.js";
 export { useConfirm, useToast } from "./feedback-context.js";
+export { default as DatePicker } from "./DatePicker.vue";

package/dist/uni/manifest.d.ts

@@ -97,6 +97,13 @@ export declare const uniComponentManifest: readonly [{
     readonly tests: readonly ["src/parity.test.ts: native host mount", "src/advanced-fields.test.ts: actual advanced field interactions and owner rejection"];
     readonly status: "partial";
     readonly deviceE2E: false;
+}, {
+    readonly name: "DatePicker";
+    readonly scope: "YYYY-MM-DD controlled strings/null/empty, defaultValue, strict typing and lenient blur normalization, valid-date and minDate/maxDate checks, clearing, field locks, label and open/change events. Popup MonthCalendar with month navigation; update:modelValue supports v-model.";
+    readonly limitations: readonly ["Native focus and popup placement need device validation."];
+    readonly tests: readonly ["src/date-picker.test.ts", "spike/browser/date-picker.spec.ts"];
+    readonly status: "partial";
+    readonly deviceE2E: false;
 }, {
     readonly name: "TimePicker";
     readonly scope: "Typed HH:mm or HH:mm:ss, hour/minute/second steps, normalized constraints, locale labels, clear, keyboard time columns, original string change and open-change notifications; measured collision-aware popup.";

package/dist/uni/manifest.js

@@ -170,6 +170,14 @@ export const uniComponentManifest = [
         status: "partial",
         deviceE2E: false,
     },
+    {
+        name: "DatePicker",
+        scope: "YYYY-MM-DD controlled strings/null/empty, defaultValue, strict typing and lenient blur normalization, valid-date and minDate/maxDate checks, clearing, field locks, label and open/change events. Popup MonthCalendar with month navigation; update:modelValue supports v-model.",
+        limitations: ["Native focus and popup placement need device validation."],
+        tests: ["src/date-picker.test.ts", "spike/browser/date-picker.spec.ts"],
+        status: "partial",
+        deviceE2E: false,
+    },
     {
         name: "TimePicker",
         scope: "Typed HH:mm or HH:mm:ss, hour/minute/second steps, normalized constraints, locale labels, clear, keyboard time columns, original string change and open-change notifications; measured collision-aware popup.",

package/dist/vue/components/DatePicker/DatePicker.vue.d.ts

@@ -0,0 +1,36 @@
+import { DatePickerProps } from './types.js';
+declare const __VLS_export: import('vue').DefineComponent<DatePickerProps, {
+    /** The native `<input>` (the React `ref`) */
+    input: import('vue').ShallowRef<HTMLInputElement | null, HTMLInputElement | null>;
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    openChange: (open: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<DatePickerProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+}>, {
+    name: string;
+    required: boolean;
+    placeholder: string;
+    label: string;
+    defaultValue: string;
+    id: string;
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    size: "small" | "medium" | "large";
+    modelValue: string | null;
+    ariaLabel: string;
+    ariaLabelledby: string;
+    ariaDescribedby: string;
+    minDate: string;
+    maxDate: string;
+    locale: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/vue/components/DatePicker/DatePicker.vue.js

@@ -0,0 +1,7 @@
+import e from "./DatePicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/DatePicker/DatePicker.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=DatePicker.vue.js.map

package/dist/vue/components/DatePicker/DatePicker.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.vue.js","names":["_sfc_main","DatePicker_vue_vue_type_script_setup_true_lang_default","DatePicker_default"],"sources":["../../../../../vue/src/components/DatePicker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** A date input with an accessible popup calendar; values use YYYY-MM-DD. */\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  shallowRef,\n  unref,\n  useId,\n} from \"vue\";\nimport {\n  addDays,\n  dayKey,\n  localDate,\n  monthStart,\n  parseDayKey,\n  sameMonth,\n} from \"@minerva/core\";\nimport styles from \"@react-styles/components/DatePicker/datePicker.module.scss\";\nimport iconButtonStyles from \"@react-styles/components/IconButton/iconButton.module.scss\";\nimport { hooks } from \"../../internal/hooks\";\nimport {\n  IconCalendar,\n  IconChevronLeft,\n  IconChevronRight,\n  IconX,\n} from \"../../internal/icons\";\nimport { useControllable } from \"../../internal/controllable\";\nimport FloatingPanel from \"../../internal/FloatingPanel.vue\";\nimport { useLayerParent } from \"../../internal/scope\";\nimport {\n  FORM_CONTROL_KEY,\n  useFormControlContext,\n  useFormControlProps,\n} from \"../../internal/form-control\";\nimport { useI18n } from \"../../config/useI18n\";\nimport { Input } from \"../Input\";\nimport { logicalArrowKey } from \"../../internal/direction\";\nimport { adjacentTabbable, tabLeavesPanel } from \"../TimePicker/tabbing\";\nimport type { DatePickerEmits, DatePickerProps } from \"./types\";\n\ndefineOptions({ name: \"DatePicker\", inheritAttrs: false });\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  placeholder: undefined,\n  label: undefined,\n  ariaLabel: undefined,\n  ariaLabelledby: undefined,\n  ariaDescribedby: undefined,\n  id: undefined,\n  required: undefined,\n  readOnly: undefined,\n  invalid: undefined,\n  name: \"date-picker\",\n  disabled: undefined,\n  clearable: true,\n  size: \"medium\",\n  minDate: undefined,\n  maxDate: undefined,\n  locale: undefined,\n});\nconst emit = defineEmits<DatePickerEmits>();\n\nconst { t, language } = useI18n();\nconst fc = useFormControlContext();\n// The field state is resolved here (explicit props win over the\n// FormControl), so the inner Input must not merge it again.\nprovide(FORM_CONTROL_KEY, null as never);\nconst fieldProps = useFormControlProps(() => ({\n  id: props.id,\n  \"aria-describedby\": props.ariaDescribedby,\n}));\n\nconst disabled = computed(() => props.disabled ?? fc?.disabled.value ?? false);\nconst readOnly = computed(() => props.readOnly ?? fc?.readOnly.value ?? false);\nconst required = computed(() => props.required ?? fc?.required.value ?? false);\nconst invalid = computed(() => props.invalid ?? fc?.invalid.value ?? false);\nconst accessibleName = computed(\n  () => props.label ?? props.ariaLabel ?? t(\"datePicker.label\"),\n);\n// A FormLabel names the input unless `label` / `aria-label` is given; the\n// aria-label stays as fallback (aria-labelledby wins when its target\n// exists, and is ignored when it does not).\nconst labelledBy = computed(\n  () =>\n    props.ariaLabelledby ??\n    (fc && !props.label && !props.ariaLabel ? fc.labelId.value : undefined),\n);\n\nconst current = useControllable<string | null>(props, \"modelValue\", {\n  defaultProp: \"defaultValue\",\n  fallback: \"\",\n  name: \"DatePicker\",\n});\nconst open = ref(false);\nconst setOpen = (next: boolean) => {\n  if (next === open.value) return;\n  open.value = next;\n  emit(\"openChange\", next);\n};\nconst panelOpen = computed(\n  () => open.value && !disabled.value && !readOnly.value,\n);\n\n// Text being typed; `null` = show the formatted value\nconst draft = ref<string | null>(null);\nconst field = ref<HTMLDivElement | null>(null);\nconst input = shallowRef<HTMLInputElement | null>(null);\nconst floating = ref<InstanceType<typeof FloatingPanel> | null>(null);\n// Tab moves on within the enclosing layer (e.g. a Modal), else the page.\nconst tabContainer = useLayerParent();\n\nonMounted(() => {\n  input.value = field.value?.querySelector(\"input\") ?? null;\n});\n\nconst headingId = useId();\nconst month = ref(monthStart(parseDayKey(current.value ?? \"\") ?? new Date()));\nconst focusedKey = ref(\"\");\nconst weekdays = [\"mon\", \"tue\", \"wed\", \"thu\", \"fri\", \"sat\", \"sun\"] as const;\nconst todayKey = dayKey(new Date());\nconst heading = computed(() =>\n  new Intl.DateTimeFormat(props.locale ?? language.value, {\n    year: \"numeric\",\n    month: \"long\",\n  }).format(month.value),\n);\nconst days = computed(() => {\n  const first = monthStart(month.value);\n  const start = addDays(first, -((first.getDay() + 6) % 7));\n  return Array.from({ length: 42 }, (_, i) => addDays(start, i));\n});\nconst weeks = computed(() =>\n  Array.from({ length: 6 }, (_, i) => days.value.slice(i * 7, i * 7 + 7)),\n);\nconst isDayDisabled = (key: string) =>\n  !!(\n    (props.minDate && key < props.minDate) ||\n    (props.maxDate && key > props.maxDate)\n  );\nconst activeKey = computed(() => {\n  const keys = days.value.map(dayKey);\n  return [\n    focusedKey.value,\n    current.value,\n    todayKey,\n    dayKey(month.value),\n    ...keys,\n  ].find((key) => key && keys.includes(key) && !isDayDisabled(key));\n});\nfunction commit(next: string) {\n  current.value = next;\n  emit(\"change\", next);\n}\nfunction syncMonth() {\n  const date = parseDayKey(current.value ?? \"\");\n  if (date) month.value = monthStart(date);\n}\nfunction handleInputChange(value: string | number) {\n  if (disabled.value || readOnly.value) return;\n  const text = String(value);\n  draft.value = text;\n  if (text === \"\") {\n    commit(\"\");\n    return;\n  }\n  const date = parseDayKey(text, true);\n  if (date && !isDayDisabled(dayKey(date))) {\n    commit(dayKey(date));\n    month.value = monthStart(date);\n  }\n}\nfunction handleInputBlur() {\n  if (draft.value === null) return;\n  const text = draft.value.trim();\n  if (!disabled.value && !readOnly.value) {\n    if (!text) {\n      if (current.value) commit(\"\");\n    } else {\n      const date = parseDayKey(text, false);\n      if (\n        date &&\n        !isDayDisabled(dayKey(date)) &&\n        dayKey(date) !== current.value\n      ) {\n        commit(dayKey(date));\n        month.value = monthStart(date);\n      }\n    }\n  }\n  draft.value = null;\n}\nfunction handleClear() {\n  if (disabled.value || readOnly.value) return;\n  draft.value = null;\n  commit(\"\");\n  input.value?.focus();\n}\nfunction selectDate(date: Date) {\n  if (disabled.value || readOnly.value || isDayDisabled(dayKey(date))) return;\n  draft.value = null;\n  commit(dayKey(date));\n  month.value = monthStart(date);\n  setOpen(false);\n  input.value?.focus();\n}\nfunction toggle() {\n  if (disabled.value || readOnly.value) return;\n  if (!open.value) syncMonth();\n  setOpen(!open.value);\n}\nasync function focusDay(key?: string) {\n  await nextTick();\n  const panel = unref(floating.value?.element);\n  (key\n    ? panel?.querySelector<HTMLElement>(`[data-date=\"${key}\"]`)\n    : panel?.querySelector<HTMLElement>('[role=\"gridcell\"][tabindex=\"0\"]')\n  )?.focus();\n}\nfunction handleDayKeyDown(event: KeyboardEvent, date: Date) {\n  if (disabled.value || readOnly.value) return;\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    if (!event.repeat) selectDate(date);\n    return;\n  }\n  let target: Date;\n  const weekday = (date.getDay() + 6) % 7;\n  switch (logicalArrowKey(event.key, event.currentTarget as HTMLElement)) {\n    case \"ArrowLeft\":\n      target = addDays(date, -1);\n      break;\n    case \"ArrowRight\":\n      target = addDays(date, 1);\n      break;\n    case \"ArrowUp\":\n      target = addDays(date, -7);\n      break;\n    case \"ArrowDown\":\n      target = addDays(date, 7);\n      break;\n    case \"Home\":\n      target = addDays(date, -weekday);\n      break;\n    case \"End\":\n      target = addDays(date, 6 - weekday);\n      break;\n    case \"PageUp\":\n    case \"PageDown\": {\n      const next = monthStart(\n        date,\n        (event.key === \"PageUp\" ? -1 : 1) * (event.shiftKey ? 12 : 1),\n      );\n      target = localDate(\n        next.getFullYear(),\n        next.getMonth(),\n        Math.min(date.getDate(), addDays(monthStart(next, 1), -1).getDate()),\n      );\n      break;\n    }\n    default:\n      return;\n  }\n  event.preventDefault();\n  focusedKey.value = dayKey(target);\n  if (!sameMonth(target, month.value)) month.value = monthStart(target);\n  void focusDay(dayKey(target));\n}\n\n// Clicking the input toggles the panel. The handler only reacts to clicks\n// on the inner <input>, which has its own keyboard support (ArrowDown opens\n// the panel; Escape closes it), so the wrapper is not a control.\nfunction handleRootClick(event: MouseEvent) {\n  if (input.value && event.target === input.value) toggle();\n}\n\nfunction handleInputKeyDown(event: KeyboardEvent) {\n  if (event.key !== \"ArrowDown\" || disabled.value || readOnly.value) return;\n  event.preventDefault();\n  if (!open.value) {\n    syncMonth();\n    focusedKey.value = current.value ?? \"\";\n    setOpen(true);\n  }\n  void focusDay();\n}\n\n// The portalled panel sits after the input in the Tab order: Tab past its\n// last control continues after the input (its clear button, then the rest of\n// the page); Shift+Tab before its first control returns to the input.\nfunction handlePanelKeyDown(event: KeyboardEvent) {\n  const panel = event.currentTarget as HTMLElement;\n  const el = input.value;\n  if (\n    !el ||\n    event.key !== \"Tab\" ||\n    event.altKey ||\n    event.ctrlKey ||\n    event.metaKey ||\n    !tabLeavesPanel(panel, event.target as Element, event.shiftKey)\n  )\n    return;\n  event.preventDefault();\n  const next = event.shiftKey\n    ? el\n    : (adjacentTabbable(\n        el,\n        tabContainer?.value ?? el.ownerDocument.body,\n        false,\n      ) ?? el);\n  next.focus();\n  setOpen(false);\n}\n\nconst displayValue = computed(() => draft.value ?? current.value ?? \"\");\nconst showClear = computed(\n  () =>\n    props.clearable && !!current.value && !disabled.value && !readOnly.value,\n);\n\ndefineExpose({\n  /** The native `<input>` (the React `ref`) */\n  input,\n  focus: () => input.value?.focus(),\n  blur: () => input.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    ref=\"field\"\n    :class=\"styles.datePicker\"\n    v-bind=\"{\n      ...$attrs,\n      ...hooks('date-picker', 'root', {\n        state: panelOpen ? 'open' : 'closed',\n        disabled,\n        readonly: readOnly,\n        invalid,\n        size,\n      }),\n    }\"\n    @click=\"handleRootClick\"\n  >\n    <Input\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder ?? t('datePicker.placeholder')\"\n      :id=\"fieldProps.id\"\n      :aria-label=\"accessibleName\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-describedby=\"fieldProps['aria-describedby']\"\n      :aria-invalid=\"invalid || undefined\"\n      :aria-readonly=\"readOnly || undefined\"\n      :required=\"required\"\n      :read-only=\"readOnly\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :size=\"size\"\n      @update:model-value=\"handleInputChange\"\n      @blur=\"handleInputBlur\"\n      @keydown=\"handleInputKeyDown\"\n    >\n      <template #suffix>\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          :class=\"[\n            iconButtonStyles.iconButton,\n            iconButtonStyles.neutral,\n            iconButtonStyles['variant-ghost'],\n            iconButtonStyles.small,\n            iconButtonStyles.circle,\n            styles.clearButton,\n          ]\"\n          tabindex=\"0\"\n          :aria-label=\"t('datePicker.clear')\"\n          v-bind=\"\n            hooks('icon-button', 'root', {\n              state: 'inactive',\n              disabled: false,\n              loading: false,\n              size: 'small',\n              variant: 'ghost',\n              color: 'neutral',\n              shape: 'circle',\n            })\n          \"\n          @click=\"handleClear\"\n        >\n          <span\n            :class=\"iconButtonStyles.glyph\"\n            aria-hidden=\"true\"\n            v-bind=\"hooks('icon-button', 'icon')\"\n          >\n            <IconX />\n          </span>\n        </button>\n        <span\n          v-else\n          :class=\"styles.calendarIcon\"\n          aria-hidden=\"true\"\n          v-bind=\"hooks('date-picker', 'icon')\"\n        >\n          <IconCalendar />\n        </span>\n      </template>\n    </Input>\n    <FloatingPanel\n      ref=\"floating\"\n      :open=\"panelOpen\"\n      :anchor=\"input\"\n      placement=\"bottom-start\"\n      :branches=\"() => [field]\"\n      :return-focus-on-escape=\"() => input\"\n      focusable\n      role=\"dialog\"\n      tabindex=\"-1\"\n      :aria-label=\"accessibleName\"\n      :aria-labelledby=\"labelledBy\"\n      :class=\"styles.popup\"\n      v-bind=\"hooks('date-picker', 'content', { state: 'open' })\"\n      @dismiss=\"setOpen(false)\"\n      @keydown=\"handlePanelKeyDown\"\n    >\n      <div :class=\"styles.panel\">\n        <div :class=\"styles.header\">\n          <h2 :id=\"headingId\" :class=\"styles.heading\" aria-live=\"polite\">\n            {{ heading }}\n          </h2>\n          <div :class=\"styles.navGroup\">\n            <button\n              type=\"button\"\n              :class=\"styles.navButton\"\n              :aria-label=\"t('monthCalendar.previousMonth')\"\n              @click=\"month = monthStart(month, -1)\"\n            >\n              <IconChevronLeft aria-hidden=\"true\" focusable=\"false\" />\n            </button>\n            <button\n              type=\"button\"\n              :class=\"styles.navButton\"\n              :aria-label=\"t('monthCalendar.nextMonth')\"\n              @click=\"month = monthStart(month, 1)\"\n            >\n              <IconChevronRight aria-hidden=\"true\" focusable=\"false\" />\n            </button>\n          </div>\n        </div>\n        <div role=\"grid\" :aria-labelledby=\"headingId\" :class=\"styles.grid\">\n          <div role=\"row\" :class=\"styles.week\">\n            <div\n              v-for=\"day in weekdays\"\n              :key=\"day\"\n              role=\"columnheader\"\n              :class=\"styles.weekday\"\n            >\n              {{ t(`monthCalendar.weekdays.${day}`) }}\n            </div>\n          </div>\n          <div\n            v-for=\"(week, index) in weeks\"\n            :key=\"index\"\n            role=\"row\"\n            :class=\"styles.week\"\n          >\n            <div\n              v-for=\"date in week\"\n              :key=\"dayKey(date)\"\n              role=\"gridcell\"\n              :class=\"styles.day\"\n              :data-date=\"dayKey(date)\"\n              :data-outside=\"!sameMonth(date, month) ? '' : undefined\"\n              :aria-label=\"dayKey(date)\"\n              :aria-selected=\"current === dayKey(date)\"\n              :aria-current=\"dayKey(date) === todayKey ? 'date' : undefined\"\n              :aria-disabled=\"isDayDisabled(dayKey(date)) || undefined\"\n              :tabindex=\"dayKey(date) === activeKey ? 0 : -1\"\n              @focus=\"focusedKey = dayKey(date)\"\n              @click=\"selectDate(date)\"\n              @keydown=\"handleDayKeyDown($event, date)\"\n            >\n              {{ date.getDate() }}\n            </div>\n          </div>\n        </div>\n        <div :class=\"styles.footer\">\n          <button\n            type=\"button\"\n            :class=\"styles.footerButton\"\n            :disabled=\"isDayDisabled(todayKey)\"\n            @click=\"selectDate(new Date())\"\n          >\n            {{ t(\"datePicker.today\") }}\n          </button>\n          <button\n            v-if=\"clearable && current\"\n            type=\"button\"\n            :class=\"styles.footerButton\"\n            @click=\"\n              handleClear();\n              setOpen(false);\n            \"\n          >\n            {{ t(\"datePicker.clear\") }}\n          </button>\n        </div>\n      </div>\n    </FloatingPanel>\n  </div>\n</template>\n"],"mappings":""}