sit-onyx 1.3.0-dev-20251027142308 → 1.3.0-dev-20251027202432

package/dist/index.esm-bundler.js

@@ -49,7 +49,7 @@ const useVModel = (options) => {
 };
 const ACCORDION_INJECTION_KEY = Symbol();
 const ACCORDION_TYPES = ["default", "nested-large", "nested-small", "card"];
-const _sfc_main$1F = /* @__PURE__ */ defineComponent({
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordion",
   props: {
     density: { type: null, required: false },
@@ -119,7 +119,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1G(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -137,7 +137,7 @@ function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$1F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordion/OnyxAccordion.vue"]]);
+const OnyxAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$1G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordion/OnyxAccordion.vue"]]);
 const 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$1E = /* @__PURE__ */ defineComponent({
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "OnyxIcon",
   props: {
     size: { type: null, required: false },
@@ -166,8 +166,8 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1a = ["innerHTML"];
-function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1b = ["innerHTML"];
+function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass({
       "onyx-component": true,
@@ -178,9 +178,9 @@ function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     "aria-hidden": "true",
     innerHTML: $setup.props.icon
-  }, null, 10, _hoisted_1$1a);
+  }, null, 10, _hoisted_1$1b);
 }
-const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIcon/OnyxIcon.vue"]]);
+const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$1F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIcon/OnyxIcon.vue"]]);
 const 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$1D = /* @__PURE__ */ defineComponent({
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   __name: "OnyxSkeleton",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -206,15 +206,15 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$19 = {
+const _hoisted_1$1a = {
   "aria-hidden": "true",
   class: "onyx-component onyx-skeleton"
 };
-function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("figure", _hoisted_1$19);
+function _sfc_render$1E(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("figure", _hoisted_1$1a);
 }
-const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "OnyxAccordionItem",
   props: {
     density: { type: null, required: false },
@@ -251,11 +251,11 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$18 = ["open"];
-const _hoisted_2$P = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
-const _hoisted_3$y = { class: "onyx-accordion-item__header-content" };
-const _hoisted_4$m = ["id", "aria-labelledby"];
-function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$19 = ["open"];
+const _hoisted_2$Q = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
+const _hoisted_3$z = { class: "onyx-accordion-item__header-content" };
+const _hoisted_4$n = ["id", "aria-labelledby"];
+function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.showSkeleton ? (openBlock(), createBlock(resolveDynamicComponent($setup.type === "card" ? $setup.OnyxSkeleton : "div"), {
     key: 0,
     class: normalizeClass([
@@ -291,14 +291,14 @@ function _sfc_render$1C(_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$y, [
+      createElementVNode("div", _hoisted_3$z, [
         renderSlot(_ctx.$slots, "header")
       ]),
       createVNode($setup["OnyxIcon"], {
         icon: $setup.iconChevronDownSmall,
         class: "onyx-accordion-item__header-icon"
       }, null, 8, ["icon"])
-    ], 8, _hoisted_2$P),
+    ], 8, _hoisted_2$Q),
     createElementVNode("div", {
       id: $setup.panelId,
       class: "onyx-accordion-item__panel",
@@ -306,10 +306,10 @@ function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-labelledby": $setup.headerId
     }, [
       renderSlot(_ctx.$slots, "default")
-    ], 8, _hoisted_4$m)
-  ], 10, _hoisted_1$18));
+    ], 8, _hoisted_4$n)
+  ], 10, _hoisted_1$19));
 }
-const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordionItem/OnyxAccordionItem.vue"]]);
+const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordionItem/OnyxAccordionItem.vue"]]);
 const DATETIME_FORMATS = {
   date: { dateStyle: "medium" },
   "datetime-local": { dateStyle: "medium", timeStyle: "short" },
@@ -344,7 +344,7 @@ const navItemOptionsLabel = "Subpages of {label}";
 const navigation = { "appLogo": "App logo of {appName}", "goToHome": "Go to home page", "goBack": "Go back", "moreNavItems": "+{n} More", "moreNavItemsLabel": "More Items", "showMoreNavItemsLabel": "Show more items", "userMenuLabel": "User options", "toggleBurgerMenu": "Toggle burger menu", "toggleContextMenu": "Toggle context menu", "navigationHeadline": "Navigation", "moreActionsFlyout": 'Choose an action for the column "{column}"', "moreActionsTrigger": "Toggle column actions" };
 const tooltip = { "neutral": "Toggle info tooltip", "danger": "Toggle error tooltip", "success": "Toggle success tooltip" };
 const colorScheme = { "headline": "Change appearance", "subtitle": "Select the appearance of the application:", "appearance": "Appearance", "auto": { "label": "Auto", "description": "The application automatically adapts its appearance to your system settings." }, "light": { "label": "Light", "description": "Light mode provides optimal contrast for bright environments." }, "dark": { "label": "Dark", "description": "This color mode is optimized for darker environments." } };
-const pagination = { "label": "Pagination", "ofPages": "of {pages} page | of {pages} pages", "previous": "previous page", "next": "next page", "select": { "label": "Page selection", "listLabel": "Available pages" } };
+const pagination = { "label": "Pagination", "ofPages": "of {pages} page | of {pages} pages", "previous": "previous page", "next": "next page", "buttonLabel": "Page {page}", "morePages": "More pages in between", "select": { "label": "Page selection", "listLabel": "Available pages" } };
 const input = { "clear": "Clear input", "showPassword": "Show Password", "hidePassword": "Hide Password" };
 const dialog = { "close": "Close dialog" };
 const headline = { "copyLink": "Copy link to this headline", "copyLinkTo": "Copy link to headline:" };
@@ -1542,7 +1542,7 @@ const createTooltip = createBuilder(({ debounce: debounce2, isVisible }) => {
     }
   };
 });
-const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicDialog",
   props: {
     density: { type: null, required: false },
@@ -1598,12 +1598,12 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$17 = ["aria-modal", "aria-label", "role"];
-const _hoisted_2$O = {
+const _hoisted_1$18 = ["aria-modal", "aria-label", "role"];
+const _hoisted_2$P = {
   ref: "contentRef",
   class: "onyx-basic-dialog__content"
 };
-function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.props.open ? (openBlock(), createElementBlock("dialog", {
     key: 0,
     ref: "dialogRef",
@@ -1622,16 +1622,16 @@ function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode(
       "div",
-      _hoisted_2$O,
+      _hoisted_2$P,
       [
         renderSlot(_ctx.$slots, "default")
       ],
       512
       /* NEED_PATCH */
     )
-  ], 42, _hoisted_1$17)) : createCommentVNode("v-if", true);
+  ], 42, _hoisted_1$18)) : createCommentVNode("v-if", true);
 }
-const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicDialog/OnyxBasicDialog.vue"]]);
+const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["render", _sfc_render$1C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicDialog/OnyxBasicDialog.vue"]]);
 const normalizedIncludes = (haystack, needle) => {
   const haystackNormalized = removeDiacritics(haystack.toLowerCase());
   const needleNormalized = removeDiacritics(needle.toLowerCase());
@@ -1713,7 +1713,7 @@ const normalizeHref = (href) => {
   return value.replace(/\/+$/, "");
 };
 const ROUTER_INJECTION_KEY = Symbol();
-const _sfc_main$1A = /* @__PURE__ */ defineComponent({
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "OnyxVisuallyHidden",
   props: {
     is: { type: String, required: false, default: "span" }
@@ -1726,7 +1726,7 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($setup.props.is), { class: "onyx-component onyx-visually-hidden" }, {
     default: withCtx(() => [
       renderSlot(_ctx.$slots, "default")
@@ -1735,8 +1735,8 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   });
 }
-const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+const OnyxVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxVisuallyHidden/OnyxVisuallyHidden.vue"]]);
+const _sfc_main$1A = /* @__PURE__ */ defineComponent({
   __name: "OnyxRouterLink",
   props: {
     href: { type: String, required: true },
@@ -1752,8 +1752,8 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$16 = ["href", "target", "rel"];
-function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$17 = ["href", "target", "rel"];
+function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: normalizeClass([
       "onyx-component",
@@ -1777,10 +1777,10 @@ function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1
       /* STABLE */
     })) : createCommentVNode("v-if", true)
-  ], 10, _hoisted_1$16);
+  ], 10, _hoisted_1$17);
 }
-const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["render", _sfc_render$1A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "OnyxHeadline",
   props: {
     is: { type: null, required: true },
@@ -1805,7 +1805,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-headline-skeleton", `onyx-headline-skeleton--${$setup.showAs}`])
@@ -1845,7 +1845,7 @@ function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["id", "class"]));
 }
-const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
+const OnyxHeadline = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.vue"]]);
 const useAutofocus = (inputRef, props) => {
   if (!props.autofocus) {
     return;
@@ -1896,7 +1896,7 @@ const useFormContext = (props) => {
     DEFAULT_FORM_INJECTION_CONTEXT
   )(toRef(props));
 };
-const _sfc_main$1x = /* @__PURE__ */ defineComponent({
+const _sfc_main$1y = /* @__PURE__ */ defineComponent({
   __name: "ButtonOrLinkLayout",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -1919,8 +1919,8 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$15 = ["disabled", "type", "autofocus"];
-function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$16 = ["disabled", "type", "autofocus"];
+function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.linkProps ? (openBlock(), createBlock(
     $setup["OnyxRouterLink"],
     normalizeProps(mergeProps({ key: 0 }, $setup.linkProps)),
@@ -1941,10 +1941,10 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: $setup.props.autofocus
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1$15));
+  ], 8, _hoisted_1$16));
 }
-const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
+const _sfc_main$1x = /* @__PURE__ */ defineComponent({
   __name: "OnyxSystemButton",
   props: {
     disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
@@ -1965,7 +1965,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-system-button-skeleton", $setup.props.icon ? "" : "onyx-system-button-skeleton--text"])
@@ -1997,8 +1997,8 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label", "title"]));
 }
-const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
-const _sfc_main$1v = /* @__PURE__ */ defineComponent({
+const OnyxSystemButton = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSystemButton/OnyxSystemButton.vue"]]);
+const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   __name: "OnyxAlertModal",
   props: {
     density: { type: null, required: false },
@@ -2023,11 +2023,11 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$14 = { class: "onyx-alert-modal__content" };
-const _hoisted_2$N = { class: "onyx-alert-modal__headline" };
-const _hoisted_3$x = ["id"];
-const _hoisted_4$l = { class: "onyx-alert-modal__actions" };
-function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$15 = { class: "onyx-alert-modal__content" };
+const _hoisted_2$O = { class: "onyx-alert-modal__headline" };
+const _hoisted_3$y = ["id"];
+const _hoisted_4$m = { class: "onyx-alert-modal__actions" };
+function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps({
     class: ["onyx-alert-modal", $setup.densityClass]
   }, $setup.dialogProps, {
@@ -2037,7 +2037,7 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$14, [
+      createElementVNode("div", _hoisted_1$15, [
         $setup.props.icon ? (openBlock(), createBlock(
           $setup["OnyxIcon"],
           mergeProps({
@@ -2049,7 +2049,7 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
           /* FULL_PROPS */
         )) : createCommentVNode("v-if", true),
         createElementVNode("div", null, [
-          createElementVNode("div", _hoisted_2$N, [
+          createElementVNode("div", _hoisted_2$O, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -2077,10 +2077,10 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
             class: "onyx-alert-modal__body onyx-truncation"
           }, [
             renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_3$x)
+          ], 8, _hoisted_3$y)
         ])
       ]),
-      createElementVNode("div", _hoisted_4$l, [
+      createElementVNode("div", _hoisted_4$m, [
         renderSlot(_ctx.$slots, "actions")
       ])
     ]),
@@ -2088,7 +2088,7 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class", "aria-describedby"]);
 }
-const OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
+const OnyxAlertModal = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAlertModal/OnyxAlertModal.vue"]]);
 const useRootAttrs = () => {
   const attrs = useAttrs();
   const rootAttrs = computed(
@@ -2170,7 +2170,7 @@ const mergeVueProps = (...args) => args.reduce((prev, curr) => {
   merged.ref = mergedRef;
   return merged;
 }, {});
-const _sfc_main$1u = /* @__PURE__ */ defineComponent({
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABButton",
   props: {
     density: { type: null, required: false },
@@ -2190,11 +2190,11 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$13 = {
+const _hoisted_1$14 = {
   key: 1,
   class: "onyx-fab-button__label"
 };
-function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-fab-button-skeleton", $setup.densityClass])
@@ -2212,7 +2212,7 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       !$setup.props.hideLabel ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_1$13,
+        _hoisted_1$14,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -2222,7 +2222,7 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "title", "aria-label", "link"]));
 }
-const OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABButton/OnyxFABButton.vue"]]);
+const OnyxFABButton = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABButton/OnyxFABButton.vue"]]);
 const useResizeObserver = (target, options) => {
   const box = options?.box ?? "content-box";
   const width = ref(0);
@@ -2534,7 +2534,7 @@ function useSticky(options) {
   });
   return { stickyStyles, scrolledOut, isSticky, checkVisibilityOnScroll };
 }
-const _sfc_main$1t = /* @__PURE__ */ defineComponent({
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicPopover",
   props: {
     label: { type: String, required: true },
@@ -2692,8 +2692,8 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$12 = ["role", "aria-label"];
-function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$13 = ["role", "aria-label"];
+function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -2712,14 +2712,14 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle(!$setup.isSticky ? $setup.popoverStyles : $setup.stickyStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
-      ], 14, _hoisted_1$12)
+      ], 14, _hoisted_1$13)
     ],
     4
     /* STYLE */
   );
 }
-const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
-const _sfc_main$1s = /* @__PURE__ */ defineComponent({
+const OnyxBasicPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicPopover/OnyxBasicPopover.vue"]]);
+const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   __name: "OnyxFlyoutMenu",
   props: {
     alignment: { type: String, required: false, default: "auto" },
@@ -2761,9 +2761,9 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$11 = { class: "onyx-flyout-menu__list-header" };
-const _hoisted_2$M = { class: "onyx-flyout-menu__list-footer" };
-function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$12 = { class: "onyx-flyout-menu__list-header" };
+const _hoisted_2$N = { class: "onyx-flyout-menu__list-footer" };
+function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicPopover"], mergeProps($setup.mergeVueProps($setup.root, { ref: $setup.popover }), {
     class: "onyx-component onyx-flyout-menu",
     open: $setup.isExpanded,
@@ -2772,7 +2772,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $props.disabled
   }), createSlots({
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$11, [
+      createElementVNode("div", _hoisted_1$12, [
         renderSlot(_ctx.$slots, "header")
       ]),
       $setup.slots.options ? (openBlock(), createElementBlock(
@@ -2784,7 +2784,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
         16
         /* FULL_PROPS */
       )) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$M, [
+      createElementVNode("div", _hoisted_2$N, [
         renderSlot(_ctx.$slots, "footer")
       ])
     ]),
@@ -2805,8 +2805,8 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "label", "alignment", "disabled"]);
 }
-const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const OnyxFlyoutMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.vue"]]);
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "OnyxFAB",
   props: {
     density: { type: null, required: false },
@@ -2845,7 +2845,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
   return !$setup.hasOptions || $setup.skeleton ? (openBlock(), createBlock($setup["OnyxFABButton"], mergeProps({
     key: 0,
     class: ["onyx-fab", `onyx-fab--${$setup.props.alignment}`]
@@ -2875,8 +2875,8 @@ function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 8, ["open", "label", "class", "alignment"]));
 }
-const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
-const _sfc_main$1q = /* @__PURE__ */ defineComponent({
+const OnyxFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFAB/OnyxFAB.vue"]]);
+const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "OnyxFABItem",
   props: {
     density: { type: null, required: false },
@@ -2899,7 +2899,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     mergeProps({
@@ -2914,7 +2914,7 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABItem/OnyxFABItem.vue"]]);
+const OnyxFABItem = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFABItem/OnyxFABItem.vue"]]);
 const GLOBAL_FAB_PROVIDER_INJECTION_KEY = Symbol();
 const createGlobalFABProvider = () => {
   const items = shallowRef([]);
@@ -2951,7 +2951,7 @@ const useGlobalFAB = () => {
   );
   return globalFABProvider;
 };
-const _sfc_main$1p = /* @__PURE__ */ defineComponent({
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   __name: "OnyxGlobalFAB",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -2965,7 +2965,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.globalFAB.items.value.length === 1 ? (openBlock(), createBlock(
     $setup["OnyxFAB"],
     normalizeProps(mergeProps({ key: 0 }, $setup.globalFAB.items.value[0].value)),
@@ -3000,14 +3000,14 @@ function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["label", "alignment"])) : createCommentVNode("v-if", true);
 }
-const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
-const _sfc_main$1o = {};
-const _hoisted_1$10 = {
+const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
+const _sfc_main$1p = {};
+const _hoisted_1$11 = {
   class: "onyx-component onyx-circle-spinner",
   viewBox: "0 0 50 50"
 };
-function _sfc_render$1o(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$10, [..._cache[0] || (_cache[0] = [
+function _sfc_render$1p(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$11, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "circle",
       {
@@ -3022,11 +3022,11 @@ function _sfc_render$1o(_ctx, _cache) {
     )
   ])]);
 }
-const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
-const _sfc_main$1n = {};
-const _hoisted_1$$ = { class: "onyx-component onyx-loading-dots" };
-function _sfc_render$1n(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$$, [..._cache[0] || (_cache[0] = [
+const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["render", _sfc_render$1p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
+const _sfc_main$1o = {};
+const _hoisted_1$10 = { class: "onyx-component onyx-loading-dots" };
+function _sfc_render$1o(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$10, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "span",
       { class: "onyx-loading-dots__center" },
@@ -3036,8 +3036,8 @@ function _sfc_render$1n(_ctx, _cache) {
     )
   ])]);
 }
-const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
-const _sfc_main$1m = /* @__PURE__ */ defineComponent({
+const OnyxLoadingDots = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["render", _sfc_render$1o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingDots.vue"]]);
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { type: String, required: false, default: "dots" }
@@ -3050,10 +3050,10 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1n(_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$1m, [["render", _sfc_render$1m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue"]]);
+const OnyxLoadingIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["render", _sfc_render$1n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxLoadingIndicator.vue"]]);
 const useRipple = (container) => {
   const isPointerDown = ref(false);
   const ripples = reactive(/* @__PURE__ */ new Map());
@@ -3100,7 +3100,7 @@ const useRipple = (container) => {
   });
   return { isPointerDown, ripples, startRipple, hideRipples, hideRipple, events };
 };
-const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "OnyxRipple",
   setup(__props, { expose: __expose }) {
     const rippleTrigger = useTemplateRef("rippleTriggerRef");
@@ -3113,16 +3113,16 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$_ = {
+const _hoisted_1$$ = {
   ref: "rippleTriggerRef",
   class: "onyx-component onyx-ripple",
   "aria-hidden": "true"
 };
-const _hoisted_2$L = ["data-rippleid"];
-function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$M = ["data-rippleid"];
+function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "span",
-    _hoisted_1$_,
+    _hoisted_1$$,
     [
       (openBlock(true), createElementBlock(
         Fragment,
@@ -3137,7 +3137,7 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             "data-rippleid": key,
             onAnimationend: _cache[0] || (_cache[0] = ($event) => $setup.hideRipple($event.target))
-          }, null, 44, _hoisted_2$L);
+          }, null, 44, _hoisted_2$M);
         }),
         128
         /* KEYED_FRAGMENT */
@@ -3147,8 +3147,8 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const OnyxRipple = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["render", _sfc_render$1m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue"]]);
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "OnyxButton",
   props: {
     density: { type: null, required: false },
@@ -3178,8 +3178,8 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Z = { class: "onyx-button__label onyx-truncation-ellipsis" };
-function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$_ = { class: "onyx-button__label onyx-truncation-ellipsis" };
+function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-button-skeleton", $setup.densityClass])
@@ -3216,7 +3216,7 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
       })) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_1$Z,
+        _hoisted_1$_,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -3231,8 +3231,8 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["class", "aria-label"]));
 }
-const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const OnyxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue"]]);
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoCard",
   props: {
     density: { type: null, required: false },
@@ -3259,16 +3259,16 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Y = { class: "onyx-info-card__content" };
-const _hoisted_2$K = {
+const _hoisted_1$Z = { class: "onyx-info-card__content" };
+const _hoisted_2$L = {
   key: 3,
   class: "onyx-info-card__description onyx-text--small"
 };
-const _hoisted_3$w = {
+const _hoisted_3$x = {
   key: 4,
   class: "onyx-info-card__buttons onyx-density-compact"
 };
-function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3280,7 +3280,7 @@ function _sfc_render$1j(_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$Y, [
+      createElementVNode("div", _hoisted_1$Z, [
         $setup.props.headline ? (openBlock(), createBlock($setup["OnyxHeadline"], {
           key: 0,
           is: "h3",
@@ -3323,10 +3323,10 @@ function _sfc_render$1j(_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$K, [
+        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$L, [
           renderSlot(_ctx.$slots, "default")
         ])) : createCommentVNode("v-if", true),
-        !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$w, [
+        !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$x, [
           renderSlot(_ctx.$slots, "buttons")
         ])) : createCommentVNode("v-if", true)
       ])
@@ -3335,8 +3335,8 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const OnyxInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["render", _sfc_render$1k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoCard/OnyxInfoCard.vue"]]);
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationMessage",
   props: {
     headline: { type: String, required: true },
@@ -3354,7 +3354,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxInfoCard"], {
     class: normalizeClass(["onyx-component onyx-notification-message", [
       "onyx-component",
@@ -3387,7 +3387,7 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["class", "headline", "icon", "style", "aria-label"]);
 }
-const OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationMessage/OnyxNotificationMessage.vue"]]);
+const OnyxNotificationMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["render", _sfc_render$1j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationMessage/OnyxNotificationMessage.vue"]]);
 const NOTIFICATIONS_PROVIDER_INJECTION_KEY = Symbol();
 const createNotificationsProvider = () => {
   let nextId = 1;
@@ -3432,7 +3432,7 @@ const useNotification = () => {
   );
   return notificationsProvider;
 };
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotifications",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3442,15 +3442,15 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$X = {
+const _hoisted_1$Y = {
   key: 0,
   class: "onyx-component onyx-notifications",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$X, [
+function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$Y, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -3502,8 +3502,8 @@ function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const OnyxNotifications = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["render", _sfc_render$1i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotifications/OnyxNotifications.vue"]]);
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "OnyxToastMessage",
   props: {
     density: { type: null, required: false },
@@ -3539,33 +3539,33 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$W = { class: "onyx-toast-message__wrapper" };
-const _hoisted_2$J = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
-const _hoisted_3$v = { class: "onyx-toast-message__headline onyx-text" };
-const _hoisted_4$k = { class: "onyx-truncation-ellipsis" };
-const _hoisted_5$e = ["aria-label"];
+const _hoisted_1$X = { class: "onyx-toast-message__wrapper" };
+const _hoisted_2$K = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
+const _hoisted_3$w = { class: "onyx-toast-message__headline onyx-text" };
+const _hoisted_4$l = { class: "onyx-truncation-ellipsis" };
+const _hoisted_5$f = ["aria-label"];
 const _hoisted_6$b = {
   key: 0,
   class: "onyx-toast-message__description onyx-text--small onyx-truncation-multiline",
   tabindex: "0"
 };
-function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1h(_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$W, [
+      createElementVNode("div", _hoisted_1$X, [
         $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
           key: 0,
           icon: $setup.icon
         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_2$J, [
-          createElementVNode("div", _hoisted_3$v, [
+        createElementVNode("div", _hoisted_2$K, [
+          createElementVNode("div", _hoisted_3$w, [
             createElementVNode(
               "span",
-              _hoisted_4$k,
+              _hoisted_4$l,
               toDisplayString($setup.props.headline),
               1
               /* TEXT */
@@ -3578,7 +3578,7 @@ function _sfc_render$1g(_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$e)) : createCommentVNode("v-if", true)
+            ], 8, _hoisted_5$f)) : createCommentVNode("v-if", true)
           ]),
           $setup.props.description ? (openBlock(), createElementBlock(
             "p",
@@ -3607,7 +3607,7 @@ function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class", "role", "aria-label"]);
 }
-const OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue"]]);
+const OnyxToastMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["render", _sfc_render$1h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToastMessage/OnyxToastMessage.vue"]]);
 const TOAST_PROVIDER_INJECTION_KEY = Symbol();
 const createToastProvider = () => {
   let nextId = 1;
@@ -3650,7 +3650,7 @@ const useToast = () => {
   );
   return toastProvider;
 };
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "OnyxToast",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3660,15 +3660,15 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$V = {
+const _hoisted_1$W = {
   key: 0,
   class: "onyx-component onyx-toast",
   role: "presentation",
   "aria-live": "polite",
   open: ""
 };
-function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$V, [
+function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$W, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -3686,8 +3686,8 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ])) : createCommentVNode("v-if", true);
 }
-const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const OnyxToast = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["render", _sfc_render$1g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxToast/OnyxToast.vue"]]);
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "OnyxAppLayout",
   props: {
     navBarAlignment: { type: String, required: false, default: "top" }
@@ -3701,22 +3701,22 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$U = {
+const _hoisted_1$V = {
   key: 0,
   class: "onyx-app__nav"
 };
-const _hoisted_2$I = { class: "onyx-app__page" };
-function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$J = { class: "onyx-app__page" };
+function _sfc_render$1f(_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$U, [
+      $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$V, [
         renderSlot(_ctx.$slots, "navBar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$I, [
+      createElementVNode("div", _hoisted_2$J, [
         renderSlot(_ctx.$slots, "default")
       ]),
       createVNode($setup["OnyxToast"]),
@@ -3727,8 +3727,8 @@ function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const OnyxAppLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["render", _sfc_render$1f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.vue"]]);
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatar",
   props: {
     size: { type: null, required: false, default: "48px" },
@@ -3762,13 +3762,13 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$T = ["title", "aria-label"];
-const _hoisted_2$H = ["src", "alt"];
-const _hoisted_3$u = {
+const _hoisted_1$U = ["title", "aria-label"];
+const _hoisted_2$I = ["src", "alt"];
+const _hoisted_3$v = {
   key: 0,
   class: "onyx-avatar__initials"
 };
-function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass([
       "onyx-component",
@@ -3785,13 +3785,13 @@ function _sfc_render$1d(_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$H)) : (openBlock(), createElementBlock(
+    }, null, 40, _hoisted_2$I)) : (openBlock(), createElementBlock(
       Fragment,
       { key: 1 },
       [
         $setup.initials ? (openBlock(), createElementBlock(
           "div",
-          _hoisted_3$u,
+          _hoisted_3$v,
           toDisplayString($setup.initials),
           1
           /* TEXT */
@@ -3804,10 +3804,10 @@ function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
       64
       /* STABLE_FRAGMENT */
     ))
-  ], 10, _hoisted_1$T);
+  ], 10, _hoisted_1$U);
 }
-const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
-const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$1e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "OnyxAvatarStack",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3816,14 +3816,14 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$S = { class: "onyx-component onyx-avatar-stack" };
-function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$S, [
+const _hoisted_1$T = { class: "onyx-component onyx-avatar-stack" };
+function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$T, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const OnyxAvatarStack = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$1d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatarStack/OnyxAvatarStack.vue"]]);
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "OnyxBadge",
   props: {
     density: { type: null, required: false },
@@ -3840,7 +3840,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3871,8 +3871,8 @@ function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const OnyxBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBadge/OnyxBadge.vue"]]);
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "OnyxBottomBar",
   props: {
     density: { type: null, required: false },
@@ -3887,10 +3887,10 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$R = { class: "onyx-bottom-bar__content onyx-grid-container" };
-const _hoisted_2$G = { class: "onyx-bottom-bar__content--left" };
-const _hoisted_3$t = { class: "onyx-bottom-bar__content--right" };
-function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$S = { class: "onyx-bottom-bar__content onyx-grid-container" };
+const _hoisted_2$H = { class: "onyx-bottom-bar__content--left" };
+const _hoisted_3$u = { class: "onyx-bottom-bar__content--right" };
+function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -3902,11 +3902,11 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$R, [
-        createElementVNode("div", _hoisted_2$G, [
+      createElementVNode("div", _hoisted_1$S, [
+        createElementVNode("div", _hoisted_2$H, [
           renderSlot(_ctx.$slots, "left")
         ]),
-        createElementVNode("div", _hoisted_3$t, [
+        createElementVNode("div", _hoisted_3$u, [
           renderSlot(_ctx.$slots, "default")
         ])
       ])
@@ -3915,7 +3915,7 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
+const OnyxBottomBar = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue"]]);
 const useMoreList = (options) => {
   const visibleElements = ref();
   const hiddenElements = ref();
@@ -4010,7 +4010,7 @@ const useMoreListChild = (injectionKey) => {
 };
 const BREADCRUMB_MORE_LIST_INJECTION_KEY = Symbol();
 const BREADCRUMB_MORE_LIST_TARGET_INJECTION_KEY = Symbol();
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "OnyxExternalLinkIcon",
   props: {
     href: { type: String, required: false },
@@ -4031,7 +4031,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.isVisible ? (openBlock(), createBlock($setup["OnyxIcon"], {
     key: 0,
     class: "onyx-component onyx-external-link-icon",
@@ -4039,8 +4039,8 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
     size: "16px"
   }, null, 8, ["icon"])) : createCommentVNode("v-if", true);
 }
-const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const OnyxExternalLinkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxExternalLinkIcon/OnyxExternalLinkIcon.vue"]]);
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "OnyxListItem",
   props: {
     density: { type: null, required: false },
@@ -4059,7 +4059,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "li",
     {
@@ -4081,8 +4081,8 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const OnyxListItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue"]]);
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMenuItem",
   props: {
@@ -4161,17 +4161,17 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Q = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$F = {
+const _hoisted_1$R = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$G = {
   key: 0,
   class: "onyx-menu-item__chevron"
 };
-const _hoisted_3$s = {
+const _hoisted_3$t = {
   key: 0,
   role: "menu",
   class: "onyx-menu-item__children"
 };
-function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OnyxMenuItem = resolveComponent("OnyxMenuItem", true);
   return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({
     selected: $setup.isActive,
@@ -4192,7 +4192,7 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("span", null, [
               createElementVNode(
                 "span",
-                _hoisted_1$Q,
+                _hoisted_1$R,
                 toDisplayString($setup.props.label),
                 1
                 /* TEXT */
@@ -4206,7 +4206,7 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ])
           ]),
-          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$F, [
+          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$G, [
             createVNode($setup["OnyxIcon"], {
               icon: $setup.iconChevronRightSmall,
               size: "24px"
@@ -4220,7 +4220,7 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       $setup.hasChildren ? withDirectives((openBlock(), createElementBlock(
         "ul",
-        _hoisted_3$s,
+        _hoisted_3$t,
         [
           createVNode(
             _component_OnyxMenuItem,
@@ -4257,8 +4257,8 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["selected", "active", "color", "disabled", "class"]);
 }
-const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const OnyxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxMenuItem/OnyxMenuItem.vue"]]);
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxBreadcrumbItem",
   props: {
@@ -4284,7 +4284,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -4344,8 +4344,8 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const OnyxBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumbItem/OnyxBreadcrumbItem.vue"]]);
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "OnyxMoreList",
   props: {
     injectionKey: { type: [Symbol, Object], required: true },
@@ -4378,7 +4378,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     resolveDynamicComponent($setup.props.is),
     {
@@ -4418,8 +4418,8 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const OnyxMoreList = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMoreList/OnyxMoreList.vue"]]);
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "OnyxBreadcrumb",
   props: {
     density: { type: null, required: false },
@@ -4445,13 +4445,13 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$P = ["aria-label", "aria-hidden"];
-const _hoisted_2$E = {
+const _hoisted_1$Q = ["aria-label", "aria-hidden"];
+const _hoisted_2$F = {
   class: "onyx-breadcrumb__list onyx-grid-container",
   role: "menu"
 };
-const _hoisted_3$r = { ref: "moreListRef" };
-function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_3$s = { ref: "moreListRef" };
+function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("nav", {
     class: normalizeClass([
       "onyx-component",
@@ -4462,7 +4462,7 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.t("breadcrumb.label"),
     "aria-hidden": $setup.props.skeleton
   }, [
-    createElementVNode("ol", _hoisted_2$E, [
+    createElementVNode("ol", _hoisted_2$F, [
       createVNode($setup["OnyxBreadcrumbItem"], {
         class: "onyx-breadcrumb__home",
         href: $setup.props.home?.link ?? "/",
@@ -4530,7 +4530,7 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
             options: withCtx(() => [
               createElementVNode(
                 "div",
-                _hoisted_3$r,
+                _hoisted_3$s,
                 null,
                 512
                 /* NEED_PATCH */
@@ -4544,13 +4544,13 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
         /* FORWARDED */
       }, 8, ["injection-key"])
     ])
-  ], 10, _hoisted_1$P);
+  ], 10, _hoisted_1$Q);
 }
-const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumb/OnyxBreadcrumb.vue"]]);
+const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumb/OnyxBreadcrumb.vue"]]);
 const BUTTON_TYPES = ["button", "submit", "reset"];
 const BUTTON_COLORS = ["primary", "neutral", "danger"];
 const BUTTON_MODES = ["default", "outline", "plain"];
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "OnyxCard",
   props: {
     density: { type: null, required: false },
@@ -4569,7 +4569,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($setup.linkProps ? $setup.OnyxRouterLink : $setup.props.clickable ? "button" : "div"), mergeProps($setup.linkProps, {
     class: ["onyx-component", "onyx-card", $setup.densityClass, "onyx-truncation-multiline", "onyx-text"]
   }), {
@@ -4580,8 +4580,8 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class"]);
 }
-const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "OnyxCalendarCell",
   props: {
     density: { type: null, required: false },
@@ -4610,14 +4610,14 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$O = { class: "onyx-calendar-cell__header" };
-const _hoisted_2$D = { class: "onyx-calendar-cell__date-container" };
-const _hoisted_3$q = { class: "onyx-calendar-cell__date" };
-const _hoisted_4$j = {
+const _hoisted_1$P = { class: "onyx-calendar-cell__header" };
+const _hoisted_2$E = { class: "onyx-calendar-cell__date-container" };
+const _hoisted_3$r = { class: "onyx-calendar-cell__date" };
+const _hoisted_4$k = {
   key: 0,
   class: "onyx-calendar-cell__main"
 };
-function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "td",
     {
@@ -4643,18 +4643,18 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }), {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$O, [
-            createElementVNode("div", _hoisted_2$D, [
+          createElementVNode("div", _hoisted_1$P, [
+            createElementVNode("div", _hoisted_2$E, [
               createElementVNode(
                 "span",
-                _hoisted_3$q,
+                _hoisted_3$r,
                 toDisplayString($setup.props.date),
                 1
                 /* TEXT */
               )
             ])
           ]),
-          !!$setup.slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+          !!$setup.slots.default ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
             renderSlot(_ctx.$slots, "default")
           ])) : createCommentVNode("v-if", true)
         ]),
@@ -4666,8 +4666,8 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxCalendarCell = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendarCell/OnyxCalendarCell.vue"]]);
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const OnyxCalendarCell = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendarCell/OnyxCalendarCell.vue"]]);
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "OnyxIconButton",
   props: {
     density: { type: null, required: false },
@@ -4692,7 +4692,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-icon-button-skeleton", $setup.densityClass])
@@ -4720,8 +4720,8 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["aria-label", "title", "class"]));
 }
-const OnyxIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const OnyxIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTooltip",
   props: {
     density: { type: null, required: false },
@@ -4876,8 +4876,8 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$N = { class: "onyx-tooltip--content" };
-function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$O = { class: "onyx-tooltip--content" };
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -4893,7 +4893,7 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
           style: $setup.tooltipStyles
         }),
         [
-          createElementVNode("div", _hoisted_1$N, [
+          createElementVNode("div", _hoisted_1$O, [
             $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 0,
               icon: $setup.props.icon,
@@ -4917,8 +4917,8 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, STYLE */
   );
 }
-const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTag",
   props: {
     density: { type: null, required: false },
@@ -4945,9 +4945,9 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$M = { class: "onyx-text onyx-truncation-ellipsis" };
-const _hoisted_2$C = { class: "onyx-text onyx-truncation-ellipsis" };
-function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$N = { class: "onyx-text onyx-truncation-ellipsis" };
+const _hoisted_2$D = { class: "onyx-text onyx-truncation-ellipsis" };
+function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-tag-skeleton", $setup.densityClass])
@@ -4970,7 +4970,7 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
           createElementVNode(
             "span",
-            _hoisted_1$M,
+            _hoisted_1$N,
             toDisplayString($setup.props.label),
             1
             /* TEXT */
@@ -5001,7 +5001,7 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_2$C,
+        _hoisted_2$D,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -5011,9 +5011,9 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
+const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
 const __default__ = {};
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "OnyxCalendar",
   props: {
@@ -5104,16 +5104,16 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$L = { class: "onyx-calendar__header" };
-const _hoisted_2$B = { class: "control-container time-control-container" };
-const _hoisted_3$p = { class: "control-container" };
-const _hoisted_4$i = { class: "onyx-calendar__body" };
-const _hoisted_5$d = ["abbr"];
+const _hoisted_1$M = { class: "onyx-calendar__header" };
+const _hoisted_2$C = { class: "control-container time-control-container" };
+const _hoisted_3$q = { class: "control-container" };
+const _hoisted_4$j = { class: "onyx-calendar__body" };
+const _hoisted_5$e = ["abbr"];
 const _hoisted_6$a = {
   key: 0,
   scope: "row"
 };
-function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     {
@@ -5134,8 +5134,8 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component", "onyx-calendar", `onyx-calendar--${$setup.calendarSize}`, $setup.densityClass])
     },
     [
-      createElementVNode("div", _hoisted_1$L, [
-        createElementVNode("div", _hoisted_2$B, [
+      createElementVNode("div", _hoisted_1$M, [
+        createElementVNode("div", _hoisted_2$C, [
           $setup.calendarSize !== "small" ? (openBlock(), createBlock($setup["OnyxTag"], {
             key: 0,
             label: $setup.t("calendar.todayButton.label"),
@@ -5173,11 +5173,11 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
             onClick: _cache[1] || (_cache[1] = ($event) => $setup.goToMonthByOffset(1))
           }, null, 8, ["label", "icon", "disabled"])
         ]),
-        createElementVNode("div", _hoisted_3$p, [
+        createElementVNode("div", _hoisted_3$q, [
           renderSlot(_ctx.$slots, "actions")
         ])
       ]),
-      createElementVNode("div", _hoisted_4$i, [
+      createElementVNode("div", _hoisted_4$j, [
         createElementVNode(
           "table",
           normalizeProps(guardReactiveProps($setup.tableProps)),
@@ -5192,7 +5192,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
                       key: header,
                       scope: "col",
                       abbr: header
-                    }, toDisplayString(header), 9, _hoisted_5$d);
+                    }, toDisplayString(header), 9, _hoisted_5$e);
                   }),
                   128
                   /* KEYED_FRAGMENT */
@@ -5265,7 +5265,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendar/OnyxCalendar.vue"]]);
+const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendar/OnyxCalendar.vue"]]);
 const useRequired = (props, requiredMarker) => ({
   /**
    * Class that configures which type of required marker is used.
@@ -5481,7 +5481,7 @@ const formatMinMax = (locale, type, value) => {
   };
   return date.toLocaleString(locale, format);
 };
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "OnyxErrorTooltip",
   props: {
     errorMessages: { type: Object, required: false },
@@ -5497,16 +5497,16 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$K = { class: "onyx-component" };
-const _hoisted_2$A = {
+const _hoisted_1$L = { class: "onyx-component" };
+const _hoisted_2$B = {
   key: 0,
   ref: "targetRef"
 };
-function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$K, [
+function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$L, [
     !$setup.tooltipError || $setup.props.disabled ? (openBlock(), createElementBlock(
       "div",
-      _hoisted_2$A,
+      _hoisted_2$B,
       null,
       512
       /* NEED_PATCH */
@@ -5539,8 +5539,8 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, ["to"])) : createCommentVNode("v-if", true)
   ]);
 }
-const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxCheckbox",
   props: {
@@ -5587,10 +5587,10 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$J = ["title"];
-const _hoisted_2$z = { class: "onyx-checkbox__container" };
-const _hoisted_3$o = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
-function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$K = ["title"];
+const _hoisted_2$A = { class: "onyx-checkbox__container" };
+const _hoisted_3$p = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
+function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -5616,7 +5616,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["onyx-component onyx-checkbox", [$setup.requiredTypeClass, $setup.densityClass]]),
         title: $setup.title
       }, [
-        createElementVNode("div", _hoisted_2$z, [
+        createElementVNode("div", _hoisted_2$A, [
           $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
             key: 0,
             class: "onyx-checkbox__loading",
@@ -5633,7 +5633,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
             required: $setup.props.required,
             value: $setup.props.value,
             autofocus: $setup.props.autofocus
-          }, $setup.restAttrs), null, 16, _hoisted_3$o)), [
+          }, $setup.restAttrs), null, 16, _hoisted_3$p)), [
             [vModelCheckbox, $setup.isChecked],
             [$setup["vCustomValidity"]]
           ])
@@ -5669,13 +5669,13 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_1$J)
+      ], 10, _hoisted_1$K)
     ]),
     _: 1
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-const OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue"]]);
+const OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue"]]);
 const useSelectAllCheckboxState = (enabledOptionValues, modelValue) => computed(() => {
   const currentValues = modelValue.value.filter(
     (value) => enabledOptionValues.value.includes(value)
@@ -5710,7 +5710,7 @@ const useCheckAll = (enabledOptionValues, modelValue, onChangeCallback) => {
     }
   };
 };
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoTooltip",
   props: {
     text: { type: String, required: true },
@@ -5746,9 +5746,9 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$I = { class: "onyx-component onyx-info-tooltip" };
-function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$I, [
+const _hoisted_1$J = { class: "onyx-component onyx-info-tooltip" };
+function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$J, [
     $setup.triggerType === "click" ? (openBlock(), createBlock($setup["OnyxTooltip"], mergeProps({ key: 0 }, $setup.tooltipProps, {
       open: $setup.isVisible,
       "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.isVisible = $event)
@@ -5806,8 +5806,8 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ]);
 }
-const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "OnyxCheckboxGroup",
   props: {
     truncation: { type: null, required: false, default: "ellipsis" },
@@ -5865,18 +5865,18 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$H = ["disabled", "aria-label"];
-const _hoisted_2$y = {
+const _hoisted_1$I = ["disabled", "aria-label"];
+const _hoisted_2$z = {
   key: 0,
   class: "onyx-checkbox-group__label"
 };
-function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$X(_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$y, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$z, [
       createVNode($setup["OnyxHeadline"], { is: "h3" }, {
         default: withCtx(() => [
           createTextVNode(
@@ -5956,15 +5956,15 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$H);
+  ], 10, _hoisted_1$I);
 }
-const OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue"]]);
+const OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue"]]);
 const escapeCSS = (key) => {
   const name = typeof key === "symbol" && key.description ? key.description : String(key);
   if (globalThis.window && window.CSS) return CSS.escape(name);
   return name.replace(/\W/g, "-");
 };
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "OnyxEmpty",
   props: {
     density: { type: null, required: false }
@@ -5981,12 +5981,12 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$G = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
-const _hoisted_2$x = {
+const _hoisted_1$H = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
+const _hoisted_2$y = {
   key: 0,
   class: "onyx-empty__buttons"
 };
-function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -5999,10 +5999,10 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
           size: "48px"
         }, null, 8, ["icon"])
       ]),
-      createElementVNode("div", _hoisted_1$G, [
+      createElementVNode("div", _hoisted_1$H, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$x, [
+      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$y, [
         renderSlot(_ctx.$slots, "buttons")
       ])) : createCommentVNode("v-if", true)
     ],
@@ -6010,8 +6010,8 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$V], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.vue"]]);
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+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({
   __name: "OnyxTable",
   props: {
     density: { type: null, required: false },
@@ -6042,14 +6042,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$F = {
+const _hoisted_1$G = {
   key: 0,
   class: "onyx-table-wrapper__top"
 };
-const _hoisted_2$w = ["id"];
-const _hoisted_3$n = { class: "onyx-table-wrapper__actions" };
-const _hoisted_4$h = ["tabindex"];
-const _hoisted_5$c = ["aria-labelledby"];
+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 = {
   key: 0,
@@ -6064,7 +6064,7 @@ const _hoisted_13 = {
   key: 1,
   class: "onyx-table-wrapper__bottom"
 };
-function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -6072,11 +6072,11 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
       style: normalizeStyle($setup.style)
     },
     [
-      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$F, [
+      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$G, [
         createElementVNode("div", { id: $setup.headlineId }, [
           renderSlot(_ctx.$slots, "headline")
-        ], 8, _hoisted_2$w),
-        createElementVNode("div", _hoisted_3$n, [
+        ], 8, _hoisted_2$x),
+        createElementVNode("div", _hoisted_3$o, [
           renderSlot(_ctx.$slots, "actions")
         ])
       ])) : createCommentVNode("v-if", true),
@@ -6153,8 +6153,8 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ])
           ])
-        ], 10, _hoisted_5$c)
-      ], 16, _hoisted_4$h),
+        ], 10, _hoisted_5$d)
+      ], 16, _hoisted_4$i),
       !!$setup.slots.bottomLeft || !!$setup.slots.pagination ? (openBlock(), createElementBlock("div", _hoisted_13, [
         createElementVNode("div", null, [
           renderSlot(_ctx.$slots, "bottomLeft")
@@ -6168,8 +6168,8 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     /* STYLE */
   );
 }
-const OnyxTable = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue"]]);
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+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({
   __name: "OnyxDataGridRenderer",
   props: {
     density: { type: null, required: false },
@@ -6205,7 +6205,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxTable"], mergeProps({ class: "onyx-data-grid" }, $setup.tableProps, {
     "scroll-container-attrs": $setup.mergeVueProps($setup.props.scrollContainerAttrs, { style: $setup.columnStyle })
   }), createSlots({
@@ -6312,8 +6312,8 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ]), 1040, ["scroll-container-attrs"]);
 }
-const OnyxDataGridRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$T], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue"]]);
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+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({
   ...{ inheritAttrs: false },
   __name: "OnyxMiniSearch",
   props: {
@@ -6353,9 +6353,9 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$E = ["autofocus", "placeholder", "aria-label"];
-const _hoisted_2$v = ["aria-label"];
-function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$F = ["autofocus", "placeholder", "aria-label"];
+const _hoisted_2$w = ["aria-label"];
+function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -6374,7 +6374,7 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
         size: "1"
       }, $setup.restAttrs, {
         "aria-label": $setup.props.label
-      }), null, 16, _hoisted_1$E), [
+      }), null, 16, _hoisted_1$F), [
         [vModelText, $setup.modelValue]
       ]),
       createElementVNode("button", {
@@ -6387,7 +6387,7 @@ function _sfc_render$S(_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$v),
+      ], 40, _hoisted_2$w),
       createVNode($setup["OnyxIcon"], {
         class: "onyx-mini-search__icon",
         icon: $setup.iconSearch
@@ -6397,11 +6397,11 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxMiniSearch = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$S], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue"]]);
+const 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 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$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "HeaderCell",
   props: {
     label: { type: String, required: true }
@@ -6415,27 +6415,27 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$D = { class: "onyx-component onyx-data-grid-header-cell" };
-const _hoisted_2$u = { class: "onyx-data-grid-header-cell__label" };
-const _hoisted_3$m = {
+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 = {
   key: 0,
   class: "onyx-data-grid-header-cell__actions"
 };
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$D, [
+function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$E, [
     createElementVNode(
       "span",
-      _hoisted_2$u,
+      _hoisted_2$v,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
     ),
-    $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$m, [
+    $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$n, [
       renderSlot(_ctx.$slots, "actions")
     ])) : createCommentVNode("v-if", true)
   ]);
 }
-const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue"]]);
+const 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 FALLBACK_RENDER_VALUE = "-";
 const fallback = (opts) => opts?.fallback ?? FALLBACK_RENDER_VALUE;
 const createTypeRenderer = (typeRenderer) => Object.freeze(typeRenderer);
@@ -6928,6 +6928,155 @@ const formatBytesToString = (locale, bytes) => {
     unitDisplay: "narrow"
   }).format(value);
 };
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
+  __name: "OnyxInlinePagination",
+  props: {
+    density: { type: null, required: false },
+    modelValue: { type: Number, required: true },
+    pages: { type: Number, required: true },
+    disabled: { type: Boolean, required: false },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
+    type: { type: String, required: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const { t } = injectI18n();
+    const { densityClass } = useDensity(props);
+    const skeleton = useSkeletonContext(props);
+    const hasReachedMin = computed(() => props.modelValue <= 1);
+    const hasReachedMax = computed(() => props.modelValue >= props.pages);
+    const displayPagesNumbers = computed(() => {
+      const currentPage = props.modelValue;
+      const totalPages = props.pages;
+      const pagesToShow = /* @__PURE__ */ new Set();
+      pagesToShow.add(1);
+      pagesToShow.add(totalPages);
+      pagesToShow.add(currentPage);
+      pagesToShow.add(currentPage - 1);
+      pagesToShow.add(currentPage + 1);
+      if (currentPage === 1) pagesToShow.add(3);
+      if (currentPage === totalPages) pagesToShow.add(totalPages - 2);
+      const uniqueSortedPages = Array.from(pagesToShow).filter((page) => page >= 1 && page <= totalPages).sort((a, b) => a - b);
+      const finalPages = [];
+      let lastPageAdded = null;
+      for (const page of uniqueSortedPages) {
+        if (lastPageAdded !== null && page > lastPageAdded + 1) {
+          finalPages.push("morePages");
+        }
+        finalPages.push(page);
+        lastPageAdded = page;
+      }
+      return finalPages;
+    });
+    const __returned__ = { props, emit, t, densityClass, skeleton, hasReachedMin, hasReachedMax, displayPagesNumbers, get iconChevronLeftSmall() {
+      return iconChevronLeftSmall;
+    }, get iconChevronRightSmall() {
+      return iconChevronRightSmall;
+    }, OnyxIcon, OnyxSkeleton, OnyxVisuallyHidden };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    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) {
+  return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
+    key: 0,
+    class: normalizeClass([
+      "onyx-pagination-skeleton",
+      "onyx-pagination-skeleton--inline",
+      "onyx-text",
+      $setup.densityClass
+    ])
+  }, null, 8, ["class"])) : (openBlock(), createElementBlock("div", {
+    key: 1,
+    class: normalizeClass([
+      "onyx-component",
+      "onyx-pagination",
+      "onyx-pagination--inline",
+      "onyx-text",
+      $setup.densityClass
+    ]),
+    role: "group",
+    "aria-label": $setup.t("pagination.label")
+  }, [
+    createElementVNode("button", {
+      class: "onyx-pagination__navigate-button",
+      "aria-label": $setup.t("pagination.previous"),
+      type: "button",
+      disabled: $setup.props.disabled || $setup.hasReachedMin,
+      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),
+    (openBlock(true), createElementBlock(
+      Fragment,
+      null,
+      renderList($setup.displayPagesNumbers, (pageNumber) => {
+        return openBlock(), createElementBlock(
+          Fragment,
+          { key: pageNumber },
+          [
+            typeof pageNumber === "number" ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              class: normalizeClass([
+                "onyx-pagination__page-button",
+                { "onyx-pagination__page-button--active": pageNumber === $setup.props.modelValue }
+              ]),
+              "aria-label": $setup.t("pagination.buttonLabel", { page: pageNumber }),
+              type: "button",
+              disabled: $setup.props.disabled,
+              onClick: ($event) => $setup.emit("update:modelValue", pageNumber)
+            }, toDisplayString(pageNumber), 11, _hoisted_3$m)) : (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(["onyx-pagination__more-pages"]),
+              "aria-label": $setup.t("pagination.morePages")
+            }, [
+              _cache[2] || (_cache[2] = createElementVNode(
+                "span",
+                { "aria-hidden": "true" },
+                "...",
+                -1
+                /* CACHED */
+              )),
+              createVNode($setup["OnyxVisuallyHidden"], null, {
+                default: withCtx(() => [
+                  createTextVNode(
+                    toDisplayString($setup.t("pagination.morePages")),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ], 8, _hoisted_4$h))
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        );
+      }),
+      128
+      /* KEYED_FRAGMENT */
+    )),
+    createElementVNode("button", {
+      class: "onyx-pagination__navigate-button",
+      "aria-label": $setup.t("pagination.next"),
+      type: "button",
+      disabled: $setup.props.disabled || $setup.hasReachedMax,
+      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));
+}
+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 useErrorClass = (showError) => computed(() => {
   if (showError.value === true) {
     return "onyx-form-element--immediate-invalid";
@@ -7922,7 +8071,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     modelValue: { type: Number, required: true },
     pages: { type: Number, required: true },
     disabled: { type: Boolean, required: false },
-    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
+    type: { type: String, required: false }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -8034,29 +8184,38 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     modelValue: { type: Number, required: true },
     pages: { type: Number, required: true },
     disabled: { type: Boolean, required: false, default: false },
-    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
+    type: { type: String, required: false }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
     const emit = __emit;
-    const selectPaginationProps = useForwardProps(props, OnyxSelectPagination);
-    const __returned__ = { props, emit, selectPaginationProps, OnyxSelectPagination };
+    const paginationProps = useForwardProps(props, OnyxSelectPagination);
+    const __returned__ = { props, emit, paginationProps, OnyxInlinePagination, OnyxSelectPagination };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(
-    $setup["OnyxSelectPagination"],
-    mergeProps($setup.selectPaginationProps, {
+  return $setup.props.type === "inline" ? (openBlock(), createBlock(
+    $setup["OnyxInlinePagination"],
+    mergeProps({ key: 0 }, $setup.paginationProps, {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.emit("update:modelValue", $event))
     }),
     null,
     16
     /* FULL_PROPS */
-  );
+  )) : (openBlock(), createBlock(
+    $setup["OnyxSelectPagination"],
+    mergeProps({ key: 1 }, $setup.paginationProps, {
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:modelValue", $event))
+    }),
+    null,
+    16
+    /* 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 SELECTION_FEATURE = Symbol("Selection");