@sit-onyx/headless 0.1.1-dev-20250922084911 → 0.2.0-dev-20251014161744

package/dist/composables/calendar/createCalendar.d.ts

@@ -0,0 +1,71 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { DateRange, DateValue, Weekday } from '../../utils/dates.js';
+import { Nullable } from '../../utils/types.js';
+export type SelectionMode = "single" | "multiple" | "range";
+export type CalendarSize = "small" | "big";
+export type CreateCalendarOptions = {
+    locale: MaybeRefOrGetter<string>;
+    calendarSize: MaybeRefOrGetter<CalendarSize>;
+    weekStartDay: MaybeRefOrGetter<Weekday>;
+    viewMonth: Ref<DateValue>;
+    modelValue?: Ref<Nullable<DateValue | DateValue[] | DateRange>>;
+    disabled?: MaybeRefOrGetter<boolean>;
+    min?: MaybeRefOrGetter<Nullable<DateValue>>;
+    max?: MaybeRefOrGetter<Nullable<DateValue>>;
+    showCalendarWeeks?: MaybeRefOrGetter<boolean>;
+    selectionMode?: MaybeRefOrGetter<SelectionMode>;
+    onUpdateViewMonth?: (date: Date) => unknown;
+    onUpdateModelValue?: (newValue: Date | Date[] | DateRange) => unknown;
+};
+export type RenderWeek = {
+    weekNumber: number;
+    days: RenderDay[];
+};
+export type RenderDay = {
+    date: Date;
+    isCurrentMonth: boolean;
+};
+/**
+ * @experimental
+ * @deprecated This component is still under active development and its API might change in patch releases.
+ */
+export declare const _unstableCreateCalendar: (options: CreateCalendarOptions) => import('../../utils/builder.js').HeadlessComposable<{
+    table: {
+        role: string;
+        onKeydown: (event: KeyboardEvent) => Promise<void>;
+        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
+    };
+    cell: import('vue').ComputedRef<(cell: {
+        date: Date;
+    }) => {
+        role: string;
+        "aria-selected": boolean;
+        "aria-disabled": boolean;
+    }>;
+    button: import('vue').ComputedRef<(button: {
+        date: Date;
+    }) => {
+        "aria-label": string;
+        "data-date": string;
+    } | {
+        tabindex: string;
+        disabled: boolean;
+        onClick: (() => void) | undefined;
+        "aria-label": string;
+        "data-date": string;
+    }>;
+}, {
+    weekdayNames: import('vue').ComputedRef<string[]>;
+    weeksToRender: import('vue').ComputedRef<RenderWeek[]>;
+    focusedDate: Ref<Date, Date>;
+    viewMonth: import('vue').WritableComputedRef<Date, Date>;
+}, {
+    goToMonthByOffset: (offset: number) => void;
+    goToToday: () => void;
+    isSelected: import('vue').ComputedRef<(date: Date) => boolean>;
+    isToday: (date: Date) => boolean;
+    getRangeType: import('vue').ComputedRef<(date: Date, range?: DateRange) => "start" | "middle" | "end" | undefined>;
+    isDisabled: import('vue').ComputedRef<(date: Date) => boolean>;
+    goToDate: (date: Date, preventSelectionUpdate?: boolean) => void;
+    isFocused: import('vue').ComputedRef<(date: Date) => boolean>;
+}>;

package/dist/composables/calendar/createCalendar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/comboBox/SelectOnlyCombobox.d.vue.ts

@@ -132,18 +132,18 @@ declare const _default: import('vue').DefineComponent<{}, {
                 onBlur?: ((payload: FocusEvent) => void) | undefined;
                 onChange?: ((payload: Event) => void) | undefined;
                 onBeforeinput?: ((payload: InputEvent) => void) | undefined;
-                onInput?: ((payload: Event) => void) | undefined;
+                onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+                onInput?: ((payload: InputEvent) => void) | undefined;
                 onReset?: ((payload: Event) => void) | undefined;
                 onSubmit?: ((payload: SubmitEvent) => void) | undefined;
                 onInvalid?: ((payload: Event) => void) | undefined;
+                onFullscreenchange?: ((payload: Event) => void) | undefined;
+                onFullscreenerror?: ((payload: Event) => void) | undefined;
                 onLoad?: ((payload: Event) => void) | undefined;
                 onError?: ((payload: Event) => void) | undefined;
                 onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
                 onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
                 onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
-                onAuxclick?: ((payload: PointerEvent) => void) | undefined;
-                onClick?: ((payload: PointerEvent) => void) | undefined;
-                onContextmenu?: ((payload: PointerEvent) => void) | undefined;
                 onDblclick?: ((payload: MouseEvent) => void) | undefined;
                 onMouseenter?: ((payload: MouseEvent) => void) | undefined;
                 onMouseleave?: ((payload: MouseEvent) => void) | undefined;
@@ -180,6 +180,11 @@ declare const _default: import('vue').DefineComponent<{}, {
                 onTouchend?: ((payload: TouchEvent) => void) | undefined;
                 onTouchmove?: ((payload: TouchEvent) => void) | undefined;
                 onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+                onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+                onClick?: ((payload: PointerEvent) => void) | undefined;
+                onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+                onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+                onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
                 onPointerdown?: ((payload: PointerEvent) => void) | undefined;
                 onPointermove?: ((payload: PointerEvent) => void) | undefined;
                 onPointerup?: ((payload: PointerEvent) => void) | undefined;
@@ -188,11 +193,17 @@ declare const _default: import('vue').DefineComponent<{}, {
                 onPointerleave?: ((payload: PointerEvent) => void) | undefined;
                 onPointerover?: ((payload: PointerEvent) => void) | undefined;
                 onPointerout?: ((payload: PointerEvent) => void) | undefined;
+                onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+                onToggle?: ((payload: ToggleEvent) => void) | undefined;
                 onWheel?: ((payload: WheelEvent) => void) | undefined;
+                onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
                 onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
                 onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
                 onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+                onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+                onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
                 onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+                onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
                 onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
                 ref?: import('vue').Ref<Element | ({
                     $: import('vue').ComponentInternalInstance;

package/dist/composables/comboBox/TestCombobox.d.vue.ts

@@ -132,18 +132,18 @@ declare const _default: import('vue').DefineComponent<{}, {
                 onBlur?: ((payload: FocusEvent) => void) | undefined;
                 onChange?: ((payload: Event) => void) | undefined;
                 onBeforeinput?: ((payload: InputEvent) => void) | undefined;
-                onInput?: ((payload: Event) => void) | undefined;
+                onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+                onInput?: ((payload: InputEvent) => void) | undefined;
                 onReset?: ((payload: Event) => void) | undefined;
                 onSubmit?: ((payload: SubmitEvent) => void) | undefined;
                 onInvalid?: ((payload: Event) => void) | undefined;
+                onFullscreenchange?: ((payload: Event) => void) | undefined;
+                onFullscreenerror?: ((payload: Event) => void) | undefined;
                 onLoad?: ((payload: Event) => void) | undefined;
                 onError?: ((payload: Event) => void) | undefined;
                 onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
                 onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
                 onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
-                onAuxclick?: ((payload: PointerEvent) => void) | undefined;
-                onClick?: ((payload: PointerEvent) => void) | undefined;
-                onContextmenu?: ((payload: PointerEvent) => void) | undefined;
                 onDblclick?: ((payload: MouseEvent) => void) | undefined;
                 onMouseenter?: ((payload: MouseEvent) => void) | undefined;
                 onMouseleave?: ((payload: MouseEvent) => void) | undefined;
@@ -180,6 +180,11 @@ declare const _default: import('vue').DefineComponent<{}, {
                 onTouchend?: ((payload: TouchEvent) => void) | undefined;
                 onTouchmove?: ((payload: TouchEvent) => void) | undefined;
                 onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+                onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+                onClick?: ((payload: PointerEvent) => void) | undefined;
+                onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+                onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+                onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
                 onPointerdown?: ((payload: PointerEvent) => void) | undefined;
                 onPointermove?: ((payload: PointerEvent) => void) | undefined;
                 onPointerup?: ((payload: PointerEvent) => void) | undefined;
@@ -188,11 +193,17 @@ declare const _default: import('vue').DefineComponent<{}, {
                 onPointerleave?: ((payload: PointerEvent) => void) | undefined;
                 onPointerover?: ((payload: PointerEvent) => void) | undefined;
                 onPointerout?: ((payload: PointerEvent) => void) | undefined;
+                onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+                onToggle?: ((payload: ToggleEvent) => void) | undefined;
                 onWheel?: ((payload: WheelEvent) => void) | undefined;
+                onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
                 onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
                 onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
                 onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+                onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+                onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
                 onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+                onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
                 onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
                 ref?: import('vue').Ref<Element | ({
                     $: import('vue').ComponentInternalInstance;

package/dist/composables/comboBox/createComboBox.d.ts

@@ -200,18 +200,18 @@ export declare const createComboBox: <TValue extends ListboxValue, TAutoComplete
             onBlur?: ((payload: FocusEvent) => void) | undefined;
             onChange?: ((payload: Event) => void) | undefined;
             onBeforeinput?: ((payload: InputEvent) => void) | undefined;
-            onInput?: ((payload: Event) => void) | undefined;
+            onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+            onInput?: ((payload: InputEvent) => void) | undefined;
             onReset?: ((payload: Event) => void) | undefined;
             onSubmit?: ((payload: SubmitEvent) => void) | undefined;
             onInvalid?: ((payload: Event) => void) | undefined;
+            onFullscreenchange?: ((payload: Event) => void) | undefined;
+            onFullscreenerror?: ((payload: Event) => void) | undefined;
             onLoad?: ((payload: Event) => void) | undefined;
             onError?: ((payload: Event) => void) | undefined;
             onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
             onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
             onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
-            onAuxclick?: ((payload: PointerEvent) => void) | undefined;
-            onClick?: ((payload: PointerEvent) => void) | undefined;
-            onContextmenu?: ((payload: PointerEvent) => void) | undefined;
             onDblclick?: ((payload: MouseEvent) => void) | undefined;
             onMouseenter?: ((payload: MouseEvent) => void) | undefined;
             onMouseleave?: ((payload: MouseEvent) => void) | undefined;
@@ -248,6 +248,11 @@ export declare const createComboBox: <TValue extends ListboxValue, TAutoComplete
             onTouchend?: ((payload: TouchEvent) => void) | undefined;
             onTouchmove?: ((payload: TouchEvent) => void) | undefined;
             onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+            onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+            onClick?: ((payload: PointerEvent) => void) | undefined;
+            onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+            onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+            onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
             onPointerdown?: ((payload: PointerEvent) => void) | undefined;
             onPointermove?: ((payload: PointerEvent) => void) | undefined;
             onPointerup?: ((payload: PointerEvent) => void) | undefined;
@@ -256,11 +261,17 @@ export declare const createComboBox: <TValue extends ListboxValue, TAutoComplete
             onPointerleave?: ((payload: PointerEvent) => void) | undefined;
             onPointerover?: ((payload: PointerEvent) => void) | undefined;
             onPointerout?: ((payload: PointerEvent) => void) | undefined;
+            onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+            onToggle?: ((payload: ToggleEvent) => void) | undefined;
             onWheel?: ((payload: WheelEvent) => void) | undefined;
+            onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
             onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
             onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
             onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+            onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+            onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+            onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
             ref?: Ref<Element | ({
                 $: import('vue').ComponentInternalInstance;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './composables/calendar/createCalendar.js';
 export * from './composables/comboBox/createComboBox.js';
 export * from './composables/helpers/useGlobalListener.js';
 export * from './composables/helpers/useOutsideClick.js';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { shallowRef, computed, reactive, onBeforeMount, watchEffect, onBeforeUnmount, toValue, unref, ref, nextTick, useId, watch, toRef } from "vue";
+import { shallowRef, computed, toValue, ref, watch, nextTick, reactive, onBeforeMount, watchEffect, onBeforeUnmount, unref, useId, toRef } from "vue";
 const createBuilder = (builder) => builder;
 function createElRef() {
   const elementRef = shallowRef();
@@ -9,6 +9,303 @@ function createElRef() {
     get: () => elementRef.value
   });
 }
+function getISOWeekNumber(date) {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  const weekNo = Math.ceil(((d.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+  return weekNo;
+}
+function isInDateRange(date, start, end) {
+  start = new Date(start);
+  start.setHours(0, 0, 0, 0);
+  end = new Date(end);
+  end.setHours(23, 59, 59, 999);
+  const time = date.getTime();
+  return time >= start.getTime() && time <= end.getTime();
+}
+function getNormalizedDayIndex(date, weekStartDay) {
+  const day = date.getDay();
+  const start = WEEKDAYS.indexOf(weekStartDay);
+  const normalizedDay = day === 0 ? 6 : day - 1;
+  return (normalizedDay - start + 7) % 7;
+}
+const WEEKDAYS = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday"
+];
+function sortDateRange(range) {
+  const start = new Date(range.start);
+  const end = range.end ? new Date(range.end) : void 0;
+  if (end && end.getTime() < start.getTime()) {
+    return { start: end, end: start };
+  }
+  return { start, end };
+}
+const _unstableCreateCalendar = createBuilder((options) => {
+  const viewMonth = computed({
+    get: () => {
+      const date = toValue(options.viewMonth);
+      return date ? new Date(date) : /* @__PURE__ */ new Date();
+    },
+    set: (newValue) => options.onUpdateViewMonth?.(new Date(newValue))
+  });
+  const weekdayNames = computed(() => {
+    const formatter = new Intl.DateTimeFormat(toValue(options.locale), {
+      weekday: toValue(options.calendarSize) === "big" ? "long" : "short"
+    });
+    const names = Array.from({ length: 7 }, (_, i) => new Date(2024, 0, 1 + i)).map(
+      (day) => formatter.format(day)
+    );
+    const weekStartDay = toValue(options.weekStartDay);
+    const index = WEEKDAYS.indexOf(weekStartDay);
+    return names.slice(index).concat(names.slice(0, index));
+  });
+  const focusedDate = ref(/* @__PURE__ */ new Date());
+  watch(
+    () => toValue(options.modelValue),
+    (newValue) => {
+      if (!newValue) return;
+      let newFocusDate;
+      if (Array.isArray(newValue)) {
+        newFocusDate = newValue.length ? new Date(newValue[0]) : void 0;
+      } else if (typeof newValue === "object" && !(newValue instanceof Date)) {
+        newFocusDate = new Date(newValue.start);
+      } else {
+        newFocusDate = new Date(newValue);
+      }
+      if (newFocusDate) focusedDate.value = newFocusDate;
+    }
+  );
+  const isToday = (date) => {
+    return date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+  };
+  const isSelected = computed(() => {
+    return (date) => {
+      const value = toValue(options.modelValue);
+      if (!value) return false;
+      if (Array.isArray(value)) {
+        const values = value.map((i) => new Date(i));
+        return values.some((d) => d.toDateString() === date.toDateString());
+      }
+      if (typeof value === "object" && !(value instanceof Date)) {
+        const start = new Date(value.start);
+        const end = value.end ? new Date(value.end) : void 0;
+        return start.toDateString() === date.toDateString() || end?.toDateString() === date.toDateString();
+      }
+      return new Date(value).toDateString() === date.toDateString();
+    };
+  });
+  const isFocused = computed(() => {
+    return (date) => {
+      return focusedDate.value?.toDateString() === date.toDateString();
+    };
+  });
+  const isDisabled = computed(() => {
+    return (date) => {
+      if (toValue(options.disabled)) return true;
+      const min = toValue(options.min);
+      const minDate = min ? new Date(min) : void 0;
+      minDate?.setHours(0, 0, 0, 0);
+      const max = toValue(options.max);
+      const maxDate = max ? new Date(max) : void 0;
+      maxDate?.setHours(23, 59, 59, 999);
+      if (minDate && maxDate) return !isInDateRange(date, minDate, maxDate);
+      if (minDate) return date.getTime() < minDate.getTime();
+      if (maxDate) return date.getTime() > maxDate.getTime();
+      return false;
+    };
+  });
+  const weeksToRender = computed(() => {
+    const weekStartDay = toValue(options.weekStartDay);
+    const firstDayInViewMonth = new Date(
+      viewMonth.value.getFullYear(),
+      viewMonth.value.getMonth(),
+      1
+    );
+    const startOffset = (firstDayInViewMonth.getDay() + 6) % 7;
+    const daysBeforeStart = (startOffset - WEEKDAYS.indexOf(weekStartDay) + 7) % 7;
+    const weeksToRender2 = 6;
+    const weeks = [];
+    for (let weekIndex = 0; weekIndex < weeksToRender2; weekIndex++) {
+      const weekStartDate = new Date(firstDayInViewMonth);
+      weekStartDate.setDate(weekStartDate.getDate() - daysBeforeStart + weekIndex * 7);
+      const days = Array.from({ length: 7 }, (_, dayIndex) => {
+        const date = new Date(weekStartDate);
+        date.setDate(date.getDate() + dayIndex);
+        return {
+          date,
+          isCurrentMonth: date.getMonth() === viewMonth.value.getMonth()
+        };
+      });
+      weeks.push({
+        weekNumber: getISOWeekNumber(weekStartDate),
+        days
+      });
+    }
+    return weeks;
+  });
+  const goToDate = (date, preventSelectionUpdate) => {
+    focusedDate.value = new Date(date);
+    if (focusedDate.value.getFullYear() !== viewMonth.value.getFullYear() || focusedDate.value.getMonth() !== viewMonth.value.getMonth()) {
+      viewMonth.value = new Date(focusedDate.value);
+    }
+    const selectionMode = toValue(options.selectionMode);
+    if (!selectionMode || preventSelectionUpdate) return;
+    const selection = toValue(options.modelValue);
+    switch (selectionMode) {
+      case "single":
+        options.onUpdateModelValue?.(new Date(date));
+        break;
+      case "multiple": {
+        let values = Array.isArray(selection) ? selection.map((d) => new Date(d)) : [];
+        if (isSelected.value(date)) {
+          values = values.filter((d) => d.toDateString() !== date.toDateString());
+        } else {
+          values.push(new Date(date));
+        }
+        options.onUpdateModelValue?.(values);
+        break;
+      }
+      case "range": {
+        const currentRange = typeof selection === "object" && !(selection instanceof Date) && !Array.isArray(selection) ? selection : void 0;
+        let newRange;
+        if (currentRange?.start && currentRange.end) {
+          newRange = { start: new Date(date) };
+        } else {
+          newRange = {
+            start: currentRange?.start ? new Date(currentRange.start) : new Date(date),
+            end: currentRange?.start ? new Date(date) : void 0
+          };
+        }
+        newRange = sortDateRange(newRange);
+        options.onUpdateModelValue?.(newRange);
+        break;
+      }
+    }
+  };
+  const handleKeyNavigation = async (event) => {
+    let newDate;
+    const getNewFocusDateByDiff = (diff, type = "days") => {
+      const date = new Date(focusedDate.value);
+      if (type === "month") date.setMonth(date.getMonth() + diff);
+      else date.setDate(date.getDate() + diff);
+      return date;
+    };
+    switch (event.key) {
+      case "ArrowUp":
+        newDate = getNewFocusDateByDiff(-7);
+        break;
+      case "ArrowDown":
+        newDate = getNewFocusDateByDiff(7);
+        break;
+      case "ArrowLeft":
+        newDate = getNewFocusDateByDiff(-1);
+        break;
+      case "ArrowRight":
+        newDate = getNewFocusDateByDiff(1);
+        break;
+      case "Home": {
+        const idx = getNormalizedDayIndex(focusedDate.value, toValue(options.weekStartDay));
+        newDate = getNewFocusDateByDiff(-idx);
+        break;
+      }
+      case "End": {
+        const idx = getNormalizedDayIndex(focusedDate.value, toValue(options.weekStartDay));
+        newDate = getNewFocusDateByDiff(6 - idx);
+        break;
+      }
+      case "PageUp":
+        newDate = getNewFocusDateByDiff(-(event.shiftKey ? 12 : 1), "month");
+        break;
+      case "PageDown":
+        newDate = getNewFocusDateByDiff(event.shiftKey ? 12 : 1, "month");
+        break;
+    }
+    if (!newDate || isDisabled.value(newDate)) return;
+    event.preventDefault();
+    goToDate(newDate, true);
+    await nextTick();
+    tableRef.value?.querySelector(`[data-date="${focusedDate.value.toDateString()}"]`)?.focus();
+  };
+  const getRangeType = computed(() => {
+    return (date, range) => {
+      const selection = range ?? toValue(options.modelValue);
+      if (!selection || typeof selection !== "object" || Array.isArray(selection) || selection instanceof Date) {
+        return;
+      }
+      const sortedRange = sortDateRange(selection);
+      const start = new Date(sortedRange.start);
+      start.setHours(0, 0, 0, 0);
+      const end = sortedRange.end ? new Date(sortedRange.end) : void 0;
+      end?.setHours(23, 59, 59, 999);
+      if (date.toDateString() === start.toDateString()) return "start";
+      if (date.toDateString() === end?.toDateString()) return "end";
+      if (end && isInDateRange(date, start, end)) return "middle";
+    };
+  });
+  const goToMonthByOffset = (offset) => {
+    const date = new Date(viewMonth.value);
+    date.setMonth(date.getMonth() + offset, 1);
+    viewMonth.value = date;
+  };
+  const goToToday = () => {
+    viewMonth.value = /* @__PURE__ */ new Date();
+  };
+  const tableRef = createElRef();
+  return {
+    state: {
+      weekdayNames,
+      weeksToRender,
+      focusedDate,
+      viewMonth
+    },
+    elements: {
+      table: {
+        role: "grid",
+        onKeydown: handleKeyNavigation,
+        ref: tableRef
+      },
+      cell: computed(() => (cell) => ({
+        role: "gridcell",
+        "aria-selected": isSelected.value(cell.date),
+        "aria-disabled": isDisabled.value(cell.date)
+      })),
+      button: computed(() => (button) => {
+        const formatter = new Intl.DateTimeFormat(toValue(options.locale), { dateStyle: "full" });
+        const attributes = {
+          "aria-label": formatter.format(button.date),
+          "data-date": button.date.toDateString()
+        };
+        const selection = toValue(options.selectionMode);
+        if (!selection) return attributes;
+        const disabled = isDisabled.value(button.date);
+        return {
+          ...attributes,
+          tabindex: isFocused.value(button.date) && !disabled ? "0" : "-1",
+          disabled,
+          onClick: disabled ? void 0 : () => goToDate(button.date)
+        };
+      })
+    },
+    internals: {
+      goToMonthByOffset,
+      goToToday,
+      isSelected,
+      isToday,
+      getRangeType,
+      isDisabled,
+      goToDate,
+      isFocused
+    }
+  };
+});
 const isSubsetMatching = (subset, target) => Object.entries(subset).every(
   ([key, value]) => target[key] === value
 );
@@ -762,6 +1059,7 @@ const createTooltip = createBuilder(({ debounce: debounce2, isVisible }) => {
 export {
   CLOSING_KEYS,
   OPENING_KEYS,
+  _unstableCreateCalendar,
   createBuilder,
   createComboBox,
   createElRef,

package/dist/utils/dates.d.ts

@@ -0,0 +1,15 @@
+import { Nullable } from './types.js';
+export declare function getISOWeekNumber(date: Date): number;
+/**
+ * Checks whether the given date is in between the given start and end date.
+ */
+export declare function isInDateRange(date: Date, start: Date, end: Date): boolean;
+export declare function getNormalizedDayIndex(date: Date, weekStartDay: Weekday): number;
+export declare const WEEKDAYS: readonly ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+export type Weekday = (typeof WEEKDAYS)[number];
+export type DateValue = Date | string | number;
+export type DateRange<T extends DateValue = DateValue> = {
+    start: T;
+    end?: Nullable<T>;
+};
+export declare function sortDateRange(range: DateRange): DateRange<Date>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "0.1.1-dev-20250922084911",
+  "version": "0.2.0-dev-20251014161744",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -32,14 +32,14 @@
     "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "peerDependencies": {
-    "@playwright/experimental-ct-vue": "1.55.0",
-    "@playwright/test": "1.55.0",
+    "@playwright/experimental-ct-vue": "1.56.0",
+    "@playwright/test": "1.56.0",
     "typescript": ">= 5",
     "vue": ">= 3.5.0"
   },
   "devDependencies": {
-    "@vue/compiler-dom": "3.5.21",
-    "vue": "3.5.21",
+    "@vue/compiler-dom": "3.5.22",
+    "vue": "3.5.22",
     "@sit-onyx/shared": "^0.1.0"
   },
   "scripts": {