sit-onyx 1.3.0-dev-20251029130423 → 1.3.0-dev-20251029150535

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

@@ -16,7 +16,7 @@ declare const _default: <TSelection extends OnyxCalendarSelectionMode>(__VLS_pro
          */
         actions?(): unknown;
         /**
-         * Optional slot that is displayed inside each day, for custom calender content.
+         * Optional slot that is displayed inside each day, for custom calendar content.
          */
         day?(props: {
             /**
@@ -34,7 +34,7 @@ declare const _default: <TSelection extends OnyxCalendarSelectionMode>(__VLS_pro
          */
         actions?(): unknown;
         /**
-         * Optional slot that is displayed inside each day, for custom calender content.
+         * Optional slot that is displayed inside each day, for custom calendar content.
          */
         day?(props: {
             /**

package/dist/components/OnyxCalendarCell/types.d.ts

@@ -27,5 +27,9 @@ export type OnyxCalendarCellProps = DensityProp & {
      */
     rangeType?: CalendarCellRangeType;
     buttonAttributes?: HTMLAttributes;
+    /**
+     * Optional tooltip text
+     */
+    tooltipText?: string;
 };
 export type CalendarCellRangeType = "start" | "middle" | "end";

package/dist/i18n/locales/de-DE.json

@@ -226,7 +226,8 @@
     },
     "calendar": {
         "todayButton": { "label": "Heute", "tooltip": "Springe zu Heute" },
-        "calenderWeek": "KW",
+        "calendarWeek": "KW",
+        "calendarWeekButtonLabel": "Kalenderwoche {weekNumber} auswählen",
         "previousMonthButton": "Vorheriger Monat",
         "nextMonthButton": "Nächster Monat"
     },

package/dist/i18n/locales/en-US.json

@@ -229,7 +229,8 @@
             "label": "Today",
             "tooltip": "Jump to today"
         },
-        "calenderWeek": "CW",
+        "calendarWeek": "CW",
+        "calendarWeekButtonLabel": "Select calendar week {weekNumber}",
         "previousMonthButton": "Previous month",
         "nextMonthButton": "Next month"
     },

package/dist/i18n/locales/en-US.json.d.ts

@@ -229,7 +229,8 @@ declare const _default: {
       "label": "Today",
       "tooltip": "Jump to today"
     },
-    "calenderWeek": "CW",
+    "calendarWeek": "CW",
+    "calendarWeekButtonLabel": "Select calendar week {weekNumber}",
     "previousMonthButton": "Previous month",
     "nextMonthButton": "Next month"
   },

package/dist/index.esm-bundler.js

@@ -354,7 +354,7 @@ const languageSelect = { "label": "Language", "headline": "Change language", "su
 const resizeHandle = { "label": "Drag to change width" };
 const fileUpload = { "select": "Select", "clickToUpload": "Click to select", "orDragAndDrop": "or drag and drop file", "maxFileSize": "Maximum file size", "inTotal": "in total", "maxFileCount": "Maximum {n} files to select in total", "allowedFileTypes": "Allowed file types: {types}", "hideFilesButton": "Hide all files", "revealFilesButton": "Show all files", "removeFile": "Remove file", "status": { "fileTypeError": "File with extension '.{extension}' is invalid", "fileSizeError": "File exceeds maximum allowed size of {size}", "maxFileSizeError": "Total size of all files exceeds maximum allowed of {size}", "maxCountError": "Number of files exceeds maximum allowed of {count}" } };
 const globalFAB = { "label": "Global actions" };
-const calendar = { "todayButton": { "label": "Today", "tooltip": "Jump to today" }, "calenderWeek": "CW", "previousMonthButton": "Previous month", "nextMonthButton": "Next month" };
+const calendar = { "todayButton": { "label": "Today", "tooltip": "Jump to today" }, "calendarWeek": "CW", "calendarWeekButtonLabel": "Select calendar week {weekNumber}", "previousMonthButton": "Previous month", "nextMonthButton": "Next month" };
 const flyoutMenu = { "moreActions": "More actions", "toggleActions": { "click": "Click to toggle action visibility", "hover": "Hover/Focus to toggle action visibility" } };
 const slider = { "decreaseValue": "Decrease value by {n}", "increaseValue": "Increase value by {n}" };
 const enUS = {
@@ -549,7 +549,17 @@ const _unstableCreateCalendar = createBuilder((options) => {
     const index = WEEKDAYS.indexOf(weekStartDay);
     return names.slice(index).concat(names.slice(0, index));
   });
-  const focusedDate = ref(/* @__PURE__ */ new Date());
+  const initialFocusedDate = () => {
+    const today = /* @__PURE__ */ new Date();
+    const view = viewMonth.value;
+    const isTodayInViewMonth = today.getFullYear() === view.getFullYear() && today.getMonth() === view.getMonth();
+    if (isTodayInViewMonth) {
+      return today;
+    } else {
+      return new Date(view.getFullYear(), view.getMonth(), 1);
+    }
+  };
+  const focusedDate = ref(initialFocusedDate());
   watch(
     () => toValue(options.modelValue),
     (newValue) => {
@@ -563,7 +573,8 @@ const _unstableCreateCalendar = createBuilder((options) => {
         newFocusDate = new Date(newValue);
       }
       if (newFocusDate) focusedDate.value = newFocusDate;
-    }
+    },
+    { immediate: true }
   );
   const isToday = (date) => {
     return date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
@@ -733,6 +744,8 @@ const _unstableCreateCalendar = createBuilder((options) => {
       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() && date.toDateString() === end?.toDateString())
+        return;
       if (date.toDateString() === start.toDateString()) return "start";
       if (date.toDateString() === end?.toDateString()) return "end";
       if (end && isInDateRange(date, start, end)) return "middle";
@@ -4109,7 +4122,7 @@ const _hoisted_2$L = { class: "onyx-toast-message__content onyx-truncation-ellip
 const _hoisted_3$x = { class: "onyx-toast-message__headline onyx-text" };
 const _hoisted_4$m = { class: "onyx-truncation-ellipsis" };
 const _hoisted_5$g = ["aria-label"];
-const _hoisted_6$c = {
+const _hoisted_6$b = {
   key: 0,
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
@@ -4147,7 +4160,7 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           $setup.props.description ? (openBlock(), createElementBlock(
             "p",
-            _hoisted_6$c,
+            _hoisted_6$b,
             toDisplayString($setup.props.description),
             1
             /* TEXT */
@@ -5147,146 +5160,6 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
 }
 const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
-  __name: "OnyxCalendarCell",
-  props: {
-    density: { type: null, required: false },
-    date: { type: Number, required: true },
-    size: { type: String, required: true },
-    is: { type: String, required: false, default: "div" },
-    disabled: { type: Boolean, required: false },
-    showAsDisabled: { type: Boolean, required: false },
-    color: { type: String, required: false },
-    backgroundColor: { type: String, required: false, default: "blank" },
-    rangeType: { type: String, required: false },
-    buttonAttributes: { type: Object, required: false }
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const slots = useSlots();
-    const { densityClass } = useDensity(props);
-    const contentAttributes = computed(() => {
-      return props.is === "button" ? { type: "button", disabled: props.disabled } : { "aria-disabled": props.disabled };
-    });
-    const __returned__ = { props, slots, densityClass, contentAttributes, get mergeVueProps() {
-      return mergeVueProps;
-    } };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-const _hoisted_1$Q = { class: "onyx-calendar-cell__header" };
-const _hoisted_2$F = { class: "onyx-calendar-cell__date-container" };
-const _hoisted_3$s = { class: "onyx-calendar-cell__date" };
-const _hoisted_4$l = {
-  key: 0,
-  class: "onyx-calendar-cell__main"
-};
-function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "td",
-    {
-      class: normalizeClass([
-        "onyx-component",
-        "onyx-calendar-cell",
-        `onyx-calendar-cell--${$setup.props.backgroundColor}`,
-        `onyx-calendar-cell--${$setup.props.size}`,
-        $setup.densityClass,
-        {
-          [`onyx-calendar-cell--${$setup.props.color}`]: $setup.props.color,
-          [`onyx-calendar-cell--range-${$setup.props.rangeType}`]: $setup.props.rangeType
-        }
-      ])
-    },
-    [
-      (openBlock(), createBlock(resolveDynamicComponent($setup.props.is), mergeProps($setup.mergeVueProps($setup.contentAttributes, $setup.props.buttonAttributes), {
-        class: [
-          "onyx-calendar-cell__content",
-          {
-            "onyx-calendar-cell__content--disabled": $setup.props.is !== "button" && $setup.props.disabled || $setup.props.showAsDisabled
-          }
-        ]
-      }), {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$Q, [
-            createElementVNode("div", _hoisted_2$F, [
-              createElementVNode(
-                "span",
-                _hoisted_3$s,
-                toDisplayString($setup.props.date),
-                1
-                /* TEXT */
-              )
-            ])
-          ]),
-          !!$setup.slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$l, [
-            renderSlot(_ctx.$slots, "default")
-          ])) : createCommentVNode("v-if", true)
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 16, ["class"]))
-    ],
-    2
-    /* CLASS */
-  );
-}
-const OnyxCalendarCell = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendarCell/OnyxCalendarCell.vue"]]);
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
-  __name: "OnyxIconButton",
-  props: {
-    density: { type: null, required: false },
-    autofocus: { type: Boolean, required: false },
-    link: { type: null, required: false },
-    label: { type: String, required: true },
-    disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
-    type: { type: null, required: false, default: "button" },
-    color: { type: null, required: false, default: "primary" },
-    loading: { type: Boolean, required: false },
-    icon: { type: String, required: false },
-    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const { densityClass } = useDensity(props);
-    const skeleton = useSkeletonContext(props);
-    const forwardProps = useForwardProps(props, ButtonOrLinkLayout);
-    const __returned__ = { props, densityClass, skeleton, forwardProps, ButtonOrLinkLayout, OnyxIcon, OnyxLoadingIndicator, OnyxSkeleton };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
-    key: 0,
-    class: normalizeClass(["onyx-icon-button-skeleton", $setup.densityClass])
-  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.forwardProps, {
-    "aria-label": $setup.props.label,
-    title: $setup.props.label,
-    class: [
-      "onyx-component",
-      "onyx-icon-button",
-      `onyx-icon-button--${$setup.props.color}`,
-      { "onyx-icon-button--loading": $setup.props.loading },
-      $setup.densityClass
-    ]
-  }), {
-    default: withCtx(() => [
-      $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
-        key: 0,
-        type: "circle"
-      })) : $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
-        key: 1,
-        icon: $setup.props.icon
-      }, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "default", { key: 2 })
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 16, ["aria-label", "title", "class"]));
-}
-const OnyxIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTooltip",
   props: {
     density: { type: null, required: false },
@@ -5441,8 +5314,8 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$P = { class: "onyx-tooltip--content" };
-function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$Q = { class: "onyx-tooltip--content" };
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -5458,7 +5331,7 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
           style: $setup.tooltipStyles
         }),
         [
-          createElementVNode("div", _hoisted_1$P, [
+          createElementVNode("div", _hoisted_1$Q, [
             $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 0,
               icon: $setup.props.icon,
@@ -5482,7 +5355,167 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, STYLE */
   );
 }
-const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
+const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+  __name: "OnyxCalendarCell",
+  props: {
+    density: { type: null, required: false },
+    date: { type: Number, required: true },
+    size: { type: String, required: true },
+    is: { type: String, required: false, default: "div" },
+    disabled: { type: Boolean, required: false },
+    showAsDisabled: { type: Boolean, required: false },
+    color: { type: String, required: false },
+    backgroundColor: { type: String, required: false, default: "blank" },
+    rangeType: { type: String, required: false },
+    buttonAttributes: { type: Object, required: false },
+    tooltipText: { type: String, required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const slots = useSlots();
+    const { densityClass } = useDensity(props);
+    const contentAttributes = computed(() => {
+      return props.is === "button" ? { type: "button", disabled: props.disabled } : { "aria-disabled": props.disabled };
+    });
+    const __returned__ = { props, slots, densityClass, contentAttributes, get mergeVueProps() {
+      return mergeVueProps;
+    }, OnyxTooltip };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$P = { class: "onyx-calendar-cell__header" };
+const _hoisted_2$F = { class: "onyx-calendar-cell__date-container" };
+const _hoisted_3$s = {
+  key: 1,
+  class: "onyx-calendar-cell__date"
+};
+const _hoisted_4$l = {
+  key: 0,
+  class: "onyx-calendar-cell__main"
+};
+function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "td",
+    {
+      class: normalizeClass([
+        "onyx-component",
+        "onyx-calendar-cell",
+        `onyx-calendar-cell--${$setup.props.backgroundColor}`,
+        `onyx-calendar-cell--${$setup.props.size}`,
+        $setup.densityClass,
+        {
+          [`onyx-calendar-cell--${$setup.props.color}`]: $setup.props.color,
+          [`onyx-calendar-cell--range-${$setup.props.rangeType}`]: $setup.props.rangeType
+        }
+      ])
+    },
+    [
+      (openBlock(), createBlock(resolveDynamicComponent($setup.props.is), mergeProps($setup.mergeVueProps($setup.contentAttributes, $setup.props.buttonAttributes), {
+        class: [
+          "onyx-calendar-cell__content",
+          {
+            "onyx-calendar-cell__content--disabled": $setup.props.is !== "button" && $setup.props.disabled || $setup.props.showAsDisabled
+          }
+        ]
+      }), {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$P, [
+            createElementVNode("div", _hoisted_2$F, [
+              $setup.props.tooltipText ? (openBlock(), createBlock($setup["OnyxTooltip"], {
+                key: 0,
+                text: $setup.props.tooltipText,
+                "without-wedge": ""
+              }, {
+                default: withCtx(({ trigger }) => [
+                  createElementVNode(
+                    "span",
+                    mergeProps({ class: "onyx-calendar-cell__date" }, trigger),
+                    toDisplayString($setup.props.date),
+                    17
+                    /* TEXT, FULL_PROPS */
+                  )
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["text"])) : (openBlock(), createElementBlock(
+                "span",
+                _hoisted_3$s,
+                toDisplayString($setup.props.date),
+                1
+                /* TEXT */
+              ))
+            ])
+          ]),
+          !!$setup.slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$l, [
+            renderSlot(_ctx.$slots, "default")
+          ])) : createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]))
+    ],
+    2
+    /* CLASS */
+  );
+}
+const OnyxCalendarCell = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendarCell/OnyxCalendarCell.vue"]]);
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+  __name: "OnyxIconButton",
+  props: {
+    density: { type: null, required: false },
+    autofocus: { type: Boolean, required: false },
+    link: { type: null, required: false },
+    label: { type: String, required: true },
+    disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
+    type: { type: null, required: false, default: "button" },
+    color: { type: null, required: false, default: "primary" },
+    loading: { type: Boolean, required: false },
+    icon: { type: String, required: false },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const { densityClass } = useDensity(props);
+    const skeleton = useSkeletonContext(props);
+    const forwardProps = useForwardProps(props, ButtonOrLinkLayout);
+    const __returned__ = { props, densityClass, skeleton, forwardProps, ButtonOrLinkLayout, OnyxIcon, OnyxLoadingIndicator, OnyxSkeleton };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
+    key: 0,
+    class: normalizeClass(["onyx-icon-button-skeleton", $setup.densityClass])
+  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.forwardProps, {
+    "aria-label": $setup.props.label,
+    title: $setup.props.label,
+    class: [
+      "onyx-component",
+      "onyx-icon-button",
+      `onyx-icon-button--${$setup.props.color}`,
+      { "onyx-icon-button--loading": $setup.props.loading },
+      $setup.densityClass
+    ]
+  }), {
+    default: withCtx(() => [
+      $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
+        key: 0,
+        type: "circle"
+      })) : $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
+        key: 1,
+        icon: $setup.props.icon
+      }, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "default", { key: 2 })
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["aria-label", "title", "class"]));
+}
+const OnyxIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTag",
   props: {
@@ -5648,7 +5681,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     };
     const tableHeaders = computed(() => {
       if (!props.showCalendarWeeks) return weekdayNames.value;
-      return [t.value("calendar.calenderWeek"), ...weekdayNames.value];
+      return [t.value("calendar.calendarWeek"), ...weekdayNames.value];
     });
     const getDayRangeType = computed(() => {
       return (date) => {
@@ -5656,15 +5689,39 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
         if (!currentRange || currentRange.end || !hoveredDate.value) return getRangeType.value(date);
         return getRangeType.value(date, {
           start: currentRange.start,
-          end: hoveredDate.value
+          end: hoveredDate.value.getTime() === currentRange.start.getTime() ? void 0 : hoveredDate.value
         });
       };
     });
-    const __returned__ = { props, emit, slots, modelValue, viewMonth, densityClass, skeleton, t, locale, d, calendarRef, width, calendarSize, disabled, min, max, weekStartDay, showCalendarWeeks, selectionMode, weeksToRender, weekdayNames, tableProps, cellProps, buttonProps, goToMonthByOffset, goToToday, isSelected, isToday, getRangeType, isDisabled, hoveredDate, hoverHandlers, tableHeaders, getDayRangeType, get iconChevronLeftSmall() {
+    const selectWeek = (week) => {
+      const newRange = {
+        start: week.days[0].date,
+        end: week.days.at(-1).date
+      };
+      modelValue.value = newRange;
+    };
+    const getWeekNumberProps = computed(() => {
+      return (week) => {
+        if (props.selectionMode !== "range") return;
+        const startDisabled = isDisabled.value(week.days[0].date);
+        const endDisabled = isDisabled.value(week.days[6].date);
+        const disabled2 = startDisabled || endDisabled;
+        return {
+          role: "button",
+          "aria-label": t.value("calendar.calendarWeekButtonLabel", { weekNumber: week.weekNumber }),
+          "aria-disabled": disabled2,
+          onClick: disabled2 ? void 0 : () => selectWeek(week)
+        };
+      };
+    });
+    const calendarWeeksDisplay = computed(
+      () => `${t.value("calendar.calendarWeek")} ${weeksToRender.value[0]?.weekNumber} - ${weeksToRender.value[weeksToRender.value.length - 1]?.weekNumber} `
+    );
+    const __returned__ = { props, emit, slots, modelValue, viewMonth, densityClass, skeleton, t, locale, d, calendarRef, width, calendarSize, disabled, min, max, weekStartDay, showCalendarWeeks, selectionMode, weeksToRender, weekdayNames, tableProps, cellProps, buttonProps, goToMonthByOffset, goToToday, isSelected, isToday, getRangeType, isDisabled, hoveredDate, hoverHandlers, tableHeaders, getDayRangeType, selectWeek, getWeekNumberProps, calendarWeeksDisplay, get iconChevronLeftSmall() {
       return iconChevronLeftSmall;
     }, get iconChevronRightSmall() {
       return iconChevronRightSmall;
-    }, OnyxCalendarCell, OnyxHeadline, OnyxIconButton, OnyxSkeleton, OnyxTag };
+    }, OnyxCalendarCell, OnyxHeadline, OnyxIconButton, OnyxSkeleton, OnyxSystemButton, OnyxTag };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -5674,10 +5731,6 @@ const _hoisted_2$D = { class: "control-container time-control-container" };
 const _hoisted_3$r = { class: "control-container" };
 const _hoisted_4$k = { class: "onyx-calendar__body" };
 const _hoisted_5$f = ["abbr"];
-const _hoisted_6$b = {
-  key: 0,
-  scope: "row"
-};
 function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
@@ -5701,21 +5754,12 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     [
       createElementVNode("div", _hoisted_1$N, [
         createElementVNode("div", _hoisted_2$D, [
-          $setup.calendarSize !== "small" ? (openBlock(), createBlock($setup["OnyxTag"], {
-            key: 0,
+          createVNode($setup["OnyxSystemButton"], {
             label: $setup.t("calendar.todayButton.label"),
             class: "control-container__today-btn",
             disabled: $setup.disabled === true,
-            clickable: $setup.t("calendar.todayButton.tooltip"),
             onClick: $setup.goToToday
-          }, null, 8, ["label", "disabled", "clickable", "onClick"])) : createCommentVNode("v-if", true),
-          createVNode($setup["OnyxIconButton"], {
-            label: $setup.t("calendar.previousMonthButton"),
-            color: "neutral",
-            icon: $setup.iconChevronLeftSmall,
-            disabled: $setup.disabled === true,
-            onClick: _cache[0] || (_cache[0] = ($event) => $setup.goToMonthByOffset(-1))
-          }, null, 8, ["label", "icon", "disabled"]),
+          }, null, 8, ["label", "disabled", "onClick"]),
           createVNode($setup["OnyxHeadline"], {
             is: "h2",
             class: "control-container__date-display"
@@ -5730,7 +5774,21 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1
             /* STABLE */
           }),
+          $setup.showCalendarWeeks && $setup.calendarSize === "big" ? (openBlock(), createBlock($setup["OnyxTag"], {
+            key: 0,
+            color: "primary",
+            label: $setup.calendarWeeksDisplay
+          }, null, 8, ["label"])) : createCommentVNode("v-if", true),
           createVNode($setup["OnyxIconButton"], {
+            class: "control-container__prev-month-button",
+            label: $setup.t("calendar.previousMonthButton"),
+            color: "neutral",
+            icon: $setup.iconChevronLeftSmall,
+            disabled: $setup.disabled === true,
+            onClick: _cache[0] || (_cache[0] = ($event) => $setup.goToMonthByOffset(-1))
+          }, null, 8, ["label", "icon", "disabled"]),
+          createVNode($setup["OnyxIconButton"], {
+            class: "control-container__next-month-button",
             label: $setup.t("calendar.nextMonthButton"),
             color: "neutral",
             icon: $setup.iconChevronRightSmall,
@@ -5774,10 +5832,13 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
                   }, [
                     $setup.showCalendarWeeks ? (openBlock(), createElementBlock(
                       "th",
-                      _hoisted_6$b,
+                      mergeProps({
+                        key: 0,
+                        scope: "row"
+                      }, { ref_for: true }, $setup.getWeekNumberProps(week)),
                       toDisplayString(week.weekNumber),
-                      1
-                      /* TEXT */
+                      17
+                      /* TEXT, FULL_PROPS */
                     )) : createCommentVNode("v-if", true),
                     (openBlock(true), createElementBlock(
                       Fragment,
@@ -5794,7 +5855,8 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
                           color: $setup.isSelected(day.date) ? "primary" : $setup.isToday(day.date) ? "neutral" : void 0,
                           "background-color": [0, 6].includes(day.date.getDay()) ? "tinted" : "blank",
                           "range-type": $setup.getDayRangeType(day.date),
-                          size: $setup.calendarSize
+                          size: $setup.calendarSize,
+                          "tooltip-text": $setup.isToday(day.date) ? $setup.t("calendar.todayButton.label") : void 0
                         }), createSlots({
                           _: 2
                           /* DYNAMIC */
@@ -5809,7 +5871,7 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
                             ]),
                             key: "0"
                           } : void 0
-                        ]), 1040, ["is", "date", "button-attributes", "disabled", "show-as-disabled", "color", "background-color", "range-type", "size"]);
+                        ]), 1040, ["is", "date", "button-attributes", "disabled", "show-as-disabled", "color", "background-color", "range-type", "size", "tooltip-text"]);
                       }),
                       128
                       /* KEYED_FRAGMENT */