sit-onyx 1.1.0-dev-20250930080442 → 1.1.0-dev-20250930084752

package/dist/index.esm-bundler.js

@@ -1,5 +1,5 @@
-import { computed, provide, inject, toRef, ref, watch, defineComponent, watchEffect, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot, onMounted, createBlock, resolveDynamicComponent, withCtx, createVNode, createElementVNode, withModifiers, readonly, reactive, onBeforeMount, onBeforeUnmount, useId, toValue, unref, shallowRef, nextTick, useTemplateRef, createCommentVNode, createTextVNode, toDisplayString, normalizeProps, mergeProps, Fragment, useAttrs, isProxy, toRaw, customRef, onUnmounted, normalizeStyle, useSlots, createSlots, renderList, toHandlers, resolveComponent, withDirectives, guardReactiveProps, vShow, Teleport, vModelCheckbox, vModelText, h, vModelDynamic, withKeys, createStaticVNode, useModel } from "vue";
-import { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconX, iconMoreHorizontalSmall, iconCircleCheck, iconCircleX, iconCircleInformation, iconUser, iconArrowSmallUpRight, iconChevronRightSmall, iconArrowSmallLeft, iconMoreHorizontal, iconHome, iconSearch, iconCheck, iconSearchX, iconChevronDownUp, iconCheckSmall, iconChevronLeftSmall, iconPlusSmall, iconEyeDisabled, iconListArrowUp, iconListArrowDown, iconArrowsSort, iconCircleBlock, iconFileDisabled, iconEyeClosed, iconEye, iconCircleContrast, iconTranslate, iconMoreVertical, iconMenu, iconNotificationFlag, iconPlus, iconMinus, iconFile, iconFilePdf, iconFileCsv, iconAudio, iconVideocam, iconPicture, iconFileRtf, iconFilePpt, iconFileXls, iconFileXlsx, iconFileDoc, iconFileGlobe, iconFileArchive, iconFileText, iconTrash, iconCloudArrowUp, iconShareIos, iconSettings, iconLogout, iconArrowSmallRight } from "@sit-onyx/icons";
+import { computed, provide, inject, toRef, ref, watch, defineComponent, watchEffect, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot, onMounted, createBlock, resolveDynamicComponent, withCtx, createVNode, createElementVNode, withModifiers, readonly, reactive, onBeforeMount, onBeforeUnmount, useId, toValue, nextTick, unref, shallowRef, useTemplateRef, createCommentVNode, createTextVNode, toDisplayString, normalizeProps, mergeProps, Fragment, useAttrs, isProxy, toRaw, customRef, onUnmounted, normalizeStyle, useSlots, createSlots, renderList, toHandlers, resolveComponent, withDirectives, guardReactiveProps, vShow, Teleport, vModelCheckbox, vModelText, h, vModelDynamic, withKeys, createStaticVNode, useModel } from "vue";
+import { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconX, iconMoreHorizontalSmall, iconCircleCheck, iconCircleX, iconCircleInformation, iconUser, iconArrowSmallUpRight, iconChevronRightSmall, iconArrowSmallLeft, iconMoreHorizontal, iconHome, iconChevronLeftSmall, iconSearch, iconCheck, iconSearchX, iconChevronDownUp, iconCheckSmall, iconPlusSmall, iconEyeDisabled, iconListArrowUp, iconListArrowDown, iconArrowsSort, iconCircleBlock, iconFileDisabled, iconEyeClosed, iconEye, iconCircleContrast, iconTranslate, iconMoreVertical, iconMenu, iconNotificationFlag, iconPlus, iconMinus, iconFile, iconFilePdf, iconFileCsv, iconAudio, iconVideocam, iconPicture, iconFileRtf, iconFilePpt, iconFileXls, iconFileXlsx, iconFileDoc, iconFileGlobe, iconFileArchive, iconFileText, iconTrash, iconCloudArrowUp, iconShareIos, iconSettings, iconLogout, iconArrowSmallRight } from "@sit-onyx/icons";
 const DENSITIES = ["compact", "default", "cozy"];
 const useDensity = (props) => ({
   densityClass: computed(() => ({ [`onyx-density-${props.density}`]: !!props.density }))
@@ -49,7 +49,7 @@ const useVModel = (options) => {
 };
 const ACCORDION_INJECTION_KEY = Symbol();
 const ACCORDION_TYPES = ["default", "nested-large", "nested-small", "card"];
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordion",
   props: {
     density: { type: null, required: false },
@@ -119,7 +119,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -137,7 +137,7 @@ function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordion/OnyxAccordion.vue"]]);
+const OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordion/OnyxAccordion.vue"]]);
 const ONYX_BREAKPOINTS = {
   "2xs": 320,
   xs: 577,
@@ -150,7 +150,7 @@ const ONYX_BREAKPOINTS = {
   md: ONYX_BREAKPOINTS.lg - 1,
   lg: ONYX_BREAKPOINTS.xl - 1
 });
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "OnyxIcon",
   props: {
     size: { type: null, required: false },
@@ -166,8 +166,8 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$18 = ["innerHTML"];
-function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$19 = ["innerHTML"];
+function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass({
       "onyx-component": true,
@@ -178,9 +178,9 @@ function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     "aria-hidden": "true",
     innerHTML: $setup.props.icon
-  }, null, 10, _hoisted_1$18);
+  }, null, 10, _hoisted_1$19);
 }
-const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIcon/OnyxIcon.vue"]]);
+const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIcon/OnyxIcon.vue"]]);
 const isAlreadyTriggered = /* @__PURE__ */ new Set();
 const IDLE_TIMEOUT = 200;
 const onIdleCallback = globalThis.window && "requestIdleCallback" in globalThis.window ? globalThis.window.requestIdleCallback : (cb, _) => setTimeout(cb, 0);
@@ -196,7 +196,7 @@ const requestAnimationSync = (animationName) => {
   isAlreadyTriggered.add(animationName);
   onIdleCallback(() => syncAnimations(animationName), { timeout: IDLE_TIMEOUT });
 };
-const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "OnyxSkeleton",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -206,15 +206,15 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$17 = {
+const _hoisted_1$18 = {
   "aria-hidden": "true",
   class: "onyx-component onyx-skeleton"
 };
-function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("figure", _hoisted_1$17);
+function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("figure", _hoisted_1$18);
 }
-const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
-const _sfc_main$1A = /* @__PURE__ */ defineComponent({
+const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordionItem",
   props: {
     density: { type: null, required: false },
@@ -251,11 +251,11 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$16 = ["open"];
-const _hoisted_2$N = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
-const _hoisted_3$w = { class: "onyx-accordion-item__header-content" };
-const _hoisted_4$k = ["id", "aria-labelledby"];
-function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$17 = ["open"];
+const _hoisted_2$O = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
+const _hoisted_3$x = { class: "onyx-accordion-item__header-content" };
+const _hoisted_4$l = ["id", "aria-labelledby"];
+function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.showSkeleton ? (openBlock(), createBlock(resolveDynamicComponent($setup.type === "card" ? $setup.OnyxSkeleton : "div"), {
     key: 0,
     class: normalizeClass([
@@ -291,14 +291,14 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-disabled": $setup.isDisabled,
       onClick: _cache[0] || (_cache[0] = withModifiers(($event) => $setup.isOpen = !$setup.isOpen, ["prevent"]))
     }, [
-      createElementVNode("div", _hoisted_3$w, [
+      createElementVNode("div", _hoisted_3$x, [
         renderSlot(_ctx.$slots, "header")
       ]),
       createVNode($setup["OnyxIcon"], {
         icon: $setup.iconChevronDownSmall,
         class: "onyx-accordion-item__header-icon"
       }, null, 8, ["icon"])
-    ], 8, _hoisted_2$N),
+    ], 8, _hoisted_2$O),
     createElementVNode("div", {
       id: $setup.panelId,
       class: "onyx-accordion-item__panel",
@@ -306,10 +306,10 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-labelledby": $setup.headerId
     }, [
       renderSlot(_ctx.$slots, "default")
-    ], 8, _hoisted_4$k)
-  ], 10, _hoisted_1$16));
+    ], 8, _hoisted_4$l)
+  ], 10, _hoisted_1$17));
 }
-const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordionItem/OnyxAccordionItem.vue"]]);
+const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordionItem/OnyxAccordionItem.vue"]]);
 const DATETIME_FORMATS = {
   date: { dateStyle: "medium" },
   "datetime-local": { dateStyle: "medium", timeStyle: "short" },
@@ -476,6 +476,239 @@ function createElRef() {
     get: () => elementRef.value
   });
 }
+const getDayIndex = (dayName) => {
+  const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+  return days.indexOf(dayName);
+};
+const getNormalizedDayIndex = (date, weekStartDay) => {
+  const day = date.getDay();
+  const start = getDayIndex(weekStartDay);
+  const normalizedDay = day === 0 ? 6 : day - 1;
+  return (normalizedDay - start + 7) % 7;
+};
+const getMidnightDate = (date) => {
+  const newDate = new Date(date);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+};
+const initializeDate = (options) => {
+  const min = options.min ? getMidnightDate(new Date(options.min)) : null;
+  const max = options.max ? getMidnightDate(new Date(options.max)) : null;
+  const today = getMidnightDate(/* @__PURE__ */ new Date());
+  let initialDate = options.initialDate ? getMidnightDate(new Date(options.initialDate)) : today;
+  if (min && initialDate < min) initialDate = min;
+  if (max && initialDate > max) initialDate = max;
+  return initialDate;
+};
+const _unstableCreateCalendar = createBuilder((options) => {
+  const dayNames = computed(() => {
+    const days = Array.from({ length: 7 }, (_, i) => {
+      const date = new Date(2024, 0, 1 + i);
+      return date;
+    });
+    const formatStyle = options.calendarSize === "big" ? "long" : "short";
+    const formatter = new Intl.DateTimeFormat(toValue(options.locale), { weekday: formatStyle });
+    return days.map((day) => formatter.format(day));
+  });
+  const initialValue = initializeDate({
+    initialDate: toValue(options.initialDate),
+    min: toValue(options.min),
+    max: toValue(options.max)
+  });
+  const currentDate = ref(initialValue);
+  const focusedDate = ref(initialValue);
+  const selectedDate = ref(null);
+  const currentYear = computed(() => currentDate.value.getFullYear());
+  const currentMonth = computed(() => currentDate.value.getMonth());
+  const isToday = (date) => getMidnightDate(date).getTime() === getMidnightDate(/* @__PURE__ */ new Date()).getTime();
+  const isSelected = (date) => !!selectedDate.value && getMidnightDate(date).getTime() === getMidnightDate(selectedDate.value).getTime();
+  const isFocused = (date) => !!focusedDate.value && getMidnightDate(date).getTime() === getMidnightDate(focusedDate.value).getTime();
+  const isWeekend = (date) => {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+  };
+  const isDisabled = (date) => {
+    const min = toValue(options.min);
+    const max = toValue(options.max);
+    const disabledFlag = !!toValue(options.disabled);
+    const dateAtMidnight = getMidnightDate(date);
+    const minCheck = min ? dateAtMidnight < getMidnightDate(min) : false;
+    const maxCheck = max ? dateAtMidnight > getMidnightDate(max) : false;
+    return disabledFlag || minCheck || maxCheck;
+  };
+  const generateCalendar = (year, month) => {
+    const weekStartDay = toValue(options.weekStartDay) ?? "Monday";
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const startDayIndex = getDayIndex(weekStartDay);
+    const offset = (firstDay.getDay() + 6) % 7;
+    const startOffset = (offset - startDayIndex + 7) % 7;
+    const calendarDays = [];
+    const prevMonthLastDay = new Date(year, month, 0);
+    for (let i = startOffset; i > 0; i--) {
+      const day = new Date(prevMonthLastDay);
+      day.setDate(prevMonthLastDay.getDate() - i + 1);
+      calendarDays.push({ date: day, isCurrentMonth: false, isDisabled: isDisabled(day) });
+    }
+    for (let i = 1; i <= lastDay.getDate(); i++) {
+      const day = new Date(year, month, i);
+      calendarDays.push({ date: day, isCurrentMonth: true, isDisabled: isDisabled(day) });
+    }
+    const daysInNextMonth = 42 - calendarDays.length;
+    for (let i = 1; i <= daysInNextMonth; i++) {
+      const day = new Date(year, month + 1, i);
+      calendarDays.push({ date: day, isCurrentMonth: false, isDisabled: isDisabled(day) });
+    }
+    const weeks2 = [];
+    for (let i = 0; i < calendarDays.length; i += 7) {
+      weeks2.push(calendarDays.slice(i, i + 7));
+    }
+    return weeks2;
+  };
+  const weeks = computed(() => generateCalendar(currentYear.value, currentMonth.value));
+  const goToDate = (date) => {
+    const midnightDate = getMidnightDate(date);
+    currentDate.value = midnightDate;
+    selectedDate.value = midnightDate;
+    focusedDate.value = midnightDate;
+  };
+  const handleKeyNavigation = async (event) => {
+    if (!focusedDate.value || toValue(options.disabled)) return;
+    const { min, max } = options;
+    const newDate = new Date(focusedDate.value);
+    let handled = false;
+    switch (event.key) {
+      case "ArrowUp":
+        newDate.setDate(newDate.getDate() - 7);
+        handled = true;
+        break;
+      case "ArrowDown":
+        newDate.setDate(newDate.getDate() + 7);
+        handled = true;
+        break;
+      case "ArrowLeft":
+        newDate.setDate(newDate.getDate() - 1);
+        handled = true;
+        break;
+      case "ArrowRight":
+        newDate.setDate(newDate.getDate() + 1);
+        handled = true;
+        break;
+      case "Home":
+        if (options.weekStartDay) {
+          const idx = getNormalizedDayIndex(newDate, toValue(options.weekStartDay));
+          newDate.setDate(newDate.getDate() - idx);
+        }
+        handled = true;
+        break;
+      case "End":
+        if (options.weekStartDay) {
+          const idx = getNormalizedDayIndex(newDate, toValue(options.weekStartDay));
+          newDate.setDate(newDate.getDate() + (6 - idx));
+        }
+        handled = true;
+        break;
+      case "PageUp":
+        newDate.setMonth(newDate.getMonth() - (event.shiftKey ? 12 : 1));
+        handled = true;
+        break;
+      case "PageDown":
+        newDate.setMonth(newDate.getMonth() + (event.shiftKey ? 12 : 1));
+        handled = true;
+        break;
+    }
+    const isDateValid = (d) => {
+      const minDate = toValue(min);
+      const maxDate = toValue(max);
+      const md = getMidnightDate(d);
+      return !(minDate && md < getMidnightDate(minDate)) && !(maxDate && md > getMidnightDate(maxDate));
+    };
+    if (handled) {
+      event.preventDefault();
+      if (isDateValid(newDate)) {
+        focusedDate.value = newDate;
+        if (newDate.getMonth() !== currentDate.value.getMonth()) {
+          currentDate.value = getMidnightDate(
+            new Date(newDate.getFullYear(), newDate.getMonth(), 1)
+          );
+          await nextTick();
+        }
+        const dateKey = focusedDate.value.toISOString().slice(0, 10);
+        options.buttonRefs.value[dateKey]?.focus();
+      }
+    }
+  };
+  const weekdays = computed(() => {
+    const weekStartDay = toValue(options.weekStartDay);
+    if (!weekStartDay) return [];
+    const days = toValue(dayNames);
+    const start = getDayIndex(weekStartDay);
+    return days.slice(start).concat(days.slice(0, start));
+  });
+  watch(selectedDate, (newDate) => {
+    if (newDate) focusedDate.value = getMidnightDate(newDate);
+  });
+  const calendarId = useId();
+  return {
+    elements: {
+      table: computed(() => ({
+        role: "grid",
+        "aria-labelledby": `calendar-${calendarId}`,
+        onKeydown: (e) => handleKeyNavigation(e)
+      })),
+      cell: computed(
+        () => (day) => day.date ? {
+          role: "gridcell",
+          "aria-selected": isSelected(day.date),
+          "aria-disabled": day.isDisabled || toValue(options.disabled),
+          class: {
+            "other-month": !day.isCurrentMonth,
+            "is-disabled": day.isDisabled,
+            today: isToday(day.date),
+            selected: isSelected(day.date),
+            weekend: isWeekend(day.date)
+          }
+        } : {}
+      ),
+      button: computed(
+        () => (day) => day.date ? {
+          tabindex: isFocused(day.date) && !day.isDisabled ? "0" : "-1",
+          disabled: day.isDisabled || toValue(options.disabled),
+          class: "cell-content",
+          "data-date": day.date.toISOString().slice(0, 10),
+          onClick: () => !day.isDisabled && goToDate(day.date)
+        } : {}
+      )
+    },
+    state: {
+      selectedDate,
+      focusedDate,
+      currentYear,
+      currentMonth,
+      weeks,
+      weekdays
+    },
+    internals: {
+      isToday,
+      isSelected,
+      isFocused,
+      isWeekend,
+      isDisabled,
+      goToDate,
+      goToPreviousMonth: () => currentDate.value = getMidnightDate(
+        new Date(currentYear.value, currentMonth.value - 1, 1)
+      ),
+      goToNextMonth: () => currentDate.value = getMidnightDate(
+        new Date(currentYear.value, currentMonth.value + 1, 1)
+      ),
+      goToToday: () => {
+        const today = getMidnightDate(/* @__PURE__ */ new Date());
+        currentDate.value = today;
+        focusedDate.value = today;
+      }
+    }
+  };
+});
 const isSubsetMatching = (subset, target) => Object.entries(subset).every(
   ([key, value]) => target[key] === value
 );
@@ -1226,7 +1459,7 @@ const createTooltip = createBuilder(({ debounce: debounce2, isVisible }) => {
     }
   };
 });
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+const _sfc_main$1A = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicDialog",
   props: {
     density: { type: null, required: false },
@@ -1282,12 +1515,12 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$15 = ["aria-modal", "aria-label", "role"];
-const _hoisted_2$M = {
+const _hoisted_1$16 = ["aria-modal", "aria-label", "role"];
+const _hoisted_2$N = {
   ref: "contentRef",
   class: "onyx-basic-dialog__content"
 };
-function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.open ? (openBlock(), createElementBlock("dialog", {
     key: 0,
     ref: "dialogRef",
@@ -1306,16 +1539,16 @@ function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode(
       "div",
-      _hoisted_2$M,
+      _hoisted_2$N,
       [
         renderSlot(_ctx.$slots, "default")
       ],
       512
       /* NEED_PATCH */
     )
-  ], 42, _hoisted_1$15)) : createCommentVNode("v-if", true);
+  ], 42, _hoisted_1$16)) : createCommentVNode("v-if", true);
 }
-const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicDialog/OnyxBasicDialog.vue"]]);
+const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicDialog/OnyxBasicDialog.vue"]]);
 const normalizedIncludes = (haystack, needle) => {
   const haystackNormalized = removeDiacritics(haystack.toLowerCase());
   const needleNormalized = removeDiacritics(needle.toLowerCase());
@@ -1397,7 +1630,7 @@ const normalizeHref = (href) => {
   return value.replace(/\/+$/, "");
 };
 const ROUTER_INJECTION_KEY = Symbol();
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "OnyxVisuallyHidden",
   props: {
     is: { type: String, required: false, default: "span" }
@@ -1410,7 +1643,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($setup.props.is), { class: "onyx-component onyx-visually-hidden" }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
@@ -1419,8 +1652,8 @@ function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   });
 }
-const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
-const _sfc_main$1x = /* @__PURE__ */ defineComponent({
+const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
+const _sfc_main$1y = /* @__PURE__ */ defineComponent({
   __name: "OnyxRouterLink",
   props: {
     href: { type: String, required: true },
@@ -1436,8 +1669,8 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$14 = ["href", "target", "rel"];
-function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$15 = ["href", "target", "rel"];
+function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: normalizeClass([
       "onyx-component",
@@ -1461,10 +1694,10 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1
       /* STABLE */
     })) : createCommentVNode("v-if", true)
-  ], 10, _hoisted_1$14);
+  ], 10, _hoisted_1$15);
 }
-const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
+const _sfc_main$1x = /* @__PURE__ */ defineComponent({
   __name: "OnyxHeadline",
   props: {
     is: { type: null, required: true },
@@ -1489,7 +1722,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-headline-skeleton", `onyx-headline-skeleton--${$setup.showAs}`])
@@ -1529,7 +1762,7 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["id", "class"]));
 }
-const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
+const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
 const useAutofocus = (inputRef, props) => {
   if (!props.autofocus) {
     return;
@@ -1580,7 +1813,7 @@ const useFormContext = (props) => {
     DEFAULT_FORM_INJECTION_CONTEXT
   )(toRef(props));
 };
-const _sfc_main$1v = /* @__PURE__ */ defineComponent({
+const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   __name: "ButtonOrLinkLayout",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -1603,8 +1836,8 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$13 = ["disabled", "type", "autofocus"];
-function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$14 = ["disabled", "type", "autofocus"];
+function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.linkProps ? (openBlock(), createBlock(
     $setup["OnyxRouterLink"],
     normalizeProps(mergeProps({ key: 0 }, $setup.linkProps)),
@@ -1625,10 +1858,10 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: $setup.props.autofocus
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1$13));
+  ], 8, _hoisted_1$14));
 }
-const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
-const _sfc_main$1u = /* @__PURE__ */ defineComponent({
+const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "OnyxSystemButton",
   props: {
     disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
@@ -1648,7 +1881,7 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-system-button-skeleton", $setup.props.icon ? "" : "onyx-system-button-skeleton--text"])
@@ -1680,8 +1913,8 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label", "title"]));
 }
-const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
-const _sfc_main$1t = /* @__PURE__ */ defineComponent({
+const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   __name: "OnyxAlertModal",
   props: {
     density: { type: null, required: false },
@@ -1705,11 +1938,11 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$12 = { class: "onyx-alert-modal__content" };
-const _hoisted_2$L = { class: "onyx-alert-modal__headline" };
-const _hoisted_3$v = ["id"];
-const _hoisted_4$j = { class: "onyx-alert-modal__actions" };
-function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$13 = { class: "onyx-alert-modal__content" };
+const _hoisted_2$M = { class: "onyx-alert-modal__headline" };
+const _hoisted_3$w = ["id"];
+const _hoisted_4$k = { class: "onyx-alert-modal__actions" };
+function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps({
     class: ["onyx-alert-modal", $setup.densityClass]
   }, $setup.props, {
@@ -1719,7 +1952,7 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$12, [
+      createElementVNode("div", _hoisted_1$13, [
         $setup.props.icon ? (openBlock(), createBlock(
           $setup["OnyxIcon"],
           mergeProps({
@@ -1731,7 +1964,7 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
           /* FULL_PROPS */
         )) : createCommentVNode("v-if", true),
         createElementVNode("div", null, [
-          createElementVNode("div", _hoisted_2$L, [
+          createElementVNode("div", _hoisted_2$M, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -1759,10 +1992,10 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
             class: "onyx-alert-modal__body onyx-truncation"
           }, [
             renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_3$v)
+          ], 8, _hoisted_3$w)
         ])
       ]),
-      createElementVNode("div", _hoisted_4$j, [
+      createElementVNode("div", _hoisted_4$k, [
         renderSlot(_ctx.$slots, "actions")
       ])
     ]),
@@ -1770,7 +2003,7 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class", "aria-describedby"]);
 }
-const OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
+const OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
 const useRootAttrs = () => {
   const attrs = useAttrs();
   const rootAttrs = computed(
@@ -1852,7 +2085,7 @@ const mergeVueProps = (...args) => args.reduce((prev, curr) => {
   merged.ref = mergedRef;
   return merged;
 }, {});
-const _sfc_main$1s = /* @__PURE__ */ defineComponent({
+const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABButton",
   props: {
     density: { type: null, required: false },
@@ -1872,11 +2105,11 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$11 = {
+const _hoisted_1$12 = {
   key: 1,
   class: "onyx-fab-button__label"
 };
-function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-fab-button-skeleton", $setup.densityClass])
@@ -1894,7 +2127,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       !$setup.props.hideLabel ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_1$11,
+        _hoisted_1$12,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -1904,7 +2137,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "title", "aria-label", "link"]));
 }
-const OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABButton/OnyxFABButton.vue"]]);
+const OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABButton/OnyxFABButton.vue"]]);
 const useResizeObserver = (target, options) => {
   const box = options?.box ?? "content-box";
   const width = ref(0);
@@ -2140,7 +2373,7 @@ const findParentWithHiddenOverflow = (element) => {
   }
   return element.parentElement ? findParentWithHiddenOverflow(element.parentElement) : void 0;
 };
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicPopover",
   props: {
     label: { type: String, required: true },
@@ -2286,8 +2519,8 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$10 = ["role", "aria-label"];
-function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$11 = ["role", "aria-label"];
+function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -2306,14 +2539,14 @@ function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle($setup.popoverStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
-      ], 14, _hoisted_1$10)
+      ], 14, _hoisted_1$11)
     ],
     4
     /* STYLE */
   );
 }
-const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
-const _sfc_main$1q = /* @__PURE__ */ defineComponent({
+const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
+const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "OnyxFlyoutMenu",
   props: {
     alignment: { type: String, required: false, default: "auto" },
@@ -2352,9 +2585,9 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$$ = { class: "onyx-flyout-menu__list-header" };
-const _hoisted_2$K = { class: "onyx-flyout-menu__list-footer" };
-function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$10 = { class: "onyx-flyout-menu__list-header" };
+const _hoisted_2$L = { class: "onyx-flyout-menu__list-footer" };
+function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicPopover"], mergeProps($setup.mergeVueProps($setup.root, { ref: $setup.popover }), {
     class: "onyx-component onyx-flyout-menu",
     open: $setup.isExpanded,
@@ -2363,7 +2596,7 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $props.disabled
   }), createSlots({
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$$, [
+      createElementVNode("div", _hoisted_1$10, [
         renderSlot(_ctx.$slots, "header")
       ]),
       $setup.slots.options ? (openBlock(), createElementBlock(
@@ -2375,7 +2608,7 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
         16
         /* FULL_PROPS */
       )) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$K, [
+      createElementVNode("div", _hoisted_2$L, [
         renderSlot(_ctx.$slots, "footer")
       ])
     ]),
@@ -2391,8 +2624,8 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "label", "alignment", "disabled"]);
 }
-const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
-const _sfc_main$1p = /* @__PURE__ */ defineComponent({
+const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   __name: "OnyxFAB",
   props: {
     density: { type: null, required: false },
@@ -2430,7 +2663,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
   return !$setup.hasOptions || $setup.skeleton ? (openBlock(), createBlock($setup["OnyxFABButton"], mergeProps({
     key: 0,
     class: ["onyx-fab", `onyx-fab--${$setup.props.alignment}`]
@@ -2460,8 +2693,8 @@ function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["open", "label", "class", "alignment"]));
 }
-const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
-const _sfc_main$1o = /* @__PURE__ */ defineComponent({
+const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABItem",
   props: {
     density: { type: null, required: false },
@@ -2484,7 +2717,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     mergeProps({
@@ -2499,7 +2732,7 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABItem/OnyxFABItem.vue"]]);
+const OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABItem/OnyxFABItem.vue"]]);
 const GLOBAL_FAB_PROVIDER_INJECTION_KEY = Symbol();
 const createGlobalFABProvider = () => {
   const items = shallowRef([]);
@@ -2536,7 +2769,7 @@ const useGlobalFAB = () => {
   );
   return globalFABProvider;
 };
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "OnyxGlobalFAB",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -2550,7 +2783,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.globalFAB.items.value.length === 1 ? (openBlock(), createBlock(
     $setup["OnyxFAB"],
     normalizeProps(mergeProps({ key: 0 }, $setup.globalFAB.items.value[0].value)),
@@ -2585,14 +2818,14 @@ function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["label", "alignment"])) : createCommentVNode("v-if", true);
 }
-const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
-const _sfc_main$1m = {};
-const _hoisted_1$_ = {
+const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
+const _sfc_main$1n = {};
+const _hoisted_1$$ = {
   class: "onyx-component onyx-circle-spinner",
   viewBox: "0 0 50 50"
 };
-function _sfc_render$1m(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$_, [..._cache[0] || (_cache[0] = [
+function _sfc_render$1n(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$$, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "circle",
       {
@@ -2607,11 +2840,11 @@ function _sfc_render$1m(_ctx, _cache) {
     )
   ])]);
 }
-const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$1m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
-const _sfc_main$1l = {};
-const _hoisted_1$Z = { class: "onyx-component onyx-loading-dots" };
-function _sfc_render$1l(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$Z, [..._cache[0] || (_cache[0] = [
+const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
+const _sfc_main$1m = {};
+const _hoisted_1$_ = { class: "onyx-component onyx-loading-dots" };
+function _sfc_render$1m(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$_, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "span",
       { class: "onyx-loading-dots__center" },
@@ -2621,8 +2854,8 @@ function _sfc_render$1l(_ctx, _cache) {
     )
   ])]);
 }
-const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$1m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { type: String, required: false, default: "dots" }
@@ -2635,10 +2868,10 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.type === "circle" ? (openBlock(), createBlock($setup["OnyxCircleSpinner"], { key: 0 })) : $setup.props.type === "dots" ? (openBlock(), createBlock($setup["OnyxLoadingDots"], { key: 1 })) : createCommentVNode("v-if", true);
 }
-const OnyxLoadingIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue"]]);
+const OnyxLoadingIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue"]]);
 const useRipple = (container) => {
   const isPointerDown = ref(false);
   const ripples = reactive(/* @__PURE__ */ new Map());
@@ -2685,7 +2918,7 @@ const useRipple = (container) => {
   });
   return { isPointerDown, ripples, startRipple, hideRipples, hideRipple, events };
 };
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "OnyxRipple",
   setup(__props, { expose: __expose }) {
     const rippleTrigger = useTemplateRef("rippleTriggerRef");
@@ -2698,16 +2931,16 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Y = {
+const _hoisted_1$Z = {
   ref: "rippleTriggerRef",
   class: "onyx-component onyx-ripple",
   "aria-hidden": "true"
 };
-const _hoisted_2$J = ["data-rippleid"];
-function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$K = ["data-rippleid"];
+function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "span",
-    _hoisted_1$Y,
+    _hoisted_1$Z,
     [
       (openBlock(true), createElementBlock(
         Fragment,
@@ -2722,7 +2955,7 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             "data-rippleid": key,
             onAnimationend: _cache[0] || (_cache[0] = ($event) => $setup.hideRipple($event.target))
-          }, null, 44, _hoisted_2$J);
+          }, null, 44, _hoisted_2$K);
         }),
         128
         /* KEYED_FRAGMENT */
@@ -2732,8 +2965,8 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "OnyxButton",
   props: {
     density: { type: null, required: false },
@@ -2762,8 +2995,8 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$X = { class: "onyx-button__label onyx-truncation-ellipsis" };
-function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$Y = { class: "onyx-button__label onyx-truncation-ellipsis" };
+function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-button-skeleton", $setup.densityClass])
@@ -2800,7 +3033,7 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
       })) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_1$X,
+        _hoisted_1$Y,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -2815,8 +3048,8 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label"]));
 }
-const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoCard",
   props: {
     density: { type: null, required: false },
@@ -2840,16 +3073,16 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$W = { class: "onyx-info-card__content" };
-const _hoisted_2$I = {
+const _hoisted_1$X = { class: "onyx-info-card__content" };
+const _hoisted_2$J = {
   key: 2,
   class: "onyx-info-card__description onyx-text--small"
 };
-const _hoisted_3$u = {
+const _hoisted_3$v = {
   key: 3,
   class: "onyx-info-card__buttons onyx-density-compact"
 };
-function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -2861,7 +3094,7 @@ function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
         class: "onyx-info-card__icon",
         icon: $setup.props.icon
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_1$W, [
+      createElementVNode("div", _hoisted_1$X, [
         $setup.props.headline ? (openBlock(), createBlock($setup["OnyxHeadline"], {
           key: 0,
           is: "h3",
@@ -2885,10 +3118,10 @@ function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
           color: $setup.props.color === "neutral" ? "soft" : "medium",
           onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("close"))
         }, null, 8, ["icon", "label", "color"])) : createCommentVNode("v-if", true),
-        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$I, [
+        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$J, [
           renderSlot(_ctx.$slots, "default")
         ])) : createCommentVNode("v-if", true),
-        !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$u, [
+        !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$v, [
           renderSlot(_ctx.$slots, "buttons")
         ])) : createCommentVNode("v-if", true)
       ])
@@ -2897,8 +3130,8 @@ function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationMessage",
   props: {
     headline: { type: String, required: true },
@@ -2916,7 +3149,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxInfoCard"], {
     class: normalizeClass(["onyx-component onyx-notification-message", [
       "onyx-component",
@@ -2949,7 +3182,7 @@ function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["class", "headline", "icon", "style", "aria-label"]);
 }
-const OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationMessage/OnyxNotificationMessage.vue"]]);
+const OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationMessage/OnyxNotificationMessage.vue"]]);
 const NOTIFICATIONS_PROVIDER_INJECTION_KEY = Symbol();
 const createNotificationsProvider = () => {
   let nextId = 1;
@@ -2994,7 +3227,7 @@ const useNotification = () => {
   );
   return notificationsProvider;
 };
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotifications",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3004,15 +3237,15 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$V = {
+const _hoisted_1$W = {
   key: 0,
   class: "onyx-component onyx-notifications",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$V, [
+function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$W, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -3064,8 +3297,8 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "OnyxToastMessage",
   props: {
     density: { type: null, required: false },
@@ -3101,33 +3334,33 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$U = { class: "onyx-toast-message__wrapper" };
-const _hoisted_2$H = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
-const _hoisted_3$t = { class: "onyx-toast-message__headline onyx-text" };
-const _hoisted_4$i = { class: "onyx-truncation-ellipsis" };
-const _hoisted_5$d = ["aria-label"];
-const _hoisted_6$a = {
+const _hoisted_1$V = { class: "onyx-toast-message__wrapper" };
+const _hoisted_2$I = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
+const _hoisted_3$u = { class: "onyx-toast-message__headline onyx-text" };
+const _hoisted_4$j = { class: "onyx-truncation-ellipsis" };
+const _hoisted_5$e = ["aria-label"];
+const _hoisted_6$b = {
   key: 0,
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
 };
-function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($setup.props.clickable ? "button" : "div"), {
     class: normalizeClass(["onyx-component onyx-toast-message", [`onyx-toast-message--${$setup.props.color}`, $setup.densityClass]]),
     role: $setup.props.color === "danger" || $setup.props.color === "warning" ? "alert" : "status",
     "aria-label": $setup.props.clickable ? $setup.props.headline : void 0
   }, {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$U, [
+      createElementVNode("div", _hoisted_1$V, [
         $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
           key: 0,
           icon: $setup.icon
         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_2$H, [
-          createElementVNode("div", _hoisted_3$t, [
+        createElementVNode("div", _hoisted_2$I, [
+          createElementVNode("div", _hoisted_3$u, [
             createElementVNode(
               "span",
-              _hoisted_4$i,
+              _hoisted_4$j,
               toDisplayString($setup.props.headline),
               1
               /* TEXT */
@@ -3140,11 +3373,11 @@ function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("close"))
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconXSmall }, null, 8, ["icon"])
-            ], 8, _hoisted_5$d)) : createCommentVNode("v-if", true)
+            ], 8, _hoisted_5$e)) : createCommentVNode("v-if", true)
           ]),
           $setup.props.description ? (openBlock(), createElementBlock(
             "p",
-            _hoisted_6$a,
+            _hoisted_6$b,
             toDisplayString($setup.props.description),
             1
             /* TEXT */
@@ -3169,7 +3402,7 @@ function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "role", "aria-label"]);
 }
-const OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue"]]);
+const OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue"]]);
 const TOAST_PROVIDER_INJECTION_KEY = Symbol();
 const createToastProvider = () => {
   let nextId = 1;
@@ -3212,7 +3445,7 @@ const useToast = () => {
   );
   return toastProvider;
 };
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "OnyxToast",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3222,15 +3455,15 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$T = {
+const _hoisted_1$U = {
   key: 0,
   class: "onyx-component onyx-toast",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$T, [
+function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$U, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -3248,8 +3481,8 @@ function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
-const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "OnyxAppLayout",
   props: {
     navBarAlignment: { type: String, required: false, default: "top" }
@@ -3263,22 +3496,22 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$S = {
+const _hoisted_1$T = {
   key: 0,
   class: "onyx-app__nav"
 };
-const _hoisted_2$G = { class: "onyx-app__page" };
-function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$H = { class: "onyx-app__page" };
+function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
       class: normalizeClass(["onyx-component onyx-app", { "onyx-app--horizontal": $setup.props.navBarAlignment === "left" }])
     },
     [
-      $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$S, [
+      $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$T, [
         renderSlot(_ctx.$slots, "navBar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$G, [
+      createElementVNode("div", _hoisted_2$H, [
         renderSlot(_ctx.$slots, "default")
       ]),
       createVNode($setup["OnyxToast"]),
@@ -3289,8 +3522,8 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatar",
   props: {
     size: { type: null, required: false, default: "48px" },
@@ -3324,13 +3557,13 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$R = ["title", "aria-label"];
-const _hoisted_2$F = ["src", "alt"];
-const _hoisted_3$s = {
+const _hoisted_1$S = ["title", "aria-label"];
+const _hoisted_2$G = ["src", "alt"];
+const _hoisted_3$t = {
   key: 0,
   class: "onyx-avatar__initials"
 };
-function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass([
       "onyx-component",
@@ -3347,13 +3580,13 @@ function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
       src: $setup.props.src,
       alt: $setup.ariaLabel,
       onError: _cache[0] || (_cache[0] = ($event) => $setup.hasImageError = true)
-    }, null, 40, _hoisted_2$F)) : (openBlock(), createElementBlock(
+    }, null, 40, _hoisted_2$G)) : (openBlock(), createElementBlock(
       Fragment,
       { key: 1 },
       [
         $setup.initials ? (openBlock(), createElementBlock(
           "div",
-          _hoisted_3$s,
+          _hoisted_3$t,
           toDisplayString($setup.initials),
           1
           /* TEXT */
@@ -3366,10 +3599,10 @@ function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
       64
       /* STABLE_FRAGMENT */
     ))
-  ], 10, _hoisted_1$R);
+  ], 10, _hoisted_1$S);
 }
-const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatarStack",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3378,14 +3611,14 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Q = { class: "onyx-component onyx-avatar-stack" };
-function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$Q, [
+const _hoisted_1$R = { class: "onyx-component onyx-avatar-stack" };
+function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$R, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "OnyxBadge",
   props: {
     density: { type: null, required: false },
@@ -3402,7 +3635,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3433,8 +3666,8 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "OnyxBottomBar",
   props: {
     density: { type: null, required: false },
@@ -3449,10 +3682,10 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$P = { class: "onyx-bottom-bar__content onyx-grid-container" };
-const _hoisted_2$E = { class: "onyx-bottom-bar__content--left" };
-const _hoisted_3$r = { class: "onyx-bottom-bar__content--right" };
-function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$Q = { class: "onyx-bottom-bar__content onyx-grid-container" };
+const _hoisted_2$F = { class: "onyx-bottom-bar__content--left" };
+const _hoisted_3$s = { class: "onyx-bottom-bar__content--right" };
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3464,11 +3697,11 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$P, [
-        createElementVNode("div", _hoisted_2$E, [
+      createElementVNode("div", _hoisted_1$Q, [
+        createElementVNode("div", _hoisted_2$F, [
           renderSlot(_ctx.$slots, "left")
         ]),
-        createElementVNode("div", _hoisted_3$r, [
+        createElementVNode("div", _hoisted_3$s, [
           renderSlot(_ctx.$slots, "default")
         ])
       ])
@@ -3477,7 +3710,7 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
+const OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
 const useMoreList = (options) => {
   const visibleElements = ref();
   const hiddenElements = ref();
@@ -3572,7 +3805,7 @@ const useMoreListChild = (injectionKey) => {
 };
 const BREADCRUMB_MORE_LIST_INJECTION_KEY = Symbol();
 const BREADCRUMB_MORE_LIST_TARGET_INJECTION_KEY = Symbol();
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "OnyxExternalLinkIcon",
   props: {
     href: { type: String, required: false },
@@ -3593,7 +3826,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.isVisible ? (openBlock(), createBlock($setup["OnyxIcon"], {
     key: 0,
     class: "onyx-component onyx-external-link-icon",
@@ -3601,8 +3834,8 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
     size: "16px"
   }, null, 8, ["icon"])) : createCommentVNode("v-if", true);
 }
-const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "OnyxListItem",
   props: {
     density: { type: null, required: false },
@@ -3621,7 +3854,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     {
@@ -3643,8 +3876,8 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMenuItem",
   props: {
@@ -3723,17 +3956,17 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$O = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$D = {
+const _hoisted_1$P = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$E = {
   key: 0,
   class: "onyx-menu-item__chevron"
 };
-const _hoisted_3$q = {
+const _hoisted_3$r = {
   key: 0,
   role: "menu",
   class: "onyx-menu-item__children"
 };
-function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OnyxMenuItem = resolveComponent("OnyxMenuItem", true);
   return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({
     selected: $setup.isActive,
@@ -3754,7 +3987,7 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("span", null, [
               createElementVNode(
                 "span",
-                _hoisted_1$O,
+                _hoisted_1$P,
                 toDisplayString($setup.props.label),
                 1
                 /* TEXT */
@@ -3768,7 +4001,7 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ])
           ]),
-          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$D, [
+          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$E, [
             createVNode($setup["OnyxIcon"], {
               icon: $setup.iconChevronRightSmall,
               size: "24px"
@@ -3782,7 +4015,7 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       $setup.hasChildren ? withDirectives((openBlock(), createElementBlock(
         "ul",
-        _hoisted_3$q,
+        _hoisted_3$r,
         [
           createVNode(
             _component_OnyxMenuItem,
@@ -3819,8 +4052,8 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["selected", "active", "color", "disabled", "class"]);
 }
-const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxBreadcrumbItem",
   props: {
@@ -3846,7 +4079,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -3906,8 +4139,8 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "OnyxMoreList",
   props: {
     injectionKey: { type: [Symbol, Object], required: true },
@@ -3940,7 +4173,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     resolveDynamicComponent($setup.props.is),
     {
@@ -3980,8 +4213,8 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "OnyxBreadcrumb",
   props: {
     density: { type: null, required: false },
@@ -4007,13 +4240,13 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$N = ["aria-label", "aria-hidden"];
-const _hoisted_2$C = {
+const _hoisted_1$O = ["aria-label", "aria-hidden"];
+const _hoisted_2$D = {
   class: "onyx-breadcrumb__list onyx-grid-container",
   role: "menu"
 };
-const _hoisted_3$p = { ref: "moreListRef" };
-function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$q = { ref: "moreListRef" };
+function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("nav", {
     class: normalizeClass([
       "onyx-component",
@@ -4024,7 +4257,7 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.t("breadcrumb.label"),
     "aria-hidden": $setup.props.skeleton
   }, [
-    createElementVNode("ol", _hoisted_2$C, [
+    createElementVNode("ol", _hoisted_2$D, [
       createVNode($setup["OnyxBreadcrumbItem"], {
         class: "onyx-breadcrumb__home",
         href: $setup.props.home?.link ?? "/",
@@ -4092,7 +4325,7 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
             options: withCtx(() => [
               createElementVNode(
                 "div",
-                _hoisted_3$p,
+                _hoisted_3$q,
                 null,
                 512
                 /* NEED_PATCH */
@@ -4106,13 +4339,13 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
         /* FORWARDED */
       }, 8, ["injection-key"])
     ])
-  ], 10, _hoisted_1$N);
+  ], 10, _hoisted_1$O);
 }
-const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumb/OnyxBreadcrumb.vue"]]);
+const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumb/OnyxBreadcrumb.vue"]]);
 const BUTTON_TYPES = ["button", "submit", "reset"];
 const BUTTON_COLORS = ["primary", "neutral", "danger"];
 const BUTTON_MODES = ["default", "outline", "plain"];
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "OnyxCard",
   props: {
     density: { type: null, required: false },
@@ -4131,7 +4364,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($setup.linkProps ? $setup.OnyxRouterLink : $setup.props.clickable ? "button" : "div"), mergeProps($setup.linkProps, {
     class: ["onyx-component", "onyx-card", $setup.densityClass, "onyx-truncation-multiline", "onyx-text"]
   }), {
@@ -4142,7 +4375,235 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class"]);
 }
-const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
+const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
+const __default__ = {};
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "OnyxCalendar",
+  props: {
+    density: { type: null, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    min: { type: Date, required: false },
+    max: { type: Date, required: false },
+    weekStartDay: { type: String, required: false, default: "Monday" },
+    initialDate: { type: Date, required: false },
+    size: { type: String, required: false, default: "auto" },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
+    selection: { type: String, required: false, default: "single" }
+  },
+  emits: ["update:selectedDate"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const { densityClass } = useDensity(props);
+    const skeleton = useSkeletonContext(props);
+    const { locale } = injectI18n();
+    const calendarSize = computed(
+      () => props.size !== "auto" ? props.size : width.value < ONYX_BREAKPOINTS.xs ? "small" : "big"
+    );
+    const buttonRefs = ref({});
+    const setButtonRef = (el, dateKey) => {
+      if (el) {
+        buttonRefs.value[dateKey] = el;
+      } else {
+        delete buttonRefs.value[dateKey];
+      }
+    };
+    const { disabled, min, max, initialDate, weekStartDay } = toRefs(props);
+    const {
+      state: { currentYear, currentMonth, selectedDate, weeks, weekdays },
+      elements: { table: tableProps, cell: cellProps, button: buttonProps },
+      internals: { goToPreviousMonth, goToNextMonth, goToToday }
+    } = _unstableCreateCalendar({
+      disabled,
+      min,
+      max,
+      initialDate,
+      locale,
+      calendarSize,
+      buttonRefs,
+      weekStartDay
+    });
+    watch(selectedDate, (newDate) => {
+      if (newDate) {
+        emit("update:selectedDate", newDate);
+      }
+    });
+    const calendarRef = useTemplateRef("calendar");
+    const { width } = useResizeObserver(calendarRef);
+    const sizeClass = computed(() => `onyx-calendar--${calendarSize.value}`);
+    const __returned__ = { props, emit, densityClass, skeleton, locale, calendarSize, buttonRefs, setButtonRef, disabled, min, max, initialDate, weekStartDay, currentYear, currentMonth, selectedDate, weeks, weekdays, tableProps, cellProps, buttonProps, goToPreviousMonth, goToNextMonth, goToToday, calendarRef, width, sizeClass, get iconChevronLeftSmall() {
+      return iconChevronLeftSmall;
+    }, get iconChevronRightSmall() {
+      return iconChevronRightSmall;
+    }, OnyxHeadline, OnyxSkeleton, OnyxSystemButton };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$N = { class: "onyx-calendar__header" };
+const _hoisted_2$C = { class: "control-container time-control-container" };
+const _hoisted_3$p = { class: "control-container" };
+const _hoisted_4$i = { class: "onyx-calendar__body" };
+const _hoisted_5$d = ["abbr"];
+const _hoisted_6$a = { class: "cell-content__number" };
+const _hoisted_7$6 = { class: "cell-content__number-display" };
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.skeleton ? (openBlock(), createElementBlock(
+    "div",
+    {
+      key: 0,
+      class: normalizeClass(["onyx-component", "onyx-calendar-skeleton", $setup.densityClass])
+    },
+    [
+      createVNode($setup["OnyxSkeleton"], { class: "onyx-calendar-skeleton__header" }),
+      createVNode($setup["OnyxSkeleton"], { class: "onyx-calendar-skeleton__body" })
+    ],
+    2
+    /* CLASS */
+  )) : (openBlock(), createElementBlock(
+    "div",
+    {
+      key: 1,
+      ref: "calendar",
+      class: normalizeClass([
+        "onyx-component",
+        "onyx-calendar",
+        $setup.sizeClass,
+        $setup.densityClass,
+        { "onyx-calendar--disabled": $setup.disabled }
+      ])
+    },
+    [
+      createElementVNode("div", _hoisted_1$N, [
+        createElementVNode("div", _hoisted_2$C, [
+          $setup.calendarSize !== "small" ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+            key: 0,
+            label: "Today",
+            class: "control-container__today-btn",
+            disabled: $setup.disabled,
+            onClick: $setup.goToToday
+          }, null, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
+          createVNode($setup["OnyxSystemButton"], {
+            label: "previous Month",
+            icon: $setup.iconChevronLeftSmall,
+            disabled: $setup.disabled,
+            onClick: $setup.goToPreviousMonth
+          }, null, 8, ["icon", "disabled", "onClick"]),
+          createVNode($setup["OnyxHeadline"], {
+            is: "h2",
+            class: "control-container__date-display"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(
+                toDisplayString(new Date($setup.currentYear, $setup.currentMonth).toLocaleDateString($setup.locale, {
+                  month: "long",
+                  year: "numeric"
+                })),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          }),
+          createVNode($setup["OnyxSystemButton"], {
+            label: "next Month",
+            icon: $setup.iconChevronRightSmall,
+            disabled: $setup.disabled,
+            onClick: $setup.goToNextMonth
+          }, null, 8, ["icon", "disabled", "onClick"])
+        ]),
+        createElementVNode("div", _hoisted_3$p, [
+          renderSlot(_ctx.$slots, "actions")
+        ])
+      ]),
+      createElementVNode("div", _hoisted_4$i, [
+        createElementVNode(
+          "table",
+          normalizeProps(guardReactiveProps($setup.tableProps)),
+          [
+            createElementVNode("thead", null, [
+              createElementVNode("tr", null, [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList($setup.weekdays, (day, index) => {
+                    return openBlock(), createElementBlock("th", {
+                      key: index,
+                      scope: "col",
+                      abbr: day
+                    }, toDisplayString(day), 9, _hoisted_5$d);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ]),
+            createElementVNode("tbody", null, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList($setup.weeks, (week, weekIndex) => {
+                  return openBlock(), createElementBlock("tr", { key: weekIndex }, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(week, (day, dayIndex) => {
+                        return openBlock(), createElementBlock(
+                          "td",
+                          mergeProps({ key: dayIndex }, { ref_for: true }, $setup.cellProps(day)),
+                          [
+                            day.date ? (openBlock(), createElementBlock(
+                              "button",
+                              mergeProps({
+                                key: 0,
+                                ref_for: true
+                              }, $setup.buttonProps(day), {
+                                ref_for: true,
+                                ref: (el) => $setup.setButtonRef(el, day.date?.toISOString().slice(0, 10)),
+                                type: "button"
+                              }),
+                              [
+                                createElementVNode("span", _hoisted_6$a, [
+                                  createElementVNode(
+                                    "span",
+                                    _hoisted_7$6,
+                                    toDisplayString(day.date.getDate()),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ])
+                              ],
+                              16
+                              /* FULL_PROPS */
+                            )) : createCommentVNode("v-if", true)
+                          ],
+                          16
+                          /* FULL_PROPS */
+                        );
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])
+          ],
+          16
+          /* FULL_PROPS */
+        )
+      ])
+    ],
+    2
+    /* CLASS */
+  ));
+}
+const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendar/OnyxCalendar.vue"]]);
 const useRequired = (props, requiredMarker) => ({
   /**
    * Class that configures which type of required marker is used.
@@ -13464,6 +13925,7 @@ export {
   OnyxToast,
   OnyxToastMessage,
   OnyxTooltip,
+  OnyxCalendar as OnyxUnstableCalendar,
   OnyxUserMenu,
   OnyxVisuallyHidden,
   PROGRESS_ITEM_STATUS,