@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/calendar.d.ts

@@ -0,0 +1,311 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type CalendarAnchorChangeReason, type CalendarController, type CalendarFocusedChangeReason, type CalendarGridCell, type CalendarMode, type CalendarMonthChangeReason, type CalendarSelectState, type CalendarValue, type CalendarValueChangeReason, type DateMatchers, type ISOMonth } from "@ui-sdk/core/calendar";
+import type { ISODate } from "@ui-sdk/core/date";
+import { type PropType, type SlotsType, type VNode } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * Months of days with one tab stop. Without content it renders Previous, the
+ * heading and Next, and a grid for each month.
+ * @stable
+ */
+declare const Calendar: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    mode: PropType<CalendarMode>;
+    value: {
+        type: PropType<CalendarValue>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<CalendarValue>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<CalendarValue>;
+        default: undefined;
+    };
+    month: PropType<ISOMonth>;
+    defaultMonth: PropType<ISOMonth>;
+    min: StringConstructor;
+    max: StringConstructor;
+    unavailable: PropType<DateMatchers>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    deselectable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    months: NumberConstructor;
+    pageBy: PropType<"month" | "page">;
+    locale: StringConstructor;
+    weekStartsOn: NumberConstructor;
+    weekdayFormat: PropType<"narrow" | "short" | "long">;
+    monthFormat: PropType<"narrow" | "short" | "long">;
+    fixedWeeks: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    showOutsideDays: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    today: StringConstructor;
+    timeZone: StringConstructor;
+    minDays: NumberConstructor;
+    maxDays: NumberConstructor;
+    allowUnavailable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<CalendarController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/calendar").CalendarState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: CalendarValue) => true;
+    "update:modelValue": (_value: CalendarValue) => true;
+    valueChange: (_value: CalendarValue, _details: ChangeDetails<CalendarValueChangeReason>) => true;
+    "update:month": (_month: ISOMonth) => true;
+    monthChange: (_month: ISOMonth, _details: ChangeDetails<CalendarMonthChangeReason>) => true;
+    focusedChange: (_date: ISODate, _details: ChangeDetails<CalendarFocusedChangeReason>) => true;
+    anchorChange: (_anchor: ISODate | null, _details: ChangeDetails<CalendarAnchorChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    mode: PropType<CalendarMode>;
+    value: {
+        type: PropType<CalendarValue>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<CalendarValue>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<CalendarValue>;
+        default: undefined;
+    };
+    month: PropType<ISOMonth>;
+    defaultMonth: PropType<ISOMonth>;
+    min: StringConstructor;
+    max: StringConstructor;
+    unavailable: PropType<DateMatchers>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    deselectable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    months: NumberConstructor;
+    pageBy: PropType<"month" | "page">;
+    locale: StringConstructor;
+    weekStartsOn: NumberConstructor;
+    weekdayFormat: PropType<"narrow" | "short" | "long">;
+    monthFormat: PropType<"narrow" | "short" | "long">;
+    fixedWeeks: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    showOutsideDays: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    today: StringConstructor;
+    timeZone: StringConstructor;
+    minDays: NumberConstructor;
+    maxDays: NumberConstructor;
+    allowUnavailable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<CalendarController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: CalendarValue) => any) | undefined;
+    "onUpdate:value"?: ((_value: CalendarValue) => any) | undefined;
+    onValueChange?: ((_value: CalendarValue, _details: ChangeDetails<CalendarValueChangeReason>) => any) | undefined;
+    "onUpdate:month"?: ((_month: string) => any) | undefined;
+    onMonthChange?: ((_month: string, _details: ChangeDetails<CalendarMonthChangeReason>) => any) | undefined;
+    onFocusedChange?: ((_date: string, _details: ChangeDetails<CalendarFocusedChangeReason>) => any) | undefined;
+    onAnchorChange?: ((_anchor: string | null, _details: ChangeDetails<CalendarAnchorChangeReason>) => any) | undefined;
+}>, {
+    value: CalendarValue;
+    disabled: boolean;
+    debug: boolean;
+    defaultValue: CalendarValue;
+    readOnly: boolean;
+    deselectable: boolean;
+    modelValue: CalendarValue;
+    fixedWeeks: boolean;
+    showOutsideDays: boolean;
+    allowUnavailable: boolean;
+}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The months shown, like "October 2026". Screen readers hear it change.
+ * @stable
+ */
+declare const CalendarHeading: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/calendar").CalendarHeadingState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "heading">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "h2">;
+/**
+ * A native select of the months, in the locale, that turns the first month shown.
+ * @stable
+ */
+declare const CalendarMonthSelect: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<CalendarSelectState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "month-select">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "select">;
+/**
+ * A native select of the years from `min` to `max`, or 10 either side of the year shown.
+ * @stable
+ */
+declare const CalendarYearSelect: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<CalendarSelectState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "year-select">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "select">;
+/**
+ * Shows the month before. Named "Previous month"; pass `aria-label` in another language.
+ * @stable
+ */
+declare const CalendarPrevious: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/calendar").CalendarStepState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "previous">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * Shows the month after. Named "Next month"; pass `aria-label` in another language.
+ * @stable
+ */
+declare const CalendarNext: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/calendar").CalendarStepState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "next">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * One month's grid, a table. `offset` picks which of the months shown, from 0.
+ * Without content it renders its weekdays and weeks.
+ * @stable
+ */
+declare const CalendarGrid: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/calendar").CalendarGridState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    offset: number;
+}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "grid">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "table">;
+/**
+ * The header row of weekday names, a weekday in each column. Its default slot
+ * gets `{ index }` and renders the column's header, like
+ * `<CalendarWeekday :index="index" class="…" />`.
+ * @stable
+ */
+declare const CalendarWeekdays: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+    default?: (scope: {
+        index: number;
+    }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "thead">;
+/**
+ * A weekday's column header. Shows its name in `weekdayFormat` unless it has content.
+ * @stable
+ */
+declare const CalendarWeekday: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/calendar").CalendarWeekdayState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "weekday">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "th">;
+/**
+ * The weeks of the grid's month, a row each, with a day in each cell. Its
+ * default slot gets `{ cell }` and renders the cell's day, like
+ * `<CalendarDay :value="cell.date" class="…" />`. A cell that shows nothing
+ * stays an empty cell.
+ * @stable
+ */
+declare const CalendarWeeks: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+    default?: (scope: {
+        cell: CalendarGridCell;
+    }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "tbody">;
+/**
+ * A day. Shows the day of the month unless it has content; arrow keys move between days.
+ * @stable
+ */
+declare const CalendarDay: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/calendar").CalendarDayState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/calendar").CalendarPrimitive, "day">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "td">;
+export { createCalendarController } from "@ui-sdk/core/calendar";
+export type { CalendarAnchorChangeReason, CalendarApi, CalendarChangeOptions, CalendarController, CalendarDayProps, CalendarDayState, CalendarFocusedChangeReason, CalendarGridCell, CalendarGridProps, CalendarGridState, CalendarHeadingState, CalendarMode, CalendarMonthChangeReason, CalendarOptions, CalendarPrimitive, CalendarSelectOption, CalendarSelectState, CalendarState, CalendarStepState, CalendarValue, CalendarValueChangeReason, CalendarWeekdayProps, CalendarWeekdayState, DateMatcher, DateMatchers, ISOMonth, } from "@ui-sdk/core/calendar";
+export { Calendar, CalendarDay, CalendarGrid, CalendarHeading, CalendarMonthSelect, CalendarNext, CalendarPrevious, CalendarWeekday, CalendarWeekdays, CalendarWeeks, CalendarYearSelect, };

package/dist/calendar.js

@@ -0,0 +1,349 @@
+// src/calendar.ts
+import {
+  calendar as calendarPrimitive
+} from "@ui-sdk/core/calendar";
+import {
+  defineComponent,
+  Fragment,
+  h,
+  inject,
+  provide
+} from "vue";
+import { CalendarKey, GridKey } from "./calendar-context.js";
+import { slotContent } from "./children.js";
+import { withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { readOnlyOf } from "./text-control.js";
+import { createCalendarController } from "@ui-sdk/core/calendar";
+function useCalendar(part) {
+  const context = inject(CalendarKey);
+  if (!context) {
+    throw new Error(
+      `${part} must be used inside <Calendar> or <DatePickerContent>.`
+    );
+  }
+  return context;
+}
+function useGrid(part) {
+  const context = inject(GridKey);
+  if (!context) {
+    throw new Error(`${part} must be used inside <CalendarGrid>.`);
+  }
+  return context;
+}
+var calendarValue = {
+  type: null,
+  default: void 0
+};
+var Calendar = withElement(
+  "div",
+  defineComponent({
+    name: "Calendar",
+    inheritAttrs: false,
+    props: {
+      mode: String,
+      value: calendarValue,
+      modelValue: calendarValue,
+      defaultValue: calendarValue,
+      month: String,
+      defaultMonth: String,
+      min: String,
+      max: String,
+      unavailable: null,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      deselectable: optionalBoolean,
+      months: Number,
+      pageBy: String,
+      locale: String,
+      weekStartsOn: Number,
+      weekdayFormat: String,
+      monthFormat: String,
+      fixedWeeks: optionalBoolean,
+      showOutsideDays: optionalBoolean,
+      today: String,
+      timeZone: String,
+      minDays: Number,
+      maxDays: Number,
+      allowUnavailable: optionalBoolean,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      "update:month": (_month) => true,
+      monthChange: (_month, _details) => true,
+      focusedChange: (_date, _details) => true,
+      anchorChange: (_anchor, _details) => true
+    },
+    slots: Object,
+    setup(props, { slots, attrs, emit }) {
+      const calendar = usePrimitive(calendarPrimitive, () => ({
+        mode: props.mode,
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        month: props.month,
+        defaultMonth: props.defaultMonth,
+        min: props.min,
+        max: props.max,
+        unavailable: props.unavailable,
+        disabled: props.disabled,
+        readOnly: readOnlyOf(props, attrs),
+        deselectable: props.deselectable,
+        onFocusedChange: (date, details) => emit("focusedChange", date, details),
+        onAnchorChange: (anchor, details) => emit("anchorChange", anchor, details),
+        months: props.months,
+        pageBy: props.pageBy,
+        locale: props.locale,
+        weekStartsOn: props.weekStartsOn,
+        weekdayFormat: props.weekdayFormat,
+        monthFormat: props.monthFormat,
+        fixedWeeks: props.fixedWeeks,
+        showOutsideDays: props.showOutsideDays,
+        today: props.today,
+        timeZone: props.timeZone,
+        minDays: props.minDays,
+        maxDays: props.maxDays,
+        allowUnavailable: props.allowUnavailable,
+        controller: props.controller,
+        debug: props.debug,
+        // The change events run first, so canceling one also keeps v-model as it was.
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onMonthChange: (month, details) => {
+          emit("monthChange", month, details);
+          if (!details.canceled) {
+            emit("update:month", month);
+          }
+        }
+      }));
+      provide(CalendarKey, calendar);
+      const defaultContent = () => [
+        h("div", [h(CalendarPrevious), h(CalendarHeading), h(CalendarNext)]),
+        ...Array.from(
+          { length: Math.max(1, Math.floor(props.months ?? 1) || 1) },
+          (_, offset) => h(CalendarGrid, { key: offset, offset })
+        )
+      ];
+      return usePart(calendar, "root", void 0, void 0, {
+        tag: "div",
+        children: (state) => slotContent(slots.default, { state }) ?? defaultContent()
+      });
+    }
+  })
+);
+var CalendarHeading = withElement(
+  "h2",
+  defineComponent({
+    name: "CalendarHeading",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      const calendar = useCalendar("CalendarHeading");
+      return usePart(calendar, "heading", void 0, void 0, {
+        tag: "h2",
+        children: (state) => slotContent(slots.default, { state }) ?? state.label
+      });
+    }
+  })
+);
+function selectPart(name, slot) {
+  return withElement(
+    "select",
+    defineComponent({
+      name,
+      inheritAttrs: false,
+      slots: Object,
+      setup(_, { slots }) {
+        const calendar = useCalendar(name);
+        const options = (state) => state.options.map(
+          (option) => h(
+            "option",
+            {
+              key: option.value,
+              value: option.value,
+              disabled: option.disabled,
+              selected: option.value === state.value
+            },
+            option.label
+          )
+        );
+        return usePart(calendar, slot, void 0, void 0, {
+          tag: "select",
+          children: (state) => slotContent(slots.default, { state }) ?? options(state),
+          // The selected option carries the value, not the select.
+          extend: ({ value: _2, ...part }) => part
+        });
+      }
+    })
+  );
+}
+var CalendarMonthSelect = selectPart("CalendarMonthSelect", "month-select");
+var CalendarYearSelect = selectPart("CalendarYearSelect", "year-select");
+function stepPart(name, slot, text) {
+  return withElement(
+    "button",
+    defineComponent({
+      name,
+      inheritAttrs: false,
+      slots: Object,
+      setup(_, { slots }) {
+        const calendar = useCalendar(name);
+        return usePart(calendar, slot, void 0, void 0, {
+          tag: "button",
+          children: (state) => slotContent(slots.default, { state }) ?? text
+        });
+      }
+    })
+  );
+}
+var CalendarPrevious = stepPart("CalendarPrevious", "previous", "\u2039");
+var CalendarNext = stepPart("CalendarNext", "next", "\u203A");
+var CalendarGrid = withElement(
+  "table",
+  defineComponent({
+    name: "CalendarGrid",
+    inheritAttrs: false,
+    props: { offset: { type: Number, default: 0 } },
+    slots: Object,
+    setup(props, { slots }) {
+      const calendar = useCalendar("CalendarGrid");
+      const part = () => ({ offset: props.offset, id: String(props.offset) });
+      const grid = usePart(calendar, "grid", part, void 0, {
+        tag: "table",
+        children: (state) => slotContent(slots.default, { state }) ?? [
+          h(CalendarWeekdays),
+          h(CalendarWeeks)
+        ]
+      });
+      provide(GridKey, { offset: () => props.offset, state: grid.state });
+      return grid;
+    }
+  })
+);
+var CalendarWeekdays = withElement(
+  "thead",
+  defineComponent({
+    name: "CalendarWeekdays",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots, attrs }) {
+      const calendar = useCalendar("CalendarWeekdays");
+      const grid = useGrid("CalendarWeekdays");
+      return () => h(
+        "thead",
+        attrs,
+        h(
+          "tr",
+          calendar.slot("weekdays", { id: String(grid.offset()) }),
+          grid.state.weekdays.map(
+            (weekday, index) => slots.default ? h(Fragment, { key: weekday }, slots.default({ index })) : h(CalendarWeekday, { key: weekday, index })
+          )
+        )
+      );
+    }
+  })
+);
+var CalendarWeekday = withElement(
+  "th",
+  defineComponent({
+    name: "CalendarWeekday",
+    inheritAttrs: false,
+    props: { index: { type: Number, required: true } },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const calendar = useCalendar("CalendarWeekday");
+      const grid = useGrid("CalendarWeekday");
+      const part = () => ({
+        index: props.index,
+        id: `${grid.offset()}-${props.index}`
+      });
+      return usePart(
+        calendar,
+        "weekday",
+        part,
+        () => ({ scope: "col", ...attrs }),
+        {
+          tag: "th",
+          children: (state) => slotContent(slots.default, { state }) ?? state.label
+        }
+      );
+    }
+  })
+);
+var CalendarWeeks = withElement(
+  "tbody",
+  defineComponent({
+    name: "CalendarWeeks",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots, attrs }) {
+      const calendar = useCalendar("CalendarWeeks");
+      const grid = useGrid("CalendarWeeks");
+      return () => {
+        const offset = grid.offset();
+        return h(
+          "tbody",
+          attrs,
+          grid.state.weeks.map(
+            (week, index) => h(
+              "tr",
+              {
+                key: week[0].date,
+                ...calendar.slot("week", { id: `${offset}-${index}` })
+              },
+              week.map(
+                (cell) => cell.hidden ? h("td", { key: cell.date }) : slots.default ? h(Fragment, { key: cell.date }, slots.default({ cell })) : h(CalendarDay, { key: cell.date, value: cell.date })
+              )
+            )
+          )
+        );
+      };
+    }
+  })
+);
+var CalendarDay = withElement(
+  "td",
+  defineComponent({
+    name: "CalendarDay",
+    inheritAttrs: false,
+    props: { value: { type: String, required: true } },
+    slots: Object,
+    setup(props, { slots }) {
+      const calendar = useCalendar("CalendarDay");
+      const grid = inject(GridKey, null);
+      const part = () => ({ value: props.value, offset: grid?.offset() ?? 0 });
+      return usePart(calendar, "day", part, void 0, {
+        tag: "td",
+        children: (state) => slotContent(slots.default, { state }) ?? state.label
+      });
+    }
+  })
+);
+export {
+  Calendar,
+  CalendarDay,
+  CalendarGrid,
+  CalendarHeading,
+  CalendarMonthSelect,
+  CalendarNext,
+  CalendarPrevious,
+  CalendarWeekday,
+  CalendarWeekdays,
+  CalendarWeeks,
+  CalendarYearSelect,
+  createCalendarController
+};