npm - sit-onyx - Versions diffs - 1.3.0 → 1.4.0-dev-20251104083804 - Mend

sit-onyx 1.3.0 → 1.4.0-dev-20251104083804

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/components/OnyxCodeTab/OnyxCodeTab.d.vue.ts +33 -0
package/dist/components/OnyxCodeTab/types.d.ts +18 -0
package/dist/components/OnyxCodeTabs/OnyxCodeTabs.d.vue.ts +31 -0
package/dist/components/OnyxCodeTabs/types.d.ts +10 -0
package/dist/components/OnyxTabs/OnyxTabs.d.vue.ts +8 -0
package/dist/i18n/locales/de-DE.json +6 -0
package/dist/i18n/locales/en-US.json +6 -0
package/dist/i18n/locales/en-US.json.d.ts +6 -0
package/dist/index.d.ts +4 -0
package/dist/index.esm-bundler.js +917 -733
package/dist/index.esm-bundler.js.map +1 -1
package/dist/index.js +2504 -2370
package/dist/style.css +1 -1
package/package.json +2 -2

package/dist/index.esm-bundler.js CHANGED Viewed

@@ -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, 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";
+import { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconMoreVertical, iconX, iconMoreHorizontalSmall, iconCircleCheck, iconCircleX, iconCircleInformation, iconUser, iconArrowSmallUpRight, iconChevronRightSmall, iconArrowSmallLeft, iconMoreHorizontal, iconHome, iconChevronLeftSmall, iconFileCopy, 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$1H = /* @__PURE__ */ defineComponent({
+const _sfc_main$1J = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordion",
   props: {
     density: { type: null, required: false },
@@ -119,7 +119,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1J(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -137,7 +137,7 @@ function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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 OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$1J], ["__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$1G = /* @__PURE__ */ defineComponent({
+const _sfc_main$1I = /* @__PURE__ */ defineComponent({
   __name: "OnyxIcon",
   props: {
     size: { type: null, required: false },
@@ -166,8 +166,8 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1c = ["innerHTML"];
-function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1e = ["innerHTML"];
+function _sfc_render$1I(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass({
       "onyx-component": true,
@@ -178,9 +178,9 @@ function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     "aria-hidden": "true",
     innerHTML: $setup.props.icon
-  }, null, 10, _hoisted_1$1c);
+  }, null, 10, _hoisted_1$1e);
 }
-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 OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["render", _sfc_render$1I], ["__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$1F = /* @__PURE__ */ defineComponent({
+const _sfc_main$1H = /* @__PURE__ */ defineComponent({
   __name: "OnyxSkeleton",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -206,15 +206,15 @@ const _sfc_main$1F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1b = {
+const _hoisted_1$1d = {
   "aria-hidden": "true",
   class: "onyx-component onyx-skeleton"
 };
-function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("figure", _hoisted_1$1b);
+function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("figure", _hoisted_1$1d);
 }
-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({
+const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["render", _sfc_render$1H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordionItem",
   props: {
     density: { type: null, required: false },
@@ -251,11 +251,11 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1a = ["open"];
-const _hoisted_2$R = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
+const _hoisted_1$1c = ["open"];
+const _hoisted_2$S = ["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) {
+function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.showSkeleton ? (openBlock(), createBlock(resolveDynamicComponent($setup.type === "card" ? $setup.OnyxSkeleton : "div"), {
     key: 0,
     class: normalizeClass([
@@ -298,7 +298,7 @@ function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
         icon: $setup.iconChevronDownSmall,
         class: "onyx-accordion-item__header-icon"
       }, null, 8, ["icon"])
-    ], 8, _hoisted_2$R),
+    ], 8, _hoisted_2$S),
     createElementVNode("div", {
       id: $setup.panelId,
       class: "onyx-accordion-item__panel",
@@ -307,9 +307,9 @@ function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       renderSlot(_ctx.$slots, "default")
     ], 8, _hoisted_4$o)
-  ], 10, _hoisted_1$1a));
+  ], 10, _hoisted_1$1c));
 }
-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 OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$1G], ["__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" },
@@ -357,6 +357,7 @@ const globalFAB = { "label": "Global actions" };
 const calendar = { "todayButton": { "label": "Today", "tooltip": "Jump to today" }, "calendarWeek": "CW", "calendarWeekButtonLabel": "Select calendar week {weekNumber}", "previousMonthButton": "Previous month", "nextMonthButton": "Next month" };
 const flyoutMenu = { "moreActions": "More actions", "toggleActions": { "click": "Click to toggle action visibility", "hover": "Hover/Focus to toggle action visibility" } };
 const slider = { "decreaseValue": "Decrease value by {n}", "increaseValue": "Increase value by {n}" };
+const codeTabs = { "label": "Code snippets", "copySnippet": "Copy code", "copied": "Copied!", "tabLabel": "Code" };
 const enUS = {
   yes,
   no,
@@ -390,7 +391,8 @@ const enUS = {
   globalFAB,
   calendar,
   flyoutMenu,
-  slider
+  slider,
+  codeTabs
 };
 const NUMBER_FORMATS = {
   decimal: { style: "decimal" }
@@ -2120,7 +2122,7 @@ const createTooltip = createBuilder(({ debounce: debounce2, isVisible }) => {
     }
   };
 });
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicDialog",
   props: {
     density: { type: null, required: false },
@@ -2176,12 +2178,12 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$19 = ["aria-modal", "aria-label", "role"];
-const _hoisted_2$Q = {
+const _hoisted_1$1b = ["aria-modal", "aria-label", "role"];
+const _hoisted_2$R = {
   ref: "contentRef",
   class: "onyx-basic-dialog__content"
 };
-function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.open ? (openBlock(), createElementBlock("dialog", {
     key: 0,
     ref: "dialogRef",
@@ -2200,16 +2202,16 @@ function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode(
       "div",
-      _hoisted_2$Q,
+      _hoisted_2$R,
       [
         renderSlot(_ctx.$slots, "default")
       ],
       512
       /* NEED_PATCH */
     )
-  ], 42, _hoisted_1$19)) : createCommentVNode("v-if", true);
+  ], 42, _hoisted_1$1b)) : createCommentVNode("v-if", true);
 }
-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 OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$1F], ["__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());
@@ -2291,7 +2293,7 @@ const normalizeHref = (href) => {
   return value.replace(/\/+$/, "");
 };
 const ROUTER_INJECTION_KEY = Symbol();
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   __name: "OnyxVisuallyHidden",
   props: {
     is: { type: String, required: false, default: "span" }
@@ -2304,7 +2306,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1E(_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")
@@ -2313,8 +2315,8 @@ function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   });
 }
-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({
+const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "OnyxRouterLink",
   props: {
     href: { type: String, required: true },
@@ -2330,8 +2332,8 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$18 = ["href", "target", "rel"];
-function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1a = ["href", "target", "rel"];
+function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: normalizeClass([
       "onyx-component",
@@ -2355,10 +2357,10 @@ function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1
       /* STABLE */
     })) : createCommentVNode("v-if", true)
-  ], 10, _hoisted_1$18);
+  ], 10, _hoisted_1$1a);
 }
-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({
+const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "OnyxHeadline",
   props: {
     is: { type: null, required: true },
@@ -2383,7 +2385,7 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1C(_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}`])
@@ -2423,7 +2425,7 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["id", "class"]));
 }
-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 OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
 const useAutofocus = (inputRef, props) => {
   if (!props.autofocus) {
     return;
@@ -2474,7 +2476,7 @@ const useFormContext = (props) => {
     DEFAULT_FORM_INJECTION_CONTEXT
   )(toRef(props));
 };
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "ButtonOrLinkLayout",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -2497,8 +2499,8 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$17 = ["disabled", "type", "autofocus"];
-function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$19 = ["disabled", "type", "autofocus"];
+function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.linkProps ? (openBlock(), createBlock(
     $setup["OnyxRouterLink"],
     normalizeProps(mergeProps({ key: 0 }, $setup.linkProps)),
@@ -2519,10 +2521,10 @@ function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: $setup.props.autofocus
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1$17));
+  ], 8, _hoisted_1$19));
 }
-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({
+const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
+const _sfc_main$1A = /* @__PURE__ */ defineComponent({
   __name: "OnyxSystemButton",
   props: {
     disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
@@ -2543,7 +2545,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1y(_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-system-button-skeleton", $setup.props.icon ? "" : "onyx-system-button-skeleton--text"])
@@ -2575,8 +2577,8 @@ function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label", "title"]));
 }
-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({
+const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "OnyxAlertModal",
   props: {
     density: { type: null, required: false },
@@ -2601,11 +2603,11 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$16 = { class: "onyx-alert-modal__content" };
-const _hoisted_2$P = { class: "onyx-alert-modal__headline" };
+const _hoisted_1$18 = { class: "onyx-alert-modal__content" };
+const _hoisted_2$Q = { 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) {
+function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps({
     class: ["onyx-alert-modal", $setup.densityClass]
   }, $setup.dialogProps, {
@@ -2615,7 +2617,7 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$16, [
+      createElementVNode("div", _hoisted_1$18, [
         $setup.props.icon ? (openBlock(), createBlock(
           $setup["OnyxIcon"],
           mergeProps({
@@ -2627,7 +2629,7 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
           /* FULL_PROPS */
         )) : createCommentVNode("v-if", true),
         createElementVNode("div", null, [
-          createElementVNode("div", _hoisted_2$P, [
+          createElementVNode("div", _hoisted_2$Q, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -2666,7 +2668,7 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class", "aria-describedby"]);
 }
-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 OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
 const useRootAttrs = () => {
   const attrs = useAttrs();
   const rootAttrs = computed(
@@ -2748,7 +2750,7 @@ const mergeVueProps = (...args) => args.reduce((prev, curr) => {
   merged.ref = mergedRef;
   return merged;
 }, {});
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+const _sfc_main$1y = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABButton",
   props: {
     density: { type: null, required: false },
@@ -2768,11 +2770,11 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$15 = {
+const _hoisted_1$17 = {
   key: 1,
   class: "onyx-fab-button__label"
 };
-function _sfc_render$1w(_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-fab-button-skeleton", $setup.densityClass])
@@ -2790,7 +2792,7 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       !$setup.props.hideLabel ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_1$15,
+        _hoisted_1$17,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -2800,7 +2802,7 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "title", "aria-label", "link"]));
 }
-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 OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__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);
@@ -3112,7 +3114,7 @@ function useSticky(options) {
   });
   return { stickyStyles, scrolledOut, isSticky, checkVisibilityOnScroll };
 }
-const _sfc_main$1v = /* @__PURE__ */ defineComponent({
+const _sfc_main$1x = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicPopover",
   props: {
     label: { type: String, required: true },
@@ -3270,8 +3272,8 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$14 = ["role", "aria-label"];
-function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$16 = ["role", "aria-label"];
+function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3290,14 +3292,14 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle(!$setup.isSticky ? $setup.popoverStyles : $setup.stickyStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
-      ], 14, _hoisted_1$14)
+      ], 14, _hoisted_1$16)
     ],
     4
     /* STYLE */
   );
 }
-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({
+const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
+const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   __name: "OnyxFlyoutMenu",
   props: {
     alignment: { type: String, required: false, default: "auto" },
@@ -3339,9 +3341,9 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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) {
+const _hoisted_1$15 = { class: "onyx-flyout-menu__list-header" };
+const _hoisted_2$P = { class: "onyx-flyout-menu__list-footer" };
+function _sfc_render$1w(_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,
@@ -3350,7 +3352,7 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $props.disabled
   }), createSlots({
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$13, [
+      createElementVNode("div", _hoisted_1$15, [
         renderSlot(_ctx.$slots, "header")
       ]),
       $setup.slots.options ? (openBlock(), createElementBlock(
@@ -3362,7 +3364,7 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
         16
         /* FULL_PROPS */
       )) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$O, [
+      createElementVNode("div", _hoisted_2$P, [
         renderSlot(_ctx.$slots, "footer")
       ])
     ]),
@@ -3383,8 +3385,8 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "label", "alignment", "disabled"]);
 }
-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({
+const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "OnyxFAB",
   props: {
     density: { type: null, required: false },
@@ -3423,7 +3425,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1v(_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}`]
@@ -3453,8 +3455,8 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["open", "label", "class", "alignment"]));
 }
-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({
+const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABItem",
   props: {
     density: { type: null, required: false },
@@ -3477,7 +3479,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     mergeProps({
@@ -3492,7 +3494,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-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 OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__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([]);
@@ -3529,7 +3531,7 @@ const useGlobalFAB = () => {
   );
   return globalFABProvider;
 };
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   __name: "OnyxGlobalFAB",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3543,7 +3545,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1t(_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)),
@@ -3578,14 +3580,14 @@ function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["label", "alignment"])) : createCommentVNode("v-if", true);
 }
-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 = {
+const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
+const _sfc_main$1s = {};
+const _hoisted_1$14 = {
   class: "onyx-component onyx-circle-spinner",
   viewBox: "0 0 50 50"
 };
-function _sfc_render$1q(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$12, [..._cache[0] || (_cache[0] = [
+function _sfc_render$1s(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$14, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "circle",
       {
@@ -3600,11 +3602,11 @@ function _sfc_render$1q(_ctx, _cache) {
     )
   ])]);
 }
-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] = [
+const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
+const _sfc_main$1r = {};
+const _hoisted_1$13 = { class: "onyx-component onyx-loading-dots" };
+function _sfc_render$1r(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$13, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "span",
       { class: "onyx-loading-dots__center" },
@@ -3614,8 +3616,8 @@ function _sfc_render$1p(_ctx, _cache) {
     )
   ])]);
 }
-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({
+const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { type: String, required: false, default: "dots" }
@@ -3628,10 +3630,10 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1q(_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$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue"]]);
+const OnyxLoadingIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__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());
@@ -3678,7 +3680,7 @@ const useRipple = (container) => {
   });
   return { isPointerDown, ripples, startRipple, hideRipples, hideRipple, events };
 };
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   __name: "OnyxRipple",
   setup(__props, { expose: __expose }) {
     const rippleTrigger = useTemplateRef("rippleTriggerRef");
@@ -3691,16 +3693,16 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$10 = {
+const _hoisted_1$12 = {
   ref: "rippleTriggerRef",
   class: "onyx-component onyx-ripple",
   "aria-hidden": "true"
 };
-const _hoisted_2$N = ["data-rippleid"];
-function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$O = ["data-rippleid"];
+function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "span",
-    _hoisted_1$10,
+    _hoisted_1$12,
     [
       (openBlock(true), createElementBlock(
         Fragment,
@@ -3715,7 +3717,7 @@ function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             "data-rippleid": key,
             onAnimationend: _cache[0] || (_cache[0] = ($event) => $setup.hideRipple($event.target))
-          }, null, 44, _hoisted_2$N);
+          }, null, 44, _hoisted_2$O);
         }),
         128
         /* KEYED_FRAGMENT */
@@ -3725,8 +3727,8 @@ function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-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({
+const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "OnyxButton",
   props: {
     density: { type: null, required: false },
@@ -3756,8 +3758,8 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$$ = { class: "onyx-button__label onyx-truncation-ellipsis" };
-function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$11 = { class: "onyx-button__label onyx-truncation-ellipsis" };
+function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-button-skeleton", $setup.densityClass])
@@ -3794,7 +3796,7 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
       })) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_1$$,
+        _hoisted_1$11,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -3809,8 +3811,8 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label"]));
 }
-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({
+const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoCard",
   props: {
     density: { type: null, required: false },
@@ -3837,8 +3839,8 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$_ = { class: "onyx-info-card__content" };
-const _hoisted_2$M = {
+const _hoisted_1$10 = { class: "onyx-info-card__content" };
+const _hoisted_2$N = {
   key: 3,
   class: "onyx-info-card__description onyx-text--small"
 };
@@ -3846,7 +3848,7 @@ const _hoisted_3$y = {
   key: 4,
   class: "onyx-info-card__buttons onyx-density-compact"
 };
-function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3858,7 +3860,7 @@ function _sfc_render$1l(_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$_, [
+      createElementVNode("div", _hoisted_1$10, [
         $setup.props.headline ? (openBlock(), createBlock($setup["OnyxHeadline"], {
           key: 0,
           is: "h3",
@@ -3901,7 +3903,7 @@ function _sfc_render$1l(_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$M, [
+        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$N, [
           renderSlot(_ctx.$slots, "default")
         ])) : createCommentVNode("v-if", true),
         !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$y, [
@@ -3913,8 +3915,8 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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({
+const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationMessage",
   props: {
     headline: { type: String, required: true },
@@ -3932,7 +3934,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxInfoCard"], {
     class: normalizeClass(["onyx-component onyx-notification-message", [
       "onyx-component",
@@ -3965,7 +3967,7 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["class", "headline", "icon", "style", "aria-label"]);
 }
-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 OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$1m], ["__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;
@@ -4010,7 +4012,7 @@ const useNotification = () => {
   );
   return notificationsProvider;
 };
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotifications",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -4020,15 +4022,15 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Z = {
+const _hoisted_1$$ = {
   key: 0,
   class: "onyx-component onyx-notifications",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$Z, [
+function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$$, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -4080,8 +4082,8 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-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({
+const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "OnyxToastMessage",
   props: {
     density: { type: null, required: false },
@@ -4117,8 +4119,8 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Y = { class: "onyx-toast-message__wrapper" };
-const _hoisted_2$L = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
+const _hoisted_1$_ = { class: "onyx-toast-message__wrapper" };
+const _hoisted_2$M = { 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"];
@@ -4127,19 +4129,19 @@ const _hoisted_6$b = {
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
 };
-function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1k(_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$Y, [
+      createElementVNode("div", _hoisted_1$_, [
         $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
           key: 0,
           icon: $setup.icon
         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_2$L, [
+        createElementVNode("div", _hoisted_2$M, [
           createElementVNode("div", _hoisted_3$x, [
             createElementVNode(
               "span",
@@ -4185,7 +4187,7 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "role", "aria-label"]);
 }
-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 OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__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;
@@ -4228,7 +4230,7 @@ const useToast = () => {
   );
   return toastProvider;
 };
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "OnyxToast",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -4238,15 +4240,15 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$X = {
+const _hoisted_1$Z = {
   key: 0,
   class: "onyx-component onyx-toast",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$X, [
+function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$Z, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -4264,8 +4266,8 @@ function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-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({
+const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "OnyxAppLayout",
   props: {
     navBarAlignment: { type: String, required: false, default: "top" }
@@ -4279,22 +4281,22 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$W = {
+const _hoisted_1$Y = {
   key: 0,
   class: "onyx-app__nav"
 };
-const _hoisted_2$K = { class: "onyx-app__page" };
-function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$L = { class: "onyx-app__page" };
+function _sfc_render$1i(_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$W, [
+      $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$Y, [
         renderSlot(_ctx.$slots, "navBar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$K, [
+      createElementVNode("div", _hoisted_2$L, [
         renderSlot(_ctx.$slots, "default")
       ]),
       createVNode($setup["OnyxToast"]),
@@ -4305,8 +4307,8 @@ function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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({
+const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatar",
   props: {
     size: { type: null, required: false, default: "48px" },
@@ -4340,13 +4342,13 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$V = ["title", "aria-label"];
-const _hoisted_2$J = ["src", "alt"];
+const _hoisted_1$X = ["title", "aria-label"];
+const _hoisted_2$K = ["src", "alt"];
 const _hoisted_3$w = {
   key: 0,
   class: "onyx-avatar__initials"
 };
-function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass([
       "onyx-component",
@@ -4363,7 +4365,7 @@ function _sfc_render$1f(_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$J)) : (openBlock(), createElementBlock(
+    }, null, 40, _hoisted_2$K)) : (openBlock(), createElementBlock(
       Fragment,
       { key: 1 },
       [
@@ -4382,10 +4384,10 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
       64
       /* STABLE_FRAGMENT */
     ))
-  ], 10, _hoisted_1$V);
+  ], 10, _hoisted_1$X);
 }
-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({
+const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatarStack",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -4394,14 +4396,14 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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, [
+const _hoisted_1$W = { class: "onyx-component onyx-avatar-stack" };
+function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$W, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-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({
+const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "OnyxBadge",
   props: {
     density: { type: null, required: false },
@@ -4418,7 +4420,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -4449,8 +4451,8 @@ function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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({
+const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "OnyxBottomBar",
   props: {
     density: { type: null, required: false },
@@ -4465,10 +4467,10 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$T = { class: "onyx-bottom-bar__content onyx-grid-container" };
-const _hoisted_2$I = { class: "onyx-bottom-bar__content--left" };
+const _hoisted_1$V = { class: "onyx-bottom-bar__content onyx-grid-container" };
+const _hoisted_2$J = { 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) {
+function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -4480,8 +4482,8 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$T, [
-        createElementVNode("div", _hoisted_2$I, [
+      createElementVNode("div", _hoisted_1$V, [
+        createElementVNode("div", _hoisted_2$J, [
           renderSlot(_ctx.$slots, "left")
         ]),
         createElementVNode("div", _hoisted_3$v, [
@@ -4493,7 +4495,7 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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 OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
 const useMoreList = (options) => {
   const visibleElements = ref();
   const hiddenElements = ref();
@@ -4588,7 +4590,7 @@ const useMoreListChild = (injectionKey) => {
 };
 const BREADCRUMB_MORE_LIST_INJECTION_KEY = Symbol();
 const BREADCRUMB_MORE_LIST_TARGET_INJECTION_KEY = Symbol();
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "OnyxExternalLinkIcon",
   props: {
     href: { type: String, required: false },
@@ -4609,7 +4611,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.isVisible ? (openBlock(), createBlock($setup["OnyxIcon"], {
     key: 0,
     class: "onyx-component onyx-external-link-icon",
@@ -4617,8 +4619,8 @@ function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
     size: "16px"
   }, null, 8, ["icon"])) : createCommentVNode("v-if", true);
 }
-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({
+const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "OnyxListItem",
   props: {
     density: { type: null, required: false },
@@ -4637,7 +4639,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     {
@@ -4659,8 +4661,8 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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({
+const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMenuItem",
   props: {
@@ -4739,8 +4741,8 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$S = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$H = {
+const _hoisted_1$U = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$I = {
   key: 0,
   class: "onyx-menu-item__chevron"
 };
@@ -4749,7 +4751,7 @@ const _hoisted_3$u = {
   role: "menu",
   class: "onyx-menu-item__children"
 };
-function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OnyxMenuItem = resolveComponent("OnyxMenuItem", true);
   return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({
     selected: $setup.isActive,
@@ -4770,7 +4772,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("span", null, [
               createElementVNode(
                 "span",
-                _hoisted_1$S,
+                _hoisted_1$U,
                 toDisplayString($setup.props.label),
                 1
                 /* TEXT */
@@ -4784,7 +4786,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ])
           ]),
-          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$H, [
+          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$I, [
             createVNode($setup["OnyxIcon"], {
               icon: $setup.iconChevronRightSmall,
               size: "24px"
@@ -4835,8 +4837,8 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["selected", "active", "color", "disabled", "class"]);
 }
-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({
+const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxBreadcrumbItem",
   props: {
@@ -4862,7 +4864,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -4922,8 +4924,8 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-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({
+const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "OnyxMoreList",
   props: {
     injectionKey: { type: [Symbol, Object], required: true },
@@ -4956,7 +4958,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     resolveDynamicComponent($setup.props.is),
     {
@@ -4996,8 +4998,8 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-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({
+const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "OnyxBreadcrumb",
   props: {
     density: { type: null, required: false },
@@ -5023,13 +5025,13 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$R = ["aria-label", "aria-hidden"];
-const _hoisted_2$G = {
+const _hoisted_1$T = ["aria-label", "aria-hidden"];
+const _hoisted_2$H = {
   class: "onyx-breadcrumb__list onyx-grid-container",
   role: "menu"
 };
 const _hoisted_3$t = { ref: "moreListRef" };
-function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("nav", {
     class: normalizeClass([
       "onyx-component",
@@ -5040,7 +5042,7 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.t("breadcrumb.label"),
     "aria-hidden": $setup.props.skeleton
   }, [
-    createElementVNode("ol", _hoisted_2$G, [
+    createElementVNode("ol", _hoisted_2$H, [
       createVNode($setup["OnyxBreadcrumbItem"], {
         class: "onyx-breadcrumb__home",
         href: $setup.props.home?.link ?? "/",
@@ -5122,13 +5124,13 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
         /* FORWARDED */
       }, 8, ["injection-key"])
     ])
-  ], 10, _hoisted_1$R);
+  ], 10, _hoisted_1$T);
 }
-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 OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__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$15 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "OnyxCard",
   props: {
     density: { type: null, required: false },
@@ -5147,7 +5149,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$17(_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"]
   }), {
@@ -5158,8 +5160,8 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class"]);
 }
-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({
+const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTooltip",
   props: {
     density: { type: null, required: false },
@@ -5314,8 +5316,8 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Q = { class: "onyx-tooltip--content" };
-function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$S = { class: "onyx-tooltip--content" };
+function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -5331,7 +5333,7 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
           style: $setup.tooltipStyles
         }),
         [
-          createElementVNode("div", _hoisted_1$Q, [
+          createElementVNode("div", _hoisted_1$S, [
             $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 0,
               icon: $setup.props.icon,
@@ -5355,8 +5357,8 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, STYLE */
   );
 }
-const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "OnyxCalendarCell",
   props: {
     density: { type: null, required: false },
@@ -5386,8 +5388,8 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$P = { class: "onyx-calendar-cell__header" };
-const _hoisted_2$F = { class: "onyx-calendar-cell__date-container" };
+const _hoisted_1$R = { class: "onyx-calendar-cell__header" };
+const _hoisted_2$G = { class: "onyx-calendar-cell__date-container" };
 const _hoisted_3$s = {
   key: 1,
   class: "onyx-calendar-cell__date"
@@ -5396,7 +5398,7 @@ const _hoisted_4$l = {
   key: 0,
   class: "onyx-calendar-cell__main"
 };
-function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "td",
     {
@@ -5422,8 +5424,8 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }), {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$P, [
-            createElementVNode("div", _hoisted_2$F, [
+          createElementVNode("div", _hoisted_1$R, [
+            createElementVNode("div", _hoisted_2$G, [
               $setup.props.tooltipText ? (openBlock(), createBlock($setup["OnyxTooltip"], {
                 key: 0,
                 text: $setup.props.tooltipText,
@@ -5461,8 +5463,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$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendarCell/OnyxCalendarCell.vue"]]);
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "OnyxIconButton",
   props: {
     density: { type: null, required: false },
@@ -5487,7 +5489,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-icon-button-skeleton", $setup.densityClass])
@@ -5515,8 +5517,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$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTag",
   props: {
     density: { type: null, required: false },
@@ -5543,9 +5545,9 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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) {
+const _hoisted_1$Q = { class: "onyx-text onyx-truncation-ellipsis" };
+const _hoisted_2$F = { class: "onyx-text onyx-truncation-ellipsis" };
+function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-tag-skeleton", $setup.densityClass])
@@ -5568,7 +5570,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
           createElementVNode(
             "span",
-            _hoisted_1$O,
+            _hoisted_1$Q,
             toDisplayString($setup.props.label),
             1
             /* TEXT */
@@ -5599,7 +5601,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_2$E,
+        _hoisted_2$F,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -5609,10 +5611,10 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-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,
+const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
+const __default__$3 = {};
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
   __name: "OnyxCalendar",
   props: {
     density: { type: null, required: false },
@@ -5726,12 +5728,12 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$N = { class: "onyx-calendar__header" };
-const _hoisted_2$D = { class: "control-container time-control-container" };
+const _hoisted_1$P = { class: "onyx-calendar__header" };
+const _hoisted_2$E = { 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"];
-function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     {
@@ -5752,8 +5754,8 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component", "onyx-calendar", `onyx-calendar--${$setup.calendarSize}`, $setup.densityClass])
     },
     [
-      createElementVNode("div", _hoisted_1$N, [
-        createElementVNode("div", _hoisted_2$D, [
+      createElementVNode("div", _hoisted_1$P, [
+        createElementVNode("div", _hoisted_2$E, [
           createVNode($setup["OnyxSystemButton"], {
             label: $setup.t("calendar.todayButton.label"),
             class: "control-container__today-btn",
@@ -5892,7 +5894,7 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-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 OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__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.
@@ -6108,7 +6110,7 @@ const formatMinMax = (locale, type, value) => {
   };
   return date.toLocaleString(locale, format);
 };
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "OnyxErrorTooltip",
   props: {
     errorMessages: { type: Object, required: false },
@@ -6124,16 +6126,16 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$M = { class: "onyx-component" };
-const _hoisted_2$C = {
+const _hoisted_1$O = { class: "onyx-component" };
+const _hoisted_2$D = {
   key: 0,
   ref: "targetRef"
 };
-function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$M, [
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$O, [
     !$setup.tooltipError || $setup.props.disabled ? (openBlock(), createElementBlock(
       "div",
-      _hoisted_2$C,
+      _hoisted_2$D,
       null,
       512
       /* NEED_PATCH */
@@ -6166,8 +6168,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$_ = /* @__PURE__ */ defineComponent({
+const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxCheckbox",
   props: {
@@ -6214,10 +6216,10 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$L = ["title"];
-const _hoisted_2$B = { class: "onyx-checkbox__container" };
+const _hoisted_1$N = ["title"];
+const _hoisted_2$C = { class: "onyx-checkbox__container" };
 const _hoisted_3$q = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
-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",
     mergeProps({
@@ -6243,7 +6245,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["onyx-component onyx-checkbox", [$setup.requiredTypeClass, $setup.densityClass]]),
         title: $setup.title
       }, [
-        createElementVNode("div", _hoisted_2$B, [
+        createElementVNode("div", _hoisted_2$C, [
           $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
             key: 0,
             class: "onyx-checkbox__loading",
@@ -6296,13 +6298,13 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_1$L)
+      ], 10, _hoisted_1$N)
     ]),
     _: 1
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-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 OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__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)
@@ -6337,7 +6339,7 @@ const useCheckAll = (enabledOptionValues, modelValue, onChangeCallback) => {
     }
   };
 };
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoTooltip",
   props: {
     text: { type: String, required: true },
@@ -6373,9 +6375,9 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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, [
+const _hoisted_1$M = { class: "onyx-component onyx-info-tooltip" };
+function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$M, [
     $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)
@@ -6433,8 +6435,8 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ]);
 }
-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({
+const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "OnyxCheckboxGroup",
   props: {
     truncation: { type: null, required: false, default: "ellipsis" },
@@ -6492,18 +6494,18 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$J = ["disabled", "aria-label"];
-const _hoisted_2$A = {
+const _hoisted_1$L = ["disabled", "aria-label"];
+const _hoisted_2$B = {
   key: 0,
   class: "onyx-checkbox-group__label"
 };
-function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$_(_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$A, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$B, [
       createVNode($setup["OnyxHeadline"], { is: "h3" }, {
         default: withCtx(() => [
           createTextVNode(
@@ -6583,76 +6585,403 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$J);
+  ], 10, _hoisted_1$L);
 }
-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$X = /* @__PURE__ */ defineComponent({
-  __name: "OnyxEmpty",
+const OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue"]]);
+const CODE_TABS_INJECTION_KEY = Symbol();
+const TABS_INJECTION_KEY = Symbol();
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "OnyxTab",
   props: {
-    density: { type: null, required: false }
+    density: { type: null, required: false },
+    value: { type: null, required: true },
+    label: { type: String, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
   },
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const slots = useSlots();
     const { densityClass } = useDensity(props);
-    const __returned__ = { props, slots, densityClass, get iconCircleX() {
-      return iconCircleX;
-    }, OnyxIcon };
+    const tabsContext = inject(TABS_INJECTION_KEY, void 0);
+    const skeleton = useSkeletonContext(props);
+    const sizeClass = computed(() => `onyx-tab--${tabsContext?.size.value}`);
+    const attrs = useAttrs();
+    const tab = computed(
+      () => tabsContext?.headless.elements.tab.value({
+        value: props.value,
+        disabled: props.disabled || !!skeleton.value
+      })
+    );
+    const __returned__ = { props, densityClass, tabsContext, skeleton, sizeClass, attrs, tab, get mergeVueProps() {
+      return mergeVueProps;
+    }, OnyxSkeleton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-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$X(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$K = ["disabled"];
+const _hoisted_2$A = { class: "onyx-tab__label" };
+function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
-    "div",
-    {
-      class: normalizeClass(["onyx-component", "onyx-empty", $setup.densityClass])
-    },
+    Fragment,
+    null,
     [
-      renderSlot(_ctx.$slots, "icon", {}, () => [
-        createVNode($setup["OnyxIcon"], {
-          icon: $setup.iconCircleX,
-          size: "48px"
-        }, null, 8, ["icon"])
-      ]),
-      createElementVNode("div", _hoisted_1$I, [
-        renderSlot(_ctx.$slots, "default")
-      ]),
-      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$z, [
-        renderSlot(_ctx.$slots, "buttons")
-      ])) : createCommentVNode("v-if", true)
-    ],
-    2
-    /* CLASS */
-  );
-}
-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 },
-    striped: { type: Boolean, required: false, default: false },
-    withVerticalBorders: { type: Boolean, required: false, default: false },
-    withPageScrolling: { type: Boolean, required: false, default: false },
-    columnGroups: { type: Array, required: false },
-    scrollContainerAttrs: { type: Object, required: false },
-    truncation: { type: null, required: false, default: "multiline" }
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const slots = useSlots();
+      $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], mergeProps({
+        key: 0,
+        class: ["onyx-tab-skeleton", $setup.densityClass, $setup.sizeClass]
+      }, $setup.mergeVueProps($setup.tab, $setup.attrs)), null, 16, ["class"])) : (openBlock(), createElementBlock("button", mergeProps({
+        key: 1,
+        class: [
+          "onyx-component",
+          "onyx-tab",
+          $setup.densityClass,
+          $setup.sizeClass,
+          { "onyx-tab--selected": $setup.tab?.["aria-selected"] }
+        ]
+      }, $setup.mergeVueProps($setup.tab, $setup.attrs), {
+        type: "button",
+        disabled: $setup.props.disabled
+      }), [
+        createElementVNode("div", _hoisted_2$A, [
+          renderSlot(_ctx.$slots, "tab", {}, () => [
+            createTextVNode(
+              toDisplayString($setup.props.label),
+              1
+              /* TEXT */
+            )
+          ])
+        ])
+      ], 16, _hoisted_1$K)),
+      $setup.tabsContext?.panel.value ? (openBlock(), createBlock(Teleport, {
+        key: 2,
+        to: $setup.tabsContext?.panel.value,
+        defer: ""
+      }, [
+        $setup.tab?.["aria-selected"] ? (openBlock(), createElementBlock(
+          "div",
+          mergeProps(
+            { key: 0 },
+            $setup.mergeVueProps($setup.tabsContext?.headless.elements.tabpanel.value({ value: $setup.props.value }), $setup.attrs),
+            { class: "onyx-tab__panel" }
+          ),
+          [
+            renderSlot(_ctx.$slots, "default")
+          ],
+          16
+          /* FULL_PROPS */
+        )) : createCommentVNode("v-if", true)
+      ], 8, ["to"])) : createCommentVNode("v-if", true)
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const OnyxTab = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue"]]);
+const __default__$2 = {};
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  __name: "OnyxCodeTab",
+  props: {
+    value: { type: null, required: true },
+    label: { type: String, required: false },
+    disabled: { type: Boolean, required: false, default: void 0 },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
+    code: { type: String, required: true },
+    icon: { type: String, required: false },
+    language: { type: String, required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const { t } = injectI18n();
+    const tabProps = useForwardProps(props, OnyxTab);
+    const tabsContext = inject(CODE_TABS_INJECTION_KEY, void 0);
+    const label = computed(() => props.label ?? t.value("codeTabs.tabLabel"));
+    watch(
+      [() => props.value, () => props.code],
+      ([newValue, newCode], [oldValue]) => {
+        if (oldValue) {
+          tabsContext?.tabs.value.delete(oldValue);
+        }
+        tabsContext?.tabs.value.set(newValue, newCode);
+      },
+      { immediate: true }
+    );
+    onUnmounted(() => {
+      tabsContext?.tabs.value.delete(props.value);
+    });
+    const disabled = computed(() => {
+      if (props.disabled != void 0) return props.disabled;
+      return tabsContext && tabsContext.tabs.value.size <= 1;
+    });
+    const __returned__ = { props, t, tabProps, tabsContext, label, disabled, OnyxIcon, OnyxTab };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$J = {
+  key: 0,
+  class: "onyx-code-tab__language onyx-text--small"
+};
+function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["OnyxTab"], mergeProps($setup.tabProps, {
+    label: $setup.label,
+    class: "onyx-code-tab",
+    disabled: $setup.disabled
+  }), {
+    tab: withCtx(() => [
+      renderSlot(_ctx.$slots, "tab", {}, () => [
+        $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
+          key: 0,
+          icon: $setup.props.icon,
+          size: "16px"
+        }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
+        createTextVNode(
+          " " + toDisplayString($setup.label),
+          1
+          /* TEXT */
+        )
+      ])
+    ]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default", {}, () => [
+        createElementVNode("pre", null, [
+          createElementVNode(
+            "code",
+            null,
+            toDisplayString($setup.props.code),
+            1
+            /* TEXT */
+          )
+        ])
+      ]),
+      $setup.props.language ? (openBlock(), createElementBlock(
+        "span",
+        _hoisted_1$J,
+        toDisplayString($setup.props.language),
+        1
+        /* TEXT */
+      )) : createCommentVNode("v-if", true)
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["label", "disabled"]);
+}
+const OnyxCodeTab = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCodeTab/OnyxCodeTab.vue"]]);
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
+  __name: "OnyxTabs",
+  props: {
+    density: { type: null, required: false },
+    skeleton: { type: Boolean, required: false },
+    label: { type: String, required: true },
+    modelValue: { type: null, required: true },
+    stretched: { type: Boolean, required: false },
+    size: { type: String, required: false, default: "h2" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const { densityClass } = useDensity(props);
+    const modelValue = useVModel({
+      props,
+      emit,
+      key: "modelValue"
+    });
+    const headless = createTabs({
+      label: toRef(props, "label"),
+      selectedTab: toRef(() => modelValue.value),
+      onSelect: (tab) => modelValue.value = tab
+    });
+    const slots = useSlots();
+    const panel = useTemplateRef("panelRef");
+    provideSkeletonContext(props);
+    provide(TABS_INJECTION_KEY, {
+      headless,
+      panel,
+      size: toRef(props, "size")
+    });
+    const __returned__ = { props, emit, densityClass, modelValue, headless, slots, panel };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$I = { class: "onyx-tabs__header" };
+const _hoisted_2$z = {
+  key: 0,
+  class: "onyx-tabs__actions"
+};
+function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      ref: "panelRef",
+      class: normalizeClass([
+        "onyx-component",
+        "onyx-tabs",
+        $setup.densityClass,
+        { "onyx-tabs--stretched": $setup.props.stretched }
+      ])
+    },
+    [
+      createElementVNode("div", _hoisted_1$I, [
+        createElementVNode(
+          "div",
+          mergeProps($setup.headless.elements.tablist.value, { class: "onyx-tabs__tablist" }),
+          [
+            renderSlot(_ctx.$slots, "default")
+          ],
+          16
+          /* FULL_PROPS */
+        ),
+        $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2$z, [
+          renderSlot(_ctx.$slots, "actions")
+        ])) : createCommentVNode("v-if", true)
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const OnyxTabs = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.vue"]]);
+const __default__$1 = {};
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  __name: "OnyxCodeTabs",
+  props: {
+    skeleton: { type: Boolean, required: false },
+    modelValue: { type: null, required: true },
+    label: { type: String, required: false }
+  },
+  emits: ["update:modelValue", "copyCode"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const { t } = injectI18n();
+    const tabsProps = useForwardProps(props, OnyxTabs);
+    const modelValue = useVModel({
+      props,
+      emit,
+      key: "modelValue"
+    });
+    const tabs = ref(/* @__PURE__ */ new Map());
+    provide(CODE_TABS_INJECTION_KEY, { tabs });
+    const activeTabCode = computed(() => tabs.value.get(modelValue.value));
+    const isCopied = ref(false);
+    const handleCopy = async () => {
+      if (!activeTabCode.value) return;
+      await navigator.clipboard.writeText(activeTabCode.value);
+      isCopied.value = true;
+      setTimeout(() => isCopied.value = false, 3e3);
+    };
+    const __returned__ = { props, emit, t, tabsProps, modelValue, tabs, activeTabCode, isCopied, handleCopy, get iconFileCopy() {
+      return iconFileCopy;
+    }, OnyxSystemButton, OnyxTabs, OnyxTag };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["OnyxTabs"], mergeProps($setup.tabsProps, {
+    modelValue: $setup.modelValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.modelValue = $event),
+    class: "onyx-code-tabs",
+    label: $setup.props.label ?? $setup.t("codeTabs.label"),
+    size: "h3",
+    density: "compact"
+  }), {
+    actions: withCtx(() => [
+      !$setup.isCopied ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+        key: 0,
+        label: $setup.t("codeTabs.copySnippet"),
+        icon: $setup.iconFileCopy,
+        disabled: !$setup.activeTabCode,
+        onClick: $setup.handleCopy
+      }, null, 8, ["label", "icon", "disabled"])) : (openBlock(), createBlock($setup["OnyxTag"], {
+        key: 1,
+        label: $setup.t("codeTabs.copied"),
+        color: "success"
+      }, null, 8, ["label"]))
+    ]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["modelValue", "label"]);
+}
+const OnyxCodeTabs = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCodeTabs/OnyxCodeTabs.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$V = /* @__PURE__ */ defineComponent({
+  __name: "OnyxEmpty",
+  props: {
+    density: { type: null, required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const slots = useSlots();
+    const { densityClass } = useDensity(props);
+    const __returned__ = { props, slots, densityClass, get iconCircleX() {
+      return iconCircleX;
+    }, OnyxIcon };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$H = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
+const _hoisted_2$y = {
+  key: 0,
+  class: "onyx-empty__buttons"
+};
+function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: normalizeClass(["onyx-component", "onyx-empty", $setup.densityClass])
+    },
+    [
+      renderSlot(_ctx.$slots, "icon", {}, () => [
+        createVNode($setup["OnyxIcon"], {
+          icon: $setup.iconCircleX,
+          size: "48px"
+        }, null, 8, ["icon"])
+      ]),
+      createElementVNode("div", _hoisted_1$H, [
+        renderSlot(_ctx.$slots, "default")
+      ]),
+      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$y, [
+        renderSlot(_ctx.$slots, "buttons")
+      ])) : createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const OnyxEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$V], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.vue"]]);
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
+  __name: "OnyxTable",
+  props: {
+    density: { type: null, required: false },
+    striped: { type: Boolean, required: false, default: false },
+    withVerticalBorders: { type: Boolean, required: false, default: false },
+    withPageScrolling: { type: Boolean, required: false, default: false },
+    columnGroups: { type: Array, required: false },
+    scrollContainerAttrs: { type: Object, required: false },
+    truncation: { type: null, required: false, default: "multiline" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const slots = useSlots();
     const { t } = injectI18n();
     const { densityClass } = useDensity(props);
     const isEmptyMessage = computed(() => t.value("table.empty"));
@@ -6669,11 +6998,11 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$H = {
+const _hoisted_1$G = {
   key: 0,
   class: "onyx-table-wrapper__top"
 };
-const _hoisted_2$y = ["id"];
+const _hoisted_2$x = ["id"];
 const _hoisted_3$p = { class: "onyx-table-wrapper__actions" };
 const _hoisted_4$j = ["tabindex"];
 const _hoisted_5$e = ["aria-labelledby"];
@@ -6691,7 +7020,7 @@ const _hoisted_13 = {
   key: 1,
   class: "onyx-table-wrapper__bottom"
 };
-function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -6699,10 +7028,10 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
       style: normalizeStyle($setup.style)
     },
     [
-      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$H, [
+      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$G, [
         createElementVNode("div", { id: $setup.headlineId }, [
           renderSlot(_ctx.$slots, "headline")
-        ], 8, _hoisted_2$y),
+        ], 8, _hoisted_2$x),
         createElementVNode("div", _hoisted_3$p, [
           renderSlot(_ctx.$slots, "actions")
         ])
@@ -6795,8 +7124,8 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     /* STYLE */
   );
 }
-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({
+const OnyxTable = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue"]]);
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "OnyxDataGridRenderer",
   props: {
     density: { type: null, required: false },
@@ -6832,7 +7161,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$T(_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({
@@ -6939,8 +7268,8 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ]), 1040, ["scroll-container-attrs"]);
 }
-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({
+const OnyxDataGridRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$T], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue"]]);
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMiniSearch",
   props: {
@@ -6980,9 +7309,9 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$G = ["autofocus", "placeholder", "aria-label"];
-const _hoisted_2$x = ["aria-label"];
-function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$F = ["autofocus", "placeholder", "aria-label"];
+const _hoisted_2$w = ["aria-label"];
+function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -7001,7 +7330,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
         size: "1"
       }, $setup.restAttrs, {
         "aria-label": $setup.props.label
-      }), null, 16, _hoisted_1$G), [
+      }), null, 16, _hoisted_1$F), [
         [vModelText, $setup.modelValue]
       ]),
       createElementVNode("button", {
@@ -7014,7 +7343,7 @@ function _sfc_render$U(_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$x),
+      ], 40, _hoisted_2$w),
       createVNode($setup["OnyxIcon"], {
         class: "onyx-mini-search__icon",
         icon: $setup.iconSearch
@@ -7024,11 +7353,11 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-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 OnyxMiniSearch = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$S], ["__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$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "HeaderCell",
   props: {
     label: { type: String, required: true }
@@ -7042,17 +7371,17 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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_1$E = { class: "onyx-component onyx-data-grid-header-cell" };
+const _hoisted_2$v = { class: "onyx-data-grid-header-cell__label" };
 const _hoisted_3$o = {
   key: 0,
   class: "onyx-data-grid-header-cell__actions"
 };
-function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$F, [
+function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$E, [
     createElementVNode(
       "span",
-      _hoisted_2$w,
+      _hoisted_2$v,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
@@ -7062,7 +7391,7 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("v-if", true)
   ]);
 }
-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 HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__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);
@@ -7555,7 +7884,7 @@ const formatBytesToString = (locale, bytes) => {
     unitDisplay: "narrow"
   }).format(value);
 };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "OnyxInlinePagination",
   props: {
     density: { type: null, required: false },
@@ -7607,12 +7936,12 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$E = ["aria-label"];
-const _hoisted_2$v = ["aria-label", "disabled"];
+const _hoisted_1$D = ["aria-label"];
+const _hoisted_2$u = ["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) {
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass([
@@ -7641,7 +7970,7 @@ function _sfc_render$S(_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$v),
+    ], 8, _hoisted_2$u),
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -7701,9 +8030,9 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
     ], 8, _hoisted_5$d)
-  ], 10, _hoisted_1$E));
+  ], 10, _hoisted_1$D));
 }
-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 OnyxInlinePagination = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$Q], ["__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";
@@ -7713,7 +8042,7 @@ const useErrorClass = (showError) => computed(() => {
   }
   return "onyx-form-element--touched-invalid";
 });
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "FormMessage",
   props: {
     messages: { type: Object, required: true },
@@ -7727,17 +8056,17 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$D = {
+const _hoisted_1$C = {
   class: /* @__PURE__ */ normalizeClass(["onyx-truncation-ellipsis"])
 };
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_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$D,
+        _hoisted_1$C,
         toDisplayString($setup.props.messages.shortMessage),
         1
         /* TEXT */
@@ -7755,8 +8084,8 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class"]);
 }
-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({
+const FormMessage = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$P], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue"]]);
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "OnyxFormElement",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -7829,17 +8158,17 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$C = {
+const _hoisted_1$B = {
   key: 0,
   class: "onyx-form-element__label onyx-text--small"
 };
-const _hoisted_2$u = ["for"];
+const _hoisted_2$t = ["for"];
 const _hoisted_3$m = {
   key: 1,
   class: "onyx-form-element__footer onyx-text--small"
 };
 const _hoisted_4$h = { class: "onyx-form-element__footer-messages" };
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -7851,11 +8180,11 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
+      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$B, [
         createElementVNode("label", {
           for: $setup.props.id,
           class: "onyx-truncation-ellipsis"
-        }, toDisplayString($setup.props.label), 9, _hoisted_2$u),
+        }, toDisplayString($setup.props.label), 9, _hoisted_2$t),
         $setup.props.required ? (openBlock(), createElementBlock(
           "span",
           {
@@ -7926,8 +8255,8 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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({
+const OnyxFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$O], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue"]]);
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSelectInput",
   props: {
@@ -8010,9 +8339,9 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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) {
+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$N(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -8077,7 +8406,7 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
               autofocus: $setup.props.autofocus,
               autocomplete: "off",
               onKeydown: $setup.blockTyping
-            }), null, 16, _hoisted_1$B), [
+            }), null, 16, _hoisted_1$A), [
               [$setup["vCustomValidity"]]
             ]),
             $setup.props.textMode === "preview" && $setup.selectionCount > 0 ? (openBlock(), createBlock($setup["OnyxTooltip"], {
@@ -8116,7 +8445,7 @@ function _sfc_render$P(_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$t),
+            ], 8, _hoisted_2$s),
             !$setup.props.hideSuccessIcon && $setup.successMessages ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 2,
               class: "onyx-select-input__check-icon",
@@ -8133,8 +8462,8 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-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({
+const OnyxSelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$N], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue"]]);
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectOption",
   props: {
     active: { type: Boolean, required: false, default: false },
@@ -8153,8 +8482,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$A = ["checked", "aria-labelledby", "disabled", "indeterminate"];
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$z = ["checked", "aria-labelledby", "disabled", "indeterminate"];
+function _sfc_render$M(_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"],
@@ -8171,7 +8500,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
         tabindex: "-1",
         class: "onyx-select-option__checkbox",
         type: "checkbox"
-      }, null, 8, _hoisted_1$A)) : createCommentVNode("v-if", true),
+      }, null, 8, _hoisted_1$z)) : createCommentVNode("v-if", true),
       $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 1,
         icon: $setup.props.icon
@@ -8192,8 +8521,8 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["checked", "selected", "disabled"]);
 }
-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({
+const OnyxSelectOption = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$M], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue"]]);
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelect",
   props: {
     density: { type: null, required: false },
@@ -8463,11 +8792,11 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$z = {
+const _hoisted_1$y = {
   ref: "selectRef",
   class: "onyx-component onyx-select-wrapper"
 };
-const _hoisted_2$s = {
+const _hoisted_2$r = {
   class: "onyx-select__wrapper",
   tabindex: "-1"
 };
@@ -8497,10 +8826,10 @@ const _hoisted_8$4 = {
   key: 0,
   class: "onyx-select__description onyx-text--small"
 };
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
-    _hoisted_1$z,
+    _hoisted_1$y,
     [
       createVNode($setup["OnyxBasicPopover"], {
         class: normalizeClass($setup.densityClass),
@@ -8519,7 +8848,7 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
           }), null, 16, ["show-focus", "autofocus"])
         ]),
         content: withCtx(() => [
-          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$s, [
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$r, [
             $setup.props.withSearch ? (openBlock(), createBlock($setup["OnyxMiniSearch"], mergeProps({
               key: 0,
               ref: "miniSearchRef",
@@ -8689,9 +9018,9 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-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 OnyxSelect = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$L], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue"]]);
 const pageSize = 100;
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectPagination",
   props: {
     density: { type: null, required: false },
@@ -8743,11 +9072,11 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$y = ["aria-label"];
-const _hoisted_2$r = { class: "onyx-pagination__count" };
+const _hoisted_1$x = ["aria-label"];
+const _hoisted_2$q = { 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) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-pagination-skeleton", "onyx-text", $setup.densityClass])
@@ -8778,7 +9107,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["search-term", "label", "list-label", "options", "model-value", "value-label", "disabled"]),
     createElementVNode(
       "div",
-      _hoisted_2$r,
+      _hoisted_2$q,
       toDisplayString($setup.t("pagination.ofPages", { n: $setup.props.pages, pages: $setup.n($setup.props.pages, "decimal") })),
       1
       /* TEXT */
@@ -8801,10 +9130,10 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
     ], 8, _hoisted_4$f)
-  ], 14, _hoisted_1$y));
+  ], 14, _hoisted_1$x));
 }
-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({
+const OnyxSelectPagination = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxSelectPagination.vue"]]);
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "OnyxPagination",
   props: {
     density: { type: null, required: false },
@@ -8825,7 +9154,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.type === "inline" ? (openBlock(), createBlock(
     $setup["OnyxInlinePagination"],
     mergeProps({ key: 0 }, $setup.paginationProps, {
@@ -8844,7 +9173,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-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 OnyxPagination = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__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) => {
@@ -9122,7 +9451,7 @@ const BASE_FEATURE = (options) => createFeature(({ skeleton }) => {
     }
   };
 });
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxDataGrid",
   props: {
@@ -9201,7 +9530,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxDataGridRenderer"], mergeProps(
     {
       "column-groups": $setup.rendererColumnGroups,
@@ -9236,7 +9565,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["column-groups", "columns", "rows", "scroll-container-attrs"]);
 }
-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 OnyxDataGrid = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__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) => {
@@ -9342,7 +9671,7 @@ const useHideColumns = (options) => createFeature((ctx) => {
     }
   };
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "OnyxResizeHandle",
   props: {
     element: { type: null, required: true },
@@ -9417,7 +9746,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "button",
     {
@@ -9451,7 +9780,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, NEED_HYDRATION */
   );
 }
-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 OnyxResizeHandle = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H], ["__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) => {
@@ -9593,7 +9922,7 @@ const DEFAULT_COMPARES = Object.freeze({
   skeleton: () => 0,
   boolean: BOOLEAN_COMPARE
 });
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "SortAction",
   props: {
     columnLabel: { type: String, required: true },
@@ -9617,14 +9946,14 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_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$I, [["render", _sfc_render$I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue"]]);
+const SortAction = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue"]]);
 const nextSortDirection = (current, skipNone) => {
   switch (current) {
     case "asc":
@@ -9867,7 +10196,7 @@ const all = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   useSorting,
   useStickyColumns
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxDatePicker",
   props: {
@@ -9934,9 +10263,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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) {
+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$F(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -9965,7 +10294,7 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$x, [
+          createElementVNode("div", _hoisted_1$w, [
             $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
               key: 0,
               class: "onyx-datepicker__loading",
@@ -9987,7 +10316,7 @@ function _sfc_render$H(_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$q)), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$p)), [
               [vModelDynamic, $setup.value],
               [$setup["vCustomValidity"]]
             ])
@@ -10001,9 +10330,9 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-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 OnyxDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue"]]);
 const DIALOG_ALIGNMENTS = ["left", "center", "right"];
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "OnyxDialog",
   props: {
     density: { type: null, required: false },
@@ -10037,15 +10366,15 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$w = { class: "onyx-dialog__header" };
-const _hoisted_2$p = { class: "onyx-dialog__headline" };
+const _hoisted_1$v = { class: "onyx-dialog__header" };
+const _hoisted_2$o = { 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$G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$E(_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),
@@ -10055,8 +10384,8 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "trigger", { trigger })
     ]),
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$w, [
-        createElementVNode("div", _hoisted_2$p, [
+      createElementVNode("div", _hoisted_1$v, [
+        createElementVNode("div", _hoisted_2$o, [
           createElementVNode("div", _hoisted_3$j, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
@@ -10094,8 +10423,8 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["open", "class"]);
 }
-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({
+const OnyxDialog = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue"]]);
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "OnyxForm",
   props: {
     disabled: { type: Boolean, required: false, default: false },
@@ -10115,7 +10444,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "form",
     {
@@ -10132,10 +10461,10 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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 OnyxForm = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$D], ["__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$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxImage",
   props: {
@@ -10174,10 +10503,10 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$v = ["src", "alt"];
-const _hoisted_2$o = ["src", "alt"];
+const _hoisted_1$u = ["src", "alt"];
+const _hoisted_2$n = ["src", "alt"];
 const _hoisted_3$i = { class: "onyx-image__alt onyx-text--small" };
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "figure",
     mergeProps($setup.rootAttrs, {
@@ -10202,7 +10531,7 @@ function _sfc_render$E(_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$v),
+          }), null, 16, _hoisted_1$u),
           $setup.imageSrc.dark ? (openBlock(), createElementBlock("img", mergeProps({
             key: 0,
             class: "onyx-image__source onyx-image__source--dark"
@@ -10210,7 +10539,7 @@ function _sfc_render$E(_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$o)) : createCommentVNode("v-if", true),
+          }), null, 16, _hoisted_2$n)) : createCommentVNode("v-if", true),
           $setup.isError ? (openBlock(), createElementBlock(
             "div",
             mergeProps({
@@ -10243,7 +10572,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-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 OnyxImage = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__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();
@@ -10284,7 +10613,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$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "OnyxSeparator",
   props: {
     orientation: { type: null, required: false, default: "horizontal" }
@@ -10301,16 +10630,16 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$u = ["aria-orientation"];
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$t = ["aria-orientation"];
+function _sfc_render$B(_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$u);
+  }, null, 10, _hoisted_1$t);
 }
-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({
+const OnyxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSeparator/OnyxSeparator.vue"]]);
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxInput",
   props: {
@@ -10399,10 +10728,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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_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$h = ["aria-label", "title"];
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -10431,7 +10760,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$t, [
+          createElementVNode("div", _hoisted_1$s, [
             renderSlot(_ctx.$slots, "leading"),
             $setup.slots.leading ? (openBlock(), createBlock($setup["OnyxSeparator"], {
               key: 0,
@@ -10462,7 +10791,7 @@ function _sfc_render$C(_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$n), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$m), [
               [vModelDynamic, $setup.modelValue],
               [$setup["vCustomValidity"]]
             ]),
@@ -10508,9 +10837,9 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-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 OnyxInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$A], ["__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$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "OnyxLink",
   props: {
     href: { type: String, required: false },
@@ -10527,7 +10856,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     $setup["OnyxRouterLink"],
     mergeProps({ class: "onyx-component onyx-link" }, $setup.routerLinkProps),
@@ -10549,8 +10878,8 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-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({
+const OnyxLink = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue"]]);
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "OnyxMobileNavButton",
   props: {
     label: { type: String, required: true },
@@ -10572,12 +10901,12 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$s = { class: "onyx-component onyx-mobile-nav-button" };
-const _hoisted_2$m = ["aria-label", "disabled"];
+const _hoisted_1$r = { class: "onyx-component onyx-mobile-nav-button" };
+const _hoisted_2$l = ["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, [
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$r, [
     createElementVNode("button", {
       type: "button",
       class: normalizeClass(["onyx-mobile-nav-button__trigger", { "onyx-mobile-nav-button__trigger--active": $setup.props.open }]),
@@ -10588,7 +10917,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode($setup["OnyxIcon"], {
         icon: $setup.props.open ? $setup.iconX : $setup.props.icon
       }, null, 8, ["icon"])
-    ], 10, _hoisted_2$m),
+    ], 10, _hoisted_2$l),
     withDirectives(createElementVNode(
       "div",
       _hoisted_3$g,
@@ -10625,8 +10954,8 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("v-if", true)
   ]);
 }
-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({
+const OnyxMobileNavButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue"]]);
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "OnyxModal",
   props: {
     density: { type: null, required: false },
@@ -10653,8 +10982,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$r = { class: "onyx-modal__header" };
-const _hoisted_2$l = { class: "onyx-modal__headline" };
+const _hoisted_1$q = { class: "onyx-modal__header" };
+const _hoisted_2$k = { 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" };
@@ -10662,7 +10991,7 @@ const _hoisted_6$8 = {
   key: 0,
   class: "onyx-modal__footer"
 };
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps($setup.basicDialogProps, {
     modal: "",
     class: ["onyx-modal", $setup.densityClass],
@@ -10670,8 +10999,8 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$r, [
-        createElementVNode("div", _hoisted_2$l, [
+      createElementVNode("div", _hoisted_1$q, [
+        createElementVNode("div", _hoisted_2$k, [
           createElementVNode("div", _hoisted_3$f, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
@@ -10716,8 +11045,8 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class", "aria-describedby"]);
 }
-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({
+const OnyxModal = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxModal/OnyxModal.vue"]]);
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavAppArea",
   props: {
     link: { type: null, required: false, default: "/" },
@@ -10736,12 +11065,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$q = ["src", "alt"];
-const _hoisted_2$k = {
+const _hoisted_1$p = ["src", "alt"];
+const _hoisted_2$j = {
   key: 1,
   class: "onyx-text-small onyx-truncation-ellipsis"
 };
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$w(_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
@@ -10755,10 +11084,10 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
           class: "onyx-nav-app-area__logo",
           width: "24",
           height: "24"
-        }, null, 8, _hoisted_1$q)) : createCommentVNode("v-if", true),
+        }, null, 8, _hoisted_1$p)) : createCommentVNode("v-if", true),
         $setup.props.appName ? (openBlock(), createElementBlock(
           "span",
-          _hoisted_2$k,
+          _hoisted_2$j,
           toDisplayString($setup.props.appName),
           1
           /* TEXT */
@@ -10769,8 +11098,8 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["aria-label"]);
 }
-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({
+const OnyxNavAppArea = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue"]]);
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectDialog",
   props: {
     open: { type: [Boolean, null], required: false, skipCheck: true, default: false },
@@ -10804,14 +11133,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$p = ["id"];
-const _hoisted_2$j = ["autofocus", "value", "checked", "aria-label"];
+const _hoisted_1$o = ["id"];
+const _hoisted_2$i = ["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$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxModal"], mergeProps($setup.modalProps, {
     open: $setup.props.open,
     class: "onyx-select-dialog",
@@ -10881,7 +11210,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
                                   checked: $setup.props.modelValue === option.value,
                                   "aria-label": option.label,
                                   required: ""
-                                }, null, 8, _hoisted_2$j)
+                                }, null, 8, _hoisted_2$i)
                               ]),
                               _: 2
                               /* DYNAMIC */
@@ -10920,7 +11249,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
           32
           /* NEED_HYDRATION */
         )
-      ], 40, _hoisted_1$p)
+      ], 40, _hoisted_1$o)
     ]),
     _: 2
     /* DYNAMIC */
@@ -10934,11 +11263,11 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "label"]);
 }
-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 OnyxSelectDialog = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v], ["__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$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "OnyxColorSchemeDialog",
   props: {
     open: { type: [Boolean, null], required: false, skipCheck: true, default: false },
@@ -10979,7 +11308,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$u(_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,
@@ -10998,8 +11327,8 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["label", "options", "open"]);
 }
-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({
+const OnyxColorSchemeDialog = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/OnyxColorSchemeDialog.vue"]]);
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "OnyxColorSchemeMenuItem",
   props: {
     modelValue: { type: String, required: true }
@@ -11018,8 +11347,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$o = { class: "onyx-color-scheme-menu-item__value" };
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$n = { class: "onyx-color-scheme-menu-item__value" };
+function _sfc_render$t(_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)
@@ -11034,7 +11363,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
         ),
         createElementVNode(
           "span",
-          _hoisted_1$o,
+          _hoisted_1$n,
           toDisplayString($setup.t(`colorScheme.${$setup.props.modelValue}.label`)),
           1
           /* TEXT */
@@ -11053,8 +11382,8 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   });
 }
-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({
+const OnyxColorSchemeMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.vue"]]);
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "OnyxLanguageMenuItem",
   props: {
     modelValue: { type: null, required: true },
@@ -11079,8 +11408,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$n = { class: "onyx-language-menu-item__value" };
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$m = { class: "onyx-language-menu-item__value" };
+function _sfc_render$s(_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)
@@ -11095,7 +11424,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
         ),
         createElementVNode(
           "span",
-          _hoisted_1$n,
+          _hoisted_1$m,
           toDisplayString($setup.currentValueLabel),
           1
           /* TEXT */
@@ -11126,8 +11455,8 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   });
 }
-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({
+const OnyxLanguageMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxLanguageMenuItem/OnyxLanguageMenuItem.vue"]]);
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavItemFacade",
   props: {
     link: { type: null, required: false },
@@ -11149,7 +11478,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$r(_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: {
@@ -11175,8 +11504,8 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["link", "class", "open"]);
 }
-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({
+const OnyxNavItemFacade = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItemFacade/OnyxNavItemFacade.vue"]]);
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxNavItem",
   props: {
@@ -11222,12 +11551,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$m = { class: "onyx-nav-item-wrapper__controls" };
-const _hoisted_2$i = {
+const _hoisted_1$l = { class: "onyx-nav-item-wrapper__controls" };
+const _hoisted_2$h = {
   role: "menu",
   class: "onyx-nav-item-wrapper__mobile-children"
 };
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -11243,7 +11572,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
           }
         }, $setup.rootAttrs),
         [
-          createElementVNode("div", _hoisted_1$m, [
+          createElementVNode("div", _hoisted_1$l, [
             createVNode($setup["OnyxButton"], {
               label: $setup.t("back"),
               mode: "plain",
@@ -11271,7 +11600,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
               /* STABLE_FRAGMENT */
             )) : createCommentVNode("v-if", true)
           ]),
-          createElementVNode("ul", _hoisted_2$i, [
+          createElementVNode("ul", _hoisted_2$h, [
             renderSlot(_ctx.$slots, "children")
           ])
         ],
@@ -11380,7 +11709,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-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 OnyxNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__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()));
@@ -11441,7 +11770,7 @@ const timeToDurationString = (timeLeft) => {
   const { hours, minutes, seconds } = getTimeFragments(timeLeft);
   return `PT${hours}H${minutes}M${seconds}S`;
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "OnyxTimer",
   props: {
     endTime: { type: null, required: true },
@@ -11472,13 +11801,13 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$l = ["aria-label"];
-const _hoisted_2$h = {
+const _hoisted_1$k = ["aria-label"];
+const _hoisted_2$g = {
   key: 0,
   class: "onyx-timer__label"
 };
 const _hoisted_3$d = ["datetime"];
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: "onyx-component onyx-timer onyx-text onyx-truncation-ellipsis",
     role: "timer",
@@ -11486,7 +11815,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     !$setup.props.hideLabel ? (openBlock(), createElementBlock(
       "span",
-      _hoisted_2$h,
+      _hoisted_2$g,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
@@ -11495,10 +11824,10 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
       datetime: $setup.timeToDurationString($setup.timeLeft),
       class: "onyx-timer__time"
     }, toDisplayString($setup.formattedTime), 9, _hoisted_3$d)
-  ], 8, _hoisted_1$l);
+  ], 8, _hoisted_1$k);
 }
-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({
+const OnyxTimer = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxTimer/OnyxTimer.vue"]]);
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "UserMenuLayout",
   props: {
     isMobile: { type: Boolean, required: true },
@@ -11523,10 +11852,10 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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, [
+const _hoisted_1$j = { class: "onyx-component" };
+const _hoisted_2$f = { class: "onyx-user-menu__footer onyx-text--small" };
+function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$j, [
     $setup.props.isMobile ? (openBlock(), createElementBlock(
       Fragment,
       { key: 0 },
@@ -11570,7 +11899,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
       !!$setup.slots.footer ? {
         name: "footer",
         fn: withCtx(() => [
-          createElementVNode("div", _hoisted_2$g, [
+          createElementVNode("div", _hoisted_2$f, [
             renderSlot(_ctx.$slots, "footer")
           ])
         ]),
@@ -11579,8 +11908,8 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     ]), 1032, ["open", "label", "disabled"]))
   ]);
 }
-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({
+const UserMenuLayout = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue"]]);
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "OnyxUserMenu",
   props: {
     fullName: { type: String, required: true },
@@ -11614,8 +11943,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$j = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$f = { class: "onyx-user-menu__header" };
+const _hoisted_1$i = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$e = { 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 = {
@@ -11623,7 +11952,7 @@ const _hoisted_5$9 = {
   class: "onyx-user-menu__description onyx-text--small onyx-truncation-ellipsis"
 };
 const _hoisted_6$7 = { class: "onyx-user-menu__options" };
-function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$n(_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),
@@ -11648,7 +11977,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
           ),
           createElementVNode(
             "span",
-            _hoisted_1$j,
+            _hoisted_1$i,
             toDisplayString($setup.props.fullName),
             1
             /* TEXT */
@@ -11659,7 +11988,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
       )
     ]),
     header: withCtx(() => [
-      createElementVNode("div", _hoisted_2$f, [
+      createElementVNode("div", _hoisted_2$e, [
         createVNode(
           $setup["OnyxAvatar"],
           mergeProps($setup.avatar, { size: "48px" }),
@@ -11702,8 +12031,8 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["flyout-open", "class", "is-mobile", "disabled"]);
 }
-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({
+const OnyxUserMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue"]]);
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavBar",
   props: {
     appName: { type: String, required: false },
@@ -11773,8 +12102,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$i = { class: "onyx-nav-bar__content onyx-grid-container" };
-const _hoisted_2$e = {
+const _hoisted_1$h = { class: "onyx-nav-bar__content onyx-grid-container" };
+const _hoisted_2$d = {
   key: 0,
   class: "onyx-nav-bar__mobile-page onyx-truncation-ellipsis"
 };
@@ -11793,7 +12122,7 @@ const _hoisted_8$3 = {
   key: 1,
   class: "onyx-nav-bar__context"
 };
-function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "header",
     {
@@ -11801,8 +12130,8 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component onyx-nav-bar", { "onyx-nav-bar--mobile": $setup.actualIsMobile }])
     },
     [
-      createElementVNode("div", _hoisted_1$i, [
-        $setup.actualIsMobile && $setup.slots.mobileActivePage && !$setup.isBurgerOpen && !$setup.isContextOpen ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
+      createElementVNode("div", _hoisted_1$h, [
+        $setup.actualIsMobile && $setup.slots.mobileActivePage && !$setup.isBurgerOpen && !$setup.isContextOpen ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
           renderSlot(_ctx.$slots, "mobileActivePage")
         ])) : $setup.props.appName || $setup.props.logoUrl || $setup.slots.appArea ? (openBlock(), createBlock($setup["OnyxNavAppArea"], mergeProps({
           key: 1,
@@ -11952,7 +12281,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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 OnyxNavBar = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m], ["__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)));
@@ -12000,7 +12329,7 @@ const useRelativeTimeFormat = (options) => {
     timeAgo
   };
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationCard",
   props: {
     density: { type: null, required: false },
@@ -12026,11 +12355,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$h = {
+const _hoisted_1$g = {
   key: 0,
   class: "onyx-notification-card-skeleton"
 };
-const _hoisted_2$d = {
+const _hoisted_2$c = {
   key: 1,
   class: "onyx-notification-card__content"
 };
@@ -12043,14 +12372,14 @@ const _hoisted_8$2 = {
   key: 0,
   class: "onyx-notification-card__actions onyx-density-compact"
 };
-function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$l(_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$h, [
+      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
         createVNode($setup["OnyxSkeleton"], { class: "onyx-notification-card-skeleton__header" }),
         (openBlock(), createElementBlock(
           Fragment,
@@ -12064,7 +12393,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         ))
-      ])) : (openBlock(), createElementBlock("div", _hoisted_2$d, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
         createElementVNode("div", null, [
           createElementVNode("div", _hoisted_3$a, [
             createElementVNode("div", _hoisted_4$8, [
@@ -12134,8 +12463,8 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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({
+const OnyxNotificationCard = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationCard/OnyxNotificationCard.vue"]]);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationDot",
   props: {
     hidden: { type: Boolean, required: false, default: false },
@@ -12149,9 +12478,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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, [
+const _hoisted_1$f = { class: "onyx-component onyx-notification-dot" };
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$f, [
     renderSlot(_ctx.$slots, "default"),
     !$setup.props.hidden ? (openBlock(), createBlock($setup["OnyxBadge"], {
       key: 0,
@@ -12161,8 +12490,8 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["color"])) : createCommentVNode("v-if", true)
   ]);
 }
-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({
+const OnyxNotificationDot = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationDot/OnyxNotificationDot.vue"]]);
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "OnyxPageLayout",
   props: {
     skeleton: { type: Boolean, required: false },
@@ -12179,11 +12508,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$e = {
   key: 0,
   class: "onyx-page__sidebar"
 };
-const _hoisted_2$c = { class: "onyx-page__main" };
+const _hoisted_2$b = { class: "onyx-page__main" };
 const _hoisted_3$9 = {
   key: 1,
   class: "onyx-page__sidebar onyx-page__sidebar--right"
@@ -12192,7 +12521,7 @@ const _hoisted_4$7 = {
   key: 2,
   class: "onyx-page__footer"
 };
-function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -12203,10 +12532,10 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
       ]])
     },
     [
-      $setup.slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+      $setup.slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
         renderSlot(_ctx.$slots, "sidebar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("main", _hoisted_2$c, [
+      createElementVNode("main", _hoisted_2$b, [
         createElementVNode(
           "div",
           {
@@ -12230,8 +12559,8 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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({
+const OnyxPageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.vue"]]);
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "OnyxProgressItem",
   props: {
     density: { type: null, required: false },
@@ -12257,10 +12586,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$e = ["disabled"];
-const _hoisted_2$b = { class: "onyx-progress-item__indicator" };
+const _hoisted_1$d = ["disabled"];
+const _hoisted_2$a = { class: "onyx-progress-item__indicator" };
 const _hoisted_3$8 = { class: "onyx-progress-item__label" };
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$i(_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])
@@ -12276,7 +12605,7 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     type: "button",
     disabled: $setup.props.disabled
   }, [
-    createElementVNode("span", _hoisted_2$b, [
+    createElementVNode("span", _hoisted_2$a, [
       $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 0,
         icon: $setup.icon
@@ -12305,9 +12634,9 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
         )
       ])
     ])
-  ], 10, _hoisted_1$e));
+  ], 10, _hoisted_1$d));
 }
-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 OnyxProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressItem/OnyxProgressItem.vue"]]);
 const PROGRESS_ITEM_STATUS = [
   "default",
   "active",
@@ -12315,7 +12644,7 @@ const PROGRESS_ITEM_STATUS = [
   "visited",
   "invalid"
 ];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "OnyxProgressSteps",
   props: {
     density: { type: null, required: false },
@@ -12370,8 +12699,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$d = { class: "onyx-progress-steps__scroll-container" };
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$c = { class: "onyx-progress-steps__scroll-container" };
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -12383,7 +12712,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$d, [
+      createElementVNode("div", _hoisted_1$c, [
         (openBlock(true), createElementBlock(
           Fragment,
           null,
@@ -12423,8 +12752,8 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-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({
+const OnyxProgressSteps = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressSteps/OnyxProgressSteps.vue"]]);
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxRadioButton",
   props: {
@@ -12459,8 +12788,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$c = ["required", "name", "value", "checked", "disabled", "autofocus"];
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$b = ["required", "name", "value", "checked", "disabled", "autofocus"];
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -12500,7 +12829,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
             checked: $setup.props.checked,
             disabled: $setup.disabled,
             autofocus: $setup.props.autofocus
-          }, $setup.restAttrs), null, 16, _hoisted_1$c)), [
+          }, $setup.restAttrs), null, 16, _hoisted_1$b)), [
             [$setup["vCustomValidity"]]
           ]),
           createElementVNode(
@@ -12521,8 +12850,8 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-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({
+const OnyxRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue"]]);
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "OnyxRadioGroup",
   props: {
     truncation: { type: null, required: false, default: "ellipsis" },
@@ -12569,19 +12898,19 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$b = ["disabled", "aria-label"];
-const _hoisted_2$a = {
+const _hoisted_1$a = ["disabled", "aria-label"];
+const _hoisted_2$9 = {
   key: 0,
   class: "onyx-radio-group__label"
 };
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_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$a, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$9, [
       createVNode($setup["OnyxHeadline"], {
         is: "h3",
         class: normalizeClass($setup.requiredMarkerClass)
@@ -12648,11 +12977,11 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$b);
+  ], 10, _hoisted_1$a);
 }
-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 OnyxRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue"]]);
 const LINK_TARGETS = ["_self", "_blank", "_parent", "_top"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSegmentedControlElement",
   props: {
@@ -12679,13 +13008,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$a = ["id", "name", "value", "disabled", "aria-label", "autofocus", "checked"];
-const _hoisted_2$9 = ["for"];
+const _hoisted_1$9 = ["id", "name", "value", "disabled", "aria-label", "autofocus", "checked"];
+const _hoisted_2$8 = ["for"];
 const _hoisted_3$7 = {
   key: 1,
   class: "onyx-segmented-control-element__text"
 };
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     mergeProps($setup.rootAttrs, {
@@ -12705,7 +13034,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-label": $setup.props.label,
             autofocus: $setup.props.autofocus,
             checked: $setup.props.checked
-          }), null, 16, _hoisted_1$a)
+          }), null, 16, _hoisted_1$9)
         ]),
         _: 1
         /* STABLE */
@@ -12726,14 +13055,14 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
           1
           /* TEXT */
         )) : createCommentVNode("v-if", true)
-      ], 8, _hoisted_2$9)
+      ], 8, _hoisted_2$8)
     ],
     16
     /* FULL_PROPS */
   );
 }
-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({
+const OnyxSegmentedControlElement = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControlElement/OnyxSegmentedControlElement.vue"]]);
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "OnyxSegmentedControl",
   props: {
     density: { type: null, required: false },
@@ -12762,7 +13091,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-segmented-control-skeleton", $setup.densityClass])
@@ -12793,10 +13122,10 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-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 OnyxSegmentedControl = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__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$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "OnyxSidebarItem",
   props: {
     density: { type: null, required: false },
@@ -12824,7 +13153,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.link ? (openBlock(), createBlock($setup["OnyxRouterLink"], mergeProps({
     key: 0,
     class: $setup.classes
@@ -12848,12 +13177,12 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-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 OnyxSidebarItem = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__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$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "OnyxSidebar",
   props: {
     density: { type: null, required: false },
@@ -12941,8 +13270,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$9 = ["aria-label"];
-const _hoisted_2$8 = {
+const _hoisted_1$8 = ["aria-label"];
+const _hoisted_2$7 = {
   key: 0,
   class: "onyx-sidebar__header"
 };
@@ -12952,7 +13281,7 @@ const _hoisted_4$6 = {
   class: "onyx-sidebar__footer"
 };
 const _hoisted_5$6 = { class: "onyx-sidebar__footer" };
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return !$setup.props.temporary && !$setup.shouldCollapse ? (openBlock(), createElementBlock("aside", {
     key: 0,
     ref: "sidebarRef",
@@ -12966,7 +13295,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.props.label,
     style: normalizeStyle($setup.widthStyle)
   }, [
-    !!$setup.slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$8, [
+    !!$setup.slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$7, [
       renderSlot(_ctx.$slots, "header")
     ])) : createCommentVNode("v-if", true),
     createElementVNode("div", _hoisted_3$6, [
@@ -12979,7 +13308,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
       key: 2,
       element: $setup.sidebarElement
     }, $setup.resizeHandleProps), null, 16, ["element"])) : createCommentVNode("v-if", true)
-  ], 14, _hoisted_1$9)) : (openBlock(), createBlock($setup["OnyxModal"], mergeProps({ key: 1 }, $setup.props.temporary, {
+  ], 14, _hoisted_1$8)) : (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),
@@ -13031,10 +13360,10 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "class", "label", "density", "style", "alignment"]));
 }
-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 OnyxSidebar = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__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({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "OnyxSlider",
   props: {
@@ -13126,8 +13455,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$8 = { class: "onyx-slider__container" };
-const _hoisted_2$7 = {
+const _hoisted_1$7 = { class: "onyx-slider__container" };
+const _hoisted_2$6 = {
   key: 0,
   class: "onyx-slider__control",
   "aria-hidden": "true"
@@ -13146,7 +13475,7 @@ const _hoisted_6$4 = {
   key: 3,
   class: "onyx-slider__control"
 };
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     {
@@ -13183,10 +13512,10 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
         "error-messages": $setup.errorMessages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$8, [
+          createElementVNode("div", _hoisted_1$7, [
             $setup.isValueControl ? (openBlock(), createElementBlock(
               "div",
-              _hoisted_2$7,
+              _hoisted_2$6,
               toDisplayString($setup.min),
               1
               /* TEXT */
@@ -13350,10 +13679,10 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     /* 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 OnyxSlider = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__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({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxStepper",
   props: {
@@ -13471,15 +13800,15 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$7 = { class: "onyx-stepper__wrapper" };
-const _hoisted_2$6 = ["disabled", "aria-label"];
+const _hoisted_1$6 = { class: "onyx-stepper__wrapper" };
+const _hoisted_2$5 = ["disabled", "aria-label"];
 const _hoisted_3$4 = ["id", "aria-label", "autofocus", "disabled", "min", "max", "name", "placeholder", "readonly", "required", "step", "title"];
 const _hoisted_4$4 = {
   class: "onyx-stepper__display",
   "aria-hidden": "true"
 };
 const _hoisted_5$4 = ["disabled", "aria-label"];
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -13508,7 +13837,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
         "error-messages": $setup.errorMessages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$7, [
+          createElementVNode("div", _hoisted_1$6, [
             !$setup.props.hideButtons ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
@@ -13519,7 +13848,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: _cache[0] || (_cache[0] = ($event) => $setup.handleClick("stepDown"))
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconMinus }, null, 8, ["icon"])
-            ], 8, _hoisted_2$6)) : createCommentVNode("v-if", true),
+            ], 8, _hoisted_2$5)) : createCommentVNode("v-if", true),
             $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
               key: 1,
               class: "onyx-stepper__loading",
@@ -13581,8 +13910,8 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxStepper = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue"]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const OnyxStepper = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue"]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSwitch",
   props: {
@@ -13632,13 +13961,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$6 = { class: "onyx-switch-skeleton__click-area" };
-const _hoisted_2$5 = ["title"];
+const _hoisted_1$5 = { class: "onyx-switch-skeleton__click-area" };
+const _hoisted_2$4 = ["title"];
 const _hoisted_3$3 = ["aria-label", "disabled", "required", "autofocus"];
 const _hoisted_4$3 = { class: "onyx-switch__click-area" };
 const _hoisted_5$3 = { class: "onyx-switch__container" };
 const _hoisted_6$3 = { class: "onyx-switch__icon" };
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -13646,7 +13975,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       class: ["onyx-component", "onyx-switch-skeleton", $setup.densityClass]
     }, $setup.rootAttrs),
     [
-      createElementVNode("span", _hoisted_1$6, [
+      createElementVNode("span", _hoisted_1$5, [
         createVNode($setup["OnyxSkeleton"], { class: "onyx-switch-skeleton__input" })
       ]),
       !$setup.props.hideLabel ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
@@ -13725,162 +14054,14 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
           2
           /* CLASS */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_2$5)
+      ], 10, _hoisted_2$4)
     ]),
     _: 1
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-const OnyxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue"]]);
+const OnyxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue"]]);
 const SYSTEM_BUTTON_COLORS = ["intense", "soft", "medium"];
-const TABS_INJECTION_KEY = Symbol();
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "OnyxTab",
-  props: {
-    density: { type: null, required: false },
-    value: { type: null, required: true },
-    label: { type: String, required: false },
-    disabled: { type: Boolean, required: false, default: false },
-    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const { densityClass } = useDensity(props);
-    const tabsContext = inject(TABS_INJECTION_KEY, void 0);
-    const skeleton = useSkeletonContext(props);
-    const sizeClass = computed(() => `onyx-tab--${tabsContext?.size.value}`);
-    const tab = computed(
-      () => tabsContext?.headless.elements.tab.value({
-        value: props.value,
-        disabled: props.disabled || !!skeleton.value
-      })
-    );
-    const __returned__ = { props, densityClass, tabsContext, skeleton, sizeClass, tab, OnyxSkeleton };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-const _hoisted_1$5 = ["disabled"];
-const _hoisted_2$4 = { class: "onyx-tab__label" };
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    Fragment,
-    null,
-    [
-      $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], mergeProps({
-        key: 0,
-        class: ["onyx-tab-skeleton", $setup.densityClass, $setup.sizeClass]
-      }, $setup.tab), null, 16, ["class"])) : (openBlock(), createElementBlock("button", mergeProps({
-        key: 1,
-        class: [
-          "onyx-component",
-          "onyx-tab",
-          $setup.densityClass,
-          $setup.sizeClass,
-          { "onyx-tab--selected": $setup.tab?.["aria-selected"] }
-        ]
-      }, $setup.tab, {
-        type: "button",
-        disabled: $setup.props.disabled
-      }), [
-        createElementVNode("div", _hoisted_2$4, [
-          renderSlot(_ctx.$slots, "tab", {}, () => [
-            createTextVNode(
-              toDisplayString($setup.props.label),
-              1
-              /* TEXT */
-            )
-          ])
-        ])
-      ], 16, _hoisted_1$5)),
-      $setup.tabsContext?.panel.value ? (openBlock(), createBlock(Teleport, {
-        key: 2,
-        to: $setup.tabsContext?.panel.value,
-        defer: ""
-      }, [
-        $setup.tab?.["aria-selected"] ? (openBlock(), createElementBlock(
-          "div",
-          mergeProps({ key: 0 }, $setup.tabsContext?.headless.elements.tabpanel.value({ value: $setup.props.value }), { class: "onyx-tab__panel" }),
-          [
-            renderSlot(_ctx.$slots, "default")
-          ],
-          16
-          /* FULL_PROPS */
-        )) : createCommentVNode("v-if", true)
-      ], 8, ["to"])) : createCommentVNode("v-if", true)
-    ],
-    64
-    /* STABLE_FRAGMENT */
-  );
-}
-const OnyxTab = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue"]]);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "OnyxTabs",
-  props: {
-    density: { type: null, required: false },
-    skeleton: { type: Boolean, required: false },
-    label: { type: String, required: true },
-    modelValue: { type: null, required: true },
-    stretched: { type: Boolean, required: false },
-    size: { type: String, required: false, default: "h2" }
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    __expose();
-    const props = __props;
-    const emit = __emit;
-    const { densityClass } = useDensity(props);
-    const modelValue = useVModel({
-      props,
-      emit,
-      key: "modelValue"
-    });
-    const headless = createTabs({
-      label: toRef(props, "label"),
-      selectedTab: toRef(() => modelValue.value),
-      onSelect: (tab) => modelValue.value = tab
-    });
-    const panel = useTemplateRef("panelRef");
-    provideSkeletonContext(props);
-    provide(TABS_INJECTION_KEY, {
-      headless,
-      panel,
-      size: toRef(props, "size")
-    });
-    const __returned__ = { props, emit, densityClass, modelValue, headless, panel };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "div",
-    {
-      ref: "panelRef",
-      class: normalizeClass([
-        "onyx-component",
-        "onyx-tabs",
-        $setup.densityClass,
-        { "onyx-tabs--stretched": $setup.props.stretched }
-      ])
-    },
-    [
-      createElementVNode(
-        "div",
-        mergeProps($setup.headless.elements.tablist.value, { class: "onyx-tabs__tablist" }),
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        16
-        /* FULL_PROPS */
-      )
-    ],
-    2
-    /* CLASS */
-  );
-}
-const OnyxTabs = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.vue"]]);
 const circleAttention = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.25 16.5h1.5V18h-1.5zM12.75 6h-1.5v8.25h1.5z"/><path fill-rule="evenodd" d="M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21m6.364 16.864A9 9 0 1 1 21 12a8.94 8.94 0 0 1-2.636 6.364" clip-rule="evenodd"/></svg>';
 const useFileSize = () => {
   const { locale } = injectI18n();
@@ -15263,6 +15444,7 @@ export {
   BUTTON_COLORS,
   BUTTON_MODES,
   BUTTON_TYPES,
+  CODE_TABS_INJECTION_KEY,
   DENSITIES,
   DIALOG_ALIGNMENTS,
   all as DataGridFeatures,
@@ -15374,6 +15556,8 @@ export {
   OnyxToastMessage,
   OnyxTooltip,
   OnyxCalendar as OnyxUnstableCalendar,
+  OnyxCodeTab as OnyxUnstableCodeTab,
+  OnyxCodeTabs as OnyxUnstableCodeTabs,
   OnyxSlider as OnyxUnstableSlider,
   OnyxUserMenu,
   OnyxVisuallyHidden,