sit-onyx 1.1.0-dev-20250930094642 → 1.1.0-dev-20250930114305

package/dist/index.esm-bundler.js

@@ -355,6 +355,7 @@ const notificationCard = { "moreActions": "More actions", "toggleActions": "Togg
 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 globalFAB = { "label": "Global actions" };
+const calendar = { "todayButton": { "label": "Today", "tooltip": "Jump to today" }, "previousMonthButton": "Previous month", "nextMonthButton": "Next month" };
 const enUS = {
   yes,
   no,
@@ -386,7 +387,8 @@ const enUS = {
   notificationCard,
   resizeHandle,
   fileUpload,
-  globalFAB
+  globalFAB,
+  calendar
 };
 const NUMBER_FORMATS = {
   decimal: { style: "decimal" }
@@ -506,7 +508,7 @@ const _unstableCreateCalendar = createBuilder((options) => {
       const date = new Date(2024, 0, 1 + i);
       return date;
     });
-    const formatStyle = options.calendarSize === "big" ? "long" : "short";
+    const formatStyle = toValue(options.calendarSize) === "big" ? "long" : "short";
     const formatter = new Intl.DateTimeFormat(toValue(options.locale), { weekday: formatStyle });
     return days.map((day) => formatter.format(day));
   });
@@ -2294,6 +2296,82 @@ const useAnchorPositionPolyfill = ({
     useragentSupportsAnchorApi
   };
 };
+function useClipping(options) {
+  const clippingStyles = ref();
+  const scrolledOut = ref();
+  const isClipping = ref(false);
+  const checkVisibilityOnScroll = () => {
+    const MIN_DISTANCE_TO_BORDER = 16;
+    const MARGIN = 8;
+    if (!options.popoverRef.value || !options.popoverWrapperRef.value || !options.isVisible.value)
+      return;
+    if (isClipping.value) {
+      const popoverRect = options.popoverRef.value.getBoundingClientRect();
+      const wrapperRect = options.popoverWrapperRef.value.getBoundingClientRect();
+      const requiredHeight = popoverRect.height + MIN_DISTANCE_TO_BORDER + MARGIN;
+      if (options.popoverPosition.value.includes("top")) {
+        if (scrolledOut.value === "top" && wrapperRect.top > requiredHeight) {
+          isClipping.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && wrapperRect.top + MARGIN < window.innerHeight) {
+          isClipping.value = false;
+          return;
+        }
+      } else if (options.popoverPosition.value.includes("bottom")) {
+        if (scrolledOut.value === "top" && wrapperRect.bottom > MARGIN) {
+          isClipping.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && window.innerHeight - wrapperRect.bottom > requiredHeight) {
+          isClipping.value = false;
+          return;
+        }
+      } else {
+        if (scrolledOut.value === "top" && wrapperRect.top + MIN_DISTANCE_TO_BORDER > popoverRect.height) {
+          isClipping.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && wrapperRect.bottom + MIN_DISTANCE_TO_BORDER < window.innerHeight) {
+          isClipping.value = false;
+          return;
+        }
+      }
+    } else {
+      const rect = options.popoverRef.value.getBoundingClientRect();
+      const isTooHigh = rect.top < MIN_DISTANCE_TO_BORDER;
+      const isTooLow = rect.bottom > window.innerHeight - MIN_DISTANCE_TO_BORDER;
+      if (isTooHigh || isTooLow) {
+        isClipping.value = true;
+        if (isTooHigh) {
+          scrolledOut.value = "top";
+          clippingStyles.value = { left: rect.left + "px", top: "var(--onyx-density-md)" };
+        } else if (isTooLow) {
+          scrolledOut.value = "bottom";
+          clippingStyles.value = { left: rect.left + "px", bottom: "var(--onyx-density-md)" };
+        }
+      }
+    }
+  };
+  const disableClipping = computed(() => {
+    return !options.clipping.value || !options.isVisible.value;
+  });
+  useGlobalEventListener({
+    type: "scroll",
+    listener: () => checkVisibilityOnScroll(),
+    disabled: disableClipping
+  });
+  useGlobalEventListener({
+    type: "resize",
+    listener: () => checkVisibilityOnScroll(),
+    disabled: disableClipping
+  });
+  onMounted(async () => {
+    await nextTick();
+    if (!disableClipping.value) checkVisibilityOnScroll();
+  });
+  return { clippingStyles, scrolledOut, isClipping, checkVisibilityOnScroll };
+}
 const useOpenAlignment = (element, tooltipElement, defaultPosition = "center") => {
   const minMargin = 16;
   const openAlignment = ref(defaultPosition);
@@ -2382,7 +2460,8 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     alignment: { type: String, required: false, default: "auto" },
     fitParent: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
-    role: { type: String, required: false, default: "dialog" }
+    role: { type: String, required: false, default: "dialog" },
+    clipping: { type: Boolean, required: false, default: false }
   },
   emits: ["update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -2413,13 +2492,16 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     const positionAndAlignment = computed(() => {
       if (popoverPosition.value === "top" || popoverPosition.value === "bottom") {
         if (popoverAlignment.value === "left") {
-          return popoverPosition.value + " span-right";
+          return `${popoverPosition.value} span-right`;
         }
         if (popoverAlignment.value === "right") {
-          return popoverPosition.value + " span-left";
+          return `${popoverPosition.value} span-left`;
         }
       }
-      return popoverPosition.value;
+      if (popoverPosition.value.includes(" ")) {
+        return popoverPosition.value;
+      }
+      return `${popoverPosition.value} center`;
     });
     const popoverRef = useTemplateRef("popover");
     const popoverWrapperRef = useTemplateRef("popoverWrapper");
@@ -2450,6 +2532,13 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
       updateOpenDirection();
       updateOpenAlignment();
     };
+    const { clippingStyles, isClipping } = useClipping({
+      popoverRef,
+      popoverWrapperRef,
+      popoverPosition,
+      isVisible,
+      clipping: computed(() => props.clipping)
+    });
     useGlobalEventListener({
       type: "resize",
       listener: () => updateDirections()
@@ -2484,6 +2573,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
         [`onyx-basic-popover__dialog--alignment-${popoverAlignment.value}`]: true,
         "onyx-basic-popover__dialog--fitparent": props.fitParent,
         "onyx-basic-popover__dialog--disabled": disabled.value,
+        "onyx-basic-popover__dialog--clipping": isClipping.value,
         "onyx-basic-popover__dialog--dont-support-anchor": !useragentSupportsAnchorApi.value
       };
     });
@@ -2514,7 +2604,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
         top: topPosition.value
       };
     });
-    const __returned__ = { props, emit, _isVisible, isVisible, popoverPosition, popoverAlignment, disabled, positionAndAlignment, popoverRef, popoverWrapperRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, width, handleOpening, updateDirections, toggle, trigger, id, anchorName, popoverClasses, popoverStyles };
+    const __returned__ = { props, emit, _isVisible, isVisible, popoverPosition, popoverAlignment, disabled, positionAndAlignment, popoverRef, popoverWrapperRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, width, handleOpening, updateDirections, clippingStyles, isClipping, toggle, trigger, id, anchorName, popoverClasses, popoverStyles };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -2536,7 +2626,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": $setup.props.label,
         popover: "manual",
         class: normalizeClass(["onyx-basic-popover__dialog", $setup.popoverClasses]),
-        style: normalizeStyle($setup.popoverStyles)
+        style: normalizeStyle(!$setup.isClipping ? $setup.popoverStyles : $setup.clippingStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
       ], 14, _hoisted_1$11)
@@ -4376,86 +4466,430 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16, ["class"]);
 }
 const OnyxCard = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue"]]);
-const __default__ = {};
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "OnyxCalendar",
+  __name: "OnyxIconButton",
   props: {
     density: { type: null, required: false },
-    disabled: { type: Boolean, required: false, default: false },
-    min: { type: Date, required: false },
-    max: { type: Date, required: false },
-    weekStartDay: { type: String, required: false, default: "Monday" },
-    initialDate: { type: Date, required: false },
-    size: { type: String, required: false, default: "auto" },
-    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
-    selection: { type: String, required: false, default: "single" }
+    autofocus: { type: Boolean, required: false },
+    link: { type: null, required: false },
+    label: { type: String, required: true },
+    disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
+    type: { type: null, required: false, default: "button" },
+    color: { type: null, required: false, default: "primary" },
+    loading: { type: Boolean, required: false },
+    icon: { type: String, required: false },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
   },
-  emits: ["update:selectedDate"],
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const { densityClass } = useDensity(props);
+    const skeleton = useSkeletonContext(props);
+    const __returned__ = { props, densityClass, skeleton, ButtonOrLinkLayout, OnyxIcon, OnyxLoadingIndicator, OnyxSkeleton };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
+    key: 0,
+    class: normalizeClass(["onyx-icon-button-skeleton", $setup.densityClass])
+  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.props, {
+    "aria-label": $setup.props.label,
+    title: $setup.props.label,
+    class: [
+      "onyx-component",
+      "onyx-icon-button",
+      `onyx-icon-button--${$setup.props.color}`,
+      { "onyx-icon-button--loading": $setup.props.loading },
+      $setup.densityClass
+    ]
+  }), {
+    default: withCtx(() => [
+      $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
+        key: 0,
+        type: "circle"
+      })) : $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
+        key: 1,
+        icon: $setup.props.icon
+      }, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "default", { key: 2 })
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["aria-label", "title", "class"]));
+}
+const OnyxIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+  __name: "OnyxTooltip",
+  props: {
+    density: { type: null, required: false },
+    text: { type: String, required: false },
+    icon: { type: String, required: false },
+    color: { type: String, required: false, default: "neutral" },
+    position: { type: String, required: false, default: "auto" },
+    alignment: { type: String, required: false, default: "auto" },
+    fitParent: { type: Boolean, required: false, default: false },
+    open: { type: [Boolean, null], required: false, skipCheck: true, default: void 0 },
+    trigger: { type: [String, Object], required: false, default: "hover" },
+    alignsWithEdge: { type: Boolean, required: false, default: false },
+    withoutWedge: { type: Boolean, required: false }
+  },
+  emits: ["update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
     const emit = __emit;
     const { densityClass } = useDensity(props);
-    const skeleton = useSkeletonContext(props);
-    const { locale } = injectI18n();
-    const calendarSize = computed(
-      () => props.size !== "auto" ? props.size : width.value < ONYX_BREAKPOINTS.xs ? "small" : "big"
+    const { t } = injectI18n();
+    const isVisible = useVModel({
+      props,
+      emit,
+      key: "open",
+      default: false
+    });
+    const tooltipOptions = computed(() => ({
+      debounce: 200,
+      ...typeof props.trigger === "object" && props.trigger.type === "hover" && props.trigger || {},
+      isVisible
+    }));
+    const toggletipOptions = computed(() => ({
+      toggleLabel: t.value(`tooltip.${props.color}`),
+      ...typeof props.trigger === "object" && props.trigger.type === "click" && props.trigger || {},
+      isVisible
+    }));
+    const triggerType = computed(() => {
+      if (typeof props.trigger === "object") return props.trigger.type;
+      return props.trigger;
+    });
+    const toolTipPosition = computed(
+      () => props.position === "auto" ? openDirection.value : props.position
     );
-    const buttonRefs = ref({});
-    const setButtonRef = (el, dateKey) => {
-      if (el) {
-        buttonRefs.value[dateKey] = el;
+    const alignment = computed(
+      () => props.alignment === "auto" ? openAlignment.value : props.alignment
+    );
+    const positionAndAlignment = computed(() => {
+      if ((toolTipPosition.value === "top" || toolTipPosition.value === "bottom") && props.alignsWithEdge) {
+        if (alignment.value === "left") {
+          return `${toolTipPosition.value} x-start`;
+        }
+        if (alignment.value === "right") {
+          return `${toolTipPosition.value} x-end`;
+        }
+      }
+      if (toolTipPosition.value.includes(" ")) {
+        return toolTipPosition.value;
+      }
+      return `${toolTipPosition.value} center`;
+    });
+    const createPattern = () => triggerType.value === "hover" ? createTooltip(tooltipOptions.value) : createToggletip(toggletipOptions.value);
+    const ariaPattern = shallowRef(createPattern());
+    watch(triggerType, () => ariaPattern.value = createPattern());
+    const tooltip2 = computed(() => ariaPattern.value?.elements.tooltip);
+    const triggerElementProps = computed(() => toValue(ariaPattern.value?.elements.trigger));
+    const alignsWithEdge = toRef(() => props.alignsWithEdge);
+    const fitParent = toRef(() => props.fitParent);
+    const tooltipWrapperRef = useTemplateRef("tooltipWrapperRefEl");
+    const tooltipRef = useTemplateRef("tooltipRefEl");
+    const { openDirection, updateOpenDirection } = useOpenDirection(tooltipWrapperRef, "top");
+    const { openAlignment, updateOpenAlignment } = useOpenAlignment(tooltipWrapperRef, tooltipRef);
+    const { leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi } = useAnchorPositionPolyfill({
+      positionedRef: tooltipRef,
+      targetRef: tooltipWrapperRef,
+      positionArea: toolTipPosition,
+      alignment,
+      alignsWithEdge,
+      fitParent
+    });
+    const updateDirections = () => {
+      updateOpenDirection();
+      updateOpenAlignment();
+    };
+    useGlobalEventListener({
+      type: "resize",
+      listener: () => updateDirections()
+    });
+    const handleOpening = (open) => {
+      if (open) {
+        tooltipRef.value?.showPopover?.();
       } else {
-        delete buttonRefs.value[dateKey];
+        tooltipRef.value?.hidePopover?.();
       }
     };
-    const { disabled, min, max, initialDate, weekStartDay } = toRefs(props);
-    const {
-      state: { currentYear, currentMonth, selectedDate, weeks, weekdays },
-      elements: { table: tableProps, cell: cellProps, button: buttonProps },
-      internals: { goToPreviousMonth, goToNextMonth, goToToday }
-    } = _unstableCreateCalendar({
-      disabled,
-      min,
-      max,
-      initialDate,
-      locale,
-      calendarSize,
-      buttonRefs,
-      weekStartDay
+    const tooltipClasses = computed(() => {
+      return {
+        "onyx-tooltip--danger": props.color === "danger",
+        "onyx-tooltip--success": props.color === "success",
+        "onyx-tooltip--fit-parent": props.fitParent,
+        "onyx-tooltip--aligns-with-edge": alignsWithEdge.value,
+        "onyx-tooltip--hidden": !isVisible.value,
+        [`onyx-tooltip--position-${toolTipPosition.value.replace(" ", "-")}`]: true,
+        [`onyx-tooltip--alignment-${alignment.value}`]: true,
+        "onyx-tooltip--dont-support-anchor": !useragentSupportsAnchorApi.value,
+        "onyx-tooltip--without-wedge": props.withoutWedge
+      };
     });
-    watch(selectedDate, (newDate) => {
-      if (newDate) {
-        emit("update:selectedDate", newDate);
+    const { width } = useResizeObserver(tooltipWrapperRef);
+    const tooltipWidth = computed(
+      () => props.fitParent && tooltipWrapperRef.value ? `${width.value}px` : "max-content"
+    );
+    onMounted(() => {
+      handleOpening(isVisible.value);
+      updateDirections();
+    });
+    onMounted(() => {
+      if (useragentSupportsAnchorApi.value) {
+        return;
       }
+      watch(
+        [tooltipWidth, toolTipPosition, alignment, alignsWithEdge, isVisible],
+        () => updateAnchorPositionPolyfill(),
+        { flush: "post", immediate: true }
+      );
     });
-    const calendarRef = useTemplateRef("calendar");
-    const { width } = useResizeObserver(calendarRef);
-    const sizeClass = computed(() => `onyx-calendar--${calendarSize.value}`);
-    const __returned__ = { props, emit, densityClass, skeleton, locale, calendarSize, buttonRefs, setButtonRef, disabled, min, max, initialDate, weekStartDay, currentYear, currentMonth, selectedDate, weeks, weekdays, tableProps, cellProps, buttonProps, goToPreviousMonth, goToNextMonth, goToToday, calendarRef, width, sizeClass, get iconChevronLeftSmall() {
-      return iconChevronLeftSmall;
-    }, get iconChevronRightSmall() {
-      return iconChevronRightSmall;
-    }, OnyxHeadline, OnyxSkeleton, OnyxSystemButton };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-const _hoisted_1$N = { class: "onyx-calendar__header" };
-const _hoisted_2$C = { class: "control-container time-control-container" };
-const _hoisted_3$p = { class: "control-container" };
-const _hoisted_4$i = { class: "onyx-calendar__body" };
-const _hoisted_5$d = ["abbr"];
-const _hoisted_6$a = { class: "cell-content__number" };
-const _hoisted_7$6 = { class: "cell-content__number-display" };
-function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.skeleton ? (openBlock(), createElementBlock(
-    "div",
-    {
-      key: 0,
-      class: normalizeClass(["onyx-component", "onyx-calendar-skeleton", $setup.densityClass])
-    },
+    watch(
+      isVisible,
+      async (newVal) => {
+        handleOpening(newVal);
+        updateDirections();
+      },
+      { flush: "post" }
+    );
+    const anchorName = `--anchor-${useId()}`;
+    const tooltipStyles = computed(() => {
+      if (useragentSupportsAnchorApi.value) {
+        return {
+          width: tooltipWidth.value,
+          "position-anchor": anchorName,
+          "position-area": positionAndAlignment.value
+        };
+      }
+      return {
+        width: tooltipWidth.value,
+        left: leftPosition.value,
+        top: topPosition.value
+      };
+    });
+    const __returned__ = { props, emit, densityClass, t, isVisible, tooltipOptions, toggletipOptions, triggerType, toolTipPosition, alignment, positionAndAlignment, createPattern, ariaPattern, tooltip: tooltip2, triggerElementProps, alignsWithEdge, fitParent, tooltipWrapperRef, tooltipRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, updateDirections, handleOpening, tooltipClasses, width, tooltipWidth, anchorName, tooltipStyles, OnyxIcon };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$N = { class: "onyx-tooltip--content" };
+function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      ref: "tooltipWrapperRefEl",
+      class: normalizeClass(["onyx-component", "onyx-tooltip-wrapper", $setup.densityClass]),
+      style: normalizeStyle(`anchor-name: ${$setup.anchorName}`)
+    },
+    [
+      createElementVNode(
+        "div",
+        mergeProps({ ref: "tooltipRefEl" }, $setup.tooltip, {
+          class: ["onyx-tooltip", "onyx-text--small", "onyx-truncation-multiline", $setup.tooltipClasses],
+          style: $setup.tooltipStyles
+        }),
+        [
+          createElementVNode("div", _hoisted_1$N, [
+            $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
+              key: 0,
+              icon: $setup.props.icon,
+              size: "16px"
+            }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
+            renderSlot(_ctx.$slots, "tooltip", {}, () => [
+              createTextVNode(
+                toDisplayString($setup.props.text),
+                1
+                /* TEXT */
+              )
+            ])
+          ])
+        ],
+        16
+        /* FULL_PROPS */
+      ),
+      renderSlot(_ctx.$slots, "default", { trigger: $setup.triggerElementProps })
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+  __name: "OnyxTag",
+  props: {
+    density: { type: null, required: false },
+    label: { type: String, required: true },
+    color: { type: null, required: false, default: "neutral" },
+    icon: { type: String, required: false },
+    clickable: { type: [String, Object], required: false },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const { densityClass } = useDensity(props);
+    const skeleton = useSkeletonContext(props);
+    const tagClasses = computed(() => [
+      "onyx-component",
+      "onyx-tag",
+      `onyx-tag--${props.color}`,
+      { "onyx-tag--interactive": props.clickable },
+      densityClass.value
+    ]);
+    const __returned__ = { props, densityClass, skeleton, tagClasses, OnyxIcon, OnyxSkeleton, OnyxTooltip };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$M = { class: "onyx-text onyx-truncation-ellipsis" };
+const _hoisted_2$C = { class: "onyx-text onyx-truncation-ellipsis" };
+function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
+    key: 0,
+    class: normalizeClass(["onyx-tag-skeleton", $setup.densityClass])
+  }, null, 8, ["class"])) : $setup.props.clickable ? (openBlock(), createBlock($setup["OnyxTooltip"], {
+    key: 1,
+    text: typeof $setup.props.clickable === "object" ? $setup.props.clickable.label : $setup.props.clickable
+  }, {
+    default: withCtx(({ trigger }) => [
+      createElementVNode(
+        "button",
+        mergeProps(trigger, {
+          class: $setup.tagClasses,
+          type: "button"
+        }),
+        [
+          $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
+            key: 0,
+            icon: $setup.props.icon,
+            inline: ""
+          }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
+          createElementVNode(
+            "span",
+            _hoisted_1$M,
+            toDisplayString($setup.props.label),
+            1
+            /* TEXT */
+          ),
+          typeof $setup.props.clickable === "object" && $setup.props.clickable.actionIcon ? (openBlock(), createBlock($setup["OnyxIcon"], {
+            key: 1,
+            icon: $setup.props.clickable.actionIcon,
+            inline: ""
+          }, null, 8, ["icon"])) : createCommentVNode("v-if", true)
+        ],
+        16
+        /* FULL_PROPS */
+      )
+    ]),
+    _: 1
+    /* STABLE */
+  }, 8, ["text"])) : (openBlock(), createElementBlock(
+    "div",
+    {
+      key: 2,
+      class: normalizeClass($setup.tagClasses)
+    },
+    [
+      $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
+        key: 0,
+        icon: $setup.props.icon,
+        inline: ""
+      }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
+      createElementVNode(
+        "span",
+        _hoisted_2$C,
+        toDisplayString($setup.props.label),
+        1
+        /* TEXT */
+      )
+    ],
+    2
+    /* CLASS */
+  ));
+}
+const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
+const __default__ = {};
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "OnyxCalendar",
+  props: {
+    density: { type: null, required: false },
+    disabled: { type: Boolean, required: false, default: false },
+    min: { type: Date, required: false },
+    max: { type: Date, required: false },
+    weekStartDay: { type: String, required: false, default: "Monday" },
+    initialDate: { type: Date, required: false },
+    size: { type: String, required: false, default: "auto" },
+    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL },
+    selection: { type: String, required: false, default: "single" }
+  },
+  emits: ["update:selectedDate"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const { densityClass } = useDensity(props);
+    const skeleton = useSkeletonContext(props);
+    const { t, locale } = injectI18n();
+    const calendarSize = computed(
+      () => props.size !== "auto" ? props.size : width.value < ONYX_BREAKPOINTS.xs ? "small" : "big"
+    );
+    const buttonRefs = ref({});
+    const setButtonRef = (el, dateKey) => {
+      if (el) {
+        buttonRefs.value[dateKey] = el;
+      } else {
+        delete buttonRefs.value[dateKey];
+      }
+    };
+    const { disabled, min, max, initialDate, weekStartDay } = toRefs(props);
+    const {
+      state: { currentYear, currentMonth, selectedDate, weeks, weekdays },
+      elements: { table: tableProps, cell: cellProps, button: buttonProps },
+      internals: { goToPreviousMonth, goToNextMonth, goToToday }
+    } = _unstableCreateCalendar({
+      disabled,
+      min,
+      max,
+      initialDate,
+      locale,
+      calendarSize,
+      buttonRefs,
+      weekStartDay
+    });
+    watch(selectedDate, (newDate) => {
+      if (newDate) {
+        emit("update:selectedDate", newDate);
+      }
+    });
+    const calendarRef = useTemplateRef("calendar");
+    const { width } = useResizeObserver(calendarRef);
+    const sizeClass = computed(() => `onyx-calendar--${calendarSize.value}`);
+    const __returned__ = { props, emit, densityClass, skeleton, t, locale, calendarSize, buttonRefs, setButtonRef, disabled, min, max, initialDate, weekStartDay, currentYear, currentMonth, selectedDate, weeks, weekdays, tableProps, cellProps, buttonProps, goToPreviousMonth, goToNextMonth, goToToday, calendarRef, width, sizeClass, get iconChevronLeftSmall() {
+      return iconChevronLeftSmall;
+    }, get iconChevronRightSmall() {
+      return iconChevronRightSmall;
+    }, OnyxHeadline, OnyxIconButton, OnyxSkeleton, OnyxTag };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1$L = { class: "onyx-calendar__header" };
+const _hoisted_2$B = { class: "control-container time-control-container" };
+const _hoisted_3$p = { class: "control-container" };
+const _hoisted_4$i = { class: "onyx-calendar__body" };
+const _hoisted_5$d = ["abbr"];
+const _hoisted_6$a = { class: "cell-content__number" };
+const _hoisted_7$6 = { class: "cell-content__number-display" };
+function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.skeleton ? (openBlock(), createElementBlock(
+    "div",
+    {
+      key: 0,
+      class: normalizeClass(["onyx-component", "onyx-calendar-skeleton", $setup.densityClass])
+    },
     [
       createVNode($setup["OnyxSkeleton"], { class: "onyx-calendar-skeleton__header" }),
       createVNode($setup["OnyxSkeleton"], { class: "onyx-calendar-skeleton__body" })
@@ -4476,21 +4910,23 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$N, [
-        createElementVNode("div", _hoisted_2$C, [
-          $setup.calendarSize !== "small" ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+      createElementVNode("div", _hoisted_1$L, [
+        createElementVNode("div", _hoisted_2$B, [
+          $setup.calendarSize !== "small" ? (openBlock(), createBlock($setup["OnyxTag"], {
             key: 0,
-            label: "Today",
+            label: $setup.t("calendar.todayButton.label"),
             class: "control-container__today-btn",
             disabled: $setup.disabled,
+            clickable: $setup.t("calendar.todayButton.tooltip"),
             onClick: $setup.goToToday
-          }, null, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
-          createVNode($setup["OnyxSystemButton"], {
-            label: "previous Month",
+          }, null, 8, ["label", "disabled", "clickable", "onClick"])) : createCommentVNode("v-if", true),
+          createVNode($setup["OnyxIconButton"], {
+            label: $setup.t("calendar.previousMonthButton"),
+            color: "neutral",
             icon: $setup.iconChevronLeftSmall,
             disabled: $setup.disabled,
             onClick: $setup.goToPreviousMonth
-          }, null, 8, ["icon", "disabled", "onClick"]),
+          }, null, 8, ["label", "icon", "disabled", "onClick"]),
           createVNode($setup["OnyxHeadline"], {
             is: "h2",
             class: "control-container__date-display"
@@ -4508,12 +4944,13 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1
             /* STABLE */
           }),
-          createVNode($setup["OnyxSystemButton"], {
-            label: "next Month",
+          createVNode($setup["OnyxIconButton"], {
+            label: $setup.t("calendar.nextMonthButton"),
+            color: "neutral",
             icon: $setup.iconChevronRightSmall,
             disabled: $setup.disabled,
             onClick: $setup.goToNextMonth
-          }, null, 8, ["icon", "disabled", "onClick"])
+          }, null, 8, ["label", "icon", "disabled", "onClick"])
         ]),
         createElementVNode("div", _hoisted_3$p, [
           renderSlot(_ctx.$slots, "actions")
@@ -4533,7 +4970,8 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
                     return openBlock(), createElementBlock("th", {
                       key: index,
                       scope: "col",
-                      abbr: day
+                      abbr: day,
+                      class: "onyx-text--small"
                     }, toDisplayString(day), 9, _hoisted_5$d);
                   }),
                   128
@@ -4603,7 +5041,7 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendar/OnyxCalendar.vue"]]);
+const OnyxCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCalendar/OnyxCalendar.vue"]]);
 const useRequired = (props, requiredMarker) => ({
   /**
    * Class that configures which type of required marker is used.
@@ -4771,238 +5209,41 @@ const useFormElementError = (options) => {
       step: options.props.validStepSize
     };
     if (errorType === "typeMismatch") {
-      const type = TRANSLATED_INPUT_TYPES.includes(options.props.type) ? options.props.type : "generic";
-      return {
-        longMessage: t.value(`validations.typeMismatch.${type}.fullError`, validationData),
-        shortMessage: t.value(`validations.typeMismatch.${type}.preview`, validationData)
-      };
-    }
-    return {
-      longMessage: t.value(`validations.${errorType}.fullError`, validationData),
-      shortMessage: t.value(`validations.${errorType}.preview`, validationData)
-    };
-  });
-  return {
-    /**
-     * Directive to set the custom error message and emit validityChange event.
-     */
-    vCustomValidity,
-    /**
-     * A custom error or the default translation of the first invalid state if one exists.
-     */
-    errorMessages
-  };
-};
-const formatMinMax = (locale, type, value) => {
-  if (!type || !["date", "datetime-local"].includes(type)) return value?.toString();
-  const date = value != void 0 ? new Date(value) : void 0;
-  if (!isValidDate(date)) return value?.toString();
-  const format = {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric",
-    ...type === "datetime-local" ? { hour: "2-digit", minute: "2-digit" } : void 0
-  };
-  return date.toLocaleString(locale, format);
-};
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
-  __name: "OnyxTooltip",
-  props: {
-    density: { type: null, required: false },
-    text: { type: String, required: false },
-    icon: { type: String, required: false },
-    color: { type: String, required: false, default: "neutral" },
-    position: { type: String, required: false, default: "auto" },
-    alignment: { type: String, required: false, default: "auto" },
-    fitParent: { type: Boolean, required: false, default: false },
-    open: { type: [Boolean, null], required: false, skipCheck: true, default: void 0 },
-    trigger: { type: [String, Object], required: false, default: "hover" },
-    alignsWithEdge: { type: Boolean, required: false, default: false },
-    withoutWedge: { type: Boolean, required: false }
-  },
-  emits: ["update:open"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    __expose();
-    const props = __props;
-    const emit = __emit;
-    const { densityClass } = useDensity(props);
-    const { t } = injectI18n();
-    const isVisible = useVModel({
-      props,
-      emit,
-      key: "open",
-      default: false
-    });
-    const tooltipOptions = computed(() => ({
-      debounce: 200,
-      ...typeof props.trigger === "object" && props.trigger.type === "hover" && props.trigger || {},
-      isVisible
-    }));
-    const toggletipOptions = computed(() => ({
-      toggleLabel: t.value(`tooltip.${props.color}`),
-      ...typeof props.trigger === "object" && props.trigger.type === "click" && props.trigger || {},
-      isVisible
-    }));
-    const triggerType = computed(() => {
-      if (typeof props.trigger === "object") return props.trigger.type;
-      return props.trigger;
-    });
-    const toolTipPosition = computed(
-      () => props.position === "auto" ? openDirection.value : props.position
-    );
-    const alignment = computed(
-      () => props.alignment === "auto" ? openAlignment.value : props.alignment
-    );
-    const positionAndAlignment = computed(() => {
-      if ((toolTipPosition.value === "top" || toolTipPosition.value === "bottom") && props.alignsWithEdge) {
-        if (alignment.value === "left") {
-          return `${toolTipPosition.value} x-start`;
-        }
-        if (alignment.value === "right") {
-          return `${toolTipPosition.value} x-end`;
-        }
-      }
-      if (toolTipPosition.value.includes(" ")) {
-        return toolTipPosition.value;
-      }
-      return `${toolTipPosition.value} center`;
-    });
-    const createPattern = () => triggerType.value === "hover" ? createTooltip(tooltipOptions.value) : createToggletip(toggletipOptions.value);
-    const ariaPattern = shallowRef(createPattern());
-    watch(triggerType, () => ariaPattern.value = createPattern());
-    const tooltip2 = computed(() => ariaPattern.value?.elements.tooltip);
-    const triggerElementProps = computed(() => toValue(ariaPattern.value?.elements.trigger));
-    const alignsWithEdge = toRef(() => props.alignsWithEdge);
-    const fitParent = toRef(() => props.fitParent);
-    const tooltipWrapperRef = useTemplateRef("tooltipWrapperRefEl");
-    const tooltipRef = useTemplateRef("tooltipRefEl");
-    const { openDirection, updateOpenDirection } = useOpenDirection(tooltipWrapperRef, "top");
-    const { openAlignment, updateOpenAlignment } = useOpenAlignment(tooltipWrapperRef, tooltipRef);
-    const { leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi } = useAnchorPositionPolyfill({
-      positionedRef: tooltipRef,
-      targetRef: tooltipWrapperRef,
-      positionArea: toolTipPosition,
-      alignment,
-      alignsWithEdge,
-      fitParent
-    });
-    const updateDirections = () => {
-      updateOpenDirection();
-      updateOpenAlignment();
-    };
-    useGlobalEventListener({
-      type: "resize",
-      listener: () => updateDirections()
-    });
-    const handleOpening = (open) => {
-      if (open) {
-        tooltipRef.value?.showPopover?.();
-      } else {
-        tooltipRef.value?.hidePopover?.();
-      }
-    };
-    const tooltipClasses = computed(() => {
-      return {
-        "onyx-tooltip--danger": props.color === "danger",
-        "onyx-tooltip--success": props.color === "success",
-        "onyx-tooltip--fit-parent": props.fitParent,
-        "onyx-tooltip--aligns-with-edge": alignsWithEdge.value,
-        "onyx-tooltip--hidden": !isVisible.value,
-        [`onyx-tooltip--position-${toolTipPosition.value.replace(" ", "-")}`]: true,
-        [`onyx-tooltip--alignment-${alignment.value}`]: true,
-        "onyx-tooltip--dont-support-anchor": !useragentSupportsAnchorApi.value,
-        "onyx-tooltip--without-wedge": props.withoutWedge
-      };
-    });
-    const { width } = useResizeObserver(tooltipWrapperRef);
-    const tooltipWidth = computed(
-      () => props.fitParent && tooltipWrapperRef.value ? `${width.value}px` : "max-content"
-    );
-    onMounted(() => {
-      handleOpening(isVisible.value);
-      updateDirections();
-    });
-    onMounted(() => {
-      if (useragentSupportsAnchorApi.value) {
-        return;
-      }
-      watch(
-        [tooltipWidth, toolTipPosition, alignment, alignsWithEdge, isVisible],
-        () => updateAnchorPositionPolyfill(),
-        { flush: "post", immediate: true }
-      );
-    });
-    watch(
-      isVisible,
-      async (newVal) => {
-        handleOpening(newVal);
-        updateDirections();
-      },
-      { flush: "post" }
-    );
-    const anchorName = `--anchor-${useId()}`;
-    const tooltipStyles = computed(() => {
-      if (useragentSupportsAnchorApi.value) {
-        return {
-          width: tooltipWidth.value,
-          "position-anchor": anchorName,
-          "position-area": positionAndAlignment.value
-        };
-      }
+      const type = TRANSLATED_INPUT_TYPES.includes(options.props.type) ? options.props.type : "generic";
       return {
-        width: tooltipWidth.value,
-        left: leftPosition.value,
-        top: topPosition.value
+        longMessage: t.value(`validations.typeMismatch.${type}.fullError`, validationData),
+        shortMessage: t.value(`validations.typeMismatch.${type}.preview`, validationData)
       };
-    });
-    const __returned__ = { props, emit, densityClass, t, isVisible, tooltipOptions, toggletipOptions, triggerType, toolTipPosition, alignment, positionAndAlignment, createPattern, ariaPattern, tooltip: tooltip2, triggerElementProps, alignsWithEdge, fitParent, tooltipWrapperRef, tooltipRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, updateDirections, handleOpening, tooltipClasses, width, tooltipWidth, anchorName, tooltipStyles, OnyxIcon };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-const _hoisted_1$M = { class: "onyx-tooltip--content" };
-function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "div",
-    {
-      ref: "tooltipWrapperRefEl",
-      class: normalizeClass(["onyx-component", "onyx-tooltip-wrapper", $setup.densityClass]),
-      style: normalizeStyle(`anchor-name: ${$setup.anchorName}`)
-    },
-    [
-      createElementVNode(
-        "div",
-        mergeProps({ ref: "tooltipRefEl" }, $setup.tooltip, {
-          class: ["onyx-tooltip", "onyx-text--small", "onyx-truncation-multiline", $setup.tooltipClasses],
-          style: $setup.tooltipStyles
-        }),
-        [
-          createElementVNode("div", _hoisted_1$M, [
-            $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
-              key: 0,
-              icon: $setup.props.icon,
-              size: "16px"
-            }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-            renderSlot(_ctx.$slots, "tooltip", {}, () => [
-              createTextVNode(
-                toDisplayString($setup.props.text),
-                1
-                /* TEXT */
-              )
-            ])
-          ])
-        ],
-        16
-        /* FULL_PROPS */
-      ),
-      renderSlot(_ctx.$slots, "default", { trigger: $setup.triggerElementProps })
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const OnyxTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue"]]);
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+    }
+    return {
+      longMessage: t.value(`validations.${errorType}.fullError`, validationData),
+      shortMessage: t.value(`validations.${errorType}.preview`, validationData)
+    };
+  });
+  return {
+    /**
+     * Directive to set the custom error message and emit validityChange event.
+     */
+    vCustomValidity,
+    /**
+     * A custom error or the default translation of the first invalid state if one exists.
+     */
+    errorMessages
+  };
+};
+const formatMinMax = (locale, type, value) => {
+  if (!type || !["date", "datetime-local"].includes(type)) return value?.toString();
+  const date = value != void 0 ? new Date(value) : void 0;
+  if (!isValidDate(date)) return value?.toString();
+  const format = {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    ...type === "datetime-local" ? { hour: "2-digit", minute: "2-digit" } : void 0
+  };
+  return date.toLocaleString(locale, format);
+};
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "OnyxErrorTooltip",
   props: {
     errorMessages: { type: Object, required: false },
@@ -5018,16 +5259,16 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$L = { class: "onyx-component" };
-const _hoisted_2$B = {
+const _hoisted_1$K = { class: "onyx-component" };
+const _hoisted_2$A = {
   key: 0,
   ref: "targetRef"
 };
-function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$L, [
+function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$K, [
     !$setup.tooltipError || $setup.props.disabled ? (openBlock(), createElementBlock(
       "div",
-      _hoisted_2$B,
+      _hoisted_2$A,
       null,
       512
       /* NEED_PATCH */
@@ -5060,8 +5301,8 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, ["to"])) : createCommentVNode("v-if", true)
   ]);
 }
-const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const OnyxErrorTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxErrorTooltip/OnyxErrorTooltip.vue"]]);
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxCheckbox",
   props: {
@@ -5108,10 +5349,10 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$K = ["title"];
-const _hoisted_2$A = { class: "onyx-checkbox__container" };
+const _hoisted_1$J = ["title"];
+const _hoisted_2$z = { class: "onyx-checkbox__container" };
 const _hoisted_3$o = ["aria-label", "indeterminate", "disabled", "required", "value", "autofocus"];
-function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -5137,7 +5378,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["onyx-component onyx-checkbox", [$setup.requiredTypeClass, $setup.densityClass]]),
         title: $setup.title
       }, [
-        createElementVNode("div", _hoisted_2$A, [
+        createElementVNode("div", _hoisted_2$z, [
           $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
             key: 0,
             class: "onyx-checkbox__loading",
@@ -5190,13 +5431,13 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_1$K)
+      ], 10, _hoisted_1$J)
     ]),
     _: 1
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-const OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue"]]);
+const OnyxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue"]]);
 const useSelectAllCheckboxState = (enabledOptionValues, modelValue) => computed(() => {
   const currentValues = modelValue.value.filter(
     (value) => enabledOptionValues.value.includes(value)
@@ -5231,7 +5472,7 @@ const useCheckAll = (enabledOptionValues, modelValue, onChangeCallback) => {
     }
   };
 };
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "OnyxInfoTooltip",
   props: {
     text: { type: String, required: true },
@@ -5266,9 +5507,9 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$J = { class: "onyx-component onyx-info-tooltip" };
-function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$J, [
+const _hoisted_1$I = { class: "onyx-component onyx-info-tooltip" };
+function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$I, [
     $setup.triggerType === "click" ? (openBlock(), createBlock($setup["OnyxTooltip"], mergeProps({ key: 0 }, $setup.props, {
       open: $setup.isVisible,
       "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.isVisible = $event)
@@ -5326,8 +5567,8 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
     ))
   ]);
 }
-const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const OnyxInfoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInfoTooltip/OnyxInfoTooltip.vue"]]);
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "OnyxCheckboxGroup",
   props: {
     truncation: { type: null, required: false, default: "ellipsis" },
@@ -5385,18 +5626,18 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$I = ["disabled", "aria-label"];
-const _hoisted_2$z = {
+const _hoisted_1$H = ["disabled", "aria-label"];
+const _hoisted_2$y = {
   key: 0,
   class: "onyx-checkbox-group__label"
 };
-function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("fieldset", {
     class: normalizeClass(["onyx-component", "onyx-checkbox-group", $setup.densityClass]),
     disabled: $setup.disabled,
     "aria-label": $setup.props.label
   }, [
-    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$z, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$y, [
       createVNode($setup["OnyxHeadline"], { is: "h3" }, {
         default: withCtx(() => [
           createTextVNode(
@@ -5476,15 +5717,15 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$I);
+  ], 10, _hoisted_1$H);
 }
-const OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue"]]);
+const OnyxCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue"]]);
 const escapeCSS = (key) => {
   const name = typeof key === "symbol" && key.description ? key.description : String(key);
   if (globalThis.window && window.CSS) return CSS.escape(name);
   return name.replace(/\W/g, "-");
 };
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "OnyxEmpty",
   props: {
     density: { type: null, required: false }
@@ -5501,12 +5742,12 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$H = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
-const _hoisted_2$y = {
+const _hoisted_1$G = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" };
+const _hoisted_2$x = {
   key: 0,
   class: "onyx-empty__buttons"
 };
-function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -5519,10 +5760,10 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
           size: "48px"
         }, null, 8, ["icon"])
       ]),
-      createElementVNode("div", _hoisted_1$H, [
+      createElementVNode("div", _hoisted_1$G, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$y, [
+      !!$setup.slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_2$x, [
         renderSlot(_ctx.$slots, "buttons")
       ])) : createCommentVNode("v-if", true)
     ],
@@ -5530,8 +5771,8 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.vue"]]);
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const OnyxEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$V], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxEmpty/OnyxEmpty.vue"]]);
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "OnyxTable",
   props: {
     density: { type: null, required: false },
@@ -5561,11 +5802,11 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$G = {
+const _hoisted_1$F = {
   key: 0,
   class: "onyx-table-wrapper__top"
 };
-const _hoisted_2$x = ["id"];
+const _hoisted_2$w = ["id"];
 const _hoisted_3$n = { class: "onyx-table-wrapper__actions" };
 const _hoisted_4$h = ["tabindex"];
 const _hoisted_5$c = ["aria-labelledby"];
@@ -5583,7 +5824,7 @@ const _hoisted_13 = {
   key: 1,
   class: "onyx-table-wrapper__bottom"
 };
-function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -5591,10 +5832,10 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
       style: normalizeStyle($setup.style)
     },
     [
-      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$G, [
+      !!$setup.slots.headline || !!$setup.slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1$F, [
         createElementVNode("div", { id: $setup.headlineId }, [
           renderSlot(_ctx.$slots, "headline")
-        ], 8, _hoisted_2$x),
+        ], 8, _hoisted_2$w),
         createElementVNode("div", _hoisted_3$n, [
           renderSlot(_ctx.$slots, "actions")
         ])
@@ -5686,8 +5927,8 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     /* STYLE */
   );
 }
-const OnyxTable = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue"]]);
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const OnyxTable = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue"]]);
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "OnyxDataGridRenderer",
   props: {
     density: { type: null, required: false },
@@ -5721,7 +5962,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxTable"], mergeProps({ class: "onyx-data-grid" }, $setup.props, {
     "scroll-container-attrs": $setup.mergeVueProps($setup.props.scrollContainerAttrs, { style: $setup.columnStyle })
   }), createSlots({
@@ -5828,8 +6069,8 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ]), 1040, ["scroll-container-attrs"]);
 }
-const OnyxDataGridRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$V], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue"]]);
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const OnyxDataGridRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$T], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue"]]);
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxMiniSearch",
   props: {
@@ -5869,9 +6110,9 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$F = ["autofocus", "placeholder", "aria-label"];
-const _hoisted_2$w = ["aria-label"];
-function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$E = ["autofocus", "placeholder", "aria-label"];
+const _hoisted_2$v = ["aria-label"];
+function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -5890,7 +6131,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
         size: "1"
       }, $setup.restAttrs, {
         "aria-label": $setup.props.label
-      }), null, 16, _hoisted_1$F), [
+      }), null, 16, _hoisted_1$E), [
         [vModelText, $setup.modelValue]
       ]),
       createElementVNode("button", {
@@ -5903,7 +6144,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[2] || (_cache[2] = ($event) => $setup.emit("clear"))
       }, [
         createVNode($setup["OnyxIcon"], { icon: $setup.iconXSmall }, null, 8, ["icon"])
-      ], 40, _hoisted_2$w),
+      ], 40, _hoisted_2$v),
       createVNode($setup["OnyxIcon"], {
         class: "onyx-mini-search__icon",
         icon: $setup.iconSearch
@@ -5913,11 +6154,11 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxMiniSearch = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue"]]);
+const OnyxMiniSearch = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$S], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.vue"]]);
 const prepareMapping = (features, key) => features.flatMap((f) => f[key]).filter((f) => f?.func).sort((a, b) => (a?.order ?? 0) - (b?.order ?? 0));
 const applyMapping = (mapping, input2) => mapping.reduce((output, m) => m.func(output), input2);
 const DataGridRowOptionsSymbol = Symbol("RowOptions");
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "HeaderCell",
   props: {
     label: { type: String, required: true }
@@ -5931,17 +6172,17 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$E = { class: "onyx-component onyx-data-grid-header-cell" };
-const _hoisted_2$v = { class: "onyx-data-grid-header-cell__label" };
+const _hoisted_1$D = { class: "onyx-component onyx-data-grid-header-cell" };
+const _hoisted_2$u = { class: "onyx-data-grid-header-cell__label" };
 const _hoisted_3$m = {
   key: 0,
   class: "onyx-data-grid-header-cell__actions"
 };
-function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$E, [
+function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$D, [
     createElementVNode(
       "span",
-      _hoisted_2$v,
+      _hoisted_2$u,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
@@ -5951,7 +6192,7 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("v-if", true)
   ]);
 }
-const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$T], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue"]]);
+const HeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/HeaderCell.vue"]]);
 const FALLBACK_RENDER_VALUE = "-";
 const fallback = (opts) => opts?.fallback ?? FALLBACK_RENDER_VALUE;
 const createTypeRenderer = (typeRenderer) => Object.freeze(typeRenderer);
@@ -6453,7 +6694,7 @@ const useErrorClass = (showError) => computed(() => {
   }
   return "onyx-form-element--touched-invalid";
 });
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "FormMessage",
   props: {
     messages: { type: Object, required: true },
@@ -6467,17 +6708,17 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$D = {
+const _hoisted_1$C = {
   class: /* @__PURE__ */ normalizeClass(["onyx-truncation-ellipsis"])
 };
-function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent($props.messages.hidden ? $setup.OnyxVisuallyHidden : "span"), {
     class: normalizeClass(["onyx-component", "onyx-form-message", `onyx-form-message__${$setup.props.type}`])
   }, {
     default: withCtx(() => [
       createElementVNode(
         "span",
-        _hoisted_1$D,
+        _hoisted_1$C,
         toDisplayString($setup.props.messages.shortMessage),
         1
         /* TEXT */
@@ -6495,8 +6736,8 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 8, ["class"]);
 }
-const FormMessage = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$S], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue"]]);
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const FormMessage = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$Q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue"]]);
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "OnyxFormElement",
   props: {
     disabled: { type: [Boolean, Symbol], required: false },
@@ -6569,17 +6810,17 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$C = {
+const _hoisted_1$B = {
   key: 0,
   class: "onyx-form-element__label onyx-text--small"
 };
-const _hoisted_2$u = ["for"];
+const _hoisted_2$t = ["for"];
 const _hoisted_3$l = {
   key: 1,
   class: "onyx-form-element__footer onyx-text--small"
 };
 const _hoisted_4$g = { class: "onyx-form-element__footer-messages" };
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -6591,11 +6832,11 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
+      !$setup.props.hideLabel ? (openBlock(), createElementBlock("div", _hoisted_1$B, [
         createElementVNode("label", {
           for: $setup.props.id,
           class: "onyx-truncation-ellipsis"
-        }, toDisplayString($setup.props.label), 9, _hoisted_2$u),
+        }, toDisplayString($setup.props.label), 9, _hoisted_2$t),
         $setup.props.required ? (openBlock(), createElementBlock(
           "span",
           {
@@ -6666,8 +6907,8 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue"]]);
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const OnyxFormElement = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$P], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue"]]);
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSelectInput",
   props: {
@@ -6749,9 +6990,9 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$B = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"];
-const _hoisted_2$t = ["aria-label", "title", "disabled"];
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$A = ["id", "readonly", "placeholder", "required", "disabled", "aria-label", "title", "value", "autofocus"];
+const _hoisted_2$s = ["aria-label", "title", "disabled"];
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -6816,7 +7057,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
               autofocus: $setup.props.autofocus,
               autocomplete: "off",
               onKeydown: $setup.blockTyping
-            }), null, 16, _hoisted_1$B), [
+            }), null, 16, _hoisted_1$A), [
               [$setup["vCustomValidity"]]
             ]),
             $setup.props.textMode === "preview" && $setup.selectionCount > 0 ? (openBlock(), createBlock($setup["OnyxTooltip"], {
@@ -6855,7 +7096,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
               disabled: $setup.disabled || $setup.props.readonly || $setup.props.loading
             }, [
               createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronDownUp }, null, 8, ["icon"])
-            ], 8, _hoisted_2$t),
+            ], 8, _hoisted_2$s),
             !$setup.props.hideSuccessIcon && $setup.successMessages ? (openBlock(), createBlock($setup["OnyxIcon"], {
               key: 2,
               class: "onyx-select-input__check-icon",
@@ -6872,8 +7113,8 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxSelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$Q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue"]]);
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const OnyxSelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$O], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue"]]);
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectOption",
   props: {
     active: { type: Boolean, required: false, default: false },
@@ -6891,8 +7132,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$A = ["checked", "aria-labelledby", "disabled", "indeterminate"];
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$z = ["checked", "aria-labelledby", "disabled", "indeterminate"];
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({ class: "onyx-component onyx-select-option" }, $setup.props, {
     checked: !!_ctx.$attrs["aria-checked"],
     selected: !!_ctx.$attrs["aria-selected"],
@@ -6909,7 +7150,7 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
         tabindex: "-1",
         class: "onyx-select-option__checkbox",
         type: "checkbox"
-      }, null, 8, _hoisted_1$A)) : createCommentVNode("v-if", true),
+      }, null, 8, _hoisted_1$z)) : createCommentVNode("v-if", true),
       $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 1,
         icon: $setup.props.icon
@@ -6930,8 +7171,8 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["checked", "selected", "disabled"]);
 }
-const OnyxSelectOption = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$P], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue"]]);
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const OnyxSelectOption = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$N], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue"]]);
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelect",
   props: {
     density: { type: null, required: false },
@@ -7201,11 +7442,11 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$z = {
+const _hoisted_1$y = {
   ref: "selectRef",
   class: "onyx-component onyx-select-wrapper"
 };
-const _hoisted_2$s = {
+const _hoisted_2$r = {
   class: "onyx-select__wrapper",
   tabindex: "-1"
 };
@@ -7235,10 +7476,10 @@ const _hoisted_8$4 = {
   key: 0,
   class: "onyx-select__description onyx-text--small"
 };
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
-    _hoisted_1$z,
+    _hoisted_1$y,
     [
       createVNode($setup["OnyxBasicPopover"], {
         class: normalizeClass($setup.densityClass),
@@ -7257,7 +7498,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
           }), null, 16, ["show-focus", "autofocus"])
         ]),
         content: withCtx(() => [
-          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$s, [
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_2$r, [
             $setup.props.withSearch ? (openBlock(), createBlock($setup["OnyxMiniSearch"], mergeProps({
               key: 0,
               ref: "miniSearchRef",
@@ -7427,9 +7668,9 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     /* NEED_PATCH */
   );
 }
-const OnyxSelect = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$O], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue"]]);
+const OnyxSelect = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$M], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue"]]);
 const pageSize = 100;
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectPagination",
   props: {
     density: { type: null, required: false },
@@ -7480,11 +7721,11 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$y = ["aria-label"];
-const _hoisted_2$r = { class: "onyx-pagination__count" };
+const _hoisted_1$x = ["aria-label"];
+const _hoisted_2$q = { class: "onyx-pagination__count" };
 const _hoisted_3$j = ["aria-label", "disabled"];
 const _hoisted_4$e = ["aria-label", "disabled"];
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-pagination-skeleton", "onyx-text", $setup.densityClass])
@@ -7515,7 +7756,7 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["search-term", "label", "list-label", "options", "model-value", "value-label", "disabled"]),
     createElementVNode(
       "div",
-      _hoisted_2$r,
+      _hoisted_2$q,
       toDisplayString($setup.t("pagination.ofPages", { n: $setup.props.pages, pages: $setup.n($setup.props.pages, "decimal") })),
       1
       /* TEXT */
@@ -7538,10 +7779,10 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       createVNode($setup["OnyxIcon"], { icon: $setup.iconChevronRightSmall }, null, 8, ["icon"])
     ], 8, _hoisted_4$e)
-  ], 14, _hoisted_1$y));
+  ], 14, _hoisted_1$x));
 }
-const OnyxSelectPagination = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$N], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxSelectPagination.vue"]]);
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const OnyxSelectPagination = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$L], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxSelectPagination.vue"]]);
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "OnyxPagination",
   props: {
     density: { type: null, required: false },
@@ -7560,7 +7801,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     $setup["OnyxSelectPagination"],
     mergeProps($setup.props, {
@@ -7571,7 +7812,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxPagination = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$M], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxPagination.vue"]]);
+const OnyxPagination = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPagination/OnyxPagination.vue"]]);
 const SELECTION_FEATURE = Symbol("Selection");
 const SELECTION_MUTATION_ORDER = 1e3;
 const useSelection = (options) => createFeature((ctx) => {
@@ -7849,7 +8090,7 @@ const BASE_FEATURE = (options) => createFeature(({ skeleton }) => {
     }
   };
 });
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxDataGrid",
   props: {
@@ -7927,7 +8168,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxDataGridRenderer"], mergeProps(
     {
       "column-groups": $setup.rendererColumnGroups,
@@ -7962,7 +8203,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["column-groups", "columns", "rows", "scroll-container-attrs"]);
 }
-const OnyxDataGrid = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$L], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.vue"]]);
+const OnyxDataGrid = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGrid.vue"]]);
 const HIDE_COLUMNS_FEATURE = Symbol("HideColumnsFeature");
 const HIDDEN_COLUMN = Symbol("HiddenColumn");
 const useHideColumns = (options) => createFeature((ctx) => {
@@ -8068,7 +8309,7 @@ const useHideColumns = (options) => createFeature((ctx) => {
     }
   };
 });
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "OnyxResizeHandle",
   props: {
     element: { type: null, required: true },
@@ -8142,7 +8383,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "button",
     {
@@ -8176,7 +8417,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS, NEED_HYDRATION */
   );
 }
-const OnyxResizeHandle = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$K], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxResizeHandle/OnyxResizeHandle.vue"]]);
+const OnyxResizeHandle = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxResizeHandle/OnyxResizeHandle.vue"]]);
 const RESIZING_FEATURE = Symbol("Resizing");
 const FILLER_COLUMN = Symbol("FILLER_COLUMN");
 const useResizing = (options) => createFeature((ctx) => {
@@ -8318,7 +8559,7 @@ const DEFAULT_COMPARES = Object.freeze({
   skeleton: () => 0,
   boolean: BOOLEAN_COMPARE
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "SortAction",
   props: {
     columnLabel: { type: String, required: true },
@@ -8342,14 +8583,14 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxSystemButton"], {
     label: $setup.buttonLabel,
     icon: $setup.icon,
     color: "medium"
   }, null, 8, ["label", "icon"]);
 }
-const SortAction = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue"]]);
+const SortAction = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDataGrid/features/sorting/SortAction.vue"]]);
 const nextSortDirection = (current, skipNone) => {
   switch (current) {
     case "asc":
@@ -8592,7 +8833,7 @@ const all = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   useSorting,
   useStickyColumns
 }, Symbol.toStringTag, { value: "Module" }));
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxDatePicker",
   props: {
@@ -8664,9 +8905,9 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$x = { class: "onyx-datepicker__wrapper" };
-const _hoisted_2$q = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"];
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$w = { class: "onyx-datepicker__wrapper" };
+const _hoisted_2$p = ["id", "type", "required", "autofocus", "name", "readonly", "disabled", "aria-label", "title", "min", "max"];
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -8695,7 +8936,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$x, [
+          createElementVNode("div", _hoisted_1$w, [
             $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
               key: 0,
               class: "onyx-datepicker__loading",
@@ -8717,7 +8958,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
               title: $setup.props.hideLabel ? $setup.props.label : void 0,
               min: $setup.getNormalizedDate($setup.props.min),
               max: $setup.getNormalizedDate($setup.props.max)
-            }, $setup.restAttrs), null, 16, _hoisted_2$q)), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$p)), [
               [vModelDynamic, $setup.value],
               [$setup["vCustomValidity"]]
             ])
@@ -8731,9 +8972,9 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$I], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue"]]);
+const OnyxDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue"]]);
 const DIALOG_ALIGNMENTS = ["left", "center", "right"];
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "OnyxDialog",
   props: {
     density: { type: null, required: false },
@@ -8742,6 +8983,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     position: { type: String, required: false },
     alignment: { type: String, required: false },
     disabled: { type: Boolean, required: false },
+    clipping: { type: Boolean, required: false, default: true },
     nonDismissible: { type: Boolean, required: false }
   },
   emits: ["update:open"],
@@ -8765,15 +9007,15 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$w = { class: "onyx-dialog__header" };
-const _hoisted_2$p = { class: "onyx-dialog__headline" };
+const _hoisted_1$v = { class: "onyx-dialog__header" };
+const _hoisted_2$o = { class: "onyx-dialog__headline" };
 const _hoisted_3$i = { class: "onyx-dialog__headline-content" };
 const _hoisted_4$d = { class: "onyx-dialog__body" };
 const _hoisted_5$a = {
   key: 0,
   class: "onyx-dialog__footer"
 };
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicPopover"], mergeProps($setup.props, {
     open: $setup.isExpanded,
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.isExpanded = $event),
@@ -8783,8 +9025,8 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "trigger", { trigger })
     ]),
     content: withCtx(() => [
-      createElementVNode("div", _hoisted_1$w, [
-        createElementVNode("div", _hoisted_2$p, [
+      createElementVNode("div", _hoisted_1$v, [
+        createElementVNode("div", _hoisted_2$o, [
           createElementVNode("div", _hoisted_3$i, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
@@ -8822,101 +9064,48 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["open", "class"]);
 }
-const OnyxDialog = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue"]]);
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const OnyxDialog = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.vue"]]);
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "OnyxForm",
   props: {
     disabled: { type: Boolean, required: false, default: false },
     showError: { type: null, required: false, default: "touched" },
-    requiredMarker: { type: null, required: false },
-    skeleton: { type: Boolean, required: false },
-    density: { type: null, required: false }
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    provideFormContext(props);
-    provideSkeletonContext(props);
-    const { densityClass } = useDensity(props);
-    const __returned__ = { props, densityClass };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "form",
-    {
-      class: normalizeClass({
-        "onyx-component": true,
-        "onyx-form": true,
-        ...$setup.densityClass
-      })
-    },
-    [
-      renderSlot(_ctx.$slots, "default")
-    ],
-    2
-    /* CLASS */
-  );
-}
-const OnyxForm = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue"]]);
-const HEADLINE_TYPES = ["h1", "h2", "h3", "h4", "h5", "h6"];
-const ICON_SIZES = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
-  __name: "OnyxIconButton",
-  props: {
-    density: { type: null, required: false },
-    autofocus: { type: Boolean, required: false },
-    link: { type: null, required: false },
-    label: { type: String, required: true },
-    disabled: { type: [Boolean, Symbol], required: false, default: FORM_INJECTED_SYMBOL },
-    type: { type: null, required: false, default: "button" },
-    color: { type: null, required: false, default: "primary" },
-    loading: { type: Boolean, required: false },
-    icon: { type: String, required: false },
-    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const { densityClass } = useDensity(props);
-    const skeleton = useSkeletonContext(props);
-    const __returned__ = { props, densityClass, skeleton, ButtonOrLinkLayout, OnyxIcon, OnyxLoadingIndicator, OnyxSkeleton };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
-    key: 0,
-    class: normalizeClass(["onyx-icon-button-skeleton", $setup.densityClass])
-  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.props, {
-    "aria-label": $setup.props.label,
-    title: $setup.props.label,
-    class: [
-      "onyx-component",
-      "onyx-icon-button",
-      `onyx-icon-button--${$setup.props.color}`,
-      { "onyx-icon-button--loading": $setup.props.loading },
-      $setup.densityClass
-    ]
-  }), {
-    default: withCtx(() => [
-      $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
-        key: 0,
-        type: "circle"
-      })) : $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
-        key: 1,
-        icon: $setup.props.icon
-      }, null, 8, ["icon"])) : renderSlot(_ctx.$slots, "default", { key: 2 })
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 16, ["aria-label", "title", "class"]));
+    requiredMarker: { type: null, required: false },
+    skeleton: { type: Boolean, required: false },
+    density: { type: null, required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    provideFormContext(props);
+    provideSkeletonContext(props);
+    const { densityClass } = useDensity(props);
+    const __returned__ = { props, densityClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "form",
+    {
+      class: normalizeClass({
+        "onyx-component": true,
+        "onyx-form": true,
+        ...$setup.densityClass
+      })
+    },
+    [
+      renderSlot(_ctx.$slots, "default")
+    ],
+    2
+    /* CLASS */
+  );
 }
-const OnyxIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$F], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue"]]);
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const OnyxForm = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue"]]);
+const HEADLINE_TYPES = ["h1", "h2", "h3", "h4", "h5", "h6"];
+const ICON_SIZES = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"];
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxImage",
   props: {
@@ -8955,10 +9144,10 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$v = ["src", "alt"];
-const _hoisted_2$o = ["src", "alt"];
+const _hoisted_1$u = ["src", "alt"];
+const _hoisted_2$n = ["src", "alt"];
 const _hoisted_3$h = { class: "onyx-image__alt onyx-text--small" };
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "figure",
     mergeProps($setup.rootAttrs, {
@@ -8983,7 +9172,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
             src: $setup.imageSrc.light,
             alt: $setup.props.alt,
             onError: _cache[0] || (_cache[0] = ($event) => $setup.isError = true)
-          }), null, 16, _hoisted_1$v),
+          }), null, 16, _hoisted_1$u),
           $setup.imageSrc.dark ? (openBlock(), createElementBlock("img", mergeProps({
             key: 0,
             class: "onyx-image__source onyx-image__source--dark"
@@ -8991,7 +9180,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
             src: $setup.imageSrc.dark,
             alt: $setup.props.alt,
             onError: _cache[1] || (_cache[1] = ($event) => $setup.isError = true)
-          }), null, 16, _hoisted_2$o)) : createCommentVNode("v-if", true),
+          }), null, 16, _hoisted_2$n)) : createCommentVNode("v-if", true),
           $setup.isError ? (openBlock(), createElementBlock(
             "div",
             mergeProps({
@@ -9024,7 +9213,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxImage = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$E], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxImage/OnyxImage.vue"]]);
+const OnyxImage = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxImage/OnyxImage.vue"]]);
 const IMAGE_SHAPES = ["rounded", "circle", "clip", "clip-inverted"];
 const useLenientMaxLengthValidation = (options) => {
   const { t } = injectI18n();
@@ -9065,7 +9254,7 @@ const MOBILE_NAV_BAR_INJECTION_KEY = Symbol();
 const NAV_BAR_IS_TOP_LEVEL_INJECTION_KEY = Symbol();
 const NAV_BAR_MORE_LIST_INJECTION_KEY = Symbol();
 const NAV_BAR_MORE_LIST_TARGET_INJECTION_KEY = Symbol();
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "OnyxSeparator",
   props: {
     orientation: { type: null, required: false, default: "horizontal" }
@@ -9082,16 +9271,16 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$u = ["aria-orientation"];
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$t = ["aria-orientation"];
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["onyx-component onyx-separator", { "onyx-separator--vertical": $setup.isVertical }]),
     role: "separator",
     "aria-orientation": $setup.props.orientation
-  }, null, 10, _hoisted_1$u);
+  }, null, 10, _hoisted_1$t);
 }
-const OnyxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$D], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSeparator/OnyxSeparator.vue"]]);
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const OnyxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSeparator/OnyxSeparator.vue"]]);
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxInput",
   props: {
@@ -9179,10 +9368,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$t = { class: "onyx-input__wrapper" };
-const _hoisted_2$n = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "maxlength", "minlength", "aria-label", "title"];
+const _hoisted_1$s = { class: "onyx-input__wrapper" };
+const _hoisted_2$m = ["id", "placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "maxlength", "minlength", "aria-label", "title"];
 const _hoisted_3$g = ["aria-label", "title"];
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -9211,7 +9400,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
         message: $setup.messages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$t, [
+          createElementVNode("div", _hoisted_1$s, [
             renderSlot(_ctx.$slots, "leading"),
             $setup.slots.leading ? (openBlock(), createBlock($setup["OnyxSeparator"], {
               key: 0,
@@ -9242,7 +9431,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
               minlength: $setup.props.minlength,
               "aria-label": $setup.props.hideLabel ? $setup.props.label : void 0,
               title: $setup.props.hideLabel ? $setup.props.label : void 0
-            }, $setup.restAttrs), null, 16, _hoisted_2$n), [
+            }, $setup.restAttrs), null, 16, _hoisted_2$m), [
               [vModelDynamic, $setup.modelValue],
               [$setup["vCustomValidity"]]
             ]),
@@ -9288,9 +9477,9 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxInput = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue"]]);
+const OnyxInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue"]]);
 const INPUT_TYPES = ["email", "password", "search", "tel", "text", "url"];
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "OnyxLink",
   props: {
     href: { type: String, required: false },
@@ -9305,7 +9494,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     $setup["OnyxRouterLink"],
     mergeProps({ class: "onyx-component onyx-link" }, $setup.props),
@@ -9327,8 +9516,8 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   );
 }
-const OnyxLink = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$B], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue"]]);
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const OnyxLink = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxLink/OnyxLink.vue"]]);
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "OnyxMobileNavButton",
   props: {
     label: { type: String, required: true },
@@ -9350,12 +9539,12 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$s = { class: "onyx-component onyx-mobile-nav-button" };
-const _hoisted_2$m = ["aria-label", "disabled"];
+const _hoisted_1$r = { class: "onyx-component onyx-mobile-nav-button" };
+const _hoisted_2$l = ["aria-label", "disabled"];
 const _hoisted_3$f = { class: "onyx-mobile-nav-button__flyout" };
 const _hoisted_4$c = { class: "onyx-mobile-nav-button__menu" };
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$s, [
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$r, [
     createElementVNode("button", {
       type: "button",
       class: normalizeClass(["onyx-mobile-nav-button__trigger", { "onyx-mobile-nav-button__trigger--active": $setup.props.open }]),
@@ -9366,7 +9555,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode($setup["OnyxIcon"], {
         icon: $setup.props.open ? $setup.iconX : $setup.props.icon
       }, null, 8, ["icon"])
-    ], 10, _hoisted_2$m),
+    ], 10, _hoisted_2$l),
     withDirectives(createElementVNode(
       "div",
       _hoisted_3$f,
@@ -9403,8 +9592,8 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("v-if", true)
   ]);
 }
-const OnyxMobileNavButton = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$A], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue"]]);
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const OnyxMobileNavButton = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue"]]);
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "OnyxModal",
   props: {
     density: { type: null, required: false },
@@ -9430,8 +9619,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$r = { class: "onyx-modal__header" };
-const _hoisted_2$l = { class: "onyx-modal__headline" };
+const _hoisted_1$q = { class: "onyx-modal__header" };
+const _hoisted_2$k = { class: "onyx-modal__headline" };
 const _hoisted_3$e = { class: "onyx-modal__headline-content" };
 const _hoisted_4$b = ["id"];
 const _hoisted_5$9 = { class: "onyx-modal__body" };
@@ -9439,7 +9628,7 @@ const _hoisted_6$7 = {
   key: 0,
   class: "onyx-modal__footer"
 };
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps($setup.props, {
     modal: "",
     class: ["onyx-modal", $setup.densityClass],
@@ -9447,8 +9636,8 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.emit("update:open", $event))
   }), {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$r, [
-        createElementVNode("div", _hoisted_2$l, [
+      createElementVNode("div", _hoisted_1$q, [
+        createElementVNode("div", _hoisted_2$k, [
           createElementVNode("div", _hoisted_3$e, [
             renderSlot(_ctx.$slots, "headline", {
               label: $setup.props.label
@@ -9493,8 +9682,8 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["class", "aria-describedby"]);
 }
-const OnyxModal = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxModal/OnyxModal.vue"]]);
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const OnyxModal = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxModal/OnyxModal.vue"]]);
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavAppArea",
   props: {
     link: { type: null, required: false, default: "/" },
@@ -9513,12 +9702,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$q = ["src", "alt"];
-const _hoisted_2$k = {
+const _hoisted_1$p = ["src", "alt"];
+const _hoisted_2$j = {
   key: 1,
   class: "onyx-text-small onyx-truncation-ellipsis"
 };
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxRouterLink"], mergeProps($setup.linkProps, {
     class: "onyx-component onyx-nav-app-area",
     "aria-label": $setup.buttonLabel
@@ -9532,10 +9721,10 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
           class: "onyx-nav-app-area__logo",
           width: "24",
           height: "24"
-        }, null, 8, _hoisted_1$q)) : createCommentVNode("v-if", true),
+        }, null, 8, _hoisted_1$p)) : createCommentVNode("v-if", true),
         $setup.props.appName ? (openBlock(), createElementBlock(
           "span",
-          _hoisted_2$k,
+          _hoisted_2$j,
           toDisplayString($setup.props.appName),
           1
           /* TEXT */
@@ -9546,8 +9735,8 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["aria-label"]);
 }
-const OnyxNavAppArea = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue"]]);
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const OnyxNavAppArea = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue"]]);
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "OnyxSelectDialog",
   props: {
     open: { type: [Boolean, null], required: false, skipCheck: true, default: false },
@@ -9580,14 +9769,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$p = ["id"];
-const _hoisted_2$j = ["autofocus", "value", "checked", "aria-label"];
+const _hoisted_1$o = ["id"];
+const _hoisted_2$i = ["autofocus", "value", "checked", "aria-label"];
 const _hoisted_3$d = { class: "onyx-select-dialog__label" };
 const _hoisted_4$a = {
   key: 0,
   class: "onyx-text--small"
 };
-function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxModal"], mergeProps($setup.props, {
     open: $setup.props.open,
     class: "onyx-select-dialog",
@@ -9657,7 +9846,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
                                   checked: $setup.props.modelValue === option.value,
                                   "aria-label": option.label,
                                   required: ""
-                                }, null, 8, _hoisted_2$j)
+                                }, null, 8, _hoisted_2$i)
                               ]),
                               _: 2
                               /* DYNAMIC */
@@ -9696,7 +9885,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
           32
           /* NEED_HYDRATION */
         )
-      ], 40, _hoisted_1$p)
+      ], 40, _hoisted_1$o)
     ]),
     _: 2
     /* DYNAMIC */
@@ -9710,11 +9899,11 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "label"]);
 }
-const OnyxSelectDialog = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectDialog/OnyxSelectDialog.vue"]]);
+const OnyxSelectDialog = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSelectDialog/OnyxSelectDialog.vue"]]);
 const autoImage = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 206 110"><g clip-path="url(#auto-a)"><mask id="auto-d" fill="var(--onyx-color-neutral-grayscale-white)"><path d="M0 4a4 4 0 0 1 4-4h99v110H4a4 4 0 0 1-4-4z"/></mask><path fill="var(--onyx-color-neutral-steel-1200)" d="M0 4a4 4 0 0 1 4-4h99v110H4a4 4 0 0 1-4-4z"/><g filter="url(#auto-b)"><mask id="auto-c" fill="var(--onyx-color-neutral-grayscale-white)"><path d="M0 26h46v84H0z"/></mask><path fill="var(--onyx-color-neutral-steel-1100)" d="M0 26h46v84H0z"/><path fill="var(--onyx-color-neutral-steel-900)" d="M46 26h-1v84h2V26z" mask="url(#auto-c)"/></g><path fill="var(--onyx-color-neutral-steel-1100)" stroke="var(--onyx-color-neutral-steel-900)" d="M.5.5h281v25H.5z"/><path fill="var(--onyx-color-onyx-500)" d="M10 12.5a2.5 2.5 0 0 1 2.5-2.5h35a2.5 2.5 0 0 1 0 5h-35a2.5 2.5 0 0 1-2.5-2.5"/><path fill="var(--onyx-color-neutral-steel-900)" d="M68 12.5a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5M59 43a7 7 0 0 1 7-7h54a7 7 0 1 1 0 14H66a7 7 0 0 1-7-7m0 19a2 2 0 0 1 2-2h85a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h120a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h95a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2"/></g><path fill="var(--onyx-color-neutral-steel-900)" d="M-1 4a5 5 0 0 1 5-5h99v2H4a3 3 0 0 0-3 3zm104 107H4a5 5 0 0 1-5-5h2a3 3 0 0 0 3 3h99zm-99 0a5 5 0 0 1-5-5V4a5 5 0 0 1 5-5v2a3 3 0 0 0-3 3v102a3 3 0 0 0 3 3zM103 0v110z" mask="url(#auto-d)"/><g clip-path="url(#auto-e)"><mask id="auto-f" fill="var(--onyx-color-neutral-grayscale-white)"><path d="M103 0h99a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4h-99z"/></mask><path fill="var(--onyx-color-neutral-steel-100)" d="M103 0h99a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4h-99z"/><path fill="var(--onyx-color-neutral-grayscale-white)" stroke="var(--onyx-color-neutral-steel-300)" d="M.5.5h281v25H.5z"/><path fill="var(--onyx-color-neutral-steel-300)" d="M68 12.5a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5m48 0a2.5 2.5 0 0 1 2.5-2.5h33a2.5 2.5 0 1 1 0 5h-33a2.5 2.5 0 0 1-2.5-2.5m47 0a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5M59 43a7 7 0 0 1 7-7h54a7 7 0 1 1 0 14H66a7 7 0 0 1-7-7m0 19a2 2 0 0 1 2-2h85a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h120a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h95a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2"/></g><path fill="var(--onyx-color-neutral-steel-300)" d="M103-1h99a5 5 0 0 1 5 5h-2a3 3 0 0 0-3-3h-99zm104 107a5 5 0 0 1-5 5h-99v-2h99a3 3 0 0 0 3-3zm-104 4V0zM202-1a5 5 0 0 1 5 5v102a5 5 0 0 1-5 5v-2a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3z" mask="url(#auto-f)"/><defs><clipPath id="auto-a"><path fill="var(--onyx-color-neutral-grayscale-white)" d="M0 4a4 4 0 0 1 4-4h99v110H4a4 4 0 0 1-4-4z"/></clipPath><clipPath id="auto-e"><path fill="var(--onyx-color-neutral-grayscale-white)" d="M103 0h99a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4h-99z"/></clipPath><filter id="auto-b" width="62" height="100" x="-6" y="18" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_16217_22720"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_16217_22720" result="shape"/></filter></defs></svg>';
 const darkImage = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 206 110"><g clip-path="url(#dark-a)"><path fill="var(--onyx-color-neutral-steel-1200)" d="M0 4a4 4 0 0 1 4-4h198a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"/><g filter="url(#dark-b)"><mask id="dark-c" fill="#fff"><path d="M0 26h46v84H0z"/></mask><path fill="var(--onyx-color-neutral-steel-1100)" d="M0 26h46v84H0z"/><path fill="var(--onyx-color-neutral-steel-900)" d="M46 26h-1v84h2V26z" mask="url(#dark-c)"/></g><path fill="var(--onyx-color-neutral-steel-1100)" stroke="var(--onyx-color-neutral-steel-900)" d="M.5.5h281v25H.5z"/><path fill="var(--onyx-color-onyx-500)" d="M10 12.5a2.5 2.5 0 0 1 2.5-2.5h35a2.5 2.5 0 0 1 0 5h-35a2.5 2.5 0 0 1-2.5-2.5"/><path fill="var(--onyx-color-neutral-steel-900)" d="M68 12.5a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5m48 0a2.5 2.5 0 0 1 2.5-2.5h33a2.5 2.5 0 1 1 0 5h-33a2.5 2.5 0 0 1-2.5-2.5m47 0a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5M59 43a7 7 0 0 1 7-7h54a7 7 0 1 1 0 14H66a7 7 0 0 1-7-7m0 19a2 2 0 0 1 2-2h85a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h120a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h95a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2"/></g><path stroke="var(--onyx-color-neutral-steel-900)" d="M4 .5h198a3.5 3.5 0 0 1 3.5 3.5v102a3.5 3.5 0 0 1-3.5 3.5H4A3.5 3.5 0 0 1 .5 106V4A3.5 3.5 0 0 1 4 .5Z"/><defs><clipPath id="dark-a"><path fill="#fff" d="M0 4a4 4 0 0 1 4-4h198a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"/></clipPath><filter id="dark-b" width="62" height="100" x="-6" y="18" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_16217_22757"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_16217_22757" result="shape"/></filter></defs></svg>';
 const lightImage = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 206 110"><g clip-path="url(#light-a)"><path fill="var(--onyx-color-neutral-steel-100)" d="M0 4a4 4 0 0 1 4-4h198a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"/><g filter="url(#light-b)"><mask id="light-c" fill="var(--onyx-color-neutral-grayscale-white)"><path d="M0 26h46v84H0z"/></mask><path fill="var(--onyx-color-neutral-grayscale-white)" d="M0 26h46v84H0z"/><path fill="var(--onyx-color-neutral-steel-300)" d="M46 26h-1v84h2V26z" mask="url(#light-c)"/></g><path fill="var(--onyx-color-neutral-grayscale-white)" stroke="var(--onyx-color-neutral-steel-300)" d="M.5.5h281v25H.5z"/><path fill="var(--onyx-color-onyx-500)" d="M10 12.5a2.5 2.5 0 0 1 2.5-2.5h35a2.5 2.5 0 0 1 0 5h-35a2.5 2.5 0 0 1-2.5-2.5"/><path fill="var(--onyx-color-neutral-steel-300)" d="M68 12.5a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5m48 0a2.5 2.5 0 0 1 2.5-2.5h33a2.5 2.5 0 1 1 0 5h-33a2.5 2.5 0 0 1-2.5-2.5m47 0a2.5 2.5 0 0 1 2.5-2.5h34a2.5 2.5 0 1 1 0 5h-34a2.5 2.5 0 0 1-2.5-2.5M59 43a7 7 0 0 1 7-7h54a7 7 0 1 1 0 14H66a7 7 0 0 1-7-7m0 19a2 2 0 0 1 2-2h85a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h120a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2m0 10a2 2 0 0 1 2-2h95a2 2 0 1 1 0 4H61a2 2 0 0 1-2-2"/></g><path stroke="var(--onyx-color-neutral-steel-300)" d="M4 .5h198a3.5 3.5 0 0 1 3.5 3.5v102a3.5 3.5 0 0 1-3.5 3.5H4A3.5 3.5 0 0 1 .5 106V4A3.5 3.5 0 0 1 4 .5Z"/><defs><clipPath id="light-a"><path fill="var(--onyx-color-neutral-grayscale-white)" d="M0 4a4 4 0 0 1 4-4h198a4 4 0 0 1 4 4v102a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"/></clipPath><filter id="light-b" width="62" height="100" x="-6" y="18" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_16217_22745"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_16217_22745" result="shape"/></filter></defs></svg>';
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "OnyxColorSchemeDialog",
   props: {
     open: { type: [Boolean, null], required: false, skipCheck: true, default: false },
@@ -9754,7 +9943,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxSelectDialog"], mergeProps({ class: "onyx-color-scheme-dialog" }, $setup.props, {
     label: $setup.t("colorScheme.headline"),
     options: $setup.options,
@@ -9773,8 +9962,8 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["label", "options", "open"]);
 }
-const OnyxColorSchemeDialog = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/OnyxColorSchemeDialog.vue"]]);
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const OnyxColorSchemeDialog = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeDialog/OnyxColorSchemeDialog.vue"]]);
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "OnyxColorSchemeMenuItem",
   props: {
     modelValue: { type: String, required: true }
@@ -9793,8 +9982,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$o = { class: "onyx-color-scheme-menu-item__value" };
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$n = { class: "onyx-color-scheme-menu-item__value" };
+function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxMenuItem"], {
     class: "onyx-component onyx-color-scheme-menu-item",
     onClick: _cache[2] || (_cache[2] = ($event) => $setup.isOpen = true)
@@ -9809,7 +9998,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
         ),
         createElementVNode(
           "span",
-          _hoisted_1$o,
+          _hoisted_1$n,
           toDisplayString($setup.t(`colorScheme.${$setup.props.modelValue}.label`)),
           1
           /* TEXT */
@@ -9828,8 +10017,8 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   });
 }
-const OnyxColorSchemeMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.vue"]]);
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const OnyxColorSchemeMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxColorSchemeMenuItem/OnyxColorSchemeMenuItem.vue"]]);
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "OnyxLanguageMenuItem",
   props: {
     modelValue: { type: null, required: true },
@@ -9854,8 +10043,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$n = { class: "onyx-language-menu-item__value" };
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$m = { class: "onyx-language-menu-item__value" };
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxMenuItem"], {
     class: "onyx-component onyx-language-menu-item",
     onClick: _cache[2] || (_cache[2] = ($event) => $setup.isOpen = true)
@@ -9870,7 +10059,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
         ),
         createElementVNode(
           "span",
-          _hoisted_1$n,
+          _hoisted_1$m,
           toDisplayString($setup.currentValueLabel),
           1
           /* TEXT */
@@ -9901,8 +10090,8 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   });
 }
-const OnyxLanguageMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxLanguageMenuItem/OnyxLanguageMenuItem.vue"]]);
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const OnyxLanguageMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxLanguageMenuItem/OnyxLanguageMenuItem.vue"]]);
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavItemFacade",
   props: {
     link: { type: null, required: false },
@@ -9923,7 +10112,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxMenuItem"], mergeProps($setup.props, {
     link: $setup.hasChildren && $setup.props.context !== "navbar" ? void 0 : $setup.props.link,
     class: {
@@ -9949,8 +10138,8 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["link", "class", "open"]);
 }
-const OnyxNavItemFacade = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItemFacade/OnyxNavItemFacade.vue"]]);
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const OnyxNavItemFacade = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItemFacade/OnyxNavItemFacade.vue"]]);
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxNavItem",
   props: {
@@ -9996,12 +10185,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$m = { class: "onyx-nav-item-wrapper__controls" };
-const _hoisted_2$i = {
+const _hoisted_1$l = { class: "onyx-nav-item-wrapper__controls" };
+const _hoisted_2$h = {
   role: "menu",
   class: "onyx-nav-item-wrapper__mobile-children"
 };
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -10017,7 +10206,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
           }
         }, $setup.rootAttrs),
         [
-          createElementVNode("div", _hoisted_1$m, [
+          createElementVNode("div", _hoisted_1$l, [
             createVNode($setup["OnyxButton"], {
               label: $setup.t("back"),
               mode: "plain",
@@ -10045,7 +10234,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
               /* STABLE_FRAGMENT */
             )) : createCommentVNode("v-if", true)
           ]),
-          createElementVNode("ul", _hoisted_2$i, [
+          createElementVNode("ul", _hoisted_2$h, [
             renderSlot(_ctx.$slots, "children")
           ])
         ],
@@ -10154,7 +10343,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-const OnyxNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue"]]);
+const OnyxNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxNavItem/OnyxNavItem.vue"]]);
 const useTimer = (endTime) => {
   const intervalId = ref();
   const timeLeft = ref(calculateTimeLeft(new Date(endTime.value).getTime()));
@@ -10215,7 +10404,7 @@ const timeToDurationString = (timeLeft) => {
   const { hours, minutes, seconds } = getTimeFragments(timeLeft);
   return `PT${hours}H${minutes}M${seconds}S`;
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "OnyxTimer",
   props: {
     endTime: { type: null, required: true },
@@ -10246,13 +10435,13 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$l = ["aria-label"];
-const _hoisted_2$h = {
+const _hoisted_1$k = ["aria-label"];
+const _hoisted_2$g = {
   key: 0,
   class: "onyx-timer__label"
 };
 const _hoisted_3$c = ["datetime"];
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: "onyx-component onyx-timer onyx-text onyx-truncation-ellipsis",
     role: "timer",
@@ -10260,7 +10449,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     !$setup.props.hideLabel ? (openBlock(), createElementBlock(
       "span",
-      _hoisted_2$h,
+      _hoisted_2$g,
       toDisplayString($setup.props.label),
       1
       /* TEXT */
@@ -10269,10 +10458,10 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
       datetime: $setup.timeToDurationString($setup.timeLeft),
       class: "onyx-timer__time"
     }, toDisplayString($setup.formattedTime), 9, _hoisted_3$c)
-  ], 8, _hoisted_1$l);
+  ], 8, _hoisted_1$k);
 }
-const OnyxTimer = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxTimer/OnyxTimer.vue"]]);
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const OnyxTimer = /* @__PURE__ */ _export_sfc(_sfc_main$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({
   __name: "UserMenuLayout",
   props: {
     isMobile: { type: Boolean, required: true },
@@ -10297,10 +10486,10 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$k = { class: "onyx-component" };
-const _hoisted_2$g = { class: "onyx-user-menu__footer onyx-text--small" };
-function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$k, [
+const _hoisted_1$j = { class: "onyx-component" };
+const _hoisted_2$f = { class: "onyx-user-menu__footer onyx-text--small" };
+function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$j, [
     $setup.props.isMobile ? (openBlock(), createElementBlock(
       Fragment,
       { key: 0 },
@@ -10344,7 +10533,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
       !!$setup.slots.footer ? {
         name: "footer",
         fn: withCtx(() => [
-          createElementVNode("div", _hoisted_2$g, [
+          createElementVNode("div", _hoisted_2$f, [
             renderSlot(_ctx.$slots, "footer")
           ])
         ]),
@@ -10353,8 +10542,8 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     ]), 1032, ["open", "label", "disabled"]))
   ]);
 }
-const UserMenuLayout = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue"]]);
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const UserMenuLayout = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue"]]);
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "OnyxUserMenu",
   props: {
     fullName: { type: String, required: true },
@@ -10388,8 +10577,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$j = { class: "onyx-truncation-ellipsis" };
-const _hoisted_2$f = { class: "onyx-user-menu__header" };
+const _hoisted_1$i = { class: "onyx-truncation-ellipsis" };
+const _hoisted_2$e = { class: "onyx-user-menu__header" };
 const _hoisted_3$b = { class: "onyx-truncation-ellipsis" };
 const _hoisted_4$9 = { class: "onyx-user-menu__username onyx-text onyx-truncation-ellipsis" };
 const _hoisted_5$8 = {
@@ -10397,7 +10586,7 @@ const _hoisted_5$8 = {
   class: "onyx-user-menu__description onyx-text--small onyx-truncation-ellipsis"
 };
 const _hoisted_6$6 = { class: "onyx-user-menu__options" };
-function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["UserMenuLayout"], {
     "flyout-open": $setup.flyoutOpen,
     "onUpdate:flyoutOpen": _cache[0] || (_cache[0] = ($event) => $setup.flyoutOpen = $event),
@@ -10422,7 +10611,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
           ),
           createElementVNode(
             "span",
-            _hoisted_1$j,
+            _hoisted_1$i,
             toDisplayString($setup.props.fullName),
             1
             /* TEXT */
@@ -10433,7 +10622,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
       )
     ]),
     header: withCtx(() => [
-      createElementVNode("div", _hoisted_2$f, [
+      createElementVNode("div", _hoisted_2$e, [
         createVNode(
           $setup["OnyxAvatar"],
           mergeProps($setup.avatar, { size: "48px" }),
@@ -10476,8 +10665,8 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["flyout-open", "class", "is-mobile", "disabled"]);
 }
-const OnyxUserMenu = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue"]]);
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const OnyxUserMenu = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue"]]);
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "OnyxNavBar",
   props: {
     appName: { type: String, required: false },
@@ -10547,8 +10736,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$i = { class: "onyx-nav-bar__content onyx-grid-container" };
-const _hoisted_2$e = {
+const _hoisted_1$h = { class: "onyx-nav-bar__content onyx-grid-container" };
+const _hoisted_2$d = {
   key: 0,
   class: "onyx-nav-bar__mobile-page onyx-truncation-ellipsis"
 };
@@ -10567,7 +10756,7 @@ const _hoisted_8$3 = {
   key: 1,
   class: "onyx-nav-bar__context"
 };
-function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "header",
     {
@@ -10575,8 +10764,8 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["onyx-component onyx-nav-bar", { "onyx-nav-bar--mobile": $setup.actualIsMobile }])
     },
     [
-      createElementVNode("div", _hoisted_1$i, [
-        $setup.actualIsMobile && $setup.slots.mobileActivePage && !$setup.isBurgerOpen && !$setup.isContextOpen ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
+      createElementVNode("div", _hoisted_1$h, [
+        $setup.actualIsMobile && $setup.slots.mobileActivePage && !$setup.isBurgerOpen && !$setup.isContextOpen ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
           renderSlot(_ctx.$slots, "mobileActivePage")
         ])) : $setup.props.appName || $setup.props.logoUrl || $setup.slots.appArea ? (openBlock(), createBlock($setup["OnyxNavAppArea"], mergeProps({
           key: 1,
@@ -10726,7 +10915,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxNavBar = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue"]]);
+const OnyxNavBar = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue"]]);
 const useRelativeTimeFormat = (options) => {
   const { locale, t } = injectI18n();
   const format = computed(() => new Intl.RelativeTimeFormat(locale.value, unref(options.options)));
@@ -10774,7 +10963,7 @@ const useRelativeTimeFormat = (options) => {
     timeAgo
   };
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationCard",
   props: {
     density: { type: null, required: false },
@@ -10802,11 +10991,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$h = {
+const _hoisted_1$g = {
   key: 0,
   class: "onyx-notification-card-skeleton"
 };
-const _hoisted_2$d = {
+const _hoisted_2$c = {
   key: 1,
   class: "onyx-notification-card__content"
 };
@@ -10819,14 +11008,14 @@ const _hoisted_8$2 = {
   key: 0,
   class: "onyx-notification-card__actions onyx-density-compact"
 };
-function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
       class: normalizeClass(["onyx-component", "onyx-notification-card", $setup.densityClass])
     },
     [
-      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
+      $setup.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
         createVNode($setup["OnyxSkeleton"], { class: "onyx-notification-card-skeleton__header" }),
         (openBlock(), createElementBlock(
           Fragment,
@@ -10840,7 +11029,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
           64
           /* STABLE_FRAGMENT */
         ))
-      ])) : (openBlock(), createElementBlock("div", _hoisted_2$d, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
         createElementVNode("div", null, [
           createElementVNode("div", _hoisted_3$9, [
             createElementVNode("div", _hoisted_4$7, [
@@ -10916,8 +11105,8 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxNotificationCard = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationCard/OnyxNotificationCard.vue"]]);
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const OnyxNotificationCard = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationCard/OnyxNotificationCard.vue"]]);
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "OnyxNotificationDot",
   props: {
     hidden: { type: Boolean, required: false, default: false },
@@ -10931,9 +11120,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$g = { class: "onyx-component onyx-notification-dot" };
-function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$g, [
+const _hoisted_1$f = { class: "onyx-component onyx-notification-dot" };
+function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$f, [
     renderSlot(_ctx.$slots, "default"),
     !$setup.props.hidden ? (openBlock(), createBlock($setup["OnyxBadge"], {
       key: 0,
@@ -10943,8 +11132,8 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["color"])) : createCommentVNode("v-if", true)
   ]);
 }
-const OnyxNotificationDot = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationDot/OnyxNotificationDot.vue"]]);
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const OnyxNotificationDot = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxNotificationDot/OnyxNotificationDot.vue"]]);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "OnyxPageLayout",
   props: {
     skeleton: { type: Boolean, required: false },
@@ -10961,11 +11150,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$e = {
   key: 0,
   class: "onyx-page__sidebar"
 };
-const _hoisted_2$c = { class: "onyx-page__main" };
+const _hoisted_2$b = { class: "onyx-page__main" };
 const _hoisted_3$8 = {
   key: 1,
   class: "onyx-page__sidebar onyx-page__sidebar--right"
@@ -10974,7 +11163,7 @@ const _hoisted_4$6 = {
   key: 2,
   class: "onyx-page__footer"
 };
-function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -10985,10 +11174,10 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
       ]])
     },
     [
-      $setup.slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+      $setup.slots.sidebar ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
         renderSlot(_ctx.$slots, "sidebar")
       ])) : createCommentVNode("v-if", true),
-      createElementVNode("main", _hoisted_2$c, [
+      createElementVNode("main", _hoisted_2$b, [
         createElementVNode(
           "div",
           {
@@ -11012,8 +11201,8 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxPageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.vue"]]);
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const OnyxPageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.vue"]]);
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "OnyxProgressItem",
   props: {
     density: { type: null, required: false },
@@ -11039,10 +11228,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$e = ["disabled"];
-const _hoisted_2$b = { class: "onyx-progress-item__indicator" };
+const _hoisted_1$d = ["disabled"];
+const _hoisted_2$a = { class: "onyx-progress-item__indicator" };
 const _hoisted_3$7 = { class: "onyx-progress-item__label" };
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-progress-item-skeleton", "onyx-text", $setup.densityClass])
@@ -11058,7 +11247,7 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     type: "button",
     disabled: $setup.props.disabled
   }, [
-    createElementVNode("span", _hoisted_2$b, [
+    createElementVNode("span", _hoisted_2$a, [
       $setup.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
         key: 0,
         icon: $setup.icon
@@ -11087,9 +11276,9 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
         )
       ])
     ])
-  ], 10, _hoisted_1$e));
+  ], 10, _hoisted_1$d));
 }
-const OnyxProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressItem/OnyxProgressItem.vue"]]);
+const OnyxProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressItem/OnyxProgressItem.vue"]]);
 const PROGRESS_ITEM_STATUS = [
   "default",
   "active",
@@ -11097,7 +11286,7 @@ const PROGRESS_ITEM_STATUS = [
   "visited",
   "invalid"
 ];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "OnyxProgressSteps",
   props: {
     density: { type: null, required: false },
@@ -11152,8 +11341,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$d = { class: "onyx-progress-steps__scroll-container" };
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$c = { class: "onyx-progress-steps__scroll-container" };
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -11165,7 +11354,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     },
     [
-      createElementVNode("div", _hoisted_1$d, [
+      createElementVNode("div", _hoisted_1$c, [
         (openBlock(true), createElementBlock(
           Fragment,
           null,
@@ -11205,8 +11394,8 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxProgressSteps = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressSteps/OnyxProgressSteps.vue"]]);
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const OnyxProgressSteps = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxProgressSteps/OnyxProgressSteps.vue"]]);
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxRadioButton",
   props: {
@@ -11241,8 +11430,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$c = ["required", "name", "value", "checked", "disabled", "autofocus"];
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$b = ["required", "name", "value", "checked", "disabled", "autofocus"];
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -11282,7 +11471,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
             checked: $setup.props.checked,
             disabled: $setup.disabled,
             autofocus: $setup.props.autofocus
-          }, $setup.restAttrs), null, 16, _hoisted_1$c)), [
+          }, $setup.restAttrs), null, 16, _hoisted_1$b)), [
             [$setup["vCustomValidity"]]
           ]),
           createElementVNode(
@@ -11303,8 +11492,8 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-const OnyxRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue"]]);
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const OnyxRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue"]]);
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "OnyxRadioGroup",
   props: {
     truncation: { type: null, required: false, default: "ellipsis" },
@@ -11351,19 +11540,19 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$b = ["disabled", "aria-label"];
-const _hoisted_2$a = {
+const _hoisted_1$a = ["disabled", "aria-label"];
+const _hoisted_2$9 = {
   key: 0,
   class: "onyx-radio-group__label"
 };
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("fieldset", {
     class: normalizeClass(["onyx-component", "onyx-radio-group", $setup.densityClass, $setup.requiredTypeClass]),
     disabled: $setup.disabled,
     role: "radiogroup",
     "aria-label": $setup.props.label
   }, [
-    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$a, [
+    !$setup.props.hideLabel ? (openBlock(), createElementBlock("legend", _hoisted_2$9, [
       createVNode($setup["OnyxHeadline"], {
         is: "h3",
         class: normalizeClass($setup.requiredMarkerClass)
@@ -11430,11 +11619,11 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     )
-  ], 10, _hoisted_1$b);
+  ], 10, _hoisted_1$a);
 }
-const OnyxRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue"]]);
+const OnyxRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$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"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSegmentedControlElement",
   props: {
@@ -11461,13 +11650,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$a = ["id", "name", "value", "disabled", "aria-label", "autofocus", "checked"];
-const _hoisted_2$9 = ["for"];
+const _hoisted_1$9 = ["id", "name", "value", "disabled", "aria-label", "autofocus", "checked"];
+const _hoisted_2$8 = ["for"];
 const _hoisted_3$6 = {
   key: 1,
   class: "onyx-segmented-control-element__text"
 };
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     mergeProps($setup.rootAttrs, {
@@ -11487,7 +11676,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-label": $setup.props.label,
             autofocus: $setup.props.autofocus,
             checked: $setup.props.checked
-          }), null, 16, _hoisted_1$a)
+          }), null, 16, _hoisted_1$9)
         ]),
         _: 1
         /* STABLE */
@@ -11508,14 +11697,14 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
           1
           /* TEXT */
         )) : createCommentVNode("v-if", true)
-      ], 8, _hoisted_2$9)
+      ], 8, _hoisted_2$8)
     ],
     16
     /* FULL_PROPS */
   );
 }
-const OnyxSegmentedControlElement = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControlElement/OnyxSegmentedControlElement.vue"]]);
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const OnyxSegmentedControlElement = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControlElement/OnyxSegmentedControlElement.vue"]]);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "OnyxSegmentedControl",
   props: {
     density: { type: null, required: false },
@@ -11544,7 +11733,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-segmented-control-skeleton", $setup.densityClass])
@@ -11575,10 +11764,10 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxSegmentedControl = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControl/OnyxSegmentedControl.vue"]]);
+const OnyxSegmentedControl = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSegmentedControl/OnyxSegmentedControl.vue"]]);
 const SELECT_ALIGNMENTS = ["full", "left", "right"];
 const MULTISELECT_TEXT_MODE = ["summary", "preview"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "OnyxSidebarItem",
   props: {
     density: { type: null, required: false },
@@ -11606,7 +11795,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.link ? (openBlock(), createBlock($setup["OnyxRouterLink"], mergeProps({
     key: 0,
     class: $setup.classes
@@ -11630,12 +11819,12 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   ));
 }
-const OnyxSidebarItem = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSidebar/modules/OnyxSidebarItem/OnyxSidebarItem.vue"]]);
+const OnyxSidebarItem = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSidebar/modules/OnyxSidebarItem/OnyxSidebarItem.vue"]]);
 const arrowSmallLeft = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.618 11.626H8.936l3.094-3.094-1.064-1.056-4.899 4.898 4.9 4.9 1.063-1.064-3.094-3.086h8.682z"/></svg>';
 const arrowSmallRight = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.026 7.476 11.97 8.532l3.086 3.094H6.382v1.498h8.674L11.97 16.21l1.056 1.063 4.9-4.898z"/></svg>';
 const sidebarArrowLeft = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.743 3.038H5.258A2.26 2.26 0 0 0 3 5.295V18.78a2.26 2.26 0 0 0 2.258 2.258H18.75a2.25 2.25 0 0 0 2.25-2.25V5.295a2.26 2.26 0 0 0-2.258-2.257M4.5 18.78V5.295c0-.42.338-.757.758-.757H8.25v15H5.258a.755.755 0 0 1-.758-.758m15 .008c0 .412-.337.75-.75.75h-9v-15h8.993c.42 0 .757.337.757.757z"/><path d="m15.218 8.558-3.48 3.48 3.48 3.48 1.064-1.058-2.422-2.423 2.422-2.422z"/></svg>';
 const sidebarArrowRight = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.743 3.038H5.258A2.26 2.26 0 0 0 3 5.295V18.78a2.26 2.26 0 0 0 2.258 2.258H18.75a2.25 2.25 0 0 0 2.25-2.25V5.295a2.26 2.26 0 0 0-2.258-2.257M4.5 18.78V5.295c0-.42.338-.757.758-.757H8.25v15H5.258a.755.755 0 0 1-.758-.758m15 .008c0 .412-.337.75-.75.75h-9v-15h8.993c.42 0 .757.337.757.757z"/><path d="m12.27 9.615 2.423 2.422-2.423 2.423 1.058 1.057 3.48-3.48-3.48-3.48z"/></svg>';
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "OnyxSidebar",
   props: {
     density: { type: null, required: false },
@@ -11723,8 +11912,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$9 = ["aria-label"];
-const _hoisted_2$8 = {
+const _hoisted_1$8 = ["aria-label"];
+const _hoisted_2$7 = {
   key: 0,
   class: "onyx-sidebar__header"
 };
@@ -11734,7 +11923,7 @@ const _hoisted_4$5 = {
   class: "onyx-sidebar__footer"
 };
 const _hoisted_5$5 = { class: "onyx-sidebar__footer" };
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return !$setup.props.temporary && !$setup.shouldCollapse ? (openBlock(), createElementBlock("aside", {
     key: 0,
     ref: "sidebarRef",
@@ -11748,7 +11937,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $setup.props.label,
     style: normalizeStyle($setup.widthStyle)
   }, [
-    !!$setup.slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$8, [
+    !!$setup.slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$7, [
       renderSlot(_ctx.$slots, "header")
     ])) : createCommentVNode("v-if", true),
     createElementVNode("div", _hoisted_3$5, [
@@ -11761,7 +11950,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
       key: 2,
       element: $setup.sidebarElement
     }, $setup.resizeHandleProps), null, 16, ["element"])) : createCommentVNode("v-if", true)
-  ], 14, _hoisted_1$9)) : (openBlock(), createBlock($setup["OnyxModal"], mergeProps({ key: 1 }, $setup.props.temporary, {
+  ], 14, _hoisted_1$8)) : (openBlock(), createBlock($setup["OnyxModal"], mergeProps({ key: 1 }, $setup.props.temporary, {
     ref: "modalRef",
     open: $setup.isModalOpen,
     "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.isModalOpen = $event),
@@ -11813,9 +12002,9 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1040, ["open", "class", "label", "density", "style", "alignment"]));
 }
-const OnyxSidebar = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSidebar/OnyxSidebar.vue"]]);
+const OnyxSidebar = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSidebar/OnyxSidebar.vue"]]);
 const SIDEBAR_ALIGNMENT = ["left", "right"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxStepper",
   props: {
@@ -11932,15 +12121,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$8 = { class: "onyx-stepper__wrapper" };
-const _hoisted_2$7 = ["disabled", "aria-label"];
+const _hoisted_1$7 = { class: "onyx-stepper__wrapper" };
+const _hoisted_2$6 = ["disabled", "aria-label"];
 const _hoisted_3$4 = ["id", "aria-label", "autofocus", "disabled", "min", "max", "name", "placeholder", "readonly", "required", "step", "title"];
 const _hoisted_4$4 = {
   class: "onyx-stepper__display",
   "aria-hidden": "true"
 };
 const _hoisted_5$4 = ["disabled", "aria-label"];
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -11969,7 +12158,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
         "error-messages": $setup.errorMessages
       }), {
         default: withCtx(({ id: inputId }) => [
-          createElementVNode("div", _hoisted_1$8, [
+          createElementVNode("div", _hoisted_1$7, [
             !$setup.props.hideButtons ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
@@ -11980,7 +12169,7 @@ function _sfc_render$c(_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$7)) : createCommentVNode("v-if", true),
+            ], 8, _hoisted_2$6)) : createCommentVNode("v-if", true),
             $setup.props.loading ? (openBlock(), createBlock($setup["OnyxLoadingIndicator"], {
               key: 1,
               class: "onyx-stepper__loading",
@@ -12042,8 +12231,8 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     /* FULL_PROPS */
   ));
 }
-const OnyxStepper = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue"]]);
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const OnyxStepper = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue"]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "OnyxSwitch",
   props: {
@@ -12093,13 +12282,13 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$7 = { class: "onyx-switch-skeleton__click-area" };
-const _hoisted_2$6 = ["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" };
 const _hoisted_6$3 = { class: "onyx-switch__icon" };
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     mergeProps({
@@ -12107,7 +12296,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
       class: ["onyx-component", "onyx-switch-skeleton", $setup.densityClass]
     }, $setup.rootAttrs),
     [
-      createElementVNode("span", _hoisted_1$7, [
+      createElementVNode("span", _hoisted_1$6, [
         createVNode($setup["OnyxSkeleton"], { class: "onyx-switch-skeleton__input" })
       ]),
       !$setup.props.hideLabel ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
@@ -12186,16 +12375,16 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
           2
           /* CLASS */
         )) : createCommentVNode("v-if", true)
-      ], 10, _hoisted_2$6)
+      ], 10, _hoisted_2$5)
     ]),
     _: 1
     /* STABLE */
   }, 16, ["disabled", "error-messages"]));
 }
-const OnyxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue"]]);
+const OnyxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue"]]);
 const SYSTEM_BUTTON_COLORS = ["intense", "soft", "medium"];
 const TABS_INJECTION_KEY = Symbol();
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTab",
   props: {
     density: { type: null, required: false },
@@ -12222,9 +12411,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$6 = ["disabled"];
-const _hoisted_2$5 = { class: "onyx-tab__label" };
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$5 = ["disabled"];
+const _hoisted_2$4 = { class: "onyx-tab__label" };
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     Fragment,
     null,
@@ -12245,7 +12434,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         disabled: $setup.props.disabled
       }), [
-        createElementVNode("div", _hoisted_2$5, [
+        createElementVNode("div", _hoisted_2$4, [
           renderSlot(_ctx.$slots, "tab", {}, () => [
             createTextVNode(
               toDisplayString($setup.props.label),
@@ -12254,7 +12443,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
             )
           ])
         ])
-      ], 16, _hoisted_1$6)),
+      ], 16, _hoisted_1$5)),
       $setup.tabsContext?.panel.value ? (openBlock(), createBlock(Teleport, {
         key: 2,
         to: $setup.tabsContext?.panel.value,
@@ -12275,8 +12464,8 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-const OnyxTab = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue"]]);
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const OnyxTab = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTab/OnyxTab.vue"]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "OnyxTabs",
   props: {
     density: { type: null, required: false },
@@ -12314,7 +12503,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -12341,101 +12530,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     /* CLASS */
   );
 }
-const OnyxTabs = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.vue"]]);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "OnyxTag",
-  props: {
-    density: { type: null, required: false },
-    label: { type: String, required: true },
-    color: { type: null, required: false, default: "neutral" },
-    icon: { type: String, required: false },
-    clickable: { type: [String, Object], required: false },
-    skeleton: { type: [Symbol, Boolean, Number], required: false, default: SKELETON_INJECTED_SYMBOL }
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const { densityClass } = useDensity(props);
-    const skeleton = useSkeletonContext(props);
-    const tagClasses = computed(() => [
-      "onyx-component",
-      "onyx-tag",
-      `onyx-tag--${props.color}`,
-      { "onyx-tag--interactive": props.clickable },
-      densityClass.value
-    ]);
-    const __returned__ = { props, densityClass, skeleton, tagClasses, OnyxIcon, OnyxSkeleton, OnyxTooltip };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-const _hoisted_1$5 = { class: "onyx-text onyx-truncation-ellipsis" };
-const _hoisted_2$4 = { class: "onyx-text onyx-truncation-ellipsis" };
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
-    key: 0,
-    class: normalizeClass(["onyx-tag-skeleton", $setup.densityClass])
-  }, null, 8, ["class"])) : $setup.props.clickable ? (openBlock(), createBlock($setup["OnyxTooltip"], {
-    key: 1,
-    text: typeof $setup.props.clickable === "object" ? $setup.props.clickable.label : $setup.props.clickable
-  }, {
-    default: withCtx(({ trigger }) => [
-      createElementVNode(
-        "button",
-        mergeProps(trigger, {
-          class: $setup.tagClasses,
-          type: "button"
-        }),
-        [
-          $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
-            key: 0,
-            icon: $setup.props.icon,
-            inline: ""
-          }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-          createElementVNode(
-            "span",
-            _hoisted_1$5,
-            toDisplayString($setup.props.label),
-            1
-            /* TEXT */
-          ),
-          typeof $setup.props.clickable === "object" && $setup.props.clickable.actionIcon ? (openBlock(), createBlock($setup["OnyxIcon"], {
-            key: 1,
-            icon: $setup.props.clickable.actionIcon,
-            inline: ""
-          }, null, 8, ["icon"])) : createCommentVNode("v-if", true)
-        ],
-        16
-        /* FULL_PROPS */
-      )
-    ]),
-    _: 1
-    /* STABLE */
-  }, 8, ["text"])) : (openBlock(), createElementBlock(
-    "div",
-    {
-      key: 2,
-      class: normalizeClass($setup.tagClasses)
-    },
-    [
-      $setup.props.icon ? (openBlock(), createBlock($setup["OnyxIcon"], {
-        key: 0,
-        icon: $setup.props.icon,
-        inline: ""
-      }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-      createElementVNode(
-        "span",
-        _hoisted_2$4,
-        toDisplayString($setup.props.label),
-        1
-        /* TEXT */
-      )
-    ],
-    2
-    /* CLASS */
-  ));
-}
-const OnyxTag = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTag/OnyxTag.vue"]]);
+const OnyxTabs = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxTabs/OnyxTabs.vue"]]);
 const circleAttention = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.25 16.5h1.5V18h-1.5zM12.75 6h-1.5v8.25h1.5z"/><path fill-rule="evenodd" d="M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21m6.364 16.864A9 9 0 1 1 21 12a8.94 8.94 0 0 1-2.636 6.364" clip-rule="evenodd"/></svg>';
 const useFileSize = () => {
   const { locale } = injectI18n();