sit-onyx 1.4.0-dev-20251110081753 → 1.4.0-dev-20251111093451

package/dist/index.esm-bundler.js

@@ -1,5 +1,5 @@
 import { computed, provide, inject, toRef, ref, watch, defineComponent, watchEffect, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot, onMounted, createBlock, resolveDynamicComponent, withCtx, createVNode, createElementVNode, withModifiers, readonly, reactive, onBeforeMount, onBeforeUnmount, useId, toValue, nextTick, unref, shallowRef, useTemplateRef, createCommentVNode, createTextVNode, toDisplayString, normalizeProps, mergeProps, Fragment, useAttrs, isProxy, toRaw, customRef, onUnmounted, normalizeStyle, useSlots, createSlots, renderList, toHandlers, resolveComponent, withDirectives, guardReactiveProps, vShow, Teleport, vModelCheckbox, vModelText, h, vModelDynamic, withKeys, createStaticVNode, useModel } from "vue";
-import { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconMoreVertical, iconX, iconMoreHorizontalSmall, iconCircleCheck, iconCircleX, iconCircleInformation, iconUser, iconArrowSmallUpRight, iconChevronRightSmall, iconArrowSmallLeft, iconMoreHorizontal, iconHome, iconChevronLeftSmall, iconFileCopy, iconSearch, iconCheck, iconSearchX, iconChevronDownUp, iconCheckSmall, iconPlusSmall, iconEyeDisabled, iconListArrowUp, iconListArrowDown, iconArrowsSort, iconCircleBlock, iconFileDisabled, iconEyeClosed, iconEye, iconCircleContrast, iconTranslate, iconMenu, iconNotificationFlag, iconPlus, iconMinus, iconMinusSmall, 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, iconEyeClosed, iconEye, iconFileDisabled, iconCircleContrast, iconTranslate, iconMenu, iconNotificationFlag, iconPlus, iconMinus, iconMinusSmall, 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$1K = /* @__PURE__ */ defineComponent({
+const _sfc_main$1N = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordion",
   props: {
     density: { type: null, required: false },
@@ -119,7 +119,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-function _sfc_render$1K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1N(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -137,7 +137,7 @@ function _sfc_render$1K(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["render", _sfc_render$1K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordion/OnyxAccordion.vue"]]);
+const OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1N, [["render", _sfc_render$1N], ["__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$1J = /* @__PURE__ */ defineComponent({
+const _sfc_main$1M = /* @__PURE__ */ defineComponent({
   __name: "OnyxIcon",
   props: {
     size: { type: null, required: false },
@@ -166,8 +166,8 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1e = ["innerHTML"];
-function _sfc_render$1J(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1h = ["innerHTML"];
+function _sfc_render$1M(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass({
       "onyx-component": true,
@@ -178,9 +178,9 @@ function _sfc_render$1J(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     "aria-hidden": "true",
     innerHTML: $setup.props.icon
-  }, null, 10, _hoisted_1$1e);
+  }, null, 10, _hoisted_1$1h);
 }
-const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$1J], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIcon/OnyxIcon.vue"]]);
+const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1M, [["render", _sfc_render$1M], ["__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$1I = /* @__PURE__ */ defineComponent({
+const _sfc_main$1L = /* @__PURE__ */ defineComponent({
   __name: "OnyxSkeleton",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -206,15 +206,15 @@ const _sfc_main$1I = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1d = {
+const _hoisted_1$1g = {
   "aria-hidden": "true",
   class: "onyx-component onyx-skeleton"
 };
-function _sfc_render$1I(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("figure", _hoisted_1$1d);
+function _sfc_render$1L(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("figure", _hoisted_1$1g);
 }
-const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["render", _sfc_render$1I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
-const _sfc_main$1H = /* @__PURE__ */ defineComponent({
+const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["render", _sfc_render$1L], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
+const _sfc_main$1K = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordionItem",
   props: {
     density: { type: null, required: false },
@@ -251,11 +251,11 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1c = ["open"];
-const _hoisted_2$S = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
-const _hoisted_3$z = { class: "onyx-accordion-item__header-content" };
-const _hoisted_4$n = ["id", "aria-labelledby"];
-function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1f = ["open"];
+const _hoisted_2$V = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
+const _hoisted_3$B = { class: "onyx-accordion-item__header-content" };
+const _hoisted_4$o = ["id", "aria-labelledby"];
+function _sfc_render$1K(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.showSkeleton ? (openBlock(), createBlock(resolveDynamicComponent($setup.type === "card" ? $setup.OnyxSkeleton : "div"), {
     key: 0,
     class: normalizeClass([
@@ -291,14 +291,14 @@ function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-disabled": $setup.isDisabled,
       onClick: _cache[0] || (_cache[0] = withModifiers(($event) => $setup.isOpen = !$setup.isOpen, ["prevent"]))
     }, [
-      createElementVNode("div", _hoisted_3$z, [
+      createElementVNode("div", _hoisted_3$B, [
         renderSlot(_ctx.$slots, "header")
       ]),
       createVNode($setup["OnyxIcon"], {
         icon: $setup.iconChevronDownSmall,
         class: "onyx-accordion-item__header-icon"
       }, null, 8, ["icon"])
-    ], 8, _hoisted_2$S),
+    ], 8, _hoisted_2$V),
     createElementVNode("div", {
       id: $setup.panelId,
       class: "onyx-accordion-item__panel",
@@ -306,10 +306,10 @@ function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-labelledby": $setup.headerId
     }, [
       renderSlot(_ctx.$slots, "default")
-    ], 8, _hoisted_4$n)
-  ], 10, _hoisted_1$1c));
+    ], 8, _hoisted_4$o)
+  ], 10, _hoisted_1$1f));
 }
-const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["render", _sfc_render$1H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordionItem/OnyxAccordionItem.vue"]]);
+const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["render", _sfc_render$1K], ["__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,7 +357,8 @@ 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 = { "decreaseValueBy": "Decrease value by {n}", "increaseValueBy": "Increase value by {n}", "changeValue": "Change value" };
-const codeTabs = { "label": "Code snippets", "copySnippet": "Copy code", "copied": "Copied!", "tabLabel": "Code" };
+const codeTabs = { "label": "Code snippets", "copySnippet": "Copy code", "copied": "Copied!", "failed": "Failed!", "tabLabel": "Code" };
+const globalSearch = { "label": "Global search", "searchResults": "Search results", "input": { "label": "Search for content", "placeholder": "Search..." }, "shortcuts": { "move": "Navigate", "select": "Select" } };
 const enUS = {
   yes,
   no,
@@ -392,7 +393,8 @@ const enUS = {
   calendar,
   flyoutMenu,
   slider,
-  codeTabs
+  codeTabs,
+  globalSearch
 };
 const NUMBER_FORMATS = {
   decimal: { style: "decimal" }
@@ -918,6 +920,10 @@ const createListbox = createBuilder(
       }
       return descendantKeyIdMap.get(value);
     };
+    const getOptionValueById = (id) => {
+      const entries = Array.from(descendantKeyIdMap.entries());
+      return entries.find(([_value, key]) => key === id)?.[0];
+    };
     const isFocused = ref(false);
     watchEffect(async () => {
       if (!isExpanded.value || options.activeOption.value == void 0 || !isFocused.value && !options.controlled) {
@@ -1011,7 +1017,8 @@ const createListbox = createBuilder(
         isFocused
       },
       internals: {
-        getOptionId
+        getOptionId,
+        getOptionValueById
       }
     };
   }
@@ -1130,7 +1137,7 @@ const createComboBox = createBuilder(
     });
     const {
       elements: { option, group, listbox },
-      internals: { getOptionId }
+      internals: { getOptionId, getOptionValueById }
     } = createListbox({
       label: listLabel,
       description: listDescription,
@@ -1181,7 +1188,8 @@ const createComboBox = createBuilder(
           tabindex: "-1",
           onClick: () => onToggle?.()
         }))
-      }
+      },
+      internals: { getOptionId, getOptionValueById }
     };
   }
 );
@@ -2134,7 +2142,7 @@ const createTooltip = createBuilder(({ debounce: debounce2, isVisible }) => {
     }
   };
 });
-const _sfc_main$1G = /* @__PURE__ */ defineComponent({
+const _sfc_main$1J = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicDialog",
   props: {
     density: { type: null, required: false },
@@ -2147,7 +2155,6 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    __expose();
     const props = __props;
     const emit = __emit;
     const dialog2 = useTemplateRef("dialogRef");
@@ -2185,17 +2192,23 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
       disabled: computed(() => !open.value || props.nonDismissible),
       listener: (event) => wasKeyPressed(event, { key: "Escape" }) && emit("update:open", false)
     });
+    __expose({
+      /**
+       * Template ref to the internal `<dialog>` element.
+       */
+      dialog: dialog2
+    });
     const __returned__ = { props, emit, dialog: dialog2, densityClass, open, openDialog, content };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-const _hoisted_1$1b = ["aria-modal", "aria-label", "role"];
-const _hoisted_2$R = {
+const _hoisted_1$1e = ["aria-modal", "aria-label", "role"];
+const _hoisted_2$U = {
   ref: "contentRef",
   class: "onyx-basic-dialog__content"
 };
-function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1J(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.open ? (openBlock(), createElementBlock("dialog", {
     key: 0,
     ref: "dialogRef",
@@ -2214,16 +2227,16 @@ function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode(
       "div",
-      _hoisted_2$R,
+      _hoisted_2$U,
       [
         renderSlot(_ctx.$slots, "default")
       ],
       512
       /* NEED_PATCH */
     )
-  ], 42, _hoisted_1$1b)) : createCommentVNode("v-if", true);
+  ], 42, _hoisted_1$1e)) : createCommentVNode("v-if", true);
 }
-const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$1G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicDialog/OnyxBasicDialog.vue"]]);
+const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$1J], ["__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());
@@ -2305,7 +2318,7 @@ const normalizeHref = (href) => {
   return value.replace(/\/+$/, "");
 };
 const ROUTER_INJECTION_KEY = Symbol();
-const _sfc_main$1F = /* @__PURE__ */ defineComponent({
+const _sfc_main$1I = /* @__PURE__ */ defineComponent({
   __name: "OnyxVisuallyHidden",
   props: {
     is: { type: String, required: false, default: "span" }
@@ -2318,7 +2331,7 @@ const _sfc_main$1F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1I(_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")
@@ -2327,8 +2340,8 @@ function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   });
 }
-const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$1F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
-const _sfc_main$1E = /* @__PURE__ */ defineComponent({
+const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["render", _sfc_render$1I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
+const _sfc_main$1H = /* @__PURE__ */ defineComponent({
   __name: "OnyxRouterLink",
   props: {
     href: { type: String, required: true },
@@ -2344,8 +2357,8 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1a = ["href", "target", "rel"];
-function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1d = ["href", "target", "rel"];
+function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: normalizeClass([
       "onyx-component",
@@ -2369,10 +2382,10 @@ function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1
       /* STABLE */
     })) : createCommentVNode("v-if", true)
-  ], 10, _hoisted_1$1a);
+  ], 10, _hoisted_1$1d);
 }
-const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["render", _sfc_render$1H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "OnyxHeadline",
   props: {
     is: { type: null, required: true },
@@ -2397,7 +2410,7 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1G(_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}`])
@@ -2437,7 +2450,7 @@ function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["id", "class"]));
 }
-const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
+const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$1G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
 const useAutofocus = (inputRef, props) => {
   if (!props.autofocus) {
     return;
@@ -2488,7 +2501,7 @@ const useFormContext = (props) => {
     DEFAULT_FORM_INJECTION_CONTEXT
   )(toRef(props));
 };
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "ButtonOrLinkLayout",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -2511,8 +2524,8 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$19 = ["disabled", "type", "autofocus"];
-function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1c = ["disabled", "type", "autofocus"];
+function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.linkProps ? (openBlock(), createBlock(
     $setup["OnyxRouterLink"],
     normalizeProps(mergeProps({ key: 0 }, $setup.linkProps)),
@@ -2533,10 +2546,10 @@ function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: $setup.props.autofocus
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1$19));
+  ], 8, _hoisted_1$1c));
 }
-const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
-const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$1F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   __name: "OnyxSystemButton",
   props: {
     disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
@@ -2557,7 +2570,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1E(_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"])
@@ -2589,8 +2602,8 @@ function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label", "title"]));
 }
-const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
-const _sfc_main$1A = /* @__PURE__ */ defineComponent({
+const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "OnyxAlertModal",
   props: {
     density: { type: null, required: false },
@@ -2615,11 +2628,11 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$18 = { class: "onyx-alert-modal__content" };
-const _hoisted_2$Q = { class: "onyx-alert-modal__headline" };
-const _hoisted_3$y = ["id"];
-const _hoisted_4$m = { class: "onyx-alert-modal__actions" };
-function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1b = { class: "onyx-alert-modal__content" };
+const _hoisted_2$T = { class: "onyx-alert-modal__headline" };
+const _hoisted_3$A = ["id"];
+const _hoisted_4$n = { class: "onyx-alert-modal__actions" };
+function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps({
     class: ["onyx-alert-modal", $setup.densityClass]
   }, $setup.dialogProps, {
@@ -2629,7 +2642,7 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$18, [
+      createElementVNode("div", _hoisted_1$1b, [
         $setup.props.icon ? (openBlock(), createBlock(
           $setup["OnyxIcon"],
           mergeProps({
@@ -2641,7 +2654,7 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
           /* FULL_PROPS */
         )) : createCommentVNode("v-if", true),
         createElementVNode("div", null, [
-          createElementVNode("div", _hoisted_2$Q, [
+          createElementVNode("div", _hoisted_2$T, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -2669,10 +2682,10 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
             class: "onyx-alert-modal__body onyx-truncation"
           }, [
             renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_3$y)
+          ], 8, _hoisted_3$A)
         ])
       ]),
-      createElementVNode("div", _hoisted_4$m, [
+      createElementVNode("div", _hoisted_4$n, [
         renderSlot(_ctx.$slots, "actions")
       ])
     ]),
@@ -2680,7 +2693,7 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class", "aria-describedby"]);
 }
-const OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
+const OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
 const useRootAttrs = () => {
   const attrs = useAttrs();
   const rootAttrs = computed(
@@ -2762,7 +2775,7 @@ const mergeVueProps = (...args) => args.reduce((prev, curr) => {
   merged.ref = mergedRef;
   return merged;
 }, {});
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABButton",
   props: {
     density: { type: null, required: false },
@@ -2782,11 +2795,11 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$17 = {
+const _hoisted_1$1a = {
   key: 1,
   class: "onyx-fab-button__label"
 };
-function _sfc_render$1z(_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-fab-button-skeleton", $setup.densityClass])
@@ -2804,7 +2817,7 @@ function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       !$setup.props.hideLabel ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_1$17,
+        _hoisted_1$1a,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -2814,7 +2827,7 @@ function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "title", "aria-label", "link"]));
 }
-const OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABButton/OnyxFABButton.vue"]]);
+const OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__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);
@@ -3126,7 +3139,7 @@ function useSticky(options) {
   });
   return { stickyStyles, scrolledOut, isSticky, checkVisibilityOnScroll };
 }
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicPopover",
   props: {
     label: { type: String, required: true },
@@ -3284,8 +3297,8 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$16 = ["role", "aria-label"];
-function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$19 = ["role", "aria-label"];
+function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3304,14 +3317,14 @@ function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle(!$setup.isSticky ? $setup.popoverStyles : $setup.stickyStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
-      ], 14, _hoisted_1$16)
+      ], 14, _hoisted_1$19)
     ],
     4
     /* STYLE */
   );
 }
-const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
-const _sfc_main$1x = /* @__PURE__ */ defineComponent({
+const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
+const _sfc_main$1A = /* @__PURE__ */ defineComponent({
   __name: "OnyxFlyoutMenu",
   props: {
     alignment: { type: String, required: false, default: "auto" },
@@ -3353,9 +3366,9 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$15 = { class: "onyx-flyout-menu__list-header" };
-const _hoisted_2$P = { class: "onyx-flyout-menu__list-footer" };
-function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$18 = { class: "onyx-flyout-menu__list-header" };
+const _hoisted_2$S = { class: "onyx-flyout-menu__list-footer" };
+function _sfc_render$1A(_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,
@@ -3364,7 +3377,7 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $props.disabled
   }), createSlots({
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$15, [
+      createElementVNode("div", _hoisted_1$18, [
         renderSlot(_ctx.$slots, "header")
       ]),
       $setup.slots.options ? (openBlock(), createElementBlock(
@@ -3376,7 +3389,7 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
         16
         /* FULL_PROPS */
       )) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$P, [
+      createElementVNode("div", _hoisted_2$S, [
         renderSlot(_ctx.$slots, "footer")
       ])
     ]),
@@ -3397,8 +3410,8 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "label", "alignment", "disabled"]);
 }
-const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "OnyxFAB",
   props: {
     density: { type: null, required: false },
@@ -3437,7 +3450,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1z(_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}`]
@@ -3467,8 +3480,8 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["open", "label", "class", "alignment"]));
 }
-const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
-const _sfc_main$1v = /* @__PURE__ */ defineComponent({
+const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
+const _sfc_main$1y = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABItem",
   props: {
     density: { type: null, required: false },
@@ -3491,7 +3504,7 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     mergeProps({
@@ -3506,7 +3519,7 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABItem/OnyxFABItem.vue"]]);
+const OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__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([]);
@@ -3543,7 +3556,7 @@ const useGlobalFAB = () => {
   );
   return globalFABProvider;
 };
-const _sfc_main$1u = /* @__PURE__ */ defineComponent({
+const _sfc_main$1x = /* @__PURE__ */ defineComponent({
   __name: "OnyxGlobalFAB",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3557,7 +3570,7 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1x(_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)),
@@ -3592,14 +3605,14 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["label", "alignment"])) : createCommentVNode("v-if", true);
 }
-const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
-const _sfc_main$1t = {};
-const _hoisted_1$14 = {
+const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
+const _sfc_main$1w = {};
+const _hoisted_1$17 = {
   class: "onyx-component onyx-circle-spinner",
   viewBox: "0 0 50 50"
 };
-function _sfc_render$1t(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$14, [..._cache[0] || (_cache[0] = [
+function _sfc_render$1w(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$17, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "circle",
       {
@@ -3614,11 +3627,11 @@ function _sfc_render$1t(_ctx, _cache) {
     )
   ])]);
 }
-const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
-const _sfc_main$1s = {};
-const _hoisted_1$13 = { class: "onyx-component onyx-loading-dots" };
-function _sfc_render$1s(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$13, [..._cache[0] || (_cache[0] = [
+const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
+const _sfc_main$1v = {};
+const _hoisted_1$16 = { class: "onyx-component onyx-loading-dots" };
+function _sfc_render$1v(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$16, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "span",
       { class: "onyx-loading-dots__center" },
@@ -3628,8 +3641,8 @@ function _sfc_render$1s(_ctx, _cache) {
     )
   ])]);
 }
-const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { type: String, required: false, default: "dots" }
@@ -3642,10 +3655,10 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1u(_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$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue"]]);
+const OnyxLoadingIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__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());
@@ -3692,7 +3705,7 @@ const useRipple = (container) => {
   });
   return { isPointerDown, ripples, startRipple, hideRipples, hideRipple, events };
 };
-const _sfc_main$1q = /* @__PURE__ */ defineComponent({
+const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   __name: "OnyxRipple",
   setup(__props, { expose: __expose }) {
     const rippleTrigger = useTemplateRef("rippleTriggerRef");
@@ -3705,16 +3718,16 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$12 = {
+const _hoisted_1$15 = {
   ref: "rippleTriggerRef",
   class: "onyx-component onyx-ripple",
   "aria-hidden": "true"
 };
-const _hoisted_2$O = ["data-rippleid"];
-function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$R = ["data-rippleid"];
+function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "span",
-    _hoisted_1$12,
+    _hoisted_1$15,
     [
       (openBlock(true), createElementBlock(
         Fragment,
@@ -3729,7 +3742,7 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             "data-rippleid": key,
             onAnimationend: _cache[0] || (_cache[0] = ($event) => $setup.hideRipple($event.target))
-          }, null, 44, _hoisted_2$O);
+          }, null, 44, _hoisted_2$R);
         }),
         128
         /* KEYED_FRAGMENT */
@@ -3739,8 +3752,8 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
-const _sfc_main$1p = /* @__PURE__ */ defineComponent({
+const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "OnyxButton",
   props: {
     density: { type: null, required: false },
@@ -3770,8 +3783,8 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$11 = { class: "onyx-button__label onyx-truncation-ellipsis" };
-function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$14 = { class: "onyx-button__label onyx-truncation-ellipsis" };
+function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-button-skeleton", $setup.densityClass])
@@ -3808,7 +3821,7 @@ function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
       })) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_1$11,
+        _hoisted_1$14,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -3823,8 +3836,8 @@ function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label"]));
 }
-const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
-const _sfc_main$1o = /* @__PURE__ */ defineComponent({
+const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
+const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoCard",
   props: {
     density: { type: null, required: false },
@@ -3851,16 +3864,16 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$10 = { class: "onyx-info-card__content" };
-const _hoisted_2$N = {
+const _hoisted_1$13 = { class: "onyx-info-card__content" };
+const _hoisted_2$Q = {
   key: 3,
   class: "onyx-info-card__description onyx-text--small"
 };
-const _hoisted_3$x = {
+const _hoisted_3$z = {
   key: 4,
   class: "onyx-info-card__buttons onyx-density-compact"
 };
-function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3872,7 +3885,7 @@ function _sfc_render$1o(_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$10, [
+      createElementVNode("div", _hoisted_1$13, [
         $setup.props.headline ? (openBlock(), createBlock($setup["OnyxHeadline"], {
           key: 0,
           is: "h3",
@@ -3915,10 +3928,10 @@ function _sfc_render$1o(_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$N, [
+        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$Q, [
           renderSlot(_ctx.$slots, "default")
         ])) : createCommentVNode("v-if", true),
-        !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$x, [
+        !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
           renderSlot(_ctx.$slots, "buttons")
         ])) : createCommentVNode("v-if", true)
       ])
@@ -3927,8 +3940,8 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationMessage",
   props: {
     headline: { type: String, required: true },
@@ -3946,7 +3959,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxInfoCard"], {
     class: normalizeClass(["onyx-component onyx-notification-message", [
       "onyx-component",
@@ -3979,7 +3992,7 @@ function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["class", "headline", "icon", "style", "aria-label"]);
 }
-const OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationMessage/OnyxNotificationMessage.vue"]]);
+const OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__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;
@@ -4024,7 +4037,7 @@ const useNotification = () => {
   );
   return notificationsProvider;
 };
-const _sfc_main$1m = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotifications",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -4034,15 +4047,15 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$$ = {
+const _hoisted_1$12 = {
   key: 0,
   class: "onyx-component onyx-notifications",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$$, [
+function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$12, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -4094,8 +4107,8 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$1m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
-const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "OnyxToastMessage",
   props: {
     density: { type: null, required: false },
@@ -4131,33 +4144,33 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$_ = { class: "onyx-toast-message__wrapper" };
-const _hoisted_2$M = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
-const _hoisted_3$w = { class: "onyx-toast-message__headline onyx-text" };
-const _hoisted_4$l = { class: "onyx-truncation-ellipsis" };
-const _hoisted_5$f = ["aria-label"];
-const _hoisted_6$a = {
+const _hoisted_1$11 = { class: "onyx-toast-message__wrapper" };
+const _hoisted_2$P = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
+const _hoisted_3$y = { class: "onyx-toast-message__headline onyx-text" };
+const _hoisted_4$m = { class: "onyx-truncation-ellipsis" };
+const _hoisted_5$g = ["aria-label"];
+const _hoisted_6$b = {
   key: 0,
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
 };
-function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1o(_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$_, [
+      createElementVNode("div", _hoisted_1$11, [
         $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
           key: 0,
           icon: $setup.icon
         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_2$M, [
-          createElementVNode("div", _hoisted_3$w, [
+        createElementVNode("div", _hoisted_2$P, [
+          createElementVNode("div", _hoisted_3$y, [
             createElementVNode(
               "span",
-              _hoisted_4$l,
+              _hoisted_4$m,
               toDisplayString($setup.props.headline),
               1
               /* TEXT */
@@ -4170,11 +4183,11 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("close"))
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconXSmall }, null, 8, ["icon"])
-            ], 8, _hoisted_5$f)) : createCommentVNode("v-if", true)
+            ], 8, _hoisted_5$g)) : createCommentVNode("v-if", true)
           ]),
           $setup.props.description ? (openBlock(), createElementBlock(
             "p",
-            _hoisted_6$a,
+            _hoisted_6$b,
             toDisplayString($setup.props.description),
             1
             /* TEXT */
@@ -4199,7 +4212,7 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "role", "aria-label"]);
 }
-const OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue"]]);
+const OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__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;
@@ -4242,7 +4255,7 @@ const useToast = () => {
   );
   return toastProvider;
 };
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "OnyxToast",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -4252,15 +4265,15 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Z = {
+const _hoisted_1$10 = {
   key: 0,
   class: "onyx-component onyx-toast",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$Z, [
+function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$10, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -4278,8 +4291,8 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "OnyxAppLayout",
   props: {
     navBarAlignment: { type: String, required: false, default: "top" }
@@ -4293,22 +4306,22 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Y = {
+const _hoisted_1$$ = {
   key: 0,
   class: "onyx-app__nav"
 };
-const _hoisted_2$L = { class: "onyx-app__page" };
-function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$O = { class: "onyx-app__page" };
+function _sfc_render$1m(_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$Y, [
+      $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$$, [
         renderSlot(_ctx.$slots, "navBar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$L, [
+      createElementVNode("div", _hoisted_2$O, [
         renderSlot(_ctx.$slots, "default")
       ]),
       createVNode($setup["OnyxToast"]),
@@ -4319,8 +4332,8 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$1m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatar",
   props: {
     size: { type: null, required: false, default: "48px" },
@@ -4354,13 +4367,13 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$X = ["title", "aria-label"];
-const _hoisted_2$K = ["src", "alt"];
-const _hoisted_3$v = {
+const _hoisted_1$_ = ["title", "aria-label"];
+const _hoisted_2$N = ["src", "alt"];
+const _hoisted_3$x = {
   key: 0,
   class: "onyx-avatar__initials"
 };
-function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass([
       "onyx-component",
@@ -4377,13 +4390,13 @@ function _sfc_render$1i(_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$K)) : (openBlock(), createElementBlock(
+    }, null, 40, _hoisted_2$N)) : (openBlock(), createElementBlock(
       Fragment,
       { key: 1 },
       [
         $setup.initials ? (openBlock(), createElementBlock(
           "div",
-          _hoisted_3$v,
+          _hoisted_3$x,
           toDisplayString($setup.initials),
           1
           /* TEXT */
@@ -4396,10 +4409,10 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
       64
       /* STABLE_FRAGMENT */
     ))
-  ], 10, _hoisted_1$X);
+  ], 10, _hoisted_1$_);
 }
-const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatarStack",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -4408,14 +4421,14 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$W = { class: "onyx-component onyx-avatar-stack" };
-function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$W, [
+const _hoisted_1$Z = { class: "onyx-component onyx-avatar-stack" };
+function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$Z, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "OnyxBadge",
   props: {
     density: { type: null, required: false },
@@ -4432,7 +4445,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -4463,8 +4476,8 @@ function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "OnyxBottomBar",
   props: {
     density: { type: null, required: false },
@@ -4479,10 +4492,10 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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$u = { class: "onyx-bottom-bar__content--right" };
-function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$Y = { class: "onyx-bottom-bar__content onyx-grid-container" };
+const _hoisted_2$M = { class: "onyx-bottom-bar__content--left" };
+const _hoisted_3$w = { class: "onyx-bottom-bar__content--right" };
+function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -4494,11 +4507,11 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$V, [
-        createElementVNode("div", _hoisted_2$J, [
+      createElementVNode("div", _hoisted_1$Y, [
+        createElementVNode("div", _hoisted_2$M, [
           renderSlot(_ctx.$slots, "left")
         ]),
-        createElementVNode("div", _hoisted_3$u, [
+        createElementVNode("div", _hoisted_3$w, [
           renderSlot(_ctx.$slots, "default")
         ])
       ])
@@ -4507,7 +4520,7 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
+const OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
 const useMoreList = (options) => {
   const visibleElements = ref();
   const hiddenElements = ref();
@@ -4602,7 +4615,7 @@ const useMoreListChild = (injectionKey) => {
 };
 const BREADCRUMB_MORE_LIST_INJECTION_KEY = Symbol();
 const BREADCRUMB_MORE_LIST_TARGET_INJECTION_KEY = Symbol();
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "OnyxExternalLinkIcon",
   props: {
     href: { type: String, required: false },
@@ -4623,7 +4636,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.isVisible ? (openBlock(), createBlock($setup["OnyxIcon"], {
     key: 0,
     class: "onyx-component onyx-external-link-icon",
@@ -4631,8 +4644,8 @@ function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
     size: "16px"
   }, null, 8, ["icon"])) : createCommentVNode("v-if", true);
 }
-const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "OnyxListItem",
   props: {
     density: { type: null, required: false },
@@ -4651,7 +4664,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     {
@@ -4673,8 +4686,8 @@ function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
-const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMenuItem",
   props: {
@@ -4753,17 +4766,17 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$U = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$I = {
+const _hoisted_1$X = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$L = {
   key: 0,
   class: "onyx-menu-item__chevron"
 };
-const _hoisted_3$t = {
+const _hoisted_3$v = {
   key: 0,
   role: "menu",
   class: "onyx-menu-item__children"
 };
-function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OnyxMenuItem = resolveComponent("OnyxMenuItem", true);
   return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({
     selected: $setup.isActive,
@@ -4784,7 +4797,7 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("span", null, [
               createElementVNode(
                 "span",
-                _hoisted_1$U,
+                _hoisted_1$X,
                 toDisplayString($setup.props.label),
                 1
                 /* TEXT */
@@ -4798,7 +4811,7 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ])
           ]),
-          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$I, [
+          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$L, [
             createVNode($setup["OnyxIcon"], {
               icon: $setup.iconChevronRightSmall,
               size: "24px"
@@ -4812,7 +4825,7 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       $setup.hasChildren ? withDirectives((openBlock(), createElementBlock(
         "ul",
-        _hoisted_3$t,
+        _hoisted_3$v,
         [
           createVNode(
             _component_OnyxMenuItem,
@@ -4849,8 +4862,8 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["selected", "active", "color", "disabled", "class"]);
 }
-const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxBreadcrumbItem",
   props: {
@@ -4876,7 +4889,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -4936,8 +4949,8 @@ function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "OnyxMoreList",
   props: {
     injectionKey: { type: [Symbol, Object], required: true },
@@ -4970,7 +4983,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     resolveDynamicComponent($setup.props.is),
     {
@@ -5010,8 +5023,8 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "OnyxBreadcrumb",
   props: {
     density: { type: null, required: false },
@@ -5037,13 +5050,13 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$T = ["aria-label", "aria-hidden"];
-const _hoisted_2$H = {
+const _hoisted_1$W = ["aria-label", "aria-hidden"];
+const _hoisted_2$K = {
   class: "onyx-breadcrumb__list onyx-grid-container",
   role: "menu"
 };
-const _hoisted_3$s = { ref: "moreListRef" };
-function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$u = { ref: "moreListRef" };
+function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("nav", {
     class: normalizeClass([
       "onyx-component",
@@ -5054,7 +5067,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.t("breadcrumb.label"),
     "aria-hidden": $setup.props.skeleton
   }, [
-    createElementVNode("ol", _hoisted_2$H, [
+    createElementVNode("ol", _hoisted_2$K, [
       createVNode($setup["OnyxBreadcrumbItem"], {
         class: "onyx-breadcrumb__home",
         href: $setup.props.home?.link ?? "/",
@@ -5122,7 +5135,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
             options: withCtx(() => [
               createElementVNode(
                 "div",
-                _hoisted_3$s,
+                _hoisted_3$u,
                 null,
                 512
                 /* NEED_PATCH */
@@ -5136,13 +5149,13 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
         /* FORWARDED */
       }, 8, ["injection-key"])
     ])
-  ], 10, _hoisted_1$T);
+  ], 10, _hoisted_1$W);
 }
-const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumb/OnyxBreadcrumb.vue"]]);
+const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__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$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "OnyxCard",
   props: {
     density: { type: null, required: false },
@@ -5161,7 +5174,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1b(_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"]
   }), {
@@ -5172,8 +5185,8 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class"]);
 }
-const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "OnyxTooltip",
   props: {
     density: { type: null, required: false },
@@ -5328,8 +5341,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$S = { class: "onyx-tooltip--content" };
-function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$V = { class: "onyx-tooltip--content" };
+function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -5345,7 +5358,7 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
           style: $setup.tooltipStyles
         }),
         [
-          createElementVNode("div", _hoisted_1$S, [
+          createElementVNode("div", _hoisted_1$V, [
             $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 0,
               icon: $setup.props.icon,
@@ -5369,8 +5382,8 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, STYLE */
   );
 }
-const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "OnyxCalendarCell",
   props: {
     density: { type: null, required: false },
@@ -5400,17 +5413,17 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$R = { class: "onyx-calendar-cell__header" };
-const _hoisted_2$G = { class: "onyx-calendar-cell__date-container" };
-const _hoisted_3$r = {
+const _hoisted_1$U = { class: "onyx-calendar-cell__header" };
+const _hoisted_2$J = { class: "onyx-calendar-cell__date-container" };
+const _hoisted_3$t = {
   key: 1,
   class: "onyx-calendar-cell__date"
 };
-const _hoisted_4$k = {
+const _hoisted_4$l = {
   key: 0,
   class: "onyx-calendar-cell__main"
 };
-function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "td",
     {
@@ -5436,8 +5449,8 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }), {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$R, [
-            createElementVNode("div", _hoisted_2$G, [
+          createElementVNode("div", _hoisted_1$U, [
+            createElementVNode("div", _hoisted_2$J, [
               $setup.props.tooltipText ? (openBlock(), createBlock($setup["OnyxTooltip"], {
                 key: 0,
                 text: $setup.props.tooltipText,
@@ -5456,14 +5469,14 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
                 /* STABLE */
               }, 8, ["text"])) : (openBlock(), createElementBlock(
                 "span",
-                _hoisted_3$r,
+                _hoisted_3$t,
                 toDisplayString($setup.props.date),
                 1
                 /* TEXT */
               ))
             ])
           ]),
-          !!$setup.slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
+          !!$setup.slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$l, [
             renderSlot(_ctx.$slots, "default")
           ])) : createCommentVNode("v-if", true)
         ]),
@@ -5475,8 +5488,8 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxCalendarCell = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendarCell/OnyxCalendarCell.vue"]]);
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const OnyxCalendarCell = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendarCell/OnyxCalendarCell.vue"]]);
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "OnyxIconButton",
   props: {
     density: { type: null, required: false },
@@ -5501,7 +5514,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-icon-button-skeleton", $setup.densityClass])
@@ -5529,8 +5542,8 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["aria-label", "title", "class"]));
 }
-const OnyxIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const OnyxIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTag",
   props: {
     density: { type: null, required: false },
@@ -5557,9 +5570,9 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Q = { class: "onyx-text--small onyx-truncation-ellipsis" };
-const _hoisted_2$F = { class: "onyx-text--small onyx-truncation-ellipsis" };
-function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$T = { class: "onyx-text--small onyx-truncation-ellipsis" };
+const _hoisted_2$I = { class: "onyx-text--small onyx-truncation-ellipsis" };
+function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-tag-skeleton", $setup.densityClass])
@@ -5582,7 +5595,7 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
           createElementVNode(
             "span",
-            _hoisted_1$Q,
+            _hoisted_1$T,
             toDisplayString($setup.props.label),
             1
             /* TEXT */
@@ -5613,7 +5626,7 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_2$F,
+        _hoisted_2$I,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -5623,10 +5636,10 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
-const __default__$4 = {};
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
+const __default__$7 = {};
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
   __name: "OnyxCalendar",
   props: {
     density: { type: null, required: false },
@@ -5740,12 +5753,12 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$P = { class: "onyx-calendar__header" };
-const _hoisted_2$E = { class: "control-container time-control-container" };
-const _hoisted_3$q = { class: "control-container" };
-const _hoisted_4$j = { class: "onyx-calendar__body" };
-const _hoisted_5$e = ["abbr"];
-function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$S = { class: "onyx-calendar__header" };
+const _hoisted_2$H = { class: "control-container time-control-container" };
+const _hoisted_3$s = { class: "control-container" };
+const _hoisted_4$k = { class: "onyx-calendar__body" };
+const _hoisted_5$f = ["abbr"];
+function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     {
@@ -5766,8 +5779,8 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component", "onyx-calendar", `onyx-calendar--${$setup.calendarSize}`, $setup.densityClass])
     },
     [
-      createElementVNode("div", _hoisted_1$P, [
-        createElementVNode("div", _hoisted_2$E, [
+      createElementVNode("div", _hoisted_1$S, [
+        createElementVNode("div", _hoisted_2$H, [
           createVNode($setup["OnyxSystemButton"], {
             label: $setup.t("calendar.todayButton.label"),
             class: "control-container__today-btn",
@@ -5810,11 +5823,11 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
             onClick: _cache[1] || (_cache[1] = ($event) => $setup.goToMonthByOffset(1))
           }, null, 8, ["label", "icon", "disabled"])
         ]),
-        createElementVNode("div", _hoisted_3$q, [
+        createElementVNode("div", _hoisted_3$s, [
           renderSlot(_ctx.$slots, "actions")
         ])
       ]),
-      createElementVNode("div", _hoisted_4$j, [
+      createElementVNode("div", _hoisted_4$k, [
         createElementVNode(
           "table",
           normalizeProps(guardReactiveProps($setup.tableProps)),
@@ -5829,7 +5842,7 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
                       key: header,
                       scope: "col",
                       abbr: header
-                    }, toDisplayString(header), 9, _hoisted_5$e);
+                    }, toDisplayString(header), 9, _hoisted_5$f);
                   }),
                   128
                   /* KEYED_FRAGMENT */
@@ -5906,7 +5919,7 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendar/OnyxCalendar.vue"]]);
+const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__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.
@@ -6122,7 +6135,7 @@ const formatMinMax = (locale, type, value) => {
   };
   return date.toLocaleString(locale, format);
 };
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "OnyxErrorTooltip",
   props: {
     errorMessages: { type: Object, required: false },
@@ -6138,16 +6151,16 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$O = { class: "onyx-component" };
-const _hoisted_2$D = {
+const _hoisted_1$R = { class: "onyx-component" };
+const _hoisted_2$G = {
   key: 0,
   ref: "targetRef"
 };
-function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$O, [
+function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$R, [
     !$setup.tooltipError || $setup.props.disabled ? (openBlock(), createElementBlock(
       "div",
-      _hoisted_2$D,
+      _hoisted_2$G,
       null,
       512
       /* NEED_PATCH */
@@ -6180,8 +6193,8 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, ["to"])) : createCommentVNode("v-if", true)
   ]);
 }
-const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxCheckbox",
   props: {
@@ -6228,10 +6241,10 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$N = ["title"];
-const _hoisted_2$C = { class: "onyx-checkbox__container" };
-const _hoisted_3$p = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
-function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$Q = ["title"];
+const _hoisted_2$F = { class: "onyx-checkbox__container" };
+const _hoisted_3$r = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -6257,7 +6270,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["onyx-component onyx-checkbox", [$setup.requiredTypeClass, $setup.densityClass]]),
         title: $setup.title
       }, [
-        createElementVNode("div", _hoisted_2$C, [
+        createElementVNode("div", _hoisted_2$F, [
           $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
             key: 0,
             class: "onyx-checkbox__loading",
@@ -6274,7 +6287,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
             required: $setup.props.required,
             value: $setup.props.value,
             autofocus: $setup.props.autofocus
-          }, $setup.restAttrs), null, 16, _hoisted_3$p)), [
+          }, $setup.restAttrs), null, 16, _hoisted_3$r)), [
             [vModelCheckbox, $setup.isChecked],
             [$setup["vCustomValidity"]]
           ])
@@ -6310,13 +6323,13 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_1$N)
+      ], 10, _hoisted_1$Q)
     ]),
     _: 1
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-const OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue"]]);
+const OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__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)
@@ -6351,7 +6364,7 @@ const useCheckAll = (enabledOptionValues, modelValue, onChangeCallback) => {
     }
   };
 };
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoTooltip",
   props: {
     text: { type: String, required: true },
@@ -6387,9 +6400,9 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$M = { class: "onyx-component onyx-info-tooltip" };
-function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$M, [
+const _hoisted_1$P = { class: "onyx-component onyx-info-tooltip" };
+function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$P, [
     $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)
@@ -6447,8 +6460,8 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ]);
 }
-const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "OnyxCheckboxGroup",
   props: {
     truncation: { type: null, required: false, default: "ellipsis" },
@@ -6506,18 +6519,18 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$L = ["disabled", "aria-label"];
-const _hoisted_2$B = {
+const _hoisted_1$O = ["disabled", "aria-label"];
+const _hoisted_2$E = {
   key: 0,
   class: "onyx-checkbox-group__label"
 };
-function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$12(_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$B, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$E, [
       createVNode($setup["OnyxHeadline"], { is: "h3" }, {
         default: withCtx(() => [
           createTextVNode(
@@ -6597,12 +6610,12 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$L);
+  ], 10, _hoisted_1$O);
 }
-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 OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__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$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxTab",
   props: {
@@ -6633,9 +6646,9 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$K = ["disabled"];
-const _hoisted_2$A = { class: "onyx-tab__label" };
-function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$N = ["disabled"];
+const _hoisted_2$D = { class: "onyx-tab__label" };
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -6656,7 +6669,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         disabled: $setup.props.disabled
       }), [
-        createElementVNode("div", _hoisted_2$A, [
+        createElementVNode("div", _hoisted_2$D, [
           renderSlot(_ctx.$slots, "tab", {}, () => [
             createTextVNode(
               toDisplayString($setup.props.label),
@@ -6665,7 +6678,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
             )
           ])
         ])
-      ], 16, _hoisted_1$K)),
+      ], 16, _hoisted_1$N)),
       $setup.tabsContext?.panel.value ? (openBlock(), createBlock(Teleport, {
         key: 2,
         to: $setup.tabsContext?.panel.value,
@@ -6690,10 +6703,10 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-const OnyxTab = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue"]]);
-const __default__$3 = {};
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const OnyxTab = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue"]]);
+const __default__$6 = {};
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
   __name: "OnyxCodeTab",
   props: {
     value: { type: null, required: true },
@@ -6711,6 +6724,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     const tabProps = useForwardProps(props, OnyxTab);
     const tabsContext = inject(CODE_TABS_INJECTION_KEY, void 0);
     const label = computed(() => props.label ?? t.value("codeTabs.tabLabel"));
+    const skeleton = useSkeletonContext(props);
     watch(
       [() => props.value, () => props.code],
       ([newValue, newCode], [oldValue]) => {
@@ -6728,16 +6742,20 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       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 };
+    const __returned__ = { props, t, tabProps, tabsContext, label, skeleton, disabled, OnyxIcon, OnyxSkeleton, OnyxTab };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-const _hoisted_1$J = {
+const _hoisted_1$M = {
+  key: 0,
+  class: "onyx-code-tab__skeletons"
+};
+const _hoisted_2$C = {
   key: 0,
   class: "onyx-code-tab__language onyx-text--small"
 };
-function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxTab"], mergeProps($setup.tabProps, {
     label: $setup.label,
     class: "onyx-code-tab",
@@ -6758,31 +6776,52 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     default: withCtx(() => [
-      renderSlot(_ctx.$slots, "default", {}, () => [
-        createElementVNode("pre", null, [
-          createElementVNode(
-            "code",
-            null,
-            toDisplayString($setup.props.code),
+      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
+        (openBlock(), createElementBlock(
+          Fragment,
+          null,
+          renderList(3, (i) => {
+            return createVNode($setup["OnyxSkeleton"], {
+              key: i,
+              class: "onyx-code-tab__skeleton"
+            });
+          }),
+          64
+          /* STABLE_FRAGMENT */
+        ))
+      ])) : (openBlock(), createElementBlock(
+        Fragment,
+        { key: 1 },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createElementVNode("pre", null, [
+              createElementVNode(
+                "code",
+                null,
+                toDisplayString($setup.props.code),
+                1
+                /* TEXT */
+              )
+            ])
+          ]),
+          $setup.props.language ? (openBlock(), createElementBlock(
+            "span",
+            _hoisted_2$C,
+            toDisplayString($setup.props.language),
             1
             /* TEXT */
-          )
-        ])
-      ]),
-      $setup.props.language ? (openBlock(), createElementBlock(
-        "span",
-        _hoisted_1$J,
-        toDisplayString($setup.props.language),
-        1
-        /* TEXT */
-      )) : createCommentVNode("v-if", true)
+          )) : createCommentVNode("v-if", true)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      ))
     ]),
     _: 3
     /* FORWARDED */
   }, 16, ["label", "disabled"]);
 }
-const OnyxCodeTab = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCodeTab/OnyxCodeTab.vue"]]);
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const OnyxCodeTab = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCodeTab/OnyxCodeTab.vue"]]);
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "OnyxTabs",
   props: {
     density: { type: null, required: false },
@@ -6821,12 +6860,12 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$I = { class: "onyx-tabs__header" };
-const _hoisted_2$z = {
+const _hoisted_1$L = { class: "onyx-tabs__header" };
+const _hoisted_2$B = {
   key: 0,
   class: "onyx-tabs__actions"
 };
-function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -6839,7 +6878,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$I, [
+      createElementVNode("div", _hoisted_1$L, [
         createElementVNode(
           "div",
           mergeProps($setup.headless.elements.tablist.value, { class: "onyx-tabs__tablist" }),
@@ -6849,7 +6888,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
           16
           /* FULL_PROPS */
         ),
-        $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2$z, [
+        $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2$B, [
           renderSlot(_ctx.$slots, "actions")
         ])) : createCommentVNode("v-if", true)
       ])
@@ -6858,10 +6897,10 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxTabs = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.vue"]]);
-const __default__$2 = {};
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+const OnyxTabs = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.vue"]]);
+const __default__$5 = {};
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
   __name: "OnyxCodeTabs",
   props: {
     skeleton: { type: Boolean, required: false },
@@ -6883,21 +6922,26 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     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 copyStatus = ref();
     const handleCopy = async () => {
       if (!activeTabCode.value) return;
-      await navigator.clipboard.writeText(activeTabCode.value);
-      isCopied.value = true;
-      setTimeout(() => isCopied.value = false, 3e3);
+      try {
+        await navigator.clipboard.writeText(activeTabCode.value);
+        copyStatus.value = "success";
+      } catch {
+        copyStatus.value = "error";
+      } finally {
+        setTimeout(() => copyStatus.value = void 0, 3e3);
+      }
     };
-    const __returned__ = { props, emit, t, tabsProps, modelValue, tabs, activeTabCode, isCopied, handleCopy, get iconFileCopy() {
+    const __returned__ = { props, emit, t, tabsProps, modelValue, tabs, activeTabCode, copyStatus, handleCopy, get iconFileCopy() {
       return iconFileCopy;
     }, OnyxSystemButton, OnyxTabs, OnyxTag };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$_(_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),
@@ -6907,17 +6951,21 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
     density: "compact"
   }), {
     actions: withCtx(() => [
-      !$setup.isCopied ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+      !$setup.copyStatus ? (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"], {
+      }, null, 8, ["label", "icon", "disabled"])) : $setup.copyStatus === "success" ? (openBlock(), createBlock($setup["OnyxTag"], {
         key: 1,
         label: $setup.t("codeTabs.copied"),
         color: "success"
-      }, null, 8, ["label"]))
+      }, null, 8, ["label"])) : $setup.copyStatus === "error" ? (openBlock(), createBlock($setup["OnyxTag"], {
+        key: 2,
+        label: $setup.t("codeTabs.failed"),
+        color: "danger"
+      }, null, 8, ["label"])) : createCommentVNode("v-if", true)
     ]),
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
@@ -6926,13 +6974,13 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["modelValue", "label"]);
 }
-const OnyxCodeTabs = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCodeTabs/OnyxCodeTabs.vue"]]);
+const OnyxCodeTabs = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__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$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "OnyxEmpty",
   props: {
     density: { type: null, required: false }
@@ -6949,12 +6997,12 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$H = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
-const _hoisted_2$y = {
+const _hoisted_1$K = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
+const _hoisted_2$A = {
   key: 0,
   class: "onyx-empty__buttons"
 };
-function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -6967,10 +7015,10 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
           size: "48px"
         }, null, 8, ["icon"])
       ]),
-      createElementVNode("div", _hoisted_1$H, [
+      createElementVNode("div", _hoisted_1$K, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$y, [
+      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$A, [
         renderSlot(_ctx.$slots, "buttons")
       ])) : createCommentVNode("v-if", true)
     ],
@@ -6978,8 +7026,8 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.vue"]]);
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const OnyxEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.vue"]]);
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "OnyxTable",
   props: {
     density: { type: null, required: false },
@@ -7010,16 +7058,16 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$G = {
+const _hoisted_1$J = {
   key: 0,
   class: "onyx-table-wrapper__top"
 };
-const _hoisted_2$x = ["id"];
-const _hoisted_3$o = { class: "onyx-table-wrapper__actions" };
-const _hoisted_4$i = ["tabindex"];
-const _hoisted_5$d = ["aria-labelledby"];
-const _hoisted_6$9 = ["span"];
-const _hoisted_7$5 = {
+const _hoisted_2$z = ["id"];
+const _hoisted_3$q = { class: "onyx-table-wrapper__actions" };
+const _hoisted_4$j = ["tabindex"];
+const _hoisted_5$e = ["aria-labelledby"];
+const _hoisted_6$a = ["span"];
+const _hoisted_7$6 = {
   key: 0,
   class: "onyx-table__header"
 };
@@ -7032,7 +7080,7 @@ const _hoisted_13 = {
   key: 1,
   class: "onyx-table-wrapper__bottom"
 };
-function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -7040,11 +7088,11 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
       style: normalizeStyle($setup.style)
     },
     [
-      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$G, [
+      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$J, [
         createElementVNode("div", { id: $setup.headlineId }, [
           renderSlot(_ctx.$slots, "headline")
-        ], 8, _hoisted_2$x),
-        createElementVNode("div", _hoisted_3$o, [
+        ], 8, _hoisted_2$z),
+        createElementVNode("div", _hoisted_3$q, [
           renderSlot(_ctx.$slots, "actions")
         ])
       ])) : createCommentVNode("v-if", true),
@@ -7074,12 +7122,12 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
               return openBlock(), createElementBlock("colgroup", {
                 key: group.key,
                 span: group.span
-              }, null, 8, _hoisted_6$9);
+              }, null, 8, _hoisted_6$a);
             }),
             128
             /* KEYED_FRAGMENT */
           )),
-          $setup.slots.head ? (openBlock(), createElementBlock("thead", _hoisted_7$5, [
+          $setup.slots.head ? (openBlock(), createElementBlock("thead", _hoisted_7$6, [
             $setup.props.columnGroups?.length ? (openBlock(), createElementBlock("tr", _hoisted_8$5, [
               (openBlock(true), createElementBlock(
                 Fragment,
@@ -7121,8 +7169,8 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ])
           ])
-        ], 10, _hoisted_5$d)
-      ], 16, _hoisted_4$i),
+        ], 10, _hoisted_5$e)
+      ], 16, _hoisted_4$j),
       !!$setup.slots.bottomLeft || !!$setup.slots.pagination ? (openBlock(), createElementBlock("div", _hoisted_13, [
         createElementVNode("div", null, [
           renderSlot(_ctx.$slots, "bottomLeft")
@@ -7136,8 +7184,8 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     /* STYLE */
   );
 }
-const OnyxTable = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$V], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue"]]);
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const OnyxTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue"]]);
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "OnyxDataGridRenderer",
   props: {
     density: { type: null, required: false },
@@ -7173,7 +7221,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$X(_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({
@@ -7280,8 +7328,8 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ]), 1040, ["scroll-container-attrs"]);
 }
-const OnyxDataGridRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue"]]);
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const OnyxDataGridRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue"]]);
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMiniSearch",
   props: {
@@ -7321,9 +7369,9 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$F = ["autofocus", "placeholder", "aria-label"];
-const _hoisted_2$w = ["aria-label"];
-function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$I = ["autofocus", "placeholder", "aria-label"];
+const _hoisted_2$y = ["aria-label"];
+function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -7342,7 +7390,7 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
         size: "1"
       }, $setup.restAttrs, {
         "aria-label": $setup.props.label
-      }), null, 16, _hoisted_1$F), [
+      }), null, 16, _hoisted_1$I), [
         [vModelText, $setup.modelValue]
       ]),
       createElementVNode("button", {
@@ -7355,7 +7403,7 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[2] || (_cache[2] = ($event) => $setup.emit("clear"))
       }, [
         createVNode($setup["OnyxIcon"], { icon: $setup.iconXSmall }, null, 8, ["icon"])
-      ], 40, _hoisted_2$w),
+      ], 40, _hoisted_2$y),
       createVNode($setup["OnyxIcon"], {
         class: "onyx-mini-search__icon",
         icon: $setup.iconSearch
@@ -7365,11 +7413,11 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxMiniSearch = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$T], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue"]]);
+const OnyxMiniSearch = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue"]]);
 const prepareMapping = (features, key) => features.flatMap((f) => f[key]).filter((f) => f?.func).sort((a, b) => (a?.order ?? 0) - (b?.order ?? 0));
 const applyMapping = (mapping, input2) => mapping.reduce((output, m) => m.func(output), input2);
 const DataGridRowOptionsSymbol = Symbol("RowOptions");
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "HeaderCell",
   props: {
     label: { type: String, required: true }
@@ -7383,27 +7431,27 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$E = { class: "onyx-component onyx-data-grid-header-cell" };
-const _hoisted_2$v = { class: "onyx-data-grid-header-cell__label" };
-const _hoisted_3$n = {
+const _hoisted_1$H = { class: "onyx-component onyx-data-grid-header-cell" };
+const _hoisted_2$x = { class: "onyx-data-grid-header-cell__label" };
+const _hoisted_3$p = {
   key: 0,
   class: "onyx-data-grid-header-cell__actions"
 };
-function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$E, [
+function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$H, [
     createElementVNode(
       "span",
-      _hoisted_2$v,
+      _hoisted_2$x,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
     ),
-    $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$n, [
+    $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
       renderSlot(_ctx.$slots, "actions")
     ])) : createCommentVNode("v-if", true)
   ]);
 }
-const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$S], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue"]]);
+const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$V], ["__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);
@@ -7896,7 +7944,7 @@ const formatBytesToString = (locale, bytes) => {
     unitDisplay: "narrow"
   }).format(value);
 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "OnyxInlinePagination",
   props: {
     density: { type: null, required: false },
@@ -7948,12 +7996,12 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$D = ["aria-label"];
-const _hoisted_2$u = ["aria-label", "disabled"];
-const _hoisted_3$m = ["aria-label", "disabled", "onClick"];
-const _hoisted_4$h = ["aria-label"];
-const _hoisted_5$c = ["aria-label", "disabled"];
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$G = ["aria-label"];
+const _hoisted_2$w = ["aria-label", "disabled"];
+const _hoisted_3$o = ["aria-label", "disabled", "onClick"];
+const _hoisted_4$i = ["aria-label"];
+const _hoisted_5$d = ["aria-label", "disabled"];
+function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass([
@@ -7982,7 +8030,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue - 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronLeftSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_2$u),
+    ], 8, _hoisted_2$w),
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -8001,7 +8049,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
               type: "button",
               disabled: $setup.props.disabled,
               onClick: ($event) => $setup.emit("update:modelValue", pageNumber)
-            }, toDisplayString(pageNumber), 11, _hoisted_3$m)) : (openBlock(), createElementBlock("div", {
+            }, toDisplayString(pageNumber), 11, _hoisted_3$o)) : (openBlock(), createElementBlock("div", {
               key: 1,
               class: normalizeClass(["onyx-pagination__more-pages"]),
               "aria-label": $setup.t("pagination.morePages")
@@ -8024,7 +8072,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
                 _: 1
                 /* STABLE */
               })
-            ], 8, _hoisted_4$h))
+            ], 8, _hoisted_4$i))
           ],
           64
           /* STABLE_FRAGMENT */
@@ -8041,10 +8089,10 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[1] || (_cache[1] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue + 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_5$c)
-  ], 10, _hoisted_1$D));
+    ], 8, _hoisted_5$d)
+  ], 10, _hoisted_1$G));
 }
-const OnyxInlinePagination = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxInlinePagination.vue"]]);
+const OnyxInlinePagination = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__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";
@@ -8054,7 +8102,7 @@ const useErrorClass = (showError) => computed(() => {
   }
   return "onyx-form-element--touched-invalid";
 });
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "FormMessage",
   props: {
     messages: { type: Object, required: true },
@@ -8068,17 +8116,17 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$C = {
+const _hoisted_1$F = {
   class: /* @__PURE__ */ normalizeClass(["onyx-truncation-ellipsis"])
 };
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($props.messages.hidden ? $setup.OnyxVisuallyHidden : "span"), {
     class: normalizeClass(["onyx-component", "onyx-form-message", `onyx-form-message__${$setup.props.type}`])
   }, {
     default: withCtx(() => [
       createElementVNode(
         "span",
-        _hoisted_1$C,
+        _hoisted_1$F,
         toDisplayString($setup.props.messages.shortMessage),
         1
         /* TEXT */
@@ -8096,8 +8144,8 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class"]);
 }
-const FormMessage = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$Q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue"]]);
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const FormMessage = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$T], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue"]]);
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "OnyxFormElement",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -8170,17 +8218,17 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$B = {
+const _hoisted_1$E = {
   key: 0,
   class: "onyx-form-element__label onyx-text--small"
 };
-const _hoisted_2$t = ["for"];
-const _hoisted_3$l = {
+const _hoisted_2$v = ["for"];
+const _hoisted_3$n = {
   key: 1,
   class: "onyx-form-element__footer onyx-text--small"
 };
-const _hoisted_4$g = { class: "onyx-form-element__footer-messages" };
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_4$h = { class: "onyx-form-element__footer-messages" };
+function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -8192,11 +8240,11 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$B, [
+      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
         createElementVNode("label", {
           for: $setup.props.id,
           class: "onyx-truncation-ellipsis"
-        }, toDisplayString($setup.props.label), 9, _hoisted_2$t),
+        }, toDisplayString($setup.props.label), 9, _hoisted_2$v),
         $setup.props.required ? (openBlock(), createElementBlock(
           "span",
           {
@@ -8227,8 +8275,8 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default", {
         id: $setup.props.id
       }),
-      $setup.footer ? (openBlock(), createElementBlock("div", _hoisted_3$l, [
-        createElementVNode("span", _hoisted_4$g, [
+      $setup.footer ? (openBlock(), createElementBlock("div", _hoisted_3$n, [
+        createElementVNode("span", _hoisted_4$h, [
           $setup.footer.errorMessages ? (openBlock(), createBlock($setup["FormMessage"], {
             key: 0,
             class: "onyx-form-element__error-message",
@@ -8267,8 +8315,8 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$P], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue"]]);
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const OnyxFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$S], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue"]]);
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSelectInput",
   props: {
@@ -8351,9 +8399,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$A = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"];
-const _hoisted_2$s = ["aria-label", "title", "disabled"];
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$D = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"];
+const _hoisted_2$u = ["aria-label", "title", "disabled"];
+function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -8418,7 +8466,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
               autofocus: $setup.props.autofocus,
               autocomplete: "off",
               onKeydown: $setup.blockTyping
-            }), null, 16, _hoisted_1$A), [
+            }), null, 16, _hoisted_1$D), [
               [$setup["vCustomValidity"]]
             ]),
             $setup.props.textMode === "preview" && $setup.selectionCount > 0 ? (openBlock(), createBlock($setup["OnyxTooltip"], {
@@ -8457,7 +8505,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
               disabled: $setup.disabled || $setup.props.readonly || $setup.props.loading
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronDownUp }, null, 8, ["icon"])
-            ], 8, _hoisted_2$s),
+            ], 8, _hoisted_2$u),
             !$setup.props.hideSuccessIcon && $setup.successMessages ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 2,
               class: "onyx-select-input__check-icon",
@@ -8474,8 +8522,8 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxSelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$O], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue"]]);
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const OnyxSelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue"]]);
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectOption",
   props: {
     active: { type: Boolean, required: false, default: false },
@@ -8494,8 +8542,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$z = ["checked", "aria-labelledby", "disabled", "indeterminate"];
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$C = ["checked", "aria-labelledby", "disabled", "indeterminate"];
+function _sfc_render$Q(_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"],
@@ -8512,7 +8560,7 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
         tabindex: "-1",
         class: "onyx-select-option__checkbox",
         type: "checkbox"
-      }, null, 8, _hoisted_1$z)) : createCommentVNode("v-if", true),
+      }, null, 8, _hoisted_1$C)) : createCommentVNode("v-if", true),
       $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 1,
         icon: $setup.props.icon
@@ -8533,8 +8581,8 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["checked", "selected", "disabled"]);
 }
-const OnyxSelectOption = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$N], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue"]]);
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const OnyxSelectOption = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$Q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue"]]);
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelect",
   props: {
     density: { type: null, required: false },
@@ -8804,33 +8852,33 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$y = {
+const _hoisted_1$B = {
   ref: "selectRef",
   class: "onyx-component onyx-select-wrapper"
 };
-const _hoisted_2$r = {
+const _hoisted_2$t = {
   class: "onyx-select__wrapper",
   tabindex: "-1"
 };
-const _hoisted_3$k = {
+const _hoisted_3$m = {
   key: 0,
   role: "group",
   class: "onyx-select__group"
 };
-const _hoisted_4$f = {
+const _hoisted_4$g = {
   role: "option",
   "aria-selected": "false"
 };
-const _hoisted_5$b = {
+const _hoisted_5$c = {
   key: 0,
   role: "presentation",
   class: "onyx-select__group-name onyx-text--small"
 };
-const _hoisted_6$8 = {
+const _hoisted_6$9 = {
   key: 1,
   class: "onyx-select__slot"
 };
-const _hoisted_7$4 = {
+const _hoisted_7$5 = {
   key: 2,
   class: "onyx-select__slot"
 };
@@ -8838,10 +8886,10 @@ const _hoisted_8$4 = {
   key: 0,
   class: "onyx-select__description onyx-text--small"
 };
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
-    _hoisted_1$y,
+    _hoisted_1$B,
     [
       createVNode($setup["OnyxBasicPopover"], {
         class: normalizeClass($setup.densityClass),
@@ -8860,7 +8908,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
           }), null, 16, ["show-focus", "autofocus"])
         ]),
         content: withCtx(() => [
-          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$r, [
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$t, [
             $setup.props.withSearch ? (openBlock(), createBlock($setup["OnyxMiniSearch"], mergeProps({
               key: 0,
               ref: "miniSearchRef",
@@ -8875,8 +8923,8 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
               "div",
               normalizeProps(guardReactiveProps($setup.listbox)),
               [
-                $setup.isEmptyMessage ? (openBlock(), createElementBlock("ul", _hoisted_3$k, [
-                  createElementVNode("li", _hoisted_4$f, [
+                $setup.isEmptyMessage ? (openBlock(), createElementBlock("ul", _hoisted_3$m, [
+                  createElementVNode("li", _hoisted_4$g, [
                     renderSlot(_ctx.$slots, "empty", { defaultMessage: $setup.isEmptyMessage }, () => [
                       createVNode($setup["OnyxEmpty"], {
                         density: $setup.props.density
@@ -8945,7 +8993,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
                           [
                             group.name !== "" ? (openBlock(), createElementBlock(
                               "li",
-                              _hoisted_5$b,
+                              _hoisted_5$c,
                               toDisplayString(group.name),
                               1
                               /* TEXT */
@@ -9005,10 +9053,10 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
               16
               /* FULL_PROPS */
             ),
-            $setup.props.lazyLoading?.loading ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
+            $setup.props.lazyLoading?.loading ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
               createVNode($setup["OnyxLoadingIndicator"], { class: "onyx-select__loading" })
             ])) : createCommentVNode("v-if", true),
-            $setup.slots.optionsEnd ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
+            $setup.slots.optionsEnd ? (openBlock(), createElementBlock("div", _hoisted_7$5, [
               renderSlot(_ctx.$slots, "optionsEnd")
             ])) : createCommentVNode("v-if", true)
           ])), [
@@ -9030,9 +9078,9 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxSelect = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$M], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue"]]);
+const OnyxSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$P], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue"]]);
 const pageSize = 100;
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectPagination",
   props: {
     density: { type: null, required: false },
@@ -9084,11 +9132,11 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$x = ["aria-label"];
-const _hoisted_2$q = { class: "onyx-pagination__count" };
-const _hoisted_3$j = ["aria-label", "disabled"];
-const _hoisted_4$e = ["aria-label", "disabled"];
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$A = ["aria-label"];
+const _hoisted_2$s = { class: "onyx-pagination__count" };
+const _hoisted_3$l = ["aria-label", "disabled"];
+const _hoisted_4$f = ["aria-label", "disabled"];
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-pagination-skeleton", "onyx-text", $setup.densityClass])
@@ -9119,7 +9167,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["search-term", "label", "list-label", "options", "model-value", "value-label", "disabled"]),
     createElementVNode(
       "div",
-      _hoisted_2$q,
+      _hoisted_2$s,
       toDisplayString($setup.t("pagination.ofPages", { n: $setup.props.pages, pages: $setup.n($setup.props.pages, "decimal") })),
       1
       /* TEXT */
@@ -9132,7 +9180,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[2] || (_cache[2] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue - 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronLeftSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_3$j),
+    ], 8, _hoisted_3$l),
     createElementVNode("button", {
       class: "onyx-pagination__button",
       "aria-label": $setup.t("pagination.next"),
@@ -9141,11 +9189,11 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[3] || (_cache[3] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue + 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_4$e)
-  ], 14, _hoisted_1$x));
+    ], 8, _hoisted_4$f)
+  ], 14, _hoisted_1$A));
 }
-const OnyxSelectPagination = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$L], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxSelectPagination.vue"]]);
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const OnyxSelectPagination = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$O], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxSelectPagination.vue"]]);
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "OnyxPagination",
   props: {
     density: { type: null, required: false },
@@ -9166,7 +9214,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.type === "inline" ? (openBlock(), createBlock(
     $setup["OnyxInlinePagination"],
     mergeProps({ key: 0 }, $setup.paginationProps, {
@@ -9185,7 +9233,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxPagination = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxPagination.vue"]]);
+const OnyxPagination = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$N], ["__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) => {
@@ -9463,7 +9511,7 @@ const BASE_FEATURE = (options) => createFeature(({ skeleton }) => {
     }
   };
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxDataGrid",
   props: {
@@ -9542,7 +9590,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxDataGridRenderer"], mergeProps(
     {
       "column-groups": $setup.rendererColumnGroups,
@@ -9577,7 +9625,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["column-groups", "columns", "rows", "scroll-container-attrs"]);
 }
-const OnyxDataGrid = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.vue"]]);
+const OnyxDataGrid = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$M], ["__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) => {
@@ -9683,7 +9731,7 @@ const useHideColumns = (options) => createFeature((ctx) => {
     }
   };
 });
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "OnyxResizeHandle",
   props: {
     element: { type: null, required: true },
@@ -9758,7 +9806,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "button",
     {
@@ -9792,7 +9840,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, NEED_HYDRATION */
   );
 }
-const OnyxResizeHandle = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxResizeHandle/OnyxResizeHandle.vue"]]);
+const OnyxResizeHandle = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$L], ["__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) => {
@@ -9934,7 +9982,7 @@ const DEFAULT_COMPARES = Object.freeze({
   skeleton: () => 0,
   boolean: BOOLEAN_COMPARE
 });
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "SortAction",
   props: {
     columnLabel: { type: String, required: true },
@@ -9958,14 +10006,14 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxSystemButton"], {
     label: $setup.buttonLabel,
     icon: $setup.icon,
     color: "medium"
   }, null, 8, ["label", "icon"]);
 }
-const SortAction = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue"]]);
+const SortAction = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue"]]);
 const nextSortDirection = (current, skipNone) => {
   switch (current) {
     case "asc":
@@ -10208,7 +10256,7 @@ const all = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   useSorting,
   useStickyColumns
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxDatePicker",
   props: {
@@ -10275,9 +10323,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$w = { class: "onyx-datepicker__wrapper" };
-const _hoisted_2$p = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"];
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$z = { class: "onyx-datepicker__wrapper" };
+const _hoisted_2$r = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"];
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -10306,7 +10354,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$w, [
+          createElementVNode("div", _hoisted_1$z, [
             $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
               key: 0,
               class: "onyx-datepicker__loading",
@@ -10328,7 +10376,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
               title: $setup.props.hideLabel ? $setup.props.label : void 0,
               min: $setup.getNormalizedDate($setup.props.min),
               max: $setup.getNormalizedDate($setup.props.max)
-            }, $setup.restAttrs), null, 16, _hoisted_2$p)), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$r)), [
               [vModelDynamic, $setup.value],
               [$setup["vCustomValidity"]]
             ])
@@ -10342,9 +10390,9 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue"]]);
+const OnyxDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue"]]);
 const DIALOG_ALIGNMENTS = ["left", "center", "right"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "OnyxDialog",
   props: {
     density: { type: null, required: false },
@@ -10378,15 +10426,15 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$v = { class: "onyx-dialog__header" };
-const _hoisted_2$o = { class: "onyx-dialog__headline" };
-const _hoisted_3$i = { class: "onyx-dialog__headline-content" };
-const _hoisted_4$d = { class: "onyx-dialog__body" };
-const _hoisted_5$a = {
+const _hoisted_1$y = { class: "onyx-dialog__header" };
+const _hoisted_2$q = { class: "onyx-dialog__headline" };
+const _hoisted_3$k = { class: "onyx-dialog__headline-content" };
+const _hoisted_4$e = { class: "onyx-dialog__body" };
+const _hoisted_5$b = {
   key: 0,
   class: "onyx-dialog__footer"
 };
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_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),
@@ -10396,9 +10444,9 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "trigger", { trigger })
     ]),
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$v, [
-        createElementVNode("div", _hoisted_2$o, [
-          createElementVNode("div", _hoisted_3$i, [
+      createElementVNode("div", _hoisted_1$y, [
+        createElementVNode("div", _hoisted_2$q, [
+          createElementVNode("div", _hoisted_3$k, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -10424,10 +10472,10 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["label", "icon"])) : createCommentVNode("v-if", true)
         ])
       ]),
-      createElementVNode("div", _hoisted_4$d, [
+      createElementVNode("div", _hoisted_4$e, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$a, [
+      !!$setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$b, [
         renderSlot(_ctx.$slots, "footer")
       ])) : createCommentVNode("v-if", true)
     ]),
@@ -10435,8 +10483,8 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["open", "class"]);
 }
-const OnyxDialog = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue"]]);
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const OnyxDialog = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue"]]);
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "OnyxForm",
   props: {
     disabled: { type: Boolean, required: false, default: false },
@@ -10456,7 +10504,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "form",
     {
@@ -10473,119 +10521,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxForm = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue"]]);
-const HEADLINE_TYPES = ["h1", "h2", "h3", "h4", "h5", "h6"];
-const ICON_SIZES = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
-  ...{ inheritAttrs: false },
-  __name: "OnyxImage",
-  props: {
-    src: { type: [String, Object], required: true },
-    alt: { type: String, required: true },
-    width: { type: Number, required: true },
-    height: { type: Number, required: true },
-    loading: { type: String, required: false, default: "lazy" },
-    shape: { type: null, required: false },
-    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const skeleton = useSkeletonContext(props);
-    const isError = ref(false);
-    watch(
-      () => props.src,
-      () => isError.value = false,
-      { deep: true }
-    );
-    const imageSrc = computed(() => {
-      if (typeof props.src === "string") return { light: props.src, dark: void 0 };
-      return props.src;
-    });
-    const size = computed(() => {
-      const width = props.shape === "circle" ? Math.min(props.width, props.height) : props.width;
-      const height = props.shape === "circle" ? Math.min(props.width, props.height) : props.height;
-      return { width: `${width}px`, height: `${height}px` };
-    });
-    const { restAttrs, rootAttrs } = useRootAttrs();
-    const __returned__ = { props, skeleton, isError, imageSrc, size, restAttrs, rootAttrs, get iconFileDisabled() {
-      return iconFileDisabled;
-    }, OnyxIcon, OnyxSkeleton };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-const _hoisted_1$u = ["src", "alt"];
-const _hoisted_2$n = ["src", "alt"];
-const _hoisted_3$h = { class: "onyx-image__alt onyx-text--small" };
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "figure",
-    mergeProps($setup.rootAttrs, {
-      class: [
-        "onyx-component",
-        "onyx-image",
-        { "onyx-image--error": $setup.isError, [`onyx-image--${$setup.props.shape}`]: $setup.props.shape }
-      ]
-    }),
-    [
-      $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], mergeProps({
-        key: 0,
-        class: "onyx-image__source",
-        style: $setup.size
-      }, $setup.restAttrs), null, 16, ["style"])) : (openBlock(), createElementBlock(
-        Fragment,
-        { key: 1 },
-        [
-          createElementVNode("img", mergeProps({
-            class: ["onyx-image__source", { "onyx-image__source--light": $setup.imageSrc.dark }]
-          }, { ...$setup.restAttrs, ...$setup.props }, {
-            src: $setup.imageSrc.light,
-            alt: $setup.props.alt,
-            onError: _cache[0] || (_cache[0] = ($event) => $setup.isError = true)
-          }), null, 16, _hoisted_1$u),
-          $setup.imageSrc.dark ? (openBlock(), createElementBlock("img", mergeProps({
-            key: 0,
-            class: "onyx-image__source onyx-image__source--dark"
-          }, { ...$setup.restAttrs, ...$setup.props }, {
-            src: $setup.imageSrc.dark,
-            alt: $setup.props.alt,
-            onError: _cache[1] || (_cache[1] = ($event) => $setup.isError = true)
-          }), null, 16, _hoisted_2$n)) : createCommentVNode("v-if", true),
-          $setup.isError ? (openBlock(), createElementBlock(
-            "div",
-            mergeProps({
-              key: 1,
-              class: "onyx-image__error",
-              style: $setup.size
-            }, $setup.restAttrs),
-            [
-              createVNode($setup["OnyxIcon"], {
-                icon: $setup.iconFileDisabled,
-                size: "32px"
-              }, null, 8, ["icon"]),
-              createElementVNode(
-                "div",
-                _hoisted_3$h,
-                toDisplayString($setup.props.alt),
-                1
-                /* TEXT */
-              )
-            ],
-            16
-            /* FULL_PROPS */
-          )) : createCommentVNode("v-if", true)
-        ],
-        64
-        /* STABLE_FRAGMENT */
-      ))
-    ],
-    16
-    /* FULL_PROPS */
-  );
-}
-const OnyxImage = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxImage/OnyxImage.vue"]]);
-const IMAGE_SHAPES = ["rounded", "circle", "clip", "clip-inverted"];
+const OnyxForm = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue"]]);
 const useLenientMaxLengthValidation = (options) => {
   const { t } = injectI18n();
   const normalized = computed(() => {
@@ -10625,7 +10561,7 @@ const MOBILE_NAV_BAR_INJECTION_KEY = Symbol();
 const NAV_BAR_IS_TOP_LEVEL_INJECTION_KEY = Symbol();
 const NAV_BAR_MORE_LIST_INJECTION_KEY = Symbol();
 const NAV_BAR_MORE_LIST_TARGET_INJECTION_KEY = Symbol();
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "OnyxSeparator",
   props: {
     orientation: { type: null, required: false, default: "horizontal" }
@@ -10642,16 +10578,16 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$t = ["aria-orientation"];
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$x = ["aria-orientation"];
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["onyx-component onyx-separator", { "onyx-separator--vertical": $setup.isVertical }]),
     role: "separator",
     "aria-orientation": $setup.props.orientation
-  }, null, 10, _hoisted_1$t);
+  }, null, 10, _hoisted_1$x);
 }
-const OnyxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSeparator/OnyxSeparator.vue"]]);
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const OnyxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSeparator/OnyxSeparator.vue"]]);
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxInput",
   props: {
@@ -10740,10 +10676,10 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$s = { class: "onyx-input__wrapper" };
-const _hoisted_2$m = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "maxlength", "minlength", "aria-label", "title"];
-const _hoisted_3$g = ["aria-label", "title"];
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$w = { class: "onyx-input__wrapper" };
+const _hoisted_2$p = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "maxlength", "minlength", "aria-label", "title"];
+const _hoisted_3$j = ["aria-label", "title"];
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -10772,7 +10708,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$s, [
+          createElementVNode("div", _hoisted_1$w, [
             renderSlot(_ctx.$slots, "leading"),
             $setup.slots.leading ? (openBlock(), createBlock($setup["OnyxSeparator"], {
               key: 0,
@@ -10803,7 +10739,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
               minlength: $setup.props.minlength,
               "aria-label": $setup.props.hideLabel ? $setup.props.label : void 0,
               title: $setup.props.hideLabel ? $setup.props.label : void 0
-            }, $setup.restAttrs), null, 16, _hoisted_2$m), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$p), [
               [vModelDynamic, $setup.modelValue],
               [$setup["vCustomValidity"]]
             ]),
@@ -10817,7 +10753,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: _cache[1] || (_cache[1] = () => $setup.modelValue = "")
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconXSmall }, null, 8, ["icon"])
-            ], 8, _hoisted_3$g)) : createCommentVNode("v-if", true),
+            ], 8, _hoisted_3$j)) : createCommentVNode("v-if", true),
             !$setup.props.hideSuccessIcon && $setup.successMessages ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 3,
               class: "onyx-input__check-icon",
@@ -10849,7 +10785,478 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue"]]);
+const OnyxInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue"]]);
+const GLOBAL_SEARCH_INJECTION_KEY = Symbol();
+const __default__$4 = {};
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
+  __name: "OnyxGlobalSearch",
+  props: {
+    density: { type: null, required: false },
+    open: { type: [Boolean, null], required: false, skipCheck: true },
+    nonDismissible: { type: Boolean, required: false },
+    alert: { type: Boolean, required: false },
+    modelValue: { type: null, required: false },
+    loading: { type: Boolean, required: false }
+  },
+  emits: ["update:modelValue", "update:open"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const { t } = injectI18n();
+    const basicDialogProps = useForwardProps(props, OnyxBasicDialog);
+    const searchTerm = useVModel({
+      props,
+      emit,
+      key: "modelValue",
+      default: ""
+    });
+    const dialog2 = useTemplateRef("dialogRef");
+    const dialogElement = computed(() => dialog2.value?.dialog);
+    const activeValue = ref();
+    const getAllOptions = () => {
+      const options = Array.from(dialogElement.value?.querySelectorAll('[role="option"]') ?? []);
+      const activeIndex = activeValue.value ? options.findIndex(
+        (element) => element.id === headless.internals.getOptionId(activeValue.value)
+      ) : -1;
+      return { options, activeIndex };
+    };
+    const activateOption = (type) => {
+      const { options, activeIndex } = getAllOptions();
+      let index = 0;
+      if (type === "last") index = options.length - 1;
+      else if (type === "previous") index = activeIndex - 1;
+      else if (type === "next") index = activeIndex + 1;
+      const normalizedIndex = index < 0 ? -1 : index > options.length - 1 ? 0 : index;
+      const id = options.at(normalizedIndex)?.id;
+      activeValue.value = id ? headless.internals.getOptionValueById(id) : void 0;
+    };
+    const onAutocomplete = (input2) => searchTerm.value = input2;
+    const onSelect = (value) => {
+      const id = headless.internals.getOptionId(value);
+      const option = dialogElement.value?.querySelector(`#${id}`);
+      if (!option) return;
+      if ("click" in option && typeof option.click === "function") option.click();
+    };
+    const headless = createComboBox({
+      autocomplete: "list",
+      label: computed(() => t.value("globalSearch.input.label")),
+      listLabel: computed(() => t.value("globalSearch.searchResults")),
+      activeOption: activeValue,
+      isExpanded: true,
+      templateRef: dialogElement,
+      onAutocomplete,
+      onActivateFirst: () => activateOption("first"),
+      onActivateLast: () => activateOption("last"),
+      onActivateNext: () => activateOption("next"),
+      onActivatePrevious: () => activateOption("previous"),
+      onSelect
+    });
+    provide(GLOBAL_SEARCH_INJECTION_KEY, { headless, activeValue });
+    const __returned__ = { props, emit, slots, t, basicDialogProps, searchTerm, dialog: dialog2, dialogElement, activeValue, getAllOptions, activateOption, onAutocomplete, onSelect, headless, get iconSearch() {
+      return iconSearch;
+    }, OnyxBasicDialog, OnyxIcon, OnyxInput, OnyxLoadingIndicator };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$v = { class: "onyx-global-search__footer onyx-text--small" };
+const _hoisted_2$o = { class: "onyx-global-search__shortcut" };
+const _hoisted_3$i = { class: "onyx-global-search__shortcut-label" };
+const _hoisted_4$d = { class: "onyx-global-search__shortcut" };
+const _hoisted_5$a = { class: "onyx-global-search__shortcut-label" };
+const _hoisted_6$8 = { class: "onyx-global-search__shortcut" };
+const _hoisted_7$4 = { class: "onyx-global-search__shortcut-label" };
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps($setup.basicDialogProps, {
+    ref: "dialogRef",
+    label: $setup.t("globalSearch.label"),
+    modal: "",
+    class: "onyx-global-search",
+    "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
+  }), {
+    default: withCtx(() => [
+      createVNode($setup["OnyxInput"], mergeProps($setup.headless.elements.input.value, {
+        modelValue: $setup.searchTerm,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.searchTerm = $event),
+        label: $setup.t("globalSearch.input.label"),
+        placeholder: $setup.t("globalSearch.input.placeholder"),
+        type: "search",
+        "hide-label": "",
+        autofocus: ""
+      }), {
+        leading: withCtx(() => [
+          $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
+            key: 0,
+            type: "circle"
+          })) : (openBlock(), createBlock($setup["OnyxIcon"], {
+            key: 1,
+            icon: $setup.iconSearch
+          }, null, 8, ["icon"]))
+        ]),
+        _: 1
+        /* STABLE */
+      }, 16, ["modelValue", "label", "placeholder"]),
+      withDirectives(createElementVNode(
+        "div",
+        mergeProps({ class: "onyx-global-search__body" }, $setup.headless.elements.listbox.value),
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        16
+        /* FULL_PROPS */
+      ), [
+        [vShow, !!$setup.slots.default]
+      ]),
+      withDirectives(createElementVNode(
+        "div",
+        _hoisted_1$v,
+        [
+          createElementVNode("span", _hoisted_2$o, [
+            _cache[2] || (_cache[2] = createElementVNode(
+              "kbd",
+              null,
+              "↑",
+              -1
+              /* CACHED */
+            )),
+            _cache[3] || (_cache[3] = createElementVNode(
+              "kbd",
+              null,
+              "↓",
+              -1
+              /* CACHED */
+            )),
+            createElementVNode(
+              "span",
+              _hoisted_3$i,
+              toDisplayString($setup.t("globalSearch.shortcuts.move")),
+              1
+              /* TEXT */
+            )
+          ]),
+          createElementVNode("span", _hoisted_4$d, [
+            _cache[4] || (_cache[4] = createElementVNode(
+              "kbd",
+              null,
+              "↵",
+              -1
+              /* CACHED */
+            )),
+            createElementVNode(
+              "span",
+              _hoisted_5$a,
+              toDisplayString($setup.t("globalSearch.shortcuts.select")),
+              1
+              /* TEXT */
+            )
+          ]),
+          createElementVNode("span", _hoisted_6$8, [
+            _cache[5] || (_cache[5] = createElementVNode(
+              "kbd",
+              null,
+              "ESC",
+              -1
+              /* CACHED */
+            )),
+            createElementVNode(
+              "span",
+              _hoisted_7$4,
+              toDisplayString($setup.t("cancel")),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        512
+        /* NEED_PATCH */
+      ), [
+        [vShow, !!$setup.slots.default]
+      ])
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["label"]);
+}
+const OnyxGlobalSearch = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalSearch/OnyxGlobalSearch.vue"]]);
+const __default__$3 = {};
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  __name: "OnyxGlobalSearchOption",
+  props: {
+    density: { type: null, required: false },
+    link: { type: null, required: false },
+    autofocus: { type: Boolean, required: false },
+    label: { type: String, required: true },
+    value: { type: String, required: true },
+    icon: { type: String, required: false },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const slots = useSlots();
+    const { densityClass } = useDensity(props);
+    const context = inject(GLOBAL_SEARCH_INJECTION_KEY, void 0);
+    const skeleton = useSkeletonContext(props);
+    const __returned__ = { props, slots, densityClass, context, skeleton, ButtonOrLinkLayout, OnyxIcon, OnyxSkeleton };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$u = { class: "onyx-global-search-option__content" };
+const _hoisted_2$n = { class: "onyx-truncation-ellipsis" };
+const _hoisted_3$h = {
+  key: 0,
+  class: "onyx-global-search-option__trailing"
+};
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.skeleton ? (openBlock(), createElementBlock(
+    "li",
+    {
+      key: 0,
+      role: "none",
+      class: normalizeClass(["onyx-component", "onyx-global-search-option-skeleton", "onyx-text", $setup.densityClass])
+    },
+    [
+      createElementVNode("div", _hoisted_1$u, [
+        createVNode($setup["OnyxSkeleton"], { class: "onyx-global-search-option-skeleton__icon" }),
+        createVNode($setup["OnyxSkeleton"], { class: "onyx-global-search-option-skeleton__label" })
+      ])
+    ],
+    2
+    /* CLASS */
+  )) : (openBlock(), createElementBlock(
+    "li",
+    {
+      key: 1,
+      class: normalizeClass(["onyx-component", "onyx-global-search-option", "onyx-text", $setup.densityClass]),
+      role: "none"
+    },
+    [
+      createVNode($setup["ButtonOrLinkLayout"], mergeProps(
+        {
+          class: "onyx-global-search-option__content onyx-truncation-ellipsis",
+          link: $setup.props.link,
+          autofocus: $setup.props.autofocus,
+          tabindex: "-1"
+        },
+        $setup.context?.headless.elements.option.value({
+          label: $setup.props.label,
+          value: $setup.props.value,
+          selected: $setup.context.activeValue.value === $setup.props.value
+        })
+      ), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
+              key: 0,
+              class: "onyx-global-search-option__icon",
+              icon: $setup.props.icon,
+              size: "16px"
+            }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
+            createElementVNode(
+              "span",
+              _hoisted_2$n,
+              toDisplayString($setup.props.label),
+              1
+              /* TEXT */
+            )
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["link", "autofocus"]),
+      $setup.slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_3$h, [
+        renderSlot(_ctx.$slots, "trailing")
+      ])) : createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  ));
+}
+const OnyxGlobalSearchOption = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalSearchOption/OnyxGlobalSearchOption.vue"]]);
+const __default__$2 = {};
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  __name: "OnyxGlobalSearchGroup",
+  props: {
+    density: { type: null, required: false },
+    label: { type: String, required: true },
+    skeleton: { type: [Boolean, Number], required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const { densityClass } = useDensity(props);
+    const context = inject(GLOBAL_SEARCH_INJECTION_KEY, void 0);
+    const skeletonCount = computed(() => {
+      if (!props.skeleton) return 0;
+      return typeof props.skeleton === "number" ? props.skeleton : 3;
+    });
+    const __returned__ = { props, densityClass, context, skeletonCount, OnyxGlobalSearchOption, OnyxHeadline };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$t = { "aria-hidden": "true" };
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "ul",
+    mergeProps({
+      class: ["onyx-component", "onyx-global-search-group", $setup.densityClass]
+    }, $setup.context?.headless.elements.group.value({ label: $setup.props.label })),
+    [
+      createElementVNode("li", _hoisted_1$t, [
+        createVNode($setup["OnyxHeadline"], {
+          is: "h4",
+          class: "onyx-global-search-group__headline"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(
+              toDisplayString($setup.props.label),
+              1
+              /* TEXT */
+            )
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      $setup.skeletonCount <= 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(
+        Fragment,
+        { key: 1 },
+        renderList($setup.skeletonCount, (i) => {
+          return openBlock(), createBlock($setup["OnyxGlobalSearchOption"], {
+            key: `skeleton-${i}`,
+            label: `Skeleton ${i}`,
+            value: `skeleton-${i}`,
+            skeleton: ""
+          }, null, 8, ["label", "value"]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ],
+    16
+    /* FULL_PROPS */
+  );
+}
+const OnyxGlobalSearchGroup = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalSearchGroup/OnyxGlobalSearchGroup.vue"]]);
+const HEADLINE_TYPES = ["h1", "h2", "h3", "h4", "h5", "h6"];
+const ICON_SIZES = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"];
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "OnyxImage",
+  props: {
+    src: { type: [String, Object], required: true },
+    alt: { type: String, required: true },
+    width: { type: Number, required: true },
+    height: { type: Number, required: true },
+    loading: { type: String, required: false, default: "lazy" },
+    shape: { type: null, required: false },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const skeleton = useSkeletonContext(props);
+    const isError = ref(false);
+    watch(
+      () => props.src,
+      () => isError.value = false,
+      { deep: true }
+    );
+    const imageSrc = computed(() => {
+      if (typeof props.src === "string") return { light: props.src, dark: void 0 };
+      return props.src;
+    });
+    const size = computed(() => {
+      const width = props.shape === "circle" ? Math.min(props.width, props.height) : props.width;
+      const height = props.shape === "circle" ? Math.min(props.width, props.height) : props.height;
+      return { width: `${width}px`, height: `${height}px` };
+    });
+    const { restAttrs, rootAttrs } = useRootAttrs();
+    const __returned__ = { props, skeleton, isError, imageSrc, size, restAttrs, rootAttrs, get iconFileDisabled() {
+      return iconFileDisabled;
+    }, OnyxIcon, OnyxSkeleton };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$s = ["src", "alt"];
+const _hoisted_2$m = ["src", "alt"];
+const _hoisted_3$g = { class: "onyx-image__alt onyx-text--small" };
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "figure",
+    mergeProps($setup.rootAttrs, {
+      class: [
+        "onyx-component",
+        "onyx-image",
+        { "onyx-image--error": $setup.isError, [`onyx-image--${$setup.props.shape}`]: $setup.props.shape }
+      ]
+    }),
+    [
+      $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], mergeProps({
+        key: 0,
+        class: "onyx-image__source",
+        style: $setup.size
+      }, $setup.restAttrs), null, 16, ["style"])) : (openBlock(), createElementBlock(
+        Fragment,
+        { key: 1 },
+        [
+          createElementVNode("img", mergeProps({
+            class: ["onyx-image__source", { "onyx-image__source--light": $setup.imageSrc.dark }]
+          }, { ...$setup.restAttrs, ...$setup.props }, {
+            src: $setup.imageSrc.light,
+            alt: $setup.props.alt,
+            onError: _cache[0] || (_cache[0] = ($event) => $setup.isError = true)
+          }), null, 16, _hoisted_1$s),
+          $setup.imageSrc.dark ? (openBlock(), createElementBlock("img", mergeProps({
+            key: 0,
+            class: "onyx-image__source onyx-image__source--dark"
+          }, { ...$setup.restAttrs, ...$setup.props }, {
+            src: $setup.imageSrc.dark,
+            alt: $setup.props.alt,
+            onError: _cache[1] || (_cache[1] = ($event) => $setup.isError = true)
+          }), null, 16, _hoisted_2$m)) : createCommentVNode("v-if", true),
+          $setup.isError ? (openBlock(), createElementBlock(
+            "div",
+            mergeProps({
+              key: 1,
+              class: "onyx-image__error",
+              style: $setup.size
+            }, $setup.restAttrs),
+            [
+              createVNode($setup["OnyxIcon"], {
+                icon: $setup.iconFileDisabled,
+                size: "32px"
+              }, null, 8, ["icon"]),
+              createElementVNode(
+                "div",
+                _hoisted_3$g,
+                toDisplayString($setup.props.alt),
+                1
+                /* TEXT */
+              )
+            ],
+            16
+            /* FULL_PROPS */
+          )) : createCommentVNode("v-if", true)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      ))
+    ],
+    16
+    /* FULL_PROPS */
+  );
+}
+const OnyxImage = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxImage/OnyxImage.vue"]]);
+const IMAGE_SHAPES = ["rounded", "circle", "clip", "clip-inverted"];
 const INPUT_TYPES = ["email", "password", "search", "tel", "text", "url"];
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "OnyxLink",
@@ -15557,6 +15964,7 @@ export {
   all as DataGridFeatures,
   DataGridRowOptionsSymbol,
   GLOBAL_FAB_PROVIDER_INJECTION_KEY,
+  GLOBAL_SEARCH_INJECTION_KEY,
   HEADLINE_TYPES,
   ICON_SIZES,
   IMAGE_SHAPES,
@@ -15665,6 +16073,9 @@ export {
   OnyxCalendar as OnyxUnstableCalendar,
   OnyxCodeTab as OnyxUnstableCodeTab,
   OnyxCodeTabs as OnyxUnstableCodeTabs,
+  OnyxGlobalSearch as OnyxUnstableGlobalSearch,
+  OnyxGlobalSearchGroup as OnyxUnstableGlobalSearchGroup,
+  OnyxGlobalSearchOption as OnyxUnstableGlobalSearchOption,
   OnyxSlider as OnyxUnstableSlider,
   OnyxSliderControl as OnyxUnstableSliderControl,
   OnyxUserMenu,