npm - sit-onyx - Versions diffs - 1.4.1-dev-20251204080720 → 1.5.0-dev-20251204152127 - Mend

sit-onyx 1.4.1-dev-20251204080720 → 1.5.0-dev-20251204152127

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

Files changed (11) hide show

package/dist/components/OnyxFileUpload/OnyxFileUpload.d.vue.ts +3 -2
package/dist/components/OnyxFileUpload/types.d.ts +1 -1
package/dist/components/illustrations/OnyxFileUploadSVG/types.d.ts +4 -0
package/dist/i18n/locales/de-DE.json +1 -0
package/dist/i18n/locales/en-US.json +1 -0
package/dist/i18n/locales/en-US.json.d.ts +1 -0
package/dist/index.esm-bundler.js +467 -406
package/dist/index.esm-bundler.js.map +1 -1
package/dist/index.js +3274 -3223
package/dist/style.css +1 -1
package/package.json +5 -5

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

@@ -166,7 +166,7 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1h = ["innerHTML"];
+const _hoisted_1$1i = ["innerHTML"];
 function _sfc_render$1M(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("figure", {
     class: normalizeClass({
@@ -178,7 +178,7 @@ function _sfc_render$1M(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     "aria-hidden": "true",
     innerHTML: $setup.props.icon
-  }, null, 10, _hoisted_1$1h);
+  }, null, 10, _hoisted_1$1i);
 }
 const OnyxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1M, [["render", _sfc_render$1M], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIcon/OnyxIcon.vue"]]);
 const isAlreadyTriggered = /* @__PURE__ */ new Set();
@@ -206,12 +206,12 @@ const _sfc_main$1L = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1g = {
+const _hoisted_1$1h = {
   "aria-hidden": "true",
   class: "onyx-component onyx-skeleton"
 };
 function _sfc_render$1L(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("figure", _hoisted_1$1g);
+  return openBlock(), createElementBlock("figure", _hoisted_1$1h);
 }
 const OnyxSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["render", _sfc_render$1L], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSkeleton/OnyxSkeleton.vue"]]);
 const _sfc_main$1K = /* @__PURE__ */ defineComponent({
@@ -251,8 +251,8 @@ const _sfc_main$1K = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1f = ["open"];
-const _hoisted_2$V = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
+const _hoisted_1$1g = ["open"];
+const _hoisted_2$W = ["id", "tabindex", "aria-expanded", "aria-controls", "aria-disabled"];
 const _hoisted_3$B = { class: "onyx-accordion-item__header-content" };
 const _hoisted_4$o = ["id", "aria-labelledby"];
 function _sfc_render$1K(_ctx, _cache, $props, $setup, $data, $options) {
@@ -298,7 +298,7 @@ function _sfc_render$1K(_ctx, _cache, $props, $setup, $data, $options) {
         icon: $setup.iconChevronDownSmall,
         class: "onyx-accordion-item__header-icon"
       }, null, 8, ["icon"])
-    ], 8, _hoisted_2$V),
+    ], 8, _hoisted_2$W),
     createElementVNode("div", {
       id: $setup.panelId,
       class: "onyx-accordion-item__panel",
@@ -307,7 +307,7 @@ function _sfc_render$1K(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       renderSlot(_ctx.$slots, "default")
     ], 8, _hoisted_4$o)
-  ], 10, _hoisted_1$1f));
+  ], 10, _hoisted_1$1g));
 }
 const OnyxAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["render", _sfc_render$1K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAccordionItem/OnyxAccordionItem.vue"]]);
 const DATETIME_FORMATS = {
@@ -352,7 +352,7 @@ const avatar = { "ariaLabel": "Avatar of {fullName}" };
 const filterTag = { "clickToAdd": "Add {label} filter", "clickToRemove": "Remove {label} filter" };
 const languageSelect = { "label": "Language", "headline": "Change language", "subtitle": "Select the language of the application:" };
 const resizeHandle = { "label": "Drag to change width" };
-const fileUpload = { "select": "Select", "clickToUpload": "Click to select", "orDragAndDrop": "or drag and drop file", "maxFileSize": "Maximum file size", "inTotal": "in total", "maxFileCount": "Maximum {n} files to select in total", "allowedFileTypes": "Allowed file types: {types}", "hideFilesButton": "Hide all files", "revealFilesButton": "Show all files", "removeFile": "Remove file", "status": { "fileTypeError": "File with extension '.{extension}' is invalid", "fileSizeError": "File exceeds maximum allowed size of {size}", "maxFileSizeError": "Total size of all files exceeds maximum allowed of {size}", "maxCountError": "Number of files exceeds maximum allowed of {count}" } };
+const fileUpload = { "select": "Select", "clickToUpload": "Click to select", "orDragAndDrop": "or drag and drop file", "maxFileSize": "Maximum file size", "inTotal": "in total", "maxFileCount": "Maximum {n} files to select in total", "allowedFileTypes": "Allowed file types: {types}", "hideFilesButton": "Hide all files", "revealFilesButton": "Show all files", "removeFile": "Remove file", "requiredError": "You need to upload at least one file", "status": { "fileTypeError": "File with extension '.{extension}' is invalid", "fileSizeError": "File exceeds maximum allowed size of {size}", "maxFileSizeError": "Total size of all files exceeds maximum allowed of {size}", "maxCountError": "Number of files exceeds maximum allowed of {count}" } };
 const globalFAB = { "label": "Global actions" };
 const calendar = { "todayButton": { "label": "Today", "tooltip": "Jump to today" }, "calendarWeek": "CW", "calendarWeekButtonLabel": "Select calendar week {weekNumber}", "previousMonthButton": "Previous month", "nextMonthButton": "Next month" };
 const flyoutMenu = { "moreActions": "More actions", "toggleActions": { "click": "Click to toggle action visibility", "hover": "Hover/Focus to toggle action visibility" } };
@@ -1935,8 +1935,8 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1e = ["aria-modal", "aria-label", "role"];
-const _hoisted_2$U = {
+const _hoisted_1$1f = ["aria-modal", "aria-label", "role"];
+const _hoisted_2$V = {
   ref: "contentRef",
   class: "onyx-basic-dialog__content"
 };
@@ -1959,14 +1959,14 @@ function _sfc_render$1J(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode(
       "div",
-      _hoisted_2$U,
+      _hoisted_2$V,
       [
         renderSlot(_ctx.$slots, "default")
       ],
       512
       /* NEED_PATCH */
     )
-  ], 42, _hoisted_1$1e)) : createCommentVNode("v-if", true);
+  ], 42, _hoisted_1$1f)) : createCommentVNode("v-if", true);
 }
 const OnyxBasicDialog = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$1J], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBasicDialog/OnyxBasicDialog.vue"]]);
 const normalizedIncludes = (haystack, needle) => {
@@ -2089,7 +2089,7 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1d = ["href", "target", "rel"];
+const _hoisted_1$1e = ["href", "target", "rel"];
 function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: normalizeClass([
@@ -2114,7 +2114,7 @@ function _sfc_render$1H(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1
       /* STABLE */
     })) : createCommentVNode("v-if", true)
-  ], 10, _hoisted_1$1d);
+  ], 10, _hoisted_1$1e);
 }
 const OnyxRouterLink = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["render", _sfc_render$1H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRouterLink/OnyxRouterLink.vue"]]);
 const _sfc_main$1G = /* @__PURE__ */ defineComponent({
@@ -2256,7 +2256,7 @@ const _sfc_main$1F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1c = ["disabled", "type", "autofocus"];
+const _hoisted_1$1d = ["disabled", "type", "autofocus"];
 function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.linkProps ? (openBlock(), createBlock(
     $setup["OnyxRouterLink"],
@@ -2278,7 +2278,7 @@ function _sfc_render$1F(_ctx, _cache, $props, $setup, $data, $options) {
     autofocus: $setup.props.autofocus
   }, [
     renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1$1c));
+  ], 8, _hoisted_1$1d));
 }
 const ButtonOrLinkLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$1F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxButton/ButtonOrLinkLayout.vue"]]);
 const _sfc_main$1E = /* @__PURE__ */ defineComponent({
@@ -2360,8 +2360,8 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1b = { class: "onyx-alert-modal__content" };
-const _hoisted_2$T = { class: "onyx-alert-modal__headline" };
+const _hoisted_1$1c = { class: "onyx-alert-modal__content" };
+const _hoisted_2$U = { class: "onyx-alert-modal__headline" };
 const _hoisted_3$A = ["id"];
 const _hoisted_4$n = { class: "onyx-alert-modal__actions" };
 function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
@@ -2374,7 +2374,7 @@ function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$1b, [
+      createElementVNode("div", _hoisted_1$1c, [
         $setup.props.icon ? (openBlock(), createBlock(
           $setup["OnyxIcon"],
           mergeProps({
@@ -2386,7 +2386,7 @@ function _sfc_render$1D(_ctx, _cache, $props, $setup, $data, $options) {
           /* FULL_PROPS */
         )) : createCommentVNode("v-if", true),
         createElementVNode("div", null, [
-          createElementVNode("div", _hoisted_2$T, [
+          createElementVNode("div", _hoisted_2$U, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
             }, () => [
@@ -2527,7 +2527,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$1a = {
+const _hoisted_1$1b = {
   key: 1,
   class: "onyx-fab-button__label"
 };
@@ -2549,7 +2549,7 @@ function _sfc_render$1C(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       !$setup.props.hideLabel ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_1$1a,
+        _hoisted_1$1b,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -3029,7 +3029,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$19 = ["role", "aria-label"];
+const _hoisted_1$1a = ["role", "aria-label"];
 function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
@@ -3049,7 +3049,7 @@ function _sfc_render$1B(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle(!$setup.isSticky ? $setup.popoverStyles : $setup.stickyStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
-      ], 14, _hoisted_1$19)
+      ], 14, _hoisted_1$1a)
     ],
     4
     /* STYLE */
@@ -3098,8 +3098,8 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$18 = { class: "onyx-flyout-menu__list-header" };
-const _hoisted_2$S = { class: "onyx-flyout-menu__list-footer" };
+const _hoisted_1$19 = { class: "onyx-flyout-menu__list-header" };
+const _hoisted_2$T = { class: "onyx-flyout-menu__list-footer" };
 function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicPopover"], mergeProps($setup.mergeVueProps($setup.root, { ref: $setup.popover }), {
     class: "onyx-component onyx-flyout-menu",
@@ -3109,7 +3109,7 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $props.disabled
   }), createSlots({
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$18, [
+      createElementVNode("div", _hoisted_1$19, [
         renderSlot(_ctx.$slots, "header")
       ]),
       $setup.slots.options ? (openBlock(), createElementBlock(
@@ -3121,7 +3121,7 @@ function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
         16
         /* FULL_PROPS */
       )) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$S, [
+      createElementVNode("div", _hoisted_2$T, [
         renderSlot(_ctx.$slots, "footer")
       ])
     ]),
@@ -3339,12 +3339,12 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
 }
 const OnyxGlobalFAB = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", _sfc_render$1x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxGlobalFAB/OnyxGlobalFAB.vue"]]);
 const _sfc_main$1w = {};
-const _hoisted_1$17 = {
+const _hoisted_1$18 = {
   class: "onyx-component onyx-circle-spinner",
   viewBox: "0 0 50 50"
 };
 function _sfc_render$1w(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$17, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$18, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "circle",
       {
@@ -3361,9 +3361,9 @@ function _sfc_render$1w(_ctx, _cache) {
 }
 const OnyxCircleSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLoadingIndicator/OnyxCircleSpinner.vue"]]);
 const _sfc_main$1v = {};
-const _hoisted_1$16 = { class: "onyx-component onyx-loading-dots" };
+const _hoisted_1$17 = { class: "onyx-component onyx-loading-dots" };
 function _sfc_render$1v(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$16, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("div", _hoisted_1$17, [..._cache[0] || (_cache[0] = [
     createElementVNode(
       "span",
       { class: "onyx-loading-dots__center" },
@@ -3450,16 +3450,16 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$15 = {
+const _hoisted_1$16 = {
   ref: "rippleTriggerRef",
   class: "onyx-component onyx-ripple",
   "aria-hidden": "true"
 };
-const _hoisted_2$R = ["data-rippleid"];
+const _hoisted_2$S = ["data-rippleid"];
 function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "span",
-    _hoisted_1$15,
+    _hoisted_1$16,
     [
       (openBlock(true), createElementBlock(
         Fragment,
@@ -3474,7 +3474,7 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             "data-rippleid": key,
             onAnimationend: _cache[0] || (_cache[0] = ($event) => $setup.hideRipple($event.target))
-          }, null, 44, _hoisted_2$R);
+          }, null, 44, _hoisted_2$S);
         }),
         128
         /* KEYED_FRAGMENT */
@@ -3515,7 +3515,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$14 = { class: "onyx-button__label onyx-truncation-ellipsis" };
+const _hoisted_1$15 = { class: "onyx-button__label onyx-truncation-ellipsis" };
 function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
@@ -3553,7 +3553,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
       })) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_1$14,
+        _hoisted_1$15,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -3596,8 +3596,8 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$13 = { class: "onyx-info-card__content" };
-const _hoisted_2$Q = {
+const _hoisted_1$14 = { class: "onyx-info-card__content" };
+const _hoisted_2$R = {
   key: 3,
   class: "onyx-info-card__description onyx-text--small"
 };
@@ -3617,7 +3617,7 @@ function _sfc_render$1r(_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$13, [
+      createElementVNode("div", _hoisted_1$14, [
         $setup.props.headline ? (openBlock(), createBlock($setup["OnyxHeadline"], {
           key: 0,
           is: "h3",
@@ -3660,7 +3660,7 @@ function _sfc_render$1r(_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$Q, [
+        !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$R, [
           renderSlot(_ctx.$slots, "default")
         ])) : createCommentVNode("v-if", true),
         !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
@@ -3779,7 +3779,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$12 = {
+const _hoisted_1$13 = {
   key: 0,
   class: "onyx-component onyx-notifications",
   role: "presentation",
@@ -3787,7 +3787,7 @@ const _hoisted_1$12 = {
   open: ""
 };
 function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$12, [
+  return $setup.notificationProvider.notifications.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$13, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -3876,8 +3876,8 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$11 = { class: "onyx-toast-message__wrapper" };
-const _hoisted_2$P = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
+const _hoisted_1$12 = { class: "onyx-toast-message__wrapper" };
+const _hoisted_2$Q = { class: "onyx-toast-message__content onyx-truncation-ellipsis" };
 const _hoisted_3$y = { class: "onyx-toast-message__headline onyx-text" };
 const _hoisted_4$m = { class: "onyx-truncation-ellipsis" };
 const _hoisted_5$g = ["aria-label"];
@@ -3893,12 +3893,12 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.props.clickable ? $setup.props.headline : void 0
   }, {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$11, [
+      createElementVNode("div", _hoisted_1$12, [
         $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
           key: 0,
           icon: $setup.icon
         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_2$P, [
+        createElementVNode("div", _hoisted_2$Q, [
           createElementVNode("div", _hoisted_3$y, [
             createElementVNode(
               "span",
@@ -3997,7 +3997,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$10 = {
+const _hoisted_1$11 = {
   key: 0,
   class: "onyx-component onyx-toast",
   role: "presentation",
@@ -4005,7 +4005,7 @@ const _hoisted_1$10 = {
   open: ""
 };
 function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$10, [
+  return $setup.toastProvider.toasts.value.length ? (openBlock(), createElementBlock("dialog", _hoisted_1$11, [
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -4038,11 +4038,11 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$$ = {
+const _hoisted_1$10 = {
   key: 0,
   class: "onyx-app__nav"
 };
-const _hoisted_2$O = { class: "onyx-app__page" };
+const _hoisted_2$P = { class: "onyx-app__page" };
 function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
@@ -4050,10 +4050,10 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component onyx-app", { "onyx-app--horizontal": $setup.props.navBarAlignment === "left" }])
     },
     [
-      $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$$, [
+      $setup.slots.navBar ? (openBlock(), createElementBlock("div", _hoisted_1$10, [
         renderSlot(_ctx.$slots, "navBar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("div", _hoisted_2$O, [
+      createElementVNode("div", _hoisted_2$P, [
         renderSlot(_ctx.$slots, "default")
       ]),
       createVNode($setup["OnyxToast"]),
@@ -4099,8 +4099,8 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$_ = ["title", "aria-label"];
-const _hoisted_2$N = ["src", "alt"];
+const _hoisted_1$$ = ["title", "aria-label"];
+const _hoisted_2$O = ["src", "alt"];
 const _hoisted_3$x = {
   key: 0,
   class: "onyx-avatar__initials"
@@ -4122,7 +4122,7 @@ function _sfc_render$1l(_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$N)) : (openBlock(), createElementBlock(
+    }, null, 40, _hoisted_2$O)) : (openBlock(), createElementBlock(
       Fragment,
       { key: 1 },
       [
@@ -4141,7 +4141,7 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
       64
       /* STABLE_FRAGMENT */
     ))
-  ], 10, _hoisted_1$_);
+  ], 10, _hoisted_1$$);
 }
 const OnyxAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["render", _sfc_render$1l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue"]]);
 const _sfc_main$1k = /* @__PURE__ */ defineComponent({
@@ -4153,9 +4153,9 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Z = { class: "onyx-component onyx-avatar-stack" };
+const _hoisted_1$_ = { class: "onyx-component onyx-avatar-stack" };
 function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$Z, [
+  return openBlock(), createElementBlock("div", _hoisted_1$_, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -4224,8 +4224,8 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Y = { class: "onyx-bottom-bar__content onyx-grid-container" };
-const _hoisted_2$M = { class: "onyx-bottom-bar__content--left" };
+const _hoisted_1$Z = { class: "onyx-bottom-bar__content onyx-grid-container" };
+const _hoisted_2$N = { class: "onyx-bottom-bar__content--left" };
 const _hoisted_3$w = { class: "onyx-bottom-bar__content--right" };
 function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -4239,8 +4239,8 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$Y, [
-        createElementVNode("div", _hoisted_2$M, [
+      createElementVNode("div", _hoisted_1$Z, [
+        createElementVNode("div", _hoisted_2$N, [
           renderSlot(_ctx.$slots, "left")
         ]),
         createElementVNode("div", _hoisted_3$w, [
@@ -4498,8 +4498,8 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$X = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$L = {
+const _hoisted_1$Y = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$M = {
   key: 0,
   class: "onyx-menu-item__chevron"
 };
@@ -4529,7 +4529,7 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("span", null, [
               createElementVNode(
                 "span",
-                _hoisted_1$X,
+                _hoisted_1$Y,
                 toDisplayString($setup.props.label),
                 1
                 /* TEXT */
@@ -4543,7 +4543,7 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
               )
             ])
           ]),
-          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$L, [
+          $setup.hasChildren ? (openBlock(), createElementBlock("div", _hoisted_2$M, [
             createVNode($setup["OnyxIcon"], {
               icon: $setup.iconChevronRightSmall,
               size: "24px"
@@ -4782,8 +4782,8 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$W = ["aria-label", "aria-hidden"];
-const _hoisted_2$K = {
+const _hoisted_1$X = ["aria-label", "aria-hidden"];
+const _hoisted_2$L = {
   class: "onyx-breadcrumb__list onyx-grid-container",
   role: "menu"
 };
@@ -4799,7 +4799,7 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.t("breadcrumb.label"),
     "aria-hidden": $setup.props.skeleton
   }, [
-    createElementVNode("ol", _hoisted_2$K, [
+    createElementVNode("ol", _hoisted_2$L, [
       createVNode($setup["OnyxBreadcrumbItem"], {
         class: "onyx-breadcrumb__home",
         href: $setup.props.home?.link ?? "/",
@@ -4881,7 +4881,7 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
         /* FORWARDED */
       }, 8, ["injection-key"])
     ])
-  ], 10, _hoisted_1$W);
+  ], 10, _hoisted_1$X);
 }
 const OnyxBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$1c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxBreadcrumb/OnyxBreadcrumb.vue"]]);
 const BUTTON_TYPES = ["button", "submit", "reset"];
@@ -5073,7 +5073,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$V = { class: "onyx-tooltip--content" };
+const _hoisted_1$W = { class: "onyx-tooltip--content" };
 function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
@@ -5090,7 +5090,7 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
           style: $setup.tooltipStyles
         }),
         [
-          createElementVNode("div", _hoisted_1$V, [
+          createElementVNode("div", _hoisted_1$W, [
             $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 0,
               icon: $setup.props.icon,
@@ -5145,8 +5145,8 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$U = { class: "onyx-calendar-cell__header" };
-const _hoisted_2$J = { class: "onyx-calendar-cell__date-container" };
+const _hoisted_1$V = { class: "onyx-calendar-cell__header" };
+const _hoisted_2$K = { class: "onyx-calendar-cell__date-container" };
 const _hoisted_3$t = {
   key: 1,
   class: "onyx-calendar-cell__date"
@@ -5181,8 +5181,8 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }), {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$U, [
-            createElementVNode("div", _hoisted_2$J, [
+          createElementVNode("div", _hoisted_1$V, [
+            createElementVNode("div", _hoisted_2$K, [
               $setup.props.tooltipText ? (openBlock(), createBlock($setup["OnyxTooltip"], {
                 key: 0,
                 text: $setup.props.tooltipText,
@@ -5302,8 +5302,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$T = { class: "onyx-text--small onyx-truncation-ellipsis" };
-const _hoisted_2$I = { class: "onyx-text--small onyx-truncation-ellipsis" };
+const _hoisted_1$U = { class: "onyx-text--small onyx-truncation-ellipsis" };
+const _hoisted_2$J = { class: "onyx-text--small onyx-truncation-ellipsis" };
 function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
@@ -5327,7 +5327,7 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
           createElementVNode(
             "span",
-            _hoisted_1$T,
+            _hoisted_1$U,
             toDisplayString($setup.props.label),
             1
             /* TEXT */
@@ -5358,7 +5358,7 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_2$I,
+        _hoisted_2$J,
         toDisplayString($setup.props.label),
         1
         /* TEXT */
@@ -5485,8 +5485,8 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$S = { class: "onyx-calendar__header" };
-const _hoisted_2$H = { class: "control-container time-control-container" };
+const _hoisted_1$T = { class: "onyx-calendar__header" };
+const _hoisted_2$I = { class: "control-container time-control-container" };
 const _hoisted_3$s = { class: "control-container" };
 const _hoisted_4$k = { class: "onyx-calendar__body" };
 const _hoisted_5$f = ["abbr"];
@@ -5511,8 +5511,8 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component", "onyx-calendar", `onyx-calendar--${$setup.calendarSize}`, $setup.densityClass])
     },
     [
-      createElementVNode("div", _hoisted_1$S, [
-        createElementVNode("div", _hoisted_2$H, [
+      createElementVNode("div", _hoisted_1$T, [
+        createElementVNode("div", _hoisted_2$I, [
           createVNode($setup["OnyxSystemButton"], {
             label: $setup.t("calendar.todayButton.label"),
             class: "control-container__today-btn",
@@ -5883,16 +5883,16 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$R = { class: "onyx-component" };
-const _hoisted_2$G = {
+const _hoisted_1$S = { class: "onyx-component" };
+const _hoisted_2$H = {
   key: 0,
   ref: "targetRef"
 };
 function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$R, [
+  return openBlock(), createElementBlock("div", _hoisted_1$S, [
     !$setup.tooltipError || $setup.props.disabled ? (openBlock(), createElementBlock(
       "div",
-      _hoisted_2$G,
+      _hoisted_2$H,
       null,
       512
       /* NEED_PATCH */
@@ -5973,8 +5973,8 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Q = ["title"];
-const _hoisted_2$F = { class: "onyx-checkbox__container" };
+const _hoisted_1$R = ["title"];
+const _hoisted_2$G = { class: "onyx-checkbox__container" };
 const _hoisted_3$r = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
 function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
@@ -6002,7 +6002,7 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["onyx-component onyx-checkbox", [$setup.requiredTypeClass, $setup.densityClass]]),
         title: $setup.title
       }, [
-        createElementVNode("div", _hoisted_2$F, [
+        createElementVNode("div", _hoisted_2$G, [
           $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
             key: 0,
             class: "onyx-checkbox__loading",
@@ -6055,7 +6055,7 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_1$Q)
+      ], 10, _hoisted_1$R)
     ]),
     _: 1
     /* STABLE */
@@ -6132,9 +6132,9 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$P = { class: "onyx-component onyx-info-tooltip" };
+const _hoisted_1$Q = { class: "onyx-component onyx-info-tooltip" };
 function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$P, [
+  return openBlock(), createElementBlock("span", _hoisted_1$Q, [
     $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)
@@ -6251,8 +6251,8 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$O = ["disabled", "aria-label"];
-const _hoisted_2$E = {
+const _hoisted_1$P = ["disabled", "aria-label"];
+const _hoisted_2$F = {
   key: 0,
   class: "onyx-checkbox-group__label"
 };
@@ -6262,7 +6262,7 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $setup.disabled,
     "aria-label": $setup.props.label
   }, [
-    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$E, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$F, [
       createVNode($setup["OnyxHeadline"], { is: "h3" }, {
         default: withCtx(() => [
           createTextVNode(
@@ -6342,7 +6342,7 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$O);
+  ], 10, _hoisted_1$P);
 }
 const OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue"]]);
 const CODE_TABS_INJECTION_KEY = Symbol();
@@ -6378,8 +6378,8 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$N = ["disabled"];
-const _hoisted_2$D = { class: "onyx-tab__label" };
+const _hoisted_1$O = ["disabled"];
+const _hoisted_2$E = { class: "onyx-tab__label" };
 function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
@@ -6401,7 +6401,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         disabled: $setup.props.disabled
       }), [
-        createElementVNode("div", _hoisted_2$D, [
+        createElementVNode("div", _hoisted_2$E, [
           renderSlot(_ctx.$slots, "tab", {}, () => [
             createTextVNode(
               toDisplayString($setup.props.label),
@@ -6410,7 +6410,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
             )
           ])
         ])
-      ], 16, _hoisted_1$N)),
+      ], 16, _hoisted_1$O)),
       $setup.tabsContext?.panel.value ? (openBlock(), createBlock(Teleport, {
         key: 2,
         to: $setup.tabsContext?.panel.value,
@@ -6479,11 +6479,11 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$M = {
+const _hoisted_1$N = {
   key: 0,
   class: "onyx-code-tab__skeletons"
 };
-const _hoisted_2$C = {
+const _hoisted_2$D = {
   key: 0,
   class: "onyx-code-tab__language onyx-text--small"
 };
@@ -6508,7 +6508,7 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     default: withCtx(() => [
-      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
+      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
         (openBlock(), createElementBlock(
           Fragment,
           null,
@@ -6538,7 +6538,7 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           $setup.props.language ? (openBlock(), createElementBlock(
             "span",
-            _hoisted_2$C,
+            _hoisted_2$D,
             toDisplayString($setup.props.language),
             1
             /* TEXT */
@@ -6592,8 +6592,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$L = { class: "onyx-tabs__header" };
-const _hoisted_2$B = {
+const _hoisted_1$M = { class: "onyx-tabs__header" };
+const _hoisted_2$C = {
   key: 0,
   class: "onyx-tabs__actions"
 };
@@ -6610,7 +6610,7 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$L, [
+      createElementVNode("div", _hoisted_1$M, [
         createElementVNode(
           "div",
           mergeProps($setup.headless.elements.tablist.value, { class: "onyx-tabs__tablist" }),
@@ -6620,7 +6620,7 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
           16
           /* FULL_PROPS */
         ),
-        $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2$B, [
+        $setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2$C, [
           renderSlot(_ctx.$slots, "actions")
         ])) : createCommentVNode("v-if", true)
       ])
@@ -6729,8 +6729,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$K = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
-const _hoisted_2$A = {
+const _hoisted_1$L = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
+const _hoisted_2$B = {
   key: 0,
   class: "onyx-empty__buttons"
 };
@@ -6747,10 +6747,10 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
           size: "48px"
         }, null, 8, ["icon"])
       ]),
-      createElementVNode("div", _hoisted_1$K, [
+      createElementVNode("div", _hoisted_1$L, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$A, [
+      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$B, [
         renderSlot(_ctx.$slots, "buttons")
       ])) : createCommentVNode("v-if", true)
     ],
@@ -6790,11 +6790,11 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$J = {
+const _hoisted_1$K = {
   key: 0,
   class: "onyx-table-wrapper__top"
 };
-const _hoisted_2$z = ["id"];
+const _hoisted_2$A = ["id"];
 const _hoisted_3$q = { class: "onyx-table-wrapper__actions" };
 const _hoisted_4$j = ["tabindex"];
 const _hoisted_5$e = ["aria-labelledby"];
@@ -6804,7 +6804,7 @@ const _hoisted_7$6 = {
   class: "onyx-table__header"
 };
 const _hoisted_8$5 = { key: 0 };
-const _hoisted_9$1 = ["colspan"];
+const _hoisted_9$2 = ["colspan"];
 const _hoisted_10$1 = { class: "onyx-table__empty" };
 const _hoisted_11 = { colspan: "99" };
 const _hoisted_12 = { class: "onyx-table__empty-content" };
@@ -6820,10 +6820,10 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
       style: normalizeStyle($setup.style)
     },
     [
-      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$J, [
+      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$K, [
         createElementVNode("div", { id: $setup.headlineId }, [
           renderSlot(_ctx.$slots, "headline")
-        ], 8, _hoisted_2$z),
+        ], 8, _hoisted_2$A),
         createElementVNode("div", _hoisted_3$q, [
           renderSlot(_ctx.$slots, "actions")
         ])
@@ -6871,7 +6871,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
                     colspan: group.span,
                     scope: "colgroup",
                     class: "onyx-table__colgroup"
-                  }, toDisplayString(group.header), 9, _hoisted_9$1);
+                  }, toDisplayString(group.header), 9, _hoisted_9$2);
                 }),
                 128
                 /* KEYED_FRAGMENT */
@@ -7103,8 +7103,8 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$I = ["autofocus", "placeholder", "aria-label"];
-const _hoisted_2$y = ["aria-label"];
+const _hoisted_1$J = ["autofocus", "placeholder", "aria-label"];
+const _hoisted_2$z = ["aria-label"];
 function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
@@ -7124,7 +7124,7 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
         size: "1"
       }, $setup.restAttrs, {
         "aria-label": $setup.props.label
-      }), null, 16, _hoisted_1$I), [
+      }), null, 16, _hoisted_1$J), [
         [vModelText, $setup.modelValue]
       ]),
       createElementVNode("button", {
@@ -7137,7 +7137,7 @@ function _sfc_render$W(_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$y),
+      ], 40, _hoisted_2$z),
       createVNode($setup["OnyxIcon"], {
         class: "onyx-mini-search__icon",
         icon: $setup.iconSearch
@@ -7165,17 +7165,17 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$H = { class: "onyx-component onyx-data-grid-header-cell" };
-const _hoisted_2$x = { class: "onyx-data-grid-header-cell__label" };
+const _hoisted_1$I = { class: "onyx-component onyx-data-grid-header-cell" };
+const _hoisted_2$y = { class: "onyx-data-grid-header-cell__label" };
 const _hoisted_3$p = {
   key: 0,
   class: "onyx-data-grid-header-cell__actions"
 };
 function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$H, [
+  return openBlock(), createElementBlock("div", _hoisted_1$I, [
     createElementVNode(
       "span",
-      _hoisted_2$x,
+      _hoisted_2$y,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
@@ -7730,8 +7730,8 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$G = ["aria-label"];
-const _hoisted_2$w = ["aria-label", "disabled"];
+const _hoisted_1$H = ["aria-label"];
+const _hoisted_2$x = ["aria-label", "disabled"];
 const _hoisted_3$o = ["aria-label", "disabled", "onClick"];
 const _hoisted_4$i = ["aria-label"];
 const _hoisted_5$d = ["aria-label", "disabled"];
@@ -7764,7 +7764,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("update:modelValue", $setup.props.modelValue - 1))
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronLeftSmall }, null, 8, ["icon"])
-    ], 8, _hoisted_2$w),
+    ], 8, _hoisted_2$x),
     (openBlock(true), createElementBlock(
       Fragment,
       null,
@@ -7824,7 +7824,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
     ], 8, _hoisted_5$d)
-  ], 10, _hoisted_1$G));
+  ], 10, _hoisted_1$H));
 }
 const OnyxInlinePagination = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxInlinePagination.vue"]]);
 const useErrorClass = (showError) => computed(() => {
@@ -7850,7 +7850,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$F = {
+const _hoisted_1$G = {
   class: /* @__PURE__ */ normalizeClass(["onyx-truncation-ellipsis"])
 };
 function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7860,7 +7860,7 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       createElementVNode(
         "span",
-        _hoisted_1$F,
+        _hoisted_1$G,
         toDisplayString($setup.props.messages.shortMessage),
         1
         /* TEXT */
@@ -7952,11 +7952,11 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$F = {
   key: 0,
   class: "onyx-form-element__label onyx-text--small"
 };
-const _hoisted_2$v = ["for"];
+const _hoisted_2$w = ["for"];
 const _hoisted_3$n = {
   key: 1,
   class: "onyx-form-element__footer onyx-text--small"
@@ -7974,11 +7974,11 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
+      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$F, [
         createElementVNode("label", {
           for: $setup.props.id,
           class: "onyx-truncation-ellipsis"
-        }, toDisplayString($setup.props.label), 9, _hoisted_2$v),
+        }, toDisplayString($setup.props.label), 9, _hoisted_2$w),
         $setup.props.required ? (openBlock(), createElementBlock(
           "span",
           {
@@ -8133,8 +8133,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$D = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"];
-const _hoisted_2$u = ["aria-label", "title", "disabled"];
+const _hoisted_1$E = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"];
+const _hoisted_2$v = ["aria-label", "title", "disabled"];
 function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
@@ -8200,7 +8200,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
               autofocus: $setup.props.autofocus,
               autocomplete: "off",
               onKeydown: $setup.blockTyping
-            }), null, 16, _hoisted_1$D), [
+            }), null, 16, _hoisted_1$E), [
               [$setup["vCustomValidity"]]
             ]),
             $setup.props.textMode === "preview" && $setup.selectionCount > 0 ? (openBlock(), createBlock($setup["OnyxTooltip"], {
@@ -8239,7 +8239,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
               disabled: $setup.disabled || $setup.props.readonly || $setup.props.loading
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronDownUp }, null, 8, ["icon"])
-            ], 8, _hoisted_2$u),
+            ], 8, _hoisted_2$v),
             !$setup.props.hideSuccessIcon && $setup.successMessages ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 2,
               class: "onyx-select-input__check-icon",
@@ -8276,7 +8276,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$C = ["checked", "aria-labelledby", "disabled", "indeterminate"];
+const _hoisted_1$D = ["checked", "aria-labelledby", "disabled", "indeterminate"];
 function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({ class: "onyx-component onyx-select-option" }, $setup.listItemProps, {
     checked: !!_ctx.$attrs["aria-checked"],
@@ -8294,7 +8294,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
         tabindex: "-1",
         class: "onyx-select-option__checkbox",
         type: "checkbox"
-      }, null, 8, _hoisted_1$C)) : createCommentVNode("v-if", true),
+      }, null, 8, _hoisted_1$D)) : createCommentVNode("v-if", true),
       $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 1,
         icon: $setup.props.icon
@@ -8586,11 +8586,11 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$B = {
+const _hoisted_1$C = {
   ref: "selectRef",
   class: "onyx-component onyx-select-wrapper"
 };
-const _hoisted_2$t = {
+const _hoisted_2$u = {
   class: "onyx-select__wrapper",
   tabindex: "-1"
 };
@@ -8623,7 +8623,7 @@ const _hoisted_8$4 = {
 function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
-    _hoisted_1$B,
+    _hoisted_1$C,
     [
       createVNode($setup["OnyxBasicPopover"], {
         class: normalizeClass($setup.densityClass),
@@ -8642,7 +8642,7 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
           }), null, 16, ["show-focus", "autofocus"])
         ]),
         content: withCtx(() => [
-          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$t, [
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$u, [
             $setup.props.withSearch ? (openBlock(), createBlock($setup["OnyxMiniSearch"], mergeProps({
               key: 0,
               ref: "miniSearchRef",
@@ -8866,8 +8866,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$A = ["aria-label"];
-const _hoisted_2$s = { class: "onyx-pagination__count" };
+const _hoisted_1$B = ["aria-label"];
+const _hoisted_2$t = { class: "onyx-pagination__count" };
 const _hoisted_3$l = ["aria-label", "disabled"];
 const _hoisted_4$f = ["aria-label", "disabled"];
 function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
@@ -8901,7 +8901,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["search-term", "label", "list-label", "options", "model-value", "value-label", "disabled"]),
     createElementVNode(
       "div",
-      _hoisted_2$s,
+      _hoisted_2$t,
       toDisplayString($setup.t("pagination.ofPages", { n: $setup.props.pages, pages: $setup.n($setup.props.pages, "decimal") })),
       1
       /* TEXT */
@@ -8924,7 +8924,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
     ], 8, _hoisted_4$f)
-  ], 14, _hoisted_1$A));
+  ], 14, _hoisted_1$B));
 }
 const OnyxSelectPagination = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$O], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxSelectPagination.vue"]]);
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
@@ -10050,8 +10050,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$z = { class: "onyx-datepicker__wrapper" };
-const _hoisted_2$r = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"];
+const _hoisted_1$A = { class: "onyx-datepicker__wrapper" };
+const _hoisted_2$s = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"];
 function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
@@ -10081,7 +10081,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$z, [
+          createElementVNode("div", _hoisted_1$A, [
             $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
               key: 0,
               class: "onyx-datepicker__loading",
@@ -10103,7 +10103,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
               title: $setup.props.hideLabel ? $setup.props.label : void 0,
               min: $setup.getNormalizedDate($setup.props.min),
               max: $setup.getNormalizedDate($setup.props.max)
-            }, $setup.restAttrs), null, 16, _hoisted_2$r)), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$s)), [
               [vModelDynamic, $setup.value],
               [$setup["vCustomValidity"]]
             ])
@@ -10153,8 +10153,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$y = { class: "onyx-dialog__header" };
-const _hoisted_2$q = { class: "onyx-dialog__headline" };
+const _hoisted_1$z = { class: "onyx-dialog__header" };
+const _hoisted_2$r = { class: "onyx-dialog__headline" };
 const _hoisted_3$k = { class: "onyx-dialog__headline-content" };
 const _hoisted_4$e = { class: "onyx-dialog__body" };
 const _hoisted_5$b = {
@@ -10171,8 +10171,8 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "trigger", { trigger })
     ]),
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$y, [
-        createElementVNode("div", _hoisted_2$q, [
+      createElementVNode("div", _hoisted_1$z, [
+        createElementVNode("div", _hoisted_2$r, [
           createElementVNode("div", _hoisted_3$k, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
@@ -10305,13 +10305,13 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$x = ["aria-orientation"];
+const _hoisted_1$y = ["aria-orientation"];
 function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["onyx-component onyx-separator", { "onyx-separator--vertical": $setup.isVertical }]),
     role: "separator",
     "aria-orientation": $setup.props.orientation
-  }, null, 10, _hoisted_1$x);
+  }, null, 10, _hoisted_1$y);
 }
 const OnyxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSeparator/OnyxSeparator.vue"]]);
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
@@ -10403,8 +10403,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$w = { class: "onyx-input__wrapper" };
-const _hoisted_2$p = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "maxlength", "minlength", "aria-label", "title"];
+const _hoisted_1$x = { class: "onyx-input__wrapper" };
+const _hoisted_2$q = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "maxlength", "minlength", "aria-label", "title"];
 const _hoisted_3$j = ["aria-label", "title"];
 function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
@@ -10435,7 +10435,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$w, [
+          createElementVNode("div", _hoisted_1$x, [
             renderSlot(_ctx.$slots, "leading"),
             $setup.slots.leading ? (openBlock(), createBlock($setup["OnyxSeparator"], {
               key: 0,
@@ -10466,7 +10466,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
               minlength: $setup.props.minlength,
               "aria-label": $setup.props.hideLabel ? $setup.props.label : void 0,
               title: $setup.props.hideLabel ? $setup.props.label : void 0
-            }, $setup.restAttrs), null, 16, _hoisted_2$p), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$q), [
               [vModelDynamic, $setup.modelValue],
               [$setup["vCustomValidity"]]
             ]),
@@ -10589,8 +10589,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$v = { class: "onyx-global-search__footer onyx-text--small" };
-const _hoisted_2$o = { class: "onyx-global-search__shortcut" };
+const _hoisted_1$w = { class: "onyx-global-search__footer onyx-text--small" };
+const _hoisted_2$p = { class: "onyx-global-search__shortcut" };
 const _hoisted_3$i = { class: "onyx-global-search__shortcut-label" };
 const _hoisted_4$d = { class: "onyx-global-search__shortcut" };
 const _hoisted_5$a = { class: "onyx-global-search__shortcut-label" };
@@ -10639,9 +10639,9 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       withDirectives(createElementVNode(
         "div",
-        _hoisted_1$v,
+        _hoisted_1$w,
         [
-          createElementVNode("span", _hoisted_2$o, [
+          createElementVNode("span", _hoisted_2$p, [
             _cache[2] || (_cache[2] = createElementVNode(
               "kbd",
               null,
@@ -10733,8 +10733,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$u = { class: "onyx-global-search-option__content" };
-const _hoisted_2$n = { class: "onyx-truncation-ellipsis" };
+const _hoisted_1$v = { class: "onyx-global-search-option__content" };
+const _hoisted_2$o = { class: "onyx-truncation-ellipsis" };
 const _hoisted_3$h = {
   key: 0,
   class: "onyx-global-search-option__trailing"
@@ -10748,7 +10748,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component", "onyx-global-search-option-skeleton", "onyx-text", $setup.densityClass])
     },
     [
-      createElementVNode("div", _hoisted_1$u, [
+      createElementVNode("div", _hoisted_1$v, [
         createVNode($setup["OnyxSkeleton"], { class: "onyx-global-search-option-skeleton__icon" }),
         createVNode($setup["OnyxSkeleton"], { class: "onyx-global-search-option-skeleton__label" })
       ])
@@ -10786,7 +10786,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
             }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
             createElementVNode(
               "span",
-              _hoisted_2$n,
+              _hoisted_2$o,
               toDisplayString($setup.props.label),
               1
               /* TEXT */
@@ -10828,7 +10828,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$t = { "aria-hidden": "true" };
+const _hoisted_1$u = { "aria-hidden": "true" };
 function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "ul",
@@ -10836,7 +10836,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
       class: ["onyx-component", "onyx-global-search-group", $setup.densityClass]
     }, $setup.context?.headless.elements.group.value({ label: $setup.props.label })),
     [
-      createElementVNode("li", _hoisted_1$t, [
+      createElementVNode("li", _hoisted_1$u, [
         createVNode($setup["OnyxHeadline"], {
           is: "h4",
           class: "onyx-global-search-group__headline"
@@ -10913,8 +10913,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$s = ["src", "alt"];
-const _hoisted_2$m = ["src", "alt"];
+const _hoisted_1$t = ["src", "alt"];
+const _hoisted_2$n = ["src", "alt"];
 const _hoisted_3$g = { class: "onyx-image__alt onyx-text--small" };
 function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -10941,7 +10941,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
             src: $setup.imageSrc.light,
             alt: $setup.props.alt,
             onError: _cache[0] || (_cache[0] = ($event) => $setup.isError = true)
-          }), null, 16, _hoisted_1$s),
+          }), null, 16, _hoisted_1$t),
           $setup.imageSrc.dark ? (openBlock(), createElementBlock("img", mergeProps({
             key: 0,
             class: "onyx-image__source onyx-image__source--dark"
@@ -10949,7 +10949,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
             src: $setup.imageSrc.dark,
             alt: $setup.props.alt,
             onError: _cache[1] || (_cache[1] = ($event) => $setup.isError = true)
-          }), null, 16, _hoisted_2$m)) : createCommentVNode("v-if", true),
+          }), null, 16, _hoisted_2$n)) : createCommentVNode("v-if", true),
           $setup.isError ? (openBlock(), createElementBlock(
             "div",
             mergeProps({
@@ -11047,12 +11047,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$r = { class: "onyx-component onyx-mobile-nav-button" };
-const _hoisted_2$l = ["aria-label", "disabled"];
+const _hoisted_1$s = { class: "onyx-component onyx-mobile-nav-button" };
+const _hoisted_2$m = ["aria-label", "disabled"];
 const _hoisted_3$f = { class: "onyx-mobile-nav-button__flyout" };
 const _hoisted_4$c = { class: "onyx-mobile-nav-button__menu" };
 function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$r, [
+  return openBlock(), createElementBlock("div", _hoisted_1$s, [
     createElementVNode("button", {
       type: "button",
       class: normalizeClass(["onyx-mobile-nav-button__trigger", { "onyx-mobile-nav-button__trigger--active": $setup.props.open }]),
@@ -11063,7 +11063,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode($setup["OnyxIcon"], {
         icon: $setup.props.open ? $setup.iconX : $setup.props.icon
       }, null, 8, ["icon"])
-    ], 10, _hoisted_2$l),
+    ], 10, _hoisted_2$m),
     withDirectives(createElementVNode(
       "div",
       _hoisted_3$f,
@@ -11128,8 +11128,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$q = { class: "onyx-modal__header" };
-const _hoisted_2$k = { class: "onyx-modal__headline" };
+const _hoisted_1$r = { class: "onyx-modal__header" };
+const _hoisted_2$l = { class: "onyx-modal__headline" };
 const _hoisted_3$e = { class: "onyx-modal__headline-content" };
 const _hoisted_4$b = ["id"];
 const _hoisted_5$9 = { class: "onyx-modal__body" };
@@ -11145,8 +11145,8 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$q, [
-        createElementVNode("div", _hoisted_2$k, [
+      createElementVNode("div", _hoisted_1$r, [
+        createElementVNode("div", _hoisted_2$l, [
           createElementVNode("div", _hoisted_3$e, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
@@ -11211,8 +11211,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$p = ["src", "alt"];
-const _hoisted_2$j = {
+const _hoisted_1$q = ["src", "alt"];
+const _hoisted_2$k = {
   key: 1,
   class: "onyx-text-small onyx-truncation-ellipsis"
 };
@@ -11230,10 +11230,10 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
           class: "onyx-nav-app-area__logo",
           width: "24",
           height: "24"
-        }, null, 8, _hoisted_1$p)) : createCommentVNode("v-if", true),
+        }, null, 8, _hoisted_1$q)) : createCommentVNode("v-if", true),
         $setup.props.appName ? (openBlock(), createElementBlock(
           "span",
-          _hoisted_2$j,
+          _hoisted_2$k,
           toDisplayString($setup.props.appName),
           1
           /* TEXT */
@@ -11279,8 +11279,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$o = ["id"];
-const _hoisted_2$i = ["autofocus", "value", "checked", "aria-label"];
+const _hoisted_1$p = ["id"];
+const _hoisted_2$j = ["autofocus", "value", "checked", "aria-label"];
 const _hoisted_3$d = { class: "onyx-select-dialog__label" };
 const _hoisted_4$a = {
   key: 0,
@@ -11356,7 +11356,7 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
                                   checked: $setup.props.modelValue === option.value,
                                   "aria-label": option.label,
                                   required: ""
-                                }, null, 8, _hoisted_2$i)
+                                }, null, 8, _hoisted_2$j)
                               ]),
                               _: 2
                               /* DYNAMIC */
@@ -11395,7 +11395,7 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
           32
           /* NEED_HYDRATION */
         )
-      ], 40, _hoisted_1$o)
+      ], 40, _hoisted_1$p)
     ]),
     _: 2
     /* DYNAMIC */
@@ -11493,7 +11493,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$n = { class: "onyx-color-scheme-menu-item__value" };
+const _hoisted_1$o = { class: "onyx-color-scheme-menu-item__value" };
 function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxMenuItem"], {
     class: "onyx-component onyx-color-scheme-menu-item",
@@ -11509,7 +11509,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
         ),
         createElementVNode(
           "span",
-          _hoisted_1$n,
+          _hoisted_1$o,
           toDisplayString($setup.t(`colorScheme.${$setup.props.modelValue}.label`)),
           1
           /* TEXT */
@@ -11552,7 +11552,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$m = { class: "onyx-language-menu-item__value" };
+const _hoisted_1$n = { class: "onyx-language-menu-item__value" };
 function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxMenuItem"], {
     class: "onyx-component onyx-language-menu-item",
@@ -11568,7 +11568,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
         ),
         createElementVNode(
           "span",
-          _hoisted_1$m,
+          _hoisted_1$n,
           toDisplayString($setup.currentValueLabel),
           1
           /* TEXT */
@@ -11695,8 +11695,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$l = { class: "onyx-nav-item-wrapper__controls" };
-const _hoisted_2$h = {
+const _hoisted_1$m = { class: "onyx-nav-item-wrapper__controls" };
+const _hoisted_2$i = {
   role: "menu",
   class: "onyx-nav-item-wrapper__mobile-children"
 };
@@ -11716,7 +11716,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
           }
         }, $setup.rootAttrs),
         [
-          createElementVNode("div", _hoisted_1$l, [
+          createElementVNode("div", _hoisted_1$m, [
             createVNode($setup["OnyxButton"], {
               label: $setup.t("back"),
               mode: "plain",
@@ -11744,7 +11744,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
               /* STABLE_FRAGMENT */
             )) : createCommentVNode("v-if", true)
           ]),
-          createElementVNode("ul", _hoisted_2$h, [
+          createElementVNode("ul", _hoisted_2$i, [
             renderSlot(_ctx.$slots, "children")
           ])
         ],
@@ -11945,8 +11945,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$k = ["aria-label"];
-const _hoisted_2$g = {
+const _hoisted_1$l = ["aria-label"];
+const _hoisted_2$h = {
   key: 0,
   class: "onyx-timer__label"
 };
@@ -11959,7 +11959,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     !$setup.props.hideLabel ? (openBlock(), createElementBlock(
       "span",
-      _hoisted_2$g,
+      _hoisted_2$h,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
@@ -11968,7 +11968,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
       datetime: $setup.timeToDurationString($setup.timeLeft),
       class: "onyx-timer__time"
     }, toDisplayString($setup.formattedTime), 9, _hoisted_3$c)
-  ], 8, _hoisted_1$k);
+  ], 8, _hoisted_1$l);
 }
 const OnyxTimer = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxTimer/OnyxTimer.vue"]]);
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
@@ -11996,10 +11996,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$j = { class: "onyx-component" };
-const _hoisted_2$f = { class: "onyx-user-menu__footer onyx-text--small" };
+const _hoisted_1$k = { class: "onyx-component" };
+const _hoisted_2$g = { class: "onyx-user-menu__footer onyx-text--small" };
 function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$j, [
+  return openBlock(), createElementBlock("div", _hoisted_1$k, [
     $setup.props.isMobile ? (openBlock(), createElementBlock(
       Fragment,
       { key: 0 },
@@ -12043,7 +12043,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
       !!$setup.slots.footer ? {
         name: "footer",
         fn: withCtx(() => [
-          createElementVNode("div", _hoisted_2$f, [
+          createElementVNode("div", _hoisted_2$g, [
             renderSlot(_ctx.$slots, "footer")
           ])
         ]),
@@ -12087,8 +12087,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$i = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$e = { class: "onyx-user-menu__header" };
+const _hoisted_1$j = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$f = { class: "onyx-user-menu__header" };
 const _hoisted_3$b = { class: "onyx-truncation-ellipsis" };
 const _hoisted_4$9 = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" };
 const _hoisted_5$8 = {
@@ -12121,7 +12121,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
           ),
           createElementVNode(
             "span",
-            _hoisted_1$i,
+            _hoisted_1$j,
             toDisplayString($setup.props.fullName),
             1
             /* TEXT */
@@ -12132,7 +12132,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
       )
     ]),
     header: withCtx(() => [
-      createElementVNode("div", _hoisted_2$e, [
+      createElementVNode("div", _hoisted_2$f, [
         createVNode(
           $setup["OnyxAvatar"],
           mergeProps($setup.avatar, { size: "48px" }),
@@ -12246,8 +12246,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$h = { class: "onyx-nav-bar__content onyx-grid-container" };
-const _hoisted_2$d = {
+const _hoisted_1$i = { class: "onyx-nav-bar__content onyx-grid-container" };
+const _hoisted_2$e = {
   key: 0,
   class: "onyx-nav-bar__mobile-page onyx-truncation-ellipsis"
 };
@@ -12274,8 +12274,8 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component onyx-nav-bar", { "onyx-nav-bar--mobile": $setup.actualIsMobile }])
     },
     [
-      createElementVNode("div", _hoisted_1$h, [
-        $setup.actualIsMobile && $setup.slots.mobileActivePage && !$setup.isBurgerOpen && !$setup.isContextOpen ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
+      createElementVNode("div", _hoisted_1$i, [
+        $setup.actualIsMobile && $setup.slots.mobileActivePage && !$setup.isBurgerOpen && !$setup.isContextOpen ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
           renderSlot(_ctx.$slots, "mobileActivePage")
         ])) : $setup.props.appName || $setup.props.logoUrl || $setup.slots.appArea ? (openBlock(), createBlock($setup["OnyxNavAppArea"], mergeProps({
           key: 1,
@@ -12499,11 +12499,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$g = {
+const _hoisted_1$h = {
   key: 0,
   class: "onyx-notification-card-skeleton"
 };
-const _hoisted_2$c = {
+const _hoisted_2$d = {
   key: 1,
   class: "onyx-notification-card__content"
 };
@@ -12523,7 +12523,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component", "onyx-notification-card", $setup.densityClass])
     },
     [
-      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
+      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
         createVNode($setup["OnyxSkeleton"], { class: "onyx-notification-card-skeleton__header" }),
         (openBlock(), createElementBlock(
           Fragment,
@@ -12537,7 +12537,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         ))
-      ])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2$d, [
         createElementVNode("div", null, [
           createElementVNode("div", _hoisted_3$9, [
             createElementVNode("div", _hoisted_4$7, [
@@ -12622,9 +12622,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$f = { class: "onyx-component onyx-notification-dot" };
+const _hoisted_1$g = { class: "onyx-component onyx-notification-dot" };
 function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$f, [
+  return openBlock(), createElementBlock("div", _hoisted_1$g, [
     renderSlot(_ctx.$slots, "default"),
     !$setup.props.hidden ? (openBlock(), createBlock($setup["OnyxBadge"], {
       key: 0,
@@ -12652,11 +12652,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   key: 0,
   class: "onyx-page__sidebar"
 };
-const _hoisted_2$b = { class: "onyx-page__main" };
+const _hoisted_2$c = { class: "onyx-page__main" };
 const _hoisted_3$8 = {
   key: 1,
   class: "onyx-page__sidebar onyx-page__sidebar--right"
@@ -12676,10 +12676,10 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
       ]])
     },
     [
-      $setup.slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
+      $setup.slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
         renderSlot(_ctx.$slots, "sidebar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("main", _hoisted_2$b, [
+      createElementVNode("main", _hoisted_2$c, [
         createElementVNode(
           "div",
           {
@@ -12730,8 +12730,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$d = ["disabled"];
-const _hoisted_2$a = { class: "onyx-progress-item__indicator" };
+const _hoisted_1$e = ["disabled"];
+const _hoisted_2$b = { class: "onyx-progress-item__indicator" };
 const _hoisted_3$7 = { class: "onyx-progress-item__label" };
 function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
@@ -12749,7 +12749,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     type: "button",
     disabled: $setup.props.disabled
   }, [
-    createElementVNode("span", _hoisted_2$a, [
+    createElementVNode("span", _hoisted_2$b, [
       $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 0,
         icon: $setup.icon
@@ -12778,7 +12778,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
         )
       ])
     ])
-  ], 10, _hoisted_1$d));
+  ], 10, _hoisted_1$e));
 }
 const OnyxProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressItem/OnyxProgressItem.vue"]]);
 const PROGRESS_ITEM_STATUS = [
@@ -12843,7 +12843,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$c = { class: "onyx-progress-steps__scroll-container" };
+const _hoisted_1$d = { class: "onyx-progress-steps__scroll-container" };
 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
@@ -12856,7 +12856,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$c, [
+      createElementVNode("div", _hoisted_1$d, [
         (openBlock(true), createElementBlock(
           Fragment,
           null,
@@ -12932,7 +12932,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$b = ["required", "name", "value", "checked", "disabled", "autofocus"];
+const _hoisted_1$c = ["required", "name", "value", "checked", "disabled", "autofocus"];
 function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
@@ -12973,7 +12973,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
             checked: $setup.props.checked,
             disabled: $setup.disabled,
             autofocus: $setup.props.autofocus
-          }, $setup.restAttrs), null, 16, _hoisted_1$b)), [
+          }, $setup.restAttrs), null, 16, _hoisted_1$c)), [
             [$setup["vCustomValidity"]]
           ]),
           createElementVNode(
@@ -13042,8 +13042,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$a = ["disabled", "aria-label"];
-const _hoisted_2$9 = {
+const _hoisted_1$b = ["disabled", "aria-label"];
+const _hoisted_2$a = {
   key: 0,
   class: "onyx-radio-group__label"
 };
@@ -13054,7 +13054,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     role: "radiogroup",
     "aria-label": $setup.props.label
   }, [
-    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$9, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$a, [
       createVNode($setup["OnyxHeadline"], {
         is: "h3",
         class: normalizeClass($setup.requiredMarkerClass)
@@ -13121,7 +13121,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$a);
+  ], 10, _hoisted_1$b);
 }
 const OnyxRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue"]]);
 const LINK_TARGETS = ["_self", "_blank", "_parent", "_top"];
@@ -13152,8 +13152,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$9 = ["id", "name", "value", "disabled", "aria-label", "autofocus", "checked"];
-const _hoisted_2$8 = ["for"];
+const _hoisted_1$a = ["id", "name", "value", "disabled", "aria-label", "autofocus", "checked"];
+const _hoisted_2$9 = ["for"];
 const _hoisted_3$6 = {
   key: 1,
   class: "onyx-segmented-control-element__text"
@@ -13178,7 +13178,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-label": $setup.props.label,
             autofocus: $setup.props.autofocus,
             checked: $setup.props.checked
-          }), null, 16, _hoisted_1$9)
+          }), null, 16, _hoisted_1$a)
         ]),
         _: 1
         /* STABLE */
@@ -13199,7 +13199,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
           1
           /* TEXT */
         )) : createCommentVNode("v-if", true)
-      ], 8, _hoisted_2$8)
+      ], 8, _hoisted_2$9)
     ],
     16
     /* FULL_PROPS */
@@ -13414,8 +13414,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$8 = ["aria-label"];
-const _hoisted_2$7 = {
+const _hoisted_1$9 = ["aria-label"];
+const _hoisted_2$8 = {
   key: 0,
   class: "onyx-sidebar__header"
 };
@@ -13439,7 +13439,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.props.label,
     style: normalizeStyle($setup.widthStyle)
   }, [
-    !!$setup.slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$7, [
+    !!$setup.slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$8, [
       renderSlot(_ctx.$slots, "header")
     ])) : createCommentVNode("v-if", true),
     createElementVNode("div", _hoisted_3$5, [
@@ -13452,7 +13452,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
       key: 2,
       element: $setup.sidebarElement
     }, $setup.resizeHandleProps), null, 16, ["element"])) : createCommentVNode("v-if", true)
-  ], 14, _hoisted_1$8)) : (openBlock(), createBlock($setup["OnyxModal"], mergeProps({ key: 1 }, $setup.props.temporary, {
+  ], 14, _hoisted_1$9)) : (openBlock(), createBlock($setup["OnyxModal"], mergeProps({ key: 1 }, $setup.props.temporary, {
     ref: "modalRef",
     open: $setup.isModalOpen,
     "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.isModalOpen = $event),
@@ -13629,8 +13629,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$7 = { class: "onyx-stepper__wrapper" };
-const _hoisted_2$6 = ["disabled", "aria-label"];
+const _hoisted_1$8 = { class: "onyx-stepper__wrapper" };
+const _hoisted_2$7 = ["disabled", "aria-label"];
 const _hoisted_3$4 = ["id", "aria-label", "autofocus", "disabled", "min", "max", "name", "placeholder", "readonly", "required", "step", "title"];
 const _hoisted_4$4 = {
   class: "onyx-stepper__display",
@@ -13666,7 +13666,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
         "error-messages": $setup.errorMessages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$7, [
+          createElementVNode("div", _hoisted_1$8, [
             !$setup.props.hideButtons ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
@@ -13677,7 +13677,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: _cache[0] || (_cache[0] = ($event) => $setup.handleClick("stepDown"))
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconMinus }, null, 8, ["icon"])
-            ], 8, _hoisted_2$6)) : createCommentVNode("v-if", true),
+            ], 8, _hoisted_2$7)) : createCommentVNode("v-if", true),
             $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
               key: 1,
               class: "onyx-stepper__loading",
@@ -13918,8 +13918,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$6 = { class: "onyx-slider__container" };
-const _hoisted_2$5 = ["id", "tabindex", "disabled", "aria-label", "autofocus"];
+const _hoisted_1$7 = { class: "onyx-slider__container" };
+const _hoisted_2$6 = ["id", "tabindex", "disabled", "aria-label", "autofocus"];
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
@@ -13951,7 +13951,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
         "error-messages": $setup.errorMessages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$6, [
+          createElementVNode("div", _hoisted_1$7, [
             $setup.props.control === "value" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
               key: 0,
               control: "value",
@@ -14064,7 +14064,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                                         disabled: $setup.disabled,
                                         "aria-label": $setup.props.label,
                                         autofocus: $setup.props.autofocus && index === 0
-                                      }), null, 16, _hoisted_2$5), [
+                                      }), null, 16, _hoisted_2$6), [
                                         [$setup["vCustomValidity"]]
                                       ])
                                     ]),
@@ -14180,8 +14180,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$5 = { class: "onyx-switch-skeleton__click-area" };
-const _hoisted_2$4 = ["title"];
+const _hoisted_1$6 = { class: "onyx-switch-skeleton__click-area" };
+const _hoisted_2$5 = ["title"];
 const _hoisted_3$3 = ["aria-label", "disabled", "required", "autofocus"];
 const _hoisted_4$3 = { class: "onyx-switch__click-area" };
 const _hoisted_5$3 = { class: "onyx-switch__container" };
@@ -14194,7 +14194,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       class: ["onyx-component", "onyx-switch-skeleton", $setup.densityClass]
     }, $setup.rootAttrs),
     [
-      createElementVNode("span", _hoisted_1$5, [
+      createElementVNode("span", _hoisted_1$6, [
         createVNode($setup["OnyxSkeleton"], { class: "onyx-switch-skeleton__input" })
       ]),
       !$setup.props.hideLabel ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
@@ -14273,7 +14273,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
           2
           /* CLASS */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_2$4)
+      ], 10, _hoisted_2$5)
     ]),
     _: 1
     /* STABLE */
@@ -14393,8 +14393,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$4 = ["aria-label"];
-const _hoisted_2$3 = { class: "onyx-file-card__content" };
+const _hoisted_1$5 = ["aria-label"];
+const _hoisted_2$4 = { class: "onyx-file-card__content" };
 const _hoisted_3$2 = { class: "onyx-file-card__wrapper onyx-truncation-ellipsis" };
 const _hoisted_4$2 = {
   class: "onyx-file-card__icon",
@@ -14404,7 +14404,7 @@ const _hoisted_5$2 = { class: "onyx-text--small onyx-truncation-ellipsis" };
 const _hoisted_6$2 = { class: "onyx-file-card__name onyx-truncation-ellipsis" };
 const _hoisted_7$1 = { class: "onyx-file-card__details onyx-truncation-ellipsis" };
 const _hoisted_8$1 = { class: "onyx-file-card__size" };
-const _hoisted_9 = {
+const _hoisted_9$1 = {
   key: 0,
   class: "onyx-file-card__actions"
 };
@@ -14425,10 +14425,10 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": $setup.props.filename,
         tabindex: "-1",
         class: "onyx-file-card__show-error"
-      }, null, 8, _hoisted_1$4), [
+      }, null, 8, _hoisted_1$5), [
         [$setup["vCustomValidity"]]
       ]),
-      createElementVNode("div", _hoisted_2$3, [
+      createElementVNode("div", _hoisted_2$4, [
         createElementVNode("div", _hoisted_3$2, [
           createElementVNode("div", _hoisted_4$2, [
             $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
@@ -14499,7 +14499,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ])
         ]),
-        !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_9, [
+        !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
           renderSlot(_ctx.$slots, "actions")
         ])) : createCommentVNode("v-if", true)
       ]),
@@ -14565,7 +14565,7 @@ const validateFileType = ({ name: _name, type: _type }, accept) => {
   });
 };
 const _sfc_main$5 = {};
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   class: "onyx-component onyx-error-svg",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1119.60911 699",
@@ -14573,7 +14573,7 @@ const _hoisted_1$3 = {
   "aria-hidden": "true"
 };
 function _sfc_render$5(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [
     createStaticVNode('<circle cx="292.60911" cy="213" r="213" fill="var(--onyx-error-svg-background-color-circle)"></circle><path d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><path d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color-primary)"></path><path d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color-primary)"></path><path d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="var(--onyx-error-svg-background-color-accent)"></ellipse><ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1"></ellipse><ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="var(--onyx-error-svg-background-color-accent)"></ellipse><ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="var(--onyx-error-svg-background-color-accent)"></ellipse><path d="M494,726.5c90,23,263-30,282-90" transform="translate(-31.39089 -100.5)" fill="none" stroke="var(--onyx-error-svg-background-color-cable)" stroke-miterlimit="10" stroke-width="2"></path><path d="M341,359.5s130-36,138,80-107,149-17,172" transform="translate(-31.39089 -100.5)" fill="none" stroke="var(--onyx-error-svg-background-color-cable)" stroke-miterlimit="10" stroke-width="2"></path><path d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566" transform="translate(-31.39089 -100.5)" fill="none" stroke="var(--onyx-error-svg-background-color-cable)" stroke-miterlimit="10" stroke-width="2"></path><path d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><path d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z" transform="translate(-31.39089 -100.5)" opacity="0.1"></path><rect x="578.43291" y="212.68859" width="513.25314" height="357.51989" rx="18.04568" fill="var(--onyx-error-svg-background-color)"></rect><rect x="595.70294" y="231.77652" width="478.71308" height="267.83694" fill="var(--onyx-error-svg-background-color-accent)"></rect><circle cx="835.05948" cy="223.29299" r="3.02983" fill="var(--onyx-error-svg-background-color-device-controls)"></circle><path d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><polygon points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466" fill="var(--onyx-error-svg-background-color)"></polygon><path d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color)"></path><path d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" transform="translate(-31.39089 -100.5)" opacity="0.1"></path><ellipse cx="1066.53846" cy="654.13477" rx="7.87756" ry="2.42386" fill="var(--onyx-error-svg-background-color-device-controls)"></ellipse><circle cx="835.05948" cy="545.66686" r="11.51335" fill="var(--onyx-error-svg-background-color-device-controls)"></circle><polygon points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466" opacity="0.1"></polygon><rect x="108.60911" y="159" width="208" height="242" fill="var(--onyx-error-svg-background-color)"></rect><rect x="87.60911" y="135" width="250" height="86" fill="var(--onyx-error-svg-background-color-accent)"></rect><rect x="87.60911" y="237" width="250" height="86" fill="var(--onyx-error-svg-background-color-accent)"></rect><rect x="87.60911" y="339" width="250" height="86" fill="var(--onyx-error-svg-background-color-accent)"></rect><rect x="271.60911" y="150" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.4"></rect><rect x="294.60911" y="150" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.8"></rect><rect x="317.60911" y="150" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)"></rect><rect x="271.60911" y="251" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.4"></rect><rect x="294.60911" y="251" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.8"></rect><rect x="317.60911" y="251" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)"></rect><rect x="271.60911" y="352" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.4"></rect><rect x="294.60911" y="352" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)" opacity="0.8"></rect><rect x="317.60911" y="352" width="16" height="16" fill="var(--onyx-error-svg-background-color-primary)"></rect><circle cx="316.60911" cy="538" r="79" fill="var(--onyx-error-svg-background-color)"></circle><rect x="280.60911" y="600" width="24" height="43" fill="var(--onyx-error-svg-background-color)"></rect><rect x="328.60911" y="600" width="24" height="43" fill="var(--onyx-error-svg-background-color)"></rect><ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="var(--onyx-error-svg-background-color)"></ellipse><ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="var(--onyx-error-svg-background-color)"></ellipse><circle cx="318.60911" cy="518" r="27" fill="var(--onyx-error-svg-background-color-face)"></circle><circle cx="318.60911" cy="518" r="9" fill="var(--onyx-error-svg-background-color-accent)"></circle><path d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color-primary)"></path><ellipse cx="417.21511" cy="611.34365" rx="39.5" ry="12.40027" transform="translate(-238.28665 112.98044) rotate(-23.17116)" fill="var(--onyx-error-svg-background-color)"></ellipse><ellipse cx="269.21511" cy="664.34365" rx="39.5" ry="12.40027" transform="translate(-271.07969 59.02084) rotate(-23.17116)" fill="var(--onyx-error-svg-background-color)"></ellipse><path d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z" transform="translate(-31.39089 -100.5)" fill="var(--onyx-error-svg-background-color-face)"></path>', 48)
   ])]);
 }
@@ -14582,7 +14582,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "OnyxFileUploadSVG",
   props: {
     disabled: { type: Boolean, required: false },
-    active: { type: Boolean, required: false }
+    active: { type: Boolean, required: false },
+    error: { type: Boolean, required: false }
   },
   setup(__props, { expose: __expose }) {
     __expose();
@@ -14592,13 +14593,24 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
+const _hoisted_1$3 = {
+  key: 0,
+  fill: "var(--onyx-file-upload-svg-color-bubble)",
+  d: "M28.05 45.1v9.45a.675.675 0 0 0 .675.675h6.75v1.35h-6.75A2.025 2.025 0 0 1 26.7 54.55V44.155l4.89-5.13h8.61V49.15h-1.35v-8.775h-6.075V45.1zm3.375-3.945-2.474 2.595h2.474z M37.5 47.125h-8.1v1.35h8.1zm-4.05 2.7v1.35H29.4v-1.35zm8.973.873.954.954-2.223 2.223 2.223 2.223-.954.954-2.223-2.223-2.223 2.223-.954-.954 2.223-2.223-2.223-2.223.954-.954 2.223 2.223z"
+};
+const _hoisted_2$3 = {
+  key: 1,
+  d: "M39.2005 42.2123H39.1668C38.5307 41.0817 37.5611 40.175 36.3905 39.616C35.2198 39.0571 33.9051 38.8731 32.626 39.0893C31.3469 39.3056 30.1657 39.9114 29.2438 40.824C28.3218 41.7367 27.7041 42.9117 27.475 44.1886C26.316 44.3486 25.2615 44.9441 24.5258 45.8538C23.7901 46.7636 23.4284 47.9194 23.5144 49.0862C23.6004 50.2531 24.1275 51.3434 24.9886 52.1355C25.8496 52.9276 26.9801 53.3621 28.15 53.3506H33.25V57.0001H34.75V53.3506H39.2005C40.6409 53.3123 42.0073 52.7047 43.0006 51.6609C43.9939 50.6172 44.5331 49.2223 44.5 47.7818C44.525 47.0663 44.4071 46.353 44.153 45.6837C43.8989 45.0143 43.5138 44.4024 43.0203 43.8838C42.5268 43.3651 41.9347 42.9501 41.2788 42.6631C40.6229 42.3761 39.9164 42.2229 39.2005 42.2123ZM39.2005 51.8506H34.75V47.4631L36.7405 49.3006L37.7583 48.1988L34 44.7293L30.241 48.1988L31.2588 49.3006L33.25 47.4631V51.8506H28.15C27.7382 51.857 27.3291 51.7814 26.9468 51.6282C26.5644 51.475 26.2163 51.2473 25.9228 50.9583C25.6293 50.6693 25.3962 50.3248 25.2371 49.9449C25.0779 49.5649 24.996 49.1571 24.996 48.7452C24.996 48.3333 25.0779 47.9255 25.2371 47.5455C25.3962 47.1656 25.6293 46.8211 25.9228 46.5321C26.2163 46.2431 26.5644 46.0154 26.9468 45.8622C27.3291 45.709 27.7382 45.6334 28.15 45.6398H28.8573L28.8985 44.9341C28.9785 43.8759 29.4074 42.8742 30.118 42.086C30.8286 41.2978 31.7807 40.7678 32.825 40.5791C33.8693 40.3903 34.9467 40.5535 35.8882 41.0431C36.8298 41.5326 37.5822 42.3208 38.0275 43.2841L38.2353 43.7386L38.7348 43.7221C38.7865 43.7221 39.1465 43.7138 39.1998 43.7138C39.7178 43.7266 40.2281 43.8425 40.7008 44.0547C41.1735 44.2669 41.5992 44.5712 41.953 44.9498C42.3068 45.3284 42.5817 45.7737 42.7614 46.2597C42.9412 46.7457 43.0223 47.2626 43 47.7803C43.0338 48.8234 42.653 49.8373 41.9409 50.6002C41.2288 51.363 40.2434 51.8126 39.2005 51.8506Z",
+  fill: "var(--onyx-file-upload-svg-color-bubble)"
+};
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "svg",
     {
       class: normalizeClass(["onyx-component onyx-file-upload-svg", {
         "onyx-file-upload-svg--disabled": $setup.props.disabled,
-        "onyx-file-upload-svg--active": $setup.props.active
+        "onyx-file-upload-svg--active": $setup.props.active,
+        "onyx-file-upload-svg--error": $setup.props.error
       }]),
       width: "50",
       height: "64",
@@ -14607,8 +14619,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     },
-    [..._cache[0] || (_cache[0] = [
-      createElementVNode(
+    [
+      _cache[0] || (_cache[0] = createElementVNode(
         "path",
         {
           d: "M8 0.5H34.793L43.5 9.20703V50C43.5 54.1421 40.1421 57.5 36 57.5H8C3.85786 57.5 0.5 54.1421 0.5 50V8C0.500001 3.85786 3.85787 0.5 8 0.5Z",
@@ -14618,8 +14630,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
         null,
         -1
         /* CACHED */
-      ),
-      createElementVNode(
+      )),
+      _cache[1] || (_cache[1] = createElementVNode(
         "path",
         {
           d: "M34 0L39 5L44 10H38C35.7909 10 34 8.20914 34 6V0Z",
@@ -14628,8 +14640,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
         null,
         -1
         /* CACHED */
-      ),
-      createElementVNode(
+      )),
+      _cache[2] || (_cache[2] = createElementVNode(
         "path",
         {
           d: "M18 48C18 39.1634 25.1634 32 34 32C42.8366 32 50 39.1634 50 48C50 56.8366 42.8366 64 34 64C25.1634 64 18 56.8366 18 48Z",
@@ -14638,18 +14650,9 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
         null,
         -1
         /* CACHED */
-      ),
-      createElementVNode(
-        "path",
-        {
-          d: "M39.2005 42.2123H39.1668C38.5307 41.0817 37.5611 40.175 36.3905 39.616C35.2198 39.0571 33.9051 38.8731 32.626 39.0893C31.3469 39.3056 30.1657 39.9114 29.2438 40.824C28.3218 41.7367 27.7041 42.9117 27.475 44.1886C26.316 44.3486 25.2615 44.9441 24.5258 45.8538C23.7901 46.7636 23.4284 47.9194 23.5144 49.0862C23.6004 50.2531 24.1275 51.3434 24.9886 52.1355C25.8496 52.9276 26.9801 53.3621 28.15 53.3506H33.25V57.0001H34.75V53.3506H39.2005C40.6409 53.3123 42.0073 52.7047 43.0006 51.6609C43.9939 50.6172 44.5331 49.2223 44.5 47.7818C44.525 47.0663 44.4071 46.353 44.153 45.6837C43.8989 45.0143 43.5138 44.4024 43.0203 43.8838C42.5268 43.3651 41.9347 42.9501 41.2788 42.6631C40.6229 42.3761 39.9164 42.2229 39.2005 42.2123ZM39.2005 51.8506H34.75V47.4631L36.7405 49.3006L37.7583 48.1988L34 44.7293L30.241 48.1988L31.2588 49.3006L33.25 47.4631V51.8506H28.15C27.7382 51.857 27.3291 51.7814 26.9468 51.6282C26.5644 51.475 26.2163 51.2473 25.9228 50.9583C25.6293 50.6693 25.3962 50.3248 25.2371 49.9449C25.0779 49.5649 24.996 49.1571 24.996 48.7452C24.996 48.3333 25.0779 47.9255 25.2371 47.5455C25.3962 47.1656 25.6293 46.8211 25.9228 46.5321C26.2163 46.2431 26.5644 46.0154 26.9468 45.8622C27.3291 45.709 27.7382 45.6334 28.15 45.6398H28.8573L28.8985 44.9341C28.9785 43.8759 29.4074 42.8742 30.118 42.086C30.8286 41.2978 31.7807 40.7678 32.825 40.5791C33.8693 40.3903 34.9467 40.5535 35.8882 41.0431C36.8298 41.5326 37.5822 42.3208 38.0275 43.2841L38.2353 43.7386L38.7348 43.7221C38.7865 43.7221 39.1465 43.7138 39.1998 43.7138C39.7178 43.7266 40.2281 43.8425 40.7008 44.0547C41.1735 44.2669 41.5992 44.5712 41.953 44.9498C42.3068 45.3284 42.5817 45.7737 42.7614 46.2597C42.9412 46.7457 43.0223 47.2626 43 47.7803C43.0338 48.8234 42.653 49.8373 41.9409 50.6002C41.2288 51.363 40.2434 51.8126 39.2005 51.8506Z",
-          fill: "var(--onyx-file-upload-svg-color-bubble)"
-        },
-        null,
-        -1
-        /* CACHED */
-      )
-    ])],
+      )),
+      $setup.props.error ? (openBlock(), createElementBlock("path", _hoisted_1$3)) : (openBlock(), createElementBlock("path", _hoisted_2$3))
+    ],
     2
     /* CLASS */
   );
@@ -14661,6 +14664,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   props: {
     density: { type: null, required: false },
     name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+    showError: { type: null, required: false, default: FORM_INJECTED_SYMBOL },
     modelValue: { type: null, required: false },
     multiple: { type: Boolean, required: false },
     accept: { type: Array, required: false, default: () => [] },
@@ -14673,13 +14678,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
     listType: { type: String, required: false, default: "list" }
   },
-  emits: ["update:modelValue"],
+  emits: ["validityChange", "update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
     const emit = __emit;
     const skeleton = useSkeletonContext(props);
-    const { disabled } = useFormContext(props);
+    const { disabled, showError } = useFormContext(props);
+    const errorClass = useErrorClass(showError);
     const { t } = injectI18n();
     const { densityClass } = useDensity(props);
     const { restAttrs, rootAttrs } = useRootAttrs();
@@ -14694,6 +14700,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const files = asArray(modelValue.value ?? []);
       return files.filter((file) => file != null);
     });
+    const requiredError = computed(() => {
+      if (props.required && currentFiles.value.length === 0) {
+        return t.value("fileUpload.requiredError");
+      }
+      return void 0;
+    });
+    const { vCustomValidity, errorMessages } = useFormElementError({
+      props,
+      emit,
+      error: requiredError
+    });
     const hideFiles = ref(false);
     const fileStatuses = computed(() => {
       return currentFiles.value.map((file, index) => {
@@ -14794,24 +14811,26 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       if (props.listType === "button") return !hideFiles.value;
       return true;
     });
-    const __returned__ = { props, emit, skeleton, disabled, t, densityClass, restAttrs, rootAttrs, formatFileSize, modelValue, input: input2, currentFiles, hideFiles, fileStatuses, currentFileProps, setFiles, removeFile, handleChange, showDetails, isDragging, handleDrop, handleDragEnter, createFileURL, shouldShowFileList, get iconCloudArrowUp() {
+    const __returned__ = { props, emit, skeleton, disabled, showError, errorClass, t, densityClass, restAttrs, rootAttrs, formatFileSize, modelValue, input: input2, currentFiles, requiredError, vCustomValidity, errorMessages, hideFiles, fileStatuses, currentFileProps, setFiles, removeFile, handleChange, showDetails, isDragging, handleDrop, handleDragEnter, createFileURL, shouldShowFileList, get iconCircleInformation() {
+      return iconCircleInformation;
+    }, get iconCloudArrowUp() {
       return iconCloudArrowUp;
     }, get iconTrash() {
       return iconTrash;
     }, get OnyxFileUploadSVG() {
       return OnyxFileUploadSVG;
-    }, OnyxFileCard, OnyxIcon, OnyxIconButton, OnyxSkeleton, OnyxSystemButton };
+    }, OnyxFileCard, OnyxIcon, OnyxIconButton, OnyxSkeleton, OnyxSystemButton, OnyxTooltip, OnyxVisuallyHidden };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 const _hoisted_1$2 = ["disabled"];
 const _hoisted_2$2 = {
-  key: 1,
+  key: 2,
   class: "onyx-file-upload__icon"
 };
 const _hoisted_3$1 = {
-  key: 2,
+  key: 3,
   class: "onyx-file-upload__content"
 };
 const _hoisted_4$1 = {
@@ -14830,7 +14849,11 @@ const _hoisted_7 = {
   key: 3,
   class: "onyx-file-upload__text onyx-text--small"
 };
-const _hoisted_8 = ["accept", "multiple", "disabled", "name"];
+const _hoisted_8 = {
+  key: 4,
+  class: "onyx-file-upload__required_error onyx-text--small"
+};
+const _hoisted_9 = ["accept", "multiple", "disabled", "name"];
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
@@ -14839,124 +14862,162 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     "div",
     mergeProps({
       key: 1,
-      class: ["onyx-component", "onyx-file-upload-wrapper", $setup.densityClass]
+      class: ["onyx-component", "onyx-file-upload-wrapper", $setup.densityClass, $setup.errorClass]
     }, $setup.rootAttrs),
     [
-      createElementVNode("button", {
-        type: "button",
-        class: normalizeClass([
-          "onyx-file-upload",
-          `onyx-file-upload--${$setup.props.size}`,
-          { "onyx-file-upload--dragging": $setup.isDragging }
-        ]),
-        disabled: $setup.disabled,
-        onDragenter: $setup.handleDragEnter,
-        onDragleave: _cache[0] || (_cache[0] = ($event) => $setup.isDragging = false),
-        onDragover: _cache[1] || (_cache[1] = withModifiers(() => {
-        }, ["prevent"])),
-        onDrop: withModifiers($setup.handleDrop, ["prevent"]),
-        onClick: _cache[2] || (_cache[2] = ($event) => $setup.input?.click())
-      }, [
-        $setup.props.size === "large" ? (openBlock(), createBlock($setup["OnyxFileUploadSVG"], {
-          key: 0,
-          disabled: $setup.disabled,
-          active: $setup.isDragging
-        }, null, 8, ["disabled", "active"])) : (openBlock(), createElementBlock("div", _hoisted_2$2, [
-          createVNode($setup["OnyxIcon"], { icon: $setup.iconCloudArrowUp }, null, 8, ["icon"]),
-          createElementVNode(
-            "span",
-            null,
-            toDisplayString($setup.t("fileUpload.select")),
-            1
-            /* TEXT */
-          )
-        ])),
-        $setup.showDetails ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-          $setup.props.size === "large" ? (openBlock(), createElementBlock("p", _hoisted_4$1, [
-            createElementVNode(
-              "u",
-              null,
-              toDisplayString($setup.t("fileUpload.clickToUpload")),
-              1
-              /* TEXT */
-            ),
-            createTextVNode(
-              " " + toDisplayString($setup.t("fileUpload.orDragAndDrop")) + ". ",
-              1
-              /* TEXT */
-            )
-          ])) : createCommentVNode("v-if", true),
-          $setup.props.maxSize || $setup.props.maxTotalSize ? (openBlock(), createElementBlock("p", _hoisted_5$1, [
-            createTextVNode(
-              toDisplayString($setup.t("fileUpload.maxFileSize")) + ": ",
-              1
-              /* TEXT */
-            ),
-            $setup.props.maxSize && $setup.props.maxTotalSize ? (openBlock(), createElementBlock(
-              Fragment,
-              { key: 0 },
-              [
+      createVNode($setup["OnyxTooltip"], {
+        text: $setup.errorMessages?.longMessage,
+        open: $setup.props.size !== "small" || !$setup.errorMessages?.longMessage ? false : void 0,
+        color: "danger"
+      }, {
+        default: withCtx(({ trigger }) => [
+          createElementVNode("button", mergeProps({
+            type: "button",
+            class: [
+              "onyx-file-upload",
+              `onyx-file-upload--${$setup.props.size}`,
+              { "onyx-file-upload--dragging": $setup.isDragging }
+            ]
+          }, trigger, {
+            disabled: $setup.disabled,
+            onDragenter: $setup.handleDragEnter,
+            onDragleave: _cache[0] || (_cache[0] = ($event) => $setup.isDragging = false),
+            onDragover: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["prevent"])),
+            onDrop: withModifiers($setup.handleDrop, ["prevent"]),
+            onClick: _cache[2] || (_cache[2] = ($event) => $setup.input?.click())
+          }), [
+            $setup.props.size === "large" ? (openBlock(), createBlock($setup["OnyxFileUploadSVG"], {
+              key: 0,
+              class: "onyx-file-upload__default-illustration",
+              disabled: $setup.disabled,
+              active: $setup.isDragging
+            }, null, 8, ["disabled", "active"])) : createCommentVNode("v-if", true),
+            $setup.props.size === "large" ? (openBlock(), createBlock($setup["OnyxFileUploadSVG"], {
+              key: 1,
+              class: "onyx-file-upload__error-illustration",
+              error: "",
+              disabled: $setup.disabled,
+              active: $setup.isDragging
+            }, null, 8, ["disabled", "active"])) : (openBlock(), createElementBlock("div", _hoisted_2$2, [
+              createVNode($setup["OnyxIcon"], { icon: $setup.iconCloudArrowUp }, null, 8, ["icon"]),
+              createElementVNode(
+                "span",
+                null,
+                toDisplayString($setup.t("fileUpload.select")),
+                1
+                /* TEXT */
+              )
+            ])),
+            $setup.showDetails ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              $setup.props.size === "large" ? (openBlock(), createElementBlock("p", _hoisted_4$1, [
+                createElementVNode(
+                  "u",
+                  null,
+                  toDisplayString($setup.t("fileUpload.clickToUpload")),
+                  1
+                  /* TEXT */
+                ),
                 createTextVNode(
-                  toDisplayString($setup.formatFileSize($setup.props.maxSize)) + " (" + toDisplayString($setup.formatFileSize($setup.props.maxTotalSize)) + " " + toDisplayString($setup.t("fileUpload.inTotal")) + ") ",
+                  " " + toDisplayString($setup.t("fileUpload.orDragAndDrop")) + ". ",
                   1
                   /* TEXT */
                 )
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : $setup.props.maxSize ? (openBlock(), createElementBlock(
-              Fragment,
-              { key: 1 },
-              [
+              ])) : createCommentVNode("v-if", true),
+              $setup.props.maxSize || $setup.props.maxTotalSize ? (openBlock(), createElementBlock("p", _hoisted_5$1, [
                 createTextVNode(
-                  toDisplayString($setup.formatFileSize($setup.props.maxSize)),
+                  toDisplayString($setup.t("fileUpload.maxFileSize")) + ": ",
                   1
                   /* TEXT */
-                )
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : $setup.props.maxTotalSize ? (openBlock(), createElementBlock(
-              Fragment,
-              { key: 2 },
-              [
+                ),
+                $setup.props.maxSize && $setup.props.maxTotalSize ? (openBlock(), createElementBlock(
+                  Fragment,
+                  { key: 0 },
+                  [
+                    createTextVNode(
+                      toDisplayString($setup.formatFileSize($setup.props.maxSize)) + " (" + toDisplayString($setup.formatFileSize($setup.props.maxTotalSize)) + " " + toDisplayString($setup.t("fileUpload.inTotal")) + ") ",
+                      1
+                      /* TEXT */
+                    )
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                )) : $setup.props.maxSize ? (openBlock(), createElementBlock(
+                  Fragment,
+                  { key: 1 },
+                  [
+                    createTextVNode(
+                      toDisplayString($setup.formatFileSize($setup.props.maxSize)),
+                      1
+                      /* TEXT */
+                    )
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                )) : $setup.props.maxTotalSize ? (openBlock(), createElementBlock(
+                  Fragment,
+                  { key: 2 },
+                  [
+                    createTextVNode(
+                      toDisplayString($setup.formatFileSize($setup.props.maxTotalSize)) + " " + toDisplayString($setup.t("fileUpload.inTotal")),
+                      1
+                      /* TEXT */
+                    )
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                )) : createCommentVNode("v-if", true)
+              ])) : createCommentVNode("v-if", true),
+              $setup.props.multiple && $setup.props.maxCount ? (openBlock(), createElementBlock(
+                "p",
+                _hoisted_6$1,
+                toDisplayString($setup.t("fileUpload.maxFileCount", { n: $setup.props.maxCount })),
+                1
+                /* TEXT */
+              )) : createCommentVNode("v-if", true),
+              $setup.props.accept?.length ? (openBlock(), createElementBlock(
+                "p",
+                _hoisted_7,
+                toDisplayString($setup.t("fileUpload.allowedFileTypes", { types: $setup.props.accept.join(", ") })),
+                1
+                /* TEXT */
+              )) : createCommentVNode("v-if", true),
+              $setup.errorMessages?.longMessage ? (openBlock(), createElementBlock("p", _hoisted_8, [
                 createTextVNode(
-                  toDisplayString($setup.formatFileSize($setup.props.maxTotalSize)) + " " + toDisplayString($setup.t("fileUpload.inTotal")),
+                  toDisplayString($setup.errorMessages?.longMessage) + " ",
                   1
                   /* TEXT */
-                )
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : createCommentVNode("v-if", true)
-          ])) : createCommentVNode("v-if", true),
-          $setup.props.multiple && $setup.props.maxCount ? (openBlock(), createElementBlock(
-            "p",
-            _hoisted_6$1,
-            toDisplayString($setup.t("fileUpload.maxFileCount", { n: $setup.props.maxCount })),
-            1
-            /* TEXT */
-          )) : createCommentVNode("v-if", true),
-          $setup.props.accept?.length ? (openBlock(), createElementBlock(
-            "p",
-            _hoisted_7,
-            toDisplayString($setup.t("fileUpload.allowedFileTypes", { types: $setup.props.accept.join(", ") })),
-            1
-            /* TEXT */
-          )) : createCommentVNode("v-if", true)
-        ])) : createCommentVNode("v-if", true)
-      ], 42, _hoisted_1$2),
-      createElementVNode("input", mergeProps({
-        ref: "inputRef",
-        "aria-hidden": "true",
-        tabindex: "-1",
-        class: "onyx-file-upload__input",
-        type: "file",
-        accept: $setup.props.accept?.length ? $setup.props.accept.join(",") : void 0,
-        multiple: $setup.props.multiple,
-        disabled: $setup.disabled,
-        name: $setup.props.name
-      }, $setup.restAttrs, { onChange: $setup.handleChange }), null, 16, _hoisted_8),
+                ),
+                createVNode($setup["OnyxIcon"], {
+                  icon: $setup.iconCircleInformation,
+                  inline: ""
+                }, null, 8, ["icon"])
+              ])) : createCommentVNode("v-if", true)
+            ])) : createCommentVNode("v-if", true)
+          ], 16, _hoisted_1$2)
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["text", "open"]),
+      createVNode($setup["OnyxVisuallyHidden"], { class: "onyx-file-upload__visually-hidden-input" }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("input", mergeProps({
+            ref: "inputRef",
+            "aria-hidden": "true",
+            tabindex: "-1",
+            class: "onyx-file-upload__input",
+            type: "file",
+            accept: $setup.props.accept?.length ? $setup.props.accept.join(",") : void 0,
+            multiple: $setup.props.multiple,
+            disabled: $setup.disabled,
+            name: $setup.props.name
+          }, $setup.restAttrs, { onChange: $setup.handleChange }), null, 16, _hoisted_9), [
+            [$setup["vCustomValidity"]]
+          ])
+        ]),
+        _: 1
+        /* STABLE */
+      }),
       $setup.props.listType === "button" && $setup.currentFiles.length ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
         key: 0,
         class: "onyx-file-upload__list-button",