sit-onyx 1.3.0-dev-20251027202432 → 1.3.0-dev-20251028081106

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, 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, iconMoreVertical, 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, 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 { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconMoreVertical, 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, iconMenu, iconNotificationFlag, iconMinusSmall, 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$1G = /* @__PURE__ */ defineComponent({
+const _sfc_main$1H = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordion",
   props: {
     density: { type: null, required: false },
@@ -119,7 +119,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -137,7 +137,7 @@ function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$1G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordion/OnyxAccordion.vue"]]);
+const OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["render", _sfc_render$1H], ["__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$1F = /* @__PURE__ */ defineComponent({
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "OnyxIcon",
   props: {
     size: { type: null, required: false },
@@ -166,8 +166,8 @@ const _sfc_main$1F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1b = ["innerHTML"];
-function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1c = ["innerHTML"];
+function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass({
       "onyx-component": true,
@@ -178,9 +178,9 @@ function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     "aria-hidden": "true",
     innerHTML: $setup.props.icon
-  }, null, 10, _hoisted_1$1b);
+  }, null, 10, _hoisted_1$1c);
 }
-const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$1F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIcon/OnyxIcon.vue"]]);
+const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$1G], ["__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$1E = /* @__PURE__ */ defineComponent({
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "OnyxSkeleton",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -206,15 +206,15 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1a = {
+const _hoisted_1$1b = {
   "aria-hidden": "true",
   class: "onyx-component onyx-skeleton"
 };
-function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("figure", _hoisted_1$1a);
+function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("figure", _hoisted_1$1b);
 }
-const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$1F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordionItem",
   props: {
     density: { type: null, required: false },
@@ -251,11 +251,11 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$19 = ["open"];
-const _hoisted_2$Q = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
-const _hoisted_3$z = { class: "onyx-accordion-item__header-content" };
-const _hoisted_4$n = ["id", "aria-labelledby"];
-function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1a = ["open"];
+const _hoisted_2$R = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
+const _hoisted_3$A = { class: "onyx-accordion-item__header-content" };
+const _hoisted_4$o = ["id", "aria-labelledby"];
+function _sfc_render$1E(_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$1D(_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$z, [
+      createElementVNode("div", _hoisted_3$A, [
         renderSlot(_ctx.$slots, "header")
       ]),
       createVNode($setup["OnyxIcon"], {
         icon: $setup.iconChevronDownSmall,
         class: "onyx-accordion-item__header-icon"
       }, null, 8, ["icon"])
-    ], 8, _hoisted_2$Q),
+    ], 8, _hoisted_2$R),
     createElementVNode("div", {
       id: $setup.panelId,
       class: "onyx-accordion-item__panel",
@@ -306,10 +306,10 @@ function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-labelledby": $setup.headerId
     }, [
       renderSlot(_ctx.$slots, "default")
-    ], 8, _hoisted_4$n)
-  ], 10, _hoisted_1$19));
+    ], 8, _hoisted_4$o)
+  ], 10, _hoisted_1$1a));
 }
-const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordionItem/OnyxAccordionItem.vue"]]);
+const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1E], ["__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" },
@@ -1323,7 +1323,34 @@ const MathUtils = {
   /**
    * Ensures that a given `number` is or is between a given `min` and `max`.
    */
-  clamp: (number, min, max) => Math.max(Math.min(number, max), min)
+  clamp: (number, min, max) => Math.max(Math.min(number, max), min),
+  /**
+   * Returns the count of decimal places in a number.
+   * @param number - The number to check.
+   * @returns The count of decimal places.
+   *
+   * decimals(1.23); // 2
+   * decimals(10);   // 0
+   */
+  decimalsCount: (number) => String(number).split(".")[1]?.length ?? 0,
+  /**
+   *  Converts a value within a range to a percentage (0-100).
+   *
+   * @param value - The value to convert.
+   * @param min - The minimum allowed value.
+   * @param max - The maximum allowed value.
+   * @returns The percentage representation of the value.
+   */
+  valueToPercent: (value, min, max) => (value - min) * 100 / (max - min),
+  /**
+   * Converts a percentage (0-100) to a value within a range.
+   *
+   * @param percent - The percentage to convert.
+   * @param min - The minimum allowed value.
+   * @param max - The maximum allowed value.
+   * @returns The value representation of the percentage.
+   */
+  percentToValue: (percent, min, max) => (max - min) * percent + min
 };
 const createNavigationMenu = createBuilder(({ navigationName }) => {
   const navId = useId();
@@ -1362,6 +1389,594 @@ const createNavigationMenu = createBuilder(({ navigationName }) => {
     }
   };
 });
+const areArraysEqual = (arrayA, arrayB, comparer = (a, b) => a === b) => arrayA.length === arrayB.length && arrayA.every((value, index) => comparer(value, arrayB[index]));
+const isFocusVisible = (element) => {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+};
+const isTouchEvent = (event) => "touches" in event || "changedTouches" in event || "targetTouches" in event;
+const DRAG_MOVE_THRESHOLD = 2;
+const KEY = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Left: "ArrowLeft",
+  Right: "ArrowRight",
+  PageUp: "PageUp",
+  PageDown: "PageDown",
+  Home: "Home",
+  End: "End"
+};
+const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+  KEY.Up,
+  KEY.Down,
+  KEY.Left,
+  KEY.Right,
+  KEY.PageUp,
+  KEY.PageDown,
+  KEY.Home,
+  KEY.End
+]);
+const INCREMENT_KEYS = /* @__PURE__ */ new Set([KEY.Right, KEY.Up, KEY.PageUp]);
+const DECREMENT_KEYS = /* @__PURE__ */ new Set([KEY.Left, KEY.Down, KEY.PageDown]);
+const TRACK_CALCULATION_STRATEGIES = {
+  horizontal: (rect, coords) => MathUtils.clamp((coords.x - rect.left) / rect.width, 0, 1),
+  vertical: (rect, coords) => MathUtils.clamp((rect.bottom - coords.y) / rect.height, 0, 1)
+};
+const readThumbIndex = (event) => Number(event.currentTarget?.dataset.index ?? -1);
+const roundToStep = (value, step, min) => Number((Math.round((value - min) / step) * step + min).toFixed(MathUtils.decimalsCount(step)));
+const normalizeValues = (values, min, max, step) => {
+  if (!values.length) return [min];
+  return values.map((value) => {
+    const clamped = MathUtils.clamp(value, min, max);
+    return roundToStep(clamped, step, min);
+  }).sort((a, b) => a - b);
+};
+const findClosestIndex = (values, currentValue) => {
+  const result = values.reduce((acc, value, index) => {
+    const distance = Math.abs(currentValue - value);
+    if (!acc || distance <= acc.closestDistance) {
+      return {
+        closestIndex: index,
+        closestDistance: distance
+      };
+    }
+    return acc;
+  }, null);
+  return result.closestIndex;
+};
+const adjustValueByIndex = ({
+  values,
+  newValue,
+  index
+}) => values.map((value, i) => i === index ? newValue : value).sort((a, b) => a - b);
+const asc = (a, b) => a - b;
+const valueToArray = (value) => Array.isArray(value) ? value : [value];
+const _unstableCreateSlider = createBuilder(
+  (options) => {
+    const sliderRef = createElRef();
+    const min = computed(() => unref(options.min) ?? 0);
+    const max = computed(() => unref(options.max) ?? 100);
+    const step = computed(() => unref(options.step) ?? 1);
+    const values = computed(() => {
+      const rawValues = unref(options.value);
+      if (Array.isArray(rawValues)) {
+        if (!rawValues?.length) {
+          return [min.value];
+        }
+        return normalizeValues(rawValues, min.value, max.value, step.value);
+      } else {
+        if (typeof rawValues !== "number") {
+          return [min.value];
+        }
+        return normalizeValues([rawValues], min.value, max.value, step.value);
+      }
+    });
+    const shiftStep = computed(() => {
+      const shiftStep2 = unref(options.shiftStep);
+      if (typeof shiftStep2 !== "undefined") {
+        return shiftStep2;
+      }
+      const stepMultiple = Math.max(1, Math.round((max.value - min.value) * 0.1 / step.value));
+      return stepMultiple * step.value;
+    });
+    const isDisabled = computed(() => unref(options.disabled) ?? false);
+    const marks = computed(() => unref(options.marks) ?? false);
+    const label = computed(() => unref(options.label));
+    const orientation = computed(() => unref(options.orientation) ?? "horizontal");
+    const isDiscrete = computed(() => unref(options.discrete) ?? false);
+    let touchId = null;
+    let movesSinceStart = 0;
+    let lastChangedValue = null;
+    let previousActiveIndex = null;
+    const isDragging = ref(false);
+    const activeThumbIndex = ref(-1);
+    const focusedThumbIndex = ref(-1);
+    const isRange = computed(() => {
+      const unrefValues = unref(options.value);
+      return Array.isArray(unrefValues) && unrefValues.length > 1;
+    });
+    const marksList = computed(() => {
+      if (marks.value === false) return [];
+      if (marks.value && Array.isArray(marks.value)) {
+        return marks.value.map((mark) => typeof mark === "number" ? { value: mark } : mark).filter((mark) => mark.value >= min.value && mark.value <= max.value).sort((a, b) => asc(a.value, b.value));
+      }
+      if (step.value && step.value > 0) {
+        return [...Array(Math.floor((max.value - min.value) / step.value + 1))].map((_, index) => ({
+          value: min.value + step.value * index
+        }));
+      }
+      return [];
+    });
+    const axis = computed(
+      () => orientation.value === "vertical" ? { position: "bottom", size: "height", cross: "width" } : { position: "left", size: "width", cross: "height" }
+    );
+    const marksValues = computed(() => marksList.value.map((mark) => mark.value));
+    const emitChange = (next) => {
+      if (!areArraysEqual(values.value, next)) {
+        const nextValue = isRange.value ? next : next[0];
+        if (typeof nextValue !== "undefined") {
+          options.onChange?.(nextValue);
+        }
+      }
+      lastChangedValue = next;
+    };
+    const emitCommit = (fallback2) => {
+      const valueWithFallback = lastChangedValue ?? fallback2;
+      const nextValue = isRange.value ? valueWithFallback : valueWithFallback[0];
+      if (typeof nextValue !== "undefined") {
+        options.onCommit?.(nextValue);
+      }
+    };
+    const ensureFocusOnThumb = (options2) => {
+      const { index, shouldSetActive = false } = options2;
+      const slider = sliderRef.value;
+      if (!slider) return;
+      if (slider.contains(document.activeElement) && Number(document.activeElement?.getAttribute("data-index")) !== index) {
+        slider.querySelector(`[type="range"][data-index="${index}"]`)?.focus();
+      }
+      if (shouldSetActive) {
+        activeThumbIndex.value = index;
+      }
+    };
+    const eventToCoords = (event, touchId2) => {
+      if (touchId2 !== void 0 && isTouchEvent(event)) {
+        for (let i = 0; i < event.changedTouches.length; i += 1) {
+          const touch = event.changedTouches[i];
+          if (touch && touch.identifier === touchId2) {
+            return {
+              x: touch.clientX,
+              y: touch.clientY
+            };
+          }
+        }
+        return false;
+      }
+      const mouseEvent = event;
+      return {
+        x: mouseEvent.clientX,
+        y: mouseEvent.clientY
+      };
+    };
+    const getNextFromCoords = (opts) => {
+      const { coords, isMoving = false } = opts;
+      const slider = sliderRef.value;
+      if (!slider) return null;
+      const rect = slider.getBoundingClientRect();
+      const mainSize = orientation.value === "vertical" ? rect.height : rect.width;
+      if (mainSize <= 0) return null;
+      const percent = TRACK_CALCULATION_STRATEGIES[orientation.value](rect, coords);
+      const raw = MathUtils.percentToValue(percent, min.value, max.value);
+      const snapped = !isDiscrete.value ? roundToStep(raw, step.value, min.value) : marksValues.value[findClosestIndex(marksValues.value, raw)];
+      if (typeof snapped !== "number") return null;
+      const candidate = MathUtils.clamp(snapped, min.value, max.value);
+      if (!isRange.value) {
+        return { newValue: candidate, activeIndex: 0 };
+      }
+      const closestIndex = findClosestIndex(values.value, candidate);
+      const index = isMoving && previousActiveIndex != null ? previousActiveIndex : closestIndex;
+      const adjustedValues = adjustValueByIndex({
+        values: values.value,
+        newValue: candidate,
+        index
+      });
+      const adjustedIndex = findClosestIndex(adjustedValues, candidate);
+      previousActiveIndex = adjustedIndex;
+      return { newValue: adjustedValues, activeIndex: adjustedIndex };
+    };
+    const commitValueFromEvent = (event, input2) => {
+      const index = readThumbIndex(event);
+      const current = values.value[index];
+      if (typeof current !== "number") {
+        return;
+      }
+      const useMarks = isDiscrete.value && marksList.value.length > 0;
+      const snapByMarks = (candidate) => {
+        const list = marksList.value;
+        const first = list[0];
+        const last = list.at(-1);
+        if (!first || !last) {
+          return current;
+        }
+        if (candidate <= first.value) {
+          return first.value;
+        }
+        if (candidate >= last.value) {
+          return last.value;
+        }
+        const pos = marksValues.value.indexOf(current);
+        const neighbor = candidate < current ? list[pos - 1] : list[pos + 1];
+        return neighbor?.value ?? current;
+      };
+      const scalar = MathUtils.clamp(useMarks ? snapByMarks(input2) : input2, min.value, max.value);
+      const nextValues = isRange.value ? adjustValueByIndex({ values: values.value, newValue: scalar, index }) : [scalar];
+      if (isRange.value) {
+        const activeIndex = nextValues.indexOf(scalar);
+        ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
+      }
+      focusedThumbIndex.value = index;
+      if (!areArraysEqual(values.value, nextValues)) {
+        emitChange(nextValues);
+      }
+      emitCommit(nextValues);
+    };
+    const handlePointerEnd = (event) => {
+      const coords = eventToCoords(event, touchId);
+      isDragging.value = false;
+      if (!coords) {
+        return;
+      }
+      const next = getNextFromCoords({ coords, isMoving: true });
+      if (!next) {
+        return;
+      }
+      const { newValue } = next;
+      activeThumbIndex.value = -1;
+      emitCommit(valueToArray(newValue));
+      movesSinceStart = 0;
+      touchId = null;
+      stopPointerListening();
+    };
+    const handlePointerMove = (event) => {
+      const coords = eventToCoords(event, touchId);
+      if (!coords) return;
+      movesSinceStart += 1;
+      if (event.type === "mousemove" && event.buttons === 0) {
+        handlePointerEnd(event);
+        return;
+      }
+      const nextState = getNextFromCoords({ coords, isMoving: true });
+      if (!nextState) {
+        handlePointerEnd(event);
+        return;
+      }
+      const { newValue, activeIndex } = nextState;
+      if (!isDragging.value && movesSinceStart > DRAG_MOVE_THRESHOLD) {
+        isDragging.value = true;
+      }
+      ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
+      emitChange(valueToArray(newValue));
+      isDragging.value = true;
+    };
+    const handlePointerStart = (event) => {
+      if (isDisabled.value) {
+        return;
+      }
+      const touch = event.changedTouches[0];
+      if (touch !== null && touch !== void 0) {
+        touchId = touch.identifier;
+      }
+      const coords = eventToCoords(event, touchId);
+      if (coords) {
+        const nextState = getNextFromCoords({ coords, isMoving: false });
+        if (nextState) {
+          const { newValue, activeIndex } = nextState;
+          ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
+          emitChange(valueToArray(newValue));
+        }
+      }
+      movesSinceStart = 0;
+      document.addEventListener("touchmove", handlePointerMove, {
+        passive: true
+      });
+      document.addEventListener("touchend", handlePointerEnd);
+    };
+    const stopPointerListening = () => {
+      document.removeEventListener("mousemove", handlePointerMove);
+      document.removeEventListener("mouseup", handlePointerEnd);
+      document.removeEventListener("touchmove", handlePointerMove);
+      document.removeEventListener("touchend", handlePointerEnd);
+    };
+    const handleRootMousedown = (event) => {
+      if (isDisabled.value) {
+        return;
+      }
+      if (event.button !== 0) {
+        return;
+      }
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      const coords = eventToCoords(event, touchId);
+      if (coords) {
+        const nextState = getNextFromCoords({ coords });
+        if (nextState) {
+          const { newValue, activeIndex } = nextState;
+          ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
+          emitChange(valueToArray(newValue));
+        }
+      }
+      movesSinceStart = 0;
+      document.addEventListener("mousemove", handlePointerMove, {
+        passive: true
+      });
+      document.addEventListener("mouseup", handlePointerEnd);
+    };
+    const handleHiddenInputChange = (event) => {
+      if (isDisabled.value) {
+        return;
+      }
+      const value = event.target.valueAsNumber;
+      commitValueFromEvent(event, value);
+    };
+    const handleHiddenInputFocus = (event) => {
+      const index = readThumbIndex(event);
+      if (isFocusVisible(event.target)) {
+        focusedThumbIndex.value = index;
+        activeThumbIndex.value = index;
+      }
+    };
+    const handleHiddenInputBlur = (event) => {
+      if (!isFocusVisible(event.target)) {
+        focusedThumbIndex.value = -1;
+        activeThumbIndex.value = -1;
+      }
+    };
+    const handleHiddenInputKeydown = (event) => {
+      if (!NAVIGATION_KEYS.has(event.key)) return;
+      event.preventDefault();
+      const index = readThumbIndex(event);
+      const value = values.value[index];
+      if (typeof value !== "number") {
+        return;
+      }
+      if (!isDiscrete.value) {
+        const stepSize = event.shiftKey ? shiftStep.value : step.value;
+        if (event.key === "Home") return commitValueFromEvent(event, min.value);
+        if (event.key === "End") return commitValueFromEvent(event, max.value);
+        if (INCREMENT_KEYS.has(event.key)) {
+          const next = MathUtils.clamp(value + stepSize, min.value, max.value);
+          if (next !== value) commitValueFromEvent(event, next);
+          return;
+        }
+        if (DECREMENT_KEYS.has(event.key)) {
+          const next = MathUtils.clamp(value - stepSize, min.value, max.value);
+          if (next !== value) commitValueFromEvent(event, next);
+          return;
+        }
+        return;
+      } else {
+        const values2 = marksValues.value;
+        const lastIndex = values2.length - 1;
+        const currentIndex = values2.indexOf(value);
+        const first = values2[0];
+        const last = values2[lastIndex];
+        if (event.key === "Home" && typeof first === "number")
+          return commitValueFromEvent(event, first);
+        if (event.key === "End" && typeof last === "number")
+          return commitValueFromEvent(event, last);
+        if (INCREMENT_KEYS.has(event.key)) {
+          const nextIdx = currentIndex < 0 ? 0 : Math.min(lastIndex, currentIndex + 1);
+          const next = values2[nextIdx];
+          if (next !== value && typeof next === "number") commitValueFromEvent(event, next);
+          return;
+        }
+        if (DECREMENT_KEYS.has(event.key)) {
+          const nextIdx = currentIndex < 0 ? 0 : Math.max(0, currentIndex - 1);
+          const next = values2[nextIdx];
+          if (next !== value && typeof next === "number") commitValueFromEvent(event, next);
+          return;
+        }
+      }
+    };
+    const trackOffset = computed(
+      () => MathUtils.valueToPercent(
+        isRange.value && values.value[0] ? values.value[0] : min.value,
+        min.value,
+        max.value
+      )
+    );
+    const trackLength = computed(
+      () => MathUtils.valueToPercent(values.value.at(-1) ?? 0, min.value, max.value) - trackOffset.value
+    );
+    const trackStyle = computed(() => ({
+      [axis.value.position]: `${trackOffset.value}%`,
+      [axis.value.size]: `${trackLength.value}%`
+    }));
+    const isMarkActive = computed(() => (markValue) => {
+      if (isRange.value) {
+        const minValue = Math.min(...values.value);
+        const maxValue = Math.max(...values.value);
+        return markValue >= minValue && markValue <= maxValue;
+      }
+      const currentValue = values.value[0];
+      return markValue <= currentValue;
+    });
+    onBeforeUnmount(stopPointerListening);
+    watch(
+      () => isDisabled.value,
+      () => {
+        if (isDisabled.value) {
+          isDragging.value = false;
+          activeThumbIndex.value = -1;
+          focusedThumbIndex.value = -1;
+          stopPointerListening();
+        }
+      }
+    );
+    return {
+      elements: {
+        /**
+         * Root slider container element
+         */
+        root: computed(() => ({
+          ref: sliderRef,
+          style: { touchAction: orientation.value === "vertical" ? "pan-x" : "pan-y" },
+          onMousedown: handleRootMousedown,
+          onTouchstart: handlePointerStart
+        })),
+        /**
+         * Individual thumb elements for each value (span)
+         */
+        thumbContainer: computed(() => (data) => ({
+          "data-index": data.index,
+          style: {
+            [axis.value.position]: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
+          }
+        })),
+        /**
+         * Visually hidden input inside each thumb for accessibility
+         */
+        thumbInput: computed(() => (data) => ({
+          min: min.value,
+          max: max.value,
+          value: data.value,
+          role: "slider",
+          type: "range",
+          "aria-label": label.value,
+          "aria-valuemin": min.value,
+          "aria-valuemax": max.value,
+          "aria-valuenow": data.value,
+          "aria-orientation": orientation.value,
+          "data-index": data.index,
+          tabIndex: isDisabled.value ? -1 : 0,
+          step: isDiscrete.value && marks.value ? "any" : step.value ?? void 0,
+          disabled: typeof isDisabled.value === "boolean" ? isDisabled.value : false,
+          onChange: handleHiddenInputChange,
+          onFocus: handleHiddenInputFocus,
+          onBlur: handleHiddenInputBlur,
+          onKeydown: handleHiddenInputKeydown
+        })),
+        /**
+         * Mark elements
+         */
+        mark: computed(() => (data) => ({
+          "data-value": data.value,
+          "aria-hidden": true,
+          style: {
+            [axis.value.position]: `${MathUtils.clamp(MathUtils.valueToPercent(data.value, min.value, max.value), 0, 100)}%`
+          }
+        })),
+        /**
+         * Label for each mark
+         */
+        markLabel: computed(() => (data) => ({
+          "data-value": data.value,
+          style: {
+            [axis.value.position]: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
+          },
+          "aria-hidden": true
+        })),
+        /**
+         * Track element representing the selected range
+         */
+        track: computed(() => ({
+          role: "presentation",
+          "aria-hidden": true,
+          style: trackStyle.value
+        })),
+        /**
+         * Rail element representing the full slider range
+         */
+        rail: computed(() => ({
+          role: "presentation",
+          "aria-hidden": true
+        }))
+      },
+      state: {
+        /**
+         * True if the slider is currently being dragged.
+         */
+        isDragging,
+        /**
+         * Index of the currently active thumb.
+         * Thumb could be active even if not dragging (e.g. click on the rail to move the thumb there).
+         * `-1` if no thumb is active.
+         */
+        activeThumbIndex,
+        /**
+         * Index of the thumb that is currently focused.
+         * `-1` if no thumb is focused.
+         */
+        focusedThumbIndex,
+        /**
+         * `true` if the slider is a range slider (with two or more thumbs).
+         */
+        isRange,
+        /**
+         * Offset of the track as a percentage (0-100).
+         */
+        trackOffset,
+        /**
+         * Length of the track as a percentage (0-100).
+         */
+        trackLength,
+        /**
+         * List of marks to display on the slider.
+         * - If marks option is `true`, marks are generated based on the step value.
+         * - If marks option is an array of numbers or objects, it is used as provided (filtered to be within range).
+         * - If marks option is `false`, no marks are shown.
+         */
+        marksList
+      },
+      internals: {
+        /**
+         * Converts a value from the slider's range to a percentage (0-100).
+         * @param value - value to convert
+         * @returns percentage representation of the value
+         */
+        valueToPercent: computed(
+          () => (value) => MathUtils.valueToPercent(value, min.value, max.value)
+        ),
+        /**
+         * Checks if a given mark value is active (i.e., within the selected range).
+         * Use case: when rendering marks, to determine if a mark is covered by the selected range.
+         *
+         * @param markValue - value of the mark to check
+         * @returns `true` if the mark is active, `false` otherwise
+         */
+        isMarkActive,
+        /**
+         * Clamps a value to the slider's range.
+         * @param value - value to clamp
+         * @returns clamped value
+         */
+        clampValue: computed(() => (value) => MathUtils.clamp(value, min.value, max.value)),
+        /**
+         * Main axis properties based on orientation.
+         */
+        axis,
+        /**
+         * Rounds a value to the nearest valid step.
+         * @param value - value to round
+         * @returns rounded value
+         */
+        roundToStep: computed(
+          () => (value) => !isDiscrete.value ? roundToStep(value, step.value, min.value) : marksValues.value[findClosestIndex(marksValues.value, value)]
+        ),
+        /**
+         * Normalizes an array of values to ensure they are within min/max bounds,
+         */
+        normalizeValues: computed(
+          () => (values2) => normalizeValues(values2, min.value, max.value, step.value)
+        )
+      }
+    };
+  }
+);
 const createTabs = createBuilder((options) => {
   const idMap = /* @__PURE__ */ new Map();
   const getId = (value) => {
@@ -1542,7 +2157,7 @@ const createTooltip = createBuilder(({ debounce: debounce2, isVisible }) => {
     }
   };
 });
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicDialog",
   props: {
     density: { type: null, required: false },
@@ -1598,12 +2213,12 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$18 = ["aria-modal", "aria-label", "role"];
-const _hoisted_2$P = {
+const _hoisted_1$19 = ["aria-modal", "aria-label", "role"];
+const _hoisted_2$Q = {
   ref: "contentRef",
   class: "onyx-basic-dialog__content"
 };
-function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.open ? (openBlock(), createElementBlock("dialog", {
     key: 0,
     ref: "dialogRef",
@@ -1622,16 +2237,16 @@ function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode(
       "div",
-      _hoisted_2$P,
+      _hoisted_2$Q,
       [
         renderSlot(_ctx.$slots, "default")
       ],
       512
       /* NEED_PATCH */
     )
-  ], 42, _hoisted_1$18)) : createCommentVNode("v-if", true);
+  ], 42, _hoisted_1$19)) : createCommentVNode("v-if", true);
 }
-const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicDialog/OnyxBasicDialog.vue"]]);
+const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__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());
@@ -1713,7 +2328,7 @@ const normalizeHref = (href) => {
   return value.replace(/\/+$/, "");
 };
 const ROUTER_INJECTION_KEY = Symbol();
-const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "OnyxVisuallyHidden",
   props: {
     is: { type: String, required: false, default: "span" }
@@ -1726,7 +2341,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1C(_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")
@@ -1735,8 +2350,8 @@ function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   });
 }
-const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
-const _sfc_main$1A = /* @__PURE__ */ defineComponent({
+const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "OnyxRouterLink",
   props: {
     href: { type: String, required: true },
@@ -1752,8 +2367,8 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$17 = ["href", "target", "rel"];
-function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$18 = ["href", "target", "rel"];
+function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: normalizeClass([
       "onyx-component",
@@ -1777,10 +2392,10 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1
       /* STABLE */
     })) : createCommentVNode("v-if", true)
-  ], 10, _hoisted_1$17);
+  ], 10, _hoisted_1$18);
 }
-const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
+const _sfc_main$1A = /* @__PURE__ */ defineComponent({
   __name: "OnyxHeadline",
   props: {
     is: { type: null, required: true },
@@ -1805,7 +2420,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1A(_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}`])
@@ -1845,7 +2460,7 @@ function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["id", "class"]));
 }
-const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
+const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
 const useAutofocus = (inputRef, props) => {
   if (!props.autofocus) {
     return;
@@ -1896,7 +2511,7 @@ const useFormContext = (props) => {
     DEFAULT_FORM_INJECTION_CONTEXT
   )(toRef(props));
 };
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "ButtonOrLinkLayout",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -1919,8 +2534,8 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$16 = ["disabled", "type", "autofocus"];
-function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$17 = ["disabled", "type", "autofocus"];
+function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.linkProps ? (openBlock(), createBlock(
     $setup["OnyxRouterLink"],
     normalizeProps(mergeProps({ key: 0 }, $setup.linkProps)),
@@ -1941,10 +2556,10 @@ function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: $setup.props.autofocus
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1$16));
+  ], 8, _hoisted_1$17));
 }
-const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
-const _sfc_main$1x = /* @__PURE__ */ defineComponent({
+const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
+const _sfc_main$1y = /* @__PURE__ */ defineComponent({
   __name: "OnyxSystemButton",
   props: {
     disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
@@ -1965,7 +2580,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1y(_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"])
@@ -1997,8 +2612,8 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label", "title"]));
 }
-const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
+const _sfc_main$1x = /* @__PURE__ */ defineComponent({
   __name: "OnyxAlertModal",
   props: {
     density: { type: null, required: false },
@@ -2023,11 +2638,11 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$15 = { class: "onyx-alert-modal__content" };
-const _hoisted_2$O = { class: "onyx-alert-modal__headline" };
-const _hoisted_3$y = ["id"];
-const _hoisted_4$m = { class: "onyx-alert-modal__actions" };
-function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$16 = { class: "onyx-alert-modal__content" };
+const _hoisted_2$P = { class: "onyx-alert-modal__headline" };
+const _hoisted_3$z = ["id"];
+const _hoisted_4$n = { class: "onyx-alert-modal__actions" };
+function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps({
     class: ["onyx-alert-modal", $setup.densityClass]
   }, $setup.dialogProps, {
@@ -2037,7 +2652,7 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$15, [
+      createElementVNode("div", _hoisted_1$16, [
         $setup.props.icon ? (openBlock(), createBlock(
           $setup["OnyxIcon"],
           mergeProps({
@@ -2049,7 +2664,7 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
           /* FULL_PROPS */
         )) : createCommentVNode("v-if", true),
         createElementVNode("div", null, [
-          createElementVNode("div", _hoisted_2$O, [
+          createElementVNode("div", _hoisted_2$P, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -2077,10 +2692,10 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
             class: "onyx-alert-modal__body onyx-truncation"
           }, [
             renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_3$y)
+          ], 8, _hoisted_3$z)
         ])
       ]),
-      createElementVNode("div", _hoisted_4$m, [
+      createElementVNode("div", _hoisted_4$n, [
         renderSlot(_ctx.$slots, "actions")
       ])
     ]),
@@ -2088,7 +2703,7 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class", "aria-describedby"]);
 }
-const OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
+const OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
 const useRootAttrs = () => {
   const attrs = useAttrs();
   const rootAttrs = computed(
@@ -2170,7 +2785,7 @@ const mergeVueProps = (...args) => args.reduce((prev, curr) => {
   merged.ref = mergedRef;
   return merged;
 }, {});
-const _sfc_main$1v = /* @__PURE__ */ defineComponent({
+const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABButton",
   props: {
     density: { type: null, required: false },
@@ -2190,11 +2805,11 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$14 = {
+const _hoisted_1$15 = {
   key: 1,
   class: "onyx-fab-button__label"
 };
-function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-fab-button-skeleton", $setup.densityClass])
@@ -2212,7 +2827,7 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       !$setup.props.hideLabel ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_1$14,
+        _hoisted_1$15,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -2222,7 +2837,7 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "title", "aria-label", "link"]));
 }
-const OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABButton/OnyxFABButton.vue"]]);
+const OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__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);
@@ -2534,7 +3149,7 @@ function useSticky(options) {
   });
   return { stickyStyles, scrolledOut, isSticky, checkVisibilityOnScroll };
 }
-const _sfc_main$1u = /* @__PURE__ */ defineComponent({
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicPopover",
   props: {
     label: { type: String, required: true },
@@ -2692,8 +3307,8 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$13 = ["role", "aria-label"];
-function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$14 = ["role", "aria-label"];
+function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -2712,14 +3327,14 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle(!$setup.isSticky ? $setup.popoverStyles : $setup.stickyStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
-      ], 14, _hoisted_1$13)
+      ], 14, _hoisted_1$14)
     ],
     4
     /* STYLE */
   );
 }
-const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
-const _sfc_main$1t = /* @__PURE__ */ defineComponent({
+const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   __name: "OnyxFlyoutMenu",
   props: {
     alignment: { type: String, required: false, default: "auto" },
@@ -2761,9 +3376,9 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$12 = { class: "onyx-flyout-menu__list-header" };
-const _hoisted_2$N = { class: "onyx-flyout-menu__list-footer" };
-function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$13 = { class: "onyx-flyout-menu__list-header" };
+const _hoisted_2$O = { class: "onyx-flyout-menu__list-footer" };
+function _sfc_render$1u(_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,
@@ -2772,7 +3387,7 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $props.disabled
   }), createSlots({
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$12, [
+      createElementVNode("div", _hoisted_1$13, [
         renderSlot(_ctx.$slots, "header")
       ]),
       $setup.slots.options ? (openBlock(), createElementBlock(
@@ -2784,7 +3399,7 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
         16
         /* FULL_PROPS */
       )) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$N, [
+      createElementVNode("div", _hoisted_2$O, [
         renderSlot(_ctx.$slots, "footer")
       ])
     ]),
@@ -2805,8 +3420,8 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "label", "alignment", "disabled"]);
 }
-const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
-const _sfc_main$1s = /* @__PURE__ */ defineComponent({
+const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
+const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   __name: "OnyxFAB",
   props: {
     density: { type: null, required: false },
@@ -2845,7 +3460,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1t(_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}`]
@@ -2875,8 +3490,8 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["open", "label", "class", "alignment"]));
 }
-const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABItem",
   props: {
     density: { type: null, required: false },
@@ -2899,7 +3514,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     mergeProps({
@@ -2914,7 +3529,7 @@ function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABItem/OnyxFABItem.vue"]]);
+const OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__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([]);
@@ -2951,7 +3566,7 @@ const useGlobalFAB = () => {
   );
   return globalFABProvider;
 };
-const _sfc_main$1q = /* @__PURE__ */ defineComponent({
+const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "OnyxGlobalFAB",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -2965,7 +3580,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1r(_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)),
@@ -3000,14 +3615,14 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["label", "alignment"])) : createCommentVNode("v-if", true);
 }
-const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
-const _sfc_main$1p = {};
-const _hoisted_1$11 = {
+const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
+const _sfc_main$1q = {};
+const _hoisted_1$12 = {
   class: "onyx-component onyx-circle-spinner",
   viewBox: "0 0 50 50"
 };
-function _sfc_render$1p(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$11, [..._cache[0] || (_cache[0] = [
+function _sfc_render$1q(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$12, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "circle",
       {
@@ -3022,11 +3637,11 @@ function _sfc_render$1p(_ctx, _cache) {
     )
   ])]);
 }
-const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
-const _sfc_main$1o = {};
-const _hoisted_1$10 = { class: "onyx-component onyx-loading-dots" };
-function _sfc_render$1o(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$10, [..._cache[0] || (_cache[0] = [
+const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
+const _sfc_main$1p = {};
+const _hoisted_1$11 = { class: "onyx-component onyx-loading-dots" };
+function _sfc_render$1p(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$11, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "span",
       { class: "onyx-loading-dots__center" },
@@ -3036,8 +3651,8 @@ function _sfc_render$1o(_ctx, _cache) {
     )
   ])]);
 }
-const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { type: String, required: false, default: "dots" }
@@ -3050,10 +3665,10 @@ 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.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$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue"]]);
+const OnyxLoadingIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__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());
@@ -3100,7 +3715,7 @@ const useRipple = (container) => {
   });
   return { isPointerDown, ripples, startRipple, hideRipples, hideRipple, events };
 };
-const _sfc_main$1m = /* @__PURE__ */ defineComponent({
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "OnyxRipple",
   setup(__props, { expose: __expose }) {
     const rippleTrigger = useTemplateRef("rippleTriggerRef");
@@ -3113,16 +3728,16 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$$ = {
+const _hoisted_1$10 = {
   ref: "rippleTriggerRef",
   class: "onyx-component onyx-ripple",
   "aria-hidden": "true"
 };
-const _hoisted_2$M = ["data-rippleid"];
-function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$N = ["data-rippleid"];
+function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "span",
-    _hoisted_1$$,
+    _hoisted_1$10,
     [
       (openBlock(true), createElementBlock(
         Fragment,
@@ -3137,7 +3752,7 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             "data-rippleid": key,
             onAnimationend: _cache[0] || (_cache[0] = ($event) => $setup.hideRipple($event.target))
-          }, null, 44, _hoisted_2$M);
+          }, null, 44, _hoisted_2$N);
         }),
         128
         /* KEYED_FRAGMENT */
@@ -3147,8 +3762,8 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$1m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
-const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "OnyxButton",
   props: {
     density: { type: null, required: false },
@@ -3178,8 +3793,8 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$_ = { class: "onyx-button__label onyx-truncation-ellipsis" };
-function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$$ = { class: "onyx-button__label onyx-truncation-ellipsis" };
+function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-button-skeleton", $setup.densityClass])
@@ -3216,7 +3831,7 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
       })) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_1$_,
+        _hoisted_1$$,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -3231,8 +3846,8 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label"]));
 }
-const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$1m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoCard",
   props: {
     density: { type: null, required: false },
@@ -3259,16 +3874,16 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Z = { class: "onyx-info-card__content" };
-const _hoisted_2$L = {
+const _hoisted_1$_ = { class: "onyx-info-card__content" };
+const _hoisted_2$M = {
   key: 3,
   class: "onyx-info-card__description onyx-text--small"
 };
-const _hoisted_3$x = {
+const _hoisted_3$y = {
   key: 4,
   class: "onyx-info-card__buttons onyx-density-compact"
 };
-function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3280,7 +3895,7 @@ function _sfc_render$1k(_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$Z, [
+      createElementVNode("div", _hoisted_1$_, [
         $setup.props.headline ? (openBlock(), createBlock($setup["OnyxHeadline"], {
           key: 0,
           is: "h3",
@@ -3323,10 +3938,10 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
           color: $setup.systemButtonColor,
           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$L, [
+        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$M, [
           renderSlot(_ctx.$slots, "default")
         ])) : createCommentVNode("v-if", true),
-        !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$x, [
+        !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$y, [
           renderSlot(_ctx.$slots, "buttons")
         ])) : createCommentVNode("v-if", true)
       ])
@@ -3335,8 +3950,8 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationMessage",
   props: {
     headline: { type: String, required: true },
@@ -3354,7 +3969,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxInfoCard"], {
     class: normalizeClass(["onyx-component onyx-notification-message", [
       "onyx-component",
@@ -3387,7 +4002,7 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["class", "headline", "icon", "style", "aria-label"]);
 }
-const OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationMessage/OnyxNotificationMessage.vue"]]);
+const OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__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;
@@ -3432,7 +4047,7 @@ const useNotification = () => {
   );
   return notificationsProvider;
 };
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotifications",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3442,15 +4057,15 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Y = {
+const _hoisted_1$Z = {
   key: 0,
   class: "onyx-component onyx-notifications",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$Y, [
+function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$Z, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -3502,8 +4117,8 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "OnyxToastMessage",
   props: {
     density: { type: null, required: false },
@@ -3539,33 +4154,33 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$X = { class: "onyx-toast-message__wrapper" };
-const _hoisted_2$K = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
-const _hoisted_3$w = { class: "onyx-toast-message__headline onyx-text" };
-const _hoisted_4$l = { class: "onyx-truncation-ellipsis" };
-const _hoisted_5$f = ["aria-label"];
-const _hoisted_6$b = {
+const _hoisted_1$Y = { class: "onyx-toast-message__wrapper" };
+const _hoisted_2$L = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
+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 = {
   key: 0,
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
 };
-function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1i(_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$X, [
+      createElementVNode("div", _hoisted_1$Y, [
         $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
           key: 0,
           icon: $setup.icon
         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_2$K, [
-          createElementVNode("div", _hoisted_3$w, [
+        createElementVNode("div", _hoisted_2$L, [
+          createElementVNode("div", _hoisted_3$x, [
             createElementVNode(
               "span",
-              _hoisted_4$l,
+              _hoisted_4$m,
               toDisplayString($setup.props.headline),
               1
               /* TEXT */
@@ -3578,11 +4193,11 @@ function _sfc_render$1h(_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$f)) : createCommentVNode("v-if", true)
+            ], 8, _hoisted_5$g)) : createCommentVNode("v-if", true)
           ]),
           $setup.props.description ? (openBlock(), createElementBlock(
             "p",
-            _hoisted_6$b,
+            _hoisted_6$c,
             toDisplayString($setup.props.description),
             1
             /* TEXT */
@@ -3607,7 +4222,7 @@ function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "role", "aria-label"]);
 }
-const OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue"]]);
+const OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__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;
@@ -3650,7 +4265,7 @@ const useToast = () => {
   );
   return toastProvider;
 };
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "OnyxToast",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3660,15 +4275,15 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$W = {
+const _hoisted_1$X = {
   key: 0,
   class: "onyx-component onyx-toast",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$W, [
+function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$X, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -3686,8 +4301,8 @@ function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "OnyxAppLayout",
   props: {
     navBarAlignment: { type: String, required: false, default: "top" }
@@ -3701,22 +4316,22 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$V = {
+const _hoisted_1$W = {
   key: 0,
   class: "onyx-app__nav"
 };
-const _hoisted_2$J = { class: "onyx-app__page" };
-function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$K = { class: "onyx-app__page" };
+function _sfc_render$1g(_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$V, [
+      $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$W, [
         renderSlot(_ctx.$slots, "navBar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$J, [
+      createElementVNode("div", _hoisted_2$K, [
         renderSlot(_ctx.$slots, "default")
       ]),
       createVNode($setup["OnyxToast"]),
@@ -3727,8 +4342,8 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatar",
   props: {
     size: { type: null, required: false, default: "48px" },
@@ -3762,13 +4377,13 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$U = ["title", "aria-label"];
-const _hoisted_2$I = ["src", "alt"];
-const _hoisted_3$v = {
+const _hoisted_1$V = ["title", "aria-label"];
+const _hoisted_2$J = ["src", "alt"];
+const _hoisted_3$w = {
   key: 0,
   class: "onyx-avatar__initials"
 };
-function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass([
       "onyx-component",
@@ -3785,13 +4400,13 @@ function _sfc_render$1e(_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$I)) : (openBlock(), createElementBlock(
+    }, null, 40, _hoisted_2$J)) : (openBlock(), createElementBlock(
       Fragment,
       { key: 1 },
       [
         $setup.initials ? (openBlock(), createElementBlock(
           "div",
-          _hoisted_3$v,
+          _hoisted_3$w,
           toDisplayString($setup.initials),
           1
           /* TEXT */
@@ -3804,10 +4419,10 @@ function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
       64
       /* STABLE_FRAGMENT */
     ))
-  ], 10, _hoisted_1$U);
+  ], 10, _hoisted_1$V);
 }
-const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatarStack",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3816,14 +4431,14 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$T = { class: "onyx-component onyx-avatar-stack" };
-function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$T, [
+const _hoisted_1$U = { class: "onyx-component onyx-avatar-stack" };
+function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$U, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
-const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "OnyxBadge",
   props: {
     density: { type: null, required: false },
@@ -3840,7 +4455,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3871,8 +4486,8 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "OnyxBottomBar",
   props: {
     density: { type: null, required: false },
@@ -3887,10 +4502,10 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$S = { class: "onyx-bottom-bar__content onyx-grid-container" };
-const _hoisted_2$H = { class: "onyx-bottom-bar__content--left" };
-const _hoisted_3$u = { class: "onyx-bottom-bar__content--right" };
-function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$T = { class: "onyx-bottom-bar__content onyx-grid-container" };
+const _hoisted_2$I = { class: "onyx-bottom-bar__content--left" };
+const _hoisted_3$v = { class: "onyx-bottom-bar__content--right" };
+function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3902,11 +4517,11 @@ function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$S, [
-        createElementVNode("div", _hoisted_2$H, [
+      createElementVNode("div", _hoisted_1$T, [
+        createElementVNode("div", _hoisted_2$I, [
           renderSlot(_ctx.$slots, "left")
         ]),
-        createElementVNode("div", _hoisted_3$u, [
+        createElementVNode("div", _hoisted_3$v, [
           renderSlot(_ctx.$slots, "default")
         ])
       ])
@@ -3915,7 +4530,7 @@ function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
+const OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
 const useMoreList = (options) => {
   const visibleElements = ref();
   const hiddenElements = ref();
@@ -4010,7 +4625,7 @@ const useMoreListChild = (injectionKey) => {
 };
 const BREADCRUMB_MORE_LIST_INJECTION_KEY = Symbol();
 const BREADCRUMB_MORE_LIST_TARGET_INJECTION_KEY = Symbol();
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "OnyxExternalLinkIcon",
   props: {
     href: { type: String, required: false },
@@ -4031,7 +4646,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.isVisible ? (openBlock(), createBlock($setup["OnyxIcon"], {
     key: 0,
     class: "onyx-component onyx-external-link-icon",
@@ -4039,8 +4654,8 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
     size: "16px"
   }, null, 8, ["icon"])) : createCommentVNode("v-if", true);
 }
-const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "OnyxListItem",
   props: {
     density: { type: null, required: false },
@@ -4059,7 +4674,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(
     "li",
     {
@@ -4081,8 +4696,8 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMenuItem",
   props: {
@@ -4161,17 +4776,17 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$R = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$G = {
+const _hoisted_1$S = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$H = {
   key: 0,
   class: "onyx-menu-item__chevron"
 };
-const _hoisted_3$t = {
+const _hoisted_3$u = {
   key: 0,
   role: "menu",
   class: "onyx-menu-item__children"
 };
-function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OnyxMenuItem = resolveComponent("OnyxMenuItem", true);
   return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({
     selected: $setup.isActive,
@@ -4192,7 +4807,7 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("span", null, [
               createElementVNode(
                 "span",
-                _hoisted_1$R,
+                _hoisted_1$S,
                 toDisplayString($setup.props.label),
                 1
                 /* TEXT */
@@ -4206,7 +4821,7 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ])
           ]),
-          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$G, [
+          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$H, [
             createVNode($setup["OnyxIcon"], {
               icon: $setup.iconChevronRightSmall,
               size: "24px"
@@ -4220,7 +4835,7 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       $setup.hasChildren ? withDirectives((openBlock(), createElementBlock(
         "ul",
-        _hoisted_3$t,
+        _hoisted_3$u,
         [
           createVNode(
             _component_OnyxMenuItem,
@@ -4257,8 +4872,8 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["selected", "active", "color", "disabled", "class"]);
 }
-const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxBreadcrumbItem",
   props: {
@@ -4284,7 +4899,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 openBlock(), createElementBlock(
     Fragment,
     null,
@@ -4344,8 +4959,8 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "OnyxMoreList",
   props: {
     injectionKey: { type: [Symbol, Object], required: true },
@@ -4378,7 +4993,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(), createBlock(
     resolveDynamicComponent($setup.props.is),
     {
@@ -4418,8 +5033,8 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "OnyxBreadcrumb",
   props: {
     density: { type: null, required: false },
@@ -4445,13 +5060,13 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Q = ["aria-label", "aria-hidden"];
-const _hoisted_2$F = {
+const _hoisted_1$R = ["aria-label", "aria-hidden"];
+const _hoisted_2$G = {
   class: "onyx-breadcrumb__list onyx-grid-container",
   role: "menu"
 };
-const _hoisted_3$s = { ref: "moreListRef" };
-function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$t = { ref: "moreListRef" };
+function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("nav", {
     class: normalizeClass([
       "onyx-component",
@@ -4462,7 +5077,7 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.t("breadcrumb.label"),
     "aria-hidden": $setup.props.skeleton
   }, [
-    createElementVNode("ol", _hoisted_2$F, [
+    createElementVNode("ol", _hoisted_2$G, [
       createVNode($setup["OnyxBreadcrumbItem"], {
         class: "onyx-breadcrumb__home",
         href: $setup.props.home?.link ?? "/",
@@ -4530,7 +5145,7 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
             options: withCtx(() => [
               createElementVNode(
                 "div",
-                _hoisted_3$s,
+                _hoisted_3$t,
                 null,
                 512
                 /* NEED_PATCH */
@@ -4544,13 +5159,13 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
         /* FORWARDED */
       }, 8, ["injection-key"])
     ])
-  ], 10, _hoisted_1$Q);
+  ], 10, _hoisted_1$R);
 }
-const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumb/OnyxBreadcrumb.vue"]]);
+const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__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$14 = /* @__PURE__ */ defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "OnyxCard",
   props: {
     density: { type: null, required: false },
@@ -4569,7 +5184,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(), 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"]
   }), {
@@ -4580,8 +5195,8 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class"]);
 }
-const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+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 },
@@ -4610,14 +5225,14 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$P = { class: "onyx-calendar-cell__header" };
-const _hoisted_2$E = { class: "onyx-calendar-cell__date-container" };
-const _hoisted_3$r = { class: "onyx-calendar-cell__date" };
-const _hoisted_4$k = {
+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$13(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "td",
     {
@@ -4643,18 +5258,18 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }), {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$P, [
-            createElementVNode("div", _hoisted_2$E, [
+          createElementVNode("div", _hoisted_1$Q, [
+            createElementVNode("div", _hoisted_2$F, [
               createElementVNode(
                 "span",
-                _hoisted_3$r,
+                _hoisted_3$s,
                 toDisplayString($setup.props.date),
                 1
                 /* TEXT */
               )
             ])
           ]),
-          !!$setup.slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
+          !!$setup.slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$l, [
             renderSlot(_ctx.$slots, "default")
           ])) : createCommentVNode("v-if", true)
         ]),
@@ -4666,8 +5281,8 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
     /* 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({
+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 },
@@ -4692,7 +5307,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+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])
@@ -4720,8 +5335,8 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
     /* 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({
+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 },
@@ -4876,8 +5491,8 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$O = { class: "onyx-tooltip--content" };
-function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$P = { class: "onyx-tooltip--content" };
+function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -4893,7 +5508,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
           style: $setup.tooltipStyles
         }),
         [
-          createElementVNode("div", _hoisted_1$O, [
+          createElementVNode("div", _hoisted_1$P, [
             $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 0,
               icon: $setup.props.icon,
@@ -4917,8 +5532,8 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, STYLE */
   );
 }
-const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+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 _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTag",
   props: {
     density: { type: null, required: false },
@@ -4945,9 +5560,9 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$N = { class: "onyx-text onyx-truncation-ellipsis" };
-const _hoisted_2$D = { class: "onyx-text onyx-truncation-ellipsis" };
-function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$O = { class: "onyx-text onyx-truncation-ellipsis" };
+const _hoisted_2$E = { class: "onyx-text onyx-truncation-ellipsis" };
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-tag-skeleton", $setup.densityClass])
@@ -4970,7 +5585,7 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
           createElementVNode(
             "span",
-            _hoisted_1$N,
+            _hoisted_1$O,
             toDisplayString($setup.props.label),
             1
             /* TEXT */
@@ -5001,7 +5616,7 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_2$D,
+        _hoisted_2$E,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -5011,10 +5626,10 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
-const __default__ = {};
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
-  ...__default__,
+const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
+const __default__$1 = {};
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
   __name: "OnyxCalendar",
   props: {
     density: { type: null, required: false },
@@ -5104,16 +5719,16 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$M = { class: "onyx-calendar__header" };
-const _hoisted_2$C = { class: "control-container time-control-container" };
-const _hoisted_3$q = { class: "control-container" };
-const _hoisted_4$j = { class: "onyx-calendar__body" };
-const _hoisted_5$e = ["abbr"];
-const _hoisted_6$a = {
+const _hoisted_1$N = { class: "onyx-calendar__header" };
+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$$(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     {
@@ -5134,8 +5749,8 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component", "onyx-calendar", `onyx-calendar--${$setup.calendarSize}`, $setup.densityClass])
     },
     [
-      createElementVNode("div", _hoisted_1$M, [
-        createElementVNode("div", _hoisted_2$C, [
+      createElementVNode("div", _hoisted_1$N, [
+        createElementVNode("div", _hoisted_2$D, [
           $setup.calendarSize !== "small" ? (openBlock(), createBlock($setup["OnyxTag"], {
             key: 0,
             label: $setup.t("calendar.todayButton.label"),
@@ -5173,11 +5788,11 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
             onClick: _cache[1] || (_cache[1] = ($event) => $setup.goToMonthByOffset(1))
           }, null, 8, ["label", "icon", "disabled"])
         ]),
-        createElementVNode("div", _hoisted_3$q, [
+        createElementVNode("div", _hoisted_3$r, [
           renderSlot(_ctx.$slots, "actions")
         ])
       ]),
-      createElementVNode("div", _hoisted_4$j, [
+      createElementVNode("div", _hoisted_4$k, [
         createElementVNode(
           "table",
           normalizeProps(guardReactiveProps($setup.tableProps)),
@@ -5192,7 +5807,7 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
                       key: header,
                       scope: "col",
                       abbr: header
-                    }, toDisplayString(header), 9, _hoisted_5$e);
+                    }, toDisplayString(header), 9, _hoisted_5$f);
                   }),
                   128
                   /* KEYED_FRAGMENT */
@@ -5209,7 +5824,7 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
                   }, [
                     $setup.showCalendarWeeks ? (openBlock(), createElementBlock(
                       "th",
-                      _hoisted_6$a,
+                      _hoisted_6$b,
                       toDisplayString(week.weekNumber),
                       1
                       /* TEXT */
@@ -5265,7 +5880,7 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendar/OnyxCalendar.vue"]]);
+const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__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.
@@ -5481,7 +6096,7 @@ const formatMinMax = (locale, type, value) => {
   };
   return date.toLocaleString(locale, format);
 };
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "OnyxErrorTooltip",
   props: {
     errorMessages: { type: Object, required: false },
@@ -5497,16 +6112,16 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$L = { class: "onyx-component" };
-const _hoisted_2$B = {
+const _hoisted_1$M = { class: "onyx-component" };
+const _hoisted_2$C = {
   key: 0,
   ref: "targetRef"
 };
-function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$L, [
+function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$M, [
     !$setup.tooltipError || $setup.props.disabled ? (openBlock(), createElementBlock(
       "div",
-      _hoisted_2$B,
+      _hoisted_2$C,
       null,
       512
       /* NEED_PATCH */
@@ -5539,8 +6154,8 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, ["to"])) : createCommentVNode("v-if", true)
   ]);
 }
-const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxCheckbox",
   props: {
@@ -5587,10 +6202,10 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$K = ["title"];
-const _hoisted_2$A = { class: "onyx-checkbox__container" };
-const _hoisted_3$p = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
-function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$L = ["title"];
+const _hoisted_2$B = { class: "onyx-checkbox__container" };
+const _hoisted_3$q = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
+function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -5616,7 +6231,7 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["onyx-component onyx-checkbox", [$setup.requiredTypeClass, $setup.densityClass]]),
         title: $setup.title
       }, [
-        createElementVNode("div", _hoisted_2$A, [
+        createElementVNode("div", _hoisted_2$B, [
           $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
             key: 0,
             class: "onyx-checkbox__loading",
@@ -5633,7 +6248,7 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
             required: $setup.props.required,
             value: $setup.props.value,
             autofocus: $setup.props.autofocus
-          }, $setup.restAttrs), null, 16, _hoisted_3$p)), [
+          }, $setup.restAttrs), null, 16, _hoisted_3$q)), [
             [vModelCheckbox, $setup.isChecked],
             [$setup["vCustomValidity"]]
           ])
@@ -5669,13 +6284,13 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_1$K)
+      ], 10, _hoisted_1$L)
     ]),
     _: 1
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-const OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue"]]);
+const OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue"]]);
 const useSelectAllCheckboxState = (enabledOptionValues, modelValue) => computed(() => {
   const currentValues = modelValue.value.filter(
     (value) => enabledOptionValues.value.includes(value)
@@ -5710,7 +6325,7 @@ const useCheckAll = (enabledOptionValues, modelValue, onChangeCallback) => {
     }
   };
 };
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoTooltip",
   props: {
     text: { type: String, required: true },
@@ -5746,9 +6361,9 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$J = { class: "onyx-component onyx-info-tooltip" };
-function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$J, [
+const _hoisted_1$K = { class: "onyx-component onyx-info-tooltip" };
+function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$K, [
     $setup.triggerType === "click" ? (openBlock(), createBlock($setup["OnyxTooltip"], mergeProps({ key: 0 }, $setup.tooltipProps, {
       open: $setup.isVisible,
       "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.isVisible = $event)
@@ -5806,8 +6421,8 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ]);
 }
-const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "OnyxCheckboxGroup",
   props: {
     truncation: { type: null, required: false, default: "ellipsis" },
@@ -5865,18 +6480,18 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$I = ["disabled", "aria-label"];
-const _hoisted_2$z = {
+const _hoisted_1$J = ["disabled", "aria-label"];
+const _hoisted_2$A = {
   key: 0,
   class: "onyx-checkbox-group__label"
 };
-function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("fieldset", {
     class: normalizeClass(["onyx-component", "onyx-checkbox-group", $setup.densityClass]),
     disabled: $setup.disabled,
     "aria-label": $setup.props.label
   }, [
-    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$z, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$A, [
       createVNode($setup["OnyxHeadline"], { is: "h3" }, {
         default: withCtx(() => [
           createTextVNode(
@@ -5956,15 +6571,15 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$I);
+  ], 10, _hoisted_1$J);
 }
-const OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue"]]);
+const OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue"]]);
 const escapeCSS = (key) => {
   const name = typeof key === "symbol" && key.description ? key.description : String(key);
   if (globalThis.window && window.CSS) return CSS.escape(name);
   return name.replace(/\W/g, "-");
 };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "OnyxEmpty",
   props: {
     density: { type: null, required: false }
@@ -5981,12 +6596,12 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$H = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
-const _hoisted_2$y = {
+const _hoisted_1$I = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
+const _hoisted_2$z = {
   key: 0,
   class: "onyx-empty__buttons"
 };
-function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -5999,10 +6614,10 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
           size: "48px"
         }, null, 8, ["icon"])
       ]),
-      createElementVNode("div", _hoisted_1$H, [
+      createElementVNode("div", _hoisted_1$I, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$y, [
+      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$z, [
         renderSlot(_ctx.$slots, "buttons")
       ])) : createCommentVNode("v-if", true)
     ],
@@ -6010,8 +6625,8 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.vue"]]);
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const OnyxEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.vue"]]);
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "OnyxTable",
   props: {
     density: { type: null, required: false },
@@ -6042,15 +6657,15 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$G = {
+const _hoisted_1$H = {
   key: 0,
   class: "onyx-table-wrapper__top"
 };
-const _hoisted_2$x = ["id"];
-const _hoisted_3$o = { class: "onyx-table-wrapper__actions" };
-const _hoisted_4$i = ["tabindex"];
-const _hoisted_5$d = ["aria-labelledby"];
-const _hoisted_6$9 = ["span"];
+const _hoisted_2$y = ["id"];
+const _hoisted_3$p = { class: "onyx-table-wrapper__actions" };
+const _hoisted_4$j = ["tabindex"];
+const _hoisted_5$e = ["aria-labelledby"];
+const _hoisted_6$a = ["span"];
 const _hoisted_7$5 = {
   key: 0,
   class: "onyx-table__header"
@@ -6064,7 +6679,7 @@ const _hoisted_13 = {
   key: 1,
   class: "onyx-table-wrapper__bottom"
 };
-function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -6072,11 +6687,11 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
       style: normalizeStyle($setup.style)
     },
     [
-      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$G, [
+      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$H, [
         createElementVNode("div", { id: $setup.headlineId }, [
           renderSlot(_ctx.$slots, "headline")
-        ], 8, _hoisted_2$x),
-        createElementVNode("div", _hoisted_3$o, [
+        ], 8, _hoisted_2$y),
+        createElementVNode("div", _hoisted_3$p, [
           renderSlot(_ctx.$slots, "actions")
         ])
       ])) : createCommentVNode("v-if", true),
@@ -6106,7 +6721,7 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
               return openBlock(), createElementBlock("colgroup", {
                 key: group.key,
                 span: group.span
-              }, null, 8, _hoisted_6$9);
+              }, null, 8, _hoisted_6$a);
             }),
             128
             /* KEYED_FRAGMENT */
@@ -6153,8 +6768,8 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ])
           ])
-        ], 10, _hoisted_5$d)
-      ], 16, _hoisted_4$i),
+        ], 10, _hoisted_5$e)
+      ], 16, _hoisted_4$j),
       !!$setup.slots.bottomLeft || !!$setup.slots.pagination ? (openBlock(), createElementBlock("div", _hoisted_13, [
         createElementVNode("div", null, [
           renderSlot(_ctx.$slots, "bottomLeft")
@@ -6168,8 +6783,8 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     /* STYLE */
   );
 }
-const OnyxTable = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$V], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue"]]);
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const OnyxTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue"]]);
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "OnyxDataGridRenderer",
   props: {
     density: { type: null, required: false },
@@ -6205,7 +6820,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxTable"], mergeProps({ class: "onyx-data-grid" }, $setup.tableProps, {
     "scroll-container-attrs": $setup.mergeVueProps($setup.props.scrollContainerAttrs, { style: $setup.columnStyle })
   }), createSlots({
@@ -6312,8 +6927,8 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ]), 1040, ["scroll-container-attrs"]);
 }
-const OnyxDataGridRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue"]]);
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const OnyxDataGridRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$V], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue"]]);
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMiniSearch",
   props: {
@@ -6353,9 +6968,9 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$F = ["autofocus", "placeholder", "aria-label"];
-const _hoisted_2$w = ["aria-label"];
-function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$G = ["autofocus", "placeholder", "aria-label"];
+const _hoisted_2$x = ["aria-label"];
+function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -6374,7 +6989,7 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
         size: "1"
       }, $setup.restAttrs, {
         "aria-label": $setup.props.label
-      }), null, 16, _hoisted_1$F), [
+      }), null, 16, _hoisted_1$G), [
         [vModelText, $setup.modelValue]
       ]),
       createElementVNode("button", {
@@ -6387,7 +7002,7 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[2] || (_cache[2] = ($event) => $setup.emit("clear"))
       }, [
         createVNode($setup["OnyxIcon"], { icon: $setup.iconXSmall }, null, 8, ["icon"])
-      ], 40, _hoisted_2$w),
+      ], 40, _hoisted_2$x),
       createVNode($setup["OnyxIcon"], {
         class: "onyx-mini-search__icon",
         icon: $setup.iconSearch
@@ -6397,11 +7012,11 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxMiniSearch = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$T], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue"]]);
+const OnyxMiniSearch = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue"]]);
 const prepareMapping = (features, key) => features.flatMap((f) => f[key]).filter((f) => f?.func).sort((a, b) => (a?.order ?? 0) - (b?.order ?? 0));
 const applyMapping = (mapping, input2) => mapping.reduce((output, m) => m.func(output), input2);
 const DataGridRowOptionsSymbol = Symbol("RowOptions");
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "HeaderCell",
   props: {
     label: { type: String, required: true }
@@ -6415,27 +7030,27 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$E = { class: "onyx-component onyx-data-grid-header-cell" };
-const _hoisted_2$v = { class: "onyx-data-grid-header-cell__label" };
-const _hoisted_3$n = {
+const _hoisted_1$F = { class: "onyx-component onyx-data-grid-header-cell" };
+const _hoisted_2$w = { class: "onyx-data-grid-header-cell__label" };
+const _hoisted_3$o = {
   key: 0,
   class: "onyx-data-grid-header-cell__actions"
 };
-function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$E, [
+function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$F, [
     createElementVNode(
       "span",
-      _hoisted_2$v,
+      _hoisted_2$w,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
     ),
-    $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$n, [
+    $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$o, [
       renderSlot(_ctx.$slots, "actions")
     ])) : createCommentVNode("v-if", true)
   ]);
 }
-const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$S], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue"]]);
+const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$T], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue"]]);
 const FALLBACK_RENDER_VALUE = "-";
 const fallback = (opts) => opts?.fallback ?? FALLBACK_RENDER_VALUE;
 const createTypeRenderer = (typeRenderer) => Object.freeze(typeRenderer);
@@ -6928,7 +7543,7 @@ const formatBytesToString = (locale, bytes) => {
     unitDisplay: "narrow"
   }).format(value);
 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "OnyxInlinePagination",
   props: {
     density: { type: null, required: false },
@@ -6980,12 +7595,12 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$D = ["aria-label"];
-const _hoisted_2$u = ["aria-label", "disabled"];
-const _hoisted_3$m = ["aria-label", "disabled", "onClick"];
-const _hoisted_4$h = ["aria-label"];
-const _hoisted_5$c = ["aria-label", "disabled"];
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$E = ["aria-label"];
+const _hoisted_2$v = ["aria-label", "disabled"];
+const _hoisted_3$n = ["aria-label", "disabled", "onClick"];
+const _hoisted_4$i = ["aria-label"];
+const _hoisted_5$d = ["aria-label", "disabled"];
+function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass([
@@ -7014,7 +7629,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue - 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronLeftSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_2$u),
+    ], 8, _hoisted_2$v),
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -7033,7 +7648,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
               type: "button",
               disabled: $setup.props.disabled,
               onClick: ($event) => $setup.emit("update:modelValue", pageNumber)
-            }, toDisplayString(pageNumber), 11, _hoisted_3$m)) : (openBlock(), createElementBlock("div", {
+            }, toDisplayString(pageNumber), 11, _hoisted_3$n)) : (openBlock(), createElementBlock("div", {
               key: 1,
               class: normalizeClass(["onyx-pagination__more-pages"]),
               "aria-label": $setup.t("pagination.morePages")
@@ -7056,7 +7671,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
                 _: 1
                 /* STABLE */
               })
-            ], 8, _hoisted_4$h))
+            ], 8, _hoisted_4$i))
           ],
           64
           /* STABLE_FRAGMENT */
@@ -7073,10 +7688,10 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[1] || (_cache[1] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue + 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_5$c)
-  ], 10, _hoisted_1$D));
+    ], 8, _hoisted_5$d)
+  ], 10, _hoisted_1$E));
 }
-const OnyxInlinePagination = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxInlinePagination.vue"]]);
+const OnyxInlinePagination = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$S], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxInlinePagination.vue"]]);
 const useErrorClass = (showError) => computed(() => {
   if (showError.value === true) {
     return "onyx-form-element--immediate-invalid";
@@ -7086,7 +7701,7 @@ const useErrorClass = (showError) => computed(() => {
   }
   return "onyx-form-element--touched-invalid";
 });
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "FormMessage",
   props: {
     messages: { type: Object, required: true },
@@ -7100,17 +7715,17 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$C = {
+const _hoisted_1$D = {
   class: /* @__PURE__ */ normalizeClass(["onyx-truncation-ellipsis"])
 };
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($props.messages.hidden ? $setup.OnyxVisuallyHidden : "span"), {
     class: normalizeClass(["onyx-component", "onyx-form-message", `onyx-form-message__${$setup.props.type}`])
   }, {
     default: withCtx(() => [
       createElementVNode(
         "span",
-        _hoisted_1$C,
+        _hoisted_1$D,
         toDisplayString($setup.props.messages.shortMessage),
         1
         /* TEXT */
@@ -7128,8 +7743,8 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class"]);
 }
-const FormMessage = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$Q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue"]]);
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const FormMessage = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue"]]);
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "OnyxFormElement",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -7202,17 +7817,17 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$B = {
+const _hoisted_1$C = {
   key: 0,
   class: "onyx-form-element__label onyx-text--small"
 };
-const _hoisted_2$t = ["for"];
-const _hoisted_3$l = {
+const _hoisted_2$u = ["for"];
+const _hoisted_3$m = {
   key: 1,
   class: "onyx-form-element__footer onyx-text--small"
 };
-const _hoisted_4$g = { class: "onyx-form-element__footer-messages" };
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_4$h = { class: "onyx-form-element__footer-messages" };
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -7224,11 +7839,11 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$B, [
+      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
         createElementVNode("label", {
           for: $setup.props.id,
           class: "onyx-truncation-ellipsis"
-        }, toDisplayString($setup.props.label), 9, _hoisted_2$t),
+        }, toDisplayString($setup.props.label), 9, _hoisted_2$u),
         $setup.props.required ? (openBlock(), createElementBlock(
           "span",
           {
@@ -7259,8 +7874,8 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default", {
         id: $setup.props.id
       }),
-      $setup.footer ? (openBlock(), createElementBlock("div", _hoisted_3$l, [
-        createElementVNode("span", _hoisted_4$g, [
+      $setup.footer ? (openBlock(), createElementBlock("div", _hoisted_3$m, [
+        createElementVNode("span", _hoisted_4$h, [
           $setup.footer.errorMessages ? (openBlock(), createBlock($setup["FormMessage"], {
             key: 0,
             class: "onyx-form-element__error-message",
@@ -7299,8 +7914,8 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$P], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue"]]);
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const OnyxFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$Q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue"]]);
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSelectInput",
   props: {
@@ -7383,9 +7998,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$A = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"];
-const _hoisted_2$s = ["aria-label", "title", "disabled"];
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$B = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"];
+const _hoisted_2$t = ["aria-label", "title", "disabled"];
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -7450,7 +8065,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
               autofocus: $setup.props.autofocus,
               autocomplete: "off",
               onKeydown: $setup.blockTyping
-            }), null, 16, _hoisted_1$A), [
+            }), null, 16, _hoisted_1$B), [
               [$setup["vCustomValidity"]]
             ]),
             $setup.props.textMode === "preview" && $setup.selectionCount > 0 ? (openBlock(), createBlock($setup["OnyxTooltip"], {
@@ -7489,7 +8104,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
               disabled: $setup.disabled || $setup.props.readonly || $setup.props.loading
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronDownUp }, null, 8, ["icon"])
-            ], 8, _hoisted_2$s),
+            ], 8, _hoisted_2$t),
             !$setup.props.hideSuccessIcon && $setup.successMessages ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 2,
               class: "onyx-select-input__check-icon",
@@ -7506,8 +8121,8 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxSelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$O], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue"]]);
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const OnyxSelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$P], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue"]]);
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectOption",
   props: {
     active: { type: Boolean, required: false, default: false },
@@ -7526,8 +8141,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$z = ["checked", "aria-labelledby", "disabled", "indeterminate"];
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$A = ["checked", "aria-labelledby", "disabled", "indeterminate"];
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({ class: "onyx-component onyx-select-option" }, $setup.listItemProps, {
     checked: !!_ctx.$attrs["aria-checked"],
     selected: !!_ctx.$attrs["aria-selected"],
@@ -7544,7 +8159,7 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
         tabindex: "-1",
         class: "onyx-select-option__checkbox",
         type: "checkbox"
-      }, null, 8, _hoisted_1$z)) : createCommentVNode("v-if", true),
+      }, null, 8, _hoisted_1$A)) : createCommentVNode("v-if", true),
       $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 1,
         icon: $setup.props.icon
@@ -7565,8 +8180,8 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["checked", "selected", "disabled"]);
 }
-const OnyxSelectOption = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$N], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue"]]);
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const OnyxSelectOption = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$O], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue"]]);
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelect",
   props: {
     density: { type: null, required: false },
@@ -7836,29 +8451,29 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$y = {
+const _hoisted_1$z = {
   ref: "selectRef",
   class: "onyx-component onyx-select-wrapper"
 };
-const _hoisted_2$r = {
+const _hoisted_2$s = {
   class: "onyx-select__wrapper",
   tabindex: "-1"
 };
-const _hoisted_3$k = {
+const _hoisted_3$l = {
   key: 0,
   role: "group",
   class: "onyx-select__group"
 };
-const _hoisted_4$f = {
+const _hoisted_4$g = {
   role: "option",
   "aria-selected": "false"
 };
-const _hoisted_5$b = {
+const _hoisted_5$c = {
   key: 0,
   role: "presentation",
   class: "onyx-select__group-name onyx-text--small"
 };
-const _hoisted_6$8 = {
+const _hoisted_6$9 = {
   key: 1,
   class: "onyx-select__slot"
 };
@@ -7870,10 +8485,10 @@ const _hoisted_8$4 = {
   key: 0,
   class: "onyx-select__description onyx-text--small"
 };
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
-    _hoisted_1$y,
+    _hoisted_1$z,
     [
       createVNode($setup["OnyxBasicPopover"], {
         class: normalizeClass($setup.densityClass),
@@ -7892,7 +8507,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
           }), null, 16, ["show-focus", "autofocus"])
         ]),
         content: withCtx(() => [
-          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$r, [
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$s, [
             $setup.props.withSearch ? (openBlock(), createBlock($setup["OnyxMiniSearch"], mergeProps({
               key: 0,
               ref: "miniSearchRef",
@@ -7907,8 +8522,8 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
               "div",
               normalizeProps(guardReactiveProps($setup.listbox)),
               [
-                $setup.isEmptyMessage ? (openBlock(), createElementBlock("ul", _hoisted_3$k, [
-                  createElementVNode("li", _hoisted_4$f, [
+                $setup.isEmptyMessage ? (openBlock(), createElementBlock("ul", _hoisted_3$l, [
+                  createElementVNode("li", _hoisted_4$g, [
                     renderSlot(_ctx.$slots, "empty", { defaultMessage: $setup.isEmptyMessage }, () => [
                       createVNode($setup["OnyxEmpty"], {
                         density: $setup.props.density
@@ -7977,7 +8592,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
                           [
                             group.name !== "" ? (openBlock(), createElementBlock(
                               "li",
-                              _hoisted_5$b,
+                              _hoisted_5$c,
                               toDisplayString(group.name),
                               1
                               /* TEXT */
@@ -8037,7 +8652,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
               16
               /* FULL_PROPS */
             ),
-            $setup.props.lazyLoading?.loading ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
+            $setup.props.lazyLoading?.loading ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
               createVNode($setup["OnyxLoadingIndicator"], { class: "onyx-select__loading" })
             ])) : createCommentVNode("v-if", true),
             $setup.slots.optionsEnd ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
@@ -8062,9 +8677,9 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxSelect = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$M], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue"]]);
+const OnyxSelect = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$N], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue"]]);
 const pageSize = 100;
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectPagination",
   props: {
     density: { type: null, required: false },
@@ -8116,11 +8731,11 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$x = ["aria-label"];
-const _hoisted_2$q = { class: "onyx-pagination__count" };
-const _hoisted_3$j = ["aria-label", "disabled"];
-const _hoisted_4$e = ["aria-label", "disabled"];
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$y = ["aria-label"];
+const _hoisted_2$r = { class: "onyx-pagination__count" };
+const _hoisted_3$k = ["aria-label", "disabled"];
+const _hoisted_4$f = ["aria-label", "disabled"];
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-pagination-skeleton", "onyx-text", $setup.densityClass])
@@ -8151,7 +8766,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["search-term", "label", "list-label", "options", "model-value", "value-label", "disabled"]),
     createElementVNode(
       "div",
-      _hoisted_2$q,
+      _hoisted_2$r,
       toDisplayString($setup.t("pagination.ofPages", { n: $setup.props.pages, pages: $setup.n($setup.props.pages, "decimal") })),
       1
       /* TEXT */
@@ -8164,7 +8779,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[2] || (_cache[2] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue - 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronLeftSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_3$j),
+    ], 8, _hoisted_3$k),
     createElementVNode("button", {
       class: "onyx-pagination__button",
       "aria-label": $setup.t("pagination.next"),
@@ -8173,11 +8788,11 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[3] || (_cache[3] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue + 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_4$e)
-  ], 14, _hoisted_1$x));
+    ], 8, _hoisted_4$f)
+  ], 14, _hoisted_1$y));
 }
-const OnyxSelectPagination = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$L], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxSelectPagination.vue"]]);
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const OnyxSelectPagination = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$M], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxSelectPagination.vue"]]);
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "OnyxPagination",
   props: {
     density: { type: null, required: false },
@@ -8198,7 +8813,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.type === "inline" ? (openBlock(), createBlock(
     $setup["OnyxInlinePagination"],
     mergeProps({ key: 0 }, $setup.paginationProps, {
@@ -8217,7 +8832,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxPagination = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxPagination.vue"]]);
+const OnyxPagination = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$L], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxPagination.vue"]]);
 const SELECTION_FEATURE = Symbol("Selection");
 const SELECTION_MUTATION_ORDER = 1e3;
 const useSelection = (options) => createFeature((ctx) => {
@@ -8495,7 +9110,7 @@ const BASE_FEATURE = (options) => createFeature(({ skeleton }) => {
     }
   };
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxDataGrid",
   props: {
@@ -8574,7 +9189,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxDataGridRenderer"], mergeProps(
     {
       "column-groups": $setup.rendererColumnGroups,
@@ -8609,7 +9224,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["column-groups", "columns", "rows", "scroll-container-attrs"]);
 }
-const OnyxDataGrid = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.vue"]]);
+const OnyxDataGrid = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.vue"]]);
 const HIDE_COLUMNS_FEATURE = Symbol("HideColumnsFeature");
 const HIDDEN_COLUMN = Symbol("HiddenColumn");
 const useHideColumns = (options) => createFeature((ctx) => {
@@ -8715,7 +9330,7 @@ const useHideColumns = (options) => createFeature((ctx) => {
     }
   };
 });
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "OnyxResizeHandle",
   props: {
     element: { type: null, required: true },
@@ -8790,7 +9405,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "button",
     {
@@ -8824,7 +9439,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, NEED_HYDRATION */
   );
 }
-const OnyxResizeHandle = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxResizeHandle/OnyxResizeHandle.vue"]]);
+const OnyxResizeHandle = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxResizeHandle/OnyxResizeHandle.vue"]]);
 const RESIZING_FEATURE = Symbol("Resizing");
 const FILLER_COLUMN = Symbol("FILLER_COLUMN");
 const useResizing = (options) => createFeature((ctx) => {
@@ -8966,7 +9581,7 @@ const DEFAULT_COMPARES = Object.freeze({
   skeleton: () => 0,
   boolean: BOOLEAN_COMPARE
 });
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "SortAction",
   props: {
     columnLabel: { type: String, required: true },
@@ -8990,14 +9605,14 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxSystemButton"], {
     label: $setup.buttonLabel,
     icon: $setup.icon,
     color: "medium"
   }, null, 8, ["label", "icon"]);
 }
-const SortAction = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue"]]);
+const SortAction = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue"]]);
 const nextSortDirection = (current, skipNone) => {
   switch (current) {
     case "asc":
@@ -9240,7 +9855,7 @@ const all = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   useSorting,
   useStickyColumns
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxDatePicker",
   props: {
@@ -9307,9 +9922,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$w = { class: "onyx-datepicker__wrapper" };
-const _hoisted_2$p = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"];
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$x = { class: "onyx-datepicker__wrapper" };
+const _hoisted_2$q = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"];
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -9338,7 +9953,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$w, [
+          createElementVNode("div", _hoisted_1$x, [
             $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
               key: 0,
               class: "onyx-datepicker__loading",
@@ -9360,7 +9975,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
               title: $setup.props.hideLabel ? $setup.props.label : void 0,
               min: $setup.getNormalizedDate($setup.props.min),
               max: $setup.getNormalizedDate($setup.props.max)
-            }, $setup.restAttrs), null, 16, _hoisted_2$p)), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$q)), [
               [vModelDynamic, $setup.value],
               [$setup["vCustomValidity"]]
             ])
@@ -9374,9 +9989,9 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue"]]);
+const OnyxDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue"]]);
 const DIALOG_ALIGNMENTS = ["left", "center", "right"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "OnyxDialog",
   props: {
     density: { type: null, required: false },
@@ -9410,15 +10025,15 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$v = { class: "onyx-dialog__header" };
-const _hoisted_2$o = { class: "onyx-dialog__headline" };
-const _hoisted_3$i = { class: "onyx-dialog__headline-content" };
-const _hoisted_4$d = { class: "onyx-dialog__body" };
-const _hoisted_5$a = {
+const _hoisted_1$w = { class: "onyx-dialog__header" };
+const _hoisted_2$p = { class: "onyx-dialog__headline" };
+const _hoisted_3$j = { class: "onyx-dialog__headline-content" };
+const _hoisted_4$e = { class: "onyx-dialog__body" };
+const _hoisted_5$b = {
   key: 0,
   class: "onyx-dialog__footer"
 };
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicPopover"], mergeProps($setup.basicPopoverProps, {
     open: $setup.isExpanded,
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.isExpanded = $event),
@@ -9428,9 +10043,9 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "trigger", { trigger })
     ]),
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$v, [
-        createElementVNode("div", _hoisted_2$o, [
-          createElementVNode("div", _hoisted_3$i, [
+      createElementVNode("div", _hoisted_1$w, [
+        createElementVNode("div", _hoisted_2$p, [
+          createElementVNode("div", _hoisted_3$j, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -9456,10 +10071,10 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["label", "icon"])) : createCommentVNode("v-if", true)
         ])
       ]),
-      createElementVNode("div", _hoisted_4$d, [
+      createElementVNode("div", _hoisted_4$e, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$a, [
+      !!$setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$b, [
         renderSlot(_ctx.$slots, "footer")
       ])) : createCommentVNode("v-if", true)
     ]),
@@ -9467,8 +10082,8 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["open", "class"]);
 }
-const OnyxDialog = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue"]]);
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const OnyxDialog = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue"]]);
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "OnyxForm",
   props: {
     disabled: { type: Boolean, required: false, default: false },
@@ -9488,7 +10103,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "form",
     {
@@ -9505,10 +10120,10 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxForm = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue"]]);
+const OnyxForm = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue"]]);
 const HEADLINE_TYPES = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const ICON_SIZES = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxImage",
   props: {
@@ -9547,10 +10162,10 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$u = ["src", "alt"];
-const _hoisted_2$n = ["src", "alt"];
-const _hoisted_3$h = { class: "onyx-image__alt onyx-text--small" };
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$v = ["src", "alt"];
+const _hoisted_2$o = ["src", "alt"];
+const _hoisted_3$i = { class: "onyx-image__alt onyx-text--small" };
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "figure",
     mergeProps($setup.rootAttrs, {
@@ -9575,7 +10190,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
             src: $setup.imageSrc.light,
             alt: $setup.props.alt,
             onError: _cache[0] || (_cache[0] = ($event) => $setup.isError = true)
-          }), null, 16, _hoisted_1$u),
+          }), null, 16, _hoisted_1$v),
           $setup.imageSrc.dark ? (openBlock(), createElementBlock("img", mergeProps({
             key: 0,
             class: "onyx-image__source onyx-image__source--dark"
@@ -9583,7 +10198,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
             src: $setup.imageSrc.dark,
             alt: $setup.props.alt,
             onError: _cache[1] || (_cache[1] = ($event) => $setup.isError = true)
-          }), null, 16, _hoisted_2$n)) : createCommentVNode("v-if", true),
+          }), null, 16, _hoisted_2$o)) : createCommentVNode("v-if", true),
           $setup.isError ? (openBlock(), createElementBlock(
             "div",
             mergeProps({
@@ -9598,7 +10213,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 8, ["icon"]),
               createElementVNode(
                 "div",
-                _hoisted_3$h,
+                _hoisted_3$i,
                 toDisplayString($setup.props.alt),
                 1
                 /* TEXT */
@@ -9616,7 +10231,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxImage = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxImage/OnyxImage.vue"]]);
+const OnyxImage = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxImage/OnyxImage.vue"]]);
 const IMAGE_SHAPES = ["rounded", "circle", "clip", "clip-inverted"];
 const useLenientMaxLengthValidation = (options) => {
   const { t } = injectI18n();
@@ -9657,7 +10272,7 @@ const MOBILE_NAV_BAR_INJECTION_KEY = Symbol();
 const NAV_BAR_IS_TOP_LEVEL_INJECTION_KEY = Symbol();
 const NAV_BAR_MORE_LIST_INJECTION_KEY = Symbol();
 const NAV_BAR_MORE_LIST_TARGET_INJECTION_KEY = Symbol();
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "OnyxSeparator",
   props: {
     orientation: { type: null, required: false, default: "horizontal" }
@@ -9674,16 +10289,16 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$t = ["aria-orientation"];
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$u = ["aria-orientation"];
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["onyx-component onyx-separator", { "onyx-separator--vertical": $setup.isVertical }]),
     role: "separator",
     "aria-orientation": $setup.props.orientation
-  }, null, 10, _hoisted_1$t);
+  }, null, 10, _hoisted_1$u);
 }
-const OnyxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSeparator/OnyxSeparator.vue"]]);
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const OnyxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSeparator/OnyxSeparator.vue"]]);
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxInput",
   props: {
@@ -9772,10 +10387,10 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$s = { class: "onyx-input__wrapper" };
-const _hoisted_2$m = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "maxlength", "minlength", "aria-label", "title"];
-const _hoisted_3$g = ["aria-label", "title"];
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$t = { class: "onyx-input__wrapper" };
+const _hoisted_2$n = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "maxlength", "minlength", "aria-label", "title"];
+const _hoisted_3$h = ["aria-label", "title"];
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -9804,7 +10419,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$s, [
+          createElementVNode("div", _hoisted_1$t, [
             renderSlot(_ctx.$slots, "leading"),
             $setup.slots.leading ? (openBlock(), createBlock($setup["OnyxSeparator"], {
               key: 0,
@@ -9835,7 +10450,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
               minlength: $setup.props.minlength,
               "aria-label": $setup.props.hideLabel ? $setup.props.label : void 0,
               title: $setup.props.hideLabel ? $setup.props.label : void 0
-            }, $setup.restAttrs), null, 16, _hoisted_2$m), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$n), [
               [vModelDynamic, $setup.modelValue],
               [$setup["vCustomValidity"]]
             ]),
@@ -9849,7 +10464,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: _cache[1] || (_cache[1] = () => $setup.modelValue = "")
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconXSmall }, null, 8, ["icon"])
-            ], 8, _hoisted_3$g)) : createCommentVNode("v-if", true),
+            ], 8, _hoisted_3$h)) : createCommentVNode("v-if", true),
             !$setup.props.hideSuccessIcon && $setup.successMessages ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 3,
               class: "onyx-input__check-icon",
@@ -9881,9 +10496,9 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue"]]);
+const OnyxInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue"]]);
 const INPUT_TYPES = ["email", "password", "search", "tel", "text", "url"];
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "OnyxLink",
   props: {
     href: { type: String, required: false },
@@ -9900,7 +10515,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     $setup["OnyxRouterLink"],
     mergeProps({ class: "onyx-component onyx-link" }, $setup.routerLinkProps),
@@ -9922,8 +10537,8 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxLink = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue"]]);
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const OnyxLink = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue"]]);
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "OnyxMobileNavButton",
   props: {
     label: { type: String, required: true },
@@ -9945,12 +10560,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$r = { class: "onyx-component onyx-mobile-nav-button" };
-const _hoisted_2$l = ["aria-label", "disabled"];
-const _hoisted_3$f = { class: "onyx-mobile-nav-button__flyout" };
-const _hoisted_4$c = { class: "onyx-mobile-nav-button__menu" };
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$r, [
+const _hoisted_1$s = { class: "onyx-component onyx-mobile-nav-button" };
+const _hoisted_2$m = ["aria-label", "disabled"];
+const _hoisted_3$g = { class: "onyx-mobile-nav-button__flyout" };
+const _hoisted_4$d = { class: "onyx-mobile-nav-button__menu" };
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$s, [
     createElementVNode("button", {
       type: "button",
       class: normalizeClass(["onyx-mobile-nav-button__trigger", { "onyx-mobile-nav-button__trigger--active": $setup.props.open }]),
@@ -9961,12 +10576,12 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode($setup["OnyxIcon"], {
         icon: $setup.props.open ? $setup.iconX : $setup.props.icon
       }, null, 8, ["icon"])
-    ], 10, _hoisted_2$l),
+    ], 10, _hoisted_2$m),
     withDirectives(createElementVNode(
       "div",
-      _hoisted_3$f,
+      _hoisted_3$g,
       [
-        createElementVNode("div", _hoisted_4$c, [
+        createElementVNode("div", _hoisted_4$d, [
           $setup.props.headline ? (openBlock(), createBlock($setup["OnyxHeadline"], {
             key: 0,
             is: "h2",
@@ -9998,8 +10613,8 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("v-if", true)
   ]);
 }
-const OnyxMobileNavButton = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue"]]);
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const OnyxMobileNavButton = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue"]]);
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "OnyxModal",
   props: {
     density: { type: null, required: false },
@@ -10026,16 +10641,16 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$q = { class: "onyx-modal__header" };
-const _hoisted_2$k = { class: "onyx-modal__headline" };
-const _hoisted_3$e = { class: "onyx-modal__headline-content" };
-const _hoisted_4$b = ["id"];
-const _hoisted_5$9 = { class: "onyx-modal__body" };
-const _hoisted_6$7 = {
+const _hoisted_1$r = { class: "onyx-modal__header" };
+const _hoisted_2$l = { class: "onyx-modal__headline" };
+const _hoisted_3$f = { class: "onyx-modal__headline-content" };
+const _hoisted_4$c = ["id"];
+const _hoisted_5$a = { class: "onyx-modal__body" };
+const _hoisted_6$8 = {
   key: 0,
   class: "onyx-modal__footer"
 };
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps($setup.basicDialogProps, {
     modal: "",
     class: ["onyx-modal", $setup.densityClass],
@@ -10043,9 +10658,9 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$q, [
-        createElementVNode("div", _hoisted_2$k, [
-          createElementVNode("div", _hoisted_3$e, [
+      createElementVNode("div", _hoisted_1$r, [
+        createElementVNode("div", _hoisted_2$l, [
+          createElementVNode("div", _hoisted_3$f, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -10076,12 +10691,12 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
           class: "onyx-modal__description onyx-text--small"
         }, [
           renderSlot(_ctx.$slots, "description")
-        ], 8, _hoisted_4$b)) : createCommentVNode("v-if", true)
+        ], 8, _hoisted_4$c)) : createCommentVNode("v-if", true)
       ]),
-      createElementVNode("div", _hoisted_5$9, [
+      createElementVNode("div", _hoisted_5$a, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$7, [
+      !!$setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
         renderSlot(_ctx.$slots, "footer")
       ])) : createCommentVNode("v-if", true)
     ]),
@@ -10089,8 +10704,8 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class", "aria-describedby"]);
 }
-const OnyxModal = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxModal/OnyxModal.vue"]]);
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const OnyxModal = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxModal/OnyxModal.vue"]]);
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavAppArea",
   props: {
     link: { type: null, required: false, default: "/" },
@@ -10109,12 +10724,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$p = ["src", "alt"];
-const _hoisted_2$j = {
+const _hoisted_1$q = ["src", "alt"];
+const _hoisted_2$k = {
   key: 1,
   class: "onyx-text-small onyx-truncation-ellipsis"
 };
-function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxRouterLink"], mergeProps($setup.linkProps, {
     class: "onyx-component onyx-nav-app-area",
     "aria-label": $setup.buttonLabel
@@ -10128,10 +10743,10 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
           class: "onyx-nav-app-area__logo",
           width: "24",
           height: "24"
-        }, null, 8, _hoisted_1$p)) : createCommentVNode("v-if", true),
+        }, null, 8, _hoisted_1$q)) : createCommentVNode("v-if", true),
         $setup.props.appName ? (openBlock(), createElementBlock(
           "span",
-          _hoisted_2$j,
+          _hoisted_2$k,
           toDisplayString($setup.props.appName),
           1
           /* TEXT */
@@ -10142,8 +10757,8 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["aria-label"]);
 }
-const OnyxNavAppArea = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue"]]);
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const OnyxNavAppArea = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue"]]);
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectDialog",
   props: {
     open: { type: [Boolean, null], required: false, skipCheck: true, default: false },
@@ -10177,14 +10792,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$o = ["id"];
-const _hoisted_2$i = ["autofocus", "value", "checked", "aria-label"];
-const _hoisted_3$d = { class: "onyx-select-dialog__label" };
-const _hoisted_4$a = {
+const _hoisted_1$p = ["id"];
+const _hoisted_2$j = ["autofocus", "value", "checked", "aria-label"];
+const _hoisted_3$e = { class: "onyx-select-dialog__label" };
+const _hoisted_4$b = {
   key: 0,
   class: "onyx-text--small"
 };
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxModal"], mergeProps($setup.modalProps, {
     open: $setup.props.open,
     class: "onyx-select-dialog",
@@ -10254,7 +10869,7 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
                                   checked: $setup.props.modelValue === option.value,
                                   "aria-label": option.label,
                                   required: ""
-                                }, null, 8, _hoisted_2$i)
+                                }, null, 8, _hoisted_2$j)
                               ]),
                               _: 2
                               /* DYNAMIC */
@@ -10264,14 +10879,14 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
                           ),
                           createElementVNode(
                             "span",
-                            _hoisted_3$d,
+                            _hoisted_3$e,
                             toDisplayString(option.label),
                             1
                             /* TEXT */
                           ),
                           option.description ? (openBlock(), createElementBlock(
                             "p",
-                            _hoisted_4$a,
+                            _hoisted_4$b,
                             toDisplayString(option.description),
                             1
                             /* TEXT */
@@ -10293,7 +10908,7 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
           32
           /* NEED_HYDRATION */
         )
-      ], 40, _hoisted_1$o)
+      ], 40, _hoisted_1$p)
     ]),
     _: 2
     /* DYNAMIC */
@@ -10307,11 +10922,11 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "label"]);
 }
-const OnyxSelectDialog = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectDialog/OnyxSelectDialog.vue"]]);
+const OnyxSelectDialog = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectDialog/OnyxSelectDialog.vue"]]);
 const autoImage = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 206 110"><g clip-path="url(#auto-a)"><mask id="auto-d" fill="var(--onyx-color-neutral-grayscale-white)"><path d="M0 4a4 4 0 0 1 4-4h99v110H4a4 4 0 0 1-4-4z"/></mask><path fill="var(--onyx-color-neutral-steel-1200)" d="M0 4a4 4 0 0 1 4-4h99v110H4a4 4 0 0 1-4-4z"/><g filter="url(#auto-b)"><mask id="auto-c" fill="var(--onyx-color-neutral-grayscale-white)"><path d="M0 26h46v84H0z"/></mask><path fill="var(--onyx-color-neutral-steel-1100)" d="M0 26h46v84H0z"/><path fill="var(--onyx-color-neutral-steel-900)" d="M46 26h-1v84h2V26z" mask="url(#auto-c)"/></g><path fill="var(--onyx-color-neutral-steel-1100)" stroke="var(--onyx-color-neutral-steel-900)" d="M.5.5h281v25H.5z"/><path fill="var(--onyx-color-onyx-500)" d="M10 12.5a2.5 2.5 0 0 1 2.5-2.5h35a2.5 2.5 0 0 1 0 5h-35a2.5 2.5 0 0 1-2.5-2.5"/><path fill="var(--onyx-color-neutral-steel-900)" d="M68 12.5a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5M59 43a7 7 0 0 1 7-7h54a7 7 0 1 1 0 14H66a7 7 0 0 1-7-7m0 19a2 2 0 0 1 2-2h85a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h120a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h95a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2"/></g><path fill="var(--onyx-color-neutral-steel-900)" d="M-1 4a5 5 0 0 1 5-5h99v2H4a3 3 0 0 0-3 3zm104 107H4a5 5 0 0 1-5-5h2a3 3 0 0 0 3 3h99zm-99 0a5 5 0 0 1-5-5V4a5 5 0 0 1 5-5v2a3 3 0 0 0-3 3v102a3 3 0 0 0 3 3zM103 0v110z" mask="url(#auto-d)"/><g clip-path="url(#auto-e)"><mask id="auto-f" fill="var(--onyx-color-neutral-grayscale-white)"><path d="M103 0h99a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4h-99z"/></mask><path fill="var(--onyx-color-neutral-steel-100)" d="M103 0h99a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4h-99z"/><path fill="var(--onyx-color-neutral-grayscale-white)" stroke="var(--onyx-color-neutral-steel-300)" d="M.5.5h281v25H.5z"/><path fill="var(--onyx-color-neutral-steel-300)" d="M68 12.5a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5m48 0a2.5 2.5 0 0 1 2.5-2.5h33a2.5 2.5 0 1 1 0 5h-33a2.5 2.5 0 0 1-2.5-2.5m47 0a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5M59 43a7 7 0 0 1 7-7h54a7 7 0 1 1 0 14H66a7 7 0 0 1-7-7m0 19a2 2 0 0 1 2-2h85a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h120a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h95a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2"/></g><path fill="var(--onyx-color-neutral-steel-300)" d="M103-1h99a5 5 0 0 1 5 5h-2a3 3 0 0 0-3-3h-99zm104 107a5 5 0 0 1-5 5h-99v-2h99a3 3 0 0 0 3-3zm-104 4V0zM202-1a5 5 0 0 1 5 5v102a5 5 0 0 1-5 5v-2a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3z" mask="url(#auto-f)"/><defs><clipPath id="auto-a"><path fill="var(--onyx-color-neutral-grayscale-white)" d="M0 4a4 4 0 0 1 4-4h99v110H4a4 4 0 0 1-4-4z"/></clipPath><clipPath id="auto-e"><path fill="var(--onyx-color-neutral-grayscale-white)" d="M103 0h99a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4h-99z"/></clipPath><filter id="auto-b" width="62" height="100" x="-6" y="18" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_16217_22720"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_16217_22720" result="shape"/></filter></defs></svg>';
 const darkImage = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 206 110"><g clip-path="url(#dark-a)"><path fill="var(--onyx-color-neutral-steel-1200)" d="M0 4a4 4 0 0 1 4-4h198a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"/><g filter="url(#dark-b)"><mask id="dark-c" fill="#fff"><path d="M0 26h46v84H0z"/></mask><path fill="var(--onyx-color-neutral-steel-1100)" d="M0 26h46v84H0z"/><path fill="var(--onyx-color-neutral-steel-900)" d="M46 26h-1v84h2V26z" mask="url(#dark-c)"/></g><path fill="var(--onyx-color-neutral-steel-1100)" stroke="var(--onyx-color-neutral-steel-900)" d="M.5.5h281v25H.5z"/><path fill="var(--onyx-color-onyx-500)" d="M10 12.5a2.5 2.5 0 0 1 2.5-2.5h35a2.5 2.5 0 0 1 0 5h-35a2.5 2.5 0 0 1-2.5-2.5"/><path fill="var(--onyx-color-neutral-steel-900)" d="M68 12.5a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5m48 0a2.5 2.5 0 0 1 2.5-2.5h33a2.5 2.5 0 1 1 0 5h-33a2.5 2.5 0 0 1-2.5-2.5m47 0a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5M59 43a7 7 0 0 1 7-7h54a7 7 0 1 1 0 14H66a7 7 0 0 1-7-7m0 19a2 2 0 0 1 2-2h85a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h120a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h95a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2"/></g><path stroke="var(--onyx-color-neutral-steel-900)" d="M4 .5h198a3.5 3.5 0 0 1 3.5 3.5v102a3.5 3.5 0 0 1-3.5 3.5H4A3.5 3.5 0 0 1 .5 106V4A3.5 3.5 0 0 1 4 .5Z"/><defs><clipPath id="dark-a"><path fill="#fff" d="M0 4a4 4 0 0 1 4-4h198a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"/></clipPath><filter id="dark-b" width="62" height="100" x="-6" y="18" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_16217_22757"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_16217_22757" result="shape"/></filter></defs></svg>';
 const lightImage = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 206 110"><g clip-path="url(#light-a)"><path fill="var(--onyx-color-neutral-steel-100)" d="M0 4a4 4 0 0 1 4-4h198a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"/><g filter="url(#light-b)"><mask id="light-c" fill="var(--onyx-color-neutral-grayscale-white)"><path d="M0 26h46v84H0z"/></mask><path fill="var(--onyx-color-neutral-grayscale-white)" d="M0 26h46v84H0z"/><path fill="var(--onyx-color-neutral-steel-300)" d="M46 26h-1v84h2V26z" mask="url(#light-c)"/></g><path fill="var(--onyx-color-neutral-grayscale-white)" stroke="var(--onyx-color-neutral-steel-300)" d="M.5.5h281v25H.5z"/><path fill="var(--onyx-color-onyx-500)" d="M10 12.5a2.5 2.5 0 0 1 2.5-2.5h35a2.5 2.5 0 0 1 0 5h-35a2.5 2.5 0 0 1-2.5-2.5"/><path fill="var(--onyx-color-neutral-steel-300)" d="M68 12.5a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5m48 0a2.5 2.5 0 0 1 2.5-2.5h33a2.5 2.5 0 1 1 0 5h-33a2.5 2.5 0 0 1-2.5-2.5m47 0a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5M59 43a7 7 0 0 1 7-7h54a7 7 0 1 1 0 14H66a7 7 0 0 1-7-7m0 19a2 2 0 0 1 2-2h85a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h120a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h95a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2"/></g><path stroke="var(--onyx-color-neutral-steel-300)" d="M4 .5h198a3.5 3.5 0 0 1 3.5 3.5v102a3.5 3.5 0 0 1-3.5 3.5H4A3.5 3.5 0 0 1 .5 106V4A3.5 3.5 0 0 1 4 .5Z"/><defs><clipPath id="light-a"><path fill="var(--onyx-color-neutral-grayscale-white)" d="M0 4a4 4 0 0 1 4-4h198a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"/></clipPath><filter id="light-b" width="62" height="100" x="-6" y="18" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_16217_22745"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_16217_22745" result="shape"/></filter></defs></svg>';
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "OnyxColorSchemeDialog",
   props: {
     open: { type: [Boolean, null], required: false, skipCheck: true, default: false },
@@ -10352,7 +10967,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxSelectDialog"], mergeProps({ class: "onyx-color-scheme-dialog" }, $setup.selectDialogProps, {
     label: $setup.t("colorScheme.headline"),
     options: $setup.options,
@@ -10371,8 +10986,8 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["label", "options", "open"]);
 }
-const OnyxColorSchemeDialog = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/OnyxColorSchemeDialog.vue"]]);
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const OnyxColorSchemeDialog = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/OnyxColorSchemeDialog.vue"]]);
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "OnyxColorSchemeMenuItem",
   props: {
     modelValue: { type: String, required: true }
@@ -10391,8 +11006,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$n = { class: "onyx-color-scheme-menu-item__value" };
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$o = { class: "onyx-color-scheme-menu-item__value" };
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxMenuItem"], {
     class: "onyx-component onyx-color-scheme-menu-item",
     onClick: _cache[2] || (_cache[2] = ($event) => $setup.isOpen = true)
@@ -10407,7 +11022,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
         ),
         createElementVNode(
           "span",
-          _hoisted_1$n,
+          _hoisted_1$o,
           toDisplayString($setup.t(`colorScheme.${$setup.props.modelValue}.label`)),
           1
           /* TEXT */
@@ -10426,8 +11041,8 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   });
 }
-const OnyxColorSchemeMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.vue"]]);
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const OnyxColorSchemeMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.vue"]]);
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "OnyxLanguageMenuItem",
   props: {
     modelValue: { type: null, required: true },
@@ -10452,8 +11067,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$m = { class: "onyx-language-menu-item__value" };
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$n = { class: "onyx-language-menu-item__value" };
+function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxMenuItem"], {
     class: "onyx-component onyx-language-menu-item",
     onClick: _cache[2] || (_cache[2] = ($event) => $setup.isOpen = true)
@@ -10468,7 +11083,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
         ),
         createElementVNode(
           "span",
-          _hoisted_1$m,
+          _hoisted_1$n,
           toDisplayString($setup.currentValueLabel),
           1
           /* TEXT */
@@ -10499,8 +11114,8 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   });
 }
-const OnyxLanguageMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxLanguageMenuItem/OnyxLanguageMenuItem.vue"]]);
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const OnyxLanguageMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxLanguageMenuItem/OnyxLanguageMenuItem.vue"]]);
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavItemFacade",
   props: {
     link: { type: null, required: false },
@@ -10522,7 +11137,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxMenuItem"], mergeProps($setup.menuItemProps, {
     link: $setup.hasChildren && $setup.props.context !== "navbar" ? void 0 : $setup.props.link,
     class: {
@@ -10548,8 +11163,8 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["link", "class", "open"]);
 }
-const OnyxNavItemFacade = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItemFacade/OnyxNavItemFacade.vue"]]);
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const OnyxNavItemFacade = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItemFacade/OnyxNavItemFacade.vue"]]);
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxNavItem",
   props: {
@@ -10595,12 +11210,12 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$l = { class: "onyx-nav-item-wrapper__controls" };
-const _hoisted_2$h = {
+const _hoisted_1$m = { class: "onyx-nav-item-wrapper__controls" };
+const _hoisted_2$i = {
   role: "menu",
   class: "onyx-nav-item-wrapper__mobile-children"
 };
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -10616,7 +11231,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
           }
         }, $setup.rootAttrs),
         [
-          createElementVNode("div", _hoisted_1$l, [
+          createElementVNode("div", _hoisted_1$m, [
             createVNode($setup["OnyxButton"], {
               label: $setup.t("back"),
               mode: "plain",
@@ -10644,7 +11259,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
               /* STABLE_FRAGMENT */
             )) : createCommentVNode("v-if", true)
           ]),
-          createElementVNode("ul", _hoisted_2$h, [
+          createElementVNode("ul", _hoisted_2$i, [
             renderSlot(_ctx.$slots, "children")
           ])
         ],
@@ -10753,7 +11368,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-const OnyxNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue"]]);
+const OnyxNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue"]]);
 const useTimer = (endTime) => {
   const intervalId = ref();
   const timeLeft = ref(calculateTimeLeft(new Date(endTime.value).getTime()));
@@ -10814,7 +11429,7 @@ const timeToDurationString = (timeLeft) => {
   const { hours, minutes, seconds } = getTimeFragments(timeLeft);
   return `PT${hours}H${minutes}M${seconds}S`;
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "OnyxTimer",
   props: {
     endTime: { type: null, required: true },
@@ -10845,13 +11460,13 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$k = ["aria-label"];
-const _hoisted_2$g = {
+const _hoisted_1$l = ["aria-label"];
+const _hoisted_2$h = {
   key: 0,
   class: "onyx-timer__label"
 };
-const _hoisted_3$c = ["datetime"];
-function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$d = ["datetime"];
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: "onyx-component onyx-timer onyx-text onyx-truncation-ellipsis",
     role: "timer",
@@ -10859,7 +11474,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     !$setup.props.hideLabel ? (openBlock(), createElementBlock(
       "span",
-      _hoisted_2$g,
+      _hoisted_2$h,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
@@ -10867,11 +11482,11 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("time", {
       datetime: $setup.timeToDurationString($setup.timeLeft),
       class: "onyx-timer__time"
-    }, toDisplayString($setup.formattedTime), 9, _hoisted_3$c)
-  ], 8, _hoisted_1$k);
+    }, toDisplayString($setup.formattedTime), 9, _hoisted_3$d)
+  ], 8, _hoisted_1$l);
 }
-const OnyxTimer = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxTimer/OnyxTimer.vue"]]);
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const OnyxTimer = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxTimer/OnyxTimer.vue"]]);
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "UserMenuLayout",
   props: {
     isMobile: { type: Boolean, required: true },
@@ -10896,10 +11511,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$j = { class: "onyx-component" };
-const _hoisted_2$f = { class: "onyx-user-menu__footer onyx-text--small" };
-function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$j, [
+const _hoisted_1$k = { class: "onyx-component" };
+const _hoisted_2$g = { class: "onyx-user-menu__footer onyx-text--small" };
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$k, [
     $setup.props.isMobile ? (openBlock(), createElementBlock(
       Fragment,
       { key: 0 },
@@ -10943,7 +11558,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
       !!$setup.slots.footer ? {
         name: "footer",
         fn: withCtx(() => [
-          createElementVNode("div", _hoisted_2$f, [
+          createElementVNode("div", _hoisted_2$g, [
             renderSlot(_ctx.$slots, "footer")
           ])
         ]),
@@ -10952,8 +11567,8 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     ]), 1032, ["open", "label", "disabled"]))
   ]);
 }
-const UserMenuLayout = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue"]]);
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const UserMenuLayout = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue"]]);
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "OnyxUserMenu",
   props: {
     fullName: { type: String, required: true },
@@ -10987,16 +11602,16 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$i = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$e = { class: "onyx-user-menu__header" };
-const _hoisted_3$b = { class: "onyx-truncation-ellipsis" };
-const _hoisted_4$9 = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" };
-const _hoisted_5$8 = {
+const _hoisted_1$j = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$f = { class: "onyx-user-menu__header" };
+const _hoisted_3$c = { class: "onyx-truncation-ellipsis" };
+const _hoisted_4$a = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" };
+const _hoisted_5$9 = {
   key: 0,
   class: "onyx-user-menu__description onyx-text--small onyx-truncation-ellipsis"
 };
-const _hoisted_6$6 = { class: "onyx-user-menu__options" };
-function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_6$7 = { class: "onyx-user-menu__options" };
+function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["UserMenuLayout"], {
     "flyout-open": $setup.flyoutOpen,
     "onUpdate:flyoutOpen": _cache[0] || (_cache[0] = ($event) => $setup.flyoutOpen = $event),
@@ -11021,7 +11636,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
           ),
           createElementVNode(
             "span",
-            _hoisted_1$i,
+            _hoisted_1$j,
             toDisplayString($setup.props.fullName),
             1
             /* TEXT */
@@ -11032,7 +11647,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
       )
     ]),
     header: withCtx(() => [
-      createElementVNode("div", _hoisted_2$e, [
+      createElementVNode("div", _hoisted_2$f, [
         createVNode(
           $setup["OnyxAvatar"],
           mergeProps($setup.avatar, { size: "48px" }),
@@ -11040,17 +11655,17 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
           16
           /* FULL_PROPS */
         ),
-        createElementVNode("div", _hoisted_3$b, [
+        createElementVNode("div", _hoisted_3$c, [
           createElementVNode(
             "div",
-            _hoisted_4$9,
+            _hoisted_4$a,
             toDisplayString($setup.props.fullName),
             1
             /* TEXT */
           ),
           $setup.props.description ? (openBlock(), createElementBlock(
             "div",
-            _hoisted_5$8,
+            _hoisted_5$9,
             toDisplayString($setup.props.description),
             1
             /* TEXT */
@@ -11059,7 +11674,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     options: withCtx(() => [
-      createElementVNode("div", _hoisted_6$6, [
+      createElementVNode("div", _hoisted_6$7, [
         renderSlot(_ctx.$slots, "default")
       ])
     ]),
@@ -11075,8 +11690,8 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["flyout-open", "class", "is-mobile", "disabled"]);
 }
-const OnyxUserMenu = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue"]]);
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const OnyxUserMenu = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue"]]);
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavBar",
   props: {
     appName: { type: String, required: false },
@@ -11146,18 +11761,18 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$h = { class: "onyx-nav-bar__content onyx-grid-container" };
-const _hoisted_2$d = {
+const _hoisted_1$i = { class: "onyx-nav-bar__content onyx-grid-container" };
+const _hoisted_2$e = {
   key: 0,
   class: "onyx-nav-bar__mobile-page onyx-truncation-ellipsis"
 };
-const _hoisted_3$a = { role: "menubar" };
-const _hoisted_4$8 = { ref: "moreListRef" };
-const _hoisted_5$7 = {
+const _hoisted_3$b = { role: "menubar" };
+const _hoisted_4$9 = { ref: "moreListRef" };
+const _hoisted_5$8 = {
   key: 0,
   class: "onyx-nav-bar__mobile-context"
 };
-const _hoisted_6$5 = {
+const _hoisted_6$6 = {
   key: 0,
   class: "onyx-nav-bar__mobile-global-context"
 };
@@ -11166,7 +11781,7 @@ const _hoisted_8$3 = {
   key: 1,
   class: "onyx-nav-bar__context"
 };
-function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "header",
     {
@@ -11174,8 +11789,8 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component onyx-nav-bar", { "onyx-nav-bar--mobile": $setup.actualIsMobile }])
     },
     [
-      createElementVNode("div", _hoisted_1$h, [
-        $setup.actualIsMobile && $setup.slots.mobileActivePage && !$setup.isBurgerOpen && !$setup.isContextOpen ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
+      createElementVNode("div", _hoisted_1$i, [
+        $setup.actualIsMobile && $setup.slots.mobileActivePage && !$setup.isBurgerOpen && !$setup.isContextOpen ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
           renderSlot(_ctx.$slots, "mobileActivePage")
         ])) : $setup.props.appName || $setup.props.logoUrl || $setup.slots.appArea ? (openBlock(), createBlock($setup["OnyxNavAppArea"], mergeProps({
           key: 1,
@@ -11218,7 +11833,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                   "nav",
                   mergeProps({ class: "onyx-nav-bar__nav--mobile" }, $setup.nav),
                   [
-                    createElementVNode("ul", _hoisted_3$a, [
+                    createElementVNode("ul", _hoisted_3$b, [
                       renderSlot(_ctx.$slots, "default")
                     ])
                   ],
@@ -11264,7 +11879,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                       options: withCtx(() => [
                         createElementVNode(
                           "div",
-                          _hoisted_4$8,
+                          _hoisted_4$9,
                           null,
                           512
                           /* NEED_PATCH */
@@ -11289,8 +11904,8 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
           Fragment,
           { key: 4 },
           [
-            $setup.actualIsMobile ? (openBlock(), createElementBlock("div", _hoisted_5$7, [
-              $setup.slots.globalContextArea ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
+            $setup.actualIsMobile ? (openBlock(), createElementBlock("div", _hoisted_5$8, [
+              $setup.slots.globalContextArea ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
                 renderSlot(_ctx.$slots, "globalContextArea")
               ])) : createCommentVNode("v-if", true),
               $setup.slots.contextArea ? (openBlock(), createBlock($setup["OnyxMobileNavButton"], {
@@ -11325,7 +11940,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxNavBar = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue"]]);
+const OnyxNavBar = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue"]]);
 const useRelativeTimeFormat = (options) => {
   const { locale, t } = injectI18n();
   const format = computed(() => new Intl.RelativeTimeFormat(locale.value, unref(options.options)));
@@ -11373,7 +11988,7 @@ const useRelativeTimeFormat = (options) => {
     timeAgo
   };
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationCard",
   props: {
     density: { type: null, required: false },
@@ -11399,31 +12014,31 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$g = {
+const _hoisted_1$h = {
   key: 0,
   class: "onyx-notification-card-skeleton"
 };
-const _hoisted_2$c = {
+const _hoisted_2$d = {
   key: 1,
   class: "onyx-notification-card__content"
 };
-const _hoisted_3$9 = { class: "onyx-notification-card__header" };
-const _hoisted_4$7 = { class: "onyx-notification-card__header-container" };
-const _hoisted_5$6 = { class: "onyx-notification-card__header-container" };
-const _hoisted_6$4 = { class: "onyx-notification-card__created-at onyx-text--small" };
+const _hoisted_3$a = { class: "onyx-notification-card__header" };
+const _hoisted_4$8 = { class: "onyx-notification-card__header-container" };
+const _hoisted_5$7 = { class: "onyx-notification-card__header-container" };
+const _hoisted_6$5 = { class: "onyx-notification-card__created-at onyx-text--small" };
 const _hoisted_7$2 = { class: "onyx-notification-card__description onyx-text onyx-truncation-multiline" };
 const _hoisted_8$2 = {
   key: 0,
   class: "onyx-notification-card__actions onyx-density-compact"
 };
-function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
       class: normalizeClass(["onyx-component", "onyx-notification-card", $setup.densityClass])
     },
     [
-      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
+      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
         createVNode($setup["OnyxSkeleton"], { class: "onyx-notification-card-skeleton__header" }),
         (openBlock(), createElementBlock(
           Fragment,
@@ -11437,10 +12052,10 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         ))
-      ])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2$d, [
         createElementVNode("div", null, [
-          createElementVNode("div", _hoisted_3$9, [
-            createElementVNode("div", _hoisted_4$7, [
+          createElementVNode("div", _hoisted_3$a, [
+            createElementVNode("div", _hoisted_4$8, [
               $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
                 key: 0,
                 class: "onyx-notification-card__icon",
@@ -11458,7 +12073,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
                 /* STABLE */
               })
             ]),
-            createElementVNode("div", _hoisted_5$6, [
+            createElementVNode("div", _hoisted_5$7, [
               $setup.props.unread ? (openBlock(), createBlock($setup["OnyxBadge"], {
                 key: 0,
                 dot: ""
@@ -11478,7 +12093,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
               }, 8, ["label"])) : createCommentVNode("v-if", true)
             ])
           ]),
-          createElementVNode("div", _hoisted_6$4, [
+          createElementVNode("div", _hoisted_6$5, [
             createElementVNode(
               "span",
               null,
@@ -11507,8 +12122,8 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxNotificationCard = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationCard/OnyxNotificationCard.vue"]]);
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const OnyxNotificationCard = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationCard/OnyxNotificationCard.vue"]]);
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationDot",
   props: {
     hidden: { type: Boolean, required: false, default: false },
@@ -11522,9 +12137,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$f = { class: "onyx-component onyx-notification-dot" };
-function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$f, [
+const _hoisted_1$g = { class: "onyx-component onyx-notification-dot" };
+function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$g, [
     renderSlot(_ctx.$slots, "default"),
     !$setup.props.hidden ? (openBlock(), createBlock($setup["OnyxBadge"], {
       key: 0,
@@ -11534,8 +12149,8 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["color"])) : createCommentVNode("v-if", true)
   ]);
 }
-const OnyxNotificationDot = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationDot/OnyxNotificationDot.vue"]]);
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const OnyxNotificationDot = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationDot/OnyxNotificationDot.vue"]]);
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "OnyxPageLayout",
   props: {
     skeleton: { type: Boolean, required: false },
@@ -11552,20 +12167,20 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 0,
   class: "onyx-page__sidebar"
 };
-const _hoisted_2$b = { class: "onyx-page__main" };
-const _hoisted_3$8 = {
+const _hoisted_2$c = { class: "onyx-page__main" };
+const _hoisted_3$9 = {
   key: 1,
   class: "onyx-page__sidebar onyx-page__sidebar--right"
 };
-const _hoisted_4$6 = {
+const _hoisted_4$7 = {
   key: 2,
   class: "onyx-page__footer"
 };
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -11576,10 +12191,10 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
       ]])
     },
     [
-      $setup.slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
+      $setup.slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
         renderSlot(_ctx.$slots, "sidebar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("main", _hoisted_2$b, [
+      createElementVNode("main", _hoisted_2$c, [
         createElementVNode(
           "div",
           {
@@ -11592,10 +12207,10 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
           /* CLASS */
         )
       ]),
-      $setup.slots.sidebarRight ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
+      $setup.slots.sidebarRight ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
         renderSlot(_ctx.$slots, "sidebarRight")
       ])) : createCommentVNode("v-if", true),
-      $setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
+      $setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
         renderSlot(_ctx.$slots, "footer")
       ])) : createCommentVNode("v-if", true)
     ],
@@ -11603,8 +12218,8 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxPageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.vue"]]);
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const OnyxPageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.vue"]]);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "OnyxProgressItem",
   props: {
     density: { type: null, required: false },
@@ -11630,10 +12245,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$d = ["disabled"];
-const _hoisted_2$a = { class: "onyx-progress-item__indicator" };
-const _hoisted_3$7 = { class: "onyx-progress-item__label" };
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$e = ["disabled"];
+const _hoisted_2$b = { class: "onyx-progress-item__indicator" };
+const _hoisted_3$8 = { class: "onyx-progress-item__label" };
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-progress-item-skeleton", "onyx-text", $setup.densityClass])
@@ -11649,7 +12264,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     type: "button",
     disabled: $setup.props.disabled
   }, [
-    createElementVNode("span", _hoisted_2$a, [
+    createElementVNode("span", _hoisted_2$b, [
       $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 0,
         icon: $setup.icon
@@ -11667,7 +12282,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
         /* STABLE_FRAGMENT */
       ))
     ]),
-    createElementVNode("div", _hoisted_3$7, [
+    createElementVNode("div", _hoisted_3$8, [
       renderSlot(_ctx.$slots, "default", {
         label: $setup.props.label
       }, () => [
@@ -11678,9 +12293,9 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
         )
       ])
     ])
-  ], 10, _hoisted_1$d));
+  ], 10, _hoisted_1$e));
 }
-const OnyxProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressItem/OnyxProgressItem.vue"]]);
+const OnyxProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressItem/OnyxProgressItem.vue"]]);
 const PROGRESS_ITEM_STATUS = [
   "default",
   "active",
@@ -11688,7 +12303,7 @@ const PROGRESS_ITEM_STATUS = [
   "visited",
   "invalid"
 ];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "OnyxProgressSteps",
   props: {
     density: { type: null, required: false },
@@ -11743,8 +12358,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$c = { class: "onyx-progress-steps__scroll-container" };
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$d = { class: "onyx-progress-steps__scroll-container" };
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -11756,7 +12371,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$c, [
+      createElementVNode("div", _hoisted_1$d, [
         (openBlock(true), createElementBlock(
           Fragment,
           null,
@@ -11796,8 +12411,8 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxProgressSteps = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressSteps/OnyxProgressSteps.vue"]]);
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const OnyxProgressSteps = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressSteps/OnyxProgressSteps.vue"]]);
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxRadioButton",
   props: {
@@ -11832,8 +12447,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$b = ["required", "name", "value", "checked", "disabled", "autofocus"];
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$c = ["required", "name", "value", "checked", "disabled", "autofocus"];
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -11873,7 +12488,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
             checked: $setup.props.checked,
             disabled: $setup.disabled,
             autofocus: $setup.props.autofocus
-          }, $setup.restAttrs), null, 16, _hoisted_1$b)), [
+          }, $setup.restAttrs), null, 16, _hoisted_1$c)), [
             [$setup["vCustomValidity"]]
           ]),
           createElementVNode(
@@ -11894,8 +12509,8 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-const OnyxRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue"]]);
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const OnyxRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue"]]);
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "OnyxRadioGroup",
   props: {
     truncation: { type: null, required: false, default: "ellipsis" },
@@ -11942,19 +12557,19 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$a = ["disabled", "aria-label"];
-const _hoisted_2$9 = {
+const _hoisted_1$b = ["disabled", "aria-label"];
+const _hoisted_2$a = {
   key: 0,
   class: "onyx-radio-group__label"
 };
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("fieldset", {
     class: normalizeClass(["onyx-component", "onyx-radio-group", $setup.densityClass, $setup.requiredTypeClass]),
     disabled: $setup.disabled,
     role: "radiogroup",
     "aria-label": $setup.props.label
   }, [
-    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$9, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$a, [
       createVNode($setup["OnyxHeadline"], {
         is: "h3",
         class: normalizeClass($setup.requiredMarkerClass)
@@ -12021,11 +12636,11 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$a);
+  ], 10, _hoisted_1$b);
 }
-const OnyxRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue"]]);
+const OnyxRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue"]]);
 const LINK_TARGETS = ["_self", "_blank", "_parent", "_top"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSegmentedControlElement",
   props: {
@@ -12052,13 +12667,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$9 = ["id", "name", "value", "disabled", "aria-label", "autofocus", "checked"];
-const _hoisted_2$8 = ["for"];
-const _hoisted_3$6 = {
+const _hoisted_1$a = ["id", "name", "value", "disabled", "aria-label", "autofocus", "checked"];
+const _hoisted_2$9 = ["for"];
+const _hoisted_3$7 = {
   key: 1,
   class: "onyx-segmented-control-element__text"
 };
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     mergeProps($setup.rootAttrs, {
@@ -12078,7 +12693,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-label": $setup.props.label,
             autofocus: $setup.props.autofocus,
             checked: $setup.props.checked
-          }), null, 16, _hoisted_1$9)
+          }), null, 16, _hoisted_1$a)
         ]),
         _: 1
         /* STABLE */
@@ -12094,19 +12709,19 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
         !$setup.props.hideLabel ? (openBlock(), createElementBlock(
           "p",
-          _hoisted_3$6,
+          _hoisted_3$7,
           toDisplayString($setup.props.label),
           1
           /* TEXT */
         )) : createCommentVNode("v-if", true)
-      ], 8, _hoisted_2$8)
+      ], 8, _hoisted_2$9)
     ],
     16
     /* FULL_PROPS */
   );
 }
-const OnyxSegmentedControlElement = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControlElement/OnyxSegmentedControlElement.vue"]]);
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const OnyxSegmentedControlElement = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControlElement/OnyxSegmentedControlElement.vue"]]);
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "OnyxSegmentedControl",
   props: {
     density: { type: null, required: false },
@@ -12135,7 +12750,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-segmented-control-skeleton", $setup.densityClass])
@@ -12166,10 +12781,10 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxSegmentedControl = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControl/OnyxSegmentedControl.vue"]]);
+const OnyxSegmentedControl = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControl/OnyxSegmentedControl.vue"]]);
 const SELECT_ALIGNMENTS = ["full", "left", "right"];
 const MULTISELECT_TEXT_MODE = ["summary", "preview"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "OnyxSidebarItem",
   props: {
     density: { type: null, required: false },
@@ -12197,7 +12812,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.link ? (openBlock(), createBlock($setup["OnyxRouterLink"], mergeProps({
     key: 0,
     class: $setup.classes
@@ -12221,12 +12836,12 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxSidebarItem = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSidebar/modules/OnyxSidebarItem/OnyxSidebarItem.vue"]]);
+const OnyxSidebarItem = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSidebar/modules/OnyxSidebarItem/OnyxSidebarItem.vue"]]);
 const arrowSmallLeft = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.618 11.626H8.936l3.094-3.094-1.064-1.056-4.899 4.898 4.9 4.9 1.063-1.064-3.094-3.086h8.682z"/></svg>';
 const arrowSmallRight = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.026 7.476 11.97 8.532l3.086 3.094H6.382v1.498h8.674L11.97 16.21l1.056 1.063 4.9-4.898z"/></svg>';
 const sidebarArrowLeft = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.743 3.038H5.258A2.26 2.26 0 0 0 3 5.295V18.78a2.26 2.26 0 0 0 2.258 2.258H18.75a2.25 2.25 0 0 0 2.25-2.25V5.295a2.26 2.26 0 0 0-2.258-2.257M4.5 18.78V5.295c0-.42.338-.757.758-.757H8.25v15H5.258a.755.755 0 0 1-.758-.758m15 .008c0 .412-.337.75-.75.75h-9v-15h8.993c.42 0 .757.337.757.757z"/><path d="m15.218 8.558-3.48 3.48 3.48 3.48 1.064-1.058-2.422-2.423 2.422-2.422z"/></svg>';
 const sidebarArrowRight = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.743 3.038H5.258A2.26 2.26 0 0 0 3 5.295V18.78a2.26 2.26 0 0 0 2.258 2.258H18.75a2.25 2.25 0 0 0 2.25-2.25V5.295a2.26 2.26 0 0 0-2.258-2.257M4.5 18.78V5.295c0-.42.338-.757.758-.757H8.25v15H5.258a.755.755 0 0 1-.758-.758m15 .008c0 .412-.337.75-.75.75h-9v-15h8.993c.42 0 .757.337.757.757z"/><path d="m12.27 9.615 2.423 2.422-2.423 2.423 1.058 1.057 3.48-3.48-3.48-3.48z"/></svg>';
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "OnyxSidebar",
   props: {
     density: { type: null, required: false },
@@ -12314,18 +12929,18 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$8 = ["aria-label"];
-const _hoisted_2$7 = {
+const _hoisted_1$9 = ["aria-label"];
+const _hoisted_2$8 = {
   key: 0,
   class: "onyx-sidebar__header"
 };
-const _hoisted_3$5 = { class: "onyx-sidebar__body" };
-const _hoisted_4$5 = {
+const _hoisted_3$6 = { class: "onyx-sidebar__body" };
+const _hoisted_4$6 = {
   key: 1,
   class: "onyx-sidebar__footer"
 };
-const _hoisted_5$5 = { class: "onyx-sidebar__footer" };
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_5$6 = { class: "onyx-sidebar__footer" };
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return !$setup.props.temporary && !$setup.shouldCollapse ? (openBlock(), createElementBlock("aside", {
     key: 0,
     ref: "sidebarRef",
@@ -12339,20 +12954,20 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.props.label,
     style: normalizeStyle($setup.widthStyle)
   }, [
-    !!$setup.slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$7, [
+    !!$setup.slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$8, [
       renderSlot(_ctx.$slots, "header")
     ])) : createCommentVNode("v-if", true),
-    createElementVNode("div", _hoisted_3$5, [
+    createElementVNode("div", _hoisted_3$6, [
       renderSlot(_ctx.$slots, "default")
     ]),
-    !!$setup.slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$5, [
+    !!$setup.slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$6, [
       renderSlot(_ctx.$slots, "footer")
     ])) : createCommentVNode("v-if", true),
     $setup.props.resizable ? (openBlock(), createBlock($setup["OnyxResizeHandle"], mergeProps({
       key: 2,
       element: $setup.sidebarElement
     }, $setup.resizeHandleProps), null, 16, ["element"])) : createCommentVNode("v-if", true)
-  ], 14, _hoisted_1$8)) : (openBlock(), createBlock($setup["OnyxModal"], mergeProps({ key: 1 }, $setup.props.temporary, {
+  ], 14, _hoisted_1$9)) : (openBlock(), createBlock($setup["OnyxModal"], mergeProps({ key: 1 }, $setup.props.temporary, {
     ref: "modalRef",
     open: $setup.isModalOpen,
     "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.isModalOpen = $event),
@@ -12396,7 +13011,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     !!$setup.slots.footer ? {
       name: "footer",
       fn: withCtx(() => [
-        createElementVNode("div", _hoisted_5$5, [
+        createElementVNode("div", _hoisted_5$6, [
           renderSlot(_ctx.$slots, "footer")
         ])
       ]),
@@ -12404,8 +13019,376 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "class", "label", "density", "style", "alignment"]));
 }
-const OnyxSidebar = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSidebar/OnyxSidebar.vue"]]);
+const OnyxSidebar = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSidebar/OnyxSidebar.vue"]]);
 const SIDEBAR_ALIGNMENT = ["left", "right"];
+const __default__ = {};
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "OnyxSlider",
+  props: {
+    error: { type: [String, Object], required: false },
+    disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
+    showError: { type: null, required: false, default: FORM_INJECTED_SYMBOL },
+    density: { type: null, required: false },
+    autofocus: { type: Boolean, required: false },
+    id: { type: String, required: false },
+    name: { type: String, required: false },
+    label: { type: String, required: true },
+    labelTooltip: { type: String, required: false },
+    hideLabel: { type: Boolean, required: false },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
+    errorMessages: { type: Object, required: false },
+    message: { type: Object, required: false },
+    successMessages: { type: Object, required: false },
+    mode: { type: null, required: false, default: () => "single" },
+    modelValue: { type: null, required: true },
+    min: { type: Number, required: false, default: 0 },
+    max: { type: Number, required: false, default: 100 },
+    step: { type: Number, required: false, default: 1 },
+    shiftStep: { type: Number, required: false, default: (props) => {
+      const min = props.min ?? 0;
+      const max = props.max ?? 100;
+      const step = props.step ?? 1;
+      const stepMultiple = Math.max(1, Math.round((max - min) * 0.1 / step));
+      return stepMultiple * step;
+    } },
+    marks: { type: [Array, Boolean], required: false, default: false },
+    control: { type: null, required: false },
+    orientation: { type: null, required: false, default: "horizontal" },
+    disableTooltip: { type: Boolean, required: false },
+    discrete: { type: Boolean, required: false }
+  },
+  emits: ["validityChange", "update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const adjustMarkPosition = (percentage) => {
+      if (percentage <= 0) {
+        return "calc(0.25rem)";
+      }
+      if (percentage >= 100) {
+        return "calc(100% - 0.25rem)";
+      }
+      return `${percentage}%`;
+    };
+    const props = __props;
+    const emit = __emit;
+    const modelValue = useVModel({
+      props,
+      emit,
+      key: "modelValue"
+    });
+    const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
+    const formElementProps = useForwardProps(props, OnyxFormElement);
+    const messages = computed(() => getFormMessages(props.message));
+    const { densityClass } = useDensity(props);
+    const { disabled, showError } = useFormContext(props);
+    const errorClass = useErrorClass(showError);
+    const skeleton = useSkeletonContext(props);
+    const handleChange = (values) => {
+      emit("update:modelValue", values);
+    };
+    const handleDecreaseByIcon = () => {
+      if (disabled.value) return;
+      if (props.mode === "single") {
+        const currentValue = Number(modelValue.value ?? props.min);
+        const stepValue = props.shiftStep ?? props.step ?? 1;
+        const newValue = Math.max(currentValue - stepValue, props.min);
+        handleChange(newValue);
+      }
+    };
+    const handleIncreaseByIcon = () => {
+      if (disabled.value) return;
+      if (props.mode === "single") {
+        const currentValue = Number(modelValue.value ?? props.min);
+        const stepValue = props.shiftStep ?? props.step ?? 1;
+        const newValue = Math.min(currentValue + stepValue, props.max);
+        handleChange(newValue);
+      }
+    };
+    const { min, max, step, marks, orientation, label, discrete, shiftStep } = toRefs(props);
+    const thumbs = computed(
+      () => Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value]
+    );
+    const {
+      elements: { root, rail, track, thumbContainer, thumbInput, mark, markLabel },
+      state: { focusedThumbIndex, activeThumbIndex, marksList },
+      internals: { isMarkActive, valueToPercent, axis, normalizeValues: normalizeValues2 }
+    } = _unstableCreateSlider({
+      value: modelValue,
+      min,
+      max,
+      step,
+      label,
+      marks,
+      orientation,
+      discrete,
+      disabled,
+      shiftStep,
+      onChange: handleChange
+    });
+    watch(
+      () => [props.min, props.max, props.step, props.mode],
+      () => {
+        const normalized = normalizeValues2.value(
+          props.mode === "range" ? [Number(modelValue.value)] : modelValue.value
+        );
+        handleChange(props.mode === "range" ? normalized : normalized[0]);
+      }
+    );
+    const isValueControl = computed(() => props.control === "value");
+    const isIconControl = computed(() => props.control === "icon" && props.mode === "single");
+    const __returned__ = { adjustMarkPosition, props, emit, modelValue, vCustomValidity, errorMessages, formElementProps, messages, densityClass, disabled, showError, errorClass, skeleton, handleChange, handleDecreaseByIcon, handleIncreaseByIcon, min, max, step, marks, orientation, label, discrete, shiftStep, thumbs, root, rail, track, thumbContainer, thumbInput, mark, markLabel, focusedThumbIndex, activeThumbIndex, marksList, isMarkActive, valueToPercent, axis, normalizeValues: normalizeValues2, isValueControl, isIconControl, get iconMinusSmall() {
+      return iconMinusSmall;
+    }, get iconPlusSmall() {
+      return iconPlusSmall;
+    }, get applyLimits() {
+      return applyLimits;
+    }, OnyxFormElement, OnyxIconButton, OnyxSkeleton, OnyxTooltip, OnyxVisuallyHidden };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$8 = { class: "onyx-slider__container" };
+const _hoisted_2$7 = {
+  key: 0,
+  class: "onyx-slider__value-control-container",
+  role: "img",
+  tabindex: "-1"
+};
+const _hoisted_3$5 = {
+  key: 1,
+  class: "onyx-slider__icon-control-container"
+};
+const _hoisted_4$5 = ["disabled", "aria-label", "autofocus"];
+const _hoisted_5$5 = {
+  key: 2,
+  class: "onyx-slider__value-control-container",
+  role: "img",
+  tabindex: "-1"
+};
+const _hoisted_6$4 = {
+  key: 3,
+  class: "onyx-slider__icon-control-container"
+};
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.skeleton ? (openBlock(), createElementBlock(
+    "div",
+    {
+      key: 0,
+      class: normalizeClass([
+        "onyx-component",
+        "onyx-slider-skeleton",
+        $setup.densityClass,
+        {
+          "onyx-slider-skeleton--vertical": $setup.props.orientation === "vertical"
+        }
+      ])
+    },
+    [
+      !$setup.props.hideLabel ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
+        key: 0,
+        class: "onyx-slider-skeleton__label"
+      })) : createCommentVNode("v-if", true),
+      createVNode($setup["OnyxSkeleton"], { class: "onyx-slider-skeleton__block" })
+    ],
+    2
+    /* CLASS */
+  )) : (openBlock(), createElementBlock(
+    "div",
+    {
+      key: 1,
+      class: normalizeClass(["onyx-component onyx-slider", [
+        {
+          "onyx-slider--vertical": $setup.props.orientation === "vertical",
+          "onyx-slider--disabled": $setup.disabled,
+          "onyx-slider--is-active": $setup.activeThumbIndex !== -1
+        },
+        $setup.densityClass,
+        $setup.errorClass
+      ]])
+    },
+    [
+      createVNode($setup["OnyxFormElement"], mergeProps({
+        label: $setup.props.label
+      }, $setup.formElementProps, {
+        class: "onyx-slider__form-element",
+        message: $setup.messages,
+        "error-messages": $setup.errorMessages
+      }), {
+        default: withCtx(({ id: inputId }) => [
+          createElementVNode("div", _hoisted_1$8, [
+            $setup.isValueControl ? (openBlock(), createElementBlock(
+              "div",
+              _hoisted_2$7,
+              toDisplayString($setup.min),
+              1
+              /* TEXT */
+            )) : createCommentVNode("v-if", true),
+            $setup.isIconControl ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
+              createVNode($setup["OnyxIconButton"], {
+                disabled: $setup.disabled || Number($setup.modelValue ?? $setup.props.min) <= $setup.props.min,
+                label: $setup.props.label || inputId,
+                color: "neutral",
+                icon: $setup.iconMinusSmall,
+                tabindex: "0",
+                onClick: $setup.handleDecreaseByIcon
+              }, null, 8, ["disabled", "label", "icon"])
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode(
+              "span",
+              mergeProps({ class: "onyx-slider__root" }, $setup.root, {
+                onTouchstartPassive: _cache[0] || (_cache[0] = (...args) => $setup.root.onTouchstart && $setup.root.onTouchstart(...args))
+              }),
+              [
+                createElementVNode(
+                  "span",
+                  mergeProps({ class: "onyx-slider__rail" }, $setup.rail),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                ),
+                createElementVNode(
+                  "span",
+                  mergeProps({ class: "onyx-slider__track" }, $setup.track),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                ),
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList($setup.marksList, (markItem) => {
+                    return openBlock(), createElementBlock(
+                      Fragment,
+                      {
+                        key: markItem.value
+                      },
+                      [
+                        createElementVNode(
+                          "span",
+                          mergeProps({
+                            class: ["onyx-slider__mark", { "onyx-slider__mark--active": $setup.isMarkActive(markItem.value) }]
+                          }, { ref_for: true }, $setup.mark({ value: markItem.value, label: markItem.label }), {
+                            style: {
+                              [$setup.axis.position]: `${$setup.adjustMarkPosition($setup.applyLimits($setup.valueToPercent(markItem.value), 0, 100))}`
+                            }
+                          }),
+                          null,
+                          16
+                          /* FULL_PROPS */
+                        ),
+                        markItem.label ? (openBlock(), createElementBlock(
+                          "span",
+                          mergeProps({
+                            key: 0,
+                            class: "onyx-slider__mark-label"
+                          }, { ref_for: true }, $setup.markLabel({ value: markItem.value })),
+                          toDisplayString(markItem.label),
+                          17
+                          /* TEXT, FULL_PROPS */
+                        )) : createCommentVNode("v-if", true)
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                )),
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList($setup.thumbs, (value, index) => {
+                    return openBlock(), createElementBlock(
+                      "span",
+                      mergeProps({ key: index }, { ref_for: true }, $setup.thumbContainer({ value, index }), {
+                        class: ["onyx-slider__thumb", {
+                          "is-focus": $setup.focusedThumbIndex === index,
+                          "is-active": $setup.activeThumbIndex === index
+                        }]
+                      }),
+                      [
+                        createVNode($setup["OnyxTooltip"], {
+                          open: !$setup.props.disableTooltip && $setup.activeThumbIndex === index,
+                          text: String(value),
+                          position: $setup.props.orientation === "vertical" ? "right" : "bottom",
+                          alignment: "auto",
+                          class: "onyx-slider__thumb-tooltip"
+                        }, {
+                          default: withCtx(({ trigger }) => [
+                            createElementVNode(
+                              "span",
+                              mergeProps({ ref_for: true }, trigger),
+                              [
+                                createVNode(
+                                  $setup["OnyxVisuallyHidden"],
+                                  null,
+                                  {
+                                    default: withCtx(() => [
+                                      withDirectives(createElementVNode("input", mergeProps({ class: "onyx-slider__native" }, { ref_for: true }, $setup.thumbInput({ value, index }), {
+                                        disabled: $setup.disabled,
+                                        "aria-label": $setup.props.label || inputId,
+                                        autofocus: $setup.props.autofocus && index === 0
+                                      }), null, 16, _hoisted_4$5), [
+                                        [$setup["vCustomValidity"]]
+                                      ])
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  },
+                                  1024
+                                  /* DYNAMIC_SLOTS */
+                                )
+                              ],
+                              16
+                              /* FULL_PROPS */
+                            )
+                          ]),
+                          _: 2
+                          /* DYNAMIC */
+                        }, 1032, ["open", "text", "position"])
+                      ],
+                      16
+                      /* FULL_PROPS */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ],
+              16
+              /* FULL_PROPS */
+            ),
+            $setup.isValueControl ? (openBlock(), createElementBlock(
+              "div",
+              _hoisted_5$5,
+              toDisplayString($setup.max),
+              1
+              /* TEXT */
+            )) : createCommentVNode("v-if", true),
+            $setup.isIconControl ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
+              createVNode($setup["OnyxIconButton"], {
+                disabled: $setup.disabled || Number($setup.modelValue ?? $setup.props.min) >= $setup.props.max,
+                label: "Increase",
+                color: "neutral",
+                icon: $setup.iconPlusSmall,
+                tabindex: "0",
+                onClick: $setup.handleIncreaseByIcon
+              }, null, 8, ["disabled", "icon"])
+            ])) : createCommentVNode("v-if", true)
+          ])
+        ]),
+        _: 1
+        /* STABLE */
+      }, 16, ["label", "message", "error-messages"])
+    ],
+    2
+    /* CLASS */
+  ));
+}
+const OnyxSlider = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSlider/OnyxSlider.vue"]]);
+const SLIDER_CONTROLS = ["icon", "value", "input"];
+const SLIDER_MODES = ["single", "range"];
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxStepper",
@@ -14427,6 +15410,7 @@ export {
   OnyxToastMessage,
   OnyxTooltip,
   OnyxCalendar as OnyxUnstableCalendar,
+  OnyxSlider as OnyxUnstableSlider,
   OnyxUserMenu,
   OnyxVisuallyHidden,
   PROGRESS_ITEM_STATUS,
@@ -14434,6 +15418,8 @@ export {
   SELECT_ALIGNMENTS,
   SIDEBAR_ALIGNMENT,
   SKELETON_INJECTED_SYMBOL,
+  SLIDER_CONTROLS,
+  SLIDER_MODES,
   SUPPORTED_FILE_TYPE_ICON_MEDIA_TYPES,
   SYSTEM_BUTTON_COLORS,
   TABS_INJECTION_KEY,